/* --- アンカーリンク --- */
@media screen and (min-width: 768px) {
    html {
        scroll-padding-top: 80px;
        /*scroll-behavior: smooth;*/
    }
}

/* --- Base Variables: サイト全体で使い回せる設定 --- */
:root {
    --color-primary: #d32f2f; /* 還暦の赤 */
    --color-bg-light: #f9f9f9;
    --color-text-main: #333333;
    --color-text-sub: #666666;
    --space-m: 40px;
    --space-s: 20px;
    --border-radius: 8px;
    --font-size-base: 1.15rem;      /* 基本サイズ（約18.4px） */
    --font-size-m: 1.25rem;         /* FAQの質問など（20px） */
    --font-size-l: 1.5rem;          /* 中見出し（24px） */
    --font-size-xl: 2.0rem;         /* 大見出し（32px） */
    --line-height-standard: 1.8;    /* 読みやすい行間 */
}

/* --- Component: Breadcrumb --- */
.c-breadcrumb {
    background-color: #fcfcfc; /* ほんのりグレーでヘッダーと区別 */
    border-bottom: 1px solid #eee;
    padding: 15px 0;
    margin-top: 30px !important;
}

/* SP（スマホ）での調整 */
@media screen and (max-width: 767px) {
    .c-breadcrumb {
        /*margin-top: 120px !important;*/
        padding: 10px 0;
    }
}

.c-breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.9rem; /* パンくずは少し控えめなサイズでOK */
}

.c-breadcrumb__item {
    display: flex;
    align-items: center;
    color: var(--color-text-sub);
}

/* 区切り記号（>）の挿入 */
.c-breadcrumb__item:not(:last-child)::after {
    content: "\e5cc"; /* Material Symbols の 'chevron_right' */
    font-family: 'Material Symbols Outlined';
    margin: 0 10px;
    font-size: 1rem;
    color: #ccc;
}

.c-breadcrumb__item a {
    color: var(--color-text-sub);
    text-decoration: none;
    transition: color 0.2s;
}

.c-breadcrumb__item a:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

/* 現在のページ（リンクなし） */
.c-breadcrumb__item[aria-current="page"] {
    color: var(--color-text-main);
    font-weight: bold;
}

@media screen and (max-width: 767px) {
    .c-breadcrumb {
        padding: 10px 0;
    }
    .c-breadcrumb__list {
        font-size: 0.8rem;
    }
}

.ly-section p,
.c-origin__text,
.t-contents__txt,
.c-faq__a {
    font-size: var(--font-size-base) !important;
    line-height: var(--line-height-standard) !important;
    color: var(--color-text-main);
}

/* --- Layout: セクション間の余白管理 --- */
.ly-section {
    padding: var(--space-m) 20px;
    max-width: 900px;
    margin: 0 auto;
}

/* --- Component: Visual Header --- */
.c-visual-header {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.c-visual-header__image-wrapper {
    width: 100%;
    aspect-ratio: 16 / 9; /* スマホでも崩れないアスペクト比固定 */
}

.c-visual-header__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.c-visual-header__content {
    background-color: #fff;
    padding: var(--space-s);
    text-align: center;
}

.c-visual-header__title {
    font-size: 1.5rem;
    font-weight: bold;
    line-height: 1.4;
    color: var(--color-text-main);
    margin: 0;
}

.c-visual-header__subtitle {
    font-size: 1rem;
    color: var(--color-primary);
    display: block;
    margin-top: 8px;
}

/* --- Component: Summary Box --- */
.c-summary-box {
    margin-top: 20px;
}

.c-summary-box__inner {
    background-color: var(--color-bg-light);
    border: 2px solid #eee;
    border-radius: var(--border-radius);
    padding: var(--space-s);
    position: relative;
}

.c-summary-box__label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 15px;
}

.c-summary-box__icon {
    background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 4px;
}

.c-summary-box__label-text {
    font-size: 0.9rem;
    font-weight: bold;
    color: var(--color-text-main);
}

.c-summary-box__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.c-summary-box__item {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--color-text-main);
    margin-bottom: 10px;
    padding-left: 1.2em;
    position: relative;
}

.c-summary-box__item::before {
    content: "・";
    position: absolute;
    left: 0;
    color: var(--color-primary);
    font-weight: bold;
}

.c-summary-box__item:last-child {
    margin-bottom: 0;
}

/* PCサイズ調整（768px以上） */
@media screen and (min-width: 768px) {
    .c-visual-header__content {
        /* 中央揃えを解除し、左下に絶対配置 */
        position: absolute;
        top: auto;   /* top: 50% を打ち消し */
        bottom: 30px; /* 下からの距離（お好みで調整） */
        left: 30px;   /* 左からの距離（お好みで調整） */
        transform: none; /* transform: translate を打ち消し */
        
        /* ボックスの見た目調整 */
        width: fit-content; /* 中身のテキストに合わせて幅を可変にする */
        max-width: 600px;
        background-color: rgba(255, 255, 255, 0.9); /* 少し透過を弱めて読みやすく */
        padding: 25px 30px;
        border-radius: 4px;
        text-align: left; /* テキストも左寄せにする */
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    }

    .c-visual-header__title {
        font-size: 2.0rem;
    }


    .c-visual-header__subtitle {
        font-size: 1.1rem;
        margin-top: 8px;
    }
}

/* --- Component: Smart Navigation --- */
.c-smart-nav {
    padding-top: 0; /* Summary Boxとの距離を調整 */
}

.c-smart-nav__title {
    font-size: 0.85rem;
    font-weight: bold;
    color: var(--color-text-sub);
    margin-bottom: 12px;
    text-align: center;
}

.c-smart-nav__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* スマホは2列 */
    gap: 10px;
}

.c-smart-nav__link {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 10px;
    background-color: #fff;
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: bold;
    border-radius: var(--border-radius);
    transition: all 0.3s ease;
}

.c-smart-nav__link:hover {
    background-color: var(--color-primary);
    color: #fff;
}

/* PCサイズ調整 */
@media screen and (min-width: 768px) {
    .c-smart-nav__grid {
        grid-template-columns: repeat(4, 1fr); /* PCは4列並び */
    }
}

/* --- Component: Section Eyecatch Image --- */
.c-section-eyecatch {
    margin: 20px 0 30px 0; /* 上下の余白 */
    width: 100%;
    overflow: hidden;
    border-radius: 8px; /* 角を少し丸めると今風になります */
}

.c-section-eyecatch img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    /* transitionを入れておくと、ホバー時に少し動かす演出も可能 */
    transition: transform 0.3s ease;
}

/* 軽い演出：マウスを乗せると少しだけズーム */
.c-section-eyecatch:hover img {
    transform: scale(1.03);
}

@media screen and (max-width: 767px) {
    .c-section-eyecatch {
        margin: 15px 0 20px 0; /* スマホでは余白を少し詰める */
    }
}

/* --- Common: Section Titles --- */
.c-section-title {
    font-size: var(--font-size-xl) !important;
    color: var(--color-text-main);
    border-left: 4px solid var(--color-primary);
    padding: 5px 15px;
    margin-bottom: var(--space-s);
    position: relative;
}

.c-sub-title {
    font-size: var(--font-size-l) !important;
    font-weight: bold;
    margin: 30px 0 15px;
    margin-bottom: var(--space-s);
    color: var(--color-primary);
}

/* --- Block Layout --- */
.c-origin__block {
    margin-bottom: 50px;
}

.c-origin__text {
    line-height: 1.8;
    margin-bottom: 20px;
}

.c-origin__text-s {
    font-size: 0.9rem;
    line-height: 1.6;
}

/* --- Logic Card (図解の代わりの強調要素) --- */
.c-origin__logic-card {
    background-color: #fff;
    border: 1px dashed var(--color-primary);
    padding: 20px;
    border-radius: var(--border-radius);
}

.c-origin__logic-title {
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* --- Age Box: 比較用レイアウト --- */
.c-age-flex {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
}

.c-age-box {
    background-color: #eee;
    padding: 15px;
    border-radius: var(--border-radius);
    margin: 0;
}

.c-age-box dt {
    font-weight: bold;
    margin-bottom: 5px;
    color: var(--color-text-main);
}

.c-age-box.--highlight {
    background-color: #fff1f1;
    border: 1px solid var(--color-primary);
}

.c-age-box.--highlight dt {
    color: var(--color-primary);
}

/* --- Custom Table: モバイル対応 --- */
.c-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.c-custom-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.c-custom-table th, .c-custom-table td {
    border: 1px solid #ddd;
    padding: 12px 10px;
    text-align: left;
}

.c-custom-table thead th {
    background-color: var(--color-bg-light);
    color: var(--color-text-main);
}

.c-custom-table tbody th {
    background-color: #fffcfc;
    width: 80px;
}

/* PCサイズ調整 */
@media screen and (min-width: 768px) {
    .c-age-flex {
        grid-template-columns: 1fr 1fr;
    }
    .c-section-title {
        font-size: 1.7rem;
    }
}

/* --- Component: Simulator --- */
.c-simulator {
    background-color: #fff;
    border: 2px solid var(--color-primary);
    border-radius: var(--border-radius);
    padding: 25px;
    margin: 30px 0;
    box-shadow: 0 4px 12px rgba(211, 47, 47, 0.1);
}

.c-simulator__title {
    font-size: 1.2rem;
    text-align: center;
    color: var(--color-primary);
    margin-bottom: 10px;
}

.c-simulator__lead {
    font-size: 0.85rem;
    text-align: center;
    color: var(--color-text-sub);
    margin-bottom: 20px;
}

.c-simulator__form {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.c-simulator__input-group input {
    width: 80px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1.1rem;
    text-align: center;
}

.c-simulator__btn {
    padding: 10px 20px;
    background-color: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
    transition: opacity 0.2s;
}

.c-simulator__result {
    border-top: 1px solid #eee;
    padding-top: 20px;
    animation: fadeIn 0.5s ease;
}

.c-result-card {
    text-align: center;
    background-color: #fff8f8;
    padding: 15px;
    border-radius: var(--border-radius);
}

.c-result-card__year {
    font-size: 2rem;
    font-weight: bold;
    color: var(--color-primary);
    margin: 5px 0;
}

.c-result-card__advice {
    margin-top: 15px;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--color-text-main);
    text-align: center;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- Timing List --- */
.c-timing-list {
    padding: 0;
    list-style: none;
}

.c-timing-list li {
    margin-bottom: 15px;
    padding-left: 1.5em;
    position: relative;
}

/* --- Gift Tabs --- */
.c-gift-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 25px;
    overflow-x: auto;
    padding-bottom: 5px;
}

.c-gift-tabs__btn {
    white-space: nowrap;
    padding: 8px 16px;
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 20px;
    font-size: 0.9rem;
    cursor: pointer;
}

.c-gift-tabs__btn.is-active {
    background-color: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

/* --- Gift Grid Layout --- */
.c-gift-grid {
    display: grid;
    grid-template-columns: 1fr; /* スマホ1列 */
    gap: 30px 20px; /* 縦の余白を多めに */
    margin-top: 30px;
}

/* --- カード全体の修正 --- */
.c-gift-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    display: flex;
    flex-direction: column; /* 要素を縦に並べることを明示 */
    position: relative; /* バッジの基準点 */
    overflow: hidden;
    height: 100%; /* 高さを揃える */
}

/* TOP3の強調（枠線のみ） */
.c-gift-card.is-featured {
    border: 2px solid #eec4c4;
    background-color: #fffcfc;
}

/* バッジのデザイン */
.c-gift-card__badge {
    position: absolute;
    top: 5px;
    left: 5px;
    background: #d32f2f;
    color: #fff;
    font-size: 0.8rem;
    font-weight: bold;
    padding: 4px 12px;
    border-radius: 20px;
    z-index: 2;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* --- 画像エリアの修正 --- */
.c-gift-card__img {
    width: 100%;
    margin: 0;
    padding: 0;
    line-height: 0; /* 下部の微細な隙間を排除 */
    display: block;
    position: relative; /* absoluteにしない */
}

.c-gift-card__img img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

/* --- テキストエリアの修正 --- */
.c-gift-card__content {
    padding: 20px 15px; /* 余白をしっかり確保 */
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    background: #fff; /* 背景を白にして画像と分離 */
    z-index: 1;
}

/* タイトル */
.c-gift-card__title {
    font-size: 1.1rem;
    margin: 0 0 10px 0;
    font-weight: bold;
    color: #333;
    line-height: 1.4;
}

/* 説明文 */
.c-gift-card__desc {
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 15px;
    line-height: 1.6;
    flex-grow: 1;
}

/* フッター（価格とボタン） */
.c-gift-card__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #f5f5f5;
    padding-top: 15px;
    margin-top: auto;
}

.c-gift-card__price {
    font-weight: bold;
    color: #d32f2f;
    font-size: 1.2rem;
}

/* 詳細ボタン */
.c-gift-card__btn {
    background: #333;
    color: #fff !important;
    text-decoration: none;
    font-size: 0.85rem;
    padding: 8px 15px;
    border-radius: 4px;
    transition: 0.2s;
}

.c-gift-card__btn:hover {
    opacity: 0.8;
}

.c-gift-more {
    text-align: center;
    margin-top: 30px;
}

.c-btn-secondary {
    display: inline-block;
    padding: 12px 24px;
    border: 2px solid var(--color-text-main);
    color: var(--color-text-main);
    text-decoration: none;
    font-weight: bold;
    border-radius: var(--border-radius);
}

/* --- PC表示の調整 --- */
@media screen and (min-width: 768px) {
    .c-gift-grid {
        grid-template-columns: repeat(3, 1fr); /* 3列 */
    }
}

/* --- Manner Section Styles --- */
.c-manner__block {
    margin-bottom: 40px;
}

.c-manner__card {
    background: #fdfdfd;
    border: 1px solid #eee;
    padding: 20px;
    border-radius: 8px;
}

/* NGギフト用の特別なボックス */
.c-manner__ng-box {
    background-color: #fffafa;
    border: 1px solid #f5e1e1;
    padding: 20px;
    border-radius: 8px;
}

.c-ng-list {
    margin: 0;
}

.c-ng-list dt {
    font-weight: bold;
    color: #d32f2f;
    margin-top: 15px;
    padding-left: 20px;
    position: relative;
}

.c-ng-list dd {
    margin-left: 20px;
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 5px;
}

/* --- FAQ Section --- */
.c-faq__list {
    margin-top: 30px;
}

.c-faq__item {
    margin-bottom: 30px;
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
}

.c-faq__q {
    font-weight: bold;
    font-size: var(--font-size-m) !important;
    color: #333;
    padding-left: 2.5rem;
    position: relative;
    margin-bottom: 15px;
    line-height: 1.5;
}

.c-faq__q::before {
    content: "Q";
    position: absolute;
    left: 0;
    top: -2px;
    font-size: 1.6rem;
    color: var(--color-primary);
    font-family: serif;
    font-style: italic;
}

.c-faq__a {
    margin: 0;
    padding-left: 2.5rem;
    position: relative;
    line-height: 1.8;
}

.c-faq__a p {
    margin-bottom: 15px;
}

.c-faq__staff-note {
    background: #f9f9f9;
    padding: 15px;
    border-radius: 4px;
    font-size: 0.9rem;
    color: #555;
    border-left: 3px solid #ccc;
}

/* 配送情報の控えめなボックス */
.c-faq__delivery-info {
    margin-top: 50px;
    background-color: #f4f4f4;
    padding: 25px;
    border-radius: 8px;
}

.c-faq__delivery-title {
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.c-faq__delivery-tips {
    font-size: 0.85rem;
    color: #666;
    margin-top: 10px;
    padding-left: 20px;
}

.c-faq__link-box {
    margin-top: 15px;
    text-align: right;
}

.c-link-text {
    font-size: 0.85rem;
    color: var(--color-primary);
    text-decoration: underline;
}

/* アイコンの基本設定（共通） */
.c-timing-list li::before,
.c-ng-list dt::before {
    font-family: 'Material Symbols Outlined';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%); /* 縦方向の中央揃え */
    font-size: 1.2rem;
    font-style: normal;
}

/* カレンダーアイコン（宿泊・レストランなど） */
.c-timing-list li::before {
    content: "\e916"; /* カレンダーアイコンのコード */
    color: var(--color-text-sub);
}

/* NGギフトの×アイコン */
.c-ng-list dt::before {
    content: "\e5cd"; /* 閉じる/バツアイコンのコード */
    color: var(--color-primary);
    font-weight: bold;
}

/* 配送情報のタイトル（ホテルアイコン） */
.c-faq__delivery-title::before {
    content: "\e53a"; /* Material Symbols の 'hotel' アイコンコード */
    font-family: 'Material Symbols Outlined';
    font-size: 1.4rem;
    color: var(--color-primary);
    margin-right: 8px;
    vertical-align: middle;
}

/* Logic Trace: Quick Nav (Grid Layout) -> Message Section Headings -> Card Adjustments */

/* --- Component: Quick Navigation (Table of Contents) --- */
.c-quick-nav {
    background-color: #fffaf5;
    border: 1px solid #f2e6e6;
    border-radius: 8px;
    padding: 25px;
    margin: 30px auto;
    max-width: 900px;
}

.c-quick-nav__title {
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--color-text-main);
    text-align: center;
    margin-bottom: 20px;
    position: relative;
}

.c-quick-nav__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* スマホは2列 */
    gap: 12px;
    list-style: none;
    padding: 0;
}

.c-quick-nav__list li a {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 12px 10px;
    color: var(--color-text-main);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: bold;
    transition: all 0.3s ease;
}

.c-quick-nav__list li a:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background-color: #fff1f1;
}

@media screen and (min-width: 768px) {
    .c-quick-nav__list {
        grid-template-columns: repeat(4, 1fr); /* PCは4列 */
    }
}

/* --- Component: Message Section Headings --- */
.c-heading-l {
    font-size: var(--font-size-xl) !important;
    color: var(--color-text-main);
    border-left: 5px solid var(--color-primary);
    padding: 5px 15px;
    margin: 60px 0 20px;
    line-height: 1.3;
}

.c-heading-m {
    font-size: var(--font-size-l) !important;
    color: var(--color-primary);
    margin: 40px 0 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    gap: 8px;
}

.c-heading-m::before {
    content: '●';
    font-size: 0.8rem;
}

/* --- Message Card Style Adjustments --- */
.c-message-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 20px;
}

.c-message-card {
    background: #fff;
    border: 1px solid #eee;
    border-left: 5px solid var(--color-primary); /* 赤いアクセントライン */
    border-radius: 8px;
    padding: 25px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.c-message-card__label {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: bold;
    color: var(--color-primary);
    margin-bottom: 10px;
    border-bottom: 1px solid var(--color-primary);
}

.c-message-card__text {
    line-height: 2;
    font-size: 1rem;
    color: var(--color-text-main);
}

@media screen and (min-width: 768px) {
    .c-message-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* AI Summary Styling */
.c-ai-summary {
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    padding: 20px;
    margin: 20px 0;
    border-radius: 8px;
}

/* --- Component: Final Summary (末尾のまとめ・完全上書き版) --- */
.ly-section.--final-summary {
    background-color: #fdfaf7; /* セクション全体の背景：淡いベージュ */
    padding: 80px 20px;
    margin-top: 60px;
    border-top: 1px solid #eee;
}

.c-final-summary-box {
    max-width: 850px;
    margin: 0 auto;
    background-color: #ffffff; /* ボックス本体は白で視認性を確保 */
    border: 1px solid #f0e6dc;
    border-radius: 12px;
    padding: 40px;
    /* 境界をぼかすためのソフトなシャドウ */
    box-shadow: 0 10px 30px rgba(211, 47, 47, 0.05); 
    text-align: left;
}

.c-final-summary-box__title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.3rem;
    font-weight: bold;
    color: var(--color-text-main);
    margin-bottom: 25px;
}

/* AIアイコンをチェックアイコン風に調整 */
.c-final-summary-box__icon {
    background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
    color: #fff;
    font-size: 16px;
    font-weight: normal;
    padding: 6px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    font-family: 'Material Symbols Outlined';
}

/* リスト構造の完全リセット */
.c-final-summary-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 30px 0 !important;
}

.c-final-summary-list li {
    margin-bottom: 25px;
    padding-left: 2em;
    position: relative;
    display: block;
}

/* ドットのデザインをアクセントカラーに */
.c-final-summary-list li::before {
    content: "●";
    position: absolute;
    left: 0;
    top: 0.2em;
    color: var(--color-primary);
    font-size: 0.8rem;
    opacity: 0.7;
}

.c-final-summary-list li strong {
    display: block;
    color: var(--color-text-main);
    font-size: 1.1rem;
    margin-bottom: 6px;
    letter-spacing: 0.02em;
}

.c-final-summary-list li span {
    display: block;
    font-size: 1rem;
    color: var(--color-text-sub);
    line-height: 1.7;
}

/* 締めの文章：安心感を演出する装飾 */
.c-final-summary-box__closing {
    text-align: center;
    font-weight: bold;
    color: var(--color-primary);
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px dashed #e0d0c0; /* 境界線をより馴染む色に */
    font-size: 1.1rem;
    letter-spacing: 0.05em;
}

/* スマホ表示の最適化 */
@media screen and (max-width: 767px) {
    .ly-section.--final-summary {
        padding: 50px 15px;
    }
    .c-final-summary-box {
        padding: 30px 20px;
    }
    .c-final-summary-box__title {
        font-size: 1.15rem;
    }
    .c-final-summary-list li strong {
        font-size: 1.05rem;
    }
}

/* CTA Button */
.c-summary-cta {
    margin-top: 35px;
    text-align: center;
}

.c-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background-color: var(--color-primary);
    color: #fff;
    padding: 18px 35px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(211, 47, 47, 0.3);
}

.c-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(211, 47, 47, 0.4);
    opacity: 0.9;
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
    .c-summary-box {
        padding: 30px 20px;
    }
    .c-btn-primary {
        width: 100%;
        justify-content: center;
        font-size: 1rem;
    }
}

/* --- Component: CTA Box (Gift Ranking) --- */
.c-cta-box {
    margin: 40px auto 0;
    max-width: 800px;
    background: linear-gradient(135deg, #fffaf5 0%, #fff 100%); /* 非常に薄いグラデーション */
    border: 2px solid #f2e6e6; /* 還暦を意識した淡い赤系の枠線 */
    border-radius: 12px;
    padding: 35px 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* 装飾的な背景アクセント（左上に少し色を置く） */
.c-cta-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
    background-color: var(--color-primary);
}

.c-cta-box__text {
    font-size: 1.15rem;
    line-height: 1.6;
    color: var(--color-text-main);
    margin-bottom: 25px;
}

.c-cta-box__text strong {
    display: block;
    font-size: 1.5rem;
    color: var(--color-primary);
    margin-top: 8px;
    letter-spacing: 0.05em;
}

/* ボタンのホバーエフェクト（再掲・調整） */
.c-cta-box .c-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 280px;
    justify-content: center;
    /* transition等は共通のc-btn-primaryに従う */
}

/* スマホ表示での調整 */
@media screen and (max-width: 768px) {
    .c-cta-box {
        margin-top: 30px;
        padding: 30px 15px;
    }
    
    .c-cta-box__text {
        font-size: 1.05rem;
    }
    
    .c-cta-box__text strong {
        font-size: 1.3rem;
    }
}

/* --- Component: Review Section --- */

/* お客様の声ページ専用の指定 (.c-reviews) を追加することで他ページへの影響を防ぎます */
.c-reviews .c-review-grid {
    display: grid;
    /* スマホでは1列、PC（768px以上）で2列 */
    grid-template-columns: 1fr;
    gap: 30px;
    width: 100%;
    max-width: 1200px;
    margin: 40px auto 0;
}

.c-reviews .c-review-card {
    display: flex;
    flex-direction: column; 
    width: 100%;
    background: #fff;
    border: 1px solid #eee;
    align-items: stretch;
}

/* 画質の荒い写真をカバーするスタイル */
.c-review-card__photo-frame {
    width: 100%;
    aspect-ratio: 3 / 2;
    background-color: #f0f0f0;
    position: relative;
    overflow: hidden;
    flex-shrink: 0; /* 画像が潰れるのを防ぐ */
}

/* 3. 【重要】画像部分を40%の幅で固定し、残りをコンテンツに割り当てる */
.c-reviews .c-review-card__photo-frame {
    width: 100%;
    aspect-ratio: 3 / 2;
    background-color: #f0f0f0;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

.c-review-card__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: sepia(0.2) contrast(1.1);
}

.c-review-card__photo-frame::after {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: url('https://www.transparenttextures.com/patterns/p6-mini.png');
    opacity: 0.15;
    pointer-events: none;
}

/* 4. 【重要】テキスト部分を「残りすべての幅」に広げる */
.c-reviews .c-review-card__content {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 20px;
    box-sizing: border-box;
    flex-grow: 1;
}

.c-review-card__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.c-review-card__tag {
    font-size: 0.75rem;
    background: #fff1f1;
    color: var(--color-primary);
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: bold;
}

.c-review-card__rating {
    color: #ffb400;
    font-size: 0.9rem;
}

.c-review-card__title {
    font-size: 1.15rem;
    font-weight: bold;
    color: var(--color-primary);
    margin-bottom: 12px;
    line-height: 1.4;
    text-align: left;
}

.c-review-card__text {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--color-text-sub);
    margin-bottom: 15px;
    flex-grow: 1;
    text-align: left;
}

/* 5. テキストの中身も左に寄らないよう調整 */
.c-review-card__title,
.c-review-card__text {
    width: 100%; /* コンテンツ幅いっぱいに広げる */
    text-align: left; /* テキスト自体は左寄せが見やすい */
}

.c-review-card__author {
    font-size: 0.85rem;
    text-align: right;
    color: var(--color-text-main);
    border-top: 1px dashed #eee;
    padding-top: 10px;
    margin-top: auto;
    font-weight: 500;
}

.c-review-card__author::before {
    content: "投稿者: ";
    font-size: 0.75rem;
    color: var(--color-text-sub);
    margin-right: 4px;
}

/* アイコン版（写真なし）の調整 */
.c-review-card__icon-wrapper {
    width: 100%;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-light);
    color: #ccc;
}

/* アイコン版のデザイン（写真ありと高さを合わせる） */
.c-review-card.--text-only .c-review-card__icon-wrapper {
    height: 120px;
    background: var(--color-bg-light);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ccc;
}

.c-review-card__icon-wrapper .material-symbols-outlined {
    font-size: 64px;
}

/* --- PCサイズ（768px以上）の調整 --- */
@media screen and (min-width: 768px) {

    .c-reviews .c-review-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* 1. リード文などの中央寄せ */
    .c-reviews .c-origin__text {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

    /* 2. すべてのカード（写真あり・なし両方）を縦並びに強制 */
    /* .c-reviews を頭につけることで、詳細度を上げて優先させます */
    .c-reviews .c-review-card {
        flex-direction: column !important; /* 絶対に縦並びにする */
        display: flex !important;
    }
    
    /* 3. 写真あり：画像フレームの横幅を100%にする */
    .c-reviews .c-review-card__photo-frame {
        width: 100% !important; /* 40%などの数値を完全に上書き */
        height: auto !important;
        aspect-ratio: 3 / 2;    /* 横長の比率で固定 */
    }
    
    /* 4. 写真あり：テキスト部分の横幅を100%にする */
    .c-reviews .c-review-card__content {
        width: 100% !important; /* 60%などの数値を完全に上書き */
        padding: 25px;
        box-sizing: border-box;
    }

    /* 5. アイコン版（写真なし）も念のため再設定 */
    .c-reviews .c-review-card.--text-only {
        flex-direction: column !important;
    }
    .c-reviews .c-review-card.--text-only .c-review-card__icon-wrapper {
        width: 100% !important;
        height: 150px;
    }
}

/* --- モバイル表示（スマホ）の時は縦並びに戻して幅100%にする --- */
@media screen and (max-width: 767px) {
    .c-reviews .c-review-grid {
        grid-template-columns: 1fr !important;
    }
    .c-review-card {
        flex-direction: column !important;
    }
    .c-review-card__photo-frame, 
    .c-review-card__content {
        width: 100% !important;
    }
}

/* --- 見出しの数字装飾 --- */
.c-reason-header {
    text-align: center;
    margin-bottom: 30px;
}

.c-reason-number {
    display: block;
    font-family: 'Georgia', serif; /* 数字をエレガントに */
    font-size: 2.5rem;
    color: #e60012; /* アクセントの赤 */
    font-weight: bold;
    line-height: 1;
    margin-bottom: 5px;
}

.c-reason-title {
    font-size: 1.6rem; /* 既存のデザインに合わせて微調整 */
    color: var(--color-text-main);
    line-height: 1.4;
    margin-bottom: 15px;
}

.c-reason-sub-title {
    font-size: 1.4rem;
    color: var(--color-text-main);
    margin-bottom: 20px;
    position: relative;
    padding-left: 15px;
    border-left: 3px solid #e60012; /* アクセントカラー */
}

.c-reason-story {
    line-height: 1.8;
    color: #444;
}

.c-reason-story strong {
    color: #e60012;
    background: linear-gradient(transparent 70%, #fff0f0 70%); /* 控えめなマーカー線 */
}

/* --- お客様写真ギャラリー (タイル状レイアウト) --- */
.c-customer-gallery {
    margin: 40px 0;
    padding: 20px;
    background-color: #f9f9f9; /* 既存のテクスチャを邪魔しない淡い色 */
    border-radius: 8px;
}

.c-customer-gallery__inner {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    grid-auto-rows: 120px; /* 基本の高さ */
    grid-gap: 10px;
    grid-auto-flow: dense; /* 隙間を効率よく埋める */
}

.c-customer-gallery__item {
    margin: 0;
    overflow: hidden;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.c-customer-gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 直筆の手紙など、目立たせたいアイテムの指定 */
.c-customer-gallery__item.is-highlight {
    grid-column: span 2; /* 横2つ分 */
    grid-row: span 2;    /* 縦2つ分 */
}

.c-customer-gallery__caption {
    margin-top: 10px;
    font-size: 0.8rem;
    color: #999;
    text-align: right;
}

/* --- ボタン装飾（既存になければ） --- */
.c-btn-wrapper {
    text-align: center;
    margin-top: 30px;
}

.c-btn-secondary {
    display: inline-flex;
    align-items: center;
    padding: 12px 30px;
    border: 1px solid #e60012;
    color: #e60012;
    text-decoration: none;
    font-weight: bold;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.c-btn-secondary:hover {
    background-color: #e60012;
    color: #fff;
}

/* --- スマホ調整 --- */
@media screen and (max-width: 767px) {
    .c-customer-gallery__inner {
        grid-template-columns: repeat(2, 1fr); /* スマホは2列固定 */
        grid-auto-rows: 100px;
    }
    .c-reason-title {
        font-size: 1.3rem;
    }
    .c-reason-sub-title {
        font-size: 1.2rem;
    }

    .c-reason-story {
        font-size: 0.95rem;
    }
}

/* --- 画像エリア --- */
.c-reason-image-feature {
    flex: 0 0 500px; /* 幅を少し広めに調整 */
    display: flex;
    flex-direction: row; /* 横並び */
    gap: 10px;
    align-items: stretch;
}

.c-feature-item {
    position: relative; /* キャプション配置の基準 */
    flex: 1;
    margin: 0;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    background: #000; /* 画像読み込み前の下地 */
}

.c-feature-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0.85; /* 文字の視認性確保のため少し暗く */
    transition: transform 0.4s ease, opacity 0.4s ease;
}

.c-feature-item:hover img {
    transform: scale(1.1);
    opacity: 1;
}

.c-feature-item figcaption {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 中央寄せの定石 */
    width: 90%; /* 端まで行かないように調整 */
    padding: 0;
    background-color: transparent; /* 背景なし */
    border-top: none;
    color: #fff; /* 文字は白 */
    font-size: 1.55rem;
    font-weight: bold;
    text-align: center;
    line-height: 1.4;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8); /* 文字の輪郭をはっきりさせる */
    pointer-events: none; /* テキストがクリックの邪魔をしないように */
    z-index: 2;
}

/* スマホ調整 */
@media screen and (max-width: 767px) {
    .c-reason-image-feature {
        flex: none;
        width: 100%;
        height: 200px; /* スマホでの高さを固定 */
        gap: 5px;
    }

    .c-feature-item figcaption {
        font-size: 0.75rem;
        text-shadow: 0 1px 3px rgba(0,0,0,0.9);
    }
}

/* --- 特典グリッド（カード型レイアウト） --- */
.c-benefit-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* PC: 2列 */
    gap: 30px;
    margin-top: 50px;
}

.c-benefit-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

.c-benefit-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}

.c-benefit-card__img {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #f0f0f0;
}

.c-benefit-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.c-benefit-card__info {
    padding: 25px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.c-benefit-card__title {
    font-size: 1.2rem;
    color: #e60012;
    margin-bottom: 12px;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 擬似要素でアイコン的なアクセントを追加 */
.c-benefit-card__title::before {
    content: 'CHECK';
    font-size: 0.65rem;
    background: #e60012;
    color: #fff;
    padding: 2px 6px;
    border-radius: 2px;
    vertical-align: middle;
}

.c-benefit-card__text {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #555;
    margin: 0;
}

/* --- スマホ調整 --- */
@media screen and (max-width: 767px) {
    .ly-section.c-reason-section {
        padding: 50px 0;
    }

    .c-benefit-grid {
        grid-template-columns: 1fr; /* スマホ: 1列 */
        gap: 20px;
    }

    .c-benefit-card__info {
        padding: 20px;
    }

    .c-benefit-card__title {
        font-size: 1.1rem;
    }
}

/* --- 配送・梱包の機能訴求エリア --- */
.c-reason-feature-grid {
    flex: 0 0 400px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.c-feature-box {
    padding: 20px;
    background-color: #fcfcfc;
    border: 1px dashed #ccc; /* 梱包・配送をイメージさせる破線 */
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.c-feature-box__icon {
    font-size: 2.5rem;
    color: #e60012;
    margin-bottom: 10px;
}

.c-feature-box__title {
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--color-text-main);
    margin-bottom: 8px;
}

.c-feature-box__text {
    font-size: 0.85rem;
    line-height: 1.5;
    color: #666;
    margin: 0;
}

/* --- 導線ボタン --- */
.c-reason-btn-wrapper {
    margin-top: 50px;
    text-align: center;
}

.c-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background-color: #e60012;
    color: #fff;
    padding: 18px 40px;
    font-size: 1.1rem;
    font-weight: bold;
    text-decoration: none;
    border-radius: 50px; /* 丸みを持たせて目を引くデザイン */
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(230, 0, 18, 0.3);
}

.c-btn-primary:hover {
    background-color: #cc0010;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(230, 0, 18, 0.4);
    color: #fff;
}

.c-btn-primary .material-symbols-outlined {
    font-size: 1.4rem;
}

/* --- スマホ調整 --- */
@media screen and (max-width: 767px) {
    .c-reason-feature-grid {
        flex: none;
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr; /* スマホは横並び2列 */
        gap: 10px;
    }

    .c-feature-box {
        padding: 15px 10px;
    }

    .c-feature-box__icon {
        font-size: 2rem;
    }

    .c-feature-box__title {
        font-size: 0.95rem;
    }

    .c-feature-box__text {
        font-size: 0.75rem;
    }

    .c-btn-primary {
        width: 100%;
        padding: 15px 20px;
        font-size: 1rem;
    }
}

/* --- サポートエリア（コンシェルジュ） --- */
.c-support-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* PC: 2列 */
    gap: 25px;
    margin-top: 40px;
}

.c-support-card {
    background: #fff;
    border-radius: 12px;
    padding: 30px;
    border: 1px solid #e0e0e0;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.c-support-card:hover {
    border-color: #e60012;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.c-support-card__icon {
    font-size: 3rem;
    color: #e60012;
    margin-bottom: 15px;
}

.c-support-card__title {
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--color-text-main);
    margin-bottom: 15px;
}

.c-support-card__text {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #666;
    margin-bottom: 20px;
}

/* 電話番号の強調表示 */
.c-support-card__tel {
    font-family: 'Georgia', serif;
    font-size: 1.6rem;
    font-weight: bold;
    color: #e60012;
    margin-top: auto;
}

.c-support-card__time {
    display: block;
    font-size: 0.8rem;
    color: #999;
    font-family: sans-serif;
    font-weight: normal;
}

/* リンクボタン */
.c-btn-link {
    display: inline-block;
    padding: 10px 20px;
    background-color: #f8f8f8;
    color: #333;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: bold;
    border: 1px solid #ccc;
    border-radius: 4px;
    transition: all 0.2s ease;
    margin-top: auto;
}

.c-btn-link:hover {
    background-color: #333;
    color: #fff;
    border-color: #333;
}

/* --- スマホ調整 --- */
@media screen and (max-width: 767px) {
    .c-support-grid {
        grid-template-columns: 1fr; /* スマホ: 縦1列 */
        gap: 20px;
    }

    .c-support-card {
        padding: 25px 20px;
    }

    .c-support-card__tel {
        font-size: 1.4rem;
    }
}

/*LP contents*/
.lp-theme-gold {
    --color-primary: #d4af37;
    --color-text: #333333;
    --color-bg: #ffffff;
    --color-bg-sub: #fcfaf5;
    --font-serif: 'Shippori Mincho', serif;
    --font-sans: 'Noto Sans JP', sans-serif;
    --radius: 12px;
    --shadow: 0 4px 15px rgba(0,0,0,0.08);
}

/* --- コンテンツレイアウト --- */
.lp-container {
    max-width: 1200px;
    margin: 0 auto;
    font-family: var(--font-sans);
}

/* セクション設定 */
section { padding: 80px 20px; }

/* メインビジュアル */
.mv-copy {
    font-family: var(--font-serif);
    font-size: 2.5rem;
    line-height: 1.4;
    margin-bottom: 2rem;
}
.mv-image img {
    width: 100%;
    height: auto;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

/* ベネフィット (Google Font Icon) */
.benefit-summary {
    background-color: var(--color-bg-sub); /* 背景に薄い色を敷いて区切りを明確に */
    padding: 100px 20px;
}

.benefit-summary .grid-layout {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    max-width: 1100px;
    margin: 0 auto;
}

.benefit-item {
    background: #fff;
    padding: 40px 30px;
    border-radius: var(--radius); /* PDF: 角丸12px  */
    box-shadow: var(--shadow); /* PDF: 薄いドロップシャドウ  */
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.benefit-item:hover {
    transform: translateY(-5px); /* ホバー時の動きでUX向上 */
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

/* アイコンの装飾 */
.benefit-item .icon-wrapper {
    width: 80px;
    height: 80px;
    background-color: rgba(212, 175, 55, 0.1); /* ゴールドの薄い背景 */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.benefit-item .icon {
    font-size: 3rem;
    color: var(--color-primary);
    margin-bottom: 1rem;
}

.benefit-item h3 {
    font-family: var(--font-serif);
    font-size: 1.6rem;
    margin-bottom: 15px;
    color: var(--color-primary);
}

.benefit-item p {
    font-size: 1.25rem;
    line-height: 1.7;
    color: #666;
}

/* セクション内のサブタイトル */
.section-subtitle {
    font-family: var(--font-serif); /* 情緒に訴える明朝体  */
    font-size: 1.8rem;
    color: var(--color-primary); /* ゴールド系のアクセント  */
    margin-bottom: 1.5rem;
    position: relative;
    padding-bottom: 10px;
}

/* サブタイトルの下の装飾線（デザインのアクセント） */
.section-subtitle::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 60px;
    height: 2px;
    background-color: var(--color-primary);
}

/* 導入文の説明テキスト（description） */
.info-content .description {
    font-size: 1rem;
    line-height: 1.8;
    color: #555;
    margin-bottom: 2rem;
}

/* PC/SPでの文字サイズ調整 */
@media (max-width: 768px) {
    .section-subtitle {
        font-size: 1.5rem;
    }
    .info-content .description {
        font-size: 0.95rem;
        margin-bottom: 1.5rem;
    }
}

/* --- Zパターン・レイアウトの核心（必須セット） --- */

.info-row {
    display: flex;
    align-items: center;    /* 画像とテキストの縦中央を揃える */
    justify-content: space-between;
    gap: 5%;                /* レイアウト崩れを防ぐため可変余白（または50px〜60px） */
    margin-bottom: 100px;
    width: 100%;
}

/* 偶数行の反転：Zパターンの肝  */
.info-row:nth-child(even) {
    flex-direction: row-reverse;
}

/* 重要：画像とテキストの幅を「50%」に固定 
   これにより、テキストが潰れて縦長になるのを物理的に防ぎます 
*/
.info-image, 
.info-content {
    flex: 0 0 47.5%; /* gap(5%)を除いた半分ずつを確保 */
    max-width: 47.5%;
}

/* 画像の規格維持 [cite: 14, 15, 16] */
.info-image img {
    width: 100%;
    height: auto;
    border-radius: var(--radius); /* 角丸12px  */
    box-shadow: var(--shadow);    /* 薄いドロップシャドウ  */
    display: block;
}

/* テキストエリアの装飾 */
.info-content h2 {
    font-family: var(--font-serif); /* 特典が賞状のため明朝体  */
    font-size: 1.8rem;
    color: var(--color-primary);
    margin-bottom: 1.5rem;
    line-height: 1.4;
    font-weight: 700;
}

.info-content p {
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.8;
    color: #444;
}

/* --- レスポンシブ設計（SP） [cite: 29, 30] --- */
@media (max-width: 768px) {
    .info-row,
    .info-row:nth-child(even) {
        flex-direction: column; /* SPは必ず縦並び（画像を先に配置） [cite: 30] */
        gap: 30px;
        margin-bottom: 60px;
    }

    .info-image, 
    .info-content {
        flex: 0 0 100%;      /* SPでは横幅を100%解放 */
        max-width: 100%;
        padding: 0 10px;
    }

    .info-content h2 {
        font-size: 1.5rem;
        margin-bottom: 1rem;
        text-align: center; /* SPで見栄えを良くする場合 */
    }
}

/* --- 5. 信頼の担保 (FAQ) デザイン --- */

.faq-section {
    max-width: 900px; /* 読みやすさを考慮し、少し幅を絞る */
    margin: 0 auto;
    padding: 80px 20px;
}

.faq-section .section-title {
    font-family: var(--font-serif); /* 設計書に合わせ明朝体を使用 */
    text-align: center;
    font-size: 2rem;
    color: var(--color-primary);
    margin-bottom: 40px;
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.faq-item {
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: var(--radius); /* 設計書規定: 角丸12px  */
    overflow: hidden;
    box-shadow: var(--shadow); /* 設計書規定: 薄いドロップシャドウ  */
}

/* 質問エリア (dt) */
.c-faq__delivery-title {
    background-color: var(--color-bg-sub); /* 薄いベージュ系の背景 */
    padding: 20px 25px;
    margin-bottom: 0 !important; /* 余白をリセット */
    font-size: 1.1rem;
    color: var(--color-text);
    cursor: default;
}

.c-faq__delivery-title::before {
    content: "\e558";
    font-family: 'Material Symbols Outlined';
    font-size: 1.6rem;
    color: var(--color-primary);
    margin-right: 10px;
}

/* 回答エリア (dd) */
.faq-item dd {
    padding: 20px 25px 25px 60px; /* アイコンの位置を考慮して左余白を多めに */
    margin: 0;
    line-height: 1.8;
    color: #555;
    position: relative;
    border-top: 1px solid #eee;
}

/* 回答の「A」を強調する装飾（任意） */
.faq-item dd::before {
    content: "A.";
    position: absolute;
    left: 25px;
    font-weight: bold;
    color: var(--color-primary);
}

/* --- レスポンシブ調整 --- */
@media (max-width: 768px) {
    .faq-section {
        padding: 60px 15px;
    }
    
    .c-faq__delivery-title {
        font-size: 1rem;
        padding: 15px 20px;
    }
    
    .faq-item dd {
        padding: 15px 20px 20px 50px;
        font-size: 0.95rem;
    }
    
    .faq-item dd::before {
        left: 20px;
    }
}

/* 感謝状テキストボックスのデザイン */
.award-text-box {
    background-color: #fffaf0; /* 柔らかな和紙をイメージした色 */
    border: 1px solid var(--color-primary);
    padding: 2.5rem;
    margin-top: 1.5rem;
    position: relative;
    border-radius: 4px; /* 賞状の角を意識 */
    box-shadow: inset 0 0 10px rgba(212, 175, 55, 0.1);
    font-family: var(--font-serif); /* 明朝体で情緒を演出  */
    text-align: center;
}

.award-title {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 1.5rem;
    color: var(--color-primary);
    letter-spacing: 0.5rem;
}

.award-body {
    font-size: 1rem;
    line-height: 2.2;
    color: #444;
}

.award-body p {
    margin-bottom: 1rem;
}

.award-footer {
    margin-top: 2rem;
    font-weight: bold;
    font-size: 1.1rem;
}

/* 装飾用の角丸デザイン */
.award-text-box::before {
    content: "";
    position: absolute;
    top: 10px; left: 10px; right: 10px; bottom: 10px;
    border: 1px solid rgba(212, 175, 55, 0.3);
    pointer-events: none;
}

/* レスポンシブ調整 */
@media (max-width: 768px) {
    .award-text-box {
        padding: 1.5rem;
        font-size: 0.9rem;
    }
}

/* フォーム全体のコンテナ */
.contact-form {
  max-width: 900px;
  margin: 40px auto;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  color: #333;
}

.form-header {
  text-align: center;
  margin-bottom: 30px;
}

.form-header h1 {
  font-size: 24px;
  letter-spacing: 0.1em;
  border-bottom: 1px dotted #ccc;
  display: inline-block;
  padding-bottom: 10px;
  margin-bottom: 20px;
}

.form-intro {
  font-size: 14px;
  line-height: 1.8;
  color: #666;
}

.required-note {
  font-size: 12px;
  text-align: right;
  margin-top: 20px;
}

.required {
  color: #d9534f;
  margin-right: 4px;
}

/* テーブル構造のシミュレーション */
.form-table {
  border: 1px solid #ddd;
  border-bottom: none;
}

.form-row {
  display: flex;
  border-bottom: 1px solid #ddd;
  min-height: 60px;
}

.form-label {
  width: 250px;
  background-color: #f9f9f9;
  padding: 20px;
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: bold;
}

.form-input {
  flex: 1;
  padding: 15px 20px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

/* 入力要素のスタイル */
.input-text-s {
  width: 120px;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 2px;
}

.input-text-l {
  width: 100%;
  max-width: 500px;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 2px;
}

.input-textarea {
  width: 100%;
  height: 150px;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 2px;
  resize: vertical;
}

.input-text-s:focus, .input-text-l:focus, .input-textarea:focus {
  outline: none;
  border-color: #aaa;
  background-color: #fffef0;
}

/* 選択肢のグループ */
.option-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
}

.option-group label {
  cursor: pointer;
}

.name-unit {
  margin-right: 15px;
  font-size: 14px;
}

/* 送信ボタン */
.form-submit {
  text-align: center;
  margin-top: 40px;
}

.submit-btn {
  background-color: #555;
  color: #fff;
  padding: 15px 60px;
  border: none;
  border-radius: 0;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.submit-btn:hover {
  background-color: #888;
}

/* スマホ対応（レスポンシブ） */
@media (max-width: 600px) {
  .form-row {
    flex-direction: column;
  }
  .form-label {
    width: 100%;
    background-color: #eee;
    padding: 10px 20px;
  }
}

/* ==========================================================================
   還暦祝いランキング専用スタイル（横幅・余白最適化版）
   ========================================================================== */

/* 全体を内包するメインコンテナ */
.celebration-ranking-container {
  max-width: 800px;
  margin: 0px 20px;
  margin-top: 70px;
  background-color: #ffffff;
  padding: 40px 20px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  line-height: 1.7;
  color: #333333;
}

/* 各セクション共通の幅定義（すべて親の横幅100%に追従） */
.celebration-ranking-header,
.celebration-ranking-expert-box,
.celebration-ranking-section,
.celebration-ranking-item {
  width: 100%;
  box-sizing: border-box; /* パディングを含めたサイズ計算にするための必須指定 */
}

/* ヘッダー・タイトル */
.celebration-ranking-header {
  margin-bottom: 25px;
}

.celebration-ranking-title {
  font-size: 1.8rem;
  color: #bf0000;
  line-height: 1.4;
  margin-bottom: 20px;
  border-bottom: 3px solid #bf0000;
  padding-bottom: 10px;
  font-weight: bold;
}

.celebration-ranking-meta {
  font-size: 0.85rem;
  color: #666666;
}

/* 監修者ボックス */
.celebration-ranking-expert-box {
  background-color: #fcf6f6;
  border: 1px solid #f0d5d5;
  padding: 25px; /* ランキングアイテム側の内側余白と等質化 */
  border-radius: 6px;
  margin-bottom: 30px;
}

.celebration-ranking-expert-title {
  font-weight: bold;
  color: #bf0000;
  margin-bottom: 8px;
  font-size: 1rem;
}

.celebration-ranking-expert-name {
  margin-bottom: 8px;
  font-size: 1.1rem;
}

.celebration-ranking-expert-text {
  font-size: 0.95rem;
  margin-bottom: 0;
}

/* セクション共通 */
.celebration-ranking-section {
  margin-top: 40px;
}

.celebration-ranking-subtitle {
  font-size: 1.4rem;
  color: #111111;
  margin-bottom: 25px;
  padding-left: 12px;
  border-left: 5px solid #bf0000;
  font-weight: bold;
  line-height: 1.4;
}

/* 選定基準ボックス */
.celebration-ranking-criteria-box {
  background-color: #f4f4f4;
  padding: 25px; /* 上記の監修者ボックスと余白感を統一 */
  border-radius: 6px;
  width: 100%;
  box-sizing: border-box;
}

.celebration-ranking-criteria-lead {
  font-weight: bold;
  margin-bottom: 15px;
  font-size: 1rem;
}

.celebration-ranking-criteria-list {
  list-style-type: square;
  padding-left: 20px;
  margin-bottom: 0;
}

.celebration-ranking-criteria-item {
  margin-bottom: 10px;
  font-size: 0.95rem;
}

.celebration-ranking-criteria-item:last-child {
  margin-bottom: 0;
}

/* --- ランキングアイテム本体（カード枠） --- */
.celebration-ranking-item {
  border: 2px solid #e3e3e3;
  border-radius: 8px;
  padding: 35px 25px 25px 25px; /* 上部パディングを少し広げてバッジの被りを最適化 */
  margin-bottom: 40px;
  position: relative;
  background-color: #ffffff;
}

/* 順位バッジ */
.celebration-ranking-badge {
  position: absolute;
  top: -15px;
  left: 20px;
  background-color: #666666;
  color: #ffffff;
  padding: 4px 16px;
  font-weight: bold;
  border-radius: 20px;
  font-size: 0.9rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.celebration-ranking-badge-1st { background-color: #d4af37; }
.celebration-ranking-badge-2nd { background-color: #b5b5b5; }
.celebration-ranking-badge-3rd { background-color: #c47a46; }

/* 商品名 */
.celebration-ranking-item-header {
  margin-bottom: 15px;
}

.celebration-ranking-item-name {
  font-size: 1.3rem;
  font-weight: bold;
  color: #111111;
  line-height: 1.4;
}

.celebration-ranking-item-desc {
  font-size: 0.95rem;
  color: #444444;
  margin-bottom: 20px;
}

/* 専門家コメント */
.celebration-ranking-expert-comment {
  background-color: #fff9e6;
  border-left: 4px solid #ffb300;
  padding: 15px 20px;
  margin: 20px 0;
  border-radius: 0 4px 4px 0;
}

.celebration-ranking-expert-comment-title {
  font-weight: bold;
  color: #b37d00;
  margin-bottom: 6px;
  font-size: 0.9rem;
}

.celebration-ranking-expert-comment-text {
  font-size: 0.9rem;
  color: #333333;
  margin-bottom: 0;
}

/* 仕様テーブル */
.celebration-ranking-spec-table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 0.9rem;
}

.celebration-ranking-spec-table th,
.celebration-ranking-spec-table td {
  border: 1px solid #e0e0e0;
  padding: 12px;
  text-align: left;
}

.celebration-ranking-spec-table th {
  background-color: #f7f7f7;
  color: #555555;
  width: 25%;
  font-weight: bold;
}

/* CTAリンクボタン */
.celebration-ranking-cta-wrap {
  text-align: center;
  margin-top: 25px;
}

.celebration-ranking-cta-link {
  display: inline-block;
  background-color: #bf0000;
  color: #ffffff;
  text-decoration: none;
  padding: 14px 35px;
  border-radius: 6px;
  font-weight: bold;
  font-size: 1rem;
  box-shadow: 0 3px 6px rgba(191, 0, 0, 0.2);
  transition: all 0.2s ease;
}

.celebration-ranking-cta-link:hover {
  background-color: #990000;
  transform: translateY(1px);
}

/* モバイルレスポンシブ対応 */
@media (max-width: 600px) {
  .celebration-ranking-container {
    padding: 20px 15px;
  }
  .celebration-ranking-expert-box,
  .celebration-ranking-criteria-box {
    padding: 15px;
  }
  .celebration-ranking-item {
    padding: 30px 15px 20px 15px;
    margin-bottom: 30px;
  }
  .celebration-ranking-title { font-size: 1.5rem; }
  .celebration-ranking-subtitle { font-size: 1.2rem; }
  .celebration-ranking-item-name { font-size: 1.15rem; }
  
  .celebration-ranking-spec-table th { width: 30%; padding: 10px; }
  .celebration-ranking-spec-table td { padding: 10px; }
  .celebration-ranking-cta-link { width: 100%; box-sizing: border-box; }
}

/* --- 解説セクション用追加スタイル --- */
.celebration-ranking-info-block {
  margin-bottom: 30px;
}

.celebration-ranking-info-block:last-child {
  margin-bottom: 0;
}

.celebration-ranking-info-heading {
  font-size: 1.15rem;
  font-weight: bold;
  color: #222222;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
}

.celebration-ranking-info-text {
  font-size: 0.95rem;
  color: #444444;
  margin-bottom: 15px;
}

/* 相手別選び方用のグリッドレイアウト（PC時は2列、スマホ時は1列） */
.celebration-ranking-grid {
  display: flex;
  gap: 20px;
  margin-top: 20px;
  width: 100%;
  box-sizing: border-box;
}

.celebration-ranking-grid-card {
  flex: 1;
  background-color: #fcfcfc;
  border: 1px solid #e3e3e3;
  border-radius: 6px;
  padding: 20px;
  box-sizing: border-box;
}

.celebration-ranking-grid-title {
  font-size: 1.05rem;
  font-weight: bold;
  color: #bf0000;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px dashed #f0d5d5;
}

.celebration-ranking-grid-text {
  font-size: 0.9rem;
  color: #555555;
  margin-bottom: 0;
  line-height: 1.6;
}

/* モバイルレスポンシブ対応の追加 */
@media (max-width: 600px) {
  .celebration-ranking-grid {
    flex-direction: column; /* スマホ時は縦並びに変更 */
    gap: 15px;
  }
  
  .celebration-ranking-info-heading {
    font-size: 1.05rem;
  }
}

/* --- お問い合わせ・サポートセクション用スタイル --- */
.celebration-ranking-support-box {
  background-color: #f5f7fa;
  border: 1px solid #e1e6eb;
  border-radius: 8px;
  padding: 30px;
  margin-top: 20px;
  width: 100%;
  box-sizing: border-box;
}

.celebration-ranking-support-title {
  font-size: 1.3rem;
  color: #111111;
  margin-bottom: 12px;
  text-align: center;
  font-weight: bold;
}

.celebration-ranking-support-lead {
  font-size: 0.9rem;
  color: #555555;
  text-align: center;
  margin-bottom: 25px;
  line-height: 1.6;
}

/* 3チャネルの並び（フレックスボックス） */
.celebration-ranking-channels {
  display: flex;
  gap: 15px;
  width: 100%;
  box-sizing: border-box;
}

/* 共通カード（ボタン）スタイル */
.celebration-ranking-channel-card {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 15px;
  border-radius: 6px;
  text-decoration: none;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.celebration-ranking-channel-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* アイコンとテキストの配置 */
.celebration-ranking-channel-icon {
  font-size: 1.8rem;
  margin-right: 12px;
  flex-shrink: 0;
}

.celebration-ranking-channel-info {
  display: flex;
  flex-direction: column;
}

.celebration-ranking-channel-name {
  font-weight: bold;
  font-size: 0.95rem;
  line-height: 1.3;
  margin-bottom: 4px;
}

.celebration-ranking-channel-note {
  font-size: 0.75rem;
  opacity: 0.85;
}

/* 各チャネルの固有カラー（可読性とブランドカラーの担保） */
.celebration-ranking-channel-line {
  background-color: #06c755;
  color: #ffffff;
}
.celebration-ranking-channel-line:hover {
  background-color: #05b04b;
}

.celebration-ranking-channel-email {
  background-color: #2b3647;
  color: #ffffff;
}
.celebration-ranking-channel-email:hover {
  background-color: #1e2633;
}

.celebration-ranking-channel-tel {
  background-color: #ffffff;
  color: #bf0000;
  border: 2px solid #bf0000;
}
.celebration-ranking-channel-tel:hover {
  background-color: #fff5f5;
}

/* モバイルレスポンシブ対応（スマホ時は縦に並べて押しやすくする） */
@media (max-width: 768px) {
  .celebration-ranking-channels {
    flex-direction: column;
    gap: 12px;
  }
  
  .celebration-ranking-support-box {
    padding: 20px 15px;
  }
  
  .celebration-ranking-support-title {
    font-size: 1.15rem;
  }
  
  .celebration-ranking-channel-card {
    padding: 18px 15px; /* スマホでの誤タップを防ぐため少し高さを広げる */
  }
  
  .celebration-ranking-channel-name {
    font-size: 1rem;
  }
}

/* ==========================================================================
   お問い合わせチャネル 固有カラー上書き設定（a:visited 対策版）
   ========================================================================== */

/* --- 1. LINE相談（常に文字色を白に固定） --- */
.celebration-ranking-channel-card.celebration-ranking-channel-line,
.celebration-ranking-channel-card.celebration-ranking-channel-line:link,
.celebration-ranking-channel-card.celebration-ranking-channel-line:visited {
  background-color: #06c755;
  color: #ffffff !important; /* リセットCSSの強制上書きを防ぐための記述 */
}

.celebration-ranking-channel-card.celebration-ranking-channel-line:hover {
  background-color: #05b04b;
  color: #ffffff !important;
}

/* --- 2. メール相談（常に文字色を白に固定） --- */
.celebration-ranking-channel-card.celebration-ranking-channel-email,
.celebration-ranking-channel-card.celebration-ranking-channel-email:link,
.celebration-ranking-channel-card.celebration-ranking-channel-email:visited {
  background-color: #2b3647;
  color: #ffffff !important;
}

.celebration-ranking-channel-card.celebration-ranking-channel-email:hover {
  background-color: #1e2633;
  color: #ffffff !important;
}

/* --- 3. 電話相談（現状問題なしとのことですが、念のため同じ詳細度で保護） --- */
.celebration-ranking-channel-card.celebration-ranking-channel-tel,
.celebration-ranking-channel-card.celebration-ranking-channel-tel:link,
.celebration-ranking-channel-card.celebration-ranking-channel-tel:visited {
  background-color: #ffffff;
  color: #bf0000 !important;
  border: 2px solid #bf0000;
}

.celebration-ranking-channel-card.celebration-ranking-channel-tel:hover {
  background-color: #fff5f5;
  color: #bf0000 !important;
}
/* --- ランキング内 CTAボタン（常に文字色を白に固定） --- */
.celebration-ranking-cta-link,
.celebration-ranking-cta-link:link,
.celebration-ranking-cta-link:visited {
  display: inline-block;
  background-color: #bf0000;
  color: #ffffff !important; /* 訪問済みでも常に白文字を維持 */
  text-decoration: none;
  padding: 14px 35px;
  border-radius: 6px;
  font-weight: bold;
  font-size: 1rem;
  box-shadow: 0 3px 6px rgba(191, 0, 0, 0.2);
  transition: all 0.2s ease;
}

.celebration-ranking-cta-link:hover {
  background-color: #990000;
  color: #ffffff !important;
  transform: translateY(1px);
}