/* チューニングサロン そわか：公開サイトの見た目。外部の書体・CSS・画像に依存しない（システムの書体と、テーマに同梱した画像だけを使う）。
   方向：ミントの淡い面・やわらかい曲線・主宰の写真とイラスト・明朝の見出し・ゴシックのカード見出し。色は :root の変数だけで使う。 */
:root { --c-accent: #0b6b78; --c-accent-dark: #084f59; --c-bg: #fbfeff; --c-cyan: #19d4e4; --c-deep: #0b4659; --c-line: #c9e3e8; --c-line-green: #06c755; --c-line-green-dark: #05b04c; --c-mint: #d3f5f9; --c-muted: #48666f; --c-on-accent: #ffffff; --c-on-line: #0c2a1e; --c-rose: #f6e4df; --c-sand: #f6efe4; --c-soft: #eaf9fb; --c-surface: #ffffff; --c-text: #12303a; --c-wash: #f1fbfc; --font-sans: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "BIZ UDPGothic", "Yu Gothic UI", "Yu Gothic", "Meiryo", system-ui, sans-serif; --font-serif: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "BIZ UDPMincho", "Noto Serif JP", serif; --measure: 40rem; --radius: 18px; --shadow: 0 2px 4px rgba(11, 70, 89, 0.06), 0 18px 44px rgba(11, 70, 89, 0.13); --shadow-sm: 0 1px 2px rgba(11, 70, 89, 0.06), 0 8px 22px rgba(11, 70, 89, 0.09); --wrap: 68rem; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5.5rem; text-size-adjust: 100%; }
body { background: var(--c-bg); color: var(--c-text); font-family: var(--font-sans); font-size: 1rem; letter-spacing: 0.03em; line-height: 1.95; margin: 0; overflow-wrap: anywhere; word-break: auto-phrase; }
img, svg, video { height: auto; max-width: 100%; }
img, video { display: block; }
a { color: var(--c-accent); text-underline-offset: 0.22em; }
a:hover { color: var(--c-accent-dark); }
:focus-visible { border-radius: 4px; outline: 3px solid var(--c-accent); outline-offset: 2px; }
.sr { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px; }
.skip { background: var(--c-surface); color: var(--c-text); left: -999px; padding: 0.6rem 1rem; position: absolute; top: 0; z-index: 100; }
.skip:focus { left: 0.5rem; top: 0.5rem; }
.wrap { margin-inline: auto; width: min(100% - 2.4rem, var(--wrap)); }
.measure { max-width: var(--measure); }
h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 700; letter-spacing: 0.04em; line-height: 1.4; margin: 0 0 0.8em; text-wrap: balance; }
h1 { font-size: clamp(1.75rem, 5.6vw, 2.6rem); line-height: 1.5; }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); margin-top: 0; }
h3 { font-family: var(--font-sans); font-size: 1.14rem; font-weight: 700; line-height: 1.55; }
h4 { font-size: 1.04rem; }
p { margin: 0 0 1.1em; }
ul, ol { margin: 0 0 1.2em; padding-left: 1.4em; }
li { margin-bottom: 0.35em; }

/* header / nav */
.site-header { backdrop-filter: blur(10px); background: rgba(251, 250, 246, 0.92); border-bottom: 1px solid var(--c-line); position: sticky; top: 0; z-index: 50; }
.site-header .wrap { align-items: center; display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; justify-content: space-between; min-height: 5.2rem; }
.brand { align-items: center; color: var(--c-text); display: inline-flex; font-family: var(--font-serif); font-size: 1.08rem; font-weight: 700; gap: 0.75rem; letter-spacing: 0.04em; text-decoration: none; white-space: nowrap; }
.brand:hover { color: var(--c-text); }
.brand__logo { background: #fff; border-radius: 50%; box-shadow: 0 0 0 2px #fff, 0 2px 10px rgba(11, 107, 120, 0.22); flex: none; height: 3.5rem; width: 3.5rem; }
.nav-toggle { background: var(--c-surface); border: 2px solid var(--c-accent); border-radius: 999px; color: var(--c-text); cursor: pointer; display: none; font: inherit; padding: 0.4rem 1.1rem; }
.site-nav ul { align-items: center; display: flex; flex-wrap: wrap; gap: 0.2rem 1.2rem; list-style: none; margin: 0; padding: 0; }
.site-nav li { margin: 0; }
.site-nav a { border-bottom: 2px solid transparent; color: var(--c-text); display: inline-block; font-size: 0.95rem; padding: 0.45rem 0; text-decoration: none; }
.site-nav a:hover { border-bottom-color: var(--c-accent); }
.site-nav .nav-cta a { background: var(--c-line-green); border: 0; border-radius: 999px; box-shadow: var(--shadow-sm); color: var(--c-on-line); font-weight: 700; padding: 0.55rem 1.3rem; }
.site-nav .nav-cta a:hover { background: var(--c-line-green-dark); color: var(--c-on-line); }
@media (max-width: 47.99rem) {
  .site-header .wrap { flex-wrap: wrap; min-height: 4.2rem; }
  .brand { flex: 1 1 0; font-size: 0.92rem; gap: 0.6rem; letter-spacing: 0; min-width: 0; white-space: nowrap; }
  .brand__logo { height: 3rem; width: 3rem; }
  .nav-toggle { display: inline-block; }
  .site-nav { display: none; width: 100%; }
  .site-nav.is-open { display: block; }
  .site-nav ul { align-items: stretch; flex-direction: column; gap: 0; padding-bottom: 0.8rem; }
  .site-nav a { border-bottom: 1px solid var(--c-line); padding: 0.8rem 0; width: 100%; }
  .site-nav .nav-cta a { margin-top: 0.8rem; text-align: center; }
}
.no-js .nav-toggle { display: none; }
.no-js .site-nav { display: block; }

/* layout */
.site-main { min-height: 50vh; }
.section { padding: 5rem 0; position: relative; }
@media (max-width: 47.99rem) { .section { padding: 3.4rem 0; } }
.section--soft, .band[data-band="soft"] { background: var(--c-soft); }
.section--mint, .band[data-band="mint"] { background: linear-gradient(176deg, var(--c-mint), var(--c-soft)); }
.section--sand, .band[data-band="sand"] { background: var(--c-sand); }
.section--surface { background: var(--c-surface); border-block: 1px solid var(--c-line); }
.section--deep, .band[data-band="deep"] { background: var(--c-deep); color: var(--c-on-accent); }
.section--deep h2, .section--deep h3, .band[data-band="deep"] h2, .band[data-band="deep"] h3 { color: var(--c-on-accent); }
.section--deep a:not(.btn):not(.pick), .band[data-band="deep"] a:not(.btn) { color: var(--c-on-accent); }
.eyebrow { color: var(--c-muted); font-family: var(--font-sans); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.22em; margin-bottom: 0.8rem; text-transform: uppercase; }
.section--deep .eyebrow, .band[data-band="deep"] .eyebrow { color: var(--c-mint); }
.lead { font-size: 1.1rem; max-width: var(--measure); }
.sec-head { margin-bottom: 2.6rem; max-width: var(--measure); }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-head h2::after { background: linear-gradient(90deg, var(--c-accent), var(--c-mint)); border-radius: 2px; content: ""; display: block; height: 4px; margin-top: 0.8rem; width: 3.6rem; }
.sec-head--center h2::after { margin-inline: auto; }
.section--deep .sec-head h2::after, .band[data-band="deep"] .sec-head h2::after { background: linear-gradient(90deg, var(--c-mint), var(--c-accent)); }
.sec-head p:last-child { margin-bottom: 0; }

/* page head（下層ページの冒頭帯） */
.page-hero { background: linear-gradient(162deg, var(--c-mint) 0%, var(--c-soft) 55%, var(--c-bg) 100%); border-bottom: 1px solid var(--c-line); overflow: hidden; position: relative; }
.page-hero::before { background: radial-gradient(circle at 40% 40%, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.15) 70%); border: 3px solid var(--c-surface); border-radius: 50%; content: ""; height: 24rem; position: absolute; right: -6rem; top: -9rem; width: 24rem; }
.page-hero::after { border: 2px solid var(--c-accent); border-radius: 50%; bottom: -4rem; content: ""; height: 11rem; left: -3rem; opacity: 0.2; position: absolute; width: 11rem; }
.page-hero__inner { align-items: center; display: grid; gap: 1.6rem; padding: 1.2rem 0 3rem; position: relative; z-index: 1; }
@media (min-width: 48rem) { .page-hero__inner--art { grid-template-columns: minmax(0, 1fr) 17rem; } }
.page-hero h1 { margin-bottom: 0.45em; }
.page-hero .lead { margin-bottom: 0; }
.page-hero__art { border-radius: 28px 28px 28px 80px; box-shadow: var(--shadow); overflow: hidden; }
.page-hero__art img { width: 100%; }
.page-hero__art--tile { background: none; border-radius: 28px 28px 28px 80px; box-shadow: none; }
@media (max-width: 47.99rem) { .page-hero__art { max-width: 18rem; } }
.page-body { padding: 3.4rem 0 4.4rem; }
.breadcrumb { color: var(--c-muted); font-size: 0.88rem; padding: 1.1rem 0 1.2rem; position: relative; z-index: 1; }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 0.2rem 0.5rem; list-style: none; margin: 0; padding: 0; }
.breadcrumb li { margin: 0; }
.breadcrumb li + li::before { content: "›"; margin-right: 0.5rem; }
.breadcrumb a { color: var(--c-muted); }

/* 章番号の面（絵を割り当てない章） */
.numtile { align-items: center; aspect-ratio: 16 / 10; background: linear-gradient(135deg, var(--c-mint), var(--c-soft) 60%, var(--c-sand)); display: flex; overflow: hidden; justify-content: center; position: relative; width: 100%; }
.numtile::before { border: 3px solid var(--c-surface); border-radius: 50%; content: ""; height: 70%; left: 8%; opacity: 0.9; position: absolute; top: 12%; aspect-ratio: 1; }
.numtile span { color: var(--c-accent); font-family: var(--font-serif); font-size: clamp(3.4rem, 9vw, 5.4rem); font-weight: 600; line-height: 1; position: relative; }
.page-hero__art--tile .numtile { aspect-ratio: 1; border-radius: 28px 28px 28px 80px; box-shadow: var(--shadow); }

/* hero（トップ） */
.hero { background: linear-gradient(160deg, var(--c-surface) 0%, var(--c-wash) 38%, var(--c-mint) 100%); overflow: hidden; padding: 3.6rem 0 3.2rem; position: relative; }
.hero::before { background: radial-gradient(circle at 40% 40%, rgba(25, 212, 228, 0.28), rgba(25, 212, 228, 0) 68%); border-radius: 50%; content: ""; height: 40rem; position: absolute; right: -12rem; top: -14rem; width: 40rem; }
.hero::after { background: radial-gradient(circle at 60% 60%, rgba(25, 212, 228, 0.2), rgba(25, 212, 228, 0) 70%); border-radius: 50%; bottom: -9rem; content: ""; height: 22rem; left: -7rem; position: absolute; width: 22rem; }
.hero__grid { align-items: center; display: grid; gap: 2.4rem; grid-template-columns: minmax(0, 1fr); position: relative; z-index: 1; }
@media (min-width: 52rem) { .hero__grid { gap: 3rem; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); } }
.hero h1 { font-size: clamp(1.8rem, 5.4vw, 2.9rem); line-height: 1.5; margin-bottom: 0.7em; }
.hero .lead { font-size: 1.06rem; }
.hero__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 1.6rem 0 0; padding: 0; }
.hero__chips li { background: rgba(255, 255, 255, 0.9); border: 1px solid rgba(11, 107, 120, 0.4); border-radius: 999px; font-size: 0.85rem; margin: 0; padding: 0.15rem 0.95rem; white-space: nowrap; }
.hero__media { margin-inline: auto; max-width: 28rem; position: relative; width: 100%; }
.hero__photo img, .hero__media video { aspect-ratio: 4 / 5; border-radius: 120px 120px 32px 32px; box-shadow: var(--shadow); object-fit: cover; object-position: 50% 68%; position: relative; width: 100%; }
.floatcard { background: var(--c-surface); border-radius: 16px; box-shadow: var(--shadow); position: absolute; }
.floatcard--badge { bottom: 2rem; font-size: 0.82rem; font-weight: 700; left: -1.4rem; padding: 0.5rem 1.1rem; }
.floatcard--badge::before { background: linear-gradient(150deg, var(--c-cyan), var(--c-accent)); border-radius: 50%; content: ""; display: inline-block; height: 0.55rem; margin-right: 0.5rem; width: 0.55rem; }
@media (max-width: 51.99rem) {
  .hero { padding: 1.2rem 0 2.2rem; }
  .hero__grid { gap: 1.4rem; }
  .hero__media { max-width: 16rem; order: -1; }
  .hero__photo img, .hero__media video { aspect-ratio: 1; border-radius: 90px 90px 24px 24px; max-height: 30vh; width: auto; }
    .floatcard--badge { bottom: 0.8rem; left: -0.4rem; }
    .hero h1 { font-size: 1.7rem; margin-bottom: 0.4em; }
  .hero .lead { font-size: 0.98rem; line-height: 1.8; }
  .hero .btn-row { margin-top: 1rem; }
}

/* buttons */
.btn { background: var(--c-accent); border: 2px solid var(--c-accent); border-radius: 999px; box-shadow: var(--shadow-sm); color: var(--c-on-accent); display: inline-block; font-weight: 600; line-height: 1.5; padding: 0.9rem 1.8rem; text-align: center; text-decoration: none; }
.btn:hover { background: var(--c-accent-dark); border-color: var(--c-accent-dark); color: var(--c-on-accent); }
.btn--ghost { background: var(--c-surface); box-shadow: none; color: var(--c-accent); }
.btn--ghost:hover { background: var(--c-soft); border-color: var(--c-accent-dark); color: var(--c-accent-dark); }
.btn--light { background: var(--c-surface); border-color: var(--c-surface); color: var(--c-accent-dark); }
.btn--light:hover { background: var(--c-mint); border-color: var(--c-mint); color: var(--c-accent-dark); }
.btn--line { background: var(--c-line-green); border-color: var(--c-line-green); color: var(--c-on-line); font-weight: 700; }
.btn--line:hover { background: var(--c-line-green-dark); border-color: var(--c-line-green-dark); color: var(--c-on-line); }
.nw { white-space: nowrap; }
.payfine { border-left: 3px solid var(--c-line); color: var(--c-muted); font-size: 0.94rem; line-height: 1.8; margin: 0 0 1rem; max-width: var(--measure); padding: 0.1rem 0 0.1rem 0.8rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.5rem; }
.float-bar { display: none; }
.float-cta { background: var(--c-line-green); border-radius: 999px; box-shadow: var(--shadow); color: var(--c-on-line); display: block; font-weight: 700; padding: 0.8rem 1.8rem; text-align: center; text-decoration: none; }
.float-cta:hover { background: var(--c-line-green-dark); color: var(--c-on-line); }
@media (max-width: 47.99rem) {
  .float-bar { backdrop-filter: blur(8px); background: rgba(251, 250, 246, 0.86); border-top: 1px solid var(--c-line); bottom: 0; display: block; left: 0; padding: 0.6rem 1.2rem calc(0.6rem + env(safe-area-inset-bottom)); position: fixed; right: 0; z-index: 40; }
  body { padding-bottom: 4.6rem; }
  .js .float-bar { opacity: 0; pointer-events: none; transform: translateY(100%); transition: opacity 0.3s, transform 0.3s; }
  .js .float-bar.is-shown { opacity: 1; pointer-events: auto; transform: none; }
}

/* cards */
.grid { display: grid; gap: 1.4rem; }
.grid--gap { margin-top: 1.8rem; }
@media (min-width: 40rem) { .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 56rem) { .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.card { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 1.5rem 1.5rem 1.3rem; }
.card h3 { margin-bottom: 0.3em; }
.card .kind { color: var(--c-muted); font-size: 0.92rem; margin-bottom: 0.6rem; }
.card--media { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.card--media .card__img { aspect-ratio: 16 / 10; background: var(--c-soft); object-fit: cover; object-position: 50% 30%; width: 100%; }
.card--media .card__body { display: flex; flex: 1; flex-direction: column; padding: 1.3rem 1.5rem 1.4rem; }
.card--media .card__body > :last-child { margin-bottom: 0; }
.card__more { margin-top: auto; padding-top: 0.4rem; }
.card--link { box-shadow: var(--shadow-sm); }
.price { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 600; margin: 0.2rem 0 0.6rem; }
.price small { color: var(--c-muted); font-size: 0.85rem; font-weight: 400; }
.meta-list { font-size: 0.95rem; list-style: none; margin: 0 0 1rem; padding: 0; }
.meta-list li { padding-left: 1.1em; position: relative; }
.meta-list li::before { color: var(--c-accent); content: "・"; left: 0; position: absolute; }
.group-lead { margin-bottom: 1.4rem; max-width: var(--measure); }
.group + .group { margin-top: 3.8rem; }
.group > .split { margin-bottom: 1.8rem; }
.group .split__media img { aspect-ratio: 4 / 3; object-fit: cover; }
.group > h2 { padding-left: 1rem; position: relative; }
.group > h2::before { background: linear-gradient(180deg, var(--c-accent), var(--c-mint)); border-radius: 3px; bottom: 0.15em; content: ""; left: 0; position: absolute; top: 0.15em; width: 5px; }
.card--price { border-top: 4px solid var(--c-accent); }

/* ticks（チェックの丸つきの箇条書き） */
.ticks { list-style: none; margin: 0 0 1.2rem; padding: 0; }
.ticks li { padding-left: 1.9rem; position: relative; }
.ticks li::before { background: var(--c-mint); border: 2px solid var(--c-accent); border-radius: 50%; content: ""; height: 1.05rem; left: 0; position: absolute; top: 0.5rem; width: 1.05rem; }
.ticks li::after { border-bottom: 2px solid var(--c-accent); border-left: 2px solid var(--c-accent); content: ""; height: 0.3rem; left: 0.28rem; position: absolute; top: 0.78rem; transform: rotate(-45deg); width: 0.5rem; }

/* 心当たり（チェックのカード） */
.section--check { background: linear-gradient(180deg, var(--c-bg), var(--c-surface)); }
.checkgrid { display: grid; gap: 1rem; list-style: none; margin: 0 auto; max-width: 56rem; padding: 0; }
@media (min-width: 40rem) { .checkgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 1.4rem; } }
.checkgrid li { align-items: center; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius); box-shadow: var(--shadow-sm); display: flex; gap: 1rem; margin: 0; padding: 1.2rem 1.4rem; }
.checkgrid li p { line-height: 1.8; margin: 0; }
.ck { background: var(--c-accent); border-radius: 50%; flex: none; height: 2rem; position: relative; width: 2rem; }
.ck::after { border-bottom: 3px solid var(--c-on-accent); border-left: 3px solid var(--c-on-accent); content: ""; height: 0.5rem; left: 0.55rem; position: absolute; top: 0.62rem; transform: rotate(-45deg); width: 0.9rem; }
.checkgrid .checkgrid__close { background: linear-gradient(145deg, var(--c-mint), var(--c-soft)); border: 2px solid var(--c-cyan); padding: 1.6rem 1.8rem; }
.checkgrid__close p { color: var(--c-accent-dark); font-family: var(--font-serif); font-size: 1.1rem; font-weight: 700; line-height: 1.9; }
.noticefig { margin: 2.2rem auto 0; max-width: 30rem; }
.noticefig img { border-radius: 16px; box-shadow: var(--shadow-sm); margin-inline: auto; width: 100%; }

/* split（写真と文） */
.split { align-items: center; display: grid; gap: 2.2rem; }
@media (min-width: 48rem) { .split { gap: 3.4rem; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); } .split--rev { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); } .split--rev .split__media { order: 2; } }
.split__media img { box-shadow: var(--shadow); width: 100%; }
.frame-arch img { aspect-ratio: 4 / 5; background: var(--c-mint); border-radius: 999px 999px 28px 28px; object-fit: cover; object-position: 50% 12%; }
.frame-round img { border-radius: 36px; }
.frame-arch, .frame-round { margin-inline: auto; max-width: 24rem; width: 100%; }
.quote { background: var(--c-surface); border-left: 4px solid var(--c-accent); border-radius: 0 var(--radius) var(--radius) 0; font-family: var(--font-serif); font-size: 1.12rem; margin: 1.4rem 0; padding: 1rem 1.3rem; }
.quote p { margin: 0; }

/* 気づき（吹き出しのイラストと文） */
.notice { align-items: center; background: var(--c-surface); border-radius: 28px; box-shadow: var(--shadow); display: grid; gap: 1.8rem; margin-inline: auto; max-width: 56rem; padding: 2rem; }
@media (min-width: 48rem) { .notice { grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); padding: 2.4rem 2.6rem; } }
.notice__text p { margin-bottom: 0.9em; }
.notice__fig { margin: 0; }
.notice__fig img { border-radius: 16px; box-shadow: var(--shadow-sm); width: 100%; }

/* そわかの考え方（パリナ 4 段の円環。順に登る階段ではない） */
.philo { align-items: center; display: grid; gap: 2rem; }
@media (min-width: 52rem) { .philo { gap: 3rem; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } }
.philo__fig { margin: 0; }
.tagline { color: var(--c-accent-dark); font-family: var(--font-serif); font-size: 1.15rem; font-weight: 700; line-height: 1.8; }
.stages { display: grid; gap: 1.2rem; list-style: none; margin: 2.2rem 0 0; padding: 0; }
@media (min-width: 40rem) { .stages { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .stages { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stage { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius); box-shadow: var(--shadow-sm); margin: 0; padding: 1.4rem 1.3rem 1.2rem; }
.stage h3 { font-size: 1.15rem; margin-bottom: 0.4em; }
.stage p { color: var(--c-muted); font-size: 0.94rem; line-height: 1.85; margin-bottom: 0; }
.ico { align-items: center; background: radial-gradient(circle at 30% 25%, var(--c-surface), var(--c-mint)); border-radius: 50%; color: var(--c-accent-dark); display: inline-flex; height: 3rem; justify-content: center; margin-bottom: 0.7rem; width: 3rem; }
.ico svg { height: 1.5rem; width: 1.5rem; }
@media (prefers-reduced-motion: no-preference) {
  .cycle-svg circle { animation: stage-breathe 6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
  .cycle-svg circle:nth-of-type(2) { animation-delay: 1.5s; }
  .cycle-svg circle:nth-of-type(3) { animation-delay: 3s; }
  .cycle-svg circle:nth-of-type(4) { animation-delay: 4.5s; }
    }
@keyframes stage-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }

/* メニュー：中心のメニュー・レポートのメニュー・2 つの違い */
.grid--stretch { align-items: stretch; }
.grid--start { align-items: start; }
.mcard { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: 24px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; padding: 1.4rem 1.4rem 1.3rem; }
.mcard--main { border: 2px solid var(--c-cyan); box-shadow: var(--shadow); }
.mcard__fig { margin: 0 0 1rem; }
.mcard__fig img { background: var(--c-soft); border-radius: 16px; margin-inline: auto; width: 100%; }
.mcard__name { color: var(--c-accent); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.1em; margin: 0.2rem 0 0.1rem; }
.mcard h3 { font-family: var(--font-serif); font-size: 1.35rem; }
.mcard .card__more { margin-top: auto; }
.note-credit { background: var(--c-wash); border-radius: 12px; color: var(--c-muted); font-size: 0.86rem; line-height: 1.8; padding: 0.7rem 0.9rem; }
.badge { background: var(--c-accent); border-radius: 999px; color: var(--c-on-accent); display: inline-block; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; padding: 0.15rem 0.9rem; }
.badge--sub { background: var(--c-mint); color: var(--c-accent-dark); }
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: 0 0 0.9rem; padding: 0; }
.chips li { background: var(--c-mint); border-radius: 999px; color: var(--c-accent-dark); font-size: 0.78rem; font-weight: 700; line-height: 1.6; margin: 0; padding: 0.1rem 0.8rem; }
.flowlist { counter-reset: fl; list-style: none; margin: 0 0 1.2rem; padding: 0; }
.flowlist li { counter-increment: fl; margin: 0 0 0.5rem; padding: 0.2rem 0 0.2rem 2.6rem; position: relative; }
.flowlist li::before { align-items: center; background: var(--c-mint); border-radius: 50%; color: var(--c-accent-dark); content: counter(fl); display: flex; font-family: var(--font-serif); font-weight: 700; height: 1.9rem; justify-content: center; left: 0; position: absolute; top: 0.1rem; width: 1.9rem; }
.flowlist li:not(:last-child)::after { border-left: 2px dotted var(--c-line); content: ""; height: 0.9rem; left: 0.93rem; position: absolute; top: 2.05rem; }
.flowlist--wide { display: grid; gap: 0.8rem; }
@media (min-width: 48rem) { .flowlist--wide { grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); } }
.flowlist--wide li { background: var(--c-soft); border-radius: var(--radius); margin: 0; padding: 3.1rem 1rem 1rem; }
.flowlist--wide li::before { left: 1rem; top: 0.9rem; }
.flowlist--wide li::after { display: none; }
.compare { margin-top: 2.2rem; }
.compare table { border-radius: var(--radius); border-spacing: 0; box-shadow: var(--shadow-sm); border-collapse: separate; overflow: hidden; }
.compare th, .compare td { border: 0; border-bottom: 1px solid var(--c-line); }
.compare thead th { background: var(--c-soft); font-family: var(--font-sans); font-weight: 700; text-align: center; width: auto; }
.compare thead th.is-main { background: var(--c-accent); color: var(--c-on-accent); }
.compare tbody th { background: var(--c-bg); width: 15rem; }
.compare td.is-main { background: var(--c-wash); }
.compare td.is-yes { color: var(--c-accent-dark); font-weight: 700; }
.compare td.is-no { color: var(--c-muted); text-align: center; }
.compare tr:last-child > * { border-bottom: 0; }
.compare caption { caption-side: top; font-weight: 700; padding-bottom: 0.7rem; }
@media (max-width: 39.99rem) {
  .compare thead { border: 0; clip: rect(0 0 0 0); height: 1px; overflow: hidden; position: absolute; width: 1px; }
  .compare table, .compare tbody, .compare tr, .compare th, .compare td { display: block; width: auto; }
  .compare caption { display: block; width: auto; }
  .compare tr { border-bottom: 8px solid var(--c-soft); }
  .compare tbody th { background: var(--c-soft); width: auto; }
  .compare td::before { color: var(--c-muted); content: attr(data-label); display: block; font-size: 0.82rem; font-weight: 700; }
  .compare td.is-no { text-align: left; }
}
.banner { border-radius: 28px; box-shadow: var(--shadow); margin: 0 0 1.8rem; overflow: hidden; }
.banner img { aspect-ratio: 21 / 8; object-fit: cover; object-position: 50% 30%; width: 100%; }
@media (max-width: 47.99rem) { .banner img { aspect-ratio: 3 / 2; } }
.card--body { display: flex; flex-direction: column; }
.card--body .card__more { margin-top: auto; }
.card--body .flowfig { margin: 1rem 0; }
.card--body .flowfig img { border-radius: 12px; margin-inline: auto; max-width: 30rem; width: 100%; }

/* レポートの濃い帯 */
.report-band { overflow: hidden; }
.report-band::before { background: radial-gradient(circle at 40% 40%, rgba(25, 212, 228, 0.32), rgba(25, 212, 228, 0) 70%); border-radius: 50%; content: ""; height: 30rem; left: -10rem; position: absolute; top: -12rem; width: 30rem; }
.report-band__grid { align-items: center; display: grid; gap: 2.2rem; position: relative; }
@media (min-width: 56rem) { .report-band__grid { gap: 3.4rem; grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); } }
.report-band__media img { border-radius: 24px; box-shadow: var(--shadow); width: 100%; }

/* steps（ご相談から受けるまで・矢印でつなぐ） */
.steps { counter-reset: step; display: grid; gap: 1.6rem; list-style: none; margin: 0; padding: 0; }
@media (min-width: 48rem) { .steps { gap: 1.8rem; grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.steps li { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius); box-shadow: var(--shadow-sm); counter-increment: step; margin: 0; padding: 1.3rem 1.2rem 1.1rem; position: relative; }
.steps li::before { align-items: center; background: var(--c-accent); border-radius: 50%; color: var(--c-on-accent); content: counter(step); display: flex; font-family: var(--font-serif); font-weight: 600; height: 2.4rem; justify-content: center; margin-bottom: 0.7rem; width: 2.4rem; }
.steps li:not(:last-child)::after { border-bottom: 3px solid var(--c-accent); border-right: 3px solid var(--c-accent); content: ""; height: 0.8rem; position: absolute; transform: rotate(45deg); width: 0.8rem; bottom: -1.2rem; left: calc(50% - 0.4rem); }
@media (min-width: 48rem) { .steps li:not(:last-child)::after { bottom: auto; left: auto; right: -1.35rem; top: 2rem; transform: rotate(-45deg); } }
.steps strong { display: block; font-family: var(--font-sans); font-weight: 700; margin-bottom: 0.3rem; }
.steps span { color: var(--c-muted); display: block; font-size: 0.92rem; line-height: 1.8; }

/* 使っているもの（機器の写真） */
.equip { display: grid; gap: 1.2rem; list-style: none; margin: 0 0 1.4rem; padding: 0; }
@media (min-width: 40rem) { .equip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .equip { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.equip li { margin: 0; }
.equip .card__img { aspect-ratio: 4 / 3; background: var(--c-surface); object-fit: contain; padding: 0.4rem; }
.equip h3 { font-size: 1.02rem; }
.equip p { color: var(--c-muted); font-size: 0.9rem; line-height: 1.8; }

/* assurance（安心の約束） */
.assure { display: grid; gap: 1rem; list-style: none; margin: 0; padding: 0; }
@media (min-width: 48rem) { .assure { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.assure li { background: var(--c-surface); border-radius: var(--radius); box-shadow: var(--shadow-sm); margin: 0; padding: 1.1rem 1.3rem 1.1rem 3.2rem; position: relative; }
.assure li::before { background: var(--c-mint); border: 4px solid var(--c-accent); border-radius: 50%; content: ""; height: 1.2rem; left: 1.2rem; position: absolute; top: 1.35rem; width: 1.2rem; }

/* 最後の誘いの帯 */
.cta-band { overflow: hidden; }
.cta-band::before { border: 3px solid rgba(213, 238, 232, 0.35); border-radius: 50%; content: ""; height: 26rem; position: absolute; right: -8rem; top: -10rem; width: 26rem; }
.cta-band__grid { align-items: center; display: grid; gap: 2.4rem; position: relative; }
@media (min-width: 56rem) { .cta-band__grid { gap: 3.4rem; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); } }
.cta-band__media img { aspect-ratio: 4 / 5; border-radius: 999px 999px 28px 28px; box-shadow: var(--shadow); margin-inline: auto; max-width: 28rem; object-fit: cover; object-position: 50% 70%; width: 100%; }
@media (max-width: 55.99rem) { .cta-band__media img { aspect-ratio: 3 / 2; border-radius: 28px; } }
.picks { display: grid; gap: 0.8rem; list-style: none; margin: 1.4rem 0 0; padding: 0; }
@media (min-width: 40rem) { .picks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.picks li { margin: 0; }
.pick { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(213, 238, 232, 0.5); border-radius: var(--radius); color: var(--c-on-accent); display: block; height: 100%; padding: 0.9rem 1.1rem; text-decoration: none; }
.pick span { color: var(--c-mint); display: block; font-size: 0.86rem; line-height: 1.6; }
.pick b { display: block; font-size: 1.04rem; margin-top: 0.15rem; }
.pick:hover { background: rgba(255, 255, 255, 0.2); color: var(--c-on-accent); }

/* 中ほど・最後の誘い（下層ページ） */
.midcta { background: linear-gradient(135deg, var(--c-mint), var(--c-soft)); border-radius: 24px; margin: 2.4rem 0; padding: 1.6rem 1.8rem 1.4rem; }
.midcta p { margin: 0; max-width: var(--measure); }
.midcta .btn-row { margin-top: 1rem; }
.pricehero { background: var(--c-soft); border-radius: var(--radius); margin: 0.6rem 0 1.4rem; padding: 0.8rem 1.4rem 0.2rem; }
.pricehero .price { font-size: 2rem; }
.pricehero .btn-row { margin: 0 0 1rem; }
.card--detail { margin-bottom: 1.6rem; padding: 2rem 2rem 1.6rem; }
@media (max-width: 47.99rem) { .card--detail { padding: 1.4rem 1.2rem 1.2rem; } }

/* tables */
.table-wrap { overflow-x: auto; }
table { background: var(--c-surface); border-collapse: collapse; width: 100%; }
th, td { border: 1px solid var(--c-line); padding: 0.75rem 0.95rem; text-align: left; vertical-align: top; }
th { background: var(--c-soft); font-weight: 600; width: 30%; }
.dl-table th { width: 11rem; }
caption { color: var(--c-muted); font-size: 0.9rem; padding-bottom: 0.4rem; text-align: left; }

/* notes / tags */
.note { background: var(--c-soft); border-left: 4px solid var(--c-accent); border-radius: 0 var(--radius) var(--radius) 0; margin: 0 0 1.4rem; max-width: var(--measure); padding: 0.9rem 1.2rem; }
.note p:last-child { margin-bottom: 0; }
.tag { border: 1px solid var(--c-accent); border-radius: 999px; color: var(--c-accent); display: inline-block; font-size: 0.78rem; line-height: 1.7; margin-right: 0.5rem; padding: 0 0.6rem; }
.law { background: var(--c-sand); border-left: 4px solid var(--c-accent); border-radius: 0 var(--radius) var(--radius) 0; font-family: var(--font-serif); font-size: 1.12rem; margin: 0 0 1.4rem; max-width: var(--measure); padding: 0.9rem 1.2rem; }
.law p { margin: 0; }
details { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius); margin-bottom: 0.8rem; max-width: 46rem; padding: 0.2rem 1.2rem; }
details[open] { border-color: var(--c-accent); box-shadow: var(--shadow-sm); }
summary { cursor: pointer; font-weight: 600; padding: 0.75rem 0; }
details p { margin-bottom: 0.9em; }
figure { margin: 1.4rem 0; }
figcaption { color: var(--c-muted); font-size: 0.92rem; max-width: var(--measure); }
.cycle-svg { display: block; margin-inline: auto; max-width: 22rem; width: 100%; }
.cycle-words { display: grid; gap: 0.8rem; list-style: none; margin-top: 1rem; padding: 0; }
@media (min-width: 40rem) { .cycle-words { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cycle-words li { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius); margin: 0; padding: 0.9rem 1.1rem; }
.cycle-words strong { color: var(--c-accent-dark); display: block; font-family: var(--font-serif); }
.section--surface .cycle-words li { background: var(--c-bg); }
.cycle-words--row { margin-top: 2.2rem; }
@media (min-width: 56rem) { .cycle-words--row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* knowledge */
.chapter-list { display: grid; gap: 1.2rem; list-style: none; padding: 0; }
@media (min-width: 40rem) { .chapter-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .chapter-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.chapter-list li { margin: 0; }
.chapter-list a { color: var(--c-text); display: block; height: 100%; text-decoration: none; }
.chapter-list .card { height: 100%; }
.chapter-list .card:hover, .card--link:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.chapter-list .no { color: var(--c-accent); font-family: var(--font-serif); font-size: 0.9rem; letter-spacing: 0.1em; margin-bottom: 0.2rem; }
.chapter-list h3 { font-size: 1.08rem; }
.chapter-list .card p:last-child { color: var(--c-muted); font-size: 0.93rem; line-height: 1.8; margin-bottom: 0; }
a.card-link { color: var(--c-text); display: block; height: 100%; text-decoration: none; }
a.card-link .card { height: 100%; }
.reading { display: grid; gap: 2.4rem; }
@media (min-width: 64rem) { .reading { grid-template-columns: 15rem minmax(0, 1fr); } .toc { align-self: start; position: sticky; top: 6rem; } }
.toc { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius); font-size: 0.92rem; padding: 1.1rem 1.2rem; }
.toc p { color: var(--c-muted); font-size: 0.82rem; letter-spacing: 0.12em; margin-bottom: 0.5rem; }
.toc ol { list-style: none; margin: 0; padding: 0; }
.toc li { line-height: 1.6; margin: 0; }
.toc a { border-left: 3px solid transparent; color: var(--c-text); display: block; padding: 0.4rem 0 0.4rem 0.7rem; text-decoration: none; }
.toc a:hover { background: var(--c-soft); border-left-color: var(--c-accent); }
.knowledge-body { max-width: var(--measure); }
.knowledge-body h3 { border-top: 1px solid var(--c-line); font-family: var(--font-serif); font-size: 1.3rem; margin-top: 2.8rem; padding-top: 1.8rem; }
.knowledge-body h3:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
.knowledge-body h4 { margin-top: 1.6rem; }
.knowledge-body p, .knowledge-body li { line-height: 2.05; }
.chapter-nav { border-top: 1px solid var(--c-line); display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; margin-top: 3rem; padding-top: 1.5rem; }
.chapter-nav a { max-width: 46%; }

/* news / voice (theme-driven) */
.news-band { background: var(--c-sand); border-bottom: 1px solid var(--c-line); font-size: 0.95rem; }
.news-band .wrap { padding: 0.6rem 0; }
.news-band__label { font-weight: 600; margin-right: 0.8rem; }
.voice-list { display: grid; gap: 1.3rem; list-style: none; padding: 0; }
@media (min-width: 40rem) { .voice-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .voice-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.voice-card { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius); box-shadow: var(--shadow-sm); margin: 0; padding: 1.5rem; position: relative; }
.voice-card::before { color: var(--c-mint); content: "”"; font-family: var(--font-serif); font-size: 4.4rem; line-height: 1; position: absolute; right: 1rem; top: 0.4rem; }
.voice-card__head { align-items: center; display: flex; gap: 0.9rem; margin-bottom: 0.7rem; }
.voice-card__avatar { aspect-ratio: 1 / 1; background: var(--c-soft); border-radius: 50%; flex: none; height: 3.8rem; object-fit: cover; width: 3.8rem; }
.voice-card__attr { color: var(--c-muted); font-size: 0.9rem; }
.voice-card__more { color: var(--c-accent); text-underline-offset: 0.22em; text-decoration: underline; }
.entry { max-width: var(--measure); }
.entry img { border-radius: 12px; }
.pagination { margin: 2rem 0; }
.disclaimer { color: var(--c-muted); font-size: 0.9rem; max-width: var(--measure); }

/* shortcodes */
.sc-box { background: var(--c-soft); border-radius: var(--radius); margin: 0 0 1.2rem; padding: 1rem 1.2rem; }
.sc-chat { display: flex; gap: 0.8rem; margin: 0 0 1.2rem; }
.sc-chat--right { flex-flow: row-reverse nowrap; }
.sc-chat__who { color: var(--c-muted); flex: none; font-size: 0.78rem; text-align: center; width: 4.2rem; }
.sc-chat__icon { border-radius: 50%; display: block; height: 3rem; margin: 0 auto 0.2rem; object-fit: cover; width: 3rem; }
.sc-chat__bubble { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius); flex: 1; padding: 0.8rem 1rem; }
.sc-fusen { background: var(--c-surface); border-left: 6px solid var(--c-accent); margin: 0 0 1.2rem; padding: 0.8rem 1.1rem; }
.sc-fusen__title { font-weight: 600; margin-bottom: 0.3em; }
.sc-topic { background: var(--c-surface); border-top: 3px solid var(--c-accent); margin: 0 0 1.2rem; padding: 0.8rem 1.1rem; }
.sc-topic__title { font-family: var(--font-serif); font-weight: 600; margin-bottom: 0.3em; }
.sc-column { margin: 0 0 1.2rem; }
.sc-kanren { list-style: none; padding: 0; }

/* about */
.about-photo { margin: 0 0 1.4rem; }
.about-photo img { border-radius: 24px; box-shadow: var(--shadow); width: 100%; }
.about-hero-grid { align-items: start; display: grid; gap: 2.4rem; }
@media (min-width: 52rem) { .about-hero-grid { grid-template-columns: 17rem minmax(0, 1fr); } }
.page-about h3 { margin-top: 1.8rem; }

/* 動画（サイト内のファイルだけ。音なし・poster 付き） */
.vid { background: var(--c-mint); border-radius: 36px; }
/* 動画の再生ボタン（nav.js が置く・自動では再生しない hero と紹介動画）。poster の中央に、押せると分かる丸い枠（右下は「無料相談」の札と重なるため中央）。
   再生中は「止める」（二本線）に変わり、指・キーボードが乗ったときだけ見える */
.vid-play { align-items: center; background: rgba(255, 255, 255, 0.94); border: 1px solid rgba(11, 107, 120, 0.45); border-radius: 50%; box-shadow: var(--shadow-sm); cursor: pointer; display: flex; height: 3.6rem; justify-content: center; left: 50%; padding: 0; position: absolute; top: 50%; transform: translate(-50%, -50%); width: 3.6rem; z-index: 2; }
.vid-play::before { border-bottom: 0.6rem solid transparent; border-left: 0.95rem solid var(--c-accent); border-top: 0.6rem solid transparent; content: ""; margin-left: 0.25rem; }
.vid-play:hover { background: var(--c-surface); }
.vid-play.is-playing { opacity: 0; }
.vid-play.is-playing:hover, .vid-play.is-playing:focus-visible { opacity: 1; }
/* タッチ端末はタップ後も :hover が残り、再生中の止めるボタンが結びの QR の真ん中に居座る。紹介動画は video 自身の controls で止められるので、再生中はボタンを出さない（hero は controls が無いので対象外）。 */
@media (hover: none) { .prvideo__frame .vid-play.is-playing, .prvideo__frame .vid-play.is-playing:hover { opacity: 0; pointer-events: none; } }
.vid-play.is-playing::before { border: 0; border-left: 0.3rem solid var(--c-accent); border-right: 0.3rem solid var(--c-accent); content: ""; height: 1.1rem; margin-left: 0; width: 0.95rem; }
/* 紹介動画（再生ボタンで見る・横長は広い画面、縦長は狭い画面）と書き起こし */
.prvideo { margin-inline: auto; max-width: 56rem; }
.prvideo__frame video { border-radius: var(--radius); box-shadow: var(--shadow); display: block; height: auto; margin-inline: auto; width: 100%; }
.prvideo__tall { display: none !important; max-width: 22rem; }
/* 紹介動画の再生ボタンは、見えている方の動画（横長／縦長）にだけ出す */
.prvideo__frame { position: relative; }
.prvideo__tall + .vid-play { display: none; }
@media (max-width: 47.99rem) { .prvideo__wide { display: none !important; } .prvideo__tall { display: block !important; } .prvideo__wide + .vid-play { display: none; } .prvideo__tall + .vid-play { display: flex; } }
.prvideo__note { color: var(--c-muted); font-size: 0.9rem; margin: 0.8rem auto 1rem; text-align: center; }
.transcript { margin-inline: auto; }
.transcript ol { margin: 0.6rem 0 1rem; padding-left: 1.4rem; }
.transcript li { margin-bottom: 0.3rem; }

/* footer */
.site-footer { background: var(--c-deep); border-top: 1px solid rgba(213, 238, 232, 0.25); color: var(--c-on-accent); font-size: 0.95rem; padding: 3rem 0 2.2rem; }
.site-footer a { color: var(--c-on-accent); }
.site-footer a:hover { color: var(--c-mint); }
.site-footer ul { display: flex; flex-wrap: wrap; gap: 0.4rem 1.6rem; list-style: none; margin: 0 0 1.4rem; padding: 0; }
.site-footer li { margin: 0; }
.site-footer .disclaimer { color: var(--c-on-accent); margin-bottom: 1rem; opacity: 0.88; }
.copy { color: var(--c-on-accent); font-size: 0.85rem; margin: 0; opacity: 0.8; }

/* 動き：スクロールで現れる（動きを減らす設定のときは、nav.js が付けないので、常に表示） */
.js-reveal .rv { opacity: 0; transform: translateY(18px); transition: opacity 0.5s ease, transform 0.5s ease; }
.js-reveal .rv.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) { .btn, .float-cta, .card--link, .chapter-list .card, .pick { transition: background-color 0.15s, border-color 0.15s, box-shadow 0.2s, color 0.15s, transform 0.2s; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media print { .site-nav, .nav-toggle, .skip, .btn-row, .float-bar, .site-header { display: none; } body { background: #fff; padding: 0; } }