/* 基本設定 */
:root {
    --primary-color: #5d4037; /* ケーキをイメージしたブラウン */
    --accent-color: #d2a679;  /* ゴールド系ベージュ */
    --price-color: #e44d26;
    --text-color: #333;
    --bg-light: #fdf5f2;
    --bg-gray : #f5f5f5;
    --bg-gray-light : #fcfcfc;
    --category-color: #e0b84f;
    --line-color: #e3adb7;
    --font-family: "Hiragino Sans", "Meiryo", sans-serif;
}

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

body {
    font-family: var(--font-family);
    color: var(--text-color);
    line-height: 1.6;
}

/* メインビジュアル */
.hero {
    position: relative;
    height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-image: url('../img/hero.webp'),linear-gradient(to bottom, #ffffff, var(--bg-gray));
    background-size: auto 100%;
    background-position: center;
    background-repeat: no-repeat;
}

.hero h1 {
    font-size: 3.5rem;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
    color: #ffffff;
}


/* ページ説明文 */
.explanation
 {
    background: #fff; /* 実際は画像を表示 */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-size: cover;
    background-position: center;
    color: var(--text-color);
    
}

.explanation h2 {
    font-size: 1.8rem;
    padding: 60px 20px;
}

.explanation p {
    background: linear-gradient(transparent 80% , var(--line-color) 80%);
    margin-bottom: 5px;
}

.category-nav {
    padding: 10px 0px 1px 0px;
    margin-top : 10px ;
    /* background: var(--bg-gray); */
    background: linear-gradient(to bottom, var(--bg-gray) 0%, var(--bg-gray-light) 100%);
    
}

/* 2列のグリッド設定 */
.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 10px 20px; /* 縦の隙間を広めにとる */
}

/* 個別アイテムの調整 */
.grid-item {
    display: flex;
    flex-direction: column;
    align-items: center; /* 中央寄せ */
    margin: 10px;
}

/* ボタンの上の説明文 */
.btn-desc {
    font-size: 0.8rem;
    color: var(--primary-color);
    margin-bottom: 8px; /* ボタンとの距離 */
    font-weight: bold;
    letter-spacing: 0.05em;
}

/* ボタン本体 */
.btn {
    width: 100%; /* グリッド幅いっぱいに広げる */
    max-width: 330px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 10px;
    background-color: #ffffff;
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 4px;
    transition: all 0.3s ease;
}

/* ホバー時の挙動 */
.btn:hover {
    background-color: var(--primary-color);
}

.btn:hover span {
    color: #ffffff;
}


.button-nav {
    margin: 30px auto;
}

.button-grid {
    display: grid;
    /* 2列固定 */
    grid-template-columns: repeat(2, 1fr); 
    /* 3行になるように隙間を調整 */
    gap: 15px; 
}

/*
.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 10px;
    background-color: #fff;
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
    text-decoration: none;
    font-weight: bold;
    border-radius: 4px;
    transition: all 0.3s ease;
    text-align: center;
}
*/

/* ヘッダー */
.header {
    background: #fff;
    padding: 20px 0;
    border-bottom: 2px solid var(--primary-color);
    position: sticky;
    top: 0;
    z-index: 100;
}

.nav ul {
    display: flex;
    justify-content: center;
    list-style: none;
    gap: 20px;
}

.nav a {
    text-decoration: none;
    color: var(--text-color);
    font-weight: bold;
    font-size: 0.9rem;
}


.gap {
height: 6vh;
}


/* product-section 共通設定 */



.product-section-header-text {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 520px;
    height: 175px;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.95);
    color: var(--primary-color);
    padding: 10px 10px;
    text-align: center;
    border-radius: 12px;
    box-shadow: 0 6px 6px rgba(0,0,0,0.3);
}

.product-section-header-text h2{
    font-size: 2rem;
    padding: 0px 0px;
    color: var(--category-color);
    margin-top: 4px;
    font-weight: 800;
    letter-spacing: 0.03em;
}

/* フリーカットケーキ　商品セクション見出し */
.product-section-header-fccake {
    position: relative;
    height: 219px;
    background-image: linear-gradient(rgba(0,0,0,0.0), rgba(0,0,0,0.0)), url('../img/head01.webp');
    background-position: center;
    background-size: auto 100%;
    background-repeat: no-repeat;
}


/* カット不要ケーキ　商品セクション見出し */
.product-section-header-nccake {
    position: relative;
    height: 219px;
    background-image: linear-gradient(rgba(0,0,0,0.0), rgba(0,0,0,0.0)), url('../img/head02.webp');
    background-position: center;
    background-size: auto 100%;
    background-repeat: no-repeat;
}


/* フリーカットロールケーキ　商品セクション見出し */
.product-section-header-fcrcake {
    position: relative;
    height: 219px;
    background-image: linear-gradient(rgba(0,0,0,0.0), rgba(0,0,0,0.0)), url('../img/head03.webp');
    background-position: center;
    background-size: auto 100%;
    background-repeat: no-repeat;
}


/* カット不要ロールケーキ　商品セクション見出し */
.product-section-header-ncrcake {
    position: relative;
    height: 219px;
    background-image: linear-gradient(rgba(0,0,0,0.0), rgba(0,0,0,0.0)), url('../img/head04.webp');
    background-position: center;
    background-size: auto 100%;
    background-repeat: no-repeat;
}

/* 大容量アイス　商品セクション見出し */
.product-section-header-lrgice {
    position: relative;
    height: 219px;
    background-image: linear-gradient(rgba(0,0,0,0.0), rgba(0,0,0,0.0)), url('../img/head05.webp');
    background-position: center;
    background-size: auto 100%;
    background-repeat: no-repeat;
}


/* 小分けアイス　商品セクション見出し */
.product-section-header-smlice {
    position: relative;
    height: 219px;
    background-image: linear-gradient(rgba(0,0,0,0.0), rgba(0,0,0,0.0)), url('../img/head06.webp');
    background-position: center;
    background-size: auto 100%;
    background-repeat: no-repeat;
}


/* シュークリーム、ワッフル　商品セクション見出し */
.product-section-header-crpuff {
    position: relative;
    height: 219px;
    background-image: linear-gradient(rgba(0,0,0,0.0), rgba(0,0,0,0.0)), url('../img/head07.webp');
    background-position: center;
    background-size: auto 100%;
    background-repeat: no-repeat;
}

/* 和風デザート　商品セクション見出し */
.product-section-header-jdessert {
    position: relative;
    height: 219px;
    background-image: linear-gradient(rgba(0,0,0,0.0), rgba(0,0,0,0.0)), url('../img/head08.webp');
    background-position: center;
    background-size: auto 100%;
    background-repeat: no-repeat;
}

/* トッピング、ソース　商品セクション見出し */
.product-section-header-topping {
    position: relative;
    height: 219px;
    background-image: linear-gradient(rgba(0,0,0,0.0), rgba(0,0,0,0.0)), url('../img/head09.webp');
    background-position: center;
    background-size: auto 100%;
    background-repeat: no-repeat;
}

/* お役立ち情報　商品セクション見出し */
.product-section-header-info {
    position: relative;
    height: 219px;
    background-image: linear-gradient(rgba(0,0,0,0.0), rgba(0,0,0,0.0)), url('../img/head10.webp');
    background-position: center;
    background-size: auto 100%;
    background-repeat: no-repeat;
}


/* 商品セクション */
.product-section {
    /* padding: 20px 20px 50px; */
    margin-bottom: 100px;
    background-color: var(--bg-gray);
    border-radius: 0px 0px 30px 30px;

}

.bg-light {
    background-color: var(--bg-light);
}

.section-title {
    text-align: center;
    padding:45px 0;
    font-size: 1.8rem;
    margin-bottom: 20px;
    color: var(--bg-light);
}

/* レスポンシブグリッド */
.product-grid {
    margin-top:40px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 15px;
}

.product-card {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
    transition: transform 0.3s;
    display: flex;
    flex-direction: column;
    height: 100%;
    box-shadow: 1px 1px 5px rgba(0,0,0,0.1);
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 5px 5px 10px rgba(0,0,0,0.2);
}


.product-image {
    /* height: 160px; */
    background: #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    color: #999;
}

.product-image img{
    margin-top: 4px;
    height: 164px;
    width: 164px;
    object-fit: contain;
    object-position: center;
    border-radius: 4px;
}

.product-info {
    padding: 10px;
    flex-grow: 1; 
}

.product-info h3 {
    font-size: 0.8rem;
    margin-bottom: 8px;
}

.product-price {
    margin-top: auto;
    padding: 0 10px 10px;
    text-align: center;
    font-size: 1.4rem;
    font-weight: bold;
}

.product-price p{
    color: var(--price-color);
}

.btn-box {
    grid-column: 1 / -1; /* グリッドの全列を結合 */
    display: flex;       /* フレックスボックス化 */
    justify-content: center; /* 横方向の中央寄せ */
    margin-top: 40px;    /* 商品との間隔 */
    margin-bottom: 30px;    
    width: 100%;         /* 幅をいっぱいにする */
}

/* ラベル自体の設定（再掲・微調整） */
.more-btn {
    display: inline-block;
    width: 200px;
    height: 50px;
    padding: 12px;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    background-color: var(--primary-color);
    border-radius: 5px;
    cursor: pointer;
    text-align: center;
    vertical-align: bottom;
    transition: opacity 0.3s;
}

.more-btn:hover {
    opacity: 0.6;
}
	
/* フッター */
.footer {
    background: var(--primary-color);
    color: #fff;
    text-align: center;
    padding: 40px 0;
    margin-top: 60px;
}


.container {
    max-width: 1196px;
    margin: 0 auto 50px auto;
    padding: 10px 20px;
    justify-content: center;
}

/* 5番目以降のカードを初期状態で非表示にする */
.product-card:nth-child(n+7) {
    display: none !important;
}

/* もっとみる　処理　01 */
#more-check01:checked ~ .product-grid .product-card:nth-child(n+7) {
    display: flex !important;
}
/* チェックが入ったら「もっとみる」ボタンを消す 01*/
#more-check01:checked ~ .product-grid .btn-box {
    display: none !important;
}

/* もっとみる　処理　02 */
#more-check02:checked ~ .product-grid .product-card:nth-child(n+7) {
    display: flex !important;
}
/* チェックが入ったら「もっとみる」ボタンを消す 02*/
#more-check02:checked ~ .product-grid .btn-box {
    display: none !important;
}

/* もっとみる　処理　03 */
#more-check03:checked ~ .product-grid .product-card:nth-child(n+7) {
    display: flex !important;
}
/* チェックが入ったら「もっとみる」ボタンを消す 03*/
#more-check03:checked ~ .product-grid .btn-box {
    display: none !important;
}

/* もっとみる　処理　04 */
#more-check04:checked ~ .product-grid .product-card:nth-child(n+7) {
    display: flex !important;
}
/* チェックが入ったら「もっとみる」ボタンを消す 04*/
#more-check04:checked ~ .product-grid .btn-box {
    display: none !important;
}

/* もっとみる　処理　05 */
#more-check05:checked ~ .product-grid .product-card:nth-child(n+7) {
    display: flex !important;
}
/* チェックが入ったら「もっとみる」ボタンを消す 05*/
#more-check05:checked ~ .product-grid .btn-box {
    display: none !important;
}

/* もっとみる　処理　06 */
#more-check06:checked ~ .product-grid .product-card:nth-child(n+7) {
    display: flex !important;
}
/* チェックが入ったら「もっとみる」ボタンを消す 06*/
#more-check06:checked ~ .product-grid .btn-box {
    display: none !important;
}

/* もっとみる　処理　07 */
#more-check07:checked ~ .product-grid .product-card:nth-child(n+7) {
    display: flex !important;
}
/* チェックが入ったら「もっとみる」ボタンを消す 07*/
#more-check07:checked ~ .product-grid .btn-box {
    display: none !important;
}

/* もっとみる　処理　08 */
#more-check08:checked ~ .product-grid .product-card:nth-child(n+7) {
    display: flex !important;
}
/* チェックが入ったら「もっとみる」ボタンを消す 08*/
#more-check08:checked ~ .product-grid .btn-box {
    display: none !important;
}

/* もっとみる　処理　09 */
#more-check09:checked ~ .product-grid .product-card:nth-child(n+7) {
    display: flex !important;
}
/* チェックが入ったら「もっとみる」ボタンを消す 09*/
#more-check09:checked ~ .product-grid .btn-box {
    display: none !important;
}

/* もっとみる　処理　10 */
#more-check10:checked ~ .product-grid .product-card:nth-child(n+7) {
    display: flex !important;
}
/* チェックが入ったら「もっとみる」ボタンを消す 10*/
#more-check10:checked ~ .product-grid .btn-box {
    display: none !important;
}

.toc-title {
    grid-column: 1 / -1;
    letter-spacing: 0.3em;
    text-align: center;
    font-size: 1.6rem;
    color: var(--primary-color);
    margin: 10px 0 10px;
}

.spotlist_back {margin-top: 60px; text-align: center;}
.spotlist_back a {
	font-size: 20px;
	border: solid 2px;
	padding: 15px 80px;
	border-radius: 10px;}

/* メディアクエリ（スマホ用調整） */
@media (max-width: 768px) {
    body {
        font-size: 80%;
    }
    
    .hero {
        background-image: linear-gradient(rgba(0,0,0,0.0), rgba(0,0,0,0.0)), url('../img/hero.webp');
        background-size: cover;
        height: 30vh;
    }
    
    .hero h1 {
        font-size: 2rem;
    }
    
    .explanation h2 {
        font-size: 1.2rem;
    }
    
    
    /* product-section-header-text 共通設定 */
    
    .product-section-header-text {
        width: 320px;
        height: 150px;
        padding: 10px;
    }
    
    /* フリーカットケーキ */
    .product-section-header-fccake h2 {
        font-size: 1.4rem;
        font-weight: 800;
        letter-spacing: 0.1em;
    }
    
    /* カット不要ケーキ */
    .product-section-header-nccake h2 {
        font-size: 1.4rem;
        font-weight: 800;
        letter-spacing: 0.1em;
    }
    
    
    /* フリーカットロールケーキ */
    .product-section-header-fcrcake h2 {
        font-size: 1.4rem;
        font-weight: 800;
        letter-spacing: 0.1em;
    }
    
    
    /* カット不要ロールケーキ */
    .product-section-header-ncrcake h2 {
        font-size: 1.4rem;
        font-weight: 800;
        letter-spacing: 0.1em;
    }
    
    
    /* 大容量アイス */
    .product-section-header-lrgice h2 {
        font-size: 1.4rem;
        font-weight: 800;
        letter-spacing: 0.1em;
    }
    
    
    /* 小分けアイス */
    .product-section-header-smlice h2 {
        font-size: 1.4rem;
        font-weight: 800;
        letter-spacing: 0.1em;
    }
    
    /* シュークリーム、ワッフル */
    .product-section-header-crpuff h2 {
        font-size: 1.4rem;
        font-weight: 800;
        letter-spacing: 0.1em;
    }
    /* 和風デザート */
    .product-section-header-jdessert h2 {
        font-size: 1.4rem;
        font-weight: 800;
        letter-spacing: 0.1em;
    }
    
    /* トッピング、ソース */
    .product-section-header-topping h2 {
        font-size: 1.4rem;
        font-weight: 800;
        letter-spacing: 0.1em;
    }
    
    /* デザートお役立ち情報 */
    .product-section-header-info h2 {
        font-size: 1.4rem;
        font-weight: 800;
        letter-spacing: 0.1em;
    }
    
    .product-grid {
    margin-top:40px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px;
    }
    
    .product-grid {
    gap: 8px;
}
}