@charset "utf-8";
/* いとはきの作業場 トップ（2026-10-05 ウルフィン）
   決まった形：年ごとの並べ方／糸の色（Hand Knitting のロゴの紫と紺の間）／上に最新作／公演のサイトと同じ明朝
   土台は公演予約サイト（Hand Knitting）の assets/style.css。紙の色と書体は同じで、差し色だけを変えてある。
   作品の絵は切らない。元の縦横の比のまま、段ごとに高さを揃えて並べる（assets/site.js）。
   もとの案＝ ウェブサイト/いとはきの作業場_改修/2026-10-05_案/トップ_今の案.html */

:root{
  --f-head :"Zen Old Mincho","Yu Mincho","游明朝","Hiragino Mincho ProN",serif;
  --f-body :"Zen Kaku Gothic New","Yu Gothic","游ゴシック","Hiragino Kaku Gothic ProN",sans-serif;
  --f-label:"Cormorant Garamond",Georgia,serif;

  --paper  :#F7F2E7;
  --panel  :#FFFDF7;
  --ink    :#2A211A;
  --ink-2  :rgba(42,33,26,.70);
  --rule   :rgba(42,33,26,.15);
  --accent :#4A2E8C;   /* 文字とボタン */
  --line   :#6F47A8;   /* 枠と縦線 */
  --mark   :#4A2E8C;   /* 「最新作」の印 */
  --deep   :#1F1A30;
  --cream  :#F2E9D8;
  --cream-2:rgba(242,233,216,.66);

  --r-chip:4px; --r-card:10px; --r-pic:6px;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:40px; --s7:80px;
  /* 中身の幅。ノートパソコンの幅（1366）までは 1180px のまま。それより広い画面では、画面の幅に合わせて 1560px まで広げる
     （2026-10-05 いとはき「画面が中央寄りになってるのが少し気になる」。1920 の画面で左右が 410px ずつ空いていた） */
  --shell:clamp(1180px, 82vw, 1560px);
  --col-wide:760px;   /* 作品のページの本文の幅の上限。記事の絵は幅750pxで入っているので、それに合わせる */
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ font-size:16px; scroll-behavior:smooth; scroll-padding-top:84px; }   /* 行き先へ飛んだとき、上の帯の下に見出しが隠れないように */
html:has(.admin-bar){ scroll-padding-top:116px; }
body.itohaki-top{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--f-body);
  font-size:16px; line-height:1.9; letter-spacing:.05em;
  font-feature-settings:"palt" 1;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.itohaki-top img{ max-width:100%; height:auto; }
.itohaki-top a{ color:inherit; text-decoration:none; }
.itohaki-top p{ margin:0 0 1.1em; }
.itohaki-top p:last-child{ margin-bottom:0; }
.itohaki-top h1,.itohaki-top h2,.itohaki-top h3{ margin:0; }

.h2{ font-family:var(--f-head); font-weight:600; font-size:clamp(22px,2.1vw,29px); line-height:1.45; letter-spacing:.08em; }
.h3{ font-family:var(--f-head); font-weight:600; font-size:19px; line-height:1.6; letter-spacing:.05em; }
.meta{ font-size:13px; line-height:1.75; letter-spacing:.1em; color:var(--ink-2); }
.en{ font-family:var(--f-label); letter-spacing:.12em; }
.meta .en{ font-size:17px; }

.shell{ max-width:var(--shell); margin-inline:auto; padding-inline:var(--s6); }
.sec{ padding-block:var(--s7); }
.head-bar{ padding-left:var(--s4); border-left:2px solid var(--line); }
.head-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s5); flex-wrap:wrap; }

/* ── 上の帯 ── */
.bar{
  position:sticky; top:0; z-index:40; height:68px;
  display:flex; align-items:center; gap:var(--s5);
  padding:0 var(--s6);
  background:rgba(247,242,231,.93);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--rule);
}
.admin-bar .bar{ top:32px; }
.brand{ display:flex; align-items:baseline; gap:var(--s4); min-width:0; }
.brand b{ font-family:var(--f-head); font-weight:600; font-size:20px; letter-spacing:.1em; line-height:1; white-space:nowrap; }
.brand span{ font-size:11.5px; letter-spacing:.12em; color:var(--ink-2); white-space:nowrap; }
.nav{ display:flex; gap:var(--s5); margin-left:auto; }
.nav a{ font-size:14px; letter-spacing:.08em; color:var(--ink-2); white-space:nowrap; transition:color .2s var(--ease); }
.itohaki-top .nav a:hover{ color:var(--accent); }

.btn{
  display:inline-flex; align-items:center; gap:var(--s2);
  padding:var(--s3) var(--s5);
  font-size:14px; letter-spacing:.12em; line-height:1;
  border:1px solid var(--line); border-radius:var(--r-chip);
  background:transparent; cursor:pointer;
  transition:background .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease);
}
.itohaki-top .btn{ color:var(--accent); }
.itohaki-top .btn:hover{ background:var(--accent); border-color:var(--accent); color:var(--panel); }
.itohaki-top .btn.fill{ background:var(--accent); border-color:var(--accent); color:#FFFDF7; }
.itohaki-top .btn.fill:hover{ background:var(--ink); border-color:var(--ink); }
.bar-btn{ margin-left:var(--s2); padding:10px 16px; white-space:nowrap; }

/* ── いちばん上：最新作（絵は右の端まで出す） ── */
.open{
  display:grid; grid-template-columns:minmax(0,37fr) minmax(0,63fr); gap:var(--s6) 56px; align-items:center;
  padding:64px 0 72px max(var(--s6), calc((100vw - var(--shell)) / 2 + var(--s6)));
}
.newmark{ display:flex; align-items:center; gap:var(--s3); margin:0; }
.newmark b{
  font-weight:700; font-size:12.5px; letter-spacing:.2em; line-height:1;
  color:var(--mark); border:1px solid var(--mark); border-radius:3px; padding:6px 10px 6px 12px;
}
.newmark time{ font-family:var(--f-label); font-size:19px; letter-spacing:.14em; color:var(--ink-2); line-height:1; }
.itohaki-top .open-kind{ margin:var(--s5) 0 0; font-size:13px; letter-spacing:.16em; color:var(--ink-2); line-height:1.6; }
.itohaki-top .open-name{
  font-family:var(--f-head); font-weight:600;
  font-size:clamp(34px,3.7vw,50px); line-height:1.28; letter-spacing:.08em; margin:var(--s1) 0 0;
}
.facts{ display:flex; flex-wrap:wrap; margin:var(--s4) 0 0; padding:0; list-style:none; font-size:13px; letter-spacing:.1em; color:var(--ink-2); line-height:1.5; }
.facts li{ padding:0 var(--s3); border-left:1px solid var(--rule); }
.facts li:first-child{ padding-left:0; border-left:0; }
.itohaki-top .open-synop{ margin:var(--s5) 0 0; font-size:15px; line-height:2.0; max-width:27em; }
.open .btn{ margin-top:var(--s5); }
.open-img{ display:block; overflow:hidden; border-radius:var(--r-card) 0 0 var(--r-card); background:var(--deep); }
.open-img img{ display:block; width:100%; height:auto; transition:transform .5s var(--ease); }
.open-img:hover img{ transform:scale(1.015); }

/* 最新作の、発売日・販売価格（作品の記事の見出しと中身をそのまま出す） */
.open-dl{ display:flex; flex-wrap:wrap; gap:var(--s2) var(--s6); margin:var(--s5) 0 0; }
.open-dl div{ display:flex; align-items:baseline; gap:var(--s3); }
.open-dl dt{ font-size:12.5px; letter-spacing:.14em; color:var(--ink-2); white-space:nowrap; }
.open-dl dd{ margin:0; font-family:var(--f-head); font-weight:600; font-size:17px; letter-spacing:.06em; line-height:1.6; }
/* 最新作の、登場人物 */
.open-cast{ grid-column:1 / -1; padding-right:max(var(--s6), calc((100vw - var(--shell)) / 2 + var(--s6))); }
.open-cast .h3{ padding-bottom:var(--s3); border-bottom:1px solid var(--rule); }
.itohaki-top .open-cast ul{ list-style:none; margin:var(--s5) 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:var(--s5) var(--s6); }
.open-cast li b{ display:block; font-family:var(--f-head); font-weight:600; font-size:17px; line-height:1.6; letter-spacing:.06em; }
.open-cast li span{ display:block; margin-top:var(--s1); font-size:14px; line-height:1.9; }

/* 最新作を大きく：絵を中身の幅いっぱいに置き、字はその下に2列 */
.open.open-wide{ display:flex; flex-direction:column; align-items:stretch; max-width:var(--shell); margin-inline:auto; padding:var(--s6) var(--s6) 72px; gap:0; }
.open-wide .open-mark{ order:0; margin:0 0 var(--s4); }
.itohaki-top .open-wide .open-kind{ margin-top:0; }
.open-wide .open-img{ order:1; border-radius:var(--r-card); aspect-ratio:max(var(--r, 1.7778), 1.7778); }
/* 横長（16:9）より縦に長い絵が最新作になったときは、16:9の枠の中に、切らずに収める（幅いっぱいにすると、絵だけで画面より高くなる） */
.open-wide .open-img img{ width:100%; height:100%; object-fit:contain; }
.open-wide .open-txt{ order:2; display:grid; grid-template-columns:minmax(0,40fr) minmax(0,60fr); gap:var(--s5) 64px; align-items:start; margin-top:var(--s6); }
.itohaki-top .open-wide .open-synop{ margin-top:var(--s2); max-width:none; font-size:15.5px; }
.open-wide .open-cast{ order:3; margin-top:var(--s6); padding-right:0; }
/* あらすじを途中で切ったときの「……」 */
.itohaki-top .open-cut{ margin:0; color:var(--ink-2); letter-spacing:.08em; line-height:1.4; }
/* 「作品ページへ」は、字の下の真ん中に大きく置く */
.itohaki-top .open-wide .open-go{ order:4; margin:var(--s6) 0 0; text-align:center; }
.open-wide .open-go .btn{ margin-top:0; padding:20px 64px; font-size:16px; letter-spacing:.2em; }

/* ── 公演（Hand Knitting）のバナー ── */
.hk{
  display:grid; grid-template-columns:230px minmax(0,1fr) auto; gap:var(--s6); align-items:center;
  padding:var(--s6); background:var(--panel); border:1px solid var(--rule); border-radius:var(--r-card);
}
.hk-logo{ display:block; width:100%; height:auto; }
.hk p{ font-size:15px; }
.hk-acts{ display:flex; flex-wrap:wrap; gap:var(--s3); margin-top:var(--s3); }
.hk-pics{ display:flex; gap:var(--s3); }
.hk-pics a{ display:block; width:168px; }
.hk-pics img{ display:block; width:100%; height:auto; border-radius:var(--r-pic); }
.hk-pics span{ display:block; margin-top:6px; font-size:12px; letter-spacing:.08em; color:var(--ink-2); line-height:1.5; }
.wk-on{ display:inline-block; margin-right:.6em; color:var(--accent); font-weight:700; letter-spacing:.14em; }
.hk-pics .wk-on{ font-size:11.5px; }

/* ── 無料公開中作品（制作作品一覧の上。絵は切らない） ── */
.free{ padding-bottom:0; }
.free-list{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s6) var(--s5); align-items:start; margin-top:var(--s6); }
.fr{ display:block; min-width:0; }
.fr-pic{ display:block; overflow:hidden; border-radius:var(--r-pic); background:rgba(42,33,26,.06); }
.fr-pic img{ display:block; width:100%; height:auto; transition:transform .3s var(--ease); }
.fr:hover .fr-pic img{ transform:scale(1.02); }
.fr-name{ display:block; margin-top:var(--s4); font-family:var(--f-head); font-weight:600; font-size:20px; line-height:1.5; letter-spacing:.06em; transition:color .2s var(--ease); }
.fr:hover .fr-name{ color:var(--accent); }
.fr-facts{ display:block; margin-top:var(--s1); font-size:13px; line-height:1.65; letter-spacing:.07em; color:var(--ink-2); }

/* ── 作品の一枚（絵は切らない） ── */
.jrow{ display:flex; flex-wrap:wrap; gap:28px 20px; align-items:flex-start; }
.wk{ display:block; flex:0 0 auto; width:240px; min-width:0; }
.wk-pic{ display:block; overflow:hidden; border-radius:var(--r-pic); background:rgba(42,33,26,.06); }
.wk-pic img{ display:block; width:100%; height:auto; transition:transform .3s var(--ease); }
.wk:hover .wk-pic img{ transform:scale(1.03); }
.wk-top{ display:block; margin-top:10px; font-size:11.5px; line-height:1.6; letter-spacing:.12em; color:var(--ink-2); }
.wk-top span{ display:inline-block; white-space:nowrap; }
.wk.is-narrow .wk-top{ font-size:10.5px; letter-spacing:.02em; }
.wk.is-tiny .wk-top span{ white-space:normal; }
.wk-new{ display:inline-block; margin-right:.6em; color:var(--mark); font-weight:700; letter-spacing:.16em; }
.wk-name{ display:block; font-family:var(--f-head); font-weight:600; font-size:15.5px; line-height:1.55; letter-spacing:.04em; margin-top:2px; transition:color .2s var(--ease); }
.wk:hover .wk-name{ color:var(--accent); }
.wk-facts{ display:block; font-size:12px; line-height:1.65; letter-spacing:.07em; color:var(--ink-2); margin-top:3px; }

/* ── 年ごと ── */
.years{ margin-top:var(--s6); }
.yr{ display:grid; grid-template-columns:112px minmax(0,1fr); gap:var(--s5); padding-block:var(--s6); border-top:1px solid var(--rule); }
.yr:last-child{ padding-bottom:0; }
.yr-n{ position:sticky; top:92px; align-self:start; }
.admin-bar .yr-n{ top:124px; }
.yr-n b{ display:block; font-family:var(--f-label); font-weight:400; font-size:44px; line-height:1; letter-spacing:.04em; }
.yr-n span{ display:block; margin-top:var(--s2); font-size:12px; letter-spacing:.14em; color:var(--ink-2); line-height:1.4; }

/* ── ブログとプロフィール ── */
.tail{ display:grid; grid-template-columns:minmax(0,62fr) minmax(0,38fr); gap:var(--s7); padding-top:0; }
.tail .h3{ padding-bottom:var(--s3); border-bottom:1px solid var(--ink); }
.itohaki-top .posts{ list-style:none; margin:0; padding:0; }
.posts li{ border-bottom:1px solid var(--rule); }
.posts a{ display:grid; grid-template-columns:104px minmax(0,1fr); gap:var(--s4); padding:var(--s4) 0; align-items:baseline; transition:color .2s var(--ease); }
.itohaki-top .posts a:hover{ color:var(--accent); }
.posts time{ font-family:var(--f-label); font-size:16px; letter-spacing:.1em; color:var(--ink-2); line-height:1.6; }
.posts span{ font-size:15px; line-height:1.75; }
.itohaki-top .more{ display:inline-block; margin-top:var(--s4); font-size:13px; letter-spacing:.12em; color:var(--accent); }
.itohaki-top .me p{ margin-top:var(--s4); font-size:15px; }
.me .mail{ font-family:var(--f-label); font-size:20px; letter-spacing:.06em; }

/* ── 脚 ── */
.foot{ background:var(--deep); color:var(--cream); margin-top:var(--s7); }
.foot-in{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--s5); flex-wrap:wrap; padding-block:var(--s6); }
.foot b{ font-family:var(--f-head); font-weight:600; font-size:17px; letter-spacing:.1em; }
.itohaki-top .foot a, .foot span{ font-size:12.5px; letter-spacing:.1em; color:var(--cream-2); }
.itohaki-top .foot a:hover{ color:var(--cream); }
.foot-r{ display:flex; gap:var(--s5); flex-wrap:wrap; }

/* ── 作品のページ（single-work.php）──
   頭（制作作品一覧 ／ 名前・種類・題・人数と時間・日付）は左そろえ。公演のサイトの作品ページと同じ組み。
   本文は、記事に書いてあるそろえ方のまま出す（真ん中そろえで書いてある記事が多い）。 */
/* どの幅でも1列：上に頭、その下に本文。頭と本文は、同じ幅（--col-wide）の列に入れて、左の端をそろえる。
   2026-10-05 いとはき「左右に分けずに。上から順番にある方がいい」「スマホの表記はすごくイメージに近いと思いますが、
   PCで見た時の表示が少し見にくい」。版 0.6.0 までは、広い画面で左に頭（送っても見える）・右に本文の2列だった */
.work{
  max-width:var(--shell); margin-inline:auto; padding:64px var(--s6) 0;
  display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s5);
}
.work-head{ width:100%; max-width:var(--col-wide); margin-inline:auto; padding-bottom:var(--s5); border-bottom:1px solid var(--rule); }
.work-main{ min-width:0; width:100%; max-width:var(--col-wide); margin-inline:auto; }
.itohaki-top .work-path a{ color:var(--accent); }
.itohaki-top .work-name{
  font-family:var(--f-head); font-weight:600;
  font-size:clamp(26px,5vw,36px); line-height:1.45; letter-spacing:.06em; margin:var(--s1) 0 0;
}
.work-facts{ display:flex; flex-direction:row; flex-wrap:wrap; align-items:baseline; gap:var(--s2) var(--s5); margin-top:var(--s4); }
.work-facts .facts{ margin:0; }
.work-facts time{ font-size:17px; letter-spacing:.12em; color:var(--ink-2); line-height:1.5; }
/* 本文の下：共有のアイコン → ほかの作品 → 制作作品一覧へ */
.work-share{ display:flex; gap:var(--s3); margin-top:var(--s7); }
.work-share a{
  display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px;
  border:1px solid var(--line); border-radius:var(--r-chip);
  transition:background .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease);
}
.itohaki-top .work-share a{ color:var(--accent); }
.itohaki-top .work-share a:hover{ background:var(--accent); border-color:var(--accent); color:var(--panel); }
.work-share svg{ display:block; width:20px; height:20px; }
.work-more{ margin-top:var(--s6); padding-top:var(--s5); border-top:1px solid var(--rule); }
.work-more .jrow{ margin-top:var(--s5); }
.itohaki-top .work-back{ margin-top:var(--s6); }   /* .itohaki-top p の margin:0 に負けないように、名指しを強くしてある（版 0.4.0 までは余白が 0px だった） */
.itohaki-top .work-pages a{ color:var(--accent); }

/* 本文（記事に書いてあるものをそのまま出す） */
.entry{ position:relative; font-size:16px; line-height:2.0; overflow-wrap:anywhere; }   /* relative：読み込み前の埋め込みの枠（位置が absolute）が、画面の幅ではなく本文の幅に収まるように */
.entry > *:first-child{ margin-top:0; }
.itohaki-top .entry p{ margin:0 0 1.4em; }
.itohaki-top .entry h1,
.itohaki-top .entry h2{
  font-family:var(--f-head); font-weight:600;
  font-size:clamp(21px,2.2vw,27px); line-height:1.5; letter-spacing:.08em; margin:2.6em 0 1em;
}
.itohaki-top .entry h3{ font-family:var(--f-head); font-weight:600; font-size:19px; line-height:1.6; letter-spacing:.05em; margin:2.2em 0 .8em; }
.itohaki-top .entry h4,
.itohaki-top .entry h5,
.itohaki-top .entry h6{ font-size:15px; font-weight:700; line-height:1.7; letter-spacing:.1em; margin:2em 0 .6em; }
.itohaki-top .entry a{ color:var(--accent); text-decoration:underline; text-underline-offset:.2em; }
.itohaki-top .entry a:hover{ color:var(--ink); }
.entry img{ border-radius:var(--r-pic); }
.entry figure{ margin:0 0 1.6em; max-width:100%; }
.entry .wp-block-image:not(.alignleft):not(.alignright){ text-align:center; }   /* 本文の幅より小さい絵は、真ん中に置く */
.entry figcaption{ margin-top:var(--s2); font-size:13px; line-height:1.7; letter-spacing:.06em; color:var(--ink-2); text-align:center; }
.entry iframe, .entry video{ max-width:100%; }
.entry .wp-block-embed{ margin:0 0 1.8em; }
.entry ul, .entry ol{ margin:0 0 1.4em; padding-left:1.5em; }
.entry blockquote{ margin:0 0 1.6em; padding:var(--s4) var(--s5); border-left:2px solid var(--line); background:var(--panel); }
.entry blockquote p:last-child{ margin-bottom:0; }
.entry hr{ border:0; border-top:1px solid var(--rule); margin:var(--s6) 0; }
.entry table{ width:100%; border-collapse:collapse; margin:0 0 1.6em; font-size:15px; line-height:1.8; }
.entry th, .entry td{ padding:var(--s3) var(--s2); border-bottom:1px solid var(--rule); text-align:left; vertical-align:top; }
.itohaki-top .entry .wp-block-button__link{
  background:var(--accent); color:#FFFDF7; text-decoration:none;
  border-radius:var(--r-chip); padding:var(--s3) var(--s5); font-size:14px; letter-spacing:.12em; line-height:1.4;
}
.itohaki-top .entry .wp-block-button__link:hover{ background:var(--ink); color:#FFFDF7; }

/* ── 名指しした記事（single-plain.php：プロフィール・特定商取引法に基づく表記）──
   組みは作品のページと同じ（題 → 本文の1列）。記事は書き換えず、この形で出すときだけ、表を次のようにしている。
   ・何も書いていない欄は出さない（2列の表の右の列が空で、字が表の半分の幅に詰まるため）
   ・縞の色は、灰色（#f0f0f0）ではなく、このサイトの白（--panel）にする */
.itohaki-plain .entry td:empty, .itohaki-plain .entry th:empty{ display:none; }
.itohaki-plain .entry .wp-block-table.is-style-stripes{ border-bottom:0; }
.itohaki-plain .entry .wp-block-table.is-style-stripes tbody tr:nth-child(odd){ background-color:var(--panel); }
.itohaki-plain .entry .wp-block-table td{ padding:var(--s3) var(--s4); }

/* コメント（受け付けている記事にだけ出る） */
.comments{ margin-top:var(--s7); padding-top:var(--s6); border-top:1px solid var(--rule); }
.itohaki-top .comment-list{ list-style:none; margin:var(--s5) 0 0; padding:0; }
.comment-list li{ padding:var(--s4) 0; border-bottom:1px solid var(--rule); }
.itohaki-top .comment-list .children{ list-style:none; margin:0; padding-left:var(--s5); }
.comment-list .avatar{ border-radius:50%; vertical-align:middle; margin-right:var(--s2); }
.comment-metadata, .comment-meta{ font-size:12.5px; letter-spacing:.06em; color:var(--ink-2); }
.itohaki-top .comment-metadata a, .itohaki-top .reply a{ color:var(--accent); }
.comment-respond{ margin-top:var(--s6); }
.itohaki-top .comment-reply-title{ font-family:var(--f-head); font-weight:600; font-size:19px; line-height:1.6; letter-spacing:.05em; }
.comment-form label{ display:block; margin-bottom:var(--s1); font-size:13px; letter-spacing:.08em; color:var(--ink-2); }
.comment-form textarea,
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"]{
  width:100%; max-width:100%; padding:10px var(--s3);
  border:1px solid var(--rule); border-radius:var(--r-chip);
  background:var(--panel); color:var(--ink); font:inherit; letter-spacing:.04em;
}
.comment-form .comment-form-cookies-consent label{ display:inline; }
.comment-form .submit{
  padding:var(--s3) var(--s5); font:inherit; font-size:14px; letter-spacing:.12em; line-height:1; cursor:pointer;
  border:1px solid var(--accent); border-radius:var(--r-chip); background:var(--accent); color:#FFFDF7;
}
.comment-form .submit:hover{ background:var(--ink); border-color:var(--ink); }

/* 親テーマ（Hestia Pro）が脚の後ろに出す「上へ戻る」のボタン。親テーマの見た目を外したトップでは、
   飾りの無い小さなボタンとして左下に出てしまうので、トップでは出さない（2026-10-05 有効にした直後に見つけた） */
.itohaki-top .hestia-scroll-to-top{ display:none; }

/* ── 狭い画面 ── */
@media (max-width:1160px){
  .brand span{ display:none; }   /* 名前の横の一言は、行き先と重なる幅では出さない */
}
@media (max-width:900px){
  .nav{ gap:var(--s4); }
  .bar-btn{ padding:9px 12px; font-size:13px; }
  .open{ grid-template-columns:1fr; padding:var(--s5) 0 var(--s6); gap:var(--s5); }
  .open-txt{ padding-inline:var(--s5); order:2; }
  .open-img{ border-radius:0; order:1; }
  .open-cast{ order:3; padding-inline:var(--s5); }
  .open.open-wide{ padding:0 0 var(--s6); }
  .itohaki-top .open-wide .open-mark{ margin:0; padding:var(--s4) var(--s5); }
  .open-wide .open-img{ border-radius:0; aspect-ratio:max(var(--r, 1.7778), 1.3333); }   /* 狭い画面では、枠を 4:3 まで縦に長くしてよい */
  .open-wide .open-txt{ grid-template-columns:1fr; gap:0; margin-top:var(--s5); }
  .itohaki-top .open-wide .open-synop{ margin-top:var(--s5); font-size:15px; }
  .open-wide .open-cast{ padding-inline:var(--s5); }
  .hk{ grid-template-columns:1fr; gap:var(--s5); padding:var(--s5); }
  .itohaki-top .hk-logo{ max-width:220px; margin-inline:auto; }   /* 1列に重なる幅では、ロゴを真ん中に置く（2026-10-05 いとはき「ロゴが左に寄っているので、中央揃えしてほしい」） */
  .work{ padding-top:var(--s6); }
  .tail{ grid-template-columns:1fr; gap:var(--s6); }
}
@media (max-width:860px){
  /* 上の帯を2段にする：上に名前（と公演の予約）、下に行き先。1段のままだと名前と行き先が重なる */
  html{ scroll-padding-top:108px; }
  html:has(.admin-bar){ scroll-padding-top:150px; }
  .bar{ height:auto; padding:10px var(--s5) 0; flex-wrap:wrap; gap:0 var(--s4); }
  .brand{ order:1; }
  .bar .bar-btn{ order:2; margin-left:auto; }
  .nav{ order:3; margin-left:0; width:100%; gap:var(--s5); overflow-x:auto; }
  .nav a{ padding:10px 0 11px; font-size:13px; }
  .yr-n{ top:112px; }
  .admin-bar .yr-n{ top:144px; }
}
@media (max-width:782px){
  .admin-bar .bar{ top:46px; }
  .admin-bar .yr-n{ top:158px; }
}
@media (max-width:720px){
  .itohaki-top .open-cast ul{ grid-template-columns:1fr; }   /* 狭い画面では、登場人物を1人ずつ縦に */
}
@media (max-width:640px){
  body.itohaki-top{ font-size:15px; line-height:1.85; }
  .shell{ padding-inline:var(--s4); }
  .sec{ padding-block:56px; }
  .bar{ padding:10px var(--s4) 0; }
  .brand b{ font-size:18px; }
  .bar .bar-btn{ padding:8px 10px; font-size:12.5px; letter-spacing:.08em; }
  .open-txt{ padding-inline:var(--s4); }
  .open-cast, .open-wide .open-cast{ padding-inline:var(--s4); }
  .itohaki-top .open-wide .open-go{ margin-top:var(--s5); padding-inline:var(--s4); }
  .open-wide .open-go .btn{ display:flex; justify-content:center; padding:18px 24px; }   /* スマホでは、幅いっぱいのボタンにする */
  .itohaki-top .open-wide .open-mark{ padding-inline:var(--s4); }
  .yr{ grid-template-columns:1fr; gap:var(--s4); padding-block:var(--s5); }
  .yr-n, .admin-bar .yr-n{ position:static; display:flex; align-items:baseline; gap:var(--s3); }
  .yr-n b{ font-size:34px; }
  .yr-n span{ margin-top:0; }
  .jrow{ gap:22px 12px; }
  .free-list{ grid-template-columns:1fr; gap:var(--s5); margin-top:var(--s5); }
  .fr-name{ font-size:18px; margin-top:var(--s3); }
  .wk-top.is-empty{ display:none; }
  .wk-top.is-empty + .wk-name{ margin-top:10px; }
  .hk-pics{ width:100%; }
  .hk-pics a{ width:calc(50% - 6px); }
  .work{ padding:var(--s5) var(--s4) 0; }
  .entry{ font-size:15.5px; line-height:1.95; }
  .work-share{ margin-top:56px; }
  .posts a{ grid-template-columns:1fr; gap:0; }
}
@media (max-width:600px){
  .admin-bar .bar{ top:0; }   /* この幅では、管理の帯は画面に貼り付かない */
}
@media (max-width:480px){
  /* 4つの行き先を1行に収める（字は画面の幅に合わせて少し小さく） */
  .nav{ gap:0; justify-content:space-between; }
  .nav a{ font-size:clamp(11.5px,3.2vw,13px); letter-spacing:.04em; }
}