@charset "UTF-8";

/* ==================================================
General & Base Layout
================================================== */
.pane-contents.freespace5 {
    background: #FBF8F0;
    background-image: url('https://etretokyo.jp/img/usr/static/preorder/2026winter/page/bg.png?ver=1.1');
    background-repeat: no-repeat;
    background-size: cover;
}

#freespace5-edit-wrap {
    margin: 0 auto;
    background: transparent;
}

.pane-contents,
.pane-main {
    max-width: 100vw;
}

.container {
    width: 100vw;
}

.block-category-nav {
    max-width: 1080px;
    margin: 0 auto;
}

.block-category-main {
    max-width: 1080px;
    margin: 0 auto;
}

section#space4 {
    background: #fff;
}

#page-body {
    max-width: 1080px;
}

.none {
    display: none;
}

.flex {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
}

.flex-item {
    flex-shrink: 0;
}

.gap-30 {
    column-gap: 30px;
    row-gap: 15px;
}

.gap-13 {
    gap: 13px;
}

.gap-8 {
    gap: 8px;
}

.gap-4 {
    gap: 4px;
}

.m-auto {
    margin-right: auto;
    margin-left: auto;
}


/* font */
.ivyOra {
    font-family: "ivyora-display", serif;
    font-weight: 400;
    font-style: normal;
}

.nothing {
    font-family: "Nothing You Could Do", cursive;
    font-weight: 400;
    font-style: normal;
}

.noto-serif-jp {
    font-family: "Noto Serif JP", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}


/* ==================================================
Page Head Custom
================================================== */
/* --- PC Style --- */
.bread {
    text-align: left;
    margin-top: 0;
    padding-top: 15px;
}

#head-title {

    .txt-title {
        font-size: min(5.8vw, 52px);
        letter-spacing: 0.08em;
    }

    .txt-subtitle {
        font-size: min(3.5vw, 31.5px);
    }

    .txt-date {
        font-size: min(2vw, 18px);
    }
}


h2.block-category--hn {
    display: none !important;
}

h2.h1.block-event-page--header {
    display: none !important;
}


#page-head.js-headHide {
    display: none;
}

/* --- SP Style --- */
@media screen and (max-width: 768px) {

    h2.h1.block-event-page--header {
        display: none !important;
    }

}


/* ==================================================
Main Contents Area
================================================== */
/* --- PC Style --- */
/* 記事・ギャラリー共通 */
.section-wrap {
    width: 90%;
    max-width: 900px;
    margin: 0 auto;
}

.articleSet {
    margin-bottom: 10px;
    width: 30%;

    .thumb-image {
        transition: all 0.3s;

        &:hover {
            opacity: 0.8;
        }
    }
}

.season-txt {
    text-align: right;
    font-size: min(6.5vw, 60px);
    line-height: 0.8;
    color: #961A1A;
}

.item-list {
    text-align: left;
    font-size: min(1.3vw, 14px);
    white-space: nowrap;
}

.list-number {
    text-align: left;
    font-size: min(1.8vw, 16px);
}

/* ナビゲーション */
.nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    gap: 60px;
    padding: 40px 20px;
}

.nav a {
    text-decoration: none;
    color: #000;
    font-size: 18px;
    letter-spacing: 0.15em;
    display: inline-block;
    position: relative;
    padding-bottom: 8px;
    padding-right: 8px;
    min-width: 120px;
    text-align: center;
}

.nav a::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    border-bottom: 1px solid #000;
    border-right: 1.5px solid #000;
    height: 6px;
    transform: skewX(60deg);
    transform-origin: bottom right;
}

.edit-format .nav a:visited {
    color: #000;
}

/* 詳細ページ共通 */
.model-image {
    width: 33.3%;
}

.item-image {
    width: 47%;
}

.m-l-auto {
    margin-left: calc(50% - 13%);
}

.txt-image {
    width: 5.6%;
}

.collage-texture {
    width: 100%;
    height: 100px;
    position: relative;

    & img {
        width: 28%;
        position: absolute;
        top: -223%;
        left: calc(50% - 33%);
    }
}

.item-name {
    width: 80%;
    text-align: left;
    font-size: min(7vw, 75px);
    line-height: 0.9;
    position: relative;
}

.popSet06 .item-name {
    line-height: 1.1;
}

.item-name-ab {
    position: absolute;
    top: -420px;
    left: -2%;
}

/* 詳細テキストエリア */
.txt {
    width: 500px;
    text-align: justify;
    font-size: 16px;
}

/* スタイリングエリア */
.styling-area {
    width: 95%;
}

.styling-image {
    width: 49%;
}

/* チェックボタン */
.check-btn {
    appearance: none;
    background: transparent;
    border: none;
    border-bottom: 2px solid;
    font-size: 34px;
    padding: 0 20px;
    color: inherit;
    cursor: pointer;
    border-radius: 0;
}

/* --- SP Style --- */
@media screen and (max-width: 768px) {

    /* 記事・ギャラリー共通 */
    .season-txt {
        font-size: 6.2vw
    }

    /* ナビゲーション */
    .nav ul {
        gap: 28px;
        padding: 20px 10px 40px;
    }

    .nav a {
        font-size: 11px;
        min-width: 70px;
        padding-bottom: 4px;
        padding-right: 4px;
    }

    /* 詳細ページ共通 */
    .m-l-auto {
        margin-left: calc(50% - 9%);
    }

    .collage-texture {
        width: 100%;
        height: 100px;
        position: relative;

        & img {
            width: 28%;
            position: absolute;
            top: -74%;
            left: calc(50% - 33%);
        }
    }

    .item-name {
        font-size: 9vw;
    }

    .item-name-ab {
        top: -200px;
        left: calc(50% - 55%);
    }

    /* 詳細テキストエリア */
    .txt {
        width: 285px;
        font-size: 11px;
    }

    /* チェックボタン */
    .check-btn {
        border-radius: 0;
        font-size: 20px;
        padding: 0 10px;
    }

}

/* ==================================================
Popup Modal Area
================================================== */
/* --- PC Style --- */

/* 1. モーダル全体（画面幅も高さもいっぱいに固定・通常時はクリック透過） */
.popupArea {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    z-index: 99999;
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.4s ease-in, visibility 0.4s ease-in;
}

/* アクティブ時の全体表示設定（クリックを有効化） */
.js-modalOn .popupArea {
    z-index: 10000;
    visibility: visible;
    opacity: 1;
    transition: opacity 0.4s ease-out, visibility 0.4s ease-out;
}
/* モーダル表示時、下のスクロールを停止 */
body.js-modalOn {
    overflow: hidden
}

.popupArea:has(.js-popupOn) {
    pointer-events: auto;
}

/* 3. 各商品ごとのセット（画面いっぱいに広げる） */
.popupArea .popupSet {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
}

.popupArea .popupSet.js-popupOn {
    display: block !important;
}

/* 4. 白枠コンテナ（画面幅90%・中央配置・この中をスクロールさせる） */
.popupArea .popupWrapSet {
    background: #FBF8F0;
    box-sizing: border-box;

    /* 画面中央寄せの指定 */
    position: absolute;
    top: 140px;
    left: 50%;
    transform: translateX(-50%);

    /* サイズ指定 */
    width: 90% !important;
    max-width: 900px;
    max-height: calc(100dvh - 140px);

    /* スクロールを有効にするための必須設定 */
    overflow-y: auto;
    overscroll-behavior: contain;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    z-index: 10;
    background-image: url('https://etretokyo.jp/img/usr/static/preorder/2026winter/page/bg.png?ver=1.1');
    background-attachment: local;
    background-repeat: no-repeat;
    background-size: cover;
}

/* 5. 閉じる（×）ボタン（白枠に対して右上に固定） */
.popupArea .js-popupClose {
    font-size: 0;
    width: 35px;
    height: 35px;
    position: sticky;
    left: 95%;
    top: 10px;
    cursor: pointer;
    z-index: 100;

    &::before,
    &::after {
        content: "";
        height: 1px;
        width: 35px;
        display: block;
        background: #292929;
        position: absolute;
        top: 50%;
        left: 0;
        transform: rotate(-45deg);
    }

    &::after {
        transform: rotate(45deg);
    }
}


/* --- SP Style --- */
@media screen and (max-width: 768px) {
    .popupArea .popupWrapSet {
        width: 100% !important;
        top: 58px;
        max-height: calc(100vh - 58px);
    }

    .popupArea .js-popupClose {
        top: 10px;
        right: 10px;
    }
}


/* ==================================================
Pagination Arrows (ページネーション矢印)
================================================== */
/* --- PC Style --- */
.custom-arrow {
    display: none;
    position: fixed;
    top: 65%;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 100000;
    width: 40px;
    height: 40px;
    outline: none;
}

.custom-arrow::before {
    content: "";
    position: absolute;
    top: 10px;
    left: 10px;
    width: 20px;
    height: 20px;
    border-top: 1px solid #292929;
    border-right: 1px solid #292929;
    transition: border-color 0.2s ease;
}

/* モーダル表示中だけ矢印を出現させる */
.popupArea:has(.js-popupOn) .custom-arrow {
    display: block;
}

.custom-arrow.prev {
    left: calc(50% - 45%);
}

.custom-arrow.prev::before {
    transform: rotate(-135deg);
}

.custom-arrow.next {
    right: calc(50% - 45%);
}

.custom-arrow.next::before {
    transform: rotate(45deg);
}

/* --- SP Style --- */
@media screen and (max-width: 768px) {
    .custom-arrow {
        top: 50%;
    }

    .custom-arrow.prev {
        left: 0;
    }

    .custom-arrow.next {
        right: 0;
    }
}

/* --- OVER 1000px Style --- */
@media screen and (min-width: 1000px) {
    .custom-arrow.prev {
        left: calc(50% - 480px);
    }

    .custom-arrow.next {
        right: calc(50% - 480px);
    }
}

/* ==================================================
CSS Animations (Fade In)
================================================== */
/* アニメーションはPC・SP共通（分岐不要なため統合） */
.imgFade {
    opacity: 0;
}

.imgAnim {
    animation: imgAnim 1.6s forwards;
}

@keyframes imgAnim {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
        transform: translate(0);
    }
}

/* 各種方向へのフェード */
.imgFade.fadeT {
    transform: translateY(50px);
    position: relative;
    z-index: 5;
}

.imgFade.fadeR {
    transform: translateX(50px);
    position: relative;
    z-index: 5;
}

.imgFade.fadeL {
    transform: translateX(-50px);
    position: relative;
    z-index: 5;
}

.imgAnim.fadeT,
.imgAnim.fadeR,
.imgAnim.fadeL {
    animation-duration: 1.4s;
}