@charset "utf-8";

/*---------------
 タイトル部分
-----------------*/
.titleWrap{
 position: relative;
 height: 340px;
 background: url("/qa/images/bg_title.jpg") no-repeat center;
 background-size: cover;
 margin-bottom: 100px;
 padding: 142px 0 0 18.9%;
}
.titleWrap h1{
 display: inline-block;
 text-align: center;
 font-size: 3rem;
 letter-spacing: 0.1em;
}
.titleWrap h1 span{
 margin-top: 20px;
 font-size: 1.6rem;
 font-weight: 300;
}
.titleWrap div{
 display: inline-block;
 text-align: center;
 font-size: 3rem;
 letter-spacing: 0.1em;
}
.titleWrap div h1{
 font-size: 3rem;
 letter-spacing: 0.1em;
}
.titleWrap div span{
 margin-top: 20px;
 font-size: 1.6rem;
 font-weight: 300;
 letter-spacing: 0.19em;
}


/*--------------
コンテンツ
---------------*/
/*sectionレイアウト*/
.contentArea{
 width: 880px;
 margin: 0 auto 140px;
}
.contentArea section:not(:last-of-type){ margin-bottom: 100px;}
.contentArea section h2{
 font-size: 2.6rem;
 letter-spacing: 0.1em;
 margin-bottom: 45px;
 text-align: center;
}
.contentArea section > p{
 font-size: 1.4rem;
 line-height: 2.7rem;
 text-align: center;
}
.contentArea section.handlingQa h2{ margin-bottom: 24px;}
.contentArea section.handlingQa > p{ margin-bottom: 45px;}

.contentArea a{
 color: #003f7e;
 border-bottom: 1px solid #003f7e;
 transition: border-color 0.1s;
}
.contentArea a:hover{ border-color: rgba(255,255,255,0);}



/*qaのレイアウト*/
.contentArea dl{ margin-bottom: 30px;}
.contentArea dl dt{
 height: 70px;
 padding: 28px 0 0 72px;
 font-size: 1.6rem;
 font-weight: 500;
 background-color: #f9f9f9;
 position: relative;
 cursor: pointer;
}
.contentArea dl dd{
 font-size: 1.4rem;
 line-height: 2.4rem;
 padding: 30px 0 20px 90px;
 display: none;
 text-align: justify;
 text-justify: inter-ideograph;
}
.contentArea dl dd > div{ position: relative;}

/*Q.とA.*/
.contentArea dl dt::before,
.contentArea dl dd > div::before{
 display: block;
 font-size: 2.4rem;
 font-weight: 400;
 position: absolute;
 color: #003f7e;
}
.contentArea dl dt::before{
 content: "Q.";
 color: #003f7e;
 top: 21px;
 left: 36px;
}
.contentArea dl dd > div::before{
 content: "A.";
 color: #ffc554;
 top: -2px;
 left: -35px;
}

/*プラスマイナスアイコン*/
.contentArea dl dt .plusMinus{
 display: block;
 width: 18px;
 height: 18px;
 position: absolute;
 top: 26px;
 right: 30px;
}
.contentArea dl dt .plusMinus::before,
.contentArea dl dt .plusMinus::after{
 content: "";
 display: block;
 background-color: #003f7e;
 position: absolute;
}
.contentArea dl dt .plusMinus::before{
 width: 100%;
 height: 2px;
 top: 8px;
 left: 0;
}
.contentArea dl dt .plusMinus::after{
 width: 2px;
 height: 100%;
 top: 0;
 left: 8px;
 transition: transform 0.3s;
}
.contentArea dl dt.open .plusMinus::after{ transform: rotate(90deg);}

/*中身*/
.contentArea dd .flexBox{
 display: flex;
 justify-content: space-between;
 align-items: flex-start;
}
.contentArea dd img{
 display: block;
 flex-shrink: 0;/*firefoxで縮まないように*/
}
.contentArea dd > div:not(.flexBox) img{ margin-top: 25px;}
.contentArea dd .flexBox > img,
.contentArea dd .flexBox figure,
.contentArea dd .flexBox .right{ margin-left: 34px;}
.contentArea dd figure figcaption{
 font-size: 1.2rem;
 line-height: 2rem;
 margin-top: 13px;
}
.contentArea dd h3{ margin-top: 25px;}

.contentArea dd .flexBox img.img_photo {width:300px;height:auto;}

/*qa個別のレイアウト*/
.contentArea dd figure.padding{ padding-top: 15px;}
.contentArea dd figure figcaption.center{ text-align: center;}
.contentArea dd img + p{ margin-top: 20px;}
.contentArea dd ul{ margin-bottom: 7px;}
.contentArea dd ul li::before{
 content: "";
 display: inline-block;
 width: 10px;
 height: 10px;
 border-radius: 50%;
 background-color: #00a59f;
 margin-right: 4px;
}
.contentArea dd .flexBox .right h3{ margin: 0 0 15px 0;}


/*table*/
.contentArea dd table{
 width: 384px;
 border-collapse: collapse;
 margin: 10px 0;
}
.contentArea dd table th,
.contentArea dd table td{
 border: 2px solid #fff;
 text-align: center;
 background-color: #eeefef;
 line-height: 1.8rem;
 font-weight: 300;
}
.contentArea dd table tr th:first-of-type{ background-color: #fff1ad;}
.contentArea dd table.leftTable th{
 width: 97px;
 padding: 28px 0;
}
.contentArea dd table.leftTable tr td:nth-of-type(1){ width: 50px;}
.contentArea dd table.leftTable tr td:nth-of-type(2){ width: 62px;}
.contentArea dd table.leftTable tr td:nth-of-type(3){
 padding: 20px 15px;
 text-align: justify;
 text-justify: inter-ideograph;
 line-height: 2.4rem;
}
.contentArea dd table.rightTable th,
.contentArea dd table.rightTable td{ padding: 18px 0 16px;}
.contentArea dd table.rightTable tr th:first-of-type{ width: 218px;}
.contentArea dd table.rightTable tr td:nth-of-type(1){ width: 82px;}
.contentArea dd table + p{
 font-size: 1.2rem;
 text-align: right;
}



/*---------------
表示
-----------------*/
.sp {display: none !important;}
.pc {display: block !important;}