@charset "UTF-8";
/* ========================================
   【特許取得】ホールド強めの次世代ブラトップで叶える理想のシルエット
   サイズは「カンプ上のpx × var(--px)」(375pxで等倍、800pxで最大)
   換算: 01_mv 768px→×0.48828 / 02_combine 531px→×0.70621
         03_modal・04_tokkyo・05_gw 1080px→×0.34722
   02_combine の上半分は 10_review の rv-combine と同じ作り(位置は 02_combine に合わせて調整)
======================================== */
:root {
    --px: min(calc(100vw / 375), calc(800px / 375));
    --c-text: #333333;
    --c-dark: #1c1c1c;
    --c-orange: #d48a00;
}

.l-wrapper {
    max-width: 800px;
    margin-inline: auto;
}

.cb {
    color: var(--c-text);
    font-family: "Yu Gothic Pr6N M", "游ゴシック", YuGothic, sans-serif;
    letter-spacing: 0;
    line-height: 1.8;
    overflow: hidden;
}

.cb img {
    max-width: none;
}

/* ---------- 冒頭(01_mv はJPG全体を1枚の画像) ---------- */
.cb-mv img {
    width: 100%;
    height: auto;
}

.cb-head__text {
    padding: calc(24 * var(--px)) calc(16 * var(--px)) 0;
}

.cb-head__title {
    font-family: "Yu Gothic Pr6N B", "游ゴシック", YuGothic, sans-serif;
    font-weight: bold;
    font-size: calc(16 * var(--px));
    line-height: 1.6;
}

@media screen and (max-width: 768px) {
    .cb-head__title {
        font-size: 18px;
    }
}

/* ---------- 本文 ---------- */
.cb-text {
    margin-top: calc(32 * var(--px));
    padding: 0 calc(16 * var(--px));
    font-size: 16px;
    line-height: 1.8;
}

.cb-text p + p {
    margin-top: 1.8em;
}

.cb-head + .cb-text {
    margin-top: calc(20 * var(--px));
}

@media screen and (max-width: 768px) {
    .cb-text {
        font-size: 14px;
    }

    .cb-head + .cb-text {
        margin-top: calc(24 * var(--px));
    }
}

/* 03_modal・04_tokkyo・05_gw(文字のない写真) */
.cb-photo img {
    display: block;
    width: 100%;
    height: auto;
}

/* ---------- セクション見出し(h2) ---------- */
.cb-sec {
    margin-top: calc(56 * var(--px));
}

.cb-sec__title {
    margin-bottom: calc(12 * var(--px));
    padding: 0 calc(16 * var(--px));
    font-family: "Yu Gothic Pr6N B", "游ゴシック", YuGothic, sans-serif;
    font-weight: bold;
    font-size: calc(14 * var(--px));
    line-height: 1.4;
}

@media screen and (max-width: 768px) {
    .cb-sec__title {
        font-size: calc(16 * var(--px));
    }
}

/* ---------- 02_combine(COMBINE製法 / 特許&意匠権) ---------- */
.cb-patent {
    margin: calc(40 * var(--px)) 0 0;
}

.cb-combine {
    position: relative;
    height: calc(1355.9 * var(--px));
    background: linear-gradient(180deg, #fcfbf4 0%, #fbf8ec 10%, #f8f5e8 25%, #f7f4e5 45%, #f5f2e1 65%, #f6f0e0 85%, #f4efdb 100%);
    color: var(--c-dark);
    font-family: "Yu Gothic Pr6N B", "游ゴシック", YuGothic, sans-serif;
    font-weight: bold;
    line-height: 1;
    letter-spacing: 0;
}

.cb-combine > p {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0;
    white-space: nowrap;
}

.cb-combine__catch {
    top: calc(37.7 * var(--px));
    display: flex;
    align-items: flex-end;
    padding-left: calc(13.5 * var(--px));
}

.cb-combine__badge {
    display: block;
    width: calc(188.8 * var(--px));
    height: calc(52.4 * var(--px));
    padding-left: calc(8.7 * var(--px));
    background: linear-gradient(90deg, #958150 0%, #a7915e 100%);
    color: #fff;
    font-size: calc(40 * var(--px));
    line-height: calc(52.4 * var(--px));
    letter-spacing: 0.08em;
}

.cb-combine__new {
    display: block;
    margin-left: calc(7.5 * var(--px));
    padding-bottom: calc(3 * var(--px));
    background: linear-gradient(180deg, #c9b88f 0%, #a88f58 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: calc(38 * var(--px));
    letter-spacing: 0.03em;
}

.cb-combine__new .cb-combine__s {
    font-size: calc(30 * var(--px));
}

.cb-combine__patent {
    top: calc(98.6 * var(--px));
    text-align: center;
    color: #b3a382;
    font-family: "Yu Gothic Pr6N M", "游ゴシック", YuGothic, sans-serif;
    font-weight: 500;
    font-size: calc(12.5 * var(--px));
    letter-spacing: 0.05em;
}

.cb-combine__name {
    top: calc(126 * var(--px));
    text-align: center;
    background: linear-gradient(180deg, #d0b679 0%, #a2884f 55%, #b99c5f 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-family: futura-pt, "Futura PT", "Yu Gothic Pr6N B", "游ゴシック", YuGothic, sans-serif;
    font-weight: 500;
    font-size: calc(51 * var(--px));
    letter-spacing: 0.015em;
}

.cb-combine__name-ja {
    font-family: "Yu Gothic Pr6N B", "游ゴシック", YuGothic, sans-serif;
    font-weight: bold;
    font-size: 0.84em;
    letter-spacing: 0.02em;
}

.cb-combine__figure {
    position: absolute;
    top: calc(185 * var(--px));
    left: 0;
    width: 100%;
}

.cb-combine__figure img {
    display: block;
    width: 100%;
    height: auto;
}

/* 画像の中のラベルの上に、同じ色のラベルをHTMLで重ねる(位置は切り出した画像 531×394px 上の値) */
.cb-combine__label {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    border-radius: 999px;
    color: #fff;
    font-weight: bold;
    font-size: calc(13 * var(--px));
    line-height: 1;
    letter-spacing: 0;
    white-space: nowrap;
}

.cb-combine__label--bust {
    left: calc(324 / 531 * 100%);
    top: calc(76 / 394 * 100%);
    width: calc(196 / 531 * 100%);
    height: calc(37 / 394 * 100%);
    background: #c7ad59;
}

.cb-combine__label--under {
    left: calc(10 / 531 * 100%);
    top: calc(353 / 394 * 100%);
    width: calc(197 / 531 * 100%);
    height: calc(36 / 394 * 100%);
    background: #d99f3c;
}

.cb-combine__brand {
    top: calc(482.3 * var(--px));
    text-align: center;
    font-family: futura-pt, "Futura PT", sans-serif;
    font-weight: 700;
    font-size: calc(26.5 * var(--px));
    letter-spacing: 0.205em;
    text-indent: 0.205em;
}

.cb-combine__only {
    top: calc(531.3 * var(--px));
    text-align: center;
    font-size: calc(40.5 * var(--px));
}

/* 傍点(作れない):文字ごとに小さな点を上に描く */
.cb-combine__only em {
    padding-top: 0.32em;
    background: radial-gradient(circle, var(--c-dark) calc(1.5 * var(--px)), transparent calc(1.7 * var(--px))) 0 0 / 1em calc(6 * var(--px)) repeat-x;
    font-style: normal;
}

.cb-combine__both {
    top: calc(592.5 * var(--px));
}

.cb-combine__pill {
    position: absolute;
    left: calc(38 * var(--px));
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(293.7 * var(--px));
    height: calc(62.1 * var(--px));
    border-radius: 999px;
    background: #fcfbf6;
    background-clip: padding-box;
    font-size: calc(44 * var(--px));
    letter-spacing: 0.1em;
    text-indent: 0.1em;
    color: #d38a06;
}

.cb-combine__pill--wide {
    top: calc(97.1 * var(--px));
    letter-spacing: 0.24em;
    text-indent: 0.24em;
}

.cb-combine__x {
    position: absolute;
    left: calc(163.9 * var(--px));
    top: calc(60.3 * var(--px));
    width: calc(41.1 * var(--px));
    height: calc(39.4 * var(--px));
}

.cb-combine__x::before,
.cb-combine__x::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(56 * var(--px));
    height: max(1px, calc(1.2 * var(--px)));
    background: #e3a43d;
}

.cb-combine__x::before {
    transform: translate(-50%, -50%) rotate(43.8deg);
}

.cb-combine__x::after {
    transform: translate(-50%, -50%) rotate(-43.8deg);
}

.cb-combine__end {
    top: calc(777.3 * var(--px));
    text-align: center;
    font-size: calc(34 * var(--px));
    letter-spacing: 0.1em;
    text-indent: 0.1em;
}

.cb-combine__end .cb-combine__s {
    font-size: calc(28 * var(--px));
}

/* 特許&意匠権をダブルで取得!(枠の中) */
.cb-double {
    position: absolute;
    top: calc(849.6 * var(--px));
    left: calc(21.9 * var(--px));
    width: calc(331.9 * var(--px));
    height: calc(471.8 * var(--px));
    border: 1px solid #d9a447;
    border-radius: calc(4 * var(--px));
    background: #f7f7e9;
}

.cb-double > * {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0;
}

.cb-double__lead {
    top: calc(21.5 * var(--px));
    text-align: center;
    font-size: calc(17 * var(--px));
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.cb-double__brand {
    margin-right: calc(4 * var(--px));
    font-family: futura-pt, "Futura PT", sans-serif;
    font-weight: 700;
    font-size: calc(19.5 * var(--px));
    letter-spacing: 0.08em;
}

.cb-double__catch {
    top: calc(46 * var(--px));
    text-align: center;
    color: var(--c-orange);
    font-size: calc(37 * var(--px));
    line-height: calc(49 * var(--px));
    letter-spacing: 0.08em;
    text-indent: 0.08em;
    white-space: nowrap;
}

.cb-double__s,
.cb-double__amp {
    font-size: calc(29 * var(--px));
}

.cb-double__ex {
    display: inline-block;
    margin-left: -0.3em;
    font-style: italic;
    letter-spacing: 0;
    transform: skewX(-12deg);
}

/* 区切り線(中央に斜めの線) */
.cb-double__line {
    top: calc(157 * var(--px));
    left: calc(19.8 * var(--px));
    right: calc(20.5 * var(--px));
    height: calc(13 * var(--px));
    background:
        linear-gradient(#e3b371, #e3b371) left center / calc(136.2 * var(--px)) 1px no-repeat,
        linear-gradient(#e3b371, #e3b371) right center / calc(135.5 * var(--px)) 1px no-repeat;
}

.cb-double__line::after {
    content: "";
    position: absolute;
    top: 0;
    left: calc(146.2 * var(--px));
    width: 1px;
    height: calc(18 * var(--px));
    background: #e3b371;
    transform: rotate(45deg);
    transform-origin: center;
}

.cb-double__certs {
    top: calc(179.3 * var(--px));
    display: flex;
    justify-content: space-between;
    padding: 0 calc(22.8 * var(--px)) 0 calc(23.3 * var(--px));
}

.cb-double__certs li {
    position: relative;
    width: calc(131.6 * var(--px));
    padding-top: calc(24 * var(--px));
}

.cb-double__certs img {
    display: block;
    width: 100%;
    height: auto;
    box-shadow: 0 calc(2 * var(--px)) calc(5 * var(--px)) rgba(80, 60, 20, 0.15);
}

.cb-double__label {
    position: absolute;
    top: 0;
    left: calc(45.2 * var(--px));
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(40.3 * var(--px));
    height: calc(16.2 * var(--px));
    margin: 0;
    border: 1px solid var(--c-orange);
    border-radius: 999px;
    background: #d7921a;
    color: #fff;
    font-size: max(10px, calc(11 * var(--px)));
    line-height: 1;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.cb-double__label--line {
    left: calc(40.3 * var(--px));
    width: calc(50.1 * var(--px));
    background: #f6f4e5;
    color: #ce8a0b;
}

.cb-double__text {
    top: calc(386 * var(--px));
    left: calc(23.3 * var(--px));
    right: calc(24.4 * var(--px));
    color: #24211a;
    font-family: "Yu Gothic Pr6N M", "游ゴシック", YuGothic, sans-serif;
    font-weight: 500;
    font-size: max(10px, calc(12.2 * var(--px)));
    line-height: calc(20.5 * var(--px));
    letter-spacing: 0.045em;
    font-feature-settings: "palt";
    text-align: justify;
}

/* 楽天ページの画像の下のキャプション(注釈) */
.cb-caption {
    margin-top: calc(8 * var(--px));
    padding: 0 calc(16 * var(--px));
    font-size: calc(12 * var(--px));
    line-height: 1.6;
}

@media screen and (max-width: 768px) {
    .cb-caption {
        font-size: 10px;
    }
}

/* ---------- 区切り線 ---------- */
.cb-line {
    margin: calc(56 * var(--px)) calc(30 * var(--px)) 0;
    border: 0;
    border-top: 1px solid #a5a5a5;
}

/* ---------- PICKUP ITEM(商品のカルーセル) ---------- */
.cb-items {
    margin-top: calc(48 * var(--px));
}

.cb-sec:last-child .cb-items {
    margin-bottom: calc(80 * var(--px));
}

.cb-items__title {
    margin-bottom: calc(24 * var(--px));
    text-align: center;
    font-family: futura-pt, "Futura PT", "Jost", sans-serif;
    font-weight: 400;
    font-size: calc(22 * var(--px));
    line-height: 1.4;
    letter-spacing: 0.04em;
}

/* Swiper(js/script.js)で横にスワイプ。.cb-items__carousel は PC の矢印の位置の基準 */
.cb-items__carousel {
    position: relative;
}

.cb-items__slider {
    padding: 0 calc(4 * var(--px)) 0 calc(16 * var(--px));
}

.cb-items__list li {
    width: calc(136 * var(--px));
    margin-right: calc(12 * var(--px));
}

.cb-items__list a {
    display: block;
    color: var(--c-text);
    text-decoration: none;
}

.cb-items__img {
    position: relative;
}

.cb-items__img > img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
    object-fit: cover;
}

.cb-items__name {
    display: block;
    margin-top: calc(6 * var(--px));
    font-family: "Yu Gothic Pr6N B", "游ゴシック", YuGothic, sans-serif;
    font-size: calc(12 * var(--px));
    font-weight: bold;
    text-align: center;
    line-height: 1.5;
}

.cb-items__price {
    display: block;
    margin-top: calc(2 * var(--px));
    font-size: calc(12 * var(--px));
    text-align: center;
    line-height: 1.5;
}

.cb-items__price small {
    font-size: 0.85em;
}

/* PCは1画面に4商品(見切りなし) */
@media screen and (min-width: 769px) {
    .cb-items__slider {
        margin-inline: calc(16 * var(--px));
        padding: 0;
    }

    .cb-items__list li {
        width: calc((100% - 3 * 6 * var(--px)) / 4);
        margin-right: calc(6 * var(--px));
    }

    .cb-items__list li:last-child {
        margin-right: 0;
    }

    .cb-items__name,
    .cb-items__price {
        font-size: calc(6.5 * var(--px));
    }
}

/* ---------- カルーセルの矢印(PCのみ。04_qualityforyou_ep02 の section-product に合わせる) ---------- */
/* 矢印は .swiper の外(.cb-items__carousel の中)に置き、写真に重ならないよう左右の余白に表示する */
/* Swiper標準のアイコン(svg)は消し、その方向にスワイプできないとき(最初の左・端まで来た側・全部が1画面に収まるとき)は矢印を消す */
.cb-items .swiper-button-prev svg,
.cb-items .swiper-button-next svg {
    display: none !important;
}

.cb-items .swiper-button-prev,
.cb-items .swiper-button-next {
    position: absolute;
    width: calc(18.75 * var(--px));
    height: calc(14.75 * var(--px));
    margin: auto;
    top: 0;
    bottom: 0;
    overflow: hidden;
    z-index: 100;
}

.cb-items .swiper-button-prev {
    left: calc(2 * var(--px));
    right: auto;
}

.cb-items .swiper-button-next {
    left: auto;
    right: calc(2 * var(--px));
}

.cb-items .swiper-button-prev::before,
.cb-items .swiper-button-prev::after,
.cb-items .swiper-button-next::before,
.cb-items .swiper-button-next::after {
    position: absolute;
    content: "";
    width: 1px;
    height: calc(14.75 * var(--px));
    background: #171716;
    top: 0;
    bottom: 0;
}

.cb-items .swiper-button-prev::before,
.cb-items .swiper-button-prev::after {
    left: 0;
}

.cb-items .swiper-button-next::before,
.cb-items .swiper-button-next::after {
    right: 0;
}

.cb-items .swiper-button-prev::before,
.cb-items .swiper-button-next::before {
    transform: rotate(-40deg);
}

.cb-items .swiper-button-prev::after,
.cb-items .swiper-button-next::after {
    transform: rotate(40deg);
}

/* 端まで来た側(.swiper-button-disabled)と、全部が1画面に収まるとき(.swiper-button-lock)は矢印を出さない */
.cb-items .swiper-button-disabled,
.cb-items .swiper-button-lock {
    display: none;
}

@media screen and (max-width: 768px) {
    .cb-items .swiper-button-prev,
    .cb-items .swiper-button-next {
        display: none;
    }
}

/* 商品画像の右上のアイコン(css/common.css の .product-wrapper ul.product-list li .icon-container と同じ値) */
.cb-items__img .icon-container {
    position: absolute;
    top: 7px;
    right: 7px;
}

.cb-items__list .cb-items__img .icon-container img {
    width: 100%;
    max-width: 30px;
    aspect-ratio: auto;
    object-fit: fill;
}

.cb-items__list .cb-items__img .icon-container img.icon--cool {
    margin: 0 auto;
    max-width: 28px;
}

.cb-items__list .cb-items__img .icon-container img.icon--bottom {
    margin-top: 3px;
}

@media screen and (max-width: 768px) {
    .cb-items__img .icon-container {
        /* カルーセルの中では上がはみ出すと切れるため、商品一覧(-2px)より下げる */
        top: 2px;
        right: 2px;
    }

    .cb-items__list .cb-items__img .icon-container img {
        max-width: 27px;
    }

    .cb-items__list .cb-items__img .icon-container img.icon--cool {
        max-width: 25px;
    }
}