@charset "utf-8";
body section * { box-sizing: border-box;}
#pageNav { margin-bottom: 3px;}
.secttl { font-size: 26px; font-weight: bold; text-align: center; margin-bottom: 10px;}
.secttl-deco { font-size: 12px; color: #109a93; font-weight: bold; text-align: center; display: block;}
.seclead { font-size: 16px; font-weight: bold; text-align: center; margin-bottom: 30px;}

.textdeco { color: #109a93; font-weight: bold;}

.linkbtn { margin-top: 60px; text-align: center;}
.linkbtn a { display: inline-block; background-color: #109a93; padding: 15px; color: #fff; font-size: 18px; font-weight: bold; width: 100%; max-width: 386px;}

@media screen and (max-width: 480px) {
.secttl { font-size: 22px;}
.linkbtn { margin-top: 30px;}
}






/* idx */
.boxlist { display: flex; gap: 15px;}
.boxlist-item { background-color: #109a93; width: calc(100% / 3); border-radius: 5px; padding: 15px; position: relative;}
.boxlist-txt { color: #fff; font-size: 16px; font-weight: bold; text-align: center;}
.boxlist-item:first-child::before { content: ""; display: inline-block; position: absolute; left: 10px; top: -26px; width: 32px; height: 26px; background: url(../img/image-drawer/id/listdeco_l.png);}
.boxlist-item:last-child::after { content: ""; display: inline-block; position: absolute; right: 10px; top: -26px; width: 32px; height: 26px; background: url(../img/image-drawer/id/listdeco_r.png);}

@media screen and (max-width: 480px) {
.boxlist { flex-direction: column; gap: 30px;}
.boxlist-item { width: 100%;}
}


.aboutttl { font-size: 18px; font-weight: bold; color: #109a93; text-align: center; margin: 30px auto;}

.aboutlist { display: flex; gap: 30px;}
.aboutlist-item { position: relative; width: calc(100% / 3); background-color: #f2f7f7; padding: 35px 20px 20px;} 
.aboutlist-item::before { content: ""; display: inline-block; position: absolute; top: 0; left: 50%; transform: translateX(-50%); background: url(../img/image-drawer/id/arrwh_bt.svg) no-repeat center top; background-size: contain; width: 105px; height: 22px; } 
.aboutlist-ttl { position: relative; font-size: 18px; font-weight: bold; text-align: center; color: #109a93; margin-bottom: 15px;}
.aboutlist-ttl::before , .aboutlist-ttl::after { position: absolute; content: ""; display: inline-block; width: 1px; height: 60px; background-color: #109a93;}
.aboutlist-ttl:before {transform: rotate(-20deg); top: 0; left: 10px;}
.aboutlist-ttl:after {transform: rotate(20deg); top: 0; right: 10px;}
.aboutlist-txt { font-size: 14px; position: relative; padding-top: 15px;}
.aboutlist-txt::before { content: " ーーー " ; display: inline-block; position: absolute; top: -10px; left: 50%; transform: translateX(-50%);}

@media screen and (max-width: 480px) {
.aboutlist { flex-direction: column;}
.aboutlist-item { width: 100%;} 
}


.secabout { background-color: #83c9c5; padding: 30px;}
.secabout-inner { background-color: #fff; padding: 60px 30px;}
.aboutcol { display: flex; gap: 30px; margin-bottom: 30px;}
.aboutcol-item { width: calc(100% / 2);}
.aboutcol-item .img { text-align: center;}
.aboutcol-item .seclead { text-align: left;}

.icolist { display: flex; gap: 20px;}
.icolist-item { width: calc(100% / 3); border: 1px solid #83c9c5; padding: 20px 20px 30px; display: flex; align-items: center; justify-content: flex-start; flex-direction: column;}
.icolist-ico { width: 40px; height: 40px; margin-bottom: 20px;}
.icolist-ico img { width: 100%;}
.icolist-ttl { font-size: 18px; font-weight: bold; color: #109a93; margin-bottom: 10px; text-align: center;}
.icolist-txt { font-size: 14px;}

@media screen and (max-width: 480px) {
.secabout { padding: 20px;}
.secabout-inner { padding: 30px 20px;}
.aboutcol { flex-direction: column; gap: 0;}
.aboutcol-item { width: 100%;}

.icolist { flex-direction: column;}
.icolist-item { width: 100%; padding: 20px;}
.icolist-ttl { font-size: 16px;}
.icolist-ico { margin-bottom: 0;}
}


.effectsec { padding: 60px 0;}
.effectlist { display: flex; flex-wrap: wrap; gap: 30px;}
.effectlist-item { width: calc((100% - 60px) / 3); display: flex; flex-direction: column; align-items: center; justify-content: flex-start;}
.effectlist-ttl { font-size: 18px; font-weight: bold; color: #109a93; text-align: center;}
.effectlist-img { margin-bottom: 25px;}
.effectlist-txt { font-size: 14px; text-align: center;}

@media screen and (max-width: 480px) {
.effectlist { }
.effectlist-item { width: calc((100% - 30px) / 2);}
.effectlist-ttl { font-size: 16px;}
}





/* scene */
.scene {}
.scene-sec { padding: 60px 0;}
.scene-sec._bg { background-color: #e4efef;}
@media screen and (max-width: 480px) {
.scene-sec { padding: 30px 0;}
}


.cardlist { display: flex; flex-wrap: wrap; gap: 30px;}
.cardlist-item { width: calc((100% / 2) - 30px); background-color: #fff; border-radius: 12px; padding: 30px;}
.cardlist-ttl { font-size: 22px; font-weight: bold; text-align: center; margin-bottom: 10px;}
.cardlist-ttl .textdeco { font-weight: bold;}
.cardlist-ttl._sm { font-size: 18px; color: #109a93; margin-bottom: 10px;}
.cardlist-subttl { font-size: 16px; text-align: center; position: relative; padding: 0 20px; display: flex; align-items: center; justify-content: center; min-height: 100px;}
.cardlist-subttl._lg { font-size: 16px;}
.cardlist-subttl .textdeco { font-weight: bold;}
.cardlist-subttl::before , .cardlist-subttl::after { position: absolute; content: ""; display: inline-block; width: 1px; height: 100px; background-color: #109a93;}
.cardlist-subttl:before {transform: rotate(-20deg); top: 0; left: 10px;}
.cardlist-subttl:after {transform: rotate(20deg); top: 0; right: 10px;}
.cardlist-img { margin-bottom: 15px;}
.cardlist-txt {}

@media screen and (max-width: 480px) {
.cardlist { flex-direction: column;}
.cardlist-item { width: 100%;}
.cardlist-ttl { font-size: 18px;}
.cardlist-subttl { font-size: 14px;}
.cardlist-img { width: 100%; margin: 10px auto;}
.cardlist-subttl:before { left: 0;}
.cardlist-subttl:after { right: 0;}
}


.iconlist { }
.iconlist-item { display: flex; align-items: flex-start; gap: 20px;}
.iconlist-item + .iconlist-item { margin-top: 20px;}
.iconlist-ico { width: 46px; height: 46px;}
.iconlist-ico img { width: 100%; height: auto;}
.iconlist-content { font-size: 16px; width: calc(100% - 46px);}
.iconlist-ttl { font-size: 16px; color: #109a93; font-weight: bold;}





.seccat {}
.seccat-ttl { font-size: 20px; font-weight: bold; color: #109a93; margin-bottom: 5px;}
.seccat-txt { font-size: 16px;}
.seccat-txt._list li { text-indent: -1em; padding-left: 1em;}
.seccat + .seccat { margin-top: 30px;}

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

}





/* FAQ */
.lowerTitle.id3 { background-color: #109a93;}