/* =====================================================================
   写真の嗜み LP ― スタイルの決まりごと
   ---------------------------------------------------------------------
   このページの文字は「4つの大きさ」と「3つの濃さ」しか使わない。
   すべて下の :root の変数で決めていて、各パーツはそれを参照するだけ。
   数値を変えたいときは :root だけ触ればページ全体に反映される。

   ■ 大きさ（役割で決まる）
     --t-title  章の見出し        ：各章の左に置く見出し、BEFORE/AFTERの見出し、CTAの見出し
     --t-lead   強調する一文       ：.lead（言い切りの一文）、.verse（撮る。撮る。の連なり）、AFTER、ヒーローの副題
     --t-body   本文              ：ふつうの段落。基準の大きさ
     --t-label  小さな英字ラベル    ：章番号、英題、キャプション、表の見出し、単位
     （例外は2つだけ：ヒーローの縦書き表題 --t-display と、金額などの数字 --t-num）

   ■ 濃さ（役割で決まる）
     --c-text   白 100%  ：主役。見出し・本文・AFTER・強調
     --c-sub    白 75%   ：脇役。列挙（tags）、補足の説明、リストの中身、「〜でもいい。」の連なり
     --c-muted  白 50%   ：控えめ。英字ラベル、キャプション、BEFORE、引用の台詞、注記
     ※ 色の違いは「重要度」だけを表す。装飾のために色は変えない。

   ■ 背景
     赤 --paper   ：前半（01〜05）講座の考え方
     緑 --green2  ：後半（06〜）講座の中身と申し込み
     黒 --black   ：10章だけ。いちばん言いたいことを置く
   ===================================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}
ol, ul {
    list-style: none
}
img, svg {
    max-width: 100%;
    height: auto;
    display: block
}
h1, h2, h3, h4 {
    font-weight: 300;
    font-size: 100%
}
a:link, a:visited, a:active {
    color: inherit;
    text-decoration: none
}
button {
    font: inherit;
    color: inherit
}
@font-face {
    font-family: 'medio';
    src: url('Medio.otf') format('opentype');
    font-display: swap
}
:root {
  /* 背景 */
  --paper:#6b1b1b;
--green2:#0b3b16;
--ivory:#F2EEE2;
--black:#000;
  /* 文字の濃さ */
  --c-text:#fff;
--c-sub:rgba(255,255,255,.75);
--c-muted:rgba(255,255,255,.5);
  /* 罫線 */
  --line:rgba(255,255,255,.35);
--line-soft:rgba(255,255,255,.15);
  /* 文字の大きさ */
  /* ▼ トップの「写真の嗜み」はここだけ触ればOK ▼ */
  --title-size-pc:clamp(40px, 5.2vw, 76px);    /* PC：文字の大きさ（最小, 画面幅比, 最大） */
--title-size-sp:clamp(28px, 7.6vw, 46px);    /* スマホ：文字の大きさ（縦書き） */
--title-spacing-pc:.18em;                  /* PC：字間（縦書き） */
--title-spacing-sp:.12em;                  /* スマホ：字間（横書き） */
--title-weight:300;                        /* 太さ 300 / 400 / 500 */
--title-height-pc:auto;                    /* PC：縦書きの高さ。auto なら絶対に折り返さない */
  /* ▲ ここまで ▲ */
  --t-display:var(--title-size-pc);
--t-title:clamp(24px, 2.8vw, 34px);
--t-lead:clamp(18px, 2vw, 23px);
--t-body:15px;
--t-label:12px;
--t-num:clamp(34px, 4.6vw, 60px);
  /* 行間 */
  --lh-body:2.05;
--lh-lead:1.8;
--lh-title:1.6;
  /* 字間 */
  --ls-body:.1em;
--ls-label:.22em;
  /* 幅と余白 */
  --measure:36em;
--content:1180px;
--gutter:clamp(40px, 8vw, 160px);
--sec:clamp(104px, 13vw, 190px);
--head-h:78px;
  /* 書体 */
  --jp:'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
--en:medio, 'Times New Roman', serif;
}
html {
    background: var(--paper);
    visibility: hidden;
    overflow-x: hidden
}
html.wf-active, html.loading-delay {
    visibility: visible
}
body {
    background: var(--paper);
    color: var(--c-text);
    font-family: var(--jp);
    font-weight: 300;
    font-size: var(--t-body);
    line-height: var(--lh-body);
    letter-spacing: var(--ls-body);
    font-feature-settings: "palt";
    -webkit-font-smoothing: antialiased;
    opacity: 0;
    animation: fadeIn 1.2s ease .2s 1 forwards;
    overflow-x: hidden;
    position: relative;
    width: 100%;
}
@keyframes fadeIn {
to {
opacity:1
}
}
.en {
    font-family: var(--en);
    letter-spacing: .06em
}
.fadein {
    transform: translateY(12px);
    opacity: 0;
    transition: transform 1.1s ease-out, opacity 1.1s ease-out
}
.load-on .fadein.view {
    transform: none;
    opacity: 1
}

@media (prefers-reduced-motion:reduce) {
.fadein {
    transform: none;
    opacity: 1;
    transition: none
}
body {
    animation: none;
    opacity: 1
}
}
a:focus-visible, button:focus-visible {
outline:1px solid var(--c-text);
outline-offset:6px
}
/* ---------- 共通の部品（この4つが文字の基本） ---------- */
/* 章の見出し */
.t-title {
    font-size: var(--t-title);
    line-height: var(--lh-title);
    letter-spacing: .12em;
    font-weight: 400
}
/* 強調する一文 */
.lead {
    font-size: var(--t-lead);
    line-height: var(--lh-lead);
    letter-spacing: .08em;
    font-weight: 400;
    margin-top: 1.6em;
    margin-bottom: 1.2em
}
.verse {
    font-size: var(--t-lead);
    line-height: 2;
    letter-spacing: .1em;
    font-weight: 400
}
.verse p {
    margin: 0
}
/* 小さな英字ラベル */
.label {
    font-family: var(--en);
    font-size: var(--t-label);
    letter-spacing: var(--ls-label);
    color: var(--c-muted);
    line-height: 1.6
}
/* 濃さ */
.dim {
    color: var(--c-sub)
}
.mute {
    color: var(--c-muted)
}
/* 段落の間隔 */
p + p {
    margin-top: 1.35em
}
.stack p + p {
    margin-top: .05em
}
.gap {
    height: 3.2em
}
.gap-s {
    height: 1.5em
}
/* ---------- 骨格 ---------- */
.wrap {
    padding-left: var(--gutter)!important;
    padding-right: var(--gutter)!important
}
.sec {
    padding-top: var(--sec);
    padding-bottom: var(--sec)
}
.rule {
    border-top: 1px solid var(--line-soft)
}
.bg-g {
    background: var(--green2)
}

/* ---------- 強調：細いアンダーライン（地の文字色で引く） ---------- */
.ul,
.ul-red {
    display: inline;
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-position: 0 calc(100% - .18em);
    background-size: 0 1px;
    transition: background-size 2.2s cubic-bezier(.16, .8, .24, 1) .35s
}
.load-on .fadein.view .ul,
.load-on .fadein.view .ul-red {
    background-size: 100% 1px
}
@media (prefers-reduced-motion:reduce) {
.ul,
.ul-red {
    background-size: 100% 1px;
    transition: none
}
}

/* ---------- オフホワイトの帯（赤と緑のあいだ） ---------- */
.seam {
    height: clamp(520px, 78vh, 980px)
}

.seam-rg {
    background: linear-gradient(180deg,
        #6b1b1b 0%,
        #661d1b 8%,
        #5c221d 16%,
        #4f2920 24%,
        #423022 32%,
        #363623 40%,
        #2b3a22 48%,
        #223d1f 56%,
        #1b3e1c 64%,
        #153d19 72%,
        #103c17 80%,
        #0d3b16 88%,
        #0b3b16 100%)
}
.seam-gi {
    background: linear-gradient(180deg,
        #0b3b16 0%,
        #0e3d1a 6%,
        #164425 12%,
        #234f30 20%,
        #345f41 28%,
        #4a7150 36%,
        #648562 44%,
        #819a77 52%,
        #9ead8e 60%,
        #b9c0a5 68%,
        #d0d2bb 76%,
        #e2e0cd 84%,
        #ede9da 92%,
        #F2EEE2 100%)
}
.seam-ir {
    background: linear-gradient(180deg,
        #F2EEE2 0%,
        #eee0d5 8%,
        #e4cbbb 16%,
        #d6b09c 24%,
        #c4917c 32%,
        #b0735f 40%,
        #9c5a47 48%,
        #8a4535 56%,
        #7c3629 64%,
        #722b20 72%,
        #6d231b 80%,
        #6b1e19 88%,
        #6b1b1b 100%)
}
.seam-ib {
    height: clamp(240px, 36vh, 460px);
    background: linear-gradient(180deg,
        #F2EEE2 0%,
        #d9d4c8 14%,
        #b3ada2 28%,
        #857f76 42%,
        #58534c 56%,
        #322f2b 70%,
        #171614 84%,
        #000 100%)
}
/* ---------- 継ぎ目：赤 → 黒（講師紹介の前） ---------- */
.seam-rk {
    height: clamp(260px, 40vh, 520px);
    background: linear-gradient(180deg,
        #6b1b1b 0%,
        #651d1e 10%,
        #5e2021 20%,
        #552425 30%,
        #4d2728 40%,
        #452a2c 50%,
        #3e2d2f 60%,
        #382f32 70%,
        #333134 80%,
        #303335 90%,
        #2f3336 100%)
}
/* ---------- 継ぎ目：黒 → 赤（講師紹介の後） ---------- */
.seam-kr {
    height: clamp(200px, 30vh, 400px);
    background: linear-gradient(180deg,
        #2f3336 0%,
        #303335 10%,
        #333134 20%,
        #382f32 30%,
        #3e2d2f 40%,
        #452a2c 50%,
        #4d2728 60%,
        #552425 70%,
        #5e2021 80%,
        #651d1e 90%,
        #6b1b1b 100%)
}
/* 講師紹介：黒地では上の罫線を消して、写真の光を少し強める */
#instructor.band-bk {
    border-top: 0;
    background: #2f3336
}
#instructor.band-bk .glow.view {
    filter: drop-shadow(0 0 28px rgba(255, 255, 255, .14))
}
#instructor.band-bk .prof-cred {
    color: var(--c-sub)
}
#instructor.band-bk .prof-links a {
    border-color: var(--line)
}

/* ---------- 黒帯：文字は赤 ---------- */
.band-bk {
    background: #000;
    color: #fff;
    --c-text: #fff;
    --c-sub: rgba(255, 255, 255, .75);
    --c-muted: rgba(255, 255, 255, .5);
    --line: rgba(255, 255, 255, .35);
    --line-soft: rgba(255, 255, 255, .15)
}
.band-bk .label,
.band-bk .en,
.band-bk .en-l {
    color: var(--c-muted)
}
.band-bk .btn {
    border-color: var(--c-text);
    color: var(--c-text)
}
.band-bk .qa .pm::before,
.band-bk .qa .pm::after {
    background: var(--c-text)
}

/* ---------- 受講までの流れ ---------- */
.apply-in {
    max-width: var(--content);
    margin: 0 auto
}
.apply-head {
    max-width: var(--measure);
    margin-bottom: clamp(48px, 6vw, 84px)
}
.apply-head .label {
    display: block;
    margin-bottom: 1.4em
}
.apply-rail {
    position: relative;
    height: 1px;
    background: var(--line-soft)
}
.apply-rail i {
    position: absolute;
    left: 0;
    top: 0;
    height: 1px;
    width: 0;
    background: var(--c-text);
    transition: width 2.6s cubic-bezier(.2, .7, .2, 1)
}
.apply.on .apply-rail i {
    width: 100%
}
.apply-steps {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    list-style: none;
    padding: 0;
    margin: 0
}
.apply-steps li {
    position: relative;
    padding: clamp(28px, 3.4vw, 44px) clamp(10px, 1.6vw, 22px) clamp(28px, 3.4vw, 44px) 0;
    border-right: 1px solid var(--line-soft);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .9s ease, transform .9s ease
}
.apply-steps li:last-child {
    border-right: 0
}
.apply-steps li:not(:first-child) {
    padding-left: clamp(10px, 1.6vw, 22px)
}
.apply-steps li::before {
    content: "";
    position: absolute;
    top: -4px;
    left: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--c-text);
    opacity: 0;
    transform: scale(.4);
    transition: opacity .5s ease, transform .5s cubic-bezier(.2, .7, .2, 1)
}
.apply-steps li:not(:first-child)::before {
    left: -4px
}
.apply.on .apply-steps li {
    opacity: 1;
    transform: none
}
.apply.on .apply-steps li::before {
    opacity: 1;
    transform: none
}
.apply.on .apply-steps li:nth-child(1), .apply.on .apply-steps li:nth-child(1)::before { transition-delay: .3s }
.apply.on .apply-steps li:nth-child(2), .apply.on .apply-steps li:nth-child(2)::before { transition-delay: .72s }
.apply.on .apply-steps li:nth-child(3), .apply.on .apply-steps li:nth-child(3)::before { transition-delay: 1.14s }
.apply.on .apply-steps li:nth-child(4), .apply.on .apply-steps li:nth-child(4)::before { transition-delay: 1.56s }
.apply.on .apply-steps li:nth-child(5), .apply.on .apply-steps li:nth-child(5)::before { transition-delay: 1.98s }
.apply.on .apply-steps li:nth-child(6), .apply.on .apply-steps li:nth-child(6)::before { transition-delay: 2.4s }
.apply-steps .label {
    display: block;
    margin-bottom: .9em
}
.apply-steps .w {
    display: block;
    font-size: var(--t-lead);
    letter-spacing: .12em;
    font-weight: 400;
    line-height: 1.5;
    margin-bottom: .8em
}
.apply-steps p {
    font-size: 13.5px;
    line-height: 1.95;
    letter-spacing: .06em;
    color: var(--c-sub);
    margin: 0
}
.apply-steps .when {
    display: block;
    margin-top: 1em;
    font-family: var(--en);
    font-size: var(--t-label);
    letter-spacing: var(--ls-label);
    color: var(--c-muted)
}
.apply-tail {
    margin-top: clamp(44px, 6vw, 76px);
    max-width: var(--measure)
}
.apply-tail .btn {
    margin-top: 1.8em
}
@media (max-width:820px) {
.apply-rail {
    display: none
}
.apply-steps {
    position: relative;
    grid-template-columns: 1fr;
    padding-left: 28px
}
.apply-steps::after {
    content: "";
    position: absolute;
    left: 3px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--line-soft)
}
.apply-steps::before {
    content: "";
    position: absolute;
    left: 3px;
    top: 0;
    width: 1px;
    height: 0;
    background: var(--c-text);
    transition: height 2.8s cubic-bezier(.2, .7, .2, 1);
    z-index: 1
}
.apply.on .apply-steps::before {
    height: 100%
}
.apply-steps li,
.apply-steps li:not(:first-child) {
    padding: 0 0 clamp(32px, 6vw, 44px);
    border-right: 0
}
.apply-steps li:last-child {
    padding-bottom: 0
}
.apply-steps li::before,
.apply-steps li:not(:first-child)::before {
    left: -28px;
    top: .35em;
    z-index: 2
}
.apply-steps .w {
    font-size: clamp(20px, 5.4vw, 26px)
}
}
@media (prefers-reduced-motion:reduce) {
.apply-rail i { width: 100%; transition: none }
.apply-steps::before { height: 100%; transition: none }
.apply-steps li, .apply-steps li::before { opacity: 1; transform: none; transition: none }
}

/* 色の帯は必ず横幅いっぱいに敷く（念押し） */
.seam,
.band-iv,
.band-bk,
.bg-g,
.green {
    box-sizing: border-box;
    width: 100%;
    margin-left: 0;
    margin-right: 0
}
.emp.band-iv {
    background: var(--ivory)
}
.band-iv {
    background: var(--ivory);
    color: var(--paper);
    --c-text: var(--paper);
    --c-sub: rgba(107, 27, 27, .82);
    --c-muted: rgba(107, 27, 27, .52);
    --line: rgba(107, 27, 27, .26);
    --line-soft: rgba(107, 27, 27, .13)
}
.band-iv .label,
.band-iv .en {
    color: var(--c-muted)
}
/* 大きな英字と数字は主役。濃い赤で出す */
.band-iv .emp-big .en,
.band-iv .sixty-num .en,
.band-iv .en-t,
.band-iv .t-title .en {
    color: var(--c-text)
}
.band-iv .dim {
    color: var(--c-sub)
}
.iv-head .label {
    display: block;
    margin-bottom: 1.4em
}
.iv-two .k {
    display: block;
    font-size: var(--t-lead);
    letter-spacing: .14em;
    font-weight: 400;
    margin-bottom: .9em
}
.iv-two .num {
    display: block;
    font-family: var(--en);
    font-size: clamp(30px, 4.2vw, 52px);
    line-height: 1;
    letter-spacing: .02em;
    margin-bottom: .5em;
    color: var(--c-muted)
}
.iv-proof .w {
    display: block;
    font-size: var(--t-body);
    letter-spacing: .14em;
    font-weight: 400;
    margin-bottom: .7em
}

.green {
    background: var(--black);
padding-top:calc(var(--sec) * 1.2);
padding-bottom:calc(var(--sec) * 1.2)
}
.ed {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: clamp(40px, 8vw, 140px);
    align-items: start;
    max-width: var(--content);
    margin: 0 auto
}
.ed .side {
    position: sticky;
    top: calc(var(--head-h) + 40px);
    padding-right: 1em
}
.ed .side .idx {
    font-family: var(--en);
    font-size: var(--t-label);
    letter-spacing: var(--ls-label);
    color: var(--c-muted);
    line-height: 1
}
.ed .side h2 {
    font-size: var(--t-title);
    line-height: var(--lh-title);
    letter-spacing: .12em;
    font-weight: 400;
    margin-top: 1.4em
}
.ed .side .en-t {
    display: block;
    font-family: var(--en);
    font-size: var(--t-label);
    letter-spacing: .1em;
    color: var(--c-muted);
    margin-top: 1.2em;
    line-height: 1.7
}
.ed .body {
    max-width: var(--measure);
    padding-top: .4em
}

@media (max-width:820px) {
.ed {
    grid-template-columns: 1fr;
    gap: 44px
}
.ed .side {
    position: static;
    padding-right: 0
}
}
/* 本文中の小見出し（本文と同じ大きさ、太さだけ上げる） */
h3.sub {
    font-size: var(--t-body);
    letter-spacing: .14em;
    font-weight: 500;
    margin: 3.4em 0 1.2em;
    padding-bottom: .6em;
    border-bottom: 1px solid var(--line)
}
.body h3.sub:first-child {
    margin-top: 0
}
/* ---------- ヘッダー ---------- */
.site-head {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 120;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0 0 var(--gutter);
    height: var(--head-h);
    border-bottom: 1px solid var(--line);
    transition: background .5s
}
.site-head.solid {
    background: rgba(0,0,0,.18);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px)
}
.site-head .logo svg, .site-head .logo .logo-img {
    width: 220px;
    height: auto;
    display: block
}
.site-head nav ul {
    display: flex;
    align-items: center;
    height: var(--head-h)
}
.site-head nav li {
    font-family: var(--en);
    font-size: 14px;
    letter-spacing: .12em;
    line-height: 1;
    padding: 0 2.2em
}
.site-head nav li:last-child {
    border-left: 1px solid var(--line);
    height: var(--head-h);
    display: flex;
    align-items: center;
    padding: 0 3.4em
}
.site-head nav a {
    opacity: .85;
    transition: opacity .3s
}
.site-head nav a:hover {
    opacity: 1
}

@media (max-width:820px) {
.site-head nav {
    display: none
}
.site-head .logo svg, .site-head .logo .logo-img {
    width: 170px
}
.site-head, .site-head.solid {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none
}
.site-head.solid {
    background: rgba(0,0,0,.18);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px)
}
}
/* ---------- ハンバーガー（スマホ） ---------- */
/* ヘッダー(z:120) をメニュー(z:110) より上に置くことで、開いている間もボタンが押せる */
.menu-btn {
    display: none;
    position: relative;
    width: var(--head-h);
    height: var(--head-h);
    background: none;
    border: 0;
    border-left: 1px solid var(--line);
    cursor: pointer;
    flex: none
}
.menu-btn span {
    position: absolute;
    left: 50%;
    width: 26px;
    height: 1px;
    background: var(--c-text);
    transform: translateX(-50%);
    transition: transform .4s cubic-bezier(.455, .03, .515, .955), top .4s
}
.menu-btn span:first-child {
    top: 33px
}
.menu-btn span:last-child {
    top: 44px
}
.menu-btn.open span:first-child {
    top: 38px;
    transform: translateX(-50%) rotate(45deg)
}
.menu-btn.open span:last-child {
    top: 38px;
    transform: translateX(-50%) rotate(-45deg)
}
.menu {
    position: fixed;
    inset: 0;
    z-index: 110;
    background: var(--green2);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--head-h) var(--gutter) 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease, visibility 0s .5s
}
.menu.open {
    opacity: 1;
    visibility: visible;
    transition: opacity .5s ease
}
.menu ul {
    width: 100%
}
.menu li {
    font-family: var(--en);
    font-size: clamp(26px, 7vw, 34px);
    letter-spacing: .1em;
    line-height: 1;
    padding: .55em 0;
    border-bottom: 1px solid var(--line-soft);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .6s ease, transform .6s ease
}
.menu li:last-child {
    border-bottom: 0
}
.menu.open li {
    opacity: 1;
    transform: none
}
.menu.open li:nth-child(1) {
    transition-delay: .15s
}
.menu.open li:nth-child(2) {
    transition-delay: .22s
}
.menu.open li:nth-child(3) {
    transition-delay: .29s
}
.menu.open li:nth-child(4) {
    transition-delay: .36s
}
.menu.open li:nth-child(5) {
    transition-delay: .43s
}
.menu.open li:nth-child(6) {
    transition-delay: .5s
}
.menu .close {
    margin-top: 3em;
    align-self: flex-start;
    font-family: var(--en);
    font-size: var(--t-label);
    letter-spacing: var(--ls-label);
    color: var(--c-muted);
    background: none;
    border: 0;
    border-bottom: 1px solid var(--line);
    padding: 0 0 .5em;
    cursor: pointer
}
body.menu-open {
    overflow: hidden
}

@media (max-width:820px) {
.menu-btn {
    display: block
}
.site-head {
    padding-right: 0!important
}
}
/* ---------- ヒーロー ---------- */
.hero {
    position: relative;
    isolation: isolate;
    min-height: 100svh;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    padding: 150px var(--gutter) clamp(72px, 9vw, 128px);
    gap: 48px
}
.hero {
    overflow: hidden
}
.hero .bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden
}
.hero .bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .55;
    filter: grayscale(.3) contrast(1.05)
}
.hero .bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(107,27,27,.45) 0%, rgba(107,27,27,.15) 40%, rgba(107,27,27,.92) 100%)
}
.hero .title {
    writing-mode: vertical-rl;
    font-size: var(--title-size-pc);
    line-height: 1;
    letter-spacing: var(--title-spacing-pc);
    font-weight: var(--title-weight);
    height: var(--title-height-pc);
    justify-self: end
}
.hero .title-wrap {
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    gap: clamp(14px, 1.6vw, 24px);
    justify-self: end
}
.hero .title-sub {
    writing-mode: vertical-rl;
    font-size: var(--t-body);
    letter-spacing: .3em;
    line-height: 1;
    color: #fff;
    padding: 1.4em .6em;
    align-self: flex-start;
    background-image: linear-gradient(var(--paper), var(--paper));
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 100% 0;
    transition: background-size .9s cubic-bezier(.455, .03, .515, .955) .9s
}
.load-on .title-wrap.view .title-sub {
    background-size: 100% 100%
}
/* 副題「個人稽古編」は一回り小さく */
.hero .title .title-s {
    font-size: .72em;
    letter-spacing: .16em
}

@media (max-width:820px) {
/* スマホでも縦書きのまま、コピーの上に立てる */
.hero .title-wrap {
    flex-direction: row-reverse;
    align-items: flex-start;
    gap: clamp(10px, 3vw, 16px);
    justify-self: start;
    order: -1;
    margin-bottom: clamp(32px, 7vw, 56px)
}
.hero .title-sub {
    writing-mode: vertical-rl;
    padding: 1.4em .58em;
    letter-spacing: .28em;
    font-size: 12px
}
}
.hero .copy {
    max-width: var(--measure)
}
.hero .copy .en {
    display: block;
    font-size: var(--t-label);
    letter-spacing: var(--ls-label);
    color: var(--c-muted);
    margin-bottom: 2.4em
}
.hero .copy .sub {
    font-size: var(--t-lead);
    line-height: var(--lh-lead);
    letter-spacing: .1em;
    font-weight: 400;
    margin-bottom: 1.4em
}
.hero .copy .aim {
    color: var(--c-sub)
}
.hero .copy .not {
    margin-top: 2.6em;
    color: var(--c-muted)
}

@media (max-width:820px) {
/* 写真は 2:3 のまま、上端から原寸比で置く（横を切り落とさない） */
.hero .bg {
    inset: 0 0 auto 0;
    height: auto;
    aspect-ratio: 2 / 3
}
.hero .slides picture img {
    object-fit: cover;
    object-position: center top
}
.hero .bg::after {
    background: linear-gradient(180deg, rgba(107,27,27,.42) 0%, rgba(107,27,27,.08) 34%, rgba(107,27,27,.55) 78%, #6b1b1b 100%)
}
.hero {
    grid-template-columns: 1fr;
    padding-top: 104px
}
.hero .title {
    height: auto;
    writing-mode: vertical-rl;
    font-size: var(--title-size-sp);
    letter-spacing: var(--title-spacing-sp);
    white-space: nowrap
}
.hero .copy {
    max-width: none
}
/* 札も縦書きにして表題の左へ */
.hero .title-col {
    flex-direction: row-reverse;
    align-items: flex-start;
    gap: clamp(10px, 3vw, 16px)
}
.hero .title-tag {
    writing-mode: vertical-rl;
    padding: 1.3em .6em;
    font-size: 12px;
    letter-spacing: .24em
}
.hero .title-tag i {
    clip-path: inset(0 0 100% 0)
}
.load-on .title-wrap.view .title-tag i {
    clip-path: inset(0 0 0 0)
}
.hero .title-tag b {
    transform: translateY(-6px)
}
.load-on .title-wrap.view .title-tag b {
    transform: none
}
}
/* ---------- 写真 ---------- */
.ph {
    margin: 0
}
.ph img {
    width: 100%;
    height: 100%;
    object-fit: cover
}
.ph figcaption {
    font-family: var(--en);
    font-size: var(--t-label);
    letter-spacing: .14em;
    color: var(--c-muted);
    margin-top: .9em;
    line-height: 1.6
}
.ph-full img {
    aspect-ratio: 21/9
}
.ph-sec {
padding-top:calc(var(--sec) * .6);
padding-bottom:calc(var(--sec) * .6)
}
.ph-sec .mag, .ph-sec .mag-2 {
    max-width: var(--content);
    margin: 0 auto
}
.mag .a {
    grid-column: 1/8
}
.mag .a img {
    aspect-ratio: 3/2
}
.mag .b {
    grid-column: 9/13;
    margin-top: clamp(40px, 8vw, 120px)
}
.mag .b img {
    aspect-ratio: 4/5
}
.mag-2 {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: clamp(12px, 1.6vw, 24px);
    align-items: end
}
.mag-2 .a {
    grid-column: 1/6
}
.mag-2 .a img {
    aspect-ratio: 4/5
}
.mag-2 .b {
    grid-column: 6/13
}
.mag-2 .b img {
    aspect-ratio: 3/2
}
.strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(12px, 1.6vw, 24px)
}
.strip img {
    aspect-ratio: 4/5
}
.inset {
    margin: 4.5em 0
}
.inset img {
    aspect-ratio: 4/3
}

@media (max-width:640px) {
.mag .a {
    grid-column: 1/13
}
.mag .b {
    grid-column: 5/13;
    margin-top: 0
}
.mag-2 .a {
    grid-column: 1/7
}
.mag-2 .b {
    grid-column: 1/13
}
.strip {
    grid-template-columns: 1fr 1fr
}
.strip .ph:nth-child(3) {
    display: none
}
}
/* ---------- 数字（金額・回数） ---------- */
/* ---------- 予算の分け方：帯で見せる ---------- */
.budget {
    margin: 2.4em 0 2.8em
}
.bd-row {
    display: grid;
    grid-template-columns: 6.5em 1fr;
    align-items: center;
    gap: 1em
}
.bd-cap {
    font-size: var(--t-label);
    letter-spacing: .16em;
    color: var(--c-muted)
}
.bd-bar {
    display: flex;
    width: 100%
}
.bd-bar i {
    position: relative;
    display: block;
    width: var(--w);
    box-sizing: border-box;
    padding: 1.1em 1em 1.2em;
    font-style: normal;
    border: 1px solid var(--line);
    transform-origin: left center;
    transform: scaleX(0);
    transition: transform 1.1s cubic-bezier(.2, .7, .2, 1)
}
.load-on .budget.view .bd-bar i {
    transform: none
}
.load-on .budget.view .bd-split .bd-a {
    transition-delay: .75s
}
.load-on .budget.view .bd-split .bd-b {
    transition-delay: 1.15s
}
.bd-bar i > * {
    display: block;
    opacity: 0;
    transition: opacity .7s ease
}
.load-on .budget.view .bd-bar i > * {
    opacity: 1;
    transition-delay: 1.1s
}
.load-on .budget.view .bd-split .bd-a > * {
    transition-delay: 1.5s
}
.load-on .budget.view .bd-split .bd-b > * {
    transition-delay: 1.85s
}
.bd-bar b {
    font-family: var(--en);
    font-size: clamp(26px, 4vw, 42px);
    font-weight: 300;
    line-height: 1;
    letter-spacing: .01em
}
.bd-bar b small {
    font-family: var(--jp);
    font-size: var(--t-label);
    letter-spacing: .1em;
    margin-left: .3em
}
.bd-bar em {
    margin-top: .7em;
    font-size: 12.5px;
    line-height: 1.7;
    letter-spacing: .06em;
    color: var(--c-sub)
}
/* 上段は塗り、下段の左（講座）を強調 */
.bd-total .bd-bar i {
    background: transparent
}
.bd-split .bd-a {
    background: currentColor;
    color: var(--c-text)
}
.bd-split .bd-a b,
.bd-split .bd-a em {
    color: var(--ivory);
    position: relative
}
.bd-split .bd-b {
    border-left: 0
}
/* 分岐の矢印 */
.bd-arrow {
    display: grid;
    grid-template-columns: 6.5em 1fr;
    gap: 1em
}
.bd-arrow span:last-child {
    display: block;
    height: 26px;
    border-left: 1px solid var(--line);
    margin-left: 60%;
    opacity: 0;
    transition: opacity .6s ease .5s
}
.load-on .budget.view .bd-arrow span:last-child {
    opacity: 1
}
@media (max-width:640px) {
.bd-row, .bd-arrow {
    grid-template-columns: 1fr;
    gap: .5em
}
.bd-arrow span:last-child {
    height: 20px
}
.bd-bar i {
    padding: .9em .8em 1em
}
.bd-bar em {
    font-size: 11.5px
}
}
@media (prefers-reduced-motion:reduce) {
.bd-bar i, .bd-bar i > *, .bd-arrow span:last-child {
    transform: none;
    opacity: 1;
    transition: none
}
}
.facts .k {
    font-family: var(--en);
    font-size: var(--t-label);
    color: var(--c-muted);
    letter-spacing: var(--ls-label);
    line-height: 1.6
}
.facts .v {
    font-size: var(--t-lead);
    line-height: 1.5;
    margin-top: .35em;
    font-weight: 400
}

/* ---------- BEFORE / AFTER ---------- */
.ba-wrap {
    max-width: var(--content);
    margin: 0 auto
}
.ba-title {
    margin-bottom: clamp(48px, 6vw, 80px)
}
.ba-title .idx {
    font-family: var(--en);
    font-size: var(--t-label);
    letter-spacing: var(--ls-label);
    color: var(--c-muted);
    line-height: 1
}
.ba-title h2 {
    font-size: var(--t-title);
    line-height: var(--lh-title);
    letter-spacing: .12em;
    margin-top: 1.2em;
    font-weight: 400
}
.ba-title .en-t {
    display: block;
    font-family: var(--en);
    font-size: var(--t-label);
    letter-spacing: .1em;
    color: var(--c-muted);
    margin-top: 1em
}
.ba {
    border-top: 1px solid var(--line)
}
.ba-head {
    display: grid;
    grid-template-columns: 1fr clamp(56px, 8vw, 120px) 1fr;
    gap: 0 2em;
    padding: 1em 0;
    font-family: var(--en);
    font-size: var(--t-label);
    letter-spacing: var(--ls-label);
    color: var(--c-muted);
    border-bottom: 1px solid var(--line-soft)
}
.ba-row {
    display: grid;
    grid-template-columns: 1fr clamp(56px, 8vw, 120px) 1fr;
    gap: 0 2em;
    align-items: center;
    padding: clamp(1.6em, 3vw, 2.4em) 0;
    border-bottom: 1px solid var(--line-soft)
}
.ba-row .b {
    color: var(--c-muted);
    line-height: 1.8
}
.ba-row .b span {
    text-decoration: line-through;
    text-decoration-thickness: 1px;
    text-decoration-color: transparent;
    transition: text-decoration-color .6s ease 1.15s
}
.ba-row .a {
    font-size: var(--t-lead);
    line-height: 1.7;
    letter-spacing: .1em;
    font-weight: 400
}
.ba-row .ar {
    position: relative;
    height: 1px
}
.ba-row .ar i {
    position: absolute;
    left: 0;
    top: 0;
    height: 1px;
    width: 100%;
    background: var(--c-text);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .8s cubic-bezier(.455, .03, .515, .955) .45s
}
.ba-row .ar i::after {
    content: "";
    position: absolute;
    right: -1px;
    top: -4px;
    width: 8px;
    height: 8px;
    border-top: 1px solid var(--c-text);
    border-right: 1px solid var(--c-text);
    transform: rotate(45deg)
}
.ba-row .b {
    opacity: 0;
    transform: translateX(-10px);
    transition: opacity .8s ease-out, transform .8s ease-out
}
.ba-row .a {
    opacity: 0;
    transform: translateX(14px);
    transition: opacity .9s ease-out .95s, transform .9s ease-out .95s
}
.ba-row.on .b, .ba-row.on .a {
    opacity: 1;
    transform: none
}
.ba-row.on .ar i {
    transform: scaleX(1)
}
.ba-row.on .b span {
    text-decoration-color: var(--c-muted)
}
.ba-row.final {
    padding: clamp(2.4em, 5vw, 4em) 0;
    border-bottom: 1px solid var(--line)
}
.ba-row.final .b {
    font-size: var(--t-lead)
}
.ba-row.final .a {
    font-size: var(--t-title);
    line-height: 1.5;
    letter-spacing: .12em
}

@media (max-width:640px) {
.ba-head {
    display: none
}
.ba-row {
    grid-template-columns: 1fr;
    gap: .9em 0;
    align-items: start
}
.ba-row .ar {
    width: clamp(40px, 12vw, 64px)
}
.ba-row .b, .ba-row .a {
    transform: translateY(8px)
}
.ba-row .b::before {
    content: "BEFORE";
    display: block;
    font-family: var(--en);
    font-size: var(--t-label);
    letter-spacing: var(--ls-label);
    color: var(--c-muted);
    line-height: 1;
    margin-bottom: .6em
}
}

@media (prefers-reduced-motion:reduce) {
.ba-row .b, .ba-row .a, .ba-row .ar i, .ba-row .b span {
    transition: none;
    opacity: 1;
    transform: none
}
}
@keyframes tick {
to {
transform:translateX(-33.3333%)
}
}

.day .body .intro {
    color: var(--c-sub);
    margin-bottom: 2.6em
}
/* ---------- 二欄リスト ---------- */
.two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.6em
}
.two h3 {
    font-size: var(--t-body);
    letter-spacing: .14em;
    font-weight: 500;
    margin-bottom: .8em
}
.two li {
    padding: .45em 0;
    border-bottom: 1px solid var(--line-soft);
    color: var(--c-sub)
}

@media (max-width:640px) {
.two {
    grid-template-columns: 1fr
}
}
/* ---------- 詳細・受講料 ---------- */
.spec dl {
    display: grid;
    grid-template-columns: 7.5em 1fr;
    border-top: 1px solid var(--line)
}
.spec dt, .spec dd {
    padding: 1.2em 0;
    border-bottom: 1px solid var(--line-soft)
}
.spec dt {
    font-family: var(--en);
    color: var(--c-muted);
    font-size: var(--t-label);
    letter-spacing: var(--ls-label);
    font-family: var(--jp)
}
.spec dd {
    line-height: 1.9
}
.price {
    margin-top: 3.4em
}
.price .big {
    font-family: var(--en);
    font-size: var(--t-num);
    line-height: 1;
    letter-spacing: .01em
}
.price .big small {
    font-family: var(--jp);
    font-size: var(--t-label);
    margin-left: .35em;
    letter-spacing: .1em
}
.price .breakdown {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.4em;
    margin-top: 2em
}
.price .breakdown div {
    border-top: 1px solid var(--line);
    padding-top: .8em
}
.price .breakdown .k {
    font-size: var(--t-label);
    color: var(--c-muted);
    letter-spacing: var(--ls-label);
    line-height: 1.6
}
.price .breakdown .v {
    font-family: var(--en);
    font-size: var(--t-lead);
    line-height: 1.4;
    margin-top: .25em
}
.price .breakdown .v small {
    font-family: var(--jp);
    font-size: var(--t-label);
    margin-left: .15em
}
/* ---------- 黒の章（10） ---------- */
.green .side .idx, .green .side .en-t {
    color: var(--c-muted)
}
/* ---------- CTA ---------- */
.cta {
    padding-top: var(--sec);
    padding-bottom: var(--sec);
    text-align: center
}
.cta .en-l {
    display: block;
    font-family: var(--en);
    font-size: var(--t-label);
    letter-spacing: var(--ls-label);
    color: var(--c-muted);
    margin-bottom: 1.8em
}
.cta h2 {
    font-size: var(--t-title);
    line-height: var(--lh-title);
    letter-spacing: .12em;
    font-weight: 400;
    margin-bottom: 1.2em
}
.cta p {
    color: var(--c-sub);
    max-width: var(--measure);
    margin: 0 auto 2.8em
}
.btn {
    display: block;
    width: 100%;
    max-width: 420px;
    box-sizing: border-box;
    padding: 1.35em 2em;
    border: 1px solid var(--line);
    font-size: var(--t-body);
    letter-spacing: .22em;
    line-height: 1;
    text-align: center;
    transition: background .4s, color .4s, border-color .4s
}
/* 中央寄せの場所では左右中央に */
.cta .btn {
    margin-left: auto;
    margin-right: auto
}
.btn .en {
    display: block;
    font-size: var(--t-label);
    letter-spacing: var(--ls-label);
    opacity: .55;
    margin-top: .9em
}
.btn:hover {
    background: var(--c-text);
    border-color: var(--c-text);
    color: var(--green2)
}
/* ---------- フッター ---------- */
.site-foot {
    padding: 64px var(--gutter);
    border-top: 1px solid var(--line-soft);
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 2em
}
.site-foot .logo svg, .site-foot .logo .logo-img {
    width: 180px;
    height: auto;
    display: block;
    margin-bottom: 1.3em
}
.site-foot .addr {
    font-size: var(--t-label);
    line-height: 2;
    color: var(--c-muted);
    letter-spacing: .08em
}
.site-foot .copy {
    font-family: var(--en);
    font-size: var(--t-label);
    letter-spacing: .14em;
    color: var(--c-muted)
}
/* ---------- 講座の全体像（上部） ---------- */
.glance-in {
    max-width: var(--content);
    margin: 0 auto
}
.glance-head .label {
    display: block;
    margin-bottom: 1.4em
}
.feat {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.6em;
    margin: 3.2em 0 4.4em;
    border-top: 1px solid var(--line)
}
.feat li {
    padding-top: 1.4em;
    border-top: 1px solid transparent
}
.fv {
    font-family: var(--en);
    font-size: var(--t-num);
    line-height: 1;
    letter-spacing: .01em
}
.fv small {
    font-family: var(--jp);
    font-size: var(--t-label);
    letter-spacing: .1em;
    margin-left: .25em
}
.fk {
    color: var(--c-sub);
    margin-top: .9em;
    line-height: 1.8
}
.days {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, auto);
    gap: 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line)
}
.days li+li {
    border-left: 1px solid var(--line-soft)
}
.days a {
    display: block;
    position: relative;
    overflow: hidden;
    padding: 2em clamp(1.2em, 2.4vw, 2.4em);
    height: 100%;
    transition: background .4s
}
@supports (grid-template-rows: subgrid) {
.days li {
    padding: 2em clamp(1.2em, 2.4vw, 2.4em)
}
.days a {
    padding: 0;
    overflow: visible
}
}
.days a:hover {
    background: rgba(255,255,255,.05)
}
/* 大きな番号 */
.days .dbig {
    display: block;
    overflow: hidden;
    line-height: .78;
    margin-bottom: .18em
}
.days .dbig i {
    display: block;
    font-family: var(--en);
    font-style: normal;
    font-size: clamp(56px, 6.4vw, 92px);
    line-height: .8;
    letter-spacing: -.02em;
    font-weight: 300;
    color: var(--c-text);
    transform: translateY(105%);
    transition: transform 1.15s cubic-bezier(.16, .84, .26, 1)
}
.load-on .days.view .dbig i {
    transform: none
}
.days li:nth-child(2) .dbig i { transition-delay: 1.5s }
.days li:nth-child(3) .dbig i { transition-delay: 3s }
/* 番号の下の細い線が横に伸びる */
.days .dbig::after {
    content: "";
    display: block;
    height: 1px;
    width: 0;
    background: var(--c-text);
    margin-top: .26em;
    transition: width 1.5s linear .5s
}
.load-on .days.view .dbig::after { width: 100% }
.days li:nth-child(2) .dbig::after { transition-delay: 2s }
.days li:nth-child(3) .dbig::after { transition-delay: 3.5s }
/* 本文は線が渡りきってから、ゆっくり現れる */
.days .label,
.days strong,
.days .ds {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 1.1s ease, transform 1.1s cubic-bezier(.2, .7, .2, 1)
}
.load-on .days.view .label,
.load-on .days.view strong,
.load-on .days.view .ds {
    opacity: 1;
    transform: none
}
.days li:nth-child(1) .label { transition-delay: 1.1s }
.days li:nth-child(1) strong { transition-delay: 1.25s }
.days li:nth-child(1) .ds { transition-delay: 1.4s }
.days li:nth-child(2) .label { transition-delay: 2.6s }
.days li:nth-child(2) strong { transition-delay: 2.75s }
.days li:nth-child(2) .ds { transition-delay: 2.9s }
.days li:nth-child(3) .label { transition-delay: 4.1s }
.days li:nth-child(3) strong { transition-delay: 4.25s }
.days li:nth-child(3) .ds { transition-delay: 4.4s }
/* まだ来ていない日は、うっすら沈んでいる */
.days li {
    opacity: .32;
    transition: opacity 1.4s ease
}
.load-on .days.view li { opacity: 1 }
.days li:nth-child(2) { transition-delay: 1.5s }
.days li:nth-child(3) { transition-delay: 3s }
.days a:hover .dbig i {
    transform: translateY(-4px);
    transition: transform .5s cubic-bezier(.2, .7, .2, 1)
}
.days .label {
    display: block;
    margin-bottom: 1.2em
}
.days strong {
    display: block;
    font-size: var(--t-lead);
    line-height: 1.6;
    letter-spacing: .08em;
    font-weight: 400;
    margin-bottom: .9em
}
.days .ds {
    display: block;
    color: var(--c-sub);
    line-height: 1.9
}
/* 3枚を同じ組みに揃える（02のレイアウトに統一）
   ─ 行の高さを3枚で共有するので、文字数が違っても位置が一致する ─ */
.days {
    grid-template-rows: auto
}
.days li {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 4
}
.days a {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 4;
    width: 100%
}
.days .dbig,
.days .label,
.days strong,
.days .ds {
    min-height: 0;
    margin-bottom: 0;
    align-self: start
}
.days .label {
    padding-bottom: 1.2em
}
.days strong {
    padding-bottom: .9em
}
/* subgrid に対応しない環境向けの保険 */
@supports not (grid-template-rows: subgrid) {
.days li { display: flex }
.days a { display: flex; flex-direction: column }
.days strong { min-height: calc(1.6em * 2) }
.days .ds { min-height: calc(1.9em * 2); margin-top: auto }
}

@media (max-width:820px) {
.feat {
    grid-template-columns: 1fr 1fr
}
.days {
    grid-template-columns: 1fr
}
.days li+li {
    border-left: 0;
    border-top: 1px solid var(--line-soft)
}
.days .dbig i {
    font-size: clamp(52px, 17vw, 84px)
}
.days {
    grid-template-rows: auto
}
.days li,
.days a {
    display: block;
    grid-row: auto
}
.days li {
    padding: 0
}
.days a {
    padding: 2em clamp(1.2em, 2.4vw, 2.4em)
}
.days strong,
.days .ds {
    min-height: 0
}
}
@media (prefers-reduced-motion:reduce) {
.days .dbig i { transform: none; transition: none }
.days .dbig::after { width: 100%; transition: none }
.days li, .days .label, .days strong, .days .ds { opacity: 1; transform: none; transition: none }
}
.can-head .label {
    display: block;
    margin-bottom: 1.4em
}
.can-list li .label {
    padding-top: .55em
}

.flow-head .label{display:block;margin-bottom:1.4em}
.flow-head .dim{margin-top:1.4em}
.flow.on .flow-rail i{width:100%}
.flow.on .flow-steps li{opacity:1;transform:none}
.flow.on .flow-steps li::before{opacity:1}
.flow.on .flow-steps li:nth-child(1){transition-delay:.25s}.flow.on .flow-steps li:nth-child(1)::before{transition-delay:.25s}
.flow.on .flow-steps li:nth-child(2){transition-delay:.6s}.flow.on .flow-steps li:nth-child(2)::before{transition-delay:.6s}
.flow.on .flow-steps li:nth-child(3){transition-delay:.95s}.flow.on .flow-steps li:nth-child(3)::before{transition-delay:.95s}
.flow.on .flow-steps li:nth-child(4){transition-delay:1.3s}.flow.on .flow-steps li:nth-child(4)::before{transition-delay:1.3s}
.flow.on .flow-steps li:nth-child(5){transition-delay:1.65s}.flow.on .flow-steps li:nth-child(5)::before{transition-delay:1.65s}
.flow.on .flow-steps li:nth-child(6){transition-delay:2s}.flow.on .flow-steps li:nth-child(6)::before{transition-delay:2s}
.flow-steps .label{display:block;margin-bottom:.9em}
.flow-steps .w{display:block;font-size:var(--t-lead);letter-spacing:.14em;font-weight:400;line-height:1.5;margin-bottom:.8em}
.flow-steps li:nth-child(6) .w{color:var(--c-text)}
.flow-tail .lead{margin-top:0}
.flow-shoot li .w{font-size:var(--t-body);letter-spacing:.14em;font-weight:400;padding-top:.15em}
@media (max-width:820px){
  .flow.on .flow-steps::before{height:100%}
  .flow-steps .label{margin-bottom:.5em}
  .flow-steps .w{font-size:clamp(22px,6vw,28px);margin-bottom:.5em}
}

/* ---------- Why3：なぜ三回か（Scene の直前） ---------- */
.why3-in{max-width:var(--content);margin:0 auto}
.why3-head{max-width:var(--measure);margin-bottom:clamp(40px,5vw,64px)}
.why3-head .label{display:block;margin-bottom:1.4em}
.why3-head .dim{margin-top:1.4em}
.why3-chart{max-width:960px}
.why3-chart svg{width:100%;height:auto;display:block;overflow:visible}
.w3-grid{stroke:var(--line-soft);stroke-width:1}
.w3-axis{stroke:var(--line);stroke-width:1}
.w3-lab{fill:var(--c-muted);font-family:var(--en);font-size:11px;letter-spacing:.22em}
.w3-jlab{fill:var(--c-muted);font-size:11px;letter-spacing:.12em}
.w3-curve{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
.w3-once{stroke:var(--c-muted);stroke-width:1.4}
.w3-three{stroke:var(--c-text);stroke-width:2}
.why3.on .w3-curve{transition:stroke-dashoffset 2.4s cubic-bezier(.35,.6,.25,1);stroke-dashoffset:0}
.why3.on .w3-three{transition-delay:.5s}
.w3-marks{opacity:0;transition:opacity .9s ease}
.why3.on .w3-marks{opacity:1;transition-delay:2.3s}
.w3-tick{stroke:var(--c-text);stroke-width:1;stroke-dasharray:2 3;opacity:.55}
.w3-dot{fill:var(--c-text)}
.w3-dlab{fill:var(--c-text);font-size:11.5px;letter-spacing:.1em}
.why3-legend{display:flex;gap:36px;flex-wrap:wrap;margin-top:32px;font-size:13px;letter-spacing:.08em;color:var(--c-sub)}
.why3-legend i{display:inline-block;width:26px;height:0;border-top:2px solid;margin-right:12px;vertical-align:middle}
.why3-legend .a i{border-color:var(--c-muted)}
.why3-legend .b i{border-color:var(--c-text)}
.why3-loop{display:grid;grid-template-columns:repeat(6,1fr);border-top:1px solid var(--line);margin-top:clamp(48px,6vw,84px);list-style:none;padding:0}
.why3-loop li{padding:22px 14px 24px 0;border-bottom:1px solid var(--line-soft);border-right:1px solid var(--line-soft)}
.why3-loop li:last-child{border-right:0}
.why3-loop li:not(:first-child){padding-left:14px}
.why3-loop .label{display:block;margin-bottom:.8em}
.why3-loop .w{display:block;font-size:var(--t-body);letter-spacing:.14em;font-weight:400;white-space:nowrap}
.why3-tail{margin-top:clamp(40px,5vw,64px);max-width:var(--measure)}
.why3-tail p+p{margin-top:1.35em}
.why3-tail .dim{margin-top:0}
@media (max-width:820px){
  /* 3列だと語が折り返すので2列に。左右の余白も詰める */
  .why3-loop{grid-template-columns:1fr 1fr}
  .why3-loop li{padding:20px 12px 22px 0}
  .why3-loop li:nth-child(2n){border-right:0;padding-left:12px}
  .why3-loop li:nth-child(2n+1){padding-left:0}
  .why3-loop .w{font-size:15px;letter-spacing:.06em;line-height:1.5}
}
@media (max-width:380px){
  .why3-loop .w{font-size:14px;letter-spacing:.02em}
}
@media (prefers-reduced-motion:reduce){
  .w3-curve{stroke-dashoffset:0;transition:none}
  .w3-marks{opacity:1;transition:none}
}

/* ---------- Program（3日間）：巨大な番号＋見出し＋2〜4欄の項目表 ---------- */
.prog-in {
    max-width: var(--content);
    margin: 0 auto
}
.prog-head {
    margin-bottom: clamp(56px, 7vw, 96px)
}
.prog-head .label {
    display: block;
    margin-bottom: 1.4em
}
.dayx {
    position: relative;
    overflow: hidden;
    padding: clamp(64px, 8vw, 120px) 0;
    border-top: 1px solid var(--line);
    scroll-margin-top: calc(var(--head-h) + 24px)
}
.dayx .dnum {
    position: absolute;
    right: -.04em;
    top: .2em;
    font-family: var(--en);
    font-size: clamp(160px, 26vw, 360px);
    line-height: 1;
    letter-spacing: -.02em;
    color: rgba(255,255,255,.12);
    -webkit-text-stroke: 0;
    pointer-events: none;
    user-select: none
}
.dhead {
    max-width: var(--measure);
    position: relative
}
.dhead .label {
    display: block;
    margin-bottom: 1.2em
}
.dhead .intro {
    color: var(--c-sub);
    margin-top: 1.4em
}
.topics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(24px, 3vw, 48px);
    margin-top: clamp(40px, 5vw, 64px);
    position: relative
}
.topic {
    border-top: 1px solid var(--line);
    padding-top: 1.2em
}
.topic h4 {
    font-size: var(--t-body);
    font-weight: 500;
    letter-spacing: .12em;
    margin-bottom: .9em
}
.topic li {
    color: var(--c-sub);
    line-height: 1.9;
    padding: .25em 0;
    border-bottom: 1px solid var(--line-soft)
}
.topic li:last-child {
    border-bottom: 0
}
.topic .tnote {
    color: var(--c-muted);
    margin-top: 1.2em;
    line-height: 1.9
}
.dfocus {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: end;
    margin-top: clamp(56px, 7vw, 96px);
    position: relative
}
.dfocus.rev {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr)
}
/* 見出しの高さを揃えて、3日とも同じ位置から本文が始まる */
.dayx .dhead {
    min-height: calc(var(--t-title) * 1.6 * 2 + 6.2em)
}
.dfocus .lead {
    margin-top: 0
}
.dfocus .ph img {
    aspect-ratio: 4/3
}
.dsteps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.6em;
    margin-top: clamp(40px, 5vw, 64px);
    border-top: 1px solid var(--line);
    position: relative
}
.dsteps div {
    padding-top: 1.4em
}
.dsteps p {
    color: var(--c-sub);
    margin-top: .8em
}

@media (max-width:820px) {
.dfocus, .dfocus.rev {
    grid-template-columns: 1fr
}
.topics {
    grid-template-columns: 1fr
}
.dayx .dhead {
    min-height: 0
}
.dayx .dnum {
    font-size: 32vw;
    top: 0
}
.dsteps {
    grid-template-columns: 1fr 1fr
}
}
@media (min-width:821px) and (max-width:1180px) {
.topics {
    grid-template-columns: repeat(2, minmax(0, 1fr))
}
}
/* ---------- 講師 ---------- */
.prof-in {
    max-width: var(--content);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: clamp(40px, 7vw, 120px);
    align-items: start
}
.prof-ph img {
    aspect-ratio: 4/5
}
.prof-t .label {
    display: block;
    margin-bottom: 1.4em
}
.prof-t h2 .en {
    display: block;
    font-size: var(--t-label);
    letter-spacing: var(--ls-label);
    color: var(--c-muted);
    margin-top: .9em;
    font-weight: 300
}
.prof-role {
    margin: 1.6em 0 2em
}
.prof-links {
    display: flex;
    gap: 2.4em;
    margin-top: 2.4em;
    font-family: var(--en);
    font-size: var(--t-label);
    letter-spacing: var(--ls-label)
}
.prof-links a {
    border-bottom: 1px solid var(--line);
    padding-bottom: .5em;
    transition: border-color .3s
}
.prof-links a:hover {
    border-color: var(--c-text)
}

@media (max-width:820px) {
.prof-in {
    grid-template-columns: 1fr
}
.prof-ph {
    max-width: 320px
}
}
/* ---------- FAQ：開くと高さがなめらかに伸びる ---------- */
.faq-in {
    max-width: var(--content);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: clamp(40px, 8vw, 140px);
    align-items: start
}
.faq-head {
    position: sticky;
    top: calc(var(--head-h) + 40px)
}
.faq-head .label {
    display: block;
    margin-bottom: 1.4em
}
.faq-list {
    border-top: 1px solid var(--line)
}
.qa {
    border-bottom: 1px solid var(--line-soft)
}
.qa summary {
    list-style: none;
    cursor: pointer;
    display: grid;
    grid-template-columns: 1fr 2em;
    align-items: center;
    gap: 1em;
    padding: 1.5em 0;
    transition: padding .35s ease
}
.qa summary::-webkit-details-marker {
display:none
}
.qa .q {
    font-size: var(--t-body);
    font-weight: 400;
    letter-spacing: .1em;
    line-height: 1.8;
    transition: color .3s
}
.qa summary:hover .q {
    color: var(--c-text)
}
.qa .pm {
    position: relative;
    width: 14px;
    height: 14px;
    justify-self: end
}
.qa .pm::before, .qa .pm::after {
    content: "";
    position: absolute;
    background: var(--c-text);
    transition: transform .45s cubic-bezier(.455, .03, .515, .955), opacity .3s
}
.qa .pm::before {
    left: 0;
    top: 6px;
    width: 14px;
    height: 1px
}
.qa .pm::after {
    left: 6px;
    top: 0;
    width: 1px;
    height: 14px
}
.qa[open] .pm::after {
    transform: rotate(90deg);
    opacity: 0
}
.qa[open] .pm::before {
    transform: rotate(180deg)
}
.qa .ans {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .5s cubic-bezier(.455, .03, .515, .955)
}
.qa[open] .ans {
    grid-template-rows: 1fr
}
.qa .ans-in {
    overflow: hidden;
    color: var(--c-sub)
}
.qa .ans-in p {
    padding: 0 2.5em 1.8em 0;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .5s ease .15s, transform .5s ease .15s
}
.qa[open] .ans-in p {
    opacity: 1;
    transform: none
}

@media (max-width:820px) {
.faq-in {
    grid-template-columns: 1fr;
    gap: 32px
}
.faq-head {
    position: static
}
}
/* ---------- ヒーロー：スライドショー ---------- */
.hero .slides picture {
    position: absolute;
    inset: 0;
    display: block;
    opacity: 0;
    transform: scale(1.04);
    transition: opacity 1.4s ease, transform 5.6s linear;
    will-change: opacity, transform
}
.hero .slides picture.is-on {
    opacity: .55;
    transform: scale(1)
}
.hero .slides picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}
.slide-count {
    position: absolute;
    left: var(--gutter);
    top: calc(var(--head-h) + 32px);
    display: flex;
    align-items: center;
    gap: .8em;
    font-size: var(--t-label)
}
.slide-count i {
    display: block;
    width: 2.4em;
    height: 1px;
    background: var(--line)
}

@media (max-width:820px) {
.slide-count {
    top: auto;
    bottom: 24px;
    left: auto;
    right: var(--gutter)
}
}
/* ---------- 00 共感：英字を大きく、ポスターのように ---------- */
.emp-in {
    max-width: var(--content);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: clamp(40px, 7vw, 120px);
    align-items: end
}
.emp-big .en {
    display: block;
    font-size: clamp(56px, 8.5vw, 128px);
    line-height: .95;
    letter-spacing: -.01em;
    font-weight: 300
}
.emp-t .lead {
    margin-top: 0
}
/* 共感セクションの背景写真：暗さは .emp-bg img の opacity、赤への溶け具合は ::after のグラデで調整 */
.emp {
    position: relative;
    isolation: isolate;
    overflow: hidden
}
.emp-bg {
    position: absolute;
    inset: 0;
    z-index: -1
}
.emp-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .38;
    filter: grayscale(.3) contrast(1.05)
}
.emp-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(107,27,27,.92) 0%, rgba(107,27,27,.35) 35%, rgba(107,27,27,.35) 65%, rgba(107,27,27,.92) 100%)
}
/* ベージュ地のときは、写真を薄く沈めて赤文字を立てる */
.emp.band-iv .emp-bg img {
    opacity: .22;
    filter: grayscale(.55) contrast(1.02) sepia(.25)
}
.emp.band-iv .emp-bg::after {
    background: linear-gradient(180deg, rgba(242,238,226,.94) 0%, rgba(242,238,226,.62) 35%, rgba(242,238,226,.62) 65%, rgba(242,238,226,.94) 100%)
}
/* 緑地のとき */
.emp.bg-g .emp-bg::after {
    background: linear-gradient(180deg, rgba(11,59,22,.92) 0%, rgba(11,59,22,.4) 35%, rgba(11,59,22,.4) 65%, rgba(11,59,22,.92) 100%)
}
/* ベージュ地：Programの輪郭数字を赤で */
.band-iv .dayx .dnum {
    color: rgba(107,27,27,.14);
    -webkit-text-stroke: 0
}
.band-bk .dayx .dnum {
    color: rgba(255,255,255,.14)
}
.emp-in {
    position: relative
}

@media (max-width:820px) {
.emp-in {
    grid-template-columns: 1fr;
    gap: 40px
}
.emp-big .en {
    font-size: clamp(48px, 14vw, 80px)
}
}
.seats-num .en {
    display: block;
    font-size: clamp(140px, 22vw, 320px);
    line-height: .8;
    letter-spacing: -.04em;
    font-weight: 300
}

@media (max-width:820px) {
.seats-num .en {
    font-size: clamp(120px, 36vw, 200px)
}
}
/* ---------- Scene：講座の風景 ---------- */
.scene-in {
    max-width: var(--content);
    margin: 0 auto
}
.scene-head {
    max-width: var(--measure);
    margin-bottom: clamp(40px, 5vw, 64px)
}
.scene-head .label {
    display: block;
    margin-bottom: 1.4em
}
.scene-head p {
    margin-top: 1.4em
}
.scene-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: auto;
    gap: clamp(12px, 1.6vw, 24px);
    align-items: start
}
.scene-grid .s1 {
    grid-column: 1/8
}
.scene-grid .s1 img {
    aspect-ratio: 3/2
}
.scene-grid .s2 {
    grid-column: 8/11;
    margin-top: clamp(32px, 6vw, 96px)
}
.scene-grid .s2 img {
    aspect-ratio: 3/2
}
.scene-grid .s3 {
    grid-column: 11/13;
    margin-top: clamp(64px, 10vw, 160px)
}
.scene-grid .s3 img {
    aspect-ratio: 3/2
}
.scene-grid .s4 {
    grid-column: 3/9
}
.scene-grid .s4 img {
    aspect-ratio: 3/2
}
.scene-grid .s5 {
    grid-column: 9/12;
    margin-top: clamp(-32px, -3vw, -16px)
}
.scene-grid .s5 img {
    aspect-ratio: 3/2
}

/* スマホは横スワイプのフィルムストリップ */
@media (max-width:820px) {
.scene-grid {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    --peek: 34px;
    scroll-padding-left: var(--peek);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none
}
.scene-grid::-webkit-scrollbar {
display:none
}
.scene-grid .ph {
    flex: 0 0 68vw;
    scroll-snap-align: start;
    margin-top: 0!important
}
.scene-grid .ph img {
    aspect-ratio: 3/2!important
}
}
.mini-cta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2em;
    flex-wrap: wrap;
    margin-top: clamp(56px, 7vw, 96px);
    padding-top: 2.4em;
    border-top: 1px solid var(--line)
}
/* ---------- スマホ：下に固定の申し込み ---------- */
.sticky-cta {
    display: none
}

@media (max-width:820px) {
.sticky-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.1em var(--gutter);
    background: rgba(0,0,0,.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--line-soft);
    letter-spacing: .18em;
    transform: translateY(100%);
    transition: transform .5s cubic-bezier(.455, .03, .515, .955)
}
.sticky-cta.on {
    transform: none
}
.sticky-cta .en {
    font-size: var(--t-label);
    letter-spacing: var(--ls-label);
    color: var(--c-muted)
}
body.menu-open .sticky-cta {
    transform: translateY(100%)
}
.site-foot {
    padding-bottom: 110px
}
}
/* ---------- チェック印（Overview と 受講に必要なもの で共用） ---------- */
.checks {
    border-top: 1px solid var(--line)
}
/* 文中に <span>（マーカー等）が入っても崩れないよう、グリッドではなく余白で組む */
.checks li {
    position: relative;
    padding: .9em 0 .9em 2.4em;
    border-bottom: 1px solid var(--line-soft)
}
.checks li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1.4em;
    width: 14px;
    height: 14px;
    border: 1px solid var(--line);
    background: linear-gradient(135deg, transparent 46%, var(--c-text) 46%, var(--c-text) 54%, transparent 54%) no-repeat center/9px 9px
}
.prep.checks li {
    padding: 1.3em 0 1.3em 2.4em
}
.prep.checks li::before {
    content: "";
    counter-increment: none;
    font-size: 0;
    padding: 0
}
/* ---------- Overview（ヒーロー直後） ---------- */
.ov-in {
    max-width: var(--content);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr);
    gap: clamp(40px, 7vw, 120px);
    align-items: start
}
.ov-l .label, .ov-price .label {
    display: block;
    margin-bottom: 1.2em
}
.ov-l p {
    margin: 1.4em 0 2.4em
}
.ov-groups {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.2em clamp(24px, 3vw, 48px)
}
.ov-g .label {
    display: block;
    margin-bottom: .8em
}
.ov-g .checks li {
    padding: .7em 0 .7em 2.4em
}
.ov-g .checks li::before {
    top: 1.2em
}

@media (max-width:640px) {
.ov-groups {
    grid-template-columns: 1fr;
    gap: 2em
}
}
.ov-r {
    border-top: 1px solid var(--line);
    padding-top: 1.6em
}
.ov-spec {
    display: grid;
    grid-template-columns: 6.5em 1fr
}
.ov-spec dt {
    color: var(--c-muted);
    font-size: var(--t-label);
    letter-spacing: .16em;
    padding: .9em 0;
    border-bottom: 1px solid var(--line-soft)
}
.ov-spec dd {
    padding: .9em 0;
    border-bottom: 1px solid var(--line-soft);
    line-height: 1.9
}
.ov-spec dd .mute {
    display: block
}
.ov-price {
    margin: 2.4em 0 2.2em
}
.ov-price .fv {
    font-size: clamp(34px, 4vw, 52px)
}
.ov-price p {
    margin-top: 1em
}

@media (max-width:820px) {
.ov-in {
    grid-template-columns: 1fr;
    gap: 40px
}
.ov-r .btn {
    display: block
}
}
/* ---------- Gallery（ヒーロー直後・横スワイプ）※写真は3:2横位置で固定 ---------- */
.gal {
padding-top:calc(var(--sec) * .7);
padding-bottom:calc(var(--sec) * .7)
}
.gal-head {
    display: flex;
    align-items: baseline;
    gap: 2em;
    margin-bottom: 2em
}
.gal-track {
    display: flex;
    gap: clamp(12px, 1.6vw, 24px);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    --peek: 48px;
    scroll-padding-left: calc(var(--gutter) + var(--peek));
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-x pan-y;
    scrollbar-width: none;
    padding: 0 var(--gutter);
    cursor: grab
}
.gal-track::-webkit-scrollbar {
display:none
}
.gal-track:active {
    cursor: grabbing
}
.gal-track .ph {
    flex: 0 0 clamp(420px, 46vw, 720px);
    scroll-snap-align: start;
    scroll-snap-stop: always
}
.gal-track .ph img {
    width: 100%;
    height: auto;
    aspect-ratio: 3/2;
    object-fit: cover;
    display: block
}
.gal-track .ph:last-child {
    margin-right: var(--gutter)
}
.gal-foot {
    display: flex;
    justify-content: space-between;
    margin-top: 1.4em
}
.gal-hint {
    opacity: .7
}
.gal-sub {
padding-top:calc(var(--sec) * .35);
padding-bottom:calc(var(--sec) * .35)
}

@media (max-width:820px) {
.gal-track {
    gap: 10px;
    --peek: 34px
}
.gal-track .ph {
flex:0 0 calc(100vw - var(--gutter) * 2)
}
}
/* ---------- 割合の図（機材10 / 技術30 / 判断40 / 本人20） ---------- */
.ratio {
    margin: 2.4em 0 1em
}
.ratio-bar {
    display: flex;
    gap: 3px;
    height: 10px
}
.ratio-bar span {
    flex: var(--w) 0 0;
    position: relative;
    overflow: hidden;
    background: rgba(255,255,255,.12)
}
.ratio-bar span i {
    position: absolute;
    inset: 0;
    background: var(--c-text);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1.1s cubic-bezier(.455, .03, .515, .955)
}
.ratio-bar span.r-m i {
    background: var(--c-muted)
}
.load-on .ratio.view .ratio-bar span:nth-child(1) i {
    transform: scaleX(1);
    transition-delay: .1s
}
.load-on .ratio.view .ratio-bar span:nth-child(2) i {
    transform: scaleX(1);
    transition-delay: .35s
}
.load-on .ratio.view .ratio-bar span:nth-child(3) i {
    transform: scaleX(1);
    transition-delay: .6s
}
.load-on .ratio.view .ratio-bar span:nth-child(4) i {
    transform: scaleX(1);
    transition-delay: .85s
}
.ratio-legend {
    display: flex;
    justify-content: space-between;
    margin-top: .9em
}
.ratio-legend .label:first-child {
    flex: 0 0 10%;
    white-space: nowrap
}
.ratio-list {
    margin-top: 1.8em;
    border-top: 1px solid var(--line)
}
.ratio-list div {
    display: grid;
    grid-template-columns: minmax(9em, 1fr) 2fr;
    gap: 0 1.5em;
    padding: .9em 0;
    border-bottom: 1px solid var(--line-soft);
    align-items: baseline
}
.ratio-list dt {
    letter-spacing: .1em;
    font-weight: 400
}
.ratio-list dt b {
    display: inline-block;
    font-family: var(--en);
    font-weight: 300;
    letter-spacing: .02em;
    width: 3.2em;
    color: var(--c-muted)
}
.ratio-list dd {
    color: var(--c-sub);
    line-height: 1.9
}
.ratio-list div.r-m dt {
    color: var(--c-muted)
}

@media (max-width:560px) {
.ratio-list div {
    grid-template-columns: 1fr;
    gap: .2em 0
}
.ratio-list dd {
    padding-left: 3.2em
}
}

@media (prefers-reduced-motion:reduce) {
.ratio-bar span i {
    transform: none;
    transition: none
}
}
/* センサーサイズ実寸比較（03の末尾） */
.sensor {
    margin: 2.4em 0 0
}
.sensor svg {
    display: block;
    width: 100%;
    height: auto;
    max-width: 560px;
    overflow: visible
}
.sensor rect {
    fill: none;
    stroke: var(--c-text);
    stroke-width: .8;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 1.6s cubic-bezier(.455, .03, .515, .955)
}
.sensor .s-apsc rect {
    stroke: var(--c-sub)
}
.sensor .s-m43 rect {
    stroke: var(--c-sub)
}
.sensor .s-sp rect {
    stroke-width: 1.1
}
.sensor text {
    fill: var(--c-sub);
    font-size: 7px;
    letter-spacing: .06em;
    opacity: 0;
    transition: opacity .9s ease
}
.sensor text.mm {
    fill: var(--c-muted);
    font-family: var(--en);
    font-size: 6.5px;
    letter-spacing: .04em
}
.sensor .s-sp text {
    fill: var(--c-text)
}
.load-on .sensor.view .s-ff rect {
    stroke-dashoffset: 0;
    transition-delay: .1s
}
.load-on .sensor.view .s-apsc rect {
    stroke-dashoffset: 0;
    transition-delay: .5s
}
.load-on .sensor.view .s-m43 rect {
    stroke-dashoffset: 0;
    transition-delay: .9s
}
.load-on .sensor.view .s-sp rect {
    stroke-dashoffset: 0;
    transition-delay: 1.3s
}
.load-on .sensor.view .s-ff text {
    opacity: 1;
    transition-delay: 1.2s
}
.load-on .sensor.view .s-apsc text {
    opacity: 1;
    transition-delay: 1.5s
}
.load-on .sensor.view .s-m43 text {
    opacity: 1;
    transition-delay: 1.8s
}
.load-on .sensor.view .s-sp text {
    opacity: 1;
    transition-delay: 2.2s
}
.sensor figcaption {
    font-family: var(--en);
    font-size: var(--t-label);
    letter-spacing: .14em;
    color: var(--c-muted);
    margin-top: 1.2em;
    line-height: 1.6
}

@media (prefers-reduced-motion:reduce) {
.sensor rect {
    stroke-dashoffset: 0;
    transition: none
}
.sensor text {
    opacity: 1;
    transition: none
}
}
/* ---------- 表題の下の札「マンツーマン講座」 ---------- */
/* 文字の大きさ・字間・箱の余白はここ。--tag-fill を var(--c-text) にすると白ベタ＋赤文字になる */
.hero .title-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2.4em
}
.hero .title-tag {
--tag-fill:var(--c-text);
    position: relative;
    display: inline-block;
    padding: .6em 1.3em;
    font-size: 13px;
    letter-spacing: .26em;
    line-height: 1;
    font-weight: 300;
    white-space: nowrap;
    color: var(--paper)
}
.hero .title-tag i {
    position: absolute;
    inset: 0;
    border: 1px solid var(--c-text);
    background: var(--tag-fill);
    clip-path: inset(0 100% 0 0);
    transition: clip-path .9s cubic-bezier(.455, .03, .515, .955) 1.1s
}
.hero .title-tag b {
    position: relative;
    font-weight: inherit;
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity .7s ease 1.7s, transform .7s ease 1.7s
}
.load-on .title-wrap.view .title-tag i {
    clip-path: inset(0 0 0 0)
}
.load-on .title-wrap.view .title-tag b {
    opacity: 1;
    transform: none
}

@media (max-width:820px) {
.hero .title-col {
    gap: 1.4em
}
}

@media (prefers-reduced-motion:reduce) {
.hero .title-tag i {
    clip-path: none;
    transition: none
}
.hero .title-tag b {
    opacity: 1;
    transform: none;
    transition: none
}
}
/* ---------- 画素数：同じ写真、数字だけカウントアップ ---------- */
.mp {
    margin: 2.4em 0 0
}
.mp-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(10px, 1.4vw, 18px)
}
.mp-cell {
    position: relative
}
.mp-cell img {
    width: 100%;
    height: auto;
    aspect-ratio: 3/2;
    object-fit: cover;
    display: block
}
.mp-num {
    position: absolute;
    right: .6em;
    top: .5em;
    font-family: var(--en);
    font-size: clamp(20px, 2.6vw, 30px);
    line-height: 1;
    letter-spacing: .02em;
    color: #fff;
    text-shadow: 0 1px 14px rgba(0,0,0,.75)
}
.mp-num b {
    font-weight: 300
}
.mp figcaption, .bk figcaption, .ib figcaption {
    font-family: var(--en);
    font-size: var(--t-label);
    letter-spacing: .14em;
    color: var(--c-muted);
    margin-top: 1.2em;
    line-height: 1.6
}
/* ---------- 玉ボケ：形は潰れる。ピントの線だけがはっきり入る ---------- */
.bk {
    margin: 2.4em 0 0
}
.bk svg {
    display: block;
    width: 100%;
    height: auto;
    max-width: 560px;
    overflow: visible
}
.bk-balls * {
    fill: currentColor;
    fill-opacity: .16;
    stroke: currentColor;
    stroke-opacity: .72;
    stroke-width: 1;
    opacity: 0;
    transition: opacity 1s ease
}
.bk-frame {
    fill: none;
    stroke: currentColor;
    stroke-opacity: .28;
    stroke-width: 1
}
.bk-side path {
    fill: none;
    stroke: currentColor;
    stroke-opacity: .4;
    stroke-width: 1;
    stroke-dasharray: 2 3
}
.bk-cap {
    fill: currentColor;
    fill-opacity: .55;
    font-size: 8px;
    letter-spacing: .1em
}
.bk-lead {
    stroke-dasharray: 2 3 !important
}
.bk-focus path {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.4;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 1s cubic-bezier(.455, .03, .515, .955)
}
.bk-focus text {
    fill: currentColor;
    font-size: 8.5px;
    letter-spacing: .14em;
    opacity: 0;
    transition: opacity .6s ease
}
.bk text.bk-l {
    fill: currentColor;
    fill-opacity: .62;
    font-size: 8px;
    letter-spacing: .08em;
    opacity: 0;
    transition: opacity .8s ease
}
.bk-frame, .bk-side, .bk-cap {
    opacity: 0;
    transition: opacity .9s ease
}
.load-on .bk.view .bk-frame, .load-on .bk.view .bk-cap {
    opacity: 1
}
.load-on .bk.view .bk-side {
    opacity: 1;
    transition-delay: 1.8s
}
.load-on .bk.view .bk-balls * {
    opacity: 1
}
.load-on .bk.view .bk-balls *:nth-child(1), .load-on .bk.view .bk-balls *:nth-child(7) {
    transition-delay: .1s
}
.load-on .bk.view .bk-balls *:nth-child(2), .load-on .bk.view .bk-balls *:nth-child(6) {
    transition-delay: .25s
}
.load-on .bk.view .bk-balls *:nth-child(3), .load-on .bk.view .bk-balls *:nth-child(5) {
    transition-delay: .4s
}
.load-on .bk.view .bk-balls *:nth-child(4) {
    transition-delay: .55s
}
.load-on .bk.view .bk-l {
    opacity: 1;
    transition-delay: .9s
}
.load-on .bk.view .bk-focus path {
    stroke-dashoffset: 0;
    transition-delay: 1.4s
}
.load-on .bk.view .bk-focus path:nth-child(2) {
    transition-delay: 1.9s
}
.load-on .bk.view .bk-focus text {
    opacity: 1;
    transition-delay: 2.4s
}
/* ---------- 手ブレ補正：カメラは止まる。被写体は止まらない ---------- */
.ib {
    margin: 2.4em 0 0
}
.ib svg {
    display: block;
    width: 100%;
    height: auto;
    max-width: 560px;
    overflow: visible
}
.ib-cam * {
    fill: none;
    stroke: var(--c-text);
    stroke-width: .8
}
.ib-sub * {
    fill: none;
    stroke: var(--c-sub);
    stroke-width: .9
}
.ib-t {
    font-size: 7px;
    letter-spacing: .12em;
    opacity: 0;
    transition: opacity .6s ease
}
.ib-cam-t {
    fill: var(--c-text);
    font-family: var(--en)
}
.ib-sub-t {
    fill: var(--c-sub)
}
@keyframes ib-shake {
0% {
transform:translate(0, 0)
}
20% {
transform:translate(2px, -1.5px)
}
40% {
transform:translate(-1.5px, 2px)
}
60% {
transform:translate(2px, 1px)
}
80% {
transform:translate(-2px, -1px)
}
100% {
transform:translate(0, 0)
}
}
@keyframes ib-sway {
0% {
transform:translate(0, 0)
}
25% {
transform:translate(4px, 1px)
}
50% {
transform:translate(-3px, -1px)
}
75% {
transform:translate(3px, 2px)
}
100% {
transform:translate(0, 0)
}
}
.load-on .ib.view .ib-cam {
    animation: ib-shake .14s linear infinite
}
.load-on .ib.view.settled .ib-cam {
    animation: none
}
.load-on .ib.view .ib-sub {
    animation: ib-sway 1.6s ease-in-out infinite
}
.load-on .ib.view.settled .ib-cam-t {
    opacity: 1
}
.load-on .ib.view.settled .ib-sub-t {
    opacity: 1;
    transition-delay: .8s
}

@media (prefers-reduced-motion:reduce) {
.ib-cam, .ib-sub {
    animation: none!important
}
.ib-t, .bk-balls *, .bk-l, .bk-focus text, .bk-frame, .bk-side, .bk-cap {
    opacity: 1;
    transition: none
}
.bk-focus path {
    stroke-dashoffset: 0
}
}
/* ---------- スマホだけの縦写真スライド ---------- */
.gal-sp, .gal-sp-foot {
    display: none
}

@media (max-width:820px) {
.gal-sp {
    display: flex;
    margin-bottom: 2.4em
}
.gal-sp .ph {
flex:0 0 calc(100vw - var(--gutter) * 2)
}
.gal-sp .ph img {
    aspect-ratio: 2/3
}
.gal-sp-foot {
    display: flex;
    margin: -1.4em 0 2.4em
}
}
/* ---------- ジャンル別ギャラリー（縦に並べる／写真は正方形） ---------- */
.gal-genre .grow {
    margin-top: clamp(48px, 6vw, 84px)
}
.gal-genre .grow:first-of-type {
    margin-top: clamp(28px, 3.4vw, 44px)
}
.grow-head {
    display: flex;
    align-items: baseline;
    gap: 1em;
    border-top: 1px solid var(--line-soft);
    padding-top: 1.2em;
    margin-bottom: .6em
}
.grow-head .gname {
    font-size: var(--t-lead);
    letter-spacing: .14em;
    font-weight: 400
}
.grow-head .en {
    color: var(--c-muted)
}
.grow-lead {
    margin-bottom: 1.4em
}
/* 全カテゴリ 横位置（3:2） */
.gal-genre .gal-track .ph {
    flex: 0 0 clamp(300px, 34vw, 500px)
}
.gal-genre .gal-track .ph img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover
}

@media (max-width:820px) {
.gal-genre .gal-track .ph {
    flex: 0 0 min(76vw, 380px)
}
.grow-head {
    flex-wrap: wrap;
    gap: .3em 1em
}
}

/* ---------- 三日間の流れ（縦に並ぶカード＋つなぐ線） ---------- */
.dayplan {
    margin: clamp(28px, 3.6vw, 48px) 0 clamp(36px, 4.5vw, 60px)
}
.dayplan-h {
    display: flex;
    align-items: baseline;
    gap: 1.2em;
    margin-bottom: 1.4em
}
.dayplan-h .dp-t {
    font-size: var(--t-lead);
    letter-spacing: .12em;
    font-weight: 400
}
.dp-list {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative
}
/* 左の縦線：画面に入ると上から下へ伸びる */
.dp-list::before {
    content: "";
    position: absolute;
    left: 1.55em;
    top: 1.4em;
    bottom: 1.4em;
    width: 1px;
    background: var(--line-soft)
}
.dp-list::after {
    content: "";
    position: absolute;
    left: 1.55em;
    top: 1.4em;
    width: 1px;
    height: 0;
    background: var(--c-text);
    transition: height 2.4s cubic-bezier(.2, .7, .2, 1) .2s
}
.load-on .dayplan.view .dp-list::after {
    height: calc(100% - 2.8em)
}
.dp-card {
    position: relative;
    display: grid;
    grid-template-columns: 3.1em 1fr;
    gap: 1.2em;
    padding: 1.2em 0 1.4em;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1)
}
.load-on .dayplan.view .dp-card {
    opacity: 1;
    transform: none
}
.load-on .dayplan.view .dp-card:nth-of-type(1) { transition-delay: .3s }
.load-on .dayplan.view .dp-card:nth-of-type(3) { transition-delay: 1.1s }
.load-on .dayplan.view .dp-card:nth-of-type(5) { transition-delay: 1.9s }
.dp-num {
    position: relative;
    z-index: 1;
    width: 3.1em;
    height: 3.1em;
    border-radius: 50%;
    border: 1px solid var(--c-text);
    background: var(--paper);
    display: grid;
    place-items: center;
    transform: scale(.6);
    transition: transform .6s cubic-bezier(.2, .7, .2, 1)
}
.load-on .dayplan.view .dp-card .dp-num {
    transform: none
}
.dp-num .en {
    font-family: var(--en);
    font-size: 15px;
    letter-spacing: .08em
}
.dp-site .dp-num {
    background: var(--c-text);
    color: var(--paper)
}
.dp-body {
    padding-top: .55em
}
.dp-title {
    font-size: var(--t-body);
    letter-spacing: .1em;
    font-weight: 400;
    line-height: 1.7
}
.dp-desc {
    margin: .55em 0 0;
    font-size: 12.5px;
    line-height: 1.85;
    color: var(--c-sub)
}
.dp-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .6em .8em;
    margin-top: .9em
}
.dp-chip {
    display: inline-flex;
    align-items: baseline;
    gap: .5em;
    font-size: 12.5px;
    letter-spacing: .06em;
    padding: .45em .8em;
    border: 1px solid var(--line-soft);
    color: var(--c-sub)
}
.dp-chip small {
    font-size: 10.5px;
    color: var(--c-muted)
}
.dp-chip-site {
    border-color: var(--c-text);
    color: var(--c-text)
}
.dp-ico {
    display: inline-block;
    width: 10px;
    height: 10px;
    align-self: center;
    border: 1px solid currentColor;
    opacity: .8
}
.dp-ico-office {
    border-radius: 1px
}
.dp-ico-clock {
    border-radius: 50%;
    position: relative
}
.dp-ico-clock::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 3px;
    height: 1px;
    background: currentColor;
    transform-origin: 0 50%;
    transform: rotate(-60deg)
}
.dp-ico-site {
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg)
}
/* 回のあいだ */
.dp-gap {
    position: relative;
    padding: .2em 0 .2em 4.3em;
    font-family: var(--en);
    font-size: 11px;
    letter-spacing: .22em;
    color: var(--c-muted);
    opacity: 0;
    transition: opacity .8s ease
}
.load-on .dayplan.view .dp-gap {
    opacity: 1
}
.load-on .dayplan.view .dp-gap:nth-of-type(2) { transition-delay: .9s }
.load-on .dayplan.view .dp-gap:nth-of-type(4) { transition-delay: 1.7s }
.dp-gap span {
    font-family: var(--jp);
    letter-spacing: .14em
}
@media (max-width:820px) {
.dayplan-h {
    flex-direction: column;
    gap: .5em
}
.dp-card {
    grid-template-columns: 2.7em 1fr;
    gap: 1em
}
.dp-list::before, .dp-list::after {
    left: 1.35em
}
.dp-num {
    width: 2.7em;
    height: 2.7em
}
.dp-num .en {
    font-size: 13px
}
.dp-gap {
    padding-left: 3.7em
}
}
@media (prefers-reduced-motion:reduce) {
.dp-card, .dp-gap { opacity: 1; transform: none; transition: none }
.dp-num { transform: none; transition: none }
.dp-list::after { height: calc(100% - 2.8em); transition: none }
}

/* ---------- Voices：受講者の写真＋コメント＋Before/After ---------- */
.voices-head {
    max-width: var(--measure);
    margin-bottom: clamp(40px, 5vw, 64px)
}
.voices-head .label {
    display: block;
    margin-bottom: 1.4em
}
.voices-head .dim {
    margin-top: 1.2em
}
.voice {
    padding: clamp(40px, 5vw, 64px) 0;
    border-top: 1px solid var(--line-soft)
}
.voice:last-child {
    border-bottom: 1px solid var(--line-soft)
}
.voice-top {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: clamp(28px, 4vw, 64px);
    align-items: center
}
.voice-ph {
    margin: 0
}
.voice-ph img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    display: block
}
.voice-ph figcaption {
    margin-top: .7em;
    font-size: var(--t-label);
    letter-spacing: .12em;
    color: var(--c-muted)
}
.voice-t .label {
    display: block;
    margin-bottom: 1.2em
}
.voice-q {
    font-size: var(--t-lead);
    line-height: 1.9;
    letter-spacing: .06em;
    font-weight: 400;
    margin: 0
}
.voice-who {
    margin: 1.4em 0 0;
    font-size: var(--t-body);
    letter-spacing: .1em
}
.voice-who .mute {
    margin-left: .6em;
    font-size: 12.5px
}

.prof-head {
    margin-bottom: clamp(28px, 3.6vw, 48px)
}
.prof-head .label {
    display: block;
    margin-bottom: 1.4em
}
.prof-name {
    margin-top: 0
}

/* 受講者の作例（縦長スワイプ） */
.vgal {
    margin-top: clamp(28px, 3.6vw, 48px)
}
.vgal-head {
    margin-bottom: .9em
}
.vgal-track .ph {
    flex: 0 0 clamp(200px, 22vw, 300px)
}
.vgal-track .ph img {
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    display: block
}
.vgal .gal-foot {
    justify-content: flex-end;
    margin-top: .8em
}
@media (max-width:820px) {
.vgal-track .ph {
    flex: 0 0 min(58vw, 260px)
}
}

/* 受講前／受講後（単体で置くとき） */
.one {
    position: relative;
    padding: clamp(20px, 2.6vw, 32px) clamp(18px, 2.4vw, 30px);
    border: 1px solid var(--line-soft);
    margin-top: clamp(24px, 3vw, 40px)
}
.one p {
    margin: 0;
    font-size: var(--t-body);
    line-height: 2;
    color: var(--c-sub)
}
.one p + p {
    margin-top: .9em
}
.one .ba2-tag {
    display: block;
    margin-bottom: 1em;
    font-size: var(--t-body);
    letter-spacing: .14em;
    font-weight: 400
}
.one .ba2-tag .en {
    display: block;
    font-family: var(--en);
    font-style: normal;
    font-size: var(--t-label);
    letter-spacing: var(--ls-label);
    color: var(--c-muted);
    margin-bottom: .5em
}
/* 受講後だけ白地に反転して、変化した側を際立たせる */
.one-a {
    background: #fff;
    border-color: #fff;
    color: var(--paper)
}
.one-a p, .one-a .ba2-tag {
    color: var(--paper)
}
.one-a .ba2-tag .en {
    color: rgba(107, 27, 27, .55)
}
.band-iv .one-a {
    background: var(--paper);
    border-color: var(--paper);
    color: #fff
}
.band-iv .one-a p, .band-iv .one-a .ba2-tag {
    color: #fff
}
/* 左端から細い線が伸びて、枠が立ち上がる */
.one::before {
    content: "";
    position: absolute;
    left: 0;
    top: -1px;
    height: 1px;
    width: 0;
    background: var(--c-text);
    transition: width 1.1s cubic-bezier(.2, .7, .2, 1) .1s
}
.load-on .one.view::before {
    width: 100%
}
.one-a::before {
    background: #fff
}

/* 受講前の悩み → 受講後の感想（左右に並べて、矢印でつなぐ） */
.ba2 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr);
    gap: clamp(16px, 2.4vw, 32px);
    align-items: stretch;
    margin-top: clamp(24px, 3vw, 40px)
}
.ba2-col {
    position: relative;
    padding: clamp(20px, 2.6vw, 32px) clamp(18px, 2.4vw, 30px);
    border: 1px solid var(--line-soft);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1)
}
.ba2-col p {
    margin: 0;
    font-size: var(--t-body);
    line-height: 2;
    color: var(--c-sub)
}
.ba2-col p + p {
    margin-top: .9em
}
.ba2-tag {
    display: block;
    margin-bottom: 1em;
    font-size: var(--t-body);
    letter-spacing: .14em;
    font-weight: 400
}
.ba2-tag .en {
    display: block;
    font-family: var(--en);
    font-style: normal;
    font-size: var(--t-label);
    letter-spacing: var(--ls-label);
    color: var(--c-muted);
    margin-bottom: .5em
}
/* After 側は白地に反転して「変わった」を強調 */
.ba2-a {
    background: #fff;
    color: var(--paper);
    border-color: #fff
}
.ba2-a p, .ba2-a .ba2-tag {
    color: var(--paper)
}
.ba2-a .ba2-tag .en {
    color: rgba(107,27,27,.55)
}
.band-iv .ba2-a {
    background: var(--paper);
    color: #fff;
    border-color: var(--paper)
}
.band-iv .ba2-a p, .band-iv .ba2-a .ba2-tag {
    color: #fff
}
/* 矢印：線が伸びて、先端が出る */
.ba2-arrow {
    position: relative;
    align-self: center;
    height: 1px
}
.ba2-arrow i {
    position: absolute;
    left: 0;
    top: 0;
    height: 1px;
    width: 0;
    background: var(--c-text);
    transition: width .9s cubic-bezier(.2, .7, .2, 1)
}
.ba2-arrow b {
    position: absolute;
    right: 0;
    top: 50%;
    width: 8px;
    height: 8px;
    border-top: 1px solid var(--c-text);
    border-right: 1px solid var(--c-text);
    transform: translateY(-50%) rotate(45deg);
    opacity: 0;
    transition: opacity .4s ease
}
/* 順番：Before → 矢印 → After */
.load-on .ba2.view .ba2-b { opacity: 1; transform: none; transition-delay: .1s }
.load-on .ba2.view .ba2-arrow i { width: 100%; transition-delay: .8s }
.load-on .ba2.view .ba2-arrow b { opacity: 1; transition-delay: 1.6s }
.load-on .ba2.view .ba2-a { opacity: 1; transform: none; transition-delay: 1.7s }

.voice-gear {
    margin: 1.2em 0 0
}
.voice-ph-wide {
    margin: clamp(24px, 3vw, 40px) 0 0
}
.voice-ph-wide img {
    aspect-ratio: 3 / 2
}
@media (max-width:820px) {
.ba2 {
    grid-template-columns: 1fr;
    gap: 14px
}
/* スマホは矢印を下向きに */
.ba2-arrow {
    height: 40px;
    width: 1px;
    justify-self: center
}
.ba2-arrow i {
    width: 1px;
    height: 0;
    transition: height .9s cubic-bezier(.2, .7, .2, 1)
}
.load-on .ba2.view .ba2-arrow i {
    width: 1px;
    height: 100%
}
.ba2-arrow b {
    right: auto;
    top: auto;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) rotate(135deg)
}
}
@media (prefers-reduced-motion:reduce) {
.ba2-col, .ba2-arrow b { opacity: 1; transform: none; transition: none }
.ba2-arrow i { width: 100%; transition: none }
}

/* Before / After（ドラッグで比べる） */
.cmp {
    margin-top: clamp(28px, 3.6vw, 48px)
}
.cmp-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: .9em
}
.cmp-hint {
    display: inline-flex;
    align-items: center;
    gap: .7em;
    font-family: var(--en);
    font-size: var(--t-label);
    letter-spacing: var(--ls-label);
    color: var(--c-muted)
}
.cmp-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    touch-action: pan-y;
    cursor: ew-resize
}
.cmp-frame img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none
}
.cmp-before {
    position: absolute;
    inset: 0;
    width: var(--pos);
    overflow: hidden
}
/* 左側（Before）の画像は、フレーム全体と同じ大きさで描いて、幅だけ切る */
.cmp-frame {
    container-type: inline-size
}
.cmp-before img {
    width: 100cqw;
    max-width: none
}
.cmp-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--pos);
    width: 1px;
    background: #fff;
    transform: translateX(-50%);
    pointer-events: none
}
.cmp-handle i {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid #fff;
    background: rgba(0,0,0,.35);
    transform: translate(-50%, -50%);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px)
}
.cmp-handle i::before,
.cmp-handle i::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 6px;
    height: 6px;
    border-top: 1px solid #fff;
    border-left: 1px solid #fff
}
.cmp-handle i::before {
    left: 10px;
    transform: translateY(-50%) rotate(-45deg)
}
.cmp-handle i::after {
    right: 10px;
    transform: translateY(-50%) rotate(135deg)
}
.cmp-tag {
    position: absolute;
    top: 12px;
    font-family: var(--en);
    font-size: 11px;
    letter-spacing: .24em;
    color: #fff;
    background: rgba(0,0,0,.42);
    padding: .5em .8em;
    pointer-events: none
}
.cmp-tag-b { left: 12px }
.cmp-tag-a { right: 12px }
.cmp-range {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: ew-resize;
    -webkit-appearance: none;
    appearance: none
}
.cmp-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 60px;
    height: 100%
}
.cmp-range::-moz-range-thumb {
    width: 60px;
    height: 100%;
    border: 0;
    background: transparent
}
.cmp-cap {
    margin: 1em 0 0;
    font-size: 12.5px;
    line-height: 1.85;
    color: var(--c-sub)
}
/* 縦位置（2:3）の Before / After。横に並ばないよう幅を絞って中央に */
.cmp-v .cmp-frame {
    aspect-ratio: 2 / 3;
    max-width: 520px;
    margin: 0 auto
}
@supports not (aspect-ratio: 1) {
.cmp-v .cmp-frame {
    height: 0;
    padding-top: 150%
}
.cmp-frame {
    height: 0;
    padding-top: 66.67%
}
}
.cmp-v .cmp-head,
.cmp-v .cmp-cap {
    max-width: 520px;
    margin-left: auto;
    margin-right: auto
}
.cmp-v .cmp-cap {
    margin-top: 1em
}
.cmp-v + .cmp {
    margin-top: clamp(36px, 4.5vw, 60px)
}
@media (max-width:820px) {
.cmp-v .cmp-frame {
    max-width: none
}
}

/* 初回：画面に入ったら、ゆっくり半分から少し右へ動いて「動くもの」だと伝える */
.cmp.on .cmp-before, .cmp.on .cmp-handle {
    transition: none
}
.cmp.on.intro .cmp-before, .cmp.on.intro .cmp-handle {
    transition: width 1.6s cubic-bezier(.2, .7, .2, 1), left 1.6s cubic-bezier(.2, .7, .2, 1)
}
@media (max-width:820px) {
.voice-top {
    grid-template-columns: 1fr;
    gap: 22px
}
.voice-q {
    font-size: clamp(16px, 4.4vw, 19px)
}
}

/* ---------- 講師紹介：実績の枠と写真の出方 ---------- */
.prof-cred {
    margin-top: 1.8em;
    font-size: 12.5px;
    line-height: 2;
    letter-spacing: .06em;
    color: var(--c-sub)
}
.prof-cred p {
    margin: 0
}
.prof-cred p + p {
    margin-top: .4em
}
/* 見出しは細い罫線で区切る */
.prof-cred .cred-h {
    margin-top: 1.5em;
    padding-top: 1.2em;
    border-top: 1px solid var(--line-soft);
    font-size: 12.5px;
    letter-spacing: .14em;
    font-weight: 400;
    color: var(--c-text)
}
.prof-cred .cred-h:first-child {
    margin-top: 0
}
.cred-ph {
    margin: 1.2em 0 1.5em
}
.cred-ph img {
    width: 100%;
    display: block
}
/* ふわっと出て、周りに柔らかい光。やりすぎない */
.glow {
    opacity: 0;
    transform: translateY(6px) scale(.985);
    filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0));
    transition: opacity 1.4s ease, transform 1.4s cubic-bezier(.2, .7, .2, 1), filter 1.6s ease .3s
}
.load-on .glow.view {
    opacity: 1;
    transform: none;
    filter: drop-shadow(0 0 18px rgba(255, 255, 255, .18))
}

@media (prefers-reduced-motion:reduce) {
.glow { opacity: 1; transform: none; transition: none }
}

.wk-method-t3 {
    margin: .6em 0 0;
    font-size: var(--t-lead);
    letter-spacing: .12em;
    font-weight: 400
}

/* ---------- Why it works（v2：余白と段で読ませる） ---------- */
.wk-mark {
    font-style: normal;
    font-family: var(--en);
    font-weight: 300;
    margin-right: .35em;
    opacity: .65
}
/* Q → A */
.wk-qa {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(32px, 5vw, 80px);
    align-items: end
}
.wk-qa-q .label { display: block; margin-bottom: 1.4em }
.wk-qa-q .dim { margin-top: 1.2em }
.wk-qa-a {
    position: relative;
    padding: clamp(24px, 3vw, 40px) clamp(22px, 2.8vw, 36px);
    background: #fff;
    color: var(--paper)
}
.bg-g .wk-qa-a { color: var(--green2) }
.bg-g .wk-pivot { color: rgba(11, 59, 22, .85) }
.bg-g .wk-grid10 li { background: var(--green2) }
.wk-qa-a::before {
    content: "";
    position: absolute;
    left: -10px;
    bottom: 32px;
    width: 0; height: 0;
    border-style: solid;
    border-width: 8px 10px 8px 0;
    border-color: transparent #fff transparent transparent
}
.wk-ans {
    margin: 0;
    font-size: clamp(22px, 3.4vw, 32px);
    line-height: 1.6;
    letter-spacing: .1em;
    font-weight: 400
}
.wk-pivot {
    margin: 1.2em 0 0;
    font-size: var(--t-body);
    line-height: 1.95;
    letter-spacing: .08em;
    color: rgba(107, 27, 27, .85)
}

/* 答え：問いを縦に一つずつ */
.wk-why {
    max-width: var(--measure);
    margin-top: clamp(56px, 7vw, 100px)
}
.wk-lead {
    margin: 0;
    font-size: var(--t-lead);
    line-height: 1.9;
    letter-spacing: .08em;
    font-weight: 400
}
.wk-asks {
    list-style: none;
    padding: 0;
    margin: clamp(28px, 3.4vw, 44px) 0 0;
    border-top: 1px solid var(--line-soft)
}
.wk-asks li {
    position: relative;
    padding: .95em 0 .95em 1.5em;
    border-bottom: 1px solid var(--line-soft);
    font-size: var(--t-body);
    letter-spacing: .08em;
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1)
}
.wk-asks li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1.55em;
    width: 8px;
    height: 1px;
    background: currentColor;
    opacity: .55
}
.wk-why.on .wk-asks li { opacity: 1; transform: none }
.wk-why.on .wk-asks li:nth-child(1){transition-delay:.15s}
.wk-why.on .wk-asks li:nth-child(2){transition-delay:.35s}
.wk-why.on .wk-asks li:nth-child(3){transition-delay:.55s}
.wk-why.on .wk-asks li:nth-child(4){transition-delay:.75s}
.wk-why.on .wk-asks li:nth-child(5){transition-delay:.95s}
.wk-after {
    margin: 1.4em 0 0;
    color: var(--c-sub)
}
.wk-punch {
    margin: clamp(28px, 3.4vw, 44px) 0 0;
    font-size: var(--t-lead);
    line-height: 1.9;
    letter-spacing: .08em;
    font-weight: 400
}

/* 10 の要素：格子 */
.wk-h3 {
    margin: 0 0 clamp(24px, 3vw, 40px);
    max-width: var(--measure);
    font-size: var(--t-lead);
    line-height: 1.8;
    letter-spacing: .08em;
    font-weight: 400
}
.wk-grid10 {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1px;
    background: var(--line-soft);
    border: 1px solid var(--line-soft)
}
.wk-grid10 li {
    background: var(--paper);
    padding: clamp(18px, 2.2vw, 30px) clamp(12px, 1.6vw, 20px);
    font-size: var(--t-body);
    letter-spacing: .1em;
    line-height: 1.6;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .55s ease, transform .55s cubic-bezier(.2, .7, .2, 1)
}
.wk-grid10 li .en {
    display: block;
    font-family: var(--en);
    font-size: var(--t-label);
    letter-spacing: var(--ls-label);
    color: var(--c-muted);
    margin-bottom: .8em
}
.wk-block.on .wk-grid10 li { opacity: 1; transform: none }
.wk-block.on .wk-grid10 li:nth-child(1){transition-delay:.05s}
.wk-block.on .wk-grid10 li:nth-child(2){transition-delay:.12s}
.wk-block.on .wk-grid10 li:nth-child(3){transition-delay:.19s}
.wk-block.on .wk-grid10 li:nth-child(4){transition-delay:.26s}
.wk-block.on .wk-grid10 li:nth-child(5){transition-delay:.33s}
.wk-block.on .wk-grid10 li:nth-child(6){transition-delay:.40s}
.wk-block.on .wk-grid10 li:nth-child(7){transition-delay:.47s}
.wk-block.on .wk-grid10 li:nth-child(8){transition-delay:.54s}
.wk-block.on .wk-grid10 li:nth-child(9){transition-delay:.61s}
.wk-block.on .wk-grid10 li:nth-child(10){transition-delay:.68s}

/* 3日で上達する理由：左に文章、右に写真 */
.wk-method-h .label { display: block }
.wk-open {
    margin: .8em 0 0;
    font-size: var(--t-lead);
    letter-spacing: .1em;
    font-weight: 400
}
.wk-method-in {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: clamp(32px, 5vw, 80px);
    align-items: start;
    margin-top: clamp(28px, 3.4vw, 44px)
}
.wk-one {
    padding-bottom: 1.4em;
    border-bottom: 1px solid var(--c-text)
}
.wk-one .wk-num { margin: 0 }
.wk-one-line {
    margin: 1em 0 0;
    font-size: var(--t-lead);
    letter-spacing: .1em;
    font-weight: 400
}
.wk-method-t {
    margin-top: 1.6em
}
.wk-method-t p {
    margin: 0;
    font-size: var(--t-body);
    line-height: 2;
    color: var(--c-sub)
}
.wk-method-t p + p { margin-top: 1.2em }
.wk-method-ph {
    position: sticky;
    top: calc(var(--head-h) + 24px);
    margin: 0
}
.wk-method-ph img { aspect-ratio: 3 / 4 }

/* 流石に：左に言い切り、右に本文 */
.wk-honest-in {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: clamp(32px, 5vw, 80px);
    align-items: start
}
.wk-honest-l .t-title { margin: 0 }
.wk-honest-l .wk-q {
    margin-top: 1.2em;
    font-size: var(--t-lead)
}
.wk-honest-r p {
    margin: 0;
    font-size: var(--t-body);
    line-height: 2;
    color: var(--c-sub)
}
.wk-honest-r p + p { margin-top: 1.2em }

@media (max-width:820px) {
.wk-qa, .wk-method-in, .wk-honest-in { grid-template-columns: 1fr; gap: 28px }
.wk-qa-a::before {
    left: 28px; bottom: auto; top: -10px;
    border-width: 0 8px 10px 8px;
    border-color: transparent transparent #fff transparent
}
.wk-grid10 { grid-template-columns: repeat(2, 1fr) }
.wk-method-ph { position: static }
.wk-method-ph img { aspect-ratio: 3 / 2 }
}
@media (prefers-reduced-motion:reduce) {
.wk-asks li, .wk-grid10 li { opacity: 1; transform: none; transition: none }
}

/* ---------- Why it works ---------- */
.wk-head { max-width: var(--measure) }
.wk-head .label { display: block; margin-bottom: 1.4em }
.wk-head .dim { margin-top: 1.2em }
.wk-q {
    margin: clamp(26px, 3.2vw, 42px) 0 0;
    font-size: clamp(19px, 3.1vw, 29px);
    line-height: 1.85;
    letter-spacing: .1em;
    font-weight: 400
}
.wk-body { max-width: var(--measure); margin-top: clamp(30px, 3.8vw, 50px) }
.wk-body p + p { margin-top: 1.35em }

.wk-block {
    margin-top: clamp(56px, 7vw, 100px);
    padding-top: clamp(30px, 3.6vw, 46px);
    border-top: 1px solid var(--line-soft)
}
.wk-bh { display: flex; align-items: baseline; gap: 1.2em; margin-bottom: 1.6em }
.wk-bh h3 {
    margin: 0;
    font-size: var(--t-lead);
    line-height: 1.7;
    letter-spacing: .1em;
    font-weight: 400
}
.wk-sub { max-width: var(--measure); margin: -.6em 0 1.8em }
.wk-line {
    margin: clamp(24px, 3vw, 38px) 0 0;
    max-width: var(--measure);
    font-size: var(--t-lead);
    line-height: 1.9;
    letter-spacing: .08em;
    font-weight: 400
}
.wk-note { max-width: var(--measure); margin: 1.6em 0 0; font-size: 12.5px; line-height: 2; color: var(--c-sub) }
.wk-ph { margin-top: clamp(28px, 3.4vw, 44px) }
.wk-ph img { aspect-ratio: 3/2 }

/* 01 判断の数 */
.wk-chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .6em }
.wk-chips li {
    font-size: 13px; letter-spacing: .08em; padding: .55em .9em;
    border: 1px solid var(--line-soft); color: var(--c-sub);
    opacity: 0; transform: translateY(6px);
    transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.2,1)
}
.wk-block.on .wk-chips li { opacity: 1; transform: none }
.wk-block.on .wk-chips li:nth-child(1){transition-delay:.05s}
.wk-block.on .wk-chips li:nth-child(2){transition-delay:.13s}
.wk-block.on .wk-chips li:nth-child(3){transition-delay:.21s}
.wk-block.on .wk-chips li:nth-child(4){transition-delay:.29s}
.wk-block.on .wk-chips li:nth-child(5){transition-delay:.37s}
.wk-block.on .wk-chips li:nth-child(6){transition-delay:.45s}
.wk-block.on .wk-chips li:nth-child(7){transition-delay:.53s}
.wk-block.on .wk-chips li:nth-child(8){transition-delay:.61s}
.wk-block.on .wk-chips li:nth-child(9){transition-delay:.69s}
.wk-block.on .wk-chips li:nth-child(10){transition-delay:.77s}
.wk-two {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: clamp(18px, 2.6vw, 40px);
    margin-top: clamp(26px, 3.2vw, 42px)
}
.wk-col { padding-top: 1.2em; border-top: 1px solid var(--line-soft) }
.wk-col p { margin: 0; font-size: var(--t-body); line-height: 1.95 }
.wk-col .mute { margin-top: .8em; font-size: 12.5px }
.wk-k { display: block; font-size: var(--t-body); letter-spacing: .16em; margin-bottom: .7em }
.wk-num { display: flex; align-items: baseline; gap: .45em; margin: .7em 0 0 }
.wk-num .en { font-family: var(--en); font-size: clamp(36px, 5.6vw, 66px); line-height: 1 }
.wk-num small { font-size: var(--t-label); letter-spacing: .12em; color: var(--c-muted) }
.wk-col-a { border-top-color: var(--c-text) }

/* 02 輪 */
.wk-loop { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 2.6vw, 40px) }
.wk-loopset { padding: clamp(20px, 2.6vw, 30px); border: 1px solid var(--line-soft) }
.wk-loopset ol { list-style: none; padding: 0; margin: 0 0 1em }
.wk-loopset li {
    position: relative; padding: .5em 0 .5em 1.6em;
    font-size: var(--t-body); letter-spacing: .08em
}
.wk-loopset li::before {
    content: ""; position: absolute; left: 0; top: 1.05em;
    width: 8px; height: 1px; background: currentColor; opacity: .5
}
.wk-loopset li + li::after {
    content: ""; position: absolute; left: 3px; top: -.35em; height: .9em;
    width: 1px; background: currentColor; opacity: .3
}
.wk-loopset .mute { margin: 0; font-size: 12.5px; line-height: 1.95 }
.wk-lk { display: block; font-size: var(--t-body); letter-spacing: .14em; margin-bottom: .9em }
.wk-loopset-x { opacity: .72 }
.wk-loopset-o { border-color: var(--c-text) }

/* 03 学習曲線 */
.wk-curve svg { width: 100%; height: auto; display: block; overflow: visible }
.wc-grid { stroke: var(--line-soft); stroke-width: 1 }
.wc-axis { stroke: var(--line); stroke-width: 1 }
.wc-lab { fill: var(--c-muted); font-family: var(--en); font-size: 11px; letter-spacing: .22em }
.wc-jlab { fill: var(--c-sub); font-size: 11.5px; letter-spacing: .12em }
.wc-line {
    fill: none; stroke: var(--c-text); stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: var(--len); stroke-dashoffset: var(--len)
}
.wk-block.on .wc-line { transition: stroke-dashoffset 2.2s cubic-bezier(.35,.6,.25,1) .2s; stroke-dashoffset: 0 }
.wc-zone { fill: currentColor; opacity: 0; transition: opacity .9s ease }
.wk-block.on .wc-zone { opacity: .08; transition-delay: 1.6s }
.wc-marks { opacity: 0; transition: opacity .9s ease }
.wk-block.on .wc-marks { opacity: 1; transition-delay: 1.8s }

/* 04 四回の計測 */
.wk-rail { position: relative; height: 1px; background: var(--line-soft); margin-bottom: -1px }
.wk-rail i {
    position: absolute; left: 0; top: 0; height: 1px; width: 0;
    background: var(--c-text); transition: width 2.4s cubic-bezier(.2,.7,.2,1) .2s
}
.wk-block.on .wk-rail i { width: 100% }
.wk-steps {
    list-style: none; padding: 0; margin: 0;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 0
}
.wk-steps li {
    position: relative;
    padding: clamp(26px,3.2vw,40px) clamp(12px,1.6vw,22px) clamp(26px,3.2vw,40px) 0;
    border-right: 1px solid var(--line-soft);
    opacity: 0; transform: translateY(10px);
    transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1)
}
.wk-steps li:last-child { border-right: 0 }
.wk-steps li:not(:first-child) { padding-left: clamp(12px,1.6vw,22px) }
.wk-steps li::before {
    content: ""; position: absolute; top: -4px; left: 0;
    width: 7px; height: 7px; border-radius: 50%; background: var(--c-text);
    opacity: 0; transform: scale(.4);
    transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.2,1)
}
.wk-steps li:not(:first-child)::before { left: -4px }
.wk-block.on .wk-steps li { opacity: 1; transform: none }
.wk-block.on .wk-steps li::before { opacity: 1; transform: none }
.wk-block.on .wk-steps li:nth-child(1), .wk-block.on .wk-steps li:nth-child(1)::before { transition-delay: .3s }
.wk-block.on .wk-steps li:nth-child(2), .wk-block.on .wk-steps li:nth-child(2)::before { transition-delay: .9s }
.wk-block.on .wk-steps li:nth-child(3), .wk-block.on .wk-steps li:nth-child(3)::before { transition-delay: 1.5s }
.wk-block.on .wk-steps li:nth-child(4), .wk-block.on .wk-steps li:nth-child(4)::before { transition-delay: 2.1s }
.wk-steps .en {
    display: block; font-family: var(--en); font-size: clamp(22px,3vw,34px);
    line-height: 1; letter-spacing: .04em; margin-bottom: .5em
}
.wk-steps b {
    display: block; font-family: var(--en); font-weight: 400;
    font-size: var(--t-label); letter-spacing: var(--ls-label);
    color: var(--c-muted); margin-bottom: .9em
}
.wk-steps .w { display: block; font-size: var(--t-body); letter-spacing: .1em; line-height: 1.6; margin-bottom: .7em }
.wk-steps p { margin: 0; font-size: 12.5px; line-height: 1.95; color: var(--c-sub) }

/* 05 表 */
.wk-tbl { border-top: 1px solid var(--c-text) }
.wk-tbl-h, .wk-tbl-r { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px,2vw,32px) }
.wk-tbl-h span {
    padding: 1em 0; font-size: var(--t-body); letter-spacing: .12em;
    border-bottom: 1px solid var(--line)
}
.wk-tbl-h span:last-child { color: var(--c-muted) }
.wk-tbl-r span {
    padding: .95em 0; font-size: var(--t-body); line-height: 1.8;
    border-bottom: 1px solid var(--line-soft)
}
.wk-tbl-r span:last-child { color: var(--c-muted) }
.wk-tbl-r span:first-child { position: relative; padding-left: 1.1em }
.wk-tbl-r span:first-child::before {
    content: ""; position: absolute; left: 0; top: 1.5em;
    width: 5px; height: 1px; background: currentColor; opacity: .6
}
.wk-tbl-note { margin-top: 1.6em; max-width: var(--measure) }
.wk-tbl-note p { margin: 0; font-size: var(--t-body); line-height: 1.95 }
.wk-tbl-note p + p { margin-top: .6em }
.wk-tbl-note b { font-weight: 400 }

.wk-close {
    margin: clamp(56px,7vw,100px) 0 0; max-width: var(--measure);
    font-size: var(--t-lead); line-height: 1.95; letter-spacing: .08em; font-weight: 400
}
.wk-cta {
    margin-top: clamp(40px,5vw,64px);
    padding: clamp(26px,3.2vw,40px) clamp(22px,2.8vw,34px);
    border: 1px solid var(--line)
}
.wk-cta .label { display: block; margin-bottom: 1em }
.wk-cta p { margin: 0 0 1.6em; max-width: var(--measure) }

@media (max-width:820px) {
.wk-two, .wk-loop, .wk-tbl-h, .wk-tbl-r { grid-template-columns: 1fr }
.wk-tbl-h span:last-child, .wk-tbl-r span:last-child { border-bottom: 1px solid var(--line-soft) }
.wk-tbl-h, .wk-tbl-r { gap: 0 }
.wk-bh { flex-direction: column; gap: .5em }
.wk-steps { grid-template-columns: 1fr; padding-left: 26px; position: relative }
.wk-rail { display: none }
.wk-steps::after {
    content: ""; position: absolute; left: 3px; top: .6em; bottom: .6em;
    width: 1px; background: var(--line-soft)
}
.wk-steps li, .wk-steps li:not(:first-child) {
    padding: 0 0 clamp(26px,5vw,38px); border-right: 0
}
.wk-steps li:last-child { padding-bottom: 0 }
.wk-steps li::before, .wk-steps li:not(:first-child)::before { left: -26px; top: .45em }
}
@media (prefers-reduced-motion:reduce) {
.wk-chips li, .wk-steps li, .wk-steps li::before, .wc-marks { opacity: 1; transform: none; transition: none }
.wc-line { stroke-dashoffset: 0; transition: none }
.wc-zone { opacity: .08 }
.wk-rail i { width: 100%; transition: none }
}

/* 白背景・緑文字のマーカー（緑地の中で使う） */
.mk-g {
    background: #fff;
    color: var(--green2);
    padding: .12em .35em;
    margin: 0 -.05em;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone
}

/* ---------- 白マーカー（赤地の中で反転させる） ---------- */
.mk {
    background: #fff;
    color: var(--paper);
    padding: .12em .35em;
    margin: 0 -.05em;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone
}

/* 輪にするための複製 */
.is-clone { pointer-events: auto }

/* ---------- スワイプの合図 ---------- */
.gwrap {
    position: relative
}
/* 右端をうっすら地色へ溶かし、続きがあることを示す */
.gwrap::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: clamp(40px, 7vw, 90px);
    pointer-events: none;
    background: linear-gradient(90deg, rgba(107,27,27,0) 0%, rgba(107,27,27,.55) 100%)
}
.bg-g .gwrap::after {
    background: linear-gradient(90deg, rgba(11,59,22,0) 0%, rgba(11,59,22,.55) 100%)
}
.band-iv .gwrap::after {
    background: linear-gradient(90deg, rgba(242,238,226,0) 0%, rgba(242,238,226,.55) 100%)
}

/* 動く矢印 */
.gal-hint {
    display: inline-flex;
    align-items: center;
    gap: .7em;
    opacity: .75
}
.sw {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 8px
}
.sw i {
    position: absolute;
    top: 0;
    left: 0;
    width: 8px;
    height: 8px;
    border-top: 1px solid currentColor;
    border-right: 1px solid currentColor;
    transform: rotate(45deg);
    opacity: 0;
    animation: swipeGo 2.4s cubic-bezier(.4, 0, .2, 1) infinite
}
.sw i:nth-child(2) { animation-delay: .22s }
.sw i:nth-child(3) { animation-delay: .44s }
@keyframes swipeGo {
    0%   { transform: translateX(0) rotate(45deg); opacity: 0 }
    22%  { opacity: .95 }
    58%  { transform: translateX(20px) rotate(45deg); opacity: 0 }
    100% { transform: translateX(20px) rotate(45deg); opacity: 0 }
}
/* 一度でも動かしたら、合図は静かに消す */
.gwrap.swiped + .gal-foot .gal-hint {
    opacity: 0;
    transition: opacity .6s ease
}
.gwrap.swiped::after {
    opacity: 0;
    transition: opacity .6s ease
}
@media (prefers-reduced-motion:reduce) {
.sw i { animation: none; opacity: .8 }
.sw i:nth-child(2) { transform: translateX(10px) rotate(45deg) }
.sw i:nth-child(3) { transform: translateX(20px) rotate(45deg) }
}

/* ---------- 06：往還のティッカーが本文欄を横に押し広げるのを防ぐ（スマホで右が切れる原因） ---------- */
.ed .body {
    min-width: 0
}

/* ---------- 創業60年のブロック ---------- */
.sixty {
    margin-bottom: clamp(64px, 8vw, 110px);
    padding-bottom: clamp(40px, 5vw, 72px);
    border-bottom: 1px solid var(--line)
}
.sixty-top {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    gap: clamp(24px, 4vw, 64px);
    align-items: end
}
.sixty-num {
    display: flex;
    flex-direction: column
}
.sixty-num .label {
    margin-bottom: 1.2em
}
.sixty-num .en {
    display: block;
    font-size: clamp(120px, 18vw, 260px);
    line-height: .8;
    letter-spacing: -.04em;
    font-weight: 300
}
.sixty-v {
    writing-mode: vertical-rl;
    font-size: var(--t-lead);
    letter-spacing: .2em;
    line-height: 1;
    height: clamp(140px, 16vw, 230px);
    align-self: end
}
.sixty-ph {
    justify-self: end;
    width: min(100%, 420px)
}
.sixty-ph img {
    aspect-ratio: 3/2
}
.load-on .sixty.view .sixty-ruler .line {
    transform: scaleX(1)
}
.load-on .sixty.view .sixty-ruler span {
    opacity: 1
}
.sixty-note {
    max-width: var(--measure)
}
.sixty-note .stack {
    margin: 1.3em 0
}

@media (max-width:820px) {
.sixty-top {
    grid-template-columns: auto 1fr
}
.sixty-num .en {
    font-size: clamp(110px, 32vw, 180px)
}
.sixty-ph {
    grid-column: 1/-1;
    justify-self: stretch;
    width: 100%;
    margin-top: 1.6em
}
}

/* ---------- スマホの微調整 ---------- */
@media (max-width:560px) {
:root {
--gutter:9vw;
--t-body:14.5px
}
body {
    letter-spacing: .08em
}
}

/* ============================================================
   05 他の講座との違い ＋ 三回で変わるもの
   ============================================================ */
.dv-head { max-width: var(--measure) }
.dv-head .label { display: block; margin-bottom: 1.4em }
.dv-lead {
    margin: 1.1em 0 0;
    font-size: clamp(18px, 2.6vw, 24px);
    letter-spacing: .12em;
    line-height: 1.8
}
.dv-head-2 { margin-top: clamp(96px, 12vw, 180px) }

/* ── 対比：左（多くの講座）は淡く、線が伸びて右が立ち上がる ── */
.dv-vs { margin-top: clamp(48px, 6vw, 80px) }
.dv-vs-h {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1.25fr);
    gap: 0 clamp(12px, 2vw, 28px);
    padding-bottom: 1em;
    border-bottom: 1px solid var(--line);
    font-size: 12.5px;
    letter-spacing: .2em;
    color: var(--c-muted)
}
.dv-vs-h span:last-child { color: var(--c-text) }
.dv-vs-list { list-style: none; padding: 0; margin: 0 }
.dv-vs-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1.25fr);
    gap: 0 clamp(12px, 2vw, 28px);
    align-items: center;
    padding: clamp(18px, 2.2vw, 26px) 0;
    border-bottom: 1px solid var(--line-soft)
}
.dv-vs-l {
    font-size: 14px;
    line-height: 1.8;
    letter-spacing: .06em;
    color: var(--c-muted)
}
.dv-vs-line { position: relative; height: 1px; display: block }
.dv-vs-line i {
    position: absolute; left: 0; top: 0; height: 1px; width: 0;
    background: var(--c-text);
    transition: width .7s cubic-bezier(.2, .7, .2, 1) .35s
}
.dv-vs-line i::after {
    content: ""; position: absolute; right: -1px; top: -3px;
    width: 7px; height: 7px;
    border-top: 1px solid var(--c-text); border-right: 1px solid var(--c-text);
    transform: rotate(45deg); opacity: 0;
    transition: opacity .3s ease 1s
}
.dv-vs-r {
    font-size: clamp(16px, 1.9vw, 19px);
    line-height: 1.75;
    letter-spacing: .06em;
    opacity: 0;
    transform: translateX(-10px);
    transition: opacity .8s ease 1s, transform .8s cubic-bezier(.2, .7, .2, 1) 1s
}
.dv-vs-r b { font-weight: 400; background: linear-gradient(transparent 62%, rgba(255,255,255,.18) 62%) }
.load-on .dv-vs-row.view .dv-vs-line i { width: 100% }
.load-on .dv-vs-row.view .dv-vs-line i::after { opacity: 1 }
.load-on .dv-vs-row.view .dv-vs-r { opacity: 1; transform: none }

.dv-note {
    margin: clamp(48px, 6vw, 80px) 0 0;
    max-width: var(--measure);
    font-size: clamp(17px, 2.3vw, 22px);
    line-height: 1.95;
    letter-spacing: .08em
}

/* ── 三回で変わるもの：過去の自分に線が引かれ、新しい一行が現れる ── */
.dv-ba {
    list-style: none; padding: 0;
    margin: clamp(40px, 5vw, 64px) 0 0;
    border-top: 1px solid var(--line)
}
.dv-ba-row {
    display: grid;
    grid-template-columns: 3.4em minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 0 clamp(14px, 2.4vw, 36px);
    align-items: baseline;
    padding: clamp(22px, 2.8vw, 34px) 0;
    border-bottom: 1px solid var(--line-soft)
}
.dv-ba-n {
    font-family: var(--en);
    font-size: 13px;
    letter-spacing: .2em;
    color: var(--c-muted)
}
.dv-ba-b {
    font-size: 14px;
    line-height: 1.8;
    letter-spacing: .06em;
    color: var(--c-sub);
    transition: color .6s ease .9s
}
/* 取り消し線は左から右へ引かれる */
.dv-ba-b s {
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-position: 0 58%;
    background-size: 0 1px;
    transition: background-size .8s cubic-bezier(.2, .7, .2, 1) .35s
}
.dv-ba-a {
    font-size: clamp(18px, 2.4vw, 24px);
    line-height: 1.6;
    letter-spacing: .08em;
    font-weight: 400;
    clip-path: inset(0 100% 0 0);
    transition: clip-path 1.1s cubic-bezier(.2, .7, .2, 1) 1s
}
.load-on .dv-ba-row.view .dv-ba-b { color: var(--c-muted) }
.load-on .dv-ba-row.view .dv-ba-b s { background-size: 100% 1px }
.load-on .dv-ba-row.view .dv-ba-a { clip-path: inset(0 0 0 0) }

.dv-close { margin: clamp(56px, 7vw, 96px) 0 0 }
.dv-close-t {
    display: inline;
    font-size: clamp(22px, 3.4vw, 34px);
    line-height: 1.7;
    letter-spacing: .1em;
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0 1px;
    transition: background-size 1.6s cubic-bezier(.2, .7, .2, 1) .6s
}
.load-on .dv-close.view .dv-close-t { background-size: 100% 1px }

@media (max-width: 820px) {
    .dv-vs-h { display: none }
    .dv-vs-row {
        grid-template-columns: 1fr;
        gap: .7em 0;
        align-items: start
    }
    .dv-vs-line { width: 44px }
    .dv-vs-r { transform: translateY(6px) }
    .dv-ba-row {
        grid-template-columns: 2.6em minmax(0, 1fr);
        gap: .5em 1em
    }
    .dv-ba-a { grid-column: 2 }
}
@media (prefers-reduced-motion: reduce) {
    .dv-vs-line i { width: 100%; transition: none }
    .dv-vs-line i::after, .dv-vs-r { opacity: 1; transform: none; transition: none }
    .dv-ba-b s { background-size: 100% 1px; transition: none }
    .dv-ba-a { clip-path: none; transition: none }
    .dv-close-t { background-size: 100% 1px; transition: none }
}

/* ============================================================
   表（対比・Before/After 共通）
   細い線と余白と文字の大きさで組む。右列に薄い生成りの帯。
   動き：横線が左から右へ → 左の文字 → 矢印が左から右へ伸びる → 右の文字
   ============================================================ */
.dv-tbl-wrap { position: relative; margin-top: clamp(56px, 7vw, 96px) }
.dv-tbl { width: 100%; border-collapse: collapse; table-layout: fixed }
.dv-tbl th, .dv-tbl td {
    text-align: left;
    vertical-align: middle;
    padding: clamp(28px, 3.6vw, 44px) clamp(16px, 2.6vw, 36px);
    background: none;
    border: 0
}

/* 列の幅 */
.dv-tbl th:first-child, .dv-tbl td:first-child { width: 3.6em; padding-left: 0 }
.dv-tbl .dv-ar { width: clamp(56px, 7vw, 96px); padding-left: 0; padding-right: 0 }
.dv-tbl thead th:nth-child(2) { width: 36% }   /* 左は約4割弱。残りは全部、右（After）へ */

/* 見出し */
.dv-tbl thead th {
    padding-top: clamp(20px, 2.4vw, 28px);
    padding-bottom: clamp(20px, 2.4vw, 28px);
    font-weight: 400;
    font-size: 13px;
    letter-spacing: .16em;
    color: var(--c-muted);
    vertical-align: bottom
}
.dv-tbl thead th:last-child { color: var(--c-text) }
.dv-tbl thead th .en {
    display: block;
    font-family: var(--en);
    font-size: 11px;
    letter-spacing: .3em;
    text-transform: uppercase;
    margin-bottom: .7em;
    opacity: .7
}

/* 行番号 */
.dv-tbl tbody th {
    font-family: var(--en);
    font-weight: 300;
    font-size: 13px;
    letter-spacing: .12em;
    color: var(--c-muted)
}

/* 左：読みやすい淡さ／右：大きく白く、薄い生成りの帯 */
.dv-tbl .dv-l {
    font-size: 15px;
    line-height: 2;
    letter-spacing: .06em;
    color: var(--c-sub)
}
.dv-tbl .dv-r,
.dv-tbl thead th:last-child {
    background: rgba(242, 238, 226, .09);
    padding-left: clamp(22px, 3vw, 40px);
    padding-right: clamp(22px, 3vw, 40px)
}
.dv-tbl .dv-r {
    font-size: clamp(16px, 1.9vw, 19px);
    line-height: 1.85;
    letter-spacing: .08em;
    color: var(--c-text);
    font-weight: 400
}
.dv-tbl .dv-r em {
    font-style: normal;
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 100% 1px
}

/* 横線（各行の下）
   ※ tr に ::after を付けると、ブラウザが「見えない5列目」を作って
     表の右側が空く。そこで行頭のセルから、表の幅（100cqw）いっぱいに引く */
.dv-tbl-wrap { container-type: inline-size }
.dv-tbl tbody th { position: relative }
.dv-tbl tbody th::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 100cqw;
    height: 1px;
    background: var(--line-soft);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 1s cubic-bezier(.2, .7, .2, 1)
}
.dv-tbl thead th { border-bottom: 1px solid var(--line) }

/* 矢印：線が左から右へ伸び、先端が出る */
.dv-tbl .dv-ar i {
    position: relative;
    display: block;
    height: 1px;
    width: 70%;
    margin: 0 auto
}
.dv-tbl .dv-ar i::before {
    content: "";
    position: absolute; left: 0; top: 0;
    height: 1px; width: 100%;
    background: var(--c-text);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .7s cubic-bezier(.3, .7, .2, 1)
}
.dv-tbl .dv-ar i::after {
    content: "";
    position: absolute; right: 0; top: -4px;
    width: 9px; height: 9px;
    border-top: 1px solid var(--c-text);
    border-right: 1px solid var(--c-text);
    transform: rotate(45deg) translate(-4px, 4px);
    opacity: 0;
    transition: opacity .3s ease, transform .4s cubic-bezier(.2, .7, .2, 1)
}

/* 文字 */
.dv-tbl .dv-l, .dv-tbl .dv-r {
    opacity: 0;
    transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1)
}
.dv-tbl tbody th { color: transparent; transition: color .8s ease }
.dv-tbl .dv-l { transform: translateX(-8px) }
.dv-tbl .dv-r { transform: translateX(-10px) }

/* 発火 */
.load-on .dv-tbl-wrap.view tbody th::after { transform: none }
.load-on .dv-tbl-wrap.view tbody th { color: var(--c-muted) }
.load-on .dv-tbl-wrap.view .dv-l,
.load-on .dv-tbl-wrap.view .dv-r { opacity: 1; transform: none }
.load-on .dv-tbl-wrap.view .dv-ar i::before { transform: none }
.load-on .dv-tbl-wrap.view .dv-ar i::after { opacity: 1; transform: rotate(45deg) }
.load-on .dv-tbl-wrap.view tbody tr:nth-child(1) > th::after { transition-delay: 0.20s }
.load-on .dv-tbl-wrap.view tbody tr:nth-child(1) > th,
.load-on .dv-tbl-wrap.view tbody tr:nth-child(1) .dv-l { transition-delay: 0.35s }
.load-on .dv-tbl-wrap.view tbody tr:nth-child(1) .dv-ar i::before { transition-delay: 0.65s }
.load-on .dv-tbl-wrap.view tbody tr:nth-child(1) .dv-ar i::after { transition-delay: 1.25s }
.load-on .dv-tbl-wrap.view tbody tr:nth-child(1) .dv-r { transition-delay: 1.30s }
.load-on .dv-tbl-wrap.view tbody tr:nth-child(2) > th::after { transition-delay: 0.42s }
.load-on .dv-tbl-wrap.view tbody tr:nth-child(2) > th,
.load-on .dv-tbl-wrap.view tbody tr:nth-child(2) .dv-l { transition-delay: 0.57s }
.load-on .dv-tbl-wrap.view tbody tr:nth-child(2) .dv-ar i::before { transition-delay: 0.87s }
.load-on .dv-tbl-wrap.view tbody tr:nth-child(2) .dv-ar i::after { transition-delay: 1.47s }
.load-on .dv-tbl-wrap.view tbody tr:nth-child(2) .dv-r { transition-delay: 1.52s }
.load-on .dv-tbl-wrap.view tbody tr:nth-child(3) > th::after { transition-delay: 0.64s }
.load-on .dv-tbl-wrap.view tbody tr:nth-child(3) > th,
.load-on .dv-tbl-wrap.view tbody tr:nth-child(3) .dv-l { transition-delay: 0.79s }
.load-on .dv-tbl-wrap.view tbody tr:nth-child(3) .dv-ar i::before { transition-delay: 1.09s }
.load-on .dv-tbl-wrap.view tbody tr:nth-child(3) .dv-ar i::after { transition-delay: 1.69s }
.load-on .dv-tbl-wrap.view tbody tr:nth-child(3) .dv-r { transition-delay: 1.74s }
.load-on .dv-tbl-wrap.view tbody tr:nth-child(4) > th::after { transition-delay: 0.86s }
.load-on .dv-tbl-wrap.view tbody tr:nth-child(4) > th,
.load-on .dv-tbl-wrap.view tbody tr:nth-child(4) .dv-l { transition-delay: 1.01s }
.load-on .dv-tbl-wrap.view tbody tr:nth-child(4) .dv-ar i::before { transition-delay: 1.31s }
.load-on .dv-tbl-wrap.view tbody tr:nth-child(4) .dv-ar i::after { transition-delay: 1.91s }
.load-on .dv-tbl-wrap.view tbody tr:nth-child(4) .dv-r { transition-delay: 1.96s }
.load-on .dv-tbl-wrap.view tbody tr:nth-child(5) > th::after { transition-delay: 1.08s }
.load-on .dv-tbl-wrap.view tbody tr:nth-child(5) > th,
.load-on .dv-tbl-wrap.view tbody tr:nth-child(5) .dv-l { transition-delay: 1.23s }
.load-on .dv-tbl-wrap.view tbody tr:nth-child(5) .dv-ar i::before { transition-delay: 1.53s }
.load-on .dv-tbl-wrap.view tbody tr:nth-child(5) .dv-ar i::after { transition-delay: 2.13s }
.load-on .dv-tbl-wrap.view tbody tr:nth-child(5) .dv-r { transition-delay: 2.18s }
.load-on .dv-tbl-wrap.view tbody tr:nth-child(6) > th::after { transition-delay: 1.30s }
.load-on .dv-tbl-wrap.view tbody tr:nth-child(6) > th,
.load-on .dv-tbl-wrap.view tbody tr:nth-child(6) .dv-l { transition-delay: 1.45s }
.load-on .dv-tbl-wrap.view tbody tr:nth-child(6) .dv-ar i::before { transition-delay: 1.75s }
.load-on .dv-tbl-wrap.view tbody tr:nth-child(6) .dv-ar i::after { transition-delay: 2.35s }
.load-on .dv-tbl-wrap.view tbody tr:nth-child(6) .dv-r { transition-delay: 2.40s }
.load-on .dv-tbl-wrap.view tbody tr:nth-child(7) > th::after { transition-delay: 1.52s }
.load-on .dv-tbl-wrap.view tbody tr:nth-child(7) > th,
.load-on .dv-tbl-wrap.view tbody tr:nth-child(7) .dv-l { transition-delay: 1.67s }
.load-on .dv-tbl-wrap.view tbody tr:nth-child(7) .dv-ar i::before { transition-delay: 1.97s }
.load-on .dv-tbl-wrap.view tbody tr:nth-child(7) .dv-ar i::after { transition-delay: 2.57s }
.load-on .dv-tbl-wrap.view tbody tr:nth-child(7) .dv-r { transition-delay: 2.62s }
.load-on .dv-tbl-wrap.view tbody tr:nth-child(8) > th::after { transition-delay: 1.74s }
.load-on .dv-tbl-wrap.view tbody tr:nth-child(8) > th,
.load-on .dv-tbl-wrap.view tbody tr:nth-child(8) .dv-l { transition-delay: 1.89s }
.load-on .dv-tbl-wrap.view tbody tr:nth-child(8) .dv-ar i::before { transition-delay: 2.19s }
.load-on .dv-tbl-wrap.view tbody tr:nth-child(8) .dv-ar i::after { transition-delay: 2.79s }
.load-on .dv-tbl-wrap.view tbody tr:nth-child(8) .dv-r { transition-delay: 2.84s }

@media (max-width: 820px) {
    .dv-tbl th, .dv-tbl td { padding: 22px 8px }
    .dv-tbl th:first-child, .dv-tbl td:first-child { width: 2em; padding-left: 0 }
    .dv-tbl .dv-ar { width: 30px }
    .dv-tbl .dv-ar i { width: 80% }
    .dv-tbl .dv-ar i::after { width: 6px; height: 6px; top: -3px }
    .dv-tbl thead th { font-size: 11px; letter-spacing: .1em }
    .dv-tbl thead th .en { font-size: 10px; letter-spacing: .22em }
    .dv-tbl tbody th { font-size: 11px }
    .dv-tbl .dv-l { font-size: 12.5px; line-height: 1.85 }
    .dv-tbl .dv-r, .dv-tbl thead th:last-child { padding-left: 12px; padding-right: 12px }
    .dv-tbl .dv-r { font-size: 13.5px; line-height: 1.75 }
}
@media (prefers-reduced-motion: reduce) {
    .dv-tbl tbody th::after { transform: none; transition: none }
    .dv-tbl tbody th { color: var(--c-muted); transition: none }
    .dv-tbl .dv-l, .dv-tbl .dv-r { opacity: 1; transform: none; transition: none }
    .dv-tbl .dv-ar i::before { transform: none; transition: none }
    .dv-tbl .dv-ar i::after { opacity: 1; transform: rotate(45deg); transition: none }
}

/* 講師作例ギャラリーも講師紹介と同じ炭色に */
.band-char {
    background: #2f3336;
    color: #fff;
    --c-text: #fff;
    --c-sub: rgba(255, 255, 255, .75);
    --c-muted: rgba(255, 255, 255, .5);
    --line: rgba(255, 255, 255, .28);
    --line-soft: rgba(255, 255, 255, .14)
}
.band-char .gwrap::after {
    background: linear-gradient(90deg, rgba(47, 51, 54, 0) 0%, rgba(47, 51, 54, .6) 100%)
}