@charset "UTF-8";
/* ============================================================
   お好み天ぷらページ専用スタイル（okonomitempura.html 専用）
   ※このファイルは当該ページからのみ読み込みます。
     common.css / page.css など共有CSSには追記しないこと。
   ============================================================ */
    /* ===== リセット・ベース ===== */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --ink: #1c1408;
      --bg: #fdfaf5;
      --gold: #9e7d3a;
      --gold-light: #c4a05a;
      --link: #302000;
      --link-hover: #5a3e10;
      --dark: #3a2e1e;
      --footer: #1e1810;
      --cream: #f8f3e6;
      --cream2: #f5efe0;
      --muted: #52422f;
      --line: #e3d8bf;
      --mincho: "游明朝", "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "ヒラギノ明朝 ProN", "MS 明朝", serif;
      --gothic: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", YuGothic, "Yu Gothic Medium", Meiryo, system-ui, sans-serif;
      /* 左右の余白（レスポンシブ）：小さいスマホ32px 〜 画面幅8.5% 〜 上限50px。ここ1行で全体を調整可 */
      --gutter: clamp(32px, 8.5vw, 50px);
    }

    html { scroll-behavior: smooth; }

    body {
      font-family: var(--gothic);
      font-size: 16px;
      line-height: 1.9;
      color: var(--ink);
      background: var(--bg);
      -webkit-font-smoothing: antialiased;
    }

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

    a { color: var(--link); text-decoration: none; }
    a:hover { color: var(--link-hover); }

    .wrapper { max-width: 980px; margin: 0 auto; padding: 0 var(--gutter); }

    /* ===== ヘッダー（スティッキー） ===== */
    .site-header {
      position: sticky;
      top: 0;
      z-index: 100;
      background: var(--dark);
      box-shadow: 0 1px 6px rgba(0,0,0,0.18);
    }
    .header-inner {
      display: flex;
      align-items: center;
      max-width: 980px;
      margin: 0 auto;
      padding: 10px var(--gutter);
    }
    .logo img { height: 42px; width: auto; }

    /* ハンバーガーボタン（右上固定） */
    .nav-toggle {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-left: auto;
      padding: 8px 6px;
      background: none;
      border: 0;
      cursor: pointer;
      color: #f0e6c8;
      font-family: inherit;
      font-size: 13px;
      letter-spacing: 0.12em;
    }
    .hamburger {
      position: relative;
      width: 24px;
      height: 16px;
      flex-shrink: 0;
    }
    .hamburger span {
      position: absolute;
      left: 0;
      width: 100%;
      height: 2px;
      background: #f0e6c8;
      transition: transform .3s ease, opacity .2s ease, top .3s ease;
    }
    .hamburger span:nth-child(1) { top: 0; }
    .hamburger span:nth-child(2) { top: 7px; }
    .hamburger span:nth-child(3) { top: 14px; }
    body.nav-open .hamburger span:nth-child(1) { top: 7px; transform: rotate(45deg); }
    body.nav-open .hamburger span:nth-child(2) { opacity: 0; }
    body.nav-open .hamburger span:nth-child(3) { top: 7px; transform: rotate(-45deg); }

    /* ナビ本体 */
    .site-nav { }
    .nav-list { list-style: none; display: flex; }
    .nav-list a {
      display: block;
      color: #f0e6c8;
      letter-spacing: 0.08em;
    }
    .nav-list a.current { color: var(--gold-light); }
    .nav-close { display: none; }

    /* ドロワー背景（暗幕） */
    .nav-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(20,14,4,0.45);
      z-index: 90;
      opacity: 0;
      visibility: hidden;
      transition: opacity .32s ease, visibility .32s ease;
    }
    body.nav-open .nav-backdrop { opacity: 1; visibility: visible; }

    /* ===== ヒーロー ===== */
    #hero { position: relative; overflow: hidden; }
    #hero img {
      width: 100%;
      height: clamp(360px, 62vw, 560px);
      object-fit: cover;
      object-position: center 58%;
    }
    .hero-overlay {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .hero-eyebrow {
      font-size: 12px;
      letter-spacing: 0.22em;
      color: #f0e0b0;
      margin-bottom: 10px;
      text-shadow: 0 1px 6px rgba(0,0,0,0.55);
    }
    /* ヒーロー縦書きタイトル（黒短冊2本・Noto Serif JP 200） */
    .hero-title {
      display: flex;
      flex-direction: row-reverse;
      align-items: flex-start;
      gap: 6px;
    }
    .hero-title span {
      writing-mode: vertical-rl;
      text-orientation: mixed;
      background: #000;
      color: #f4ecd6;
      font-family: "Noto Serif JP", var(--mincho);
      font-weight: 200;
      font-size: clamp(44px, 6.5vw, 62px);
      letter-spacing: -0.05em;
      line-height: 1.05;
      white-space: nowrap;
      padding: 0;
    }
    .hero-title .l2 { margin-top: 2em; }
	
	/* デフォルト（PCなど広い画面）では改行タグを非表示にする */
.sp-only {
  display: none;
}

/* 画面幅が 768px 以下の時だけ改行タグを表示する */
@media (max-width: 768px) {
  .sp-only {
    display: inline;
  }
}

    .hero-sub {
      margin-top: 10px;
      font-size: clamp(13px, 2.6vw, 16px);
      letter-spacing: 0.06em;
      color: #f4ecd6;
      text-shadow: 0 1px 6px rgba(0,0,0,0.5);
    }
    .hero-season {
      margin-top: 4px;
      font-size: clamp(13px, 2.6vw, 16px);
      letter-spacing: 0.08em;
      color: #e7c982;
      text-shadow: 0 1px 6px rgba(0,0,0,0.5);
    }

    /* ===== セクション共通 ===== */
    .section { padding: 54px 0; }
    .section-heading {
      font-family: var(--mincho);
      font-weight: 300;
      font-size: clamp(30px, 6vw, 46px);
      letter-spacing: 0.1em;
      text-align: center;
      margin-bottom: 30px;
      position: relative;
      padding-bottom: 16px;
    }
    .section-heading::after {
      content: "";
      position: absolute;
      left: 50%;
      bottom: 0;
      transform: translateX(-50%);
      width: 46px;
      height: 2px;
      background: var(--gold);
    }
    /* メニュー小見出し：金色の帯＋白文字 */
    .section-subheading {
      font-weight: 600;
      font-size: 16px;
      letter-spacing: 0.08em;
      color: #fff;
      background: var(--gold);
      margin: 28px 0 14px;
      padding: 8px 14px;
      border-radius: 2px;
    }
    .lead { font-size: 16px; line-height: 2; }

    /* 非表示ユーティリティ（季節アピール等をワンタッチでOFF） */
    .is-hidden { display: none !important; }

    /* ===== 季節アピール ===== */
    .season-feature { background: var(--cream); }
    .season-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 28px;
      align-items: center;
    }
    .season-img img {
      width: 100%;
      aspect-ratio: 3 / 2;
      object-fit: cover;
      border-radius: 2px;
    }
    .season-eyebrow {
      display: inline-block;
      font-size: 12px;
      letter-spacing: 0.2em;
      color: #fff;
      background: var(--gold);
      padding: 4px 14px;
      border-radius: 2px;
      margin-bottom: 16px;
    }
    .season-heading {
      font-family: var(--mincho);
      font-weight: bold;
      font-size: clamp(22px, 4.4vw, 30px);
      letter-spacing: 0.1em;
      line-height: 1.5;
      margin-bottom: 18px;
	  text-align: center; /* スマホ：中央（PC以上は 768px 以降で左揃えに上書き） */
    }
    .season-text p + p { margin-top: 16px; }
    .season-body { font-size: 15.5px; }
    .season-link { margin-top: 22px; }
    .season-link a {
      color: var(--link);
      border-bottom: 1px solid var(--gold-light);
      padding-bottom: 2px;
      font-size: 15px;
      letter-spacing: 0.04em;
    }
    .season-link a:hover { border-bottom-color: var(--link-hover); }

    /* ===== ①お好み天ぷらとは ===== */
    .about-grid { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; }
    .about-text p + p { margin-top: 18px; }
    .about-img img {
      width: 100%;
      max-width: 460px;
      margin: 0 auto;
      aspect-ratio: 1 / 1;
      object-fit: cover;
      border-radius: 2px;
    }

    /* ===== ②こだわり（刷新） ===== */
    #kodawari { background: var(--cream); }
    .kodawari-lead { text-align: center; max-width: 720px; margin: 0 auto 34px; }
    .kodawari-list {
      display: grid;
      grid-template-columns: 1fr;
      gap: 40px;
    }
    .kodawari-point { text-align: center; }
    .kodawari-photo {
      position: relative;
      width: 100%;
      max-width: 300px;
      margin: 0 auto 26px;
      aspect-ratio: 1 / 1;
    }
    .kodawari-photo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 2px;
      display: block;
    }
    /* 仮画像プレースホルダー（実写真の <img> に差し替え可） */
    .photo-placeholder {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #efe7d3;
      border: 1px dashed #cdbb92;
      border-radius: 2px;
      color: #b8a678;
      font-size: 13px;
      letter-spacing: 0.25em;
    }
    /* 油・粉・塩の「印」バッジ */
    .k-seal {
      position: absolute;
      left: 14px;
      bottom: 14px;
      width: 68px;
      height: 68px;
      border-radius: 50%;
      background: var(--gold);
      background-image: linear-gradient(150deg, #b18f45 0%, #9e7d3a 55%, #856427 100%);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 36px;
      line-height: 1;
      box-shadow: 0 5px 14px rgba(60,40,10,0.38);
      border: 2px solid #fff;
    }
    .kodawari-point h3 {
      font-family: var(--mincho);
      font-weight: 600;
      font-size: 21px;
      letter-spacing: 0.08em;
      margin-bottom: 10px;
    }
    .kodawari-point p { font-size: 15px; text-align: left; }
    .kodawari-chef {
      display: grid;
      grid-template-columns: 1fr;
      gap: 22px;
      align-items: center;
      margin-top: 38px;
      padding-top: 34px;
      border-top: 1px dashed #d9c99a;
    }
    .kodawari-chef img {
      width: 100%;
      max-width: 460px;
      margin: 0 auto;
      aspect-ratio: 1 / 1;
      object-fit: cover;
      border-radius: 2px;
    }
    .kodawari-chef-text p + p { margin-top: 16px; }

    /* ===== ③今月のおすすめ ===== */
    .month-badge {
      text-align: center;
      font-size: 16px;
      letter-spacing: 0.1em;
      color: var(--dark);
      margin-bottom: 24px;
    }
    .month-badge span {
      display: inline-block;
      background: var(--gold);
      color: #fff;
      font-weight: 600;
      padding: 8px 26px;
      border-radius: 2px;
    }
    .osusume-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 14px;
    }
    .osusume-card {
      background: #fff;
      border: 1px solid var(--line);
      border-top: 3px solid var(--gold);
      padding: 20px 14px;
      text-align: center;
    }
    .osusume-card .item-name-ja { font-size: 18px; letter-spacing: 0.04em; }
    .osusume-card .item-price {
      margin-top: 12px;
      font-size: 17px;
      color: var(--link);
    }
    .tax-excl, .excl { font-size: 12px; color: var(--muted); letter-spacing: 0; }
    /* 税別（）は狭い列で溢れないよう改行して表示 */
    .osusume-card .tax-excl { display: block; margin-top: 2px; }
    .osusume-note { margin-top: 18px; font-size: 13px; color: #4d4128; line-height: 1.8; }

    /* ===== 天ぷら写真ギャラリー（小サムネイル） ===== */
    .tempura-gallery { padding: 0; margin-bottom: 32px; }
    .gallery-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 14px;
    }
    .gallery-item {
      position: relative;
      aspect-ratio: 1 / 1;
      border-radius: 2px;
      overflow: hidden;
    }
    .gallery-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform .4s ease;
    }
    .gallery-item:hover img { transform: scale(1.05); }
    @media (min-width: 768px) {
      .gallery-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; }
    }

    /* ===== ④品目と価格一覧 ===== */
    .menu-intro { margin-bottom: 22px; font-size: 15px; color: #5a4a2a; }
    .menu-table-wrapper { overflow-x: auto; }
    .menu-table { width: 100%; border-collapse: collapse; }
    .menu-table td {
      padding: 13px 8px;
      border-bottom: 1px solid var(--line);
      vertical-align: middle;
    }
    .menu-table tr:nth-child(even) td { background: #faf6ee; }
    .menu-table .item-ja { font-size: 16px; }
    .menu-table .item-ja small { font-size: 13px; color: var(--muted); }
    .menu-table .item-price {
      text-align: right;
      white-space: nowrap;
      color: var(--link);
      font-size: 16px;
    }
    .menu-note { font-size: 13px; color: #574727; margin-top: 14px; line-height: 1.8; }

    /* ===== ⑤締めのお食事 ===== */
    .shime-grid { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; }
    .shime-img img {
      width: 100%;
      max-width: 460px;
      margin: 0 auto;
      aspect-ratio: 1 / 1;
      object-fit: cover;
      border-radius: 2px;
    }
    .shime-items { list-style: none; margin-top: 18px; }
    .shime-items li { padding: 14px 0; border-bottom: 1px solid var(--line); }
    .shime-items li:last-child { border-bottom: 0; }
    .shime-items .item-name { font-size: 20px; letter-spacing: 0.04em; font-family: var(--mincho); font-weight: 600; }
    .shime-items .item-desc { font-size: 14px; color: #5a4a2a; margin-top: 4px; }

    /* ===== ⑥FAQ ===== */
    #faq { background: var(--cream); }
    .faq-list { list-style: none; max-width: 760px; margin: 0 auto; }
    .faq-item { margin-bottom: 12px; }
    .faq-question {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      text-align: left;
      background: #fff;
      border: 0;
      border-left: 4px solid var(--gold);
      padding: 16px 18px;
      font-family: inherit;
      font-size: 16px;
      line-height: 1.7;
      color: var(--ink);
      cursor: pointer;
    }
    .faq-icon {
      flex-shrink: 0;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: var(--gold);
      color: #fff;
      font-size: 18px;
      line-height: 24px;
      text-align: center;
      transition: transform .25s ease;
    }
    .faq-question[aria-expanded="true"] .faq-icon { transform: rotate(45deg); }
    .faq-answer {
      display: none;
      background: #fff;
      border-left: 4px solid var(--gold-light);
      padding: 0 18px;
      font-size: 15px;
      line-height: 1.9;
      color: #4a3d25;
    }
    .faq-answer.open { display: block; padding: 16px 18px; }

    /* ===== ⑦ご利用案内 ===== */
    .info-table { width: 100%; border-collapse: collapse; margin-bottom: 24px; border-top: 1px solid var(--line); }
    .info-table th, .info-table td {
      text-align: left;
      padding: 14px 12px;
      border-bottom: 1px solid var(--line);
      vertical-align: top;
      font-weight: normal;
    }
    .info-table th {
      width: 110px;
      color: var(--dark);
      letter-spacing: 0.06em;
      background: var(--cream2);
    }
    .notice-list { list-style: none; }
    .notice-list li {
      position: relative;
      padding-left: 18px;
      font-size: 14px;
      color: #5a4a2a;
      margin-bottom: 8px;
      line-height: 1.8;
    }
    .notice-list li::before {
      content: "※";
      position: absolute;
      left: 0;
      color: var(--gold);
    }

    /* ===== ⑧ご予約 ===== */
    #yoyaku { background: var(--dark); color: #f0e6c8; }
    #yoyaku .section-heading { color: #f4ecd6; }
    #yoyaku .section-heading::after { background: var(--gold-light); }
    .yoyaku-inner {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 22px;
    }
    .yoyaku-tel { text-align: center; }
    .yoyaku-tel span {
      display: block;
      font-size: 13px;
      letter-spacing: 0.1em;
      color: #c9b98a;
      margin-bottom: 6px;
    }
    .yoyaku-tel a {
      font-size: clamp(26px, 6vw, 34px);
      letter-spacing: 0.04em;
      color: #f4ecd6;
    }
    .btn-reserve {
      display: inline-block;
      background: var(--gold);
      color: #fff;
      padding: 14px 44px;
      font-size: 16px;
      letter-spacing: 0.12em;
      border-radius: 2px;
      transition: background .25s ease;
    }
    .btn-reserve:hover { background: var(--gold-light); color: #fff; }
    .yoyaku-note {
      list-style: none;
      max-width: 620px;
      margin: 28px auto 0;
      font-size: 13px;
      color: #c9b98a;
      line-height: 1.9;
    }
    .yoyaku-note li { position: relative; padding-left: 16px; }
    .yoyaku-note li::before { content: "※"; position: absolute; left: 0; }

    /* ===== フッター ===== */
    #footer-nav { background: #2c2210; padding: 26px 0 18px; }
    #footer-nav .wrapper { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 6px; }
    #footer-nav a { color: #c9b98a; font-size: 13px; letter-spacing: 0.04em; }
    #footer-nav a:hover { color: #f0e6c8; }
    #footer-nav .separator { color: #6a5a3a; font-size: 12px; }
    .to-pagetop { text-align: center; margin-top: 16px; }
    .to-pagetop a { color: #9a875f; font-size: 12px; letter-spacing: 0.08em; }
    #footer { background: var(--footer); text-align: center; padding: 18px 0; }
    #footer small { color: #8a7a58; font-size: 12px; letter-spacing: 0.04em; }

    /* ===== タブレット以上（≥768px） ===== */
    @media (min-width: 768px) {
      .season-grid { grid-template-columns: 1fr 1fr; gap: 44px; }
	  .season-heading { text-align: left; }
      .about-grid { grid-template-columns: 1.2fr 1fr; gap: 40px; }
      .shime-grid { grid-template-columns: 1fr 1.2fr; gap: 40px; }
      .kodawari-list { grid-template-columns: repeat(3, 1fr); gap: 30px; }
      .kodawari-point { padding: 0 10px; }
      .kodawari-chef { grid-template-columns: 300px 1fr; }
      .kodawari-chef img { margin: 0; }
      .osusume-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; }
    }

    /* ===== PC（≥1000px）：横並びナビ ===== */
    @media (min-width: 1000px) {
      .nav-toggle { display: none; }
      .nav-backdrop { display: none; }
      .site-nav { margin-left: auto; }
      .nav-list { flex-direction: row; align-items: center; gap: clamp(6px, 1.4vw, 20px); }
      .nav-list a { padding: 6px 2px; font-size: 14px; letter-spacing: 0.04em; }
      .nav-list a:hover { color: var(--gold-light); }
    }

    /* ===== タブレット以下（<1000px）：右寄せドロワー ===== */
    @media (max-width: 999px) {
      .site-nav {
        position: fixed;
        top: 0;
        right: 0;
        height: 100dvh;
        width: min(288px, 82vw);
        background: var(--cream2);
        box-shadow: -6px 0 24px rgba(0,0,0,0.18);
        transform: translateX(100%);
        opacity: 0;
        visibility: hidden;
        transition: transform .32s ease, opacity .32s ease, visibility .32s ease;
        z-index: 140;
        padding: 64px 0 40px;
        overflow-y: auto;
      }
      body.nav-open .site-nav {
        transform: translateX(0);
        opacity: 1;
        visibility: visible;
      }
      .nav-list { flex-direction: column; }
      .nav-list a {
        color: var(--ink);
        padding: 15px 28px;
        border-bottom: 1px solid var(--line);
        letter-spacing: 0.08em;
      }
      .nav-list a.current { color: var(--gold); }
      .nav-close {
        display: block;
        position: absolute;
        top: 14px;
        right: 16px;
        width: 34px;
        height: 34px;
        background: none;
        border: 0;
        cursor: pointer;
        color: var(--dark);
        font-size: 26px;
        line-height: 1;
        font-family: inherit;
      }
    }

    /* スマホ（〜767px）はヘッダーが狭いため、メニューはアイコンのみ表示 */
    @media (max-width: 767px) {
      .nav-toggle-label { display: none; }
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      .site-nav, .nav-backdrop, .faq-icon, .hamburger span { transition: none; }
    }