@charset "UTF-8";

/*
==================================================

   FAQ本体

==================================================
*/



/*
==================================================
  FAQ
==================================================
*/

#faq ul.faq {
margin: 0 10px;
padding: 0;
text-align: left;
list-style-type: none;
}
#faq ul.faq li {
margin: 0 0 20px;
}
/* 質問部分 */
#faq details summary {
display: flex;
align-items: center;
box-sizing: border-box;
width: 100%;
padding: 10px 30px 8px;
background: #f5f5f5;
border: 1px #c0c0c0 solid;
border-radius: 5px;
cursor: pointer;
transition: 0.1s;
}
#faq details summary::-webkit-details-marker {
display: none;
}
#faq details summary span {
display: inline-block;
width: 45px;
height: 45px;
background: #1466b7;
border-radius: 50%;
font-size: 20px;
font-weight: bold;
color: #ffffff;
text-align: center;
line-height: 45px;
}
#faq details summary b {
flex: 1;
display: inline-block;
margin: 2px 20px 0;
font-size: 120%;
text-align: left;
line-height: 1.6;
}
/* 矢印アイコン */
#faq details summary i.open-arrow {
display: inline-block;
position: relative;
margin: 0 0 0 auto;
width: 40px;
height: 40px;
background: #ffffff;
border-radius: 50%;
}
#faq details summary i.open-arrow::before {
content: '';
position: absolute;
top: 0;
bottom: 3px;
right: 15px;
width: 10px;
height: 10px;
margin: auto;
border-top: 2px #1466b7 solid;
border-right: 2px #1466b7 solid;
transform: rotate(135deg);
transition: 0.4s;
}
#faq details[open] summary i.open-arrow::before {
top: 3px;
bottom: 0;
transform: rotate(-45deg);
}
/* 回答部分 */
#faq details::details-content {
transition: 0.2s ease-out;
}
#faq details:not([open])::details-content {
height: 0;
padding: 0 30px;
opacity: 0;
}
#faq details[open]::details-content {
height: auto;
padding: 30px 30px;
opacity: 1;
}
#faq details div.ans {
display: flex;
}
#faq details div.ans span {
display: inline-block;
width: 50px;
font-size: 30px;
font-weight: bold;
color: #ea4747;;
text-align: center;
}
#faq details div.ans div {
flex: 1;
margin: 0 0 0 18px;
}
#faq details div.ans div p {
margin: 0 0 3px;
line-height: 1.8;
}
#faq details div.ans div p:last-child {
margin: 0;
}



/* ----- ★834 ----- */
@media screen and (max-width: 834px) {

#faq ul.faq {
margin: 0;
}
/* 質問部分 */
#faq details summary {
padding: 10px 10px 9px;
}
#faq details summary span {
width: 32px;
height: 32px;
font-size: 16px;
line-height: 32px;
}
#faq details summary b {
margin: 2px 10px 0;
font-size: 100%;
line-height: 1.5;
}
/* 矢印アイコン */
#faq details summary i.open-arrow {
width: 32px;
height: 32px;
}
#faq details summary i.open-arrow::before {
bottom: 2px;
right: 12px;
width: 8px;
height: 8px;
}
/* 回答部分 */
#faq details:not([open])::details-content {
padding: 0 10px;
}
#faq details[open]::details-content {
padding: 20px 10px;
}
#faq details div.ans span {
width: 30px;
font-size: 20px;
line-height: 1.4;
}
#faq details div.ans div {
margin: 0;
}
#faq details div.ans div p {
font-size: 100%;
}

}
/* ----- /834 ----- */