/* =========================================
           変数の定義 (カラー、フォント)
           ========================================= */
:root {
    /* カラーパレット */
    --color-text-main: #613F1A;
    --color-text-accent: #EF7E78;
    --color-bg-base: #fdfaf7;
    --color-bg-gray: #f5f3ef;
    --color-btn-start: #f28b85;
    --color-btn-end: #d95e57;
    --color-gold: #C5A880;
    --color-footer: #3B3226;
    /* フォントファミリー */
    --font-fv-ja: 'Shippori Mincho', serif;
    --font-serif-ja: 'Noto Serif JP', serif;
    --font-sans-ja: 'Noto Sans JP', sans-serif;
    --font-en: 'Cormorant Garamond', serif;
}
/* =========================================
           ベーススタイル
           ========================================= */
body {
    margin: 0;
    padding: 0;
    background-color: var(--color-bg-base);
    color: var(--color-text-main);
    font-family: var(--font-sans-ja);
    line-height: 1.8;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
}
img {
    max-width: 100%;
    height: auto;
}
a {
    text-decoration: none;
    color: inherit;
}
/* ユーティリティクラス */
.text-center {
    text-align: center;
}
.mt-2 {
    margin-top: 10px;
}
.mt-4 {
    margin-top: 20px;
}
.mt-6 {
    margin-top: 30px;
}
.text-sm {
    font-size: 0.85rem;
}
.text-xs {
    font-size: 0.75rem;
}
/* フォント適用クラス */
.font-fv {
    font-family: var(--font-fv-ja);
}
.font-serif {
    font-family: var(--font-serif-ja);
}
.font-sans {
    font-family: var(--font-sans-ja);
}
.font-en {
    font-family: var(--font-en);
}
/* 見出し共通スタイル */
.en-title {
    display: block;
    font-size: 1.25rem;
    line-height: 1.25rem;
    font-weight: bold;
    color: var(--color-gold);
    letter-spacing: 0.15em;
    margin-bottom: 8px;
}
.ja-title {
    font-size: 1.4rem;
    line-height: 1.6;
    margin: 0;
    color: var(--color-text-main);
}
.ja-title span {
    color: var(--color-text-accent);
}
.ja-sub {
    font-size: 1rem;
    letter-spacing: 0.2em;
    line-height: 1;
    color: var(--color-gold);
}
/* ボタン共通スタイル（ホバーエフェクト含む） */
.btn-primary {
    width: 80%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(90deg,
            var(--color-btn-start),
            var(--color-btn-end),
            var(--color-btn-start));
    background-size: 200% 100%;
    color: #fff;
    padding: 16px 40px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1.1rem;
    box-shadow: 0 4px 15px rgba(217, 94, 87, 0.3);
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition:
        transform .35s ease,
        box-shadow .35s ease,
        background-position .6s ease,
        filter .35s ease;
}
.btn-primary:hover {
    background-position: 100% 0;
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(217, 94, 87, .35);
    filter: brightness(1.05);
}
.btn-primary:active {
    transform: translateY(-1px) scale(.98);
}
/* =========================================
           レイアウト（PC・スマホ両対応）
           ========================================= */
.page-wrapper {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    background: transparent;
    background-attachment: scroll;
}
/* スマホ用メインコンテナ */
.mobile-container {
    width: 100%;
    max-width: 480px;
    /* スマホの最大幅 */
    background-color: rgba(255, 255, 255, 0.85);
    position: relative;
    z-index: 10;
    overflow: hidden;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.03);
}
/* PC用サイドコンテンツ（初期は非表示） */
.side-content {
    display: none;
}
/* セクション共通パディング */
.section-pad {
    padding: 60px 20px;
}
/* =========================================
           各セクションのスタイル
           ========================================= */
section {
    position: relative;
    z-index: 1;
}
/* Hero (FV) */
.hero {
    position: relative;
    width: 100%;
}
.hero-img-wrap {
    position: relative;
}
.hero-img {
    width: 100%;
    height: auto;
    display: block;
}
.hero-text {
    position: absolute;
    top: 4%;
    left: 5%;
    z-index: 2;
    width: 71%;
}
.hero-text h1 {
    color: var(--color-text-accent);
    font-size: 2.2rem;
    line-height: 1.3;
    margin: 0;
    text-shadow: 0 2px 10px rgba(255, 255, 255, 0.8);
}
/* Trouble */
.trouble {
    background-color: rgba(249, 246, 242, 0.7);
}
.trouble-box {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 12px;
    padding: 30px 20px;
    margin: 30px 10px 0;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(215, 190, 155, 0.2);
}
.trouble-box ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.trouble-box li {
    position: relative;
    padding-left: 1.8em;
    margin-bottom: 16px;
    font-size: 0.95rem;
    color: var(--color-text-main);
    text-align: left;
}
.trouble-box li:last-child {
    margin-bottom: 0;
}
.trouble-box li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: -2px;
    color: var(--color-text-accent);
    font-weight: bold;
    font-size: 1.2rem;
}
/* Solution */
.solution {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), rgba(254, 250, 246, 0.5));
}
.solution .sol-tit {
    font-size: 1.25rem;
    line-height: 1.25rem;
    letter-spacing: 0.15em;
    margin-bottom: 8px;
}
.product-img {
    width: 70%;
    max-width: 300px;
    margin: 0 auto;
}
/* Features */
.features {
    background-color: rgba(249, 246, 242, 0.7);
}
.feature-card {
    background: #fff;
    border-radius: 12px;
    border-top: 4px solid #C5A880;
    padding: 24px 20px 30px;
    margin: 30px 10px;
    text-align: center;
    position: relative;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.02);
}
.f-num {
    font-size: 3.4rem;
    line-height: 1;
}
.f-poi {
    font-size: 0.9rem;
    line-height: 1;
    text-align: left;
}
.feature-card h3 {
    font-size: 1.1rem;
    text-align: left;
    margin-bottom: 20px;
    margin-top: 0px;
    position: relative;
    z-index: 2;
}
.f-img-wrap {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 20px;
    border: 4px solid #fff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    position: relative;
    z-index: 2;
}
.f-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.feature-card p {
    font-size: 0.9rem;
    text-align: left;
    margin: 0;
}
.story {
    background-color: #ffffff;
}
.story-frame {
    border: 1px solid var(--color-gold);
    padding: 45px 22px 35px;
    position: relative;
    margin: 10px 10px 0;
    border-radius: 12px;
}
.story-badge {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #ffffff;
    /* 背景色と重ねて線を綺麗に隠す */
    padding: 0 20px;
    font-family: var(--font-en);
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--color-gold);
    letter-spacing: 0.2em;
    white-space: nowrap;
}
/* Voice (「”」クォーテーションマークの完璧な再現) */
.voice {
    background: rgba(249, 246, 242, 0.7);
}
.faq-box {
    background: #fff;
    border-radius: 12px;
    padding: 30px 24px;
    margin: 30px 10px 0px;
    text-align: left;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(215, 190, 155, 0.15);
    position: relative;
    /* 擬似要素の位置調整に必須 */
    overflow: hidden;
}
/* クォーテーションマーク「”」のCSS定義 */
.faq-box::before {
    content: "”";
    position: absolute;
    top: -5px;
    right: 15px;
    font-family: var(--font-en), serif;
    font-size: 8rem;
    line-height: 1;
    color: #F4EBDD;
    font-weight: 700;
    pointer-events: none;
    user-select: none;
}
.faq-box .q {
    font-weight: bold;
    color: var(--color-gold);
    margin-bottom: 12px;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.faq-box .a {
    position: relative;
    z-index: 1;
    line-height: 1.7;
}
/* Closing */
.closing {
    background-color: #fff;
}
.closing .offer {
    background: #EA524A;
    width: 25%;
    line-height: 2.5em;
    border-radius: 50px;
    color: #fff;
    font-weight: bold;
    text-align: center;
    margin: auto;
}
.price-box {
    background: linear-gradient(135deg, #F9F6F2, #EDE4D8);
    border: 1px solid #C5A880;
    border-radius: 12px;
    padding: 20px;
    margin: 20px 10px;
}
.price {
    font-size: 2.5rem;
    color: var(--color-text-main);
    line-height: 1;
    margin: 10px 0;
    font-weight: bold;
}
.price span {
    font-size: 1.2rem;
    font-family: var(--font-sans-ja);
}
.price span:first-child {
    text-decoration: line-through;
    font-size: 0.85rem;
    color: #B19773;
    margin-right: 10px;
    font-weight: 400;
}
.price .tax {
    font-size: 0.85rem;
    color: #3B3226;
    margin-left: 5px;
    font-weight: 400;
}
hr {
    border: none;
    border-top: 1px dashed #DCD3C6;
    height: 0;
    margin: 16px auto;
}
/* Footer */
.footer {
    background-color: var(--color-footer);
    color: #DCD3C6;
    padding: 64px 20px;
}
.footer p {
    margin: 5px 0;
}
.footer p:first-child,
.footer p:last-child {
    font-family: var(--font-serif-ja);
}
.footer p:first-child {
    font-size: 1.25rem;
    letter-spacing: 0.375rem;
}
/* =========================================
   グラデーション背景
   ========================================= */
.offer,
.solution,
.story {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
/* =========================
   Offer
========================= */
.offer::before,
.offer::after {
    content: "";
    position: absolute;
    width: 320px;
    height: 320px;
    background: url("Gradient+Blur.png") center/contain no-repeat;
    opacity: .8;
    pointer-events: none;
    z-index: -1;
}
/* 右上 */
.offer::before {
    top: -140px;
    right: -100px;
    transform: rotate(18deg);
}
/* 左下 */
.offer::after {
    bottom: -150px;
    left: -120px;
    transform: rotate(-18deg);
}
/* =========================
   Solution
========================= */
.solution::before,
.solution::after {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    background: url("Gradient+Blur.png") center/contain no-repeat;
    opacity: .75;
    pointer-events: none;
    z-index: -1;
}
/* 右上 */
.solution::before {
    top: -180px;
    right: -240px;
    transform: rotate(18deg);
}
/* 左下 */
.solution::after {
    bottom: -180px;
    left: -180px;
    transform: rotate(-18deg);
}
/* =========================
   Story
========================= */
.story::before,
.story::after {
    content: "";
    position: absolute;
    width: 380px;
    height: 380px;
    background: url("Gradient+Blur.png") center/contain no-repeat;
    opacity: .75;
    pointer-events: none;
    z-index: -1;
}
/* 右上 */
.story::before {
    top: -120px;
    right: -230px;
    transform: rotate(18deg);
}
/* 左下 */
.story::after {
    bottom: -170px;
    left: -140px;
    transform: rotate(-18deg);
}
/* =========================================
           スクロールアニメーション (ふわっと出る)
           ========================================= */
.js-fade {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}
.js-fade.is-active {
    opacity: 1;
    transform: translateY(0);
}
/* =========================================
           PC版レイアウト (1024px以上)
           ========================================= */
@media (min-width: 1024px) {
    body::before {
        content: "";
        position: fixed;
        inset: 0;
        background: url("img_flower.png") center/cover no-repeat;
        filter: blur(5px);
        opacity: .9;
        transform: scale(1.08);
        /* ぼかした端が見えないように */
        z-index: -2;
    }
    body::after {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(255, 255, 255, .45);
        z-index: -1;
    }
    .page-wrapper {
        padding: 60px 0;
    }
    .mobile-container {
        box-shadow: 0 12px 30px rgba(97, 63, 26, .08);
        border-radius: 40px;
        /* カンプに合わせたより美しい極丸角 */
        background-color: rgba(255, 255, 255, 0.92);
    }
    /* 両サイドのコンテンツを表示（画面の上下左右中央に完全固定） */
    .side-content {
        display: flex;
        flex-direction: column;
        width: 220px;
        position: fixed;
        /* stickyからfixedに変更して画面に固定 */
        top: 50%;
        /* 画面の上から50%の位置（上下中央の基準） */
        height: auto;
        z-index: 20;
        /* スクロールする中身より手前に表示 */
    }
    /* 左側：画面中央から左へ50px離した位置に「右端」を固定 */
    .side-left {
        right: calc(50% + 240px + 100px);
        /* 画面中央(50%) + スマホ幅の半分(240px) + 間の余白(50px) */
        transform: translateY(-50%);
        /* 自身の高さの半分を引き上げて完全な上下中央に */
        align-items: flex-end;
    }
    .side-left img {
        width: 340px;
    }
    /* 右側：画面中央から右へ50px離した位置に「左端」を固定 */
    .side-right {
        left: calc(50% + 240px + 100px);
        /* 画面中央(50%) + スマホ幅の半分(240px) + 間の余白(50px) */
        transform: translateY(-50%);
        /* 自身の高さの半分を引き上げて完全な上下中央に */
        align-items: flex-start;
    }
    .vertical-text {
        writing-mode: vertical-rl;
        text-orientation: upright;
        font-size: 2.4rem;
        font-family: var(--font-serif-ja);
        color: var(--color-text-main);
        letter-spacing: 0.35em;
        line-height: 1.6;
        text-shadow: 0 2px 12px rgba(255, 255, 255, 0.9);
        opacity: 0.9;
    }
    .pc-qr-box {
        background: rgba(255, 255, 255, 0.85);
        padding: 24px;
        border-radius: 12px;
        box-shadow: 0 10px 30px rgba(97, 63, 26, 0.06);
        text-align: center;
        border: 1px solid rgba(215, 190, 155, 0.3);
    }
    .pc-qr-box p {
        font-size: 0.9rem;
        margin-bottom: 15px;
        color: var(--color-text-main);
        line-height: 1.5;
        font-weight: 500;
    }
    .pc-qr-box .domain {
        display: block;
        font-size: 0.8rem;
        color: var(--color-gold);
        margin-top: 4px;
    }
    .pc-qr-box img {
        width: 140px;
        height: 140px;
        border: 1px solid rgba(215, 190, 155, 0.15);
        border-radius: 8px;
    }
}
/* =========================================
   完全に読み込まれたら表示 & FVアニメーションの無効化
   ========================================= */
body.is-loaded {
    opacity: 1;
}

/* ファーストビューにある要素（ヒーロー、左右の固定テキスト）は
   個別のスクロールアニメーション(js-fade)を無視して、最初から表示させます */
.hero .js-fade,
.side-content .js-fade {
    opacity: 1 !important;
    transform: translateY(0) !important;
}