/* ==========================================================
   切り絵作家 草太様 HP — 共通スタイル
   コンセプト:「表裏一体」— 黒が主役。そこに、色が差す。
   ※将来のAstro移行を見据え、共通部分を1ファイルに集約
   ========================================================== */

:root{
  --ink:#101010;
  --paper:#f7f4ec;
  --paper-warm:#f0ebdf;
  --accent:#b3402a;           /* 落款の朱 */
  --gold:#c9a227;             /* 「被写体」の金 */
  --line:#d8d2c2;
  --muted:#6f695c;
  --serif:"Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--serif);
  background:var(--paper);
  color:var(--ink);
  overflow-x:hidden;
  line-height:1.9;
}
img{max-width:100%;display:block;}
a{color:inherit;}
::selection{background:var(--ink);color:var(--paper);}

/* ---------- オープニング(黒い紙が切り開かれる) ---------- */
#opening{position:fixed;inset:0;z-index:100;display:flex;pointer-events:none;}
.op-seen #opening{display:none;}   /* 同じ閲覧中の2回目以降（main.js） */
#opening .half{flex:1;background:var(--ink);transition:transform 1.2s cubic-bezier(.77,0,.18,1);}
#opening.open .half.left{transform:translateX(-101%);}
#opening.open .half.right{transform:translateX(101%);}
#opening .cutline{
  position:absolute;left:50%;top:0;width:2px;height:100%;
  background:var(--paper);transform:translateX(-50%) scaleY(0);transform-origin:top;
  animation:cut 1s cubic-bezier(.7,0,.3,1) .2s forwards;
}
#opening.open .cutline{opacity:0;transition:opacity .3s;}
@keyframes cut{to{transform:translateX(-50%) scaleY(1);}}

/* ---------- ヘッダー ---------- */
header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;justify-content:space-between;align-items:center;
  padding:22px 5vw;mix-blend-mode:difference;color:#fff;
}
header .logo{font-size:1.35rem;letter-spacing:.35em;font-weight:600;color:#fff;text-decoration:none;}
header .logo small{display:block;font-size:.6rem;letter-spacing:.5em;opacity:.75;}
nav ul{display:flex;gap:2.2vw;list-style:none;}
nav a{color:#fff;text-decoration:none;font-size:.82rem;letter-spacing:.25em;position:relative;padding:4px 0;}
nav a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:#fff;transform:scaleX(0);transform-origin:right;
  transition:transform .45s cubic-bezier(.77,0,.18,1);
}
nav a:hover::after{transform:scaleX(1);transform-origin:left;}

/* ---------- モバイルメニュー ---------- */
.menu-btn{
  display:none;background:none;border:0;cursor:pointer;padding:8px;
  flex-direction:column;gap:6px;width:36px;
}
.menu-btn span{
  display:block;height:1px;width:100%;background:#fff;
  transition:transform .4s cubic-bezier(.77,0,.18,1),opacity .3s;
}
.menu-btn.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.menu-btn.open span:nth-child(2){opacity:0;}
.menu-btn.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.menu-overlay{
  position:fixed;inset:0;z-index:45;background:var(--ink);
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transition:opacity .5s ease,visibility .5s;
}
.menu-overlay.open{opacity:1;visibility:visible;}
/* header の nav ul は flex 横並びなので、縦並びに上書きする */
.menu-overlay ul{display:block;list-style:none;text-align:center;}
.menu-overlay li{margin:1.6rem 0;}
.menu-overlay a{
  color:var(--paper);text-decoration:none;font-size:1.15rem;letter-spacing:.35em;
}
.menu-overlay a:hover{color:var(--gold);}

@media(max-width:900px){
  /* header内のナビのみ隠す(オーバーレイ内のnavは表示したままにする) */
  header nav{display:none;}
  .menu-btn{display:flex;}
}

/* ---------- 共通セクション ---------- */
section{padding:15vh 8vw;}
.sec-label{
  font-size:.72rem;letter-spacing:.5em;color:var(--accent);margin-bottom:1.4rem;
  display:flex;align-items:center;gap:16px;
}
.sec-label::after{content:"";height:1px;width:64px;background:var(--accent);}
h2{font-size:clamp(1.7rem,3.4vw,2.5rem);letter-spacing:.18em;font-weight:600;margin-bottom:2.4rem;}

/* スクロール出現(切り口のような斜めクリップ) */
.rv{
  opacity:0;transform:translateY(36px);
  clip-path:polygon(0 12%,100% 0,100% 100%,0 100%);
  transition:opacity 1s ease,transform 1s cubic-bezier(.22,1,.36,1),clip-path 1.1s cubic-bezier(.22,1,.36,1);
}
.rv.on{opacity:1;transform:none;clip-path:polygon(0 0,100% 0,100% 100%,0 100%);}
.rv.dly1{transition-delay:.12s;} .rv.dly2{transition-delay:.24s;} .rv.dly3{transition-delay:.36s;}

/* ---------- ボタン ---------- */
.btn{
  display:inline-block;margin-top:2.4rem;padding:1em 3.2em;
  border:1px solid currentColor;color:inherit;text-decoration:none;
  font-size:.85rem;letter-spacing:.35em;position:relative;overflow:hidden;transition:color .4s;
}
.btn::before{
  content:"";position:absolute;inset:0;background:var(--ink);
  transform:scaleX(0);transform-origin:right;transition:transform .45s cubic-bezier(.77,0,.18,1);
}
.btn:hover{color:var(--paper);}
.btn:hover::before{transform:scaleX(1);transform-origin:left;}
.btn span{position:relative;z-index:1;}
.btn.light::before{background:var(--paper);}
.btn.light:hover{color:var(--ink);}

/* ---------- フッター ---------- */
footer{
  background:var(--ink);color:var(--paper);text-align:center;
  padding:4rem 8vw 2.5rem;font-size:.75rem;letter-spacing:.25em;
}
footer .f-logo{font-size:1.2rem;letter-spacing:.4em;margin-bottom:2rem;}
footer .sns{display:flex;gap:2rem;justify-content:center;margin-bottom:2.5rem;flex-wrap:wrap;}
footer .sns a{color:var(--paper);text-decoration:none;opacity:.8;}
footer .sns a:hover{opacity:1;}
footer .f-links{margin-bottom:1.2rem;font-size:.7rem;opacity:.6;}
footer .f-links a{color:var(--paper);text-decoration:none;}
footer .f-links a:hover{opacity:1;text-decoration:underline;}
footer .copy{opacity:.5;font-size:.65rem;}

/* ==========================================================
   トップページ
   ========================================================== */

/* ---------- HERO ---------- */
.hero{
  position:relative;min-height:100svh;
  background:var(--ink);color:var(--paper);
  display:grid;grid-template-columns:1fr 1.15fr;align-items:center;
  overflow:hidden;padding:10vh 6vw 8vh;gap:3vw;
}
.petal{
  position:absolute;top:-6vh;background:var(--paper);opacity:.6;
  clip-path:polygon(50% 0,100% 38%,78% 100%,12% 82%,0 30%);
  animation:fall linear infinite;
}
.petal.gold{background:var(--gold);}
@keyframes fall{
  0%{transform:translateY(-8vh) translateX(0) rotate(0deg);}
  100%{transform:translateY(115vh) translateX(-12vw) rotate(540deg);}
}
.hero-copy{position:relative;z-index:2;}
/* タイトル直下のサブタイトル。hero-sub より一段大きく見せる */
.hero-en{
  margin-top:2rem;
  font-size:clamp(1.05rem,1.8vw,1.45rem);
  letter-spacing:.22em;color:var(--gold);
  opacity:0;animation:fadeup 1.2s ease 2.2s forwards;
}
.hero-title{
  font-size:clamp(2.2rem,4.6vw,3.8rem);letter-spacing:.3em;font-weight:600;line-height:1.5;
  clip-path:inset(0 100% 0 0);
  animation:reveal 1.4s cubic-bezier(.77,0,.18,1) 1.5s forwards;
}
.hero-sub{
  margin-top:1.2rem;font-size:clamp(.8rem,1.15vw,.95rem);letter-spacing:.28em;opacity:0;color:#cfcabd;
  animation:fadeup 1.2s ease 2.6s forwards;
}
@keyframes reveal{to{clip-path:inset(0 0 0 0);}}
@keyframes fadeup{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
.hero-art{position:relative;z-index:2;justify-self:center;opacity:0;animation:artin 1.6s cubic-bezier(.22,1,.36,1) 1.2s forwards;}
@keyframes artin{from{opacity:0;transform:translateY(40px);}to{opacity:1;transform:none;}}
/* 幅・高さの両方を上限にすることで、
   「できるだけ大きく」かつ「ファーストビューに収まる」を両立 */
.hero-art .frame{
  width:auto;height:auto;
  max-width:min(46vw,600px);
  max-height:66svh;
  box-shadow:0 30px 80px rgba(0,0,0,.55);
  animation:float 7s ease-in-out 3s infinite;
}
@keyframes float{0%,100%{transform:translateY(0);}50%{transform:translateY(-12px);}}
.hero-art figcaption{
  margin-top:1.2rem;font-size:.72rem;letter-spacing:.35em;color:#bdb8ab;text-align:right;
}
.scroll-cue{
  position:absolute;bottom:38px;right:3vw;
  font-size:.65rem;letter-spacing:.4em;color:var(--paper);opacity:.7;writing-mode:vertical-rl;z-index:3;
}
.scroll-cue::after{
  content:"";display:block;width:1px;height:56px;margin:14px auto 0;
  background:linear-gradient(var(--paper),transparent);
  animation:cue 1.8s ease-in-out infinite;
}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top;}55%{transform:scaleY(1);transform-origin:top;}56%{transform-origin:bottom;}100%{transform:scaleY(0);transform-origin:bottom;}}
@media(max-width:900px){
  .hero{grid-template-columns:1fr;padding-top:16vh;gap:6vh;}
  .hero-art .frame{max-width:min(78vw,420px);max-height:52svh;}
}

/* ---------- CONCEPT ---------- */
.concept{padding:0;display:grid;grid-template-columns:1.05fr 1fr;min-height:82vh;}
.concept>div{display:flex;flex-direction:column;justify-content:center;}
.concept .text{background:var(--paper);padding:13vh 5vw;}
.concept .art{background:var(--ink);color:var(--paper);padding:8vh 4vw;align-items:center;}
.concept .flex{display:flex;gap:3vw;align-items:flex-start;}
.concept .lead{
  font-size:clamp(1.35rem,2.3vw,1.85rem);letter-spacing:.14em;font-weight:600;
  line-height:1.85;margin-bottom:2.2rem;
}
.concept p.body{font-size:.9rem;max-width:36em;margin-bottom:1.1em;letter-spacing:.03em;}
.concept p.body:last-child{margin-bottom:0;}
.concept .tate{
  font-size:clamp(1.9rem,3.4vw,2.6rem);letter-spacing:.3em;font-weight:600;
  writing-mode:vertical-rl;line-height:1.4;flex:0 0 auto;
}
.concept .art img{width:min(34vw,520px);box-shadow:0 24px 60px rgba(0,0,0,.5);}
.concept .art figcaption{margin-top:1.1rem;font-size:.72rem;letter-spacing:.3em;color:#bdb8ab;text-align:right;width:min(34vw,520px);}
@media(max-width:900px){
  .concept{grid-template-columns:1fr;}
  .concept .flex{flex-direction:column;}
  .concept .tate{writing-mode:horizontal-tb;margin-bottom:1.5rem;}
  .concept .art img,.concept .art figcaption{width:100%;}
}

/* ---------- GALLERY(白黒 → ホバーで色が差す) ---------- */
.gallery{background:var(--paper-warm);}
.g-note{font-size:.85rem;letter-spacing:.15em;margin:-1.2rem 0 3rem;color:var(--muted);}
.g-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:34px;}
.g-item{position:relative;cursor:pointer;text-decoration:none;color:inherit;display:block;}
.g-frame{
  aspect-ratio:4/3;background:var(--ink);overflow:hidden;position:relative;
  transition:transform .5s cubic-bezier(.22,1,.36,1),box-shadow .5s;
}
.g-item:hover .g-frame{transform:translateY(-8px);box-shadow:14px 18px 0 -6px rgba(16,16,16,.14);}
.g-frame img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.05);
  transition:filter .7s ease,transform .8s cubic-bezier(.22,1,.36,1);
}
.g-item:hover .g-frame img{filter:grayscale(0) contrast(1);transform:scale(1.04);}
.g-cap{margin-top:14px;font-size:.85rem;letter-spacing:.2em;display:flex;justify-content:space-between;}
.g-cap span:last-child{color:var(--accent);font-size:.72rem;letter-spacing:.25em;}
.g-more{text-align:center;margin-top:4rem;}

/* ---------- WORKS(実績) ---------- */
.works-flex{display:flex;gap:5vw;align-items:flex-start;flex-wrap:wrap;}
.works-flex .list{flex:1 1 460px;}
.works .rows{border-top:1px solid var(--line);}
.works .row{
  display:grid;grid-template-columns:7.5em 1fr auto;gap:1.2em;align-items:center;
  padding:1.15em .4em;border-bottom:1px solid var(--line);font-size:.92rem;
  text-decoration:none;color:inherit;
  transition:background .4s,padding-left .4s;
}
.works .row:hover{background:#fff;padding-left:1em;}
.works .row .year{color:var(--accent);letter-spacing:.2em;}
.works .row .title{letter-spacing:.06em;}
@media(max-width:640px){
  .works .row{grid-template-columns:1fr auto;gap:.3em .8em;}
  .works .row .year{grid-column:1/-1;font-size:.8rem;}
}
.works .row .arrow{color:var(--accent);opacity:0;transition:opacity .4s,transform .4s;transform:translateX(-6px);font-size:.8rem;}
.works .row:hover .arrow{opacity:1;transform:none;}
/* 右側に「踊り子」と「切り絵御朱印」を同じ幅で併記する。
   2点とも縦横比が約1:1.41(1086x1536 / 724x1024)なので、幅を揃えれば高さも揃う */
.works-figs{
  flex:0 0 auto;display:flex;gap:2.2vw;align-items:stretch;
  width:min(40vw,400px);margin:0 auto;
}
/* 2点は縦横比が違うため画像の高さが揃わない。
   figure を伸ばしてキャプションを下端に揃え、並びを整える */
.works-figs figure{flex:1 1 0;min-width:0;margin:0;display:flex;flex-direction:column;}
/* 2点は縦横比が違うので、画像の枠を同じ比率に揃える。
   これでキャプションの開始位置も自然に揃う（下端で揃えると行数差で上端がズレる） */
.works-figs .odoriko img{aspect-ratio:3/4;object-fit:contain;}
.works-figs .goshuin-fig a{aspect-ratio:3/4;}
.works-figs .goshuin-fig img{width:100%;height:100%;object-fit:cover;}
.works-figs figcaption{
  font-size:.68rem;letter-spacing:.14em;color:var(--muted);text-align:center;
  margin-top:1.2rem;line-height:1.9;
}
.works-figs figcaption b{
  display:block;font-size:.82rem;letter-spacing:.18em;color:var(--ink);
  font-weight:600;margin-bottom:.3em;
}
.works .odoriko{animation:float 8s ease-in-out infinite;}
/* 影は figure ではなく画像だけに掛ける。
   figure に掛けると figcaption の文字にも影が落ち、二重に見えてしまう */
.works .odoriko img{filter:drop-shadow(8px 12px 0 rgba(16,16,16,.1));}
/* 御朱印は印刷物なので、紙の縁が分かるよう細罫と影をつける */
.works .goshuin-fig a{display:block;overflow:hidden;background:#fff;
  border:1px solid var(--line);box-shadow:8px 12px 0 -2px rgba(16,16,16,.1);}
/* 御朱印は朱色そのものが見どころなので、モノクロ加工はしない
   （隣の「踊り子」も色つきなので、並びとしても揃う） */
.works .goshuin-fig img{
  width:100%;display:block;
  transition:transform .8s;
}
.works .goshuin-fig a:hover img{transform:scale(1.04);}
@media(max-width:900px){
  .works-figs{width:min(80vw,420px);}
}
.works-more{margin-top:4rem;text-align:center;}
.works-more .btn{margin-top:0;}

/* ---------- PERFORMANCE(切り絵ライブ) ---------- */
/* 御朱印と同じ重さで独立させ、TOPから「依頼できる仕事」と分かるようにする */
.performance{background:var(--paper-warm);}
.pf-flex{display:flex;gap:6vw;align-items:center;flex-wrap:wrap;}
.pf-art{flex:0 0 auto;width:min(32vw,340px);margin:0 auto;}
.pf-art img{width:100%;filter:contrast(1.05);}
.pf-art figcaption{
  font-size:.72rem;letter-spacing:.26em;color:var(--muted);text-align:center;margin-top:1.2rem;
}
.pf-text{flex:1 1 420px;}
.pf-text h2{margin-bottom:1.8rem;}
.pf-lead{font-size:.93rem;max-width:34em;}
.pf-list{list-style:none;margin:2.4rem 0 0;border-top:1px solid var(--line);}
.pf-list li{
  display:grid;grid-template-columns:6.5em 1fr;gap:1.2em;align-items:baseline;
  padding:1em .2em;border-bottom:1px solid var(--line);font-size:.86rem;
}
.pf-list li span{font-size:.72rem;letter-spacing:.2em;color:var(--accent);}
@media(max-width:900px){
  /* 横並びが解けたら、道具の絵が小さくなりすぎないよう幅を取り直す */
  .pf-art{width:min(62vw,300px);}
}
@media(max-width:640px){
  .pf-list li{grid-template-columns:1fr;gap:.2em;}
}

/* ---------- ORDER(お仕事) ---------- */
/* 白地のまま文字だけだと素通りされるため、ここだけ黒地に反転させて視線を止める。
   ホバーで白へ抜ける動きも合わせて反転（「表裏一体」の見せ場） */
.order{padding-left:0;padding-right:0;background:var(--ink);color:var(--paper);}
.order .head{padding:0 8vw;}
.order .head h2{color:var(--paper);}
.order .head .sec-label{color:var(--gold);}
.order .head .sec-label::after{background:var(--gold);}
.order-lead{
  font-size:.92rem;color:#c6c1b6;max-width:40em;margin:-.8rem 0 3.4rem;
}
/* 6項目 → 3列×2行。auto-fitだと余り枠に黒地が出るため列数を固定 */
.order-list{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(247,244,236,.28);
}
@media(max-width:1100px){.order-list{grid-template-columns:repeat(2,1fr);}}
@media(max-width:680px){.order-list{grid-template-columns:1fr;}}
.order-list a{
  background:var(--ink);padding:3rem 2.2rem;position:relative;overflow:hidden;
  transition:color .45s;text-decoration:none;color:var(--paper);display:block;
}
.order-list a::before{
  content:"";position:absolute;inset:0;background:var(--paper);
  clip-path:polygon(0 0,0 0,0 100%,0 100%);
  transition:clip-path .55s cubic-bezier(.77,0,.18,1);z-index:0;
}
.order-list a:hover::before{clip-path:polygon(0 0,100% 0,100% 100%,0 100%);}
.order-list a:hover{color:var(--ink);}
.order-list a *{position:relative;z-index:1;}
.order-list h3{font-size:1.08rem;letter-spacing:.2em;margin-bottom:1rem;line-height:1.6;}
.order-list p{font-size:.85rem;opacity:.85;}
.order-list .num{font-size:.7rem;letter-spacing:.3em;color:var(--gold);display:block;margin-bottom:1.4rem;}
.order-list a:hover .num{color:var(--accent);}
.order-list p{color:#c6c1b6;}
.order-list a:hover p{color:var(--muted);}

/* アイコン(切り絵らしい直線的な図形。currentColorなので反転に追従する) */
.order-ico{
  width:46px;height:46px;display:block;margin-bottom:1.6rem;
  fill:none;stroke:currentColor;stroke-width:1.4;
  stroke-linecap:square;stroke-linejoin:miter;
  color:var(--gold);transition:color .45s,transform .55s cubic-bezier(.34,1.56,.64,1);
}
.order-list a:hover .order-ico{color:var(--accent);transform:translateY(-4px);}

/* 主要3つ ---- ここが「お仕事の顔」。常に3列で、1枚を大きく見せる */
.order-list.main{grid-template-columns:repeat(3,1fr);}
.order-list.main a{padding:4.2rem 2.6rem 3.4rem;display:flex;flex-direction:column;}
.order-list.main h3{
  font-size:clamp(1.15rem,1.7vw,1.45rem);letter-spacing:.16em;margin-bottom:.5rem;
}
.order-list.main .en{
  font-size:.62rem;letter-spacing:.42em;color:#8f897c;opacity:1;
  margin-bottom:1.6rem;padding-bottom:1.6rem;border-bottom:1px solid rgba(247,244,236,.22);
}
.order-list.main a:hover .en{color:var(--muted);border-color:var(--line);}
.order-list.main .num{
  font-size:.78rem;letter-spacing:.34em;margin-bottom:1.8rem;
}
.order-list.main .go{
  margin-top:auto;padding-top:2rem;font-size:.76rem;letter-spacing:.28em;color:var(--gold);
  opacity:0;transform:translateY(6px);transition:opacity .45s,transform .45s;
}
.order-list.main a:hover .go{opacity:1;transform:none;color:var(--accent);}
@media(max-width:960px){
  .order-list.main{grid-template-columns:1fr;}
  .order-list.main a{padding:2.8rem 2.2rem;}
  .order-list.main .go{opacity:1;transform:none;padding-top:1.4rem;}
}

/* 添える3つ ---- 文字だけ。主要3つと張り合わせない */
.order-sub{
  padding:3.6rem 8vw 0;
}
.order-sub .lead{
  font-size:.72rem;letter-spacing:.4em;color:#8f897c;
  display:flex;align-items:center;gap:16px;margin-bottom:1.6rem;
}
.order-sub .lead::after{content:"";height:1px;flex:1;background:rgba(247,244,236,.22);}
.order-sub ul{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:0 3vw;}
.order-sub li{border-top:1px solid rgba(247,244,236,.22);}
/* 1列に落ちる幅では、最後の行に下罫を足して一覧を閉じる */
@media(max-width:820px){.order-sub li:last-child{border-bottom:1px solid rgba(247,244,236,.22);}}
.order-sub a{
  display:block;padding:1.5em .2em;text-decoration:none;
  font-size:.95rem;letter-spacing:.1em;transition:padding-left .4s,color .4s;
}
.order-sub a span{
  display:block;font-size:.74rem;letter-spacing:.08em;color:#8f897c;margin-top:.4em;
}
.order-sub a::after{
  content:"→";margin-left:.8em;color:var(--gold);
  opacity:0;transition:opacity .4s;font-size:.85em;
}
.order-sub a:hover{padding-left:.7em;color:var(--gold);}
.order-sub a:hover span{color:#a9a396;}
.order-sub a:hover::after{opacity:1;}
@media(max-width:820px){.order-sub ul{grid-template-columns:1fr;}}

/* ---------- LESSON(背景:白) ---------- */
.lesson{background:var(--paper);position:relative;overflow:hidden;}
.lesson-flex{display:flex;gap:6vw;flex-wrap:wrap;align-items:center;}
.lesson-flex>div{flex:1 1 340px;}
.lesson p{font-size:.93rem;max-width:36em;}
.lesson .fee{
  margin-top:1.6rem;padding:1.2rem 1.6rem;background:var(--paper-warm);
  border-left:3px solid var(--accent);
}
.lesson .fee b{font-size:1rem;letter-spacing:.12em;}
.lesson .fee small{display:block;font-size:.78rem;color:var(--muted);margin-top:.5em;letter-spacing:.04em;}
.lesson ul{list-style:none;margin-top:1.8rem;font-size:.88rem;}
.lesson li{
  padding:.75em 0;border-bottom:1px solid var(--line);letter-spacing:.06em;
  display:grid;grid-template-columns:6.5em 1fr;gap:1em;align-items:baseline;
}
.lesson li b{color:var(--accent);font-weight:600;letter-spacing:.15em;}
.lesson li .time{color:var(--muted);font-size:.82rem;display:block;margin-top:.2em;}
.lesson .photo{
  width:min(30vw,420px);margin:0 auto;
  box-shadow:0 20px 50px rgba(16,16,16,.18);
  transform:rotate(1.2deg);transition:transform .6s cubic-bezier(.22,1,.36,1);
}
.lesson .photo:hover{transform:rotate(0deg) scale(1.02);}
.lesson .photo figcaption{
  background:#fff;color:var(--muted);font-size:.7rem;letter-spacing:.25em;
  text-align:center;padding:1rem;
}
@media(max-width:900px){.lesson .photo{width:100%;}}

/* ---------- PROFILE ---------- */
.profile-flex{display:flex;gap:5vw;align-items:flex-start;flex-wrap:wrap;}
.profile-flex .txt{flex:1 1 400px;}
.profile-flex p{font-size:.93rem;max-width:38em;}
.profile-flex .photo{flex:0 0 auto;width:min(24vw,300px);margin:0 auto;}
.profile-flex .photo img{filter:grayscale(1);transition:filter .7s;box-shadow:12px 14px 0 -4px var(--paper-warm),12px 14px 0 -3px var(--line);}
.profile-flex .photo:hover img{filter:grayscale(0);}
.history{margin-top:2rem;border-top:1px solid var(--line);}
.history .h-row{
  display:grid;grid-template-columns:5em 1fr;gap:1.2em;
  padding:.7em .2em;border-bottom:1px solid var(--line);font-size:.85rem;letter-spacing:.04em;
}
.history .h-row dt{color:var(--accent);}
.history .note{font-size:.82rem;color:var(--muted);margin-top:1rem;letter-spacing:.04em;}

/* ---------- SHOP / CONTACT(グッズ販売とご依頼を明確分離) ---------- */
/* 背景の並び: gallery(生成り) → works(白) → performance(生成り) → order(黒)
   → lesson(白・指定により維持) → profile(生成り) → shopcontact(白) → footer(黒) */
#profile{background:var(--paper-warm);}
.shopcontact{background:var(--paper);}
.sc-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--ink);margin-top:1rem;}
/* 左右で説明文の行数が違うと、下のボタンの開始位置がズレる。
   ブロックを縦フレックスにしてリンク群を下端へ寄せ、左右で高さを揃える */
.sc-block{
  background:var(--paper);padding:4rem 3vw;text-align:center;
  display:flex;flex-direction:column;
}
.sc-block .sc-links{margin-top:auto;}
.sc-block .kind{
  font-size:.72rem;letter-spacing:.5em;color:var(--accent);margin-bottom:1.2rem;
}
.sc-block h3{font-size:clamp(1.4rem,2.4vw,1.9rem);letter-spacing:.2em;margin-bottom:1rem;}
.sc-block .desc{font-size:.87rem;color:var(--muted);max-width:26em;margin:0 auto 2.4rem;}
.sc-links{display:flex;flex-direction:column;gap:14px;max-width:400px;margin:0 auto;}
.sc-links a{
  display:block;padding:1.5rem 1.2rem;border:1px solid var(--ink);text-decoration:none;color:inherit;
  position:relative;overflow:hidden;transition:color .4s;
}
.sc-links a::before{
  content:"";position:absolute;inset:0;background:var(--ink);
  transform:translateY(101%);transition:transform .45s cubic-bezier(.77,0,.18,1);
}
.sc-links a:hover{color:var(--paper);}
.sc-links a:hover::before{transform:translateY(0);}
.sc-links a span{position:relative;z-index:1;display:block;font-size:1rem;letter-spacing:.18em;}
.sc-links a small{position:relative;z-index:1;display:block;font-size:.72rem;letter-spacing:.12em;opacity:.65;margin-top:.6em;}
.sc-links a.solid{background:var(--ink);color:var(--paper);}
.sc-links a.solid::before{background:var(--paper);}
.sc-links a.solid:hover{color:var(--ink);}
@media(max-width:900px){.sc-grid{grid-template-columns:1fr;}}

/* ==========================================================
   下層ページ共通
   ========================================================== */
.page-hero{
  background:var(--ink);color:var(--paper);
  padding:26vh 8vw 12vh;position:relative;overflow:hidden;
}
.page-hero .sec-label{color:var(--gold);}
.page-hero .sec-label::after{background:var(--gold);}
.page-hero h1{
  font-size:clamp(1.9rem,4vw,3rem);letter-spacing:.24em;font-weight:600;line-height:1.5;
  clip-path:inset(0 100% 0 0);animation:reveal 1.2s cubic-bezier(.77,0,.18,1) .2s forwards;
}
.page-hero .lead{margin-top:1.8rem;font-size:.93rem;letter-spacing:.08em;color:#cfcabd;max-width:44em;}

.page-body{padding:7vh 8vw 12vh;}
.page-body h2{font-size:clamp(1.3rem,2.4vw,1.7rem);margin-bottom:1.8rem;}
.page-body p{font-size:.93rem;margin-bottom:1.2em;max-width:44em;letter-spacing:.04em;}
.page-body .lead-l{font-size:1.05rem;letter-spacing:.1em;line-height:2;margin-bottom:2.4rem;}

/* 仮ハメ表示(素材未支給の枠) */
.placeholder{
  background:var(--paper-warm);border:1px dashed var(--line);
  display:flex;align-items:center;justify-content:center;text-align:center;
  color:var(--muted);font-size:.8rem;letter-spacing:.15em;padding:2rem;aspect-ratio:4/3;
}
.placeholder span{display:block;line-height:2;}

/* 2カラム(本文+画像) */
.split{display:grid;grid-template-columns:1.1fr 1fr;gap:5vw;align-items:start;}
@media(max-width:900px){.split{grid-template-columns:1fr;}}
.split figure img{box-shadow:0 20px 50px rgba(16,16,16,.15);}
.split figcaption{font-size:.72rem;letter-spacing:.25em;color:var(--muted);margin-top:.9rem;text-align:right;}

/* 詳細ページの箇条書き */
.dl-list{border-top:1px solid var(--line);margin:2.4rem 0;}
.dl-list .row{
  display:grid;grid-template-columns:9em 1fr;gap:1.4em;
  padding:1.1em .3em;border-bottom:1px solid var(--line);font-size:.9rem;
}
.dl-list dt{color:var(--accent);letter-spacing:.15em;}
@media(max-width:640px){.dl-list .row{grid-template-columns:1fr;gap:.3em;}}

/* カードグリッド(下層の一覧) */
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:30px;}
.card{
  text-decoration:none;color:inherit;display:block;
  transition:transform .5s cubic-bezier(.22,1,.36,1);
}
.card:hover{transform:translateY(-8px);}
.card .thumb{
  aspect-ratio:4/3;background:var(--ink);overflow:hidden;position:relative;
  box-shadow:0 10px 30px rgba(16,16,16,.12);
}
.card .thumb img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:filter .7s,transform .8s;}
.card:hover .thumb img{filter:grayscale(0);transform:scale(1.05);}
.card h3{font-size:.98rem;letter-spacing:.14em;margin-top:1rem;font-weight:600;}
.card .meta{font-size:.75rem;color:var(--accent);letter-spacing:.2em;margin-top:.4em;}

/* パンくず・戻る導線 */
.crumb{
  padding:5vh 8vw 0;font-size:.75rem;letter-spacing:.15em;color:var(--muted);
}
.crumb a{color:var(--muted);text-decoration:none;}
.crumb a:hover{color:var(--ink);}
.back-nav{
  padding:0 8vw 14vh;
}
.back-nav a{
  display:inline-block;font-size:.82rem;letter-spacing:.25em;text-decoration:none;
  border-bottom:1px solid var(--line);padding-bottom:.5em;transition:border-color .4s;
}
.back-nav a:hover{border-color:var(--ink);}

/* お問い合わせ誘導(下層共通) */
.cta{
  background:var(--ink);color:var(--paper);text-align:center;padding:12vh 8vw;
}
.cta h2{margin-bottom:1.2rem;}
.cta p{font-size:.9rem;color:#cfcabd;max-width:34em;margin:0 auto;}

/* ==========================================================
   お問い合わせ / ご予約フォーム
   ・ひとつのページで「教室のご予約」と「お仕事のご依頼」を切り替える
   ・どちらから来たかで最初に開くタブが変わる(main.js)
   ========================================================== */
.form-page{padding-top:6vh;}

/* ---------- 切り替えタブ ---------- */
.form-switch{
  display:grid;grid-template-columns:1fr 1fr;gap:2px;
  background:var(--line);border:1px solid var(--line);margin-bottom:4rem;
}
.form-switch button{
  background:var(--paper-warm);border:0;cursor:pointer;
  font-family:var(--serif);color:var(--muted);
  padding:1.6em 1.4em;text-align:left;position:relative;overflow:hidden;
  transition:color .4s,background .4s;
}
.form-switch button .t{
  display:block;font-size:1rem;letter-spacing:.14em;line-height:1.6;
}
.form-switch button .d{
  display:block;font-size:.72rem;letter-spacing:.1em;margin-top:.5em;opacity:.8;
}
/* 選択中は黒く塗る。上端の朱線で「いまここ」を示す */
.form-switch button::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .45s cubic-bezier(.77,0,.18,1);
}
.form-switch button[aria-selected="true"]{
  background:var(--ink);color:var(--paper);
}
.form-switch button[aria-selected="true"]::before{transform:scaleX(1);}
.form-switch button[aria-selected="true"] .d{color:var(--gold);opacity:1;}
.form-switch button:not([aria-selected="true"]):hover{background:#fff;color:var(--ink);}
@media(max-width:640px){
  .form-switch{grid-template-columns:1fr;}
  .form-switch button{padding:1.3em 1.2em;}
}

/* ---------- フォーム本体 ---------- */
.form-pane{max-width:56em;}
.form-note{
  background:var(--paper-warm);border-left:3px solid var(--accent);
  padding:1.3rem 1.6rem;font-size:.86rem;margin-bottom:3.4rem;
}
.form-note b{display:block;letter-spacing:.18em;margin-bottom:.4em;}

.f-row{display:grid;grid-template-columns:1fr 1fr;gap:0 2.4rem;}
@media(max-width:680px){.f-row{grid-template-columns:1fr;}}

.f-field{display:block;margin-bottom:2.2rem;border:0;padding:0;}
.f-field .lb{
  display:block;font-size:.8rem;letter-spacing:.18em;margin-bottom:.7em;
}
.f-field .lb em{
  font-style:normal;font-size:.62rem;letter-spacing:.2em;color:var(--accent);
  border:1px solid var(--accent);padding:.15em .7em;margin-left:1em;vertical-align:.15em;
}
.f-field .hint{
  display:block;font-size:.72rem;color:var(--muted);margin-top:.6em;letter-spacing:.06em;
}
.f-field input[type="text"],
.f-field input[type="email"],
.f-field input[type="tel"],
.f-field input[type="date"],
.f-field input[type="number"],
.f-field select,
.f-field textarea{
  width:100%;font-family:var(--serif);font-size:.95rem;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:0;
  padding:.9em 1em;line-height:1.7;
  transition:border-color .35s,box-shadow .35s;
}
.f-field textarea{resize:vertical;}
.f-field select{
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),
                   linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:calc(100% - 20px) center,calc(100% - 14px) center;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;
  padding-right:3em;
}
.f-field input:focus,.f-field select:focus,.f-field textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(179,64,42,.12);
}
.f-field input:invalid:not(:placeholder-shown){border-color:var(--accent);}

/* ラジオ・チェックボックス */
.f-choices{display:flex;gap:2rem;flex-wrap:wrap;}
.f-choices label{display:inline-flex;align-items:center;gap:.6em;cursor:pointer;font-size:.92rem;}
.f-choices input{accent-color:var(--accent);width:1.05em;height:1.05em;}

.f-agree{
  display:flex;gap:.9em;align-items:flex-start;cursor:pointer;
  font-size:.84rem;line-height:1.9;color:var(--muted);
  border-top:1px solid var(--line);padding-top:2rem;margin-top:1rem;
}
.f-agree input{accent-color:var(--accent);width:1.1em;height:1.1em;margin-top:.45em;flex:0 0 auto;}

.f-submit{margin-top:2.6rem;}
.f-submit .btn{margin-top:0;cursor:pointer;background:none;font-family:var(--serif);}
.f-alt{font-size:.78rem;color:var(--muted);letter-spacing:.1em;margin-top:1.4rem;}

.form-demo{
  margin-top:5rem;padding-top:2rem;border-top:1px solid var(--line);
  font-size:.78rem;color:var(--muted);letter-spacing:.1em;
}

/* 確認入力が一致していないときの表示 */
.f-field .hint.err{color:var(--accent);}
.f-field input.bad{border-color:var(--accent);background:#fdf6f4;}

/* スパム対策の入力欄。人の目にもスクリーンリーダーにも触れさせない */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* ---------- 送信完了 ---------- */
.thanks-page{max-width:44em;}
.thanks-box{
  background:var(--paper-warm);border-left:3px solid var(--accent);padding:2rem 2.2rem;
}
.tk-mail{font-size:.95rem;margin:0;}
.tk-note{font-size:.84rem;color:var(--muted);margin:1.2rem 0 0;}
.thanks-next{display:flex;gap:1.2rem;flex-wrap:wrap;margin-top:3rem;}
.thanks-next .btn{margin-top:0;}

/* ==========================================================
   ライトボックス(作品のタップ拡大表示)
   ========================================================== */
[data-full]{cursor:zoom-in;}

.lightbox{
  position:fixed;inset:0;z-index:200;
  background:rgba(8,8,8,.95);
  display:flex;align-items:center;justify-content:center;
  padding:9vh 7vw;
  opacity:0;visibility:hidden;
  transition:opacity .4s ease,visibility .4s;
}
.lightbox.open{opacity:1;visibility:visible;transition:opacity .4s ease,visibility 0s;}
/* ↑ 開くときは表示を即座に切り替える（フェードは opacity で行う）。visibility にも時間をかけると、
   開いた直後はまだ非表示の扱いで、ボタンへフォーカスを移せない。閉じるときは上の .4s のまま */

/* ヘッダーは mix-blend-mode のため z-index だけでは隠れない。
   拡大表示中は明示的に伏せる */
body.lb-open header{opacity:0;pointer-events:none;transition:opacity .3s;}

.lb-fig{
  display:flex;flex-direction:column;align-items:center;gap:1.4rem;
  max-width:100%;max-height:100%;margin:0;
}
.lb-fig img{
  max-width:100%;max-height:76vh;width:auto;height:auto;object-fit:contain;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
  transform:scale(.96);transition:transform .45s cubic-bezier(.22,1,.36,1);
}
.lightbox.open .lb-fig img{transform:scale(1);}
.lb-fig figcaption{
  color:var(--paper);font-size:.95rem;letter-spacing:.25em;text-align:center;
}
.lb-fig figcaption small{
  display:block;color:var(--gold);font-size:.72rem;letter-spacing:.3em;margin-top:.7em;
}

.lightbox button{
  position:absolute;background:none;border:0;color:var(--paper);cursor:pointer;
  font-family:var(--serif);line-height:1;opacity:.65;
  transition:opacity .3s;
  display:flex;align-items:center;justify-content:center;
  min-width:48px;min-height:48px;   /* タップ領域を確保 */
}
.lightbox button:hover,.lightbox button:focus-visible{opacity:1;}
.lb-close{top:2.5vh;right:3vw;font-size:1.9rem;}
.lb-prev,.lb-next{top:50%;transform:translateY(-50%);font-size:2.6rem;}
.lb-prev{left:1.5vw;} .lb-next{right:1.5vw;}
.lb-count{
  position:absolute;bottom:3vh;left:50%;transform:translateX(-50%);
  color:var(--paper);opacity:.5;font-size:.72rem;letter-spacing:.3em;
}
@media(max-width:640px){
  .lightbox{padding:11vh 4vw;}
  .lb-fig img{max-height:64vh;}
  .lb-prev,.lb-next{top:auto;bottom:2vh;transform:none;font-size:2.2rem;}
  .lb-prev{left:8vw;} .lb-next{right:8vw;}
  .lb-count{bottom:3.4vh;}
}

/* ---------- 動きを控えたい閲覧者への配慮 ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;}
  .rv{opacity:1;transform:none;clip-path:none;}
  .hero-title,.page-hero h1{clip-path:none;}
  .hero-en,.hero-sub,.hero-art{opacity:1;}
  #opening{display:none;}
  .petal{display:none;}
  .g-frame img,.card .thumb img,.profile-flex .photo img{filter:none;}
}

/* ---------- 御朱印一覧（写真45点） ----------
   ・授与品は朱色そのものが見どころなので、モノクロ加工はしない
   ・縦長10点/横長35点が混在するため cover では縦長が切れる。
     contain にして、どの作品も欠けずに全体が見えるようにする */
.goshuin-grid .thumb{background:var(--paper-warm);}
.goshuin-grid .thumb img{
  object-fit:contain;filter:none;
}
.goshuin-grid .card:hover .thumb img{filter:none;transform:scale(1.03);}

/* ---------- シルエットアートの作品一覧（詳細ページ） ---------- */
.pf-works-head{margin-top:7rem;}
.pf-works-head h2{margin-bottom:1.2rem;}
.pf-works-head p{font-size:.88rem;color:var(--muted);}
.pf-works{
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:2.6rem;
}
@media(max-width:900px){.pf-works{grid-template-columns:repeat(2,1fr);}}
.pf-work{
  display:block;aspect-ratio:3/4;overflow:hidden;background:var(--paper-warm);
  box-shadow:0 8px 24px rgba(16,16,16,.10);
  transition:transform .5s cubic-bezier(.22,1,.36,1);
}
.pf-work:hover{transform:translateY(-6px);}
.pf-work img{width:100%;height:100%;object-fit:cover;transition:transform .8s;}
.pf-work:hover img{transform:scale(1.05);}

/* ---------- Art work Gallery のサムネイル ----------
   縦長・横長・正方形が混在するため、cover では作品が切れ、
   高さも揃わず一覧がばらつく。
   正方形の黒枠を置き、その中に作品全体を収める（拡大表示と同じ見え方）。
   TOPの抜粋と一覧ページで同じ作品を出すので、両方に同じ扱いを当てる */
.gallery-grid .thumb,
.gallery .g-frame{
  aspect-ratio:1/1;
  background:var(--ink);
}
.gallery-grid .thumb img,
.gallery .g-frame img{
  object-fit:contain;
}

/* オーダー作品は点数が少ないので、2列で大きめに見せる */
.pet-works{grid-template-columns:repeat(2,1fr);max-width:720px;}

/* ---------- ロゴ制作の実績一覧 ----------
   ロゴは白地に黒の線画なので、紙色の地に置くと白い四角が浮いてしまう。
   白いタイルに載せて「制作物」として見せる */
.logo-works{
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:2.6rem;
}
@media(max-width:900px){.logo-works{grid-template-columns:repeat(2,1fr);}}
.logo-work{text-decoration:none;color:inherit;display:block;}
.logo-work .ph{
  display:block;aspect-ratio:1/1;background:#fff;border:1px solid var(--line);
  overflow:hidden;transition:transform .5s cubic-bezier(.22,1,.36,1),box-shadow .5s;
}
.logo-work:hover .ph{transform:translateY(-6px);box-shadow:0 14px 30px rgba(16,16,16,.12);}
.logo-work .ph img{
  width:100%;height:100%;object-fit:contain;padding:12%;box-sizing:border-box;
}
.logo-work .nm{
  display:block;font-size:.74rem;letter-spacing:.08em;color:var(--muted);
  margin-top:.9rem;line-height:1.7;
}

/* 送信に失敗したときの案内。入力内容は消さず、押し直せるようにする */
.f-error{
  background:#fdf2ef;border-left:3px solid var(--accent);color:var(--accent);
  padding:1rem 1.2rem;margin:0 0 1.6rem;font-size:.88rem;line-height:1.9;
}
.f-submit .btn:disabled{opacity:.5;cursor:progress;}

/* ---------- 郡上印シリーズの3種（works/gujo-in.html） ----------
   干支印・郡上八幡城・丙午を横一列に。スマホでも3つ並べ、タップで拡大 */
.pf-works.gujo-set{grid-template-columns:repeat(3,1fr);margin-top:4rem;}
@media(max-width:900px){.pf-works.gujo-set{grid-template-columns:repeat(3,1fr);gap:12px;}}
.gujo-set figure{margin:0;}
.gujo-set figcaption{margin-top:.9rem;font-size:.8rem;letter-spacing:.2em;text-align:center;color:var(--muted);}

/* ---------- 動物のシルエット（order/performance.html） ----------
   横長のPOPと、ほぼ正方形の写真を並べる。どちらも切らずに全体を見せる */
.pf-animal{display:grid;grid-template-columns:1.45fr 1fr;gap:20px;margin-top:2.6rem;align-items:start;}
@media(max-width:900px){.pf-animal{grid-template-columns:1fr;}}
.pf-animal figure{margin:0;}
.pf-animal a{display:block;background:var(--paper-warm);box-shadow:0 8px 24px rgba(16,16,16,.10);
  transition:transform .5s cubic-bezier(.22,1,.36,1);}
.pf-animal a:hover{transform:translateY(-6px);}
.pf-animal img{display:block;width:100%;height:auto;}
.pf-animal figcaption{margin-top:.9rem;font-size:.8rem;letter-spacing:.15em;color:var(--muted);}


/* ---------- 日本語の改行 ----------
   単語の途中で改行しない・最後の行に1〜2文字だけ残さない。
   main.js の「日本語の改行」と対。
   ・jp-auto-phrase … Chrome / Edge。ブラウザ内蔵の文節判定で改行
   ・jp-wbr         … Safari / Firefox。main.js が入れた <wbr> の位置でだけ改行
   どちらのクラスも付かない場合（JS 無効など）は、これまでどおりの改行 */
body{line-break:strict;}
html.jp-auto-phrase body{word-break:auto-phrase;}
html.jp-wbr body{word-break:keep-all;overflow-wrap:anywhere;}
p,li,dt,dd,figcaption,blockquote{text-wrap:pretty;}
h1,h2,h3,h4{text-wrap:balance;}

/* ---------- スマホの固定ヘッダー ----------
   透明（反転表示）のままだと、スクロール時にロゴが本文やフォームのラベルに重なって読めない。
   スクロールしたら半透明の黒を敷き、反転表示をやめる。PC は従来どおり。
   main.js が header に .is-scrolled を付ける。アンカー移動の着地点もヘッダーの下にずらす */
@media(max-width:900px){
  html{scroll-padding-top:96px;}   /* 背景が付いた後のヘッダーの高さ（約87px）＋余白 */
  header{transition:background-color .3s,padding .3s;}
  header.is-scrolled{
    mix-blend-mode:normal;
    background:rgba(16,16,16,.92);
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    padding-top:14px;padding-bottom:14px;
  }
}

/* ---------- 操作方法の案内（タッチ端末とマウスで出し分け） ----------
   「カーソルを重ねると」はタッチ端末では意味が通らないため、入力方法で文言を切り替える。
   判定できない端末はタッチ向けの文言にする（どちらでも誤りにならない方） */
.on-pointer{display:none;}
@media (hover:hover) and (pointer:fine){
  .on-pointer{display:inline;}
  .on-touch{display:none;}
}

/* ---------- スマホの下層ページ見出し ----------
   文字間隔 .24em のままだと、390px 幅で「シルエットアート・」「切り絵イラスト制作」（9文字）が
   1行に収まらず、語の途中で折れていた。スマホだけ文字間隔を詰め、狭い端末では文字も画面幅に比例させる。
   区切りのない最長の語は10文字（「動画コラボレーション」）。
   10文字 ×（文字の大きさ × 1.14）が本文幅（画面の84%）に収まる計算。PC は変更なし */
@media(max-width:640px){
  .page-hero h1{font-size:min(1.9rem,7.2vw);letter-spacing:.14em;}
}

/* 途中で改行させない語（固有名詞など）。例：PILOT公式の「かく、がスキ」を「、」で割らない */
.nobr{white-space:nowrap;}