/* ==========================================================================
   共通設定・変数定義
   ========================================================================== */
:root {
    --primary-color: #8A7B66; /* 濃いベージュ（メインカラー） */
    --accent-color: #F1EDE4;  /* 薄いベージュ（背景・アクセント用） */
    --text-color: #333333;
    --sub-text-color: #666666;
}

#contentsArea { clear: both; overflow-x: hidden; }
.wrap, .wrap * { box-sizing: border-box; }
.wrap { 
    font-family: 'Hiragino Kaku Gothic ProN', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, sans-serif; 
    font-size: 16px; 
    line-height: 1.6; 
    color: var(--text-color); 
}
.wrap img { max-width: 100%; height: auto; vertical-align: bottom; }
.wrap .contents-wrap { margin: 0 auto; max-width: 1280px; }

/* PCで非表示にするクラス（スマホ用改行） */
.wrap .sp-only { display: none; }

/* ==========================================================================
   タイトル・リンクエリア
   ========================================================================== */
.page-header { text-align: center; padding: 3em 1em 2em; margin-bottom: 0em; }
.page-header__ttl { font-size: 2.4em; margin: 0; font-weight: bold; color: #4a4a4a; padding-left: 0.1em; }
.page-header__sub { 
    font-size: 1.1em; 
    margin-top: 15px; 
    color: var(--sub-text-color); 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    gap: 8px; 
}
.page-header__link { 
    color: var(--primary-color); 
    text-decoration: none; 
    font-weight: bold; 
    border-bottom: 1px solid var(--primary-color); 
    display: inline-flex; 
    align-items: center; 
    gap: 6px; 
}
.page-header__link svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; transform: translateY(1px); }

/* 綿花イラスト用スタイル */
.page-header__img { margin-top: 10px; }
.page-header__img img { 
    width: 80px; /* ここを好きな大きさに（100000pxだと画面が壊れるので注意） */
    max-width: none !important; /* ★ここが重要！制限を解除します */
    height: auto; 
    opacity: 0.7; 
}

/* ==========================================================================
   ナビゲーション
   ========================================================================== */
.wrap .nav-anchor { max-width: 1000px; margin: 0 auto 2.5em; width: 95%; }
.wrap .nav-anchor__list { display: flex; flex-wrap: wrap; gap: 10px 15px; list-style: none; justify-content: center; padding: 0; }
.wrap .nav-anchor__item { flex: 0 0 calc((100% - 30px) / 3); max-width: 300px; }
.wrap .nav-anchor__link { 
    display: block; 
    background: #f9f9f9; 
    text-align: center; 
    padding: 12px 0; 
    text-decoration: none; 
    color: #192215; 
    font-weight: bold; 
    border-bottom: 6px solid var(--accent-color); 
    font-size: 1em; 
    transition: opacity 0.3s;
}
.wrap .nav-anchor__link:hover { opacity: 0.8; }

/* ==========================================================================
   セクションタイトル
   ========================================================================== */
.wrap .sec-ttl { font-weight: bold; font-size: 1.5em; text-align: center; margin-bottom: 1.2em; }
.wrap .sec-ttl > span { position: relative; display: inline-block; padding: 0 .25em; z-index: 1; }
.wrap .sec-ttl > span::before { 
    content: ''; 
    display: block; 
    width: 100%; 
    height: 0.5em; 
    background-color: var(--accent-color); 
    position: absolute; 
    left: 0; 
    top: 55%; 
    transform: translateY(-50%); 
    z-index: -1; 
}

/* ==========================================================================
   商品リスト
   ========================================================================== */
.wrap .items-list { display: flex; flex-wrap: wrap; margin: 0 auto; max-width: 880px; width: 95%; gap: 20px 1.25em; list-style: none; padding: 0; justify-content: center; }
.wrap .items-list__item { flex: 0 0 calc((100% - 1.25em * 3) / 4); background: #fff; min-width: 0; }
.wrap .items-list__item a { display: block; text-decoration: none; color: var(--text-color); height: 100%; }
.wrap .items-list__item-details { padding: 8px 4px; text-align: left; }
.wrap .items-list__item-name { font-size: 12px; line-height: 1.4; height: 4.2em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; margin-bottom: 4px; }
.wrap .brand-name { font-size: 10px; color: #888; display: block; line-height: 1.2; margin-bottom: 2px; }
.wrap .items-list__item-price { font-weight: bold; font-size: 14px; color: var(--text-color); }
.wrap .items-list__item-price span { font-size: 10px; font-weight: normal; }
.wrap .review { display: flex; align-items: center; gap: 4px; font-size: 10px; color: #888; margin-top: 4px; }

/* ==========================================================================
   ボタン設定
   ========================================================================== */
.wrap .link-btn1 { text-align: center; }
.wrap .link-btn1 a { 
    text-decoration: none; 
    border-radius: 4em; 
    border: 1px solid var(--primary-color); 
    margin: 0.5em auto; 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    background: #fff; 
    color: var(--primary-color); 
    font-weight: bold; 
    width: 100%; 
    max-width: 280px; 
    height: 3.5em; 
    position: relative; 
    font-size: 0.95em; 
    padding: 0 2em; 
}
.wrap .link-btn1 a::after { 
    content: ''; 
    position: absolute; 
    right: 1.5em; 
    top: 50%; 
    width: 0.45em; 
    height: 0.45em; 
    border-right: 1px solid var(--primary-color); 
    border-bottom: 1px solid var(--primary-color); 
    transform: translateY(-50%) rotate(-45deg); 
}

.wrap .sec-block1 { background: #ffffff; padding: 1.5em 0 2em; }

/* ==========================================================================
   SPレスポンシブ (767px以下)
   ========================================================================== */
@media only screen and (max-width: 767px) {
    .wrap { font-size: 3.2vw; }
    .page-header__ttl { font-size: 1.8em; }

    /* スマホで改行を有効化 */
    .wrap .sp-only { display: inline; }

    /* ナビゲーション：3カラム横並び化 */
    .wrap .nav-anchor__list { gap: 10px 8px; }
    .wrap .nav-anchor__item { 
        flex: 0 0 calc((100% - 16px) / 3); 
        max-width: none; 
    }
    .wrap .nav-anchor__link { 
        font-size: 0.9em; 
        padding: 10px 4px; 
        border-bottom-width: 4px; 
        min-height: 4.2em; /* 2行になっても高さを揃える */
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1.3;
    }

    /* 商品リストSP */
    .wrap .items-list { max-width: none; gap: 15px 8px; }
    .wrap .items-list__item { flex: 0 0 calc((100% - 8px) / 2); }
    
    .wrap .sec-ttl { font-size: 1.25em; }
    .wrap .link-btn1 a { width: 90%; }
}