@charset "UTF-8";

/* ===== Reset helpers ===== */

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

.hyou1,
.retsu1,
.retsu1-1,
.sell {
    border: 1px solid #686868;
}


/* ========== Base ========== */

html {
    font-size: 100%
}

body {
    font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", "Yu Gothic Medium", "游ゴシック Medium", "メイリオ", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
    font-size: 1rem;
    background: #F4F7F7;
    color: #262626;
    letter-spacing: .02rem
}

a {
    text-decoration: none;
    color: inherit
}

img {
    max-width: 100%;
    width: 100%;
    height: auto
}

p {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.6rem;
    letter-spacing: .02rem
}

h1 {
    color: #FFF;
    text-align: center
}

h2 {
    font-size: 2rem;
    font-weight: 700;
    line-height: 120%;
    letter-spacing: .1rem;
    text-align: center
}

h3 {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .1rem
}

.hutoji {
    font-weight: 700
}

.hutoji32 {
    font-weight: 700;
    font-size: 1.5rem
}

.hutoji-center {
    font-weight: 700;
    text-align: center
}


/* 視覚的に隠すユーティリティ */

.visually-hidden {
    position: absolute!important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap
}


/* 見出しがヘッダー下に隠れにくくする */

[id] {
    scroll-margin-top: 80px
}


/* ========== Layout blocks ========== */

.article {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6.25rem;
    padding-top: 5rem;
    max-width: 768px;
    margin: auto
}

.lead,
.matome {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3.75rem;
    align-self: stretch
}

.section-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    align-self: stretch;
    max-width: 768px
}

.title-yellow {
    display: flex;
    height: 16px;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    font-size: 1rem;
    background: #FEC020;
    color: #111
}

.gray-box {
    display: flex;
    padding: 2.5rem 2rem;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    align-self: stretch;
    background: #FFF
}

.chigai {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-end;
    gap: 3rem
}

.chigai-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2.5rem;
    align-self: stretch
}

.chigai-title-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
    align-self: stretch
}


/* ========== Tags (item-tag) & row container ========== */

.frame43 {
    display: flex;
    align-items: center;
    gap: .75rem;
    align-self: stretch;
    flex-wrap: wrap
}

.item-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2.2rem;
    padding: 0 .9rem;
    line-height: 1;
    white-space: nowrap;
    border-radius: 9999px;
    background: #494949;
    color: #FFF;
    font-weight: 700;
    letter-spacing: 0
}

@media (max-width:750px) {
    .frame43 {
        gap: .5rem
    }
    .item-tag {
        height: 1.9rem;
        padding: 0 .6rem;
        font-size: 11.5px
    }
}


/* ========== Staff Voice ========== */

.staffcoment {
    display: flex;
    align-items: center;
    gap: 2.5rem;
    align-self: stretch
}

.staff {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .125rem;
    width: 5rem
}

.staff img {
    width: 100%;
    height: auto;
    border-radius: 9999px;
    object-fit: cover
}

.staff-name {
    font-size: .65rem;
    text-align: center;
    color: #606060
}

@media (max-width:750px) {
    .staff-name {
        font-size: clamp(.72rem, 2.8vw, .85rem)
    }
}

.coment {
    display: flex;
    padding: 1.25rem 2rem;
    align-items: center;
    gap: .625rem;
    flex: 1 0 0;
    border-radius: 1.25rem;
    background: #F1F1F1
}

.sv-title {
    font-size: 1rem;
    font-weight: 700;
    margin: 1.25rem 0 .5rem;
    line-height: 1.4
}

@media (max-width:750px) {
    .staffcoment {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: flex-start;
        gap: .75rem;
        width: 100%
    }
    .staff {
        flex: 0 0 4rem;
        width: 4rem
    }
    .staff img {
        width: 4rem;
        height: 4rem
    }
    .coment {
        flex: 1 1 auto;
        max-width: calc(100% - 4.75rem);
        margin: 0;
        padding: .9rem 1rem;
        border-radius: 1rem
    }
    .coment p {
        margin: 0;
        line-height: 1.5;
        word-break: break-word;
        overflow-wrap: anywhere
    }
}


/* ========== Summary tables (hyou1) — 元の見た目を維持 ========== */

.matome {
    display: flex;
    padding-bottom: 7.5rem;
    flex-direction: column;
    align-items: center;
    gap: 3rem;
    align-self: stretch
}

.hyou1 {
    display: flex;
    align-items: center;
    align-self: stretch
}

.retsu {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1 0 0
}

.retsu1 {
    display: flex;
    height: 3.625rem;
    align-self: stretch;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: #555;
    color: #FFF;
    text-align: center;
    font-size: .875rem
}

.retsu1-1 {
    display: flex;
    height: 3.625rem;
    padding: 0 .625rem;
    align-self: stretch;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    background: #F2F2F2;
    font-size: .875rem
}

.sell {
    display: flex;
    height: 3.625rem;
    padding: 0 .625rem;
    align-self: stretch;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: .625rem;
    background: #FAFAFA;
    font-size: .875rem
}


/* スマホ時：行ズレ＆はみ出し防止（2行固定＋強制折返し） */

@media (max-width:560px) {
    .hyou1 {
        display: flex!important;
        align-items: stretch!important
    }
    .retsu {
        display: flex!important;
        flex-direction: column!important;
        flex: 1 1 0!important;
        min-width: 0!important
    }
    .retsu1,
    .retsu1-1,
    .sell {
        min-width: 0!important;
        height: 4.6rem!important;
        padding: 3px 4px!important;
        display: flex;
        align-items: center;
        justify-content: center
    }
    .retsu1 span,
    .retsu1-1 span,
    .sell span {
        display: -webkit-box!important;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden!important;
        white-space: normal!important;
        overflow-wrap: anywhere;
        word-break: break-word;
        line-height: 1.25;
        font-size: 11.5px;
        letter-spacing: 0;
        max-width: 100%
    }
}


/* ========== Buttons / misc ========== */

.item-cta {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    align-self: stretch
}

.item-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: .75rem;
    flex: 1 0 0
}

.item-text {
    text-align: center;
    font-size: .875rem
}

.cta-button {
    display: flex;
    height: 2.875rem;
    padding: .625rem 2rem;
    justify-content: center;
    align-items: center;
    gap: .625rem;
    border-radius: 6.25rem;
    background: #212121;
    color: #FAFAFA;
    font-weight: 700
}

.cta-button:hover {
    background: #444
}


/* クリック/タップ/キーボード すべて視覚化 */

.cta-button:is(:hover,:active,:focus,:focus-visible) {
    outline: 3px solid #222;
    outline-offset: 3px;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .5)
}


/* 対応環境では白アウトラインに */

@supports (outline-color:CanvasText) {
    .cta-button:is(:hover,:active,:focus,:focus-visible) {
        outline-color:#fff
    }
}


/* JSで一時クラス付与 */

.cta-button.is-clicked {
    outline: 3px solid #fff;
    outline-offset: 3px;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .5)
}


/* ========== TOC (nav.toc) ========== */

.toc {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    align-self: stretch
}

.toc-list {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1rem;
    list-style: none;
    padding: 0;
    margin: 0
}

.toc .anchor {
    display: block;
    text-decoration: none;
    color: #222;
    padding: .5rem .875rem;
    border: 1px solid #222;
    border-radius: 9999px;
    background: #fff;
    line-height: 1;
    white-space: nowrap
}


/* TOC内のラベルは視認性のため太字 */

.toc .anchor span {
    font-weight: 700
}


/* フォーカス可視化 */

.toc .anchor:focus-visible {
    outline: 2px solid #222;
    outline-offset: 2px;
    border-color: #222
}

@media (max-width:750px) {
    .toc-list {
        gap: .5rem .75rem
    }
    .toc .anchor {
        padding: .45rem .75rem;
        font-size: .95rem
    }
}


/* 目次と最初のモデルの間隔 */

.toc {
    margin-bottom: 4rem;
}

@media (max-width:750px) {
    .toc {
        margin-bottom: 3rem;
    }
}


/* 各モデル（501,505...）間の間隔 */

.chigai {
    margin-bottom: 5rem;
}

.chigai:last-of-type {
    margin-bottom: 0;
}

@media (max-width:750px) {
    .chigai {
        margin-bottom: 3rem;
    }
}


/* ========== Utility tweaks ========== */

@media (max-width:1280px) {
    .article {
        padding: 6.25rem 2rem 0
    }
}

@media (max-width:768px) {
    .article {
        padding: 3rem 1.25rem 0;
        gap: 3.75rem
    }
    .lead,
    .matome {
        gap: 2.4rem
    }
}


/* 着用ギャラリー：3枚を常に横一列（PC/SP共通） */

.chigai .frame43 .frame76 {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* gapが .75rem のとき 3等分（間の2つ分のgapを引いて割る） */
    width: calc((100% - 1.5rem)/3);
    min-width: 0/* 文字等で横に伸びないように */
}

.chigai .frame43 {
    display: flex;
    flex-wrap: wrap;
    /* width固定で3つ並ぶ。足りなければ折返しOK */
    gap: .75rem
}


/* 画像リンクは横幅いっぱいにフィット */

.chigai .frame43 .frame76 a,
.chigai .frame43 .frame76 img {
    display: block;
    width: 100%;
    height: auto
}


/* スマホ時：gapが .5rem なので計算を合わせて微調整（見やすく） */

@media (max-width:750px) {
    .chigai .frame43 {
        gap: .5rem
    }
    .chigai .frame43 .frame76 {
        width: calc((100% - 1rem)/3)
    }
    /* キャプションが長い端末でも崩れないように */
    .chigai .frame43 .frame76 .tyusyaku {
        margin-top: .25rem;
        font-size: .85rem;
        line-height: 1.3;
        text-align: center;
        word-break: break-word;
        overflow-wrap: anywhere
    }
}


/* 着用ノート（クラス指定） */

.wear-note {
    font-size: .9rem;
    line-height: 1.45;
    color: #555;
    margin: .4rem 0 0
}

@media (max-width:750px) {
    .wear-note {
        font-size: .85rem;
        line-height: 1.4
    }
}


/* TOC微調整（1024px以下） */

@media (max-width:1024px) {
    .toc .anchor {
        font-size: .95rem;
        padding: .45rem .7rem
    }
}