@charset "utf-8";
/* =========================================================
   株式会社海島 / Shimabara Rebellion Beer
   色・文字・余白・動きは :root の変数を直すと全ページが変わる
   ========================================================= */
:root {
  /* 色 */
  --color-ink: #1E2328;        /* 墨：文字・ボタンの枠 */
  --color-paper: #F4EFE6;      /* 紙：基本の背景 */
  --color-sand: #EAE3D6;       /* 砂：区切りの背景 */
  --color-sea: #1D3B4F;        /* 海（藍）：メイン・リンク文字 */
  --color-amber: #C98A2B;      /* 琥珀：塗りつぶしボタンだけに使う */
  --color-sub: #5A5F63;        /* 補助の文字 */
  --color-on-sea-sub: #B9C4CC; /* 海の上の補助の文字 */
  --color-field: #767B7F;      /* 入力欄の枠 */

  /* 文字 */
  --font-head: "Shippori Mincho", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
  /* 本文は端末の書体（Google Fonts の Noto Sans JP は重さのため読み込まない。docs/03_tech.md 7章） */
  --font-body: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Noto Sans CJK JP", "Yu Gothic Medium", "YuGothic", "Meiryo", sans-serif;

  /* 余白・幅 */
  --space-section: 5rem;
  --width-max: 72rem;
  --width-text: 34em;
  --gutter: 1.5rem;

  /* 動き */
  --ease-tide: cubic-bezier(.22, .61, .36, 1); /* 最初に動き、静かに止まる */
  --dur-fast: .2s;   /* ボタンの色の反転 */
  --dur-base: .8s;   /* 文字の現れ方 */
  --dur-slow: 1.2s;  /* 海の帯・ラベルの覆い */
  --dur-line: 1.4s;  /* 島原とキエーティを結ぶ線 */
  --stagger: .22s;   /* 4本の時間差 */
  --rise: 12px;      /* 上下の移動の最大 */
}
@media (min-width: 768px) {
  :root { --gutter: 2.5rem; }
}
@media (min-width: 1024px) {
  :root { --space-section: 8rem; }
}

/* ===== 基本 ===== */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 1rem; }
body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.85;
  letter-spacing: .02em;
  overflow-wrap: break-word;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--color-sea); outline-offset: 3px; }
.on-sea :focus-visible { outline-color: var(--color-paper); }
.container { width: min(100% - var(--gutter) * 2, var(--width-max)); margin-inline: auto; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 50;
  background: var(--color-paper); padding: .5rem 1rem; border: 1.5px solid var(--color-ink);
}
.skip-link:focus { top: 1rem; }

/* 要確認の印（公開前に統括AIが外す） */
.tbd {
  display: inline-block;
  border: 1px solid var(--color-sub);
  color: var(--color-sub);
  font-family: var(--font-body); font-weight: 400;
  font-size: .8125rem; line-height: 1.5; letter-spacing: 0;
  padding: 0 .4em; margin-right: .4em;
  vertical-align: .1em;
}
.on-sea .tbd { border-color: var(--color-on-sea-sub); color: var(--color-on-sea-sub); }
.tbd-note { margin: .5rem 0 0; font-size: .875rem; color: var(--color-sub); line-height: 1.7; }
.on-sea .tbd-note { color: var(--color-on-sea-sub); }

/* ===== ヘッダー ===== */
.site-header { position: relative; z-index: 20; }
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-block: .75rem;
}
/* ロゴ：紋の画像（logo-mark.png）＋「海島」の文字 */
.logo {
  display: inline-flex; align-items: center; gap: .55rem;
  min-height: 44px; text-decoration: none; white-space: nowrap;
  font-family: var(--font-head); font-weight: 600; font-size: 1.375rem; letter-spacing: .08em;
}
.logo img { width: 2rem; height: 2rem; flex-shrink: 0; }
.site-footer__name { display: flex; align-items: center; gap: .5rem; }
.site-footer__name img { width: 1.75rem; height: 1.75rem; }
.menu-button {
  font: inherit; font-size: .9375rem; font-weight: 500; color: var(--color-ink); cursor: pointer;
  min-height: 44px; padding: 0 1rem; white-space: nowrap; flex-shrink: 0;
  background: transparent; border: 1.5px solid var(--color-ink); border-radius: 2px;
}
.site-nav ul { list-style: none; margin: 0; padding: 0; }
.site-nav a {
  display: flex; align-items: center; min-height: 44px;
  text-decoration: none; font-size: .9375rem; font-weight: 500;
}
.site-nav a:hover { text-decoration: underline; text-underline-offset: .3em; }
.site-nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: .3em; text-decoration-thickness: 2px; }
/* JavaScriptが動かないときはメニューボタンを出さず、リンクを並べて表示 */
.menu-button { display: none; }
@media (max-width: 767px) {
  .js .menu-button { display: inline-flex; align-items: center; }
  .site-nav ul { display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
  .js .site-nav { display: none; }
  .js .site-nav.is-open {
    display: block; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--color-paper); border-block: 1px solid var(--color-ink);
    padding: .5rem var(--gutter) 1rem;
  }
  .js .site-nav ul { display: block; }
  .js .site-nav a { border-bottom: 1px solid var(--color-sand); }
  .site-header__inner { flex-wrap: wrap; }
  .js .site-header__inner { flex-wrap: nowrap; }
}
@media (min-width: 768px) {
  .site-nav ul { display: flex; gap: 2rem; }
}

/* ===== ボタン（2種類だけ） ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 3.25rem; padding: .7rem 1.75rem;
  font-family: var(--font-body); font-size: 1rem; font-weight: 500; line-height: 1.4; letter-spacing: .04em;
  text-decoration: none; text-align: center; cursor: pointer;
  border: 1.5px solid var(--color-ink); border-radius: 2px;
  transition: background-color var(--dur-fast) linear, color var(--dur-fast) linear, border-color var(--dur-fast) linear;
}
/* 塗りつぶし：買える場所を見る */
.btn--fill { background: var(--color-amber); color: var(--color-ink); }
.btn--fill:hover, .btn--fill:focus-visible { background: var(--color-ink); color: var(--color-amber); }
/* 枠線：相談する・電話 */
.btn--line { background: transparent; color: var(--color-ink); }
.btn--line:hover, .btn--line:focus-visible { background: var(--color-ink); color: var(--color-paper); }
.on-sea .btn--line { color: var(--color-paper); border-color: var(--color-paper); }
.on-sea .btn--line:hover, .on-sea .btn--line:focus-visible { background: var(--color-paper); color: var(--color-sea); }
.btn:disabled { cursor: default; opacity: .6; }
/* 電話ボタン：文言と番号を2行に分け、どちらも途中で折り返さない */
.btn--tel { flex-direction: column; gap: .15em; }
.btn--tel span { white-space: nowrap; }
.btn__tel { font-family: var(--font-head); font-size: 1.0625rem; letter-spacing: .06em; }

/* 文字リンク（ボタンではない。藍＋下線） */
.text-link {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--color-sea); font-weight: 500;
  text-decoration: underline; text-underline-offset: .3em;
}
.on-sea .text-link { color: var(--color-paper); }
.inline-link { color: var(--color-sea); text-underline-offset: .25em; }
.on-sea .inline-link { color: var(--color-paper); }

/* ===== 最初の画面（トップ・ビールのページ） ===== */
.hero { position: relative; overflow: hidden; }
.hero__inner {
  position: relative; z-index: 2;
  display: grid; gap: 2rem;
  padding-top: 2rem;
}
.hero__text { min-width: 0; }
.hero__brand {
  margin: 0 0 .75rem;
  font-family: var(--font-head); font-weight: 600;
  /* 375pxで20px、320pxでも1行に収まるよう画面幅で縮む */
  font-size: clamp(1.0625rem, 5.4vw, 1.25rem); letter-spacing: .05em; line-height: 1.4;
  white-space: nowrap;
}
.hero__title {
  margin: 0;
  font-family: var(--font-head); font-weight: 600;
  font-size: clamp(1.75rem, 8.4vw, 3.5rem);
  line-height: 1.35; letter-spacing: .04em;
}
.hero__title .line { display: block; white-space: nowrap; } /* 「島原半島の歴史を、」で必ず改行 */
/* ビールのページ：h1がブランド名（英字） */
.hero__title--en { font-size: clamp(2rem, 10vw, 3.5rem); letter-spacing: .06em; line-height: 1.2; }
.hero__sub {
  margin: 1rem 0 0;
  font-family: var(--font-head); font-weight: 600;
  font-size: clamp(1.0625rem, 4.8vw, 1.375rem); line-height: 1.6;
}
.hero__lead { margin: 1rem 0 0; color: var(--color-sub); }
/* 文の区切りで改行させる（語の途中で切れないように） */
.phrase { display: inline-block; }
.hero__actions { margin-top: 1.75rem; }
.hero__visual { position: relative; min-width: 0; }

/* 案B：4人の名前（右へ行くほど下がる） */
.names { list-style: none; margin: 0; padding: 0; }
.names li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem 1rem;
  padding: .55rem 0 .55rem calc(var(--i) * 1.1rem);
  border-top: 1px solid rgba(30, 35, 40, .22);
}
.names__en {
  font-family: var(--font-head); font-weight: 600;
  font-size: clamp(1.5rem, 6.4vw, 2.5rem); letter-spacing: .1em; line-height: 1.25;
}
.names__ja { font-size: .9375rem; color: var(--color-sub); }

/* 案A：4本の瓶（海の帯に立ち、右端ではみ出す）。写真が届いたら使う */
.bottles {
  list-style: none; margin: 0 -3.5rem 0 0; padding: 0;
  display: flex; align-items: flex-end; justify-content: flex-end;
  height: 16rem;
}
.bottle { flex: 0 0 27%; height: 100%; margin-left: -2%; }
.bottle:first-child { margin-left: 0; }
.bottle img { width: 100%; height: 100%; object-fit: contain; object-position: bottom center; }

/* 海の帯：箱ははみ出しを切り、中の面（または写真）が下から上がる */
.hero__sea {
  position: relative; z-index: 1;
  height: 8rem; margin-top: 2.5rem;
  overflow: hidden;
}
.hero__sea-fill { position: absolute; inset: 0; background: var(--color-sea); }
.hero__sea-fill img { width: 100%; height: 100%; object-fit: cover; }
/* 案A：瓶の下3分の1が帯に重なる */
.hero--a .hero__sea { height: 6rem; margin-top: -4.5rem; }

/* ビールのページはスマホでは画面下の固定の帯があるため、最初の画面のボタンを出さない */
@media (max-width: 767px) {
  .hero__actions--wide-only { display: none; }
}

@media (min-width: 768px) {
  .names li { padding-left: calc(var(--i) * 2rem); }
  .bottles { height: 22rem; margin-right: -5rem; }
  .bottle { flex-basis: 24%; }
  .hero--a .hero__sea { height: 8rem; margin-top: -6rem; }
}
@media (min-width: 1024px) {
  .hero__inner {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: center; gap: 3rem;
    padding-top: 4rem; padding-bottom: 1rem;
  }
  .hero__text { align-self: start; }
  .hero__brand { font-size: 1.5rem; }
  /* 左の列（5/12）に1行目の9文字が収まる大きさ */
  .hero__title { font-size: clamp(2.25rem, 3.6vw, 3.25rem); }
  .hero__title--en { font-size: clamp(2.5rem, 4.2vw, 3.75rem); }
  .names li { padding-left: calc(var(--i) * 3rem); }
  .hero__sea { height: 12rem; margin-top: 3rem; }
  .hero--a .hero__inner { align-items: end; padding-bottom: 0; }
  .hero--a .bottles { height: 33rem; }
  .hero--a .hero__sea { height: 12rem; margin-top: -8rem; }
}

/* ===== 下層ページの見出し ===== */
.page-head { padding-block: 2.5rem 3rem; }
.page-head__label { margin: 0 0 .5rem; font-size: .9375rem; color: var(--color-sub); }
.page-title {
  margin: 0;
  font-family: var(--font-head); font-weight: 600;
  font-size: clamp(1.875rem, 8vw, 2.75rem); line-height: 1.4; letter-spacing: .04em;
}
.page-head__lead { margin: 1.25rem 0 0; max-width: var(--width-text); }
@media (min-width: 1024px) {
  .page-head { padding-block: 4.5rem 4rem; }
}

/* ===== 章の共通 ===== */
.section { padding-block: var(--space-section); }
.section--sand { background: var(--color-sand); }
.section--sea { background: var(--color-sea); color: var(--color-paper); }
.section--tight { padding-top: 0; }
.section-label { margin: 0 0 .5rem; font-size: .9375rem; color: var(--color-sub); }
.on-sea .section-label { color: var(--color-on-sea-sub); }
.section-title {
  margin: 0 0 1.5rem;
  font-family: var(--font-head); font-weight: 600;
  font-size: clamp(1.625rem, 5.6vw, 2.25rem); line-height: 1.45; letter-spacing: .04em;
  /* 最後の1文字だけが次の行に落ちないように（対応ブラウザのみ。読点の位置は .phrase で区切る） */
  text-wrap: pretty;
}
.sub-title {
  margin: 0 0 1rem;
  font-family: var(--font-head); font-weight: 600;
  font-size: 1.25rem; line-height: 1.5; letter-spacing: .04em;
}
.prose { max-width: var(--width-text); }
.prose p { margin: 0 0 1.4em; }
.prose > :last-child { margin-bottom: 0; }

/* ===== 島原とキエーティを結ぶ線 ===== */
.link-map {
  margin: 0;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .5rem .9rem;
}
.link-map__place { font-family: var(--font-head); font-weight: 600; font-size: 1.125rem; line-height: 1.4; }
.link-map__place small { display: block; font-family: var(--font-body); font-weight: 400; font-size: .875rem; color: var(--color-sub); }
.link-map__place:last-of-type { text-align: right; }
.link-map__line { position: relative; height: 1px; background: var(--color-ink); transform-origin: right center; }
.link-map__line::before, .link-map__line::after {
  content: ""; position: absolute; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: currentColor;
}
.link-map__line { color: var(--color-ink); }
.link-map__line::before { left: -3px; }
.link-map__line::after { right: -3px; }
.link-map figcaption { grid-column: 1 / -1; font-size: .875rem; color: var(--color-sub); line-height: 1.7; }
.on-sea .link-map__line { background: var(--color-paper); color: var(--color-paper); }
.on-sea .link-map__place small, .on-sea .link-map figcaption { color: var(--color-on-sea-sub); }
/* 大きい線（ビールのページ） */
.link-map--large { margin-bottom: 3rem; }
.link-map--large .link-map__place { font-size: clamp(1.25rem, 5vw, 1.75rem); }

/* ===== 4本の並び ===== */
.lineup__intro { display: grid; gap: 2.5rem; margin-bottom: 3.5rem; }
.lineup__intro p { margin: 0; max-width: var(--width-text); }
.beer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 3rem; }
.beer {
  --d: 0s;
  min-width: 0;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1.25rem; align-items: start;
}
.beer__visual { position: relative; aspect-ratio: 3 / 4; overflow: hidden; min-width: 0; }
.beer__visual img { width: 100%; height: 100%; object-fit: cover; }
/* 写真がないときの札（人物名を縦書き） */
.plate {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-sea); color: var(--color-paper);
  writing-mode: vertical-rl;
  font-family: var(--font-head); font-weight: 600;
  font-size: clamp(1.125rem, 4.4vw, 2rem); letter-spacing: .12em;
}
.beer__body { min-width: 0; }
.beer__name {
  margin: 0;
  font-family: var(--font-head); font-weight: 600;
  /* 320pxでも VALIGNANO が1行に収まるよう画面幅で縮む */
  font-size: clamp(1.0625rem, 5.6vw, 1.375rem); letter-spacing: .08em; line-height: 1.3;
  overflow-wrap: anywhere;
}
.beer__person { margin: .35rem 0 0; font-family: var(--font-head); font-weight: 600; font-size: 1.0625rem; line-height: 1.5; }
.beer__desc { margin: .6rem 0 0; }
.beer__taste { margin: .6rem 0 0; font-size: .875rem; color: var(--color-sub); line-height: 1.7; }
/* 札に人物名が出ているときは、名前の行は読み上げ用にだけ残す（写真に差し替えたら --plates を外す） */
.beer-list--plates .beer__person {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.lineup__actions { margin-top: 3.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; }

/* ビールのページ：1本ずつ（ラベルの絵＋文） */
.beer-list--large { gap: 4rem; }
.beer-list--large .beer { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.beer-list--large .beer__visual { aspect-ratio: 1 / 1; max-width: 22rem; }
.beer-list--large .beer__taste { margin-top: 1.25rem; font-size: 1rem; color: var(--color-ink); line-height: 1.9; }
.taste-chart { margin: 1.25rem 0 0; display: grid; grid-template-columns: repeat(2, max-content); gap: .25rem 2rem; font-size: .9375rem; }
.taste-chart div { display: flex; gap: .75rem; }
.taste-chart dt { color: var(--color-sub); }
.taste-chart dd { margin: 0; color: var(--color-sea); letter-spacing: .08em; }
.beer__food { margin: 1rem 0 0; }
.beer__label { display: inline-block; margin-right: .75em; padding: 0 .5em; border: 1px solid var(--color-ink); font-size: .8125rem; line-height: 1.6; vertical-align: .1em; }
.beer__origin { margin-top: 1.25rem; border-top: 1px solid var(--color-ink); }
.beer__origin summary { display: flex; align-items: center; justify-content: space-between; min-height: 44px; cursor: pointer; color: var(--color-sea); font-weight: 500; list-style: none; }
.beer__origin summary::-webkit-details-marker { display: none; }
.beer__origin summary::after { content: "＋"; }
.beer__origin[open] summary::after { content: "－"; }
.beer__origin p { margin: .25rem 0 0; font-size: .9375rem; line-height: 1.9; }
.craft__artist { font-size: .875rem; color: var(--color-sub); }

@media (min-width: 768px) {
  .beer-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3.5rem 2.5rem; }
  .beer { grid-template-columns: minmax(0, 1fr); }
  .beer:nth-child(even) { margin-top: 4rem; --d: var(--stagger); }
  .beer__name { font-size: 1.75rem; }
  .beer-list--large { grid-template-columns: minmax(0, 1fr); gap: 5rem; }
  .beer-list--large .beer, .beer-list--large .beer:nth-child(even) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2.5rem; margin-top: 0; }
  .beer-list--large .beer__visual { max-width: none; }
}
@media (min-width: 1024px) {
  .lineup__intro { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: 4rem; }
  .beer-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; }
  .beer, .beer:nth-child(even) { margin-top: calc(var(--i) * 3.5rem); --d: calc(var(--i) * var(--stagger)); }
  .beer__person { font-size: 1.125rem; }
  /* ビールのページ：1本ずつ横に（絵＋文） */
  .beer-list--large { grid-template-columns: minmax(0, 1fr); gap: 6rem; }
  .beer-list--large .beer, .beer-list--large .beer:nth-child(even) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4rem; margin-top: 0; }
  .beer-list--large .beer__name { font-size: 2rem; }
}

/* ===== 買える場所 ===== */
.buy-list { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--color-ink); }
.buy-list li {
  display: grid; gap: .25rem 2rem;
  padding: 1.25rem 0;
  border-top: 1px solid var(--color-ink);
}
.buy-list__type { margin: 0; font-size: .875rem; color: var(--color-sub); }
.buy-list__name { margin: 0; font-family: var(--font-head); font-weight: 600; font-size: 1.25rem; line-height: 1.5; }
.buy-list__check { margin: .25rem 0 0; font-size: .875rem; color: var(--color-sub); }
.buy-list__link {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--color-sea); text-decoration: underline; text-underline-offset: .3em; font-weight: 500;
}
/* リンク先が決まるまでの表示 */
.buy-list__link--pending { color: var(--color-sub); text-decoration: none; font-weight: 400; font-size: .9375rem; }
.buy__lead { margin: 0 0 1.75rem; max-width: var(--width-text); }
.buy__more { margin: 1.75rem 0 0; }
.buy__more a { color: var(--color-sea); font-weight: 500; text-underline-offset: .3em; white-space: nowrap; }
.buy__actions { margin-top: 2rem; }
@media (min-width: 768px) {
  .buy-list li { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
}

/* ===== 海島について（PCは写真が左へはみ出す） ===== */
.about { overflow: hidden; }
.about__inner { display: grid; gap: 2rem; }
/* 写真の場所：写真がないときは藍の色面。写真は中に <img> を入れる */
.photo-slot { position: relative; background: var(--color-sea); overflow: hidden; min-width: 0; }
.photo-slot img { width: 100%; height: 100%; object-fit: cover; }
.about__photo { aspect-ratio: 16 / 10; margin-inline: calc(var(--gutter) * -1); }
.about__text { min-width: 0; }
.about__copy { margin: 0; max-width: var(--width-text); }
.about__text .text-link { margin-top: 1.25rem; }
/* う・み・しま：3つを1行にそろえ、市の名前は文字の下に置く */
.origin { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: .5rem 2rem; margin: 0 0 1.5rem; }
.origin__item { display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; min-width: 0; }
.origin__kana { font-family: var(--font-head); font-weight: 600; font-size: 2.75rem; line-height: 1.1; color: var(--color-sea); }
.origin__place { font-size: .875rem; color: var(--color-sub); white-space: nowrap; }
@media (min-width: 1024px) {
  .about__inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: 4rem; }
  /* 左の画面端まで広げる */
  .about__photo { aspect-ratio: 4 / 3; margin-right: 0; margin-left: calc((min(100vw - 5rem, var(--width-max)) - 100vw) / 2); }
}

/* ===== ほかの事業（文字の一覧。カードにしない） ===== */
.works-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.works-list li { min-width: 0; padding: 1.25rem 0 1.5rem; border-top: 1px solid var(--color-ink); }
.works-list p { margin: .5rem 0 0; }
.works-list__name { margin: 0; font-family: var(--font-head); font-weight: 600; font-size: 1.1875rem; line-height: 1.5; overflow-wrap: anywhere; }
.works-list__sub { font-size: .875rem; color: var(--color-sub); }
.works__more { margin: 1.5rem 0 0; }
@media (min-width: 1024px) {
  .works-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 2.5rem; }
}

/* ===== 最後のCTA・注意書き ===== */
.closing__inner { display: grid; gap: 2.5rem; }
.closing__actions { display: flex; flex-wrap: wrap; gap: 1rem; }
.closing__actions .btn { flex: 1 1 16rem; }
.notes {
  list-style: none; margin: 3.5rem 0 0; padding: 1.5rem 0 0;
  border-top: 1px solid var(--color-on-sea-sub);
  font-size: 1rem; line-height: 1.8;
}
.notes li + li { margin-top: .4rem; }
.notes--paper { margin-top: 0; border-top-color: var(--color-ink); }
@media (min-width: 1024px) {
  .closing__inner { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: end; gap: 4rem; }
  .closing__inner .section-title { margin-bottom: 0; }
}

/* ===== ビールのページ：なぜ、島原とイタリアなのか／お店の方へ ===== */
.story .prose { max-width: 36em; }
.story__links { list-style: none; margin: 2rem 0 0; padding: 1.25rem 0 0; border-top: 1px solid var(--color-on-sea-sub); font-size: .9375rem; }
.story__links a { display: inline-flex; align-items: center; min-height: 44px; }
.shop__actions { margin-top: 1.75rem; display: flex; flex-wrap: wrap; gap: 1rem; }

/* ===== 事業内容 ===== */
.toc { list-style: none; margin: 2rem 0 0; padding: 0; border-bottom: 1px solid var(--color-ink); max-width: 40rem; }
.toc li { border-top: 1px solid var(--color-ink); }
.toc a {
  display: flex; align-items: baseline; gap: 1rem; min-height: 52px; padding: .65rem 0;
  text-decoration: none; font-weight: 500;
}
.toc a:hover span:last-child { text-decoration: underline; text-underline-offset: .3em; }
.toc__num { font-family: var(--font-head); font-weight: 600; font-size: 1.25rem; color: var(--color-sea); min-width: 1.5em; }

.product-list { list-style: none; margin: 2.5rem 0 0; padding: 0; border-bottom: 1px solid var(--color-ink); }
.product-list > li { display: grid; gap: .5rem 2rem; padding: 1.5rem 0; border-top: 1px solid var(--color-ink); min-width: 0; }
.product-list__name { margin: 0; font-family: var(--font-head); font-weight: 600; font-size: 1.375rem; line-height: 1.4; letter-spacing: .04em; }
.product-list__items { margin: .25rem 0 0; padding: 0; list-style: none; font-size: .9375rem; color: var(--color-sub); }
.product-list__body p { margin: 0; }
.product-list__link { margin: .5rem 0 0; font-size: .9375rem; color: var(--color-sub); }
@media (min-width: 768px) {
  .product-list > li { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
}

.brand-pair { display: grid; gap: 3rem; margin-top: 3rem; }
.brand-pair > * { min-width: 0; padding-top: 1.5rem; border-top: 1px solid var(--color-on-sea-sub); }
.brand-pair__name { margin: 0 0 1rem; font-family: var(--font-head); font-weight: 600; line-height: 1.35; letter-spacing: .06em; }
.brand-pair__main .brand-pair__name { font-size: clamp(1.625rem, 6.4vw, 2.5rem); }
.brand-pair__side .brand-pair__name { font-size: 1.375rem; }
.brand-pair p { margin: 0 0 1rem; max-width: var(--width-text); }
@media (min-width: 1024px) {
  .brand-pair { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 4rem; align-items: start; }
}

.dot-list { list-style: none; margin: 0 0 1.4em; padding: 0; max-width: var(--width-text); }
.dot-list li { position: relative; padding-left: 1.25em; }
.dot-list li + li { margin-top: .35rem; }
.dot-list li::before {
  content: ""; position: absolute; left: .2em; top: .8em;
  width: .45em; height: .45em; background: var(--color-sea);
}
.on-sea .dot-list li::before { background: var(--color-paper); }
.consult-block + .consult-block { margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid var(--color-ink); }

.cta-row { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.5rem; }
.cta-row .btn { flex: 0 1 18rem; }

/* ===== 会社案内 ===== */
.greeting .prose p { margin-bottom: 1.6em; }
.greeting__photo { display: block; width: clamp(140px, 36vw, 200px); height: auto; margin: 0 0 2rem; }
.greeting__sign { margin: 2.5rem 0 0; font-family: var(--font-head); font-weight: 600; line-height: 1.7; }
.greeting__sign small { display: block; font-family: var(--font-body); font-weight: 400; font-size: .9375rem; color: var(--color-sub); }
.origin--large { gap: 1rem 2.5rem; margin-bottom: 2rem; }
.origin--large .origin__kana { font-size: clamp(3rem, 14vw, 4.5rem); }
.origin--large .origin__place { font-size: 1rem; }
.origin-photo { aspect-ratio: 16 / 7; margin-top: 2.5rem; }

.outline { margin: 0; border-bottom: 1px solid var(--color-ink); max-width: 48rem; }
.outline > div { display: grid; gap: .25rem 2rem; padding: 1rem 0; border-top: 1px solid var(--color-ink); }
.outline dt { font-size: .9375rem; color: var(--color-sub); }
.outline dd { margin: 0; min-width: 0; }
.outline ul { list-style: none; margin: 0; padding: 0; }
@media (min-width: 768px) {
  .outline > div { grid-template-columns: 11rem minmax(0, 1fr); }
  .outline dt { color: var(--color-ink); font-weight: 500; }
}

.history { list-style: none; margin: 0; padding: 0 0 0 1.25rem; border-left: 1px solid var(--color-ink); max-width: 48rem; }
.history li { position: relative; display: grid; gap: 0 1.5rem; padding: .75rem 0; }
.history li::before {
  content: ""; position: absolute; left: calc(-1.25rem - 4px); top: 1.45rem;
  width: 7px; height: 7px; border-radius: 50%; background: var(--color-ink);
}
.history__date { font-family: var(--font-head); font-weight: 600; letter-spacing: .04em; white-space: nowrap; }
@media (min-width: 768px) {
  .history li { grid-template-columns: 8.5rem minmax(0, 1fr); }
}

.clients { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 2rem; max-width: 56rem; }
.clients li { line-height: 1.7; }

/* ===== お問い合わせ ===== */
.contact__layout { display: grid; gap: 3rem; }
.contact__aside { min-width: 0; }
.contact__main { min-width: 0; }
@media (min-width: 1024px) {
  .contact__layout { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 4rem; align-items: start; }
}
.contact-form { position: relative; display: grid; gap: 1.5rem; }
.field { display: grid; gap: .4rem; min-width: 0; }
.field__label { font-weight: 500; }
.field__req, .field__opt { font-size: .8125rem; font-weight: 400; margin-left: .5em; color: var(--color-sub); }
.field input[type="text"], .field input[type="email"], .field select, .field textarea {
  width: 100%; min-height: 48px; padding: .6rem .8rem;
  font: inherit; color: var(--color-ink);
  background: var(--color-paper);
  border: 1px solid var(--color-field); border-radius: 2px;
}
.field textarea { min-height: 10rem; resize: vertical; }
.field select {
  appearance: none; -webkit-appearance: none;
  padding-right: 2.5rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--color-ink) 50%), linear-gradient(135deg, var(--color-ink) 50%, transparent 50%);
  background-position: calc(100% - 1.25rem) 50%, calc(100% - .9rem) 50%;
  background-size: .35rem .35rem; background-repeat: no-repeat;
}
.choice-group { margin: 0; padding: 0; border: 0; min-width: 0; }
.choice-group legend { padding: 0; margin-bottom: .4rem; font-weight: 500; }
.choice-group__items { display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
.choice { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; cursor: pointer; }
.choice input { width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--color-sea); }
/* 迷惑対策の見えない欄（人には見えない・押せない） */
.hp-field { position: absolute; left: -9999px; top: 0; width: 1px; height: 1px; overflow: hidden; }
.form-demo-note {
  margin: 0; padding: .9rem 1rem;
  border: 1px solid var(--color-ink); background: var(--color-sand);
  font-size: .9375rem; line-height: 1.7;
}
.form-demo-note a { white-space: nowrap; }
/* 入力エラー：欄の下に文字で残す（色だけに頼らず、枠を太くして「※」を付ける） */
.field__error { margin: 0; font-weight: 500; font-size: .9375rem; line-height: 1.6; }
.field__error::before { content: "※ "; }
.field [aria-invalid="true"] { border: 2px solid var(--color-ink); }
.form-errors { margin: 0; padding: .9rem 1rem; border: 2px solid var(--color-ink); font-weight: 500; }
.form-errors:focus { outline: 2px solid var(--color-sea); outline-offset: 3px; }
.form-status { margin: 0; padding: .9rem 1rem; border-left: 3px solid var(--color-sea); background: var(--color-sand); }
.form-status:focus { outline: 2px solid var(--color-sea); outline-offset: 3px; }
.form-actions .btn { min-width: 12rem; }
.privacy { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--color-ink); font-size: .9375rem; line-height: 1.8; }
.privacy__title { margin: 0 0 .4rem; font-weight: 500; font-size: 1rem; }
.privacy p { margin: 0; }
.tel-box { padding: 1.5rem 0; border-block: 1px solid var(--color-ink); }
.tel-box__title { margin: 0 0 1rem; font-family: var(--font-head); font-weight: 600; font-size: 1.25rem; }
.tel-box .btn { width: 100%; }
.tel-box p { margin: 1rem 0 0; font-size: .9375rem; }

/* ===== フッター ===== */
.site-footer { padding-block: 3rem; font-size: .9375rem; }
.site-footer__inner { display: grid; gap: 1.5rem; }
.site-footer__name { margin: 0; font-family: var(--font-head); font-weight: 600; font-size: 1.125rem; }
.site-footer address { font-style: normal; }
.site-footer a { color: var(--color-sea); text-underline-offset: .3em; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
.site-footer ul a { display: inline-flex; align-items: center; min-height: 44px; }
/* フッターのリンクは押せる高さを44px以上に */
.site-footer address a { display: inline-flex; align-items: center; min-height: 44px; }
@media (min-width: 768px) {
  .site-footer__inner { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
}

/* ===== ビールのページ：スマホの画面下の固定の帯 ===== */
.fixed-cta { display: none; }
@media (max-width: 767px) {
  .has-fixed-cta { padding-bottom: calc(4rem + env(safe-area-inset-bottom, 0px)); }
  .fixed-cta {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    padding: .5rem .75rem calc(.5rem + env(safe-area-inset-bottom, 0px));
    background: var(--color-paper); border-top: 1px solid var(--color-ink);
    transition: transform var(--dur-fast) linear, visibility 0s linear 0s;
  }
  .fixed-cta .btn { min-height: 48px; padding: .5rem 1rem; }
  /* 「買える場所」の章が見えている間は隠す */
  .fixed-cta.is-away { transform: translateY(100%); visibility: hidden; transition: transform var(--dur-fast) linear, visibility 0s linear var(--dur-fast); }
}

/* ===== 動き（JavaScriptが動き、「動きを減らす」設定でないときだけ） ===== */
@media (prefers-reduced-motion: no-preference) {
  /* 潮が満ちる：海の帯の中の面が下から上がる（写真でも潰れない） */
  .js .hero__sea-fill { transform: translateY(100%); transition: transform var(--dur-slow) var(--ease-tide); }
  .js.is-ready .hero__sea-fill { transform: none; }
  /* 透明から現れるもの（ブランド名・つなぎ文・ボタン・名前） */
  .js .hero [data-step] {
    opacity: 0; transform: translateY(var(--rise));
    transition: opacity var(--dur-base) var(--ease-tide) var(--delay, 0s), transform var(--dur-base) var(--ease-tide) var(--delay, 0s);
  }
  .js.is-ready .hero [data-step] { opacity: 1; transform: none; }
  /* 見出し（h1）と瓶は透明にせず、下から上がるだけ */
  .js .hero [data-rise] { transform: translateY(var(--rise)); transition: transform var(--dur-base) var(--ease-tide) var(--delay, 0s); }
  .js.is-ready .hero [data-rise] { transform: none; }

  /* ラベルが頁のようにひらく：紙の覆いが右から左へ縮む */
  .js .beer__visual::after {
    content: ""; position: absolute; inset: 0;
    background: var(--color-paper);
    border-right: 1px solid var(--color-ink);
    transform-origin: left center;
    transition: transform var(--dur-slow) var(--ease-tide) var(--d);
  }
  .js .beer__body {
    opacity: 0; transform: translateY(var(--rise));
    transition: opacity var(--dur-base) var(--ease-tide) calc(var(--d) + .5s), transform var(--dur-base) var(--ease-tide) calc(var(--d) + .5s);
  }
  .js .beer.is-open .beer__visual::after { transform: scaleX(0); }
  .js .beer.is-open .beer__body { opacity: 1; transform: none; }

  /* 島原とキエーティを結ぶ線：キエーティ側から引かれる */
  .js .link-map[data-reveal] .link-map__line { transform: scaleX(0); transition: transform var(--dur-line) var(--ease-tide) .2s; }
  .js .link-map.is-open .link-map__line { transform: none; }

  /* 章の見出し */
  .js .section-title[data-reveal] {
    opacity: 0; transform: translateY(var(--rise));
    transition: opacity var(--dur-base) var(--ease-tide), transform var(--dur-base) var(--ease-tide);
  }
  .js .section-title.is-open { opacity: 1; transform: none; }
  /* 最初の画面に入る見出し（data-reveal="rise"）は透明にせず、上がるだけ */
  .js .section-title[data-reveal="rise"] { opacity: 1; transition: transform var(--dur-base) var(--ease-tide); }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 1024px) {
  /* PCでは4本が並んで見えるので、並び全体が見えたら時間差でひらく */
  .js .beer-list.is-open .beer__visual::after { transform: scaleX(0); }
  .js .beer-list.is-open .beer__body { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fixed-cta, .fixed-cta.is-away { transition: none; }
}