:root{
  --navy:#0b2d46;
  --navy-deep:#061d2d;
  --teal:#11aeb6;
  --teal-pale:#e9f8f8;
  --gold:#d4a53d;
  --green:#53b648;
  --ink:#263f50;
  --muted:#637986;
  --line:#dbe8eb;
  --paper:#fff;
  --base:#f7fbfb;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  background:
    radial-gradient(circle at 92% 5%,rgba(17,174,182,.12),transparent 27%),
    radial-gradient(circle at 8% 92%,rgba(212,165,61,.10),transparent 28%),
    var(--base);
  font-family:"Noto Sans JP","Hiragino Sans","Yu Gothic",system-ui,-apple-system,sans-serif;
  line-height:1.8;
}
a{color:inherit}
.faq-header{
  position:sticky;
  top:0;
  z-index:20;
  min-height:76px;
  padding:14px clamp(18px,4vw,58px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  background:rgba(255,255,255,.93);
  border-bottom:1px solid rgba(11,45,70,.08);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
.faq-brand{display:flex;align-items:center;gap:12px;text-decoration:none;min-width:0}
.faq-company-logo{width:min(200px,36vw);max-height:46px;object-fit:contain}
.faq-method-logo{width:38px;height:38px;object-fit:contain}
.faq-brand>span{width:1px;height:30px;background:var(--line)}
.faq-brand strong{
  white-space:nowrap;
  font-size:clamp(15px,2vw,21px);
  background:linear-gradient(90deg,#0875c1,#10b6bd,#54bd47,#d3a63f);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.faq-home{
  flex:none;
  padding:10px 17px;
  border-radius:999px;
  text-decoration:none;
  font-weight:800;
  background:#edf8f8;
}
.faq-main{width:min(1080px,calc(100% - 36px));margin:0 auto;padding:34px 0 76px}
.faq-breadcrumb{display:flex;gap:8px;align-items:center;margin-bottom:24px;color:var(--muted);font-size:13px}
.faq-breadcrumb a{text-decoration:none}
.faq-hero{
  padding:clamp(32px,6vw,62px);
  border-radius:34px;
  background:linear-gradient(140deg,rgba(255,255,255,.98),rgba(234,249,249,.94));
  border:1px solid rgba(17,174,182,.16);
  box-shadow:0 24px 72px rgba(11,45,70,.10);
}
.faq-eyebrow{margin:0 0 6px;text-transform:uppercase;letter-spacing:.14em;font-size:12px;font-weight:900;color:var(--teal)}
.faq-hero h1{margin:0;color:var(--navy);font-size:clamp(34px,7vw,58px);line-height:1.3}
.faq-hero>p:not(.faq-eyebrow){max-width:800px;margin:18px 0 0;font-size:clamp(15px,2vw,18px)}
.faq-search{margin-top:28px;display:grid;gap:7px;max-width:680px}
.faq-search label{font-weight:800;color:var(--navy);font-size:14px}
.faq-search input{
  width:100%;
  min-height:54px;
  padding:0 20px;
  border:1px solid #cfe3e6;
  border-radius:18px;
  background:#fff;
  color:var(--ink);
  font:inherit;
  outline:none;
}
.faq-search input:focus{border-color:var(--teal);box-shadow:0 0 0 4px rgba(17,174,182,.12)}
.faq-categories{display:flex;gap:10px;flex-wrap:wrap;margin:28px 0 15px}
.faq-categories button{
  min-height:42px;
  padding:0 16px;
  border:1px solid #d3e7e9;
  border-radius:999px;
  color:var(--navy);
  background:#fff;
  font:inherit;
  font-weight:800;
  cursor:pointer;
}
.faq-categories button.is-active{color:#fff;border-color:transparent;background:linear-gradient(135deg,var(--teal),#078b94)}
.faq-count{margin:0 0 12px;color:var(--muted);font-size:14px}
.faq-list{display:grid;gap:12px}
.faq-item{
  border:1px solid rgba(11,45,70,.09);
  border-radius:22px;
  background:#fff;
  box-shadow:0 12px 38px rgba(11,45,70,.055);
  overflow:hidden;
}
.faq-item[hidden]{display:none}
.faq-item summary{
  min-height:76px;
  padding:18px 62px 18px 20px;
  display:flex;
  align-items:center;
  gap:13px;
  position:relative;
  cursor:pointer;
  list-style:none;
  color:var(--navy);
  font-weight:800;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-q,.faq-a{
  flex:none;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:11px;
  color:#fff;
  font-weight:900;
}
.faq-q{background:linear-gradient(135deg,var(--teal),#078b94)}
.faq-a{background:linear-gradient(135deg,var(--gold),#bd8126)}
.faq-item summary i,
.faq-item summary i::after{
  content:"";
  position:absolute;
  width:17px;
  height:2px;
  border-radius:3px;
  background:var(--teal);
  right:24px;
  top:50%;
  transition:transform .2s ease;
}
.faq-item summary i::after{right:0;top:0;transform:rotate(90deg)}
.faq-item[open] summary i::after{transform:rotate(0)}
.faq-answer{
  display:grid;
  grid-template-columns:34px minmax(0,1fr);
  gap:13px;
  padding:0 22px 23px;
}
.faq-answer p{margin:0;white-space:pre-line}
.faq-source{margin-top:13px;display:flex;gap:8px 18px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.faq-source a{color:#087f89;font-weight:700;text-underline-offset:3px}
.faq-empty{
  padding:30px;
  border-radius:20px;
  text-align:center;
  background:#fff;
  color:var(--muted);
}
.faq-contact{
  margin-top:34px;
  padding:clamp(25px,5vw,45px);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  border-radius:28px;
  color:#fff;
  background:
    radial-gradient(circle at 88% 18%,rgba(255,255,255,.17),transparent 30%),
    linear-gradient(135deg,var(--navy),#0d5965);
}
.faq-contact h2{margin:0;font-size:clamp(23px,4vw,34px)}
.faq-contact p:not(.faq-eyebrow){margin:8px 0 0;max-width:700px}
.faq-contact a{
  flex:none;
  min-height:50px;
  padding:0 22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  color:var(--navy);
  background:#fff;
  text-decoration:none;
  font-weight:900;
}
.faq-footer{
  padding:28px clamp(18px,4vw,58px);
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:24px;
  color:#dbe7eb;
  background:var(--navy-deep);
}
.faq-footer strong{color:#fff}
.faq-footer p{margin:4px 0 0;font-size:13px}
@media(max-width:720px){
  .faq-header{min-height:66px}
  .faq-company-logo{width:138px}
  .faq-method-logo,.faq-brand>span,.faq-brand strong{display:none}
  .faq-home{font-size:12px;padding:8px 12px}
  .faq-main{width:min(100% - 24px,1080px);padding-top:22px}
  .faq-hero{border-radius:24px}
  .faq-item summary{padding:16px 50px 16px 14px;align-items:flex-start}
  .faq-q,.faq-a{width:30px;height:30px;border-radius:9px}
  .faq-answer{grid-template-columns:30px minmax(0,1fr);padding:0 15px 20px}
  .faq-contact{align-items:flex-start;flex-direction:column}
  .faq-footer{align-items:flex-start;flex-direction:column}
}