@charset "UTF-8";

/* ==========================================================================
   POLISH PACK v1.1 — Cafe Crescent
   既存の style.css / script.js は一切変更していません。
   このファイルを読み込むだけで下記が適用されます。
   戻したい時は index.html の該当1行を消せば元通りです。

   目次
     1. 背景の質感（紙のきめ ＋ 窓から差す光）
     2. Concept の写真を大きく、文字側へ溶かす
     3. メニューを 2×2 に（写真を大きく見せる）
     4. 細部の調整
   ========================================================================== */


/* ==========================================================================
   1. 背景の質感
   明るい面のテクスチャは、暗い面よりずっと目立ちます。
   月影（暗い背景）では opacity 0.05 でしたが、ここでは 0.03 が上限。
   「入れたか分からないくらい」がちょうどいい濃さです。
   ========================================================================== */

/* --- 1-a. 紙のきめ --------------------------------------------------------
   mix-blend-mode: multiply で「わずかに沈む」方向にかけます。
   明るい背景に加算方向のノイズを乗せると、白飛びして「かすれ」に見えます。 */
body::after {
  content: "";
  position: fixed;
  inset: -50%;
  width: 200%;
  height: 200%;
  pointer-events: none;
  z-index: 9000;
  opacity: 0.03;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
}

/* --- 1-b. 窓から差す光 ----------------------------------------------------
   コンセプト文の「窓から差し込む午後の光の中で」を背景で表現します。
   文章で言っていることを絵でも言う、という狙いです。 */
body {
  position: relative;
}

body::before {
  content: "";
  position: fixed;
  inset: -20%;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(42% 38% at 18% 12%, rgba(255, 236, 196, 0.55), transparent 70%),
    radial-gradient(38% 34% at 82% 58%, rgba(255, 228, 178, 0.40), transparent 72%),
    radial-gradient(50% 44% at 50% 108%, rgba(184, 150, 62, 0.10), transparent 74%);
  animation: cafeLight 42s ease-in-out infinite alternate;
}

@keyframes cafeLight {
  0%   { transform: translate3d(0, 0, 0) scale(1);       opacity: 0.85; }
  50%  { transform: translate3d(1.5%, -1%, 0) scale(1.07); opacity: 1; }
  100% { transform: translate3d(-1.5%, 1.5%, 0) scale(1.02); opacity: 0.9; }
}

/* 本文を光の上に乗せる */
main,
.site-header,
.site-footer {
  position: relative;
  z-index: 1;
}

/* ヘッダーは元から z-index:1000 の固定要素なので、そのまま維持 */
.site-header { z-index: 1000; }


/* ==========================================================================
   2. Concept の写真を大きく、文字側へ溶かす
   ▼ 明るいサイトでの重要な注意
   月影（暗い背景 × 暗い写真 × 白文字）は写真に文字が重なっても読めましたが、
   ここは明るい背景 × 明るい写真 × 濃い文字。写真の明るい部分に文字が乗ると
   一気に読めなくなります。
   そこで「写真は文字の下へ潜り込ませるが、文字が始まる手前で完全に
   透明にしきる」設計にしています。重なる範囲には写真が出ません。
   ========================================================================== */
@media (min-width: 769px) {

  .concept-wrapper {
    gap: 0;
    align-items: center;
  }

  /* 文字は写真の上。幅を固定して、溶かす位置を計算できるようにする */
  .concept-text-content {
    flex: 0 0 50%;
    position: relative;
    z-index: 2;
    padding-right: 40px;
  }

  /* 写真は文字側へ 8% 潜り込ませ、右は画面の端まで抜く。
     margin-right: calc(50% - 50vw) が「コンテナの外側の余白ぶん」に相当します。
     中途半端な位置で切れると「切れ忘れ」に見えるので、端まで抜くか、
     完全に溶かすかのどちらかにするのが安全です。 */
  .concept-image-content {
    flex: 1 1 auto;
    margin-left: -8%;
    margin-right: calc(50% - 50vw);
    position: relative;
    z-index: 1;
  }

  /* 白フチと影を外す（枠があると「溶ける」と矛盾するため） */
  .concept-image-content .image-frame {
    padding: 0;
    background: none;
    box-shadow: none;
    border-radius: 0;
  }

  /* 枠に付いていた三日月の飾りも、この見せ方では外す */
  .concept-image-content .image-frame::after {
    display: none;
  }

  .concept-img {
    border-radius: 0;
  }

  /* 上下の切れ目も溶かす。
     マスクは1要素に1つしか指定できない（複数指定は mask-composite が必要で
     非対応ブラウザで逆に濃くなる）ため、入れ子の親子で1つずつ持たせています。
     親＝縦方向、子＝横方向。結果として2方向とも溶けます。 */
  .concept-image-content {
    -webkit-mask-image: linear-gradient(
      to bottom, transparent 0%, #000 9%, #000 91%, transparent 100%
    );
    mask-image: linear-gradient(
      to bottom, transparent 0%, #000 9%, #000 91%, transparent 100%
    );
  }

  /* 左端を完全に透明にしてから、文字が始まる手前で立ち上げる。
     潜り込み量 8%（写真幅に対して約14%）より内側で 0 のままにするのが要点。 */
  .concept-image-content .image-frame {
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0%,
      transparent 20%,
      rgba(0, 0, 0, 0.55) 42%,
      #000 66%
    );
    mask-image: linear-gradient(
      to right,
      transparent 0%,
      transparent 20%,
      rgba(0, 0, 0, 0.55) 42%,
      #000 66%
    );
  }
}

/* スマホは縦積みなので重なりが起きない。枠付きの元の見せ方をそのまま活かす */
@media (max-width: 768px) {
  .concept-image-content {
    max-width: 520px;
  }

  /* PC幅を想定した <br> が残っていると、はみ出した数文字だけが
     次の行にポツンと落ちます。スマホでは改行指定を無効にして、
     上の word-break: auto-phrase に折り返しを任せます。 */
  .concept-lead br {
    display: none;
  }
}


/* ==========================================================================
   3. メニューを 2×2 に
   元は 3カラムでしたが、1カテゴリ4品なので PC幅では「3個＋1個」に割れて
   最後の1枚だけ取り残されていました。2カラムにすると割り切れるうえ、
   写真が倍近く大きくなります。カフェは写真の大きさがそのまま集客力です。
   ========================================================================== */
@media (min-width: 993px) {
  .menu-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 34px;
    max-width: 940px;
    margin-left: auto;
    margin-right: auto;
  }

  /* 写真が大きくなるぶん、余白と文字も少しゆったりさせる */
  .card-body {
    padding: 28px 30px 30px;
  }

  .card-title {
    font-size: 1.25rem;
  }

  .card-text {
    font-size: 0.9rem;
    line-height: 1.9;
  }
}


/* ==========================================================================
   4. 細部の調整
   ========================================================================== */

/* 選択色を店のゴールドに */
::selection {
  background: rgba(184, 150, 62, 0.22);
  color: var(--text-dark);
}

/* スクロールバーも合わせる */
html {
  scrollbar-color: rgba(184, 150, 62, 0.45) transparent;
  scrollbar-width: thin;
}

::-webkit-scrollbar { width: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(184, 150, 62, 0.35);
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(184, 150, 62, 0.55); }

/* --- 日本語の改行を整える -------------------------------------------------
   日本語は英語と違って単語の切れ目が無いため、放っておくと
   「ジャムとバ / ターを添えた」のように語の途中で折り返されます。
   1文ずつ <span> で囲って制御する手もありますが、文章を直すたびに
   やり直しになるので、CSS 側でまとめて解決します。

   word-break: auto-phrase … ブラウザが文節を判定して、そこで改行する
   line-break: strict       … 「っ」「ー」などが行頭に来るのを防ぐ
   text-wrap: pretty        … 最終行が1文字だけ残るのを避ける

   いずれも非対応ブラウザは無視するだけなので、入れて壊れることはありません。 */
.concept-lead,
.card-text,
.card-title,
.contact-lead,
.contact-notice,
.info-table td,
.table-note,
.footer-warning,
.footer-package,
.notice-text {
  word-break: auto-phrase;
  line-break: strict;
  text-wrap: pretty;
}

/* 見出しは行ごとの長さを揃える */
.card-title,
.section-title .title-ja,
.category-title,
.hero-title {
  text-wrap: balance;
}

/* アクセス行の中の補足を読みやすく */
.info-table .table-note {
  line-height: 1.7;
}

/* 営業用の表記（DEMOバッジ・価格）を外したぶん、フッターの余白を詰める。
   中身がコピーライト1行だけになるので、元の padding: 50px だと間延びします。 */
.site-footer {
  padding: 28px 0;
}

.site-footer .footer-copyright {
  margin: 0;
}

/* お問い合わせカードも、注記を外したぶん下の余白を詰める */
.contact-actions {
  margin-bottom: 0;
}


/* ==========================================================================
   モーションを減らす設定への配慮
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
}