@charset "UTF-8";

body {
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #fff;
}

/* 共通 */
section {
  width: 100%;
  padding: 40px 20px;
  box-sizing: border-box;
}

/* 基本設定 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


.container {
    width: 90%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 60px 0;
}

/* 背景固定の共通設定 */
.bg-fixed {
	background-image: url('../"../../image/curry/back-image.png"');
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

/* スマホでも綺麗に背景を固定するための手法 */
.bg-fixed {
    position: relative;
    z-index: 0;
}

.bg-fixed::before {
    content: "";
    display: block;
    position: fixed;    /* 画面に対して固定 */
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;        /* コンテンツの背面に配置 */
    background-image: inherit; /* 親要素の背景画像を引き継ぐ */
    background-size: cover;
    background-position: center;
}
/* ヒーローセクション */
.hero {
    height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
}

.curry-hero {
    background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url('../"../../image/curry/img_curry1.jpg"'); /* 背景画像を指定 */
    background-color: #5d3523;
}

.rice-hero {
    background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url('rice-bg.jpg'); /* 背景画像を指定 */
    background-color: #8c6239;
}

.hero h1 {
    font-family: serif;
    font-size: 3rem;
    letter-spacing: 0.1em;
}

/* セクションタイトル */
.section-title {
    text-align: center;
    font-family: serif;
    margin-bottom: 20px;
    font-size: 3rem;
}

.section-desc {
    text-align: center;
    margin-bottom: 40px;
    font-size: 1.6rem;
}

/* 特徴セクション */
.features {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.image-box {
/*    margin: 20px;*/
    border-radius: 4px;
}

/* 口コミセクション */
.reviews {
    background-image: url('pattern-bg.jpg'); /* 茶色系のテクスチャ画像 */
    background-color: #4a2c1d;
    color: #fff;
}

.review-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
}

.review-card {
    background: #fff;
    color: #333;
    padding: 20px;
    border-radius: 5px;
    font-size: 2rem;
    min-height: 100px;
}

/* アレンジセクション */
.image-row {
    display: flex;          /* 子要素を整列させる */
    justify-content: center; /* 横方向の中央に配置 */
    width: 100%;
    margin-top: 20px;
}
/* 画像を囲んでいるボックスの幅を制御 */
.image-row .image-box {
    width: 100%;
    max-width: 600px; /* ここで最大幅を600pxに制限 */
    margin: 0 auto;   /* 念のための中央寄せ */
    min-height: auto; /* 高さを画像に合わせる */
    background-color: transparent; /* プレースホルダーの背景色を消す */
}
/* 中の画像がはみ出さないように設定 */
.image-row .image-box img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px; /* デザインに合わせて少し角を丸くする場合 */
}


/* --- ギャラリーセクション全体 --- */
.gallery-section {
    background-color: #7b3e19; /* スクリーンショットの濃い茶色 */
    padding: 60px 20px;
}

.gallery-container {
    display: grid;
    gap: 15px;
    /* スマホ版の並び順エリア定義（上から 1, 4, 2, 3 の順） */
    grid-template-areas:
        "area1"
        "area4"
        "area2"
        "area3";
    grid-template-columns: 1fr;
}

/* 各アイテムのエリア割り当て */
.item-1 { grid-area: area1; }
.item-2 { grid-area: area2; }
.item-3 { grid-area: area3; }
.item-4 { grid-area: area4; }

/* 画像の基本スタイル */
.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 枠に合わせて切り抜き */
    display: block;
}

/* スマホ版での高さ調整（スクリーンショットの印象に合わせる） */
.item-1 { height: 250px; }
.item-4 { height: 120px; }
.item-2 { height: 200px; }
.item-3 { height: 350px; }

/* --- PC版レイアウト (768px以上) --- */
@media (min-width: 768px) {
    .gallery-container {
        max-width: 1000px;
        margin: 0 auto;
        /* PC版のエリア定義（左に 2・4 のスタック、右に 3） */
        grid-template-areas:
            "area1 area1"
            "area2 area3"
            "area4 area3";
        grid-template-columns: 1fr 1.5fr; /* 左より右の男性画像を広く */
        grid-template-rows: auto 200px 100px; /* 各段の高さ */
    }

    /* PC版での高さ上書き */
    .item-1 { height: 400px; }
    .item-2 { height: 100%; }
    .item-4 { height: 100%; }
    .item-3 { height: 100%; }
}



/* 炊き込みご飯セクション */
.rice-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}

.rice-item {
    text-align: center;
}

.circle-image {
    width: 250px;
    height: 250px;
    background-color: #eee;
    border-radius: 50%;
    margin: 0 auto 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* --- PC用レイアウト (768px以上) --- */
@media (min-width: 768px) {
    .hero {
        height: 80vh;
    }

    .hero h1 {
        font-size: 5rem;
    }

    .features {
        flex-direction: row;
    }

    .feature-item {
        flex: 1;
    }

    .review-grid {
        grid-template-columns: 1fr 1fr;
    }

    .image-sub-grid {
        grid-template-columns: 1fr 2fr; /* PC版のデザインに合わせる */
    }

    .rice-grid {
        grid-template-columns: 1fr 1fr 1fr;
    }
    .hero {
        height: 80vh;
    }
}

/* ヒーローセクションの基盤 */
.hero {
    position: relative; /* 子要素（動画）を絶対配置するための基準 */
    height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    overflow: hidden; /* 動画がはみ出さないようにする */
}

/* 動画のスタイル */
.hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 画面いっぱいに広げる（画像でいう cover と同じ） */
    z-index: 1; /* 重なり順：一番下 */
}

/* 動画の上の暗幕（テキストを読みやすくする場合） */
.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3); /* 0.3の部分で暗さを調整できます */
    z-index: 2; /* 重なり順：動画の上、テキストの下 */
}

/* テキストコンテンツ */
.hero-content {
    position: relative; /* z-indexを有効にするため */
    z-index: 3; /* 重なり順：一番上 */
}
/* 口コミセクション全体の背景（茶色） */
.reviews {
    background-color: #63341a; /* 画像に近い濃い茶色 */
    padding: 80px 0;
}

/* グリッドレイアウト */
.review-grid {
    display: grid;
    grid-template-columns: 1fr; /* スマホは1列 */
    gap: 20px;
}

/* レビューカード本体 */
.review-card {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
}

/* ヘッダー：アイコン、名前、日付 */
.card-header {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    position: relative;
}

/* アバターアイコン */
.avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 12px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 70%;
}

/* アイコンの色バリエーション */
.icon-green  { background-color: #72a025; }
.icon-teal   { background-color: #31b39a; }
.icon-brown  { background-color: #af6a40; }
.icon-orange { background-color: #e58d2c; }
.icon-purple { background-color: #7f4f91; }

.user-info {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.user-name {
    font-weight: bold;
    font-size: 2rem;
}

.post-date {
    font-size: 1.3rem;
    color: #999;
    position: absolute;
    top: 0;
    right: 0;
}

/* 本文 */
.card-body {
    margin-bottom: 20px;
    font-size: 1.6rem;
    line-height: 1.5;
    color: #222;
}

/* フッター：SNSアイコン風の飾り */
.card-footer {
    display: flex;
    gap: 50px;
    border-top: 1px solid #eee;
    padding-top: 15px;
}

/* フッターのアイコンエリア */
.card-footer {
    display: flex;
    justify-content: space-around; /* アイコンを均等に配置 */
    border-top: 1px solid #eee;
    padding-top: 15px;
    margin-top: auto; /* カードの下部に固定 */
}

/* アイコン自体のスタイル */
.card-footer i {
    font-size: 18px;    /* アイコンのサイズ */
    color: #aaa;        /* アイコンの色（薄いグレー） */
    cursor: pointer;    /* カーソルを指の形に */
    transition: 0.2s;   /* ホバー時の色の変化を滑らかに */
}

/* ホバー（マウスを乗せた時）の演出 */
.card-footer i.fa-comment:hover { color: #1d9bf0; } /* 青色 */
.card-footer i.fa-retweet:hover { color: #00ba7c; } /* 緑色 */
.card-footer i.fa-heart:hover   { color: #f91880; } /* ピンク色 */

/* PCサイズ (768px以上) */
@media (min-width: 768px) {
    .review-grid {
        grid-template-columns: 1fr 1fr; /* PCは2列 */
    }
}