/* ==========================================================================
   リセット（#valentin2026 内のみ適用）
   ========================================================================== */

/* 基本リセット */

#valentin2026 {
    line-height: 1.6;
    color: var(--color-text-primary);
    font-size: 16px;
}

/* 見出しのリセット */
#valentin2026 h1,
#valentin2026 h2,
#valentin2026 h3,
#valentin2026 h4,
#valentin2026 h5,
#valentin2026 h6 {
    margin: 0;
    padding: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

/* テキスト要素のリセット */
#valentin2026 p,
#valentin2026 span,
#valentin2026 a,
#valentin2026 strong,
#valentin2026 em,
#valentin2026 small,
#valentin2026 mark,
#valentin2026 del,
#valentin2026 ins,
#valentin2026 sub,
#valentin2026 sup {
    margin: 0;
    padding: 0;
}

/* リンクのリセット */
#valentin2026 a {
    color: inherit;
    text-decoration: none;
    background-color: transparent;
}

#valentin2026 a:hover,
#valentin2026 a:focus {
    outline: 0;
}

/* リストのリセット */
#valentin2026 ul,
#valentin2026 ol,
#valentin2026 li {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* 画像のリセット */
#valentin2026 img {
    max-width: 100%;
    height: auto;
    display: block;
    border: 0;
    vertical-align: middle;
}

/* フォーム要素のリセット */
#valentin2026 button,
#valentin2026 input,
#valentin2026 select,
#valentin2026 textarea {
    margin: 0;
    padding: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    background: none;
    border: none;
    outline: none;
}

#valentin2026 button {
    cursor: pointer;
    border: none;
    background: transparent;
}

#valentin2026 button:disabled {
    cursor: not-allowed;
}

#valentin2026 input:focus,
#valentin2026 select:focus,
#valentin2026 textarea:focus {
    outline: none;
}

/* テーブルのリセット */
#valentin2026 table {
    border-collapse: collapse;
    border-spacing: 0;
}

#valentin2026 th,
#valentin2026 td {
    padding: 0;
    text-align: left;
}

/* その他の要素のリセット */
#valentin2026 hr {
    margin: 0;
    padding: 0;
    border: 0;
    border-top: 1px solid var(--color-border-lighter);
}

#valentin2026 blockquote,
#valentin2026 q {
    margin: 0;
    padding: 0;
    quotes: none;
}

#valentin2026 blockquote:before,
#valentin2026 blockquote:after,
#valentin2026 q:before,
#valentin2026 q:after {
    content: '';
    content: none;
}

/* HTML5要素のリセット */
#valentin2026 article,
#valentin2026 aside,
#valentin2026 details,
#valentin2026 figcaption,
#valentin2026 figure,
#valentin2026 footer,
#valentin2026 header,
#valentin2026 hgroup,
#valentin2026 menu,
#valentin2026 nav,
#valentin2026 section {
    display: block;
}

/* dl, dt, dd のリセット */
#valentin2026 dl,
#valentin2026 dt,
#valentin2026 dd {
    margin: 0;
    padding: 0;
}

/* フォーカス時のアウトライン設定 */
#valentin2026 :focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
}

/* ==========================================================================
   変数指定
   ========================================================================== */
:root {
    /* フォントサイズ */
    --heading-XXL: 32px;
    --heading-XL: 24px;
    --heading-L: 20px;
    --heading-M: 18px;
    --heading-S: 16px;
    --text-L: 16px;
    --text-M: 14px;
    --text-S: 12px;
    --text-XS: 10px;

    /* 余白（統一） */
    --spacing-XXL: 80px;
    --spacing-XL: 48px;
    --spacing-L: 32px;
    --spacing-M: 24px;
    --spacing-S: 20px;
    --spacing-XS: 16px;
    --spacing-XXS: 12px;
    --spacing-XXXS: 8px;

    /* カラー変数 */
    --color-text-primary: #333;
    --color-text-secondary: #666;
    --color-text-error: #c00;
    --color-bg-white: #fff;
    --color-bg-light: #f9f9f9;
    --color-border-dark: #333;
    --color-border-medium: #c5c4c5;
    --color-border-light: #ddd;
    --color-border-lighter: #e0e0e0;
    --color-focus: #4A90E2;
}

@media (max-width: 768px) {
    :root {
        /* フォントサイズ（SP） */
        --heading-XXL: 24px;
        --heading-XL: 20px;
        --heading-L: 18px;
        --heading-M: 16px;
        --heading-S: 14px;
        --text-L: 16px;
        --text-M: 14px;
        --text-S: 10px;
        --text-XS: 8px;

        /* 余白（SP） */
        --spacing-XXL: 64px;
        --spacing-XL: 40px;
        --spacing-L: 24px;
        --spacing-M: 20px;
        --spacing-S: 16px;
        --spacing-XS: 12px;
        --spacing-XXS: 8px;
        --spacing-XXXS: 4px;
    }
}

    .pc-only{
        display:none;
    }
    .sp-only{
        display:block;
    }

/* ============================================
   Hero Section
   ============================================ */
.select-hero {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.select-hero-image {
    width: 100%;
    height: auto;
}

.hero-swiper {
    width: 100%;
    height: 100%;
}

.hero-swiper .swiper-slide {
    position: relative;
    width: 100%;
}

.hero-swiper picture {
    display: block;
    width: 100%;
}

.hero-swiper img {
    width: 100%;
    height: auto;
    display: block;
}

/* ============================================
   Introduction Section
   ============================================ */
.intro-section {
    text-align: center;
    padding: var(--spacing-S) 0 var(--spacing-XL);
    background-color: var(--color-bg-white);
}

.intro-notice {
    font-size: var(--heading-S);
    font-weight: 600;
    color: #c41e3a;
    margin-bottom: var(--spacing-XS);
    letter-spacing: 0.02em;
}

.intro-text {
    font-size: var(--text-M);
    line-height: 1.9;
    color: var(--color-text-primary);
}

.intro-text p {
    margin: 0;
}

/* ============================================
   Section Divider
   ============================================ */
.section-divider {
    border: none;
    height: 1px;
    background-color: #e5e5e5;
    margin: 0;
}

/* ============================================
   Product Section
   ============================================ */
.product-section {
    padding: var(--spacing-XL) var(--spacing-S);
    background-color: var(--color-bg-white);
}

.product-container {
    max-width: 100%;
    margin: 0 auto;
}

.product-header {
    text-align: center;
    margin-bottom:0;
}

.product-category {
    font-size: var(--text-XS);
    color: #666;
    margin-bottom: 14px !important;
    text-transform: uppercase;
    border: 1px solid #CCC;
    padding: 6px 8px !important;
    display: inline-block;
}

.product-name {
    font-family: 'Red Hat Display', serif;
    font-size: var(--heading-XXL) !important;
    font-weight: 500 !important;
    color: var(--color-text-primary);
    margin-top: var(--spacing-XXXS);
    letter-spacing: 0.08em;
    margin: 0 !important;
    line-height: 120% !important;
}

.product-image-wrapper {
    margin:0;
    text-align: center;
}

.product-image {
    width: 100%;
    max-width: 320px;
    height: auto;
    border-radius: 0;
}

.product-description {
    text-align: center;
    margin: var(--spacing-XS) 0 !important;
    font-size:var(--text-M);
}

.product-description p {
    font-size: var(--text-M);
    line-height: 1.4;
    color: var(--color-text-primary);
}

.product-price {
    text-align: center;
    font-size: var(--text-L);
    color: var(--color-text-primary);
}

.price-tax {
    font-size: var(--text-S);
    font-weight: 400;
    color: var(--color-text-secondary);
    margin-left: 4px;
}

.product-review {}

.review-title {
    font-size: var(--text-S);
    font-weight: 600;
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-XXXS);
}

.review-text {
    font-size: var(--text-S);
    line-height: 1.8;
    color: var(--color-text-secondary);
}

.product-actions {
    margin-top: var(--spacing-L);
    text-align: center;
}

.btn-cart {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    background-color: #4e4b4a !important;
    color: #fff !important;
    padding: 14px 20px !important;
    font-size: var(--text-M);
    font-weight: 500;
    border: none;
    cursor: pointer;
    margin-bottom: 16px !important;
    border-radius: 200px;
}

.btn-cart:hover {
    background-color: #000;
}

.btn-cart:active {
    transform: scale(0.98);
}

.btn-link {
    display: block;
    text-align: center;
    font-size: var(--text-M);
    color: #222;
    text-decoration: underline !important;
}

.btn-link:hover {
    color: var(--color-text-primary);
}

/* ============================================
   Story Section (ルクの実)
   ============================================ */
.story-section {
    padding: var(--spacing-XL) var(--spacing-S);
    background-color: #fafafa;
}

.story-container {
    max-width: 100%;
    margin: 0 auto;
    text-align: center;
}

.story-title {
    font-size: var(--heading-L);
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-L);
    line-height: 1.6;
}

.story-image-wrapper {
    margin: var(--spacing-L) 0;
}

.story-image {
    width: 100%;
    max-width: 360px;
    height: auto;
    border-radius: 0;
}

.story-text {
    margin-top: var(--spacing-L);
}

.story-text p {
    font-size: var(--text-M);
    line-height: 1.9;
    color: var(--color-text-primary);
}

/* ============================================
   Campaign Banner
   ============================================ */
.campaign-banner {
    width: 100%;
    background-color:#fafafa;
    padding-bottom:64px;
}

.banner-image-wrapper {
    max-width: 800px;
    margin:0 auto;
}

.banner-image-wrapper picture {
    display: block;
    width: 100%;
}

.banner-image {
    width: 100%;
    height: auto;
    display: block;
}

/* ============================================
   FAQ Section
   ============================================ */
.faq-section {
    padding:var(--spacing-S);
    background-color: #fafafa;
}

.container-inner {
    max-width: 100%;
    margin: 0 auto;
}

.section-title {
    font-size: var(--heading-XL);
    font-weight: 700;
    color: var(--color-text-primary);
    text-align: center;
    margin-bottom: var(--spacing-XL);
}

.faq-list {
    overflow: hidden;
}

.faq-item {
    border-bottom: 1px solid #e5e5e5;
    padding:20px 0;
}

.faq-item:last-child {
    border-bottom: none;
}

.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: var(--spacing-S) var(--spacing-XS);
    background-color: var(--color-bg-white);
    border: none;
    text-align: left;
    transition: background-color 0.3s ease;
}

.faq-question:hover {
    background-color: #fafafa;
}

.faq-question-text {
    font-size: var(--text-M);
    color: var(--color-text-primary);
    line-height: 1.6;
    flex: 1;
    padding-right: var(--spacing-XS);
}

.faq-icon {
    font-size: var(--heading-XL);
    font-weight: 300;
    color: #999;
    transition: transform 0.3s ease, color 0.3s ease;
    flex-shrink: 0;
}

.faq-item.active .faq-icon {
    transform: rotate(45deg);
    color: var(--color-text-primary);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

.faq-item.active .faq-answer {
    max-height: 300px;
}



.faq-answer p {
    font-size: var(--text-S);
    line-height: 1.8;
    color: var(--color-text-secondary);
    margin: 0;
}

/* ============================================
   PC Responsive Styles (769px and above)
   ============================================ */
@media screen and (min-width: 769px) {
    
    .pc-only{
        display:block;
    }
    .sp-only{
        display:none;
    }

    /* Introduction Section */
    .intro-section {
        padding: 0 var(--spacing-XL) var(--spacing-XL);
    }

    .intro-notice {
        font-size: 17px;
        margin-bottom: var(--spacing-S);
    }

    .intro-text {
        font-size: var(--text-L);
        max-width: 800px;
        margin: 0 auto;
    }

    /* Product Section */
    .product-section {
        padding: 60px var(--spacing-XL);
    }

    .product-container {
        max-width: 1000px;
    }

    .product-category {
        font-size: var(--text-S);
        padding: var(--spacing-XXXS) var(--spacing-S);
    }

    .product-name {
        font-size: 28px;
        margin-top: var(--spacing-XXS);
    }

    .product-image-wrapper {
        margin:0;
    }

    .product-image {
        max-width: 400px;
    }

    .product-description {
        text-align: left;
        margin:var(--spacing-XXS) 0 !important;
    }

    .product-description p {
        font-size: var(--heading-S);
    }

    .product-price {
        text-align: left;
        font-size: 18px;
        margin: var(--spacing-L) 0;
    }

    .price-tax {
        font-size: var(--text-M);
    }

    .product-review {
        margin: var(--spacing-M) 0;
    }

    .review-title {
        font-size: var(--text-M);
        margin-bottom: 6px !important;
    }

    .review-text {
        font-size: var(--text-M);
    }

    .product-actions {
        margin-top: 0;
    }

    .btn-cart {
        max-width: 400px;
        padding: 18px var(--spacing-L);
        font-size: var(--text-L);
        margin-bottom: var(--spacing-S);
    }

    .btn-cart:hover {
        background-color: #000;
    }

    .btn-link {
        text-align: left;
        font-size: var(--text-M);
    }

    /* Story Section */
    .story-section {
        padding:48px 0;
    }

    .story-container {
        max-width: 800px;
    }

    .story-title {
        font-size: 24px !important;
        margin-bottom: var(--spacing-XL);
    }

    .story-image-wrapper {
        margin: var(--spacing-XL) 0;
    }

    .story-image {
        max-width: 480px;
    }

    .story-text {
        margin-top: var(--spacing-XL);
    }

    .story-text p {
        font-size: var(--heading-S);
        margin: 0 auto;
    }

    /* FAQ Section */
    .faq-section {
        padding: var(--spacing-XXL) var(--spacing-XL);
    }

    .container-inner {
        max-width: 800px;
    }

    .section-title {
        font-size: 24px !important;
        margin-bottom: var(--spacing-XL) !important;
    }

    .faq-question {
        padding: var(--spacing-M) 28px;
    }

    .faq-question-text {
        font-size: var(--heading-S);
        padding-right: var(--spacing-M);
    }

    .faq-icon {
        font-size: 28px;
    }



    .faq-answer p {
        font-size: var(--text-M);
    }
}
/* Product Container Layout */
.product-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* SP時は縦レイアウト（デフォルト） */
@media (max-width: 768px) {
    .product-container {
        flex-direction: column;
    }
}

/* PC時は横レイアウト（画像左、ヘッダー右） */
@media (min-width: 769px) {
    .product-container {
        flex-direction: row;
        align-items: flex-start;
        gap: 40px;
    }
    
    .product-container.row-reverse {
        flex-direction: row-reverse;
        align-items: flex-start;
        gap: 40px;
    } 
    
    .product-image-wrapper {
        width: 480px;
        order: 1;
        flex: 0 0 auto;
    }
    
    .product-header {
        text-align: left;
        order: 2;
        flex: 1;
    }
}

/* 画像のレスポンシブ対応 */
.product-image {
    max-width: 100%;
    height: auto;
    display: block;
}

p.message {
    max-width:400px;
    border: 1px dotted #CCC;
    display: block;
    margin-top: 20px !important;
    padding: 20px !important;
    text-align: center;
    font-size: 12px;
    background: #FFF;
}