@charset "utf-8";
/* 第26号 寒晶製氷所(架空)— 組版の決め
   見出し=游明朝 / 本文=游ゴシック。主色は「氷の藍」1色だけ。
   地は冷たい白(生成りではない)。直近 021〜024 が生成り・025 が濃紺なので、そのどちらでもない色に寄せた。 */

:root {
  --sumi: #121c24;          /* 墨 */
  --usu: #5c6d79;           /* 薄墨(補足) */
  --kami: #ffffff;          /* 紙 */
  --ji: #eaf0f3;            /* 地 */
  --ji-fuka: #dde6eb;       /* 地(濃) */
  --sen: #ccd8df;           /* 罫 */
  --shu: #1a6b8a;           /* 主色。罫・釦・強調だけに使う */
  --shu-d: #124e66;
  --shu-usu: #e5eff3;
  --dan: clamp(56px, 9vw, 132px);   /* 段の上下の余白 */
  --haba: 1080px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ji);
  color: var(--sumi);
  font-family: "游ゴシック体", YuGothic, "Yu Gothic Medium", "Yu Gothic", "Hiragino Sans", "ヒラギノ角ゴシック", Meiryo, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.95;
  letter-spacing: 0.04em;
  font-feature-settings: "palt" 1;
}

h1, h2, h3, .mincho {
  font-family: "游明朝", YuMincho, "Yu Mincho", "游明朝体", "Hiragino Mincho ProN", "ヒラギノ明朝 ProN", "MS PMincho", serif;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.55;
}

a { color: var(--shu-d); }
img { max-width: 100%; height: auto; display: block; }
p { margin: 0 0 1.1em; }

.hako { width: min(100% - 40px, var(--haba)); margin-inline: auto; }
.semai { width: min(100% - 40px, 760px); margin-inline: auto; }

/* ------------------------------------------------------------ 頭 */
.atama {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255, 255, 255, .93);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--sen);
}
.atama-naka {
  width: min(100% - 32px, var(--haba)); margin-inline: auto;
  display: flex; align-items: center; gap: 16px; min-height: 60px;
}
.yago { display: flex; align-items: baseline; gap: 10px; text-decoration: none; color: inherit; }
.yago b { font-family: "游明朝", YuMincho, "Yu Mincho", "Hiragino Mincho ProN", serif; font-size: 19px; letter-spacing: .14em; font-weight: 600; }
.yago span { font-size: 10px; letter-spacing: .28em; color: var(--usu); }
.michi { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.michi a {
  text-decoration: none; color: var(--sumi); font-size: 13.5px; letter-spacing: .12em;
  padding: 8px 12px; border-radius: 2px;
}
.michi a:hover { background: var(--shu-usu); color: var(--shu-d); }
.michi a[aria-current="page"] { color: var(--shu-d); box-shadow: inset 0 -2px 0 var(--shu); }
.kago {
  display: inline-flex; align-items: center; gap: 7px; margin-left: 8px;
  padding: 8px 14px; border: 1px solid var(--shu); border-radius: 2px;
  color: var(--shu-d) !important; font-size: 13px; white-space: nowrap;
}
.kago:hover { background: var(--shu); color: #fff !important; }
.kazu {
  min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
  background: var(--shu); color: #fff; font-size: 11.5px; line-height: 20px; text-align: center;
  font-family: system-ui, sans-serif;
}
.kago:hover .kazu { background: #fff; color: var(--shu-d); }
.hiraku { display: none; }

@media (max-width: 860px) {
  .hiraku {
    display: inline-flex; align-items: center; justify-content: center; margin-left: auto;
    width: 68px; height: 40px; background: var(--kami); border: 1px solid var(--sen);
    border-radius: 2px; font-size: 11.5px; letter-spacing: .04em; color: var(--sumi); cursor: pointer;
    white-space: nowrap; font-family: inherit;
  }
  .michi {
    position: absolute; left: 0; right: 0; top: 100%; margin: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--kami); border-bottom: 1px solid var(--sen);
    padding: 6px 16px 16px;
  }
  .michi[hidden] { display: none; }
  .michi a { padding: 13px 4px; border-bottom: 1px dotted var(--sen); }
  .kago { margin: 12px 0 0; justify-content: center; }
}

/* ------------------------------------------------------------ 表紙 */
.omote { position: relative; background: #0d1418; color: #fff; overflow: hidden; }
.omote img { width: 100%; height: clamp(360px, 62vh, 620px); object-fit: cover; opacity: .92; }
.omote-ji {
  position: absolute; inset: 0; display: flex; align-items: center;
  background: linear-gradient(90deg, rgba(8,14,18,.86) 0%, rgba(8,14,18,.55) 46%, rgba(8,14,18,.08) 78%);
}
.omote-ji > div { width: min(100% - 40px, var(--haba)); margin-inline: auto; }
.omote h1 {
  color: #fff; margin: 0 0 18px;
  font-size: clamp(26px, 5.2vw, 46px); line-height: 1.5; letter-spacing: .05em;
  text-shadow: 0 2px 22px rgba(0,0,0,.5);
  max-width: 17em;
}
@media (max-width: 900px) {
  /* 横に効かせた覆いは、縦長の画面だと本文の右端が明るい氷に重なる。狭い幅では上下に掛け直す。 */
  .omote-ji { background: linear-gradient(180deg, rgba(8,14,18,.50) 0%, rgba(8,14,18,.80) 48%, rgba(8,14,18,.88) 100%); }
}
.omote p { color: #dfe8ed; max-width: 27em; font-size: clamp(13.5px, 1.6vw, 15.5px); margin: 0; }
.deru { opacity: 0; transform: translateY(14px); transition: opacity .9s ease, transform .9s ease; }
.deru.kita { opacity: 1; transform: none; }
.deru:nth-child(2) { transition-delay: .18s; }

/* ------------------------------------------------------------ 段 */
.dan { padding: var(--dan) 0; }
.dan-shiro { background: var(--kami); }
.dan h2 {
  font-size: clamp(20px, 3.2vw, 30px); margin: 0 0 8px; max-width: 20em;
}
.mae { font-size: 11px; letter-spacing: .3em; color: var(--shu-d); margin: 0 0 14px; font-family: system-ui, sans-serif; }
.riido { max-width: 40em; color: #2c3a45; }

/* 数字の帯 */
.suuji { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--sen); border: 1px solid var(--sen); }
.suuji div { background: var(--kami); padding: 22px 18px; }
.suuji b { display: block; font-family: "游明朝", YuMincho, "Hiragino Mincho ProN", serif; font-size: 27px; letter-spacing: .02em; line-height: 1.2; }
.suuji small { display: block; margin-top: 7px; font-size: 11.5px; color: var(--usu); letter-spacing: .1em; }

/* 二段組 */
.futatsu { display: grid; gap: clamp(26px, 4vw, 54px); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 900px) { .futatsu { grid-template-columns: 1.05fr 1fr; } .futatsu.gyaku > :first-child { order: 2; } }

figure { margin: 0; }
figcaption { margin-top: 10px; font-size: 12px; color: var(--usu); letter-spacing: .06em; line-height: 1.8; }

/* 引用のような一文 */
.hitokoto {
  border-left: 3px solid var(--shu); padding: 4px 0 4px 20px; margin: 30px 0;
  font-family: "游明朝", YuMincho, "Hiragino Mincho ProN", serif;
  font-size: clamp(16px, 2.2vw, 20px); line-height: 1.85; letter-spacing: .05em;
}

/* 釦 */
.botan {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 26px; background: var(--shu); color: #fff; text-decoration: none;
  border: 1px solid var(--shu); border-radius: 2px; font-size: 14px; letter-spacing: .1em; cursor: pointer;
  transition: background .18s ease, color .18s ease;
  font-family: inherit;
}
.botan:hover { background: var(--shu-d); border-color: var(--shu-d); }
.botan.usu { background: transparent; color: var(--shu-d); }
.botan.usu:hover { background: var(--shu); color: #fff; }
:focus-visible { outline: 2px solid var(--shu); outline-offset: 2px; }

/* 表 */
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { border-bottom: 1px solid var(--sen); padding: 12px 10px; text-align: left; vertical-align: top; }
th { font-weight: 600; color: var(--usu); font-size: 12.5px; letter-spacing: .08em; white-space: nowrap; }
td b { font-family: "游明朝", YuMincho, serif; font-size: 16px; }
.hyou-maki { overflow-x: auto; }

/* ------------------------------------------------------------ 凍る(重ねて置く図)
   狭い幅では grid にしない。**grid の item は自分の行から出られないので、貼りつきが効かない。**
   縦並びのときは block にして、段落の列と同じ流れに入れる(そうしてはじめて図が上に残る)。 */
.tsumu { display: block; }
.haritsuki {
  position: sticky; top: 61px; z-index: 5;
  background: var(--ji); padding: 10px 0 12px;
}
.haritsuki svg {
  width: 100%; max-width: min(100%, 46vh); margin-inline: auto;
  height: auto; background: var(--kami); border: 1px solid var(--sen);
}
@media (min-width: 900px) {
  .tsumu { display: grid; gap: clamp(24px, 4vw, 48px); grid-template-columns: 460px 1fr; align-items: start; }
  .haritsuki { top: 84px; background: transparent; padding: 0; }
  .haritsuki svg { max-width: 100%; }
}
.dankai { padding: clamp(34px, 20vh, 150px) 0; border-bottom: 1px dotted var(--sen); }
.dankai:first-child { padding-top: clamp(20px, 6vh, 60px); }
.dankai:last-child { border-bottom: 0; }
.dankai h3 { font-size: clamp(17px, 2.5vw, 23px); margin: 0 0 10px; }
.dankai .toki { font-family: system-ui, sans-serif; font-size: 11px; letter-spacing: .3em; color: var(--shu-d); display: block; margin-bottom: 10px; }
.dankai[data-ima] h3, .dankai[data-ima] p { opacity: 1; }
.dankai h3, .dankai p { opacity: .38; transition: opacity .45s ease; }

/* 図の中で動く部分 */
#mizu, #shin, #awa, #kiri { transition: all .55s ease; }

/* ------------------------------------------------------------ 形の一覧 */
.shina { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); }
.fuda { background: var(--kami); border: 1px solid var(--sen); padding: 22px 20px 20px; display: flex; flex-direction: column; }
.fuda h3 { margin: 0 0 4px; font-size: 19px; }
.fuda .yomi { font-size: 11px; letter-spacing: .24em; color: var(--usu); font-family: system-ui, sans-serif; }
.fuda dl { margin: 14px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 5px 14px; font-size: 13px; }
.fuda dt { color: var(--usu); white-space: nowrap; }
.fuda dd { margin: 0; }
.fuda .setsu { margin: 14px 0 18px; font-size: 13.5px; color: #33424e; line-height: 1.9; }
.fuda .shita { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.fuda .ne { font-family: "游明朝", YuMincho, serif; font-size: 18px; }

/* ------------------------------------------------------------ 溶ける(棒) */
.kurabe { margin: 26px 0 0; }
.kurabe .retsu { display: grid; grid-template-columns: 8.5em 1fr 4.5em; align-items: center; gap: 12px; margin-bottom: 14px; font-size: 13.5px; }
.kurabe .bou { height: 16px; background: var(--ji-fuka); position: relative; overflow: hidden; }
.kurabe .bou i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--shu); transition: width 1.1s cubic-bezier(.2,.7,.3,1); }
.kurabe .bou.usui i { background: #9fb6c2; }
.kurabe .fun { text-align: right; font-family: "游明朝", YuMincho, serif; font-size: 16px; }

/* ------------------------------------------------------------ 注文 */
.chuumon { background: var(--kami); border: 1px solid var(--sen); padding: clamp(20px, 3vw, 34px); }
.gyou { display: grid; grid-template-columns: 1fr auto; gap: 10px 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--sen); }
.gyou .na { font-size: 14.5px; }
.gyou .na small { display: block; color: var(--usu); font-size: 11.5px; letter-spacing: .06em; }
.kazu-kumi { display: inline-flex; align-items: center; gap: 8px; }
input[type="number"], select, input[type="text"] {
  font-family: inherit; font-size: 15px; padding: 9px 10px; border: 1px solid var(--sen);
  background: #fff; color: var(--sumi); border-radius: 2px; width: 100%;
}
input[type="number"] { width: 5.5em; text-align: right; }
.erabu { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.erabu button {
  font-family: inherit; font-size: 13.5px; padding: 10px 16px; cursor: pointer;
  background: #fff; border: 1px solid var(--sen); border-radius: 2px; color: var(--sumi);
}
.erabu button[aria-pressed="true"] { background: var(--shu); border-color: var(--shu); color: #fff; }
.hikae {
  margin-top: 26px; padding: 22px 20px; background: var(--shu-usu);
  border: 1px solid #c3dae4; font-size: 14px; line-height: 2.05;
}
.hikae[hidden] { display: none; }
.hikae b { font-family: "游明朝", YuMincho, serif; font-size: 18px; }
.kotowari { font-size: 12px; color: var(--usu); line-height: 1.9; margin-top: 14px; }

/* ------------------------------------------------------------ 足 */
.ashi { background: #0f1a21; color: #b9c8d1; padding: clamp(40px, 6vw, 64px) 0 34px; font-size: 13px; line-height: 2; }
.ashi a { color: #cfe0e8; }
.ashi .kumi { display: grid; gap: 26px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .ashi .kumi { grid-template-columns: 1.4fr 1fr 1fr; } }
.ashi h4 { font-size: 12px; letter-spacing: .2em; color: #7f95a2; margin: 0 0 10px; font-weight: 600; }
.ashi ul { list-style: none; margin: 0; padding: 0; }
.ashi .kakuu {
  margin-top: 34px; padding-top: 20px; border-top: 1px solid #23333d;
  font-size: 11.5px; color: #8ea3ad; line-height: 1.95;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; }
  .deru { opacity: 1; transform: none; }
  .dankai h3, .dankai p { opacity: 1; }
}