@charset "utf-8";

/* よくある質問  faq
======================================================*/

.pt0 {  padding-top: 0 !important;}
.pt2 {  padding-top: 16px !important;}
.pt4 {  padding-top: 32px !important;}

.pb0 {  padding-bottom: 0 !important;}
.pb2 {  padding-bottom: 16px !important;}
.pb4 {  padding-bottom: 32px !important;}

/* anker_link ================== */
#hhog-faq .anker_link{
/*outline: 2px dashed red;*/
display: flex;
justify-content: space-between;
align-items: flex-start; /*画像の間延び禁止*/

background-image: url("/product/img/hhog/index_2/img_15.png");
background-repeat: no-repeat;
background-size: 100%;
background-position: center top;

padding: 5rem 2rem 3rem;
margin-bottom: 0;
}

#hhog-faq .anker_link figure{
width: 77px;
}
#hhog-faq .anker_link figure img{
width: 100%;
}

#hhog-faq .anker_link ul{
display: grid;
  grid-template-columns: repeat(3, 1fr); /* 横3列 */
  grid-template-rows: 1fr 1fr;            /* 縦2行（高さ均等） */
  gap: 2rem;
	width: calc(100% - 110px);
	margin-left: auto;
}
#hhog-faq .anker_link ul li a{
display: block;
dominant-baseline: 1.6rem;
font-weight: 700;
padding: 10px;
text-align: center;
background: rgba(255,255,255,.8);
border-radius:25px;
border:2px solid #01AAE1;
box-shadow:0 3px 0 rgba(0,0,0,.1);
text-decoration: none;
}
#hhog-faq .anker_link ul li a:hover{
color:#fff;
background: #01AAE1;
}


/* anker_link bottom ================== */

#hhog-faq .anker_link.bottom{
/*outline: 2px dashed red;*/
display: block;
background-image: url("/product/img/hhog/index_2/img_14.png");
background-position: center bottom;
padding: 0 2rem 8rem;
margin-top: 12rem;
margin-bottom: 12rem;
}

#hhog-faq .anker_link.bottom ul{
	width:90%;
	margin-left: auto;
	margin-right: auto;
}
#hhog-faq .anker_link ul li a{
box-shadow:none;
font-weight:700;
font-size: 1.5rem;
padding: .8rem;
}


@media only screen and (max-width:640px) {
 
 #hhog-faq .anker_link ul{
  grid-template-columns: repeat(2, 1fr); /* 横3列 */
  grid-template-rows: 1fr 1fr;            /* 縦2行（高さ均等） */
  gap:1.5rem;
		width: calc(100% - 90px);
}
}/*640*/


@media only screen and (max-width:428px) {
 #hhog-faq .anker_link ul{
  grid-template-columns: repeat(1, 1fr); /* 横3列 */
  grid-template-rows: 1fr 1fr;            /* 縦2行（高さ均等） */
  gap:1rem;
}

}/*480*/






/* h2 ============================== */

.faq_h2{
font-size: 2.6rem;
font-weight: 700;
text-align: center;
padding-top:6rem;
padding-bottom:4rem;
color: #0068B7;
}

.faq_h2.chara2{
background-image: url("/product/img/hhog/index_2/img_16_2.png");
background-repeat: no-repeat;
background-size:97px;
background-position: left center;
}
.faq_h2.chara2_nanasi{
background-image: url("/product/img/hhog/index_2/img_16.png");
background-repeat: no-repeat;
background-size:97px;
background-position: left center;
}
.faq_h2.chara3{
background-image: url("/product/img/hhog/index_2/img_18_2.png");
background-repeat: no-repeat;
background-size:70px;
background-position: right center;
}
.faq_h2.chara3_nanasi{
background-image: url("/product/img/hhog/index_2/img_18.png");
background-repeat: no-repeat;
background-size:70px;
background-position: right center;
}

@media only screen and (max-width:480px) {

.faq_h2{
font-size: 2.4rem;
padding-top:6rem;
padding-bottom:2rem;
}
.faq_h2.chara2{
background-size:20%;
}
.faq_h2.chara2_nanasi{
background-size:20%;
}
.faq_h2.chara3{
background-size:15%;
}
.faq_h2.chara3_nanasi{
background-size:15%;
}



}/*480*/


/* faq ============================= */
body.hhog section.faq .in-container{
/*outline: 1px dashed red;*/
}

body.hhog section.faq .box_h2{
/*outline: 1px dashed red;*/
height: 188px;

display: flex;
justify-content: space-between;
gap: 40px;
flex-wrap: wrap;
 /*align-items: flex-start;   画像の間延び禁止*/
align-items: center;
}

body.hhog section.faq .box_h2 figure{
/*outline:1px dashed #2837FF;*/
height: 100%;
}
body.hhog section.faq .box_h2 figure img{
height: 100%;
}

body.hhog section.faq .box_h2 figure.character_1{
height: 85%;
}


body.hhog section.faq .mod_h2{
font-size:3.4rem;
font-weight: 700;
text-align: center;
color: #0068B7;
position: relative;
}
body.hhog section.faq .mod_h2::after {
content: "";
position: absolute;
bottom: -2rem;
left: 50%;
transform:translateX(-50%);
width: 70px;       /* 罫線の長さ */
height: 1px;       /* 罫線の太さ */
background: #0068B7;  /* 色は適宜 */
}


body.hhog section.faq ul.list_faq>li{
margin-top: 4rem;}

/* question */
body.hhog section.faq ul.list_faq>li .question{
display: flex;
gap:1rem;
align-items: center;
}
body.hhog section.faq ul.list_faq>li .question .ico_q{
width: 50px;
height: 62px;
display: inline-block;
background:url(/product/img/hhog/index_2/ico_q.svg) no-repeat center center;
background-size: 47px 62px;
text-align: center;
color: #fff;
padding-top: 1rem;
font-size: 30px;
margin-right: 1rem;
}

 @media only screen and (max-width:480px) {
 
body.hhog section.faq ul.list_faq>li .question .ico_q{
background-size:40px;
font-size: 24px;
padding-top: 1.7rem;
}
}/*480*/


 @media only screen and (max-width:480px) {
 
body.hhog section.faq ul.list_faq>li .question .ico_q{
background-size:40px;
font-size: 24px;
padding-top: 1.7rem;
}
}/*480*/



body.hhog section.faq ul.list_faq>li .question .txt_q{
font-size:2rem;
font-weight: 700;
width: calc(100% - 57px);
}

/* answer */
body.hhog section.faq ul.list_faq>li .answer{
/*outline: 1px dashed #2309FF;*/
display: flex;
gap:1rem;
margin-top: 2rem;
}

body.hhog section.faq ul.list_faq>li .answer .ico_a{
font-size: 24px;
width: 50px;
text-align: center;
border-right:1px solid #0068B7;
margin-right: 1rem;

}
body.hhog section.faq ul.list_faq>li .answer .txt_a{
font-weight: 400;
width: calc(100% - 60px);

}
body.hhog section.faq .link_next{
text-align: right;
margin-top: 2rem;
}