/* ==========================================
   1. 基本設定（全デバイス共通）
   ========================================== */
:root {
    --primary-brown: #8b7355;
    --text-black: #333;
    --header-h-sp: 70px;
    --header-h-pc: 100px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    /* 游明朝を最優先にし、予備の明朝体とサンセリフ体を指定 */
    font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "MS PMincho", serif;
    -webkit-font-smoothing: antialiased; /* 文字のギザギザを抑えて滑らかにする（Mac/iOS用） */
    -moz-osx-font-smoothing: grayscale;
    color: var(--text-black);
    line-height: 1.8; /* 明朝体は少し行間広く */
    color: var(--text-black);
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

/* --- スマホでは改行を無効化 --- */
.pc-only {
    display: none;
}
/* --- PC（769px以上）で改行を有効化 --- */
@media (min-width: 769px) {
    .pc-only {
        display: inline; /* brタグ本来の動きに戻す */
    }
}

.mb-only {
        display: inline;    
    }
@media (min-width: 769px) {
    .mb-only {
        display: none;    
    }
}



/* ==========================================
   2. スマホ用スタイル（デフォルト）
   ========================================== */

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header-h-sp);
    
    /* 【変更】真っ白から透過の白に変更（最後の0.85が透明度です） */
    background: rgba(255, 255, 255, 0.70); 
    
    /* 【追加】後ろの動画を程よくぼかすエフェクト（すりガラス風になって高級感が出ます！） */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px); /* Safari対策 */
    
    z-index: 1000;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}



.header-inner {
    width: 100%;
    padding: 0 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo img {
    height: 45px;
}

/* ハンバーガーボタン */
.menu-trigger {
    width: 44px;
    height: 44px;
    background: none;
    border: none;
    position: relative;
    z-index: 1001;
}

.menu-trigger span {
    display: block;
    width: 25px;
    height: 2px;
    background: var(--primary-brown);
    position: absolute;
    left: 10px;
    transition: 0.3s;
}

.menu-trigger span:nth-child(1) { top: 14px; }
.menu-trigger span:nth-child(2) { top: 21px; }
.menu-trigger span:nth-child(3) { top: 28px; }

/* ボタン active時 */
.menu-trigger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-trigger.active span:nth-child(2) { opacity: 0; }
.menu-trigger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* モバイルナビゲーション（隠しておく） */
.main-nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100vh;
    background: rgba(255, 255, 255, 0.98);
    transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
}

.main-nav.active {
    right: 0;
}

.main-nav ul {
    list-style: none;
    width: 100%;
    text-align: center;
}

.main-nav a {
    display: block;
    padding: 20px;
    text-decoration: none;
    color: var(--primary-brown);
    font-size: 1.2rem;
    font-weight: bold;
}


/* --- メインビジュアルセクション --- */
/* --- メインビジュアル全体のレイアウト --- */
.main-visual {
    position: relative;
    width: 100%;
    margin-top: 0;
    height: 100vh;
    overflow: hidden; /* 動画のはみ出しを防ぐ */

    /* 【追加】動画が動かない・読み込み中のための背景画像を敷いておく */
    background-image: url('images/TOP_PC.jpg'); 
    background-size: cover;
    background-position: center;
}

@media (min-width: 769px) {
    .main-visual {
        margin-top: 0;
        height: 100vh;
    }
}

/* インナーコンテナ */
.mv-inner {
    position: relative;
    width: 100%;
    height: 100%;
}

/* 背景動画のスタイル */
.mv-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 縦横比を崩さずに画面いっぱいに広げる */
}



/* ==========================================
   想いのセクション（デフォルト：スマホ）
   ========================================== */
.about-section {
    background-color: #f7f3e8; 
    padding: 80px 0;
    clip-path: ellipse(110% 100% at 50% 50%);
    margin-top: -30px;
    position: relative;
    z-index: 1;
}

.about-inner {
    width: 100%;
    padding: 0 20px;
}

.about-image {
    text-align: center;
    margin-bottom: 40px;
}

.about-image img {
    width: 120px;
}

/* 文章：スマホでは横書き・左揃え */
.about-text-content {
    writing-mode: horizontal-tb; /* 明示的に横書き */
    text-align: left;
    color: var(--primary-brown);
    font-size: 0.95rem;
    line-height: 2;
    max-width: 500px;
    margin: 0 auto;
}

.about-text-content p {
    margin-bottom: 20px;
}

/* 丸いリンク：スマホでは文章の下に中央寄せ */
.about-link-circle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 110px;
    height: 110px;
    border: 1px solid #ccc;
    border-radius: 50%;
    background: #fff;
    margin: 40px auto 0;
    text-decoration: none;
    color: var(--primary-brown);
    transition: 0.3s;
}

.about-link-circle span {
    font-size: 0.85rem;
    line-height: 1.3;
    text-align: center;
}


/* ==========================================================================
   ちきりやの紹介（2025 Diary）
   ========================================================================== */

.intro-section {
    position: relative;
    padding: 60px 0;
    background-color: #fff;
    overflow: hidden; /* 大きな栗の背景はみ出しによる横スクロール防止 */
}

/* 🌰 左端にはみ出る大きな栗のグラフィック */
.intro-kuri-bg {
    position: absolute;
    top: 100px;
    left: -160px; 
    width: 640px;
    height: auto;
    object-fit: contain;
    pointer-events: none;
    z-index: 1;
    opacity: 0.8;
}

.intro-inner {
    position: relative;
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 24px;
    z-index: 2;
}

/* ─── 全体のレイアウト（PC時に美しい1:1に固定） ─── */
.intro-content {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

@media (min-width: 769px) {
    .intro-content {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
    }
    /* 左右のブロックの幅をそれぞれ47%ずつに固定 */
    .intro-text-block {
        width: 47%;
        flex-shrink: 0;
        padding-top: 10px;
    }
    .intro-image-block {
        width: 47%;
    }
}

/* ─── 左側：タイトル＆文章の装飾 ─── */
.intro-title {
    font-size: 26px;
    font-weight: 600;
    color: #3c2314;
    margin: 0 0 4px 0;
    line-height: 1.3;
    /* 【修正】文字とアイコンが縦ズレせず綺麗に横並びになる設定 */
    display: flex;
    align-items: center;
    gap: 12px; 
}
@media (min-width: 769px) {
    .intro-title {
        font-size: 32px;
    }
}

/* 【復活】カンプ中央のリボンマーク用スペース */
.title-logo-space {
    display: inline-block;
    width: 45px;
    height: 22px;
    background-image: url('images/icon-logo-brown.png'); /* リボンマークの画像パス */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* 英語サブタイトル */
.intro-subtitle {
    font-family: "Georgia", serif;
    font-style: italic;
    font-size: 16px;
    color: #8c7050;
    margin: 0 0 40px 0;
    letter-spacing: 0.05em;
}

/* 本文テキスト */
.intro-text-content p {
    font-size: 15px;
    line-height: 1.9;
    color: #4a3629;
    margin-bottom: 28px;
}
.intro-text-content p:last-child {
    margin-bottom: 0;
}


/* ─── 📸 右側：画像ブロック（スマホもPCも共通で端をギュッと重ねる） ─── */
.intro-image-block {
    position: relative;
    width: 100%;
    margin-bottom: -50px; 
    padding-bottom: 60px;
    background-image: url(images/sen.png);
    background-repeat: no-repeat;
}

/* 各写真カードの設定（スマホ基準） */
.diary-card {
    position: relative;
    width: 75%; /* スマホ時は少し大きめに広げる */
    margin-bottom: -2px; /* 上下をギュッと重ねるマイナスマージン */
    text-align: center;
    
    /* 初期状態（JS連動用） */
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.9s cubic-bezier(0.25, 1, 0.5, 1), transform 0.9s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 【【重要・修正】】PC時に画像が潰れたり極小になったりしないための幅上書き */
@media (min-width: 769px) {
    .diary-card {
        width: 56%; /* PCの画像ブロック（47%）の中で、ちょうど左右に振って重なる絶妙なサイズ */
        margin-bottom: -64px;
    }
}

/* 重なり順 */
.card-1 { z-index: 15; }
.card-2 { z-index: 16; }
.card-3 { z-index: 17; }
.card-4 { z-index: 18; }
.card-5 { z-index: 19; }

/* 左右の交互配置（スマホ・PC完全共通） */
.card-1, .card-3, .card-5 { margin-left: 0; }
.card-2, .card-4 { margin-left: auto; }

/* 画面に入ったらフワッと浮かび上がる用クラス */
.diary-card.is-active {
    opacity: 1;
    transform: translateY(0);
}

/* ⏳ スクロール時の時間差（ディレイ）設定 */
.card-1.is-active { transition-delay: 0.1s; }
.card-2.is-active { transition-delay: 0.3s; }
.card-3.is-active { transition-delay: 0.5s; }
.card-4.is-active { transition-delay: 0.7s; }
.card-5.is-active { transition-delay: 0.9s; }

/* 画像を横長（16:10）に統一 */
.diary-img-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10; 
    overflow: hidden;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(60, 35, 20, 0.08); 
}
.diary-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* キャプション文字（白座布団つき） */
.diary-caption {
    font-size: 13px;
    font-weight: 500;
    color: #8c7050;
    margin: 4px 0 0 0;
    background-color: rgba(255, 255, 255, 0.88); 
    padding: 0px 10px;
    display: inline-block;
    border-radius: 4px;
    position: relative;
    z-index: 2;
}



/* ==========================================
   2つのこだわり
========================================== */

/* --- 見出しエリアのスタイル --- */
.section-header {
    text-align: center;
    padding: 40px 20px 20px;
    background-color: #fdfbf7;
}

/* アイコン画像の設定 */
.section-icon {
    display: block;
    width: 60px; /* 画像のサイズに合わせて調整してください */
    height: auto;
    margin: 0 auto 15px;
}

/* タイトルテキスト */
.section-header-title {
    font-size: 24px;
    color: #3c2314;
    font-weight: 500;
    margin-bottom: 20px;
}

/* 装飾の細い線 */
.header-line {
    width: 150px;
    height: 1px;
    background-color: #d1d1d1;
    margin: 0 auto;
}

/* --- PC向け（画面が広がった時の微調整） --- */
@media (min-width: 769px) {
    .section-header {
        padding: 60px 20px 40px;
    }
    .section-header-title {
        font-size: 28px;
    }
}



/*----------------こだわり（氷感）----------------*/
.section-hyokan {
    padding: 40px 20px;
    background-color: #fff;
    color: #3c2314;
}

.section-hyokan .container {
    max-width: 1000px;
    margin: 0 auto;
}

.section-heading {
    font-size: 28px; /* スマホで見やすいサイズ */
    margin-bottom: 30px;
    font-weight: 500;
}

.section-heading .num {
    font-size: 36px;
    margin-right: 8px;
}

.section-heading .highlight {
    color: #b38e5d;
}

.content-wrapper {
    display: flex;
    flex-direction: column; /* 最初から縦並び */
    gap: 30px;
}

.text-block {
    font-size: 16px;
    line-height: 1.8;
}

.image-block {
    display: flex;
    flex-direction: column; /* 画像も縦並び */
    gap: 20px;
}

.img-item img {
    width: 100%;
    aspect-ratio: 16 / 9; /* 横長比率を維持 */
    object-fit: cover;
    border-radius: 12px;
}

.img-item figcaption {
    margin-top: 10px;
    text-align: center;
    font-size: 14px;
    color: #666;
}


/*ビデオ用*/
.video-wrapper {
    position: relative;
    cursor: pointer;
}

.video-poster {
    display: block;
    width: 100%;
    transition: opacity 0.3s;
}

/* マウスホバーで少し暗くすると「クリックできる」ことが伝わりやすいです */
.video-poster:hover {
    opacity: 0.8;
}

.hidden-video {
    display: block; /* JSで切り替えるための準備 */
    width: 100%;
}



/* --- PC向け（画面が広がった時に追加・上書き） --- */
@media (min-width: 769px) {
    .section-hyokan {
        padding: 80px 20px;
    }

    .section-heading {
        font-size: 36px;
    }

    .section-heading .num {
        font-size: 48px;
    }

    .content-wrapper {
        flex-direction: row; /* 横並びに変更 */
        align-items: flex-start;
        gap: 40px;
    }

    .text-block, .image-block {
        flex: 1;
    }

    .image-block {
        flex-direction: row; /* PCでは画像も横並び */
    }

    .img-item img {
        height: 200px; /* 固定高さを指定 */
        aspect-ratio: auto; /* 比率指定を解除 */
    }
}

/*----------------こだわり（パウダー）----------------*/

/* --- ベーススタイル（スマホ向けが基準） --- */
.section-powder {
    padding: 40px 20px;
    background-color: #FCFAF4;
}

/* 縦並びのレイアウト設定（スマホ用） */
.content-wrapper-reverse {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.image-block img {
    width: 96%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 12px;
    display: block;
    margin: auto;
}

.text-block {
    font-size: 16px;
    line-height: 1.8;
    color: #3c2314;
}

/* 📸 【新設】スマホ時は2列、余った3個目は中央に配置 */
.powder-gallery {
    display: flex;
    flex-wrap: wrap; /* 溢れたら折り返す */
    gap: 12px; /* 画像同士のすき間 */
    margin-top: 24px; /* 文章との間のすき間 */
    justify-content: space-evenly;
}

.gallery-item {
    /* スマホ時は「（100% - すき間12px）÷ 2 = 49%」で綺麗な2列にする */
    width: calc((100% - 12px) / 2);
}

/* スマホ時、3つ目の画像（奇数で余るやつ）を中央寄せにする可愛い裏技 */
.gallery-item:last-child {
    margin-left: auto;
    margin-right: auto;
}

.gallery-item img {
    width: 100%;
    aspect-ratio: 1 / 1; /* お菓子が引き立つ正方形（カンプに合わせて3/4などに変えてもOK） */
    object-fit: contain;
    border-radius: 8px;
    display: block;
}


/* --- PC向け（画面が広がった時に追加・上書き） --- */
@media (min-width: 769px) {
    .section-powder {
        padding: 80px 20px;
    }

    .section-powder .container {
        max-width: 1000px;
        margin: 0 auto;
    }

    .content-wrapper-reverse {
        display: flex;       /* 横並び */
        flex-direction: row; 
        align-items: flex-start; /* 👈 【修正】centerからflex-start（上揃え）にすると全体のバランスが美しくなります */
        justify-content: space-between; /* 左右にピタッと広げる */
        gap: 16px; /* 画像と文章の間の隙間 */
    }

    /* ─── 🌰 ここが一番重要です！ ─── */
    .image-block {
        width: 47%;       /* 👈 横幅を「47%」にガチッと固定 */
        flex-shrink: 0;   /* 相手（文章側）が大きくても絶対に縮まないお守り */
    }

    .text-block {
        width: 47%;       /* 👈 文章ブロック側も「47%」にガチッと固定 */
        flex-shrink: 0;   /* 絶対に縮まないお守り */
    }
    /* ──────────────────────────────── */

    /* 💻 文章ブロックの中にある3連画像のPC表示 */
    .powder-gallery {
        display: flex;
        flex-wrap: nowrap; /* 折り返さずに横並び */
        margin-top: 24px;
        justify-content: space-between;  /* 文章との間のすき間 */
        width: 100%;
    }

    .gallery-item {
        width: calc(100%/ 3); /* 3等分に綺麗に割る */
    }

    .gallery-item:last-child {
        margin-left: 0;
        margin-right: 0;
    }
}





/* ==========================================
   製品紹介
========================================== */

/* --- セクション全体の背景と文字色 --- */
.section-products {
    padding: 60px 20px;
    background-color: #FAF7EC;
    color: #3c2314;
}

.section-products .container {
    max-width: 1000px;
    margin: 0 auto;
}

/* --- レイアウト構造 --- */
.product-layout {
    display: flex;
    flex-direction: column; /* スマホでは縦に並べる */
    gap: 40px;
}

/* --- タイトルエリア --- */
.product-title-area {
    display: flex;
    flex-direction: column;
}

.en-subtitle {
    font-size: 14px;
    color: #b38e5d;
    font-family: sans-serif;
    margin-bottom: 10px;
    
}

/* タイトル：スマホでは横書き */
.vertical-title {
    font-size: 28px;
    line-height: 1.4;
    writing-mode: horizontal-tb; /* 横書き */
    margin: 0;
    font-weight: 400;
}

/* --- 商品グリッド --- */
.product-grid {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* --- 商品カード --- */
.product-card {
    background-color: #f3ece0;
    padding: 20px;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
}

.product-name {
    background-color: #C7B48E;
    color: #fff;
    text-align: center;
    padding: 8px 0;
    border-radius: 30px;
    font-size: 18px;
    margin-bottom: 20px;
    font-weight: 400;
}

.product-img {
    width: 100%;
    margin-bottom: 15px;
}

.product-img img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.product-desc {
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
}

/* --- Coming Soonカード --- */
.product-card.coming-soon {
    background-color: #d1b894;
    color: #fff;
    min-height: 250px;
    justify-content: space-between;
}

.product-card.coming-soon .product-name {
    background: none;
    border: 1px solid #fff;
}

.status-wrap {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.status-text {
    font-size: 24px;
    font-weight: bold;
    font-family: sans-serif;
}

/* --- PC向け設定 (769px以上) --- */
@media (min-width: 769px) {
    .product-layout {
        flex-direction: row; /* 横に並べる */
        align-items: stretch;
    }

    /* PCではタイトルを縦書きにする */
    .product-title-area {
        writing-mode: vertical-rl;
        text-orientation: upright;
        padding-right: 40px;
        border-right: 1px solid #d1d1d1;
    }
    

    .vertical-title {
        writing-mode: vertical-rl; /* 縦書き */
        text-orientation: upright;
        font-size: 32px;
        letter-spacing: 0.2em;
    }

    .product-grid {
        flex-direction: row; /* 商品を横に3つ並べる */
        flex: 1;
    }

    .product-card {
        flex: 1; /* 均等な幅 */
    }
}




/* --- セクション区切り線 --- */
.section-divider {
    border: none;
    border-top: 1px solid #ccc;
    margin: 0px 40px; /* 余白を調整 */
}



/* ==========================================================================
   栗粒パウダー販売 ＆ 洋菓子店様紹介（統合版スタイル）
   ========================================================================== */

/* --- 📱 ベーススタイル（スマホ向けが基準） --- */
.section-sales {
    padding: 40px 20px 60px;
    background-color: #FAF7EC; /* カンプの温かみのあるクリーム色 */
    color: #3c2314;
}

.sales-title-area {
    margin-bottom: 30px;
}

.en-subtitle {
    font-size: 14px;
    color: #b38e5d;
    font-family: serif;
    margin-bottom: 8px;
    display: block;
}

.vertical-title {
    font-size: 26px;
    line-height: 1.4;
    margin: 0;
}

.sales-content {
    display: flex;
    flex-direction: column;
    gap: 35px;
}

.sales-upper-block {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.sales-visual img {
    width: 100%;
    border-radius: 16px;
    display: block;
}

.sales-info p {
    font-size: 15px;
    line-height: 1.8;
    margin: 0 0 24px 0;
}

/* LINEボタン */
.line-btn {
    display: block;
    width: 100%;
    max-width: 320px;
    text-align: center;
    border: 1px solid #3c2314;
    padding: 14px 20px;
    text-decoration: none;
    color: #3c2314;
    border-radius: 30px;
    font-size: 15px;
    font-weight: 500;
    box-sizing: border-box;
    transition: all 0.3s ease;
}
.line-btn:hover {
    background-color: #3c2314;
    color: #fff;
}

/* 商品詳細・原材料リスト */
.detail-heading {
    font-size: 16px;
    font-weight: bold;
    margin: 0 0 12px 0;
}

.detail-list {
    list-style: none;
    padding: 0;
    margin: 0 0 30px 0;
    font-size: 14px;
    line-height: 1.8;
}
.detail-list li {
    margin-bottom: 6px;
}

.storage-note {
    font-size: 13px;
    color: #666;
    margin-top: 4px;
}

/* 🍰 追加：洋菓子店様紹介エリア（スマホ表示） */
.sales-partners-area {
    margin-top: 20px;
    border-top: 1px dashed #d1cbb7; /* 区切りに可愛い点線をプラス */
    padding-top: 40px;
}

/* パティシエアイコン付き見出しブロック */
.partners-heading-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 30px;
}
.chef-icon {
    display: inline-block;
    width: 56px;
    height: 56px;
    background-image: url('images/icon-chef.png'); 
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
}
.partners-main-title {
    font-size: 18px;
    line-height: 1.4;
    color: #503500;
    margin: 0;
    font-weight: 500;
}
.partners-en-sub {
    font-size: 12px;
    color: #c9b090;
    font-family: serif;
    display: block;
    margin-top: 2px;
}

/* お店グリッド（スマホ時は2列、最後1つは中央） */
.partners-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* これを入れることで、端数が出たときに中央に寄ります */
    gap: 20px 16px; /* 縦のすき間20px、横のすき間16px */
}
.partner-item {
    width: calc((100% - 16px) / 2); /* スマホ時は2列 */
    text-align: center;
}
.partner-item img {
    width: 100%;
    aspect-ratio: 1 / 1; /* 正方形に近いカンプの可愛い角丸写真 */
    object-fit: cover;
    border-radius: 16px;
    margin-bottom: 8px;
    display: block;
}
.partner-item p {
    font-size: 13px;
    line-height: 1.4;
    margin: 0;
}


/* --- 💻 画面が広がった時（769px以上・パソコン用） --- */
@media (min-width: 769px) {
    .section-sales {
        padding: 80px 20px;
    }

    .section-sales .container {
        display: flex;
        align-items: flex-start;
        max-width: 1000px;
        margin: 0 auto;
        gap: 50px;
    }

    .sales-title-area {
        writing-mode: vertical-rl;
        text-orientation: upright;
        border-right: 1px solid #d1d1d1;
        padding-right: 30px;
        margin: 0;
        flex-shrink: 0;
    }
    .en-subtitle {
        margin-bottom: 0;
        margin-left: 8px;
    }

    .sales-content {
        flex: 1;
        gap: 45px;
    }

    /* 上段の「画像」と「LINE案内」を綺麗に50%ずつに割る */
    .sales-upper-block {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        gap: 40px;
        width: 100%;
    }

    .sales-visual {
        width: 47%;
        flex-shrink: 0;
    }

    .sales-info {
        width: 47%;
        flex-shrink: 0;
    }

    .line-btn {
        margin-left: 0;
    }

    .sales-details {
        width: 100%;
    }

    /* 💻 PC用：洋菓子店様紹介エリア */
    .partners-main-title {
        font-size: 18px;
    }
    
    /* PCのときは「3列」で回り込ませ、2段目の2つを綺麗に中央寄せにする魔法 */
    .partners-grid {
        justify-content: flex-start; /* 下段のアイテム（4つ目、5つ目）を中央に寄せる */
        gap: 30px 24px; /* PC用はすき間をゆったり広めに */
    }
    
    .partner-item {
        /* PC時は3等分（すき間24px × 2個分 = 48px を引いて3で割る） */
        width: calc((100% - 48px) / 3); 
        /* max-width: 240px; 👈 【削除】左詰めの時にこれがあると全体が左に縮んでしまうのでコメントアウト */
    }
}



/* -------------- インスタグラムセクション -------------- */

/* グリッドの設定 */
.insta-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* スマホ：2列 */
    gap: 10px;
    list-style: none; /* リストの黒点を消す */
    padding: 0;
    margin: 0;
}

/* 投稿枠（JSで生成される要素） */
.insta-item {
    aspect-ratio: 1 / 1; /* 正方形を維持 */
    overflow: hidden;
    border-radius: 8px;
    background-color: #e0dcd5; /* 画像読み込みまでの背景色 */
}

.insta-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 画像が歪まないように切り抜き */
    display: block;
    transition: transform 0.3s ease;
}

/* ホバーエフェクト（PCのみ） */
@media (hover: hover) {
    .insta-item a:hover img {
        transform: scale(1.05);
    }
}

/* --- PC向け設定 (769px以上)：4列 --- */
@media (min-width: 769px) {
    .section-instagram {
        padding: 80px 20px;
    }

    .insta-grid {
        grid-template-columns: repeat(4, 1fr); /* PC：4列 */
        gap: 20px;
    }
}






























/* ==========================================
   こだわりの栗パウダー セクション
   ========================================== */
.powder-section {
    padding: 80px 0;
    background-color: #FAF7EC; /* 指定の背景色 */
    overflow: hidden;
}

.powder-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 25px; /* モバイル余白 */
}

/* タイトルスタイル */
.powder-main-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.6rem;
    color: var(--primary-brown);
    margin-bottom: 30px;
}

.powder-main-title .font-small {
    font-size: 1rem;
}
.powder-main-title .font-big {
    font-size: 2rem;
    margin-left: 2px;
}



/* イントロ画像（氷感と同じフレーム） */
.powder-intro-img {
    border: 1px solid #e0d5c1;
    padding: 10px;
    border-radius: 60px 5px 60px 5px;
    background-color: #fff;
    margin-bottom: 20px;
}

.shape-oval {
    width: 100%;
    display: block;
    border-radius: 50px 0 50px 0;
}

.powder-intro-text p {
    line-height: 2;
    margin-bottom: 20px;
    font-size: 0.95rem;
}

.powder-sub-title {
    margin-bottom: 12px;
}

/* リード文の丸ラベル */
.product-lead-circle, .shop-lead-circle {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 0.85rem;
    margin: 40px auto 20px;
    line-height: 1.5;
}

.product-lead-circle {
    background-color: var(--primary-brown);
    color: #fff;
}

.shop-lead-circle {
    background-color: #fff;
    color: var(--primary-brown);
    border: 1px solid #e0d5c1;
}

/* 製品・店舗リスト */
.product-cards {
    display: grid;
    grid-template-columns: 1fr; /* モバイル1列 */
    gap: 40px;
}

.shop-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* モバイル2列 */
    gap: 20px;
}

.product-item, .shop-item {
    text-align: center;
}

.product-item-img img, .shop-item img {
    width: 100%;
    border-radius: 15px;
    aspect-ratio: 1/1;
    object-fit: cover;
}

.product-item h3 {
    color: var(--primary-brown);
    margin: 15px 0 10px;
}

/* 販売について */
.powder-sale {
    margin-top: 80px;
    padding-top: 60px;
    border-top: 1px solid #e0d5c1;
}

.sale-info-flex {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.main-sale-img { width: 100%; border-radius: 15px; }

.sale-details dl dt { font-weight: bold; color: var(--primary-brown); margin-top: 20px; }
.sale-details dl dd { margin-bottom: 10px; font-size: 0.9rem; line-height: 1.6; }



/* ==========================================
   イベントセクション
   ========================================== */
.event-section {
    padding: 80px 0;
    background-color: #fff;
    text-align: center;
}

/* ★ここがポイント：栗アイコンと縦線の設定★ */
.event-header-line {
    position: relative; /* 縦線の位置基準にする */
    padding-top: 60px;  /* ★縦線の長さ（お好みで調整してください）★ */
    margin-bottom: 20px;
    display: inline-block; /* 栗アイコンの幅に合わせる */
}

/* CSSで縦線を描く */
.event-header-line::before {
    content: '';        /* 中身は空っぽ */
    position: absolute; /* 自由に配置 */
    top: 0;             /* 一番上からスタート */
    left: 50%;          /* 横方向の中央に */
    transform: translateX(-50%); /* 自分の幅の半分だけ左に戻して完璧に中央へ */
    width: 1px;         /* ★線の太さ（1pxが上品です）★ */
    height: 60px;       /* ★線の長さ（padding-topと同じに）★ */
    background-color: #e0d5c1; /* ★線の色（栗アイコンに近い、薄い茶色やベージュ）★ */
}

/* 栗アイコンのスタイル（維持） */
.event-header-line .kuri-icon {
    width: 40px; /* PCでは少し大きめにしても素敵です */
    height: auto;
    position: relative; /* 縦線より上に表示させる */
    z-index: 1;
    margin-top: 24px;
}




.event-inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 25px;
}

.event-intro {
    margin-bottom: 50px;
}

.event-title {
    font-size: 1.8rem;
    color: var(--primary-brown);
    margin: 15px 0 20px;
    font-weight: normal;
}

.event-lead {
    font-size: 0.95rem;
    line-height: 1.8;
    color: #666;
}


/* 2カラムレイアウト */
.event-grid {
    display: grid;
    grid-template-columns: 1fr; /* スマホは1列 */
    gap: 40px;
    margin-bottom: 50px;
}

.video-container, .image-container {
    width: 100%;
    aspect-ratio: 16 / 9; /* 動画と写真の比率を揃える */
    overflow: hidden;
    background-color: #eee;
}

.video-container video, 
.image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.caption {
    margin-top: 15px;
    font-size: 0.9rem;
    color: #333;
}

/* Instagramボタン */
.insta-btn-wrap {
    margin-top: 40px;
}

.insta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 350px;
    padding: 15px 20px;
    border: 1px solid #d62976; /* Instagramカラー寄りのピンク */
    border-radius: 40px;
    color: #d62976;
    text-decoration: none;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.insta-btn:hover {
    background-color: #fdf2f6;
    transform: translateY(-2px);
}

.insta-btn .arrow {
    margin-left: 15px;
}


/* --- お問い合わせセクション --- */
.contact-section {
    padding: 80px 0; /* ご指定の通り80px */
    background-color: #FAF7EC; /* 栗パウダーセクションと統一 */
    text-align: center;
}

.contact-inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 25px;
}

/* 縦線とアイコンのエリア */
.contact-header-line {
    position: relative;
    padding-top: 60px; /* 縦線の長さ */
    margin-bottom: 20px;
    display: inline-block;
}

/* 縦線の描画 */
.contact-header-line::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 60px;
    background-color: #e0d5c1;
}

.ribbon-icon {
    width: 60px; /* リボンアイコンは少し横長なので調整 */
    height: auto;
    position: relative;
    z-index: 1;
    margin-top: 24px;
}

.contact-title {
    font-size: 1.8rem;
    color: var(--primary-brown);
    margin-bottom: 40px;
    font-weight: normal;
    letter-spacing: 0.1em;
}

.contact-body p {
    font-size: 0.95rem;
    line-height: 2;
    color: #666;
    margin-bottom: 40px;
}

/* 公式LINEボタン（茶色の細枠タイプ） */
.contact-btn-wrap {
    margin-bottom: 20px;
}

.line-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 400px;
    padding: 18px 20px;
    border: 1px solid var(--primary-brown); /* サイトのテーマカラー */
    border-radius: 50px;
    color: var(--primary-brown);
    text-decoration: none;
    font-size: 1rem;
    background-color: #fff;
    transition: all 0.3s ease;
}

.line-btn:hover {
    background-color: var(--primary-brown);
    color: #fff;
    transform: translateY(-2px);
}

.line-btn .arrow {
    margin-left: 20px;
    font-size: 1.2rem;
}



/* --- 想いの詳細セクション --- */
.concept-detail-section {
    padding: 80px 0;
    background-color: #fcfaf5; /* 優しいアイボリー系 */
}

.concept-detail-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 25px;
}

/* ==========================================
   スマホ表示（デフォルト：縦並び）
   ========================================== */
.concept-detail-flex {
    display: flex;
    flex-direction: column; /* 縦に並べる */
    gap: 40px; /* 写真と文章の間隔 */
}

/* 写真エリア：スマホではドーンと見せる */
.concept-photo-frame {
    width: 100%;
    aspect-ratio: 4 / 3; /* 写真の比率を固定（お好みで調整） */
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); /* 少し浮かせて高級感を */
}

.concept-real-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 枠いっぱいに収める */
    /* 肝心の「ちきり」部分（上部）が見えるように位置を調整 */
    object-position: center top; 
}

/* 文章エリア */
.concept-text-box {
    color: #333;
    padding: 20px 0;
}

.concept-text-box p {
    font-family: "Yu Mincho", "YuMincho", serif;
    line-height: 2.2;
    margin-bottom: 2rem;
    font-size: 0.95rem;
    letter-spacing: 0.08em;
}

.concept-signature {
    text-align: right;
    font-size: 1.3rem !important;
    color: var(--primary-brown);
    margin-top: 40px;
}


/* ==========================================
   画像スライダー
   ========================================== */
.insta-gallery {
    width: 100%;
    overflow: hidden;
    padding: 60px 0; /* ★縦長の画像に合わせて、上下の余白を少し広めに★ */
    background-color: #fff; 
}

.gallery-track {
    display: flex;
    /* ★画像の横幅(250px) × 合計枚数(20枚)で計算★ */
    width: calc(250px * 20); 
    animation: loop-slide 80s linear infinite; /* ★画像が縦長になった分、流れを少しゆっくりに（80秒）★ */
}

.gallery-item {
    width: 250px; /* 画像の横幅（維持） */
    padding: 0 8px; /* ★画像同士の間隔を少し広げて、ゆとりを★ */
}

.gallery-item img {
    width: 100%;
    /* ★ここを変更：アスペクト比を4:3（横:縦）に設定★ */
    aspect-ratio: 4 / 3; 
    object-fit: cover; /* 画像を枠いっぱいに綺麗に収める */
    border-radius: 8px; /* ★角の丸みを少し強調して、優しさを★ */
}

/* 無限ループのアニメーション（修正なし、幅に合わせて動きます） */
@keyframes loop-slide {
    from {
        transform: translateX(0);
    }
    to {
        /* ★10枚分移動してループ★ */
        transform: translateX(calc(-250px * 10));
    }
}

/* スマホ表示の調整 */
@media (max-width: 768px) {
    .gallery-item {
        width: 180px; /* スマホでの横幅（維持） */
        padding: 0 5px; /* スマホでは隙間を狭く */
    }
    .gallery-track {
        width: calc(180px * 20);
    }
    @keyframes loop-slide {
        from { transform: translateX(0); }
        to { transform: translateX(calc(-180px * 10)); }
    }
}












/* ==========================================
   3. PC用スタイル（画面幅 769px 以上）
   追加・変更したい部分だけを書く
   ========================================== */
@media (min-width: 769px) {
    .site-header {
        height: var(--header-h-pc);
    }

    .header-inner {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 24px;
    }

    .logo img {
        height: 70px;
    }

    /* PCではボタンを隠す */
    .menu-trigger {
        display: none;
    }

    /* ナビゲーションを横並びに直す */
    .main-nav {
        position: static;
        width: auto;
        height: auto;
        background: none;
    }

    .main-nav ul {
        display: flex;
        gap: 24px;
    }

    .main-nav a {
        padding: 10px 0;
        font-size: 0.8rem;
        white-space: nowrap;
    }


/* ==========================================
   想いのセクション（PC）
   ========================================== */
    .about-section {
        padding: 120px 0;
        clip-path: ellipse(90% 100% at 50% 50%);
    }

    .about-inner {
        max-width: 1100px;
        margin: 0 auto;
    }

    .about-image {
        margin-bottom: 60px;
    }

    .about-image img {
        width: 200px;
    }

    /* リンクと文章を横に並べる（縦書きなので右から並ぶ） */
    .about-flex-container {
        display: flex;
        flex-direction: row-reverse; /* 縦書きの読み方向（右→左）に合わせる */
        justify-content: center;
        align-items: flex-start;
        gap: 40px;
    }

    /* 文章：PCで縦書きに */
    .about-text-content {
        writing-mode: vertical-rl; /* 縦書き・右から左へ行が流れる */
        height: 400px; /* 縦書きの場合は高さを指定すると綺麗に収まります */
        margin: 0;
        font-size: 1.1rem;
        line-height: 2.4; /* 縦書きは少し広めの行間が美しい */
    }

    .about-text-content p {
        margin-bottom: 0;
        margin-left: 40px; /* 縦書き時の段落間の余白は左側に */
    }

    /* 丸いリンク：PCでは文章の左横に */
    .about-link-circle {
        margin: 150px 0 0; /* 位置を少し下げて調整 */
        flex-shrink: 0;
    }




 /* ==========================================
   画像転換エリア
 ========================================== */ 
/* --- フルワイド画像転換エリア --- */
.full-width-transition {
    width: 100%;
    height: 240px; 
    
    /* 背景画像の設定 */
    background-image: url('images/transition-bg.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    /* スクロール時に背景を固定して少し視差効果を出す設定（高級感が出ます） */
    background-attachment: fixed;
    
    /* 前後のセクションとの余白 */
    margin: 80px 0;
}

/* スマホでは固定背景(fixed)が少し重くなることがあるので、解除する場合 */
@media (max-width: 768px) {
    .full-width-transition {
        height: 240px; /* スマホでは高さを少し抑える */
        background-attachment: scroll; /* 固定を解除 */
        margin: 40px 0;
    }
}


 /* ==========================================
   画像スライダー（PC)
 ========================================== */   
    .product-slider-title {
        font-size: 1.6rem;
    }


 
 
 
 /* ==========================================
   問い合わせ（PC)
 ========================================== */  
    .contact-title {
        font-size: 2.2rem;
    }
    
    .contact-body p {
        font-size: 1.05rem;
    }

 /* ==========================================
   想い（PC)
 ========================================== */  
    .concept-detail-inner {
        padding: 0 50px;
    }

    .concept-detail-flex {
        flex-direction: row; /* 横並びにする */
        align-items: center; /* 縦方向の中央揃え */
        gap: 80px; /* 写真と文章の間のゆとり */
    }

    /* PCでは写真エリアを少し小さく、文章エリアを大きく */
    .concept-photo-area, .concept-text-area {
        flex: 1;
    }

    .concept-photo-frame {
        aspect-ratio: auto; /* PCでは画像の自然な比率に */
        height: 480px; /* お好みの高さに固定 */
    }

    .concept-text-box p {
        font-size: 1.05rem;
    }

}


/* ==========================================================================
   サイトフッター（草むら背景＆農園トーンレイアウト）
   ========================================================================== */

.site-footer {
    position: relative; /* 草むらを基準に配置するためのお守り */
    width: 100%;
    background-color: #3B2A0A; /* 深い土色のブラウン */
    padding-top: 60px; /* 文字と草むらの間の適切な余白 */
    padding-bottom: 30px;
    color: #fff;
    box-sizing: border-box;
    margin-top: 100px; /*  前のセクションとの間に草むらが飛び出すための余白を確保 */
}

/*フッターの上にはみ出させる草むら画像エリア */
.footer-grass {
    position: absolute;
    top: -26px; /* マイナス値でフッターの枠より上に「ガバッ」とはみ出させます */
    left: 0;
    width: 100%;
    height: 40px; /* 草むら（＋木）の画像の縦幅に合わせて調整してください */
    background-image: url('images/747465.png');
    background-repeat: repeat-x; /* 横方向にリピート */
    background-position: left bottom; /* 下のラインをフッターの茶色とピッタリ接着 */
    background-size: contain; /* カンプのイラストのサイズ感に調整 */
    pointer-events: none; /* 万が一リンクの上に被ってもクリックを邪魔しない設定 */
    z-index: 10;
}

/* スマホ等で木が大きすぎる場合はここで草むらの高さを微調整 */
@media (max-width: 768px) {
    .footer-grass {
        height: 80px;
        top: -64px;
        background-size: auto 40px;
    }
    .site-footer {
        margin-top: 160px;
    }
}

/* ==========================================================================
   追加：フッターの右端に置く栗の木
   ========================================================================== */
.footer-tree {
    position: absolute;
    right: 4%;         /* 画面の右端から少し内側に浮かせます（お好みで 0 にしてもOK） */
    bottom: 258px;      /* フッターの底辺からの位置（土に植わっているように見える高さに微調整してください） */
    width: 140px;      /* 栗の木のイラストの横幅に合わせて調整 */
    height: 240px;     /* 栗の木のイラストの縦幅に合わせて調整 */
    background-image: url('images/icon-chestnut-tree.png'); /* 👈 栗の木の画像パスを指定してください */
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: contain;
    pointer-events: none; /* リンクやテキストと重なってもクリックを邪魔しないお守り */
    z-index: 20;          /* 草むら（z-index: 10）の後ろ、または前に合わせて数値を調整（5なら草の後ろに隠れます） */
}

/* ─── 💻 パソコン表示時のレイアウト（769px以上）に少し調整をプラス ─── */
@media (min-width: 769px) {
    /* 木がある分、右側の文字コンテンツ（ナビやコピーライト）が木と被らないよう、
       インナーの右側の余白を少しだけ広めに確保しておくと安全です */
    .footer-inner {
        padding-right: 160px; /* 木の横幅＋余裕を持たせる */
    }
}

/* ─── 📱 スマホ・タブレット表示時の制御（768px以下） ─── */
@media (max-width: 768px) {

    .footer-tree {
        width: 140px;
        height: 100px;
        right: 10px;
        bottom: 350px;
    }
}


.footer-inner {
    position: relative;
    z-index: 2;
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ─── 上段：ロゴとナビゲーションの配置 ─── */
.footer-top {
    display: flex;
    flex-direction: column;
    gap: 32px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    padding-bottom: 24px;
    margin-bottom: 20px;
}

.footer-brand {
    text-align: left;
}
.footer-sub-logo {
    font-size: 14px;
    letter-spacing: 0.1em;
    margin: 0 0 4px 0;
    color: rgba(255, 255, 255, 0.9);
}
.footer-logo {
    font-size: 32px;
    font-weight: 600;
    letter-spacing: 0.05em;
    margin: 0;
}

.footer-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 20px 28px;
}
.footer-menu a {
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: opacity 0.3s ease;
}
.footer-menu a:hover {
    opacity: 0.7;
}

/* ─── 下段：コピーライト ─── */
.footer-bottom {
    display: flex;
    justify-content: flex-start;
}
.copyright {
    font-family: "Georgia", serif;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
    letter-spacing: 0.05em;
}

/* ─── 💻 パソコン表示時のレイアウト（769px以上） ─── */
@media (min-width: 769px) {
    .site-footer {
        padding-top: 60px;
        padding-bottom: 40px;
    }
    .footer-top {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-end;
        padding-bottom: 30px;
    }
    .footer-bottom {
        justify-content: flex-end;
    }
}

















/* =============================================================================================================
   ちきりやができたわけ（story.html）専用スタイル
   ============================================================================================================= */

/* --- story.html専用のメイン全体枠（ヘッダーの高さ分、上部を空ける） --- */
.story-main-content {
    margin-top: var(--header-h-sp); /* スマホ用ヘッダー高さ分の余白 */
    width: 100%;
}
@media (min-width: 769px) {
    .story-main-content {
        margin-top: var(--header-h-pc); /* PC用ヘッダー高さ分の余白 */
    }
}

/* --- 共通のコンテナ（文字が広がりすぎないように制限） --- */
.story-container {
    width: 100%;
    padding: 0 24px;
    margin: 0 auto;
    box-sizing: border-box;
}
@media (min-width: 769px) {
    .story-container {
        max-width: 900px;
        padding: 0;
    }
}

/* --------------------------------------------------
   1. ページヘッダー（メインビジュアル）
   -------------------------------------------------- */
.story-mv {
    position: relative;
    width: 100%;
    height: 220px; /* スマホでスッキリ見せる高さ */
    background-image: url('images/TOP_.JPEG'); /* 栗園の背景画像 */
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

.story-mv-inner {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 中央の白いテキストボックス */
.story-mv-title-box {
    background-color: rgba(255, 255, 255, 0.9);
    padding: 20px 30px;
    text-align: center;
    width: 85%;
    max-width: 540px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.story-page-title {
    margin: 0 0 6px 0;
    font-size: 18px;
    font-weight: 500;
    color: #3c2314;
    letter-spacing: 0.05em;
}

.story-page-subtitle {
    margin: 0;
    font-size: 11px;
    color: #b38e5d;
    letter-spacing: 0.02em;
}

/* PC版のメインビジュアル調整 */
@media (min-width: 769px) {
    .story-mv {
        height: 300px; /* カンプ画像（image_428bdd.png）に近いダイナミックな比率に */
    }
    .story-mv-title-box {
        padding: 35px 60px;
        max-width: 640px;
    }
    .story-page-title {
        font-size: 26px;
        margin-bottom: 8px;
    }
    .story-page-subtitle {
        font-size: 13px;
    }
}

/* --------------------------------------------------
   2. 第1セクション：受け継ぎ、守る「圃場」
   -------------------------------------------------- */
.story-section-intro {
    padding: 50px 0;
    background-color: #fff;
}

/* 丸い装飾がついた見出し */
.story-section-title {
    margin: 0 0 25px 0;
    font-size: 20px;
    font-weight: 500;
    color: #3c2314;
    position: relative;
    padding-left: 15px;
    display: inline-block;
}

/* 見出しの後ろにある薄茶色の丸 */
.story-section-title::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background-color: #f3ede2;
    border-radius: 50%;
    z-index: 1;
}

.title-bg-circle {
    position: relative;
    z-index: 2;
}

/* 本文テキスト */
.story-lead-text {
    font-size: 14px;
    line-height: 2;
    color: #555;
    padding-left: 15px;
}

.story-lead-text p {
    margin: 0 0 1.5em 0;
}
.story-lead-text p:last-child {
    margin-bottom: 0;
}

/* PC版の調整 */
@media (min-width: 769px) {
    .story-section-intro {
        padding: 80px 0 60px 0;
    }
    .story-section-title {
        font-size: 26px;
        margin-bottom: 35px;
        padding-left: 25px;
    }
    .story-section-title::before {
        width: 55px;
        height: 55px;
    }
    .story-lead-text {
        font-size: 16px;
        padding-left: 25px;
    }
}

/* --------------------------------------------------
   3. 第2セクション：ほ場ができるまで
   -------------------------------------------------- */
.story-section-history {
    padding: 50px 0;
    background-color: #fffaf1; /* 下部の薄いクリーム色 */
    text-align: center;
}

.story-history-title {
    margin: 0;
    font-size: 22px;
    font-weight: 500;
    color: #3c2314;
    letter-spacing: 0.05em;
}

@media (min-width: 769px) {
    .story-section-history {
        padding: 70px 0 90px 0;
    }
    .story-history-title {
        font-size: 28px;
    }
}

/* ==========================================================================
   ストーリーページ：タイムライン・ステップ構造
   ========================================================================== */

/* タイムラインを包むセクション（全体の背景色） */
.story-section-history {
    padding: 60px 0 100px 0;
    background-color: #fffaf1; /* 薄いクリーム色 */
}

/* セクション全体のメイン見出し */
.story-history-title {
    text-align: center;
    font-size: 22px;
    font-weight: 500;
    color: #3c2314;
    letter-spacing: 0.05em;
    margin: 0 auto 40px auto;
}

/* タイムライン全体の枠（スマホ基準：左右にパンパンになるのを防ぐ余白） */
.story-timeline {
    position: relative;
    width: 100%;
    padding: 10px 20px 30px 45px; /* 左側に点線・丸印用のマージンを確保 */
    margin: 0 auto;
    text-align: left;
    box-sizing: border-box;
}

/* タイムラインの縦の点線（スマホ基準） */
.story-timeline::before {
    content: "";
    position: absolute;
    top: 20px;
    left: 27px; /* 丸印のちょうど真ん中を通る位置 */
    bottom: 30px;
    width: 0;
    border-left: 2px dashed #b38e5d; /* 栗色の点線 */
}

/* 各ステップの共通の囲み */
.story-step-item {
    position: relative;
    margin-bottom: 50px;
}
.story-step-item:last-child {
    margin-bottom: 0;
}

/* 各ステップの左側にある「丸印」（スマホ基準） */
.story-step-item::before {
    content: "";
    position: absolute;
    top: 5px; /* タイトルの1行目の高さに合わせる */
    left: -25px; 
    width: 14px;
    height: 14px;
    background-color: #fff;
    border: 2px solid #b38e5d;
    border-radius: 50%;
    z-index: 2;
}

/* 【追加】各ステップのタイトル（見出しの文字） */
.story-step-title {
    margin: 0 0 12px 0;
    font-size: 16px;
    font-weight: 600;
    color: #3c2314;
    line-height: 1.4;
}

/* ステップの解説文章 */
.story-step-text {
    font-size: 14px;
    line-height: 1.8;
    color: #555;
    margin-bottom: 20px;
}
.story-step-text p {
    margin: 0;
}

/* 画像エリアの設定 */
.story-step-images {
    position: relative;
    width: 100%;
}
.story-step-images img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 6px;
}

/* 2列画像グリッド（スマホでは縦並び） */
.img-grid-2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 12px;
}
.img-grid-2:last-child {
    margin-bottom: 0;
}

.img-full {
    position: relative;
    width: 100%;
}

/* STEP1の2連画像だけを16:9で統一するルール */
.spec-step1 .img-grid-2 img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    width: 100%;
}

/* 装飾用イラストのベース */
.deco-illust {
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 3;
}


/* ==========================================================================
   【重要】PC版のレイアウト調整（横幅769px以上）
   ========================================================================== */
@media (min-width: 769px) {
    .story-section-history {
        padding: 80px 0 130px 0;
    }

    .story-history-title {
        font-size: 28px;
        margin-bottom: 60px;
    }

    /* 
       ★PC大画面のときは最大幅を「840px」にカチッと制限！
       これで左右に上品で綺麗な余白がしっかり生まれます。
    */
    .story-timeline {
        max-width: 840px;
        padding: 10px 0 40px 60px; /* 左右パンパンを完全解消 */
    }
    
    /* PC版：縦の点線の位置 */
    .story-timeline::before {
        top: 25px;
        left: 11px;
        bottom: 35px;
    }

    .story-step-item {
        margin-bottom: 80px;
    }

    /* PC版：左側の丸印を少し大きく、位置も綺麗に固定 */
    .story-step-item::before {
        width: 20px;
        height: 20px;
        left: -59px;
        top: 6px;
    }

    /* PC版：ステップのタイトルサイズアップ */
    .story-step-title {
        font-size: 20px;
        margin-bottom: 16px;
    }

    .story-step-text {
        font-size: 15px;
        margin-bottom: 25px;
    }

    /* PC版：画像を美しい2列グリッド並びにする */
    .img-grid-2 {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        margin-bottom: 20px;
    }
}


/* ==========================================================================
   ちきりやへのアクセスセクション
   ========================================================================== */

/* --- 📱 ベーススタイル（スマホ向けが基準） --- */
.section-access {
    padding: 60px 20px;
    background-color: #fff; /* 背景はすっきりホワイト */
    color: #3c2314;
}

.section-access .container {
    max-width: 1000px; /* パウダー販売セクションと横幅を揃えて統一感を出す */
    margin: 0 auto;
}

/* 🌰 小さな栗のアイコン付きタイトル */
.access-main-heading {
    font-size: 24px;
    font-weight: 500;
    text-align: center;
    margin: 0 0 32px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.access-main-heading::before {
    content: "";
    display: inline-block;
    width: 24px;
    height: 24px;
    /* 👈 ここに小さな栗のイラスト・ロゴ画像をセットしてください */
    background-image: url('images/icon-logo-brown.png'); 
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* 🏞️ 中央の大きな農園写真 */
.access-hero-visual {
    width: 100%;
    margin-bottom: 40px;
}
.access-hero-visual img {
    width: 100%;
    height: auto;
    border-radius: 12px; /* カンプに合わせた上品な角丸 */
    display: block;
    aspect-ratio: 3 / 1;
    object-fit: cover;
}

/* 🗺️ 中段：スマホ時は縦並び */
.access-content-wrap {
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin-bottom: 50px;
}

/* 左側：店舗情報 */
.access-info-block {
    padding-left: 16px; /* 👈 【新設】スマホ時に左側に心地いい余白（インデント）を作ります */
    box-sizing: border-box;
}

.access-shop-name {
    font-size: 22px;
    font-weight: 600;
    margin: 0 0 16px 0;
    letter-spacing: 0.05em;
}
.access-details-list {
    list-style: none;
    padding: 0;
    margin: 0 0 24px 0;
    font-size: 15px;
    line-height: 1.8;
}
.access-details-list li {
    margin-bottom: 4px;
}
.access-closed {
    margin-top: 12px; /* 定休日の上の少し広めの余白 */
}

/* お問い合わせボタン（LINE） */
.access-line-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    max-width: 240px;
    text-align: center;
    border: 1px solid #3c2314;
    padding: 12px 20px;
    text-decoration: none;
    color: #3c2314;
    border-radius: 30px; /* きれいな楕円形 */
    font-size: 14px;
    font-weight: 500;
    box-sizing: border-box;
    transition: all 0.3s ease;
}
.access-line-btn:hover {
    background-color: #3c2314;
    color: #fff;
}
/* ボタンの中の小さなLINEアイコン用（必要に応じて画像パスを当ててください） */
.line-icon-mini {
    display: inline-block;
    width: 18px;
    height: 18px;
    background-image: url('images/line-icon.png'); /* なければ消してもOKです */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* 右側：地図 */
.access-map-block {
    width: 100%;
    height: 240px; /* 👈 【新設】スマホのときは縦に長すぎないように「300px」くらいが見やすくておすすめです */
}
.access-map-block iframe {
    width: 100%;
    height: 100%;
    border-radius: 16px; /* カンプ通りの丸みのある優しい角丸 */
    display: block;
}

/* 📸 下段：3連ギャラリー（スマホ時は2列、3つ目は中央） */
.access-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    width: 100%;
}
.access-gallery-item {
    width: calc((100% - 16px) / 2);
}
.access-gallery-item:last-child {
    margin-left: auto;
    margin-right: auto;
}
.access-gallery-item img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 12px;
    display: block;
}


/* --- 💻 画面が広がった時（769px以上・パソコン用） --- */
@media (min-width: 769px) {
    .section-access {
        padding: 80px 20px;
    }
    
    .access-main-heading {
        font-size: 28px;
        margin-bottom: 40px;
    }

    /* 🗺️ 中段：PC時はきれいに対称の横並び（47%ずつでガチッと固定！） */
    .access-content-wrap {
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 60px;
        margin-bottom: 60px;
    }

    .access-info-block {
        width: 42%;
        flex-shrink: 0;
    }

    .access-map-block {
        width: 42%;
        height: 300px;
        flex-shrink: 0;
    }

    /* 📸 下段：PC時はゆったり綺麗に3枚を「1列横並び」 */
    .access-gallery {
        flex-wrap: nowrap;
        gap: 24px;
    }
    .access-gallery-item {
        width: calc((100% - 48px) / 3);
    }
    .access-gallery-item:last-child {
        margin-left: 0;
        margin-right: 0;
    }
}