@charset "utf-8";
/* ============================================================
 *  トップページ カスタム設計セクション（フルブリード / ライト・ダーク切替）
 *  すべて #home-custom 配下にスコープ（既存CSSと非干渉）
 * ============================================================ */
#home-custom { padding: clamp(4rem, 9vh, 6.5rem) 1rem; background: var(--bg); color: var(--ink); }
#home-custom.theme-dark {
  --bg:#0a1424; --ink:#e8f0fb; --sub:#8ba3c4; --hair:rgba(120,160,210,.16);
  --sig:#31d2e6; --sigline:#3a7bff; --btnink:#04121a; --legv:#4d9be0; --legpd:#ff7a2f;
}
#home-custom.theme-light {
  --bg:#f5f7fa; --ink:#16233a; --sub:#5a6a80; --hair:rgba(22,74,132,.15);
  --sig:#1d61ae; --sigline:#5383c3; --btnink:#ffffff; --legv:#2f6fb0; --legpd:#e8722c;
}
#home-custom .hc-wrap { max-width: 1000px; margin: 0 auto; }
#home-custom .mono { font-family: ui-monospace, "SF Mono", "Menlo", "Consolas", "Roboto Mono", monospace; font-variant-numeric: tabular-nums; }
#home-custom .serif { font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif; }

/* 見出し（中央・他セクションと統一） */
#home-custom .hc-head { text-align: center; margin-bottom: 1rem; }
#home-custom .hc-head .en { display: block; font-size: .8rem; letter-spacing: .24em; font-weight: 700; color: var(--sig); }
#home-custom .hc-head .ja { display: block; font-size: clamp(1.7rem, 4vw, 2.4rem); font-weight: 600; color: var(--ink); margin-top: .25em; letter-spacing: .06em; }
#home-custom .hc-head .ja::after { content: ""; display: block; width: 2.4em; height: 3px; margin: .5em auto 0; border-radius: 3px; background: linear-gradient(90deg, var(--sig), var(--sigline)); }
#home-custom .hc-lead { text-align: center; color: var(--sub); max-width: 56ch; margin: 0 auto; font-size: .98rem; }

/* 波形 */
#home-custom .wave { position: relative; height: 168px; margin: 2rem 0 1.6rem; }
#home-custom .wave canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#home-custom .wlegend { position: absolute; top: 8px; right: 4px; display: flex; gap: .9rem; font-size: .62rem; letter-spacing: .06em; color: var(--sub); z-index: 2; }
#home-custom .wlegend .lg { display: flex; align-items: center; gap: .35rem; }
#home-custom .wlegend .lg::before { content: ""; width: 15px; height: 2px; }
#home-custom .wlegend .v::before { background: var(--legv); }
#home-custom .wlegend .pd::before { background: var(--legpd); }

/* フロー */
#home-custom .flow { display: grid; grid-template-columns: repeat(6, 1fr); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); margin: 1.6rem 0 2rem; }
#home-custom .fstep { position: relative; padding: 1.15rem clamp(.7rem,2vw,1.2rem); border-right: 1px solid var(--hair); transition: transform .6s ease, background .6s ease; }
#home-custom .fstep:last-child { border-right: none; }
#home-custom .fstep::before { content: ""; position: absolute; left: clamp(.7rem,2vw,1.2rem); top: -4px; width: 7px; height: 7px; border-radius: 50%; background: var(--bg); border: 1.5px solid var(--sig); transition: background .6s ease, box-shadow .6s ease, transform .6s ease; }
#home-custom .fstep .fx { font-size: .68rem; color: var(--sig); letter-spacing: .1em; transition: opacity .6s ease; opacity: .7; }
#home-custom .fstep .fnm { font-weight: 700; font-size: .95rem; margin: .3rem 0 .15rem; transition: color .6s ease; }
#home-custom .fstep .fds { font-size: .72rem; color: var(--sub); line-height: 1.5; }
#home-custom .fstep.active { transform: translateY(-3px); }
#home-custom .fstep.active::before { background: var(--sig); box-shadow: 0 0 12px var(--sig); transform: scale(1.7); }
#home-custom .fstep.active .fx { opacity: 1; }
#home-custom .fstep.active .fnm { color: var(--sig); }
/* ライトは白背景で発光が弱いので視認性を上げる */
#home-custom.theme-light .fstep.active { background: rgba(29,97,174,.06); }
#home-custom.theme-light .fstep.active::before { box-shadow: 0 0 0 4px rgba(29,97,174,.18), 0 0 6px rgba(29,97,174,.5); }

/* 設計/測定 2カラム */
#home-custom .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
#home-custom .col { padding: 1.4rem clamp(1rem,3vw,2rem) 1.8rem; }
#home-custom .col + .col { border-left: 1px solid var(--hair); }
#home-custom .colh { margin-bottom: .9rem; }
#home-custom .colh b { color: var(--ink); font-size: .92rem; letter-spacing: .02em; font-weight: 700; }
#home-custom .drw { border-top: 1px solid var(--hair); }
#home-custom .drw:last-child { border-bottom: 1px solid var(--hair); }
#home-custom .drw button { width: 100%; background: none; border: none; color: inherit; font: inherit; cursor: pointer; display: grid; grid-template-columns: 2.2rem 1fr auto; align-items: center; gap: .55rem; padding: .85rem 0; text-align: left; }
#home-custom .drw .ix { color: var(--sig); font-size: .72rem; }
#home-custom .drw .ti { font-weight: 600; font-size: .93rem; }
#home-custom .drw .chev { width: .55rem; height: .55rem; border-right: 1.5px solid var(--sig); border-bottom: 1.5px solid var(--sig); transform: rotate(45deg); transition: transform .3s; justify-self: end; }
#home-custom .drw.open .chev { transform: rotate(-135deg); }
#home-custom .drw .bd { max-height: 0; overflow: hidden; transition: max-height .4s ease; }
#home-custom .drw.open .bd { max-height: 320px; }
#home-custom .drw .bd-in { padding: 0 0 1rem 2.75rem; color: var(--sub); font-size: .85rem; line-height: 1.8; }
#home-custom .drw .bd-in strong { color: var(--ink); transition: color .5s ease, text-shadow .5s ease, background .5s ease; }
/* 展開時に太字を強調（ダーク=グロー） */
#home-custom .drw.open .bd-in strong { color: var(--sig); text-shadow: 0 0 12px var(--sig); }
/* ライトはマーカー風ハイライトで視認性を上げる */
#home-custom.theme-light .drw.open .bd-in strong { text-shadow: none; background: linear-gradient(transparent 56%, rgba(29,97,174,.22) 56%); border-radius: 2px; }

#home-custom .chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .6rem; }
#home-custom .chips span { font-size: .68rem; border: 1px solid var(--hair); border-radius: 4px; padding: .18em .55em; color: var(--sub); letter-spacing: .03em; }
#home-custom .foot { display: flex; justify-content: center; margin-top: 2rem; }
#home-custom .btn { display: inline-flex; align-items: center; gap: .6rem; background: var(--sig); color: var(--btnink); font-weight: 700; text-decoration: none; padding: .8em 2.4em; border-radius: 6px; font-size: .95rem; transition: opacity .2s ease, transform .2s ease; }
#home-custom .btn:hover { opacity: .9; transform: translateY(-1px); }
#home-custom .btn .ar { width: .85rem; height: .85rem; border-right: 2px solid var(--btnink); border-top: 2px solid var(--btnink); transform: rotate(45deg); }

@media (max-width: 760px) {
  #home-custom .flow { grid-template-columns: repeat(3, 1fr); }
  #home-custom .fstep:nth-child(3) { border-right: none; }
  #home-custom .fstep:nth-child(-n+3) { border-bottom: 1px solid var(--hair); }
  #home-custom .cols { grid-template-columns: 1fr; }
  #home-custom .col + .col { border-left: none; border-top: 1px solid var(--hair); }
}