/* ===============================================================
    Product Detail
    - cameras > single
    - NOTE: 共通トークン（色/フォントサイズ等）は common.css を参照
=============================================================== */

/* ---- Layout helpers ---- */
.container,
.product-hero__inner,
.inquiry__inner,
.product-features__inner,
.product-specs__inner,
.product-docs__inner,
.trust__inner {
    max-width: 1200px;
    margin: 0 auto;product-catalog
	
	
	
	
	
	
	
    padding: 0 24px;
}

#main-content {
    padding-top: 120px;
}

/* ===============================================================
    Product Hero
=============================================================== */
.product-hero {
    padding: 0 0 20px;
}

.product-hero__inner {
    display: grid;
    grid-template-columns: 150px 1fr;
    column-gap: 30px;
    row-gap: 20px;
    align-items: start;
    justify-content: center;
    max-width: 1200px;
    padding: 0 5%;
    box-sizing: border-box;
}

.product-hero__media {
    position: relative;
    max-width: 150px;
    height: auto;
    object-fit: contain;
}

.product-hero__media::after {
    content: "";
    position: absolute;
    bottom: -10%;
    left: -7%;
    width: 17%;
    height: 37.95122%;
    line-height: 1.45;
    background: url("../image/products/men_intr-illust.png") no-repeat center center / contain;
}

/* 画像本体をスケーラブルに */
.product-hero__media img {
    display: block;
    width: 100%;
    height: auto;
    /* margin-left: 40px; */
    border: 1px solid var(--color-bg-card-blue);
    border-radius: 8px;
    box-sizing: border-box;
}

.product-hero__content {
    /* max-width: 648px; */
}

/* ▼レイアウトA専用：カテゴリ → ブランド/型番 を上下に */
.product-hero:not(.product-hero--layout-b) .product-hero__labels {
    display: inline-flex;
    flex-direction: column;   /* 上下 */
    align-items: flex-start;
    gap: 16px;
    width: max-content;
}

/* ▼レイアウトB専用：カテゴリとブランド・型番を横並びに */
.product-hero--layout-b .product-hero__labels {
    display: flex;
    flex-direction: row;    /* 左:カテゴリ / 右:ブランド+型番 */
    flex-wrap: wrap;        /* 幅が足りないときは折り返し */
    align-items: center;
    gap: 8px 16px;
}

/* バッジは縮まないように */
.product-hero--layout-b .product-hero__badge {
    flex-shrink: 0;
}

/* ブランド＋型番（h1）を横に自然に並べる */
.product-hero--layout-b .product-hero__main-title {
    display: inline-flex;
    align-items: baseline;
    gap: .5em;
    margin: 0;              /* バッジと高さを揃える */
}

.product-hero__badge {
    display: inline-block;
    padding: 0.5em 1em;
    border-radius: 4px;
    border: 1px solid var(--color-text-main);
    color: var(--color-text-main);
    font-size: var(--font-size-text-sm);
}

.product-hero__main-title {
    display: inline-block;
    margin: 0 0 1em;
    padding: 0.5em 0.8em;
    background-color: var(--color-bg-card-blue);
    font-size: var(--font-size-title-md);
    font-weight: 700;
    line-height: 1.5;
    border-radius: 4px;
}

.product-hero__sub-title {
    margin-bottom: 0.5625em;
    font-size: var(--font-size-sub-title-l);
    font-weight: 700;
    line-height: 1.45;
    color: var(--color-text-accent);
}

.product-hero__subtitle {
    margin: 0 0 2em;
    font-weight: 700;
    font-size: var(--font-size-sub-title-s);
}

.product-hero__lead {
    margin: 0 0 2em;
    color: var(--color-text-main);
    font-size: var(--font-size-text-md);
    line-height: 1.8;
}

.product-hero__jump {
    display: inline-block;
    margin: 6px 0 12px;
    color: var(--color-link);
    text-underline-offset: 2px;
}

.product-hero__points {
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
    font-size: var(--font-size-text-md);
}

.product-hero__points li {
    position: relative;
    padding-left: 24px;
    margin: 0.5em 0;
    line-height: 1.45;
}

/* ★リストマークをイラスト画像に変更 */
.product-hero__points li::before {
    content: "";
    position: absolute;
    top: 0.3em;
    left: 0;
    width: 16px;
    height: 16px;
    line-height: 1.45;
    background: url("../image/common/check-icon.png") no-repeat center center / contain;
}

/* タブレット（1024px以下） */
@media (max-width: 1024px) {
    #main-content {
        padding-top: 80px;
    }
    .product-hero__inner {
        grid-template-columns: 320px 1fr;
        padding: 0 24px;
    }
    .product-hero__media {
        margin: 0 auto;
        /* max-width: 96%; */
        max-width: 150px;
    }
    .product-hero__content {
        max-width: initial;
    }
    .product-hero__subtitle {
        margin: 0 0 1em;
        font-weight: 700;
        font-size: var(--font-size-sub-title-s);
    }
    .product-hero__media::after {
        content: "";
        position: absolute;
        bottom: -10%;
        left: -5%;
        width: 16%;
        line-height: 1.45;
    }
}

/* スマホ（768px以下） */
@media (max-width: 768px) {
    .product-hero {
        padding: 0 0 60px;
    }
    .product-hero__inner {
        grid-template-columns: 1fr;
        gap: 8vw;
    }    
    .product-hero__media {
        max-width: 82%;
    }
    .product-hero__media img {
        max-width: 150px;
        margin-left: 0;
    }
    .product-hero__media::after {
        left: -16%;
        width: 14%;
    }

    /* ▼レイアウトB専用：カテゴリとブランド・型番を横並びに */
    .product-hero--layout-b .product-hero__labels {
        flex-direction: column;    /* 左:カテゴリ / 右:ブランド+型番 */
        flex-wrap: wrap;        /* 幅が足りないときは折り返し */
        align-items: flex-start;
        gap: 8px 16px;
    }
}

/* ===============================================================
    Inquiry Panel
=============================================================== */
.inquiry {
    max-width: 857px;
    width: 100%;
    margin: 0 auto 80px;
    padding: 0 24px;
    box-sizing: border-box;
}

.inquiry__inner {
    border: 1px solid var(--color-bg-card-blue);
    background: var(--color-bg-card-lightblue);
    border-radius: 10px;
    padding: 32px;
}

.inquiry__title {
    position: relative;
    margin: 0;
    padding-bottom: 1em;
    font-weight: 700;
    font-size: var(--font-size-sub-title-m);
    text-align: center;
    line-height: 1.45;
    color: var(--color-text-accent);
}

.inquiry__title::before {
    content: "";
    position: absolute;
    top: 0.2em;
    right: calc(50% + 10em);
    width: 82px;
    height: 98px;
    line-height: 1.45;
    background: url(../image/products/men_tel-illust.png) no-repeat center center / contain;
}

.inquiry__title::after {
    content: "";
    position: absolute;
    top: 0.2em;
    left: calc(50% + 10em);
    width: 70px;
    height: 100px;
    line-height: 1.45;
    background: url(../image/products/women_mail-illust.png) no-repeat center center / contain;
}

.inquiry__lead {
    margin-bottom: 1em;
    font-size: var(--font-size-text-md);
    line-height: 1.8;
    text-align: center;
}

.inquiry__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 4.6667%;
    justify-content: center;
}

/* button */
.inquiry__buttun {
    align-items: center;
    gap: 0.5em;
    padding: 0.8em 1em;
    font-size: var(--font-size-sub-title-m);
    line-height: 1;
    border: 2px solid var(--color-bg-card-blue);
    border-radius: 10px;
    color: var(--color-text-main);
    background-color: var(--color-bg-card-white);
    position: relative;
    z-index: 0;
    transition: color 0.4s ease;
}

.inquiry__tel-icon {
    display: inline-block;
    width: 28px;
    height: 36px;
    background: url(../image/common/tel-icon.png) no-repeat center;
    background-size: contain;
}

.inquiry__mail-icon {
    display: inline-block;
    width: 39px;
    height: 25px;
    background: url(../image/common/mail-icon.png) no-repeat center;
    background-size: contain;
}

/* スマホ（768px以下） */
@media (max-width: 768px) {
    .inquiry {
        margin: 0 auto 40px;
    }
    .inquiry__inner {
        padding: 24px 16px;
    }
    .inquiry__title::before {
        content: "";
        position: absolute;
        top: 0.2em;
        right: calc(50% + 4em);
        width: 41px;
        height: 49px;
    }
    .inquiry__title::after {
        left: calc(50% + 4em);
        width: 35px;
        height: 50px;
    }
    .inquiry__actions {
        gap: 20px;
        justify-content: center;
    }
    .inquiry__buttun {
        font-size: 1.6rem;
    }
    .inquiry__tel-icon {
        display: inline-block;
        width: 14px;
        height: 18px;
        background: url(../image/common/tel-icon.png) no-repeat center;
        background-size: contain;
    }
    .inquiry__mail-icon {
        display: inline-block;
        width: 18px;
        height: 12px;
        background: url(../image/common/mail-icon.png) no-repeat center;
        background-size: contain;
    }
}

/* ===============================================================
    Outline
    - フォトグリッド：PC/Tab 最大2列、SP 1列
    - SCF自由入力コンテンツ用: .product-outline__html
=============================================================== */
.product-outline {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 5%;
    box-sizing: border-box;
}

.product-outline__inner {
    margin: 0 auto 72px;
    width: 100%;
}

/* 初期化：通常の下線は消す */
.product-outline__inner a {
    font-weight: 700;
    color: var(--color-text-accent);
    text-decoration: none;
    position: relative;
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0% 2px;
    transition: background-size .3s ease, color .2s ease;
}

/* ホバーで線が伸びる */
.product-outline__inner a:hover,
.product-outline__inner a:focus-visible {
    background-size: 100% 2px;
}

.product-outline-title {
    position: relative;
    margin: 60px 0 1em;
    padding-left: calc(70px + 1em);
    font-weight: 700;
    font-size: var(--font-size-sub-title-m);
    text-align: left;
}

.product-outline-title::before {
    content: "";
    position: absolute;
    top: -0.5em;
    left: 0;
    width: 70px;
    height: 54px;
    background: url(../image/products/men_desc-illust.png) no-repeat center center / contain;
}

.product-outline__inner p {
    padding-left: calc(70px + 24px);
    font-size: var(--font-size-text-md);
    line-height: 1.8;
}

.product-catalog__inner p {
    line-height: 1.8;
}

.product-catalog__inner table td {
    text-align: center;
}

/* --- 写真：最大2列（SPは1列） --- */
.product-outline__photo {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* justify-content: center; */
    gap: 16px;
    margin: 0 auto 28px;
    padding: 0;
    list-style: none;
    max-width: 900px;
}

.product-outline__photo > li {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #e7ecf2;
}

.product-outline__photo img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* 任意：列数を個別に固定したいケース */
.photo-cols-1 {
    grid-template-columns: 1fr !important;
}
.photo-cols-2 {
    grid-template-columns: repeat(2, 1fr) !important;
}

/* --- SCF自由入力コンテンツ（HTMLをそのまま差し込み） --- */
.product-outline__html {
    margin: 0 0 28px;
}

.product-outline__html img,
.product-outline__html video,
.product-outline__html picture {
    max-width: 100%;
    height: auto;
}

/* 既存デュオ（単発画像エリア：必要に応じて使用） */
.product-outline__duo {
    margin: 0 auto;
    padding: 1em;
    width: 100%;
}

.product-outline__duo img {
    display: block;
    margin: 0 auto;
    width: 50%;
}

.product-outline__item {
    text-align: center;
    border: 1px solid #e7ecf2;
    border-radius: 12px;
    padding: 10px;
    background: #fff;
}

.product-outline__item figcaption {
    margin-top: 6px;
    font-size: var(--font-size-text-sm);
    color: var(--color-text-sub);
}

/* タブレット（1024px以下） */
@media (max-width: 1024px) {
    .product-outline-title {
        padding-left: 24px;
    }
    .product-outline__inner p {
        padding-left: 24px;
    }
}

/* スマホ（768px以下） */
@media (max-width: 768px) {
    .product-outline__duo img {
        width: 100%;
    }
    .product-outline__photo {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .product-outline__block img {
        width: 100%;        
        max-width: 280px;
    }
}

/* ===============================================================
    Features
=============================================================== */
.product-features {
    padding: 18px 0;
}

.feature {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 14px;
    border: 1px solid #e7ecf2;
    border-radius: 14px;
    padding: 16px;
    background: #fff;
    margin: 0 0 12px;
}

.feature__icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #e9fbf3;
    border: 1px solid #c7ecd8;
}

.feature__title {
    margin: 0 0 6px;
    font-weight: 700;
    font-size: var(--font-size-title-xs);
}

.feature__text {
    margin: 0 4px 6px 0;
    color: var(--color-text-sub);
}

.feature__list {
    margin: 6px 0 0;
    padding-left: 1.2em;
}

/* ===============================================================
    Specs
=============================================================== */
.product-specs {
    padding: 6px 0 10px;
}

.specs-table {
    margin-top: 60px;
    margin-left: calc(70px + 24px);
    border-collapse: separate;
    border-spacing: 0;
    border-top: 1px solid #c8cacc;
    background: #fff;
    box-sizing: border-box;
    font-size: var(--font-size-text-md);
    line-height: 1.8;
}

.specs-table th,
.specs-table td {
    padding: 0.875em 2em;
    vertical-align: top;
    font-size: var(--font-size-text-md);
    border-bottom: 1px solid #c8cacc;
}

.specs-table th {
    width: 32%;
    background: var(--color-bg-card-sky);
    border-right: 1px solid #c8cacc;
    border-bottom: 1px solid #c8cacc;
    color: var(--color-text);
    text-align: center;
    vertical-align: middle;
    font-weight: 400;
}

.specs-table tr + tr th,
.specs-table tr + tr td {
    border-bottom: 1px solid #c8cacc;
}

.specs-table__section th {
    background: #eaf3ff;
    color: var(--color-text-main);
    text-align: center;
    border-right: none;
}

/* タブレット（1024px以下） */
@media (max-width: 1024px) {
    .specs-table {
        margin-left: 24px;
    }
    .specs-table--cols4 {
        margin-left: 24px;
    }
}

/* スマホ（768px以下） */
@media (max-width: 768px) {
    .product-outline__inner {
        margin: 0 auto 40px;
        width: 100%;
    }
    .product-outline {
        padding: 0 24px;
    }
    .product-outline-title {
        position: relative;
        margin: 60px 0 1em;
        padding-left: 0;
        font-weight: 700;
        font-size: var(--font-size-sub-title-m);
        text-align: left;
        line-height: 1.45;
    }
    .product-outline-title::before {
        top: 0em;
        width: 35px;
        height: 27px;
    }
    .product-outline__inner p {
        padding-left: 0;
    }
    .specs-table {
        margin-top: 32px;
        margin-left: 0;
    }
    .specs-table th,
    .specs-table td {
        padding: 0.6em 1.2em;
        vertical-align: top;
        font-size: var(--font-size-text-md);
    }
    .specs-table th {
        width: 22%;
    }
}

/* ===============================================================
    Specs (3-column version, same width as normal table)
=============================================================== */
.specs-table--cols3 {
    margin-top: 60px;
    margin-left: calc(70px + 24px);
    border-collapse: separate;
    border-spacing: 0;
    border-top: 1px solid #c8cacc;
    border-bottom: 1px solid #c8cacc;
    background: #fff;
    box-sizing: border-box;
    font-size: var(--font-size-text-md);
    line-height: 1.8;
    width: calc(100% - (70px + 24px));
    text-align: center;
}

/* ---- セル設定 ---- */
.specs-table--cols3 th,
.specs-table--cols3 td {
    padding: 0.875em 0.5em;
    vertical-align: middle;
    border-top: 1px solid #c8cacc;
    border-right: 1px solid #c8cacc;
    width: 33.333%;
}

.specs-table--cols3 td:last-child {
    border-right: none;
}

/* ---- 見出し（セクション） ---- */
.specs-table--cols3 .specs-table__section th {
    background: #eaf3ff;
    color: var(--color-text-main);
    text-align: center;
    border-right: none;
    font-weight: 600;
}

/* ---- スマホ（768px以下） ---- */
@media (max-width: 768px) {
    .specs-table--cols3 {
        margin-top: 32px;
        margin-left: calc(35px + 12px);
        width: calc(100% - (35px + 12px));
    }
    .specs-table--cols3 tr {
        display: flex;
        flex-direction: column;
    }
    .specs-table--cols3 td {
        width: 100%;
        border-right: none;
        border-top: 1px solid #c8cacc;
        padding: 0.6em 1.2em;
    }
}

/* ===============================================================
    Specs (4-column version, same width as normal table)
=============================================================== */
.specs-table--cols4 {
    margin-top: 60px;
    margin-left: calc(70px + 24px);
    border-collapse: separate;
    border-spacing: 0;
    border-top: 1px solid #c8cacc;
    /* border-bottom: 1px solid #c8cacc; */
    background: #fff;
    box-sizing: border-box;
    font-size: var(--font-size-text-md);
    line-height: 1.8;
    width: calc(100% - (70px + 24px));
    text-align: center;
}

/* セル共通 */
.specs-table--cols4 th,
.specs-table--cols4 td {
    width: 10%;
    padding: 0.875em 0.75em;
    vertical-align: middle;
    /* border-top: 1px solid #c8cacc; */
    border-right: 1px solid #c8cacc;
}

/* 4等分 */
.specs-table--cols4 td:last-child {
    width: 40%;
    text-align: left;
    padding: 0.875em 2em;
}

.specs-table--cols4 td:last-child {
    border-right: none;
}

/* セクション見出し（既存スタイル踏襲） */
.specs-table--cols4 .specs-table__section th {
    background: #eaf3ff;
    color: var(--color-text-main);
    text-align: center;
    border-right: none;
    font-weight: 600;
}

.specs-table--cols4 tr th[colspan="2"] {
    background-color: #fff;
}

/* スマホ（768px以下） */
@media (max-width: 768px) {
    .specs-table--cols4 {
        margin-top: 32px;
        margin-left: 0;
        width: calc(100% - 12px);
        font-size: var(--font-size-text-sm);
    }
    .specs-table--cols4 .specs-table__section {
        display: table-row;
    }
    .specs-table--cols4 td {
        box-sizing: border-box;
        border-top: 1px solid #c8cacc;
        padding: 0.6em 1.2em;
    }
}
/* ===============================================================
    Specs (5-column version, same width as normal table)
=============================================================== */
.specs-table--cols5 {
    margin-top: 60px;
    margin-left: calc(70px + 24px);
    border-collapse: separate;
    border-spacing: 0;
    border-top: 1px solid #c8cacc;
    background: #fff;
    box-sizing: border-box;
    font-size: var(--font-size-text-md);
    line-height: 1.8;
    width: calc(100% - (70px + 24px));
    text-align: center;
}

/* セル共通（5等分） */
.specs-table--cols5 th,
.specs-table--cols5 td {
    width: 20%;
    padding: 0.875em 0.75em;
    vertical-align: middle; 
    border-right: 1px solid #c8cacc;
    border-bottom: 1px solid #c8cacc;
}

/* 行末セルは右罫線を外す */
.specs-table--cols5 tr > *:last-child {
    border-right: none;
}

/* セクション見出し行（既存踏襲） */
.specs-table--cols5 .specs-table__section th {
    background: #eaf3ff;
    color: var(--color-text-main);
    text-align: center;
    border-right: none;
    font-weight: 600;
}

/* 例：説明列（最終列）だけ左寄せにしたい場合 */
.specs-table--cols5 td:last-child {
    text-align: center;
    padding: 0.875em 2em;
}
/* タブレット（1024px以下） */
@media (max-width: 1024px) {
    .specs-table--cols3,
    .specs-table--cols4,
    .specs-table--cols4 {
        margin-left: 24px;
    }
}

/* ---- スマホ（768px以下） ---- */
@media (max-width: 768px) {
    .specs-table--cols5 {
        margin-top: 32px;
        margin-left: calc(35px + 12px);
        width: calc(100% - (35px + 12px));
        font-size: var(--font-size-text-sm);
    }
    /* 行を縦積みにして読みやすさを優先（既存3列の方針と同様） */
    .specs-table--cols5 tr {
    }
    .specs-table--cols5 th,
    .specs-table--cols5 td {
        width: 20%;
        border-right: none;
        padding: 0.6em 1.2em;
    }
    /* セクション見出し行は通常表示のまま */
    .specs-table--cols5 .specs-table__section {
        display: table-row;
    }
}

/* ===============================================================
   Tables: SP(<=768px)のみ横スクロール。既存見た目は不変
=============================================================== */

/* PC/Tablet は既存どおり */
.table-scroll {
    width: 100%;
    overflow: visible;
}

/* SPのみ：横スクロールを有効化 + 最低幅で崩れ防止 */
@media (max-width: 768px) {

    .table-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }

    /* 既存のSP向け縦積み化ルールを、このラッパー内だけ無効化 */
    .table-scroll table {
        display: table;
        width: auto;
        min-width: 640px;
        border-collapse: separate;
    }
    .table-scroll table tr {
        display: table-row !important;
    }
    .table-scroll table th,
    .table-scroll table td {
    }

    /* 列数ごとの最低幅（必要に応じて微調整してください） */
    .table-scroll > .specs-table--cols2 {
        min-width: 768px;
    }
    .table-scroll > .specs-table--cols3 {
        min-width: 768px;
    }
    .table-scroll > .specs-table--cols4 {
        min-width: 768px;
    }
    .table-scroll > .specs-table--cols5 {
        min-width: 768x;
    }
    .specs-table--cols3, .specs-table--cols4, .specs-table--cols4 {
        margin-left:0;
    }

    /* 以前のSP向け個別ルールを上書き（縦積み化/余計な幅指定の解除） */
    .table-scroll .specs-table--cols3 tr {
        display: table-row !important;
    }
    .table-scroll .specs-table--cols3 th,
    .table-scroll .specs-table--cols3 td {
        width: auto !important;
        padding: 0.875em 0.5em;
        border-right: 1px solid #e7ecf2;
    }
    .table-scroll .specs-table--cols3 td:last-child {
        border-right: none;
    }

    .table-scroll .specs-table--cols4 tr {
        display: table-row !important;
    }
    .table-scroll .specs-table--cols4 th,
    .table-scroll .specs-table--cols4 td {
        width: auto !important;
        padding: 0.875em 0.75em;
        border-right: 1px solid #e7ecf2;
    }
    .table-scroll .specs-table--cols4 td:last-child {
        border-right: none;
        padding: 0.875em 2em;
        text-align: left;
    }

    .table-scroll .specs-table--cols5 tr {
        display: table-row !important;
    }
    .table-scroll .specs-table--cols5 th,
    .table-scroll .specs-table--cols5 td {
        width: auto !important;
        padding: 0.875em 0.75em;
        border-right: 1px solid #e7ecf2;
        text-align: center;
    }
    .table-scroll .specs-table--cols5 tr > *:last-child {
        border-right: none;
    }

    /* スクロールバーの視認性（任意） */
    .table-scroll::-webkit-scrollbar {
        height: 8px;
    }
    .table-scroll::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 8px;
    }
    .table-scroll::-webkit-scrollbar-track {
        background: transparent;
    }
}

/* ===============================================================
    Documents
=============================================================== */
.product-docs {
    padding: 12px 0 24px;
}

.doclist {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.doclist__link {
    display: block;
    padding: 12px 14px;
    border: 1px solid #e7ecf2;
    border-radius: 12px;
    background: #fff;
    text-decoration: none;
    color: var(--color-link);
}

.doclist__link:hover {
    background: #f3f7ff;
}

/* ===============================================================
    Trust
=============================================================== */
.trust {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
}

.trust__inner {
    margin: 0 auto 115px;
    padding: 70px 5%;
    border: 1px solid var(--color-bg-card-blue);
    background-color: var(--color-bg-card-lightblue);
    border-radius: 10px;
}

.trust__title {
    position: relative;
    margin-bottom: 0.75em;
    padding: 0 40px;
    font-size: var(--font-size-sub-title-l);
    font-weight: 700;
    text-align: center;
    line-height: 1.45;
    color: var(--color-text-accent);
}

.trust__title::before {
    content: "";
    position: absolute;
    top: 0.7em;
    left: 0;
    width: 125px;
    height: 150px;
    background: url(../image/products/women_replacement-illust.png) no-repeat center center / contain;
}

.trust__title::after {
    content: "";
    position: absolute;
    top: 1em;
    right: 0;
    width: 89px;
    height: 168px;
    background: url(../image/products/men_replacement-illust.png) no-repeat center center / contain;
}

.trust__lead {
    width: 55.5%;
    max-width: 620px;
    margin: 0 auto 3.75em;
    font-size: var(--font-size-text-md);
    text-align: center;
    line-height: 1.45;
    color: var(--color-text-main);
}

.trust__list {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3.8%;
    margin: 0;
    padding: 0;
    list-style: none;
    z-index: 99;
}

.trust__item {
    padding: 40px 32px;
    background: var(--color-bg-card-white);
    border: 1px solid #e7ecf2;
    border-radius: 16px;
}

.trust__subtitle {
    margin: 0 0 1em;
    font-size: var(--font-size-sub-title-s);
    font-weight: 700;
    color: var(--color-text-accent-dark);
    text-align: center;
    line-height: 1.45;
}

.trust__icon {
    margin: 0 auto 20px;
    width: 120px;
    height: 125px;
}

.trust__icon img {
    width: 100%;
}

.trust__text {
    font-size: var(--font-size-text-md);
    line-height: 1.45;
}

/* スマホ（768px以下） */
@media (max-width: 768px) {
    .trust__inner {
        margin: 0 auto 60px;
        padding: 40px 5%;
    }
    .trust__title {
        width: 70%;
        margin: 0 auto;
    }
    .trust__lead {
        width: 75%;
        max-width: 524px;
        margin: 0 auto 1em;
        font-size: var(--font-size-text-md);
        text-align: center;
        line-height: 1.45;
        color: var(--color-text-main);
    }
    .trust__item {
        margin-bottom: 20px;
        padding: 24px 16px;
        background: var(--color-bg-card-white);
        border: 1px solid #e7ecf2;
        border-radius: 16px;
    }
    .trust__list {
        display: block;
    }
    .trust__icon {
        margin: 0 auto 10px;
        width: 60px;
        height: 62px;
    }
    .trust__title::before {
        content: "";
        position: absolute;
        top: 0;
        left: -1em;
        width: 60px;
        height: 50px;
        background: url(../image/products/women_replacement-illust.png) no-repeat center center / contain;
    }
    .trust__title::after {
        content: "";
        position: absolute;
        top: 0.1em;
        right: -0.5em;
        width: 44px;
        height: 50px;
    }
}

/* ===============================================================
    Related Products
=============================================================== */
.related-products__inner {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
}

.related-products__title {
    position: relative;
}

.related-products__title::before {
    content: "";
    position: absolute;
    top: 0;
    right: calc(50% + 3em);
    width: 64px;
    height: 58px;
    background: url(../image/products/product-icon.png) no-repeat bottom / contain;
}

.related-products__title::after {
    content: "";
    position: absolute;
    top: -60px;
    left: calc(50% + 3em);
    width: 95px;
    height: 147px;
    background: url(../image/top/search-illust.png) no-repeat bottom / contain;
}

.related-products {
    padding: 6px 0 100px;
}

.related-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4.1667%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.related-card {
    display: block;
    background: #fff;
    border: 1px solid #e7ecf2;
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
}

.related-card__media img {
    display: block;
    width: 100%;
    height: auto;
}

.related-card__name {
    display: block;
    padding: 10px 12px;
    font-weight: 700;
    color: var(--color-text);
}

.related-card:hover .related-card__name {
    color: var(--color-link);
}

.related-card__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 1em 1em 2em;
    background-color: var(--color-bg-card-gray);
    min-height: 0;
}

/* スマホ（768px以下） */
@media (max-width: 768px) {
    .related-products__title::before {
        width: 32px;
        height: 28px;
        background: url(../image/products/product-icon.png) no-repeat bottom / contain;
    }
    .related-products__title::after {
        top: -1em;
        width: 50px;
        height: 77px;
    }
    .related-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }
}


/* 追加 */
/* ====================== Layout B: シンプル版 ====================== */



/* 左側の画像（小さめ） */
.product-hero__media--small {
    width: 100%;
    max-width: 300px;
}

.product-hero__media--small img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* 右側の製品情報（シンプル） */
.product-hero__content--compact {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* PDFビューワー */
.product-outline--pdf {
    padding: 60px 24px;
    background: #f9fafb;
}

.pdf-viewer iframe {
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* レスポンシブ */
@media (max-width: 768px) {
    .product-hero--layout-b .product-hero__inner--compact {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .product-hero__media--small {
        max-width: 100%;
    }

    .pdf-viewer iframe {
        height: 600px;
    }
}


/* ====================== Layout B: インラインお問い合わせ調整 ====================== */

/* レイアウトBの右側コンテンツ内に配置されたinquiry */
.inquiry--inline {
    margin-top: 32px;
}

.inquiry--inline .inquiry__inner {
    padding: 24px;
}

/* レスポンシブ */
@media (max-width: 768px) {
    .inquiry--inline {
        margin-top: 24px;
    }
}

/* ====================== Layout B: シンプル版の調整 ====================== */

/* 2カラムレイアウト（余白を追加） */
.product-hero--layout-b .product-hero__inner--compact {
    display: grid;
    grid-template-columns: 170px 1fr;
    row-gap: 0px;
    column-gap: 30px;
    justify-content: center;
    align-items: start;
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 24px 0px;
}

/* 左側の画像（小さめ） */
.product-hero__media--small {
    width: 100%;
    max-width: 150px;
}

.product-hero__media--small img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* 右側の製品情報（シンプル） */
.product-hero__content--compact {
    display: inline;
    flex-direction: column;
    gap: 16px;
}

/* ====================== Layout B: インラインお問い合わせ調整 ====================== */

/* レイアウトBの右側コンテンツ内に配置されたinquiry */
.inquiry--inline {
    margin-top: 32px;
}

.inquiry--inline .inquiry__inner {
    padding: 24px;
    position: relative; /* before/after用 */
}

/* ★ レイアウトBの時のみ、before/afterのイラストを半分に縮小 */
.inquiry--inline .inquiry__inner::before,
.inquiry--inline .inquiry__inner::after {
    transform: scale(0.5); /* 50%に縮小 */
    transform-origin: center;
}

/* もし既存のinquiry__innerにbefore/afterが設定されている場合、
   より具体的な位置調整が必要な場合は以下を追加 */
.inquiry--inline .inquiry__inner::before {
    transform: scale(0.5);
    /* 必要に応じて位置を微調整 */
    /* left: -30px; など */
}

.inquiry--inline .inquiry__inner::after {
    transform: scale(0.5);
    /* 必要に応じて位置を微調整 */
    /* right: -30px; など */
}

@media (max-width: 1024px) {
  /* ---- A / B 共通：ヒーローを1カラム（縦並び）に ---- */
  .product-hero__inner,
  .product-hero--layout-b .product-hero__inner--compact {
    grid-template-columns: 1fr;
    gap: 0;
  }
    .product-hero.product-hero--layout-b {
    padding: 0 0 20px;
  }

  /* 画像ブロックは中央寄せにして上下だけ余白 */
  .product-hero__media,
  .product-hero--layout-b .product-hero__media--small {
    margin: 0 auto 32px;
  }

  /* ---- Layout B のインライン問い合わせを Layout A と同じ見た目に寄せる ---- */
  .product-hero--layout-b .inquiry--inline {
    max-width: 857px;          /* Aの .inquiry と同じ幅 */
    width: 100%;
    margin: 0 auto 80px;       /* Aと同じ下マージン */
    padding: 0 24px;
    box-sizing: border-box;
  }

  .product-hero--layout-b .inquiry--inline .inquiry__inner {
    border: 1px solid var(--color-bg-card-blue);
    background: var(--color-bg-card-lightblue);
    border-radius: 10px;
    padding: 32px;             /* Aの .inquiry__inner と同じ */
  }

  .product-hero--layout-b .inquiry--inline .inquiry__lead {
    max-width: 100%;           /* Bで絞っている幅制限を解除 */
    margin-bottom: 1em;
    text-align: center;
  }

  .product-hero--layout-b .inquiry--inline .inquiry__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 4.6667%;
    justify-content: center;
    align-items: center;
    flex-direction: row;       /* Aと同じく横並び */
  }

  .product-hero--layout-b .inquiry--inline .inquiry__buttun {
    font-size: var(--font-size-sub-title-m);  /* Aと同じ文字サイズ */
    padding: 0.8em 1em;                       /* Aのボタンと同じ余白感 */
  }

  /* アイコンサイズもAにそろえる */
  .product-hero--layout-b .inquiry--inline .inquiry__tel-icon {
    width: 28px;
    height: 36px;
  }

  .product-hero--layout-b .inquiry--inline .inquiry__mail-icon {
    width: 39px;
    height: 25px;
  }

  /* B用に小さくしていたイラストの縮小を解除してAと同じスケールに */
  .product-hero--layout-b .inquiry--inline .inquiry__inner::before,
  .product-hero--layout-b .inquiry--inline .inquiry__inner::after,
  .product-hero--layout-b .inquiry--inline .inquiry__title::before,
  .product-hero--layout-b .inquiry--inline .inquiry__title::after {
    transform: none;
  }
  /* Aと同じボックスサイズに揃える */
  .product-hero--layout-b .inquiry--inline {
    max-width: 857px;
    width: 100%;
    margin: 0 auto 80px;
    padding: 0 24px;
    box-sizing: border-box;
  }

  .product-hero--layout-b .inquiry--inline .inquiry__inner {
    border: 1px solid var(--color-bg-card-blue);
    background: var(--color-bg-card-lightblue);
    border-radius: 10px;
    padding: 32px;
  }

  /* タイトル＆文字サイズをAと同じに */
  .product-hero--layout-b .inquiry--inline .inquiry__title {
    margin: 0;
    padding-bottom: 1em;
    font-weight: 700;
    font-size: var(--font-size-sub-title-m);
    text-align: center;
    line-height: 1.45;
    color: var(--color-text-accent);
  }

  /* B側でかけている scale() を無効化して位置をAと合わせる */
  .product-hero--layout-b .inquiry--inline .inquiry__title::before,
  .product-hero--layout-b .inquiry--inline .inquiry__title::after,
  .product-hero--layout-b .inquiry--inline .inquiry__inner::before,
  .product-hero--layout-b .inquiry--inline .inquiry__inner::after {
    transform: none;
    transform-origin: center;
  }

  /* リード文もAと同じ設定へ */
  .product-hero--layout-b .inquiry--inline .inquiry__lead {
    max-width: 100%;
    margin-bottom: 1em;
    font-size: var(--font-size-text-md);
    line-height: 1.8;
    text-align: center;
  }

  /* ボタン周り（並び・大きさ）をAと同じに */
  .product-hero--layout-b .inquiry--inline .inquiry__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 4.6667%;
    justify-content: center;
    align-items: center;
    flex-direction: row; /* Bで column にしていたのを戻す */
  }

  .product-hero--layout-b .inquiry--inline .inquiry__buttun {
    align-items: center;
    gap: 0.5em;
    padding: 0.8em 1em;
    font-size: var(--font-size-sub-title-m);
    line-height: 1;
    border: 2px solid var(--color-bg-card-blue);
    border-radius: 10px;
    color: var(--color-text-main);
    background-color: var(--color-bg-card-white);
  }

  /* ボタン内テキストもAと同じスケールに */
  .product-hero--layout-b .inquiry--inline .title-marker {
    font-size: inherit;
    white-space: normal;
  }

}
/* ======================
   768px以下：Layout B を Layout A に合わせる
   ====================== */
@media (max-width: 768px) {

  /* ▼ ヒーローまわり（余白・グリッドを Layout A に合わせる） */
  .product-hero.product-hero--layout-b {
    padding: 0 0 0px; /* Layout A の SP と同じ */ 
  }

  .product-hero--layout-b .product-hero__inner--compact {
    /* Layout A の .product-hero__inner(SP) に寄せる */
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 0 5%;
  }

  .product-hero--layout-b .product-hero__media--small {
    max-width: 202px;
    margin: 0 auto;   /* 中央寄せ（お好みで） */
  }

  .product-hero--layout-b .product-hero__media--small {
    /* 画像のサイズ感も Layout A の SP にそろえる */
    max-width: 82%;
    margin: 0 auto;
    max-width: 202px;
  }

  /* ▼ Layout B のインライン問い合わせを「通常の問い合わせ」に寄せる */
  .product-hero--layout-b .inquiry--inline {
    max-width: 857px;        /* .inquiry と同じ */
    width: 100%;
    margin: 0 auto 40px;     /* 下マージンも .inquiry(SP) に合わせる */
    padding: 0 24px;
    box-sizing: border-box;
  }

  .product-hero--layout-b .inquiry--inline .inquiry__inner {
    /* SP 用の .inquiry__inner と同等の余白 */
    padding: 24px 16px;
  }

  .product-hero--layout-b .inquiry--inline .inquiry__lead {
    /* Layout B で max-width:60% 等が効いているのをSPでは解除 */
    max-width: 100%;
    margin-bottom: 1em;
    text-align: center;
  }

  .product-hero--layout-b .inquiry--inline .inquiry__actions {
    gap: 20px;
    justify-content: center;
    align-items: center;
    flex-direction: row; /* A と同じく横並びでよければ */
  }

  .product-hero--layout-b .inquiry--inline .inquiry__buttun {
    font-size: 1.6rem; /* .inquiry__buttun(SP) に合わせる */
  }

  /* アイコンサイズも A の SP に寄せる */
  .product-hero--layout-b .inquiry--inline .inquiry__tel-icon {
    width: 14px;
    height: 18px;
  }

  .product-hero--layout-b .inquiry--inline .inquiry__mail-icon {
    width: 18px;
    height: 12px;
  }

  /* Layout B で縮小しているイラストをSPでは通常サイズに近づける */
  .product-hero--layout-b .inquiry--inline .inquiry__inner::before,
  .product-hero--layout-b .inquiry--inline .inquiry__inner::after {
    transform: none;
  }
}

/* ====================== PDF Catalog Section（レイアウトB用） ====================== */
/* PDF Embedder用のスタイル調整 */
.product-catalog {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 5%;
    box-sizing: border-box;
}
.product-catalog__inner {
    margin-bottom: 60px;
    padding: 0 24px;
}
.product-catalog__inner .pdfemb-viewer {    
    max-width: 858px;
    width: 100%;
    height: 70vh; /* ★ 画面高さの70% */
    margin: 0 auto;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.product-catalog__inner .pdfemb-viewer iframe {
    width: 100% !important;
    max-width: 650px !important;
    height: 100% !important; /* ★ 親要素の高さに合わせる */
}

.product-catalog__inner .wp-block-pdf-embedder {
    margin: 24px auto;
    max-width: 650px;
    width: 100%;
    height: 70vh; /* ★ 画面高さの70% */
}

.product-catalog__inner .wp-block-pdf-embedder iframe,
.product-catalog__inner iframe {
    width: 100% !important;
    max-width: 650px !important;
    height: 70vh !important; /* ★ 画面高さの70% */
    margin: 0 auto;
    display: block;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* 投稿本文内の見出しスタイル */
.product-catalog__inner h2,
.product-catalog__inner h3 {
    margin: 0 0 24px;
    font-weight: 700;
    color: var(--color-text-accent);
    text-align: center;
}

.product-catalog__inner h2 {
    font-size: var(--font-size-title-lg);
}

.product-catalog__inner h3 {
    font-size: var(--font-size-title-md);
}

/* レスポンシブ */
@media (max-width: 768px) {
    .product-catalog {
        padding: 10px 24px;
        box-sizing: border-box;
        margin: 0 auto;
    }
    .product-catalog__inner {
        margin-bottom: 20px;
        padding: 0;
    }

    /* タブレット以下では画面の75%に */
    .product-catalog__inner .pdfemb-viewer,
    .product-catalog__inner .wp-block-pdf-embedder,
    .product-catalog__inner .pdfemb-viewer iframe,
    .product-catalog__inner .wp-block-pdf-embedder iframe,
    .product-catalog__inner iframe {
        height: 75vh !important;
    }
}

@media (max-width: 480px) {
    /* スマホでは画面の80%に */
    .product-catalog__inner .pdfemb-viewer,
    .product-catalog__inner .wp-block-pdf-embedder,
    .product-catalog__inner .pdfemb-viewer iframe,
    .product-catalog__inner .wp-block-pdf-embedder iframe,
    .product-catalog__inner iframe {
        height: 80vh !important;
    }
}


/* ======================
   Layout B: パンくず直下の H1（ブランド＋型番）の位置調整
   ====================== */

.product-hero__heading {
    max-width: 1200px;      /* パンくずと同じ */
    margin: 0 auto;         /* 中央寄せ */
    padding: 0 24px 0;   /* 左右24pxでパンくずと揃える */
    box-sizing: border-box;
}

/* スマホのとき、hero と同じ5%パディングに揃えたい場合 */
@media (max-width: 768px) {
    .product-hero__heading {
        padding: 0 5% px;
    }
}



/* ======================
   PDF Embedder（製品詳細：PDFカタログ用）
   ニュースページと同じ挙動にする
   ====================== */

/* 親コンテナ（PDF 全体） */
.product-catalog__inner .wp-block-pdf-embedder,
.product-catalog__inner .pdfemb-viewer {
  display: block;
  box-sizing: border-box;

  /* ★ PC では最大 858px、画面が狭くなったら 100% まで縮む */
  width: min(858px, 100%) !important;

  /* ★ 既存の height:70vh や、プラグインの inline height を打ち消す */
  height: auto !important;

  margin: 24px auto 40px;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  overflow: hidden;

  /* ★ PDF 元データ（858 × 1213）に合わせた縦横比 */
  aspect-ratio: 858 / 1213;
}

/* ビューア本体（iframe） */
.product-catalog__inner .wp-block-pdf-embedder iframe,
.product-catalog__inner .pdfemb-viewer iframe {
  display: block;
  width: 100% !important;   /* コンテナの幅にフィット */
  height: 100% !important;  /* コンテナ（aspect-ratio で決まった高さ）にフィット */
  margin: 0;
  border: 0;
}

/* ▼ ニュース側と同じように、SP でも比率はそのまま（必要ならここで微調整） */
@media (max-width: 768px) {
  .product-catalog__inner .wp-block-pdf-embedder,
  .product-catalog__inner .pdfemb-viewer {
    aspect-ratio: 858 / 1213;
  }
}

@media (max-width: 480px) {
  .product-catalog__inner .wp-block-pdf-embedder,
  .product-catalog__inner .pdfemb-viewer {
    aspect-ratio: 858 / 1213;
  }
}


.pdfemb-viewer {
    background-color: #fff !important;
}