/* ============================================================
   front-page.css — トップページ固有スタイル
   ============================================================ */

/* ===== FIRST VIEW ===== */
.fv { position: relative; height: 100vh; min-height: 600px; overflow: hidden; }
.fv__slides { width: 100%; height: 100%; position: relative; }
.fv__slide { position: absolute; inset: 0; display: flex; align-items: center; opacity: 0; transition: opacity 1s ease; pointer-events: none; }
.fv__slide.is-active { opacity: 1; pointer-events: auto; }
.fv__slide-bg { position: absolute; inset: 0; overflow: hidden; }
.fv__slide-bg picture { display: block; width: 100%; height: 100%; }
.fv__slide-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
/* heroZoom 無効化 */
.fv__dots { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; z-index: 10; }
.fv__dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.4); border: none; cursor: pointer; transition: all 0.3s ease; padding: 0; }
.fv__dot.is-active { background: rgba(255,255,255,1); transform: scale(1.3); }
.fv__dot:hover { background: rgba(255,255,255,0.8); }
.fv__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.3); color: white; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; backdrop-filter: blur(4px); }
.fv__arrow:hover { background: rgba(255,255,255,0.3); }
.fv__arrow--prev { left: 32px; }
.fv__arrow--next { right: 32px; }
.fv__counter { position: absolute; bottom: 44px; right: 40px; z-index: 10; display: flex; align-items: center; gap: 4px; font-family: var(--font-en); font-size: 12px; letter-spacing: 0.1em; color: rgba(255,255,255,0.6); }
.fv__counter-current { color: rgba(255,255,255,1); font-size: 16px; }
/* ── オーバーレイレイヤー ── */
.fv__slide-overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

/* ── テキスト色バリアント（ダーク） ── */
.fv__slide--text-dark .fv__content { color: var(--color-text); }
.fv__slide--text-dark .fv__eyebrow { color: var(--color-text-mid); border-color: rgba(0,0,0,0.25); }
.fv__slide--text-dark .fv__eyebrow::before { background: var(--color-text-mid); }
.fv__slide--text-dark .fv__headline { color: var(--color-text); }
.fv__slide--text-dark .fv__subtext { color: var(--color-text-mid); }
.fv__slide--text-dark .btn--outline-light { color: var(--color-text); border-color: rgba(0,0,0,0.35); }
.fv__slide--text-dark .btn--outline-light:hover { background: rgba(0,0,0,0.07); }

.fv__pattern { position: absolute; top: 0; right: 0; width: 55%; height: 100%; background: linear-gradient(135deg, transparent 40%, rgba(196,163,90,0.08) 100%); pointer-events: none; }
.fv__pattern::before { content: ''; position: absolute; top: -20%; right: -10%; width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(circle, rgba(196,163,90,0.12) 0%, transparent 70%); }
.fv__pattern::after { content: ''; position: absolute; bottom: 10%; right: 15%; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, rgba(138,158,138,0.1) 0%, transparent 70%); }
.fv__content { position: relative; z-index: 2; padding: 0 clamp(24px, 8vw, 120px); max-width: 860px; color: var(--color-white); }
/* ビジュアルなしスライドではテキストを全幅オーバーレイ */
.fv__slide:not(:has(.fv__visual)) .fv__content { max-width: 1000px; }
.fv__eyebrow { font-family: var(--font-en); font-size: 11px; font-weight: 400; letter-spacing: 0.3em; color: rgba(255,255,255,0.8); margin-bottom: 24px; text-transform: uppercase; display: flex; align-items: center; gap: 16px; }
.fv__eyebrow::before { content: ''; display: block; width: 40px; height: 1px; background: rgba(255,255,255,0.8); }
.fv__headline { font-family: var(--font-mincho); font-size: clamp(36px, 5.5vw, 64px); font-weight: 500; line-height: 1.5; letter-spacing: 0.08em; margin-bottom: 24px; color: #fff; }
.fv__subtext { font-size: clamp(14px, 1.5vw, 17px); letter-spacing: 0.12em; color: #fff; margin-bottom: 48px; }
.fv__actions { display: flex; gap: 16px; flex-wrap: wrap; }
.fv__scroll-hint { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 12px; color: rgba(255,255,255,0.5); font-family: var(--font-en); font-size: 10px; letter-spacing: 0.25em; z-index: 2; }
.fv__scroll-line { width: 1px; height: 48px; background: linear-gradient(to bottom, rgba(255,255,255,0.5), transparent); animation: scrollLine 1.8s ease-in-out infinite; }
@keyframes scrollLine { 0% { transform: scaleY(0); transform-origin: top; opacity: 1; } 50% { transform: scaleY(1); transform-origin: top; opacity: 1; } 51% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; } }
.fv__visual { position: absolute; right: clamp(40px, 8vw, 140px); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 16px; z-index: 3; }
.fv__visual-img { width: clamp(180px, 22vw, 320px); height: clamp(220px, 28vw, 400px); border-radius: 20px; background: rgba(255,255,255,0.08); border: 1.5px solid rgba(255,255,255,0.25); backdrop-filter: blur(8px); position: relative; overflow: hidden; }
.fv__visual-img img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.fv__visual-label { font-family: var(--font-en); font-size: 11px; letter-spacing: 0.2em; color: rgba(255,255,255,0.35); text-transform: uppercase; border: 1px solid rgba(255,255,255,0.2); padding: 6px 14px; border-radius: 100px; }
.fv__visual-badges { display: flex; gap: 10px; }
.fv__visual-badge { background: rgba(255,255,255,0.15); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.3); border-radius: 12px; padding: 10px 14px; text-align: center; font-size: 11px; color: rgba(255,255,255,0.9); line-height: 1.5; letter-spacing: 0.04em; }
.fv__visual-badge strong { display: block; font-size: 13px; font-weight: 700; color: #fff; }
.fv__visual-badge--sub { background: rgba(255,255,255,0.08); font-size: 10px; }
/* PC / SP テキスト切り替え（FV 専用） */
.fv__text--sp { display: none; }
.fv__text--pc { display: block; }
.fv__slide.is-active .fv__eyebrow  { animation: fadeInUp 0.8s ease 0.2s both; }
.fv__slide.is-active .fv__headline { animation: fadeInUp 0.8s ease 0.4s both; }
.fv__slide.is-active .fv__subtext  { animation: fadeInUp 0.8s ease 0.6s both; }
.fv__slide.is-active .fv__actions  { animation: fadeInUp 0.8s ease 0.8s both; }

/* ===== BRAND STRIP ===== */
.brand-strip { background: var(--color-dark); padding: 16px 0; overflow: hidden; }
.brand-strip__inner { display: flex; align-items: center; justify-content: center; gap: 32px; font-family: var(--font-mincho); font-size: 13px; letter-spacing: 0.12em; color: var(--color-beige); font-weight: 400; }
.brand-strip__dot { color: var(--color-gold); font-size: 16px; }

/* ===== BRAND IDENTITY ===== */
.brand-identity { background: var(--color-white); padding: 96px 0; }
.brand-identity__inner { max-width: 960px; margin: 0 auto; padding: 0 var(--container-pad); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 32px; }
.brand-identity__deco { width: 1px; height: 56px; background: linear-gradient(to bottom, transparent, var(--color-gold), transparent); }
.brand-identity__tagline { font-family: var(--font-mincho); font-size: clamp(22px, 3.5vw, 36px); font-weight: 500; letter-spacing: 0.15em; color: var(--color-text); line-height: 1.6; }
.brand-identity__body { font-family: var(--font-mincho); font-size: clamp(14px, 1.6vw, 17px); line-height: 2.2; letter-spacing: 0.08em; color: var(--color-text-mid); }

/* ===== FEATURE / CAMPAIGN ===== */
.feature { padding: var(--section-gap) 0; background: var(--color-cream); }
.feature__heading { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.feature__title { font-family: var(--font-mincho); font-size: 22px; font-weight: 500; letter-spacing: 0.06em; color: var(--color-text); }
.feature__all-link { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--color-text-mid); text-decoration: none; }
.feature__all-link svg { color: var(--color-gold); }
.feature__all-link:hover { color: var(--color-text); }
.feature__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; }
.feature__sub-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.feature-card { display: flex; flex-direction: column; background: transparent; border-radius: 10px; overflow: hidden; border: 1px solid #E8E0D4; transition: transform 0.22s ease, box-shadow 0.22s ease; text-decoration: none; color: inherit; }
.feature-card:hover { transform: translateY(-4px); box-shadow: 0 8px 28px rgba(44,20,28,0.10); }
.feature-card--hero { height: 100%; }
.feature-card--hero .feature-card__img-wrap { flex: 1; position: relative; overflow: hidden; }
.feature-card--hero .feature-card__thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.feature-card__img-wrap { position: relative; overflow: hidden; }
.feature-card--hero .feature-card__img { width: 100%; height: 100%; min-height: 280px; background-size: cover; background-position: center; transition: transform 0.6s ease; }
.feature-card--sm .feature-card__img-wrap { aspect-ratio: 16 / 9; }
.feature-card--sm .feature-card__img { width: 100%; height: 100%; background-size: cover; background-position: center; transition: transform 0.5s ease; }
.feature-card--sm .feature-card__img-wrap { position: relative; padding-top: 65%; height: 0; aspect-ratio: unset; }
.feature-card--sm .feature-card__thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.feature-card:hover .feature-card__img { transform: scale(1.04); }
.feature-card__img-ph { display: none; }
.feature-card__img--1 { background-color: #B0C4A8; background-image: url('../images/campaign-main.jpg'); }
.feature-card__img--2 { background-color: #C4A898; background-image: url('../images/campaign-02.jpg'); }
.feature-card__img--3 { background-color: #A8B8C8; background-image: url('../images/campaign-03.jpg'); }
.feature-card__img--4 { background-color: #98C4A8; background-image: url('../images/campaign-04.jpg'); }
.feature-card__img--5 { background-color: #C8B4A0; background-image: url('../images/campaign-05.jpg'); }
.feature-card--hero .feature-card__caption { font-size: 13px; }
.feature-card__ext { display: inline; vertical-align: middle; color: #999; margin-left: 3px; }

/* ===== INGREDIENTS ===== */
.ingredients { position: relative; padding: var(--section-gap) 0; background: linear-gradient(180deg, #1E3C30 0%, #122818 100%); overflow: hidden; }
.ingredients__bg-pattern { position: absolute; inset: 0; background-image: radial-gradient(circle at 10% 20%, rgba(196,163,90,0.05) 0%, transparent 50%), radial-gradient(circle at 90% 80%, rgba(138,158,138,0.05) 0%, transparent 50%); pointer-events: none; }
.ingredients__list { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid rgba(255,255,255,0.08); }
.ingredient-item { display: flex; align-items: flex-start; gap: 28px; padding: 32px 28px; border-bottom: 1px solid rgba(255,255,255,0.08); border-right: 1px solid rgba(255,255,255,0.06); transition: all var(--transition); }
.ingredient-item:nth-child(even) { border-right: none; }
.ingredient-item:last-child { grid-column: span 2; border-right: none; }
.ingredient-item:hover { background: rgba(255,255,255,0.03); padding-left: 36px; opacity: 1; }
.ingredient-item:last-child:hover { padding-left: 40px; }
.ingredient-item__num { font-family: var(--font-en); font-size: 36px; font-weight: 300; color: rgba(196,163,90,0.3); min-width: 60px; line-height: 1; padding-top: 4px; letter-spacing: -0.02em; }
.ingredient-item__body { flex: 1; }
.ingredient-item__name { font-family: var(--font-mincho); font-size: 22px; font-weight: 500; letter-spacing: 0.06em; color: var(--color-white); margin-bottom: 4px; }
.ingredient-item__name-en { font-family: var(--font-en); font-size: 12px; letter-spacing: 0.15em; color: var(--color-gold); margin-bottom: 12px; font-weight: 400; }
.ingredient-item__desc { font-size: 14px; color: rgba(255,255,255,0.65); line-height: 1.8; max-width: 560px; margin-bottom: 12px; }
.ingredient-item__tags { display: flex; gap: 6px; flex-wrap: wrap; }
.ingredient-item__arrow { font-family: var(--font-en); font-size: 20px; color: rgba(196,163,90,0.5); transition: all var(--transition); padding-top: 8px; }
.ingredient-item:hover .ingredient-item__arrow { color: var(--color-gold); transform: translateX(6px); }

/* ===== TRUST / REVIEWS ===== */
.trust { padding: var(--section-gap) 0; background: var(--color-white); }
.reviews__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 40px; }
.review-card { padding: 28px; background: var(--color-cream); border: 1px solid var(--color-beige); border-radius: var(--radius-lg); position: relative; }
.review-card::before { content: '"'; position: absolute; top: 16px; right: 20px; font-family: Georgia, serif; font-size: 64px; color: var(--color-beige); line-height: 1; }
.review-card__stars { font-size: 14px; color: var(--color-gold); letter-spacing: 2px; margin-bottom: 12px; }
.review-card__text { font-size: 14px; line-height: 1.9; color: var(--color-text); margin-bottom: 20px; font-style: italic; }
.review-card__footer { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.review-card__name { font-size: 13px; font-weight: 700; color: var(--color-text); }
.review-card__age { font-size: 12px; color: var(--color-text-light); }
.review-card__product { font-size: 11px; padding: 2px 8px; background: var(--color-gold-pale); color: var(--color-gold); border-radius: 100px; margin-left: auto; }
.trust__more { text-align: center; margin-bottom: 56px; }
.trust__links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.trust-link-card { display: flex; align-items: center; gap: 16px; padding: 24px; background: var(--color-cream); border: 1px solid var(--color-beige); border-radius: var(--radius-md); transition: all var(--transition); }
.trust-link-card:hover { border-color: var(--color-sage-light); background: var(--color-sage-pale); transform: translateY(-2px); opacity: 1; }
.trust-link-card__icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--color-sage); }
.trust-link-card__body { flex: 1; }
.trust-link-card__body h3 { font-family: var(--font-mincho); font-size: 15px; font-weight: 500; margin-bottom: 4px; }
.trust-link-card__body p { font-size: 12px; color: var(--color-text-mid); line-height: 1.6; }
.trust-link-card > span { color: var(--color-sage); font-size: 16px; flex-shrink: 0; transition: transform var(--transition); }
.trust-link-card:hover > span { transform: translateX(4px); }

/* ===== COLUMN ===== */
.column { padding: var(--section-gap) 0; background: var(--color-cream); }
.column__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.column-card { display: flex; flex-direction: column; background: var(--color-white); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-beige); transition: all var(--transition); text-decoration: none; color: inherit; height: 100%; }
.column-card:hover { box-shadow: 0 12px 40px rgba(44,20,28,0.10); transform: translateY(-4px); }
.column-card__img-wrap { overflow: hidden; flex-shrink: 0; }
.column-card__img { width: 100%; aspect-ratio: 1 / 1; background-size: cover; background-position: center; transition: transform 0.6s ease; }
.column-card:hover .column-card__img { transform: scale(1.05); }
.column-card__img--1 { background-color: #C8DABE; background-image: url('../images/column-01.jpg'); border-bottom: 1px solid var(--color-beige); }
.column-card__img--2 { background-color: #DEBEBC; background-image: url('../images/column-02.jpg'); border-bottom: 1px solid var(--color-beige); }
.column-card__img--3 { background-color: #BEDAC8; background-image: url('../images/column-03.jpg'); border-bottom: 1px solid var(--color-beige); }
.column-card__img--4 { background-color: #DED0C8; background-image: url('../images/column-04.jpg'); border-bottom: 1px solid var(--color-beige); }
.column-card__img--5 { background-color: #C8CED8; background-image: url('../images/column-05.jpg'); border-bottom: 1px solid var(--color-beige); }
.column-card__img--6 { background-color: #D8C8D4; background-image: url('../images/column-06.jpg'); border-bottom: 1px solid var(--color-beige); }
.column-card__img-ph { display: none; }
.column-card__content { display: flex; flex-direction: column; flex: 1; padding: 20px; }
.column-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px; }
.column-card__tag { display: inline-block; padding: 2px 10px; background: var(--color-sage-pale); color: var(--color-sage); border: 1px solid var(--color-sage-light); border-radius: 100px; font-size: 11px; font-weight: 500; letter-spacing: 0.04em; }
.column-card__date { font-family: var(--font-en); font-size: 11px; color: var(--color-text-light); letter-spacing: 0.06em; margin-top: 2px; }
.column-card__title { font-family: var(--font-mincho); font-size: 15px; font-weight: 500; line-height: 1.65; color: var(--color-text); margin-bottom: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; flex: 1; }
.column-card__excerpt { display: none; }
.column-card__footer { display: none; }
.column__more { text-align: center; margin-top: 48px; }

/* ===== NEWS ===== */
.news { padding: var(--section-gap-sm) 0; background: var(--color-cream); border-top: 1px solid var(--color-beige); }
.news__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 32px; }
.news__title { font-family: var(--font-en); font-size: 28px; font-weight: 400; letter-spacing: 0.12em; color: var(--color-text); }
.news__more { font-size: 13px; color: var(--color-sage); font-weight: 500; }
.news__list { display: flex; flex-direction: column; gap: 0; }
.news__item { display: grid; grid-template-columns: 100px 80px 1fr; gap: 16px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--color-beige); }
.news__item:first-child { border-top: 1px solid var(--color-beige); }
.news__date { font-family: var(--font-en); font-size: 13px; color: var(--color-text-light); letter-spacing: 0.04em; }
.news__category { display: inline-block; padding: 3px 10px; font-size: 11px; background: var(--color-sage-pale); color: var(--color-sage); border-radius: 4px; letter-spacing: 0.04em; text-align: center; }
.news__text { font-size: 14px; color: var(--color-text); transition: color var(--transition); }
.news__text:hover { color: var(--color-sage); opacity: 1; }

/* ===== BRAND COMMITMENT ===== */
.brand-commitment { background: linear-gradient(135deg, #223028 0%, #141E18 100%); }
.brand-commitment__inner { padding: var(--section-gap) 0; }
.commitment__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.commitment-item { text-align: center; padding: 0 16px; }
.commitment-item__icon { width: 80px; height: 80px; margin: 0 auto 24px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(196,163,90,0.4); border-radius: 50%; color: var(--color-gold); }
.commitment-item__title { font-family: var(--font-mincho); font-size: 17px; font-weight: 500; letter-spacing: 0.06em; color: var(--color-white); margin-bottom: 14px; line-height: 1.4; }
.commitment-item__desc { font-size: 13px; color: rgba(255,255,255,0.6); line-height: 1.9; }

/* ===== BRAND LINES ===== */
.brand-lines { padding: var(--section-gap) 0; background: #F5F1EB; }
.brand-lines__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.brand-line-card { background: #FFFFFF; border-radius: 12px; overflow: hidden; border: 1px solid #EDE8E0; display: flex; flex-direction: column; transition: transform 0.25s ease, box-shadow 0.25s ease; text-decoration: none; color: inherit; }
.brand-line-card:hover { transform: translateY(-5px); box-shadow: 0 10px 36px rgba(44,20,28,0.10); }
.brand-line-card__img { width: 100%; aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; background-size: cover; background-position: center; }
.brand-line-card--kireide  .brand-line-card__img { background-color: #EAF1E6; background-image: url('../images/brand-kireide.jpg'); }
.brand-line-card--muse     .brand-line-card__img { background-color: #F2EBE6; background-image: url('../images/brand-muse.jpg'); }
.brand-line-card--skincare .brand-line-card__img { background-color: #F1EDEA; background-image: url('../images/brand-skincare.jpg'); }
.brand-line-card--food     .brand-line-card__img { background-color: #E6F0EB; background-image: url('../images/brand-food.jpg'); }
.brand-line-card__photo { display: none; }
.brand-line-card__body { padding: 18px 20px 22px; background: #FFFFFF; flex: 1; }
.brand-line-card__name { font-size: 15px; font-weight: 700; color: #2A2420; letter-spacing: 0.03em; display: flex; align-items: center; gap: 5px; margin-bottom: 6px; line-height: 1.4; }
.brand-line-card__ext { flex-shrink: 0; color: #999; margin-top: 1px; }
.brand-line-card__catch { font-family: var(--font-mincho); font-size: 13px; color: var(--color-text); line-height: 1.7; margin-bottom: 6px; letter-spacing: 0.04em; }
.brand-line-card__desc { font-size: 12px; color: #6A6260; line-height: 1.85; }

/* ===== LINE CTA ===== */
.line-cta { background: linear-gradient(135deg, #1A2E1A 0%, #0E1E0E 100%); position: relative; overflow: hidden; }
.line-cta::before { content: ''; position: absolute; top: -30%; right: -10%; width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(circle, rgba(6,199,85,0.08) 0%, transparent 70%); pointer-events: none; }
.line-cta__inner { padding-top: var(--section-gap); padding-bottom: var(--section-gap); }
.line-cta__content { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.line-cta__eyebrow { font-family: var(--font-en); font-size: 11px; letter-spacing: 0.25em; color: var(--color-line); margin-bottom: 16px; text-transform: uppercase; display: flex; align-items: center; gap: 12px; }
.line-cta__eyebrow::before { content: ''; display: block; width: 30px; height: 1px; background: var(--color-line); }
.line-cta__title { font-family: var(--font-mincho); font-size: clamp(28px, 3vw, 38px); font-weight: 500; line-height: 1.5; letter-spacing: 0.06em; color: var(--color-white); margin-bottom: 20px; }
.line-cta__desc { font-size: 14px; color: rgba(255,255,255,0.7); line-height: 1.9; margin-bottom: 28px; }
.line-cta__benefits { display: flex; flex-direction: column; gap: 10px; margin-bottom: 36px; }
.line-cta__benefits li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: rgba(255,255,255,0.85); }
.line-cta__benefits svg { flex-shrink: 0; color: var(--color-line); margin-top: 2px; }
.line-cta__image { display: flex; justify-content: center; align-items: center; }
.line-cta__phone-mock { width: 280px; height: 420px; background: var(--color-dark); border-radius: 32px; padding: 20px 12px; box-shadow: 0 40px 80px rgba(44,20,28,0.35), inset 0 0 0 1px rgba(255,255,255,0.1); position: relative; }
.line-cta__phone-screen { background: #ECE5D8; border-radius: 20px; height: 100%; overflow: hidden; display: flex; flex-direction: column; }
.line-cta__phone-header { background: var(--color-line); padding: 14px 16px; display: flex; align-items: center; gap: 10px; color: white; font-size: 13px; font-weight: 500; }
.line-cta__phone-avatar { width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.3); }
.line-cta__phone-messages { flex: 1; padding: 16px 12px; display: flex; flex-direction: column; gap: 12px; }
.line-cta__msg { background: white; border-radius: 0 16px 16px 16px; padding: 12px 14px; font-size: 12px; line-height: 1.7; color: var(--color-text); max-width: 85%; box-shadow: 0 1px 4px rgba(0,0,0,0.1); }
.line-cta__msg--btn { background: var(--color-line); border-radius: 8px; text-align: center; max-width: 100%; }
.line-cta__msg--btn span { color: white; font-weight: 500; }

/* ===== SUBSCRIPTION INFO ===== */
.subscription-info {
  padding: var(--section-gap) 0;
  background: var(--color-white);
}
/* 横長カードグリッド */
.member-benefit-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}
.member-benefit-card-h {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  background: var(--color-cream);
  border: 1px solid var(--color-beige);
  border-radius: 16px;
  padding: 28px 28px 28px 24px;
  position: relative;
  transition: box-shadow .2s;
}
.member-benefit-card-h:hover {
  box-shadow: 0 4px 20px rgba(196,163,90,.1);
}
.member-benefit-card-h__num {
  position: absolute;
  top: 16px; right: 20px;
  font-family: var(--font-en);
  font-size: 11px;
  font-weight: 700;
  color: var(--color-beige-mid);
  letter-spacing: .1em;
}
.member-benefit-card-h__icon {
  flex-shrink: 0;
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-white);
  border-radius: 50%;
  border: 1.5px solid var(--color-gold-light);
  color: var(--color-gold);
  margin-top: 2px;
}
.member-benefit-card-h__body { flex: 1; }
.member-benefit-card-h__title {
  font-family: var(--font-mincho);
  font-size: 17px;
  font-weight: 500;
  color: var(--color-text);
  margin: 0 0 8px;
  line-height: 1.5;
  letter-spacing: .04em;
}
.member-benefit-card-h__desc {
  font-size: 13px;
  color: var(--color-text-mid);
  line-height: 1.85;
  margin: 0;
}
@media (max-width: 768px) {
  .member-benefit-cards { grid-template-columns: 1fr; }
}
.subscription-info__desc {
  font-size: 12.5px;
  color: var(--color-text-mid);
  line-height: 1.85;
  margin: 0;
  text-align: center;
}
.subscription-info__desc strong { color: var(--color-text); }
.subscription-info__tel {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--color-rose);
  margin-top: 6px;
  letter-spacing: .04em;
}
.subscription-info__desc small {
  display: block;
  font-size: 11px;
  color: var(--color-text-light);
  margin-top: 2px;
}
.subscription-info__point--important {
  border: 2px solid var(--color-rose-light);
  background: var(--color-sage-pale);
}
.subscription-info__no--important {
  background: var(--color-rose);
  font-family: var(--font-mincho);
  font-size: 11px;
  width: auto;
  padding: 0 10px;
  border-radius: 100px;
  height: 26px;
}
.subscription-info__icon--important {
  background: var(--color-pink-light);
  border-color: var(--color-pink);
  color: var(--color-rose);
}
.subscription-info__point--important .subscription-info__title em {
  color: var(--color-rose);
}
.subscription-info__note {
  font-size: 11px;
  color: var(--color-text-light);
  text-align: center;
  margin: 0 0 48px;
  line-height: 1.7;
}
.subscription-info__cta { text-align: center; }

/* ===== LINE BANNER ===== */
.line-banner { background: var(--color-dark); padding: var(--section-gap-sm) 0; }

/* ===== MEDIA QUERIES ===== */
@media (max-width: 900px) {
  .feature__grid { grid-template-columns: 1fr; }
  .feature__sub-grid { grid-template-columns: 1fr 1fr; }
  .reviews__grid { grid-template-columns: repeat(2, 1fr); }
  .trust__links { grid-template-columns: repeat(2, 1fr); }
  .column__grid { grid-template-columns: repeat(2, 1fr); }
  .line-cta__content { grid-template-columns: 1fr; gap: 40px; }
  .line-cta__image { order: -1; }
  .news__item { grid-template-columns: 90px 70px 1fr; }
  .ingredients__list { grid-template-columns: 1fr; }
  .ingredient-item:nth-child(even) { border-right: none; }
  .ingredient-item:last-child { grid-column: span 1; }
  .ingredient-item { gap: 20px; padding: 24px 16px; }
  .ingredient-item__num { font-size: 28px; min-width: 44px; }
}
@media (max-width: 1100px) {
  .commitment__grid { grid-template-columns: repeat(2, 1fr); gap: 40px; }
  .brand-lines__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .brand-identity { padding: 64px 0; }
  .fv__text--pc { display: none; }
  .fv__text--sp { display: block; }
}
@media (max-width: 900px) {
  .fv__visual { display: none; }
  .fv__slide { align-items: flex-start; }
  .fv__content { padding-top: clamp(80px, 15vw, 120px); height: 100%; }
  .fv__actions { position: absolute; bottom: 140px; left: 0; right: 0; padding: 0 24px; z-index: 3; }
}
@media (max-width: 640px) {
  .fv__headline { font-size: clamp(26px, 7.5vw, 38px); }
  .fv__actions { flex-direction: column; gap: 12px; }
  .fv__actions .btn { width: 100%; justify-content: center; }
  .brand-strip__inner { font-size: 11px; gap: 16px; flex-wrap: wrap; justify-content: center; }
  .commitment__grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .commitment-item { padding: 0 8px; }
  .commitment-item__title { font-size: 14px; }
  .commitment-item__desc { font-size: 12px; }
  .feature__sub-grid { grid-template-columns: 1fr 1fr; }
  .brand-lines__grid { grid-template-columns: 1fr 1fr; }
  .column__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .reviews__grid { grid-template-columns: 1fr; }
  .trust__links { grid-template-columns: 1fr; }
  .news__item { grid-template-columns: 1fr; gap: 6px; padding: 16px 0; }
  .fv__arrow { width: 36px; height: 36px; }
  .fv__arrow--prev { left: 12px; }
  .fv__arrow--next { right: 12px; }
  .fv__counter { right: 20px; bottom: 36px; }
  .fv__dots { bottom: 36px; }
  .subscription-info__card { padding: 22px 16px 20px; }
  .subscription-info__card-title { font-size: 17px; }
  .subscription-info__points-grid { grid-template-columns: 1fr; gap: 10px; }
  .subscription-info__title { font-size: 15px; }
}
@media (max-width: 768px) {
  .subscription-info__points-grid { grid-template-columns: repeat(2, 1fr); }
}
