@charset "UTF-8";
/* ========================================
   【お悩み別】カップ付きトップス・ブラトップ　サイズの選び方特集
   サイズは「カンプ上のpx × var(--px)」(375pxで等倍、800pxで最大)
   換算: 01_contents_top 724px→×0.51796 / 02_step 1000px→×0.375
         03〜05_type 1040px→×0.36058 / 06_howtowear 983px→×0.38149
======================================== */
:root {
    --px: min(calc(100vw / 375), calc(800px / 375));
    --c-text: #333333;
    --c-base: #fffcf9;
    --c-pink: #ffa89f;
    --c-pink-dark: #f48f84;
    --c-pink-text: #f37f81;
    --c-red: #da4c48;
    --c-voice: #f2e9e2;
    --c-voice-head: #d7bca1;
    --c-star: #f3c95b;
    --c-wear: #edeee9;
}

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

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

.cis img {
    max-width: none;
}

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

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

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

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

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

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

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

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

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

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

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

/* 注釈 */
.cis-note {
    margin-top: calc(10 * var(--px));
    padding: 0 calc(16 * var(--px));
    font-size: calc(6.5 * var(--px));
    line-height: 1.7;
}

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

/* ---------- STEP(02_step / ×0.375。06_bsnbsize と同じカンプ) ---------- */
.cis-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);
}

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

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

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

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

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

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

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

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

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

.cis-type--1 .cis-type__head {
    top: calc(7.93 * var(--px));
}

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

/* TYPE.1 の見出しの前の「そもそも…」(左右の点線は before / after) */
.cis-type__pre {
    position: absolute;
    left: calc(29.5 * var(--px));
    top: calc(19 * var(--px));
    display: block;
    color: #333;
    font-family: "Yu Gothic Pr6N B", "游ゴシック", YuGothic, sans-serif;
    font-weight: bold;
    font-size: max(10px, calc(9 * var(--px)));
    line-height: 1;
    letter-spacing: .08em;
    transform: rotate(-14deg);
    transform-origin: left bottom;
}

.cis-type__pre::before,
.cis-type__pre::after {
    content: "";
    position: absolute;
    height: calc(11 * var(--px));
    border-left: calc(1.8 * var(--px)) dotted #bfa999;
}

.cis-type__pre::before {
    left: calc(-6 * var(--px));
    bottom: calc(-4 * var(--px));
    transform: rotate(-50deg);
}

.cis-type__pre::after {
    right: calc(-5 * var(--px));
    top: calc(-3 * var(--px));
    transform: rotate(18deg);
}

.cis-type__title {
    display: inline-block;
    margin-top: calc(4.7 * var(--px));
    padding: 0 0 calc(.4 * var(--px));
    border-bottom: calc(2.16 * var(--px)) solid var(--c-pink);
    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;
}

.cis-type--1 .cis-type__title {
    margin-top: calc(5.8 * var(--px));
    padding-inline: calc(13.3 * var(--px));
    font-size: calc(12.45 * var(--px));
    letter-spacing: .08em;
}

.cis-type--2 .cis-type__title {
    font-size: calc(14.4 * var(--px));
    letter-spacing: .2em;
}

.cis-type--3 .cis-type__title {
    padding-inline: calc(19.3 * var(--px));
    letter-spacing: .05em;
}

/* 吹き出し・イラスト・装飾:カンプJPGで切り出した範囲(x, y, 幅)をそのまま換算して置く */
.cis-type__visual {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 0;
}

.cis-type__illust,
.cis-type__voice,
.cis-type__deco {
    position: absolute;
    height: auto;
}

.cis-type--1 .cis-type__voice--l { left: calc(9.01 * var(--px)); top: calc(67.79 * var(--px)); width: calc(140.63 * var(--px)); }
.cis-type--1 .cis-type__voice--r { left: calc(243.39 * var(--px)); top: calc(91.95 * var(--px)); width: calc(109.98 * var(--px)); }
.cis-type--1 .cis-type__illust { left: calc(147.84 * var(--px)); top: calc(57.69 * var(--px)); width: calc(101.68 * var(--px)); }
.cis-type--1 .cis-type__deco--r { left: calc(328.85 * var(--px)); top: calc(21.63 * var(--px)); width: calc(20.91 * var(--px)); }

.cis-type--2 .cis-type__voice--l { left: calc(7.21 * var(--px)); top: calc(68.51 * var(--px)); width: calc(135.22 * var(--px)); }
.cis-type--2 .cis-type__voice--r { left: calc(241.59 * var(--px)); top: calc(108.17 * var(--px)); width: calc(126.2 * var(--px)); }
.cis-type--2 .cis-type__illust { left: calc(137.02 * var(--px)); top: calc(63.1 * var(--px)); width: calc(104.57 * var(--px)); }
.cis-type--2 .cis-type__deco--l { left: calc(45.07 * var(--px)); top: calc(16.23 * var(--px)); width: calc(28.85 * var(--px)); }
.cis-type--2 .cis-type__deco--r { left: calc(304.69 * var(--px)); top: calc(32.45 * var(--px)); width: calc(25.24 * var(--px)); }

.cis-type--3 .cis-type__voice--l { left: calc(19.83 * var(--px)); top: calc(70.31 * var(--px)); width: calc(118.99 * var(--px)); }
.cis-type--3 .cis-type__voice--r { left: calc(241.59 * var(--px)); top: calc(108.17 * var(--px)); width: calc(126.2 * var(--px)); }
.cis-type--3 .cis-type__illust { left: calc(160.46 * var(--px)); top: calc(70.31 * var(--px)); width: calc(72.12 * var(--px)); }
.cis-type--3 .cis-type__deco--l { left: calc(10.82 * var(--px)); top: calc(9.01 * var(--px)); width: calc(25.24 * var(--px)); }
.cis-type--3 .cis-type__deco--r { left: calc(340.75 * var(--px)); top: calc(12.62 * var(--px)); width: calc(21.63 * var(--px)); }

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

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

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

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

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

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

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

.cis-type--1 .cis-type__size small,
.cis-type--3 .cis-type__size small {
    font-size: calc(14.4 * var(--px));
    letter-spacing: 0;
}

.cis-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) {
    .cis-type__desc {
        font-size: 14px;
        letter-spacing: .04em;
    }
}

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

/* 「のおかげで」「なのに、」「だから」はカンプで一回り小さい黒文字 */
.cis-type__desc small {
    font-size: .8em;
}

/* お客様の声 */
.cis-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;
}

.cis-review__head {
    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;
}

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

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

.cis-review__user {
    flex-shrink: 0;
    width: calc(54.1 * var(--px));
    margin-left: calc(4.6 * var(--px));
    text-align: center;
}

.cis-review__icon {
    width: calc(54.1 * var(--px));
    height: calc(54.1 * var(--px));
}

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

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

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

.cis-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) */
.cis-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) {
    .cis-review__text {
        font-size: 10px;
        line-height: 1.6;
    }
}

/* カンプのピンク文字(白い下地) */
.cis-review__text em {
    background: #fff;
    color: var(--c-pink-text);
    font-family: "Yu Gothic Pr6N B", "游ゴシック", YuGothic, sans-serif;
    font-weight: bold;
}

/* ---------- HOW TO WEAR(06_howtowear / ×0.38149) ---------- */
.cis-wear {
    padding: calc(33 * var(--px)) 0 calc(25.5 * var(--px));
    background: var(--c-wear);
    color: #333;
    text-align: center;
}

.cis-wear__title {
    font-family: futura-pt, "Futura PT", "Jost", sans-serif;
    font-weight: 400;
    font-size: calc(24.4 * var(--px));
    line-height: 1;
    letter-spacing: .04em;
}

.cis-wear__lead {
    margin-top: calc(20 * var(--px));
    font-size: calc(11.5 * var(--px));
    line-height: calc(22.5 * var(--px));
    letter-spacing: .12em;
}

@media screen and (max-width: 768px) { 
    .cis-wear__lead {
        font-size: calc(14.5 * var(--px));
        line-height: calc(24.5 * var(--px));
    }
}

.cis-wear__list {
    display: grid;
    grid-template-columns: repeat(2, calc(161.75 * var(--px)));
    column-gap: calc(10.3 * var(--px));
    row-gap: calc(23.6 * var(--px));
    margin-top: calc(6.3 * var(--px));
    padding-left: calc(20.6 * var(--px));
    text-align: left;
}

.cis-wear__item {
    position: relative;
    padding-top: calc(26.7 * var(--px));
}

.cis-wear__num {
    position: absolute;
    left: calc(-5.3 * var(--px));
    top: 40px;
    font-family: futura-pt, "Futura PT", "Jost", sans-serif;
    font-weight: 400;
    font-size: calc(26.7 * var(--px));
    line-height: 1;
    letter-spacing: 0;
}

@media screen and (max-width: 768px) {
    .cis-wear__num {
        top: 20px;
    }
}

.cis-wear__img {
    display: block;
    width: 100%;
    height: auto;
}

.cis-wear__text {
    margin-top: calc(11.1 * var(--px));
    padding-left: calc(2.3 * var(--px));
    font-size: calc(12.2 * var(--px));
    line-height: calc(20.6 * var(--px));
    letter-spacing: .1em;
    /* カンプは句読点・中黒が詰まっている */
    font-feature-settings: "palt";
}

/* ---------- もしもサイズが合わなくても安心(既存ページの画像) ---------- */
.cis-guarantee {
    margin-bottom: calc(32 * var(--px));
    padding: 0 calc(16 * var(--px));
}

.cis-guarantee img {
    width: 100%;
    height: auto;
}

/* ---------- 商品のカルーセル(CUP IN TOPS・BRATOP) ---------- */
.cis-items:last-child {
    margin-bottom: calc(80 * var(--px));
}

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

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

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

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

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

.cis-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;
    /* 商品名の途中で改行しないように、スペースの位置で折り返す */
    word-break: keep-all;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* henkin */
/* ---------- 10日間全額返金交換保証(楽天の画像 06_styleup_henkin_0821.jpg をHTMLにしたもの) ---------- */
/* 画像550px → 幅343pxで表示。サイズは「2倍に拡大した画像上のpx × 0.3118」 */
.cis-hk {
    position: relative;
    padding: calc(14 * var(--px)) 0 calc(9 * var(--px));
    border: 1px solid #8f7159;
    background: #f4f0e7;
    color: #1c0f09;
    font-family: "Yu Gothic Pr6N B", "游ゴシック", YuGothic, sans-serif;
    font-weight: bold;
    text-align: center;
}

.cis-guarantee .cis-hk img {
    display: block;
    height: auto;
}

.cis-hk__catch {
    width: calc(305 * var(--px));
    margin: 0 auto;
    border-radius: calc(3 * var(--px));
    background: #846958;
    color: #fff;
    font-size: calc(13 * var(--px));
    line-height: calc(22.8 * var(--px));
    letter-spacing: .04em;
    white-space: nowrap;
}

.cis-hk__catch span {
    color: #fffabf;
}

.cis-hk__title {
    margin-top: calc(5 * var(--px));
    font-family: "Yu Gothic Pr6N H", "Yu Gothic Pr6N B", "游ゴシック", YuGothic, sans-serif;
    font-weight: 900;
    font-size: calc(27.5 * var(--px));
    line-height: calc(34 * var(--px));
    letter-spacing: .02em;
    white-space: nowrap;
}

.cis-hk__days {
    font-size: calc(36 * var(--px));
    letter-spacing: -.04em;
}

.cis-hk__unit {
    margin: 0 calc(5 * var(--px)) 0 calc(1 * var(--px));
    font-size: calc(17.5 * var(--px));
}

/* 3つのイラスト(円)とラベル */
.cis-hk__points {
    display: flex;
    justify-content: center;
    gap: calc(11.5 * var(--px));
    margin-top: calc(6.5 * var(--px));
}

.cis-hk__points li {
    width: calc(84.2 * var(--px));
}

.cis-guarantee .cis-hk__points img {
    width: 100%;
}

/* 「イメージチェック」はSPの10pxで幅が足りないので、文字に合わせて広げる */
.cis-hk__points span {
    display: block;
    width: fit-content;
    min-width: calc(73.5 * var(--px));
    margin: calc(.5 * var(--px)) auto 0;
    padding: 0 calc(1.5 * var(--px));
    border-radius: calc(2 * var(--px));
    background: #9c8271;
    color: #fff;
    font-size: max(10px, calc(8.8 * var(--px)));
    line-height: calc(17.1 * var(--px));
    letter-spacing: .02em;
    white-space: nowrap;
}

/* BUY → FITTING → RETURN(黒い帯) */
.cis-hk__flow {
    display: flex;
    width: calc(315 * var(--px));
    min-height: calc(97.3 * var(--px));
    margin: calc(8.5 * var(--px)) auto 0;
    padding: calc(5.2 * var(--px)) 0 calc(4.9 * var(--px));
    border-radius: calc(3.7 * var(--px));
    background: #010101;
    color: #fff;
}

.cis-hk__step {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
}

/* 区切りの細い「>」 */
.cis-hk__step + .cis-hk__step::before {
    content: "";
    position: absolute;
    left: calc(-5.5 * var(--px));
    top: calc(16 * var(--px));
    width: calc(11 * var(--px));
    height: calc(61 * var(--px));
    background: #cfc6bd;
    clip-path: polygon(0 0, 1.5px 0, 100% 50%, 1.5px 100%, 0 100%, calc(100% - 1.5px) 50%);
}

.cis-hk__step-title {
    color: #fffabf;
    font-family: futura-pt, "Futura PT", "Jost", sans-serif;
    font-weight: 500;
    font-size: calc(13 * var(--px));
    line-height: calc(12 * var(--px));
    letter-spacing: .12em;
}

.cis-hk__step-text {
    margin-top: auto;
    font-size: max(10px, calc(8.6 * var(--px)));
    line-height: calc(12 * var(--px));
    letter-spacing: .04em;
    white-space: nowrap;
}

.cis-guarantee .cis-hk__step--buy img {
    width: calc(42.1 * var(--px));
    margin: calc(5.8 * var(--px)) 0 calc(4 * var(--px));
}

.cis-guarantee .cis-hk__step--fitting img {
    width: calc(34.3 * var(--px));
    margin: calc(1.6 * var(--px)) 0 calc(4 * var(--px));
}

.cis-guarantee .cis-hk__step--return img {
    width: calc(60.8 * var(--px));
    margin: calc(19.8 * var(--px)) 0 calc(4 * var(--px));
}

/* 「美容品としてお届け」の吹き出し */
.cis-hk__bubble {
    position: relative;
    margin-top: calc(5.2 * var(--px));
    padding: 0 calc(5 * var(--px));
    border: 1px solid #fff;
    border-radius: calc(8 * var(--px));
    font-size: max(10px, calc(7.8 * var(--px)));
    line-height: calc(14.2 * var(--px));
    letter-spacing: .02em;
    white-space: nowrap;
}

.cis-hk__bubble::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: calc(-3 * var(--px));
    width: calc(5 * var(--px));
    height: calc(5 * var(--px));
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
    background: #010101;
    transform: translateX(-50%) rotate(45deg);
}

/* 注意書き */
.cis-hk__notes {
    margin-top: calc(6.5 * var(--px));
    padding-left: calc(29.6 * var(--px));
    color: #4d4038;
    font-family: "Yu Gothic Pr6N M", "游ゴシック", YuGothic, sans-serif;
    font-weight: normal;
    font-size: max(10px, calc(7.4 * var(--px)));
    line-height: calc(10.6 * var(--px));
    letter-spacing: .12em;
    text-align: left;
}

@media screen and (max-width: 768px) {
    .cis-hk__notes {
        padding: 0 calc(12 * var(--px));
        line-height: 1.5;
        letter-spacing: .02em;
    }
}

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

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

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

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

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

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

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

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

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