/* golden-route.css — /f/contents-golden-route 専用スタイル
   本文HTMLの <style> をここへ外部化（字数制限対策）。末尾に 同時購入キャンペーン帯 / STEP4コスメ のCSSを追加。
   カラーは AUENブランド5色（白/ライトグレー#F2F5F6/グレー#97A0A4/ブラック#1B2025/シアン#56B5CE/テラコッタ#DDA084）に統一。
   面=白・ライトグレー・ブラック／文字=ブラック（弱い文字は70%・50%濃度）／線・アイコン=グレー／機能の差し色=シアン。 */

    @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;600&family=Noto+Serif+JP:wght@300;400;500&family=Inter:wght@300;400;500;600&display=swap');
    :root { --base: #FFFFFF; --base-warm: #F2F5F6; --white: #FFFFFF; --main1: #97A0A4; --main2: #1B2025; --sub1: #56B5CE; --sub2: #56B5CE; --accent1: rgba(27,32,37,.70); --accent2: #1B2025; --text-primary: #1B2025; --text-secondary: rgba(27,32,37,.70); --text-tertiary: rgba(27,32,37,.50); --border: rgba(27,32,37,.10); --border-dark: rgba(27,32,37,.18); --font-sans: 'Noto Sans JP', 'Inter', sans-serif; --font-serif: 'Noto Serif JP', serif; --font-en: 'Inter', sans-serif; --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94); }
    * { margin: 0; padding: 0; box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body { font-family: var(--font-sans); color: var(--text-primary); background: var(--base); line-height: 1.8; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; }
    .pc-none { display: none; }
    .container { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
    .container-narrow { max-width: 760px; margin: 0 auto; padding: 0 24px; }
    .container-narrow img { height: auto; }
    .text-center { text-align: center; }
    .serif { font-family: var(--font-serif); }
    .en { font-family: var(--font-en); }
    .label { font-family: var(--font-en); font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-secondary); }
    .section-gap { padding: 120px 0; }
    .section-gap-sm { padding: 80px 0; }
    .fade-in { opacity: 0; transform: translateY(28px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
    .fade-in.v { opacity: 1; transform: translateY(0); }

    /* NAV */
    .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 20px 32px; display: flex; justify-content: space-between; align-items: center; transition: all 0.4s ease; }
    .nav.scrolled { background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); padding: 14px 32px; border-bottom: 1px solid var(--border); }
    .nav-logo { font-family: var(--font-en); font-size: 18px; font-weight: 600; letter-spacing: 0.25em; color: var(--text-primary); text-decoration: none; }
    .nav-logo img { width: 120px; height: auto; }
    .nav-links { display: flex; gap: 32px; align-items: center; }
    .nav-links a { font-size: 12px; letter-spacing: 0.08em; color: var(--text-secondary); text-decoration: none; transition: color 0.3s ease; }
    .nav-links a:hover { color: var(--text-primary); }
    .nav-cta { font-size: 12px !important; padding: 8px 24px; background: var(--text-primary); color: var(--white) !important; border-radius: 6px; transition: opacity 0.3s ease !important; }
    .nav-cta:hover { opacity: 0.85; }

    /* HERO */
    .hero { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 80px 24px 100px; position: relative; }
    .hero img { height: auto; width: auto; }
    .hero-eyebrow { font-family: var(--font-en); font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 36px; }
    .hero h1 { font-family: var(--font-serif); font-size: clamp(30px, 5.5vw, 50px); font-weight: 300; line-height: 1.55; letter-spacing: 0.04em; margin-bottom: 28px; }
    .hero h1 span { color: var(--accent2); }
    .hero-body { font-size: 15px; color: var(--text-secondary); line-height: 2.1; max-width: 440px; margin-bottom: 52px; }
    .hero-cta { display: inline-flex; align-items: center; gap: 10px; padding: 16px 48px; background: var(--text-primary); color: var(--white); font-size: 13px; font-weight: 500; letter-spacing: 0.06em; text-decoration: none; border-radius: 8px; transition: all 0.3s ease; }
    .hero-cta:hover { opacity: 0.85; transform: translateY(-1px); color: var(--white); }
    .hero-cta svg { transition: transform 0.3s ease; }
    .hero-cta:hover svg { transform: translateX(3px); }
    .hero-scroll { position: absolute; bottom: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; }
    .hero-scroll span { font-family: var(--font-en); font-size: 10px; letter-spacing: 0.18em; }
    .hero-scroll-line { width: 1px; height: 36px; background: var(--text-tertiary); animation: pulse 2.2s ease-in-out infinite; }
    @keyframes pulse { 0%, 100% { opacity: 0.2; transform: scaleY(0.6); } 50% { opacity: 0.8; transform: scaleY(1); } }

    /* PROBLEM */
    .problem { background: var(--white); }
    .problem-lead { font-family: var(--font-serif); font-size: clamp(21px, 3.5vw, 30px); font-weight: 300; line-height: 1.85; letter-spacing: 0.03em; margin-bottom: 56px; }

    /* ❶ Bubble design — 3 column circle */
    .bubble-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; max-width: 840px; margin: 56px auto 0; }
    .bubble-item { display: flex; flex-direction: column; align-items: center; text-align: center; }
    .bubble-circle { width: 170px; height: 170px; border-radius: 50%; background: var(--base-warm); display: flex; align-items: center; justify-content: center; padding: 24px; margin-bottom: 20px; position: relative; }
    .bubble-circle::after { content: ''; position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); width: 12px; height: 12px; background: var(--base-warm); border-radius: 50%; }
    .bubble-circle p { font-size: 12.5px; color: var(--text-secondary); line-height: 1.85; margin-bottom: 0; }
    .bubble-caption { font-size: 13px; color: var(--text-tertiary); line-height: 1.7; }

    /* APPROACH */
    .approach-lead { font-family: var(--font-serif); font-size: clamp(22px, 4vw, 36px); font-weight: 300; line-height: 1.7; letter-spacing: 0.03em; margin-bottom: 28px; }
    .approach-body { font-size: 15px; color: var(--text-secondary); line-height: 2.2; margin-bottom: 72px; }
    .pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
    .pillar { text-align: center; padding: 36px 20px; background: var(--white); border-radius: 12px; border: 1px solid var(--border); }
    .pillar-num { font-family: var(--font-en); font-size: 11px; font-weight: 500; letter-spacing: 0.15em; color: var(--text-tertiary); margin-block: 20px; }
    .pillar h3 { font-family: var(--font-serif); font-size: 17px; font-weight: 400; margin-bottom: 14px; }
    .pillar p { font-size: 13px; color: var(--text-secondary); line-height: 1.9; }

    /* FUTURE */
    .future { background: #1B2025; color: var(--white); }
    .future-lead { font-family: var(--font-serif); font-size: clamp(22px, 4vw, 36px); font-weight: 300; line-height: 1.65; margin-bottom: 28px; }
    .future-body { font-size: 15px; color: rgba(255, 255, 255, 0.8); line-height: 2.2; margin-bottom: 64px; }
    .future-week { display: flex; justify-content: center; gap: 16px; margin-bottom: 40px; }
    .future-week img { height: 225px; object-fit: cover; }
    .future-day { text-align: center; }
    .future-day-label { font-family: var(--font-en); font-size: 11px; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.8); margin-bottom: 10px; }
    .future-bar { height: 88px; background: rgba(255, 255, 255, 0.06); border-radius: 5px; position: relative; overflow: hidden; }
    .future-fill { position: absolute; bottom: 0; width: 100%; height: 0; background: var(--sub1); border-radius: 5px; transition: height 1s var(--ease); }
    .future-check { font-family: var(--font-en); font-size: 12px; color: var(--sub1); margin-top: 10px; opacity: 0; transition: opacity 0.5s ease 1s; }
    .future-week.animated .future-fill { height: 100%; }
    .future-week.animated .future-check { opacity: 1; }
    .future-caption { font-size: 13px; color: rgba(255, 255, 255, 0.4); text-align: center; }

    /* CODE SERIES */
    .code-section { background: var(--white); }
    .code-header { text-align: center; margin-bottom: 80px; }
    .code-header h2 { font-family: var(--font-serif); font-size: clamp(24px, 4.2vw, 40px); font-weight: 300; line-height: 1.5; margin-bottom: 20px; }
    .code-header p { font-size: 15px; color: var(--text-secondary); max-width: 520px; margin: 0 auto; line-height: 2; }
    .code-about { background: var(--base-warm); border-radius: 16px; padding: 56px; display: grid; grid-template-columns: 1fr 2fr; gap: 48px; align-items: center; margin-bottom: 72px; max-width: 800px; margin-inline: auto; }
    .code-about h3 { font-family: var(--font-serif); font-size: 22px; font-weight: 400; margin-bottom: 20px; }
    .code-about-body { font-size: 14px; color: var(--text-secondary); line-height: 2.1; }
    .code-about-visual { display: flex; flex-direction: column; gap: 10px; }
    .code-tag { display: flex; align-items: center; gap: 12px; padding: 12px 20px; background: var(--white); border-radius: 8px; font-size: 13px; border: 1px solid var(--border); }
    .code-tag-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
    .code-tag-result { background: var(--accent2); color: var(--white); border-color: transparent; font-weight: 500; justify-content: center; }

    /* Logic */
    .logic-section { background: var(--base); border-radius: 16px; padding: 64px; }
    .logic-header { text-align: center; margin-bottom: 48px; }
    .logic-header h3 { font-family: var(--font-serif); font-size: 24px; font-weight: 400; margin-bottom: 12px; }
    .logic-header p { font-size: 14px; color: var(--text-secondary); }
    .logic-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
    .logic-card { background: var(--white); border-radius: 12px; padding: 32px; border: 1px solid var(--border); }
    .logic-card img { height: auto; margin-top: 10px; }
    .logic-num { font-family: var(--font-en); font-size: 32px; font-weight: 300; color: var(--base-warm); margin-bottom: 16px; }
    .logic-card h4 { font-size: 15px; font-weight: 500; margin-bottom: 12px; }
    .logic-card p { font-size: 13px; color: var(--text-secondary); line-height: 1.95; }

    /* WEEKLY */
    .weekly { background: var(--white); overflow: hidden; }
    .weekly-header { text-align: center; margin-bottom: 56px; }
    .weekly-header h2 { font-family: var(--font-serif); font-size: clamp(22px, 3.5vw, 32px); font-weight: 300; margin-bottom: 14px; }
    .weekly-header p { font-size: 14px; color: var(--text-secondary); }
    .weekly-track-outer { position: relative; overflow-x: auto; overflow-y: hidden; margin: 0 -24px; padding: 0 24px; scrollbar-width: none; -ms-overflow-style: none; scroll-behavior: auto; width: 1120px; margin-inline: auto; }
    .weekly-track-outer::-webkit-scrollbar { display: none; }
    .weekly-track { display: flex; gap: 20px; width: max-content; cursor: grab; user-select: none; -webkit-user-select: none; }
    .weekly-track.dragging { cursor: grabbing; }
    .weekly-track.dragging .wcard { pointer-events: none; }
    .wcard { flex: 0 0 280px; background: var(--base-warm); border-radius: 12px; overflow: hidden; transition: transform 0.3s ease; }
    .wcard:hover { transform: scale(1.02); }
    .wcard-img { aspect-ratio: 4 / 5; background: var(--base-warm); position: relative; display: flex; align-items: center; justify-content: center; }
    .wcard-day { position: absolute; top: 14px; left: 14px; font-family: var(--font-en); font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; background: rgba(255, 255, 255, 0.92); padding: 6px 16px; border-radius: 20px; }
    .wcard-placeholder img { height: auto; }
    .wcard-body { padding: 18px 20px; }
    .wcard-title { font-size: 13.5px; font-weight: 500; margin-bottom: 8px; }
    .wcard-items { font-size: 12px; color: var(--text-secondary); line-height: 1.85; }
    .wcard-scene { font-size: 11px; color: var(--text-secondary); margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }

    /*    .weekly-note { text-align: center; margin-top: 40px; font-size: 13px; color: var(--text-tertiary); }*/

    /* PURCHASE */
    .purchase { background: var(--base); }
    .purchase-header { text-align: center; margin-bottom: 64px; }
    .purchase-header h2 { font-family: var(--font-serif); font-size: clamp(22px, 4vw, 36px); font-weight: 300; margin-bottom: 16px; }
    .purchase-header p { font-size: 15px; color: var(--text-secondary); line-height: 2; }

    /* ❸ SET CARD — with image right */
    .set-wrap { display: flex; justify-content: center; margin-bottom: 64px; max-width: 720px; margin-inline: auto; }
    .set-card { background: var(--white); border-radius: 16px; border: 2px solid var(--accent2); width: 100%; display: grid; grid-template-columns: 1fr 1fr; position: relative; overflow-x: hidden; }
    .set-card-left { padding: 48px 40px; display: flex; flex-direction: column; justify-content: center; }
    .set-card-right { background: var(--base-warm); display: flex; align-items: center; justify-content: center; min-height: 320px; position: relative; overflow: hidden; }
    .set-card-right img { height: auto; }
    .set-card-img-placeholder svg { opacity: 0.3; }
    .set-card-img-placeholder span { font-size: 11px; letter-spacing: 0.1em; opacity: 0.5; }
    .set-badge { position: absolute; top: -11px; left: 40px; background: var(--accent2); color: var(--white); font-family: var(--font-en); font-size: 10px; font-weight: 600; letter-spacing: 0.1em; padding: 4px 16px; border-radius: 20px; z-index: 1; }
    .set-name { font-family: var(--font-en); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 12px; }
    .set-card h3 { font-family: var(--font-serif); font-size: 22px; font-weight: 400; line-height: 1.6; margin-bottom: 14px; }
    .set-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.85; margin-bottom: 20px; }

    /*.set-contents-list {
        font-size: 12px; color: var(--text-secondary);
        line-height: 2.1; margin-bottom: 24px;
        padding-top: 16px; border-top: 1px solid var(--border);
    }*/

    .set-price { font-size: 28px; font-weight: 500; letter-spacing: -0.01em; }
    .set-price-unit { font-size: 12px; font-weight: 400; color: var(--text-secondary); margin-left: 4px; }
    .set-discount { font-size: 11px; color: var(--text-secondary); margin-top: 6px; margin-bottom: 28px; }
    .btn-primary-black { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 14px 0; background: var(--text-primary); color: var(--white); font-family: var(--font-sans); font-size: 13px; font-weight: 500; letter-spacing: 0.04em; border: none; border-radius: 8px; cursor: pointer; text-decoration: none; transition: opacity 0.3s ease; }
    .btn-primary-black:hover { opacity: 0.85; color: var(--white); }

    /* ❹ Single purchase — large heading section */
    .single-section { text-align: center; padding: 80px 0 56px; border-top: 1px solid var(--border); }
    .single-section h2 { font-family: var(--font-serif); font-size: clamp(20px, 3.2vw, 28px); font-weight: 300; line-height: 1.65; margin-bottom: 12px; }
    .single-section p { font-size: 14px; color: var(--text-secondary); line-height: 2; max-width: 480px; margin: 0 auto; }
    .single-section .label { margin-bottom: 20px; }

    /* ITEMS */
    .items-label { font-family: var(--font-en); font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 28px; }
    .items-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 72px; }
    .item-card { background: var(--base-warm); border-radius: 12px; overflow: hidden; transition: transform 0.35s var(--ease); position: relative; }
    .item-card:hover { transform: translateY(-5px); }
    .item-card-badge { position: absolute; top: 12px; left: 12px; font-family: var(--font-en); font-size: 9px; font-weight: 600; letter-spacing: 0.1em; background: var(--accent2); color: var(--white); padding: 3px 10px; border-radius: 20px; z-index: 2; }
    .item-img { height: auto; aspect-ratio: 3 / 4; background: var(--base-warm); display: flex; align-items: center; justify-content: center; font-family: var(--font-en); font-size: 11px; letter-spacing: 0.12em; color: var(--text-tertiary); text-transform: uppercase; }
    .item-info { padding: 16px; }
    .item-order { font-family: var(--font-en); font-size: 10px; letter-spacing: 0.12em; color: var(--accent1); margin-bottom: 6px; }
    .item-name { font-size: 13.5px; font-weight: 500; margin-bottom: 6px; }
    .item-desc { font-size: 11.5px; color: var(--text-secondary); line-height: 1.7; }
    .item-price { font-size: 13px; font-weight: 500; margin-top: 10px; color: var(--text-primary); }
    .item-single-link { display: inline-block; font-size: 11px; color: var(--accent2); text-decoration: none; margin-top: 8px; letter-spacing: 0.04em; border-bottom: 1px solid transparent; transition: border-color 0.3s ease; }

    /*    .item-single-link:hover { border-bottom-color: var(--accent2); }*/

    /* SHOES */
    .shoes { background: var(--white); border-top: 1px solid var(--border); }
    .shoes-inner { max-width: 800px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
    .shoes-text h3 { font-family: var(--font-serif); font-size: 20px; font-weight: 400; margin-bottom: 12px; }
    .shoes-text p { font-size: 13.5px; color: var(--text-secondary); line-height: 2; }
    .shoes-items { display: flex; flex-direction: column; gap: 16px; }
    .shoes-items a:hover { text-decoration-line: none; }
    .shoe-card { display: flex; gap: 16px; align-items: center; padding: 16px; background: var(--base-warm); border-radius: 10px; }
    .shoe-img { width: 72px; height: 72px; background: var(--base-warm); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-family: var(--font-en); font-size: 9px; color: var(--text-tertiary); letter-spacing: 0.08em; text-transform: uppercase; flex-shrink: 0; }
    .shoe-info-name { font-size: 13px; font-weight: 500; margin-bottom: 4px; }
    .shoe-info-desc { font-size: 11.5px; color: var(--text-secondary); line-height: 1.6; }

    /* TRUST */
    .trust { background: var(--base); border-top: 1px solid var(--border); }
    .trust-grid { display: flex; justify-content: center; gap: 56px; flex-wrap: wrap; }
    .trust-item { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
    .trust-icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; color: var(--main1); }
    .trust-item p { font-size: 12.5px; color: var(--text-secondary); }

    /* FINAL CTA */
    .final-cta { background: var(--text-primary); color: var(--white); text-align: center; padding: 110px 24px; }
    .final-cta h2 { font-family: var(--font-serif); font-size: clamp(22px, 4vw, 34px); font-weight: 300; line-height: 1.65; margin-bottom: 20px; }
    .final-cta p { font-size: 14px; color: rgba(255, 255, 255, 0.5); line-height: 2; margin-bottom: 44px; max-width: 420px; margin-left: auto; margin-right: auto; }
    .btn-white { display: inline-flex; align-items: center; gap: 10px; padding: 16px 52px; background: var(--white); color: var(--text-primary); font-family: var(--font-sans); font-size: 14px; font-weight: 500; text-decoration: none; border-radius: 8px; transition: all 0.3s ease; border: none; cursor: pointer; }
    .btn-white:hover { opacity: 0.9; transform: translateY(-1px); }

    /* FOOTER */
    .footer { padding: 40px 24px; text-align: center; border-top: 1px solid var(--border); }
    .footer-logo { font-family: var(--font-en); font-size: 15px; font-weight: 600; letter-spacing: 0.25em; margin-bottom: 10px; }
    .footer p { font-size: 11px; color: var(--text-tertiary); }

    /* RESPONSIVE */
    @media (max-width: 900px) { .hero h1 span { display: block; } .pillars { grid-template-columns: 1fr; gap: 16px; } .items-grid { grid-template-columns: repeat(2, 1fr); } .logic-grid { grid-template-columns: 1fr; } .code-about { grid-template-columns: 1fr; padding: 36px 28px; } .shoes-inner { grid-template-columns: 1fr; } .logic-section { padding: 40px 28px; } .nav-links { display: none; } .set-card { max-width: 100%; } }
    @media (max-width: 600px) { .nav-logo img { width: 90px; } .pc-none { display: block; } .hero-body { margin-bottom: 30px; } /* ❶ Bubble design — 3 column circle */ .bubble-grid { grid-template-columns: repeat(1, 1fr); gap: 45px; } .logic-section { margin-inline: calc(50% - 50vw); border-radius: unset; } .hero { padding-block: 40px 100px; min-height: 90vh; } .hero h1 { margin-top: 18px; } .hero-scroll { bottom: 40px; } /*.hero-scroll span { font-size: 36px; color: rgb(197 205 213 / 50%); }*/ .code-about h3 { margin-bottom: 0; } .items-grid { grid-template-columns: 1fr 1fr; gap: 12px; } .future-week { gap: 8px; } .wcard { flex: 0 0 260px; } .set-card { grid-template-columns: 1fr; } }

    header.header, #footercontent, .above-footer-banner-2col { display: none !important; }

    /* ===== CODE SYSTEM ===== */
    .code-system-section { background: white; }
    .code-system { text-align: center; }
    .code-system-title { font-family: 'Inter', sans-serif; font-size: 12.8px; font-weight: 700; letter-spacing: 3px; color: rgba(27,32,37,.70); margin-bottom: 6.4px; }
    .code-system-sub { font-size: clamp(28.8px, 4vw, 44.8px); font-weight: 700; color: #1B2025; margin-bottom: 8px; }
    .code-system-lead { font-size: 14.4px; color: rgba(27,32,37,.70); margin-bottom: 40px; }

    .cs-summary { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 12px; max-width: 900px; margin: 0 auto 40px; align-items: stretch; }
    .cs-summary-card { background: #fff; border: 1px solid rgba(27,32,37,.10); border-radius: 6px; padding: 2.4rem 1.6rem 2rem; text-align: center; display: flex; flex-direction: column; align-items: center; position: relative; }
    .cs-summary-card + .cs-summary-card { }
    .cs-summary::before, .cs-summary::after { content: none; }
    .cs-summary-arrow { display: flex; align-items: center; justify-content: center; color: #97A0A4; }
    .cs-summary-arrow svg { width: 18px; height: 18px; }
    .cs-summary-badge { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: #1B2025; color: #fff; font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 700; margin-bottom: 12px; }
    .cs-summary-card.is-step2 .cs-summary-badge { background: #97A0A4; }
    .cs-summary-card.is-step3 .cs-summary-badge { background: #56B5CE; }
    .cs-summary-label { font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 2px; color: rgba(27,32,37,.70); margin-bottom: 6.4px; }
    .cs-summary-title { font-size: 17.6px; font-weight: 700; color: #1B2025; margin-bottom: 6.4px; }
    .cs-summary-note { font-size: 13px; color: rgba(27,32,37,.55); }

    .cs-items-head { text-align: center; margin: 72px 0 24px; }
    .cs-items-eyebrow { font-family: 'Inter', sans-serif; font-size: 12.8px; font-weight: 600; letter-spacing: 3px; color: rgba(27,32,37,.70); margin-bottom: 8px; }
    .cs-items-title { font-size: 17.6px; font-weight: 600; color: #1B2025; }

    .cs-vertical { margin: 0 auto 40px; display: grid; grid-template-columns: 1fr 3fr 1fr; gap: 12px; align-items: stretch; position: relative; }
    .cs-vertical::after { content: ''; position: absolute; top: 13px; left: 0; right: 0; height: 2px; background: rgba(27,32,37,.10); z-index: 0; }
    .cs-step-arrow { position: absolute; top: 0; transform: translateX(-50%); z-index: 2; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; }
    .cs-vertical > :nth-child(2) { left: 25%; }
    .cs-vertical > :nth-child(4) { left: 75%; }
    .cs-step-arrow svg { width: 18px; height: 18px; color: #97A0A4; }
    .cs-vstep { text-align: center; display: flex; flex-direction: column; align-items: center; }
    .cs-vstep-num { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: #1B2025; color: #fff; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 700; margin-bottom: 8px; position: relative; z-index: 1; }
    .cs-vstep.is-step2 .cs-vstep-num { background: #97A0A4; }
    .cs-vstep.is-step3 .cs-vstep-num { background: #56B5CE; }
    .cs-vstep-label { font-family: 'Inter', sans-serif; font-size: 12.8px; font-weight: 700; letter-spacing: 1.5px; color: rgba(27,32,37,.70); margin-bottom: 4px; }
    .cs-vstep-main { font-size: 17.6px; font-weight: 700; color: #1B2025; margin-bottom: 4.8px; }
    .cs-vstep-note { font-size: 14.4px; color: rgba(27,32,37,.55); margin-bottom: 16px; }

    .cs-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; flex: 1; }
    .cs-vstep.is-step1 .cs-cards, .cs-vstep.is-step3 .cs-cards { grid-template-columns: 1fr; }
    .cs-card { text-align: center; background: #fff; border: 1px solid rgba(27,32,37,.10); border-radius: 6px; padding: 18px 20px; display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; }
    a.cs-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.08); border-color: #56B5CE; }
    .cs-card-img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: top; border-radius: 4px; margin-bottom: 9.6px; max-height: 200px; }
    .cs-card-body { flex: 1; display: flex; flex-direction: column; }
    .cs-card-role { font-size: 11px; font-weight: 600; color: rgba(27,32,37,.70); margin-bottom: 2.4px; }
    .cs-vstep.is-step1 .cs-card-role { color: rgba(27,32,37,.70); }
    .cs-vstep.is-step2 .cs-card-role { color: rgba(27,32,37,.70); }
    .cs-vstep.is-step3 .cs-card-role { color: rgba(27,32,37,.70); }
    .cs-card-name { font-size: 13px; font-weight: 700; color: #1B2025; margin-bottom: auto; padding-bottom: 8px; }
    .cs-card-cta { display: inline-block; font-size: 11px; font-weight: 600; color: #1B2025; text-decoration: none; letter-spacing: 0.5px; padding: 4.8px 9.6px; border: 1px solid #1B2025; border-radius: 2px; transition: all 0.2s ease; }
    .cs-card-cta:hover { background: #1B2025; color: #fff; }
    .cs-vstep.is-step1 .cs-card-cta { color: #1B2025; border-color: #1B2025; }
    .cs-vstep.is-step1 .cs-card-cta:hover { background: #1B2025; color: #fff; }
    .cs-vstep.is-step2 .cs-card-cta { color: #1B2025; border-color: #1B2025; }
    .cs-vstep.is-step2 .cs-card-cta:hover { background: #1B2025; color: #fff; }
    .cs-vstep.is-step3 .cs-card-cta { color: #1B2025; border-color: #1B2025; }
    .cs-vstep.is-step3 .cs-card-cta:hover { background: #1B2025; color: #fff; }

    .cs-card.is-now { border: 2px solid #56B5CE; background: #F2F5F6; }
    .cs-card-now-static { font-size: 10.88px; color: rgba(27,32,37,.55); padding-top: 6.4px; margin-top: 4.8px; border-top: 1px dashed rgba(27,32,37,.18); }
    .cs-conclusion { background: #fff; padding: 32px 40px; max-width: 780px; margin: 24px auto 0; text-align: center; border-radius: 8px; box-shadow: 0 2px 16px rgba(0,0,0,0.06); }
    .cs-conclusion p { font-size: 15.2px; color: #1B2025; line-height: 1.9; margin: 0; font-weight: 500; }

    @media (max-width: 768px) {
        .code-system { padding: 32px 16px; }
        .cs-summary { grid-template-columns: repeat(3, 1fr); gap: 6.4px; margin-bottom: 24px; }
        .cs-summary-arrow { display: none; }
        .cs-summary-card { padding: 14.4px 6.4px 12px; }
        .cs-summary-badge { width: 24px; height: 24px; font-size: 10.4px; margin-bottom: 8px; }
        .cs-summary-label { font-size: 8.8px; letter-spacing: 1px; margin-bottom: 4.8px; }
        .cs-summary-title { font-size: 12px; margin-bottom: 4px; }
        .cs-summary-note { font-size: 9.6px; }
        .cs-vertical { display: block; position: relative; padding-left: 32px; }
        .cs-vertical::before { content: ''; position: absolute; left: 9px; top: 0; bottom: 0; width: 2px; background: rgba(27,32,37,.10); }
        .cs-step-arrow { display: none; }
        .cs-vertical::after { display: none; }
        .cs-vstep { position: relative; margin-bottom: 32px; text-align: left; align-items: stretch; }
        .cs-vstep::before, .cs-vstep::after { display: none !important; }
        .cs-vstep:last-child { margin-bottom: 0; }
        .cs-vstep-num { position: absolute; left: -32px; top: 0; width: 20px; height: 20px; font-size: 8.8px; }
        .cs-vstep-main { font-size: 15.2px; }
        .cs-cards { grid-template-columns: 1fr !important; max-width: none !important; gap: 9.6px; }
        .cs-card { flex-direction: row; align-items: center; gap: 12px; text-align: left; padding: 12px; }
        .cs-card-img { width: 72px; height: 72px; aspect-ratio: 1/1; max-height: none; flex-shrink: 0; margin-bottom: 0; border-radius: 4px; }
        .cs-card-body { flex: 1; display: block; }
        .cs-card-role { font-size: 10.4px; }
        .cs-card-name { font-size: 12px; margin-bottom: 5.6px; padding-bottom: 0; }
        .cs-card-cta { font-size: 10.4px; padding: 4px 8px; }
        .cs-conclusion { padding: 20px 16px; }
        .cs-conclusion p { font-size: 12.8px; }
    }
    .cs-card, .cs-card * { text-decoration: none; }

/* ===== 同時購入キャンペーン帯（CODE SETUP）===== */
.csetpromo-band{background:#F2F5F6;padding:6rem;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);box-sizing:border-box;}.csetpromo-band .container-wrapper{padding:0;margin:0;width:100%;max-width:100%;box-sizing:border-box;}
.csetpromo,.csetpromo *{box-sizing:border-box;}
.csetpromo{border:1px solid rgba(27,32,37,.10);/* border-radius:12px; */background:#FFFFFF;box-shadow:0 2px 12px rgba(0,0,0,.05);overflow:hidden;font-family:"Noto Sans JP",-apple-system,"Hiragino Sans","Yu Gothic",Meiryo,sans-serif;color:#1B2025;line-height:1.7;width:-moz-fit-content;/* width:fit-content; */max-width:1000px;margin:0 auto;padding:0;}
.csetpromo .csetpromo-eyebrow{display:block;font-family:"Inter",sans-serif;font-size:11px;font-weight:600;letter-spacing:.16em;color:rgba(27,32,37,.70);text-transform:uppercase;background:#F2F5F6;padding:11px 24px;border-bottom:1px solid rgba(27,32,37,.10);margin:0;}
.csetpromo .csetpromo-inner{display:flex;gap:26px;padding:24px;align-items:center;margin:0;}
.csetpromo .csetpromo-photo{flex:0 0 216px;width:216px;aspect-ratio:3/4;border-radius:10px;overflow:hidden;background:#F2F5F6;margin:0;padding:0;}
.csetpromo .csetpromo-photo img{width:100%;height:100%;object-fit:cover;object-position:center 25%;display:block;margin:0;padding:0;border-radius:0;max-width:none;}
.csetpromo .csetpromo-text{flex:0 1 auto;min-width:0;max-width:460px;margin:0;padding:0;}
.csetpromo .csetpromo-h{font-size:21px;font-weight:700;line-height:1.45;margin:0;color:#1B2025;}.csetpromo .br-sp{display:none;}
.csetpromo .csetpromo-p{font-size:14px;color:rgba(27,32,37,.70);line-height:1.9;margin:10px 0 0;padding:0;}
.csetpromo .csetpromo-price{font-size:15px;margin:18px 0 0;padding:0;color:#1B2025;}
.csetpromo .csetpromo-price b{font-family:"Inter",sans-serif;font-size:23px;font-weight:800;}
.csetpromo .csetpromo-cta{display:inline-flex;align-items:center;gap:.5em;background:#1B2025;color:#fff;border:1px solid #1B2025;font-weight:700;font-size:14px;line-height:1.2;padding:14px 30px;border-radius:8px;margin:0;text-decoration:none;width:auto;}.csetpromo .csetpromo-actions{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin:20px 0 0;padding:0;}
@media(max-width:600px){.csetpromo-band{padding:0;}.csetpromo{width:auto;}.csetpromo .csetpromo-eyebrow{padding:12px 20px;}.csetpromo .csetpromo-text{max-width:none;}.csetpromo .csetpromo-inner{flex-direction:column;align-items:stretch;text-align:left;gap:18px;padding:30px 30px 60px;}.csetpromo .csetpromo-photo{width:100%;flex:none;/* aspect-ratio:3/3; */border-radius:10px;}.csetpromo .csetpromo-photo img{object-position:center 30%;}.csetpromo .csetpromo-h{font-size:22px;}.csetpromo .br-sp{display:inline;}.csetpromo .csetpromo-p{font-size:14px;}.csetpromo .csetpromo-cta{display:flex;width:100%;justify-content:center;padding:16px 24px;}.csetpromo .csetpromo-actions{align-items:stretch;gap:12px;margin-top:16px;}.csetpromo }

/* ===== STEP 4：服の先＝肌（CODE SYSTEM の段落ち行・グリッド外・左サムネ右情報リンク） ===== */
.cs-step4-connector { display: flex; justify-content: center; margin: -18px 0 12px; }
.cs-step4 { display: flex; align-items: center; gap: 18px; max-width: 560px; margin: 0 auto; padding: 18px 20px; background: #F2F5F6; border: 1px solid rgba(27,32,37,.10); border-radius: 8px; text-align: left; text-decoration: none; color: inherit; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
a.cs-step4:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.08); border-color: #56B5CE; }
.cs-step4-im { width: 84px; flex: none; aspect-ratio: 3/4; border-radius: 4px; overflow: hidden; background: #fff; border: 1px solid rgba(27,32,37,.10); }
.cs-step4-im img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-step4-body { flex: 1; min-width: 0; }
.cs-step4-label { font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 1.5px; color: rgba(27,32,37,.70); margin-bottom: 4px; }
.cs-step4-name { font-size: 15px; font-weight: 700; color: #1B2025; margin-bottom: 6px; }
.cs-step4-note { font-size: 13px; color: rgba(27,32,37,.70); line-height: 1.75; margin-bottom: 10px; }
.cs-step4-cta { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: #1B2025; }
@media (max-width: 600px) {
  .cs-step4 { gap: 14px; padding: 14px; }
  .cs-step4-im { width: 72px; }
  .cs-step4-name { font-size: 14px; }
  .cs-step4-note { font-size: 12.5px; }
}


/* ===== CODE SYSTEM：リンクの hover 下線を出さない ===== */
.code-system-section a,
.code-system-section a:hover,
.code-system-section a:focus,
.code-system-section a:active,
.code-system-section a:visited { text-decoration: none; }

/* ===== コスメ（服の先＝肌）：Single item セクション内に収める・ブランド無彩カード ===== */
.skin-in-single { margin-top: 44px; padding-top: 44px; border-top: 1px solid var(--border); }
.skin-head { text-align: center; margin-bottom: 24px; }
.skin-eyebrow { font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 1.5px; color: rgba(27,32,37,.70); margin-bottom: 12px; }
.skin-head h3 { font-family: var(--font-serif); font-size: 24px; font-weight: 400; color: #1B2025; }
a.skin-card, a.skin-card:hover, a.skin-card:focus { text-decoration: none; }
.skin-card { display: flex; align-items: center; gap: 26px; max-width: 700px; margin: 0 auto; padding: 26px 30px; background: #F2F5F6; border: 1px solid rgba(27,32,37,.10); border-radius: 10px; color: inherit; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
a.skin-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.09); border-color: #56B5CE; }
.skin-card-im { width: 140px; flex: none; aspect-ratio: 3/4; border-radius: 6px; overflow: hidden; background: #fff; border: 1px solid rgba(27,32,37,.10); }
.skin-card-im img { width: 100%; height: 100%; object-fit: cover; display: block; }
.skin-card-body { flex: 1; min-width: 0; }
.skin-card-name { font-size: 19px; font-weight: 700; color: #1B2025; margin-bottom: 8px; }
.skin-card-note { font-size: 14px; color: rgba(27,32,37,.70); line-height: 1.85; margin-bottom: 14px; }
.skin-card-cta { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: #1B2025; }
@media (max-width: 600px) {
  .skin-head h3 { font-size: 20px; }
  .skin-card { gap: 16px; padding: 18px; }
  .skin-card-im { width: 104px; }
  .skin-card-name { font-size: 16px; }
  .skin-card-note { font-size: 13px; }
}