/* 基本スタイル */
    body {
      font-family: 'Shippori Mincho', serif;
      color: #231815;
      min-height: 2500px; 
      padding-top: 20px; 
      background-color: #FFFFFF; /* ベースの背景色を少し設定 */
    }
    /* カスタムカラー変数 */
    :root {
      --asparagus-green: #809e1c; /* アスパラ用グリーン */
      --rice-beige:      #c1b350; /* 米用ベージュ */
    }

    a {
      color: #231815;
      text-decoration: none;
      transition: color 0.3s ease;
    }
    a:hover {
      color: var(--rice-beige);
      text-decoration: none;
    }

    /* ユーティリティクラス：文字色をカスタムカラーにする */
    .text-asparagus {
      color: var(--asparagus-green) !important;
    }

    .text-rice {
      color: var(--rice-beige) !important;
    }
    .top-decoration-bar {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 25px; 
      background-image: url('../img/bg-001.png');
      background-repeat: repeat-x;
      background-size: auto 100%; 
      z-index: 1100; 
    }
    /* フッター手前の区切り用（トップ装飾と同じパターン） */
    .bottom-decoration-bar {
      width: 100%;
      height: 25px;
      background-image: url('../img/bg-001.png');
      background-repeat: repeat-x;
      background-size: auto 100%;
      display: block;
    }
    .custom-header {
      background-color: transparent; 
      position: absolute;
      width: 100%;
      top: 25px; 
      left: 0;
      z-index: 1000; 
      transition: background-color 0.3s ease-in-out, padding 0.3s ease-in-out, box-shadow 0.3s ease-in-out, top 0.3s ease-in-out;
    }
    .custom-header.scrolled {
      position: fixed; 
      top: 25px; 
      left: 0; 
      width: 100%;
      background-color: #ffffff;
      padding: 15px 0 5px 0; 
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
    .logo-link {
      position: relative;
      z-index: 1010; 
      display: inline-block; 
      transition: all 0.3s ease-in-out;
    }

    /* --- スマホ用スタイル --- */
    .custom-header {
      padding: 10px 0 30px 0; 
    }
    #sticky-logo-sm {
      max-height: 80px; 
      transition: max-height 0.3s ease-in-out;
    }
    .custom-header.scrolled #sticky-logo-sm {
      max-height: 40px; 
    }
    .mobile-nav-icons-wrapper {
      position: absolute;
      top: 0;
      bottom: 0;
      right: 1rem; 
      display: flex;
      align-items: center;
      z-index: 1020; 
    }
    .mobile-nav-icons .nav-link,
    .mobile-nav-icons .navbar-toggler {
      color: #231815; 
      font-size: 1.5rem; 
      padding: 0 0.5rem;
      border: none;
      transition: color 0.3s ease;
    }
    .mobile-nav-icons .nav-link:hover,
    .mobile-nav-icons .navbar-toggler:hover {
      color: #bdaf4b; 
    }
    .mobile-nav-icons .navbar-toggler:focus {
      box-shadow: none;
    }
    /* Mobile: top-decoration-bar を小さくし、ヘッダーの top を合わせる */
    @media (max-width: 991.98px) {
      .top-decoration-bar {
        height: 12px;
      }
      .bottom-decoration-bar {
        height: 12px;
      }
      .custom-header,
      .custom-header.scrolled {
        top: 12px; /* 装飾バーの高さに合わせてヘッダー位置を調整 */
      }
    }
    .hero-section {
      padding-top: 80px; 
      padding-bottom: 40px; 
      background-color: #FFFFFF; 
    }
    .slider-wrapper {
      position: relative; 
      height: 400px; 
    }
    /* Mobile-only simple slider (no overlay) */
    .slider-wrapper-mobile {
      position: relative;
      height: auto;
    }
    .slider-wrapper-mobile .carousel-item img {
      width: 100%;
      height: auto;
      display: block;
    }
    .carousel-caption {
      font-size: 1.5rem; 
      font-weight: 700;
      text-shadow: 0 2px 4px rgba(0,0,0,0.7);
    }

    /* --- PC用スタイル --- */
    @media (min-width: 992px) {
      .custom-header {
        padding: 15px 0 40px 0; 
      }
      #sticky-logo-lg {
        max-height: 150px;
        /* 初期状態で下げる（約50px） */
        transform: translateY(40px);
        transition: max-height 0.3s ease-in-out, transform 0.3s ease-in-out;
      }
      .custom-header.scrolled #sticky-logo-lg {
        max-height: 75px;
        /* スクロールで元の位置に戻す */
        transform: translateY(0);
      }
      .custom-header .nav-link {
        color: #231815;
        font-weight: 600;
        font-size: 1.1rem;
        padding: 0.5rem 1rem;
        transition: color 0.3s ease;
      }
      .custom-header .nav-link:hover {
        color: #bdaf4b;
      }
      /* PC 用: ヘッダーナビを上に移動して装飾バーと重ねる（約50px）
         スクロール時は上がりすぎないよう top を緩和する */
      .custom-header nav.container.d-none.d-lg-flex.align-items-center {
        position: relative;
        top: -50px; /* 初期で上に移動 */
        z-index: 1015; /* ロゴより前面に来るよう微調整 */
        transition: top 0.3s ease-in-out; /* スムーズに位置を変える */
      }
      /* .scrolled のときはナビの上移動を緩める（上に行きすぎないようにする） */
      .custom-header.scrolled nav.container.d-none.d-lg-flex.align-items-center {
        top: -10px; /* 例: -10px にして上に行きすぎないように */
      }
      .hero-section {
        padding-top: 100px; 
        padding-bottom: 80px; 
      }
      .slider-wrapper {
        height: 700px; 
      }
      .carousel-caption {
        font-size: 2.5rem; 
      }

  /* 画面幅に応じて位置調整（必要なら上書きしてください） */
      @media (min-width: 1400px) {
        .slider-hover-button { left: 40px; bottom: 32px; }
      }

      /* Slightly larger social icons in the PC header */
      .custom-header .nav-link i.bi {
        font-size: 1.35rem; /* 少し大きめに */
        line-height: 1; /* アイコン周りの縦ズレを抑える */
        vertical-align: middle;
      }
    }

      /* お知らせ画像: ホバーで差し替え */
      .top-info-link {
        display: inline-block;
        cursor: pointer;
        max-width: 234px;
        width: 100%;
      }
      /* ラッパーを追加して画像を重ね、クロスフェードさせる */
      .hover-swap-wrap {
        position: relative;
        display: inline-block;
        width: 100%;
        vertical-align: top;
        overflow: hidden;
      }
      .top-info-img {
        display: block;
        width: 100%;
        height: auto;
        /* ゆっくりとしたじんわり感：opacity と transform を 1000ms ease に */
        transition: opacity 1000ms ease, transform 1000ms ease;
        will-change: opacity, transform;
        transform-origin: center center;
        transform: translateZ(0) scale(1);
      }
      .hover-swap-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: block;
        opacity: 0;
        /* クロスフェード時間を 1000ms に変更（イージングは自然な ease） */
        transition: opacity 1000ms ease;
        will-change: opacity, transform;
        pointer-events: none;
        object-fit: cover;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        transform: translateZ(0);
      }
      /* 軽いスケールで滑らかさを強調（任意） */
      .hover-swap-wrap:hover .top-info-img {
        transform: translateZ(0) scale(1.01);
      }

    /* 画像ホバーで拡大 (ライス・アスパラ用) */
    .zoom-wrap { overflow: hidden; display: block; }
    .hover-zoom {
      transition: transform 0.28s ease-in-out;
      transform-origin: center center;
      display: block;
      will-change: transform;
    }
    .hover-zoom:hover { transform: scale(1.2); }

    /* スクロールでフェードアップして表示されるアニメーション */
    .reveal-on-scroll {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 520ms cubic-bezier(.22,.9,.28,1) var(--reveal-delay, 0ms), transform 520ms cubic-bezier(.22,.9,.28,1) var(--reveal-delay, 0ms);
      will-change: opacity, transform;
    }
    .reveal-on-scroll.is-visible {
      opacity: 1;
      transform: translateY(0);
    }
    /* アニメーションを好まない設定の尊重 */
    @media (prefers-reduced-motion: reduce) {
      .reveal-on-scroll,
      .reveal-on-scroll.is-visible {
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
      }
    }

  /* ヒーロー装飾枠、オーバーレイ、カルーセル */
    .hero-decoration-border {
      width: 100%; 
      height: 40px; 
      background: url('../img/slide_top_sp.png') repeat-x;
      background-size: cover;
      position: relative;
      z-index: 1000; /* ロゴ(1010) より下にして、食い込みをロゴの下に見せる基準 */
    }

    /* スマホでロゴの下に少し食い込ませる（マージンを上方向に引く） */
    @media (max-width: 991.98px) {
      .hero-decoration-border {
        height: 32px; /* 少し高さを抑える */
        margin-top: -12px; /* ロゴの下に食い込ませる */
        background-size: cover;
      }
    }
    @media (max-width: 480px) {
      .hero-decoration-border {
        height: 28px;
        margin-top: -16px; /* 小さい画面ではもう少し被せる */
      }
    }
    .picture-frame-overlay {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      /* 横幅に合わせて中央寄せ。画像自体の高さは img のアスペクト比で決まる */
      display: flex;
      justify-content: center;
      pointer-events: none;
      z-index: 850;
    }
    .picture-frame-overlay img.picture-frame-overlay-img {
      width: 100%;
      height: auto; /* 縦は画像のアスペクト比に合わせる */
      max-width: none;
      display: block;
      opacity: 1.0;
      pointer-events: none;
    }
    #heroSlider,
    .carousel-inner,
    .carousel-item {
      height: 100%; 
    }
    .carousel-item {
      transition: opacity 0.6s ease-in-out; 
    }
    .carousel-item img {
      width: 100%;
      height: auto; /* 自然なアスペクト比に戻す */
      object-fit: cover; /* object-fit は残すが height:auto でトリミングは行われない */
    }
    .carousel-control-prev,
    .carousel-control-next,
    .carousel-indicators {
      z-index: 860; 
    }
    
  /* フッター / オフキャンバス */
    .custom-footer {
      /* background-color: #333; */
      /* color: #fff; */
      padding: 60px 0;
    }
    /* .custom-footer .footer-logo img {
      max-height: 60px;
      margin-bottom: 20px;
    } */
    .custom-footer .nav-link {
      color: #231815;
      padding: 0.25rem 0;
      font-size: 12px;
    }
    .custom-footer .nav-link:hover {
      color: #bdaf4b;
    }
    .custom-footer .social-icons a {
      color: #fff;
      font-size: 1.5rem;
      margin: 0 0.5rem;
    }
    .offcanvas-header {
      border-bottom: 1px solid #dee2e6;
    }
    .offcanvas-body .nav-link {
      padding: 0.75rem 1.25rem;
      color: #231815;
      font-weight: 600;
      transition: color 0.3s ease, background-color 0.3s ease;
    }
    .offcanvas-body .nav-link:hover {
      color: #bdaf4b;
      background-color: #f8f9fa; 
    }

    /* コンテンツセクションの共通スタイル */
    .content-section {
      padding: 60px 0;
      background-color: #ffffff; /* デフォルトを白に設定 */
    }
    /* (奇数セクションに薄い背景色を付与。偶数は白) */
    .content-section:nth-of-type(odd) {
       background-color: #FFFFFF;
    }
    /* 明示的に偶数を白にする（上書きがある場合に備える） */
    .content-section:nth-of-type(even) {
      background-color: #ffffff;
    }
    .section-title {
      font-weight: 700;
      font-size: 1.5rem;
      margin-bottom: 30px;
    }
    .recipe-card {
      background-color: #fff;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 4px 10px rgba(0,0,0,0.05);
      margin-top: 20px;
    }

    .bg-002 {
      background-image: url('../img/bg-002.png');
      background-position: center top;
      background-repeat: repeat-y; /* 高さが足りないときは縦方向にタイルして埋める */
      background-size: 100% auto; /* 横幅をコンテナに合わせる（高さは自動） */
      min-height: 400px; /* 必要に応じて高さを調整 */
    }
    /* モバイルでは軽量な背景画像に差し替える */
    @media (max-width: 991.98px) {
      .bg-002 {
        background-image: url('../img/bg-002s.png');
        background-position: center top;
        background-repeat: repeat-y;
        background-size: 100% auto;
      }
    }
    .bg-003 {
      background-image: url('../img/bg-003.png');
      background-position: center top;
      background-repeat: repeat-y; /* 高さが足りないときは縦方向にタイルして埋める */
      background-size: 100% auto; /* 横幅をコンテナに合わせる（高さは自動） */
      min-height: 400px; /* 必要に応じて高さを調整 */
    }
    /* モバイルでは軽量な背景画像に差し替える */
    @media (max-width: 991.98px) {
      .bg-003 {
        background-image: url('../img/bg-003s.png');
        background-position: center top;
        background-repeat: repeat-y;
        background-size: 100% auto;
      }
    }




    /* 食材案内：画像グリッドと説明ブロック */
    .about-section .about-block {
      display: flex;
      align-items: center;
      gap: 1rem;
    }
    .about-section .about-icon {
      flex: 0 0 64px;
      width: 64px;
      height: 64px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .about-section .about-icon svg {
      width: 56px;
      height: 56px;
      display: block;
      color: #231815;
    }
    .about-section .about-text h5 {
      margin: 0;
      font-weight: 700;
      font-size: 1.15rem;
      line-height: 1.3;
    }
    /* 画像はトリミングせず自然な画角で表示する */
    .about-gallery .about-img {
      overflow: hidden;
      border-radius: 12px;
      box-shadow: 0 6px 18px rgba(0,0,0,0.08);
      /* 高さは固定しない。画像の自然な縦横比を優先する */
      display: block;
      background: #fff;
    }
    .about-gallery .about-img img {
      width: 100%;
      height: auto; /* 自然なアスペクト比を保持 */
      object-fit: none; /* 切り抜きを防ぐ */
      display: block;
    }
    @media (max-width: 991.98px) {
      .about-section .about-icon { flex-basis: 48px; width:48px; height:48px; }
      .about-section .about-icon svg { width: 40px; height: 40px; }
      .about-section .about-text h5 { font-size: 1rem; }
    }

    /* 左テキストを縦中央寄せにする */
    .about-section > .col-lg-4 {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .about-gallery .col-6 { padding: 0.5rem; }

    .bg-beige {
      background-color: #eae7e6;
    }

    /* --- モバイル最下部固定ボタン --- */
    .mobile-fixed-btn {
      position: fixed;
      bottom: 12px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 2200; /* ヘッダや装飾より前面に出す */
      width: calc(100% - 40px);
      max-width: 420px;
      display: block;
      text-align: center;
      pointer-events: auto;
    }
    .mobile-fixed-btn img {
      width: 100%;
      height: auto;
      display: block;
      border-radius: 8px;
      box-shadow: 0 6px 18px rgba(0,0,0,0.18);
    }
    /* デスクトップ以上では非表示 */
    @media (min-width: 992px) {
      .mobile-fixed-btn { display: none !important; }
    }
    /* モバイルでコンテンツがボタンに隠れないように下余白を確保 */
/*    @media (max-width: 991.98px) {
      body { padding-bottom: 92px; }
    }*/

/* --- スマートフォンでの画像サイズ調整 --- */

/* 767.98px 以下（スマートフォン）に適用 */
@media (max-width: 767.98px) {

    /* 1. 外側の row に設定された大きな左右のパディング (px-5) を上書きして、余白をなくす */
    .bg-beige > .row.px-5 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* 2. 各画像の周りのパディング (p-3) を大幅に減らす */
    .bg-beige .col-6.col-md-3 {
        padding: 1.5rem !important; /* 上下左右のパディングを全て 0.5rem に設定 */
    }

    /* 3. 親の .bg-beige 自体の内側のパディング (p-4) も少し減らす */
    .bg-beige.rounded.p-4.my-4 {
        padding-left: 1rem !important; /* 左右を p-4 から p-3 相当の 1rem に変更 */
        padding-right: 1rem !important;
    }

}