@charset "UTF-8";
body{
color:#333333;
line-height:1.8;
box-sizing: border-box;
overflow-x: hidden;
font-family:Arial, Helvetica, "sans-serif"   
}

.manga img {
display: block;
width: 95%;
margin: 3px auto;
}

h2{
padding: 0.4em 0.5em;
color: #494949;
background: #f4f4f4;
border-bottom: solid 3px #e06e42;
margin-bottom: 2em;
text-align: center;
font-size: 1.2em;
}
h3 {
padding: 0.6em;
background: #3399cccc;
color: #fff;
margin: 0 auto 1.5em auto;
font-size: 1.3em; 
border-radius: 5px; 
}

h4 {
color: #272727;
 border-bottom: dashed 2px #e44343;
 margin-bottom: 0.5em;
font-size: 1.2em;    
}
p{
font-size: 16px;
margin: 2em 0;    
}
a{
  color: inherit;
  text-decoration: none;
}
ul{
list-style-type:none
}
ul li, ol li {
  line-height: 1.5; /*文の行高*/
  margin-bottom: 0.5em;

}
img{
  width: 100%;
  max-width: 640px;
}
.aka{
  color: #D50306;
  font-weight: bold;
  background:linear-gradient(transparent 40%, #FFFF00 0%);
}
.ye{
background:linear-gradient(transparent 70%, #FFFF00 0%);
}
.green{
color: #009612;
font-weight: bold
}
.pg{
color: #717171
}
.wev{
text-decoration:underline;/*下線を引く*/
text-decoration-style:wavy;/*下線を波線で表示*/
}
.bgr{
background: #a50000;
color: #fff;
padding: 1em 0
}
.center{
	text-align: center;
}
.left{
text-align: left
}
.right{
text-align: right;
}
.mar2{
	margin-bottom: 2em;
}
.both{
	clear: both
}
.txts{
	font-size: 0.8em
}
.txtl{
	font-size: 2em;
}
.fright{
	float: right
}
.fleft{
	float: left
}
.ichioshitit{
padding-left: 54px;
position: relative;
margin-bottom: 0;
}
.ichioshi{
width: 54px;
position: absolute;
top: -10px;
left: 0;
}


div.kuchikomi {
    border: #A2CE84 2px solid;
    border-radius: 0px;
    margin: 30px 10px 0 10px;
    padding: 10px 20px 20px 20px;
}

div.kuchikomi p {
	font-size: 9px;
    font-size: 0.9rem;
}


div.kuchikomi h5 {
    font-size: 13px;
    font-size: 1.3rem;
    line-height: 2;
    font-weight: bold;
    color: #A2CE84;
    border-bottom: dotted 2px #A2CE84;
}

div.kuchikomi h5:before {
    content: '\f075';
    font-family: "Font Awesome 5 Free";
    -webkit-font-smoothing: antialiased;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    font-weight: bold;
    display: inline-block;
    margin-right: 0.5em;
}

p.plus {
    margin: 5px 10px 0 10px;
    line-height: 1.4;
    font-size: 10px;
    color: #8B8A8A;
}

div.cross {
    background: #F6F2BD;
    border-radius: 5px;
    margin: 15px 5px 15px 5px;
    padding: 10px 10px 10px 15px;
}

div.cross li {
    margin: 0;
    list-style: none;
    color: #535353;
    font-size: 9px;
    font-size: 1rem;
    line-height: 1.1;
}

div.cross li::before {
    content: "×";
    color: rgb(255, 0, 0);
    display: inline-block;
    font-size: 1.8rem;
    margin-right: 5px;
    vertical-align: -2px;
}




.cps-post-main ul > li:before, .cps-post-main ol > li:before {
    background-color: #ffcd44!important;
}

div.kuchikomi_inner {
    display: flex;
}


.kuchikomi_inner img {
	width: 70px;
	height: 70px;
	
}

.kuchikomi_inner p.txt {
    margin: 20px 0 0 10px;
  
}


.kuchikomi_inner p.img_user {
    margin: 20px 0 10px 0;
    height: auto;
}

p.name {
    font-size: 14px;
    font-size: 1.4rem;
    text-align: right;
}

.fa-check{
    color: red;
    padding-right: 3px;
}

.list_disc{
    list-style: disc;
    border-radius: 20px;
    padding: 0.8em;
    background-color: #FFE4E1;
}

.list_disc li{
    margin-left: 1em;
    margin-bottom: 0;
}

.bold{
    font-size: 1.2em;
    font-weight: bold;
}

.s_bold{
     font-weight: bold;
}

.red_line{
    border-bottom: 1px solid #a50000;}


.pr{
    font-size: 0.7em;
    color: #555555;
    margin: 0;
    text-align: right;
}

.blue{
    color: #508bfb;
}

.smallgray{
    font-size: 0.7em;
    color: gray;
    font-weight: 200;
}

.bt{
    width: 80%;
}

.right_green{
    color: #fdf36a;
    font-weight: bold;
    padding: 5px;
    border: 2px solid #006837;
    border-radius: 5px;
    background-color: #469b2b;
    margin: 0 5px;
}

.bt_before{
    font-weight: bold;
    font-size: 1.1em;
    margin: 0;
}



/* ----- 共通 ----- */

.talk {
margin-bottom: 40px;
}

.talk figure img {
width: 100%;
height: 100%;
border: 2px solid #9ce191;
border-radius: 50%;
margin: 0;
}
.talks figure img {
width: 100%;
/* height: 100%; */
border: none;
border-radius: 0%;
margin: 0;
}

/* 画像の下のテキスト */
.talk-imgname {
padding: 0 0;
font-size: 10px;
text-align: center;
}

p.talk-text {
margin: 0 0 8px;
font-size: 0.85em;
line-height: 1.5em;
}

p.talk-text:last-child {
margin-bottom: 0px;
}

/* 回り込み解除 */
.talk:after,.talk:before {
clear: both;
content: "";
display: block;
}

/* ----- 左の場合 ----- */

/* 左画像 */
.talk-Limg {
margin-left: 4px;
margin-top: -1px;
float: left;
width: 80px;
height: 80px;

}

/* 左からの吹き出しテキスト */
.talk-Ltxt {
color: #444;
position: relative;
margin-left: 100px;
padding: 0.8em;
border: 3px solid #9ce191;
background-color: #fff;
border-radius: 20px;
}
.talks .talk-Ltxt {
color: #444;
position: relative;
margin-left: 100px;
padding: 0.8em;
border: 3px solid #ff9900;
background-color: #fff;
border-radius: 20px;
}
.talks .talk-text {
line-height: 2;
}

/* 左の三角形を作る */
.talk-Ltxt:before {
position: absolute;
content: '';
border: 10px solid transparent;
border-right: 10px solid #9ce191;
top: 15px;
left: -20px;
}
.talks .talk-Ltxt:before {
position: absolute;
content: '';
border: 10px solid transparent;
border-right: 10px solid #ff9900;
top: 15px;
left: -20px;
}

.talk-Ltxt:after {
position: absolute;
content: '';
border: 10px solid transparent;
border-right: 10px solid #fff;
top: 15px;
left: -16px;
}

/* ----- 右の場合 ----- */

/* 右画像 */
.talk-Rimg {
margin-right: 4px;
margin-top: -1px;
float: right;
width: 80px;
height: 80px;

}

/* 右からの吹き出しテキスト */
.talk-Rtxt {
position: relative;
margin-right: 100px;
padding: 0.8em;
border: 3px solid #9ce191;
background-color: #ebffe7;
border-radius: 20px;
}

/* 右の三角形を作る */
.talk-Rtxt:before {
position: absolute;
content: '';
border: 10px solid transparent;
border-left: 10px solid #9ce191;
top: 15px;
right: -23px;
}

.talk-Rtxt:after {
position: absolute;
content: '';
border: 10px solid transparent;
border-left: 10px solid #ebffe7;
top: 15px;
right: -19px;
}

/*----header---------------------------------------*/
header {
width: 100%;
padding: 1em 0;
background: #b2e0f7;
margin-bottom: 1em;
}
.inn640{
max-width: 640px;
margin: auto
}
h1{
margin-left: 10px
}

/* header----------------------------- */
#all{
width: 100%;
max-width: 640px;
margin: auto;
background: white;
}
#topcnt{
margin: 0;
padding: 0;
line-height: 1;
}
#topcnt ul{
border: solid 3px #e90000;
width: 82%;
margin: auto;
padding: 1em
}
#topcnt li{
font-weight: bold
}
#topcnt i{
color: #e90000;
margin-right: 10px;
}
.cnt1{
padding: 2em 1em 0;
margin-bottom: 1em
}
.card{
width: 96%;
margin: auto;
padding: 0.5em;
background: #fffde8
}
.cardimg{
width: 60%;
margin: 1em auto;
}
.point{
width: 100%;
margin:0 auto 1em;
font-size: 0.9em;
font-weight: bold;
}
.point i{
color: #e90000;
margin-right: 4px
}
.hyou {
  border: 1px solid #adabab;
  border-radius: 4px;
  width: 100%;
  vertical-align: middle;
  margin: 0 auto 1em;
}
.hyou th {
  background: #d9f58d;
  padding: 8px;
  border-right: 1px solid #adabab;
  border-bottom: 1px solid #adabab;

  box-sizing: border-box;
  font-size: 0.9em;
  color: #1b0907
}
.hyou td {
  padding: 8px;
  border-right: 1px solid #adabab;
  border-bottom: 1px solid #adabab;
  box-sizing: border-box;
  background: #fff;
  font-size: 0.9em;
  vertical-align: middle;
  text-align: center
}
/*----------------------QA--------------------------*/
.accbox {
  margin: 0  auto;
  padding: 0;
  width: 96%;
  max-width: 900px;
    border: 1px dashed #a50000;
    border-radius: 20px;
}

/*ラベル*/
.accbox label {
  display: block;
  margin: 1.5px 0;
  padding : 13px 12px;
  cursor :pointer;
  transition: all 0.5s;
  font-weight: bold;
  text-align: left
}
.accbox label:before {
    content: '\f0a4';
    font-family: 'FontAwesome';
    padding-right: 8px;
    color: #bd0c1d
}

/*ラベルホバー時*/
.accbox label:hover {
  background :#;
}
/*チェックは隠す*/
.accbox input {
  display: none;
}
/*中身を非表示にしておく*/
.accbox .accshow {
  height: 0;
  padding: 0;
  overflow: hidden;
  opacity: 0;
  /*transition: 0.8s;*/
}
/*クリックで中身表示*/
.cssacc:checked + label + .accshow {
  height: auto;
  padding: 1em;;
  background: #efefef;
  opacity: 1;
}*/
.accbox .accshow p {
  margin: 15px 10px;
}
.cssacc:checked + label:before {
    content: '\f078';/*切替後のアイコン*/
}
/*----------------------/QA--------------------------*/


.step {
  background: #fffde8;
  box-shadow: 0px 0px 0px 10px #fffde8;/*線の外側*/
  border: dashed 2px #ffb03f;/*破線*/
  border-radius: 9px;
  margin: 1em 10px 2em;
  padding: 0.5em 0.5em 0.5em 2em;
}

.step li {
  line-height: 1.5;
  padding: 0.5em 0;
}
.btn-gradient-3d-simple {
display: inline-block;
padding: 0.5em 1.5em;
text-decoration: none;
border-radius: 4px;
color: #fff;
font-weight: bold;
font-size: 1.2em;
background-image: linear-gradient(#ec4050 0%, #d60015 100%);
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
border-bottom: solid 3px #9e0715;
}

.btn-gradient-3d-simple:active {
  -webkit-transform: translateY(4px);
  transform: translateY(4px);
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
  border-bottom: none;
}
footer{
width: 100%;
margin-top: 2em;
text-align: center;
background: #03719F;
color: #fff;
font-size: 0.8em;
padding: 0.5em 0;
}


.cardpoint2{
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 10px;
  margin-bottom: 2rem;
}
.imgleft2{
  /* top: 0; */
  /* width: 250px; */
  width: 20%;
}
.img-wrapper{
  width: 50%;
  margin: 0 auto;
}
.img-wrapper img{
  width: 100%;
}
.comment.red {
  border-color: #ff9900;
}
.comment {
  background: #ffffff;
  border: 2px solid #333;
  position: relative;
  border-radius: 12px;
  padding: 1rem;
}
.box-right {
  /* width: calc(100%/2); */
  width: 80%;
  display: inline-block;
  box-sizing: border-box;
  padding: 10px;
  text-align: left;
}
.comment.red::before {
  border-right-color: #ff9900;
}

.comment::before, .comment::after {
  right: 100%;
  top: 30%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.comment::after {
  border-color: rgba(51, 51, 51, 0);
  border-right-color: #fff;
  border-width: 15px;
  margin-top: -15px;
}
.comment::before {
  content: "";
  border-color: rgba(255, 255, 255, 0);
  border-right-color: #333;
  border-width: 18px;
  margin-top: -18px;
}
.comment p{
  margin: 1rem 0;
}
.bt{
  display: block;
  /* position: absolute; */
  /* transform: translateY(50%); */
  animation:1s ease-in 1s infinite alternate forwards running anime;
}

@keyframes anime {
  0%{
    transform: translateY(10%);
  }
  100%{
    transform: translateY(0%);
  }
}

ul{
  list-style: none !important;
}
small{
  font-size: 8px;
}

.list_span{
  color: red;
}

@media screen and (max-width : 400px) {
  .talk-text br{
    display: none;
  }
  }