@charset "UTF-8";

/* ============================================================
   TOCAR / MUNDO NOVO  —  custom styles
   SP版をベースに、PC版は両サイドに余白を入れるだけの設計
   ============================================================ */

:root {
  --content-max: 600px;        /* コンテンツ最大幅 */
  /* 大きめの余白の基準値。our story 1枚目の画像と直後の本文の間隔にそろえる */
  --gap-lg:      54px;
  /* メニュー／閉じるボタンの右オフセット。アイコンSVGは左右に約14px の余白を内包しているため、
     見た目の右余白は この値 + 約14px（6px なら約20px）になる。画面端に付かない範囲で右寄せ */
  --menu-offset: 6px;
  --ink:        #4c4b4c;        /* 基本フォントカラー */
  --ink-soft:   #7a8585;        /* ラベル等の弱い文字色 */
  --side-bg:    #b0bdbd;        /* 両サイド余白の背景色 */
  --line:       #c8cdcb;        /* 罫線・ラベル線 */
  --placeholder:#d7dada;        /* グレープレースホルダー */
  --jp: "Shippori Mincho", serif;
  --en: "Plus Jakarta Sans", sans-serif;
}

/* ---------- base ---------- */
* { box-sizing: border-box; }

/* ナビのページ内リンクはなめらかにスクロール（動きを減らす設定の環境では無効） */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--side-bg);
  color: var(--ink);
  font-family: var(--jp);
  font-weight: 500;
  line-height: 2;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

/* コンテンツカラム：最大600px・中央寄せ・背景白 */
.site {
  position: relative;
  max-width: var(--content-max);
  margin-inline: auto;
  background: #fff;
  min-height: 100vh;   /* dvh 非対応ブラウザ用フォールバック */
  min-height: 100dvh;  /* モバイル Chrome 等でアドレスバー分の余白が出るのを防ぐ */
  overflow: hidden;
}

/* ============================================================
   HERO
   ============================================================ */
.hero { position: relative; }

.hero__image { width: 100%; }

/* ハンバーガーボタン。全ページ共通のため header.php で出力する */
.site-menu {
  position: fixed;
  top: 22px;
  /* スクロールしても固定。PC ではコンテンツ列（最大600px）の右上に合わせる */
  right: max(var(--menu-offset), calc((100vw - var(--content-max)) / 2 + var(--menu-offset)));
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  z-index: 30;
}
.site-menu img { width: 100%; }

.hero__logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 84%;
  margin: 0;
}
.hero__logo img { width: 100%; }

/* ============================================================
   SECTION 共通
   ============================================================ */
.section {
  position: relative;
  /* 下余白は最後のコンテンツ直下（約1文字＋α）で抑え、次セクションの上余白で間隔を確保 */
  padding-top: 84px;
  padding-bottom: 22px;
}
.section__inner {
  /* 左はセクション名（縦書きラベル）の分だけ広く取り、右は狭め
     ラベル縮小（left:10px / 15px）で空いた分、左 padding も詰めてコンテンツに回す */
  padding-left: 51px;
  padding-right: 31px;
}

/* 縦組みのセクションラベル（左端） */
.label {
  position: absolute;
  top: 84px;
  bottom: 0;
  left: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 5;
}
.label__text {
  writing-mode: vertical-rl;
  font-family: var(--en);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  white-space: nowrap;
  text-transform: lowercase;
  /* 登場アニメ：フェードイン */
  opacity: 0;
  transition: opacity .9s ease;
}
.label::after {
  content: "";
  width: 1px;
  flex: 1 0 0;
  margin-top: 16px;
  background: var(--line);
  /* 登場アニメ：上から下へゆっくり伸びる（文字フェードの少し後に） */
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 2.2s ease .6s;
}

/* スクロールでビューに入ったら再生 */
.label.is-inview .label__text { opacity: 1; }
.label.is-inview::after { transform: scaleY(1); }

/* our story はセクションが長く線も長いため、速度をかなり遅くして体感速度を揃える */
.section--story .label::after { transition-duration: 6s; }

@media (prefers-reduced-motion: reduce) {
  .label__text { opacity: 1; transition: none; }
  .label::after { transform: none; transition: none; }
}

/* ============================================================
   本文（リード文）
   ============================================================ */
.lead {
  margin: 0 0 2.4em;
  text-align: center;
  font-size: 13px;
  letter-spacing: 0;
  line-height: 2.4;
}
.lead:last-child { margin-bottom: 0; }

/* ============================================================
   画像（figure）
   ============================================================ */
/* Bootstrap の .figure{display:inline-block} を打ち消す（auto マージンを効かせるため） */
.figure { display: block; margin: 0 0 var(--gap-lg); }
.figure:last-child { margin-bottom: 0; }

.figure--full  { width: 100%; }
.figure--left  { width: 61%;  margin-right: auto; }
.figure--right { width: 50%;  margin-left: auto; margin-top: -18px; }
.figure--center{ width: 88%;  margin-inline: auto; margin-bottom: var(--gap-lg); }

/* セクション間で本文と画像の余白を整える */
/* コンテンツ上部を少し下げ、セクション名より下から始める（全セクション共通） */
.section--story   .section__inner,
.section--shop    .section__inner,
.section--journal .section__inner,
.section--mundo   .section__inner { padding-top: 10px; }
.section--story  .lead  { margin-bottom: 2.6em; }
/* 最後の本文の下マージンは打ち消す（border 終端を本文直下に寄せる） */
.section--story  .lead:last-child { margin-bottom: 0; }
.section--story  .figure--full { margin-block: var(--gap-lg); }
/* p6（左揃え）・p2（右揃え）のスタッガー配置。
   2枚の間隔(30px)は重なり感を出す配置意図のためそのまま、前後の大きめ余白は基準値にそろえる */
.section--story  .figure--left  { margin-top: var(--gap-lg); margin-bottom: 30px; }
.section--story  .figure--right { margin-top: 0; margin-bottom: var(--gap-lg); }

/* ============================================================
   ボーダーボタン
   ============================================================ */
.btn-line {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  /* 矢印の絶対配置スペースを左右に確保し、テキストはボタン中央に */
  padding: 8px 56px;
  border: 1px solid var(--ink);
  font-family: var(--jp);
  font-size: 14px;
  letter-spacing: 0.18em;
  color: var(--ink);
  transition: opacity .3s;
}
/* online shop はボタン幅を少し広げ、狭い画面でも1行で収める。
   矢印と当たらないよう右パディングを多めにしてテキストを少し左にオフセット */
.section--shop .btn-line {
  width: 88%;
  margin-inline: auto;
  letter-spacing: 0;
  padding: 8px 46px 8px 22px;
}
/* journal の記事一覧ボタンも online shop と同じ 88% 幅・中央寄せにそろえる */
.section--journal .btn-line { width: 88%; margin-inline: auto; }
/* hover は透明度を少し下げるだけ。
   入場アニメの .js-fade.is-visible{opacity:1} と詳細度が並ぶと打ち消されるため、
   要素型 a を含めて詳細度を一段上げて上書きする（transition も同様） */
a.btn-line { transition: opacity .3s; }
a.btn-line:hover { opacity: .6; }
/* 準備中（クリック不可）。矢印は置かず、欧文書体で「Coming Soon」を表示する */
.btn-line--disabled {
  border-color: #b0bdbd;
  color: #b0bdbd;
  font-family: var(--en);
  font-weight: 600;
  letter-spacing: 0.14em;
  padding-inline: 22px;
  pointer-events: none;
  cursor: default;
}
.btn-line__text { white-space: nowrap; }
/* 矢印は CSS で描画（1px の細線＋シェブロンの矢じり） */
.btn-line__arrow {
  position: absolute;
  right: 20px;
  top: 50%;
  width: 35px;
  height: 0.35px;
  background: var(--ink);
  transform: translateY(-50%);
}
/* 矢じり：先端から左上へ伸びる 1px の細線 1 本のみ */
.btn-line__arrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 8px;
  height: 1px;
  background: var(--ink);
  transform: rotate(45deg);
  transform-origin: right center;
}

/* ============================================================
   JOURNAL（一覧レイアウト）
   アーカイブページで使う。トップはカルーセル表示（下記）
   ============================================================ */
.journal-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.journal-list__item {
  padding: 34px 0 24px;
  border-bottom: 1px solid var(--line);
}
/* 先頭記事はセクション上部の余白がそのまま効くよう上パディングを持たない */
.journal-list__item:first-child { padding-top: 0; }

/* リンク側で 23px を戻し、日付・タイトルの左右位置を本文と同じ 51px にそろえる */
.journal-list__link {
  display: block;
  padding-inline: 23px;
  transition: opacity .3s;
}
a.journal-list__link:hover { opacity: .6; }

.journal-list__date {
  display: block;
  margin-bottom: 9px;
  font-family: var(--en);
  font-weight: 600;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}
.journal-list__title {
  display: block;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.07em;
  color: var(--ink);
}

/* ============================================================
   JOURNAL（トップのカルーセル）
   ============================================================ */
.journal { margin-bottom: var(--gap-lg); }

/* スライダー：カード幅の中だけで切り替わる（外にははみ出さない） */
.journal__slider { overflow: hidden; }
.journal__track {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  transition: transform .6s ease;
}
.journal__slide { flex: 0 0 100%; min-width: 0; }

.journal__card {
  display: block;
  transition: opacity .3s;
}
a.journal__card:hover { opacity: .8; }

.journal__thumb { margin: 0; }
/* 投稿画像はアスペクト比がまちまちなため 3:2 にトリミングして表示 */
.journal__thumb img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center;
}

/* アイキャッチ未設定時のプレースホルダー。画像と同じ 3:2 の枠をグレーで確保する */
.journal__placeholder {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  background: var(--placeholder);
}

.journal__meta {
  background: #f1f3f2;
  padding: 18px 22px 22px;
}
.journal__date {
  display: block;
  font-family: var(--en);
  font-weight: 600;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.12em;
  color: var(--ink-soft);
}
.journal__title {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0.06em;
  color: var(--ink);
}

/* カルーセルのドット（クリックで該当スライドへ） */
.dots {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 26px 0 0;
  padding: 0;
}
.dots li { display: flex; }
.dots__item {
  display: block;
  box-sizing: content-box;
  width: 22px;
  height: 2px;
  padding: 8px 0;            /* 見た目は細いままタップ領域を広げる */
  border: 0;
  background: var(--line);
  background-clip: content-box;
  cursor: pointer;
  transition: background-color .3s;
}
/* shorthand だと background-clip がリセットされ太く見えるため background-color で指定 */
.dots__item.is-active { background-color: var(--ink); }

/* 準備中（Coming Soon ボタンのみ）のセクション。
   中身が1要素だけだと縦書きラベルの縦線が入る高さを確保できないため、上下に余白を足す */
.section--coming-soon .section__inner {
  padding-top: 78px;
  padding-bottom: 62px;
}

/* ============================================================
   JOURNAL（アーカイブ／個別記事ページ）
   ============================================================ */
/* カンプ準拠。ラベルは縦線を持たず上部に置き、本文は 150px 下から始める */
.journal-page {
  padding-top: 150px;
  padding-bottom: 70px;
}
.journal-page .label {
  top: 21px;
  bottom: auto;
}
.journal-page .label::after { content: none; }

/* 一覧の外枠。区切り線の左右位置（28px）を決める */
.journal-page__inner { padding-inline: 28px; }

.journal-page .pager { margin-top: 72px; }

.journal-empty {
  margin: 0;
  padding-inline: 23px;
  font-size: 13px;
  line-height: 2.3;
}

/* ページ送り（1 2 3 >）
   ※ Bootstrap の .pagination と衝突するため、クラス名は pager を使う */
.pager__list {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pager__item { display: flex; }
.pager .page-numbers {
  font-family: var(--en);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  transition: opacity .3s;
}
.pager a.page-numbers:hover { opacity: .6; }
.pager .page-numbers.current { color: var(--ink); }
.pager .page-numbers.dots { letter-spacing: 0; }

/* ---------- 個別記事 ---------- */
.article__head,
.article__body { padding-inline: 51px; }

.article__date {
  display: block;
  margin-bottom: 9px;
  font-family: var(--en);
  font-weight: 600;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}
.article__title {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.07em;
}

/* アイキャッチ。カンプ準拠で 3:2 にトリミングし、本文より外側まで広げる */
.article__thumb {
  width: 88%;
  margin: 43px auto 0;
}
.article__thumb img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center;
}

.article__body {
  margin-top: 38px;
  /* カンプ実測は 13px だが、記事は読み物のため 1px 上げて可読性を優先 */
  font-size: 14px;
  line-height: 2.3;
}
.article__body > * { margin: 0 0 2.3em; }
.article__body > :last-child { margin-bottom: 0; }
.article__body h2,
.article__body h3 {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.06em;
}
.article__body img { margin-inline: auto; }
.article__body a { text-decoration: underline; }

/* 「記事一覧へ」ボタン。カンプ準拠で本文より狭い 67% 幅・中央寄せ */
.article__back {
  width: 67%;
  margin: 118px auto 0;
}

/* ============================================================
   MUNDO NOVO
   ============================================================ */
/* 店舗写真：カンプ準拠で 3:2 にトリミング（元画像は 4:3 寄りのため上下を少し切る） */
.mundo__photo {
  margin: 0 0 var(--gap-lg);
  aspect-ratio: 3 / 2;
}
.mundo__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 店名（欧文＋カタカナ）。カンプ準拠で本文より字間を広く取る */
.mundo__name {
  margin: 0 0 30px;
  text-align: center;
  font-size: 13px;
  letter-spacing: 0.24em;
  line-height: 2;
}

.mundo__desc { margin-bottom: 31px; }
.mundo__info { margin-bottom: 40px; }
.mundo__desc,
.mundo__info {
  text-align: center;
  font-size: 13px;
  letter-spacing: 0.14em;
  line-height: 2.4;
}
.mundo__desc p,
.mundo__info p { margin: 0; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  text-align: center;
  padding: 44px 20px 56px;
}
.footer small {
  display: block;
  font-family: var(--en);
  font-weight: 600;
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}

/* Instagram アイコン：コピーライトの下に中央配置 */
.footer__ig {
  display: block;
  width: 20px;
  margin: 24px auto 0;
  opacity: .75;
  transition: opacity .3s;
}
.footer__ig:hover { opacity: 1; }
.footer__ig img { width: 100%; }

/* ============================================================
   NAV DRAWER（ハンバーガーメニュー）
   ============================================================ */
.nav-drawer {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  background: rgba(255, 255, 255, 0.97);
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease;
}
.nav-drawer.is-open { opacity: 1; visibility: visible; }

.nav-drawer__close {
  position: absolute;
  /* メニューボタン（.site-menu）と同じ位置・サイズにそろえる */
  top: 22px;
  right: max(var(--menu-offset), calc((100vw - var(--content-max)) / 2 + var(--menu-offset)));
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.nav-drawer__close img {
  height: 28px;
  width: auto;
  display: block;
}
.nav-drawer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}
.nav-drawer__list li { margin: 22px 0; }
.nav-drawer__list a {
  font-family: var(--en);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: 0.12em;
  color: var(--ink);
}

/* Instagram アイコン：メニュー項目の下に中央配置 */
.nav-drawer__ig {
  display: block;
  width: 24px;
  margin-top: 24px;
  opacity: .75;
  transition: opacity .3s;
}
.nav-drawer__ig:hover { opacity: 1; }
.nav-drawer__ig img { width: 100%; display: block; }

/* ============================================================
   スクロールフェードイン
   ============================================================ */
.js-fade {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1s ease, transform 1s ease;
}
.js-fade.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js-fade { opacity: 1; transform: none; transition: none; }
}