@charset "utf-8";
html{
    /* scroll-behavior: smooth; */
    scroll-padding-top: 158px;
}
body{
    background: url(../img/bg.gif) repeat center center;
    color: #693525;
    font-weight: bold;
    letter-spacing: 0.02rem;
    line-height: 160%;
    font-size: 1.06rem;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 600;
    font-style: normal;
    }

.txt-red{
    color: #bd3525;
}
.header{
    width: 100%;
    background-color: #693525;
    position: fixed;
    z-index: 9999;
    /* box-shadow: 0px 0px 10px -2px #6a7678; */
}
.header_wrap{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 3%;
    height: 66px;
    margin: 0 auto;
    max-width: 100%;
    gap: 6%;
}
.pc_logo{
    max-width: min(200 / 750 * 100vw, 191px);
    img{
        width: 100%;
    }
}
#g_nav_pc{
    width: 600px;
    .pc_menu{
        display: flex;
        gap: 0;
        justify-content: space-between;
        height: 66px;
        align-items: center;
        >a{
            padding: 10px;
        }
    }
}
#g-nav{
    display: none;
}
.act_menu{
    display: none;
}
.jump_point{
    padding-top: 50px;
    margin-top: -50px;
}
#mv{
    padding-top: 79px;
    width: 100%;
    height: auto;
    margin: 0 auto;
    img{
        width: 100%;
    }
}
.container{
    padding: 0 2rem;
}
section{
    max-width: 980px;
    border: solid 10px #ffffeb;
    border-radius: 21px;
    margin: 20px auto 60px;
    >.outline_inner{
        background-color: #ffffeb;
        border: dashed 2px #d6a455;
        border-radius: 10px;
        padding: 5.5% 4%;
        position: relative;
    }
    h2{
        text-align: center;
        margin: 0 auto;
    }
    img{
        width: 100%;
    }
}
#entry{
    h2{
        margin-bottom: 3%;
    }
    h2:nth-of-type(1){  
        max-width: min(312 / 750 * 100vw, 304px);
    }
    .rule-wrapper h2{
        max-width: min(296 / 750 * 100vw, 307px);
    }
    h2:nth-of-type(2){
        max-width: min(520 / 750 * 100vw, 533px);
    }
    h2:nth-of-type(3){
        max-width: min(421 / 750 * 100vw, 429px);
        margin-top: 6%;
    }
    >.outline_inner{
        font-size: 1.08rem;
    }
}
.list-entry{
    width: 100%;
    margin: 2% auto 0;
    list-style: none;
    list-style-position: outside;
    >li{
        padding-left: 3.6em;
        position: relative;
        margin-bottom: 2.6%;
    }
    span{
        width: min(55 / 750 * 100vw, 36px);
        position: absolute;
        left: 10px;
        top: -6px;
    }
}
.btn-post{
    margin: 0 auto 1.8%;
    max-width: 816px;
    img{
        width: 100%;
        transition: filter 0.2s ease;
        &:hover{
            filter: brightness(1.05);
        }
    }
}
.entry-txt{
    width: 96%;
    margin: 0 auto 5%;
    line-height: 160%;
    font-size: 15px;
}
.rule-wrapper{
    width: 100%;
    position: relative;
    >span{
        position: absolute;
        top: -76px;
        right: 6%;
    }
    &::before{
        content:'';
        display: block;
        background: url(../img/object01.png) no-repeat center center/contain;
        width: min(150 / 1000 * 100vw, 150px);
        height: 158px;
        position: absolute;
        top: -20%;
        right: 8%;
        transform: translate(0, 8%);
    }
}
.rule-box{
    max-width: 100%;
    height: 330px;
    overflow-y: scroll;
    scrollbar-width: none;
    background-color: #f6f2dd;
    border: 3px solid #e9ddc9;
    border-radius: 20px;
    margin: -1% auto 5%;
    position: relative;
    line-height: 150%;
    font-size: 15px;
    >p{
        padding: 14px;
    }
}
.pair-container{
    width: 100%;
    margin-bottom: 4%;
}
.pair01{
    max-width: min(448 / 1000 * 100vw, 448px);
    margin: 0 auto 1%;
    >img{
        width: 100%;
    }
}
.pair-wrapper{
    display: flex;
    max-width: 100%;
    gap: 1%;
    margin-bottom: -2%;
    >div{
        max-width: 219px;
        &:nth-of-type(2){
            position: relative;
        }
        &:nth-of-type(2)::after{
            content: '';
            display: block;
            background: url(../img/pair03-note.png) no-repeat center center/100%;
            width: min(184 / 1000 * 100vw, 184px);
            height: 32px;
            position: absolute;
            bottom: -16%;
            left: 6%;
        }
    }
     img{
        width: 100%;
    }
}
#prize{
    h2{
        width: min(167 / 750 * 100vw, 167px);
        margin-bottom: 2.2%;
        margin-top: 1%;
    }
    >.outline_inner{
        max-width: 100%;
        padding: 5% 3%;
    }
    >.prize_outline_inner{
        position: relative;
        &::before{
            content:'';
            background: url(../img/object02.png) no-repeat center center/contain;
            width: min(378 / 1000 * 100vw, 391px);
            height: min(243 / 1000 * 100vw, 243px);
            position: absolute;
            top: -9.5%;
            left: -5%;
        }
        &::after{
            content:'';
            background: url(../img/object03.png) no-repeat center center/contain;
            width: min(420 / 1000 * 100vw, 433px);
            height: min(239 / 1000 * 100vw, 239px);
            position: absolute;
            top: -9%;
            left: 59%;
        }
    }
}
.prize_container{
    width: 100%;
    margin: 0 auto 2%;
    display: flex;
    gap: 3%;
    align-items: center;
    img{
        width: 100%;
    }
}
.img-prize{
    width: 42%;
    z-index: 1;
}
.prize_wrapper{
    width: 57%;
    >.prize_box{
        display: flex;
        gap: 3%;
        margin-bottom: 5%;
        border-bottom: dashed 2px #d6a455;
        padding-bottom: 1%;
        &:nth-of-type(3){
            margin-bottom: 0;
        }
    }
}
#goods-list{
    h2{
        width: min(295 / 750 * 100vw, 295px);
        margin-bottom: 4%;
    }
    >.outline_inner{
        padding: 6% 3%;
    }
    >.goods-list_outline_inner{
        position: relative;
        &::before{
            content:'';
            background: url(../img/object04.png) no-repeat center center/contain;
            width: min(196 / 1000 * 100vw, 196px);
            height: min(275 / 1000 * 100vw, 275px);
            position: absolute;
            top: -1.5%;
            left: 9%;
        }
        &::after{
            content:'';
            background: url(../img/object05.png) no-repeat center center/contain;
            width: min(275 / 1000 * 100vw, 275px);
            height: min(231 / 1000 * 100vw, 231px);
            position: absolute;
            top: -1.5%;
            left: 68%;
        }
    }
}
.bxslider{
    margin: 0 auto;
    text-align: center;
    width: 100%;
     img{
        width: 100%;
     }
}
.btn-list{
    width: 92%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0 auto 2%;
    >li{
        width: calc(100% / 3);
    }
}
.btn-goods-list{
    margin: 0 auto 1%;
    max-width: 843px;
     img{
        width: 100%;
    }
}
#popup{
    border: 0;
    background: url(../img/p-bg.gif) repeat top center;
    max-width: 100%;
    border-radius: 0;
    position: relative;
    padding: 134px 0 193px;
    p{
        margin: 0 auto;
        max-width: min(900 / 1000 * 100vw, 900px);
        z-index: 1;
        position: relative;
        &:nth-of-type(1){
            margin-bottom: 40px;
        }
    }
     img{
        width: 100%;
     }
    &::before{
        content: '';
        display: block;
        background: url(../img/p-border01.png) repeat center center;
        width: 100%;
        height: 26px;
        position: absolute;
        top: 27px;
        left: 0;
    }
    &::after{
        content: '';
        display: block;
        background: url(../img/p-border02.png) repeat center center;
        width: 100%;
        height: 26px;
        position: absolute;
        bottom: 27px;
        left: 0;
    }
}
.popup_container{
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    >span:nth-of-type(1){
        display: block;
        width: min(162 / 1000 * 100vw, 162px);
        position: absolute;
        top: 3%;
        left: 0;
    }
    >span:nth-of-type(2){
        display: block;
        width: min(213 / 1000 * 100vw, 213px);
        position: absolute;
        top: 85%;
        left: 78.5%;
        z-index: 2;
    }
}
#popup h2{
    max-width: min(787 / 1000 * 100vw, 787px);
    padding-bottom: 30px;
    text-align: center;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}
.banner_area{
    max-width: 970px;
    padding: 0 2%;
    margin: 5% auto 1%;
    img{
        width: 100%;
    }
}
.banner_list{
    display: flex;
    list-style: none;
    align-items: center;
    gap: 2%;
    justify-content: center;
    margin-bottom: 4%;
    >li{
        width: calc(96% / 3);
    }
}
.share_list{
    max-width: 20%;
    display: flex;
    list-style: none;
    gap: 11%;
    justify-content: center;
    margin: 0 auto;
    >li{
        width: calc(78% / 3);
    }
}
.footer{
    text-align: center;
    height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    >.footer__copy{
        margin-top: -5%;
        font-size: 14px;
    }
}

/*------------------------------------------------------------------------------
グッズページ
 -------------------------------------------------------------------------------*/
.btn-list_container{
    max-width: 910px;
    margin: 2% auto 5%;
    img{
        width: 100%;
    }
}
.btn-list-goods{
    padding-left: 1%;
}
.btn-list-sp_container{
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    position: fixed;
    top: 80px;
    right: 0;
    left: 0;
    z-index: 30;
    >ul{
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x;
        overscroll-behavior: contain;
        /* スクロールバー非表示（見た目だけ） */
        scrollbar-width: none;        /* Firefox */
        -ms-overflow-style: none;     /* IE/Edge */
        background-color: #9f6c3c;
        justify-content: center;
        @media screen and (max-width: 1100px) {
            justify-content: initial;
        }
        >li{
            display: flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 auto;
            width: 120px;
            height: 68px;
            text-align: center;
            font-size: 0.9rem;
            line-height: 110%;
            padding: 0 2%;
            position: relative;
            &:last-of-type::after{
                display: none;
            }
            &::after{
                content: '';
                display: inline-block;
                border-right: 1px solid #ffffeb;
                height: 50%;
                color: #fff;
                position: absolute;
                top: 50%;
                right: 0;
                transform: translate(0,-50%);
            }
            >a{
                text-decoration: none;
                color: #ffffeb;
                width: 100%;
                padding: 6% 0;
                font-weight: 500;
                font-family: "Zen Maru Gothic", sans-serif;
            }
        }
    }
}
/* スクロールバー非表示（見た目だけ） */
.btn-list-sp_container ul::-webkit-scrollbar {
    display: none;/* Chrome/Safari */
}
.btn-list-sp_container.active{
    opacity: 1;
}
.goods_inner h2{
    margin: 1% auto 4%;
}
.ttl_3rdchara{
    width: min(541 / 1000 * 100vw, 541px);
}
.ttl_hanne{
    width: min(627 / 1000 * 100vw, 627px);
}
.ttl_shitamachi{
    width: min(223 / 1000 * 100vw, 223px);
}
.ttl_shinden{
    width: min(229 / 1000 * 100vw, 229px);
}
.ttl_entourage{
    width: min(492 / 1000 * 100vw, 492px);
}
.ttl_ehrenfest{
    width: min(586 / 1000 * 100vw, 586px);
}
.ttl_gots{
    width: min(229 / 1000 * 100vw, 229px);
}
.ttl_second{
    width: min(115 / 1000 * 100vw, 115px);
}
.btn_matome{
    margin-bottom: 8%;
    &:last-of-type{
        margin-bottom: 0;
    }
}
.goods_wrapper {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    justify-content: left;
    gap: 2.5%;
}
.goods_box{
    width: calc(95% / 3);
    margin-bottom: 2%;
    p:nth-of-type(2){
        padding: 0 3%;
        margin-bottom: 5%;
        font-size: 1.2rem;
        margin-top: -1%;
        color: #693525;
    }
    a{
        text-decoration: none;
    }
}



/* 対象商品一覧へボタン */
#btn-to-goods {
  position: fixed;
  right: -180px;
  bottom: 10px;
  opacity: 0;
  /* right: -180px; */
  z-index: 999;
  transition: right 0.6s ease;
  img{
    width: 100%;
  }
}
#btn-to-goods a {
  width: 171px;
  display: block;
  /* transition: all .3s ease; */
}
#btn-to-goods.UpMove{
    right: 0;
    opacity: 1;
} 
#btn-to-goods.DownMove{
    right: -180px;
    opacity: 1;
} 

/*------------------------------------------------------------------------------
 スマートフォン用記述
 -------------------------------------------------------------------------------*/
@media screen and (max-width: 768px) {
    html{
        scroll-padding-top: 120px;
    }
    body{
        font-size: 1rem;
        line-height: 150%;
    }
    h1{
        max-width: 157px;
    }
    #g_nav_pc{
        display: none;
    }
    #g-nav{
        display: block;
    }
    .menubar{
        width: 8.6vw;
    }
    .menu_botan {
        width: 35px;
        height: 28px;
        position: relative;
        float: right;
    }
    .menu_botan span {
        width: 35px;
        height: 4px;
        border-radius: 3px;
        position: absolute;
        background-color: #d6a455;
        transition: all 0.3s ease;
    }
    .menu_botan span:first-child {
        top: 0;
    }
    .menu_botan span:nth-child(2) {
        top: 45%;
    }
    .menu_botan span:last-child {
        bottom: 0;
    }
    .menubar.active span:first-child {
        top: 12px;
        transform: rotate(225deg);
    }
    .menubar.active span:nth-child(2) {
        opacity: 0;
    }
    .menubar.active span:last-child {
        top: 12px;
        transform: rotate(-225deg);
    }
    .act_menu {
        display: block;
        background-color: #ffffeb;
        position: fixed;
        width: 60vw;
        height: 100vh;
        transition: all 0.3s ease-out;
        right: -70vw;
        >ul{
            list-style: none;
            padding: 10% 6.5% 0;
            >li{
                margin-bottom: 7%;
                border-bottom: 2px dashed #bd3525;
                >a{
                    text-decoration: none;
                    color: #693525;
                    font-size: 1.2rem;
                    font-weight: 500;
                    font-family: "Zen Maru Gothic", sans-serif;
                    display: block;
                    padding: 6% 4% 6% 5%;
                    margin: 0 auto;
                }
            }
        }
    }
    .act_menu.active {
        right: 0;
        background-color: #ffffebf7;
    }
    .header{
        height: 55px;
    }
    .header_wrap{
        height: 100%;
        padding: 0 4%;
    }
    #mv{
        padding-top: 55px;
    }
    .container{
        padding: 0;
    }
    section{
        max-width: 87%;
        margin: 4% auto 8%;
        border: solid 6px #ffffeb;
        border-radius: 17px;
        >.outline_inner{
            padding: 5.5% 3%;
        }
    }
    #entry{
        .rule-wrapper h2{
            margin-bottom: 4%;
        }
        h2:nth-of-type(3){
            margin-top: 10%;
            margin-bottom: 6%;
        }
        >.outline_inner{
            font-size: 1rem;
        }
    }
    .rule-wrapper{
        &::before{
            content:'';
            background: url(../img/object01.png) no-repeat center center/contain;
            width: min(111 / 750 * 100vw, 111px);
            height: min(129 / 750 * 100vw, 129px);
            top: 19%;
            right: 77%;
            transform: translate(0, -87%);
        }
    }
    .list-entry{
        >li{
            padding-left: min(10vw, 50px);
            margin-bottom: 5%;
        }
        span{
            left: 2px;
            top: -14px;
            transform: translate(0,10px);
        }
    }
    .btn-post{
        margin: -2% auto 1.8%;
        max-width: 100%;
    }
    .entry-txt{
        font-size: 0.8rem;
        width: 100%;
        margin-bottom: 11%;
    }
    .rule-box{
        font-size: 0.8rem;
        line-height: 160%;
        height: min(274 / 750 * 100vw, 274px);
        margin-bottom: 13%;
        border: 2px solid #e9ddc9;
        >p {
            padding: 3%;
        }
    }
    .pair-container{
        margin-bottom: -5%;
    }
    .pair01{
        max-width: min(375 / 750 * 100vw, 375px);
        margin: 0 auto 2%;
    }
    .pair-wrapper{
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 0;
        >div{
            max-width: min(295 / 750 * 100vw, 295px);
            margin-bottom: 6%;
            &:nth-of-type(2)::after{
                content: '';
                background: url(../img/pair03-note_sp.png) no-repeat center center/100%;
                width: min(377 / 750 * 100vw, 377px);
                height: 16px;
                bottom: -6%;
                left: -28%;
            }
        }
    }
    #prize{
        >.prize_outline_inner{
            &::before{
                content:'';
                background: url(../img/object02_sp.png) no-repeat center center/contain;
                width: min(279 / 750 * 100vw, 279px);
                height: min(235 / 750 * 100vw, 235px);
                top: -5%;
                left: -7.5%;
            }
            &::after{
                content:'';
                background: url(../img/object03_sp.png) no-repeat center center/contain;
                width: min(284 / 750 * 100vw, 284px);
                height: min(228 / 750 * 100vw, 228px);
                top: -5%;
                left: 63%;
            }
        }
    }
    .prize_container{
        margin: 0 auto 2%;
        flex-direction: column;
    }
    .img-prize{
        width: min(616 / 750 * 100vw, 616px);
        margin-bottom: 5%;
    }
    .prize_wrapper{
        width: 96%;
        >.prize_box{
            display: flex;
            gap: 5%;
            margin-bottom: 5.5%;
            border-bottom: dashed 2px #d6a455;
            padding-bottom: 3%;
            align-items: center;
            &:nth-of-type(3){
                margin-bottom: 0;
                border-bottom: 0;
            }
        }
    }
    #goods-list .outline_inner{
        padding: 6% 2%;
    }
    #goods-list{
    >.goods-list_outline_inner{
        position: relative;
        &::before{
            content:'';
            width: min(157 / 750 * 100vw, 157px);
            height: min(206 / 750 * 100vw, 206px);
            position: absolute;
            top: -1%;
            left: 3%;
        }
        &::after{
            content:'';
            background: url(../img/object05_sp.png) no-repeat center center/contain;
            width: min(194 / 750 * 100vw, 194px);
            height: min(185 / 750 * 100vw, 185px);
            position: absolute;
            top: -1.5%;
            left: 74%;
        }
    }
}
    .btn-list{
        width: 100%;
        margin-left: -1.6%;
        >li{
            width: calc(99% / 2);
        }
    }
    .btn-goods-list{
        margin-left: -2%;
    }
    #popup{
        background: url(../img/p-bg-sp.gif) repeat top center;
        padding: 10% 0 9%;
        p{
            max-width: min(576 / 750 * 100vw, 576px);
            &:nth-of-type(1){
            margin-bottom: 4%;
            }
        }
        &::before{
        content: '';
        display: block;
        background: url(../img/p-border01_sp.png) repeat center center/contain;
        width: 100%;
        height: min(15 / 750 * 100vw, 15px);
        position: absolute;
        top: 2%;
        left: 0;
        }
        &::after{
            content: '';
            display: block;
            background: url(../img/p-border02_sp.png) repeat center center/contain;
            width: 100%;
            height: min(15 / 750 * 100vw, 15px);
            position: absolute;
            bottom: 2.5%;
            left: 0;
        }
    }
    #popup h2{
        max-width: min(505 / 750 * 100vw, 505px);
        padding-bottom: 3%;
    }
    .popup_container{
        >span:nth-of-type(1){
            width: min(130 / 750 * 100vw, 130px);
            top: -1.5%;
        }
        >span:nth-of-type(2){
            width: min(170 / 750 * 100vw, 170px);
            top: 94%;
            left: 76%;
        }
    }
    .banner_area{
        margin-top: 10%;
    }
    .banner_list{
        margin: 0 auto;
        flex-direction: column;
        margin-bottom: 6%;
        >li{
            width: 82%;
            margin-bottom: 2%;
            &:nth-of-type(1){
                z-index: 3;
            }
        }
    }
    .share_list{
        max-width: 55%;
        /* margin-bottom: ; */
    }
    .footer{
        padding: 0 1%;
        height: 170px;
        >.footer__copy{
            font-size: 12px;
        }
    }

    /*------------------------------------------------------------------------------
    グッズページ
    -------------------------------------------------------------------------------*/
    .btn-list_container{
        max-width: 87%;
    }
    .btn-list-goods{
        padding-left: 0;
    }
    .btn-list-sp_container{
        top: 55px;
        >ul{
            >li{
                width: 115px;
                height: 55px;
                font-size: 0.8rem;
            }
        }
    }
    /* スクロールバー非表示（見た目だけ） */
    .btn-list-sp_container ul::-webkit-scrollbar {
        display: none;/* Chrome/Safari */
    }
    .goods_inner h2{
        margin: 2% auto 6%;
    }
    .ttl_3rdchara{
        width: min(541 / 750 * 100vw, 541px);
    }   
    .ttl_hanne{
        width: min(600 / 750 * 100vw, 600px)
    }
    .ttl_shitamachi{
        width: min(223 / 750 * 100vw, 223px);
    }
    .ttl_shinden{
        width: min(229 / 750 * 100vw, 223px);
    }
    .ttl_entourage{
        width: min(492 / 750 * 100vw, 492px);
    }
    .ttl_ehrenfest{
        width: min(586 / 750 * 100vw, 586px);
    }
    .ttl_gots{
        width: min(229 / 750 * 100vw, 229px);
    }
    .ttl_second{
        width: min(120 / 750 * 100vw, 120px);
    }
    .goods_wrapper {
        gap: 2.5%;
        margin-bottom: -4%;
    }
    .goods_box{
        width: calc(97.5% / 2);
        margin-bottom: 5%;
        p:nth-of-type(2){
            font-size: 1rem;
            letter-spacing: -0.06rem;
        }
    }
    .pc{
        display: none;
    }


    /* 対象商品一覧へボタン */
    #btn-to-goods a {
        width: min(174 / 750 * 100vw, 174px);
    }
}