/* ==========================================================================
   みどり書道教室（架空）改修後 af 型（2026-10-02）— 参考＝日本習字の作法、形は変える
   採寸メモ＝収益化記事/公開基盤/site_design_ref_nihonshuji_20261002.md
   色＝墨・朱・生成り。⛔紺は使わない（参考の指紋）
   ========================================================================== */
:root{
  --sumi:#1f2328; --ink:#2a2d31; --muted:#5a5e63; --shu:#b8452e; --shu-d:#963622; --paper:#f6f1e7; --paper-d:#ede5d4;
  --line:#ddd5c5; --ph:#e6e0d4; --gold:#a07a2c;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;interpolate-size:allow-keywords}
body{background:#fff;color:var(--ink);font-size:16px;line-height:1.9;
  font-family:"Noto Sans JP",system-ui,-apple-system,"Hiragino Kaku Gothic ProN","Yu Gothic UI",Meiryo,sans-serif;
  font-feature-settings:"palt" 1;-webkit-font-smoothing:antialiased;word-break:auto-phrase}
.af-serif,.af-h2,.af-tate,.af-kv__ttl,.af-cta__ttl,.af-logo,.af-course h3,.af-plan h3{font-family:"Noto Serif JP","Yu Mincho","Hiragino Mincho ProN","YuMincho",serif}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
.af-wrap{width:min(1120px,100% - 48px);margin-inline:auto}
.af-narrow{max-width:800px}
.af-arrow{width:16px;height:16px;flex:none}

.af-flag{background:#12171c;color:#f2f5f7;font-size:12px;line-height:1.7;display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:8px 24px}
.af-flag b{padding:4px 12px;border-radius:999px;background:#f6c945;color:#221a00;font-weight:700;white-space:nowrap}
.af-flag span{flex:1 1 16rem}
.af-flag a{color:#f2f5f7;font-weight:700;text-decoration:underline;white-space:nowrap}

/* ボタン ⛔黒にしない＝朱の塗り／墨の線は使わず朱の線 */
.af-btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;height:56px;padding:0 32px;border-radius:8px;font-size:16px;font-weight:700;letter-spacing:.04em;
  transition:transform .2s ease,background-color .2s ease}
.af-btn:hover,.af-btn:focus-visible{transform:translateY(-2px)}
.af-btn--main{background:var(--shu);color:#fff}
.af-btn--main:hover{background:var(--shu-d)}
.af-btn--line{background:#fff;color:var(--shu);border:2px solid var(--shu)}
.af-btn--line:hover{background:#fbefe9}
.af-btn--white{background:#fff;color:var(--shu)}
@media (prefers-reduced-motion:reduce){.af-btn,.af-band__item,.af-course{transition:none}.af-btn:hover{transform:none}}

/* ヘッダー */
.af-hd{position:sticky;top:0;z-index:50;background:#fff;box-shadow:0 1px 0 var(--line)}
.af-hd__in{display:flex;align-items:center;gap:32px;height:76px}
.af-logo{display:flex;align-items:center;gap:12px;font-size:20px;font-weight:700;color:var(--sumi);letter-spacing:.08em}
.af-logo__mark{width:40px;height:40px;border-radius:50%;background:var(--shu);color:#fff;display:flex;align-items:center;justify-content:center;font-size:18px}
.af-nav{display:flex;gap:28px;margin-left:auto;font-size:14px;font-weight:700}
.af-nav a:hover{color:var(--shu)}
.af-hd__cta{height:44px;padding:0 20px;font-size:14px}

/* KV：左に角丸の写真・右に縦書きの明朝 */
@keyframes af-up{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes af-in{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:none}}
.af-kv{padding:24px 0 56px;background:linear-gradient(180deg,#fff 0%,#fff 60%,var(--paper) 60%)}
.af-kv__in{display:grid;grid-template-columns:7fr 5fr;gap:48px;align-items:stretch}
.af-kv__photo{position:relative;animation:af-in .9s .1s both}
.af-kv__badges{position:absolute;left:24px;bottom:24px;display:flex;gap:12px}
.af-kv__img{width:100%;height:408px;object-fit:cover;border-radius:0 120px 0 120px}
.af-kv__txt{display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:24px}
/* ⛔ 1列9文字の縦書きは KV を縦に伸ばし主ボタンが 697px に落ちた（10-02）→ 3列に分けて 44px */
.af-kv__ttl{writing-mode:vertical-rl;font-size:44px;line-height:1.4;font-weight:600;letter-spacing:.14em;color:var(--sumi);display:flex;flex-direction:column;gap:16px}
/* ⛔ 縦書きでは flex の row が縦向きになる＝3列が1列につながった（10-02）→ column で右から左へ列を並べる */
.af-kv__ttl span{animation:af-up .8s both}
.af-kv__ttl span:first-child{animation-delay:.3s}
.af-kv__ttl span:nth-child(2){animation-delay:.42s}
.af-kv__ttl .is-shu{animation-delay:.55s;color:var(--shu)}
.af-kv__side{display:flex;gap:12px;animation:af-up .8s .7s both}
.af-kv__badge{display:grid;justify-items:center;width:152px;padding:12px;border-radius:12px;background:rgb(255 255 255 / 94%);box-shadow:0 8px 20px rgba(31,35,40,.12);text-align:center;line-height:1.4}
.af-kv__badge small{font-size:12px;color:var(--muted)}
.af-kv__badge b{font-family:"Noto Serif JP",serif;font-size:28px;color:var(--shu);font-weight:700}
.af-kv__badge em{font-style:normal;font-size:16px}
.af-kv__side .af-btn{padding:0 20px}
@media (prefers-reduced-motion:reduce){.af-kv__photo,.af-kv__ttl span,.af-kv__side{animation:none}}

/* 節 */
.af-sec{padding:96px 0}
.af-sec--paper{background:linear-gradient(rgba(246,241,231,.92),rgba(246,241,231,.92)),url(img/af-bg-washi.webp) center/cover}
.af-en{font-size:14px;font-weight:700;letter-spacing:.24em;color:var(--shu);text-align:center}
.af-h2{margin-top:8px;font-size:36px;line-height:1.5;font-weight:600;letter-spacing:.06em;color:var(--sumi);text-align:center}
.af-h2::after{content:"";display:block;width:40px;height:2px;background:var(--shu);margin:20px auto 0}
.af-h2--left{text-align:left}
.af-h2--left::after{margin-left:0}
.af-body{margin:20px auto 0;max-width:40em;text-align:center;color:var(--muted)}
.af-note{margin-top:12px;font-size:12px;color:var(--muted);text-align:center}
.af-ph{background:var(--ph);display:flex;align-items:center;justify-content:center;text-align:center;padding:16px;color:var(--muted);font-size:14px;font-weight:700}

/* 教室について：縦書きの見出し＋本文＋写真 */
.af-about{background:var(--paper)}
.af-about__in{display:flex;gap:64px;align-items:flex-start;justify-content:center}
.af-tate{writing-mode:vertical-rl;font-size:32px;line-height:1.7;font-weight:600;letter-spacing:.14em;color:var(--sumi);flex:none;height:440px}
.af-tate--s{font-size:28px;height:auto}
.af-about__body{max-width:560px;display:grid;gap:28px}
.af-lead{font-size:18px;line-height:2.1;color:var(--ink)}
.af-about__img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:24px}
.af-steps{list-style:none;margin-top:64px;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.af-steps li{background:#fff;border-radius:16px;padding:28px}
.af-step__no{font-size:12px;font-weight:700;letter-spacing:.16em;color:var(--shu)}
.af-steps b{display:block;margin-top:8px;font-family:"Noto Serif JP",serif;font-size:22px;font-weight:600;color:var(--sumi)}
.af-steps p{margin-top:8px;font-size:14px;color:var(--muted)}

/* コース：写真付き4つ */
.af-courses{margin-top:48px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.af-course{transition:transform .2s ease}
.af-course:hover{transform:translateY(-4px)}
.af-course__img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:16px}
.af-course div{padding-top:16px}
.af-course__no{font-size:12px;font-weight:700;letter-spacing:.16em;color:var(--shu)}
.af-course h3{margin-top:4px;font-size:24px;font-weight:600;color:var(--sumi);letter-spacing:.08em}
.af-course p{margin-top:8px;font-size:14px;color:var(--muted)}

/* 料金 */
.af-plans{margin-top:48px;display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:880px;margin-inline:auto}
.af-plan{position:relative;background:#fff;border:1px solid var(--line);border-radius:16px;padding:36px 32px}
.af-plan--top{border:2px solid var(--shu)}
.af-plan__badge{position:absolute;top:-14px;left:32px;background:var(--shu);color:#fff;font-size:12px;font-weight:700;padding:4px 16px;border-radius:999px}
.af-plan h3{font-size:24px;font-weight:600;color:var(--sumi)}
.af-plan__price{margin-top:12px;font-size:16px}
.af-plan__price b{font-family:"Noto Serif JP",serif;font-size:48px;font-weight:700;color:var(--shu);margin:0 4px}
.af-plan__freq{font-size:14px;color:var(--muted)}
.af-plan ul{margin-top:16px;padding-left:20px;font-size:14px}
.af-plan__note{margin-top:16px;padding-top:16px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}
.af-tblwrap{margin:40px auto 0;max-width:880px;overflow-x:auto}
.af-tbl{width:100%;border-collapse:collapse;background:#fff;font-size:14px}
.af-tbl th,.af-tbl td{padding:16px 20px;border-bottom:1px solid var(--line);text-align:center}
.af-tbl thead th{font-family:"Noto Serif JP",serif;font-size:16px;color:var(--sumi);border-bottom:2px solid var(--sumi)}
.af-tbl tbody th{text-align:left;font-weight:700;color:var(--sumi);white-space:nowrap}
.af-tbl--info th,.af-tbl--info td{text-align:left}

/* 声：大きな薄い英字＋3枚 */
.af-voices{position:relative;overflow:hidden}
.af-big-en{position:absolute;left:-8px;top:40px;font-family:"Noto Serif JP",serif;font-size:160px;line-height:1;font-weight:400;letter-spacing:.04em;color:var(--paper-d);pointer-events:none}
.af-h2--on{position:relative}
.af-voices__grid{margin-top:48px;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;position:relative}
.af-voice{background:var(--paper);border-radius:16px;padding:32px 28px}
.af-voice__q{font-family:"Noto Serif JP",serif;font-size:48px;line-height:1;color:var(--shu)}
.af-voice blockquote{margin-top:8px;font-size:16px;line-height:2}
.af-voice figcaption{margin-top:16px;font-size:12px;color:var(--muted)}

/* 写真の帯：暗い箱に白い文字 */
.af-band{display:grid;grid-template-columns:repeat(3,1fr)}
.af-band__item{position:relative;display:block;overflow:hidden}
.af-band__img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .4s ease}
.af-band__item:hover .af-band__img{transform:scale(1.04)}
.af-band__box{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:12px;
  background:rgb(31 35 40 / 82%);color:#fff;padding:20px 32px;font-family:"Noto Serif JP",serif;font-size:20px;font-weight:600;letter-spacing:.1em;white-space:nowrap}
@media (prefers-reduced-motion:reduce){.af-band__img{transition:none}}

/* よくある質問（開け閉めに動き） */
.af-faq{margin-top:40px;display:grid;gap:12px}
.af-faq__item{background:#fff;border:1px solid var(--line);border-radius:12px}
.af-faq__item summary{list-style:none;cursor:pointer;padding:20px 56px 20px 24px;font-weight:700;position:relative}
.af-faq__item summary::-webkit-details-marker{display:none}
.af-faq__item summary::after{content:"+";position:absolute;right:24px;top:50%;transform:translateY(-50%);font-size:24px;color:var(--shu);transition:transform .3s ease}
.af-faq__item[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.af-faq__item p{padding:0 24px 20px;font-size:14px;color:var(--muted)}
details::details-content{block-size:0;overflow:hidden;transition:block-size .3s ease,content-visibility .3s allow-discrete}
details[open]::details-content{block-size:auto}
@media (prefers-reduced-motion:reduce){details::details-content{transition:none}}

/* ごあいさつ */
.af-greet__in{display:flex;gap:48px;align-items:flex-start;justify-content:center}
.af-greet p{max-width:560px;font-size:16px;line-height:2.1}

/* 場所・お知らせ */
.af-access{display:grid;grid-template-columns:1fr 1fr;gap:64px}
.af-access .af-en{text-align:left}
.af-access .af-tbl{margin-top:32px}
.af-news{list-style:none;margin-top:32px;border-top:1px solid var(--line)}
.af-news li{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line);font-size:14px}
.af-news time{color:var(--muted)}
.af-news__tag{font-size:12px;font-weight:700;color:var(--shu);border:1px solid var(--shu);padding:0 12px;border-radius:999px}

/* 締め */
.af-cta{background:var(--shu);color:#fff;padding:72px 0;text-align:center}
.af-cta__ttl{font-size:32px;font-weight:600;letter-spacing:.08em}
.af-cta p{margin-top:12px}
.af-cta .af-btn{margin-top:28px}
.af-ft{background:var(--sumi);color:#d9d5cd;padding:40px 0;font-size:12px}
.af-ft__brand{font-family:"Noto Serif JP",serif;font-size:20px;color:#fff;display:flex;flex-direction:column}
.af-ft__brand small{font-family:"Noto Sans JP",sans-serif;font-size:12px;color:#b9b3a8}
.af-ft a{display:inline-block;margin-top:12px;color:#fff;text-decoration:underline}

@media (max-width:899px){
  .af-nav{display:none}
  .af-kv__in{grid-template-columns:1fr}
  .af-kv__txt{justify-content:center}
  .af-courses{grid-template-columns:repeat(2,minmax(0,1fr))}
  .af-voices__grid,.af-steps{grid-template-columns:1fr}
  .af-access{grid-template-columns:1fr;gap:48px}
}
@media (max-width:767px){
  .af-wrap{width:calc(100% - 32px)}
  .af-hd__in{height:60px;gap:12px}
  .af-logo{font-size:16px}
  .af-logo__mark{width:32px;height:32px;font-size:14px}
  .af-hd__cta{margin-left:auto;height:40px;padding:0 14px;font-size:12px}
  .af-kv{padding:16px 0 40px}
  .af-kv__in{gap:20px}
  .af-kv__txt{order:1;gap:16px}
  .af-kv__photo{order:2}
  .af-kv__img{height:220px;border-radius:0 64px 0 64px}
  .af-kv__ttl{font-size:28px;gap:8px}
  .af-kv__side{width:100%}
  .af-kv__side .af-btn{flex:1;height:48px;font-size:14px;padding:0 8px}
  .af-kv__badges{left:12px;bottom:12px;gap:8px}
  .af-kv__badge{width:120px;padding:8px}
  .af-kv__badge b{font-size:20px}
  .af-sec{padding:64px 0}
  .af-h2{font-size:28px}
  .af-about__in,.af-greet__in{flex-direction:column;gap:24px;align-items:stretch}
  .af-tate{writing-mode:horizontal-tb;height:auto;font-size:24px;letter-spacing:.06em}
  .af-lead{font-size:16px}
  .af-courses{gap:16px}
  .af-course h3{font-size:20px}
  .af-plans{grid-template-columns:1fr;gap:32px}
  .af-plan{padding:28px 20px}
  .af-tbl th,.af-tbl td{padding:12px 8px;font-size:12px}
  .af-big-en{font-size:88px;top:24px}
  .af-band{grid-template-columns:1fr}
  .af-band__box{font-size:16px;padding:12px 20px}
  .af-cta__ttl{font-size:24px}
}