@charset "utf-8";
/*------------------------------------------------------------------------------
共通
 -------------------------------------------------------------------------------*/
body{
    margin: 0;
    padding: 0;
    font-family: noto-sans-cjk-jp, sans-serif;
    font-weight: 400;
    font-style: normal;
    background: url(../img/bg.webp) repeat center center;
}
main,footer{
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    img{
        width: 100%;
    }
}
section,.footer-bg{
    width: 100%;
    background: #fdfdfd url(../img/bg03.webp) repeat center center;
    margin-top: -2px;
    &:nth-of-type(2){
        background: url(../img/bg02.webp) repeat center center;
        padding: 0 0 100px;
    }
    &:nth-of-type(3){
        background: #f3dae5 url(../img/bg03.webp) repeat center center;
        padding: 0 0 200px;
    }
}

.footer-bg {
    position: relative;
    background: unset;
    background-color: #54363f;
}

a{
    text-decoration: none;
}
.section_inner,.footer_inner{
    max-width: 90%;
    margin: 0 auto;
     p,ul{
        font-size: clamp(12px, 3.86vw, 18px);
        line-height: 160%;
        letter-spacing: -0.02rem;
        color: #54363f;
    }
}
.footer_inner{
     p,ul{
        font-size: clamp(12px, 3.86vw, 18px);
        line-height: 160%;
        letter-spacing: -0.02rem;
        color: #fff;
    }
}
.section_wrapper{
    max-width: 81.82%;
    padding: 0 20px;
    margin: 0 auto;
}
.section_box,.footer_box{
    position: relative;
    margin-bottom: 24px;
    &::before{
        content: '';
        width: 29.5px;
        height: 27px;
        background: url(../img/star.webp) no-repeat center center/contain;
        position: absolute;
        top: -1px;
        left: 0;
    }
    >h3{
        border-bottom: 2px dotted #de4b1e;
        padding: 0px 0px 10px 34px;
        font-family: "Noto Serif JP", serif;
        font-weight: bold;
        color: #54363f;
        font-size: clamp(20px, 4.83vw, 24px);
        margin-bottom: 10px;
    }
}

.footer_box{
    &::before{
        background: url(../img/star_white.webp) no-repeat center center/contain;
    }
}
.footer_box h3{
    color: #fff;
    border-bottom: 2px dotted #fff;
}
#new-goods h3{
    margin-bottom: 22px;
}
@media all and (max-width:820px){
    #new-goods h3{
        margin-bottom: 4%;
    }
}
.text-lg{
    /* font-size: clamp(28px, 7.24vw, 36px); */
    font-size: clamp(20px, 6.24vw, 36px);
    font-weight: 700;
    letter-spacing: -0.02rem;
}
.text-lg-2{
    font-size: clamp(20px, 5.31vw, 25px);
}
.text-orange{
    color: #de4b1e;
}
.text-yellow{
    color: #fff17d;
}
.text-5{
    font-weight: 500;
}
.text-circle {
    background-color: #de4b1e;
    padding: 3px;
    border-radius: 50%;
}
.mg-btm {
    margin-bottom: 50px;
}
.display_sp{
    display: none;
}
.display_sp_02{
    display: none;
}
.display_sp_03{
    display: none;
}
.note{
    font-size: clamp(11px, 3.38vw, 15px);
}
@media all and (max-width:1000px) {
    .display_sp_03{
        display: block;
    }
}
@media all and (max-width:820px) {
    .display_sp{
        display: block;
    }
    .display_pc_02 {
        display: none;
    }
    section {
        margin-top: -1px;
    }
    section,.footer-bg{
        &:nth-of-type(2){
            padding: 8% 0 16%;
        }
        &:nth-of-type(3){
            padding: 8% 0 32%;
        }
    }
}
@media all and (max-width:768px){
    .display_pc{
        display: none;
    }
}
@media all and (max-width:520px) {
    .display_sp_02{
        display: block;
    }
}
/*------------------------------------------------------------------------------
 MV部分
 -------------------------------------------------------------------------------*/
 #mv{
    position: relative;
    overflow: hidden;
    >h1{
        max-width: min(64.1vw, 641px);
        position: absolute;
        top: 3%;
        left: -4.5%;
    }
    >div:nth-of-type(1){
        max-width: min(47.8vw, 478px);
        position: absolute;
        top: 67%;
        left: 4%;
    }
    >div:nth-of-type(2){
        max-width: 399px;
        position: absolute;
        top: 640px;
        left: 70px;
    }
    &::after{
        display: none;
    }
 }
 .fadein{
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
}
 .fadein.show{
    opacity: 1;
 }
 .fish-img{
    position: absolute;
    top: 31.6%;
    left: 49.5%;
    width: min(9.4vw, 94px);
    z-index: 999;
 }
/*------------------------------------------------------------------------------
 サイドバー
 -------------------------------------------------------------------------------*/
.sidebar{
    width: 280px;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    background: #f3dae5;
    transform: translateX(-280px);
    transition: transform 0.3s ease-in-out;
}
 @media all and (max-width:820px) {
    #mv{
    >h1{
        max-width: unset;
        width: min(101.46vw,832px);
        top: 41%;
        left: 50%;
        transform: translateX(-50%);
        }
        >div:nth-of-type(1){
            max-width: 750px;
            width: min(750 / 820 * 100vw, 750px);
            top: 79%;
            left: 4.4%;
        }
        >div:nth-of-type(2){
            max-width: 560px;
            width: min(560 / 820 * 100vw, 560px);
            top: 86.6%;
            left: 15.5%;
        }
    }
 }

/*------------------------------------------------------------------------------
 キャンペーン詳細
 -------------------------------------------------------------------------------*/
.list_nav{
    list-style: none;
    display: flex;
    width: 100%;
    padding: 10px 0;
    background-color: #54363f;
    border-top: 3px solid #c6ac77;
    border-bottom: 3px solid #c6ac77;
    >li{
        display: flex;
        align-items: center;
        justify-content: space-around;
        width: 333px;
        height: 60px;
        border-right: 2px dotted #d5ced0;
        &:last-of-type{
            border-right: none;
        }
         .arrow {
            position: relative;
            display: inline-block;
            width: 21px;
            height: 12.5px;
            }
            .arrow::before,
            .arrow::after {
            content: "";
            position: absolute;
            bottom: 2px;
            right: 0;
            width: 3px;
            height: 16px;
            border-radius: 9999px;
            background-color: #bbafb2;
            transform-origin: 50% calc(100% - 1.5px);
            }
            .arrow::before {
            transform: rotate(45deg);
            }
            .arrow::after {
            transform: rotate(-45deg);
        }
        >a{
            display: block;
            padding: 10px;
            font-family: "Noto Serif JP", serif;
            color: #fff;
            font-weight: bold;
            font-size: clamp(14px, 4.34vw, 24px);
        }
    }
}
.list_nav .arrow  {
  animation: animationArrowRight 2s ease-in-out infinite;
}
@keyframes animationArrowRight {
  0%,100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}
.ttl_campaign{
    font-family: "Noto Serif JP", serif;
    text-align: center;
    font-weight: bold;
    font-size: clamp(24px, 6.7vw, 40px);
    letter-spacing: 0.02rem;
    color: #de4b1e;
    margin: 40px auto;
    position: relative;
    width: fit-content;
    padding: 40px 80px 0;
    &::before{
        content: '';
        background: url(../img/deco-ttl-campaign.webp) no-repeat center center/100%;
        width: min(100 / 750 * 100vw, 69.5px);
        height: min(64 / 750 * 100vw, 40.5px);
        position: absolute;
        top: 55%;
        left: 0;
    }
    &::after{
        content: '';
        background: url(../img/deco-ttl-campaign.webp) no-repeat center center/100%;
        width: min(100 / 750 * 100vw, 69.5px);
        height: min(64 / 750 * 100vw, 40.5px);
        position: absolute;
        top: 55%;
        right: -1%;
        transform: scale(-1,1);
    }
}
.card_sample{
    max-width: 541px;
    margin: 28px auto 45px;
}
.canpain_lead{
    margin-bottom: 20px;
    >p{
        font-size: clamp(15px, 4.34vw, 24px);
        font-family: "fot-tsukuardgothic-std", sans-serif;
        font-weight: 700;
        font-style: normal;
        color: #30476e;
        letter-spacing: -0.18rem;
        text-align: center;
        line-height: 140%;
        &:last-of-type{
            font-family: noto-sans-cjk-jp, sans-serif;
            font-weight: 700;
            font-style: normal;
            font-size: clamp(12px, 3.38vw, 18px);
            letter-spacing: -0.02rem;
            margin-top: 10px;
        }
    }
}

.notice {
    margin-top: 0.8vw;
    &:last-of-type {
        margin-top: 0;
    }
}

@media all and (max-width:768px) {
    .notice {
        text-align: center;
        margin-top: 3.9vw;
        &:last-of-type {
            margin-top: 0;
        }
        >.text-lg-2 {
            font-size: clamp(12px, 3.86vw, 18px);
        }
        &.notice-small {
            font-size: clamp(12px, 2.56vw, 16px);
        }
    }
}

/* 共通 */
.section_box h4{
    color: #54363f;
    font-family: "fot-tsukuardgothic-std", sans-serif;
    font-size:clamp(17px, 4.3vw, 22px);
    font-weight: 700;
    font-style: normal;
    position: relative;
    padding-left: 20px;
    margin-top: 24px;
    margin-bottom: 10px;
    letter-spacing: -0.1rem;
    >.txt-circle{
        font-size: clamp(14px, 1.6vw, 16px);
        border: 1.8px solid #54363f;
        background-color: #54363f;
        color: #fff;
        border-radius: 50px;
        margin-left: 10px;
        padding: 2px 6px;
    }
    &::before{
        content: '';
        background: url(../img/pair_deco.webp) no-repeat center center/100%;
        width: 16px;
        height: 17px;
        position: absolute;
        top: 4px;
        left: 0;
    }
}

.section_box .margin-adjust {
    margin-top: min(4.8vw,48px);
}

.get_step {
    margin-top: 56px;
    .ttl_step {
        width: min(52.2vw,522px);
        margin: 0 auto;
    }
    ul {
        list-style: none;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        margin-top: 10px;
        .splide__pagination__page {
            width: 6px;
            height: 6px;
            background: #54363f;
            border-radius: 70%;
            border: none;
            padding: 0;
        }
    }
    .splide__list {
        gap: 0;
        .splide__slide {
            width: 200px;
            padding: 0 8px;
        }
    }
    .splide__pagination {
        justify-content: center;
        gap: 16px;
    }
    .splide_display_sp {
        display: none;
    }
    .splide__arrows {
        display: none;
    }
    .splide__pagination__page.is-active {
        background: #de4b1e;
    }
}

@media all and (max-width:768px){
    .get_step {
        margin-top: min(6.25vw, 48px);
        .ttl_step {
            width: min(62.36vw,479px);
        }
    }
    .get_step .splide_display_sp{
        display: block;
        width: 100vw;
        margin-left: calc(50% - 50vw);
    }
    .section_box .margin-adjust {
        margin-top: 24px;
    }
}

.pair_box{
    max-width: 98%;
    height: 200px;
    padding: 2% 2%;
    background-color: #ffffff;
    border:2px solid #54363f;
    border-radius: 10px;
    overflow-y: scroll;
    /* webkit系のみスクロールバーを変更 */
    &::-webkit-scrollbar {
        width: 18px;
    }
    &::-webkit-scrollbar-thumb {
        background-color: #54363f;
        border: 4px solid transparent;
        background-clip: content-box;
        border-radius: 10px;
    }
    >p,ul{
        font-size: clamp(12px, 3.6vw, 16px);
        line-height: 150%;
    }
    >p{
        margin-bottom: 30px;
        font-weight: 700;
        padding-left: 6px;
        &:last-of-type{
            margin-bottom: 0;
        }
    }
    >ul{
        margin: 0;
        padding: 0 0 0 2.2%;
    }
    li{
        padding-left: 10px;
        letter-spacing: -0.02rem;
        text-indent: -0.6rem;
        &::marker{
            font-size: 0.8em;
        }
    }
     >.mg-0{
        margin-bottom: 0;
        font-weight: 400;
     }
}
.notes_list{
    padding: 0 2%;
    text-align: justify;
}
.bn_postcard{
    margin: 0 auto;
    max-width: 610px;
    padding-bottom: 88px;
}

@media all and (max-width:820px) {
    .display_sp{
        display: block;
    }
    .list_nav{
        padding: 6% 0 3%;
        >li{
            .arrow::before,
            .arrow::after {
                width: 2px;
                bottom: -2px;
                left: 50%;
                transform-origin: 50% calc(100% - 1px);
            }
            >a{
                text-align: center;
                line-height: 120%;
                width: 100%;
                padding: 2%;
            }
        }
    }
    .canpain_lead{
        >p{
            &:last-of-type{
                margin-top: 6px;
                
            }
        }
    }
    .bn_postcard{
        padding-bottom: min(9.75vw,80px);
    }
}
@media all and (max-width:768px) {
    #mv{
        width: 100%;
    }
    .ttl_campaign{
        margin: 5% auto 6%;
        padding: 5% 15% 0;
        &::before{
            top: 44%;
        }
        &::after{
            top: 44%;
        }
    }
    .card_sample{
        width: 100%;
    }
     .pair_box{
        padding: 1.5% 3%;
    }
    .notes_list{
        padding: 0 2% 0 4%;
    }
}
@media all and (max-width:520px) {
    .canpain_lead{
        >p{
            letter-spacing: -0.16rem;
            &:last-of-type{
                text-align: left;
            }
        }
    }
    .section_box h4{
        line-height: 130%;
        >.txt-circle{
            margin-left: 0;
        }
    }
    .list_nav{
        >li{
            .arrow::before,
            .arrow::after {
                height: 12px;
            }
        }
    }
    .pair_box{
        >ul{
            padding: 0 0 0 5%;
        }
    }
}

/*------------------------------------------------------------------------------
 12月10日発売新グッズ
 -------------------------------------------------------------------------------*/
.ttl_newgoods{
    margin-bottom: 16px;
    position: relative;
    >picture img {
        margin-top: -1%;
    }
    >p{
        font-family: "fot-tsukuardgothic-std", sans-serif;
        font-weight: 700;
        font-style: normal;
        color: #fff;
        font-size: min(2.4vw,24px);
        line-height: 120%;
        letter-spacing: -0.06rem;
        margin-bottom: 4px;
        padding-top: 32px;
        z-index: 2;
        position: absolute;
        width: 100%;
        top: 32%;
    }
    >h2{
        width: min(46vw,460px);
        margin: 0 auto;
        padding-bottom: 38px;
        position: absolute;
        top: 58%;
        left: 50%;
        transform: translateX(-50%);
        &::before{
            content: '';
            background: url(../img/object01.webp) no-repeat  center center/contain;
            width: min(8.2vw,82px);
            height: min(8.2vw,82px);
            position: absolute;
            top: 58%;
            left: 10%;
        }
        &::after{
            content: '';
            background: url(../img/object02.webp) no-repeat  center center/contain;
            width: min(12.2vw,122px);;
            height: min(11.2vw,112px);;
            position: absolute;
            top: -117%;
            right: -14%;
            z-index: 1;
        }
    }
    >p:last-child {
        position: absolute;
        width: min(15.1vw,151px);
        position: absolute;
        top:73%;
        left: 50%;
        transform: translateX(-50%);
    }
}

/* 共通 */
.ttl_deco{
    text-align: center;
    position: relative;
}

#new-goods .section_inner{
    background: #fdfdfd url(../img/bg03.webp) repeat center center;
    outline: 2px solid #ebab3e;
    outline-offset: -10px;
    padding: 70px 0;
}
#new-goods .section_box{
margin-bottom: 0;
}
.img-necklace{
    margin-bottom: 16px;
}
.txt-necklace{
    text-align: center;
    color: #30476e;
    font-family: "fot-tsukuardgothic-std", sans-serif;
    font-weight: 700;
    font-style: normal;
    margin-bottom: 16px;
}
.btn_necklace{
    max-width: 312px;
    margin: 0 auto 32px;
}
#new-goods .section_box h4:nth-of-type(2){
    letter-spacing: -0.14rem;
    /* margin-top: 8px; */
}
.goods-wrapper{
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    margin-bottom: 2px;
    >.goods-box{
        /* width: 230px; */
        display: flex;
        flex: 0 0 calc((100% - 30px) / 3);
        flex-direction: column;
        gap: 10px;
        margin-bottom: 20px;
        >.goods-img{
            border: 1px solid #54363f;
        }
        >.txt-box{
            display: flex;
            flex-direction: column;
            height: 100%;
            gap: 10px;
            justify-content: space-between;
        }
         .goods-txt{
            color: #54363f;
            font-weight: 700;
            line-height: 150%;
            &.book-name {
                font-size: min(2.1vw,21px);
                line-height: 115%;
            }
            &.txt-normal {
                font-weight: normal;
            }
        }
         .goods-btn{
            background-color: #de4b1e;
            font-family: "fot-tsukuardgothic-std", sans-serif;
            font-weight: 700;
            font-style: normal;
            text-align: center;
            border-radius: 50px;
            padding: 6px 0;
            transition: all .2s ease-in-out;
            &:hover{
                background: #f75422;
            }
            >a{
                display: block;
                width: 100%;
                height: 100%;
                color: #fff;
                font-size: clamp(10.5px, 3.38vw, 18px);
                letter-spacing: -0.04rem;
            }
        }
    }
}

/* キャンペーン対象書籍 */
#new-goods .cp-target-book h3 {
    margin-bottom: 32px;
}

.cp-target-book .goods-wrapper {
    gap: 56px;
    .goods-box {
        flex: 0 0 calc((100% - 56px) / 2);
        gap: 10px;
        .goods-img img {
            vertical-align: middle;
        }
    }
    .txt-box {
        display: grid;
        grid-template-rows: 1fr auto auto;
        height: 100%;
        text-align: center;
        justify-content: unset;
        gap: 10px;
    }
}

.btn_minegoods01{
    max-width: 654px;
    margin: 0 auto;
    margin-bottom: 24px;
}

@media all and (max-width:820px) {
    .ttl_newgoods{
        margin-bottom: 8%;
        >picture img:first-of-type {
            margin-top: -11%;
        }
        >p{
            padding-top: 4%;
            z-index: 10;
            font-size: min(3.17vw,26px);
            top: 34%;
            line-height: 1.5em;
            .text-yellow{
                margin-right: 0.3em;
            }
            .text-circle {
                display: inline-flex;
                margin-right: -0.3em;
                align-items: center;
                justify-content: center;
                width: 5vw;
                aspect-ratio: 1 / 1;
                background-color: #de4b1e;
                border-radius: 50%;
                padding: 0;
            }
            &:last-child {
                width: min(24.39vw, 200px);
            }
        }
        >h2{
            width: min(70.24vw, 576px);
            padding-bottom: 4%;
            top: 58%;
            &::before{
                width: min(13.41vw,110px);
                height: min(13.41vw,110px);
                top: 61%;
                left: 6%;
            }
            &::after{
                content: '';
                background: url(../img/object02.webp) no-repeat  center center/contain;
                width: min(17.92vw, 147px);
                height: min(16.46vw, 135px);
                top: -134%;
                right: -13%;
            }
        }
    }
    #new-goods .section_inner{
        padding: 10% 0;
    }
    #new-goods .section_wrapper{
        max-width: 88%;
    }
}

@media all and (max-width:768px) {
    .goods-wrapper{
        justify-content: unset;
        gap:20px;
        >.goods-box{
            max-width: 50%;
            flex: 0 0 calc((100% - 20px) / 2);
        }
    }
    #new-goods .section_inner{
        outline-offset: -6px;
    }
    /* キャンペーン対象書籍 */
    
    .cp-target-book .goods-wrapper {
        display: block;
        .goods-box {
            max-width: unset;
            width: 100%;
            flex-direction: unset;
            align-items: center;
            .goods-img,.txt-box{
                width: 50%;
                .goods-txt:nth-of-type(2) {
                    font-size: clamp(14px, 2.6vw, 20px);
                }
            }
        }
        .goods-txt {
            font-size: clamp(16px, 3.25vw, 25px);
            line-height: 1.3em;
            &.book-name {
                font-size: clamp(16px, 3.25vw, 25px);
            }
        }
    }

    .cp-target-book .goods-btn {
        margin-top: 7%;
    }
}

@media all and (max-width:520px) {
    .section_inner .txt-necklace{
        line-height: 150%;
    }
    .btn_necklace{
        max-width: 75%;
        margin: 0 auto 32px;
    }
    .goods-wrapper{
        >.goods-box{
            .goods-txt{
                line-height: 140%;
            }
            .goods-btn{
                padding: 2% 2%;
                >a{
                    letter-spacing: -0.08rem;
                }
            }
        }
    }
    #new-goods .section_box h4{
        line-height: 115%;
        &::before{
            top: 3px;
        }
    }
}


/*------------------------------------------------------------------------------
 クリスマススペシャルセット2025
 -------------------------------------------------------------------------------*/
.ttl_specialset{
    margin-bottom: 20px;
    position: relative;
    >picture img {
        margin-top: -1%;
    }
    >p{
        font-family: "fot-tsukuardgothic-std", sans-serif;
        font-weight: 700;
        font-style: normal;
        color: #fff;
        font-size: min(2.4vw,24px);
        line-height: 120%;
        letter-spacing: -0.06rem;
        margin-bottom: 4px;
        padding-top: 32px;
        z-index: 2;
        position: absolute;
        width: 100%;
        top: 28%;
    }
    >h2{
        width: min(48.8vw, 488px);
        margin: 0 auto;
        padding-bottom: 30px;
        position: absolute;
        top: 47%;
        left: 50%;
        transform: translateX(-50%);
        &::before{
            content: '';
            background: url(../img/object01.webp) no-repeat  center center/contain;
            width: min(8.2vw,82px);
            height: min(8.2vw,82px);
            position: absolute;
            top: -56%;
            right: 5%;
        }
        &::after{
            content: '';
            background: url(../img/object02.webp) no-repeat  center center/contain;
            width: min(12.2vw,122px);;
            height: min(11.2vw,112px);;
            position: absolute;
            bottom: -21%;
            left: 2%;
            z-index: 1;
        }
    }
    >p:last-child {
        position: absolute;
        width: min(15.1vw,151px);
        position: absolute;
        top:73%;
        left: 50%;
        transform: translateX(-50%);
    }
}
.txt-spesialset{
    font-family: "fot-tsukuardgothic-std", sans-serif;
    font-weight: 700;
    font-style: normal;
    color: #54363f;
    text-align: center;
    font-size: clamp(16px, 4.34vw, 26px);
    line-height: 150%;
    letter-spacing: -0.08rem;
    margin-bottom: 35px;
    >p:last-of-type{
        font-size: clamp(13px, 3.4vw, 18px);
        line-height: 140%;
    }
}
#special-set .section_inner{
    background: #fdfdfd url(../img/bg02.webp) repeat center center;
    /* outline: 2px solid #e9e9e9;
    outline-offset: -10px; */
    padding: 36px 0 65px;
    position: relative;
    .deco-line-top {
        position: absolute;
        top: 0;
        left: 1%;
        width: 98%;
        height: auto;
    }
    .deco-line-bottom {
        position: absolute;
        bottom: 0;
        left: 1%;
        width: 98%;
        height: auto;
    }
    .deco-line-left {
        position: absolute;
        top: 0;
        left: 0;
        width: auto;
        height: 100%;
    }
    .deco-line-right {
        position: absolute;
        top: 0;
        right: 0;
        width: auto;
        height: 100%;
    }
}
.set-box{
    text-align: center;
    background: url(../img/bg-set01.webp) no-repeat center center/100%;
    width: 100%;
    height: 100%;
    aspect-ratio: 1440 / 2187;
    margin-bottom: 24px;
    position: relative;
    &::before{
        content: '';
        background: url(../img/object03.webp) no-repeat  center center/contain;
        width: min(9vw,90px);
        height: min(9.5vw,95px);
        position: absolute;
        top: 58%;
        right: -4.3%;
    }
    &::after{
        content: '';
        background: url(../img/object02.webp) no-repeat  center center/contain;
        width: min(16vw, 160px);
        height: min(14.7vw, 147px);
        position: absolute;
        bottom: -4.5%;
        left: -6.5%;
        z-index: 1;
    }
    &:nth-of-type(2){
        background: url(../img/bg-set02.webp) no-repeat center center/100%;
        aspect-ratio: 1471 / 2193;
        &::before{
            top: 62%;
            right: -4.3%;
        }
        &::after{
            bottom: -2%;
            left: -6.5%;
        }
        >div:last-of-type {
            margin-top: min(4vw, 40px);
        }
    }
    &:nth-of-type(3){
        background: url(../img/bg-set03.webp) no-repeat center center/100%;
        aspect-ratio: 1440 / 2229;
        margin-bottom: 40px;
        >div:last-of-type {
            margin-top: min(3.2vw, 32px);
        }
    }
    &:nth-of-type(4){
        background: url(../img/bg-set04.webp) no-repeat center center/100%;
        aspect-ratio: 1440 / 2049;
        margin-bottom: 0;
        >div:last-of-type {
            margin-top: min(3.2vw, 32px);
        }
        &::before{
            top: 71%;
            right: -4.3%;
        }
    }
    >p:first-of-type{
        font-family: "fot-tsukuardgothic-std", sans-serif;
        font-weight: 700;
        font-style: normal;
        color: #54363f;
        font-size: clamp(10px, 2.898vw, 25px);
        letter-spacing: -0.04rem;
        padding-top: min(7.5vw, 75px);
    }
    >p.f-goods-txt{
        line-height: 130%;
        padding-top: min(11.1vw, 111px);
    }
    >p.w-goods-txt{
        letter-spacing: -0.09rem;
        padding-top: min(9vw, 90px);
    }
    >p.b-goods-txt{
        letter-spacing: -0.09rem;
        padding-top: min(8.4vw, 84px);
    }
    >p:nth-of-type(2){
        max-width: min(44.1vw,441px);
        margin: 0 auto 10px;
    }
    >p:last-of-type{
        font-family: "fot-tsukuardgothic-std", sans-serif;
        color: #54363f;
        font-weight: 600;
        font-size: min(2.4vw, 24px);
        position: relative;
        width: fit-content;
        margin: 0 auto 8px;
        padding: 0 24px;
        letter-spacing: -0.04rem;
        &::before{
            content: '';
            background: url(../img/pair_deco.webp) no-repeat center center/contain;
            width: 18px;
            height: 19px;
            position: absolute;
            top: 28%;
            left: 0;
        }
        &::after{
            content: '';
            background: url(../img/pair_deco.webp) no-repeat center center/contain;
            width: 18px;
            height: 19px;
            position: absolute;
            top: 28%;
            right: 0;
        }
    }
    >div:first-of-type{
        max-width: min(63.2vw, 632px);
        margin: 0 auto 18px;
        padding: 0 10px;
    }
    >div:last-of-type{
        max-width: min(38.7vw, 387px);;
        margin: 0 auto 18px;
        /* margin-top: min(3.2vw,32px); */
        margin-top: min(4vw, 40px);
    }
    >.set-list{
        list-style: none;
        text-align: left;
        max-width: min(57.99vw,580px);
        margin: 0 auto 24px;
        font-family: "fot-tsukuardgothic-std", sans-serif;
        font-weight: 700;
        font-style: normal;
        color: #54363f;
        font-size: min(2vw, 20px);
        letter-spacing: -0.08rem;
        >li{
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 2px;
            font-size: min(2vw,20px);
            &::before{
                content: '';
                flex: 1;
                order: 1;
                min-width: 20px;
                border-bottom: 4px dotted #54363f;
                margin: 0 6px;
                align-self: center;
            }
            >span:first-of-type{
                order: 0;
                flex-shrink: 1;
            }
            >span:last-of-type{
                order: 2;
                flex-shrink: 0;
            }
            .txt-mini {
                font-size:min(1.6vw,16px) ;
            }
            &.caution {
                font-size:min(1.6vw,16px) ;
                line-height: 1.4em;
                &::before {
                    content: unset;
                }
            }
        }
    }
}
p.set-txt{
    width: 98%;
    margin: 0 auto;
    text-align: justify;
    font-size: clamp(12px, 3.38vw, 16px);
    color: #C0165E;
    font-weight: bold;
}

@media all and (max-width:1000px) {
    .section_wrapper .set-box:nth-of-type(3) .set-list {
        margin-bottom: 0.89vw;
    }
}
@media all and (max-width:820px) {
    .ttl_specialset{
        margin-bottom: 2%;
        >picture img:first-of-type {
            margin-top: -11%;
        }
        >p{
            padding-top: 9%;
            z-index: 10;
            font-size: min(3.9vw, 26px);
            top: 21%;
            .text-circle {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 5vw;
                aspect-ratio: 1 / 1;
                background-color: #de4b1e;
                border-radius: 50%;
                padding: .3%;
                margin-right: -0.2em;
            }
            &:last-child {
                top: 67%;
                width: min(24.39vw, 200px);
            }
        }
        >h2{
            width: min(79.26vw, 650px);
            padding-bottom: 4%;
            top: 46%;
            &::before{
                width: min(13.41vw,110px);
                height: min(13.41vw,110px);
                top: -59%;
                right: 5%;
            }
            &::after{
                width: min(19.75vw,162px);;
                height: min(18.17vw,149px);;
                bottom: -26%;
                left: 3%;
            }
        }
    }
    #special-set .section_wrapper{
        max-width: 90%;
        padding: 0 0;
    }
    #special-set .section_inner{
        padding: 6% 0 13%;
        .deco-line-top {
            top: 0;
            left: 1.5%;
            width: 97%;
            height: auto;
        }
        .deco-line-bottom {
            left: 1.5%;
            width: 97%;
        }
    }
    .set-box{
        background: url(../img/bg-set01-sp.webp) no-repeat center center/100%;
        aspect-ratio: 620 / 1375;
        /* margin-bottom: 4%; */
        margin-bottom: 15%;
        &::before{
            width: min(14.63vw,120px);
            height: min(15.48vw, 127px);
            top: 56%;
            right: -6.7%;
        }
        &::after{
            width: min(24.39vw, 200px);
            height: min(22.43vw, 184px);
            left: -8.6%;
            bottom: -3.7%;
        }
        &:nth-of-type(2){
            background: url(../img/bg-set02-sp.webp) no-repeat center center/100%;
            aspect-ratio: 1240 / 2637;
            &::before{
                top: 56%;
                right: -6.7%;
            }
            &::after{
                left: -8.6%;
                bottom: -3.7%;
            }
            >div:last-of-type {
                margin-top: min(4.87vw, 40px);
            }
        }
        &:nth-of-type(3){
            background: url(../img/bg-set03-sp.webp) no-repeat center center/100%;
            aspect-ratio: 1240 / 2795;
            >div:last-of-type {
                /* margin-top: min(24%, 40px); */
                margin-top: min(3.9vw, 32px);
            }
        }
        &:nth-of-type(4){
            background: url(../img/bg-set04-sp.webp) no-repeat center center/100%;
            aspect-ratio: 1240 / 2551;
            >div:last-of-type {
                margin-top: 8%;
            }
            &::before{
                top: 66%;
                right: -6.7%;
            }
        }
        >p:first-of-type{
            margin-bottom: 0;
            padding-top: min(10.73vw, 88px);
        }
        >p:nth-of-type(2){
            max-width: min(53.78vw, 441px);
            margin: 0 auto 2%;
        }
        >p:last-of-type{
            margin: 5% auto 0.6%;
            padding: 0 4%;
            font-size: min(3.9vw, 32px);
            &::before{
                width: min(18 / 750 * 100vw, 18px);
                height: min(19 / 750 * 100vw, 19px);
                top: 26%;
            }
            &::after{
                width: min(18 / 750 * 100vw, 18px);
                height: min(19 / 750 * 100vw, 19px);
                top: 26%;
            }
        }
        >div:first-of-type{
            max-width: 78%;
            margin: 0 auto 1%;
            padding: 0;
        }
        >div:last-of-type{
            max-width: min(63.04vw, 517px);
            width: unset;
            margin-top: 8%;
        }
        >.set-list{
            max-width: 600px;
            width: 90%;
            margin: 0 auto 2%;
            line-height: 2.3em;
            >li{
                &::before{
                    border-bottom: 2px dotted #30476e;
                }
                >span:first-of-type{
                    font-size: min(3.04vw,25px);
                }
                >span:last-of-type{
                    font-size: min(3.04vw,25px);
                }
                .txt-mini {
                    font-size:min(2.19vw,18px) ;
                }
                &.caution {
                    font-size: min(2.19vw,18px);
                    line-height: 1.3em;
                }
            }
        }
        >p.f-goods-txt{
            padding-top: min(11.7vw, 96px);
        }
    }
}
@media all and (max-width:768px) {
    .txt-spesialset{
        max-width: 90%;
        margin: 0 auto;
        margin-bottom: 4%;
    }
    #special-set .section_inner{
        outline-offset: -6px;
    }
}



/*------------------------------------------------------------------------------
 フッターエリア
 -------------------------------------------------------------------------------*/
.footer-bg{
    padding: 50px 0 100px;
}
.footer_box{
    margin-bottom: 34px;
    .text-white {
        color: #fff;
    }
}
.footer_inner p:first-of-type{
    margin-bottom: 24px;
}
.footer_inner p:last-of-type>a{
    color: #d79b3e;
    text-decoration: underline;
}
.bn-list{
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-bottom: 50px;
    >li{
        max-width: min(300px, 30vw);
        height: auto;
        &:nth-of-type(odd){
            margin-right: 32px;
        }
    }
}
.share-list{
    list-style: none;
    display: flex;
    width: 60%;
    margin: 0 auto;
    justify-content: center;
    margin-bottom: 50px;
    gap: 6%;
    >li{
        width: 10%;
    }
}
.footer_inner .copyright{
    text-align: center;
    color: #fff;
    font-family: noto-sans-cjk-jp, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: clamp(12px, 2.89vw, 15px);
}
@media all and (max-width:768px) {
    .footer-bg{
        padding: 16% 0 24%;
    }
    .bn-list{
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 0.5rem;
        margin-bottom: 16%;
        >li{
            max-width: 500px;
            width: 90%;
            &:nth-of-type(odd){
                margin-right: 0;
            }
        }
    }
    .share-list{
        margin-bottom: 16%;
        gap: 10%;
        >li{
            width: 30%;
        }
    }
}

/*------------------------------------------------------------------------------
TOPへ戻るボタン
 -------------------------------------------------------------------------------*/
#to-top{
    position: absolute;
    max-width: 160px;
    width: 100%;
    bottom:-6px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
     &:hover{
        opacity: 1;
     }
}

@media all  and (max-width:820px) {
    #to-top{
        bottom: -1.3vw;
        max-width: min(32.19vw,264px);
    }
}

/* .test {
    font-size: min(6.4vw,64px);
    background: linear-gradient(90deg, #ad9a66 0%, #fad980 50%, #ad9a66 100%);
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    font-family: "Noto Serif JP", serif;
} */