@charset "UTF-8";
/* ========================================
   どれを選べばいい？カップ付きトップス比較ガイド【SHORT SLEEVE】
   サイズは「カンプ上のpx × var(--px)」(375pxで等倍、800pxで最大)
   換算: 01_top 1280px→×0.29297
         02〜04 1040px→×0.36058 / 05〜09 2160px→×0.17361
   02〜09 の商品紹介は同じレイアウトの解像度違い(1040px と 2160px)なので、
   1040px のカンプ上の値 × 0.36058 で共通の値にしている
   (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;
}

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

.cst img {
    max-width: none;
}

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

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

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

/* ---------- セクション見出し(PICK UP / COORDINATE / ▼紹介した商品はコチラ▼) ---------- */
.cst-sec {
    margin-top: calc(48 * var(--px));
}

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

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

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

/* 商品の色(季節の丸・スライダーの丸):濃い色 = 対応している季節、薄い色 = 対応していない季節 */
.cst-item--bnt  { --c-on: #7495a6; --c-off: #b6ccd7; }
.cst-item--bnth { --c-on: #73a5a6; --c-off: #accecf; }
.cst-item--cnt  { --c-on: #d4b984; --c-off: #eddabc; }
.cst-item--alts { --c-on: #768bc0; --c-off: #a6bdf4; }
.cst-item--bnos { --c-on: #a7726f; --c-off: #d8c6c4; }
.cst-item--bno  { --c-on: #739256; --c-off: #a0bf84; }
.cst-item--ost  { --c-on: #fc9b6a; --c-off: #f9d0be; --c-label: #dedad7; --c-button: #867d7e; }
.cst-item--rft  { --c-on: #959bd7; --c-off: #cdcfe4; --c-label: #dedad7; --c-button: #867d7e; }

/* 左:モデル写真(402×720)、右:説明(638×720) */
.cst-item__body {
    display: flex;
    height: calc(259.6 * var(--px));
    box-sizing: content-box;
}

/* 08・09 は正方形のカンプで、写真の上下に白い余白(2160px のカンプ上で 332px)がある */
.cst-item--ost .cst-item__body,
.cst-item--rft .cst-item__body {
    padding: calc(57.6 * var(--px)) 0;
}

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

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

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

.cst-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.8 * var(--px));
    letter-spacing: .02em;
}

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

/* 商品名が1行のもの(02・04)は、説明文までの間が広い */
.cst-item--bnt .cst-item__desc,
.cst-item--cnt .cst-item__desc {
    margin-top: calc(14.5 * var(--px));
}

/* 08・09 は商品名・説明文の位置が上 */
.cst-item--ost .cst-item__info,
.cst-item--rft .cst-item__info {
    padding-top: calc(11 * var(--px));
}

.cst-item--ost .cst-item__name,
.cst-item--rft .cst-item__name {
    line-height: calc(21.3 * var(--px));
}

.cst-item--ost .cst-item__desc,
.cst-item--rft .cst-item__desc {
    margin-top: calc(6.5 * var(--px));
    line-height: calc(17 * var(--px));
    letter-spacing: .06em;
}

/* 季節・厚み・透け感(カンプ上 y=307 / 418 / 529 から 62px の行) */
.cst-spec {
    position: absolute;
    top: calc(110.7 * var(--px));
    left: calc(20.2 * var(--px));
    right: 0;
    text-align: left;
}

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

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

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

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

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

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

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

/* 厚み・透け感のスライダー(線と丸)。丸の位置は HTML の --pos(線の左端からの割合) */
.cst-gauge__min,
.cst-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%);
}

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

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

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

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

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

/* 08・09 の「※カラーによって多少異なります」(線の中央の下) */
.cst-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) {
    .cst-gauge__note {
        font-size: calc(5 * var(--px));
    }
}

/* VIEW MORE ボタン(カンプ上 x=575〜868、y=650〜700) */
.cst-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;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.cst-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) {
    .cst-code__slider {
        margin-inline: calc(16 * var(--px));
        padding: 0;
    }

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

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

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

/* ---------- 商品のカルーセル(▼紹介した商品はコチラ▼) ---------- */
.cst-items__carousel {
    position: relative;
}

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

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

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

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

.cst-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商品(見切りなし)。商品の間は小さめ */
@media screen and (min-width: 769px) {
    .cst-items__slider {
        margin-inline: calc(16 * var(--px));
        padding: 0;
    }

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

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

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

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

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

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

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

.cst-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) {
    .cst-all__list {
        grid-template-columns: repeat(4, 1fr);
        gap: calc(20 * var(--px)) calc(6 * var(--px));
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

.cst-slide__text {
    margin: 0;
}

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

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

/* 縦書きの中の「A」を横に倒さず立てる */
.cst-slide__text--v .is-upright {
    text-orientation: upright;
}

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

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

.cst-slide__text--black span {
    color: #000;
}

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

/* MODEL の表記(spec.md の指定どおり游ゴシック) */
/* 人の指定:TUCK IN / TUCK OUT は futura-pt の細め(300) */
.cst-slide__text--tuck span {
    color: #000;
    font-family: futura-pt, "Futura PT", "Jost", sans-serif;
    font-weight: 300;
}

/* MODEL は白い文字に、見本と同じ薄い影を付けて明るい背景でも読めるようにする */
.cst-slide__text--model span {
    color: #fff;
    font-weight: 400;
    text-shadow: 0 0 calc(1.5 * var(--px)) rgba(0, 0, 0, .55);
}

/* bnos の5・6枚目(11/5 追加分) */
/* 小さい注釈(「※全てMサイズ着用」)。SPで10pxより小さくならないようにする */
.cst-slide__text--note span {
    color: #000;
    font-size: max(10px, calc(var(--fs) * var(--px)));
    /* SPで10pxに大きくなった分が右にはみ出さないよう、右端を基準に置く(カンプの右端の位置に合わせる) */
    left: auto;
    right: calc(5 * var(--px));
}

/* 身長の白いラベル(角丸)。--w・--h が箱の大きさ。英字の表記なので futura-pt の細め(300) */
.cst-slide__text--pill span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--w) * var(--px));
    height: calc(var(--h) * var(--px));
    background: #fff;
    /* 人の指定:身長の白いラベルは 09_cupinsleeveless(.csl-slide__text--box-pill)に合わせる */
    border-radius: calc(11 * var(--px));
    color: #1e1e1e;
    font-family: "Yu Gothic Pr6N B", "游ゴシック", YuGothic, sans-serif;
    font-weight: bold;
}