/* TTC DX TYPE-B / faq.css */

.faq-intro{padding:clamp(60px,9vw,120px) 0;background:var(--c-white);}
.faq-intro__inner{max-width:820px;text-align:center;margin:0 auto;}
.faq-intro__lead{
  font-size:clamp(22px,3vw,32px);font-weight:700;color:var(--c-ink);line-height:1.5;
}
.faq-intro__lead .blue{color:var(--c-primary-2);}
.faq-intro__body{
  margin-top:22px;color:var(--c-ink-sub);font-size:15px;line-height:2;
}

.faq-body{padding:clamp(60px,9vw,120px) 0;background:var(--c-blue-soft);}
.faq__wrap{max-width:900px;margin:0 auto;display:flex;flex-direction:column;gap:14px;}
.faq__cat{
  margin-top:28px;padding-bottom:16px;border-bottom:2px solid var(--c-primary-3);
  display:flex;align-items:baseline;gap:14px;
}
.faq__cat:first-child{margin-top:0;}
.faq__cat-en{
  font-family:'Outfit',sans-serif;font-weight:800;font-size:26px;
  color:var(--c-primary);letter-spacing:-.01em;line-height:1;
}
.faq__cat-jp{font-size:13px;color:var(--c-ink-sub);font-weight:600;letter-spacing:.04em;}

.faq__item{
  background:var(--c-white);border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--shadow-sm);
}
.faq__q{
  width:100%;display:grid;grid-template-columns:44px 1fr 44px;gap:16px;align-items:center;
  padding:22px 24px;background:var(--c-white);border:none;cursor:pointer;text-align:left;
  font-family:inherit;
}
.faq__q-mark{
  width:34px;height:34px;border-radius:50%;
  background:var(--c-primary);color:var(--c-white);
  display:flex;align-items:center;justify-content:center;
  font-family:'Outfit',sans-serif;font-weight:800;font-size:15px;
}
.faq__q-text{color:var(--c-ink);font-weight:700;font-size:15px;line-height:1.6;}
.faq__q-toggle{
  width:34px;height:34px;border-radius:50%;border:2px solid var(--c-primary-2);
  position:relative;transition:transform .3s ease;
}
.faq__q-toggle::before,.faq__q-toggle::after{
  content:"";position:absolute;top:50%;left:50%;background:var(--c-primary-2);
  transition:transform .3s ease;
}
.faq__q-toggle::before{
  width:12px;height:2px;transform:translate(-50%,-50%);
}
.faq__q-toggle::after{
  width:2px;height:12px;transform:translate(-50%,-50%);
}
.faq__item.is-open .faq__q-toggle::after{transform:translate(-50%,-50%) scaleY(0);}

.faq__a{
  max-height:0;overflow:hidden;transition:max-height .4s ease;
  background:var(--c-blue-tint);
}
.faq__item.is-open .faq__a{max-height:600px;}
.faq__a-inner{
  display:grid;grid-template-columns:44px 1fr;gap:16px;align-items:flex-start;
  padding:22px 24px;
}
.faq__a-mark{
  width:34px;height:34px;border-radius:50%;
  background:var(--c-white);color:var(--c-primary-2);
  border:2px solid var(--c-primary-2);
  display:flex;align-items:center;justify-content:center;
  font-family:'Outfit',sans-serif;font-weight:800;font-size:15px;
}
.faq__a-inner p{color:var(--c-ink-sub);font-size:14.5px;line-height:2;}

@media(max-width:820px){
  .faq__q,.faq__a-inner{grid-template-columns:34px 1fr;gap:12px;padding:18px 18px;}
  .faq__q{grid-template-columns:34px 1fr 28px;}
  .faq__q-mark,.faq__a-mark{width:28px;height:28px;font-size:13px;}
  .faq__q-toggle{width:28px;height:28px;}
}

.faq-final{padding:clamp(60px,9vw,120px) 0;background:var(--c-white);}
.faq-final__box{
  max-width:820px;margin:0 auto;text-align:center;
  background:var(--c-blue-tint);border-radius:var(--radius-xl);
  padding:clamp(36px,5vw,60px);
  border-top:4px solid var(--c-primary-2);
}
.faq-final__box .en-display{color:var(--c-primary);margin-bottom:6px;font-size:clamp(40px,6vw,64px);}
.faq-final__title{font-size:clamp(22px,3vw,28px);color:var(--c-ink);margin-bottom:8px;}
.faq-final__sub{color:var(--c-primary-2);font-weight:700;font-size:14px;letter-spacing:.04em;margin-bottom:20px;}
.faq-final__box > p{color:var(--c-ink-sub);font-size:14.5px;line-height:2;margin-bottom:28px;}
.faq-final__box .btn-primary{margin-top:8px;}

/*------------------------------------
page-hero 背景画像（faq ページ限定）
- faq.css は header.php で is_page('faq') の時のみ読み込まれるため、
  この上書きは当ページにのみ適用される（common.css の .page-hero::before を置換）。
- ※CSSファイルでは PHP（get_template_directory_uri 等）は使えないため、
  画像URLは faq.css の位置（/assets/css/）からの相対パスで指定する。
  /assets/images/faq/hero.jpg → ../images/faq/hero.jpg
- 白いかぶせ（.page-hero::after）と文字（.page-hero > .container）は common.css 側のまま有効。
------------------------------------*/
.page-hero::before{
  background-image:
    url("../images/faq/hero.webp"),
    linear-gradient(135deg,var(--c-placeholder-1),var(--c-placeholder-2));
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}