/* =========================================================
   「つるるんセット」LP用CSS（ここから）
========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;600&family=Noto+Sans+JP:wght@300;400;500&display=swap');

.okst-tsrrn-wrapper {
    font-family: 'Noto Sans JP', sans-serif;
    color: #333333;
    line-height: 1.6;
    background-color: #f7fbfb;
    position: relative;
    padding-bottom: 80px;
    overflow: hidden;
}

.okst-tsrrn-watercolor-bg {
    background: 
        /* 左上：鮮やかな水色・青みを強調 */
        radial-gradient(circle at 15% 20%, rgba(100, 180, 245, 0.6) 0%, transparent 45%),
        /* 右中央：少し濃いめのスカイブルー */
        radial-gradient(circle at 85% 50%, rgba(70, 160, 235, 0.55) 0%, transparent 55%),
        /* 左下：しっかりとしたブルー */
        radial-gradient(circle at 30% 85%, rgba(90, 170, 250, 0.6) 0%, transparent 50%);
    background-color: #e6f2f8; /* 全体のベースカラーも少し青みのある白に調整 */
    padding: 60px 0 80px;
}

.okst-tsrrn-inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 4% !important;
    box-sizing: border-box;
}

.okst-tsrrn-heading {
    text-align: center;
    margin-bottom: 50px;
}
.okst-tsrrn-heading-main {
    font-family: 'Noto Serif JP', serif;
    font-size: 32px;
    color: #1a3c34;
    font-weight: 600;
    margin-bottom: 15px;
    letter-spacing: 0.08em;
}
.okst-tsrrn-heading-sub {
    font-size: 13px;
    color: #72968d;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}
.okst-tsrrn-heading-line {
    width: 1px;
    height: 40px;
    background-color: #8db5ab;
    margin: 20px auto;
}

.okst-tsrrn-hero {
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(141, 181, 171, 0.3);
    border-radius: 4px;
    padding: 50px 40px;
    text-align: center;
    margin-bottom: 70px;
    backdrop-filter: blur(8px);
}
.okst-tsrrn-badge {
    display: inline-block;
    background-color: #d15c5c;
    color: #ffffff;
    font-size: 13px;
    letter-spacing: 0.1em;
    padding: 6px 20px;
    border-radius: 20px;
    margin-bottom: 20px;
}
.okst-tsrrn-hero-catch {
    font-family: 'Noto Serif JP', serif;
    font-size: 26px;
    color: #1a3c34;
    line-height: 1.8;
    margin-bottom: 25px;
}
.okst-tsrrn-hero-text {
    font-size: 15px;
    color: #4a5c57;
    max-width: 680px;
    margin: 0 auto;
    line-height: 2;
    font-weight: 300;
}

.okst-tsrrn-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 60px;
}

.okst-tsrrn-item {
    background-color: #ffffff;
    border: 1px solid rgba(141, 181, 171, 0.2);
    border-radius: 2px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.okst-tsrrn-item-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background-color: #f0f5f4;
}

.okst-tsrrn-item-body {
    padding: 24px 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.okst-tsrrn-item-qty {
    font-size: 11px;
    color: #437a6b;
    border: 1px solid #cbe0da;
    padding: 2px 10px;
    border-radius: 12px;
    display: inline-block;
    margin-bottom: 12px;
    align-self: flex-start;
}

.okst-tsrrn-item-name {
    font-family: 'Noto Serif JP', serif;
    font-size: 18px;
    color: #1a3c34;
    margin: 0 0 10px 0;
}

.okst-tsrrn-item-desc {
    font-size: 13px;
    color: #5c706b;
    line-height: 1.7;
    margin: 0;
    font-weight: 300;
}

.okst-tsrrn-item-note {
    font-size: 11px;
    color: #ba4747;
    margin-top: 8px;
    line-height: 1.4;
}

.okst-tsrrn-item-special {
    background-color: #fdfbf5;
    border: 1px solid #ebd8c0;
}
.okst-tsrrn-item-special .okst-tsrrn-item-qty {
    color: #b37c40;
    border-color: #e3ccb1;
}

.okst-tsrrn-offer {
    background-color: #ffffff;
    border: 1px solid #cce3de;
    padding: 60px 40px;
    text-align: center;
    position: relative;
    margin-top: 20px;
}
.okst-tsrrn-offer::before {
    content: '';
    position: absolute;
    top: 8px; left: 8px; right: 8px; bottom: 8px;
    border: 1px solid #ebf2f0;
    pointer-events: none;
}

.okst-tsrrn-price-wrap {
    margin: 25px 0 35px;
}
.okst-tsrrn-price-old {
    font-size: 14px;
    color: #8fa49d;
    margin-bottom: 8px;
}
.okst-tsrrn-price-old span {
    text-decoration: line-through;
}
.okst-tsrrn-price-new {
    font-family: 'Noto Serif JP', serif;
    font-size: 48px;
    color: #ba4747;
    font-weight: 600;
    line-height: 1;
}
.okst-tsrrn-price-unit {
    font-size: 18px;
    color: #333333;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: normal;
}
.okst-tsrrn-price-tax {
    font-size: 14px;
    color: #437a6b;
    margin-top: 10px;
    letter-spacing: 0.05em;
}

.okst-tsrrn-btn {
    display: inline-block;
    background-color: #b28850;
    color: #ffffff;
    font-family: 'Noto Serif JP', serif;
    font-size: 18px;
    letter-spacing: 0.1em;
    padding: 20px 60px;
    text-decoration: none;
    transition: all 0.3s ease;
    border-radius: 3px;
    position: relative;
    z-index: 2;
}
.okst-tsrrn-btn:hover {
    background-color: #b28850;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(26, 60, 52, 0.15);
}

.okst-tsrrn-notes {
    font-size: 12px;
    color: #72857f;
    line-height: 1.8;
    text-align: left;
    max-width: 500px;
    margin: 40px auto 0;
    background-color: #f7faf9;
    padding: 20px;
    border-radius: 2px;
}

@media screen and (max-width: 768px) {
    .okst-tsrrn-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    
    .okst-tsrrn-hero {
        padding: 35px 20px;
    }
    .okst-tsrrn-hero-catch {
        font-size: 20px;
    }
    .okst-tsrrn-hero-text {
        font-size: 14px;
        text-align: left;
    }
    
    .okst-tsrrn-heading-main {
        font-size: 24px;
    }
    
    .okst-tsrrn-item-body {
        padding: 15px;
    }
    .okst-tsrrn-item-name {
        font-size: 15px;
    }
    .okst-tsrrn-item-desc {
        font-size: 12px;
    }
    
    .okst-tsrrn-offer {
        padding: 40px 20px;
    }
    .okst-tsrrn-price-new {
        font-size: 38px;
    }
    .okst-tsrrn-btn {
        width: 100%;
        box-sizing: border-box;
        padding: 18px 20px;
        font-size: 16px;
    }
}
/* =========================================================
   「つるるんセット」LP用CSS（ここまで）
========================================================= */
/* =========================================================
           ここから下が今回作成した「神杉」用のCSSです
        ========================================================= */
        @import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;600;700&family=Noto+Sans+JP:wght@300;400;500&family=Yuji+Syuku&display=swap');

        .okst-kms-wrapper {
            font-family: 'Noto Sans JP', sans-serif;
            color: #333333;
            line-height: 1.6;
            background-color: #f7fbfb;
            position: relative;
            padding-bottom: 80px;
            overflow: hidden;
        }

        /* 水彩風背景（tururun.pngテイストへ変更） */
        .okst-kms-watercolor-bg {
            background: 
                radial-gradient(circle at 15% 20%, rgba(100, 180, 245, 0.6) 0%, transparent 45%),
                radial-gradient(circle at 85% 50%, rgba(70, 160, 235, 0.55) 0%, transparent 55%),
                radial-gradient(circle at 30% 85%, rgba(90, 170, 250, 0.6) 0%, transparent 50%);
            background-color: #e6f2f8; 
            padding: 60px 0 80px;
        }

        .okst-kms-inner {
            max-width: 1000px;
            margin: 0 auto;
            padding: 0 4% !important;
            box-sizing: border-box;
        }

        /* ヒーローエリア (筆文字を取り入れ、より和モダンに) */
        .okst-kms-hero {
            background: rgba(255, 255, 255, 0.7);
            border: 1px solid rgba(141, 181, 171, 0.4);
            border-radius: 4px;
            padding: 50px 40px;
            text-align: center;
            margin-bottom: 60px;
            backdrop-filter: blur(8px);
            position: relative; /* バッジの基準点 */
        }

        /* 400袋限定 赤丸バッジ */
        .okst-kms-badge {
            position: absolute;
            top: -15px;
            right: -15px;
            background-color: #e53935;
            color: #ffffff;
            width: 90px;
            height: 90px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 16px;
            line-height: 1.2;
            transform: rotate(10deg);
            box-shadow: 2px 4px 10px rgba(0,0,0,0.15);
            z-index: 10;
        }

        .okst-kms-hero-sub {
            font-family: 'Noto Serif JP', serif;
            font-size: 16px;
            color: #1a3c34;
            letter-spacing: 0.15em;
            margin-bottom: 20px;
            font-weight: 600;
        }

        .okst-kms-hero-main {
            font-family: 'Noto Serif JP', serif;
            font-size: 32px;
            color: #1a3c34;
            font-weight: 600;
            line-height: 1.5;
            margin-bottom: 20px;
            letter-spacing: 0.05em;
        }

        /* 「神杉」は筆文字フォント（Yuji Syuku）で大きく強調 */
        .okst-kms-hero-main span {
            font-family: 'Yuji Syuku', serif;
            color: #1a3c34;
            font-size: 64px;
            display: inline-block;
            margin: 10px 15px;
            font-weight: 400; /* 筆文字なので太字解除 */
        }

        /* コンテンツブロック */
        .okst-kms-section {
            background-color: #ffffff;
            border: 1px solid rgba(141, 181, 171, 0.3);
            border-radius: 2px;
            padding: 50px 60px;
            margin-bottom: 40px;
            box-shadow: 0 8px 25px rgba(26, 60, 52, 0.04);
        }

        .okst-kms-sec-title {
            font-family: 'Noto Serif JP', serif;
            font-size: 26px;
            color: #1a3c34;
            text-align: center;
            margin-bottom: 30px;
            font-weight: 600;
            position: relative;
            padding-bottom: 15px;
        }
        .okst-kms-sec-title::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 60px;
            height: 2px;
            background-color: #8db5ab;
        }

        .okst-kms-text {
            font-size: 15px;
            color: #4a5c57;
            margin-bottom: 25px;
            text-align: justify;
            line-height: 1.8;
        }

        /* 挿絵用スタイル (tururun.pngのあしらい程度に) */
        .okst-kms-illustration-float {
            float: right;
            max-width: 200px;
            margin: 0 0 15px 20px;
            border-radius: 4px;
            box-shadow: 2px 2px 10px rgba(0,0,0,0.05);
        }

        .clearfix::after {
            content: "";
            clear: both;
            display: table;
        }

        /* 細さ比較リスト (tururun.pngのアイテムカードに似せた囲み枠へ) */
        .okst-kms-compare {
            background-color: #f7fbfb;
            padding: 30px;
            border: 1px solid #cce3de;
            border-radius: 2px;
            margin-top: 30px;
            text-align: center;
        }
        .okst-kms-compare-title {
            font-family: 'Noto Serif JP', serif;
            font-size: 16px;
            font-weight: bold;
            color: #1a3c34;
            margin-bottom: 20px;
        }
        .okst-kms-compare ul {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            justify-content: space-between;
            gap: 15px;
        }
        .okst-kms-compare li {
            flex: 1;
            font-size: 14px;
            color: #4a5c57;
            background: #ffffff;
            padding: 15px 10px;
            border-radius: 2px;
            border: 1px solid #ebf2f0;
        }
        .okst-kms-compare li.highlight {
            border-color: #d15c5c;
            background-color: #fffafaf;
            box-shadow: 0 4px 15px rgba(209, 92, 92, 0.08);
        }
        .okst-kms-compare li strong {
            display: block;
            font-family: 'Noto Serif JP', serif;
            font-size: 16px;
            margin-bottom: 5px;
            color: #1a3c34;
        }
        .okst-kms-compare li.highlight strong,
        .okst-kms-compare li.highlight span {
            color: #ba4747;
        }

        /* 食べ方ステップ */
        .okst-kms-step-box {
            display: flex;
            align-items: flex-start;
            gap: 20px;
            margin-bottom: 25px;
        }
        .okst-kms-step-icon {
            font-family: 'Noto Serif JP', serif;
            font-size: 18px;
            color: #ffffff;
            background-color: #2c5246;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            margin-top: 3px;
        }
        .okst-kms-step-content p {
            margin: 0;
            font-size: 15px;
            color: #4a5c57;
            line-height: 1.8;
        }

        /* オファーエリア */
        .okst-kms-offer {
            background-color: #ffffff;
            border: 1px solid #cce3de;
            padding: 60px 40px;
            text-align: center;
            position: relative;
            margin-top: 50px;
        }
        .okst-kms-offer::before {
            content: '';
            position: absolute;
            top: 8px; left: 8px; right: 8px; bottom: 8px;
            border: 1px solid #ebf2f0;
            pointer-events: none;
        }

        .okst-kms-btn {
            display: inline-block;
            background-color: #2c5246;
            color: #ffffff;
            font-family: 'Noto Serif JP', serif;
            font-size: 18px;
            letter-spacing: 0.1em;
            padding: 20px 60px;
            text-decoration: none;
            transition: all 0.3s ease;
            border-radius: 3px;
            position: relative;
            z-index: 2;
        }
        .okst-kms-btn:hover {
            background-color: #1a3c34;
            color: #ffffff;
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(26, 60, 52, 0.15);
        }

        .okst-kms-notice {
            font-size: 13px;
            color: #ba4747;
            line-height: 1.6;
            text-align: left;
            max-width: 600px;
            margin: 30px auto 0;
            background-color: #fff9f9;
            padding: 20px;
            border-radius: 2px;
            border: 1px solid #f2dada;
        }

        /* レスポンシブ */
        @media screen and (max-width: 768px) {
            .okst-kms-hero {
                padding: 40px 20px;
            }
            .okst-kms-badge {
                width: 60px;
                height: 60px;
                font-size: 12px;
                padding: 10px;
                top: -10px;
                right: -10px;
            }
            .okst-kms-hero-main {
                font-size: 24px;
            }
            .okst-kms-hero-main span {
                font-size: 48px;
                display: block;
                margin: 10px 0;
            }
            
            .okst-kms-section {
                padding: 30px 20px;
            }
            .okst-kms-sec-title {
                font-size: 22px;
            }
            
            /* 挿絵のスマホ対応 */
            .okst-kms-illustration-float {
                float: none;
                max-width: 100%;
                margin: 0 auto 20px;
                display: block;
            }
            
            .okst-kms-compare {
                padding: 20px 15px;
            }
            .okst-kms-compare ul {
                flex-direction: column;
                gap: 10px;
            }
            
            .okst-kms-offer {
                padding: 40px 20px;
            }
            .okst-kms-btn {
                width: 100%;
                box-sizing: border-box;
                padding: 18px 20px;
                font-size: 16px;
            }
        }