/* =========================================================================
   初回限定トライアル ページ専用 CSS
   ========================================================================= */

/* ===== ベース・スコープラッパ ===== */
.trial-page {
    color: var(--color-text);
    background: var(--color-bg);
    font-size: 15px;
    line-height: 1.7;
    --trial-red: #C0392B;
    --trial-red-light: #FDF0EE;
    --trial-green-accent: #2A6B4A;
    --trial-green-light: #EAF4EE;
    --trial-radius-sm: 6px;
    --trial-radius-md: 10px;
    --trial-radius-lg: 16px;
}

.trial-page *,
.trial-page *::before,
.trial-page *::after { box-sizing: border-box; }

.trial-container {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 20px;
}
.trial-container--narrow {
    max-width: 820px;
    margin: 0 auto;
}

/* ===== 画像プレースホルダ ===== */
.trial-img-ph {
    background: #F0EDE8;
    border: 2px dashed #C8C4BC;
    border-radius: var(--trial-radius-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #9A9690;
    font-size: 12px;
    text-align: center;
    padding: 12px;
    line-height: 1.5;
}
.trial-img-ph__icon { font-size: 28px; margin-bottom: 2px; }
.trial-img-ph__label { font-weight: 700; font-size: 12px; color: #7A7670; }
.trial-img-ph__hint { font-size: 11px; color: #A8A8A3; }

/* ===== バッジ ===== */
.trial-badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
}
.trial-badge {
    font-size: 11px;
    font-weight: 500;
    padding: 3px 10px;
    border-radius: 99px;
    letter-spacing: 0.02em;
    display: inline-block;
}
.trial-badge--red {
    background: var(--trial-red-light);
    color: var(--trial-red);
    border: 1px solid #F5C6C2;
}
.trial-badge--green {
    background: var(--trial-green-light);
    color: var(--trial-green-accent);
    border: 1px solid #B5DCC6;
}
.trial-badge--gray {
    background: #F2F2EE;
    color: #555552;
    border: 1px solid var(--color-border);
}
.trial-badge--lg {
    font-size: 13px;
    padding: 4px 12px;
}

.trial-strike {
    text-decoration: line-through;
    color: #A8A8A3;
}

/* ===== セクション共通 ===== */
.trial-section {
    padding: 80px 0;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg);
}
.trial-section--last { border-bottom: none; }
.trial-eyebrow {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.18em;
    color: var(--color-primary-dark);
    text-transform: uppercase;
    margin-bottom: 8px;
    text-align: center;
    font-family: var(--font-heading);
}
.trial-section__title {
    font-family: var(--font-heading);
    font-size: 28px;
    font-weight: 700;
    line-height: 1.5;
    margin: 0 0 40px;
    color: var(--color-text);
    letter-spacing: 0.02em;
    text-align: center;
}

/* ===== HERO ===== */
.trial-hero {
    padding: 50px 0 60px;
    background: var(--color-white);
    border-bottom: 1px solid var(--color-border);
}
.trial-hero__layout {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 48px;
    align-items: center;
    margin-bottom: 24px;
}
.trial-hero__img {
    aspect-ratio: 3 / 2;
    border-radius: var(--trial-radius-lg);
    overflow: hidden;
}
.trial-hero__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
.trial-hero__catch {
    font-family: var(--font-heading);
    font-size: 30px;
    font-weight: 700;
    line-height: 1.5;
    margin: 0 0 16px;
    letter-spacing: 0.02em;
    color: var(--color-text);
}
.trial-hero__sub {
    font-size: 15px;
    color: var(--color-text-light);
    line-height: 1.9;
    margin: 0 0 24px;
}

.trial-price { margin-bottom: 20px; }
.trial-price__orig {
    font-size: 13px;
    color: #A8A8A3;
    text-decoration: line-through;
    margin-bottom: 4px;
}
.trial-price__main {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}
.trial-price__num {
    font-size: 52px;
    font-weight: 700;
    line-height: 1;
    color: var(--color-text);
    font-family: var(--font-heading);
}
.trial-price__unit { font-size: 13px; color: var(--color-text-light); }
.trial-price__off {
    font-size: 12px;
    font-weight: 700;
    background: var(--trial-red);
    color: #fff;
    padding: 3px 9px;
    border-radius: 99px;
}

/* CTAボタン */
.trial-cta-btn {
    display: block;
    width: 100%;
    padding: 16px;
    background: #6FA56C;
    color: var(--color-white);
    font-family: var(--font-body, 'Noto Sans JP', sans-serif);
    font-size: 15px;
    font-weight: 700;
    border: none;
    border-radius: var(--trial-radius-md);
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    letter-spacing: 0.05em;
    transition: background 0.18s, opacity 0.18s;
}
.trial-cta-btn:hover {
    background: #5C8F58;
    color: var(--color-white);
    opacity: 1;
}
.trial-cta-note {
    font-size: 12px;
    color: #A8A8A3;
    text-align: center;
    margin: 8px 0 0;
}

/* セット全体フラットレイ */
.trial-hero__flatlay {
    width: 100%;
    aspect-ratio: 1859 / 846;
    border-radius: var(--trial-radius-lg);
    overflow: hidden;
    margin-top: 30px;
}
.trial-hero__flatlay img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ===== TRUST ===== */
.trial-trust__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.trial-trust__card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--trial-radius-md);
    overflow: hidden;
}
.trial-trust__img {
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}
.trial-trust__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.trial-trust__body { padding: 24px 22px 26px; }
.trial-trust__title {
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--color-text);
}
.trial-trust__desc {
    font-size: 14px;
    color: var(--color-text-light);
    line-height: 1.8;
}

/* ===== ITEMS ===== */
.trial-items {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    background: transparent;
}
.trial-item {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    padding: 24px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--trial-radius-lg);
}
.trial-item__thumb {
    width: 110px;
    height: 110px;
    border-radius: var(--trial-radius-sm);
    flex-shrink: 0;
    overflow: hidden;
}
.trial-item__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.trial-item__body { flex: 1; }
.trial-item__name {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 4px;
    color: var(--color-text);
}
.trial-item__size {
    font-size: 12px;
    color: #A8A8A3;
    margin-bottom: 8px;
}
.trial-item__desc {
    font-size: 13px;
    color: var(--color-text-light);
    line-height: 1.7;
    margin-bottom: 12px;
}
.trial-item__price-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.trial-item__price-orig {
    font-size: 12px;
    color: #A8A8A3;
    text-decoration: line-through;
}
.trial-item__included {
    font-size: 11px;
    font-weight: 700;
    color: var(--color-primary-dark);
    background: rgba(200, 150, 62, 0.12);
    padding: 2px 9px;
    border-radius: 99px;
}

.trial-item__total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 22px 28px;
    background: var(--color-bg-alt);
    border-radius: var(--trial-radius-lg);
    margin-top: 20px;
    flex-wrap: wrap;
    gap: 10px;
}
.trial-item__total-label { font-size: 13px; color: var(--color-text-light); }
.trial-item__total-price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}
.trial-item__total-num {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-text);
    font-family: var(--font-heading);
}
.trial-item__total-sub { font-size: 12px; color: var(--color-text-light); }

/* ===== REASONS ===== */
.trial-reason__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.trial-reason__card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--trial-radius-md);
    padding: 28px 26px;
}
.trial-reason__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.trial-reason__icon {
    font-size: 18px;
    color: var(--color-primary);
}
.trial-reason__title {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text);
}
.trial-reason__body {
    font-size: 14px;
    color: var(--color-text-light);
    line-height: 1.85;
    margin: 0;
}
.trial-lifestyle {
    width: 100%;
    aspect-ratio: 2205 / 713;
    border-radius: var(--trial-radius-lg);
    overflow: hidden;
    margin-top: 24px;
}
.trial-lifestyle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ===== VOICES ===== */
.trial-voices {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 12px;
}
.trial-voice {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--trial-radius-md);
    padding: 24px 22px;
}
.trial-voice__header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 12px;
}
.trial-voice__pet {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    flex-shrink: 0;
    overflow: hidden;
}
.trial-voice__pet img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.trial-voice__stars {
    color: #E8A020;
    font-size: 15px;
    letter-spacing: 2px;
    margin-bottom: 2px;
}
.trial-voice__attr { font-size: 12px; color: #A8A8A3; }
.trial-voice__attr-hint { font-size: 10px; color: #C8C4BC; }
.trial-voice__text {
    font-size: 14px;
    line-height: 1.85;
    color: var(--color-text);
    margin: 0;
}
.trial-voice__note {
    font-size: 11px;
    color: #A8A8A3;
    margin-top: 12px;
    text-align: right;
}

/* ===== SUBSCRIPTION ===== */
.trial-sub {
    background: var(--color-white);
    border: 2px solid var(--color-primary-light);
    border-radius: var(--trial-radius-lg);
    padding: 36px 40px;
}
.trial-sub__desc {
    font-size: 15px;
    color: var(--color-text-light);
    line-height: 1.9;
    margin: 0 auto 32px;
    max-width: 760px;
    text-align: center;
}
.trial-sub__desc strong { color: var(--color-primary-dark); }
.trial-sub__steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.trial-sub__step {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}
.trial-sub__num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--color-white);
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
    font-family: var(--font-heading);
}
.trial-sub__step-title {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 2px;
    color: var(--color-text);
}
.trial-sub__step-desc {
    font-size: 13px;
    color: var(--color-text-light);
    line-height: 1.7;
}

/* ===== FAQ ===== */
.trial-faqs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
.trial-faq {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--trial-radius-md);
    padding: 22px 24px;
}
.trial-faq__q {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 10px;
    display: flex;
    gap: 10px;
    color: var(--color-text);
}
.trial-faq__q::before {
    content: "Q";
    color: var(--color-primary);
    font-weight: 700;
    flex-shrink: 0;
    font-family: var(--font-heading);
}
.trial-faq__a {
    font-size: 13px;
    color: var(--color-text-light);
    line-height: 1.85;
    display: flex;
    gap: 10px;
}
.trial-faq__a::before {
    content: "A";
    color: #A8A8A3;
    font-weight: 700;
    flex-shrink: 0;
    font-family: var(--font-heading);
}

/* ===== FINAL CTA ===== */
.trial-final {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--trial-radius-lg);
    padding: 44px 32px;
    text-align: center;
    max-width: 680px;
    margin: 0 auto;
}
.trial-final__orig {
    font-size: 13px;
    color: #A8A8A3;
    text-decoration: line-through;
    margin: 0 0 8px;
}
.trial-final__price-row {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 10px;
    margin-bottom: 22px;
    flex-wrap: wrap;
}
.trial-final__num {
    font-size: 44px;
    font-weight: 700;
    color: var(--color-text);
    font-family: var(--font-heading);
}
.trial-final__unit { font-size: 14px; color: var(--color-text-light); }

/* ===== レスポンシブ ===== */
/* タブレット */
@media (max-width: 920px) {
    .trial-hero__layout {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .trial-hero__catch { font-size: 26px; }
    .trial-items { grid-template-columns: 1fr; }
    .trial-voices { grid-template-columns: 1fr 1fr; }
    .trial-faqs { grid-template-columns: 1fr; }
    .trial-sub__steps { grid-template-columns: 1fr; gap: 16px; }
}

/* スマホ */
@media (max-width: 600px) {
    .trial-hero { padding: 36px 0 44px; }
    .trial-hero__catch { font-size: 22px; }
    .trial-hero__sub { font-size: 14px; }
    .trial-price__num { font-size: 42px; }
    .trial-section { padding: 50px 0; }
    .trial-section__title { font-size: 21px; margin-bottom: 28px; }
    .trial-trust__grid { grid-template-columns: 1fr; }
    .trial-reason__grid { grid-template-columns: 1fr; }
    .trial-voices { grid-template-columns: 1fr; }
    .trial-item { padding: 18px; gap: 14px; }
    .trial-item__thumb { width: 88px; height: 88px; }
    .trial-final { padding: 32px 22px; }
    .trial-final__num { font-size: 38px; }
    .trial-sub { padding: 24px 20px; }
    .trial-item__total { padding: 18px 20px; }
}