@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;500;600;700;800&display=swap');

/* ===== 見出しは明朝（Shippori Mincho）／本文はゴシックのまま ===== */
h1,
h2,
h3,
h4,
.p-shops__catch {
  font-family: "Shippori Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif;
}

/* Pricing cards */
.pricing-section {
  background-color: #f7f7f7;
  padding: 50px 0;
}

.pricing-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

.pricing-card {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
  padding: 20px;
  position: relative;
  text-align: center;
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.pricing-container .pricing-card {
  flex: 1;
  max-width: 400px;
  min-width: 300px;
}

.pricing-card:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  transform: translateY(-10px);
}

.pricing-header {
  background-color: var(--kc);
  border-radius: 10px 10px 0 0;
  color: #fff;
  padding: 20px 0;
  position: relative;
}

.pricing-plan {
  font-size: 24px;
  font-weight: bold;
  margin: 0;
}

.pricing-price {
  background-color: var(--kc);
  border-radius: 5px;
  color: #fff;
  font-size: 28px;
  font-weight: bold;
  margin: 10px 0;
  padding: 10px;
}

.pricing-description {
  color: #555;
  font-weight: bold;
  margin: 15px 0;
}

.pricing-features {
  list-style: none;
  margin: 20px 0;
  padding: 0;
  text-align: left;
}

.pricing-features li {
  margin-bottom: 10px;
  padding-left: 20px;
  position: relative;
}

.pricing-features li::before {
  color: var(--kc);
  content: "✓";
  font-weight: bold;
  left: 0;
  position: absolute;
}

.badge {
  background-color: #ff4b4b;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  padding: 5px 10px;
  position: absolute;
  right: 10px;
  top: 10px;
}

/* Box accents */
.c-box-border {
  background-color: #fff;
  border: var(--border, 5px solid var(--scd));
  border-radius: 10px;
  margin-bottom: 20px;
  padding: 20px;
}

.fa-check-circle {
  color: #008000;
  margin-right: 10px;
}

/* Footer/order-made footer */
.company-link i {
  color: #fff;
  font-size: 0.8em;
  margin-left: 5px;
}

/* Common UI overrides */
.g-pagetop a {
  background: var(--kc);
}

.c-btn--contact {
  background: linear-gradient(to bottom, #ff7e00, #e06800) !important;
}

.p-common-texture::after {
  background-color: #b8ddff;
}

.c-headline-compact .c-headline-compact__ttl::first-letter {
  color: var(--kc);
}

.p-contact .g-form {
  border: 3px dashed var(--kc);
}

/* Sitemap */
.c-sitemap .nav-item a {
  background-color: var(--kc);
  border: 1px solid #333;
  color: #fff;
}

.c-sitemap .nav-item a::after {
  background-image: none;
}

.c-sitemap .nav-item a .c-btn-simple__icon,
.c-sitemap .nav-item a i {
  color: #fff;
}
body.lai-cursor--native #cursor,
body.lai-cursor--native #stalker {
  display: none;
}



/* ===== 下層ページ 和紙の空気感 背景（トップこだわり等と統一） ===== */
.c-section.p-about-pg,
.p-latest-list,
.c-section.p-benefit,
.c-section.p-menu,
.c-section.p-shops,
.c-section.p-store,
.c-section.p-biz,
.c-section.p-mm,
/* お知らせ（一覧・カテゴリー別・詳細）。#contents ごと敷いて全幅にする。
   ※ body に p-news / p-media 等のスラッグclassが付くため、
     .p-news だけで書くと body に漏れる（[[reference]] 参照）。body.〜 で限定する。 */
body.post-type-archive-news #contents,
body.tax-newscat #contents,
body.single-news #contents {
  background-color: #f3ecdd !important;
      background-image:
        radial-gradient(55% 45% at 13% 9%, rgba(122, 90, 48, 0.13), rgba(122, 90, 48, 0) 60%),
        radial-gradient(50% 44% at 87% 16%, rgba(70, 60, 50, 0.11), rgba(70, 60, 50, 0) 60%),
        radial-gradient(62% 56% at 78% 95%, rgba(150, 114, 66, 0.13), rgba(150, 114, 66, 0) 62%),
        radial-gradient(46% 40% at 42% 52%, rgba(96, 74, 44, 0.07), rgba(96, 74, 44, 0) 60%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700'%3E%3Cfilter id='wc'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.014' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23wc)' opacity='0.16'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='wn'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23wn)' opacity='0.10'/%3E%3C/svg%3E") !important;
      background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat, repeat !important;
      background-size: auto, auto, auto, auto, 700px 700px, 220px 220px !important;
}

/* ===== お知らせ一覧（latest-posts list型）を全画面幅に =====
   テーマは 992px 以上で main に左右30pxの余白を付け、各セクションは
   .c-section--wide の負マージンで打ち消している。この部品にはその
   クラスが無いため、同じ値でブリードさせて背景を画面いっぱいにする。 */
@media screen and (min-width: 992px) {
  .p-latest-list {
    margin-left: -30px;
    margin-right: -30px;
  }
}

/* ===== フッターSNS：アイコンだけだと岐阜本店/一宮店の区別がつかないので店舗名を出す =====
   店舗名は ACF（フッター設定のSNSリンク）の「ラベル」を aria-label 経由で表示している。
   ラベルを変えれば表示も変わる。テーマ側 rich.php は触っていない。
   ※ rich.php の <style> は body 内＝add.css より後に来るため、
     .g-footer-rich を足して詳細度で勝たせている。 */
.g-footer-rich .g-footer-rich__sns {
  gap: 12px;
}

.g-footer-rich .g-footer-rich__sns-link {
  border-radius: 999px;
  gap: 9px;
  height: auto;
  min-height: 42px;
  padding: 0 20px;
  width: auto;
}

.g-footer-rich .g-footer-rich__sns-link::after {
  content: attr(aria-label);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
}

@media screen and (max-width: 575px) {
  .g-footer-rich .g-footer-rich__sns-link {
    padding: 0 16px;
  }
}

/* ============================================================
   2026-09-07 スマホ（〜767px）は各ページ冒頭の導入文を左揃えに
   ------------------------------------------------------------
   PCは中央揃えのまま（サイト全体の共通仕様）。SPは行が折り返すと
   中央揃えだと読みにくいため、本文だけ左寄せにする。
   見出し・英字ラベルは中央のまま。
   ※各ページテンプレの <style> は body 内＝add.css より後に来るので、
     詳細度を上げるため .c-section を前置している。
   ============================================================ */
@media screen and (max-width: 767px) {

  /* 下層ページのリード文 */
  .c-section .p-heat-lead__txt,
  .c-section .p-heat-lead__note,
  .c-section .p-menu__lead-txt,
  .c-section .p-shops-lead__txt,
  .c-section .p-benefit-lead__txt,
  .c-section .p-biz-lead__txt,
  .c-section .p-mm-lead__txt,
  .p-news-lead__txt,
  .c-section .p-store-intro__txt,
  .c-section .p-about-lead p {
    text-align: left;
  }

  /* ひゃくわ亭について（about）のリードは中の <p> も対象 */
  .c-section .p-about-lead {
    text-align: left;
  }

  /* キャッチは見出し扱いなので中央のまま。
     `.p-about-lead p` より詳細度を上げる必要がある（p.〜 で指定） */
  .c-section .p-about-lead p.p-about-lead__catch {
    text-align: center;
  }
}

/* ===== お知らせ本文中のリンク =====
   テーマ既定だと本文と同色・下線なしで、リンクだと分からないため明示する。 */
body.single-news .post-content a {
  color: var(--kc);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

body.single-news .post-content a:hover {
  color: var(--ac);
}

/* ============================================================
   2026-09-16 再々修正 指示書 3．共通修正
   ▼この「=== ここから ===」〜「=== ここまで ===」を削除すれば元に戻ります
   === ここから ===
   ============================================================ */

/* 3-(1) 各ページ上部（背景画像上）のページタイトル・記事タイトルの書体統一
   テーマ既定は Adobe Fonts の "fot-tsukuaoldmin-pr6n" 指定だが、その
   Webフォントを読み込んでいないため sans-serif にフォールバックしていた。
   サイト内の見出し（h1〜h4）と同じ明朝に揃える。 */
.c-visual-sub .c-visual-sub__ttl {
  font-family: "Shippori Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif;
}

/* 3-(2) スマートフォンでの不自然な折り返し対策
   文末の1〜2文字だけが次行に落ちるのを防ぐ。
   ・text-wrap:balance      … 行の長さを均等に割り付ける（孤立行を作らない）
   ・word-break:auto-phrase … 対応ブラウザでは文節の区切りで改行する
   ・font-size:min(px, vw)  … 端末幅が狭いときだけ自動で少し縮める
   ※未対応ブラウザは宣言が無視されるだけで、表示は従来どおり。 */
@media screen and (max-width: 767.98px) {

  .p-kodawari__head h2,
  .p-kodawari__head h3,
  .p-heat-lead__ttl,
  .p-store-intro__catch,
  .p-about__ttl,
  .p-shops__catch,
  .p-benefit-item__ttl,
  .p-about-lead__catch,
  .c-visual-sub__ttl {
    text-wrap: balance;
    word-break: auto-phrase;
  }

  /* 指示書で指摘のあった3箇所は、1行に収まるよう字間・字詰めも微調整 */
  .p-kodawari__head h2 {
    font-size: min(24px, 5.8vw) !important;
    letter-spacing: 0.04em;
  }

  .p-kodawari__head h3 {
    font-size: min(16px, 3.9vw) !important;
    letter-spacing: 0.01em;
  }

  .p-heat-lead__ttl {
    font-size: min(22px, 5.5vw) !important;
    letter-spacing: 0.01em !important;
  }

  .p-store-intro__catch {
    font-size: min(20px, 5.1vw) !important;
    letter-spacing: 0.01em !important;
  }

  /* KVタイトルは明朝のほうが字幅が広く、30px固定だと端末により折り返すため
     端末幅に応じて少しだけ縮める（PC・タブレットは従来どおり） */
  .c-visual-sub .c-visual-sub__ttl {
    font-size: min(30px, 7.4vw) !important;
  }
}

/* ============================================================
   === ここまで ===
   ============================================================ */

/* ===== 2026-09-17 写真差し替え：お知らせのタイトル背景 =====
   写真の上半分（テントと人の様子）でイベントの雰囲気が伝わるよう上寄せで切り抜く。 */
body.post-type-archive-news .c-visual-sub__image,
body.single-news .c-visual-sub__image,
body.tax-newscat .c-visual-sub__image {
  background-position: center 6% !important;
}

/* 店舗詳細「店舗の様子」：人物の頭が切れないよう切り抜きを少し上寄せ（2026-09-17） */
.p-store-photo__img {
  background-position: center 15% !important;
}

/* ===== 下層ページのサブビジュアル：ぼかしを解除（2026-10-05 お客様指示） =====
   テーマ共通CSS（style.css）の
     .c-visual-sub .c-visual-sub__inner { backdrop-filter: blur(5px); }
   によって、タイトル帯の裏にある背景写真全体がぼけて表示されていた。
   ▼戻す場合：このブロックを削除する（style.css 側は触っていない） */
.c-visual-sub .c-visual-sub__inner {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}


/* ===== サブビジュアルのタイトルに影を付ける（2026-10-05 お客様指示） =====
   「オーバーレイ濃さ」を0にして写真の上の黒い幕をなくしたため、
   明るい写真（お品書き・お知らせ）で白文字が読みにくくなるのを防ぐ。
   写真そのものには何もかけず、文字のまわりにだけ薄い影を落としている。
   ▼戻す場合：このブロックを削除する */
.c-visual-sub .c-visual-sub__ttl,
.c-visual-sub .c-visual-sub__label {
  text-shadow:
    0 0 2px rgba(0, 0, 0, 0.9),
    0 0 6px rgba(0, 0, 0, 0.8),
    0 0 18px rgba(0, 0, 0, 0.75),
    0 0 40px rgba(0, 0, 0, 0.6),
    0 0 80px rgba(0, 0, 0, 0.5);
}