body {
    background: #ffeef3;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 16px;
    color: #464646;
}

body::-webkit-scrollbar {
    display: none;
}

/* ハンバーガーメニュー展開時、背景を固定 */
body.hidden {
    overflow: hidden;
    height: 100%;
}

a {
    color: #3b5471;
    word-break: break-all;
}

a[href=""] {
    pointer-events: none;
    cursor: not-allowed;
}

img {
    max-width: 100%;
    width: auto;
    height: auto;
    vertical-align: bottom;

    image-rendering: -webkit-optimize-contrast;
}

.info {
    background: #53c4a6;
}

.goods {
    background: #d29dff;
}

.event {
    background: #fa588d;
}

.store {
    background: #f4973a;
}

/* area -- width:100%制御 */
header {
    position: fixed;
    z-index: 9999;
    width: 100%;
    height: clamp(60px, 12.8vw, 70px);
}

main {
    margin-top: clamp(60px, 12.8vw, 70px);
    width: 100%;
}

footer {
    margin-top: auto;
    width: 100%;
}

.header-area,
.contents-area,
.banner-area,
.sns-area,
.tweet-area,
.copyright-area {
    width: 100%;
}

.header-area {
    height: 100%;
    background: #ffffff;
    box-shadow: 0 2px 3px rgba(145, 136, 139, .15);
}

.contents-area {
    background: transparent;
}

.banner-area#f-area01 {
    background: transparent;
}

.banner-area#f-area02,
.tweet-area#f-area05 {
    background: #eeeeee;
}

.sns-area {
    background: #ffc7d7;
}

.copyright-area {
    position: relative;
    background: #332a2f;
    color: #ffffff;
    text-align: center;
}

.top-btn {
    margin: 0 auto;
    padding: .5em 0;
    width: 100%;
    background: #eeeeee;
    text-align: center;
}

.top-btn a img {
    margin: .5em auto;
    width: 60px;
}

.top-btn2 {
    margin: 1em auto 0;
    padding: 0 0;
    width: 100%;
    background: #eeeeee;
    text-align: center;
}

.top-btn2 a img {
    margin: 0 auto;
    width: 60px;
}

/* block -- max-width制御 */
.menu-block,
.contents-block,
.banner-block {
    width: min(100%, 800px);
}

@media screen and (min-width: 801px) {

    .menu-block,
    .contents-block,
    .banner-block {
        width: min(90%, 1200px);
    }
}

.contents-block {
    margin: 0 auto;
    padding: 0 5% 2em;
    background: #ffffff;
    box-shadow: 0 3px 12px rgba(207, 193, 197, .3);
}

.contents-block + * {
    margin: 2em auto;
}

@media screen and (min-width: 801px) {
    .contents-block {
        margin: 0 auto;
        padding: 0 5% 4em;
        border-radius: .5em;
    }

    .contents-block.no-radius {
        border-radius: 0;
        border-bottom-left-radius: .5em;
        border-bottom-right-radius: .5em;
    }

    .contents-block + * {
        margin: 2em auto;
    }
}

/* footer */
.sns-area {
    margin: 4em auto 2em;
    padding: 1em 0 1em;
}

.sns-area p {
    font-family: "Montserrat", sans-serif;
    font-family: "M PLUS 1p", sans-serif;
    font-size: clamp(18px, .857rem + .86vw, 24px);
    line-height: 1;
    font-weight: 400;
    color: #ffffff;
    /*color: #363636;*/
    text-align: center;
}

.copyright-block {
    margin: 0 auto;
    padding: 2.5em;
    width: min(100%, 1200px);
    font-size: clamp(12px, .661rem + .29vw, 14px);
    line-height: 1;
    color: #ffffff;
    text-align: center;

    user-select: none;
}

.sns-block {
    display: flex;
    justify-content: center;
    margin: -2em auto 0;
    padding: 2em 0;
    max-width: 280px;
    text-align: center;
}

.sns-block2 {
    display: flex;
    justify-content: center;
    margin: 0 auto;
    padding: 1em 0 0;
    text-align: center;
}

.sns-block3 {
    display: flex;
    justify-content: center;
    margin: 0 auto;
    padding: 0;
}

.sns-block li,
.sns-block2 li {
    width: calc(50px + 2em);
}

.sns-block3 li {
    width: 50%;
    padding: 0 3.5%;
}

.sns-block li:hover,
.sns-block2 li:hover,
.sns-block3 li:hover {
    animation: on-zoomin 1s;
}

.sns-block3 li img {
    width: 100%;
}

.sns-block svg,
.sns-block2 svg,
.sns-block3 svg {
    display: block;
}

#f-area01 .banner-block {
    margin: 0 auto;
    padding: 2em 0;
    width: 90%;
}

#f-area02 .banner-block2 {
    margin: 0 auto;
    padding: 2em 0 1em;
    /*width: 90%;*/
    width: 86%;
}

.banner-block li {
    display: block;
}

.banner-block li + * {
    margin-top: 1em;
}

.banner-block2 li + * {
    margin-top: 1em;
}

#f-area01 .banner-block li img {
    display: block;
    margin: 0 auto;
    box-shadow: 0px 2px 2px rgba(59, 51, 51, .4);
}

#f-area02 .banner-block2 li img {
    display: block;
    margin: 0 auto;
    box-shadow: 0px 2px 2px rgba(59, 51, 51, .4);
}

.banner-dummy {
    height: 0;
}

#f-area05 .tweet-block {
    width: 93%;
    margin: 0 auto;
    padding: 0 0 1em;
    display: flex;
    flex-direction: column;
}


/*@media screen and (min-width: 801px) {*/
@media screen and (min-width: 768px) {
    .sns-area {
        margin: 4em auto 2em;
        padding: 1em 0 1em;
    }

    .sns-block {
        margin: -3em auto 0;
        padding: 3em 0;
    }

    .banner-block {
        display: flex;

        gap: 0 2em;
    }

    .banner-block2 {
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;

        gap: 0 2em;
    }

    #f-area01 .banner-block {
        margin: 0 auto;
        padding: 4em 0;
        width: min(90%, 1200px);
    }

    #f-area02 .banner-block2 {
        margin: 0 auto;
        padding: 1em 0 1em;
        width: min(90%, 1200px);
    }

    .banner-block li {
        margin: 0 auto;
        width: 50%;
    }

    .banner-block2 li {
        width: calc((100% - 64px) / 3);
        max-width: 380px;
        min-width: 190px;
    }

    .banner-block2 li:first-child {
        margin-top: 1.5em;
    }

    .banner-block2 li + * {
        margin-top: 1.5em;
    }

    .banner-block li img,
    .banner-block2 li img {
        width: 100%;
    }

    .banner-block li:hover,
    .banner-block2 li:hover {
        opacity: .8;
    }

    #f-area05 .tweet-block {
        margin: 0 auto;
        padding: 0 0 2.5em;
        width: min(90%, 1200px);
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: baseline;
    }

    .sns-block3 li {
        width: calc(160px + 2em);
        padding: 0;
    }

    .sns-block3 li img {
        width: 100%;
        max-width: 160px;
    }

    .top-btn2 {
        margin: 0 auto;
        display: flex;
        justify-content: flex-end;
        pointer-events: none;
    }

    .top-btn2 a img {
        width: 60px;
        pointer-events: auto;
    }

    .top-btn2 a img:hover {
        animation: on-zoomin 1s;
    }

}

/* header */
.menu-block {
    position: relative;
    margin: 0 auto;
    height: 100%;
}

.site-name {
    position: absolute;
    top: 50%;
    left: 50%;
    height: clamp(50px, 10vw, 54px);
    text-align: center;
    transform: translate(-50%, -50%);
}

.site-name img {
    padding: 4px;
    width: auto;
    height: 100%;
}

.menu-btn {
    position: absolute;
    top: 50%;
    right: 1em;
    width: 50px;
    height: 50px;
    /* background: #332a2f; */
    transform: translateY(-50%);
}

.open-func {
    position: relative;
    width: 50px;
    height: 50px;
    cursor: pointer;

    user-select: none;
}

.open-func .openbtn-area {
    width: 50px;
    height: 50px;
    transition: all .6s;
}

.open-func span {
    display: inline-block;
    position: absolute;
    left: 7px;
    width: 36px;
    height: 3px;
    border-radius: 2px;
    background: #d6225b;
    transition: all .4s;
}

.open-func span:nth-of-type(1) {
    top: 11px;
}

.open-func span:nth-of-type(2) {
    top: 24px;
}

.open-func span:nth-of-type(3) {
    top: 37px;
}

.open-func.active .openbtn-area {
    transform: rotate(360deg);
}

.open-func.active span:nth-of-type(1) {
    top: 18px;
    left: 5px;
    width: 40px;
    transform: translateY(6px) rotate(-45deg);
}

.open-func.active span:nth-of-type(2) {
    opacity: 0;
}

.open-func.active span:nth-of-type(3) {
    top: 30px;
    left: 5px;
    width: 40px;
    transform: translateY(-6px) rotate(45deg);
}

/* nav */
.nav {
    position: fixed;
    top: clamp(60px, 12.8vw, 70px);
    left: 0;
    z-index: 9999;
    width: 100vw;
    height: 100vh;
    background: #ffeef3;
}

.nav.disabled {
    display: none;
    z-index: -1;
    opacity: 0;
}

.nav-area {
    position: absolute;
    /*top: 30%;*/
    top: 0;
    left: 50%;
    margin: 0 auto;
    padding-bottom: 7.5%;
    width: 100%;
    /*height: 60vh;*/
    text-align: center;
    transform: translate(-50%, 0);

    height: 100vh;
    overflow-x: scroll;

    /*Edgeスクロールバー*/
    -ms-overflow-style: none;
    /*Firefoxスクロールバー*/
    scrollbar-width: none;
}

.nav-area::-webkit-scrollbar {
    /*Chrome、Safariスクロールバー*/
    display: none;
}

.nav-list li {
    /*margin: calc(1em + 4.35vh) auto;*/
    margin: calc(.5em + 4.35vh) auto;
    width: 100%;
    text-align: center;
    opacity: 0;
    animation-duration: .2s;
}

.nav-list li:first-child {
    /*margin: calc(3.5em + 4.35vh) auto calc(1em + 4.35vh);*/
    margin: calc(1.5em + 4.35vh) auto calc(.5em + 4.35vh);
    width: 100%;
    text-align: center;
    opacity: 0;
    animation-duration: .2s;
}

/*.nav-list li a img {
    display: inline-block;
    margin: 0 auto;
    width: 100%;
    height: clamp(44px, 1.321rem + 4.57vw, 76px);
    text-align: center;
}*/

#menu01 img,
#menu02 img,
#menu03 img {
    display: inline-block;
    margin: 0 auto;
    width: 100%;
    height: clamp(44px, 1.321rem + 4.57vw, 76px);
    text-align: center;
}

#menu01.slide-in {
    animation-duration: .5s;
    animation-delay: .3s;

    animation-fill-mode: forwards;
}

#menu02.slide-in {
    animation-duration: .5s;
    animation-delay: .6s;

    animation-fill-mode: forwards;
}

#menu03.slide-in {
    animation-duration: .5s;
    animation-delay: .9s;

    animation-fill-mode: forwards;
}

.logo-20th.fade-in {
    animation-duration: .5s;
    animation-delay: 1.2s;

    animation-fill-mode: forwards;
}

.logo-20th {
    margin: 0 auto;
    max-width: 140px;
    width: 40%;
    text-align: center;
    opacity: 0;
}

.logo-20th img {
    width: 100%;
}

.nav-sns-list {
    display: flex;
    justify-content: center;
    margin: 0 auto;
}

.nav-sns-list.fade-in {
    animation-duration: .5s;
    animation-delay: 1.5s;

    animation-fill-mode: forwards;
}

.nav-sns-list li {
    width: calc(40px + 1.6em);
}

.nav-sns-list li:hover {
    animation: on-zoomin 1s;
}

.nav-sns-list img {
    width: 75%;
}

.nav-sns-list svg {
    display: block;
}

/* ページタイトル */
.page-type {
    margin: 0 auto;
    padding-top: 34px;
    padding-top: clamp(18px, .761rem + 1.82vw, 34px);
    padding-bottom: clamp(24px, 1.136rem + 1.82vw, 40px);
    width: 100%;
    background: #ffc7d7;
    font-size: 16px;
    text-align: center;

    user-select: none;
}

.page-type p {
    display: inline-block;
    padding: .2em 1.15em;
    border-bottom: 1px solid #888888;
    font-family: "Montserrat", sans-serif;
    font-size: calc(clamp(1.5rem, .964rem + 1.71vw, 2.25rem) * 1.18);
    line-height: 1;
    font-weight: 400;
    color: #363636;
    text-align: center;
}

.page-type span {
    display: block;
    padding: .3em 1.15em;
    font-size: calc(clamp(.75rem, .571rem + .57vw, 1rem) * 1.18);
    line-height: 1;
    font-weight: 300;
    color: #363636;
}

/* コンテンツエリアタイトル */
.area-title {
    margin: 0 auto;
    padding-top: clamp(24px, 1.136rem + 1.82vw, 40px);
    padding-bottom: clamp(24px, 1.136rem + 1.82vw, 40px);
    width: 100%;
    font-size: 16px;
    text-align: center;

    user-select: none;
}

.area-title p {
    display: inline-block;
    padding: .2em 1.15em;
    border-bottom: 1px solid #888888;
    font-family: "Montserrat", sans-serif;
    font-family: "M PLUS 1p", sans-serif;
    font-size: clamp(1.5rem, .964rem + 1.71vw, 2.25rem);
    line-height: 1;
    font-weight: 400;
    color: #363636;
    text-align: center;
}

.area-title span {
    display: block;
    padding: .3em 1.15em;
    font-family: "Montserrat", sans-serif;
    font-size: clamp(.75rem, .571rem + .57vw, 1rem);
    line-height: 1;
    font-weight: 300;
    color: #363636;
}

/* ボタン */
.btn {
    margin: 0 auto;
    padding: 2em 0 0;
    width: 100%;
    text-align: center;
}

@media screen and (min-width: 801px) {
    .btn {
        padding: 3.5em 0 0;
    }
}

.btn a {
    display: block;
    position: relative;
    margin: 0 auto;
    padding: 1.15em;
    border-bottom: 1px solid #bababd;
    border-radius: .3em;
    background: #414144;
    font-family: "M PLUS 1p", sans-serif;
    font-size: clamp(16px, .911rem + .29vw, 18px);
    line-height: 1;
    font-weight: 400;
    color: #ffffff;
    text-align: center;

    user-select: none;
}

.btn-small a {
    width: 100%;
}

.btn-large a {
    width: 100%;
}

.btn a:after {
    display: block;
    position: absolute;
    top: 50%;
    right: 1em;
    content: "";
    width: 1.3em;
    height: 1.3em;
    background: url("/import/images/arrow.svg");
    background-size: 1.3em;
    background-repeat: no-repeat;
    transform: translateY(-50%);
}

.btn-small a:hover,
.btn-large a:hover {
    opacity: .9;
}

/* ローディング */
#loading,
#loading2 {
    position: fixed;
    z-index: 9999;
    width: 100vw;
    height: 100vh;
    background: #ffeef3;

    touch-action: none;
}

#loading p {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(30vw, 230px);
    height: min(30vw, 230px);
    transform: translate(-50%, -50%);

    touch-action: none;
}

#loading2 .loading-set {
    position: absolute;
    top: 45%;
    left: 50%;
    width: min(60vw, 230px);
    transform: translate(-50%, -50%);

    touch-action: none;
}

.display {
    display: flex;
    position: relative;
    flex-direction: column;
    min-height: 100vh;
    width: 100%;
    animation: pagein 1s ease-in forwards;
}

.display::before {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    content: "";
    width: 100%;
    height: 100vh;
    background-image: url(../images/grid_bg.png);
    background-size: clamp(80px, 16vw, 120px);
    background-repeat: repeat;
}

.none {
    display: none;
}

.sp {
    display: block;
}

.pc {
    display: none;
}

@media screen and (min-width: 801px) {
    .sp {
        display: none;
    }

    .pc {
        display: block;
    }

    .top-btn {
        position: absolute;
        bottom: 100px;
        left: 50%;
        z-index: 0;
        margin: 0 auto;
        padding: 0 1.15em;
        width: min(100%, 1200px);
        background: transparent;
        text-align: right;
        transform: translateX(-50%);
        pointer-events: none;
    }

    .top-btn a img {
        width: 60px;
        pointer-events: auto;
    }

    .top-btn a img:hover {
        animation: on-zoomin 1s;
    }

    #loading2 .loading-set {
        position: absolute;
        top: 45%;
        left: 50%;
        width: min(50vw, 480px);
        transform: translate(-50%, -50%);

        touch-action: none;
    }
}