@charset "UTF-8";

:root {
    --primary-blue: #007BFF; /* カルストの空と湧水のブルー */
    --karst-deep-blue: #003366; /* 湧水の深淵・高級感を示す濃い青（新設） */
    --accent-gold: #D4AF37;  /* 稲穂の黄金色 */
    --bg-white: #F8F9FA;     /* 石灰岩の白、清潔感 */
    --text-main: #333333;
}

body {
    font-family: 'Noto Sans JP', sans-serif;
    color: var(--text-main);
    background-color: var(--bg-white);
    line-height: 1.6;
    margin: 0;
    padding: 0;
}

/* 旧 --main-green をカルストブルーへ変更 */
.navbar {
    background-color: var(--karst-deep-blue);
}
.section-title {
    border-bottom: 3px solid var(--primary-blue);
    display: inline-block;
    margin-bottom: 30px;
    padding-bottom: 10px;
    font-weight: bold;
}

/* --- 新Heroエリア（CSSのみでクロスフェード） --- */
.hero-crossfade {
    position: relative;
    width: 100%;
    height: 70vh; /* 画面の70%の高さ */
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);
    overflow: hidden;
}

/* 背景画像のレイヤー設定 */
.hero-crossfade .slide {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    animation: fade 15s infinite; /* 15秒かけて3枚をループ */
    z-index: 1;
}

/* 各画像の設定（写真は仮の名前です。後で合わせてください） */
.hero-crossfade .slide:nth-child(1) {
    background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url('../photos/karst_sky.jpg');
    animation-delay: 0s;
}
.hero-crossfade .slide:nth-child(2) {
    background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url('../photos/spring_water.jpg');
    animation-delay: 5s;
}
.hero-crossfade .slide:nth-child(3) {
    background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url('../photos/terraced_rice.jpg');
    animation-delay: 10s;
}

/* フェードアニメーションの計算 */
@keyframes fade {
    0%   { opacity: 0; transform: scale(1); }
    10%  { opacity: 1; }
    33%  { opacity: 1; }
    43%  { opacity: 0; transform: scale(1.05); } /* 少しズームしながら消える演出 */
    100% { opacity: 0; }
}

/* テキストを画像の上に配置 */
.hero-content {
    position: relative;
    z-index: 2;
    padding: 0 20px;
}

/* ボタン装飾 */
.btn-gold {
    background-color: var(--accent-gold);
    color: white;
    padding: 15px 30px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    display: inline-block;
    transition: background-color 0.3s, transform 0.2s;
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
}
.btn-gold:hover {
    background-color: #B89600; /* ホバー時は少し濃く */
    transform: translateY(-2px); /* 少し浮き上がる */
    color: white;
}

.ls-1 { letter-spacing: 2px; }
.x-small { font-size: 0.75rem; }
.story-content p { line-height: 1.8; margin-bottom: 1.2rem; }
.shadow-lg { box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.1) !important; }
.italic { font-style: italic; color: #555; }

.live-badge {
    position: absolute; top: 15px; left: 15px; background: rgba(255, 0, 0, 0.8);
    color: white; padding: 4px 12px; border-radius: 5px; font-weight: bold;
    animation: blink 2s infinite; z-index: 10;
}

@keyframes blink { 0% { opacity: 1; } 50% { opacity: 0.4; } 100% { opacity: 1; } }

.footer-legal {
    font-size: 0.85rem; background: #f8f9fa; padding: 40px 0; border-top: 1px solid #dee2e6;
}

/* --- スマートフォン向けの調整 --- */
@media (max-width: 768px) {
    .hero {
        padding: 80px 0; /* 縦幅を少しコンパクトに */
        background-position: center; /* 画像を中央に */
    }
    
    .hero h1 {
        font-size: 1.8rem; /* 文字がはみ出さないサイズに */
    }

    .section-title {
        font-size: 1.4rem;
        display: block; /* 中央寄せしやすくする */
        text-align: center;
    }

    /* 注文フォームの入力欄とボタンを大きく */
    .form-control, .form-select {
        font-size: 1rem; /* 入力時に勝手にズームされるのを防ぐ */
        padding: 12px;
    }

    .btn-lg {
        padding: 15px;
        font-size: 1.2rem;
    }

    /* ストーリー部分の余白 */
    .story-content {
        padding: 0 10px;
    }   
}

/* 代表プロフィール画像のスタイル */
.profile-image {
    border-radius: 30px; /* 角を大きめに丸くする */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); /* ふんわりとした影 */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* カーソルを乗せた時のアニメーション用 */
}

/* カーソルを乗せた時に少し浮き上がる演出（任意） */
.profile-image:hover {
    transform: translateY(-5px); /* 少し上に移動 */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); /* 影を濃くする */
}