@import url("service.css");

.faq-hero{
  padding:70px clamp(34px,6vw,88px) 56px;
  background:linear-gradient(90deg,#fff 0%,#f7fbfc 58%,#dbeff2 100%);
  border-bottom:1px solid var(--line);
}
.faq-hero h1{margin:0;font-size:clamp(38px,5vw,60px);letter-spacing:-.05em;line-height:1.15}
.faq-hero p:last-child{margin:18px 0 0;color:var(--sub);font-size:13px}
.faq-index{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-bottom:1px solid var(--line);background:#fff
}
.faq-index a{padding:18px 22px;text-align:center;border-right:1px solid var(--line);font-size:11px;font-weight:700}
.faq-index a:last-child{border-right:0}
.faq-index a:hover{background:#f5fafb;color:var(--blue)}
.faq-page{padding:78px clamp(34px,6vw,88px) 100px;max-width:1280px}
.faq-section{display:grid;grid-template-columns:190px minmax(0,1fr);gap:46px;padding-bottom:78px;margin-bottom:78px;border-bottom:1px solid var(--line);scroll-margin-top:25px}
.faq-heading span{display:block;margin-bottom:10px;font:700 9px/1 Inter,sans-serif;letter-spacing:.12em;color:#9aa5aa}
.faq-heading h2{margin:0;font-size:22px;line-height:1.4}
.faq-list{border-top:1px solid var(--ink)}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list summary{position:relative;padding:19px 48px 19px 6px;cursor:pointer;list-style:none;font-size:13px;font-weight:700}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary:after{content:"＋";position:absolute;right:10px;top:17px;font-size:18px;font-weight:400;color:#728088}
.faq-list details[open] summary:after{content:"－"}
.faq-list .answer{padding:0 42px 22px 6px;color:#56656c;font-size:12px;line-height:1.9}
.faq-list .answer a{color:var(--blue);font-weight:700;border-bottom:1px solid #abd1dc}
.faq-links{margin-top:28px;display:flex;gap:12px;flex-wrap:wrap}
.faq-links a{padding:10px 13px;border:1px solid #bfd4da;font-size:10px;font-weight:700;color:#315866}
.faq-cta{margin:-12px 0 28px;padding:17px 20px;background:#f4f9fa;border:1px solid #d5e6ea}
.faq-cta a{display:flex;justify-content:space-between;font-size:11px;font-weight:700;color:#225466}
@media(max-width:820px){
 .faq-hero{padding:50px 20px 42px}
 .faq-index{grid-template-columns:1fr 1fr}
 .faq-index a{border-bottom:1px solid var(--line)}
 .faq-page{padding:54px 20px 78px}
 .faq-section{grid-template-columns:1fr;gap:20px;padding-bottom:54px;margin-bottom:54px}
 .faq-heading{display:flex;align-items:center;gap:14px}
 .faq-heading span{margin:0}
}
@media(max-width:520px){
 .faq-index{grid-template-columns:1fr}
 .faq-list summary{font-size:12px}
}

/* =========================================================
   TEST58 / FAQ RADICAL LAYOUT VARIANT
   ========================================================= */
body.layout58 .faq-hero{
  padding:70px max(28px,calc((100vw - 1180px)/2));
  background:linear-gradient(120deg,#122846 0%,#183d75 60%,#1c6684 100%);
  color:#fff;border:0
}
body.layout58 .faq-hero .kicker{color:#82d5df}
body.layout58 .faq-hero p:last-child{color:#dfe8f4}
body.layout58 .faq-index{
  width:min(1180px,calc(100% - 56px));margin:-24px auto 42px;
  position:relative;z-index:4;
  display:flex;gap:8px;padding:10px;border:1px solid #dfe5ec;border-radius:12px;
  background:#fff;box-shadow:0 9px 28px rgba(24,37,55,.07)
}
body.layout58 .faq-index a{
  flex:1;padding:12px;border:0;border-radius:8px;background:#f3f6fa
}
body.layout58 .faq-page{
  width:min(1180px,calc(100% - 56px));max-width:none;margin:auto;padding:0 0 90px
}
body.layout58 .faq-section{
  display:block;margin:0 0 18px;padding:30px;
  border:1px solid #dfe5ec;border-radius:14px;background:#fff
}
body.layout58 .faq-heading{
  display:flex;align-items:center;gap:14px;margin-bottom:20px
}
body.layout58 .faq-heading span{
  width:34px;height:34px;margin:0;display:flex;align-items:center;justify-content:center;
  border-radius:50%;background:#eaf0fb;color:#184b9b
}
body.layout58 .faq-heading h2{font-size:22px}
body.layout58 .faq-list{border-top:0}
body.layout58 .faq-list details{
  margin-bottom:8px;border:1px solid #e2e7ee;border-radius:9px;overflow:hidden
}
body.layout58 .faq-list summary{padding:16px 48px 16px 16px;background:#f7f9fc}
body.layout58 .faq-list .answer{padding:4px 16px 18px}
@media(max-width:820px){
  body.layout58 .faq-hero{padding:52px 20px 46px}
  body.layout58 .faq-index{
    width:calc(100% - 32px);margin-top:-16px;
    display:grid;grid-template-columns:1fr
  }
  body.layout58 .faq-page{width:calc(100% - 32px)}
  body.layout58 .faq-section{padding:22px 16px;border-radius:11px}
}

/* TEST66: official links inside the opened FAQ answer */
.faq-list .answer .faq-inline-official{
  margin:12px 0 18px;
  padding:13px 15px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  border:1px solid #b9d3df;
  border-radius:8px;
  background:#f1f8fb;
  color:#174f68;
  text-decoration:none;
  font-weight:700;
}
.faq-list .answer .faq-inline-official span{
  min-width:0;
}
.faq-list .answer .faq-inline-official small{
  display:block;
  margin-bottom:3px;
  font-size:8px;
  line-height:1.2;
  letter-spacing:.08em;
  color:#63808d;
}
.faq-list .answer .faq-inline-official b{
  flex:0 0 auto;
  font-size:14px;
}
.faq-list .answer .faq-inline-official:hover{
  background:#e6f3f8;
  border-color:#8fbacb;
}
@media(max-width:820px){
  .faq-list .answer .faq-inline-official{
    margin:10px 0 16px;
    padding:12px 13px;
  }
}

/* TEST67: v6plus trademark note / JPIX link collision fix */
.faq-list .answer .trademark-note,
.faq-list .answer .v6plus-trademark,
.faq-list .answer p:has(> .trademark),
.faq-list .answer p:last-child{
  position:relative;
  z-index:1;
}
.faq-list .answer .faq-inline-official{
  position:relative;
  z-index:1;
  clear:both;
}

/* The trademark sentence is near the bottom of the v6plus FAQ block.
   Give it enough breathing room before/after link buttons. */
.faq-list .answer p{
  overflow-wrap:anywhere;
}
.faq-list .answer p + .faq-inline-official{
  margin-top:14px;
}
.faq-list .answer .faq-inline-official + p{
  margin-top:22px;
}
.faq-list .answer .faq-inline-official:last-child{
  margin-bottom:8px;
}

/* If the trademark sentence is outside a single answer and follows FAQ links,
   keep a visible gap rather than allowing overlap. */
.faq-links + .trademark-note,
.faq-inline-official + .trademark-note,
.v6plus-trademark{
  display:block;
  clear:both;
  margin-top:22px !important;
  padding-top:14px;
  border-top:1px solid #e2e9ed;
}

@media(max-width:820px){
  .faq-list .answer .faq-inline-official + p{
    margin-top:18px;
  }
  .faq-links + .trademark-note,
  .faq-inline-official + .trademark-note,
  .v6plus-trademark{
    margin-top:18px !important;
    padding-top:12px;
  }
}

/* TEST68 fallback footer styling */
.footer{padding:46px clamp(34px,6vw,88px) 24px;background:#182027;color:#e7edef}
.footer-top{display:grid;grid-template-columns:280px 1fr;gap:70px}
.footer-brand strong,.footer-brand span{display:block;font-size:11px}
.footer-nav{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.footer-nav h3{margin:0 0 12px;font-size:10px}
.footer-nav a{display:block;margin:6px 0;font-size:9px;color:#aeb8bd}
.footer-bottom{margin-top:30px;padding-top:16px;border-top:1px solid #344047;display:flex;justify-content:space-between;gap:20px;font-size:9px;color:#83919a}
@media(max-width:820px){
  .footer{padding:36px 20px 20px}
  .footer-top{grid-template-columns:1fr;gap:28px}
  .footer-nav{grid-template-columns:1fr 1fr;gap:22px}
  .footer-bottom{display:block}
  .footer-bottom span{display:block;margin-top:6px}
}