@charset "utf-8";@charset "UTF-8";

/* ============================================================
   1. 不要パーツの非表示 & リセット
   ============================================================ */
#header, .keyword-box, .crumbsList, .footer, 
#header .header__nav, #header .header__inner, #header .header__nav--bottom {
    display: none;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body.Ankle-Length {
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #fff;
    -webkit-text-size-adjust: 100%;
}

.container {
    display: flex;
    flex-direction: column; /* スマホデフォルト */
}

/* ============================================================
   2. 左側：固定セクション
   ============================================================ */
.sidebar {
    width: 100%;
    height: auto; 
    position: relative;
    background-color: #000;
    overflow: hidden;
}

.sidebar-inner {
    width: 100%;
    aspect-ratio: 3 / 4; 
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.main-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; 
    z-index: 1;
}

/* ============================================================
   3. 右側：スクロールコンテンツ共通
   ============================================================ */
.content {
    width: 100%;
    padding: 60px 20px 20px;
    background-color: #fff;
}

.style-unit {
    max-width: 500px;
    margin: 0 auto 100px;
}

.style-unit.no-top-margin {
    margin-top: -60px;
}

.style-title {
    margin-bottom: 25px;
    position: relative;
}

.section-title {
    font-size: 20px;
    font-weight: bold;
    color: #000;
    padding-left: 15px;
    display: flex;
    align-items: center;
    line-height: 1.2;
    padding-bottom: 8px;
}

.section-title::before {
    content: "";
    position: absolute;
    left: 0;
    width: 2px;
    height: 1.2em;
    background-color: #000;
}

.style-images, .carousel-item, .grid-item, .color-chip {
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background-color: #f4f4f4;
}

.img-product, .grid-item img, .color-chip img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ============================================================
   4. 各種パーツ（カルーセル・グリッド・ボタン）
   ============================================================ */
.carousel-container { width: 100%; margin-bottom: 25px; }
.carousel-slider { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.carousel-slider::-webkit-scrollbar { display: none; }
.carousel-item { flex: 0 0 100%; scroll-snap-align: start; }
.carousel-dots { display: flex; justify-content: center; gap: 8px; margin-top: 15px; }
.carousel-dots span { width: 6px; height: 6px; border-radius: 50%; background-color: #ccc; }
.carousel-dots span:first-child { background-color: #333; }

.img-grid-pure { display: flex; gap: 8px; width: 100%; }
.grid-item { flex: 1; transition: opacity 0.3s ease; }
.grid-item:hover { opacity: 0.8; }

.description { margin-bottom: 20px; color: #333; line-height: 1.7; font-size: 14px; margin-top: 20px; }
.size-list { font-size: 14px; color: #555; letter-spacing: 0.02em; }
.credit-item { display: flex; justify-content: space-between; align-items: center; padding-bottom: 10px; }
.item-name { font-size: 14px; font-weight: bold; }
.buy-btn { background: #000; color: #fff !important; text-decoration: none; padding: 4px 15px; border-radius: 20px; font-size: 10px; display: inline-block; transition: background 0.3s; }

/* ============================================================
   5. COLOR セクション (リスト & BUYボタン)
   ============================================================ */
.color-list { margin-top: 30px; display: flex; flex-direction: column; gap: 20px; }
.color-item { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #eee; padding-bottom: 15px; }
.color-link-wrapper { display: flex; align-items: flex-start; gap: 15px; text-decoration: none; color: inherit; flex: 1; }
.color-chip { width: 70px; flex-shrink: 0; }
.color-info { display: flex; flex-direction: column; gap: 4px; padding-top: 10px; }
.color-name { font-size: 13px; font-weight: bold; color: #000; letter-spacing: 0.05em; }

/* ============================================================
   6. FINAL FOOTER
   ============================================================ */
.final-footer { width: 100%; padding: 60px 0 0px; position: relative; margin-top: 100px; }
.footer-upper { display: flex; justify-content: space-between; align-items: flex-start; max-width: 500px; margin: 0 auto; padding: 0 20px; position: relative; }
.footer-nav { display: flex; flex-direction: column; gap: 15px; }
.nav-item { text-decoration: none; color: #000; font-size: 18px; font-weight: 500; }
.back-to-top { position: absolute; right: 20px; top: 0; }
.back-to-top a { text-decoration: none; color: #000; font-size: 16px; writing-mode: vertical-rl; display: block; }
.footer-bottom { text-align: center; margin-top: 80px; }
.copyright { font-size: 12px; color: #000; }

/* ============================================================
   7. PC用レスポンシブ (960px以上)
   ============================================================ */
@media screen and (min-width: 960px) {
    .container {
        flex-direction: row;
    }

    .sidebar {
        width: 50%;
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
    }

    .sidebar-inner {
        height: 100%;
        aspect-ratio: initial;
    }

    .content {
        width: 50%;
        margin-left: 50%;
        padding: 100px 10px 20px;
    }

    .style-unit {
        margin-bottom: 150px;
    }

    .style-unit.no-top-margin {
        margin-top: -100px;
    }

    .img-grid-pure {
        gap: 12px;
    }

    .color-chip {
        width: 85px;
    }

    .final-footer .footer-upper {
        max-width: 500px;
    }
}