@charset "UTF-8";
/* ========================================
   【お悩み別】ナイトブラ サイズの選び方特集
   サイズは「カンプ上のpx × var(--px)」(375pxで等倍、800pxで最大)
   換算: 01_top 1280px→×0.29297 / 02_step 1000px→×0.375
         03〜05_type 1040px→×0.36058 / 06_bicolor 750px→×0.5
======================================== */
:root {
    --px: min(calc(100vw / 375), calc(800px / 375));
    --c-text: #333333;
    --c-base: #fffcf9;
    --c-pink: #fea89f;
    --c-pink-dark: #f48f84;
    --c-red: #e4575c;
    --c-gray: #908886;
    --c-voice: #f2e9e2;
    --c-voice-head: #d7bca1;
    --c-star: #f3c95b;
}

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

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

.bsz img {
    max-width: none;
}

.bsz small,
.bsz em,
.bsz strong {
    font-style: normal;
}

/* ---------- 冒頭 ---------- */
.bsz-mv img {
    width: 100%;
    height: auto;
}

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

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

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

/* ---------- テキスト(既存ページのHTML部分) ---------- */
.bsz-text {
    padding: 0 calc(16 * var(--px));
    font-size: 16px;
    line-height: 1.8;
}

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

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

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

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

.bsz-sec {
    margin-top: calc(48 * var(--px));
}

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

/* ---------- STEP(02_step / ×0.375) ---------- */
.bsz-step {
    display: flex;
    min-height: calc(146.63 * var(--px));
    margin-bottom: calc(36 * var(--px));
    padding: calc(7.5 * var(--px)) 0 0 calc(9.38 * var(--px));
    background: var(--c-base);
}

.bsz-step__item {
    display: flex;
    flex-direction: column;
    width: calc(89.06 * var(--px));
    text-align: center;
}

.bsz-step__label {
    position: relative;
    height: calc(18 * var(--px));
    margin-right: calc(-6 * var(--px));
    color: #333;
    font-family: futura-pt, "Futura PT", "Jost", sans-serif;
    font-weight: 500;
    font-size: max(10px, calc(9.75 * var(--px)));
    line-height: calc(18 * var(--px));
    letter-spacing: .02em;
    clip-path: polygon(0 0, calc(100% - 6 * var(--px)) 0, 100% 50%, calc(100% - 6 * var(--px)) 100%, 0 100%, calc(6 * var(--px)) 50%);
}

.bsz-step__item:first-child .bsz-step__label {
    clip-path: polygon(0 0, calc(100% - 6 * var(--px)) 0, 100% 50%, calc(100% - 6 * var(--px)) 100%, 0 100%);
}

.bsz-step__item:nth-child(1) .bsz-step__label { background: #fecdc8; }
.bsz-step__item:nth-child(2) .bsz-step__label { background: #feb8ae; }
.bsz-step__item:nth-child(3) .bsz-step__label { background: #f69495; }
.bsz-step__item:nth-child(4) .bsz-step__label { background: #e76883; }

.bsz-step__text {
    margin-top: calc(5.6 * var(--px));
    padding: 0 calc(2 * var(--px));
    font-size: max(10px, calc(6.4 * var(--px)));
    line-height: max(13px, calc(11.25 * var(--px)));
    letter-spacing: 0;
    word-break: auto-phrase;
}

.bsz-step__img {
    width: calc(69.38 * var(--px));
    height: auto;
    margin: auto auto 0;
}

/* ---------- TYPE(03〜05_type / ×0.36058) ---------- */
.bsz-type {
    position: relative;
    padding: calc(196.5 * var(--px)) 0 calc(9.7 * var(--px));
    background: var(--c-base);
    text-align: center;
}

.bsz-type + .bsz-type {
    margin-top: calc(40 * var(--px));
}

.bsz-type__head {
    position: absolute;
    left: 0;
    top: calc(10.82 * var(--px));
    display: block;
    width: 100%;
}

.bsz-type__num {
    display: block;
    width: calc(49.04 * var(--px));
    height: calc(19.83 * var(--px));
    margin: 0 auto;
    border-radius: calc(10 * var(--px));
    background: var(--c-pink);
    color: #fff;
    font-family: futura-pt, "Futura PT", "Jost", sans-serif;
    font-weight: 500;
    font-size: calc(10.82 * var(--px));
    line-height: calc(19.83 * var(--px));
    letter-spacing: .04em;
}

.bsz-type__title {
    display: inline-block;
    margin-top: calc(4.3 * var(--px));
    padding: 0 calc(2 * var(--px)) calc(1.8 * var(--px));
    border-bottom: calc(2.16 * var(--px)) solid #ffa89e;
    color: #222;
    font-family: "Yu Gothic Pr6N B", "游ゴシック", YuGothic, sans-serif;
    font-weight: bold;
    font-size: calc(15.15 * var(--px));
    line-height: calc(20 * var(--px));
    white-space: nowrap;
}

.bsz-type--1 .bsz-type__title { letter-spacing: .1em; }
.bsz-type--2 .bsz-type__title { padding-inline: calc(8 * var(--px)); letter-spacing: .22em; }
.bsz-type--3 .bsz-type__title { padding-inline: calc(4 * var(--px)); letter-spacing: .02em; }

.bsz-type__visual {
    position: absolute;
    left: 0;
    top: calc(66.71 * var(--px));
    width: 100%;
    height: calc(126.2 * var(--px));
}

.bsz-type__illust,
.bsz-type__voice {
    position: absolute;
    top: 0;
    height: auto;
}

/* 位置と幅は、カンプJPGで切り出した範囲(x, y)をそのまま換算 */
.bsz-type__voice--l {
    left: calc(10.82 * var(--px));
    top: calc(1.08 * var(--px));
    width: calc(133.41 * var(--px));
}

.bsz-type__voice--r {
    left: calc(227.88 * var(--px));
    top: calc(36.06 * var(--px));
    width: calc(137.02 * var(--px));
}

.bsz-type__illust {
    left: calc(148.56 * var(--px));
    width: calc(81.13 * var(--px));
}

.bsz-type--2 .bsz-type__voice--l {
    left: calc(6.49 * var(--px));
    top: calc(2.52 * var(--px));
    width: calc(129.81 * var(--px));
}

.bsz-type--3 .bsz-type__voice--l {
    left: calc(6.49 * var(--px));
    top: calc(2.52 * var(--px));
    width: calc(130.53 * var(--px));
}

.bsz-type--2 .bsz-type__voice--r,
.bsz-type--3 .bsz-type__voice--r {
    left: calc(240.87 * var(--px));
    top: calc(40.75 * var(--px));
    width: calc(126.92 * var(--px));
}

.bsz-type--2 .bsz-type__illust {
    left: calc(136.3 * var(--px));
    width: calc(103.85 * var(--px));
}

.bsz-type--3 .bsz-type__illust {
    left: calc(137.74 * var(--px));
    width: calc(108.17 * var(--px));
}

.bsz-type__rec {
    position: relative;
    min-height: calc(113.6 * var(--px));
    padding: calc(10 * var(--px)) calc(8 * var(--px)) calc(12 * var(--px));
}

.bsz-type__rec::before {
    content: "";
    position: absolute;
    left: calc(36 * var(--px));
    top: 0;
    width: calc(303 * var(--px));
    height: calc(104 * var(--px));
    background: linear-gradient(to top, rgba(253, 222, 216, .6), rgba(255, 252, 249, 0));
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.bsz-type__rec > * {
    position: relative;
}

.bsz-type__lead {
    font-family: "Yu Gothic Pr6N B", "游ゴシック", YuGothic, sans-serif;
    font-weight: bold;
    font-size: max(10px, calc(9.4 * var(--px)));
    line-height: max(12px, calc(12 * var(--px)));
    letter-spacing: .15em;
    color: #222;
}

.bsz-type__size {
    margin-top: calc(6 * var(--px));
    color: #111;
    font-family: "Yu Gothic Pr6N B", "游ゴシック", YuGothic, sans-serif;
    font-weight: bold;
    font-size: calc(21.6 * var(--px));
    line-height: calc(26 * var(--px));
    letter-spacing: .06em;
    white-space: nowrap;
}

.bsz-type__size em {
    display: inline-block;
    margin-right: calc(3.5 * var(--px));
    padding: 0 calc(3.6 * var(--px));
    background: var(--c-pink-dark);
    color: #fff;
    font-size: calc(20.9 * var(--px));
    letter-spacing: .02em;
}

.bsz-type__size small {
    font-size: calc(15.5 * var(--px));
    letter-spacing: .04em;
}

.bsz-type--3 .bsz-type__size {
    letter-spacing: 0;
}

.bsz-type--3 .bsz-type__size small {
    font-size: calc(15 * var(--px));
    letter-spacing: 0;
}

.bsz-type--3 .bsz-type__size em {
    margin: 0 calc(3 * var(--px));
    letter-spacing: 0;
}

.bsz-type__desc {
    margin-top: calc(6 * var(--px));
    color: #222;
    font-family: "Yu Gothic Pr6N B", "游ゴシック", YuGothic, sans-serif;
    font-weight: bold;
    font-size: 25px;
    line-height: 1.6;
    letter-spacing: .1em;
}

@media screen and (max-width: 768px) {
    .bsz-type__desc {
        font-size: 14px;
        letter-spacing: .04em;
    }
}

.bsz-type__desc strong {
    color: var(--c-red);
}

/* お客様の声 */
.bsz-review {
    position: relative;
    width: calc(354.1 * var(--px));
    min-height: calc(192.9 * var(--px));
    margin-left: calc(10.1 * var(--px));
    padding: calc(8.5 * var(--px)) calc(10.8 * var(--px)) calc(7 * var(--px));
    background: var(--c-voice);
    text-align: left;
}

.bsz-review__head {
    padding-left: calc(0 * var(--px));
    color: #222;
    font-family: "Yu Gothic Pr6N B", "游ゴシック", YuGothic, sans-serif;
    font-weight: bold;
    font-size: max(10px, calc(8.65 * var(--px)));
    line-height: max(14px, calc(12 * var(--px)));
    letter-spacing: .14em;
}

.bsz-review__item {
    display: flex;
    align-items: flex-start;
    margin-top: calc(9.5 * var(--px));
    padding-bottom: calc(11 * var(--px));
}

.bsz-review__item + .bsz-review__item {
    margin-top: 0;
    padding-bottom: 0;
    padding-top: calc(9 * var(--px));
    border-top: 1px solid #c7beb7;
}

.bsz-review__user {
    flex-shrink: 0;
    width: calc(52.3 * var(--px));
    margin-left: calc(5.4 * var(--px));
    text-align: center;
}

.bsz-review__icon {
    width: calc(52.3 * var(--px));
    height: calc(52.3 * var(--px));
    border-radius: 50%;
}

.bsz-review__star {
    margin-top: calc(6.5 * var(--px));
    color: var(--c-star);
    font-size: max(10px, calc(9.6 * var(--px)));
    line-height: 1;
    letter-spacing: 0;
}

.bsz-review__body {
    width: calc(261.4 * var(--px));
    margin-left: calc(10.4 * var(--px));
    padding-top: calc(4.3 * var(--px));
}

.bsz-review__title {
    position: relative;
    display: inline-block;
    min-height: calc(17.3 * var(--px));
    max-width: 100%;
    padding: calc(2 * var(--px)) calc(8 * var(--px)) calc(2 * var(--px)) calc(13.7 * var(--px));
    background: var(--c-voice-head);
    color: #222;
    font-family: "Yu Gothic Pr6N B", "游ゴシック", YuGothic, sans-serif;
    font-weight: bold;
    font-size: max(10px, calc(8.2 * var(--px)));
    line-height: max(14px, calc(13.3 * var(--px)));
    letter-spacing: .04em;
}

.bsz-review__title::before {
    content: "";
    position: absolute;
    left: calc(-3.4 * var(--px));
    top: 50%;
    border-style: solid;
    border-width: calc(3.6 * var(--px)) calc(3.6 * var(--px)) calc(3.6 * var(--px)) 0;
    border-color: transparent var(--c-voice-head) transparent transparent;
    transform: translateY(-50%);
}

/* PCはカンプどおり(画像上18px × 0.36058) */
.bsz-review__text {
    margin-top: calc(5.5 * var(--px));
    font-size: calc(6.5 * var(--px));
    line-height: 1.7;
    letter-spacing: .02em;
}

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

.bsz-review__text strong {
    font-family: "Yu Gothic Pr6N B", "游ゴシック", YuGothic, sans-serif;
    font-weight: bold;
    color: #222;
}

.bsz-review__text em {
    background: #fff;
    color: var(--c-red);
    font-family: "Yu Gothic Pr6N B", "游ゴシック", YuGothic, sans-serif;
    font-weight: bold;
}

/* ---------- BICOLOR(06_bicolor / ×0.5) ---------- */
.bsz-bicolor {
    display: block;
}

.bsz-bicolor img {
    width: 100%;
    height: auto;
}

/* ---------- カラー一覧(既存ページのスワイプ部分) ---------- */
.bsz-color {
    margin: calc(52 * var(--px)) 0 calc(40 * var(--px));
}

.bsz-color__swipe {
    width: calc(343 * var(--px));
    height: auto;
    margin: 0 auto;
}

/* Swiper(js/script.js)で横にスワイプ。左右の余白は .swiper の padding */
/* .bsz-color__carousel は PC の矢印(.swiper の外に置く)の位置の基準 */
.bsz-color__carousel {
    position: relative;
    margin-top: calc(26 * var(--px));
}

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

.bsz-color__carousel + .bsz-color__carousel {
    margin-top: calc(16 * var(--px));
}

.bsz-color__list li {
    width: calc(134 * var(--px));
    margin-right: calc(12 * var(--px));
}

.bsz-color__list img {
    width: 100%;
    height: auto;
}

/* PCは1画面にちょうど4枚(見切りなし)。padding だと5枚目が余白に見えるので、左右の余白は margin で取る(矢印はこの余白に置く) */
@media screen and (min-width: 769px) {
    .bsz-color__slider {
        margin-inline: calc(16 * var(--px));
        padding: 0;
    }

    .bsz-color__list li {
        width: calc((100% - 3 * 12 * var(--px)) / 4);
    }

    .bsz-color__list li:last-child {
        margin-right: 0;
    }
}

/* ---------- 今回紹介したアイテム ---------- */
.bsz-items {
    margin-bottom: calc(80 * var(--px));
}

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

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

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

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

.bsz-items__list img {
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
    object-fit: cover;
}

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

/* PCは1画面にちょうど4商品(見切りなし)。商品の間は小さめ。カラー一覧と同じく左右の余白は margin で取り、矢印はこの余白に置く */
@media screen and (min-width: 769px) {
    .bsz-items__slider {
        margin-inline: calc(16 * var(--px));
        padding: 0;
    }

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

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

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

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

.bsz-sec .swiper-button-prev,
.bsz-sec .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;
}

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

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

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

.bsz-sec .swiper-button-prev::before,
.bsz-sec .swiper-button-prev::after {
    left: 0;
}

.bsz-sec .swiper-button-next::before,
.bsz-sec .swiper-button-next::after {
    right: 0;
}

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

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

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

/* SPは矢印なし(指でスワイプ) */
@media screen and (max-width: 768px) {
    .bsz-sec .swiper-button-prev,
    .bsz-sec .swiper-button-next {
        display: none;
    }
}

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

.bsz-items__img .icon-container {
    position: absolute;
    top: 7px;
    right: 7px;
}

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

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

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

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

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

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

/* ---------- 2026-10-27 追記 ---------- */
/* ページタイトルの行間(PC・SPとも) */
.bsz-head__title {
    line-height: 1.6;
}

/* カラー見本(bsz-color)は無限ループ:スライドの並びが入れ替わるので、最後のスライドだけ右の間隔を0にしない */
@media screen and (min-width: 769px) {
    .bsz-color__list li:last-child {
        margin-right: calc(12 * var(--px));
    }
}