/* ============================================================
 * 見立て屋 コーポレートサイト
 * 静けさ・余白・可読性を最優先。装飾は罫線と余白のみで作る。
 * ============================================================ */

:root {
  --ink:        #23282c;   /* 本文（墨） */
  --ink-2:      #4d545a;   /* 副次テキスト */
  --ink-3:      #858c93;   /* 補足・注記 */
  --accent:     #1f3a5f;   /* 深い藍（講座LPと共通） */
  --accent-2:   #37527a;
  --line:       #e4e0d9;   /* 罫線（生成り寄り） */
  --line-2:     #cfc9c0;
  --paper:      #ffffff;
  --paper-alt:  #f8f6f2;   /* わずかに生成り */
  --paper-3:    #f2efe9;

  --serif: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;

  --w-wide: 1040px;
  --w-narrow: 700px;
  --pad: 24px;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 72px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  font-size: 16px;
  line-height: 2.05;
  letter-spacing: 0.035em;
  font-feature-settings: "palt";
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
ul, ol { list-style: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--accent); color: #fff; padding: 10px 18px; z-index: 100;
}
.skip-link:focus { left: 0; }

.wrap { width: 100%; max-width: var(--w-wide); margin: 0 auto; padding: 0 var(--pad); }
.wrap.narrow { max-width: var(--w-narrow); }

.pc-only { display: inline; }
.sp-only { display: none; }
@media (max-width: 700px) {
  .pc-only { display: none; }
  .sp-only { display: inline; }
}

/* ---------- スクロール表示（控えめなフェード） ---------- */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 1.1s cubic-bezier(.22,.61,.36,1), transform 1.1s cubic-bezier(.22,.61,.36,1);
}
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
 * ヘッダー
 * ============================================================ */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: rgba(255,255,255,0);
  border-bottom: 1px solid transparent;
  transition: background .5s ease, border-color .5s ease, backdrop-filter .5s ease;
}
.site-header.is-solid {
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom-color: var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 68px;
}

.site-name {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: 0.18em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

.site-nav {
  display: flex;
  gap: 26px;
  margin-left: auto;
  font-size: 13.5px;
  letter-spacing: 0.08em;
}
.site-nav a {
  color: var(--ink-2);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color .3s, border-color .3s;
}
.site-nav a:hover { color: var(--accent); border-bottom-color: var(--line-2); }

.header-cta {
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--accent);
  text-decoration: none;
  border: 1px solid var(--accent);
  padding: 8px 18px;
  border-radius: 2px;
  white-space: nowrap;
  transition: background .3s, color .3s;
}
.header-cta:hover { background: var(--accent); color: #fff; }

/* ヘッダー内の講座ボタン（60分無料相談の右） */
.header-cta--course {
  color: #fff;
  background: var(--accent);
}
.header-cta--course:hover { background: var(--ink); border-color: var(--ink); }

@media (max-width: 900px) { .site-nav { display: none; } }
@media (max-width: 700px) {
  .header-inner { height: 60px; }
  .site-name { font-size: 17px; }
  .header-cta { display: none; }
  html { scroll-padding-top: 60px; }
}

/* ============================================================
 * ヒーロー
 * ============================================================ */
.hero {
  position: relative;
  min-height: 92vh;
  min-height: 92svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--paper-alt);
}

.hero-bg {
  position: absolute;
  inset: 0;
  background: url("../images/hero.jpg") center 60% / cover no-repeat;
  opacity: .85;
}
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.55) 45%, rgba(255,255,255,.8) 100%);
}

.hero-inner {
  position: relative;
  z-index: 1;
  padding-top: 68px;
  padding-bottom: 40px;
}

.hero-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(34px, 6.6vw, 64px);
  line-height: 1.5;
  letter-spacing: 0.09em;
  margin-bottom: 34px;
  transition-delay: .15s;
}

.hero-sub {
  font-family: var(--serif);
  font-size: clamp(17px, 2.4vw, 22px);
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin-bottom: 0;
  transition-delay: .3s;
}


.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 26px;
  width: 1px;
  height: 56px;
  background: var(--line-2);
  overflow: hidden;
}
.scroll-cue span {
  position: absolute;
  top: -56px; left: 0;
  width: 1px; height: 56px;
  background: var(--accent);
  animation: cue 2.6s cubic-bezier(.6,0,.3,1) infinite;
}
@keyframes cue {
  0%   { transform: translateY(0); }
  60%  { transform: translateY(112px); }
  100% { transform: translateY(112px); }
}
@media (prefers-reduced-motion: reduce) { .scroll-cue span { animation: none; } }

@media (max-width: 700px) {
  .hero { min-height: 88vh; min-height: 88svh; }
  .hero-title { line-height: 1.55; margin-bottom: 28px; }
}

/* ---------- ボタン ---------- */
.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: #fff;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 2px;
  padding: 16px 40px;
  text-decoration: none;
  cursor: pointer;
  transition: background .35s ease, border-color .35s ease;
}
.btn:hover { background: var(--accent-2); border-color: var(--accent-2); }
.btn:disabled { background: var(--ink-3); border-color: var(--ink-3); cursor: not-allowed; }
.btn-block { display: block; width: 100%; }


.center-cta { text-align: center; margin-top: 56px; }

/* 本文の流れの中に置くCTA（見立てとは → 相談へ） */
.cta-block { margin-top: 72px; text-align: center; }
.cta-lead {
  font-family: var(--serif);
  font-size: clamp(16px, 2vw, 19px);
  letter-spacing: 0.06em;
  line-height: 2.1;
  color: var(--ink);
  margin-bottom: 34px;
}
.cta-action { margin: 0; }
@media (max-width: 700px) {
  .cta-block { margin-top: 52px; }
  .cta-lead { margin-bottom: 28px; }
}

/* ============================================================
 * セクション共通
 * ============================================================ */
.section { padding: 130px 0; }
.section-alt { background: var(--paper-alt); }

.sec-index {
  font-family: var(--serif);
  font-size: 12px;
  letter-spacing: 0.32em;
  color: var(--ink-3);
  margin-bottom: 18px;
}
.sec-index::after {
  content: "";
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--line-2);
  vertical-align: middle;
  margin-left: 14px;
  margin-bottom: 3px;
}

.sec-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(24px, 3.6vw, 33px);
  line-height: 1.75;
  letter-spacing: 0.09em;
  margin-bottom: 44px;
}

.sec-lead {
  color: var(--ink-2);
  font-size: 15px;
  line-height: 2.1;
  margin-bottom: 48px;
}

.prose p { margin-bottom: 1.7em; }
.prose p:last-child { margin-bottom: 0; }
.prose strong { font-weight: 700; color: var(--ink); }
.prose-lead {
  margin-top: 56px;
  font-family: var(--serif);
  font-size: clamp(17px, 2.2vw, 21px);
  letter-spacing: 0.06em;
  line-height: 2.1;
  color: var(--ink);
}
@media (max-width: 700px) { .prose-lead { margin-top: 40px; } }

.note {
  font-size: 13.5px;
  line-height: 1.95;
  color: var(--ink-3);
}

@media (max-width: 700px) {
  .section { padding: 88px 0; }
  .sec-title { margin-bottom: 34px; }
  .sec-lead { margin-bottom: 36px; }
  body { font-size: 15.5px; line-height: 2; }
}

/* ============================================================
 * 01 課題
 * ============================================================ */
.issue-list {
  border-top: 1px solid var(--line);
  margin-bottom: 0;
}
.issue-list li {
  border-bottom: 1px solid var(--line);
  padding: 20px 4px 20px 30px;
  position: relative;
  font-size: 16px;
}
.issue-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 1.05em;
  width: 14px;
  height: 1px;
  background: var(--line-2);
}
.issue-list li:nth-child(2) { transition-delay: .08s; }
.issue-list li:nth-child(3) { transition-delay: .16s; }
.issue-list li:nth-child(4) { transition-delay: .24s; }
.issue-list li:nth-child(5) { transition-delay: .32s; }

/* 締めの一文（02の .cta-lead と同じフォント・文字サイズ・余白） */
.issue-close {
  margin-top: 72px;
  font-family: var(--serif);
  font-size: clamp(16px, 2vw, 19px);
  letter-spacing: 0.06em;
  line-height: 2.1;
  color: var(--ink);
}
@media (max-width: 700px) {
  .issue-close { margin-top: 52px; }
}

/* ============================================================
 * 02 見立てとは
 * ============================================================ */
.questions {
  max-width: var(--w-narrow);
  margin: 0 auto 60px;
  border-top: 1px solid var(--line);
}
.questions li {
  display: flex;
  gap: 26px;
  align-items: flex-start;
  border-bottom: 1px solid var(--line);
  padding: 34px 4px;
}
.q-num {
  font-family: var(--serif);
  font-size: 15px;
  letter-spacing: 0.1em;
  color: var(--accent);
  flex: 0 0 auto;
  width: 2.2em;
  line-height: 2.2;
  text-align: center;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}
.questions h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(18px, 2.6vw, 21px);
  letter-spacing: 0.07em;
  line-height: 1.8;
  margin-bottom: 6px;
}
.questions p {
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 2;
}
@media (max-width: 700px) {
  .questions li { gap: 18px; padding: 26px 2px; }
}

/* 帯画像 */
.band {
  margin: 0;
  height: clamp(200px, 30vw, 330px);
  overflow: hidden;
}
.band img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 42%;
}

/* ============================================================
 * 03 プロフィール
 * ============================================================ */
.profile {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 56px;
  align-items: start;
  max-width: 900px;
  margin: 0 auto;
}
.profile-media { margin: 0; }
.profile-media img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  filter: saturate(.9);
}
.profile-name {
  margin-top: 20px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}
.profile-name-ja {
  display: block;
  font-family: var(--serif);
  font-size: 19px;
  letter-spacing: 0.14em;
}
.profile-name-role {
  display: block;
  font-size: 12.5px;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  margin-top: 2px;
}
.profile-body { transition-delay: .12s; }
.profile-questions {
  font-family: var(--serif);
  font-size: clamp(17px, 2.4vw, 20px);
  line-height: 2.1;
  letter-spacing: 0.08em;
  color: var(--accent);
  border-left: 1px solid var(--line-2);
  padding-left: 24px;
}
.profile-note-link {
  margin-top: 10px;
  font-size: 13.5px;
  letter-spacing: 0.06em;
}
.profile-note-link a {
  color: var(--ink-2);
  text-decoration: none;
  border-bottom: 1px solid var(--line-2);
  padding-bottom: 3px;
  transition: color .3s, border-color .3s;
}
.profile-note-link a:hover { color: var(--accent); border-color: var(--accent); }
.profile-note-link a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

@media (max-width: 820px) {
  .profile { grid-template-columns: 1fr; gap: 36px; }
  .profile-media { max-width: 260px; }
}

/* ============================================================
 * 04 サービス
 * ============================================================ */
.services {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-bottom: 0;
  align-items: stretch;
}
/* カードは常に1行目に3枚。詳細パネルは全幅で2行目に開く
   （開いても3枚の高さが変わらないようにするため） */
.services > .service:nth-child(1) { grid-column: 1; grid-row: 1; }
.services > .service:nth-child(3) { grid-column: 2; grid-row: 1; }
.services > .service:nth-child(5) { grid-column: 3; grid-row: 1; }
.services > .service-panel { grid-column: 1 / -1; grid-row: 2; }

.service {
  background: var(--paper);
  border: 1px solid var(--line);
  margin-left: -1px;
  padding: 44px 34px 34px;
  display: flex;
  flex-direction: column;
  transition: box-shadow .35s ease;
}
.services > .service:nth-child(1) { margin-left: 0; }
.services > .service:nth-child(3) { transition-delay: .12s; }
.services > .service:nth-child(5) { transition-delay: .24s; }
/* 開いているカードと、下のパネルをつなぐ線 */
.service.is-active { box-shadow: inset 0 -2px 0 var(--accent); }

.service-kind {
  font-family: var(--serif);
  font-size: 12.5px;
  letter-spacing: 0.18em;
  color: var(--ink-3);
  margin-bottom: 14px;
}
.service-name {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: 0.08em;
  line-height: 1.7;
  margin-bottom: 18px;
}
.service-sum {
  font-size: 14.5px;
  line-height: 2;
  color: var(--ink-2);
  margin-bottom: 26px;
}

.service-meta {
  border-top: 1px solid var(--line);
  margin-top: auto;
  padding-top: 18px;
  font-size: 14px;
}
.service-meta > div {
  display: flex;
  gap: 14px;
  align-items: baseline;
  padding: 5px 0;
}
.service-meta dt {
  flex: 0 0 3.6em;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--ink-3);
}
.service-meta dd strong {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: 0.03em;
  color: var(--accent);
}
.service-meta dd span {
  font-size: 12px;
  color: var(--ink-3);
  margin-left: 4px;
}
.service-meta dd .meta-note {
  display: block;
  margin-left: 0;
  font-size: 11.5px;
  line-height: 1.7;
}

/* 「くわしく読む」ボタン */
.service-more {
  margin-top: 22px;
  width: 100%;
  font-family: inherit;
  font-size: 13.5px;
  letter-spacing: 0.1em;
  color: var(--accent);
  background: none;
  border: none;
  border-top: 1px solid var(--line);
  padding: 14px 0 4px;
  cursor: pointer;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: color .3s;
}
.service-more::after {
  content: "";
  width: 9px; height: 9px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translate(-2px,-2px);
  transition: transform .35s ease;
}
.service-more:hover { color: var(--accent-2); }
.service-more:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.service-more .lbl-close { display: none; }
.service-more[aria-expanded="true"] { color: var(--ink-3); }
.service-more[aria-expanded="true"] .lbl-read { display: none; }
.service-more[aria-expanded="true"] .lbl-close { display: inline; }
.service-more[aria-expanded="true"]::after { transform: rotate(-135deg) translate(-2px,-2px); }

/* 詳細パネル（3枚の下に全幅で開く） */
.service-panel {
  background: var(--paper);
  border: 1px solid var(--line);
  margin-top: -1px;
  padding: 40px 44px 36px;
  animation: fadein .45s ease both;
}
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .service-panel { animation: none; } }

.panel-head {
  display: flex;
  align-items: baseline;
  gap: 18px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
  padding-bottom: 16px;
  margin-bottom: 30px;
}
.panel-name {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 21px;
  letter-spacing: 0.08em;
}
.panel-kind {
  font-family: var(--serif);
  font-size: 12.5px;
  letter-spacing: 0.18em;
  color: var(--ink-3);
}

.panel-body {
  columns: 2;
  column-gap: 60px;
  font-size: 14.5px;
  line-height: 2;
  color: var(--ink-2);
}
.panel-block {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin-bottom: 30px;
}
.panel-block:last-child { margin-bottom: 0; }
.panel-body h4 {
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--ink);
  margin: 0 0 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.panel-body p { margin-bottom: 1em; }
.panel-body p:last-child { margin-bottom: 0; }

.panel-foot {
  border-top: 1px solid var(--line);
  margin-top: 30px;
  padding-top: 18px;
  text-align: center;
}
.panel-close {
  font-family: inherit;
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  background: none;
  border: none;
  padding: 6px 18px;
  cursor: pointer;
  transition: color .3s;
}
.panel-close:hover { color: var(--accent); }
.panel-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.detail-note { font-size: 13px; color: var(--ink-3); }
.detail-link { margin-top: 16px; font-size: 13.5px; }

.tick li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 4px;
}
.tick li::before {
  content: "";
  position: absolute;
  left: 2px; top: 1em;
  width: 8px; height: 1px;
  background: var(--line-2);
}
.steps { counter-reset: st; }
.steps li {
  counter-increment: st;
  position: relative;
  padding-left: 26px;
  margin-bottom: 4px;
}
.steps li::before {
  content: counter(st) ".";
  position: absolute;
  left: 2px;
  font-family: var(--serif);
  color: var(--accent);
  font-size: 13px;
}

.plans {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin: 12px 0 4px;
}
.plan { background: var(--paper-alt); padding: 18px 20px; }
.plan-name {
  font-family: var(--serif);
  font-size: 15px;
  letter-spacing: 0.1em;
  color: var(--ink);
}
.plan-price {
  font-family: var(--serif);
  font-size: 18px;
  color: var(--accent);
  letter-spacing: 0.03em;
  margin: 2px 0 6px;
}
.plan-price span { font-family: var(--sans); font-size: 12px; color: var(--ink-3); }
.plan-desc { font-size: 13.5px; line-height: 1.9; }

/* 詳細パネル内で三つの問いを引用するとき */
.panel-body .panel-questions {
  font-family: var(--serif);
  font-size: 14.5px;
  line-height: 2.05;
  letter-spacing: 0.06em;
  color: var(--accent);
  border-left: 1px solid var(--line-2);
  padding-left: 16px;
  margin-bottom: 1.2em;
}

/* アドバイザリー詳細のなかに置く継続プラン（表には出さず控えめに） */
.subplan {
  border-top: 1px solid var(--line);
  padding-top: 18px;
}
.panel-body .subplan-name {
  font-family: var(--serif);
  font-size: 14px;
  letter-spacing: 0.12em;
  color: var(--ink);
  margin-bottom: 6px;
}
.subplan-price {
  font-family: var(--sans);
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: var(--ink-3);
  margin-left: 12px;
  white-space: nowrap;
}
.panel-body .subplan-desc {
  font-size: 13.5px;
  line-height: 1.9;
  color: var(--ink-2);
  margin-bottom: 6px;
}
.panel-body .subplan-note { font-size: 12.5px; color: var(--ink-3); }

/* 3枚のカードで区切り線（.service-meta / .service-more の上罫）の
   位置・長さ・余白を揃える。カード内の行トラックを親グリッドと共有する。 */
@media (min-width: 901px) {
  @supports (grid-template-rows: subgrid) {
    .services { grid-template-rows: auto auto auto auto; }
    .services > .service:nth-child(1) { grid-row: 1 / span 3; }
    .services > .service:nth-child(3) { grid-row: 1 / span 3; }
    .services > .service:nth-child(5) { grid-row: 1 / span 3; }
    .services > .service-panel { grid-row: 4; }

    .service {
      display: grid;
      grid-template-rows: subgrid;
    }
    .service-head { grid-row: 1; }
    .service-meta { grid-row: 2; margin-top: 0; }
    .service-more { grid-row: 3; align-self: start; }
  }
}

@media (max-width: 900px) {
  .services { grid-template-columns: 1fr; margin-bottom: 0; }
  /* 1カラムのときは DOM の並び順どおり（カード → そのカードの詳細） */
  .services > .service:nth-child(1),
  .services > .service:nth-child(3),
  .services > .service:nth-child(5),
  .services > .service-panel { grid-column: auto; grid-row: auto; }
  .service { padding: 36px 24px 30px; margin-left: 0; margin-top: -1px; }
  .services > .service:nth-child(1) { margin-top: 0; }
  .services > .service:nth-child(3),
  .services > .service:nth-child(5) { transition-delay: 0s; }
  .service-panel { padding: 30px 24px 26px; }
  .panel-body { columns: 1; }
}

/* ============================================================
 * 06 FAQ
 * ============================================================ */
.faq { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item > summary {
  list-style: none;
  cursor: pointer;
  padding: 26px 44px 26px 30px;
  position: relative;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.85;
  transition: color .3s;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary:hover { color: var(--accent); }
.faq-item > summary::before {
  content: "Q";
  position: absolute;
  left: 2px; top: 26px;
  font-family: var(--serif);
  font-size: 15px;
  color: var(--accent);
}
.faq-item > summary::after {
  content: "";
  position: absolute;
  right: 10px; top: 50%;
  width: 8px; height: 8px;
  border-right: 1px solid var(--ink-3);
  border-bottom: 1px solid var(--ink-3);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .35s ease;
}
.faq-item[open] > summary::after { transform: translateY(-20%) rotate(-135deg); }

.faq-a {
  padding: 0 30px 30px;
  font-size: 15px;
  color: var(--ink-2);
  line-height: 2.1;
  animation: fadein .5s ease both;
}
.faq-a p { margin-bottom: 1em; }
.faq-a p:last-child { margin-bottom: 0; }
@media (max-width: 700px) {
  .faq-item > summary { padding: 22px 36px 22px 26px; font-size: 15.5px; }
  .faq-item > summary::before { top: 22px; }
  .faq-a { padding: 0 0 26px 26px; }
}

/* ============================================================
 * 07 フォーム
 * ============================================================ */
.section-contact { background: var(--paper-alt); padding-bottom: 150px; }

.form {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 48px 44px;
}

.form-group-label {
  font-family: var(--serif);
  font-size: 13px;
  letter-spacing: 0.2em;
  color: var(--ink-3);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 30px;
}
.form-group-label:not(:first-child) { margin-top: 48px; }

.field { margin-bottom: 28px; border: 0; }
.field > label,
.field > legend {
  display: block;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
  line-height: 1.8;
}

.req, .opt {
  display: inline-block;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.08em;
  border-radius: 2px;
  padding: 2px 8px;
  margin-left: 10px;
  vertical-align: 2px;
}
.req { color: var(--accent); border: 1px solid var(--accent); }
.opt { color: var(--ink-3); border: 1px solid var(--line-2); }

.field input,
.field textarea {
  width: 100%;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.8;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: 2px;
  padding: 12px 14px;
  transition: border-color .3s;
}
.field input:hover, .field textarea:hover { border-color: var(--ink-3); }
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(31,58,95,.08);
}
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: #a8442f; }
.field textarea { resize: vertical; }

.checks {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px 20px;
}
.checks label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  padding: 8px 0;
  cursor: pointer;
}
.checks input {
  width: 16px; height: 16px;
  accent-color: var(--accent);
  flex: 0 0 auto;
}
@media (max-width: 600px) { .checks { grid-template-columns: 1fr; } }

.form-submit { margin-top: 44px; }
.form-note {
  font-size: 12.5px;
  color: var(--ink-3);
  text-align: center;
  margin-top: 16px;
}
.form-status {
  margin-top: 16px;
  font-size: 14px;
  text-align: center;
  color: var(--ink-2);
}
.form-status.is-error { color: #a8442f; }

.form-done {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 56px 44px;
}
.form-done-title {
  font-family: var(--serif);
  font-size: 22px;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin-bottom: 24px;
}
.form-done .tick { margin: -0.6em 0 1.7em; }

@media (max-width: 700px) {
  .form, .form-done { padding: 32px 22px; }
  .section-contact { padding-bottom: 120px; }
}

/* ============================================================
 * フッター
 * ============================================================ */
.site-footer {
  border-top: 1px solid var(--line);
  padding: 60px 0 40px;
  background: var(--paper);
}
.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 30px;
  flex-wrap: wrap;
  padding-bottom: 36px;
}
.footer-name {
  font-family: var(--serif);
  font-size: 21px;
  letter-spacing: 0.2em;
  margin-bottom: 8px;
}
.footer-tag {
  font-family: var(--serif);
  font-size: 13.5px;
  letter-spacing: 0.1em;
  color: var(--ink-3);
}
.footer-meta { text-align: right; font-size: 13.5px; }
.footer-person { font-family: var(--serif); letter-spacing: 0.14em; }
.footer-mail a { color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--line-2); }
.footer-mail a:hover { color: var(--accent); }
.copyright {
  text-align: center;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  border-top: 1px solid var(--line);
  padding-top: 28px;
}
@media (max-width: 600px) {
  .footer-inner { flex-direction: column; align-items: flex-start; }
  .footer-meta { text-align: left; }
}

/* ============================================================
 * モバイル固定CTA
 * ============================================================ */
.float-cta {
  position: fixed;
  left: 16px; right: 16px; bottom: 16px;
  z-index: 40;
  display: none;
  text-align: center;
  font-size: 15px;
  letter-spacing: 0.1em;
  color: #fff;
  background: var(--accent);
  text-decoration: none;
  border-radius: 2px;
  padding: 15px 20px;
  box-shadow: 0 6px 24px rgba(35,40,44,.16);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .45s ease, transform .45s ease;
  pointer-events: none;
}
@media (max-width: 700px) {
  .float-cta { display: block; }
  .float-cta.is-visible { opacity: 1; transform: none; pointer-events: auto; }
}