@charset "UTF-8";
/* ========================================
   ブラトップのよくある質問リアルな口コミで徹底解説！
   サイズは「カンプ上のpx × var(--px)」(375pxで等倍、800pxで最大)
   換算: 01_mv 768px→×0.48828 / 02_bratop 1080px→×0.34722
         03_combine 858px→×0.43706 / 04_review1 1014px→×0.36982
         (口コミ②③は楽天の 2505_review_2/3.jpg 688px→×0.54506 を見本にし、04_review1 と同じレイアウト)
======================================== */
:root {
    --px: min(calc(100vw / 375), calc(800px / 375));
    --c-text: #333333;
    --c-dark: #1c1c1c;
}

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

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

.rv img {
    max-width: none;
}

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

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

.rv-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) {
    .rv-head__title {
        font-size: 18px;
    }
}

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

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

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

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

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

/* 02_bratop(写真+HTML文字。指定はファイル末尾) */
.rv-photo {
    margin-top: calc(40 * var(--px));
}

.rv-photo img {
    width: 100%;
    height: auto;
}

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

.rv-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) {
    .rv-sec__title {
        font-size: calc(16 * var(--px));
    }
}

/* 楽天ページの画像(SIZE GUIDE / SARA / ROOM WEAR):楽天ページと同じく左右に余白 */
.rv-banner {
    margin-top: calc(40 * var(--px));
    padding: 0 calc(16 * var(--px));
}

.rv-more {
    margin-top: calc(56 * var(--px));
}

.rv-more .rv-banner {
    margin-top: 0;
}

.rv-banner img {
    display: block;
    width: 100%;
    height: auto;
}

.rv-link {
    margin-top: calc(12 * var(--px));
    padding: 0 calc(16 * var(--px));
    text-align: right;
    font-size: calc(13 * var(--px));
    line-height: 1.5;
}

.rv-link a {
    position: relative;
    padding-right: calc(16 * var(--px));
    color: #555;
    text-decoration: none;
}

.rv-link a::after {
    content: "";
    position: absolute;
    top: 50%;
    right: calc(2 * var(--px));
    width: calc(6 * var(--px));
    height: calc(6 * var(--px));
    border-top: 1px solid #555;
    border-right: 1px solid #555;
    transform: translateY(-50%) rotate(45deg);
}

/* ---------- 03_combine(COMBINE製法) ---------- */
.rv-combine {
    position: relative;
    height: calc(839.2 * var(--px));
    background: linear-gradient(180deg, #fffffb 0%, #fdfdf3 6.25%, #fbfbef 12.5%, #faf8eb 18.75%, #f8f4e8 25%, #f8f5e6 31.25%, #f7f4e5 37.5%, #f6f3e4 43.75%, #f5f2e1 56.25%, #f4f1e0 68.75%, #f5f0dd 87.5%, #f3f1dc 100%);
    color: var(--c-dark);
    font-family: "Yu Gothic Pr6N B", "游ゴシック", YuGothic, sans-serif;
    font-weight: bold;
    line-height: 1;
    letter-spacing: 0;
}

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

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

.rv-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;
}

.rv-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;
}

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

.rv-combine__patent {
    top: calc(104.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;
}

.rv-combine__name {
    top: calc(132 * 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.02em;
}

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

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

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

/* 画像の中のラベルの上に、同じ色のラベルをHTMLで重ねる */
.rv-combine__label {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    border-radius: 999px;
    background: #c8aa5b;
    color: #fff;
    font-weight: bold;
    font-size: calc(12.4 * var(--px));
    line-height: 1;
    letter-spacing: 0;
    white-space: nowrap;
}

.rv-combine__label--bust {
    left: calc(523 / 858 * 100%);
    top: calc(141 / 560 * 100%);
    width: calc(304 / 858 * 100%);
    height: calc(57 / 560 * 100%);
}

.rv-combine__label--under {
    left: calc(26 / 858 * 100%);
    top: calc(447 / 560 * 100%);
    width: calc(307 / 858 * 100%);
    height: calc(57 / 560 * 100%);
}

.rv-combine__brand {
    top: calc(459.5 * 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.16em;
    text-indent: 0.16em;
}

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

/* 傍点(作れない):文字ごとに小さな点を上に描く */
.rv-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;
}

.rv-combine__both {
    top: calc(567.7 * var(--px));
}

.rv-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;
}

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

.rv-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));
}

.rv-combine__x::before,
.rv-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;
}

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

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

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

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

/* ---------- 口コミ(04_review1 と、楽天の 2505_review_2 / 3) ---------- */
.rv-voice {
    --c-bg: #f9f2ea;
    --c-pill: #dfa290;
    --c-tag: #e8ccb7;
    --c-mark: #fee5de;
    position: relative;
    margin-top: calc(12 * var(--px));
    padding: calc(26.6 * var(--px)) 0 calc(26 * var(--px));
    background: var(--c-bg);
    overflow: hidden;
}

.rv-voice--material {
    --c-bg: #e8f3f5;
    --c-pill: #7abdd0;
    --c-tag: #aed2de;
    --c-mark: #faf7d6;
}

.rv-voice--color {
    --c-bg: #f9f2ea;
    --c-pill: #dcb18f;
    --c-tag: #efd0b4;
    --c-mark: #fcefe7;
}

.rv-voice__bg {
    position: absolute;
    top: calc(-27 * var(--px));
    left: calc(1 * var(--px));
    margin: 0;
    color: rgba(255, 255, 255, 0.8);
    font-family: futura-pt, "Futura PT", "Jost", sans-serif;
    font-weight: 400;
    font-size: calc(74 * var(--px));
    line-height: 1;
    letter-spacing: 0.06em;
    white-space: nowrap;
    pointer-events: none;
}

.rv-voice__title {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(340.2 * var(--px));
    height: calc(41.8 * var(--px));
    margin: 0 auto 0 calc(19.2 * var(--px));
    border-radius: 999px;
    background: var(--c-pill);
    color: #fff;
    font-family: "Yu Gothic Pr6N B", "游ゴシック", YuGothic, sans-serif;
    font-weight: bold;
    font-size: calc(19.5 * var(--px));
    line-height: 1;
    letter-spacing: 0.08em;
}

.rv-review {
    position: relative;
    width: calc(347.6 * var(--px));
    margin: calc(27 * var(--px)) auto 0 calc(13.7 * var(--px));
    padding: 0 calc(13.7 * var(--px)) calc(18.5 * var(--px)) calc(15.2 * var(--px));
    border: 1px solid #9f9785;
    border-radius: 2px;
    background: #fff;
}

.rv-review + .rv-review {
    margin-top: calc(14.8 * var(--px));
}

.rv-review__head {
    position: relative;
    height: calc(80 * var(--px));
    margin: 0 calc(-13.7 * var(--px)) 0 calc(-15.2 * var(--px));
}

/* 区切り線 */
.rv-review__head::after {
    content: "";
    position: absolute;
    left: calc(16.6 * var(--px));
    right: calc(16.6 * var(--px));
    bottom: 0;
    height: 1px;
    background: #aba38b;
}

.rv-review__icon {
    position: absolute;
    left: calc(22.5 * var(--px));
    bottom: 0;
    width: calc(63.6 * var(--px));
    height: auto;
}

.rv-review__title {
    position: absolute;
    top: calc(16.3 * var(--px));
    left: calc(94.3 * var(--px));
    width: calc(246 * var(--px));
    height: calc(31.4 * var(--px));
    margin: 0;
    padding-left: calc(12.2 * var(--px));
    background: var(--c-tag);
    color: #201710;
    font-family: "Yu Gothic Pr6N B", "游ゴシック", YuGothic, sans-serif;
    font-weight: bold;
    font-size: calc(13.2 * var(--px));
    line-height: calc(31.4 * var(--px));
    letter-spacing: 0.03em;
    white-space: nowrap;
}

/* 吹き出しの三角 */
.rv-review__title::before {
    content: "";
    position: absolute;
    top: 50%;
    left: calc(-7.4 * var(--px));
    border-style: solid;
    border-width: calc(5.5 * var(--px)) calc(7.4 * var(--px)) calc(5.5 * var(--px)) 0;
    border-color: transparent var(--c-tag) transparent transparent;
    transform: translateY(-50%);
}

.rv-review__rating {
    position: absolute;
    top: calc(53.5 * var(--px));
    left: calc(97 * var(--px));
    display: flex;
    align-items: baseline;
    margin: 0;
    color: #fe8a68;
    line-height: 1;
}

.rv-review__stars {
    font-size: calc(18.5 * var(--px));
    letter-spacing: calc(1.1 * var(--px));
}

.rv-review__score {
    margin-left: calc(6.5 * var(--px));
    font-family: futura-pt, "Futura PT", "Jost", sans-serif;
    font-weight: 500;
    font-size: calc(21 * var(--px));
}

/* 右にアイコンがある口コミ */
.rv-review--right .rv-review__icon {
    left: auto;
    right: calc(22.5 * var(--px));
    width: calc(62.9 * var(--px));
}

.rv-review--right .rv-review__title {
    top: calc(16.6 * var(--px));
    left: calc(13 * var(--px));
    width: calc(234.8 * var(--px));
    padding-left: calc(8.5 * var(--px));
}

.rv-review--right .rv-review__title::before {
    left: auto;
    right: calc(-7.4 * var(--px));
    border-width: calc(5.5 * var(--px)) 0 calc(5.5 * var(--px)) calc(7.4 * var(--px));
    border-color: transparent transparent transparent var(--c-tag);
}

.rv-review--right .rv-review__rating {
    left: calc(21.4 * var(--px));
}

.rv-review__text {
    margin-top: calc(12 * var(--px));
    color: #343434;
    font-size: calc(11.8 * var(--px));
    line-height: 1.57;
    letter-spacing: 0.02em;
}

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

.rv-review__text mark {
    background: linear-gradient(transparent 55%, var(--c-mark) 55%);
    color: inherit;
    font-family: inherit;
    font-style: normal;
}

/* ---------- いかがでしたか? ---------- */
.rv-line {
    margin: calc(56 * var(--px)) calc(30 * var(--px)) 0;
    border: 0;
    border-top: 1px solid #a5a5a5;
}

.rv-line + .rv-text {
    margin-top: calc(40 * var(--px));
}

/* ---------- PICKUP ITEM ---------- */
.rv-pickup {
    margin-top: calc(48 * var(--px));
    margin-bottom: calc(80 * var(--px));
}

.rv-pickup__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;
}

.rv-pickup__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: calc(24 * var(--px)) calc(12 * var(--px));
    padding: 0 calc(16 * var(--px));
}

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

.rv-pickup__img {
    position: relative;
}

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

.rv-pickup__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;
    word-break: keep-all;
}

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

.rv-pickup__price small {
    font-size: 0.85em;
}

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

.rv-pickup__list .rv-pickup__img .icon-container img {
    max-width: 30px;
}

.rv-pickup__list .rv-pickup__img .icon-container img.icon--cool {
    margin: 0 auto;
    max-width: 28px;
}

.rv-pickup__list .rv-pickup__img .icon-container img.icon--bottom {
    margin-top: 3px;
}

/* PCは4列 */
@media screen and (min-width: 769px) {
    .rv-pickup__list {
        grid-template-columns: repeat(4, 1fr);
        gap: calc(20 * var(--px)) calc(6 * var(--px));
    }

    .rv-pickup__name,
    .rv-pickup__price {
        font-size: calc(7 * var(--px));
    }
}

@media screen and (max-width: 768px) {
    .rv-pickup__img .icon-container {
        top: -2px;
        right: 2px;
    }

    .rv-pickup__list .rv-pickup__img .icon-container img {
        max-width: 27px;
    }

    .rv-pickup__list .rv-pickup__img .icon-container img.icon--cool {
        max-width: 25px;
    }
}

/* ---------- roomwear・sara の写真+HTML文字(11/9) ----------
   写真は img/〇〇_photo.webp(差し替えはファイルを置き換えるだけ)
   --x / --y / --fs / --ls は見本(parts/〇〇_text.jpg 750px)上の値。
   写真の表示幅は 343(375 - 左右16)なので、--u = var(--px) × 343 ÷ 750 */
.rv-photo {
    --u: calc(var(--px) * 343 / 750);
    position: relative;
    line-height: 1;
}

.rv-photo .rv-photo__img {
    display: block;
    width: 100%;
    height: auto;
}

.rv-photo__text {
    margin: 0;
    padding: 0;
    list-style: none;
}

.rv-photo__text > span,
.rv-photo__text > li {
    position: absolute;
    top: calc(var(--y) * var(--u));
    left: calc(var(--x) * var(--u));
    font-size: calc(var(--fs) * var(--u));
    letter-spacing: calc(var(--ls) * var(--u));
    line-height: 1;
    white-space: nowrap;
}

/* ROOM WEAR / FASHION:縦書きの英字(futura-pt の細め) */
.rv-photo__text--en > span {
    writing-mode: vertical-rl;
    font-family: futura-pt, "Futura PT", "Jost", sans-serif;
    font-weight: 300;
    color: #383838;
}

.rv-photo__text--jp > span {
    font-family: "Yu Gothic Pr6N B", "游ゴシック", YuGothic, sans-serif;
    font-weight: bold;
    color: #3b3b3b;
}

.rv-photo__text--right > span {
    left: auto;
    right: calc(var(--r) * var(--u));
}

/* sara:見出しとアイコンの上のラベル(白)。見出しは見本どおりプロポーショナル */
.rv-photo__text--sara-title > span {
    font-feature-settings: "palt";
    font-family: "Yu Gothic Pr6N B", "游ゴシック", YuGothic, sans-serif;
    font-weight: bold;
    color: #fff;
}

.rv-photo__text--sara-label > li {
    font-size: max(10px, calc(var(--fs) * var(--u))); /* SPで10pxより小さくしない */
    font-family: "Yu Gothic Pr6N B", "游ゴシック", YuGothic, sans-serif;
    font-weight: bold;
    color: #fff;
}

/* ---------- bratop の写真+HTML文字(11/10) ----------
   写真は img/bratop_photo.webp(差し替えはファイルを置き換えるだけ)
   --x / --y / --fs / --ls は見本(parts/bratop_text.jpg 1080px)上の値。
   写真は横幅いっぱい(375)なので、--u = var(--px) × 375 ÷ 1080 */
.rv-photo--bratop {
    --u: calc(var(--px) * 375 / 1080);
}

/* 白の縦書き(游ゴシックの太字) */
.rv-photo__text--bratop > span {
    writing-mode: vertical-rl;
    font-family: "Yu Gothic Pr6N B", "游ゴシック", YuGothic, sans-serif;
    font-weight: bold;
    color: #fff;
}