@charset "UTF-8";
/* =========================================================
   株式会社粟島酒造 ── 共通スタイル
   -----------------------------------------------------------
   類型E ── 醸造・老舗
   実測: 大嶺酒造 https://www.ohmine.jp/（構造）
         一保堂茶舗 https://www.ippodo-tea.co.jp/（美意識）
   実測日 2026-08-24 ／ 根拠は design-system.md を参照

   多層サイトのため、CLAUDE.md の「HTMLは1ファイル完結」からは
   意図的に外れています。11ページに同じCSSを複製すると保守できないため。
   色や字組みを変えるときは、この :root だけを触れば全ページに効きます。
   ========================================================= */
:root{
  /* 地 ── 純白を使わない。紙に寄せる */
  --ground:    #F7F6F3;   /* 大嶺 #f7f7f7 を暖色側へ。生成りの紙 */
  --ground-2:  #EFEDE8;   /* 帯・セクションの地 */
  --paper:     #FFFFFF;   /* 浮かせたい面だけ */

  /* インク ── 一保堂の実測値。純黒を使わない */
  --ink:       #2B2A28;   /* 見出し */
  --ink-body:  #4E4E4E;   /* 本文。一保堂実測（130箇所） */
  --ink-soft:  #969696;   /* 補足・キャプション。一保堂実測 */
  --line:      #DCD9D2;   /* 境界。地色に溶かす */

  /* 差し色 ── 2色まで。増やさない */
  --deep:      #1A263A;   /* 藍。一保堂実測の紺 */
  --deep-soft: #8C9AAE;   /* 藍地の上の補足 */
  --deep-body: #C3C9D4;   /* 藍地の上の本文 */
  --accent:    #93806F;   /* 木と米。一保堂実測の茶 */
  --on-deep:   #EDEAE3;   /* 藍地の上の見出し。純白を置かない */

  /* 書体 */
  --f-en:      "Raleway", sans-serif;       /* 大嶺実測（155箇所） */
  --f-mincho:  "Shippori Mincho", serif;    /* 一保堂の游明朝の代替 */
  --f-gothic:  "Noto Sans JP", sans-serif;  /* 一保堂の Source Han Sans */

  /* 字組み ── 見出し字間は両参照サイトとも 0.14em で一致した */
  --ls-h:   0.14em;
  --ls-b:   0.1em;
  --ls-en:  0.22em;
  --lh-b:   2.0;
  --fs-b:   15px;
  --radius: 4px;

  --pad:    clamp(20px, 6vw, 64px);   /* 左右の余白 */
  --gap-s:  clamp(64px, 12vw, 132px); /* セクション間の余白 */
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--ground); color:var(--ink-body);
  font-family:var(--f-gothic); font-weight:400;
  font-size:var(--fs-b); line-height:var(--lh-b); letter-spacing:var(--ls-b);
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
.wrap{max-width:1080px;margin:0 auto;padding:0 var(--pad)}
.narrow{max-width:760px}
.center{margin-left:auto;margin-right:auto}

/* ==== 見出しと本文 ==== */
.eyebrow{
  font-family:var(--f-en); font-weight:400; font-size:11px;
  letter-spacing:var(--ls-en); color:var(--accent);
  text-transform:uppercase; line-height:1;
}
.eyebrow::before{content:"";display:inline-block;width:28px;height:1px;
  background:var(--accent);vertical-align:middle;margin-right:14px}
.eyebrow.plain::before{display:none}

h1,h2{
  font-family:var(--f-mincho); font-weight:400; color:var(--ink);
  line-height:1.5; letter-spacing:var(--ls-h);
}
h1{font-size:clamp(24px,4.4vw,38px)}
h2{font-size:clamp(21px,3.4vw,30px); margin:18px 0 0}
h3{
  font-family:var(--f-mincho); font-weight:500; color:var(--ink);
  font-size:17px; line-height:1.6; letter-spacing:var(--ls-h);
}
h4{font-family:var(--f-mincho);font-weight:500;color:var(--ink);
  font-size:14px;line-height:1.7;letter-spacing:var(--ls-h)}
p+p{margin-top:1.4em}
.lead{font-family:var(--f-mincho);font-size:clamp(15px,2vw,17px);color:var(--ink);line-height:2.1}
.note{font-size:12px;color:var(--ink-soft);line-height:1.9;letter-spacing:0.06em}
.tate{writing-mode:vertical-rl;text-orientation:upright}

/* ==== サンプル告知バー（正式公開時はこの div を各ページから削除する） ==== */
.sample-bar{
  background:var(--accent); color:#fff; text-align:center;
  font-size:11px; letter-spacing:0.08em; line-height:1.7; padding:7px 16px;
}

/* ==== ヘッダー ==== */
header{border-bottom:1px solid var(--line);background:var(--ground)}
.head-in{display:flex;align-items:center;justify-content:space-between;
  gap:24px;min-height:76px;flex-wrap:wrap;padding-top:14px;padding-bottom:14px}
.brand{font-family:var(--f-mincho);font-size:19px;letter-spacing:0.2em;color:var(--ink);white-space:nowrap}
.brand small{display:block;font-family:var(--f-en);font-size:9px;
  letter-spacing:var(--ls-en);color:var(--ink-soft);margin-top:5px}
nav ul{display:flex;flex-wrap:wrap;gap:clamp(14px,2.6vw,30px);list-style:none}
nav a{font-size:12px;letter-spacing:0.12em;color:var(--ink-body);padding-bottom:3px;
  border-bottom:1px solid transparent;transition:border-color .2s}
nav a:hover{border-bottom-color:var(--accent)}
nav a[aria-current="page"]{border-bottom-color:var(--accent);color:var(--ink)}

/* ==== パンくず ==== */
.crumb{border-bottom:1px solid var(--line);background:var(--ground)}
.crumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:10px;
  padding-top:13px;padding-bottom:13px;font-size:11px;color:var(--ink-soft);letter-spacing:0.08em}
.crumb li+li::before{content:"／";margin-right:10px;color:var(--line)}
.crumb a:hover{color:var(--accent)}

/* ==== トップのファーストビュー ==== */
/* 暗幕は一律の opacity ではなくグラデーションで掛ける。
   一律だと、もともと暗い写真（貯蔵蔵など）が真っ黒に潰れてしまうため。 */
.hero{position:relative;background:var(--deep)}
.hero img{width:100%;height:clamp(360px,78vh,660px);object-fit:cover;
  position:relative;z-index:0}
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(26,38,58,.14) 0%, rgba(26,38,58,.24) 38%, rgba(26,38,58,.80) 100%)}
.hero-txt{position:absolute;left:0;right:0;bottom:clamp(28px,6vw,58px);
  color:var(--on-deep);z-index:2}
.hero-txt .k{
  font-family:var(--f-mincho);font-size:clamp(19px,4.2vw,34px);
  line-height:1.9;letter-spacing:0.16em;font-weight:400;color:var(--on-deep);
}
.hero-txt .s{margin-top:16px;font-size:12px;letter-spacing:0.16em;opacity:.85;line-height:2}
/* 語のまとまりで改行させる。スマホで語尾だけが折り返るのを防ぐ */
.hero-txt .s span{white-space:nowrap;margin-right:1.6em;display:inline-block}

/* 蔵の概要4項目。4つとも本文のあるページへの入口なのでリンクにしてある。
   矢印は常時薄く出しておく（ホバーの無い端末でも押せると分かるように）。 */
.hero-meta{display:flex;flex-wrap:wrap;border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);background:var(--ground-2)}
.hero-meta a{flex:1 1 190px;padding:22px var(--pad);border-right:1px solid var(--line);
  transition:background-color .25s}
.hero-meta a:last-child{border-right:0}
.hero-meta a:hover{background:var(--paper)}
.hero-meta .l{display:block;font-family:var(--f-en);font-size:10px;
  letter-spacing:var(--ls-en);color:var(--ink-soft)}
.hero-meta .l::after{content:"\2192";margin-left:9px;color:var(--accent);
  opacity:.45;display:inline-block;transition:opacity .25s,transform .25s}
.hero-meta a:hover .l::after{opacity:1;transform:translateX(4px)}
.hero-meta .v{display:block;font-family:var(--f-mincho);font-size:16px;color:var(--ink);
  letter-spacing:var(--ls-h);margin-top:9px;line-height:1.6}
/* 人名・熟語の途中で改行させない */
.hero-meta .v>span{white-space:nowrap}

/* リンク先の見出しが画面の上端に貼りつかないようにする */
:target,[id]{scroll-margin-top:24px}

/* ==== 下層ページの見出し帯 ==== */
.page-head{position:relative;background:var(--deep);color:var(--on-deep)}
.page-head img{width:100%;height:clamp(230px,42vh,400px);object-fit:cover;
  position:relative;z-index:0}
.page-head:not(.flat)::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(26,38,58,.20) 0%, rgba(26,38,58,.34) 40%, rgba(26,38,58,.84) 100%)}
.page-head .ttl{position:absolute;left:0;right:0;bottom:clamp(22px,4vw,40px);z-index:2}
.page-head h1{color:var(--on-deep)}
.page-head .eyebrow{color:var(--deep-soft)}
.page-head .eyebrow::before{background:var(--deep-soft)}
.page-head.flat{padding:clamp(48px,8vw,86px) 0 clamp(40px,6vw,62px);
  background:var(--ground-2);color:var(--ink-body);
  border-bottom:1px solid var(--line)}
.page-head.flat h1{color:var(--ink)}
.page-head.flat .eyebrow{color:var(--accent)}
.page-head.flat .eyebrow::before{background:var(--accent)}
.page-head .sub{margin-top:16px;font-size:13px;line-height:2;letter-spacing:0.1em;max-width:640px}
.page-head:not(.flat) .sub{color:var(--deep-body)}

/* ==== 共通セクション ==== */
section{padding:var(--gap-s) 0}
section.tight{padding:clamp(48px,8vw,80px) 0}
.banded{background:var(--ground-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec-head{margin-bottom:clamp(32px,5vw,52px)}

/* ==== 藍帯 ==== */
.deep-band{background:var(--deep);color:var(--on-deep);padding:clamp(64px,10vw,110px) 0}
.deep-band .eyebrow{color:var(--deep-soft)}
.deep-band .eyebrow::before{background:var(--deep-soft)}
.deep-band h2,.deep-band h3{color:var(--on-deep)}
.deep-band p{color:var(--deep-body)}
/* 理念の一節。<br> で3行に割ってあるので、縦組みでは3列にきれいに落ちる。
   高さを固定すると中途半端な位置で折り返って列が不揃いになるため、height は auto のまま。 */
.creed-inner{margin-top:clamp(28px,4vw,44px)}
.creed-q{font-family:var(--f-mincho);font-size:clamp(18px,2.7vw,24px);color:var(--on-deep);
  line-height:2.2;letter-spacing:0.18em}
@media (min-width:900px){
  .creed-inner{display:flex;flex-direction:row-reverse;
    gap:clamp(48px,7vw,92px);align-items:flex-start}
  .creed-q{writing-mode:vertical-rl;text-orientation:upright;
    flex:0 0 auto;height:auto;line-height:2.6}
  .creed .body-col{flex:1 1 auto;max-width:620px}
  .creed .body-col p:first-child{margin-top:0}
}

/* ==== 2カラム（文章＋写真） ==== */
.two{display:grid;gap:clamp(30px,5vw,60px);align-items:center}
@media (min-width:820px){
  .two{grid-template-columns:1fr 1fr}
  .two.rev .fig{order:-1}
}
.fig figcaption{font-size:11px;color:var(--ink-soft);letter-spacing:0.08em;margin-top:10px;line-height:1.8}

/* ==== 三本柱・均等セル ==== */
.cells{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  margin-top:clamp(34px,5vw,54px)}
@media (min-width:760px){
  .cells.c3{grid-template-columns:repeat(3,1fr)}
  .cells.c2{grid-template-columns:repeat(2,1fr)}
}
.cells>div{background:var(--ground);--cell-pad:clamp(26px,3.4vw,38px);padding:var(--cell-pad)}
/* セル頭の写真。左右と上は余白の外まで伸ばして、断ち切りに見せる */
.cells .thumb{max-width:none;width:calc(100% + var(--cell-pad) * 2);
  height:clamp(150px,17vw,190px);object-fit:cover;
  margin:calc(var(--cell-pad) * -1) calc(var(--cell-pad) * -1) var(--cell-pad)}
.banded .cells>div{background:var(--ground-2)}
.cells .n{font-family:var(--f-en);font-size:10px;letter-spacing:var(--ls-en);color:var(--accent)}
.cells h3{margin:12px 0}
.cells p{font-size:14px;line-height:1.95}

/* ==== トップの導線 ====
   囲みのカードにしない。写真・罫・文字を縦に積むだけにして、
   参照2サイト（大嶺・一保堂）の見せ方に寄せる。 */
.gate{display:grid;gap:clamp(34px,4vw,52px)}
@media (min-width:700px){.gate{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.gate.g3{grid-template-columns:repeat(3,1fr)}}
.gate a{display:block}
.gate img{width:100%;height:clamp(200px,27vw,270px);object-fit:cover;
  transition:opacity .35s}
.gate a:hover img{opacity:.82}
.gate .b{margin-top:22px;padding-top:22px;border-top:1px solid var(--line);
  transition:border-color .35s}
.gate a:hover .b{border-top-color:var(--accent)}
.gate h3{margin-bottom:12px}
.gate p{font-size:13px;line-height:1.95;color:var(--ink-body)}
.gate .go{display:block;margin-top:18px;font-family:var(--f-en);font-size:10px;
  letter-spacing:var(--ls-en);color:var(--accent);transition:transform .3s}
.gate a:hover .go{transform:translateX(4px)}

/* ==== お酒の一覧 ==== */
.sake-list{border-top:1px solid var(--line);margin-top:clamp(34px,5vw,52px)}
.sake-row{display:grid;gap:6px 32px;padding:26px 0;border-bottom:1px solid var(--line);
  align-items:baseline;transition:background-color .2s}
a.sake-row:hover{background:var(--ground)}
.banded a.sake-row:hover{background:var(--paper)}
/* 瓶のサムネイル付きの一覧（お酒 一覧ページで使う） */
.sake-thumb{width:104px;height:104px;object-fit:cover;align-self:center}
@media (max-width:719px){.sake-thumb{width:88px;height:88px;margin-bottom:6px}}

@media (min-width:720px){
  /* 銘柄名の列は「羅摩船 — かがみぶね」が1行で収まる幅を確保する */
  .sake-list.with-thumb a.sake-row{grid-template-columns:104px 244px 1fr 132px 22px}
  .sake-row{grid-template-columns:230px 1fr 132px}
  /* 行がリンクであることを示す矢印。::after はグリッドの子として並ぶ */
  a.sake-row{grid-template-columns:230px 1fr 132px 22px}
  a.sake-row::after{content:"\2192";font-family:var(--f-en);font-size:13px;
    color:var(--accent);opacity:.45;align-self:center;text-align:right;
    transition:opacity .25s,transform .25s}
  a.sake-row:hover::after{opacity:1;transform:translateX(4px)}
}
/* keep-all で「かがみぶね」のような読みの途中で折り返らないようにする。
   区切りは屋号と読みのあいだの空白だけになる。 */
.sake-name{font-family:var(--f-mincho);font-size:19px;color:var(--ink);
  letter-spacing:var(--ls-h);line-height:1.5;word-break:keep-all}
.sake-name em{display:block;font-style:normal;font-family:var(--f-en);
  font-size:10px;letter-spacing:var(--ls-en);color:var(--ink-soft);margin-top:7px}
.sake-desc{font-size:14px;line-height:1.95}
.sake-desc b{display:block;font-weight:400;color:var(--accent);font-size:11px;
  letter-spacing:0.12em;margin-bottom:5px}
.sake-price{font-family:var(--f-en);font-size:13px;color:var(--ink);letter-spacing:0.06em}
.sake-price span{display:block;font-family:var(--f-gothic);font-size:11px;
  color:var(--ink-soft);margin-top:4px}

/* ==== 銘柄ページの仕様表 ==== */
.spec-grid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
@media (min-width:620px){.spec-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:900px){.spec-grid{grid-template-columns:repeat(4,1fr)}}
.spec-grid div{background:var(--ground);padding:22px clamp(18px,2.4vw,26px)}
.banded .spec-grid div{background:var(--ground-2)}
.spec-grid dt{font-family:var(--f-en);font-size:10px;letter-spacing:var(--ls-en);color:var(--ink-soft)}
.spec-grid dd{font-family:var(--f-mincho);font-size:19px;color:var(--ink);
  letter-spacing:var(--ls-h);margin-top:9px;line-height:1.4}
.spec-grid dd small{font-family:var(--f-gothic);font-size:11px;color:var(--ink-soft);
  letter-spacing:0.06em;display:block;margin-top:6px}

/* ==== 定義リスト（縦の表） ==== */
.spec{border-top:1px solid var(--line);width:100%;border-collapse:collapse}
.spec th,.spec td{border-bottom:1px solid var(--line);padding:15px 0;text-align:left;
  font-weight:400;font-size:14px;line-height:1.9;vertical-align:top}
.spec th{width:34%;color:var(--ink);font-family:var(--f-mincho);
  letter-spacing:var(--ls-h);padding-right:20px}
@media (max-width:560px){
  .spec th,.spec td{display:block;width:100%;border-bottom:0;padding:0}
  .spec th{padding-top:16px}
  .spec td{padding-bottom:16px;border-bottom:1px solid var(--line)}
}
dl.rows{border-top:1px solid var(--line)}
dl.rows dt{font-family:var(--f-mincho);color:var(--ink);font-size:13px;
  letter-spacing:var(--ls-h);padding-top:15px}
dl.rows dd{font-size:14px;line-height:1.9;padding-bottom:15px;border-bottom:1px solid var(--line)}

/* ==== 沿革・蔵の一年 ==== */
.chrono{border-top:1px solid var(--line)}
.chrono-row{display:grid;gap:4px 34px;padding:22px 0;border-bottom:1px solid var(--line)}
@media (min-width:720px){.chrono-row{grid-template-columns:190px 1fr}}
.chrono-yr{font-family:var(--f-mincho);font-size:15px;color:var(--ink);
  letter-spacing:var(--ls-h);white-space:nowrap}
.chrono-row .t{font-size:14px;line-height:1.95}
.chrono-row.mark .chrono-yr{color:var(--accent)}

/* ==== 引用（口伝・古文） ==== */
.quote{border-left:2px solid var(--accent);padding:6px 0 6px clamp(18px,3vw,30px);
  font-family:var(--f-mincho);color:var(--ink);font-size:clamp(15px,2vw,17px);line-height:2.2}
.quote cite{display:block;font-family:var(--f-gothic);font-style:normal;
  font-size:11px;color:var(--ink-soft);letter-spacing:0.08em;margin-top:14px}

/* ==== 前後送り ====
   フッターと同じ藍地にする。明るい帯にすると、藍帯とフッターに挟まれて
   隙間が空いたように見えてしまうため。 */
.pager{display:grid;gap:1px;background:rgba(237,234,227,.18)}
@media (min-width:640px){.pager{grid-template-columns:1fr 1fr}}
.pager a{background:var(--deep);color:var(--on-deep);
  padding:clamp(24px,3.2vw,34px) var(--pad);transition:background-color .25s}
.pager a:hover{background:#233149}
.pager .d{display:block;font-family:var(--f-en);font-size:10px;
  letter-spacing:var(--ls-en);color:var(--deep-soft)}
.pager .t{display:block;font-family:var(--f-mincho);font-size:17px;color:var(--on-deep);
  letter-spacing:var(--ls-h);margin-top:10px}
.pager a.next{text-align:right}
.pager a.next:only-child{grid-column:2}

/* ==== 文中リンク ==== */
.inline-link{color:var(--accent);border-bottom:1px solid var(--line);padding-bottom:1px}
.inline-link:hover{border-bottom-color:var(--accent)}

/* ==== キーボード操作 ==== */
.skip{position:absolute;left:-9999px;top:0;z-index:99;
  background:var(--deep);color:var(--on-deep);padding:12px 20px;
  font-size:13px;letter-spacing:0.1em}
.skip:focus{left:0}
a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ==== スクロールに合わせた出現 ====
   <html> に .js が付いたときだけ隠す。JSを切っている環境、IntersectionObserver が
   無い環境、視差効果を減らす設定の環境では、最初から見えたままになる。
   ファーストビューと見出し帯は対象外（読み込み直後に動くと壊れて見えるため）。 */
/* :where() で詳細度を 0 にしてある。こうしないと `.js .gate a`（要素セレクタを含む）が
   `.js .is-in` より強くなり、クラスが付いても透明のままになる。
   :where() 未対応のブラウザはこの規則ごと無視するので、最初から見えている状態になる。 */
.js :where(.sec-head, .fig, .gate a, .cells, .spec-grid, .spec, .chrono, .sake-list, .quote){
  opacity:0;transform:translateY(16px);
  transition:opacity .9s cubic-bezier(.2,.6,.2,1),transform .9s cubic-bezier(.2,.6,.2,1);
}
.js .is-in{opacity:1;transform:none}

/* ==== 404 ==== */
.notfound{min-height:56vh;display:flex;align-items:center;
  padding:clamp(64px,12vw,120px) 0;background:var(--deep);color:var(--on-deep)}
.notfound .eyebrow{color:var(--deep-soft)}
.notfound .eyebrow::before{background:var(--deep-soft)}
.notfound h1{color:var(--on-deep);margin-top:18px}
.notfound p{color:var(--deep-body);margin-top:26px;max-width:620px}

/* ==== フッター ==== */
footer{background:var(--deep);color:var(--on-deep);padding:clamp(52px,8vw,80px) 0 34px;
  border-top:1px solid rgba(237,234,227,.18)}
.foot-top{display:grid;gap:clamp(30px,5vw,60px)}
@media (min-width:820px){.foot-top{grid-template-columns:1fr 1.4fr}}
.foot-brand{font-family:var(--f-mincho);font-size:20px;letter-spacing:0.2em}
.foot-brand small{display:block;font-family:var(--f-en);font-size:9px;
  letter-spacing:var(--ls-en);color:var(--deep-soft);margin-top:8px}
footer address{font-style:normal;font-size:13px;line-height:2;
  color:var(--deep-body);letter-spacing:0.08em;margin-top:22px}
.foot-nav{display:grid;gap:26px}
@media (min-width:560px){.foot-nav{grid-template-columns:repeat(3,1fr)}}
.foot-nav h4{color:var(--on-deep);font-size:12px;letter-spacing:var(--ls-en);
  font-family:var(--f-en);font-weight:400;margin-bottom:14px}
.foot-nav ul{list-style:none;font-size:13px;line-height:2.2}
.foot-nav a{color:var(--deep-body)}
.foot-nav a:hover{color:var(--on-deep)}
.foot-bar{margin-top:clamp(40px,6vw,60px);padding-top:20px;
  border-top:1px solid rgba(237,234,227,.18);
  font-size:11px;color:var(--deep-soft);letter-spacing:0.08em;line-height:1.9}