@charset "UTF-8";
/* ========================================
   ナイトブラは何枚あると便利？洗い替え目安＆買い替えサインを徹底解説！
   サイズは「カンプ上のpx × var(--px)」(375pxで等倍、800pxで最大)
   換算: 01_mv 768px→×0.48828 / 02_old・03_sign・04_timing・05_wash 1080px→×0.34722
======================================== */
:root {
    --px: min(calc(100vw / 375), calc(800px / 375));
    --c-text: #333333;
    --c-dark: #111111;
}

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

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

.bsa img {
    max-width: none;
}

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

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

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

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

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

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

.bsa-sec__title + .bsa-text {
    margin-top: 0;
}

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

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

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

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

/* ---------- 02_old(文字を消したイラストの上に、文字をHTMLで重ねる) ---------- */
.bsa-old {
    position: relative;
    margin-top: calc(20 * var(--px));
}

.bsa-old img {
    display: block;
    width: 100%;
    height: auto;
}

.bsa-old__item {
    position: absolute;
    transform: translateX(-50%);
    color: var(--c-dark);
    font-family: "Yu Gothic Pr6N B", "游ゴシック", YuGothic, sans-serif;
    font-weight: bold;
    font-size: calc(12.85 * var(--px));
    line-height: calc(19.8 * var(--px));
    letter-spacing: 0.04em;
    text-align: center;
    white-space: nowrap;
}

/* left は文字の中心(カンプの文字の中心 x)、top は1行目の行の上端 */
.bsa-old__item--1 { left: calc(139.2 * var(--px)); top: calc(38.9 * var(--px)); }
.bsa-old__item--2 { left: calc(298.4 * var(--px)); top: calc(94.2 * var(--px)); }
.bsa-old__item--3 { left: calc(72.4 * var(--px)); top: calc(135.5 * var(--px)); }
.bsa-old__item--4 { left: calc(294.8 * var(--px)); top: calc(219.5 * var(--px)); }
.bsa-old__item--5 { left: calc(93.6 * var(--px)); top: calc(295.6 * var(--px)); }

/* ---------- 03_sign(買い替えサイン) ---------- */
.bsa-sign {
    margin-top: calc(32 * var(--px));
    padding: calc(14.2 * var(--px)) 0 calc(6.7 * var(--px));
    color: var(--c-dark);
}

.bsa-sign__item {
    position: relative;
}

.bsa-sign__item + .bsa-sign__item {
    margin-top: calc(29 * var(--px));
}

.bsa-sign__item:nth-child(3) {
    margin-top: calc(33 * var(--px));
}

.bsa-sign__icon {
    position: absolute;
    left: calc(12.5 * var(--px));
    top: calc(1.5 * var(--px));
    width: calc(33.3 * var(--px));
    height: auto;
}

.bsa-sign__title {
    margin: calc(4.4 * var(--px)) 0 0 calc(50 * var(--px));
    font-family: "Yu Gothic Pr6N B", "游ゴシック", YuGothic, sans-serif;
    font-weight: bold;
    font-size: calc(18 * var(--px));
    line-height: 1.4;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

/* 文字の下半分にかかる薄いピンクのマーカー */
.bsa-sign__title span {
    padding: 0 calc(5 * var(--px)) 0 calc(2 * var(--px));
    background: linear-gradient(transparent 58%, #ebd0c7 58%, #ebd0c7 96%, transparent 96%);
}

.bsa-sign__text {
    margin: calc(7.75 * var(--px)) 0 0 calc(13.9 * var(--px));
    font-family: "Yu Gothic Pr6N M", "游ゴシック", YuGothic, sans-serif;
    font-weight: 500;
    font-size: calc(15.1 * var(--px));
    line-height: 1.276;
    letter-spacing: 0.2em;
    font-feature-settings: "palt";
    white-space: nowrap;
}

.bsa-sign__item:nth-child(2) .bsa-sign__text {
    margin-top: calc(16.1 * var(--px));
}

.bsa-sign__item:nth-child(3) .bsa-sign__text {
    margin-top: calc(9.1 * var(--px));
}

/* ---------- 04_timing(買い替えの目安時期) ---------- */
.bsa-timing {
    position: relative;
    height: calc(173.6 * var(--px));
    color: var(--c-dark);
    font-family: "Yu Gothic Pr6N B", "游ゴシック", YuGothic, sans-serif;
    font-weight: bold;
    line-height: 1;
}

.bsa-timing__label,
.bsa-timing__value,
.bsa-timing__icon {
    position: absolute;
    margin: 0;
}

.bsa-timing__icon {
    left: calc(51 * var(--px));
    width: calc(58.7 * var(--px));
    height: auto;
}

.bsa-timing__label span {
    position: absolute;
    transform: translateX(-50%);
    font-size: calc(15.3 * var(--px));
    letter-spacing: 0.125em;
    white-space: nowrap;
}

.bsa-timing__value {
    display: flex;
    align-items: baseline;
    white-space: nowrap;
}

.bsa-timing__term {
    position: relative;
    z-index: 0;
    display: flex;
    align-items: baseline;
}

/* 数字の下のマーカー */
.bsa-timing__term::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: calc(-3.8 * var(--px));
    bottom: calc(1.4 * var(--px));
    width: calc(133.6 * var(--px));
    height: calc(10.8 * var(--px));
    background: #e5c7bd;
}

.bsa-timing__row--shorts .bsa-timing__term::before {
    left: calc(-3 * var(--px));
    background: #bdd3e1;
}

.bsa-timing__num {
    font-size: calc(39 * var(--px));
}

.bsa-timing__tilde {
    margin: 0 calc(3 * var(--px));
    font-size: calc(24 * var(--px));
    transform: translateY(calc(-5 * var(--px)));
}

.bsa-timing__ke {
    margin-left: calc(6 * var(--px));
    font-size: calc(26 * var(--px));
}

.bsa-timing__month {
    margin-left: calc(2 * var(--px));
    font-size: calc(27 * var(--px));
}

.bsa-timing__once {
    margin-left: calc(12.5 * var(--px));
    font-size: calc(15 * var(--px));
    letter-spacing: 0.22em;
}

/* 位置(カンプ上の位置。top はおおよその行の上端) */
.bsa-timing__row--bra .bsa-timing__icon { top: calc(19.1 * var(--px)); }
.bsa-timing__row--bra .bsa-timing__label span { left: calc(212.5 * var(--px)); top: calc(5.3 * var(--px)); }
.bsa-timing__row--bra .bsa-timing__value { left: calc(128 * var(--px)); top: calc(31.4 * var(--px)); }
.bsa-timing__row--shorts .bsa-timing__icon { top: calc(113.2 * var(--px)); }
.bsa-timing__row--shorts .bsa-timing__label span { left: calc(213.2 * var(--px)); top: calc(99.6 * var(--px)); }
.bsa-timing__row--shorts .bsa-timing__value { left: calc(125.5 * var(--px)); top: calc(124.2 * var(--px)); }

/* ---------- 05_wash(文字のない写真が届くまで画像のまま) ---------- */
.bsa-photo {
    margin-top: calc(40 * var(--px));
}

.bsa-photo img {
    display: block;
    width: 100%;
    height: auto;
}

/* ---------- ナイトブラ&ショーツはこちら(商品のカルーセル) ---------- */
.bsa-items {
    margin-bottom: calc(80 * var(--px));
}

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

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

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

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

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

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

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

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

/* 上段(ナイトブラ)と下段(ショーツ)の間 */
.bsa-items__carousel + .bsa-items__carousel {
    margin-top: calc(24 * var(--px));
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.bsa-sec .swiper-button-disabled,
.bsa-sec .swiper-button-lock {
    display: none;
}

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

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

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

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

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

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

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

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

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

/* ---------- 05_wash の写真+HTML文字(11/9) ----------
   写真は img/wash_photo.webp(差し替えはファイルを置き換えるだけ)
   --x / --y / --fs / --ls は見本(parts/wash_text.jpg 1080px)上の値。--u = var(--px) × 375 ÷ 1080
   帯・下線・かっこ・白い枠・線は SVG(viewBox が見本と同じ 1080×1213)で描く */
.bsa-wash {
    --u: calc(var(--px) * 375 / 1080);
    position: relative;
    line-height: 1;
}

.bsa-wash__deco {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.bsa-wash__band { fill: #e67e7b; }
.bsa-wash__bar { fill: #e9827e; opacity: .55; }
.bsa-wash__box { fill: #f1f2ee; } /* 下の消した跡が見えないよう不透明 */

.bsa-wash__bracket {
    fill: none;
    stroke: #fff;
    stroke-width: 2.5;
}

.bsa-wash__line {
    fill: none;
    stroke: #f5f0eb;
    stroke-width: 3;
}

.bsa-wash__dot { fill: #fdfbfb; }

.bsa-wash__chart {
    margin: 0;
}

/* 円グラフ:週5~7日(右半分)は半径175、ほかの3つは半径163 */
.bsa-wash__pie {
    position: absolute;
    top: calc((724 - 163) * var(--u));
    left: calc((214 - 163) * var(--u));
    width: calc(326 * var(--u));
    height: calc(326 * var(--u));
    border-radius: 50%;
    background: conic-gradient(transparent 0deg 180deg, #dcb1aa 180deg 241deg, #f1ccc6 241deg 304deg, #dad2cf 304deg 360deg);
}

.bsa-wash__pie::after {
    content: "";
    position: absolute;
    top: calc((163 - 175) * var(--u));
    left: calc(163 * var(--u));
    width: calc(175 * var(--u));
    height: calc(350 * var(--u));
    border-radius: 0 calc(175 * var(--u)) calc(175 * var(--u)) 0;
    background: #ec7c7b;
}

.bsa-wash__text {
    margin: 0;
    padding: 0;
    list-style: none;
}

.bsa-wash__text > span,
.bsa-wash__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;
    color: #fff;
}

.bsa-wash__text--bold > span {
    font-family: "Yu Gothic Pr6N B", "游ゴシック", YuGothic, sans-serif;
    font-weight: bold;
}

.bsa-wash__text--box > span { color: #111; }
.bsa-wash__text--box > .bsa-wash__pink { color: #eb7d75; }

.bsa-wash__text sup {
    position: relative;
    top: -0.6em;
    margin-left: 0.05em;
    font-size: max(10px, 0.55em); /* SPで10pxより小さくしない */
    vertical-align: baseline;
}

/* 円グラフの項目名(游ゴシック M)。小さい項目名は中心(--x, --y)に合わせ、SPでは10pxより小さくしない */
.bsa-wash__text--label > li {
    font-family: "Yu Gothic Pr6N M", "游ゴシック", YuGothic, sans-serif;
    font-weight: 500;
}

.bsa-wash__text--label > li.is-center {
    font-size: max(10px, calc(var(--fs) * var(--u)));
    line-height: 1.3;
    text-align: center;
    transform: translate(-50%, -50%);
}

/* 注釈も SPで10pxより小さくしない */
.bsa-wash > .bsa-wash__text:last-child > span {
    font-size: max(10px, calc(var(--fs) * var(--u)));
}