/* =========================================================
   徳川義親 ヨーロッパへの旅｜特設サイト 共通スタイル

   1. 色・文字の基本設定
   2. 全体の初期化
   3. 台紙・文字サイズの切り替え
   4. ヘッダー（下層ページ）
   5. キービジュアル・トップの題字
   6. 大きなボタン（入口・行き止まり防止）
   7. 見出し・本文
   8. 写真・キャプション
   9. 地図・章の一覧
  10. 旅程（区分ごとにまとめる）
  11. プロジェクトの名前欄
  12. ページ下部・フッター
  13. 目次ボタン・閉じるボタン
  14. 目次パネル
  15. マウス操作の端末だけの反応
  16. 動きを減らす設定の端末
   ========================================================= */


/* ---------- 1. 色・文字の基本設定 ---------- */
:root {
  --paper: #FBF9F5;        /* 台紙 */
  --outer: #E3E1DC;        /* 台紙の外側（PC・タブレット） */
  --ink: #1C1C1A;          /* 本文の文字 */
  --sub: #5E5850;          /* 補足の文字 */
  --rule: #DDD5C8;         /* 区切り線 */
  --side: #D8CFC2;         /* 台紙の縁・点線 */
  --side-lt: #EEEBE8;      /* 引用の背景 */
  --gold: #8C6B2D;         /* 金茶（線・印） */
  --gold-text: #6E5322;    /* 金茶（文字） */
  --field: #EFEBE3;        /* 写真の背景（スマホ） */
  --tab-on: #F1EBDF;       /* 選択中・押したときの背景 */
  --band: #EDE2D3;         /* 見出しの帯 */
  /* ページの色：線・番号の丸は --accent、小さい文字は --accent-text（トップは金茶） */
  --accent: #8C6B2D;
  --accent-text: #6E5322;
  --base: 16px;            /* 文字サイズ「標準」 */
  --serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --sans: -apple-system, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", sans-serif;
}
html.big {
  --base: 22px;            /* 文字サイズ「大きく」 */
}
/* 船の旅は青、ヨーロッパは緑（ページ全体、または地図の部分だけに使う） */
body[data-page="ship"], .is-ship {
  --accent: #418BAF;
  --accent-text: #2F6D8C;
}
body[data-page="europe"], .is-europe {
  --accent: #66946C;
  --accent-text: #4C7552;
}


/* ---------- 2. 全体の初期化 ---------- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}
html {
  -webkit-text-size-adjust: 100%;
}
body {
  background: var(--outer);
  font-family: var(--sans);
  font-size: var(--base);
  line-height: 1.85;
  color: var(--ink);
}
button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}
a {
  color: inherit;
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}
:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}


/* ---------- 3. 台紙・文字サイズの切り替え ---------- */
.frame {
  position: relative;
  max-width: 720px;
  min-height: 100vh;
  margin: 0 auto;
  padding-bottom: 120px;
  background: var(--paper);
}
@media (min-width: 720px) {
  .frame {
    border-left: 1px solid var(--side);
    border-right: 1px solid var(--side);
    box-shadow: 0 0 28px rgba(80, 60, 30, .10);
  }
}

.sizer {
  display: flex;
  gap: 8px;
}
.sizer button {
  min-height: 40px;
  padding: 8px 13px;
  border: 1.5px solid #C9C2B6;
  border-radius: 5px;
  background: #fff;
  font-size: 14px;
  white-space: nowrap;
}
html:not(.big) .sizer .s1,
html.big .sizer .s2 {
  border-color: #D4CCBF;
  background: #D4CCBF;
  font-weight: 700;
}
/* トップ：表題写真の上に文字サイズの切り替えだけを置く（ボタンに半透明の台） */
.top-sizer {
  position: absolute;
  top: calc(12px + env(safe-area-inset-top, 0px));
  right: 12px;
  z-index: 5;
  padding: 4px;
  border-radius: 10px;
  background: rgba(251, 249, 245, .72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 6px rgba(0, 0, 0, .12);
}
.top-sizer button {
  background: rgba(255, 255, 255, .6);
}


/* ---------- 4. ヘッダー（下層ページ。スクロールすると一緒に流れる） ---------- */
.head {
  background: var(--paper);
}
.head .row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  min-height: 64px;
  padding: calc(12px + env(safe-area-inset-top, 0px)) 18px 12px;
}
.head .sizer {
  flex: none;              /* 文字サイズのボタンは潰さない */
}
.site {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: .06em;
  text-decoration: none;
}
.site span {
  display: inline-block;   /* 「徳川義親」と「ヨーロッパへの旅」の間でだけ改行 */
}

nav.tabs {
  display: flex;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
nav.tabs a {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 12px 4px;
  border-right: 1px solid var(--rule);
  background: #fff;
  font-size: 15px;
  text-decoration: none;
}
nav.tabs a:last-child {
  border-right: 0;
}
nav.tabs a[aria-current="page"] {
  background: var(--tab-on);
  font-weight: 700;
}
nav.tabs a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  background: var(--accent);
}


/* ---------- 5. キービジュアル・トップの題字 ---------- */
.hero {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
/* キービジュアル：幅いっぱい、写真本来の比率で切り抜かずに表示 */
.hero img.ph {
  width: 100%;
  height: auto;
  object-fit: fill;
  outline: none;
}
/* ページ名（写真の下） 見出しは文字サイズ切り替えの対象外 */
.hero .band {
  padding: 16px 64px 16px 22px;
}
.band .en {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 15px;
  line-height: 1.4;
  letter-spacing: .06em;
  color: var(--accent-text);
}
.band h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 32px;
  line-height: 1.3;
  letter-spacing: .06em;
  color: var(--gold-text);
}
.band .sub {
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.6;
}
/* キービジュアルの説明 */
.herocap {
  padding: 10px 22px 0;
  font-size: .72em;
  line-height: 1.7;
  color: var(--sub);
}
.herocap span {
  display: block;
  color: var(--accent-text);
}

/* トップの題字（人物に重ならないよう、表題写真の下に置く） */
.toptitle {
  padding: 26px 22px 8px;
}
.toptitle .kicker {
  font-size: 13px;
  letter-spacing: .14em;
  color: var(--gold-text);
}
.toptitle h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.2;
  color: var(--gold);
}
.nowrap {
  white-space: nowrap;
}
.toptitle .sub {
  font-size: 20px;
  color: var(--sub);
}


/* ---------- 6. 大きなボタン（入口・行き止まり防止） ---------- */
.gates {
  display: grid;
  gap: 12px;
  padding: 22px 20px 8px;
}
.gate {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 64px;
  padding: 16px 18px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: #fff;
  text-decoration: none;
}
.gate.primary {
  border-color: var(--gold);
}
.gate .t {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1em;
  line-height: 1.4;
}
.gate .s {
  display: block;
  margin-top: 2px;
  font-family: var(--sans);
  font-weight: 400;
  font-size: .68em;
  color: var(--sub);
}
.gate .arw {
  flex: none;
  font-size: 1.1em;
  color: var(--gold);
}


/* ---------- 7. 見出し・本文 ---------- */
/* 見出しの帯（ご挨拶・渡欧行程など／各章） */
.sec,
.chapter {
  scroll-margin-top: 16px;
  margin-top: 46px;
  padding: 12px 20px;
  border-top: 2px solid var(--accent);
  border-bottom: .5px solid var(--gold);
  background: var(--band);
  text-align: center;
}
.sec h2,
.chapter h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.25em;
  line-height: 1.5;
  letter-spacing: .08em;
  text-wrap: balance;
}
/* 章の帯：上の線は金茶、中央だけページの色 */
.chapter {
  position: relative;
  margin-top: 44px;
  border-top-color: var(--gold);
}
.chapter::after {
  content: "";
  position: absolute;
  top: -2px;
  left: 30%;
  width: 40%;
  height: 2px;
  background: var(--accent);
}
.chapter h2 {
  letter-spacing: .06em;
}
@media (min-width: 720px) {
  .chapter {
    margin-bottom: 22px;   /* PC・タブレットは枠付きの写真なので少し間を空ける */
  }
}
/* 「寄港地の様子」「船内の様子」 */
.group {
  padding: 0 20px 5px;
  font-family: var(--serif);
  font-size: 1.1em;
  letter-spacing: .2em;
  text-align: center;
  color: var(--accent-text);
}
.group::before,
.group::after {
  content: "―";
  margin: 0 .6em;
  color: var(--side);
}

.prose {
  padding: 8px 22px 0;
}
.sec + .prose {
  padding-top: 50px;
  font-family: var(--serif);
}
.prose p {
  margin-bottom: 1em;
  text-indent: 1em;
}
/* 署名（ご挨拶・解説） */
.sign {
  font-size: .85em;
  text-align: right;
  color: var(--sub);
}
.sign b {
  display: block;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.9em;
  color: var(--ink);
}


/* ---------- 8. 写真・キャプション ---------- */
.photo {
  display: flex;
  justify-content: center;
  background: var(--field);
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.print {
  position: relative;
  line-height: 0;
}
.print::after {
  content: "";             /* 写真の上に透明な膜を置き、長押し保存を抑止 */
  position: absolute;
  inset: 0;
}
/* 写真：高さに上限（スマホ横向きでもはみ出さない）。--r は 横÷縦（HTML側で指定） */
.ph {
  width: min(100vw, calc(80svh * var(--r)));
  background: repeating-linear-gradient(45deg, #E2DCD1 0 12px, #EAE5DC 12px 24px);   /* 読み込み中に見える地 */
}
img.ph {
  display: block;
  height: auto;
  object-fit: cover;
  outline: 1px solid rgba(40, 30, 10, .10);   /* 空が白い写真でも台紙との境目を見せる */
  outline-offset: -1px;
}
/* タブレット・PC：白い縁で囲む */
@media (min-width: 720px) {
  .photo {
    padding: 0 0 4px;
    background: none;
  }
  .print {
    padding: 6px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(60, 45, 20, .16);
  }
  .ph {
    width: min(600px, calc(70svh * var(--r)));
  }
}

figure {
  margin: 0 0 46px;
}
figcaption {
  padding: 14px 22px 0;
  font-size: .9em;
}
@media (min-width: 720px) {
  figcaption {
    max-width: 604px;
    margin: 0 auto;
    padding: 14px 0 0;
  }
}
/* 「西に旅して」の引用 */
.quote {
  margin: .5em 0 0;
  padding: 15px 1em;
  border-left: 2px solid var(--side);
  background: var(--side-lt);
  font-style: italic;
  font-size: .95em;
  line-height: 1.5em;
  color: #34312C;
}
.quote .src {
  display: inline-block;
  margin-top: 2px;
  font-size: .85em;
  color: var(--sub);
}
/* 撮影地・撮影日 */
.meta {
  margin-top: 8px;
  font-size: .8em;
  color: var(--sub);
}
.meta span {
  color: var(--accent-text);
}


/* ---------- 9. 地図・章の一覧 ---------- */
.mapnote {
  padding: 16px 22px 0;
  font-size: .8em;
  text-align: center;
}
.mapnote span {
  display: inline-block;   /* 文の区切りでだけ改行させる */
}
.mapsub {
  padding: 30px 20px 10px;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.1em;
  letter-spacing: .1em;
  text-align: center;
}
.mapbox {
  position: relative;
  margin: 6px 20px 0;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: #E9EEF0;
}
.mapbox .base {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
}
.mapbox svg.over {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.over .route {             /* 航路 */
  fill: none;
  stroke: #8C6B2D;
  stroke-width: 1.6;
  stroke-linejoin: round;
  opacity: .75;
  vector-effect: non-scaling-stroke;
}
.over .lead {              /* 番号の丸からの引き出し線 */
  stroke: var(--accent);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}
.over .spot {              /* 引き出し線の先の地点 */
  fill: var(--accent);
  stroke: #fff;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}
.over .visited {           /* 夫妻が訪れた町（写真なし） */
  fill: #fff;
  stroke: #A68E66;
  stroke-width: 1.6;
  vector-effect: non-scaling-stroke;
}
/* 番号の丸：画面の大きさに関わらず一定の大きさ。押せる範囲は周りに広げる */
.pin {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
  font-family: var(--sans);
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  color: #fff;
  text-decoration: none;
  transform: translate(-50%, -50%);
  transition: transform .08s ease;
}
.pin::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
}
.pin:active {
  transform: translate(-50%, -50%) scale(.9);
}
/* 船内の様子：地図の右上に置く囲み */
.shipbox {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  padding: 6px 10px 4px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: rgba(251, 249, 245, .95);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
}
.shipbox .h {
  margin-bottom: 2px;
  font-family: var(--serif);
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: .1em;
  color: var(--accent-text);
}
.shipbox a {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  font-size: 13px;
  line-height: 1.3;
  white-space: nowrap;
  text-decoration: none;
}
.shipbox .num {
  min-width: 26px;
  height: 26px;
  font-size: 13px;
}
/* 凡例（世界地図・ヨーロッパ地図で共通） */
.maplegend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 16px;
  padding: 10px 22px 0;
  font-size: 13px;
  text-align: center;
  color: var(--sub);
}
.maplegend .lg-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.lg-pin,
.lg-visited {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 4px;
  border-radius: 50%;
  vertical-align: -1px;
}
.lg-pin {
  background: var(--accent);
}
.lg-visited {
  border: 1.5px solid #A68E66;
  background: #fff;
}
.lg-route {
  display: inline-block;
  width: 20px;
  height: 0;
  border-top: 2px solid #8C6B2D;
  opacity: .75;
}

/* 地図の下の章の一覧 */
.toc {
  list-style: none;
  padding: 10px 20px 0;
}
.toc .gh {
  padding: 16px 0 4px;
  font-size: .72em;
  letter-spacing: .12em;
  color: var(--accent-text);
}
.toc a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 10px 2px;
  border-bottom: 1px dotted var(--side);
  font-size: .9em;
  text-decoration: none;
}
.toc a .n {
  flex: 1;
}
.toc a .c {
  font-size: .78em;
  color: var(--sub);
}
/* 番号の丸（地図の番号と同じ見た目） */
.num {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--accent);
  font-family: var(--sans);
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  color: #fff;
}


/* ---------- 10. 旅程（区分ごとにまとめる） ---------- */
.route {
  padding: 4px 22px 0;
}
.year {
  margin: 22px 0 0;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--serif);
  font-size: 1.3em;
  color: var(--gold-text);
}
/* 区分の見出し（往路　箱根丸／第1回周遊 など） */
.route-v2 .stage {
  margin: 16px 0 2px;
  padding: 1px 5px 1px 10px;
  border-left: 5px solid var(--accent-text);
  background: var(--band);
  font-family: var(--serif);
  font-weight: 600;
  font-size: .95em;
  letter-spacing: .06em;
  color: var(--accent-text);
}
/* 区分の線の色：船の旅（往路・復路）は青、ヨーロッパでの滞在・周遊は緑 */
.route-v2 .stage.stage-ship {
  border-left-color: #418BAF;
}
.route-v2 .stage.stage-europe {
  border-left-color: #66946C;
}
/* 日付｜地名の2列。日付の列は全区分で同じ幅にそろえ、日付は折り返さない */
.route-v2 .legs {
  display: grid;
  grid-template-columns: 8.2em 1fr;
  column-gap: 5px;
  margin: 0;
  font-size: 1em;
}
.route-v2 .legs dt,
.route-v2 .legs dd {
  margin: 0;
  padding: 6px 2px;
  border-bottom: 1px dotted var(--side);
  line-height: 1.55;
}
.route-v2 .legs dt {
  font-size: .86em;
  white-space: nowrap;
  color: var(--sub);
}
.route-v2 .legs dd {
  font-size: .96em;
}
/* 各区分の最後の行だけ、下の線をなくす */
.route-v2 .legs dt:nth-last-child(2),
.route-v2 .legs dd:last-child {
  border-bottom: 0;
}
/* 幅の狭いスマホでは、日付を地名の上に置く */
@media (max-width: 359px) {
  .route-v2 .legs {
    grid-template-columns: 1fr;
  }
  .route-v2 .legs dt {
    padding-bottom: 0;
    border-bottom: 0;
  }
}


/* ---------- 11. プロジェクトの名前欄 ---------- */
.sign-s {
  margin-top: 30px;
  font-size: .85em;
  text-align: left;
  text-indent: 0;
  color: var(--sub);
}
/* 役職と名前を左揃えで並べる */
.members {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .35em 1em;
  margin: .6em 0 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.1em;
  line-height: 1.6;
  color: var(--ink);
}
.members dt {
  white-space: nowrap;
}
.members dd {
  min-width: 0;
  margin: 0;
}
.members dd span {
  white-space: nowrap;     /* 名前と年の途中では改行しない */
}
/* アルバイト：PCは3人を1行、スマホと「大きく」は現役2人の下に長沼さん */
.members .one-line {
  display: none;
}
@media (min-width: 720px) {
  html:not(.big) .members .one-line {
    display: inline;
  }
  html:not(.big) .members .two-line {
    display: none;
  }
}
/* スマホ：役職を名前の上に置き、名前を1行で読めるように */
@media (max-width: 719px) {
  .members {
    grid-template-columns: 1fr;
    row-gap: 0;
  }
  .members dt {
    margin-top: .7em;
    font-size: .78em;
    color: var(--sub);
  }
  .members dt:first-child {
    margin-top: 0;
  }
  html:not(.big) .members dd {
    white-space: nowrap;   /* 「大きく」のときは折り返しを許す（はみ出し防止） */
  }
}
@media (max-width: 359px) {
  html.big .members dd span {
    white-space: normal;   /* 幅の狭い端末で「大きく」のとき */
  }
}


/* ---------- 12. ページ下部・フッター ---------- */
.endnav {
  margin-top: 40px;
  padding-top: 6px;
  border-top: 1px solid var(--rule);
}
.endnav .lead {
  padding: 20px 20px 0;
  font-size: .72em;
  text-align: center;
  color: var(--sub);
}
footer {
  padding: 34px 20px 0;
  font-size: 13px;
  text-align: center;
  color: var(--sub);
}


/* ---------- 13. 目次ボタン・閉じるボタン ----------
   開く：目次ボタンがフェードアウト → 消えてから閉じるボタンがフェードイン
   閉じる：閉じるボタンがすぐフェードアウト → パネルが下りきってから目次ボタンがフェードイン */
.tocbtn {
  position: fixed;
  left: 50%;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 0 32px;
  border: 0;
  border-radius: 999px;
  background: var(--gold-text);
  box-shadow: 0 6px 18px rgba(60, 40, 10, .28);
  color: #fff;
  white-space: nowrap;
  transform: translateX(-50%);
  opacity: 1;
  transition: opacity .22s ease .32s;          /* 戻るとき：パネルが下りるのを待ってから */
}
.tocbtn b {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: .14em;
}
.tocbtn .here {
  padding-left: 10px;
  border-left: 1px solid rgba(255, 255, 255, .45);
  font-size: 13px;
  opacity: .9;
}
body.toc-open .tocbtn {
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;               /* 消えるとき：すぐに */
}

/* 閉じるボタン：目次ボタンがあった場所に置く */
.closebtn {
  position: fixed;
  left: 50%;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 70;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 54px;
  padding: 0 26px;
  border: 1.5px solid var(--gold-text);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(60, 40, 10, .2);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: .14em;
  color: var(--gold-text);
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity .1s ease;                /* 閉じるとき：すぐに消える */
}
.closebtn::before {
  content: "×";
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1;
}
.sheet.on .closebtn {
  opacity: 1;
  transition: opacity .22s ease .2s;           /* 目次ボタンが消えてから現れる */
}


/* ---------- 14. 目次パネル ---------- */
/* 常に配置しておき、表示・非表示を切り替える（閉じる動きを見せるため、非表示は動きの後） */
.sheet {
  position: fixed;
  inset: 0;
  z-index: 60;
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear .34s;
}
.sheet.on {
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}
.veil {
  position: absolute;
  inset: 0;
  background: rgba(28, 28, 26, .45);
  opacity: 0;
  transition: opacity .34s ease;
}
.sheet.on .veil {
  opacity: 1;
}
/* 閉じるボタンの後ろ：下から台紙の色でぼかし、行がボタンにかぶって見えないように */
.sheet::after {
  content: "";
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 65;
  width: min(100%, 720px);
  height: calc(96px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to bottom, rgba(251, 249, 245, 0), var(--paper) 55%);
  transform: translateX(-50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s ease;
}
.sheet.on::after {
  opacity: 1;
}

/* パネル：本文と同じ幅で、下からせり上がる */
.panel {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(100%, 720px);
  transform: translate(-50%, calc(100% - 43px - env(safe-area-inset-bottom, 0px)));
  transition: transform .34s cubic-bezier(.2, .8, .2, 1);
}
.sheet.on .panel {
  transform: translate(-50%, 0);
}
.ptab {
  display: none;           /* パネル上端の「目次」は表示しない（HTMLには残っている） */
}
/* 中身：透明から不透明へ。上からページの切り替え → 章の一覧 → ページの先頭へ → 文字の大きさ */
.pbody {
  position: relative;      /* 章の位置を測る基準 */
  display: flex;
  flex-direction: column;
  max-height: calc(80svh - 30px);
  padding: 0 0 calc(104px + env(safe-area-inset-bottom, 0px));
  overflow: auto;
  overscroll-behavior: contain;
  isolation: isolate;
  border-radius: 16px 16px 0 0;
  background: var(--paper);
  box-shadow: 0 -6px 24px rgba(40, 30, 10, .18);
  opacity: 0;
  transition: opacity .16s ease;
}
.sheet.on .pbody {
  opacity: 1;
}
.pbody > .plist { order: 1; }
.pbody > .totop { order: 2; }
.pbody > .prow  { order: 3; }

/* ページの切り替え：横並び3つ、パネルの一番上に固定 */
.plist {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  list-style: none;
}
.plist > li {
  display: contents;
}
.plist > li > a {
  position: sticky;
  top: 0;
  z-index: 2;
  grid-row: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 52px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
  background: var(--paper);
  box-shadow: 0 3px 4px -3px rgba(60, 45, 20, .18);   /* 一覧がこの下を流れることが分かるように */
  font-family: var(--sans);
  font-weight: 600;
  font-size: 15px;
  text-align: center;
  text-decoration: none;
}
.plist > li:first-child > a {
  border-top-left-radius: 16px;
}
.plist > li:last-child > a {
  border-right: 0;
  border-top-right-radius: 16px;
}
.plist > li > a[aria-current="page"] {
  background: var(--tab-on);
  box-shadow: inset 0 -4px 0 var(--accent), 0 3px 4px -3px rgba(60, 45, 20, .18);
  color: var(--ink);
}

/* 表示中のページの章 */
.sub-list {
  grid-row: 2;
  grid-column: 1 / -1;
  list-style: none;
  padding: 4px 0 0;
  background: #fff;
}
.sub-list .gh {
  padding: 12px 18px 2px 30px;
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--accent-text);
}
.sub-list a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 18px 12px 26px;
  border-left: 4px solid transparent;
  font-size: 15px;
  text-decoration: none;
}
.sub-list a::before {      /* 章の頭の「＞」 */
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  margin-left: 2px;
  border-top: 2px solid var(--accent);
  border-right: 2px solid var(--accent);
  transform: rotate(45deg);
}
.sub-list a.here {
  border-left-color: var(--accent);
  background: var(--tab-on);
  font-weight: 700;
}

/* ページの先頭へ・文字の大きさ */
.totop {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 52px;
  padding: 14px 18px;
  border: 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: none;
  font-size: 15px;
  text-align: left;
}
.totop::before {
  content: "↑";
  font-weight: 700;
  color: var(--gold);
}
.prow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--rule);
}
.prow .lbl {
  font-size: 15px;
}


/* ---------- 15. マウス操作の端末だけの反応（タブレットでは色が残らないように） ---------- */
@media (hover: hover) {
  .gate:hover,
  nav.tabs a:hover,
  .sub-list a:hover,
  .plist > li > a:hover,
  .totop:hover,
  .closebtn:hover,
  .shipbox a:hover {
    background: var(--tab-on);
  }
  .sizer button:hover {
    border-color: var(--gold);
  }
  .tocbtn:hover {
    background: #5C4419;
  }
  .pin:hover {
    filter: brightness(1.08);
  }
}


/* ---------- 16. 動きを減らす設定の端末 ---------- */
@media (prefers-reduced-motion: reduce) {
  .sheet, .veil, .panel, .pbody, .sheet::after,
  .tocbtn, body.toc-open .tocbtn,
  .closebtn, .sheet.on .closebtn {
    transition: none !important;
  }
}