@charset "UTF-8";

.contents{ width: 1000px; margin: 0 auto; /*padding-bottom: 46px;*/ text-align: left;}
.heading{ font-size: 4.0rem; margin-top: 20px;}
.title{ font-size: 2.4rem;}
.sub-title{ font-size: 2.8rem; margin-top: 40px; margin-bottom: 10px; border-bottom: 3px #ED7901 solid;}

.section{ margin: 60px 0 0;}
.section-title{ font-size: 2.4rem; border-bottom: 3px #ED7901 solid; margin-bottom: 30px;}
.section-title .note{ font-size: 1.8rem}

#tabAccordion { margin: 40px auto 0; width: 1000px; height: 1200px;  position: relative;}

#tabAccordion dl {top: 0; left: 0; width:100%; position: absolute;}
#tabAccordion dl dt{ top: 0; left: 0; font-weight: bold; position: absolute; box-sizing: border-box; overflow: hidden;font-size:2.0rem;}
#tabAccordion dl dt i{ opacity: 0.5;}
#tabAccordion dl dt a:hover{opacity: 0.5; text-decoration: none;}

#tabAccordion dl:nth-child(1) dt{ text-align: center;}
#tabAccordion dl:nth-child(1) dt a{color:#666; /*background: #ECF4D9;*/ text-align: center;}
#tabAccordion dl:nth-child(1) dd{ background: #FFF;}
#tabAccordion dl:nth-child(2) dt{ text-align: center;}
#tabAccordion dl:nth-child(2) dt a{color:#666; /*background: #ECF4D9;*/ text-align: center;}
#tabAccordion dl:nth-child(2) dd{ background: #FFF;}

#tabAccordion dl dt a {display: block;padding: 5px 0;text-align: center;-moz-transition: all 0.2s linear;-webkit-transition: all 0.2s linear;transition: all 0.2s linear;}

#tabAccordion dl dt.btnAcv a{color: #fff;}
#tabAccordion dl:nth-child(1) dt.btnAcv a{background: #F5A101; }
#tabAccordion dl:nth-child(2) dt.btnAcv a{background: #F5A101; }
#tabAccordion dl dt.btnAcv i{opacity: 1; color: #F5A101;}

#tabAccordion dl dd {top: 75px; left: 0px; padding: 0px; width: 1000px;text-align: center; display: none;color: #000; position: absolute; box-sizing: border-box;background:#fff; text-align: left;}


@media only screen and (min-width: 768px) {/*PC*/

#tabAccordion.guide dl dt {width: 500px;}
#tabAccordion.guide dl:nth-child(1) dt {left: 0px;}
#tabAccordion.guide dl:nth-child(2) dt {left: 500px;}
#tabAccordion dl dt a{border-left: 1px solid #CCC;}
#tabAccordion dl:last-child dt a{border-right :1px solid #CCC;}
}

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

.contents{ width: 90%; height: auto; margin-top: 100px;}
.heading{ font-size: 3.0rem; margin-top: 20px;}

.section{ margin: 40px 0 0;}
.title{ font-size: 1.6rem; width: 100%;}
.section-title{ font-size: 1.8rem;}
.section-title .note{ font-size: 1.4rem}

#tabAccordion { width: 100%; height: auto; margin:auto; padding-top: 20px; padding-bottom:15px;}
#tabAccordion dl { top: auto; left: auto; width: 100%; margin:auto;position: relative; box-sizing: border-box;}
#tabAccordion dl dt { top: 0; left: 0; width: 100%; position: relative; text-align: left; font-size: 1.2rem;}
#tabAccordion dl dt i{ display: none}
#tabAccordion dl dt a { text-align: left; border: 1px solid #ccc; padding:12px;}
#tabAccordion dl dd { top: auto; left: auto; padding: 0; width: 100%; height: auto; position: relative; display: none; overflow: hidden;}
#tabAccordion dl dt a:after{ font-size: 12px; position: absolute; right: 12px; top: 16px;}
#tabAccordion dl dt > a:after{ content: "OPEN ▼"; font-family: 'Fira Sans Condensed', sans-serif; color: #999;}
#tabAccordion dl dt.btnAcv a:after{ content: "CLOSE ▲"; font-family: 'Fira Sans Condensed', sans-serif; color: #ececec;}

#tabAccordion dl:nth-child(1) dt a{ text-align: left;}
#tabAccordion dl:nth-child(2) dt a{ text-align: left;}

}