@charset "UTF-8";
/* TEISHOKU MEDIA / 藍 × 朱 × 生成り・明朝体主体の和エディトリアル（spec 7.5）
   外部Webフォントは読み込まない（CSP・表示速度のため、端末のローカル明朝を使う）。 */

/* ---------------------------------------------------------------- tokens */
:root {
  --ai: #1f3a5f;        /* 藍ネイビー: 基調・見出し・ナビ地色 */
  --ai-fuka: #14273f;   /* 濃藍: ナビ/フッタの沈め色 */
  --shu: #b3402a;       /* 朱赤: 差し色（分量は最小限） */
  --kinari: #f6f1e7;    /* 生成り: 紙の地色 */
  --washi: #fffdf7;     /* 白練り: カード面 */
  --sumi: #2b2b2b;      /* 墨: 本文 */
  --usuzumi: #6f6a63;   /* 薄墨: メタ情報 */
  --keisen: rgba(31, 58, 95, .16);  /* 罫線 */
  --keisen-koi: rgba(31, 58, 95, .32);

  --mincho: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho",
    "Noto Serif JP", "MS PMincho", serif;
  --gothic: "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", sans-serif;

  --measure: 68rem;     /* 版面の最大幅 */
  --ma: clamp(4rem, 8vw, 7.5rem);     /* 章と章の間 */
  --ma-sm: clamp(2.25rem, 4vw, 3.5rem); /* 記事内の節の間 */
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --nav-h: 3.75rem;
  --ease: cubic-bezier(.2, 0, 0, 1);  /* 紙をめくる程度の速さ。既定のeaseは使わない */
}

/* ----------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--kinari);
  color: var(--sumi);
  font-family: var(--mincho);
  font-size: 1rem;
  line-height: 1.85;
  letter-spacing: .035em;
  line-break: strict;          /* 禁則処理を厳格に */
  padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

a { color: var(--ai); text-underline-offset: .25em; text-decoration-thickness: 1px; }
a:hover { color: var(--shu); }

:focus-visible { outline: 2px solid var(--shu); outline-offset: 3px; }

h1, h2, h3 {
  margin: 0;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: .08em;
  font-feature-settings: "palt" 1;   /* 見出しの仮名を詰めて活字らしく */
}

/* -------------------------------------------------------------- header */
.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem 1.5rem;
  padding: 1.75rem var(--gutter) 1.25rem;
  border-bottom: 1px solid var(--keisen);
  background: var(--kinari);
}

.site-logo {
  font-family: var(--gothic);
  font-size: clamp(1.05rem, 2.4vw, 1.3rem);
  font-weight: 700;
  letter-spacing: .32em;
  color: var(--ai);
  text-decoration: none;
}
.site-logo:hover { color: var(--ai); }

.site-tagline {
  margin: 0;
  font-size: .8125rem;
  letter-spacing: .18em;
  color: var(--usuzumi);
}
@media (min-width: 900px) {
  .site-tagline { margin-left: auto; }   /* 左にロゴ、右端に惹句。中央に間を残す */
}

/* ---------------------------------------------------------------- main */
.site-main {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 var(--gutter) var(--ma);
}

/* 版面直下に素で置かれる見出し・リスト（taxonomy-area / page-area など） */
.site-main > h1 {
  margin: 2.5rem 0 1.75rem;
  font-size: clamp(1.5rem, 4vw, 2.125rem);
  color: var(--ai);
}
.site-main > h2 {
  margin: var(--ma) 0 1.25rem;
  font-size: clamp(1.125rem, 2.4vw, 1.3125rem);
  color: var(--ai);
}

/* ---------------------------------------------------------- breadcrumb */
.breadcrumb { padding-top: 1.25rem; }
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem .75rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--gothic);
  font-size: .75rem;
  letter-spacing: .1em;
  color: var(--usuzumi);
}
.breadcrumb li + li::before { content: "／"; margin-right: .75rem; color: var(--keisen); }
.breadcrumb a { color: var(--usuzumi); text-decoration: none; }
.breadcrumb a:hover { color: var(--shu); text-decoration: underline; }
.breadcrumb li:last-child a { color: var(--sumi); pointer-events: none; }

/* ---------------------------------------------------------------- hero
   署名要素: PCでは見出しを縦書き（掛け軸）にし、朱の罫を一本だけ添える。 */
.hero {
  padding: var(--ma) 0 calc(var(--ma) * .75);
  border-bottom: 1px solid var(--keisen);
}

.hero h1 {
  margin: 0 0 2.5rem;
  font-size: clamp(1.75rem, 6vw, 2.5rem);
  line-height: 1.8;
  letter-spacing: .12em;
  color: var(--ai);
}

/* 一汁三菜の写真。折敷に倣ってヘアラインで囲む以外の装飾は付けない。 */
.hero__media { display: block; margin: 0 0 2rem; }
.hero__media img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--keisen);
}

@media (min-width: 900px) {
  .hero {
    display: flex;
    flex-direction: row-reverse;   /* 縦書きは右起こし */
    align-items: flex-start;
    justify-content: space-between;
    gap: 3rem;
  }
  .hero h1 {
    writing-mode: vertical-rl;
    margin: 0;
    padding-left: 2rem;
    border-left: 1px solid var(--shu);
    height: 27rem;                 /* 2行に収める（本文18字・字送り約2.7rem） */
    font-size: 2.125rem;
    line-height: 2.3;
    letter-spacing: .2em;
  }
  /* 事業書の表紙の組み: 右に縦書きの題字、左に写真、その下に導線。間は空けたまま残す。 */
  .hero__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2.5rem;
    flex: 0 1 38rem;
  }
  .hero__media { margin: 0; }
}

/* ------------------------------------------------------------- sections
   節ごとに見出しの設えを変える。同じ飾りを全節に付けると誌面が単調になる。 */

/* ピックアップ: 朱の短罫。誌面で最も強い節はここだけ。 */
.pickup { padding-top: var(--ma); }
.pickup > h2 {
  position: relative;
  margin: 0 0 2rem;
  padding-top: 1rem;
  font-size: clamp(1.25rem, 3vw, 1.5rem);
  color: var(--ai);
}
.pickup > h2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2.25rem;
  height: 2px;
  background: var(--shu);
}

/* エリア: 飾り罫を持たず、版面を横断する藍のヘアラインと右寄せ見出しで受ける。 */
.area-links {
  margin-top: var(--ma);
  padding-top: 1.5rem;
  border-top: 1px solid var(--keisen);
}
.area-links > h2 {
  margin: 0 0 1.75rem;
  font-size: clamp(1.125rem, 2.4vw, 1.3125rem);
  color: var(--ai);
}
@media (min-width: 900px) {
  .area-links > h2 { text-align: right; }
}

/* 記事内の節: 飾りなし。本文と地続きの小見出しにする。 */
.shop__caption { padding-top: var(--ma-sm); }
.shop__nearby { padding-top: var(--ma); }
.shop__caption > h2,
.shop__nearby > h2 {
  margin: 0 0 1.5rem;
  font-size: 1.0625rem;
  letter-spacing: .14em;
  color: var(--ai);
}

/* ---------------------------------------------------------------- cards */
.card-grid {
  display: grid;
  /* auto-fit: 枚数が少ないとき空きトラックを畳んで版面いっぱいに組む */
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1.25rem;
  /* 背丈は中身なり。写真なしのカードを行の高さに引き伸ばすと間延びするため、
     短冊が並ぶように下端を揃えない。 */
  align-items: start;
}

/* ピックアップだけは判型を振る（7:5 の互い違い）。一覧系は等幅のまま。 */
@media (min-width: 900px) {
  .pickup .card-grid { grid-template-columns: repeat(12, 1fr); gap: 1.5rem 1.75rem; }
  /* 広い側が行ごとに左右へ入れ替わる（7:5 → 5:7）。行の合計は常に12。 */
  .pickup .card-grid > .shop-card { grid-column: span 5; }
  .pickup .card-grid > .shop-card:nth-child(4n+1),
  .pickup .card-grid > .shop-card:nth-child(4n+4) { grid-column: span 7; }
  /* 総数が奇数のときは最後の一枚で行を閉じる（空きマスを作らない） */
  .pickup .card-grid > .shop-card:last-child:nth-child(odd) { grid-column: span 12; }
  .pickup .card-grid > .shop-card:nth-child(4n+1) .shop-card__name,
  .pickup .card-grid > .shop-card:nth-child(4n+4) .shop-card__name { font-size: 1.375rem; }
  .pickup .card-grid > .shop-card:nth-child(4n+1) .shop-card__excerpt,
  .pickup .card-grid > .shop-card:nth-child(4n+4) .shop-card__excerpt { -webkit-line-clamp: 3; }
}

.shop-card {
  --rule: var(--ai);              /* 左罫の色。card--shu で朱に差し替わる */
  display: flex;
  flex-direction: column;
  padding: 1.5rem 1.5rem 1.25rem;
  background: var(--washi);
  border: 1px solid var(--keisen);
  box-shadow: inset 4px 0 0 var(--rule);   /* 罫は影で引く。太らせても行が動かない */
  color: var(--sumi);
  text-decoration: none;
  transition: box-shadow 220ms var(--ease), border-color 220ms var(--ease);
}
.card--ai { --rule: var(--ai); }
.card--shu { --rule: var(--shu); }

/* 触れたら罫が太る。紙面の栞をなぞる程度の反応にとどめ、浮き上がらせない。 */
.shop-card:hover,
.shop-card:focus-visible {
  box-shadow: inset 7px 0 0 var(--rule);
  border-color: var(--keisen-koi);
}
.shop-card:hover .shop-card__name { color: var(--shu); }

/* アイキャッチのある店だけ写真を載せる。写真は card の内側に収め、
   藍/朱の左罫が写真に隠れないようにする（罫はカードの識別子なので必ず見える）。 */
.shop-card__thumb { display: block; margin: 0 0 1.25rem; }
.shop-card__thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--keisen);
  background: var(--kinari);
}
/* 写真の分だけ本文を短くする。 */
.shop-card--photo .shop-card__excerpt { -webkit-line-clamp: 3; }

/* 写真のない店は本来のタイポグラフィカード。店名を主役にし、本文も長く見せて、
   写真ありのカードと並んでも痩せて見えないようにする。 */
.shop-card:not(.shop-card--photo) .shop-card__name { font-size: 1.3125rem; }
.shop-card:not(.shop-card--photo) .shop-card__excerpt { -webkit-line-clamp: 7; }

.shop-card__name {
  margin: 0 0 .75rem;
  font-size: 1.1875rem;
  line-height: 1.6;
  color: var(--ai);
  transition: color 220ms var(--ease);
}
.shop-card__excerpt {
  margin: 0 0 1.25rem;
  font-size: .875rem;
  line-height: 1.85;
  color: var(--sumi);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}
.shop-card__meta {
  margin: auto 0 0;              /* カードに高さが与えられた場合もメタは最下段に置く */
  padding-top: .75rem;
  border-top: 1px solid var(--keisen);
  font-family: var(--gothic);
  font-size: .75rem;
  letter-spacing: .08em;
  color: var(--usuzumi);
}

/* --------------------------------------------------------------- buttons */
.btn-near, .btn-map, .btn-ig {
  display: inline-block;
  padding: .9rem 2rem;
  font-family: var(--mincho);
  font-size: .9375rem;
  letter-spacing: .16em;
  text-decoration: none;
  border: 1px solid var(--ai);
  background: transparent;
  color: var(--ai);
  cursor: pointer;
  transition: background-color 220ms var(--ease), color 220ms var(--ease);
}
.btn-near:hover, .btn-map:hover, .btn-ig:hover { background: var(--ai); color: var(--kinari); }

.btn-near { border-color: var(--shu); color: var(--shu); }
.btn-near:hover { background: var(--shu); color: var(--kinari); }

/* --------------------------------------------------------- index lists
   エリア一覧・駅一覧は「目次」として組む。行ごとの罫は引かず、段で分ける。 */
.area-links ul,
.site-main > ul:not(.wp-block-list) {
  margin: 0 0 2rem;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: 2.5rem;
  column-rule: 1px solid var(--keisen);
}
@media (min-width: 900px) {
  .area-links ul,
  .site-main > ul:not(.wp-block-list) { columns: 3; column-gap: 3rem; }
}
.area-links li,
.site-main > ul:not(.wp-block-list) li {
  break-inside: avoid;
  padding: .45rem 0;
  font-size: .9375rem;
}
.area-links a,
.site-main > ul:not(.wp-block-list) a { color: var(--ai); text-decoration: none; }
.area-links a:hover,
.site-main > ul:not(.wp-block-list) a:hover { color: var(--shu); text-decoration: underline; }

.area-links p { margin: 2rem 0 0; }

/* ------------------------------------------------------- result lists
   地図・現在地の検索結果。件数が読めないので行送りの一覧で受ける。 */
#map-list, #near-list {
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}
#map-list li, #near-list li {
  padding: .85rem 0;
  border-bottom: 1px solid var(--keisen);
  font-size: .9375rem;
  color: var(--usuzumi);
}
#map-list a, #near-list a { color: var(--ai); text-decoration: none; }
#map-list a:hover, #near-list a:hover { color: var(--shu); text-decoration: underline; }

/* ----------------------------------------------------------------- map */
#map {
  height: clamp(24rem, 62vh, 40rem);
  margin-top: 1.5rem;
  border: 1px solid var(--keisen-koi);
  background: var(--washi);
}
.leaflet-container { font-family: var(--gothic); }
.leaflet-popup-content a { color: var(--ai); }

/* ---------------------------------------------------------- single shop */
.shop { padding-top: 2rem; }
.shop > h1 {
  margin: 0 0 1rem;
  font-size: clamp(1.625rem, 5vw, 2.375rem);
  line-height: 1.5;
  color: var(--ai);
}
.shop__meta {
  margin: 0 0 .5rem;
  font-family: var(--gothic);
  font-size: .8125rem;
  letter-spacing: .1em;
  color: var(--usuzumi);
}
.shop__address {
  margin: 0 0 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--keisen);
  font-size: .9375rem;
}
.shop__address a { margin-left: .75em; white-space: nowrap; }

/* 詳細の一枚。本文と同じ版面幅に収め、折敷に倣ってヘアラインで囲む。 */
.shop__photo {
  max-width: 48rem;
  margin: 0 0 var(--ma-sm);
}
.shop__photo img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border: 1px solid var(--keisen);
  background: var(--kinari);
}

.shop__caption { max-width: 42rem; }
.shop__caption p {
  margin: 0 0 1.75rem;
  text-align: justify;
  text-justify: inter-character;
}

/* 記事末の外部導線。中央寄せにせず、本文の版面左に揃えて置く。 */
.shop__ig {
  margin: var(--ma) 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--keisen);
}

/* --------------------------------------------------- prose（コラム・物語） */
.site-main > p,
.site-main > blockquote,
.site-main > ul.wp-block-list { max-width: 42rem; }
.site-main > p {
  margin: 0 0 1.75rem;
  text-align: justify;
  text-justify: inter-character;
}
.site-main > blockquote {
  margin: 2.5rem 0;
  padding: .25rem 0 .25rem 1.5rem;
  border-left: 2px solid var(--shu);
  color: var(--usuzumi);
}

/* ---------------------------------------------------------- global nav
   SPは下部固定・4項目等幅。PCはフッタ手前に通常配置。 */
.global-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--ai-fuka);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.global-nav a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--nav-h);
  font-size: .8125rem;
  letter-spacing: .12em;
  color: var(--kinari);
  text-decoration: none;
  border-left: 1px solid rgba(246, 241, 231, .16);
}
.global-nav a:first-child { border-left: 0; }
.global-nav a:hover, .global-nav a:focus-visible { background: var(--shu); color: #fff; }

@media (min-width: 900px) {
  body { padding-bottom: 0; }
  .global-nav {
    position: static;
    display: flex;
    justify-content: flex-end;   /* 版面の右端に寄せ、左側は余白のまま残す */
    gap: 2.5rem;
    background: transparent;
    border-top: 1px solid var(--keisen);
    max-width: var(--measure);
    margin: 0 auto;
    padding: 0 var(--gutter);
  }
  .global-nav a {
    height: auto;
    padding: 1.5rem 0;
    color: var(--ai);
    border-left: 0;
    font-size: .9375rem;
  }
  .global-nav a:hover, .global-nav a:focus-visible { background: transparent; color: var(--shu); }
}

/* -------------------------------------------------------------- footer */
.site-footer {
  padding: 2.5rem var(--gutter);
  background: var(--ai-fuka);
  color: rgba(246, 241, 231, .78);
}
.site-footer p {
  max-width: var(--measure);
  margin: 0 auto;
  font-family: var(--gothic);
  font-size: .75rem;
  letter-spacing: .2em;
}

/* ----------------------------------------------------------------- a11y */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}