@charset "UTF-8";
/* =========================================================
   コレクション Unwind  ( /unwind/ )
   Figma: ajour LP / Collection
     PC 499:914 (1440px基準) / SP 496:146 (375px基準)
   ヘッダー・フッターは共通パーツ。上部オフセットは
   .l-main の margin-top (PC 154px / SP 55px) が担う。
   ========================================================= */

.uw {
    --uw-main: #3D2924;
    --uw-sub: #696969;
    --uw-gold: #836723;
    --uw-border: #C1B391;
    --uw-btn: #9E8853;
    --uw-white: #FFFFFF;
    --uw-mincho: "Zen Old Mincho", "Yu Mincho", "游明朝", YuMincho, serif;
    --uw-en: "Cormorant Garamond", serif;
    --uw-gothic: 游ゴシック体, YuGothic, 游ゴシック, "Yu Gothic", メイリオ, sans-serif;

    background: var(--uw-white);
    color: var(--uw-main);
    /* body の word-break:break-all を打ち消し、Figma と同じ禁則で折り返す */
    word-break: normal;
    overflow-wrap: break-word;
    /* サイト共通CSSが継承させている letter-spacing:1px を打ち消す。
       字間は Figma で指定のある要素にだけ個別に当てる。 */
    letter-spacing: normal;
}

.uw *,
.uw *::before,
.uw *::after {
    box-sizing: border-box;
}

/* ul はここで margin を打たない。
   `.uw ul`(0,1,1) が `.uw-items__list`(0,1,0) の margin:0 auto を
   詳細度で上書きして中央寄せが効かなくなるため。 */
.uw h1,
.uw h2,
.uw p {
    margin: 0;
    padding: 0;
}

.uw ul {
    list-style: none;
}

.uw img {
    display: block;
    max-width: 100%;
}

/* ここで color を指定しないこと。
   `.uw a`(0,1,1) は `.c-button_reversal` や `.uw-btn`(0,1,0) より詳細度が高く、
   ボタンの文字色を潰してしまうため。色は各リンクに個別指定する。 */
.uw a {
    text-decoration: none;
    transition: opacity .3s ease;
}

.uw a:hover {
    opacity: .7;
}

/* 改行制御 */
.uw-br-sp {
    display: none;
}

/* ---------------------------------------------------------
   MV  PC 1440x840 / SP 375x384
   --------------------------------------------------------- */
.uw-mv {
    width: 100%;
}

.uw-mv__ttl {
    font-size: 0;
    line-height: 0;
}

.uw-mv img {
    width: 100%;
    height: auto;
    aspect-ratio: 1440 / 840;
    object-fit: cover;
}

/* ---------------------------------------------------------
   Concept  PC padding 160/28/130 ・ SP padding 46/28
   --------------------------------------------------------- */
.uw-concept {
    padding: 160px 28px 130px;
    text-align: center;
}

.uw-concept__txt {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.uw-concept__ttl {
    font-family: var(--uw-mincho);
    font-weight: 400;
    font-size: 28px;
    letter-spacing: 1.12px;
    line-height: 2;
    color: var(--uw-main);
}

.uw-concept__lead {
    font-family: var(--uw-mincho);
    font-weight: 400;
    font-size: 18px;
    letter-spacing: .72px;
    line-height: 2;
    color: var(--uw-main);
}

/* ---------------------------------------------------------
   Item 一覧
   PC: 316px × 3列 / col-gap 28 / row-gap 44 (コンテナ 1004px)
   SP: 2列 / col-gap 12 / row-gap 28 / 左右 padding 20
   --------------------------------------------------------- */
.uw-items__list {
    width: 1004px;
    max-width: calc(100% - 40px);
    margin: 0 auto;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 28px;
    row-gap: 44px;
}

/* li をフレックス化し、カードを行の高さいっぱいに伸ばす。
   説明文の行数がアイテムごとに変わっても
   「詳細を見る」ボタンの高さが揃うようにするため。 */
.uw-items__list>li {
    display: flex;
}

.uw-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    /* 共通CSSの a { color:#000 } を打ち消す */
    color: var(--uw-main);
}

.uw-item__img {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.uw-item__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* img → body = 20px */
.uw-item__body {
    flex-grow: 1;
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* 英名 → 和名/品番 = 8px */
.uw-item__name {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.uw-item__en {
    font-family: var(--uw-en);
    font-weight: 500;
    font-size: 24px;
    letter-spacing: .96px;
    line-height: 1;
    color: var(--uw-main);
}

.uw-item__jp {
    font-family: var(--uw-gothic);
    font-weight: 500;
    font-size: 12px;
    letter-spacing: .48px;
    line-height: 1;
    color: var(--uw-sub);
}

/* 余った高さは説明文が吸収し、ボタンを下端に揃える。
   全アイテムが同じ行数なら余白ゼロ＝Figma通りの間隔のまま。 */
.uw-item__desc {
    flex-grow: 1;
    font-family: var(--uw-mincho);
    font-weight: 400;
    font-size: 15px;
    line-height: 1.7;
    color: var(--uw-main);
}

/* 詳細を見るボタン (PC: 高さ40 / padding 8 / 両端に16pxの枠、右のみ矢印)
   本文ブロック内なので上の余白は .uw-item__body の gap:12px が担う */
.uw-item__btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 40px;
    padding: 8px;
    background: var(--uw-white);
    border: 1px solid var(--uw-border);
    border-radius: 4px;
}

.uw-item__btn::before,
.uw-item__btn::after {
    content: "";
    flex: none;
    width: 16px;
    height: 16px;
}

.uw-item__btn::after {
    background: url(../img/ico_chevron.svg) no-repeat center / 9.5px 5.5px;
    transform: rotate(-90deg);
}

.uw-item__btn span {
    font-family: var(--uw-gothic);
    font-weight: 700;
    font-size: 14px;
    line-height: 21px;
    letter-spacing: .84px;
    color: var(--uw-gold);
    text-align: center;
    white-space: nowrap;
}

/* ---------------------------------------------------------
   下部リンク
   PC: 最終行から124px 空けて 386px×2 (gap20)、下に80px
   SP: 上下 50px / 335px を縦積み (gap20)
   --------------------------------------------------------- */
.uw-links {
    padding: 124px 0 80px;
}

.uw-links__inner {
    width: 792px;
    max-width: calc(100% - 40px);
    margin: 0 auto;
    display: flex;
    gap: 20px;
}

/* 見た目はテーマ既存の .c-button_reversal をそのまま流用する
   (assets/css/style.css)。背景#9E8853・枠1px・角丸4px・文字色#FFF・太字・
   最小高さ40px・PC 1.4rem(14px)/SP 1.2rem(12px)・右端10pxの ico_arw02 まで
   Figma の指定と一致するため、ここでは横幅だけを足す。
   ※ 重複宣言するとコンポーネント側の更新が効かなくなるので書かないこと。 */
.uw-btn {
    flex: 1 1 0;
}

/* =========================================================
   SP  (375px 基準)
   ========================================================= */
@media screen and (max-width: 767px) {

    .uw-br-sp {
        display: inline;
    }

    /* MV */
    .uw-mv img {
        aspect-ratio: 375 / 384;
    }

    /* Concept */
    .uw-concept {
        padding: 46px 28px;
    }

    .uw-concept__ttl {
        font-size: 18px;
        letter-spacing: .72px;
    }

    /* 改行位置を固定するため br を入れている。
       最長行は20文字（例:「特別な日のためにしまったままのパールを、」）で
       375px時に必要な幅は 20×15px×1.04 ≒ 312px、確保できる幅は 375-56=319px。
       375px未満の端末では収まらず勝手に折り返すので、
       収まる範囲まで文字サイズを等比で落とす。375px以上では常に15px。
       字間は .04em (=15pxで.6px) にして縮小に追従させる。 */
    .uw-concept__lead {
        font-size: min(15px, calc((100vw - 56px) / 21));
        letter-spacing: .04em;
    }

    /* Item */
    .uw-items__list {
        width: 100%;
        max-width: none;
        padding: 0 20px;
        grid-template-columns: repeat(2, 1fr);
        column-gap: 12px;
        row-gap: 28px;
    }

    .uw-item__en {
        font-size: 20px;
        letter-spacing: .8px;
    }

    .uw-item__desc {
        font-size: 11px;
    }

    /* SP はボタンが本文ブロックの外側扱い＝説明文との間は20px
       (.uw-item__body の gap:12px + margin-top:8px) */
    .uw-item__btn {
        position: relative;
        margin-top: 8px;
        justify-content: center;
        height: auto;
        min-height: 40px;
        /* Figma は高さ40px・py11。上下border 2px 分を詰めて実高さ40pxに合わせる */
        padding: 10px 1px;
    }

    .uw-item__btn::before {
        display: none;
    }

    .uw-item__btn::after {
        position: absolute;
        right: 9.5px;
        top: 50%;
        width: 6px;
        height: 9px;
        background: url(../../../assets/images/ico_arw01.svg) no-repeat center / contain;
        transform: translateY(-50%);
    }

    .uw-item__btn span {
        font-size: 12px;
        line-height: 18px;
        letter-spacing: 1px;
    }

    /* 下部リンク */
    .uw-links {
        padding: 50px 20px;
    }

    .uw-links__inner {
        width: 100%;
        max-width: none;
        flex-direction: column;
        gap: 20px;
    }

    /* font-size 12px は .c-button_reversal 側の 1.2rem が担う */
    .uw-btn {
        flex: none;
        width: 100%;
    }
}