*,
html,
body {
    line-height: 2.2;
    font-family: "Noto Serif JP", serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-size: 17px;
    overflow: hidden;
}

html,
body {
    overscroll-behavior: none;
}

body {
    background: #222734;
}

img {
    width: 100%;
    height: auto;
}

.br {
    display: block;
}

.sp_br {
    display: none;
}

@media (max-width: 960px) {

    *,
    html,
    body {
        font-size: 15px;
    }
}

@media (max-width: 768px) {

    *,
    html,
    body {
        font-size: 13px;
    }

    .br {
        display: none;
    }

    .sp_br {
        display: block;
    }
}

header {
    position: fixed;
    right: 20px;
    bottom: 1rem;
    z-index: 100;
}

.image-hover-fade.nav01 {
    width: 77px;
    height: 28px;
    display: block;
}

.image-hover-fade.nav02 {
    width: 57px;
    height: 35px;
    display: block;
}

.image-hover-fade.nav03 {
    width: 87px;
    height: 37px;
    display: block;
}

.image-hover-fade.nav04 {
    width: 123px;
    height: 53px;
    display: block;
}

.nav_list {
    background: url("../../assets/img/nav_list_bg.svg") center center no-repeat;
    position: relative;
}

.nav_list ul {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.nav_line_block {
    display: none;
}

.nav_list ul li:nth-child(1) {
    margin: 0 0 1rem 0;
}

.nav_list ul li:nth-child(2) {
    margin: 0 0 1rem 0;
}

.nav_list ul li:nth-child(3) {
    margin: 0 0 1.5rem 0;
}

@media (max-width: 768px) {
    header {
        right: 5px;
        top: 0;
        transform: translateY(0);
        z-index: 100;
        opacity: 0;
        transition: .6s;
    }

    header.active {
        opacity: 1;
    }

    .nav_list {
        background: url("../../assets/img/nav_list_bg__sp.svg") center center no-repeat;
        background-size: auto 100%;
        transform: translateY(-18rem);
        transition: .4s;
    }

    .nav_list.active {
        transform: translateY(-1rem);
        transition: .4s;
    }

    .nav_list ul {
        height: 300px;
        padding-top: 38px;
    }

    .image-hover-fade.nav01 {
        width: 65px;
        height: 26px;
    }

    .image-hover-fade.nav02 {
        width: 54px;
        height: 33px;
    }

    .image-hover-fade.nav03 {
        width: 85px;
        height: 35px;
    }

    .image-hover-fade.nav04 {
        width: 97px;
        height: 51px;
    }

    .nav_line_block {
        display: block;
        position: absolute;
        left: 52%;
        transform: translateX(-50%);
        bottom: 14%;
        width: 44px;
        height: 27px;
        cursor: pointer;
        overflow: visible;
    }

    .nav_line {
        width: 40px;
        height: 4px;
        background: #A99B0B;
        position: absolute;
    }

    .nav_line:nth-child(1) {
        top: 0;
        left: 3%;
        transform: rotate(-6deg);
        transition: .3s;
    }

    .nav_line:nth-child(2) {
        top: 11px;
        left: 18%;
        transform: rotate(3deg);
        transition: .3s;
    }

    .nav_line:nth-child(3) {
        bottom: 0;
        left: 0;
        transform: rotate(-7deg);
        transition: .3s;
    }

    .nav_list.active .nav_line:nth-child(1) {
        width: 46px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(-30deg);
    }

    .nav_list.active .nav_line:nth-child(2) {
        opacity: 0;
        transition: .3s;
    }

    .nav_list.active .nav_line:nth-child(3) {
        width: 46px;
        top: 50%;
        left: 55%;
        transform: translate(-50%, -50%) rotate(30deg);
    }
}


/*画面固定スクロール*/
.scroll_section {
    position: relative;
}

.main_visual__h2 {
    position: absolute;
    left: 15%;
    width: clamp(6.875rem, -2.125rem + 15vw, 12.875rem);
    z-index: 100;
    transition: opacity .6s;
    opacity: 1;
}

.main_visual__h2.is-fixed {
    position: fixed;
    top: 50px;
    pointer-events: none;
    opacity: 1;
    transition: opacity .6s;
}

.main_visual__h2.is-hidden {
    opacity: 0;
    transition: opacity .6s;
}

@media (max-width: 768px) {
    h2.main_visual__h2 {
        left: 7%;
        bottom: 20%;
        width: clamp(6.125rem, 0.011rem + 26.8vw, 12.875rem);
    }
}

/*メインビジュアル*/
.main_visual {
    background: #222734;
    position: relative;
}

.main_visual__bg {
    position: relative;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    max-width: 2500px;
    width: 100%;
}

.top_hands {
    display: flex;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -2rem;
    gap: 15vw;
}

img.hand_left {
    width: clamp(12.5rem, -3.344rem + 26.41vw, 23.063rem);
    height: auto;
}

img.hand_right {
    width: clamp(12.5rem, -3.344rem + 26.41vw, 23.063rem);
    height: auto;
}

@media (max-width: 768px) {
    .top_hands {
        width: 100%;
        justify-content: space-between;
        padding: 0 10px;
        box-sizing: border-box;
    }

    img.hand_left {
        width: clamp(10.375rem, 0.016rem + 45.41vw, 21.813rem);
    }

    img.hand_right {
        width: clamp(10.375rem, 0.016rem + 45.41vw, 21.813rem);
    }
}

.top_catch {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 10%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.top_catch h1 {
    margin: 0 0 1vw 0;
    width: clamp(10rem, 1rem + 15vw, 16rem);
}

.top_catch__object {
    margin: 0 0 3vw 0;
    width: clamp(18.75rem, 0.375rem + 30.63vw, 31rem);
    height: auto;
}

.top_catch__copy {
    margin: 0 0 4vw 0;
    width: clamp(10rem, 3.625rem + 10.63vw, 14.25rem);
    height: auto;
}

.top_catch__bottom_list {
    display: flex;
    flex-direction: column;
}

.top_catch__bottom_list img:nth-child(1) {
    margin: 0 0 1vw 0;
    width: clamp(0.5rem, 0.031rem + 0.78vw, 0.813rem);
    height: auto;
}

.top_catch__bottom_list img:nth-child(2) {
    margin: 0 0 5vw 0;
    width: clamp(0.813rem, -0.219rem + 1.72vw, 1.5rem);
    height: auto;
}

.top_catch__bottom_list img:nth-child(3) {
    margin: 0 0 0 0;
    width: clamp(0.688rem, -0.25rem + 1.56vw, 1.313rem);
    height: auto;
}

@media (max-width: 768px) {
    .top_catch {
        top: 13%;
    }

    .top_catch h1 {
        margin: 0 0 1vw 0;
        width: clamp(8.563rem, 0.015rem + 37.47vw, 18rem);
    }

    .top_catch__object {
        margin: 0 0 3vw 0;
        width: clamp(14.813rem, -0.075rem + 65.26vw, 31.25rem);
    }

    .top_catch__copy {
        margin: 0 0 12vw 0;
        width: clamp(10.563rem, -0.023rem + 46.4vw, 22.25rem);
    }

    .top_catch__bottom_list img:nth-child(1) {
        margin: 0 0 2vw 0;
        width: clamp(0.375rem, -0.021rem + 1.74vw, 0.813rem);
    }

    .top_catch__bottom_list img:nth-child(2) {
        margin: 0 0 10vw 0;
        width: clamp(0.75rem, -0.042rem + 3.47vw, 1.625rem);
    }

    .top_catch__bottom_list img:nth-child(3) {
        margin: 0 0 0 0;
        width: clamp(0.563rem, -0.004rem + 2.48vw, 1.188rem);
    }

    h2.main_visual__h2 {
        left: 7%;
        bottom: 20%;
        width: clamp(6.125rem, 0.011rem + 26.8vw, 12.875rem);
    }
}

/*アニメーション*/
header {
    opacity: 0;
    transition: .6s ease-out;
    pointer-events: none;
}

.top_hands {
    opacity: 0;
    overflow: visible;
}

.top_hands .hand_right {
    transform: rotate(15deg);
    transform-origin: top left;
    transition: 1.5s ease-out;
}

.top_hands .hand_left {
    transform: rotate(-15deg);
    transform-origin: top right;
    transition: 1.5s ease-out;
}

.top_catch {
    overflow: visible;
    transition: .8s ease-out;
}

.top_catch h1 {
    transform: translateY(-15px);
    opacity: 0;
    transition: .8s ease-out;
}

.top_catch__object {
    transform: translateY(-10px);
    opacity: 0;
    transition: .8s ease-out;
}

.top_catch__copy {
    opacity: 0;
    transition: .8s ease-out;
}

.top_catch__bottom_list {
    opacity: 0;
    transition: .8s;
}


header.show {
    opacity: 1;
    transition: 1.6s ease-out;
    pointer-events: auto;
}

@media (max-width: 768px) {
    header.show {
        opacity: 0;
    }

    header.active {
        opacity: 1;
    }

    header.show.active {
        opacity: 1;
    }
}

.top_hands.show {
    transition: .6s;
    opacity: 1;
}

.top_hands.show .hand_left {
    transform: rotate(0);
}

.top_hands.show .hand_right {
    transform: rotate(0);
}


.top_catch h1.show {
    opacity: 1;
    transform: translateY(0);
}

.top_catch__object.show {
    opacity: 1;
    transform: translateY(0);
}

.top_catch__copy.show {
    opacity: 1;
}

.top_catch__bottom_list.show {
    opacity: 1;
}


.top_hands.show .hand_left {
    transform: rotate(0);
}

.top_hands.show .hand_right {
    transform: rotate(0);
}

@keyframes rotateRight {
    0% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(5deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

@keyframes rotateLeft {
    0% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(-5deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

.top_hands.animation .hand_right {
    transform-origin: top left;
    animation: rotateRight 2.8s ease-out forwards;
}

.top_hands.animation .hand_left {
    transform-origin: top right;
    animation: rotateLeft 2.8s ease-out forwards;
}



/*メインビジュアル下*/
.main_visual__bottom {
    background: #ED75A1;
    margin: -20px 0 0 0;
    position: relative;
    z-index: 10;
    padding: 6rem 0 6rem 0;
    overflow: visible;
}

.main_visual__bottom:after {
    content: "";
    height: 3rem;
    width: 100%;
    background: #ED75A1;
    position: absolute;
    bottom: -3rem;
    left: 0;
    z-index: -1;
}

.main_visual__bottom__top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16rem;
    overflow: visible;
}

.mvb__p01 {
    position: relative;
    overflow: visible;
}

.g_hand {
    position: absolute;
    right: -3rem;
    top: -2.5rem;
    width: clamp(18.75rem, 5.438rem + 22.19vw, 27.625rem);
    z-index: 20;
}

.g01 {
    width: clamp(11.25rem, -4.688rem + 26.56vw, 21.875rem);
    height: auto;
}

.g01_slide {
    width: clamp(11.25rem, -4.688rem + 26.56vw, 21.875rem);
    height: auto;
    position: relative;
    z-index: 10;
}

.g02 {
    width: clamp(17.5rem, -5.094rem + 37.66vw, 32.563rem);
    height: auto;
    position: absolute;
    left: -6vw;
    bottom: -4vw;
}

.mvb__p02 {
    position: absolute;
    left: 74%;
    top: 40%;
    transform: translateX(-50%);
    z-index: 20;
    overflow: visible;
}

.g03_slide {
    width: clamp(11.25rem, -6.75rem + 30vw, 23.25rem);
    height: auto;
    position: relative;
    z-index: 10;
}

.g03 {
    width: clamp(11.25rem, -6.75rem + 30vw, 23.25rem);
    height: auto;
}

.g04 {
    width: clamp(7.5rem, -0.094rem + 12.66vw, 12.563rem);
    height: auto;
    position: absolute;
    right: -5rem;
    bottom: 1rem;
}

.g05 {
    width: clamp(8rem, 0.913rem + 10.81vw, 10.125rem);
}

@media (max-width: 768px) {
    .main_visual__bottom {
        padding: 0 0 4rem 0;
    }

    .main_visual__bottom:after {
        bottom: -2rem;
    }

    .g_hand {
        top: 0;
        width: clamp(14.813rem, -0.132rem + 65.51vw, 31.313rem);
    }

    .main_visual__bottom__top {
        padding: 38vw 0 0 0;
        gap: 68vw;
    }

    .g01 {
        width: clamp(10.25rem, 0.004rem + 44.91vw, 21.563rem);
    }

    .g01_slide {
        width: clamp(10.25rem, 0.004rem + 44.91vw, 21.563rem);
    }

    .g02 {
        width: clamp(15.625rem, -0.112rem + 68.98vw, 33rem);
        left: -12vw;
        bottom: -10vw;
    }

    .mvb__p02 {
        position: absolute;
        left: 72%;
        top: 90vw;
        z-index: 20;
    }

    .g03_slide {
        width: clamp(10.563rem, -0.08rem + 46.65vw, 22.313rem);
    }

    .g03 {
        width: clamp(10.563rem, -0.08rem + 46.65vw, 22.313rem);
        transform: scale(-1, 1);
    }

    .g04 {
        width: clamp(5.688rem, 5.574rem + 0.5vw, 5.813rem);
        right: 35vw;
        bottom: 1rem;
        transform: scale(-1, 1);
    }

    .g05 {
        width: clamp(4.938rem, 0.013rem + 21.59vw, 10.375rem);
        transform: translateX(8vw);
    }
}


/*text_section*/
.text_section {
    position: relative;
}

.text_section:after {
    content: "";
    height: 3rem;
    width: 100%;
    background: #222734;
    position: absolute;
    left: 0;
    bottom: 0rem;
}

.text_section__inner {
    background: #ED75A1;
    padding: 14vw 0 0 0;
}

.text_section__txt {
    width: auto;
    margin: 0 0 0 41%;
    position: relative;
    z-index: 50;
}

.text_section__txt p {
    color: #222734;
    letter-spacing: .1rem;
    line-height: 2.4;
    margin: 0 0 2rem 0;
}

img.text_section__img {
    position: relative;
    width: calc(100% + 2px);
    height: auto;
    margin-top: -22vw;
    transform: translateX(-2px);
}

@media (max-width: 768px) {
    .text_section__txt {
        width: 100%;
        margin: 0 auto 0 auto;
        position: relative;
        z-index: 50;
        text-align: center;
        padding: 50px 20px 0 20px;
        box-sizing: border-box;
        transform: translateY(-3.5rem);
    }

    .text_section:after {
        content: "";
        height: 2rem;
        bottom: -1rem;
    }

    img.text_section__img {
        margin-top: -12vw;
    }
}


/*flavor_section*/
.flavor_section {
    background: #222734;
    color: #A99B0B;
    width: 100%;
    overflow: hidden;
    padding: 10rem 0 50rem 0;
}

@media (max-width: 768px) {
    .flavor_section {
        padding: 2rem 0 70rem 0;
    }
}


.flavor_block_wrap {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    box-sizing: border-box;
    position: relative;
    overflow: visible;
    /*pointer-events: none;*/
}

.flavor_block {
    width: 100%;
}

.pin-spacer {
    height: 580px !important;
    width: 100% !important;
    max-width: 100% !important;
}

.flavor_block {
    height: 580px !important;
    position: relative;
    overflow: visible;
    margin-top: 120px;
    margin-right: auto;
    margin-left: auto;
    width: 100% !important;
    max-width: 100% !important;
}

.flavor_block__wrap {
    width: 82vw;
    height: 100vh;
    margin: 0 auto;
    position: relative;
    position: relative;
    perspective: 1200px;
    height: 100vh;
    overflow: hidden;
    pointer-events: none;
}

.flavor_block__wrap__inner {
    border-top: 2px solid #A99B0B;
    border-left: 2px solid #A99B0B;
    border-right: 2px solid #A99B0B;
    border-bottom: 2px solid #A99B0B;
    height: 580px !important;
    overflow: hidden;
}


.flavor_block__area-wrap {
    /*scroll-snap-align: start;*/
    height: 584px !important;
    /*pointer-events: none;*/

}

/* 最初と最後はスナップを弱める
.flavor_block__area-wrap:first-child,
.flavor_block__area-wrap:last-child {
    scroll-snap-align: none;
}
 */

@media (max-width: 768px) {
    .pin-spacer {
        height: 90vh !important;
    }

    .flavor_block__wrap {
        width: 78vw;
        height: 85vh;
        position: relative;
        z-index: 0;
        border-bottom: 1px solid #A99B0B;
    }

    .flavor_block__wrap__inner {
        height: 85vh !important;
    }

    .flavor_block {
        height: auto !important;
        margin-top: 0;
    }
}

.flavor_block__area {
    position: static;
    top: 0;
    left: 0;
    width: 100%;
    height: 580px !important;
    padding: 0 0;
    box-sizing: border-box;
    opacity: 1;
    transform: translateY(0px);
    transition: none;

    display: flex;
    align-items: center;
    flex-direction: row;
}

.flavor_block__area_last {
    border-bottom: transparent;
}

.flavor_block__area_month {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 95px;
    height: 315px;
    white-space: nowrap;
    overflow: visible;
}

.flavor_block__area_month:before {
    content: "";
    background: url("../../assets/img/flavor_month_parts.svg") center center no-repeat;
    background-size: cover;
    width: 95px;
    height: 315px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
}

.flavor_block__area_month .num {
    transform: translateX(.5rem);
    font-size: 28px;
    font-weight: lighter;
}

.flavor_block__area img {
    width: 38%;
    height: auto;
    padding: 0 0 0 4vw;
}

.flavor_block__area .flavor_block__area_right {
    width: 50%;
    height: auto;
    padding: 0 5vw 0 5vw;
}

.flavor_block__area h3 {
    font-size: 30px;
    font-weight: lighter;
}

.flavor_block__area h4 {
    font-size: 20px;
    font-weight: lighter;
    line-height: 1.5;
}

.flavor_block__area p {
    font-weight: lighter;
}

h2.flavor_ttl {
    position: absolute;
    margin: 0 0 0 3.5vw;
    line-height: 1;
    width: 430px;
    height: 124px;
    transform: translateY(-123px);
}

.flavor_arrow {
    position: absolute;
    top: 51%;
    transform: translateY(-50%);
    left: 0;
    width: 11.5vw;
    transition: .6s;
}

/*
.flavor_arrow.is-last{
    top: auto;
    bottom: calc((545px / 2) - 4.5vw);
    transition: .6s;
    transform: translateY(0);
}
*/

@media (max-width: 768px) {
    h2.flavor_ttl {
        position: static;
        width: 175px;
        height: 50px;
        margin: 0 auto 0 auto;
        line-height: 1;
        display: block;
        transform: translateY(0px);
    }

    .flavor_block_wrap {
        padding: 0 0 0 0;
    }

    .flavor_block__wrap {}

    .flavor_block__wrap__inner {
        border-top: 1px solid #A99B0B;
        border-left: 1px solid #A99B0B;
        border-right: 1px solid #A99B0B;
        border-bottom: 1px solid #A99B0B;
    }

    .flavor_block__area {
        width: 100%;
        height: auto !important;
        padding: 30px 0;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        position: relative;

    }

    .flavor_block__area_last {
        /*height: 85vh !important;*/
        border-bottom: transparent !important;
    }

    .flavor_block__area:before {
        content: "";
        background: url("../../assets/img/flavor_month_parts__sp.svg") center center no-repeat;
        background-size: cover;
        width: 96px;
        height: 93px;
        position: absolute;
        top: 1px;
        transform: translateY(0);
        left: 1px;
        z-index: 1;
    }

    .flavor_block__area_month {
        display: block;
        width: auto;
        height: auto;
        position: absolute;
        top: 2%;
        left: 6%;
        z-index: 20;
        line-height: 1;
    }

    .flavor_block__area_month:before {
        display: none;
    }

    .flavor_block__area_month .num {
        transform: translateX(0);
        font-size: 22px;
        font-weight: lighter;
    }

    .flavor_block__area img {
        width: 90%;
        height: auto;
        padding: 0 0 0 0;
        max-width: 500px;
        margin: 0 0 10px 0;
    }

    .flavor_block__area .flavor_block__area_right {
        width: 90%;
        max-width: 500px;
        height: auto;
        padding: 0 0 0 0;
    }

    .flavor_block__area h3 {
        font-size: clamp(1.25rem, -0.015rem + 5.5vw, 2.625rem);
        margin: 0 0 .75rem 0;
    }

    .flavor_block__area h4 {
        font-size: clamp(0.813rem, 0.065rem + 3.25vw, 1.625rem);
        margin: 0 0 .75rem 0;
    }

    .flavor_block__area p {
        font-size: clamp(0.813rem, 0.065rem + 3.25vw, 1.625rem);
        line-height: 1.6;
        overflow: visible;
    }

    .flavor_arrow {
        position: absolute;
        top: -2.5vw;
        transform: translateY(0);
        left: 0;
        width: 16vw;
    }

    /*
    .flavor_arrow.is-last{
        top: -8.5vw;
    }
     */
}

@media (max-width: 500px) {
    .flavor_arrow {
        top: .5vw;
        width: 17vw;
    }

    /*
    .flavor_arrow.is-last{
        top: -9vw;
    }
     */
}

.flavor_block_nav {
    position: absolute;
    /*top: 70%;*/
    right: 3.2vw;
    top: 51%;
    transform: translateY(-50%);
    pointer-events: none;
}

.flavor_block_nav ul {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.flavor_block_nav ul li {
    flex: 1;
}

@media (max-width: 768px) {
    .flavor_block_nav {
        top: 52%;
        right: 3.2vw;
    }

    .flavor_block_nav ul li {
        line-height: 1;
        margin: .5rem 0;
        transform: scale(.8);
    }
}

.image-hover-fade {
    position: relative;
    height: auto;
    display: inline-block;
    overflow: hidden;
}

.image-hover-fade img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    transition: opacity 0.2s ease;
    display: block;
}

.img-hover {
    opacity: 0;
    z-index: 1;
}

.image-hover-fade:hover .img-hover,
.image-hover-fade.show .img-hover {
    opacity: 1;
}

.image-hover-fade:hover .img-default,
.image-hover-fade.show .img-default {
    opacity: 0;
}

.fnav01 {
    width: 10px;
    height: 14px;
}

.fnav02 {
    width: 11px;
    height: 11px;
}

.fnav03 {
    width: 12px;
    height: 17px;
}

.fnav04 {
    width: 14px;
    height: 13px;
}

.fnav05 {
    width: 14px;
    height: 14px;
}

.fnav06 {
    width: 12px;
    height: 12px;
}

.fnav07 {
    width: 6px;
    height: 14px;
}

.fnav08 {
    width: 12px;
    height: 13px;
}

.fnav09 {
    width: 17px;
    height: 13px;
}

.fnav10 {
    width: 12px;
    height: 15px;
}

.fnav11 {
    width: 14px;
    height: 14px;
}

.fnav12 {
    width: 12px;
    height: 16px;
}


/*shop_section*/
.shop_section {
    background: #222734;
    padding: 5rem 0 12rem 0;
}

.shop_section__inner {
    margin: 0 auto;
    width: clamp(18.75rem, 6.027rem + 26.79vw, 32.813rem);
    position: relative;
    overflow: visible;
}

.shop_section__inner img.shop_img {
    width: clamp(18.75rem, 6.027rem + 26.79vw, 32.813rem);
    height: auto;
}

.shop_img_slide {
    width: clamp(18.75rem, 6.027rem + 26.79vw, 32.813rem);
    height: auto;
}

.shop_section__inner img.shop_ttl {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -20vw;
    width: clamp(11.25rem, 7.009rem + 8.93vw, 15.938rem);
}

.shop_section__link {
    position: absolute;
    top: 50%;
    right: -10rem;
    width: clamp(11.25rem, 4.182rem + 14.88vw, 19.063rem);
    height: 126px;
}

.scroll-infinity {
    width: clamp(11.25rem, 5.935rem + 11.19vw, 17.125rem);
    position: absolute;
    top: 70%;
    right: -11rem;
    transform: rotate(-15deg);
}

@keyframes infinity-scroll-left {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}

.scroll-infinity__wrap {
    display: flex;
    overflow: hidden;
    gap: 5px;
}

.scroll-infinity__list {
    display: flex;
    list-style: none;
    padding: 0;
    gap: 10px;
}

.scroll-infinity__list--left .scroll-infinity__item {
    animation: infinity-scroll-left 10s infinite linear 0.5s both;
}

.scroll-infinity__item {
    flex-shrink: 0;
    width: clamp(11.25rem, 5.935rem + 11.19vw, 17.125rem);
}

.scroll-infinity__item>img {
    width: 100%;
}

@media (max-width: 768px) {
    .shop_section {
        background: #222734;
        padding: 8rem 0 15rem 0;
    }

    .shop_section__inner {
        margin: 0 auto;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .shop_section__inner img.shop_ttl {
        position: static;
        transform: translateY(0);
        display: block;
        width: clamp(12.063rem, -0.185rem + 53.25vw, 25.375rem);
        margin: 0 auto 3rem auto;
    }

    .shop_section__inner img.shop_img {
        width: clamp(14.875rem, -0.247rem + 65.75vw, 31.313rem);
        height: auto;
    }

    .shop_img_slide {
        width: clamp(14.875rem, -0.247rem + 65.75vw, 31.313rem);
        height: auto;
    }

    .shop_section__link {
        position: absolute;
        top: auto;
        right: 10%;
        width: clamp(10rem, -0.178rem + 44.25vw, 21.063rem);
        height: clamp(4.125rem, -0.072rem + 18.25vw, 8.688rem);
        bottom: -3rem;
    }

    .scroll-infinity {
        width: clamp(9.5rem, -0.218rem + 42.25vw, 20.063rem);
        position: absolute;
        top: auto;
        bottom: -4.7rem;
        right: 7%;
        transform: rotate(-16deg);
    }

    .scroll-infinity__item {
        width: clamp(9.5rem, -0.218rem + 42.25vw, 20.063rem);
    }
}


/*フッター*/
footer {
    background: #ED75A1;
    position: relative;
    overflow: hidden;
}

footer .foot_top_bar {
    background: #6B95CE;
    width: 100%;
    height: 40px;
}

footer:before {
    content: "";
    background: url("../../assets/img/foot_side_line.svg") 0 0 repeat-y;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 100%;
    z-index: 10;
}

footer:after {
    content: "";
    background: url("../../assets/img/foot_side_line.svg") 0 0 repeat-y;
    background-size: cover;
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 100%;
    z-index: 10;
}

.foot_inner {
    position: relative;
}

.foot_inner:before {
    content: "";
    background: #AD965C;
    position: absolute;
    top: 0px;
    left: 40px;
    width: 14px;
    height: 100%;
    z-index: 10;
}

.foot_inner:after {
    content: "";
    background: #AD965C;
    position: absolute;
    top: 0;
    right: 40px;
    width: 14px;
    height: 100%;
    z-index: 10;
}

.foot_bottom {
    padding: 0 0 30rem 0;
    background: url("../../assets/img/foot_mountain.svg") 55% bottom no-repeat;
    background-size: 190%;
    position: relative;
    z-index: 20;
}

.foot_bottom__txt {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    font-size: 18px;
}

img.insta_link {
    margin: 5rem 0 0 0;
}

.copy {
    text-align: center;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 10px;
    font-size: 15px;
    line-height: 1.4;
}

.copy small {
    font-size: 12px;
}

@media (max-width: 768px) {
    footer .foot_top_bar {
        height: 20px;
    }

    footer:before {
        width: 12px;
    }

    footer:after {
        width: 12px;
    }

    .foot_inner:before {
        left: 12px;
        width: 5px;
    }

    .foot_inner:after {
        right: 12px;
        width: 5px;
    }

    img.insta_link {
        margin: 2rem 0 0 0;
    }

    .foot_bottom {
        padding: 0 0 75vw 0;
        background: url(../../assets/img/foot_mountain__sp.svg) 48% 105% no-repeat;
        background-size: 270%;
        position: relative;
        z-index: 20;
    }

    .copy {
        bottom: 20px;
        font-size: 10px;
        line-height: 1.4;
        white-space: nowrap;
    }

    .copy small {
        font-size: 10px;
        line-height: 2;
    }
}


.foot_top {
    position: relative;
    display: flex;
    justify-content: center;
    padding: 8rem 0 3rem 0;
    overflow: visible;
}

.foot_logo {
    width: 252px;
}

.foot_parts00 {
    position: absolute;
    left: -5%;
    bottom: -20%;
    width: clamp(13.75rem, 25.25vw, 26.25rem);
    z-index: 10;
    max-width: 450px;
}

.foot_parts01 {
    position: absolute;
    left: 12%;
    top: 28%;
    width: clamp(3.75rem, 6.25vw, 6.25rem);
}

.foot_parts02 {
    position: absolute;
    left: 25%;
    top: 30%;
    width: clamp(1.875rem, 0.469rem + 2.34vw, 2.813rem);
}

.foot_parts03 {
    position: absolute;
    right: 15%;
    top: 18%;
    width: clamp(5.5rem, 1.125rem + 5.88vw, 8rem);
    max-width: 104px;
}

.foot_parts04 {
    position: absolute;
    right: 10%;
    bottom: -10%;
    width: clamp(3.75rem, -1.5rem + 8.75vw, 7.25rem);
}

.foot_parts05 {
    position: absolute;
    right: 10%;
    top: 12%;
    width: clamp(6.25rem, -0.031rem + 10.47vw, 10.438rem);
    max-width: 140px;
}

.foot_parts06 {
    position: absolute;
    right: 25%;
    top: 36%;
    width: clamp(3.875rem, .994rem + 4.97vw, 5.963rem);
    max-width: 90px;
}

.foot_parts07 {
    position: absolute;
    left: 10%;
    top: 40%;
    width: clamp(5rem, 0.781rem + 7.03vw, 7.813rem);
}

.foot_parts08 {
    position: absolute;
    left: 70%;
    bottom: -2%;
    width: clamp(12.5rem, -4.375rem + 28.13vw, 23.75rem);
}

@media (max-width: 768px) {
    .foot_top {
        padding: 10rem 0 3rem 0;
    }

    .foot_logo {
        width: clamp(8.875rem, -0.152rem + 39.25vw, 18.688rem);
    }

    .foot_parts00 {
        position: absolute;
        left: -3%;
        bottom: -6%;
        width: clamp(5.625rem, -2.425rem + 35vw, 14.375rem);
    }

    .foot_parts01 {
        position: absolute;
        left: 8%;
        top: 28%;
        width: clamp(3.75rem, 6.25vw, 6.25rem);
    }

    .foot_parts02 {
        position: absolute;
        left: 25%;
        top: 22%;
        width: clamp(1.875rem, 0.469rem + 2.34vw, 2.813rem);
    }

    .foot_parts03 {
        position: absolute;
        right: 10%;
        top: 18%;
        width: clamp(5.25rem, 1.125rem + 5.88vw, 8rem);
    }

    .foot_parts04 {
        position: absolute;
        right: 7%;
        bottom: -10%;
        width: clamp(4.75rem, -0.5rem + 9.75vw, 8.25rem);
    }

    .foot_parts05 {
        position: absolute;
        right: 2%;
        top: 35%;
        width: clamp(5.25rem, -0.021rem + 9.47vw, 9.438rem);
    }

    .foot_parts06 {
        position: absolute;
        right: 15%;
        top: 55%;
        width: clamp(3.375rem, .094rem + 4.47vw, 5.563rem);
    }

    .foot_parts07 {
        position: absolute;
        left: 3%;
        top: 25%;
        width: clamp(4rem, 0.681rem + 6.03vw, 6.813rem);
    }

    .foot_parts08 {
        position: absolute;
        left: 75%;
        bottom: 3%;
        width: clamp(10.5rem, -4.375rem + 26.13vw, 21.75rem);
        transform: rotate(-22deg);
    }
}

/*ローディング*/
#main-content {
    opacity: 0;
    transition: opacity 1s ease;
}

#main-content.show {
    opacity: 1;
}

#loading-screen {
    position: fixed;
    inset: 0;
    background: #222734;
    z-index: 9999;
    width: 100vw;
    height: 100vh;
    opacity: 1;
    transition: opacity 1s ease;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* フェードアウト後に非表示にするクラス */
#loading-screen.hide {
    opacity: 0;
    pointer-events: none;
}

#loading-screen video {
    width: 218px;
    height: auto;
}

@media (max-width: 768px) {
    #loading-screen video {
        width: 130px;
        height: auto;
    }
}


/*パララックスアニメーション*/
.parallax-element {
    will-change: transform;
    transition: transform 0.1s ease-out;
}

/*下からフェードイン*/
.fadein-element {
    opacity: 0;
    transform: translateY(80px);
}


html {
    /* make all smooth scrollIntoView calls offset by 170px from the top */
    scroll-padding-top: 170px;
    scroll-behavior: smooth;
    /* optional: makes all scrollIntoView calls smooth by default */
}

@media (max-width: 768px) {
    html {
        /* tablet / mobile offset */
        scroll-padding-top: 70px;
    }
}

.slick-list {
    overflow: visible !important;
    padding: 0 1px !important;
}