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

html {
    scroll-behavior: smooth;
}

:root {
    --bg-cream: #f9f7f2;
    --chestnut-brown: #5d4037;
    --deep-gold: #af9d80;
    --text-main: #2d2d2d;
}

body {
    background-color: var(--bg-cream);
    color: var(--text-main);
    font-family: 'Shippori Mincho', serif; /* 明朝体で高級感を演出 */
    overflow-x: hidden;
}

/* Navigation - 繊細な細い線と余白 */
header {
    padding: 2rem 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ロゴのデザイン化 */
/* ロゴコンテナの配置 */
.logo-container {
    display: flex;
    align-items: center;
}

/* ロゴ画像のサイズ調整 */
.logo-image {
    width: 60px;               /* 縦横を同じサイズに設定 */
    height: 60px;              /* 縦横を同じサイズに設定 */
    border-radius: 50%;        /* 50%で完全な丸になります */
    object-fit: cover;         /* 画像が歪まないように中央で切り抜き */
    display: block;
    transition: opacity 0.3s ease;
    border: 1px solid #eee;
}

/* ホバー時に少し透明にしてクリックできることを示す */
.logo-image:hover {
    opacity: 0.8;
}

/* ナビゲーションの中央寄せ */
nav {
    display: grid;
    grid-template-columns: 1fr auto 1fr; /* 左・中・右の3カラム構成 */
    align-items: center;
    width: 100%;
}

.nav-links {
    grid-column: 2; /* 中央に配置 */
    display: flex;
    gap: 3.5rem;
}

.nav-links a {
    color: var(--text-main);
    font-size: 0.9rem;
    position: relative;
    padding-bottom: 5px;
}



.nav-links a:hover::after { width: 100%; }

/* Hero Section - 雑誌のようなレイアウト */
.hero {
    position: relative; /* 動画の基準点にする */
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    /* ★動画の色と混ざる色。ここを動画のトーンに合わせる */
    background-color: #f9f7f2;
    overflow: hidden;
    box-sizing: border-box;
    /* ★追加：重なりを安定させる */
    z-index: 1;
}

/* 動画自体のスタイル */
.hero-video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 101%;
    min-height: 101%;
    width: auto;
    height: auto;
    z-index: 1; /* 一番後ろ */
    object-fit: cover; /* 隙間なく広げる */
    /* ★オーバーレイの代わりに、動画自体の不透明度を調整 */
    opacity: 0.4; 
    /* 描画を安定させる魔法の呪文 */
    will-change: opacity, transform;
    -webkit-transform: translate(-50%, -50%);
}

/* 和風の飾り線（水引をイメージ） */
.decoration-line {
    width: 60px;
    height: 1px;
    background:#d4af37; /* ゴールドを少し透過 */
    margin: 1.5rem auto; /* 中央寄せにして上下に余白 */
    position: relative;
    z-index: 1;
    display: block; /* 確実に見えるように追加 */
}

.decoration-line::before, .decoration-line::after {
    content: "";
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #d4af37; /* ドットをはっきりとしたゴールドに */
    top: -2px;
}

.decoration-line::before { left: -10px; }
.decoration-line::after { right: -10px; }

/* 写真エリア */
.hero-image-area {
    position: relative;
    width: clamp(280px, 38vw, 480px); /* 写真のサイズを少し大きく調整 */
    height: clamp(280px, 38vw, 480px);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 写真を囲む外枠（位置固定用） */
.hero-image-wrapper {
    position: relative;
    width: 350px; /* 写真のサイズ（PC版） */
    height: 350px;
}

/* 丸い写真本体 */
.image-circle {
    width: 100%;
    height: 100%;
    border: 5px solid #fff; /* 白い縁取りを追加 */
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    z-index: 2;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2); /* 影を少し強めに */
}

.image-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 写真の周りの繊細な金色の輪 */
.circle-border {
    position: absolute;
    top: -25px;
    left: -25px;
    right: -25px;
    bottom: -25px;
    border: 10px solid #d4af37;
    border-radius: 50%;
    /* ぼんやりとした金の光を追加 */
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.4);
    opacity: 2;
    z-index: -1;
}

/* ★金の装飾を復活（画像より一回り大きく配置） */
.circle-deco-line {
    position: absolute;
    top: -20px;
    left: -20px;
    right: -20px;
    bottom: -20px;
    border: 2.5px solid #fcf6ba;
    border-radius: 50%;
    /* 二重の光彩で「光っている感」を演出 */
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.6), 
                inset 0 0 5px rgba(255, 255, 255, 0.5);
    opacity: 2;
    z-index: 1; /* 写真の後ろ、背景の前 */
}

/* 装飾のドット（金色の小さな点） */
.circle-dots {
    position: absolute;
    width: 110%;
    height: 110%;
    top: -5%;
    left: -5%;
    border: 3px dashed #d4af37; /* 点線の輪 */
    border-radius: 50%;
    opacity: 0.5;
    z-index: 2;
}

/* 文字と写真をまとめるコンテナ */
.hero-container {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    max-width: 1200px;
    width: 100%;
    z-index: 5; /* 動画とオーバーレイより前 */
    /* ★追加：これを入れると描画が安定します */
    transform: translateZ(0);
    
}

/* 文字エリア：少し写真に重ねるのがコツ */
.hero-text-area {
    position: relative;
    z-index: 10;
    margin-right: 10px; /* 画像と少し重ねる */
    flex-shrink: 0; /* 文字が押しつぶされないように固定 */
} 

.hero h1 {
    font-size: clamp(0.5rem, 5vw, 4rem);
    line-height: 1.2;
    margin-bottom: 0.5rem;
    writing-mode: vertical-rl; /* 縦書きのアクセント */
    height: auto !important;
}

/* 縦書きテキストの調整（マージンをリセット） */
.vertical-text {
    writing-mode: vertical-rl;
    font-size: clamp(0.5rem, 5vw, 4rem);
    line-height: 1; /* 行間を少し詰めてバランスを調整 */
    letter-spacing: 0.4em;
    height: auto !important;/* 高さを自動にして文字が切れるのを防ぐ */
    white-space: nowrap; /* ★文字が勝手に改行されるのを防ぐ */
    margin: 0;
    /* 文字の周りに、背景と同系色のぼかしを入れる */
    text-shadow: 0 0 15px rgb(42, 40, 40), 
                 0 0 5px rgba(0, 0, 0, 0.8);
    color: #ffffff; /* 文字色は少し濃いめを維持 */
}

.brand-story {
    background-color: var(--bg-cream);
    padding: 30px 5%;
    z-index: 10;
}

.story-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center; /* 中央揃え */
    gap: 60px;
}

/* 魅力のタイトル（縦書きで印象的に） */
.story-title {
    font-size: 2.2rem;
    color: var(--chestnut-brown);
    margin-bottom: 30px;
    letter-spacing: 0.1em;
    position: relative;
    padding-bottom: 20px;
}

/* タイトルの下に細い金色の線を入れてアクセントに */
.story-title::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 1px;
    background: #d4af37;
}

/* テキストエリア：横書きでスッキリ */
.story-content {
    flex: 1.2;
}

.story-text {
    font-size: 1.1rem;
    line-height: 2.2;
    color: var(--text-main);
    margin-top: 20px;
}

.story-text-group p {
    font-size: 1.05rem;
    line-height: 2; /* 行間を広くして読みやすく */
    color: var(--text-main);
    margin-bottom: 20px;
    text-align: justify; /* 両端を揃えて美しく */
}

/* 画像エリア：少しサイズを抑えて記事風に */
.story-image {
    flex: 1;
    border-radius: 2px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0,0,0,0.06);
}

.story-image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* スマホ対応 */
@media (max-width: 768px) {
    .story-container {
        flex-direction: column-reverse; /* スマホでは画像を下に */
        gap: 30px;
    }
    .story-title {
        writing-mode: horizontal-tb;
        height: auto;
        font-size: 1.4rem;
        margin-right: 0;
        margin-bottom: 20px;
    }
    .story-content {
        flex-direction: column;
    }
}

/* Card Section - 「ずらし」のテクニックで安っぽさを排除 */
.menu-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0; /* あえて隙間をなくし、境界線で表現 */
    margin-top: 0; /* Heroのpaddingで調整するためマイナス指定を解除 */
    position: relative;
    z-index: 20;
}

/* カード全体の基本設定（上書き） */
.menu-card {
    position: relative;
    overflow: hidden;
    background: #865959;
    padding: 4rem 3rem;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2); /* 影を少し深くして立体感を */
    transition: 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    display: flex;
    flex-direction: column;
    align-items: center; /* 中央揃えで整える */
    text-align: center;
    color: #fdfaf2; /* 温かみのあるオフホワイト */
}

/* 01, 02 などの数字のデザイン */
.num {
    font-family: 'Times New Roman', serif;
    font-style: italic;
    color: #d4af37; /* シャンパンゴールド */
    font-size: 1.4rem;
    margin-bottom: 1rem;
    display: block;
}

.menu-card p {
    font-size: 0.95rem;
    color: #e0d8c3; /* 少し落ち着いたベージュ */
    line-height: 1.8;
    z-index: 1;
    margin-bottom: 2rem;
}

/* ホバー時の挙動 */
.menu-card:hover {
    transform: translateY(-10px);
    background: #4e342e; /* 今の背景よりわずかに明るくする */
}

.menu-card:hover .decoration-line {
    width: 80px; /* 線が伸びるアニメーション */
    transition: 0.6s ease;
}

.menu-card:hover .card-arrow {
    padding-left: 10px;
    padding-right: 10px;
}

/* 背景に透ける英字（和モダンによく使われる手法） */
.card-bg-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 5rem;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.03); /* 背景に溶け込む白 */
    z-index: 0;
    pointer-events: none;
    letter-spacing: 0.1em;
}

/* 「詳しく見る」の矢印 */
.card-arrow {
    font-size: 0.8rem;
    font-weight: bold;
    letter-spacing: 0.1em;
    color: #d4af37;
    transition: 0.3s;
}

.menu-card h3 {
    font-size: 1.6rem;
    font-weight: 700;
    z-index: 1;
    margin-bottom: 1.5rem;
    letter-spacing: 0.15em;
    color: #ffffff; /* 純白に近い白で視認性を確保 */
}

/* サブページ用の洗練されたパーツ */
/* --- サブページ全体の調整 --- */
.sub-page-container {
    padding: 2rem 5%; /* 上下の余白を少し詰めてスッキリさせる */
}

/* ① タイトルの背景帯 */
.sub-page-header h1 {
    background-color: #865959; /* 指定の色 */
    color: #fff;
    padding: 1.5rem 2rem;
    display: inline-block; /* 文字の長さに合わせる */
    width: 100%; /* 横いっぱいの帯にする場合 */
    box-sizing: border-box;
    letter-spacing: 0.2em;
    margin-bottom: 2rem;
}

.sub-page-header {
    margin-bottom: 4rem;
    position: relative;
    text-align: center;
}

.sub-page-header::after {
    content: "";
    display: block;
    width: 400px;
    max-width: 80%; /* スマホで画面からはみ出さないためのガード */
    height: 1px;
    background: #d4af37; /* 金色の線 */
    margin: 4rem auto 0; /* 上下の余白も少し広げてゆとりを */
}

.content-wrapper {
    max-width: 900px;
    margin: 0 auto;
    background: white;
    padding: 5rem;
    box-shadow: 0 30px 60px rgba(0,0,0,0.03);
}

.btn {
    background: transparent;
    color: var(--chestnut-brown);
    padding: 1.2rem 4rem;
    transition: 0.4s;
}

.btn:hover {
    background: var(--chestnut-brown);
    color: white;
}

/* Animation */
.fade-up {
    opacity: 0;
    transform: translateY(40px);
    transition: 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.fade-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* サブページ：共通レイアウト */
.sub-page-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 4rem 5%;
    position: relative;
    z-index: 1;
    /* 背景が透けて見えるよう、コンテナ自体の背景は透明にする */
}

/* スペックセクション（品種・樹齢・限定数） */
.spec-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 3rem 0;
}

/* spec-grid の中にある spec-label だけを小さくする */
.spec-grid .spec-label {
    font-size: 1rem; /* ここでお好みの小ささに調整してください */
    margin-bottom: 0.3rem; /* 文字が小さくなった分、余白も少し詰めると綺麗です */
    opacity: 0.8; /* 少し透かすと、より「ラベル」らしい控えめな印象になります */
}

.spec-item {
    background: #fff;
    padding: 2rem;
    text-align: center;
    border: 1px solid #eee;
    border-top: 3px solid var(--deep-gold); /* 上部に金のアクセント */
}

/* 各カードやアイテムに「すりガラス効果」を与えて文字を浮かび上がらせる */
.spec-item, .benefit-card, .order-area {
    background: rgba(255, 255, 255, 0.85) !important; /* 白の半透明 */
    backdrop-filter: blur(10px); /* 背景をぼかす（幻想的！） */
    border: 1px solid rgba(212, 175, 55, 0.3); /* 金色の線を少し透かす */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

/* 導入文の視認性を上げる */
.intro-text {
    background: rgba(249, 247, 242, 0.6);
    padding: 2rem;
    display: inline-block;
    border-radius: 4px;
    backdrop-filter: blur(5px);
}

.spec-label {
    font-size: 2rem;
    color: var(--deep-gold);
    display: block;
    margin-bottom: 0.5rem;
}

.spec-value {
    font-weight: bold;
    font-size: 1.1rem;
    color: var(--chestnut-brown);
}

/* 特典セクションのカード化 */
.benefit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

/* 応援ページのbenefit-card内の金額ラベルを少し強調 */
.benefit-grid .benefit-card .spec-label {
    font-size: 1.1rem;
    font-family: 'Times New Roman', serif;
    font-weight: bold;
    border-bottom: 1px solid var(--deep-gold);
    display: inline-block;
    margin-bottom: 1rem;
}

.benefit-card {
    background: var(--bg-cream);
    padding: 2rem;
    border-radius: 8px;
    transition: 0.3s;
    border-left: 4px solid var(--deep-gold);
}

.benefit-card h4 {
    margin-top: 0;
    color: var(--chestnut-brown);
}

/* 金額ラベルの中央配置 */
.corporate-card .spec-label.gold {
    display: inline-block !important;
    margin: 0 auto 1.5rem !important;
    padding: 0.5rem 2rem;
}

/* 説明文の幅を制限して読みやすく */
.corporate-card .benefit-desc {
    max-width: 700px;
    margin: 0 auto 2rem !important;
    line-height: 1.8;
}

.spec-label.gold {
    background: #d4af37; /* ゴールド背景 */
    color: #fff;
}

.benefit-list {
    list-style: none;
    padding: 0 !important;
    margin: 0 auto !important;
    display: inline-block !important; /* 中身の幅に合わせる */
    text-align: left !important;      /* チェックマークと文字の並びは左揃えを維持 */
}

.benefit-list li {
    font-size: 1rem;
    margin-bottom: 0.8rem;
    padding-left: 2rem;
    position: relative;
    color: var(--chestnut-brown);
}

.benefit-list li::before {
    content: '✔';
    position: absolute;
    left: 0;
    color: #d4af37;
    font-weight: bold;
}

/* 事前予約ページの説明文エリア */
.pre-order-description {
    max-width: 800px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.85); /* 透過させて背景を活かす */
    padding: 3rem 2rem;
    border-radius: 4px;
    text-align: center;
    color: var(--chestnut-brown); /* 統一している茶色 */
}

.pre-order-description h3 {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    letter-spacing: 0.1em;
    font-weight: 700;
}

.pre-order-description p {
    font-size: 1rem;
    line-height: 1.8;
    margin-bottom: 1.5rem;
}

/* 収穫時期を目立たせる */
.harvest-info {
    display: inline-block;
    background: #fff;
    border: 1px solid #d4af37; /* ゴールドの細い線 */
    padding: 0.8rem 2rem;
    margin: 1rem 0 2rem;
}

.info-label {
    font-weight: bold;
}

.info-date {
    color: #d4af37;
    font-weight: bold;
    font-size: 1.1rem;
}

.sub-text {
    font-size: 0.9rem !important;
    color: #666;
}

/* 価格・申し込みエリア */
.order-area {
    margin-top: 6rem;
    padding: 2rem 10rem;
    border: 1px solid #d4af37;
    background-color: #fff;
    text-align: center;
}

.order-area .btn {
    display: inline-block;
    padding: 1rem 2rem;
    background: var(--chestnut-brown);
    color: #fff;
    text-decoration: none;
    transition: 0.3s;
}

.order-area .btn:hover {
    background: #d4af37;
}

.price-table th {
    color: var(--deep-gold);
    text-transform: uppercase;
    font-weight: 400;
}

.price-label {
    font-size: 2.5rem;
    color: var(--chestnut-brown);
    margin-bottom: 1rem;
    font-weight: bold;
}

.price-tag {
    font-size: 3.5rem; /* 数字をかなり大きく */
    font-family: 'Times New Roman', serif;
    color: var(--chestnut-brown);
    margin-bottom: 2rem;
    font-weight: bold;
}

.price-tag span {
    font-size: 1.2rem; /* 円や税別などの単位は小さく */
    margin-left: 10px;
}

/* 事前予約ページ用の追加スタイル */
/* テーブル全体のデザイン */
.price-table-custom {
    width: 100%;
    border-collapse: collapse;
    margin: 3rem 0;
    font-family: 'Shippori Mincho', serif;
}

.price-table-custom th {
    padding: 1.5rem;
    border-bottom: 1px solid var(--deep-gold);
    color: var(--deep-gold);
    font-size: 1.5rem;
    letter-spacing: 0.1em;
}

/* 2番目の見出し（1kg あたりの価格）だけを右寄せにする */
.price-table-custom th:nth-child(2) {
    text-align: right;
    padding-right: 1.5rem; /* 金額側の余白と合わせる */
}

.price-table-custom td {
    padding: 2rem 1.5rem;
    border-bottom: 1px solid rgba(175, 157, 128, 0.2);
}

/* サイズ列の装飾 */
.size-td {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--chestnut-brown);
    letter-spacing: 0.1em;
}

/* 価格列の装飾 */
.price-td {
    font-size: 2rem;
    font-family: 'Times New Roman', serif;
    font-weight: 700;
    color: var(--chestnut-brown);
    text-align: right;
}

.price-td span {
    font-size: 1rem;
    margin-left: 5px;
    font-family: 'Shippori Mincho', serif;
}

/* 補足テキスト */
.notice-text {
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 2rem;
    line-height: 1.8;
    text-align: center;
}

/* CTAエリアの余白調整 */
.cta-area {
    margin-top: 3rem;
}

/* 須木栗応援テキスト */
.intro-text-deep {
    text-align: center; /* 物語風にするため、左寄せの方が読みやすいです */
    max-width: 800px;
    margin: 0 auto;
    line-height: 2;
    background: rgba(255, 255, 255, 0.7); /* 少し背景を透かす */
    padding: 3rem;
    border-radius: 5px;
}

.intro-text-deep .catch-copy {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--chestnut-brown);
    margin-bottom: 2rem;
    display: block;
}

.intro-text-deep p {
    margin-bottom: 1.5rem;
    color: #444;
}

.catch-copy {
    font-size: 1.4rem;
    font-weight: bold;
    color: var(--chestnut-brown);
    margin-bottom: 2rem;
    text-align: center;
}

.final-action-area {
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center; /* 子要素（ボタン）を中央に引き寄せる */
    justify-content: center;
}

.action-message {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--chestnut-brown);
    margin-bottom: 1.5rem;
}

.btn-large {
    padding: 1.2rem 3rem !important;
    font-size: 1.25rem !important;
    background: var(--chestnut-brown) !important;
    color: #ffffff !important;
    text-decoration: none !important;
    font-weight: bold !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    display: inline-block !important;
    transition: all 0.3s ease;
    border-radius: 8px;            /* 角を少し丸くすると親しみやすくなります */
    margin: 0 auto !important; /* 左右のマージンを自動にして中央固定 */
    max-width: 90% ; /* スマホで横幅いっぱいに広がりすぎないように */
    white-space: nowrap; /* ボタン内の改行を防ぐ */
}

.btn-large:hover {
    transform: scale(1.05); /* 少し膨らむアニメーション */
    background: #4e342e !important; /* ホバー時は少し濃くして「押せる感」を出す */
    color: #ffffff !important;      /* ホバー時も文字色を維持 */
    box-shadow: 0 6px 25px rgba(0,0,0,0.3);
}

.info-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1rem 0;
    border-bottom: 1px dashed #eee;
}

.info-row:last-child {
    border-bottom: none;
}

/* 項目名（左側） */
.info-row dt {
    font-size: 0.85rem;
    color: #888;
    width: 30%;
    text-align: left;
    font-weight: normal;
}

/* 内容（右側） */
.info-row dd {
    font-size: 1rem;
    color: var(--chestnut-brown);
    width: 70%;
    text-align: right;
    font-weight: 700;
    margin: 0;
    line-height: 1.5;
}

.btn-container {
    text-align: center;
    margin-top: 2.5rem;
}

.order-area .btn {
    display: inline-block;
    background-color: var(--chestnut-brown);
    color: #fff;
    padding: 1.2rem 2.5rem;
    text-decoration: none;
    border-radius: 4px;
    transition: 0.3s;
    font-weight: bold;
}

.order-area .btn:hover {
    opacity: 0.8;
    transform: translateY(-2px); /* 少し浮き上がる演出 */
}

/* 幻想的な背景の設定 */
.page-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    /* 背景画像のパスをあなたの画像名に合わせて変更してください */
    background-image: url('栗園.png'); 
    background-size: cover;
    background-position: center;
    z-index: -2; /* 一番背面に配置 */
}

/* 画像の上に重ねる半透明の膜（幻想的な演出） */
.page-background::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* ベージュ系の半透明グラデーションで文字を読みやすくする */
    background: linear-gradient(
        to bottom,
        rgba(249, 247, 242, 0.8) 0%, 
        rgba(249, 247, 242, 0.4) 50%,
        rgba(249, 247, 242, 0.8) 100%
    );
    z-index: -1;
}

/* お問い合わせフォーム */
.contact-section {
    padding: 5rem 5%;
    background-color: var(--bg-cream); /* 背景色に合わせる */
}

.contact-form {
    max-width: 600px;
    margin: 0 auto;
    background: #fff;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

/* プルダウンメニュー（select）のスタイル調整 */
.contact-form select {
    width: 100%;
    padding: 0.8rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #fff;
    font-size: 1rem;
    color: var(--chestnut-brown);
    /* デフォルトの矢印を少し綺麗に見せるための設定 */
    cursor: pointer;
    appearance: none; /* デフォルトのスタイルをリセット（ブラウザ対応） */
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpolyline points="6 9 12 15 18 9"%3E%3C/polyline%3E%3C/svg%3E'); /* 下矢印アイコンを追加 */
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1em;
}

.contact-form select:focus {
    outline: none;
    border-color: var(--gold-color); /* 以前設定した金系やメインカラー */
}

/* 選択前のプレースホルダー（選択してください）を薄くする */
select:invalid {
    color: #999;
}

.form-group {
    margin-bottom: 1.5rem;
    text-align: left;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--chestnut-brown);
    font-weight: bold;
}

.form-group input, 
.form-group textarea {
    width: 100%;
    padding: 0.8rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-family: inherit;
    box-sizing: border-box; /* 幅がはみ出さないように */
}

/* 送信ボタンの装飾（既存の.btnがある場合は微調整してください） */
.contact-form .btn {
    background-color: var(--chestnut-brown);
    color: white;
    border: none;
    padding: 1rem 3rem;
    cursor: pointer;
    transition: 0.3s;
    font-size: 1rem;
}

.contact-form .btn:hover {
    opacity: 0.8;
}

@media (max-width: 768px) {
    .contact-form {
        padding: 1.5rem;
    }
}

/* オーナー制度：価格表示エリアの調整 */
.price-container {
    background: #fff;
    padding: 2rem;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 2rem;
    text-align: center;
}

.management-fee {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--chestnut-brown);
    margin-top: 0.5rem;
}

/* 注意書きをポジティブな「ステータス感」のあるデザインに */
.owner-status {
    font-size: 0.9rem;
    color: var(--chestnut-brown);
    margin-top: 1.2rem;
    background: #fff9e6; /* 優しいクリーム色 */
    display: inline-block;
    padding: 0.5rem 1.5rem;
    border-radius: 4px;
    border-left: 4px solid #d4af37; /* 左側にアクセントの金線 */
    font-weight: 500;
}

/* 品種を広げた新しいレイアウト */
.spec-area {
    max-width: 900px;
    margin: 3rem auto;
}

/* 品種グループ全体のコンテナ */
.variety-groups {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin: 2rem 0;
    text-align: left; /* 左寄せにしてリスト感を出す */
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.v-group {
    border-bottom: 1px inset rgba(175, 157, 128, 0.2);
    padding-bottom: 1rem;
}

.v-group:last-child {
    border-bottom: none;
}

.v-header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 0.5rem;
}

/* 「早生」などのラベル */
.v-season {
    background: var(--chestnut-brown);
    color: #fff;
    font-size: 0.8rem;
    padding: 2px 12px;
    letter-spacing: 0.1em;
}

/* 時期の説明 */
.v-months {
    font-size: 0.9rem;
    color: var(--deep-gold);
    font-weight: bold;
}

/* 品種名 */
.v-names {
    font-size: 1.1rem;
    color: var(--text-main);
    letter-spacing: 0.05em;
    padding-left: 0.5rem;
}

/* 品種リストの装飾 */
.variety-expanded {
    margin-bottom: 20px;
    padding: 3rem !important;
}

.variety-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem 2rem; /* 縦横の間隔 */
    margin: 1.5rem 0;
}

.variety-list span {
    font-size: 1.1rem;
    color: var(--chestnut-brown);
    font-weight: bold;
    position: relative;
    padding: 0 5px;
}

/* 品種名の間に繊細なドットを入れる */
.variety-list span:not(:last-child)::after {
    content: "・";
    position: absolute;
    right: -1.2rem;
    color: var(--deep-gold);
}

.variety-note {
    display: block;               /* 独立した一行にする */
    width: 100%;                  /* 横幅をいっぱい使う */
    writing-mode: horizontal-tb;  /* ★強制的に横書きにする */
    margin-top: 3rem;             /* 品種リストとの間にしっかり余白を作る */
    text-align: center;           /* 中央寄せにする */
    font-size: 0.85rem;
    color: #666;
    line-height: 1.8;
    clear: both;
}

/* 樹齢と限定数を横並びにする設定 */
.spec-grid-dual {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* カード内ボタンエリアの調整 */
.card-btn-area {
    width: 100%;
    text-align: center !important; /* 確実に中央寄せ */
    margin-top: top;
    display: flex;
    justify-content: center; /* 子要素（ボタン）を中央に */
}

/* 通常プラン用の少し小さめのボタン */
.btn-small {
    padding: 0.6rem 1.2rem !important;
    font-size: 0.9rem !important;
}

/* 法人向けカードの特別デザイン */
.corporate-card {
    border: 2px solid #d4af37 !important; /* 上品なゴールドの縁取り */
    background: linear-gradient(145deg, #fffcf5, #ffffff);
    grid-column: 1 / -1; /* 横いっぱいに広げて目立たせる（PC時） */
    margin-top: 5rem;
    box-shadow: 0 10px 30px rgba(212, 175, 55, 0.1);
    /* ★カード全体を中央揃えに設定 */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 3rem 2rem !important; /* 上下の余白を少し広げて優雅に */
}

/* 法人ボタン専用：さらに目立たせるデザイン */
.btn-corp {
    background: linear-gradient(135deg, #d4af37, #b8860b) !important; /* 金色のグラデーション */
    color: #fff !important;
    padding: 1rem 2.5rem !important;
    font-weight: 700 !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4);
    transition: all 0.3s ease;
    
    /* 改行を防ぐ設定 */
    white-space: nowrap !important; /* テキストを一行に強制 */
    display: inline-block !important;
}

.btn-corp:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.6);
    filter: brightness(1.1);
}



/* Mobile */
/* スマホ版の調整 */
@media (max-width: 768px) {

    /* 1. 写真と装飾を完全に消す */
    .hero-image-area, 
    .hero-image-wrapper,
    .circle-border, 
    .circle-deco-line, 
    .circle-dots {
        display: none !important;
    }

    .logo-image {
        width: 45px; /* スマホでは少し小さくするとバランスが良いです */
        height: 45px;
    }

    /* ロゴコンテナの設定（左端） */
    .logo-container {
        margin: 0;
    }

    .hero-content {
        flex-direction: column-reverse; /* スマホでは写真を上に、文字を下に */
        gap: 2rem;
        padding-top: 2rem;
    }

    .hero {
        padding-top: 1rem; /* さらに上部を詰める */
    }

    .hero h1 {
        writing-mode: horizontal-tb; /* スマホは横書きが読みやすい */
        height: auto;
        font-size: 2rem;
        margin-top: 1rem;
    }

    .hero-container {
        flex-direction: column !important; /* 縦並びを強制 */
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        width: 100%;
        padding: 0 5%;
    }
    
    .hero-text-area {
        margin-right: 0 !important;
        margin-top: 0 !important;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* --- 動画エリアの高さ調整 --- */
    .hero {
        min-height: 30vh !important; /* 画面の高さの65%に設定。お好みで60〜70で調整してください */
        height: 30vh;
        overflow: hidden;
    }

    .hero-video {
        /* 動画の切り抜き位置を調整（中央を保持） */
        width: 100%;
        height: 100%;
        object-fit: cover;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    /* --- 動画エリアの高さ調整 --- */


    .vertical-text {
        writing-mode: horizontal-tb !important; /* スマホは横書き */
        font-size: clamp(1.8rem, 8vw, 2.5rem) !important; /* 画面幅に合わせて最適化 */
        color: #fefefe;
        letter-spacing: 0.15em !important;
        line-height: 1.5 !important;
        text-shadow:1px  1px 0 #302e2e,
                    -1px  1px 0 #826b6b,
                    1px -1px 0 #826b6b,
                    -1px -1px 0 #826b6b,
                    0px  0px 20px rgba(0,0,0,5) !important; /* 最後に少しぼかしを入れると馴染みます */
        white-space: normal !important; /* 適宜改行を許可 */
        margin: 0 auto !important;
    }

    .menu-grid {
        grid-template-columns: 1fr; margin-top: 0;
    }
    
    .content-wrapper {
        padding: 2rem;
    }

    header {
        padding: 1rem 5%; /* 上下の余白を少し詰める */
        position: relative;
        z-index: 1002;
    }

    /* ナビゲーション全体の横幅を100%にし、余白を調整 */
    nav {
        display: flex !important; /* gridを解除 */
        justify-content: space-between; /* これでロゴと三本線を両端に飛ばします */
        align-items: center;
        width: 100%;
        grid-template-columns: none; /* gridを完全に無効化 */
    }

    /* メニューを画面いっぱいに広がるオーバーレイに */
    .nav-links {
        display: flex; /* 非表示ではなく、画面の外に置く */
        position: fixed;
        top: 0;
        right: -100%; /* 初期状態は画面外 */
        width: 100%;
        height: 100vh;
        background: var(--bg-cream);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 2.5rem;
        transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
        z-index: 1000;
        visibility: hidden; /* 閉じている時は完全に存在を消す */
        opacity: 0;
    }

    .nav-links.active {
        right: 0;
        visibility: visible; /* 開いた時だけ表示 */
        opacity: 1;
    }

    .nav-links a {
        font-size: 1.5rem; /* スマホでは押しやすく大きく */
    }

    /* JavaScriptが付けるクラスに合わせて動きを指定 */
    /* 1番目の棒：右下へ回転 */
    .bar.rotate-down {
     transform: translateY(8px) rotate(45deg);
    }

    /* 2番目の棒：消える */
    .bar.fade-out {
     opacity: 0;
    }

    /* 3番目の棒：右上へ回転 */
    .bar.rotate-up {
     transform: translateY(-8px) rotate(-45deg);
    }

    /* メニューが開いている時（activeクラスがある時）の三本線の動き */
    .nav-links.active ~ .menu-toggle .bar:nth-child(1) {
     transform: translateY(8px) rotate(45deg);
    }
    .nav-links.active ~ .menu-toggle .bar:nth-child(2) {
     opacity: 0;
    }
    .nav-links.active ~ .menu-toggle .bar:nth-child(3) {
     transform: translateY(-8px) rotate(-45deg);
    }

    .menu-toggle {
        display: flex !important; /* 強制表示 */
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 44px; /* タップしやすいサイズ */
        height: 44px;
        cursor: pointer;
        z-index: 1001;
        margin-left: auto;
        margin-right: -10px;
        gap: 6px; /* 棒と棒の間隔 */
    }

    .menu-toggle .bar {
     width: 25px;
     height: 2px;
     background-color: var(--chestnut-brown);
     transition: 0.3s;
     display: block; /* 確実に見えるように追加 */
     border-radius: 2px;
    }

    .sub-title {
        display: block;
        margin-bottom: 0.5rem;
    }

    /* --- タイトルの改行を防ぐ調整 --- */
    .sub-page-header h1 {
        font-size: 1.4rem;        /* 1.5remから少しだけ小さくして一行に収めます */
        padding: 1.2rem 0.5rem;   /* 左右のパディングを 0.5rem に減らして横幅を確保 */
        letter-spacing: 0.05em;   /* 文字間隔をわずかに詰め、一行の収まりを良くします */
        line-height: 1.4;
        width: 100%;
        display: block;           /* inline-blockだと崩れる場合があるのでblockに */
        box-sizing: border-box;   /* パディングを含めた幅で計算 */
        white-space: nowrap;      /* ★これを入れると絶対に改行しなくなります */
    }

    /* タイトル下の導入文（ストーリー）の調整 */
    .intro-text, 
    .intro-text-deep {
        text-align: justify;    /* 両端を揃えて、ポツンと浮く文字を減らす */
        padding: 1.5rem;        /* 左右の余白を適切に設定 */
        font-size: 0.95rem;     /* 文字をわずかに小さくして一行に入る量を増やす */
        line-height: 1.8;       /* 行間を広げてゆとりを持たせる */
        max-width: 90%;         /* 画面いっぱいに広がりすぎないように */
        margin: 0 auto;         /* コンテナ自体は中央に配置 */
        display: block;
    }

    /* 句読点での変な改行を防ぐ設定（日本語特有の調整） */
    .intro-text p, 
    .intro-text-deep p {
        margin-bottom: 1.5rem;
        word-break: break-all;  /* 単語の途中で変な空白ができるのを防ぐ */
        overflow-wrap: break-word;
    }

    .intro-text-deep .catch-copy {
        text-align: center; /* キャッチコピーだけは中央 */
        font-size: 1.5rem;
    }

    .menu-grid {
        margin-top: 0;
        padding: 0 5%;
    }

    .menu-card {
        padding: 2rem;
        aspect-ratio: auto; /* スマホでは高さを固定しない */
        margin-bottom: 1rem;
    }

    .pre-order-description {
        width: 90%;
        padding: 2rem 1rem;
    }
    .pre-order-description h3 {
        font-size: 1.2rem;
    }

    .order-area {
        padding: 3rem 1.5rem; /* 既存の 10rem をスマホでは小さく */
    }

    /* セル内の数値も調整 */
    .price-td {
        font-size: 1.4rem !important; /* 金額を少し控えめにして一行に収める */
        white-space: nowrap;
    }

    /* --- スペックエリア（品種・樹齢など）の調整 --- */
    .spec-grid {
        grid-template-columns: 1fr; /* 3列はスマホでは厳しいので1列に */
        gap: 15px;
    }

    .spec-item {
        padding: 1.5rem;
        display: flex;
        justify-content: space-between; /* ラベルと値を左右に配置して読みやすく */
        align-items: center;
        text-align: left;
    }

    .spec-grid .spec-label {
        font-size: 0.5rem;
        margin-bottom: 0; /* 横並びにするのでマージンリセット */
    }

    .spec-value {
        font-size: 1rem;
        text-align: right;
    }

    /* --- 特典カードの調整 --- */
    .benefit-card {
        padding: 1.5rem;
    }

    .benefit-card h4 {
        font-size: 1.2rem;
        margin-bottom: 0.8rem;
    }

    .benefit-card p {
        font-size: 0.95rem;
        line-height: 1.7;
    }

    .corporate-card {
        grid-column: auto;
        padding: 2rem 1rem !important;
    }

    /* --- 価格エリア（一番の見せどころ）の調整 --- */
    .order-area {
        padding: 3rem 1.5rem; /* 左右の余白を適切に */
        margin-top: 4rem;
    }

    .price-label {
        font-size: 1.6rem; /* <オーナー価格> を少し小さく */
    }

    .price-tag {
        font-size: 2rem !important; /* 30,000円 の数字を調整 */
        display: block; /* 単位と分ける */
    }

    .price-tag span {
        font-size: 1rem;
        display: block; /* 円〜（税別）を改行して見やすく */
        margin-top: 5px;
    }

    .order-area .btn {
        width: 100%; /* スマホではボタンを横いっぱいにすると押しやすい */
        padding: 1.2rem 1rem;
        box-sizing: border-box;
    }

    /* 料金表の見出し全体の調整 */
    .price-table-custom th {
        font-size: 0.9rem; /* PC版より小さくして収まりを良くする */
        padding: 1rem 0.3rem; /* 左右の余白を最小限に */
        line-height: 1.4;
        vertical-align: bottom; /* 文字の底辺を揃える */
    }

    /* 「1kg あたりの価格」の見出しを狙い撃ちで調整 */
    .price-table-custom th:nth-child(2) {
        text-align: right; /* 金額側なので右寄せが見やすい */
        min-width: 110px;  /* 2行になっても崩れない幅を確保 */
    }

    .v-group {
        text-align: center; /* スマホでは中央寄せが綺麗です */
        padding-bottom: 1.5rem;
    }

    .v-header {
        flex-direction: column; /* ラベルと時期を縦に並べる */
        gap: 0.5rem;
        margin-bottom: 0.8rem;
        align-items: center;
    }

    .v-season {
        display: inline-block;
        width: auto;
        padding: 4px 20px; /* ラベルを少し横長に */
    }

    .v-months {
        font-size: 1rem; /* 時期を少し大きく */
        display: block;
    }

    .v-names {
        font-size: 1.1rem;
        padding-left: 0; /* 左余白をリセット */
        line-height: 1.6;
        word-break: keep-all; /* 単語の途中での改行を防ぐ（日本語用） */
    }

    .variety-expanded {
        padding: 2.5rem 1.2rem !important;
    }

    .variety-groups {
        gap: 2rem; /* グループ間の間隔を広げる */
    }

    .variety-list {
        gap: 0.8rem 1rem;
    }
    
    .variety-list span {
        font-size: 0.95rem;
    }
    
    .variety-list span:not(:last-child)::after {
        right: -0.7rem;
    }

    /* 注意書きの位置調整 */
    .variety-note {
        margin-top: 2rem;
        padding: 0 1rem;
        text-align: left;         /* スマホでは左寄せが見やすいです */
        font-size: 0.8rem;
    }

    .spec-grid-dual {
        grid-template-columns: 1fr; /* スマホでは縦に並べる */
    }

    .management-fee {
        font-size: 1rem;
    }

    /* --- 品種セクションのレイアウト最終修正 --- */

/* 親要素の横並び設定を解除し、中身を縦に並べる */
.variety-expanded.spec-item {
    display: flex !important;
    flex-direction: column !important; /* 中身を上から順に並べる */
    align-items: center !important;    /* 中央に寄せる */
    width: 100% !important;
    box-sizing: border-box !important;
    writing-mode: horizontal-tb !important; /* 親が縦書きでもここは横書き */
}

/* 品種グループの箱 */
.variety-groups {
    width: 100% !important;
    max-width: 600px !important;
    margin: 0 auto !important;
    display: block !important; /* 横並びを防ぐ */
}

/* ★注意書きを完全に独立させ、品種の下に配置する */
.variety-note {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 2rem auto 0 !important; /* 上に余白を作り、品種の下へ */
    padding: 1rem 0 !important;
    writing-mode: horizontal-tb !important; /* 強制横書き */
    text-align: center !important;           /* 中央揃え */
    clear: both !important;                  /* 回り込み解除 */
    position: relative !important;
    left: 0 !important;
    color: #666 !important;
    font-size: 0.85rem !important;
}


    .variety-note {
        margin-top: 1.5rem !important;
        text-align: left !important; /* スマホは左寄せが読みやすい */
        padding: 0 10px !important;
        line-height: 1.6 !important;
    }

    .benefit-list li {
        font-size: 0.9rem;
        padding-left: 1.8rem;
    }
    
    .info-row dd {
        font-size: 0.95rem; /* スマホで文字が溢れないよう微調整 */
    }

    .notice-text {
        text-align: left !important; /* スマホの時だけ左寄せ */
        padding: 0 5%;              /* 画面端に密着しすぎないよう少し余白を持たせると綺麗です */
    }

    .owner-status {
        font-size: 0.7rem;
        text-align: left !important;
        color: var(--chestnut-brown);
        margin-top: 1.2rem;
        background: #fff9e6; /* 優しいクリーム色 */
        display: inline-block;
        padding: 0.5rem 1.5rem;
        border-radius: 4px;
        border-left: 4px solid #d4af37; /* 左側にアクセントの金線 */
        font-weight: 500;
    }

    .btn-large {
        display: block !important; /* ブロック化して中央寄せを確実に */
        width: fit-content;        /* 文字幅に合わせる */
        min-width: 280px;         /* 小さくなりすぎないように */
        padding: 1rem 1.5rem !important;
        font-size: 1.1rem !important; /* 文字サイズを微調整 */
    }
    
    /* 法人ボタン専用：さらに目立たせるデザイン */
.btn-corp {
    padding: 0.8rem 1.2rem !important; /* スマホでは幅に合わせて少しスリムに */
        font-size: 0.9rem !important;      /* 文字サイズを微調整して溢れを防ぐ */
        letter-spacing: 0;
    }

    .action-message {
        font-size: 1.1rem;
    }
    .btn-large {
        width: 100%; /* スマホでは画面幅いっぱいに */
        padding: 0.8rem 0.8rem !important;
    }


}