@charset "utf-8";

/* ローディング画像に他のCSSが干渉するのを防ぐ強制リセット */
#loader img {
    display: inline-block !important;
    margin: 0 auto !important;
    padding: 0 !important;
    transform: none !important;
    position: static !important;
}
    

html,
body {
    overflow-x: hidden;
    width: 100%; 
}


/* ==============================================================
   1. 変数 ＆ 基本設定
============================================================== */
:root {
    --color-primary: #5c7c82;         
    --color-accent: #B89C72;        
    --color-bg-white: #FFFFFF;      
    --color-bg-base: #f7fafc;       
    --color-border: #e2e2e2;        
    
    --color-text-main: #2A3132;     
    --color-text-sub:  #5B6366;     
 
    --color-gold: #B89C72;          
}



.l-lp-wrapper *, 
.l-lp-wrapper *::before, 
.l-lp-wrapper *::after { 
    box-sizing: border-box; 
 margin: 0; padding: 0; 
}


.l-lp-wrapper {
    font-family: 'Noto Sans JP', sans-serif;
    background-color: var(--color-bg-white);
    color: var(--color-text-main);
    line-height: 1.8; 
    letter-spacing: 0.05em; 
    width: 100%;
    position: relative;
}




.l-lp-wrapper a { 
    text-decoration: none; 
    color: inherit; 
    outline: none; 
    transition: all 0.3s ease; 
}
.l-lp-wrapper img { 
    max-width: 100%; 
    height: auto; 
    display: block; 
}

.l-lp-wrapper h1, 
.l-lp-wrapper h2, 
.l-lp-wrapper h3, 
.l-lp-wrapper .c-section-title, 
.l-lp-wrapper .c-tag-nav__title {
    font-family: 'Noto Serif JP', serif;
}

/* ==============================================================
   1.5 基本のタイポグラフィ（追加分）
============================================================== */
.l-lp-wrapper h1, 
.l-lp-wrapper h2, 
.l-lp-wrapper h3, 
.l-lp-wrapper h4, 
.l-lp-wrapper h5, 
.l-lp-wrapper h6 {
    margin-bottom: 0.5em;
    font-weight: 600;
    line-height: 1.4;
    color: var(--color-text-main);
}

.l-lp-wrapper h1 { font-size: 2.5rem; }
.l-lp-wrapper h2 { font-size: 2rem; }
.l-lp-wrapper h3 { font-size: 1.5rem; }
.l-lp-wrapper h4 { font-size: 1.25rem; }

.l-lp-wrapper p {
    margin-bottom: 1em;
    line-height: 1.8;
}


.l-lp-wrapper h1:last-child, 
.l-lp-wrapper h2:last-child, 
.l-lp-wrapper h3:last-child, 
.l-lp-wrapper p:last-child {
    margin-bottom: 0;
}


/* ==============================================================
   2. ユーティリティ (u-) ＆ アニメーション (js-)
============================================================== */
.l-lp-wrapper .u-pc-only { display: block; } 
.l-lp-wrapper .u-sp-only { display: none; }
.l-lp-wrapper .u-br-pc { display: inline; } 
.l-lp-wrapper .u-br-sp { display: none; }

@media (max-width: 768px) {
    .l-lp-wrapper .u-br-pc { display: none; }
    .l-lp-wrapper .u-br-sp { display: inline; }
}

.l-lp-wrapper .u-mt-30 { margin-top: 30px !important; }
.l-lp-wrapper .u-mt-60 { margin-top: 60px !important; }
.l-lp-wrapper .u-mb-15 { margin-bottom: 15px !important; }
.l-lp-wrapper .u-text-right { text-align: right !important; }
.l-lp-wrapper .u-text-sm { font-size: 0.875rem !important; color: var(--color-text-sub); line-height: 1.6; }
.l-lp-wrapper .u-text-sm-light { font-size: 0.75rem !important; color: rgba(255, 255, 255, 0.9) !important; line-height: 1.6; }
.l-lp-wrapper .u-text-accent { color: var(--color-accent) !important; font-weight: 700; }


.l-lp-wrapper .u-bg-white { background-color: var(--color-bg-white); }


.l-lp-wrapper .u-bg-base, 
.l-lp-wrapper .u-bg-primary { 
    position: relative; 
    z-index: 0; 
    background-color: transparent !important; 
}
.l-lp-wrapper .u-bg-base::before, 
.l-lp-wrapper .u-bg-primary::before {
    content: ""; 
    position: absolute; 
    top: 0; 

    left: calc(50% - 50vw); 
    width: 100vw; 
    height: 100%; 
    z-index: -1; 
}
.l-lp-wrapper .u-bg-base::before { background-color: var(--color-bg-base); }
.l-lp-wrapper .u-bg-primary::before { background-color: var(--color-primary); }

.l-lp-wrapper .u-bg-primary, 
.l-lp-wrapper .u-bg-primary h2, 
.l-lp-wrapper .u-bg-primary h3, 
.l-lp-wrapper .u-bg-primary p, 
.l-lp-wrapper .u-bg-primary .c-section-title h2, 
.l-lp-wrapper .u-bg-primary .c-timeline__title, 
.l-lp-wrapper .u-bg-primary .c-timeline__desc {
    color: var(--color-bg-white) !important;
}

/* アニメーション */
.l-lp-wrapper .js-fade-up { opacity: 0; transform: translateY(40px); transition: all 1.2s cubic-bezier(0.25, 1, 0.5, 1); }
.l-lp-wrapper .js-fade-up.is-visible { opacity: 1; transform: translateY(0); }
.l-lp-wrapper .js-slide-right { opacity: 0; transform: translateX(-40px); transition: all 1.2s cubic-bezier(0.25, 1, 0.5, 1); }
.l-lp-wrapper .js-slide-right.is-visible { opacity: 1; transform: translateX(0); }
.l-lp-wrapper .js-slide-left { opacity: 0; transform: translateX(40px); transition: all 1.2s cubic-bezier(0.25, 1, 0.5, 1); }
.l-lp-wrapper .js-slide-left.is-visible { opacity: 1; transform: translateX(0); }


/* ==============================================================
   3. 全体レイアウト (l-)
============================================================== */
.l-lp-wrapper .l-section { 
    padding: 100px 5% 80px; 
    position: relative; 
    box-sizing: border-box;
}

.l-lp-wrapper .l-container { max-width: 1080px; margin: 0 auto; }
.l-lp-wrapper .l-container-sm { max-width: 800px; margin: 0 auto; }


/* ==============================================================
   4. コンポーネント (c-) - タイトル・見出し類
============================================================== */
.l-lp-wrapper .c-section-title { text-align: center; margin-bottom: 50px; }
.l-lp-wrapper .c-section-title h2 { font-size: 2rem; font-weight: 400; letter-spacing: 0.05em; margin-bottom: 15px; color: var(--color-text-main); }
.l-lp-wrapper .c-section-title p { font-size: 0.875rem; color: var(--color-text-sub); font-family: sans-serif; }

.l-lp-wrapper .c-heading-area { text-align: center; margin: 96px 0; position: relative; }
.l-lp-wrapper .c-heading-area .area-en {
    display: block; font-family: 'Cormorant Garamond', serif !important;
    font-size: 3.75rem; font-style: italic; font-weight: 300;
    color: var(--color-text-sub); line-height: 1.3; margin-bottom: 15px;
}
.l-lp-wrapper .c-heading-area .area-ja { font-size: 1rem; font-weight: 400; letter-spacing: 0.3em; color: var(--color-text-sub); margin: 0; }

.l-lp-wrapper .c-lead-block { text-align: center; margin-bottom: 40px; }
.l-lp-wrapper .c-lead-block__catch { font-size: 2rem; font-weight: 500; margin-bottom: 30px; line-height: 1.6; color: var(--color-primary); }
.l-lp-wrapper .c-lead-block__text { max-width: 900px; margin: 0 auto; font-size: 1rem; color: var(--color-text-main); text-align: center; line-height: 1.8; }
.l-lp-wrapper .c-lead-block__sub { font-size: 1rem; color: var(--color-text-sub); line-height: 1.8; margin-top: 20px; }



/* ==============================================================
   4. コンポーネント (c-) - ボタン・ナビゲーション
============================================================== */
.c-tag-nav { display: flex; justify-content: center; align-items: center; gap: 24px; margin: 40px auto; padding: 0 15px; }
.c-tag-nav__title { font-family: 'Cormorant Garamond', serif !important; color: var(--color-text-sub); font-size: 0.875rem; letter-spacing: 0.15em; font-weight: 600; }
.c-tag-nav__list { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.c-tag-nav__link { display: inline-block; padding: 8px 24px; font-size: 0.75rem; color: var(--color-text-sub); font-weight: 600; background: var(--color-bg-white); border: 1px solid var(--color-border); border-radius: 9999px; transition: all 0.3s; }
.c-tag-nav__link:hover { background: var(--color-bg-base); color: var(--color-accent); border-color: var(--color-accent); transform: translateY(-2px); }

.c-cv-block { display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 24px; margin-top: 50px; width: 100%; }

.c-btn {
    position: relative; overflow: hidden; display: flex; justify-content: center; align-items: center;
    padding: 18px 20px; border: 1px solid var(--color-gold); border-radius: 4px;
    background-color: transparent; color: var(--color-text-main); font-size: 0.875rem; font-weight: bold;
    letter-spacing: 0.2em; text-indent: 0.2em; transition: all 0.3s ease; text-decoration: none;
    width: 340px; max-width: 100%; box-sizing: border-box; letter-spacing: normal;
}
.c-btn:not(.c-btn--primary)::before {
    content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.4), transparent);
    transform: skewX(-20deg); transition: all 0.5s ease;
}
.c-btn:not(.c-btn--primary):hover::before { left: 150%; }
.c-btn:hover {
    background-color: var(--color-gold); border-color: var(--color-gold);
    box-shadow: 0 4px 15px rgba(122,111,90,0.2); color: var(--color-bg-white) !important;
}

.c-btn--primary { background-color: var(--color-primary);
    border: 1px solid var(--color-primary);
    color: #fff !important; 
    transition: all 0.3s ease; }
.c-btn--primary:hover { background-color: var(--color-gold); border-color: var(--color-gold); }
.u-bg-primary .c-btn { color: var(--color-bg-white) !important; }

/* ==============================================================
   4. コンポーネント (c-) - カード類
============================================================== */
/* 画像＋テキストメディア行 */
.c-media { display: flex; align-items: center; gap: 60px; margin-bottom: 100px; }
.c-media:last-child { margin-bottom: 0; }
.c-media:nth-child(even) { flex-direction: row-reverse; }
.c-media__img { flex: 0 0 50%; position: relative; }
.c-media__img img { width: 100%; height: auto; box-shadow: 0 15px 40px rgba(0,0,0,0.2); }
.c-media__body { flex: 1; text-align: left; }
.c-media__num { font-family: 'Cinzel', serif; font-size: 3.5rem; color: var(--color-gold); opacity: 0.2; line-height: 1; margin-bottom: 5px; }
.c-media__title { font-size: 1.5rem; font-weight: 400 !important; margin-bottom: 20px; color: var(--color-primary) !important; }
.c-media__desc { font-size: 0.95rem; line-height: 2.0; }


/* ==============================================================
   4. コンポーネント (c-) - ボックス・バナー・テーブル類
============================================================== */

/* リボン付きボックス（旧 recommend-box） */
.c-box-ribbon { position: relative; max-width: 800px; margin: 80px auto; padding: 70px 50px 50px; background: rgba(193, 176, 146, 0.05); border: 1px solid var(--color-gold); border-radius: 4px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.04); }
.c-box-ribbon__heading { position: absolute; top: -24px; left: -12px; right: -2px; background: var(--color-gold); color: var(--color-bg-white); font-size: 1.25rem; font-weight: 600; padding: 15px 20px; text-align: center; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
.c-box-ribbon__heading::before { content: ''; position: absolute; top: 100%; left: 0; border-bottom: 12px solid transparent; border-right: 12px solid #8F7C5E; }

/* --- 2. 基本テキスト（単体で使う場合） --- */
.c-box-ribbon__title {
    text-align: center;
    font-size: 1.25rem;
    color: var(--color-primary);
    margin-bottom: 15px;
    font-weight: bold;
}


/* --- 3. 横並びレイアウト（画像 左 / テキスト 右） --- */
.c-box-ribbon__body {
    display: flex;
    align-items: center;
    gap: 35px;
    margin-top: 20px;
    margin-bottom: 10px;
}
.c-box-ribbon__img {
    flex-shrink: 0;
    width: 240px; 
    margin: 0;
    background-color: #f7fafc!important;
 }
.c-box-ribbon__img img {
mix-blend-mode: multiply;
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);

}
.c-box-ribbon__content {
    flex-grow: 1;
    text-align: left;
}
.c-box-ribbon__content .c-box-ribbon__desc {
    text-align: left;
    margin-bottom: 20px;
        font-size: 0.95rem;
    line-height: 1.8;
    color: var(--color-text-main);
}





/* ==============================================================
   共通のお知らせ・注意書きテキスト (c-notice-text)
============================================================== */
.c-notice-text {
    margin-top: 2rem;
    max-width: 800px;
    font-size: 0.785rem;
    color: var(--color-text-sub);
}

/* 価格改定などの重要なお知らせ（赤字・太字） */
.c-notice-text__alert {
    font-size: 0.785rem;
    margin: 0 0 8px 0;
    font-weight: bold;
}

/* 通常の注意書き */
.c-notice-text__standard {
    margin: 0;
}

/* タイムライン */
.c-timeline { 
    position: relative; 
    max-width: 800px; 
    margin: 0 auto; 
    padding-left: 50px; 
    border-left: 1px solid rgba(113, 154, 161, 0.679); 
}

.c-timeline__item { 
    position: relative; 
    margin-bottom: 60px; 
    padding: 45px 40px; 
    background: rgba(255, 255, 255, 0.038); 
    backdrop-filter: blur(12px); 
    -webkit-backdrop-filter: blur(12px); 
    border: 1px solid rgba(255, 255, 255, 0.25); 
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3); 
    border-radius: 8px; 
}

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

.c-timeline__item::before { 
    content: ""; 
    display: block; 
    position: absolute; 
    left: -56.5px; 
    top: 55px; 
    transform: translateY(-50%); 
    
    width: 12px; 
    height: 12px; 
    border-radius: 50%; 
    background-color: var(--color-primary); 
    z-index: 10; 
}

.c-timeline__meta { 
    color: var(--color-primary); 
    font-size: 1rem; 
    margin-bottom: 10px; 
    font-weight: 600; 
}

.c-timeline__title { 
    font-size: 1.5rem; 
    font-weight: 400; 
    margin-bottom: 15px; 
    color: var(--color-text-main); 
    line-height: 1.6; 
}

.c-timeline__desc { 
    font-size: 0.9rem; 
    color: var(--color-text-sub); 
    line-height: 1.8; 
}


/* アコーディオン */
.c-accordion { max-width: 800px; margin: 0 auto; }
.c-accordion details { border-bottom: 1px solid var(--color-border); padding: 30px 0; }
.c-accordion summary { font-size: 0.875rem; cursor: pointer; list-style: none; position: relative; padding-right: 40px; font-weight: 500; color: var(--color-text-main); }
.c-accordion summary::-webkit-details-marker { display: none; }
.c-accordion summary::after { content: '+'; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-family: 'Cormorant Garamond', serif; color: var(--color-gold); font-size: 1.625rem; }
.c-accordion details[open] summary::after { content: '−'; }
.c-accordion__answer { padding-top: 20px; font-size: 0.875rem; color: var(--color-text-sub); line-height: 1.6; }


/* ==============================================================
   汎用ラベル（c-label）
============================================================== */
.c-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 4.5rem;
    padding: 0.2em 0.8em;
    border-radius: 4px;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.05em;
    vertical-align: middle;
}

.c-label--light {
    background: #fff;
    color: #111;
    border: 1px solid #dcdcdc;
}

.c-label--dark {
    background: #111;
    color: #fff;
    border: 1px solid #111;
}

/* ==============================================================
   5. ページ固有・メインビジュアル (c-hero)
============================================================== */
.c-hero { position: relative; width: 100vw; height: 100vh; margin-left: calc(50% - 50vw); overflow: hidden; }
.c-hero__slider { display: flex; width: 300%; height: 100%; animation: slide 18s infinite; }
.c-hero__slide { position: relative; flex: 0 0 100vw; height: 100%; }
.c-hero__slide img { display: block; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.65); }

@keyframes slide {
  0%, 28% { transform: translateX(0); }
  33%, 61% { transform: translateX(-100vw); }
  66%, 95% { transform: translateX(-200vw); }
  100% { transform: translateX(0); }
}

.c-hero__content { position: absolute; inset: 0; z-index: 10; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; color: var(--color-bg-white); text-align: center; }
.c-hero__sub { margin-bottom: 20px; font-size: 0.875rem; letter-spacing: 0.35em; }
.c-hero__title { font-family: 'Cormorant Garamond', 'Noto Serif JP', serif !important; font-size: 3rem; font-style: italic; line-height: 1; margin-bottom: 30px; font-weight: 300; color: var(--color-bg-white) !important; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); }
.c-hero__copy { max-width: 700px; margin-bottom: 40px; font-size: 3rem; }

/* ==============================================================
   6. 比較テーブル & ラッパー
============================================================== */
.table-wrapper { 
    width: 100%; 
    max-width: 1080px; 
    margin: 0 auto; 
    overflow-x: auto; 
    -webkit-overflow-scrolling: touch; 
}

.comparison-table-flipped { 
    width: 100%; 
    min-width: 1050px; 
    border-collapse: collapse; 
    background-color: var(--color-bg-white); 
    font-size: 0.8rem; 
    table-layout: fixed; 
}

.comparison-table-flipped th, 
.comparison-table-flipped td { 
    border: 1px solid var(--color-border); 
    padding: 15px 12px; 
    vertical-align: middle; 
    line-height: 1.6; 
}

.comparison-table-flipped thead th { 
    background-color: var(--color-primary); 
    color: var(--color-bg-white); 
    text-align: center; 
    font-weight: 600; 
}
/* ==============================================================
   スマホ時：テーブルヘッダーを「横並び（改行なし）」にする
============================================================== */
@media screen and (max-width: 768px) {
    /* 1. スマホでは改行(br)を消す */
    .comparison-table-flipped thead th br {
        display: none;
    }
    
    /* 2. 縦並び用の余白をリセットし、横並び用の「右余白」をつける */
    .comparison-table-flipped thead th .c-label {
        margin-bottom: 0 !important;
        margin-right: 6px;
    }
}



.c-table-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 6px;
    vertical-align: middle;
    letter-spacing: 0.05em;
}
.c-table-badge--light {
    background-color: #ffffff;
    color: #111111;
    border: 1px solid #dcdcdc;
}
.c-table-badge--dark {
    background-color: #111111;
    color: #ffffff;
    border: 1px solid #111111;
}


.comparison-table-flipped thead th.col-header { 
    position: sticky; 
    left: 0; 
    z-index: 2; 
    white-space: nowrap; 
    width: 160px; 
}

.comparison-table-flipped tbody th.row-header { 
    background-color: var(--color-bg-base); 
    text-align: center; 
    position: sticky; 
    left: 0; 
    z-index: 1; 
    box-shadow: 2px 0 5px rgba(0,0,0,0.03); 
    padding: 12px 8px;
}

.c-table-product {
    display: block;
    font-size: 1rem;
    color: var(--color-primary);
    font-weight: bold;
    margin-bottom: 2px;
}
.c-table-desc {
    display: block;
    font-size: 0.7rem;
    color: var(--color-text-main);
    font-weight: normal;
    white-space: normal; 
    line-height: 1.4;
}

.comparison-table-flipped tbody td { 
    color: var(--color-text-main); 
}
.comparison-table-flipped tbody td.td-center { 
    text-align: center; 
}
.comparison-table-flipped tbody td.td-right { 
    text-align: right; 
    padding-right: 15px !important; 
}

/* 行ホバー時の背景色変更 */
@media (hover: hover) {
    .comparison-table-flipped tbody tr:hover td,
    .comparison-table-flipped tbody tr:hover th.row-header {
        background-color: #fdfbf7; 
        transition: background-color 0.2s ease;
    }
}

.c-table-price {
    white-space: nowrap; 
    margin-bottom: 8px; 
}
.c-table-price:last-child {
    margin-bottom: 0;
}

.u-price-align {
    display: inline-block;
    width: 5.5em;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ==============================================================
   7. レスポンシブ用（スマホ）
============================================================== */
@media (max-width: 768px) {
    .l-section { padding: 60px 5%; }
     .c-section-title h2 { font-size: 1.75rem; }
    .c-section-title p { text-align: left; }
    .c-tag-nav { flex-direction: column; gap: 10px; }
    .c-lead-block__catch { font-size: 1.75rem !important; text-align: left; padding: 0 15px; }
    .c-lead-block__text, .c-lead-block__sub { padding: 0 15px; text-align: left !important; }
    
    .c-box-ribbon { padding: 60px 20px 40px; margin: 60px 12px; }
    .c-box-ribbon__heading { font-size: 1rem; padding: 12px 15px; left: -12px; right: -2px; }
    .c-box-ribbon__body {
        flex-direction: column;
        gap: 20px;
    }  
    .c-box-ribbon__img {
        width: 100%;
        max-width: 260px;
        margin: 0 auto;
    }

   
    .c-media, .c-media:nth-child(even) { flex-direction: column; gap: 25px; margin-bottom: 60px; }
    .c-media__img { width: 100%; }

    .c-timeline { padding-left: 25px; margin: 40px 15px; }
    .c-timeline__item { padding: 30px 20px; }
    .c-timeline__item::before { left: -32px; top: 31px; }
    .c-timeline__title { font-size: 1.25rem; }
    
    .c-gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    
    .c-heading-area { margin: 20px 0 20px; }
    .c-heading-area .area-en { font-size: 4.75rem; }
    .c-heading-area .area-ja { font-size: 0.875rem; letter-spacing: 0.25em; }
    .c-heading-area p { text-align: left; }

    .c-hero { height: 600px; min-height: 500px; }
    .c-hero__slide img { object-position: center center; }
    .c-hero__title { font-size: 36px; margin-bottom: 20px; }
    .c-hero__copy { font-size: 1.875rem; padding: 0 15px; }
    
    .c-cv-block { flex-direction: column; gap: 16px; }
}


/* ==============================================================
   スペックタグリスト (c-spec-tags)
============================================================== */
/* --- 1. 全体の枠 --- */
.c-spec-tags {
    list-style: none;
    display: flex;
    justify-content: flex-start; 
    flex-wrap: wrap;
    gap: 12px 25px; 
    font-size: 0.875rem;
    background-color: var(--color-bg-base);
    padding: 18px 20px;
    border-radius: 6px;
    margin: 0;
}

/* --- 2. 各リスト項目 --- */
.c-spec-tags li {
    display: flex;
    align-items: flex-start;
    line-height: 1.6;
    color: var(--color-text-main);
    width: 100%; 
}

/* --- 3. 見出しラベル (strong) --- */
.c-spec-tags strong {
    flex-shrink: 0;
    font-size: 0.785rem;
    font-weight: bold;
    margin-top: 2px;
    padding: 2px 0;      
    width: 5em; 
}
/* ==============================================================
   仕様リスト内の拡張パーツ（価格・割引・注釈）
============================================================== */
/* リスト全体に少しゆとりを持たせる拡張クラス */
.c-spec-tags--spaced {
    margin-top: 16px;
}
.c-spec-tags--spaced > li {
    margin-bottom: 12px;
}
.c-spec-tags--spaced > li:last-child {
    margin-bottom: 0;
}

/* 価格エリアのラッパー */
.c-spec-tags__price-wrap {
    margin-top: 8px;
}

/* 年ごとの価格行（横並び） */
.c-spec-tags__price-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}
.c-spec-tags__price-row:last-child {
    margin-bottom: 0;
}

/* 金額（メイン） */
.c-spec-tags__price-main {
    font-size: 1.25em;
    font-weight: bold;
}

/* 〇〇円お得！のテキスト */
.c-spec-tags__discount {
    font-size: 0.8rem;
        font-weight: bold;
    color: var(--color-accent, #d49a89);
}

/* --- 4. スマホ対応 --- */
@media (max-width: 768px) {
    .c-spec-tags {
        flex-direction: column; 
        gap: 12px;
    font-size: 0.875rem;
            padding: 15px; 
    }
}



/* ==============================================================
   1. Album Gallery Layout (全体の骨組み・ナビゲーション)
============================================================== */
.l-container-album {
    display: flex; 
    flex-direction: column; 
    gap: 24px; 
    max-width: 1080px; 
    margin: 40px auto; 
    padding: 0 10px;
}
.l-main { 
    width: 100%; 
}

/* ナビゲーションの基本スタイル（スマホ用がベース） */
.c-nav-album {
    width: 100%; 
    order: -1; 
    display: flex; 
    gap: 12px; 
    overflow-x: auto;
    white-space: nowrap; 
    -webkit-overflow-scrolling: touch; 
    padding-bottom: 12px; 
    border-bottom: 1px solid var(--color-border);
}
.c-nav-album::-webkit-scrollbar { 
    display: none; 
}
.c-nav-album__item {
    display: inline-block; 
    padding: 10px 18px; 
    background: var(--color-bg-base);
    text-decoration: none; 
    color: var(--color-text-main); 
    font-size: 13px; 
    letter-spacing: 0.08em;
    border-radius: 20px; 
    transition: all 0.3s ease; 
    cursor: pointer; 
    border: 1px solid transparent;
}

/* ▼ PC用のレイアウト・ナビゲーション上書き */
@media (min-width: 768px) {
    .l-container-album { flex-direction: row; gap: 50px; margin: 80px auto; padding: 0 40px; }
    .l-main { width: 72%; }
    .c-nav-album { width: 28%; order: 0; display: block; padding-top: 0; overflow: visible; border-bottom: none; }
    .c-nav-album__item { 
        display: block; padding: 18px 20px; background: transparent; border-radius: 0; border: none;
        border-bottom: 1px solid var(--color-border); font-size: 14px; 
    }
}


/* ==============================================================
   2. Tab Logic & Interactions (タブ切り替え・ハイライト)
============================================================== */
.p-album { 
    display: none; 
    animation: fadeIn 0.4s ease; 
}
@keyframes fadeIn { 
    from { opacity: 0; transform: translateY(5px); } 
    to { opacity: 1; transform: translateY(0); } 
}

/* タブ選択時に該当アルバムを表示 */
#tab1:checked ~ .l-container-album .p-album--1,
#tab2:checked ~ .l-container-album .p-album--2,
#tab3:checked ~ .l-container-album .p-album--3,
#tab4:checked ~ .l-container-album .p-album--4,
#tab5:checked ~ .l-container-album .p-album--5,
#tab6:checked ~ .l-container-album .p-album--6,
#tab7:checked ~ .l-container-album .p-album--7,
#tab8:checked ~ .l-container-album .p-album--8 { 
    display: block; 
}

/* カレントナビゲーション（選択中タブの装飾） */
#tab1:checked ~ .l-container-album .c-nav-album__item[for="tab1"],
#tab2:checked ~ .l-container-album .c-nav-album__item[for="tab2"],
#tab3:checked ~ .l-container-album .c-nav-album__item[for="tab3"],
#tab4:checked ~ .l-container-album .c-nav-album__item[for="tab4"],
#tab5:checked ~ .l-container-album .c-nav-album__item[for="tab5"],
#tab6:checked ~ .l-container-album .c-nav-album__item[for="tab6"],
#tab7:checked ~ .l-container-album .c-nav-album__item[for="tab7"],
#tab8:checked ~ .l-container-album .c-nav-album__item[for="tab8"] {
    background: var(--color-primary); 
    color: var(--color-bg-white); 
    font-weight: bold; 
    border-color: var(--color-primary);
}

/* ▼ PC用の選択中タブの装飾上書き */
@media (min-width: 768px) {
    #tab1:checked ~ .l-container-album .c-nav-album__item[for="tab1"],
    #tab2:checked ~ .l-container-album .c-nav-album__item[for="tab2"],
    #tab3:checked ~ .l-container-album .c-nav-album__item[for="tab3"],
    #tab4:checked ~ .l-container-album .c-nav-album__item[for="tab4"],
    #tab5:checked ~ .l-container-album .c-nav-album__item[for="tab5"],
    #tab6:checked ~ .l-container-album .c-nav-album__item[for="tab6"],
    #tab7:checked ~ .l-container-album .c-nav-album__item[for="tab7"],
    #tab8:checked ~ .l-container-album .c-nav-album__item[for="tab8"] {
        background: var(--color-primary); color: var(--color-bg-white); padding-left: 25px;
    }
}


/* ==============================================================
   3. Viewer & Thumbnails (画像ビューアー・サムネイル)
============================================================== */
.p-viewer { position: relative; width: 100%; aspect-ratio: 4/3; background: var(--color-bg-base); margin-bottom: 16px; overflow: hidden; }
.p-viewer__img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.p-viewer__img--fade { opacity: 0; transition: opacity 0.4s ease; z-index: 1; }

.p-album:has(.c-thumb__item--1:hover, .c-thumb__item--1:active) .p-viewer__img--1,
.p-album:has(.c-thumb__item--2:hover, .c-thumb__item--2:active) .p-viewer__img--2,
.p-album:has(.c-thumb__item--3:hover, .c-thumb__item--3:active) .p-viewer__img--3 { opacity: 1; z-index: 2; }

.c-thumb { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.c-thumb__item { aspect-ratio: 4/3; cursor: pointer; background: var(--color-border); overflow: hidden; }
.c-thumb__item img { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.3s ease, filter 0.3s ease; filter: brightness(0.85); }
.c-thumb__item:hover img, .c-thumb__item:active img { opacity: 1; filter: brightness(1); }

/* ==============================================================
   4. Album Information (アルバム詳細・スペック表記)
============================================================== */
.p-album__info { margin-top: 30px; }
.p-album__title { font-size: 2rem; font-weight: 400 !important; font-family: 'Noto Sans JP', sans-serif !important; margin-bottom: 12px; border-bottom: 2px solid var(--color-bg-base); padding-bottom: 12px; color: var(--color-primary) !important; }
.p-album__title span { font-size: 14px; color: var(--color-text-sub); margin-left: 10px; font-weight: normal; }
.p-album__desc { font-size: 15px; color: var(--color-text-main); margin-bottom: 24px; line-height: 1.8; }
.p-album__specs { list-style: none; padding: 0; font-size: 14px; background: var(--color-bg-base); border-radius: 8px; padding: 10px; }

/* ★修正ポイント1： ">" を追加して「一番外側の li」だけに下線を引く */
.p-album__specs > li { padding: 12px 0; border-bottom: 1px dashed var(--color-border); }
.p-album__specs > li:last-child { border-bottom: none; padding-bottom: 0; }

/* ★修正ポイント2： dlを横並びにして、dtとddが綺麗に分かれるようにする */
.p-album__specs dl { display: flex; width: 100%; align-items: flex-start; }
.p-album__specs dt { width: 80px; font-weight: bold; color: var(--color-primary); flex-shrink: 0; padding-top: 2px; }
.p-album__specs dd { margin: 0; color: var(--color-text-main); flex-grow: 1; }

/* ▼ スマホ用：タイトルとスペック表の微調整 */
@media (max-width: 768px) {
    .p-album__title { font-size: 1.5rem; }
    .p-album__specs { font-size: 0.875rem !important; }
    /* スマホで横幅がキツイ場合は、タイトル(dt)と内容(dd)を縦並びにする */
    .p-album__specs dl { flex-direction: column; gap: 8px; }
.p-album__specs dt {
    white-space: nowrap; 
}
}

/* ==============================================================
   5. Pricing Area (汎用価格リスト c-price-list)
   ※サイト内のどこでも使えるレスポンシブな価格一覧モジュール
============================================================== */
.c-price-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.c-price-list__item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-bottom: 1px dashed var(--color-border);
    padding-bottom: 12px;
}

.c-price-list__item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/* プラン名・見出し */
.c-price-list__title {
    font-weight: bold;
    color: var(---color-text-mai);
    font-size: 0.95rem;
}

/* 金額エリア */
.c-price-list__group {
    display: flex;
    flex-wrap: wrap; 
    gap: 6px 24px;
}

/* 各金額の行 */
.c-price-list__price {
    display: flex;
    align-items: center;
    font-size: 0.95rem;
    color: var(--color-text-main);
}

.c-price-list__price strong {
    font-size: 1.15em;
    margin: 0 4px 0 8px;
}

/* 補足・注記（増刷など） */
.c-price-list__note {
    font-size: 0.8rem;
    color: var(--color-text-sub);
    margin-left: 4px;
}
/* ==============================================================
   価格リスト内の年別スタイル
============================================================== */
.c-price-list__group {
    display: flex;
    flex-direction: column; 
    gap: 8px;
    margin-top: 4px;
}

.c-price-list__price {
    display: flex;
    align-items: center;
    font-size: 0.95rem;
}

.c-price-list__price strong {
    font-size: 1.2em;
    margin: 0 2px 0 8px;
    font-variant-numeric: tabular-nums;
}

.c-price-list__note {
    font-size: 0.8rem;
    font-weight: normal;
    color: var(--color-text-sub);
    margin-left: 8px;
}