@charset "utf-8";

/* 全体設定 ここから */
#fs_ProductSearch .fs-l-main,
#fs_PageNotFound .fs-l-main,
#fs_StoreClosed .fs-l-main,
#fs_AboutTerms .fs-l-main,
#fs_PrivacyPolicy .fs-l-main,
#fs_ReturnPolicy .fs-l-main,
#fs_MemberAgreement .fs-l-main,
#fs_AboutPoints .fs-l-main,
#fs_CustomPage .fs-l-main,
#fs_WriteReview .fs-l-main,
#fs_ReviewSuccess .fs-l-main,
#fs_ReviewsByProduct .fs-l-main,
#fs_Reviews .fs-l-main,
#fs_ReviewsByCustomer .fs-l-main,
#fs_MyReviews .fs-l-main,
#fs_MyCoupons .fs-l-main,
#fs_MyWishList .fs-l-main {
    margin: 0 0 0 0 !important;
}

#fs_CustomPage {
    background-color: #eee !important;
}

.fs-l-main,
.fs-l-pageMain {
    width: 100vw !important;
}

#fs_CustomPage > div.fs-l-page > main > h2 {
    display: none;
}

#fs_CustomPage > div.fs-l-page > main > section {
    margin-top: -6rem;
}

#fs_PageNotFound .fs-l-pageMain, #fs_StoreClosed .fs-l-pageMain, #fs_AboutTerms .fs-l-pageMain, #fs_PrivacyPolicy .fs-l-mpageMainain, #fs_ReturnPolicy .fs-l-pageMain, #fs_MemberAgreement .fs-l-pageMain, #fs_AboutPoints .fs-l-pageMain, #fs_CustomPage .fs-l-pageMain, #fs_WriteReview .fs-l-pageMain, #fs_ReviewSuccess .fs-l-pageMain, #fs_ReviewsByProduct .fs-l-pageMain, #fs_Reviews .fs-l-pageMain, #fs_ReviewsByCustomer .fs-l-pageMain, #fs_PrivacyPolicy .fs-l-pageMain, #form_container .fs-l-pageMain {
    padding: 0 0 !important;
}
/* 全体設定 ここまで */

/* メイン画像 ここから */
.top_image {
    background-image: url(https://icestore.itembox.design/item/images/christmas2024/top_image/pc_main01.jpg);
    width: 100%;
    padding-top: 35.4167%;
    position: relative;
    background-size: contain;
    background-clip: border-box;
}

/* メイン画像 ここまで */

/* キャッチコピー ここから */
.catchcopy {
    width: auto;
    text-align: center;
    padding-bottom: 8rem;
}

.catchcopy-image {
    background-image: url(https://icestore.itembox.design/item/images/christmas2024/catchcopy_background.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: 220px;
}

.catchcopy-text {
    padding-top: 28rem;
    max-width: 800px;
    margin: 0 auto;
    color: #000;
}

.catchcopy-text h2 {
    font-size: 5rem;
    letter-spacing: 0.2rem;
    line-height: 4rem;
    font-family: 'IceWatch-Bold';
}

.catchcopy-text p {
    margin: 5rem auto;
    font-weight: 600;
    font-size: 1.7rem;
    line-height: 4rem;
    letter-spacing: 0.1rem;
}

/* キャッチコピー ここまで */

/* カテゴリー ここから */
.category {
    max-width: 720px;
    margin: 38rem auto 0;
    text-align: center;
}

.category-list {
    display: grid;
    grid-template-rows: 16rem 16rem;
}

.category h3 {
    font-size: 2rem;
    font-weight: 700;
    margin: 0 auto 3rem;
}

.category ul {
    display: flex;
    justify-content: space-between;
}

.category button {
    font-weight: 600;
    letter-spacing: 0.3rem;
    color: #fff;
    background-color: #000000;
    border: none;
    border-radius: 99rem;
    text-align: center;
    display: inline-block;
    cursor: pointer;
    width: auto;
}

.category button:hover {
    background-color: #ff6720;
    display: inline-block;
}

/* 贈る相手から選ぶ */
.person ul button {
    padding: 1.5rem 5rem;
}

/* 予算から選ぶ */
.price ul button {
    padding: 1.5rem 5rem;
}

/* コレクションから選ぶ */
.collection ul button {
    padding: 1.5rem 4rem;
}

.all-collection {
    margin-top: 6rem;
    margin-left: auto;
    margin-right: auto;
}

.all-collection button {
    padding: 1.5rem 5rem;
    font-size: 1.5rem;
    letter-spacing: 0.2rem;
}

/* カテゴリー ここまで */

/* おすすめ商品 ここから */
.reccomend {
    margin-top: 6rem;
    text-align: center;
}

.title-area {
    max-width: 1080px;
    margin: 0 auto;
    padding-top: 4rem;
    text-align: left;
}

.theme {
    color: #fff;
    margin-top: 1rem;
}

.theme h3 {
    font-family: 'IceWatch-Bold';
    font-size: 3rem;
    letter-spacing: 0.1em;
    margin-bottom: 0.5rem;
}

.theme p {
    letter-spacing: 0.1em;
    font-weight: 700;
}

/* スライダー */
.slider {
    margin-top: 3.5rem;
}

.slider-list {
    margin: 0 0.3rem;
    float: left;
    width: auto;
    height: auto;
    background: #FFF;
    border-radius: 2rem;
    text-align: left;
}

.slider li img {
    width: 80%;
    height: auto;
    margin: 2rem auto;
}

.slider dl {
    text-align: left;
    margin: 0 1rem;
}

.slider dt {
    font-weight: 700;
    font-family: 'IceWatch-Bold';
    font-size: 1.5rem;
}

.slider dd {
    font-size: 0.9em;
    line-height: 1.5em;
    margin-top: 0.5rem;
}

.buy-button {
    font-weight: 700;
    letter-spacing: 0;
    color: #fff;
    background-color: #000;
    border: none;
    border-radius: 99rem;
    display: block;
    cursor: pointer;
    padding: 1rem 8rem;
    margin: 1.5rem auto;
}

.buy-button:hover {
    background-color: #ff6720;
}

/* もっと見るボタン */
.view-all-button {
    font-weight: 700;
    font-size: 1.3em;
    letter-spacing: 0.1rem;
    margin-top: 4rem;
    margin-bottom: 5rem;
    color: #fff;
    background-color: #000;
    border: none;
    border-radius: 99rem;
    padding: 1.5rem 5rem;
    cursor: pointer;
    letter-spacing: 0.2rem;
}

.view-all-button:hover {
    background-color: #ff6720;
}

/* レディース背景色 */
.ladies {
    background-color: #B40E1F;
}

/* メンズ背景色 */
.mens {
    background-color: #1C2657;
}

/* キッズ背景色 */
.kids {
    background-color: #ecc93b;
}

/* ペア背景色 */
.pair {
    background-color: #fa7426;
}

/* おすすめ商品 ここまで */

/* ランキング ここから */
.ranking {
    background: #000;
    text-align: center;
    padding-top: 4rem;
}

.ranking h2 {
    color: #fff;
    font-size: 3rem;
    letter-spacing: 0.1em;
    line-height: 4rem;
    font-family: 'IceWatch-Bold';
    margin-bottom: 2rem;
}

.ranking-list {
    max-width: 1080px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 26rem 26rem;
}

.ranking-list li {
    margin: 0 0.5rem 1rem;
    background: #FFF;
    border-radius: 1.5rem;
    text-align: center;
}

.ranking ul li img {
    width: 70%;
}

.ranking-numebr {
    position: relative;
}

.ranking-1 {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    font-weight: 700;
    color: #fff;
    background: #CDA046;
    text-align: center;
    line-height: 2.5rem;
    position: absolute;
    margin-top: 0.5rem;
    margin-left: 1rem;
    z-index: 999;
}

.ranking-2 {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    font-weight: 700;
    color: #000;
    background: #CBD6E4;
    text-align: center;
    line-height: 2.5rem;
    position: absolute;
    margin-top: 0.5rem;
    margin-left: 1rem;
    z-index: 999;
}

.ranking-3 {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    font-weight: 700;
    color: #fff;
    background: #A15B2D;
    text-align: center;
    line-height: 2.5rem;
    position: absolute;
    margin-top: 0.5rem;
    margin-left: 1rem;
    z-index: 999;
}

.ranking-lower {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    font-weight: 700;
    color: #000;
    background: #ccc;
    text-align: center;
    line-height: 2.5rem;
    position: absolute;
    margin-top: 0.5rem;
    margin-left: 1rem;
    z-index: 999;
}

.ranking .view-all-button {
    background: #fff;
    color: #000;
    padding: 1.5rem 5rem;
    font-size: 1.5rem;
    letter-spacing: 0.2rem;
}

.ranking .view-all-button:hover {
    background: #ff6720;
    color: #fff;
}

/* ランキング ここまで */

/* 紹介 ここから */

.introduce {
    padding: 4rem 0;
}

/* ギフトラッピング */
.gift {
    margin: 0 auto;
    max-width: 1080px;
}

.gift-container {
    max-width: 960px;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 2rem;
}

.gift-introduction {
    max-width: 880px;
    height: auto;
    margin: 0 auto;
    display: flex;
    align-items: center;
    padding: 2rem 0;
}

.gift-textarea {
    text-align: left;
    margin-left: 2rem;
    margin-top: 2.5rem;
    margin-bottom: 3rem;
}

.gift-textarea h3 {
    font-weight: 700;
    font-size: 2rem;
}

.gift-textarea p {
    margin-top: 1rem;
    line-height: 2.5rem;
    font-weight: 600;
}

.gift-introduction img {
    width: 22rem;
    height: auto;
    border-radius: 1rem;
}

/* ブランド紹介 */
.brand {
    margin-top: 2.5rem;
}

.brand-container {
    max-width: 960px;
    margin: 0 auto;
    background-color: #000;
    color: #fff;
    border-radius: 2rem;
}

.brand-introduction {
    max-width: 880px;
    height: auto;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.brand-textarea h3 {
    font-weight: 700;
    font-size: 2rem;
    text-align: center;
    padding-top: 3rem;
}

.brand-textarea p {
    text-align: left;
    margin-top: 2.5rem;
    margin-bottom: 3rem;
    line-height: 2.5rem;
    font-weight: 600;
}

/* 紹介 ここまで */

/* spレスポンシブ ここから */
@media (max-width:550px) {

    /* メイン画像 ここから */
    .top_image {
        background-image: url(https://icestore.itembox.design/item/images/christmas2024/top_image/sp_main01.jpg);
        width: 100%;
        padding-top: 113.3333%;
        position: relative;
        background-size: contain;
        background-clip: border-box;
    }

    /* メイン画像 ここまで */

    /* キャッチコピー ここから */
    .catchcopy-image {
        background-image: url(https://icestore.itembox.design/item/images/christmas2024/sp_catchcopy_background.png);
        height: 86px;
    }

    .catchcopy-text {
        padding-top: 12rem;
    }

    .catchcopy-text h2 {
        font-size: 3rem;
        letter-spacing: 0.2rem;
    }

    .catchcopy-text p {
        max-width: 90%;
        font-size: 1.3rem;
        line-height: 2.5rem;
    }

    /* キャッチコピー ここまで */

    /* カテゴリー ここから */
    .category {
        max-width: 100%;
        margin-top: 30rem;
    }

    .category h3 {
        font-size: 1.5rem;
        margin: 0 auto 2rem;
    }

    .category-list {
        display: grid;
        grid-template-rows: 30rem 30rem;
    }

    .category ul {
        justify-content: flex-start;
    }

    /* 贈る相手・予算・コレクションから選ぶ */
    .person ul li,
    .price ul li,
    .collection ul li {
        margin: 0.3rem;
    }

    .person ul,
    .price ul,
    .collection ul {
        display: flex;
        flex-direction: column;
    }

    .person ul button,
    .price ul button,
    .collection ul button {
        padding: 1.5rem 0;
        width: 90%;
    }

    .all-collection {
        margin-top: 3rem;
        width: 90%;
    }

    .all-collection button {
        font-size: 1.1em;
        letter-spacing: 0;
        width: 100%;
    }
    /* カテゴリー ここまで */

    /* おすすめ商品 ここから */
    .reccomend {
        margin-top: 4rem;
    }

    .title-area {
        max-width: 90%;
        padding-top: 2rem;
    }

    .theme h3 {
        font-size: 2.5rem;
        letter-spacing: 0;
    }

    /* スライダー */
    .slider-list {
        margin: 0 0.5rem;
        border-radius: 1.5rem;
    }

    .slider li img {
        width: 100%;
        height: auto;
        border-radius: 2rem;
        margin-top: 0.5rem;
    }

    .buy-button {
        width: 90%;
        height: 4rem;
        padding: inherit;
        margin: 1rem auto;
    }

    .view-all-button {
        font-size: 1.1em;
        width: 90%;
        margin: 2.5rem auto;
    }

    /* おすすめ商品 ここまで */

    /* ランキング ここから */
    .ranking {
        padding-top: 2rem;
    }

    .ranking h2 {
        font-size: 2rem;
    }

    .ranking-list {
        max-width: 90%;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 18rem 18rem 18rem;
        margin-top: -1rem;
    }

    .ranking-list li {
        margin: 0 0.3rem 1rem;
        border-radius: 1rem;
    }

    .ranking ul li img {
        width: 80%;
        border-radius: 0rem;
    }

    .ranking ul li p,
    .sp-none {
        display: none;
    }

    .ranking-1,
    .ranking-2,
    .ranking-3,
    .ranking-lower {
        width: 1.5rem;
        height: 1.5rem;
        font-size: 0.8rem;
        line-height: 1.5rem;
        margin-left: 0.3rem;
    }

    .ranking .view-all-button {
        font-size: 1.1em;
        letter-spacing: 0;
        width: 90%;
        margin: 0rem auto 2.5rem;
    }

    /* ランキング ここまで */

    /* 紹介 ここから */
    .introduce {
        padding: inherit;
    }

    /* ギフトラッピング */
    .gift {
        margin: 4rem auto 0;
        max-width: 90%;
    }

    .gift-container {
        max-width: 100%;
        border-radius: 1.5rem;
        margin: 0 auto;
    }

    .gift-introduction {
        display: flex;
        flex-direction: column;
    }

    .gift-introduction img {
        width: 60%;
        height: auto;
    }

    .gift-textarea {
        max-width: 90%;
        margin: 0 auto;
    }

    .gift-textarea h3 {
        margin: 1.5rem auto;
        text-align: center;
    }

    .gift-textarea p {
        line-height: 1.8rem;
        letter-spacing: 0;
        margin-bottom: 1.5rem;
    }


    /* ブランド紹介 */
    .brand {
        margin: 2rem auto;
        max-width: 90%;
    }

    .brand-container {
        max-width: 100%;
        border-radius: 1.5rem;
    }

    .brand-introduction {
        display: flex;
        flex-direction: column;
    }

    .brand-textarea h3 {
        padding-top: 1rem;
    }

    .brand-textarea {
        margin: 1.5rem auto;
        width: 90%;
    }

    .brand-textarea p {
        line-height: 1.8rem;
        letter-spacing: 0;
        margin-bottom: 0;
    }
}

/* spレスポンシブ ここまで */

/* タブレットレスポンシブ ここから */
@media (min-width: 550px) and (max-width: 1024px) {
    /* 全体設定 */
    .fs-l-page .fs-l-main {
        padding: 6rem 0 0 !important;
    }
    /* 全体設定 */


    /* メイン画像 ここから */
    .catchcopy-image {
        background-image: url(https://icestore.itembox.design/item/images/christmas2024/catchcopy_background.png);
        height: 120px;
    }
    /* メイン画像 ここまで */

    /* キャッチコピー ここから */
    .catchcopy-text h2 {
        margin-top: -10rem;
        font-size: 4rem;
    }

    .catchcopy-text p {
        max-width: 80%;
        line-height: 2.5em;
    }
    /* キャッチコピー ここまで */

    /* カテゴリー ここから */
    .category {
        max-width:80%;
        margin: 34rem auto 0;
    }

    .category h3 {
        font-size: 1.5rem;
        margin: 0 auto 2rem;
    }

    .category-list {
        display: grid;
        grid-template-rows: 12rem 12rem;
    }

    /* 贈る相手・予算・コレクションから選ぶ */
    .person ul li,
    .price ul li,
    .collection ul li {
        margin: 0.3rem;
    }

    .person ul button {
        padding: 1.3rem 4.5rem;
    }

    .price ul button {
        padding: 1.3rem 4rem;
    }

    .collection ul button {
        padding: 1.3rem 3rem;
    }

    .all-collection {
        margin-top: 4rem;
    }

    .all-collection button {
        font-size: 1.5em;
        letter-spacing: 0;
    }
    /* カテゴリーここまで */

    /* おすすめ商品 ここから */
    .title-area {
        max-width: 80%;
        padding-top: 2.5rem;
    }

    .theme h3 {
        font-size: 2.5rem;
    }

    /* スライダー */
    .slider li img {
        width: 90%;
    }

    .buy-button {
        padding: 1rem 8rem;
    }

    /* もっと見るボタン */
    .view-all-button {
        margin-top: 3rem;
        margin-bottom: 4rem;
    }

    /* おすすめ商品 ここまで */

    /* ランキング ここから */
    .ranking-list {
        max-width: 90%;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-template-rows: 28rem;
    }

    .ranking ul li img {
        width: 90%;
        border-radius: 0.5rem;
    }

    .tb-none,
    .sp-none {
        display: none;
    }

    .ranking-1,
    .ranking-2,
    .ranking-3,
    .ranking-lower {
        line-height: 2.5em;
        margin-left: 0.5rem;
    }

    .ranking .view-all-button {
        margin-top: 1.5rem;
        letter-spacing: 0;
    }

    /* ランキング ここまで */

    /* ギフトラッピング */
    .gift,
    .brand-container {
        max-width: 95%;
    }

    .gift-introduction {
        max-width: 90%;
    }

    /* ブランド紹介 */
    .brand-introduction {
        max-width: 90%;
    }

    .brand-textarea h3 {
        padding-top: 2rem;
    }    

    .brand-textarea p {
        margin-top: 2rem;
        letter-spacing: 0;
        line-height: 1.5em;
    }
}