/* Shodo by Morita Group（/calligraphy/・英語・海外の 大人むけ 書道セット）2026-11-05
   このページ（tpl-calligraphy.php）だけの CSS。site.css は 読まない（協会ページの kyokai.css と 同じ 考え）。wp_build.py で 変換しない。
   もとは 見本 サイトリニューアル/見本_calligraphy_20261104/pattern_d.html（Sana「Dでいきます」） */
/* Layout: ink on paper. Black full-bleed bands where the teacher's brush is the picture;
   wide paper bands for reading. The only colour is vermilion, used the way a seal is used on a finished piece. */
:root {
  --sumi: #0F0E0D;
  --sumi-2: #1A1816;
  --kinari: #ECE6DA;
  --paper: #F6F3EC;
  --ink: #161412;
  --mute: #6C655C;
  --mute-d: #A69E92;
  --on-dark: #F1ECE2;
  --shu: #B5311E;
  --line: rgba(22, 20, 18, .15);
  --line-d: rgba(241, 236, 226, .16);

  --f-min: "Shippori Mincho B1", "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --f-sans: "Jost", "Futura", "Avenir Next", "Helvetica Neue", Arial, sans-serif;

  --wrap: 1200px;
  --gut-l: max(16px, env(safe-area-inset-left, 0px));
  --gut-r: max(16px, env(safe-area-inset-right, 0px));
  --grain-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .25 0 0 0 0 .2 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.75 var(--f-sans);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--shu); outline-offset: 3px; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-family: var(--f-min); font-weight: 600; text-wrap: balance; letter-spacing: .005em; }
.jp { font-family: var(--f-min); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: var(--gut-l); padding-right: var(--gut-r); }
.band { position: relative; padding-block: clamp(80px, 12vw, 160px); }
.dark { background: var(--sumi); color: var(--on-dark); }
.kinari { background: var(--kinari); }
.grain::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--grain-light); opacity: .35; mix-blend-mode: multiply;
}
.dark.grain::before { background-image: var(--grain-dark); opacity: .06; mix-blend-mode: normal; }
.band > .wrap, .hero > .wrap { position: relative; }

.label {
  font: 500 .72rem/1.3 var(--f-sans); letter-spacing: .3em; text-transform: uppercase;
  color: var(--mute); display: flex; align-items: center; gap: 14px; margin: 0 0 22px;
}
.label::before { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .6; }
.dark .label { color: var(--mute-d); }
.label .jp { letter-spacing: .1em; font-size: .9rem; text-transform: none; }

h2 { font-size: clamp(2.2rem, 5vw, 4rem); line-height: 1.08; }
.lede { font-size: clamp(1.05rem, 1.5vw, 1.18rem); color: var(--mute); max-width: 33em; }
.dark .lede { color: var(--mute-d); }
.body-copy { display: grid; gap: 16px; max-width: 34em; color: var(--mute); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  min-height: 54px; padding: 0 28px;
  font: 500 .82rem/1 var(--f-sans); letter-spacing: .2em; text-transform: uppercase;
  text-decoration: none; border: 0; border-radius: 0; cursor: pointer;
  background: var(--ink); color: var(--paper);
  transition: background .2s ease, color .2s ease;
}
.btn:hover { background: #000; }
.btn--shu { background: var(--shu); color: #fff; }
.btn--shu:hover { background: #962716; }
.btn--light { background: var(--on-dark); color: var(--ink); }
.btn--light:hover { background: #fff; }
.btn--line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.btn--line:hover { background: var(--ink); color: var(--paper); }
.dark .btn--line, .top .btn--line { color: var(--on-dark); box-shadow: inset 0 0 0 1px var(--mute-d); }
.dark .btn--line:hover, .top .btn--line:hover { background: var(--on-dark); color: var(--ink); }
.btn .btn-price { font-family: var(--f-min); font-size: 1.05rem; letter-spacing: 0; font-weight: 600; text-transform: none; }
.textlink { font: 500 .82rem/1 var(--f-sans); letter-spacing: .2em; text-transform: uppercase; text-decoration: none; display: inline-flex; gap: 12px; align-items: center; padding-block: 18px; border-bottom: 1px solid currentColor; }
.textlink:hover { color: var(--shu); }

/* the vermilion seal (rakkan) */
.seal {
  display: inline-grid; place-items: center; flex: none;
  width: 40px; height: 40px; background: var(--shu); color: #fff;
  font: 700 .82rem/1.05 var(--f-min); writing-mode: vertical-rl; letter-spacing: .08em;
  border-radius: 2px;
}

/* ---------- header ---------- */
.top { background: var(--sumi); color: var(--on-dark); border-bottom: 1px solid var(--line-d); }
.top .wrap { display: flex; align-items: center; gap: 28px; min-height: 84px; }
/* the lockup: mark + two lines. "by Morita Group" stays in the mincho, lower case (Sana liked it) */
.brand { display: flex; align-items: center; gap: 16px; text-decoration: none; margin-right: auto; min-width: 0; color: var(--on-dark); }
.logo { width: 48px; height: 48px; flex: none; }
.lockup { display: grid; gap: 8px; min-width: 0; }
.l1 { display: flex; align-items: baseline; gap: .55em; white-space: nowrap; }
.l1 b { font: 600 1.4rem/1 var(--f-min); letter-spacing: .3em; margin-right: -.3em; text-transform: uppercase; }
.l1 em { font: 500 1.05rem/1 var(--f-min); font-style: normal; letter-spacing: .02em; }
.l2 { font: 400 .62rem/1 var(--f-sans); letter-spacing: .17em; text-transform: uppercase; color: var(--mute-d); white-space: nowrap; }
@media (max-width: 440px) {
  .top .wrap { gap: 10px; }
  .top .btn { padding: 0 12px; min-height: 40px; }
  .brand { gap: 10px; }
  .brand .logo { width: 36px; height: 36px; }
  .lockup { gap: 6px; }
  .l1 b { font-size: 1.12rem; letter-spacing: .24em; margin-right: -.24em; }
  .l1 em { font-size: .84rem; }
  .l2 { font-size: .5rem; letter-spacing: .09em; }
}
@media (max-width: 350px) {
  .l2 { display: none; }
  .l1 b { font-size: 1rem; letter-spacing: .2em; margin-right: -.2em; }
  .l1 em { font-size: .74rem; }
}
.nav { display: flex; gap: 30px; }
.nav a { text-decoration: none; font: 500 .74rem/1 var(--f-sans); letter-spacing: .22em; text-transform: uppercase; color: var(--mute-d); padding-block: 12px; }
.nav a:hover { color: var(--on-dark); }
.top .btn { min-height: 44px; padding: 0 20px; font-size: .74rem; white-space: nowrap; }
@media (max-width: 980px) { .nav { display: none; } }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; padding-block: clamp(56px, 9vw, 120px) 0; }
.hero-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; min-height: clamp(480px, 52vw, 640px); }
.hero-copy { display: grid; gap: 28px; position: relative; z-index: 2; min-width: 0; }
.hero h1 { font-size: clamp(2.9rem, 7vw, 6.4rem); line-height: 1.0; font-weight: 600; letter-spacing: -.012em; }
.hero h1 span { color: var(--mute-d); font-weight: 400; }
.hero .lede { max-width: 30em; }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 30px; }
.hero-art { position: relative; align-self: stretch; min-height: 420px; }
.hero-art .hatsu {
  position: absolute; right: -12%; top: 50%; transform: translateY(-50%);
  width: min(122%, 820px); max-width: none;
}
.hero-art .vert {
  position: absolute; left: 0; top: 4%; z-index: 2;
  writing-mode: vertical-rl; font: 500 1.05rem/1.9 var(--f-min); letter-spacing: .4em; color: var(--mute-d);
}
.hero-art .vert small { display: block; font: 400 .6rem/1 var(--f-sans); letter-spacing: .3em; text-transform: uppercase; margin-top: 1.6em; }
.hero-art .rakkan { position: absolute; left: 4%; bottom: 10%; width: 54px; height: 54px; }
.creds { position: relative; z-index: 2; margin-top: clamp(40px, 6vw, 72px); border-top: 1px solid var(--line-d); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.creds div { padding: 26px 24px 30px 0; display: grid; gap: 6px; align-content: start; }
.creds div + div { padding-left: 24px; border-left: 1px solid var(--line-d); }
.creds b { font: 600 1.6rem/1.1 var(--f-min); }
.creds span { font-size: .88rem; color: var(--mute-d); line-height: 1.5; }
@media (max-width: 860px) {
  .hero-main { grid-template-columns: 1fr; min-height: 0; }
  .hero-art { order: -1; min-height: 0; height: min(84vw, 420px); margin-right: calc(-1 * var(--gut-r)); }
  .hero-art .hatsu { width: min(96vw, 470px); right: -10%; }
  .hero-art .vert { font-size: .9rem; left: 0; top: 2%; }
  .hero-art .rakkan { left: 0; bottom: 4%; }
  .creds { grid-template-columns: 1fr 1fr; }
  .creds div { padding: 20px 14px 22px 0; }
  .creds div + div { padding-left: 0; border-left: 0; }
  .creds div:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--line-d); }
  .creds div:nth-child(n+3) { border-top: 1px solid var(--line-d); }
}

/* ---------- book ---------- */
.book .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 8vw, 120px); align-items: center; }
.book-cover { margin: 0; justify-self: center; width: min(100%, 360px); }
.book-cover img { width: 100%; box-shadow: 0 2px 0 rgba(22,20,18,.06), 0 40px 60px -34px rgba(22,20,18,.55); }
.book h2 { font-size: clamp(2rem, 4vw, 3.1rem); }
.book .sub { font: 400 1.25rem/1.5 var(--f-min); color: var(--mute); margin-top: 14px; }
.book .body-copy { margin-top: 28px; }
.book .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.book .book-online { margin-top: 18px; }   /* 11/6 入門ガイドへ（本の 文を Web で 無料に） */
.book .note { margin-top: 18px; font-size: .88rem; color: var(--mute); display: flex; gap: 10px; align-items: center; }
.book .note::before { content: ""; width: 8px; height: 8px; background: var(--shu); flex: none; }
@media (max-width: 760px) { .book .wrap { grid-template-columns: 1fr; } .book-cover { width: min(64%, 260px); } }

/* ---------- children in Japan ---------- */
.kids-top { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); align-items: end; }
.kids h2 { font-size: clamp(2.3rem, 5.4vw, 4.4rem); line-height: 1.08; }
.kids-photos { margin-top: clamp(48px, 7vw, 88px); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(12px, 2vw, 24px); align-items: start; }
.kids-photos figure { margin: 0; display: grid; gap: 12px; }
.kids-photos img { width: 100%; object-fit: cover; }
.kids-photos .p1 img { aspect-ratio: 16 / 10; }
.kids-photos .p2 { margin-top: clamp(40px, 8vw, 120px); }
.kids-photos .p2 img { aspect-ratio: 4 / 5; }
.kids-photos figcaption { font-size: .82rem; color: var(--mute); letter-spacing: .02em; }
.facts { margin-top: clamp(48px, 7vw, 88px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.facts div { padding: 30px 28px 0 0; display: grid; gap: 10px; align-content: start; }
.facts div + div { padding-left: 28px; border-left: 1px solid var(--line); }
.facts .k { font: 500 clamp(1.9rem, 3vw, 2.4rem)/1 var(--f-min); letter-spacing: .06em; }
.facts .e { font: 500 .74rem/1.3 var(--f-sans); letter-spacing: .24em; text-transform: uppercase; color: var(--shu); }
.facts p { color: var(--mute); font-size: .98rem; }
@media (max-width: 860px) {
  .kids-top, .kids-photos { grid-template-columns: 1fr; }
  .kids-photos .p2 { margin-top: 0; width: 72%; justify-self: end; }
  .facts { grid-template-columns: 1fr; }
  .facts div, .facts div + div { padding: 24px 0; border-left: 0; border-bottom: 1px solid var(--line); }
}

/* ---------- starter set ---------- */
.starter .wrap { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(40px, 7vw, 110px); align-items: center; }
.pkg-wrap { display: grid; gap: 14px; justify-items: center; min-width: 0; }
.pkg {
  position: relative; width: min(100%, 560px); aspect-ratio: 5 / 4;
  background: var(--sumi-2); overflow: hidden;
  box-shadow: 0 2px 0 rgba(0,0,0,.2), 0 50px 70px -40px rgba(22,20,18,.75), inset 0 0 0 1px rgba(255,255,255,.05);
}
.pkg::before { content: ""; position: absolute; inset: 0; background-image: var(--grain-dark); opacity: .07; }
.pkg .lid-char { position: absolute; left: 6%; top: 50%; transform: translateY(-50%); width: 64%; }
.pkg .obi {
  position: absolute; top: 0; bottom: 0; right: 12%; width: 17%;
  background: var(--kinari); display: grid; grid-template-rows: 1fr auto; justify-items: center; padding: 10% 0 9%;
}
.pkg .obi span { writing-mode: vertical-rl; font: 600 clamp(.8rem, 1.6vw, 1.05rem)/1 var(--f-min); letter-spacing: .5em; color: var(--ink); }
.pkg .obi .obi-logo { width: 62%; height: auto; }
.pkg .mark { position: absolute; left: 6%; bottom: 7%; font: 500 clamp(.5rem, 1vw, .66rem)/1.6 var(--f-sans); letter-spacing: .3em; text-transform: uppercase; color: var(--mute-d); }
.pkg .mark b { display: block; color: var(--on-dark); font-weight: 500; }
.pkg-cap { font-size: .8rem; color: var(--mute); letter-spacing: .04em; }
.starter-info { display: grid; gap: 22px; min-width: 0; }
.starter-info .price-row { display: flex; align-items: baseline; gap: 12px 18px; flex-wrap: wrap; }
.incl { font: 500 .74rem/1.3 var(--f-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink); padding: 9px 12px; box-shadow: inset 0 0 0 1px var(--ink); align-self: center; }
.direct { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 18px; align-items: center; padding: 20px 0 0; border-top: 1px solid var(--line); margin-top: 6px; }
.direct .postmark { width: 76px; height: 76px; color: var(--shu); }
.direct b { display: block; font: 600 1.25rem/1.3 var(--f-min); }
.direct p { color: var(--mute); font-size: .92rem; margin-top: 4px; }
.from { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font: 500 .82rem/1.4 var(--f-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--on-dark); }
.from::before { content: ""; width: 8px; height: 8px; background: var(--shu); flex: none; }
.from span { color: var(--mute-d); }
.set .incl-s { font: 500 .66rem/1.3 var(--f-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--mute); margin-top: 4px; }
.pkg .pkg-pm { position: absolute; right: 33%; top: 7%; width: 18%; color: rgba(241,236,226,.55); }
.starter-info .price { font: 600 clamp(3.6rem, 6.4vw, 5.2rem)/1 var(--f-min); letter-spacing: -.02em; }
@media (max-width: 440px) { .starter-info .price { font-size: clamp(2.6rem, 13vw, 3.4rem); } }
.starter-info .price small { font: 400 .8rem/1 var(--f-sans); letter-spacing: .2em; color: var(--mute); margin-left: 6px; }
.contents { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; border-top: 1px solid var(--line); }
.contents li { display: grid; grid-template-columns: 4.6em minmax(0, 1fr); gap: 10px; align-items: baseline; padding-block: 12px; border-bottom: 1px solid var(--line); font-size: .95rem; }
.contents .jp { font-size: 1rem; font-weight: 500; }
.contents span:last-child { color: var(--mute); }
@media (max-width: 900px) { .starter .wrap { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .contents { grid-template-columns: 1fr; } }

/* ---------- collection ---------- */
.coll-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 80px); align-items: end; }
.coll { margin-top: clamp(48px, 7vw, 88px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.set { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 26px; padding: 40px 32px 40px 0; align-content: start; }
.set + .set { padding-left: 32px; border-left: 1px solid var(--line); }
.set .big { grid-row: span 6; font: 500 clamp(3.4rem, 6vw, 5rem)/1 var(--f-min); writing-mode: vertical-rl; }
.set .romaji { font: 500 .72rem/1.3 var(--f-sans); letter-spacing: .3em; text-transform: uppercase; color: var(--mute); }
.set h3 { font-size: 1.45rem; margin-top: 8px; }
.set .p { font: 600 2.2rem/1 var(--f-min); margin-top: 16px; }
.set .p small { font: 400 .74rem/1 var(--f-sans); letter-spacing: .2em; color: var(--mute); margin-left: 4px; }
.set ul { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; font-size: .95rem; color: var(--mute); }
.set li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 8px; }
.set li::before { content: ""; width: 6px; height: 1px; background: currentColor; margin-top: .85em; }
.set .go { margin-top: 24px; justify-self: start; }
.set--main .big { color: var(--shu); }
.set .tag { font: 500 .68rem/1 var(--f-sans); letter-spacing: .24em; text-transform: uppercase; color: var(--shu); margin-top: 10px; }
.ship { margin-top: 20px; font-size: .86rem; color: var(--mute); }
@media (max-width: 960px) {
  .coll-head { grid-template-columns: 1fr; }
  .coll { grid-template-columns: 1fr; border-bottom: 0; }
  .set, .set + .set { padding: 32px 0; border-left: 0; border-bottom: 1px solid var(--line); }
}

/* ---------- why ---------- */
.why-grid { margin-top: clamp(48px, 7vw, 80px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.why-item { padding: 36px 28px 0 0; display: grid; gap: 14px; align-content: start; }
.why-item + .why-item { padding-left: 28px; border-left: 1px solid var(--line); }
.why-item .k { font: 400 clamp(3.4rem, 5vw, 4.4rem)/1 var(--f-min); }
.why-item h3 { font-size: 1.25rem; }
.why-item p { color: var(--mute); font-size: .96rem; }
@media (max-width: 900px) {
  .why-grid { grid-template-columns: 1fr 1fr; }
  .why-item, .why-item + .why-item { padding: 30px 18px 30px 0; border-left: 0; border-bottom: 1px solid var(--line); }
  .why-item:nth-child(even) { padding-left: 18px; border-left: 1px solid var(--line); }
}
@media (max-width: 520px) {
  .why-grid { grid-template-columns: 1fr; }
  .why-item, .why-item:nth-child(even) { grid-template-columns: 4.4rem minmax(0, 1fr); column-gap: 16px; padding: 26px 0; border-left: 0; }
  .why-item .k { grid-row: span 2; font-size: 3.2rem; }
}

/* ---------- history ---------- */
.hist-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: end; }
.bignum { font: 500 clamp(5.5rem, 15vw, 12rem)/.85 var(--f-min); letter-spacing: -.02em; }
.bignum sup { font-size: .35em; vertical-align: top; position: relative; top: .25em; margin-left: .05em; color: var(--shu); }
.bignum-cap { font: 500 .78rem/1.4 var(--f-sans); letter-spacing: .3em; text-transform: uppercase; color: var(--mute); margin-top: 18px; }
.timeline { list-style: none; margin: clamp(56px, 8vw, 96px) 0 0; padding: 0; border-top: 1px solid var(--line); }
.timeline li { display: grid; grid-template-columns: 2.4em 11rem minmax(0, 1fr) minmax(0, 1.4fr); gap: 8px 28px; padding-block: 26px; border-bottom: 1px solid var(--line); align-items: baseline; }
.timeline .era { writing-mode: vertical-rl; font: 500 .9rem/1 var(--f-min); letter-spacing: .2em; color: var(--mute); align-self: start; }
.timeline .when { font: 600 1.5rem/1.1 var(--f-min); }
.timeline h3 { font-size: 1.12rem; }
.timeline p { color: var(--mute); font-size: .96rem; }
.timeline li.home .when, .timeline li.now .when { color: var(--shu); }
@media (max-width: 860px) {
  .hist-head { grid-template-columns: 1fr; }
  .timeline li { grid-template-columns: 2.2em minmax(0, 1fr); gap: 4px 16px; }
  .timeline .era { grid-row: span 3; }
}

/* ---------- toyohashi brushes ---------- */
.fude .wrap { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.fude-photo { grid-column: 1 / -1; margin: 0 0 clamp(16px, 3vw, 40px); }
.fude-photo img { width: 100%; filter: invert(1) contrast(1.1); mix-blend-mode: screen; opacity: .92; }
.fude-photo figcaption { margin-top: 10px; font: 400 .66rem/1.5 var(--f-sans); letter-spacing: .24em; text-transform: uppercase; color: var(--mute-d); }
.fude .body-copy { color: var(--mute-d); margin-top: 26px; }
.fude-facts { list-style: none; margin: 34px 0 0; padding: 0; border-top: 1px solid var(--line-d); }
.fude-facts li { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 16px; padding-block: 14px; border-bottom: 1px solid var(--line-d); font-size: .94rem; color: var(--mute-d); }
.fude-facts b { color: var(--on-dark); font: 600 1.1rem/1.4 var(--f-min); }
.master { border: 1px solid var(--line-d); padding: 36px 32px; display: grid; gap: 16px; }
.master .romaji { font: 500 .72rem/1.3 var(--f-sans); letter-spacing: .3em; text-transform: uppercase; color: var(--mute-d); }
.master h3 { font-size: 1.7rem; line-height: 1.3; }
.master .p { font: 600 2.4rem/1 var(--f-min); }
.master .p small { font: 400 .76rem/1 var(--f-sans); letter-spacing: .2em; color: var(--mute-d); margin-left: 6px; }
.master p { color: var(--mute-d); font-size: .95rem; }
.soon { justify-self: start; font: 500 .68rem/1 var(--f-sans); letter-spacing: .26em; text-transform: uppercase; color: #fff; background: var(--shu); padding: 8px 12px; }
@media (max-width: 860px) { .fude .wrap { grid-template-columns: 1fr; } }

/* ---------- free sheets ---------- */
.sheets-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: end; }
.sheet-grid { margin-top: clamp(48px, 7vw, 80px); display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); }
.sheet-grid figure { margin: 0; display: grid; gap: 14px; align-content: start; min-width: 0; }
.sheet {
  aspect-ratio: 242 / 333; background: #fff; display: grid; place-items: center; padding: 8%;
  box-shadow: 0 1px 0 rgba(22,20,18,.06), 0 18px 30px -22px rgba(22,20,18,.5);
}
.sheet img { mix-blend-mode: multiply; width: 100%; }
.sheet-grid figcaption { display: grid; gap: 2px; }
.sheet-grid figcaption b { font: 600 1.05rem/1.3 var(--f-min); }
.sheet-grid figcaption span { font-size: .82rem; color: var(--mute); letter-spacing: .04em; }
.sheet-grid .dl { font: 500 .7rem/1 var(--f-sans); letter-spacing: .24em; text-transform: uppercase; color: var(--shu); background: none; border: 0; padding: 8px 0; text-align: left; cursor: pointer; justify-self: start; }
@media (max-width: 960px) { .sheet-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .sheets-head { grid-template-columns: 1fr; } .sheet-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; } }

/* ---------- about ---------- */
.about .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 7vw, 110px); align-items: center; }
.about figure { margin: 0; display: grid; gap: 12px; }
.about figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.about figcaption { font-size: .84rem; color: var(--mute); }
.about figcaption .jp { color: var(--shu); font-weight: 600; }
.about { overflow: hidden; }
/* 50 years のすかし */
.watermark {
  position: absolute; right: max(16px, env(safe-area-inset-right, 0px)); top: clamp(24px, 4vw, 56px);
  pointer-events: none; user-select: none;
  display: grid; grid-template-columns: auto auto; align-items: start; gap: .2em;
  color: rgba(22, 20, 18, .06);
}
.watermark b { font: 500 clamp(9rem, 26vw, 22rem)/.8 var(--f-min); letter-spacing: -.03em; }
.watermark span { writing-mode: vertical-rl; font: 500 clamp(1.2rem, 3.2vw, 2.6rem)/1 var(--f-sans); letter-spacing: .5em; text-transform: uppercase; margin-top: .4em; }
@media (max-width: 860px) { .watermark { top: auto; bottom: clamp(40px, 10vw, 72px); } .watermark b { font-size: clamp(10rem, 48vw, 16rem); } }
.about .body-copy { margin-top: 24px; }
.operator { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 20px; align-items: start; margin-top: 32px; padding-top: 26px; border-top: 1px solid var(--line); }
.operator img { width: 64px; height: 64px; }
.operator .op-label { display: block; font: 500 .68rem/1.3 var(--f-sans); letter-spacing: .28em; text-transform: uppercase; color: var(--mute); }
.operator b { display: block; font: 600 1.3rem/1.3 var(--f-min); margin-top: 4px; }
.operator .op-sub { display: block; font-size: .86rem; line-height: 1.6; color: var(--mute); margin-top: 4px; }
.operator a { display: inline-block; margin-top: 12px; padding-block: 6px 4px; font: 500 .72rem/1 var(--f-sans); letter-spacing: .2em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid currentColor; }
.operator a:hover { color: var(--shu); }
@media (max-width: 860px) { .about .wrap { grid-template-columns: 1fr; } }

/* ---------- faq ---------- */
.faq .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.faq-list { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding-block: 22px; display: grid; grid-template-columns: minmax(0, 1fr) 20px; gap: 16px; align-items: center; font: 600 1.12rem/1.45 var(--f-min); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 300 1.5rem/1 var(--f-sans); color: var(--shu); text-align: center; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { padding-bottom: 24px; color: var(--mute); max-width: 40em; }
@media (max-width: 860px) { .faq .wrap { grid-template-columns: 1fr; } }

/* ---------- closing + footer ---------- */
.closing { overflow: hidden; }
.closing .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: center; }
.closing h2 { font-size: clamp(2.2rem, 5vw, 4rem); }
.closing p { color: var(--mute-d); margin-top: 16px; }
.closing .ghost { position: absolute; right: -4%; top: 50%; transform: translateY(-50%); width: min(46vw, 520px); opacity: .1; pointer-events: none; }
@media (max-width: 760px) { .closing .wrap { grid-template-columns: 1fr; } .closing .ghost { display: none; } }

/* 11/7 フッター＝見本 A「3つの 列」（見本_calligraphy_footer_20261107/）：左に ロゴ・ひとこと・Notify me、右に Learn／Shop／About、下に © と 会社名 */
footer { background: var(--sumi); color: var(--mute-d); border-top: 1px solid var(--line-d); font-size: .88rem; }
.cwf-top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); padding-block: clamp(48px, 6vw, 72px) 40px; }
.cwf-brandcol { display: grid; gap: 20px; align-content: start; }
.cwf-brandcol .brand { margin-right: 0; justify-self: start; }
.cwf-tag { font-size: .95rem; line-height: 1.7; color: var(--mute-d); max-width: 26em; }
.cwf-notify { justify-self: start; min-height: 48px; padding: 0 24px; font-size: .76rem; }
footer .btn--line { color: var(--on-dark); box-shadow: inset 0 0 0 1px var(--mute-d); }   /* フッターは .dark では ない ので 白い 字の 線ボタンを ここで */
footer .btn--line:hover { background: var(--on-dark); color: var(--ink); }
.cwf-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.cwf-h { font: 500 .68rem/1.3 var(--f-sans); letter-spacing: .26em; text-transform: uppercase; color: var(--mute-d); margin-bottom: 16px; display: flex; gap: 10px; align-items: baseline; }
.cwf-h .jp { letter-spacing: .1em; font-size: .78rem; text-transform: none; opacity: .8; }
.cwf-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.cwf-cols a { display: inline-block; padding-block: 7px; text-decoration: none; color: var(--on-dark); font: 400 .98rem/1.35 var(--f-sans); letter-spacing: .01em; }
.cwf-cols a:hover { color: #E8826B; }
.cwf-cols a .cw-ext { color: var(--mute-d); }
.cwf-cols a:hover .cw-ext { color: inherit; }
.cwf-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 32px; padding-block: 22px calc(26px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line-d); font: 400 .8rem/1.6 var(--f-sans); letter-spacing: .02em; color: var(--mute-d); }
.cwf-bottom a { text-decoration: none; border-bottom: 1px solid var(--line-d); white-space: nowrap; }
.cwf-bottom a:hover { color: var(--on-dark); }
@media (max-width: 900px) { .cwf-top { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .cwf-cols { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .cwf-cols > div:last-child { grid-column: 1 / -1; }
  .cwf-cols > div:last-child ul { grid-template-columns: 1fr 1fr; column-gap: 20px; }
  .cwf-cols a { font-size: .95rem; padding-block: 8px; }
  .cwf-bottom { flex-direction: column; }
}

/* ---------- WordPress の 中で ---------- */
html { -webkit-text-size-adjust: 100%; }
body.cw { min-height: 100vh; }
.cw .mfm-floating-menu, .cw .gtranslate_wrapper, .cw .gt_switcher_wrapper, .cw #gt_float_wrapper, .cw .gt_float_switcher { display: none !important; }
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; }
.admin-bar .top { top: 32px; }
@media (max-width: 782px) { .admin-bar .top { top: 0; } }
.top .wrap { padding-block: 0; }
.nav a, .top .btn { white-space: nowrap; }
.sm-hide { display: inline; }
@media (max-width: 440px) { .sm-hide { display: none; } .top .btn { padding: 0 12px; } }
:target { scroll-margin-top: 96px; }

/* ---------- Notify me（メール登録） ---------- */
.notify { background: var(--sumi-2); color: var(--on-dark); }
.notify .wrap { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.notify .label { color: #E8826B; }
.notify .lede { color: var(--mute-d); margin-top: 18px; }
.notify-points { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 10px; color: var(--mute-d); font-size: .95rem; }
.notify-points li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 10px; }
.notify-points li::before { content: ""; width: 7px; height: 7px; background: var(--shu); margin-top: .62em; }
.notify-form { background: var(--paper); color: var(--ink); padding: clamp(24px, 3vw, 36px); }
.cw-form .wpcf7 form { display: grid; gap: 16px; }
.cw-form p { margin: 0; }
.cw-field { display: grid; gap: 6px; }
.cw-field label { font: 500 .72rem/1.3 var(--f-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--mute); }
.cw-field label small { letter-spacing: .05em; text-transform: none; font-size: .78rem; }
.cw-form input[type="email"], .cw-form input[type="text"], .cw-form select {
  width: 100%; min-height: 50px; padding: 0 14px; font: 400 1rem/1.4 var(--f-sans); color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: 0; box-shadow: none; -webkit-appearance: none; appearance: none;
}
.cw-form select { background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 36px; }
.cw-form input:focus, .cw-form select:focus { outline: 2px solid var(--shu); outline-offset: 0; border-color: var(--shu); }
.cw-ok { font-size: .9rem; color: var(--mute); }
.cw-ok .wpcf7-list-item { margin: 0; }
.cw-ok label { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; cursor: pointer; }
.cw-ok input[type="checkbox"] { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--shu); }
.cw-form .wpcf7-submit { width: 100%; min-height: 54px; border: 0; border-radius: 0; cursor: pointer; background: var(--shu); color: #fff; font: 500 .82rem/1 var(--f-sans); letter-spacing: .2em; text-transform: uppercase; }
.cw-form .wpcf7-submit:hover { background: #962716; }
.cw-form .wpcf7-spinner { margin: 10px auto 0; display: block; }
.cw-form .wpcf7-not-valid-tip { font-size: .82rem; color: var(--shu); margin-top: 4px; }
.cw-form .wpcf7 form .wpcf7-response-output { margin: 4px 0 0; padding: 12px 14px; border: 1px solid var(--line); font-size: .92rem; }
.cw-form .wpcf7 form.sent .wpcf7-response-output { border-color: var(--ink); background: #fff; }
.cw-form .wpcf7 form.invalid .wpcf7-response-output, .cw-form .wpcf7 form.unaccepted .wpcf7-response-output { border-color: var(--shu); }
.cw-privacy { margin-top: 14px !important; font-size: .8rem; color: var(--mute); line-height: 1.6; }
.cw-privacy a { color: var(--mute); }
.cw-none { color: var(--mute); }
@media (max-width: 860px) { .notify .wrap { grid-template-columns: 1fr; } }

/* ---------- 豊橋筆：工房の 写真（トップ）---------- */
.kobo-strip { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 2.4fr) minmax(0, 4fr); gap: clamp(8px, 1.4vw, 16px); align-items: stretch; margin-bottom: clamp(16px, 3vw, 40px); }
.kobo-strip figure { margin: 0; }
.kobo-strip img { width: 100%; height: clamp(200px, 28vw, 380px); object-fit: cover; }
.kobo-cap { grid-column: 1 / -1; margin-top: 6px; font: 400 .8rem/1.6 var(--f-sans); letter-spacing: .06em; color: var(--mute-d); }
.kobo-cap a { color: var(--on-dark); margin-left: 8px; }
.kobo-link { margin-top: 26px; color: var(--on-dark); }
@media (max-width: 640px) { .kobo-strip { grid-template-columns: 1fr 1fr; } .kobo-strip .k1 { grid-column: 1 / -1; } .kobo-strip img { height: 52vw; } .kobo-strip .k1 img { height: 60vw; } }
.kobo-strip .k2 img { object-position: 50% 25%; }

/* ---------- 工房の ページ ---------- */
.kobo-hero { padding-block: clamp(48px, 8vw, 110px); }
.kobo-hero-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.kobo-hero .label a { color: inherit; }
.kobo-hero h1 { font-size: clamp(2.6rem, 5.6vw, 5rem); line-height: 1.02; }
.kobo-hero-photo { margin: 0; display: grid; gap: 10px; }
.kobo-hero-photo { justify-self: center; width: min(100%, 460px); }
.kobo-hero-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; }
.kobo-hero-photo figcaption, .kobo-shop figcaption { font: 400 .74rem/1.5 var(--f-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--mute-d); }
.kobo-shop figcaption { color: var(--mute); }
.kobo-craft { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.kobo-craft .body-copy { margin-top: 24px; }
.kobo-facts { margin: 0; border-top-color: var(--line); }
.kobo-facts li { border-bottom-color: var(--line); color: var(--mute); }
.kobo-facts b { color: var(--ink); }
.kobo-shop { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.kobo-gate { justify-self: center; width: min(100%, 420px); }
.kobo-gate img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 60%; }
.kobo-visit { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.kobo-visit-photos { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: clamp(8px, 1.4vw, 16px); align-items: end; }
.kobo-visit-photos figure { margin: 0; }
.kobo-visit-photos img { width: 100%; object-fit: cover; }
.kobo-visit-photos .v1 img { aspect-ratio: 4 / 3; }
.kobo-visit-photos .v2 img { aspect-ratio: 3 / 4; object-position: 70% 50%; }
.kobo-visit .body-copy { margin-top: 24px; }
.kobo-shop figure { margin: 0; display: grid; gap: 10px; }
.kobo-shop .body-copy { margin-top: 24px; }
.kobo-steps { margin-top: clamp(40px, 6vw, 72px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3vw, 40px) clamp(12px, 2vw, 24px); }
.kobo-steps figure { margin: 0; display: grid; gap: 14px; align-content: start; }
.kobo-steps img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.kobo-steps figcaption { font-size: .92rem; color: var(--mute-d); line-height: 1.6; }
.kobo-steps figcaption b { display: block; font: 600 1.15rem/1.3 var(--f-min); color: var(--on-dark); margin-bottom: 4px; }
.kobo-why { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 6vw, 96px); align-items: start; }
.kobo-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
@media (max-width: 860px) { .kobo-hero-in, .kobo-craft, .kobo-shop, .kobo-why, .kobo-visit { grid-template-columns: 1fr; } .kobo-steps { grid-template-columns: 1fr 1fr; } }

/* 11/5 $72.99 にしたら iPhone SE で セットの カードの 値段が はみ出した → USD を 折り返す */
.set .p { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 4px; }
.set .p small { margin-left: 0; }
@media (max-width: 440px) { .set .p { font-size: 1.9rem; } }

/* 11/5 Sana「Everything in Hajime がわかりにくい」→「Everything in the Starter Set, plus:」を はっきり */
.set li.all { color: var(--ink); font-weight: 500; padding-bottom: 8px; margin-bottom: 2px; border-bottom: 1px solid var(--line); }
.set li.all::before { display: none; }
.set li.all { grid-template-columns: minmax(0, 1fr); }
.set li.all b { font-weight: 600; }

/* 11/5 スマホで スターターセットの カードが くずれた（Notify me ボタンが 字の 列に 入った）→ 字は 左の 列、ほかは ぜんぶ 右の 列に 固定 */
.set > .big { grid-column: 1; grid-row: 1 / span 12; align-self: start; }
.set > *:not(.big) { grid-column: 2; }

/* 11/5 Sana「写真の並べ方が適当すぎ。きれいに」→ 2まいを 同じ 高さ・上と キャプションを そろえる（PC）、スマホは 同じ 大きさで 縦に */
.kids-photos { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; }
.kids-photos .p2 { margin-top: 0; width: auto; justify-self: stretch; }
.kids-photos .p1 img, .kids-photos .p2 img { aspect-ratio: auto; height: clamp(280px, 32vw, 460px); object-position: 50% 45%; }
@media (max-width: 860px) {
  .kids-photos { grid-template-columns: 1fr; gap: 28px; }
  .kids-photos .p2 { width: auto; justify-self: stretch; }
  .kids-photos .p1 img, .kids-photos .p2 img { height: auto; aspect-ratio: 4 / 3; }
  .kids-photos .p2 img { object-position: 50% 40%; }
}

/* ==========================================================================
   無料お手本（英語）/calligraphy/free-sheets/ 2026-11-05（inc/calligraphy-sheets.php）
   一覧：検索窓・テーマの ボタン・カード。言葉の ページ：黒い 帯に 白い 半紙、意味・字・書き方・書き順・練習の しかた。
   ========================================================================== */
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.shh .label a, .sh-copy .label a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; }   /* 無料お手本の ページだけ（工房ページの パンくずは 前の まま）*/
[hidden] { display: none !important; }

/* ---------- 一覧の 上 ---------- */
.shh { padding-block: clamp(48px, 8vw, 110px); }
.shh-in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.shh h1 { font-size: clamp(2.5rem, 5.4vw, 4.8rem); line-height: 1.04; }
.shh-steps { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line-d); counter-reset: s; }
.shh-steps li { padding: 20px 18px 0 0; display: grid; gap: 6px; align-content: start; counter-increment: s; }
.shh-steps li + li { padding-left: 18px; border-left: 1px solid var(--line-d); }
.shh-steps b { font: 600 1.15rem/1.2 var(--f-min); color: var(--on-dark); }
.shh-steps b::before { content: counter(s) "  "; color: var(--shu); font-family: var(--f-sans); font-weight: 500; font-size: .85rem; letter-spacing: .1em; }
.shh-steps span { font-size: .9rem; line-height: 1.55; color: var(--mute-d); }
.shh-art { position: relative; height: clamp(320px, 36vw, 470px); }
.shh-art .sheet { position: absolute; width: 50%; padding: 3%; box-shadow: 0 30px 50px -28px rgba(0,0,0,.9); }
.shh-art .s1 { left: 0; top: 10%; transform: rotate(-5deg); }
.shh-art .s2 { left: 25%; top: 0; z-index: 2; }
.shh-art .s3 { right: 0; top: 14%; transform: rotate(5deg); }
@media (max-width: 860px) {
  .shh-in { grid-template-columns: 1fr; }
  .shh-art { order: -1; height: 64vw; max-height: 360px; width: min(100%, 440px); justify-self: center; }
}
@media (max-width: 560px) {
  .shh-steps { grid-template-columns: 1fr; }
  .shh-steps li, .shh-steps li + li { padding: 14px 0; border-left: 0; border-bottom: 1px solid var(--line-d); }
}

/* ---------- 検索・しぼりこみ ---------- */
.shl-tools { display: grid; gap: 18px; position: sticky; top: 84px; z-index: 5; background: var(--paper); padding-block: 14px; margin-top: -14px; }
.admin-bar .shl-tools { top: 116px; }
.shl-search { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--ink); max-width: 560px; }
.shl-search svg { width: 22px; height: 22px; fill: none; stroke: var(--ink); stroke-width: 1.6; flex: none; }
.shl-search input { flex: 1; min-width: 0; border: 0; background: none; padding: 12px 0; font: 400 1.08rem/1.4 var(--f-sans); color: var(--ink); -webkit-appearance: none; appearance: none; border-radius: 0; }
.shl-search input:focus { outline: none; }
.shl-search:focus-within { border-bottom-color: var(--shu); box-shadow: 0 1px 0 var(--shu); }
.shl-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.shl-chips button { font: 500 .72rem/1 var(--f-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink); background: transparent; border: 0; box-shadow: inset 0 0 0 1px var(--line); padding: 11px 14px; cursor: pointer; display: inline-flex; gap: 8px; align-items: center; }
.shl-chips button i { font-style: normal; color: var(--mute); letter-spacing: .04em; }
.shl-chips button:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.shl-chips button.on { background: var(--ink); color: var(--paper); box-shadow: none; }
.shl-chips button.on i { color: var(--mute-d); }
@media (max-width: 980px) { .shl-tools { top: 84px; } }
@media (max-width: 640px) {
  .shl-tools { position: static; }
  .shl-chips { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--gut-l)) calc(-1 * var(--gut-r)); padding-inline: var(--gut-l) var(--gut-r); scrollbar-width: none; }
  .shl-chips::-webkit-scrollbar { display: none; }
  .shl-chips button { flex: none; }
}
.shl-group { margin-top: clamp(48px, 6vw, 72px); }
.shl-h { font-size: clamp(1.6rem, 3vw, 2.3rem); display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.shl-h span { font: 500 .72rem/1 var(--f-sans); letter-spacing: .22em; text-transform: uppercase; color: var(--mute); }
.shl-grid { margin-top: clamp(24px, 3vw, 36px); display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(28px, 3vw, 40px) clamp(14px, 2vw, 24px); }
@media (max-width: 1100px) { .shl-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 900px) { .shl-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 680px) { .shl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 440px) { .shl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 14px; } }
.shc { display: grid; gap: 12px; align-content: start; text-decoration: none; color: inherit; min-width: 0; }
.shc .sheet { padding: 4%; transition: transform .25s ease, box-shadow .25s ease; }
.shc:hover .sheet { transform: translateY(-4px); box-shadow: 0 1px 0 rgba(22,20,18,.06), 0 26px 36px -22px rgba(22,20,18,.6); }
.shc-t { display: grid; gap: 3px; }
.shc-t b { font: 600 1.05rem/1.3 var(--f-min); }
.shc:hover .shc-t b { color: var(--shu); }
.shc-t > span { font-size: .84rem; color: var(--mute); letter-spacing: .02em; overflow-wrap: anywhere; }
.shc-t .jp { color: var(--ink); font-size: .95rem; }
.shc-tag { font: 500 .62rem/1.3 var(--f-sans); font-style: normal; letter-spacing: .2em; text-transform: uppercase; color: var(--shu); margin-top: 2px; }
.shl-none { margin-top: 48px; color: var(--mute); }
.shl-none button { font: inherit; color: var(--ink); background: none; border: 0; border-bottom: 1px solid currentColor; padding: 0; cursor: pointer; }

/* ---------- 言葉の ページ：上 ---------- */
.sh-hero { background: var(--sumi); color: var(--on-dark); padding-block: clamp(40px, 6vw, 88px) clamp(56px, 8vw, 110px); }
.sh-hero-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.sh-art { display: grid; gap: 18px; justify-items: center; }
.sh-art > .sh-pane { width: min(100%, 440px); }
.sh-view { display: grid; gap: 14px; justify-items: center; }
.sh-paper { width: 100%; padding: 3%; box-shadow: 0 34px 60px -30px rgba(0,0,0,.95); }
.sh-paper img { width: 100%; }
.sh-style, .sh-toggle { display: inline-flex; box-shadow: inset 0 0 0 1px var(--line-d); }
.sh-style button, .sh-toggle button { font: 500 .7rem/1 var(--f-sans); letter-spacing: .18em; text-transform: uppercase; background: none; border: 0; color: var(--mute-d); padding: 12px 16px; cursor: pointer; }
.sh-style button.on, .sh-toggle button.on { background: var(--on-dark); color: var(--ink); }
.sh-copy { display: grid; gap: 22px; align-content: center; min-width: 0; }
.sh-copy .label { margin-bottom: 0; }
.sh-hero h1 { font-size: clamp(2.6rem, 6vw, 5.4rem); line-height: 1.02; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 22px; }
.sh-hero h1 .jp { font-weight: 500; color: var(--mute-d); font-size: .8em; letter-spacing: .06em; }
.sh-ro { display: flex; flex-wrap: wrap; gap: 6px 0; font: 500 .74rem/1.4 var(--f-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--mute-d); }
.sh-ro span + span::before { content: ""; display: inline-block; width: 4px; height: 4px; background: var(--shu); margin: 0 14px; vertical-align: middle; }
.sh-ro span:first-child { text-transform: none; letter-spacing: .06em; font: 500 1.05rem/1.2 var(--f-min); color: var(--on-dark); }
.sh-hero .lede { color: var(--mute-d); max-width: 34em; }
.sh-dl { margin-top: 6px; padding-top: 24px; border-top: 1px solid var(--line-d); display: grid; gap: 14px; }
.sh-dl-h { font: 500 .72rem/1.3 var(--f-sans); letter-spacing: .28em; text-transform: uppercase; color: #E8826B; }
.sh-dl-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.sh-dl-btns .btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sh-dl-btns .btn--line { min-width: 92px; }
.sh-dl-meta, .sh-dl-note { font-size: .84rem; color: var(--mute-d); line-height: 1.6; }
.sh-dl-meta { margin-top: 10px; }
.sh-dl-note { margin-top: -4px; }
@media (max-width: 860px) {
  .sh-hero-in { grid-template-columns: 1fr; }
  .sh-art > .sh-pane { width: min(100%, 360px); }
}

/* ---------- 意味・字 ---------- */
.sh-meaning-in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.sh-meaning h2, .sh-how h2, .sh-practice h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); }
.sh-meaning .body-copy { margin-top: 28px; max-width: 36em; }
.sh-meaning .body-copy b { color: var(--ink); font-weight: 500; }
.sh-lit { font: 500 clamp(1.3rem, 2.4vw, 1.7rem)/1.4 var(--f-min); color: var(--ink) !important; display: grid; gap: 8px; }
.sh-lit span { font: 500 .7rem/1 var(--f-sans); letter-spacing: .28em; text-transform: uppercase; color: var(--shu); }
.sh-ex { font: 400 1.12rem/1.6 var(--f-min); color: var(--ink) !important; }   /* 片側の 線は 使わない（Sana の 決まり） */
.sh-chars { display: grid; gap: 0; border-top: 1px solid var(--line); }
.sh-char { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 18px; align-items: center; padding-block: 18px; border-bottom: 1px solid var(--line); }
.sh-char .k { font-size: 3.4rem; line-height: 1; text-align: center; font-weight: 500; }
.sh-char .m { display: grid; gap: 4px; }
.sh-char .m b { font: 600 1.15rem/1.35 var(--f-min); }
.sh-char .m small { font-size: .8rem; letter-spacing: .04em; color: var(--mute); }
.sh-grade { margin-top: 18px; font-size: .92rem; color: var(--mute); display: flex; gap: 10px; }
.sh-grade::before { content: ""; width: 8px; height: 8px; background: var(--shu); flex: none; margin-top: .55em; }
@media (max-width: 860px) { .sh-meaning-in { grid-template-columns: 1fr; } }

/* ---------- 書き方・書き順 ---------- */
.sh-tips { margin-top: clamp(32px, 5vw, 56px); display: grid; gap: clamp(28px, 4vw, 56px); max-width: 760px; }
.sh-tips.two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); max-width: none; }
.sh-tips h3, .sh-so h3 { font-size: 1.3rem; margin-bottom: 14px; }
.sh-tips ol { list-style: none; margin: 0; padding: 0; counter-reset: t; border-top: 1px solid var(--line); }
.sh-tips li { counter-increment: t; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; padding-block: 16px; border-bottom: 1px solid var(--line); color: var(--mute); }
.sh-tips li::before { content: counter(t); font: 600 1.3rem/1.2 var(--f-min); color: var(--shu); }
@media (max-width: 860px) { .sh-tips.two { grid-template-columns: 1fr; } }
.sh-so { margin-top: clamp(40px, 6vw, 72px); }
.sh-so-note { color: var(--mute); font-size: .92rem; margin-bottom: 18px; }
.so { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.so figure { margin: 0; width: 62px; text-align: center; }
.so figure svg { display: block; width: 62px; height: 62px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }   /* figure の 中だけ（線の もとの 見えない svg が 1コマ目に かぶった） */
.so .g { stroke: rgba(22,20,18,.12); stroke-width: 1; stroke-dasharray: 3 3; fill: none; }
.so use { fill: none; stroke-width: 5.5; stroke-linecap: round; stroke-linejoin: round; }
.so use.a { stroke: var(--ink); }
.so use.b { stroke: rgba(22,20,18,.1); }
.so use.c { stroke: var(--shu); }
.so figcaption { font: 400 .7rem/1.7 var(--f-sans); color: var(--mute); }
@media (max-width: 440px) { .so figure, .so figure svg { width: 52px; } .so figure svg { height: 52px; } }
.sh-credit { font-size: .76rem; color: var(--mute); margin-top: 10px; }
.sh-credit a { color: var(--mute); }

/* ---------- 練習の しかた ---------- */
.sh-steps { list-style: none; margin: clamp(32px, 5vw, 56px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); counter-reset: p; }
.sh-steps li { counter-increment: p; padding: 26px 24px 0 0; display: grid; gap: 8px; align-content: start; }
.sh-steps li + li { padding-left: 24px; border-left: 1px solid var(--line); }
.sh-steps b { font: 600 1.3rem/1.2 var(--f-min); }
.sh-steps b::before { content: counter(p) "  "; color: var(--shu); font: 500 .85rem/1 var(--f-sans); letter-spacing: .1em; }
.sh-steps span { color: var(--mute); font-size: .98rem; }
.sh-terms { margin-top: clamp(32px, 5vw, 48px); font-size: .86rem; color: var(--mute); }
@media (max-width: 760px) {
  .sh-steps { grid-template-columns: 1fr; }
  .sh-steps li, .sh-steps li + li { padding: 20px 0; border-left: 0; border-bottom: 1px solid var(--line); }
}
.sh-more { background: var(--kinari); padding-top: clamp(64px, 9vw, 120px); }
.sh-more-grid { margin-top: clamp(32px, 5vw, 56px); }

/* ---------- メール登録の ダイアログ ---------- */
.gate { border: 0; padding: 0; width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); background: var(--paper); color: var(--ink); box-shadow: 0 40px 80px -30px rgba(0,0,0,.6); overflow: auto; }
.gate::backdrop { background: rgba(15,14,13,.72); }
.gate-in { position: relative; padding: clamp(28px, 5vw, 44px); display: grid; gap: 16px; }
.gate .label { margin-bottom: 0; }
.gate h2 { font-size: clamp(1.7rem, 4vw, 2.3rem); }
.gate-p { color: var(--mute); }
.gate-x { position: absolute; right: 8px; top: 8px; width: 44px; height: 44px; border: 0; background: none; font: 300 1.9rem/1 var(--f-sans); color: var(--mute); cursor: pointer; }
.gate-x:hover { color: var(--ink); }
.gate .cw-form .wpcf7 form { gap: 14px; }
.gate-later { width: 100%; }

/* ローマ字（ā ō ū）：Jost に 形が ないので、ō・ū の ある 字で（11/5） */
.ro { font-family: "Avenir Next", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
.sh-lit .ro, .sh-ro .ro, h1 .ro, h2 .ro, h3 .ro, .sh-ex .ro { font-family: inherit; }
/* 11/5 スマホの 直し：一覧の 上の 絵が 見出しに かぶる・言葉の ページの 半紙が 大きすぎて 題が 下がる・ボタンが 2段に なる */
@media (max-width: 860px) {
  .shh-art { width: min(86%, 380px); height: 58vw; max-height: 320px; margin-bottom: 28px; }
  .shh-art .s1 { transform: rotate(-4deg); top: 8%; }
  .shh-art .s3 { transform: rotate(4deg); top: 10%; }
  .sh-art > .sh-pane { width: min(76%, 300px); }
  .sh-art { gap: 14px; }
}
@media (max-width: 440px) {
  .sh-dl-btns { flex-wrap: nowrap; }
  .sh-dl-btns .btn { padding: 0 16px; letter-spacing: .12em; gap: 10px; }
  .sh-dl-btns .btn--shu { flex: 1 1 auto; }
  .sh-dl-btns .btn--line { min-width: 64px; flex: none; }
  .sh-ro span:nth-child(2) { display: none; }
  .sh-ro span:nth-child(3)::before { margin-left: 14px; }
}
/* 11/5 iPhone SE（320）で ロゴの「by Morita Group」と Notify が かさなった（/calligraphy/ も）→ 350 以下は 2行に。切りかえの ボタンも 1行に おさめる */
@media (max-width: 350px) {
  .l1 { display: grid; gap: 5px; }
  .l1 em { font-size: .8rem; }
  .top .wrap { min-height: 72px; }
}
@media (max-width: 440px) {
  .sh-style button, .sh-toggle button { padding: 12px 11px; letter-spacing: .12em; }
}
/* 11/5 本番の iPhone SE で「US LETTER」が ボタンの 中で 2行に なった */
.sh-size { white-space: nowrap; }
@media (max-width: 350px) {
  .sh-dl-btns .btn { padding: 0 12px; letter-spacing: .08em; font-size: .74rem; gap: 8px; }
  .sh-dl-btns .btn svg { display: none; }
}

/* 11/5 Sana「その字のことのアピールをトップページの上のほうでもしれっと」→ 案 A：見出しの 上の 小さな 札（見本 見本_calligraphy_free_sheets_20261105/top_patterns/） */
.fs-pill { justify-self: start; display: inline-flex; align-items: center; gap: 12px; padding: 8px 14px 8px 8px; margin-bottom: -6px; color: var(--mute-d); text-decoration: none; font-size: .86rem; line-height: 1.3; box-shadow: inset 0 0 0 1px var(--line-d); border-radius: 999px; max-width: 100%; }
.fs-pill b { background: var(--shu); color: #fff; font: 500 .62rem/1 var(--f-sans); letter-spacing: .2em; text-transform: uppercase; padding: 6px 9px; border-radius: 999px; flex: none; }
.fs-pill .jp { color: var(--on-dark); }
.fs-pill em { font-style: normal; color: var(--on-dark); transition: transform .2s; flex: none; }
.fs-pill:hover { color: var(--on-dark); box-shadow: inset 0 0 0 1px var(--mute-d); }
.fs-pill:hover em { transform: translateX(3px); }
@media (max-width: 350px) { .fs-pill { font-size: .8rem; gap: 10px; } .fs-pill .pr { display: none; } }   /* SE で 2行に なった → practice を はぶく */

/* 11/5 Sana「スマホ表示だと、右上でメニューみたいなのを」→ 980px 以下（.nav が 消える 幅）で 右上に メニューの ボタン。
   Sana「右側からスライドで。70％だっけ？こどもスクールのメインのメニューと似た感じで」→ 右から 画面の 約7割（370px 以下は 約9割）・うしろは 暗く（site.css の .drawer と 同じ 形） */
.menu-btn { display: none; }
.mnav { display: none; }
@media (max-width: 980px) {
  .menu-btn { display: inline-grid; place-content: center; gap: 6px; flex: none; width: 44px; height: 44px; padding: 0; background: none; border: 0; border-radius: 0; cursor: pointer; box-shadow: inset 0 0 0 1px var(--mute-d); -webkit-tap-highlight-color: transparent; }
  .menu-btn span { display: block; width: 18px; height: 1.5px; background: var(--on-dark); }
  .top .wrap { gap: 12px; }
  .top .brand { margin-right: auto; }
  .mnav { display: block; position: fixed; inset: 0; z-index: 80; visibility: hidden; transition: visibility 0s linear .3s; }
  .mnav.open { visibility: visible; transition: none; }
  .mnav-shade { position: absolute; inset: 0; background: rgba(0, 0, 0, .6); opacity: 0; transition: opacity .25s ease; }
  .mnav.open .mnav-shade { opacity: 1; }
  .mnav-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 70%); background: var(--sumi-2); color: var(--on-dark); overflow-y: auto; overscroll-behavior: contain; transform: translateX(100%); transition: transform .28s ease; padding: calc(12px + env(safe-area-inset-top, 0px)) 20px calc(32px + env(safe-area-inset-bottom, 0px)); box-shadow: -24px 0 48px -24px rgba(0, 0, 0, .9); }
  .mnav.open .mnav-panel { transform: none; }
  .mnav-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; margin-bottom: 4px; }
  .mnav-h { font: 500 .66rem/1 var(--f-sans); letter-spacing: .28em; text-transform: uppercase; color: var(--mute-d); }
  .mnav-h .jp { letter-spacing: .1em; margin-left: 6px; }
  .mnav-x { flex: none; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 0; background: none; color: var(--on-dark); cursor: pointer; box-shadow: inset 0 0 0 1px var(--mute-d); }
  .mnav-x svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
  .mnav ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-d); }
  .mnav li { border-bottom: 1px solid var(--line-d); }
  .mnav li a { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: baseline; gap: 10px; padding: 15px 0; text-decoration: none; color: var(--on-dark); }
  .mnav .n { font: 500 .62rem/1 var(--f-sans); letter-spacing: .16em; color: #E8826B; }
  .mnav b { font: 600 1.2rem/1.2 var(--f-min); letter-spacing: .01em; }
  .mnav li .jp { color: var(--mute-d); font-size: .8rem; letter-spacing: .08em; }
  .mnav li a:active b, .mnav li a:hover b { color: #fff; }
  .mnav-foot { margin-top: 26px; display: grid; gap: 18px; justify-items: start; }
  .mnav-foot .btn { width: 100%; padding: 0 12px; }
  .mnav-ks { font: 500 .62rem/1.5 var(--f-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--mute-d); text-decoration: none; }
  html.mnav-open, html.mnav-open body { overflow: hidden; }
}
@media (max-width: 370px) { .mnav-panel { width: 88%; } }
@media (prefers-reduced-motion: reduce) { .mnav-panel, .mnav-shade { transition: none; } }
@media (max-width: 440px) { .menu-btn { width: 40px; height: 40px; } .top .wrap { gap: 8px; } }
/* 390 などで「by Morita Group」と Notify が かさなった → 420 以下は ヘッダーの Notify を かくす（メニューの 中に 大きな Notify me が ある） */
@media (max-width: 420px) { .top .wrap > .btn { display: none; } }

/* ---------- 金（11/5 Sana「どこかにゴールドの要素をちょこっと」→ 見本 A＋D「AとDにしようかな」）----------
   朱は 落款の ように 1色だけ の まま。金は「初」の まわりの 金箔（A）と、匠＝豊橋セット・職人の 筆（D＝手作り・特別の しるし）だけ */
:root { --gold: #C6A55E; --gold-l: #E6CC8A; --gold-d: #9B7A3A; --gold-ink: #A8843E;
  --gold-metal: linear-gradient(120deg, #9B7A3A 0%, #E6CC8A 38%, #B8924C 55%, #EFD99C 74%, #A07E3C 100%); }
/* A 金箔 */
.hero-art .kinpaku { position: absolute; inset: 2% -6% 4% 4%; width: 102%; height: 94%; z-index: 0; pointer-events: none; }
.hero-art .hatsu { z-index: 1; }
.hero-art .vert, .hero-art .rakkan { z-index: 2; }
/* D 匠だけ 金 */
.set--gold { box-shadow: inset 0 0 0 1px var(--gold-ink), 0 30px 50px -36px rgba(155, 122, 58, .55); }
.set--gold .big { color: transparent; background: var(--gold-metal); -webkit-background-clip: text; background-clip: text; }
.set .tag--gold { color: var(--gold-d); }
.set--gold .p { color: var(--gold-d); }
.master { border-color: rgba(198, 165, 94, .55); }
.master .soon { background: var(--gold-metal); color: #1A1816; }
.master .p { color: transparent; background: var(--gold-metal); -webkit-background-clip: text; background-clip: text; justify-self: start; }
.master .p small { -webkit-text-fill-color: var(--mute-d); }

/* ---------- 11/6 改善（Sana OK：見本_calligraphy_kaizen_20261106/確認メモ.md） ---------- */
/* 1 reCAPTCHA の バッジは 隠す（かわりに フォームの そばに Google の 文 .cw-rc を 出す） */
.grecaptcha-badge { visibility: hidden !important; }
.cw-rc { margin-top: 10px !important; font-size: .72rem; color: var(--mute); line-height: 1.5; }
.dark .cw-rc, .notify .cw-rc { color: var(--mute-d); }
.cw-rc a { color: inherit; }
/* 4 スマホの トップ：初を 少し 小さく → 札と 見出しが 最初の 画面に（案 A） */
@media (max-width: 860px) {
  .hero-art { height: min(58vw, 290px); }
  .hero-art .hatsu { width: min(72vw, 350px); right: -4%; }
  .hero-art .vert { font-size: .78rem; }
  .hero-art .rakkan { width: 44px; height: 44px; }
  .hero-main { gap: 28px; }
}
/* 5 一覧：スマホでも 検索と 絞りこみを 上に 残す */
@media (max-width: 640px) {
  .shl-tools { position: sticky; top: 57px; padding-block: 10px 12px; gap: 10px; box-shadow: 0 14px 18px -16px rgba(26,24,22,.28); }
  .shl-search input { font-size: 1rem; }
}
/* 8・11 言葉の ページ：Pinterest に 保存・日本語の ページ */
.sh-links { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 14px; }
.sh-pin, .sh-ja { display: inline-flex; align-items: center; gap: 9px; font: 500 .72rem/1 var(--f-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--mute-d); text-decoration: none; }
.sh-pin svg { width: 18px; height: 18px; fill: currentColor; }
.sh-ja .jp { text-transform: none; letter-spacing: .1em; font-size: .9rem; }
.sh-pin:hover, .sh-ja:hover { color: var(--on-dark); }
/* 10 意味の 見出しの 下の 一文 */
.sh-kind { margin-top: 14px; color: var(--mute); font-size: 1.02rem; }
/* 6 練習の しかたの 下に もう一度 ダウンロード */
.sh-again { margin-top: clamp(32px, 5vw, 56px); padding-top: clamp(24px, 4vw, 36px); border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 18px 32px; }
.sh-again > div:first-child { display: grid; gap: 6px; }
.sh-again b { font: 600 1.5rem/1.2 var(--f-min); }
.sh-again b .jp { font-weight: 500; letter-spacing: .06em; }
.sh-again > div:first-child span { color: var(--mute); font-size: .92rem; }
.sh-again .sh-dl-btns { margin: 0; }
/* 7 いちばん下の 帯：本（Amazon） */
.closing .wrap.cw-close-book { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: clamp(28px, 5vw, 56px); align-items: center; }
.cw-close-book .bk img { display: block; width: 100%; height: auto; box-shadow: 0 30px 50px -24px rgba(0,0,0,.9); }
.cw-close-book .hero-cta { margin-top: 26px; }
.cw-close-book p i { font-style: italic; }
.cw-close-note { margin-top: 18px !important; font-size: .88rem; color: var(--mute-d); }
.cw-close-note a { color: inherit; }
@media (max-width: 760px) { .closing .wrap.cw-close-book { grid-template-columns: 104px minmax(0, 1fr); gap: 20px; align-items: start; } .cw-close-book .hero-cta { margin-top: 20px; } }
@media (max-width: 360px) { .closing .wrap.cw-close-book { grid-template-columns: 1fr; } .cw-close-book .bk { width: 96px; } }

/* ==========================================================================
   入門ガイド /calligraphy/learn/（2026-11-06 Sana「まず、入門ガイドからいきたいな」）
   本「Japanese Calligraphy for Beginners」の 20章＋用語集＋チェックリスト。inc/calligraphy-learn.php・setup/learn/
   読む ページなので、本文は 細い 1列（約 720px）、PC では 左に 目次を 固定。箱の 片側の 線は 使わない（Sana の 決まり）。
   ========================================================================== */
/* ---------- レッスンの 上 ---------- */
.ln-hero { padding-block: clamp(40px, 6vw, 80px) clamp(40px, 6vw, 72px); }
.ln-hero-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; max-width: 880px; }   /* minmax(0,1fr)：中身が 幅を 押し広げない（11/6 本番の iPhone で 上の 文が 右で 切れた） */
.ln-hero .label { margin: 0; }
.ln-hero .label { flex-wrap: wrap; row-gap: 8px; }
.ln-hero .label .w { white-space: nowrap; }
.ln-hero h1 { font-size: clamp(2.1rem, 4.6vw, 3.9rem); line-height: 1.08; }
.ln-hero .lede { color: var(--mute); max-width: 40em; font-size: 1.12rem; }
.ln-meta { display: flex; flex-wrap: wrap; gap: 6px 0; font: 500 .72rem/1.4 var(--f-sans); letter-spacing: .22em; text-transform: uppercase; color: var(--mute); }
.ln-meta span + span::before { content: ""; display: inline-block; width: 4px; height: 4px; background: var(--shu); margin: 0 14px; vertical-align: middle; }

/* ---------- 本文と 目次 ---------- */
.ln-body { padding-block: clamp(40px, 6vw, 80px) clamp(64px, 9vw, 120px); }
.ln-grid { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.ln-side { position: sticky; top: 24px; max-height: calc(100vh - 48px); overflow: auto; padding-right: 8px; }
.ln-toc-m { display: none; }
.ln-toc-part + .ln-toc-part { margin-top: 22px; }
.ln-toc-h { font: 500 .66rem/1.4 var(--f-sans); letter-spacing: .22em; text-transform: uppercase; color: var(--mute); margin-bottom: 6px; }
.ln-toc ol { list-style: none; margin: 0; padding: 0; }
.ln-toc li a { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 8px; padding: 6px 0; font-size: .9rem; line-height: 1.4; text-decoration: none; color: var(--mute); }
.ln-toc li a:hover { color: var(--ink); }
.ln-toc li.on a { color: var(--ink); font-weight: 500; }
.ln-toc li a .n { font: 500 .72rem/1.65 var(--f-sans); letter-spacing: .08em; }
.ln-toc li.on a .n { color: var(--shu); }
.ln-main { min-width: 0; max-width: 720px; }
.ln-article { font-size: 1.0625rem; line-height: 1.8; color: var(--ink); }
.ln-article > * + * { margin-top: 1.1em; }
.ln-article h2 { font-size: clamp(1.5rem, 2.6vw, 1.9rem); line-height: 1.25; margin-top: 2em; }
.ln-article h3 { font-size: 1.2rem; margin-top: 1.6em; }
.ln-article h2 + *, .ln-article h3 + * { margin-top: .7em; }
.ln-article strong { font-weight: 500; }
.ln-article a { color: var(--shu); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.ln-article ul, .ln-article ol { padding-left: 1.3em; margin: 0; }
.ln-article li + li { margin-top: .45em; }
.ln-article ol.principles li + li { margin-top: .8em; }
.ln-article figure { margin: 1.8em 0; }
.ln-article figure img { width: 100%; background: #fff; }
.ln-article figure.half { max-width: 440px; }
.ln-article figure img { width: auto; max-width: 100%; max-height: 600px; margin-inline: auto; }   /* 縦長の お手本・作品は 高さで 止める */
.ln-article figure.wide img { width: 100%; max-height: none; }
.ln-article figure.photo img, .ln-article figure.work img { max-height: 560px; }
.ln-article figcaption { font-size: .84rem; color: var(--mute); margin-top: 10px; line-height: 1.5; }
.ln-article .photorow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ln-article .photorow figure { margin: 0; }
.ln-article .photorow img { width: 100%; max-height: none; }
.ln-article .note { background: var(--kinari); padding: 20px 24px; margin: 1.6em 0; }
.ln-article .note-title { font: 500 .68rem/1.3 var(--f-sans); letter-spacing: .26em; text-transform: uppercase; color: var(--shu); margin-bottom: 8px; }
.ln-article .note p + p { margin-top: .6em; }
.ln-article table { width: 100%; border-collapse: collapse; font-size: .95rem; line-height: 1.5; }
.ln-article th { text-align: left; font: 500 .68rem/1.4 var(--f-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--mute); border-bottom: 1px solid var(--ink); padding: 8px 12px 8px 0; }
.ln-article td { border-bottom: 1px solid var(--line); padding: 10px 12px 10px 0; vertical-align: top; }
.ln-article table.glossary td:nth-child(2) { font-family: var(--f-min); white-space: nowrap; }
.ln-article table.scripts td:first-child { min-width: 7.5em; }
.ln-article .ja-s, .ln-article .ja-big { font-family: var(--f-min); }
.ln-article .ja-big { font-size: 1.5em; font-weight: 500; }
.ln-article .charcard { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: 24px; padding-top: 1.4em; border-top: 1px solid var(--line); margin-top: 2em; }
.ln-article .charcard figure { margin: 0; }
.ln-article .charcard img { width: 100%; outline: 1px solid var(--line); }
.ln-article .charinfo h3 { margin-top: 0; }
.ln-article .strokes { font: 500 .7rem/1.4 var(--f-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--mute); margin-top: 6px; }
.ln-article .charinfo ol { margin-top: .6em; }
.ln-article .tip { margin-top: .8em; }
.ln-article .url a { color: var(--ink); font-weight: 500; }
.ln-article dl { margin: 0; }
.ln-article dl.qa dt { font: 600 1.15rem/1.4 var(--f-min); margin-top: 1.4em; }
.ln-article dl.qa dd { margin: .4em 0 0; }
.ln-article .checklist { list-style: none; padding: 0; }
.ln-article .checklist li { margin: 0; padding: 10px 0 10px 34px; border-bottom: 1px solid var(--line); position: relative; }
.ln-article .checklist li::before { content: ""; position: absolute; left: 0; top: 16px; width: 16px; height: 16px; box-shadow: inset 0 0 0 1px var(--ink); }
.ln-article .closing { font: 400 1.2rem/1.6 var(--f-min); }
.ln-w16 { margin: 1em 0 2em; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ln-article .ln-w16 a { color: inherit; text-decoration: none; }

/* ---------- 下：練習へ・前後 ---------- */
.ln-practice { margin-top: clamp(40px, 6vw, 64px); padding: clamp(24px, 4vw, 36px); background: var(--sumi); color: var(--on-dark); display: grid; gap: 14px; }
.ln-practice .label { color: #E8826B; margin: 0; }
.ln-practice h2 { font-size: 1.5rem; }
.ln-practice p { color: var(--mute-d); max-width: 36em; }
.ln-practice .actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.ln-practice .btn--line { color: var(--on-dark); box-shadow: inset 0 0 0 1px var(--mute-d); }
.ln-practice .btn--line:hover { background: var(--on-dark); color: var(--ink); }
.ln-pn { margin-top: clamp(32px, 5vw, 48px); display: grid; grid-template-columns: 1fr 1fr; gap: 16px; border-top: 1px solid var(--line); padding-top: 24px; }
.ln-pn a { display: grid; gap: 6px; text-decoration: none; align-content: start; }
.ln-pn a span { font: 500 .66rem/1.4 var(--f-sans); letter-spacing: .24em; text-transform: uppercase; color: var(--mute); }
.ln-pn a b { font: 600 1.1rem/1.35 var(--f-min); }
.ln-pn a:hover b { color: var(--shu); }
.ln-pn .next { text-align: right; }
.ln-pn .next:only-child { grid-column: 2; }

/* ---------- 一覧 /calligraphy/learn/ ---------- */
.ln-hub-hero { padding-bottom: clamp(56px, 8vw, 110px); }
.ln-hub-in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(32px, 6vw, 96px); align-items: end; }
.ln-hub-hero .hero-copy { max-width: 720px; }
.ln-hub-facts { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--line-d); }
.ln-hub-facts li { display: grid; gap: 4px; padding: 16px 0; border-bottom: 1px solid var(--line-d); }
.ln-hub-facts b { font: 600 1.1rem/1.3 var(--f-min); }
.ln-hub-facts span { font-size: .9rem; color: var(--mute-d); line-height: 1.5; }
.ln-hub { padding-block: clamp(56px, 8vw, 110px); }
.ln-parts { display: grid; gap: clamp(40px, 6vw, 72px); }
.ln-part { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 4vw, 64px); align-items: start; padding-top: 32px; border-top: 1px solid var(--ink); }
.ln-part-h .label { margin-bottom: 14px; }
.ln-part-h h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); }
.ln-part-h p { margin-top: 12px; color: var(--mute); max-width: 24em; }
.ln-list { list-style: none; margin: 0; padding: 0; }
.ln-list li { border-bottom: 1px solid var(--line); }
.ln-list a { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 16px; align-items: baseline; padding: 16px 0; text-decoration: none; }
.ln-list .n { font: 500 .8rem/1.6 var(--f-sans); letter-spacing: .1em; color: var(--shu); }
.ln-list b { font: 600 1.15rem/1.35 var(--f-min); display: block; }
.ln-list .s { display: block; font-size: .9rem; color: var(--mute); margin-top: 4px; line-height: 1.5; }
.ln-list .m { font: 500 .66rem/1.6 var(--f-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--mute); white-space: nowrap; }
.ln-list a:hover b { color: var(--shu); }
.ln-how-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); }
.ln-how h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
.ln-how .body-copy { max-width: 40em; }
.ln-how-note { font-size: .92rem; }
.ln-how .body-copy a { color: var(--ink); }

@media (max-width: 980px) {
  .ln-grid { grid-template-columns: 1fr; }
  .ln-side { display: none; }
  .ln-toc-m { display: block; margin-bottom: 28px; box-shadow: inset 0 0 0 1px var(--line); padding: 0 16px; }
  .ln-toc-m summary { cursor: pointer; padding: 14px 0; font: 500 .74rem/1.4 var(--f-sans); letter-spacing: .22em; text-transform: uppercase; list-style: none; display: flex; justify-content: space-between; }
  .ln-toc-m summary::-webkit-details-marker { display: none; }
  .ln-toc-m[open] summary { border-bottom: 1px solid var(--line); margin-bottom: 12px; }
  .ln-toc-m .ln-toc { padding-bottom: 12px; }
  .ln-hub-in, .ln-part, .ln-how-in { grid-template-columns: 1fr; }
  .ln-hub-in { align-items: start; }
}
@media (max-width: 640px) {
  .ln-article .charcard { grid-template-columns: 1fr; }
  .ln-article .charcard figure { max-width: 240px; }
  .ln-article .photorow { grid-template-columns: 1fr 1fr; }
  .ln-article table { font-size: .95rem; }
  .ln-article table.scripts, .ln-article table.glossary, .ln-article table.scripts tbody, .ln-article table.glossary tbody, .ln-article table.scripts tr, .ln-article table.glossary tr { display: block; }
  .ln-article table.scripts thead, .ln-article table.glossary thead { display: none; }
  .ln-article table.scripts tr, .ln-article table.glossary tr { padding: 14px 0; border-bottom: 1px solid var(--line); }
  .ln-article table.scripts td, .ln-article table.glossary td { display: block; border: 0; padding: 0; }
  .ln-article table.scripts td:first-child { margin-bottom: 8px; }
  .ln-article table.scripts td:first-child br { display: none; }
  .ln-article table.scripts td:first-child strong { font: 600 1.1rem/1.4 var(--f-min); }
  .ln-article table.scripts td:first-child .ja-s { margin: 0 8px; }
  .ln-article table.scripts td + td { margin-top: 6px; }
  .ln-article table.scripts td:last-child { color: var(--mute); }
  .ln-article table.glossary td { display: inline; }
  .ln-article table.glossary td:first-child { font-weight: 500; }
  .ln-article table.glossary td:nth-child(2)::before { content: " "; }
  .ln-article table.glossary td:nth-child(3) { color: var(--mute); }
  .ln-article table.glossary td:nth-child(3)::before { content: "\00a0\00b7\00a0"; }
  .ln-article table.glossary td:last-child { display: block; margin-top: 4px; color: var(--ink); }
  .ln-pn { grid-template-columns: 1fr; }
  .ln-pn .next { text-align: left; }
  .ln-pn .next:only-child { grid-column: 1; }
  .ln-list a { grid-template-columns: 36px minmax(0, 1fr); }
  .ln-list .m { grid-column: 2; }
  .ln-w16 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- 入門ガイド：Web 向けの 部品（11/6 夜 Sana「だめだな。もっとウェブサイト向けの よりわかりやすくて 良い内容に」） ----------
   本の 段落を そのまま 置かず、In short（答えを 先に）・番号つきの 手順・2つの 比べ・Check yourself・Our teachers say・Common mistakes・
   八つの 動きの カード・Try it・Questions に 組みなおす。片側だけの 色の 線は 使わない。 */
.ln-label { font: 500 .66rem/1.3 var(--f-sans); letter-spacing: .26em; text-transform: uppercase; color: var(--shu); margin: 0 0 10px; }
.ln-short { background: var(--kinari); padding: 22px 24px 24px; }
.ln-short ul { margin: 0; padding-left: 1.15em; }
.ln-short li + li { margin-top: .5em; }
.ln-need { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ln-need li { margin: 0; font: 500 .78rem/1.3 var(--f-sans); letter-spacing: .06em; padding: 9px 14px; box-shadow: inset 0 0 0 1px var(--line); background: #fff; }
.ln-steps { list-style: none; padding: 0; counter-reset: s; border-top: 1px solid var(--line); }
.ln-steps > li { counter-increment: s; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 4px 16px; padding: 18px 0; margin: 0; border-bottom: 1px solid var(--line); }
.ln-steps > li::before { content: counter(s, decimal-leading-zero); font: 500 1.35rem/1 var(--f-min); color: var(--shu); padding-top: 3px; grid-column: 1; grid-row: 1 / -1; }
.ln-steps > li > * { grid-column: 2; margin-left: 0; }
.ln-steps b { display: block; font: 600 1.12rem/1.35 var(--f-min); }
.ln-steps p { margin-top: 5px; color: var(--mute); font-size: .98rem; }
.ln-steps figure { grid-column: 2; margin: 14px 0 0; }
.ln-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ln-two > div { background: #fff; padding: 20px 22px; box-shadow: inset 0 0 0 1px var(--line); }
.ln-two-h { font: 600 1.1rem/1.4 var(--f-min); margin-bottom: 8px; }
.ln-two-h .jp { font-weight: 500; margin-left: 6px; }
.ln-two-h em { font: 400 .92rem/1 var(--f-sans); color: var(--mute); margin-left: 6px; }
.ln-two p + p { margin-top: .6em; font-size: .98rem; }
.ln-two figure { margin: 12px 0 0; }   /* 対の 中の 図（五つの 書体の 楷書/行書）は 余白 小さめ */
.ln-two figure img { width: 100%; }
.ln-check { list-style: none; padding: 0; border-top: 1px solid var(--line); }
.ln-check li { margin: 0; padding: 11px 0 11px 36px; border-bottom: 1px solid var(--line); position: relative; }
.ln-check li::before { content: "\2713"; position: absolute; left: 0; top: 11px; width: 20px; height: 20px; box-shadow: inset 0 0 0 1px var(--ink); font: 500 .8rem/20px var(--f-sans); text-align: center; color: var(--shu); }
.ln-say { background: var(--sumi); color: var(--on-dark); padding: 24px 26px 26px; }
.ln-say .ln-label { color: #E8826B; }
.ln-say p { font: 400 1.12rem/1.65 var(--f-min); }
.ln-say p + p { margin-top: .6em; }
.ln-mist { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ln-mist > div { padding: 16px 18px 18px; box-shadow: inset 0 0 0 1px var(--line); margin: 0; }
.ln-mist > div > span { display: block; font: 500 .64rem/1 var(--f-sans); letter-spacing: .24em; text-transform: uppercase; margin-bottom: 8px; }
.ln-mist .x { background: var(--kinari); }
.ln-mist .x > span { color: var(--mute); }
.ln-mist .o { background: #fff; }
.ln-mist .o > span { color: var(--shu); }
.ln-mist p { font-size: .98rem; }
.ln-strokes { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ln-strokes > li { margin: 0; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; align-items: start; padding: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.ln-strokes img { width: 100%; }
.ln-strokes i { display: block; font: 500 .64rem/1.4 var(--f-sans); letter-spacing: .22em; text-transform: uppercase; color: var(--shu); font-style: normal; }
.ln-strokes b { display: block; font: 600 1.08rem/1.3 var(--f-min); margin-top: 2px; }
.ln-strokes b .jp { font-weight: 500; margin-left: 4px; }
.ln-strokes p { font-size: .92rem; line-height: 1.6; margin-top: 6px; }
.ln-strokes .see { display: block; margin-top: 6px; font-size: .84rem; color: var(--mute); }
.ln-try { background: var(--sumi); color: var(--on-dark); padding: clamp(24px, 4vw, 36px); display: grid; gap: 12px; }
.ln-try .ln-label { color: #E8826B; margin: 0; }
.ln-try h2 { margin: 0; font-size: 1.5rem; }
.ln-try p { color: var(--mute-d); max-width: 36em; }
.ln-try .actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.ln-try .btn--line { color: var(--on-dark); box-shadow: inset 0 0 0 1px var(--mute-d); }
.ln-try .btn--line:hover { background: var(--on-dark); color: var(--ink); }
.ln-faq { border-top: 1px solid var(--line); }
.ln-faq details { border-bottom: 1px solid var(--line); }
.ln-faq summary { list-style: none; cursor: pointer; padding: 18px 0; display: grid; grid-template-columns: minmax(0, 1fr) 20px; gap: 16px; align-items: center; font: 600 1.08rem/1.45 var(--f-min); }
.ln-faq summary::-webkit-details-marker { display: none; }
.ln-faq summary::after { content: "+"; font: 400 1.4rem/1 var(--f-sans); color: var(--shu); text-align: center; }
.ln-faq details[open] summary::after { content: "\2212"; }
.ln-faq details p { padding: 0 0 18px; color: var(--mute); font-size: .98rem; }
@media (max-width: 640px) {
  .ln-two, .ln-mist, .ln-strokes { grid-template-columns: 1fr; }
  .ln-strokes > li { grid-template-columns: 96px minmax(0, 1fr); }
  .ln-steps > li { grid-template-columns: 40px minmax(0, 1fr); }
}
/* 11/6 夜 Sana「どうやって座るかとか、持つかは本当の持った感じがみたいな。ダメなパターンも合わせて」→ 写真の ✓／✗ の 対（.ln-pairs）。写真は 先生の 手元を 撮ってから 入れる（それまで 仮の 枠 .ph） */
.ln-pairs { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.ln-pairs li { margin: 0; display: grid; gap: 10px; align-content: start; }
.ln-pairs li > span { font: 500 .66rem/1 var(--f-sans); letter-spacing: .24em; text-transform: uppercase; display: flex; align-items: center; gap: 10px; }
.ln-pairs li > span::before { content: "\2713"; width: 20px; height: 20px; display: inline-grid; place-items: center; background: var(--shu); color: #fff; font-size: .8rem; letter-spacing: 0; }
.ln-pairs li.x > span { color: var(--mute); }
.ln-pairs li.x > span::before { content: "\2717"; background: var(--mute); }
.ln-pairs img, .ln-pairs .ph { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.ln-pairs .ph { display: grid; place-items: center; text-align: center; padding: 16px; box-shadow: inset 0 0 0 1px var(--line); background: repeating-linear-gradient(135deg, #fff 0 10px, var(--kinari) 10px 20px); font: 400 .82rem/1.5 var(--f-sans); color: var(--mute); }
.ln-pairs p { font-size: .95rem; line-height: 1.55; }
.ln-pairs li.x img { filter: grayscale(1); }
.ln-article .ln-steps > li, .ln-article .ln-strokes > li, .ln-article .ln-pairs li, .ln-article .ln-mist > div { margin-top: 0; }   /* .ln-article li + li の margin を 打ち消す */
@media (max-width: 420px) { .ln-pairs { gap: 12px; } .ln-pairs p { font-size: .9rem; } }
/* 11/6 夜 歴史の 年表（.ln-timeline）と 写真の クレジット（.credit）：Discover の ページ用 */
.ln-timeline { list-style: none; padding: 0; border-top: 1px solid var(--line); }
.ln-timeline > li { margin: 0; display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 6px 20px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.ln-timeline .when { grid-row: 1 / -1; font: 500 .72rem/1.6 var(--f-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--shu); padding-top: 4px; }
.ln-timeline > li > * { grid-column: 2; margin-left: 0; }
.ln-timeline > li > .when { grid-column: 1; }
.ln-timeline b { display: block; font: 600 1.15rem/1.35 var(--f-min); }
.ln-timeline p { margin-top: 6px; font-size: .98rem; }
.ln-timeline figure { margin: 14px 0 0; }
.ln-article .credit { font-size: .76rem; color: var(--mute); letter-spacing: .02em; }
.ln-article figcaption .credit { display: block; margin-top: 4px; }
.ln-article .ln-timeline > li { margin-top: 0; }
@media (max-width: 640px) { .ln-timeline > li { grid-template-columns: 1fr; } .ln-timeline .when { grid-row: auto; } .ln-timeline > li > * { grid-column: 1; } }

/* ==========================================================================
   日本地図の ガイド /calligraphy/map/（2026-11-06 Sana「Bでいくわ」「map に する」・inc/calligraphy-map.php・js/calligraphy-map.js）。接頭語 jm-
   見本＝サイトリニューアル/見本_calligraphy_japan_map_20261106/template.html と 同じ
   地図は 公有の Natural Earth から 作った SVG。点は HTML の button（幅が 狭くても 同じ 大きさ・押しやすい）。
   選んだ 場所は 右（PC）か 下から 出る 札（スマホ）に。箱の 片側の 線は 使わない。
   ========================================================================== */
.jm-hero { padding-bottom: clamp(48px, 8vw, 110px); }   /* 2026-11-07 Sana「黒い部分と白い部分のギリギリ」：下の 余白を 工房の ページと 同じに */
.jm-hero-in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(32px, 6vw, 96px); align-items: end; }
.jm-hero-facts { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--line-d); }
.jm-hero-facts li { display: grid; gap: 4px; padding: 16px 0; border-bottom: 1px solid var(--line-d); }
.jm-hero-facts b { font: 600 1.1rem/1.3 var(--f-min); }
.jm-hero-facts b .jp { font-weight: 500; color: var(--mute-d); margin-left: .5em; font-size: .92em; }
.jm-hero-facts span { font-size: .9rem; color: var(--mute-d); line-height: 1.5; }
@media (max-width: 900px) { .jm-hero-in { grid-template-columns: 1fr; align-items: start; } }

.jm-map-band { padding-block: clamp(48px, 7vw, 96px) clamp(64px, 9vw, 120px); }
.jm-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 80px); align-items: end; }
.jm-head h2 { font-size: clamp(2rem, 4.2vw, 3.2rem); }
.jm-head .lede { max-width: 30em; }
@media (max-width: 760px) { .jm-head { grid-template-columns: 1fr; } }
.jm-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: clamp(24px, 4vw, 40px) 0 clamp(20px, 3vw, 32px); }
.jm-chip { font: 500 .68rem/1 var(--f-sans); letter-spacing: .2em; text-transform: uppercase; padding: 11px 14px; background: none; border: 0; border-radius: 0; box-shadow: inset 0 0 0 1px var(--line); color: var(--mute); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.jm-chip:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.jm-chip.is-on { background: var(--ink); color: var(--paper); box-shadow: none; }
.jm-chip .c { font-family: var(--f-min); letter-spacing: 0; margin-left: 6px; opacity: .7; }

.jm-stage { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.jm-mapwrap { position: relative; min-width: 0; }
.jm-stage > * { min-width: 0; }
.jm-strip { max-width: 100%; }
.jm-hint { font: 500 .68rem/1.4 var(--f-sans); letter-spacing: .24em; text-transform: uppercase; color: var(--mute); margin-bottom: 14px; display: flex; gap: 12px; align-items: center; }
.jm-hint::before { content: ""; width: 10px; height: 10px; background: var(--shu); flex: none; }
.jm-map { position: relative; }
.jm-map svg.jm-base { width: 100%; height: auto; display: block; }
.jm-pref { fill: #E7E1D4; stroke: var(--paper); stroke-width: 1.1; stroke-linejoin: round; transition: fill .2s ease; }
.jm-pref.has { fill: #DED7C7; }
.jm-pref.is-hot { fill: #E3CFC4; }
.jm-ripple { fill: none; stroke: var(--ink); stroke-linejoin: round; }
.jm-ripple.r1 { stroke-width: 26; opacity: .035; }
.jm-ripple.r2 { stroke-width: 13; opacity: .05; }
.jm-ripple.r3 { stroke-width: 4; opacity: .09; }
.jm-okibox { fill: none; stroke: var(--mute-d); stroke-width: 1; }
.jm-okitext { font: 500 10px var(--f-sans); letter-spacing: .14em; text-transform: uppercase; fill: var(--mute); }
.jm-sea { font: 300 11px var(--f-sans); letter-spacing: .42em; fill: var(--mute-d); }
.jm-reg { font: 500 9.5px var(--f-sans); letter-spacing: .3em; fill: var(--mute); opacity: .75; }
.jm-ct-jp { font: 500 28px var(--f-min); letter-spacing: .2em; fill: var(--ink); }
.jm-ct-seal { fill: var(--shu); }
.jm-ct-sealtxt { font: 700 22px var(--f-min); fill: #fff; }
.jm-ct-en { font: 500 10px var(--f-sans); letter-spacing: .32em; fill: var(--ink); }
.jm-ct-en2 { font: 400 8.5px var(--f-sans); letter-spacing: .16em; fill: var(--mute); }
.jm-leaders { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.jm-leaders line { stroke: var(--ink); stroke-width: 1; opacity: .55; }
.jm-leaders circle { fill: var(--ink); }
.jm-leaders .route { fill: none; stroke: var(--ink); stroke-width: 1.2; stroke-dasharray: 1.5 5; stroke-linecap: round; opacity: .38; }
/* 写真の 札：小さな 白黒写真＋番号。選ぶと 朱の 枠。名前は まわりが すいている ものは 常に、ほかは 触った ときと 選んだ とき */
.jm-mk { position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; padding: 0; border: 0; border-radius: 0; cursor: pointer; background: var(--paper); box-shadow: 0 0 0 1px var(--ink), 0 6px 10px -6px rgba(22,20,18,.5); -webkit-tap-highlight-color: transparent; transition: transform .15s ease, box-shadow .15s ease; z-index: 2; }
.jm-mk .th { position: absolute; inset: 2px; width: calc(100% - 4px); height: calc(100% - 4px); object-fit: cover; filter: grayscale(1) contrast(1.05); display: block; max-width: none; }
.jm-mk .th-none { background: var(--kinari); }
.jm-mk .n { position: absolute; left: -5px; top: -6px; min-width: 20px; height: 16px; padding: 0 3px; background: var(--ink); color: var(--paper); font: 500 .58rem/16px var(--f-sans); letter-spacing: .06em; z-index: 2; text-align: center; }
.jm-mk.is-home .n { background: var(--shu); }
.jm-mk:hover { z-index: 4; transform: scale(1.08); }
.jm-mk.is-on { z-index: 3; transform: scale(1.14); box-shadow: 0 0 0 1px var(--paper), 0 0 0 3px var(--shu), 0 10px 16px -8px rgba(22,20,18,.6); }
.jm-mk.is-on .n { background: var(--shu); }
.jm-mk[hidden] { display: none; }
.jm-mk .t { display: none; position: absolute; left: calc(100% + 9px); top: 50%; transform: translateY(-50%); white-space: nowrap; background: var(--ink); color: var(--paper); font: 500 .62rem/1 var(--f-sans); letter-spacing: .14em; text-transform: uppercase; padding: 7px 9px; pointer-events: none; }
.jm-mk .t i { font-style: normal; color: #E8826B; margin-left: .6em; letter-spacing: .1em; }
.jm-mk.t-left .t { left: auto; right: calc(100% + 9px); }
.jm-mk.lbl .t, .jm-mk.is-on .t { display: block; }
.jm-mk.is-on .t { background: var(--shu); color: #fff; }
.jm-mk.is-on .t i { color: #fff; opacity: .8; }
@media (hover: hover) { .jm-mk:hover .t, .jm-mk:focus-visible .t { display: block; } }
.jm-mk:focus-visible { outline: 2px solid var(--shu); outline-offset: 3px; }
.jm-mk.is-on:focus-visible { outline-color: var(--ink); }
@media (max-width: 900px) {
  .jm-mk { width: 40px; height: 40px; margin: -20px 0 0 -20px; }
  .jm-mk.lbl .t { display: none; }       /* 狭い 幅では 選んだ ものだけ 名前・札の 下に */
  .jm-mk.is-on .t { display: block; left: 50%; right: auto; top: calc(100% + 8px); transform: translateX(-50%); white-space: normal; text-align: center; max-width: 150px; width: max-content; line-height: 1.35; }
  .jm-mk.is-on.t-l .t { left: -4px; transform: none; text-align: left; }
  .jm-mk.is-on.t-r .t { left: auto; right: -4px; transform: none; text-align: right; }
}
@media (max-width: 640px) {
  .jm-mk { width: 32px; height: 32px; margin: -16px 0 0 -16px; }
  .jm-mk.is-on .t { display: none; }   /* スマホでは 名前は 下から 出る 札に */
  .jm-mk .n { min-width: 18px; height: 14px; font-size: .52rem; line-height: 14px; left: -4px; top: -5px; }
  .jm-mk .t { font-size: .56rem; padding: 6px 7px; }
  .jm-sea { font-size: 13px; } .jm-reg { font-size: 11px; }
}
@media (max-width: 360px) {
  .jm-mk { width: 28px; height: 28px; margin: -14px 0 0 -14px; }
  .jm-mk .n { min-width: 16px; height: 13px; font-size: .48rem; line-height: 13px; }
  .jm-ct-jp { font-size: 32px; } .jm-ct-en { font-size: 11px; } .jm-ct-en2 { font-size: 10px; }
}

/* ---------- 案A：地方で 拡大（ズーム）。こみ合う ところは 束（写真を 重ねた 札＋数）。押すと その 地方に 寄る ---------- */
.jm-cl { position: absolute; width: 52px; height: 52px; margin: -26px 0 0 -26px; padding: 0; border: 0; border-radius: 0; background: none; cursor: pointer; z-index: 2; -webkit-tap-highlight-color: transparent; }
.jm-cl .st { position: absolute; inset: 0; background: var(--paper); box-shadow: 0 0 0 1px var(--ink), 0 6px 10px -6px rgba(22,20,18,.5); overflow: hidden; transition: transform .15s ease; }
.jm-cl .st img { width: calc(100% - 4px); height: calc(100% - 4px); margin: 2px; object-fit: cover; filter: grayscale(1) contrast(1.05); display: block; max-width: none; }
.jm-cl .st.s2 { transform: translate(6px, -6px) rotate(3deg); }
.jm-cl .st.s3 { transform: translate(12px, -12px) rotate(6deg); }
.jm-cl .c { display: none; }
.jm-cl .t { position: absolute; left: -8px; top: -10px; white-space: nowrap; background: var(--shu); color: #fff; font: 600 .62rem/1 var(--f-sans); letter-spacing: .16em; text-transform: uppercase; padding: 7px 9px; pointer-events: none; z-index: 3; }
.jm-cl .t i { font-style: normal; color: #fff; opacity: .85; margin-left: .5em; letter-spacing: .08em; }
.jm-cl.t-left .t { left: auto; right: -8px; }
.jm-cl:hover .st.s1 { transform: scale(1.05); }
.jm-cl:hover .t { background: var(--ink); }
.jm-map.is-zoomed .jm-sea, .jm-map.is-zoomed .jm-reg, .jm-map.is-zoomed .jm-cartouche, .jm-map.is-zoomed .jm-okibox, .jm-map.is-zoomed .jm-okitext { display: none; }
.jm-cl[hidden] { display: none; }
.jm-back { position: absolute; left: 0; top: 0; z-index: 6; min-height: 38px; padding: 0 14px; font-size: .66rem; letter-spacing: .16em; background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.jm-back:hover { background: var(--ink); color: var(--paper); }
.jm-back[hidden] { display: none; }
.jm-mk, .jm-cl { transition: opacity .25s ease, transform .15s ease, box-shadow .15s ease; }
.jm-map.is-moving .jm-mk, .jm-map.is-moving .jm-cl { opacity: 0; pointer-events: none; }
.jm-zoomname { position: absolute; right: 0; top: 0; z-index: 6; font: 500 .66rem/1.4 var(--f-sans); letter-spacing: .24em; text-transform: uppercase; color: var(--mute); padding: 10px 0; display: none; }
.jm-map.is-zoomed .jm-zoomname { display: block; }
@media (max-width: 640px) { .jm-cl { width: 40px; height: 40px; margin: -20px 0 0 -20px; } .jm-cl .t { font-size: .54rem; padding: 6px 7px; letter-spacing: .12em; } }

/* ---------- 案B：地図は 番号の 点だけ、写真は 地図の 下の 横の 帯 ---------- */
body.v-strip .jm-mk { width: 24px; height: 24px; margin: -12px 0 0 -12px; background: var(--ink); color: var(--paper); box-shadow: 0 0 0 2px var(--paper); display: block; text-align: center; }
body.v-strip .jm-mk .th { display: none; }
body.v-strip .jm-mk .n { position: static; display: block; background: none; min-width: 0; height: 24px; padding: 0; line-height: 24px; font-size: .62rem; letter-spacing: .04em; }
body.v-strip .jm-mk:hover, body.v-strip .jm-mk.is-hover { background: #000; transform: scale(1.1); }
body.v-strip .jm-mk.is-on { background: var(--shu); transform: scale(1.15); box-shadow: 0 0 0 2px var(--paper); }
body.v-strip .jm-mk.is-home { box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px var(--shu); }
body.v-strip .jm-mk.is-home .n, body.v-strip .jm-mk.is-on .n { background: none; }
body.v-strip .jm-mk .t { left: calc(100% + 8px); }
body.v-strip .jm-mk.t-left .t { left: auto; right: calc(100% + 8px); }
@media (max-width: 640px) { body.v-strip .jm-mk { width: 22px; height: 22px; margin: -11px 0 0 -11px; } body.v-strip .jm-mk .n { font-size: .56rem; height: 22px; line-height: 22px; } }
.jm-strip { margin-top: 16px; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 14px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--mute-d) transparent; }
.jm-strip::-webkit-scrollbar { height: 6px; } .jm-strip::-webkit-scrollbar-thumb { background: var(--mute-d); }
.jm-sc { flex: 0 0 152px; scroll-snap-align: start; display: grid; align-content: start; text-align: left; background: var(--paper); border: 0; border-radius: 0; padding: 0; cursor: pointer; color: inherit; font: inherit; box-shadow: 0 0 0 1px var(--line); -webkit-tap-highlight-color: transparent; transition: box-shadow .15s ease; }
.jm-sc img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; filter: grayscale(1); display: block; }
.jm-sc .b { padding: 8px 10px 10px; display: grid; gap: 2px; }
.jm-sc .n { font: 500 .58rem/1.3 var(--f-sans); letter-spacing: .22em; color: var(--shu); }
.jm-sc .n .c { color: var(--mute); margin-left: 6px; letter-spacing: .14em; text-transform: uppercase; }
.jm-sc b { font: 600 .9rem/1.3 var(--f-min); }
.jm-sc:hover, .jm-sc.is-hover { box-shadow: 0 0 0 1px var(--ink); }
.jm-sc.is-hover b { color: var(--shu); }
.jm-sc:hover b { color: var(--shu); }
.jm-sc.is-on { box-shadow: 0 0 0 2px var(--shu); }
.jm-sc[hidden] { display: none; }
.jm-strip-hint { margin-top: 14px; font: 500 .62rem/1.4 var(--f-sans); letter-spacing: .24em; text-transform: uppercase; color: var(--mute); display: flex; justify-content: space-between; gap: 12px; }
@media (max-width: 640px) { .jm-sc { flex-basis: 136px; } }

/* the card for one place: right column on PC, a sheet from the bottom on phones */
.jm-panel { position: sticky; top: calc(84px + 20px); max-height: calc(100vh - 84px - 40px); overflow-y: auto; overscroll-behavior: contain; background: #fff; box-shadow: 0 1px 0 rgba(22,20,18,.06), 0 18px 30px -22px rgba(22,20,18,.5); }
.jm-panel-photo { margin: 0; position: relative; }
.jm-panel-photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; filter: grayscale(1); }
.jm-panel-photo .jm-nophoto { aspect-ratio: 3 / 2; background: var(--kinari); display: grid; place-items: center; font: 500 .68rem/1.4 var(--f-sans); letter-spacing: .24em; text-transform: uppercase; color: var(--mute); }
.jm-credit { font: 400 .64rem/1.5 var(--f-sans); letter-spacing: .06em; color: var(--mute); padding: 8px 24px 0; }
.jm-credit a { text-decoration: none; border-bottom: 1px solid var(--line); }
.jm-credit a:hover { color: var(--shu); }
.jm-panel-body { padding: 18px 24px 26px; display: grid; gap: 12px; align-content: start; }
.jm-panel-body .label { margin: 0 0 4px; font-size: .66rem; }
.jm-panel-body .label .n { color: var(--shu); }
.jm-panel-body h3 { font-size: clamp(1.4rem, 2vw, 1.7rem); line-height: 1.25; }
.jm-panel-body h3 .jp { display: block; font-weight: 500; color: var(--mute); font-size: .78em; margin-top: 4px; letter-spacing: .06em; }
.jm-sum { color: var(--mute); }
.jm-more { align-self: start; justify-self: start; background: none; border: 0; border-radius: 0; padding-block: 10px; cursor: pointer; color: var(--ink); font: 500 .74rem/1 var(--f-sans); letter-spacing: .2em; text-transform: uppercase; border-bottom: 1px solid currentColor; }
.jm-more:hover { color: var(--shu); }
.jm-long { display: grid; gap: 12px; color: var(--mute); padding-top: 6px; border-top: 1px solid var(--line); }
.jm-long[hidden] { display: none; }
.jm-long h4 { margin: 10px 0 0; font: 500 .68rem/1.3 var(--f-sans); letter-spacing: .26em; text-transform: uppercase; color: var(--ink); }
.jm-see { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: .95rem; }
.jm-see li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 8px; }
.jm-see li::before { content: ""; width: 6px; height: 1px; background: currentColor; margin-top: .85em; }
.jm-official { justify-self: start; padding-block: 12px 10px; font-size: .74rem; }
/* 矢印は ks_cw_ext_icon()（11/7・文字の ↗ は iPhone で 絵文字に なる） */
.jm-pn { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; border-top: 1px solid var(--line); padding-top: 16px; margin-top: 8px; }
.jm-pn button { display: grid; gap: 4px; text-align: left; background: none; border: 0; border-radius: 0; padding: 0; cursor: pointer; color: inherit; font: inherit; }
.jm-pn button span { font: 500 .62rem/1.4 var(--f-sans); letter-spacing: .24em; text-transform: uppercase; color: var(--mute); }
.jm-pn button b { font: 600 .98rem/1.35 var(--f-min); }
.jm-pn button:hover b { color: var(--shu); }
.jm-pn .next { text-align: right; }
.jm-close { display: none; }
.jm-shade { display: none; }
@media (max-width: 900px) {
  .jm-stage { grid-template-columns: 1fr; }
  .jm-shade { display: block; position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, .55); opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility 0s linear .3s; }
  .jm-shade.is-open { opacity: 1; visibility: visible; transition: opacity .25s ease; }
  .jm-panel { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 70; max-height: 84vh; max-height: 84dvh; overflow-y: auto; overscroll-behavior: contain; transform: translateY(104%); visibility: hidden; transition: transform .28s ease, visibility 0s linear .3s; padding-bottom: env(safe-area-inset-bottom, 0px); box-shadow: 0 -24px 48px -24px rgba(0, 0, 0, .7); }
  .jm-panel.is-open { transform: none; visibility: visible; transition: transform .28s ease; }
  .jm-close { display: grid; place-items: center; position: absolute; top: 12px; right: 12px; z-index: 2; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 0; background: var(--ink); color: var(--paper); cursor: pointer; }
  .jm-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
  html.jm-open, html.jm-open body { overflow: hidden; }
  .jm-panel-photo img, .jm-panel-photo .jm-nophoto { aspect-ratio: 16 / 9; }
  .jm-credit { padding-inline: var(--gut-l) var(--gut-r); }
  .jm-panel-body { padding: 16px var(--gut-r) 28px var(--gut-l); }
}
@media (prefers-reduced-motion: reduce) { .jm-panel, .jm-shade { transition: none; } }

/* all places as cards */
.jm-list-band { padding-block: clamp(56px, 8vw, 110px); }
.jm-cards { margin-top: clamp(32px, 5vw, 56px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
.jm-card { display: grid; align-content: start; text-align: left; background: var(--paper); border: 0; border-radius: 0; padding: 0; cursor: pointer; color: inherit; font: inherit; min-width: 0; box-shadow: 0 1px 0 rgba(22,20,18,.05); -webkit-tap-highlight-color: transparent; }
.jm-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; filter: grayscale(1); }
.jm-card .jm-nophoto { aspect-ratio: 4 / 3; background: #E4DED1; }
.jm-card-body { padding: 16px 18px 20px; display: grid; gap: 6px; }
.jm-card .n { font: 500 .64rem/1 var(--f-sans); letter-spacing: .24em; text-transform: uppercase; color: var(--shu); }
.jm-card .n .c { color: var(--mute); margin-left: 8px; }
.jm-card b { font: 600 1.12rem/1.3 var(--f-min); }
.jm-card b .jp { font-weight: 500; color: var(--mute); font-size: .86em; margin-left: .4em; }
.jm-card .w { font-size: .86rem; color: var(--mute); line-height: 1.55; }
.jm-card:hover b, .jm-card.is-on b { color: var(--shu); }
.jm-card[hidden] { display: none; }
@media (max-width: 1000px) { .jm-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { .jm-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .jm-card-body { padding: 12px 14px 16px; } .jm-card b { font-size: 1rem; } }
@media (max-width: 340px) { .jm-cards { grid-template-columns: 1fr; } }

/* how we chose + credits */
.jm-how .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); }
.jm-how h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
.jm-how .body-copy { max-width: 40em; }
@media (max-width: 860px) { .jm-how .wrap { grid-template-columns: 1fr; } }
.jm-credits { padding-block: 28px 32px; border-top: 1px solid var(--line); font: 400 .72rem/1.7 var(--f-sans); color: var(--mute); }
.jm-credits .label { margin-bottom: 10px; font-size: .62rem; }
.jm-credits ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 40px; }
.jm-credits li { break-inside: avoid; }
.jm-credits a { text-decoration: none; border-bottom: 1px solid var(--line); }
.jm-credits a:hover { color: var(--shu); }
@media (max-width: 720px) { .jm-credits ul { columns: 1; } }
.jm-closing .hero-cta { margin-top: 26px; }

/* 11/6 ヘッダーの 項目が 6つ（Learn・Free Sheets・Japan Map・Sets・The Book・Brushes）に なり、990〜1100px で ロゴの 字と LEARN が 重なった
   → 1140px 以下は ナビの 間隔と 字を 少し 詰め、1040px 以下は 上の 列の Japan Map だけ 隠す（メニューと フッターには ある） */
@media (max-width: 1140px) { .nav { gap: 20px; } .nav a { font-size: .68rem; letter-spacing: .16em; } }
@media (max-width: 1040px) { .nav .nav-map { display: none; } }

/* 11/7 トップの 工房の 欄に 地図への 1行（Sana「足して」）：工房の リンクの 下に 縦に 並べる */
.fude .kobo-link { display: flex; width: fit-content; max-width: 100%; }
.fude .kobo-map { margin-top: 4px; }

/* 11/7 外の サイトへの 矢印（inc/calligraphy.php ks_cw_ext_icon・[ks_cw_ext]）。文字の ↗ は iPhone で 青い 絵文字に なる ので 細い 線の SVG に。字と 同じ 色・字の 高さに 合わせる */
.cw-ext { display: inline-block; flex: none; width: .78em; height: .78em; margin-left: .38em; vertical-align: -.02em; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: square; stroke-linejoin: miter; overflow: visible; }
.textlink .cw-ext { margin-left: .1em; }
.mnav-ks .cw-ext { margin-left: .3em; }
/* 2026-11-07 About us（/calligraphy/about/）：写真は 白黒（Sana「写真はカラフルにしないでね」） */
.ab-bw img { filter: grayscale(1) contrast(1.04); }
/* 2026-11-07 Sana「About Usの写真のでこぼこしてるのが気になる」：2まいの 上と 下を そろえる（左の 4:3 の 高さに 右を 合わせて 切りぬく） */
.ab-bw { align-items: stretch; }
.ab-bw .v2 { position: relative; min-height: 100%; }
.ab-bw .v2 img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-position: 50% 50%; }
/* 2026-11-07 Sana「先生というより、その上のフェーズ…規模感も見せたい」→ 案1：About us の いちばん上に 規模の 数字 4つ（2列） */
.ab-scale { grid-template-columns: 1fr 1fr; column-gap: 28px; margin-top: 6px; }
.ab-scale li { padding: 14px 0; }
.ab-scale b { font: 600 1.7rem/1.1 var(--f-min); }
.ab-scale span { font-size: .82rem; }