@charset "UTF-8";
/* ========================================
   どれを選べばいい？カップ付きトップス比較ガイド【SLEEVELESS】
   サイズは「カンプ上のpx × var(--px)」(375pxで等倍、800pxで最大)
   換算: 01_top 768px→×0.48828 / 02〜09 2160px→×0.17361
   02〜09 の商品紹介は 08_cupinshortsleeve の 08・09(正方形のカンプ)と同じレイアウト
======================================== */
:root {
    --px: min(calc(100vw / 375), calc(800px / 375));
    --c-text: #333333;
    --c-title: #111111;
    --c-label: #cec9c5;
    --c-button: #6f6969;
}

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

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

.csl img {
    max-width: none;
}

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

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

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

/* ---------- セクション見出し(PICK UP / COORDINATE / ALL ITEM) ---------- */
.csl-sec {
    margin-top: calc(48 * var(--px));
}

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

.csl-pickup {
    margin-top: calc(48 * var(--px));
}

/* ---------- 商品紹介(02〜09) ---------- */
.csl-item + .csl-item {
    margin-top: calc(48 * var(--px));
}

/* 商品の色(季節の丸・スライダーの丸):濃い色 = 対応している季節、薄い色 = 対応していない季節 */
.csl-item--ribu  { --c-on: #dcb153; --c-off: #ead199; }
.csl-item--bsbt  { --c-on: #9cad67; --c-off: #c6cfa5; }
.csl-item--sntk  { --c-on: #897397; --c-off: #bbaec0; }
.csl-item--bcc   { --c-on: #6184a9; --c-off: #9ebde6; }
.csl-item--2wayc { --c-on: #02a6ac; --c-off: #aacdd0; }
.csl-item--crpd  { --c-on: #ac6c85; --c-off: #cfa9b7; }
.csl-item--hntk  { --c-on: #598370; --c-off: #96c0ac; }
.csl-item--co    { --c-on: #b55972; --c-off: #e9aac5; }

/* 左:モデル写真(835×1496)、右:説明。正方形のカンプで、写真の上下に白い余白(2160px のカンプ上で 332px)がある */
.csl-item__body {
    display: flex;
    height: calc(259.6 * var(--px));
    padding: calc(57.6 * var(--px)) 0;
    box-sizing: content-box;
}

.csl-item__photo {
    flex-shrink: 0;
    width: calc(145 * var(--px));
}

.csl-item__photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.csl-item__info {
    position: relative;
    flex: 1;
    padding-top: calc(16 * var(--px));
    text-align: center;
}

.csl-item__name {
    color: var(--c-title);
    font-family: futura-pt, "Futura PT", "Jost", sans-serif;
    font-weight: 500;
    font-size: calc(18 * var(--px));
    line-height: calc(19.4 * var(--px));
    letter-spacing: .02em;
}

.csl-item__desc {
    margin-top: calc(8 * var(--px));
    color: #222222;
    font-family: "Yu Gothic Pr6N B", "游ゴシック", YuGothic, sans-serif;
    font-weight: bold;
    font-size: max(10px, calc(10.4 * var(--px)));
    line-height: calc(16.1 * var(--px));
    white-space: nowrap;
}

/* 商品名が1行で説明文が2行のもの(03)は、商品名の位置が下 */
.csl-item--bsbt .csl-item__info {
    padding-top: calc(19.3 * var(--px));
}

.csl-item--bsbt .csl-item__desc {
    margin-top: calc(6.5 * var(--px));
}

/* 季節・厚み・透け感(2160px のカンプ上 y=970 / 1201 / 1431 から 130px の行) */
.csl-spec {
    position: absolute;
    top: calc(110.7 * var(--px));
    left: calc(20.2 * var(--px));
    right: 0;
    text-align: left;
}

.csl-spec__row {
    display: flex;
    align-items: center;
    height: calc(22.4 * var(--px));
}

.csl-spec__row + .csl-spec__row {
    margin-top: calc(17.6 * var(--px));
}

.csl-spec dt {
    flex-shrink: 0;
    width: calc(51.2 * var(--px));
    height: 100%;
    background: var(--c-label);
    font-family: "Yu Gothic Pr6N B", "游ゴシック", YuGothic, sans-serif;
    font-weight: bold;
    font-size: max(10px, calc(10.8 * var(--px)));
    line-height: calc(22.4 * var(--px));
    letter-spacing: .08em;
    text-align: center;
}

.csl-spec dd {
    position: relative;
    flex: 1;
    height: 100%;
}

/* 季節の丸 */
.csl-season {
    display: flex;
    gap: calc(9.8 * var(--px));
    margin-left: calc(16.6 * var(--px));
    height: 100%;
    align-items: center;
}

.csl-season li {
    width: calc(21.6 * var(--px));
    height: calc(21.6 * var(--px));
    border-radius: 50%;
    background: var(--c-off);
    color: #ffffff;
    font-family: "Yu Gothic Pr6N B", "游ゴシック", YuGothic, sans-serif;
    font-weight: bold;
    font-size: max(10px, calc(8.7 * var(--px)));
    line-height: calc(21.6 * var(--px));
    text-align: center;
}

.csl-season li.is-on {
    background: var(--c-on);
}

/* 厚み・透け感のスライダー(線と丸)。丸の位置は HTML の --pos(線の左端からの割合) */
.csl-gauge__min,
.csl-gauge__max {
    position: absolute;
    top: 50%;
    font-family: "Yu Gothic Pr6N B", "游ゴシック", YuGothic, sans-serif;
    font-weight: bold;
    font-size: max(10px, calc(6.1 * var(--px)));
    line-height: 1;
    letter-spacing: .1em;
    white-space: nowrap;
    transform: translate(-50%, -50%);
}

.csl-gauge__min {
    left: calc(20.9 * var(--px));
}

.csl-gauge__max {
    left: calc(129.1 * var(--px));
}

@media screen and (min-width: 769px) {
    .csl-gauge__min,
    .csl-gauge__max {
        font-size: max(10px, calc(7.1 * var(--px)));
    }
}

.csl-gauge__bar {
    position: absolute;
    top: 50%;
    left: calc(37.9 * var(--px));
    width: calc(73.2 * var(--px));
    height: 1px;
    /* カンプでは 2160px 上で 2〜3px の線なので、SPでは細く薄く見える */
    background: rgba(38, 38, 38, .55);
}

.csl-gauge__bar::after {
    content: "";
    position: absolute;
    top: 50%;
    left: var(--pos);
    width: calc(6.7 * var(--px));
    height: calc(6.7 * var(--px));
    border-radius: 50%;
    background: var(--c-on);
    transform: translate(-50%, -50%);
}

/* 02・03 の「※カラーによって多少異なります」(線の中央の下) */
.csl-gauge__note {
    position: absolute;
    top: calc(100% + calc(4 * var(--px)));
    left: calc(74.5 * var(--px));
    font-size: max(9px, calc(3.1 * var(--px)));
    line-height: 1.2;
    letter-spacing: .1em;
    white-space: nowrap;
    transform: translateX(-50%);
}

@media screen and (min-width: 769px) {
    .csl-gauge__note {
        font-size: calc(5 * var(--px));
    }
}

/* VIEW MORE ボタン(2160px のカンプ上 x=1196〜1807、y=1683〜1787) */
.csl-item__more {
    position: absolute;
    top: calc(234.4 * var(--px));
    left: calc(62.4 * var(--px));
    width: calc(105.6 * var(--px));
    height: calc(18 * var(--px));
    padding-right: calc(10 * var(--px));
    background: var(--c-button);
    color: #ffffff;
    font-family: futura-pt, "Futura PT", "Jost", sans-serif;
    font-weight: 400;
    font-size: calc(10.8 * var(--px));
    line-height: calc(18 * var(--px));
    letter-spacing: .02em;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
}

.csl-item__more::after {
    content: ">";
    position: absolute;
    right: calc(8.6 * var(--px));
}

/* ---------- 商品のスライダー(1枚目 = カンプ、2枚目以降 = 楽天の写真) ---------- */
/* Swiper(js/script.js)で1枚ずつ切り替える。高さは一番高い写真(正方形)に合わせ、カンプのスライドの下は白くなる(楽天と同じ) */
/* .csl-item__carousel は PC の矢印の位置の基準(矢印は COORDINATE と同じ見た目で、スライダーの上下中央) */
.csl-item__carousel {
    position: relative;
}

/* PCの切り替えは楽天と同じ ease-out(速さは js/script.js) */
@media screen and (min-width: 769px) {
    .csl-item__slider .swiper-wrapper {
        transition-timing-function: ease-out;
    }
}

.csl-item__slider .swiper-slide img {
    display: block;
    width: 100%;
    height: auto;
}

.csl-item__slider .csl-item__photo img {
    height: 100%;
}

/* ドット(楽天ページの page.png:直径6px、間隔6px、今のスライドは赤) */
.csl-item__pagination {
    display: flex;
    justify-content: center;
    gap: calc(6 * var(--px));
    margin-top: calc(12 * var(--px));
}

.csl-item__pagination .swiper-pagination-bullet {
    width: calc(6 * var(--px));
    height: calc(6 * var(--px));
    margin: 0 !important;
    border-radius: 50%;
    background: #d1d1d1;
    opacity: 1;
    cursor: pointer;
}

.csl-item__pagination .swiper-pagination-bullet-active {
    background: #4a4a4a;
}

/* PCはドットを小さく(5px相当)、今のスライドは濃いグレー */
@media screen and (min-width: 769px) {
    .csl-item__pagination .swiper-pagination-bullet {
        width: calc(5 * var(--px));
        height: calc(5 * var(--px));
    }

    .csl-item__pagination .swiper-pagination-bullet-active {
        background: #4a4a4a;
    }
}

/* ---------- COORDINATE(楽天ページのHTML部分) ---------- */
.csl-code {
    margin-top: calc(44 * var(--px));
}

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

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

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

.csl-code__list img {
    display: block;
    width: 100%;
    height: auto;
}

.csl-code__size {
    display: block;
    margin-top: calc(2 * var(--px));
    font-size: calc(13 * var(--px));
    line-height: 1.4;
}

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

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

    .csl-code__list li:last-child {
        margin-right: 0;
    }

    .csl-code__size {
        font-size: calc(7.5 * var(--px));
    }
}

/* ---------- ALL ITEM(楽天ページと同じ2列の一覧) ---------- */
.csl-all {
    margin-bottom: calc(80 * var(--px));
}

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

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

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

.csl-all__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は4列 */
@media screen and (min-width: 769px) {
    .csl-all__list {
        grid-template-columns: repeat(4, 1fr);
        gap: calc(20 * var(--px)) calc(6 * var(--px));
    }

    .csl-all__name {
        font-size: calc(7 * var(--px));
    }
}

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

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

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

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

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

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

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

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

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

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

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

/* ---------- 商品のスライダーの2枚目以降(parts/ の写真 + 文字はHTML) ---------- */
/* 文字は designs/cupin_sleeveless/parts/<商品>_<番号>_text.jpg を見本に、写真の上に重ねる(書体は spec.md の指定どおり、すべて游ゴシック) */
/* 位置・大きさ・字間は span の style に「カンプ(375px幅)上の px」で書く(--x: 左 / --y: 上 / --fs: 文字サイズ / --ls: 字間) */
.csl-slide {
    position: relative;
}

.csl-slide__text {
    margin: 0;
}

.csl-slide__text span {
    position: absolute;
    left: calc(var(--x) * var(--px));
    top: calc(var(--y) * var(--px));
    font-family: "Yu Gothic Pr6N M", "游ゴシック", YuGothic, sans-serif;
    font-size: calc(var(--fs) * var(--px));
    font-feature-settings: normal;
    letter-spacing: calc(var(--ls) * var(--px));
    line-height: 1;
    white-space: nowrap;
}

/* 縦書き */
.csl-slide__text--v span {
    writing-mode: vertical-rl;
}

/* 縦書きの中の英数字(「2WAY」)を横に倒さず立てる */
.csl-slide__text--v .is-upright {
    text-orientation: upright;
}

/* 見出し(太字)と説明文 */
.csl-slide__text--main span {
    color: #232323;
    font-family: "Yu Gothic Pr6N B", "游ゴシック", YuGothic, sans-serif;
    font-weight: bold;
}

/* サブテキストは一段太く(Demibold) */
.csl-slide__text--sub span {
    color: #232323;
    font-family: "Yu Gothic Pr6N D", "游ゴシック", YuGothic, sans-serif;
    font-weight: 600;
}

/* 4枚組の写真の上の白い文字 */
.csl-slide__text--label span {
    color: #fff;
    font-family: "Yu Gothic Pr6N B", "游ゴシック", YuGothic, sans-serif;
    font-weight: bold;
}

/* TUCK IN / TUCK OUT は futura-pt の細め(300) */
.csl-slide__text--tuck span {
    color: #000;
    font-family: futura-pt, "Futura PT", "Jost", sans-serif;
    font-weight: 300;
}

/* MODEL の表記(spec.md の指定どおり游ゴシック)。白い文字に、見本と同じ薄い影を付けて明るい背景でも読めるようにする */
.csl-slide__text--model span {
    color: #fff;
    font-weight: 400;
    text-shadow: 0 0 calc(1.5 * var(--px)) rgba(0, 0, 0, .55);
}

/* bcc・co・crpd・hntk のスライド(11/5 追加分) */
/* 写真の上の白い TUCK IN / TUCK OUT(hntk) */
.csl-slide__text--white span {
    color: #fff;
}

/* 小さい注釈(「※全てMサイズ着用」) */
.csl-slide__text--note span {
    color: #000;
}

/* 下線付きの見出し(「身長別」)。下線の位置は --ut(文字の上端からの距離) */
.csl-slide__text--underline span::after {
    content: "";
    position: absolute;
    left: calc(-4 * var(--px));
    right: calc(var(--ls) * var(--px));
    top: calc(var(--ut) * var(--px));
    height: calc(1.5 * var(--px));
    background: currentColor;
}

/* 色の付いた箱の中に文字を置くラベル(--w・--h が箱の大きさ) */
.csl-slide__text--box span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--w) * var(--px));
    height: calc(var(--h) * var(--px));
    font-family: "Yu Gothic Pr6N B", "游ゴシック", YuGothic, sans-serif;
    font-weight: bold;
}

.csl-slide__text--box-beige span {
    background: #a6947c;
    color: #fff;
}

.csl-slide__text--box-gray span {
    background: #9d9d9d;
    color: #fff;
}

/* 身長の白いラベル(角丸) */
.csl-slide__text--box-pill span {
    background: #fff;
    border-radius: calc(11 * var(--px));
    color: #1e1e1e;
}