@charset "UTF-8";
/* ========================================
   【カップ付きトップス】スタッフコーディネート
   サイズは「カンプ上のpx × var(--px)」(375pxで等倍、800pxで最大)
   換算: 01_mv 768px→×0.48828 / バナー(楽天の kaiyu_mv_〜 1080px)→×0.34722
   01_mv はJPG全体を1枚の画像。バナーは文字を消した画像に文字を重ねる
   コーデ写真・商品のカルーセル・▼商品はコチラ▼は楽天ページ(375px)の見た目に合わせる
======================================== */
:root {
    --px: min(calc(100vw / 375), calc(800px / 375));
    --c-text: #333333;
    --c-banner: #2b2522;
}

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

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

.sc img {
    max-width: none;
}

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

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

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

/* ---------- セクション ---------- */
.sc-sec {
    margin-top: calc(40 * var(--px));
}

.sc-sec:last-child {
    margin-bottom: calc(80 * var(--px));
}

/* ---------- バナー(文字を消した画像 + 文字) ---------- */
/* 文字の位置はバナーごとの中心(カンプ上の x)で指定。縦の位置は4枚とも同じ */
.sc-banner {
    position: relative;
}

.sc-banner img {
    display: block;
    width: 100%;
    height: auto;
}

.sc-banner--long { --en-x: 101.2; --jp-x: 106.25; }
.sc-banner--short { --en-x: 261.6; --jp-x: 254.5; }
.sc-banner--cami { --en-x: 108.5; --jp-x: 108.5; }
.sc-banner--tank { --en-x: 268.1; --jp-x: 268.4; }

.sc-banner__en,
.sc-banner__text {
    position: absolute;
    margin: 0;
    transform: translateX(-50%);
    color: var(--c-banner);
    white-space: nowrap;
    text-align: center;
}

.sc-banner__en {
    top: calc(74.2 * var(--px));
    left: calc(var(--en-x) * var(--px));
    font-family: futura-pt, "Futura PT", "Jost", sans-serif;
    font-weight: 500;
    font-size: calc(22.2 * var(--px));
    line-height: 1;
    letter-spacing: 0.08em;
    text-indent: 0.08em;
}

.sc-banner__text {
    top: calc(115.8 * var(--px));
    left: calc(var(--jp-x) * var(--px));
    font-family: "Yu Gothic Pr6N B", "游ゴシック", YuGothic, sans-serif;
    font-weight: bold;
    font-size: calc(14.2 * var(--px));
    line-height: calc(24 * var(--px));
    letter-spacing: 0.04em;
}

/* ---------- カルーセル共通(コーデ写真・商品) ---------- */
/* Swiper(js/script.js)で横にスワイプ。.〜__carousel は PC の矢印の位置の基準 */
.sc-coord {
    margin-top: calc(32 * var(--px));
}

.sc-coord__carousel,
.sc-items__carousel {
    position: relative;
}

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

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

.sc-coord__list a,
.sc-items__list a {
    display: block;
    color: var(--c-text);
    text-decoration: none;
    /* feature.css の a { transition: all } だと画面幅を変えたときに大きさまで動くので opacity だけにする */
    transition: opacity 0.3s ease;
}

/* コーデ写真(750×900) */
.sc-coord__list img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 750 / 900;
}

.sc-coord__cap {
    display: block;
    margin-top: calc(2 * var(--px));
    font-size: max(10px, calc(12 * var(--px)));
    line-height: 1.4;
}

/* ---------- ▼商品はコチラ▼ と商品のカルーセル ---------- */
.sc-items {
    margin-top: calc(48 * var(--px));
}

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

.sc-items__img {
    position: relative;
}

.sc-items__img > img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
    object-fit: cover;
}

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

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

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

/* PCは1画面に4枚・4商品(見切りなし) */
@media screen and (min-width: 769px) {
    .sc-coord__slider,
    .sc-items__slider {
        margin-inline: calc(16 * var(--px));
        padding: 0;
    }

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

    .sc-coord__list li:last-child,
    .sc-items__list li:last-child {
        margin-right: 0;
    }

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

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

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

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

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

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

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

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

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

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

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

@media screen and (max-width: 768px) {
    .sc-sec .swiper-button-prev,
    .sc-sec .swiper-button-next {
        display: none;
    }
}