/* ==========================================
   ナビ・オプションページ固有CSS
   ========================================== */

/* セクション間マージン（Figmaのメタデータから計算） */
/* カテゴリタイトル → ローカルナビ: 24px (共通CSSで定義済み) */
/* ローカルナビ → ヒーロー: 96px */
.c-herodop {
    margin-top: 96px;
}

/* ヒーロー → POPセクション: 96px */
.c-presentationdop {
    margin-top: 96px;
}

/* POPセクション → Product Summary: 96px */
.product-summary {
    margin-top: 96px;
}

/* ----------------------------------------
   Product Summary セクション
   ---------------------------------------- */

/* セクションタイトル */
.section-title {
    font-family: var(--font-family-bold);
    font-size: 32px;
    font-weight: var(--font-weight-bold);
    line-height: 1.5;
    letter-spacing: 1.28px;
    color: #222222;
    margin: 0 0 24px 0;
}

/* カラムレイアウトのサブタイトル */
.product-summary .c-columnsdop-txt {
    font-family: var(--font-family-bold);
    font-size: 12px;
    font-weight: var(--font-weight-bold);
    line-height: 1.5;
    letter-spacing: 0.48px;
    color: #666666;
    margin-bottom: 0;
}

/* カラムレイアウトのメインタイトル */
.product-summary .c-columnsdop-ttl {
    font-family: var(--font-family-bold);
    font-size: 16px;
    font-weight: var(--font-weight-bold);
    line-height: 1.5;
    letter-spacing: 0.64px;
    color: #222222;
}

/* カラムアイテムのgapを削除（画像・サブタイトル・メインタイトルを個別に調整） */
.product-summary .c-columnsdop-item {
    gap: 0;
}

/* 画像とサブタイトルの間: 16px */
.product-summary .c-columnsdop-media {
    margin-bottom: 16px;
}

/* カラム間のgapを32pxに設定、SP版でも横並び */
.product-summary .c-columnsdop {
    gap: 32px;
    flex-wrap: wrap;
    flex-direction: row !important;
}

/* カラムの幅を計算（SP: 2カラム） */
.product-summary .c-columnsdop .c-columnsdop-item {
    flex: 0 0 calc((100% - 32px) / 2) !important;
    max-width: calc((100% - 32px) / 2);
}

/* PC版: 3カラムレイアウト */
@media (min-width: 1024px) {
    .product-summary .c-columnsdop .c-columnsdop-item {
        flex: 0 0 calc((100% - 64px) / 3) !important;
        max-width: calc((100% - 64px) / 3);
    }
}

/* ----------------------------------------
   カラムアイテム リンク化
   ---------------------------------------- */

/* a タグのデフォルトスタイルをリセット */
a.c-columnsdop-item {
    text-decoration: none !important;
    color: inherit;
    transition: background-color 0.3s;
}

a.c-columnsdop-item:hover {
    background-color: #f4f4f4;
}

/* tjp_parts.css の "#contents-body .section a:hover img { opacity: 0.7 }" を上書き */
a.c-columnsdop-item:hover img {
    opacity: 1 !important;
}

/* ----------------------------------------
   外部リンクアイコン付きタイトル（用品の取扱説明書）
   ---------------------------------------- */

.c-columnsdop-ttl-with-icon {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.c-columnsdop-ttl-with-icon .c-columnsdop-ttl {
    margin: 0;
}

.external-link-icon {
    display: block;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    transform: translateY(-2px);
}

/* ----------------------------------------
   ナビ地図更新: 画像をcontainで表示
   ---------------------------------------- */

.c-columnsdop-media.-contain {
    background-color: #f9f9f9;
}

.c-columnsdop-media.-contain .c-columnsdop-img {
    object-fit: contain;
}

/* ----------------------------------------
   POPセクション リンク
   ---------------------------------------- */

/* 2つのリンク間のgapを制御するラッパー */
.pop-link-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.pop-link-list .c-carcolumnsdop-link-wrapper + .c-carcolumnsdop-link-wrapper {
    margin-top: 8px;
}

/* リンクスタイルをカスタマイズ */
.c-presentationdop-content .c-carcolumnsdop-link {
    font-size: 16px;
    letter-spacing: 0.64px;
    border-radius: 4px;
    transition: background-color 0.3s, opacity 0.3s;
    align-items: center;
}

.c-presentationdop-content .c-carcolumnsdop-link::after {
    align-self: center;
    flex-shrink: 0;
    transform: translateY(-2px);
}

.c-presentationdop-content .c-carcolumnsdop-link:hover {
    background-color: #f4f4f4;
    opacity: 1;
    color: #000000;
}

/* ----------------------------------------
   アクセサリーTOPへ戻るボタン
   ---------------------------------------- */

.button-container {
    margin-top: 96px;
    margin-bottom: 96px;
}

/* PC版でボタン幅を調整（Figmaに合わせて592px） */
@media (min-width: 1024px) {
    .button-container .p-btndop {
        max-width: 592px;
    }
}

/* ----------------------------------------
   レスポンシブ対応（SP版）
   ---------------------------------------- */

@media (max-width: 1023px) {
    /* セクションタイトル（24px） */
    .section-title {
        font-size: 24px;
        letter-spacing: 0.96px;
    }

    /* カラムレイアウトのサブタイトル（10px） */
    .product-summary .c-columnsdop-txt {
        font-size: 10px;
        letter-spacing: 0.4px;
    }

    /* カラムレイアウトのメインタイトル（14px） */
    .product-summary .c-columnsdop-ttl {
        font-size: 14px;
        letter-spacing: 0.56px;
    }

    /* カラム間のgapを16pxに変更 */
    .product-summary .c-columnsdop {
        gap: 16px;
    }

    /* カラム幅を再計算（gap: 16px） */
    .product-summary .c-columnsdop .c-columnsdop-item {
        flex: 0 0 calc((100% - 16px) / 2) !important;
        max-width: calc((100% - 16px) / 2);
    }

    /* POPセクションのリンク */
    .c-presentationdop-content .c-carcolumnsdop-link {
        font-size: 12px;
        letter-spacing: 0.48px;
    }
}