@charset "utf-8";

/* [s] hero */
.faq_kv {position:fixed; overflow:hidden; background:#0d0d0f;}
.faq_kv .kv_bg {position:absolute; inset:0; background:url(../img/faq/kv_img.jpg) center top no-repeat; background-size:cover; animation:faqKvZoom 14s linear infinite alternate;}
.faq_kv:before {content:''; position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.2) 55%, rgba(0,0,0,0.55) 100%); pointer-events:none;}

@keyframes faqKvZoom {
  from {transform:scale(1) translateX(0);}
  to {transform:scale(1.15) translateX(-3%);}
}

@media (prefers-reduced-motion: reduce) {
  .faq_kv .kv_bg {animation:none;}
}

.faq_kv .hero_head {z-index:10; position:absolute; right:240px; bottom:160px; text-align:right;}
.faq_kv .hero_head .eyebrow {position:static; color:rgba(255,255,255,0.6); font-family:'Montserrat-Medium'; font-size:14px; letter-spacing:2px; text-transform:uppercase; margin-bottom:22px; opacity:0; animation:faqFadeIn 1s ease forwards; animation-delay:0.2s;}
.faq_kv h2 {position:static; right:auto; bottom:auto; margin:0; color:#fff; font-family:'NotoSansB'; font-size:72px; line-height:1.3;}
.faq_kv .hero_lead {margin-top:28px; color:rgba(255,255,255,0.72); font-family:'NotoSansR'; font-size:16px; line-height:28px; text-align:right; opacity:0; animation:faqFadeIn 1s ease forwards; animation-delay:0.4s;}

@keyframes faqFadeIn {
  from {opacity:0;}
  to {opacity:1;}
}

@media (prefers-reduced-motion: reduce) {
  .faq_kv .hero_head .eyebrow,
  .faq_kv .hero_lead {opacity:1; animation:none;}
}
/* [e] hero */

.contents_faq {position:relative;}
.contents_faq .inner {width:960px; margin:0 auto;}
.contents_faq .eyebrow {color:#8d8c8c; font-family:'Montserrat-Medium'; font-size:14px; letter-spacing:2px; text-transform:uppercase;}

/* [s] sec1 : intro */
.contents_faq .sec1 {padding:110px 0 100px;}
.contents_faq .section_label {display:flex; justify-content:space-between; align-items:baseline; color:#8d8c8c; font-family:'Montserrat-Medium'; font-size:13px; letter-spacing:0.08em; text-transform:uppercase; padding-bottom:22px; border-bottom:1px solid #ddd;}
.contents_faq .sec1 .statement {color:#191a1b; font-family:'NotoSansB'; font-size:40px; line-height:1.5; margin-top:56px;}
.contents_faq .sec1 .statement em {font-style:normal; border-bottom:2px solid #191a1b;}
.contents_faq .sec1 .copy {width:760px; color:#8d8c8c; font-family:'NotoSansR'; font-size:17px; line-height:30px; margin-top:36px;}
.contents_faq .sec1 .copy p + p {margin-top:14px;}
/* [e] sec1 */

/* [s] sec2 : faq list */
.contents_faq .sec2 {padding:0 0 110px;}
.contents_faq .faq_list {border-top:1px solid #191a1b;}
.contents_faq .faq_list details {border-bottom:1px solid #ddd;}
.contents_faq .faq_list summary {position:relative; display:block; color:#191a1b; font-family:'NotoSansM'; font-size:19px; line-height:1.5; padding:32px 60px 32px 0; cursor:pointer;}
.contents_faq .faq_list summary::-webkit-details-marker {display:none;}
.contents_faq .faq_list summary span {display:inline-block; color:#8d8c8c; font-family:'Montserrat-Bold'; font-size:14px; margin-right:16px; vertical-align:middle;}
.contents_faq .faq_list summary:before,
.contents_faq .faq_list summary:after {content:''; position:absolute; right:4px; top:44px; display:block; width:16px; height:2px; background:#191a1b; transition:transform 0.25s ease;}
.contents_faq .faq_list summary:after {transform:rotate(90deg);}
.contents_faq .faq_list details[open] summary:after {transform:rotate(0deg);}
.contents_faq .faq_list .answer {max-width:760px; color:#8d8c8c; font-family:'NotoSansR'; font-size:16px; line-height:28px; padding:0 60px 34px 0;}
.contents_faq .faq_list .faq_link {display:inline-flex; align-items:center; gap:8px; color:#191a1b; font-family:'NotoSansB'; font-size:15px; margin-top:18px; border-bottom:1px solid #191a1b; padding-bottom:3px; transition:opacity 0.2s ease;}
.contents_faq .faq_list .faq_link:hover {opacity:0.6;}
.contents_faq .faq_list .faq_link span {display:inline-block; transition:transform 0.2s ease;}
.contents_faq .faq_list .faq_link:hover span {transform:translateX(4px);}
/* [e] sec2 */

/* [s] sec3 : closing */
.contents_faq .sec3 {padding:110px 0; text-align:center; background:#000;}
.contents_faq .sec3 .tit {color:#fff; font-family:'NotoSansB'; font-size:40px; line-height:1.4;}
.contents_faq .sec3 .desc {color:rgba(255,255,255,0.55); font-family:'NotoSansR'; font-size:17px; line-height:30px; margin:24px 0 48px;}
.contents_faq .sec3 .btn_solid {display:inline-flex; align-items:center; justify-content:center; min-width:240px; height:65px; padding:0 40px; color:#191a1b; font-family:'NotoSansB'; font-size:18px; background:#fff; transition:opacity 0.25s ease;}
.contents_faq .sec3 .btn_solid:hover {opacity:0.82;}
/* [e] sec3 */


/* tablet */
@media all and (max-width:1200px) {
  .faq_kv .hero_head {right:120px; bottom:130px;}
  .faq_kv h2 {font-size:52px;}
  .faq_kv .hero_lead {font-size:14px; line-height:24px;}

  .contents_faq .inner {width:100%; padding:0 8%;}
  .contents_faq .sec1 .copy {width:100%;}
}

/* mobile */
@media all and (max-width:720px) {
  .faq_kv .hero_head {right:30px; left:30px; bottom:60px;}
  .faq_kv .hero_head .eyebrow {font-size:12px; margin-bottom:14px;}
  .faq_kv h2 {font-size:32px; line-height:1.4;}
  .faq_kv .hero_lead {max-width:none; font-size:13px; line-height:21px; margin-top:18px;}

  .contents_faq .inner {padding:0 30px;}

  .contents_faq .sec1 {padding:60px 0 40px;}
  .contents_faq .section_label {flex-direction:column; gap:6px; font-size:11px; padding-bottom:16px;}
  .contents_faq .sec1 .statement {font-size:26px; margin-top:24px;}
  .contents_faq .sec1 .copy {font-size:14px; line-height:24px; margin-top:24px;}

  .contents_faq .sec2 {padding:0 0 50px;}
  .contents_faq .faq_list summary {font-size:15px; padding:22px 34px 22px 0;}
  .contents_faq .faq_list summary:before,
  .contents_faq .faq_list summary:after {top:32px;}
  .contents_faq .faq_list .answer {font-size:13px; line-height:21px; padding:0 34px 24px 0;}
  .contents_faq .faq_list .faq_link {font-size:13px; margin-top:14px;}

  .contents_faq .sec3 {padding:50px 0;}
  .contents_faq .sec3 .tit {font-size:26px;}
  .contents_faq .sec3 .desc {font-size:14px; line-height:22px; margin:16px 0 36px;}
  .contents_faq .sec3 .btn_solid {min-width:200px; height:56px; font-size:15px;}
}