@charset "UTF-8";
/*--------------------------------
common-----------------------------
----------------------------------*/
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    color: #333;
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 500;
    font-style: normal;
    line-height: 1.8;
    letter-spacing: 0.05em;
    background-image: url("../images/bg-check.svg");
    background-color: #FFEDB1;
}
main {
    flex-grow: 1;
}

/* text */
:root{
    --f10px:0.625rem;
    --f12px:0.75rem;
    --f14px:0.875rem;
    --f16px:1rem;
    --f18px:1.125rem;
    --f20px:1.25rem;
    --f22px:1.375rem;
    --f24px:1.5rem;
    --f26px:1.625rem;
    --f28px:1.75rem;
    --f30px:1.875rem;
    --f32px:2rem;
    --f34px:2.125rem;
    --f36px:2.25rem;
    --f38px:2.375rem;
    --f40px:2.5rem;
    --f42px:2.625rem;
    --f44px:2.75rem;
    --f46px:2.875rem;
    --f48px:3rem;
    --f50px:3.215rem;
    --f60px:3.75rem;
}

.font_60px{font-size: var(--f60px);}
.font_50px{font-size: var(--f50px);}
.font_44px{font-size: var(--f44px);}
.font_42px{font-size: var(--f42px);}
.font_40px{font-size: var(--f40px);}
.font_38px{font-size: var(--f38px);}
.font_36px{font-size: var(--f36px);}
.font_34px{font-size: var(--f34px);}
.font_32px{font-size: var(--f32px);}
.font_30px{font-size: var(--f30px);}
.font_28px{font-size: var(--f28px);}
.font_26px{font-size: var(--f26px);}
.font_24px{font-size: var(--f24px);}
.font_22px{font-size: var(--f22px);}
.font_20px{font-size: var(--f20px);}
.font_18px{font-size: var(--f18px);}
.font_16px{font-size: var(--f16px);}
.font_14px{font-size: var(--f14px);}
.font_12px{font-size: var(--f12px);}
.font_10px{font-size: var(--f10px);}

.font_center{text-align: center !important;}
.font_right{text-align: right !important;}
.font_left{text-align: left !important;}
.font_700{font-weight: 700;}
.font_900{font-weight: 900;}
.font_bold{font-weight: bold;}
.font_normal{font-weight: normal;}
.font_white{color: #fff;}

.brwrap{
    display: inline-block;
}

/* marginbottom */
.mar_non{margin: 0 !important;}
.mar0px{margin-bottom: 0 !important;}
.mar10px{margin-bottom: 10px !important;}
.mar20px{margin-bottom: 20px !important;}
.mar30px{margin-bottom: 30px !important;}
.mar40px{margin-bottom: 40px !important;}
.mar50px{margin-bottom: 50px !important;}
.mar60px{margin-bottom: 60px !important;}
.mar70px{margin-bottom: 70px !important;}
.mar80px{margin-bottom: 80px !important;}
.mar90px{margin-bottom: 90px !important;}
.mar100px{margin-bottom: 100px !important;}
.mar110px{margin-bottom: 110px !important;}
.mar120px{margin-bottom: 120px !important;}
.mar130px{margin-bottom: 130px !important;}
.mar140px{margin-bottom: 140px !important;}
.mar160px{margin-bottom: 160px !important;}
.mar170px{margin-bottom: 170px !important;}
.mar200px{margin-bottom: 200px !important;}
.mar220px{margin-bottom: 220px !important;}
.mar340px{margin-bottom: 340px !important;}
.mar1-5em{margin-bottom: 1.5em !important;}
.mar2em{margin-bottom: 2em !important;}



/* laout */
:root{
    --content:min(1000px,calc(100vw - 40px));
    --blank:calc(100vw - var(--content));
    --side:calc(var(--blank) / 2);
}
main{
    padding-right: var(--side);
    padding-left: var(--side);
    overflow: hidden;
}
.align_wide{
    width: calc(100vw - 40px);
    margin-right: calc(50% - ((100vw - 40px)/2));
    margin-left: calc(50% - ((100vw - 40px)/2));
}
.align_defa{
    width:var(--content);
    margin-left: auto;
    margin-right: auto;
}
.align_slim{
    width:min(800px,calc(100vw - 40px));
    margin-left: auto;
    margin-right: auto;
}
.align_full{
    width: 100vw;
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
}
.width800{
    width: min(800px,90%);
    margin-right:auto;
    margin-left:auto;
}
.width80{
    width: min(80px,30%);
    margin-right:auto;
    margin-left:auto;
}

/* clm */
:root{
    --clmgap: 0%;
    --clmnum: 1;
}
.clm{
    display: flex;
    flex-wrap: wrap;
    gap: var(--clmgap);
    --clmspace:calc(100% - (var(--clmgap) * (var(--clmnum) - 1)));
}
.clm.clm2{
    --clmnum: 2;
}
.clm.clm3{
    --clmnum: 3;
}
.clm.clm4{
    --clmnum: 4;
}
.clm__item{
    width: calc(var(--clmspace) / var(--clmnum));
}
.clm__item > *:first-child{
    margin-top: 0;
}
.clm__item > *:last-child{
    margin-bottom: 0;
}


/*--------------------------------
load-----------------------------
----------------------------------*/
#load {
	position: fixed;
	z-index: 999;
	width: 100%;
	height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
}
#load_cover {
	width: 100%;
	height: 100%;
	background-image: url(../images/bg-check.svg);
    background-color: #FFEDB1;
    position: absolute;
    top: 0;
    left: 0;
}
#load_pon {
    width: min(100px, 10vw);
    animation: logo_fade 1s forwards;
    animation-iteration-count:infinite;
    transform: rotate(360deg);
    transform-origin: 40% 50%;
}
@keyframes logo_fade{
    0% {
        transform: scale(1) rotate(360deg);
    }
    80% {
        transform: scale(1) rotate(0deg);
    }
    90% {
        transform: scale(1.1);
    }
    100% {
      transform: scale(1);
    }
}

#load_slide {
	width: 200%;
	height: 200%;
    border-radius: 200%;
    background-color: #FFB909;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-150%) translateX(-50%);
}
#load_slide.coveranime {
    animation: coveranime 1.2s ease-in-out 1s forwards;
}
@keyframes coveranime{
    0% {
        transform: translateY(-150%) translateX(-50%);
    }
    100% {
      transform: translateY(50%) translateX(-50%);
    }
}


/*--------------------------------
header-----------------------------
----------------------------------*/
#header {
    width: 100vw;
    position: fixed;
    z-index: 50;
    padding: 0 40px;
}
#header a{
    text-decoration: none;
}

#menu {
    background: #fff;
    width: 170px;
    border: solid 3px #C69F3C;
    border-radius: 3px;
    padding: 20px 10px;
    position: relative;
    top: -3px;
    font-weight: 700;
    transition: none;
    transition: padding .3s;
}
#menu.hide {
    cursor: pointer;
}
#menu.hide:not(.open):hover {
    padding-bottom: 30px;
}
#menu.open {
    cursor: auto;
}
#menu p {
    font-weight: 900;
    color: #C69F3D;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0;
}
#menu nav {
    margin: 30px 0;
}
#menu .nav_item {
    margin:  25px 0 25px 10px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5em;
    line-height: 1;
}
#menu .nav_item::before{
    content: "";
    display: block;
    width: 7px;
    height: 7px;
    border-radius: 7px;
    background: #C69F3D;
    position: relative;
    top: 1px;
}
#menu .nav_item a{
    position: relative;
    z-index: 0;
}
#menu .nav_item a::after{
    content: "";
    display: block;
    width: 100%;
    height: 1em;
    background: #f6e8c5;
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
    transform: scaleX(0);
    transform-origin: left;
}
#menu .nav_item a:hover{
    color: #7C5D0F;
}
#menu .nav_item a:hover:after{
    transform: scaleX(1);
}
#menu .bottom {
    display: flex;
    justify-content: space-between;
}


/*--------------------------------
footer-----------------------------
----------------------------------*/
footer {
    background: #fff;
    text-align: center;
}
footer a{
    text-decoration: none;
}
#backtotop {
    color: #fff;
    font-size: var(--f12px);
}
#backtotop a{
    background: #7C5D0F;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5em;
}
#backtotop a:hover{
    background: #3a2b05;
}
#backtotop a .icon{
    position: relative;
    top: -2px;
}
#backtotop a:hover .icon{
    transform: translateY(-2px);
}

.btn a {
    background: #C69F3D;
    padding: 10px 3em;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5em;
    color: #fff;
    width: fit-content;
    margin: 30px auto;
    border-radius: 3em;
    text-decoration: none;
}
.btn a:hover {
    background: #947422;
}
.btn a .icon{
    position: relative;
    top: -3px;
}

footer .copy {
    color: #7C5D0F;
    font-size: var(--f12px);
    margin: 30px 0;
}




/*--------------------------------
main-----------------------------
----------------------------------*/


/*- mv ----------------------------*/
#mv{
    padding: 40px 0 0;
    position: relative;
    width: 100vw;
    height: 100vh;
    min-height: 57vw;
    max-height: 75vw;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    z-index: 0;
}
#mv .back{
    width: 100%;
    position: relative;
    z-index: -100;
}
#mv .back img {
    width: 100%;
}
#mv .mvelm{
    position: absolute;
    opacity: 0;
}
#mv .mvelm img{
    width: 100%;
}
#mv h1.title {
    width: 62.5%;
    top: 6.2%;
    left: 18.75%;
    z-index: -50;
}
#mv p.txt{
    width: 19.29%;
    top: 3.31%;
    left: 69.37%;
    animation-delay: 1s;
}
#mv .illust.pon{
    width: 18.67%;
    top: 44.29%;
    left: 0%;
    animation-delay: 1.5s;
}
#mv .illust.son{
    width: 10.70%;
    top: 29.57%;
    left: 84.84%;
    animation-delay: 1.5s;
}
#mv .illust.mom{
    width: 14.8%;
    top: 59.44%;
    left: 80.9%;
    animation-delay: 1.5s;
}

#mv .item.item01{
    width: 23.45%;
    top: 61.05%;
    left: 16.01%;
    animation-delay: 0.5s;
}
#mv .item.item02{
    width: 20.51%;
    top: 65.52%;
    left: 32.10%;
    animation-delay: 0.5s;
}
#mv .item.item03{
    width: 18.95%;
    top: 67.73%;
    left: 47.18%;
    animation-delay: 0.5s;
}
#mv .item.item04{
    width: 23.79%;
    top: 61.05%;
    left: 58.67%;
    z-index: -10;
    animation-delay: 0.5s;
}
#mv .item.itembg{
    width: 69.68%;
    top: 86.50%;
    left: 13.75%;
    z-index: -30;
    mix-blend-mode: multiply;
    animation-delay: 0.5s;
}


#mv.show .mvelm {
    animation-name:fadeUpAnime;
    animation-duration:0.5s;
    animation-fill-mode:forwards;
    animation-timing-function: ease-in-out;
}
.fadeUpTrigger{
    opacity: 0;
}
.fadeUpTrigger.showin {
    animation-name: fadeUpAnime;
    animation-duration:0.5s;
    animation-fill-mode:forwards;
    opacity: 0;
}
@keyframes fadeUpAnime{
    0% {
    opacity: 0;
    transform: translateY(100px);
    }
    70% {
    opacity: 1;
    transform: translateY(-20px);
    }
    100% {
    opacity: 1;
    transform: translateY(0);
    }
}

.slidetoRightTrigger{
    opacity: 0;
}
.slidetoRightTrigger.showin {
    animation-name: slidetoRight;
    animation-duration:1s;
    animation-fill-mode:forwards;
    animation-delay: 0.25s;
    opacity: 0;
}
@keyframes slidetoRight{
    0% {
    opacity: 0;
    transform: translateX(-100px);
    }
    100% {
    opacity: 1;
    transform: translateX(0);
    }
}
.slidetoLeftTrigger{
    opacity: 0;
}
.slidetoLeftTrigger.showin {
    animation-name: slidetoLeft;
    animation-duration:1s;
    animation-fill-mode:forwards;
    animation-delay: 0.5s;
    opacity: 0;
}
@keyframes slidetoLeft{
    0% {
    opacity: 0;
    transform: translateX(100px);
    }
    100% {
    opacity: 1;
    transform: translateX(0);
    }
}

.colorTrigger{
	filter: grayscale(100%);
}
.colorTrigger.showin {
    animation-name: coloring;
    animation-duration:0.5s;
    animation-fill-mode:forwards;
    animation-timing-function: ease-in-out;
}
@keyframes coloring{
    0% {
    	filter: grayscale(100%);
    }
    100% {
    	filter: grayscale(0);
    }
}

.upTrigger.showin img{
    animation-name: uping;
    animation-duration:0.5s;
    animation-fill-mode:forwards;
    animation-timing-function: ease-in-out;
}
.ponlist_item.odd .upTrigger.showin img{
    animation-name: upingodd;
}
@keyframes uping{
    0% {
    	transform: scale(1);
    }
    50% {
        transform: scale(1.05) rotate(5deg);
    }
    100% {
        transform: scale(1);
    }
}
@keyframes upingodd{
    0% {
    	transform: scale(1);
    }
    50% {
        transform: scale(1.05) rotate(-5deg);
    }
    100% {
        transform: scale(1);
    }
}

/*- desc ----------------------------*/
#desc{
    background: #FFB909;
    padding: 100px 0 0;
}
.desc_fuki{
    display: grid;
    text-align: center;
    font-size: var(--f20px);
    font-weight: 700;
}
.desc_fuki>*{
    grid-row: 1/1;
    grid-column: 1/1;
}
.desc_fuki > p {
    display: flex;
    justify-content: center;
    align-items: center;
}

/*- history ----------------------------*/
h2.title{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: var(--f16px);
    text-align: center;
}
h2.title::before {
    content: attr(data-en);
    display: block;
    font-size: var(--f60px);
    line-height: 1.2;
    font-weight: 900;
    max-width: 10em;
}

#history .bg {
    display: flex;
}

.historylist {
    position: relative;
    z-index: 0;
}
.illust.illust01 {
    position: absolute;
    z-index: -1;
    top: -140px;
    right: 0;
}

.historylist__item {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7%;
    background: #fff;
    border-radius: 15px;
    position: relative;
    padding: 0 30px;
    min-height: 35vw;
}
.historylist__item.no3{
    padding-left: 0;
}
.historylist__item.no4 {
    padding-right: 0;
    gap: 4%;
    justify-content: flex-end;
}
.historylist__item p.number {
    font-size: var(--f60px);
    color: #9D864D;
    font-weight: 900;
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    line-height: 1;
    transform: translateY(-75%);
}
.historylist__item .img{
    order: -1;
    transform: rotate(-12deg);
    width: 35%;
}
.historylist__item.even .img{
    order: 1;
    transform: rotate(12deg);
}
.historylist__item.no3 .img{
    width: 47%;
}
.historylist__item.no4 .img{
    width: 51%;
    transform: rotate(5deg);
}
.historylist__item > .txt{
    flex-basis: 0;
    flex-grow: 1;
    max-width: 385px;
    font-size: var(--f18px);
}
.historylist__item > .txt h3{
    font-size: var(--f20px);
}

.history_hr {
    display: flex;
    justify-content: center;
}

/*- ponchon ----------------------------*/
#ponchan{
    position: relative;
    z-index: 0;
    overflow: hidden;
}
.bg img {
    width: 100%;
}
#ponchan .bg{
    position: relative;
    z-index: -50;
}
#ponchan .inner {
    background: #FFB909;
    padding: 50px 0;
    position: relative;
    z-index: 0;
}
#ponchan .inner .align_defa{
    position: relative;
    z-index: 0;
}
.ponlist {
    padding: 50px 10%;
    position: relative;
    z-index: 0;
}
.ponlist::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: #fff;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 15px;
    z-index: -1;
}

.illust.illust02 {
    position: absolute;
    z-index: -2;
    top: -155px;
    left: 0;
}


.ponlist_item {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12.5%;
}
.ponlist_item .img{
    width: 38%;
    position: relative;
}
.ponlist_item.odd .img{
    order: -1;
}
.ponlist_item .img::before{
    content: "";
    display: block;
    width: 100%;
    aspect-ratio: 1/1;
    background: url("../images/pon_bg01.svg") no-repeat center center;
    background-size: contain;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%) rotate(-7deg);
    z-index: -1;
}
.ponlist_item .txt{
    flex-basis: 0;
    flex-grow: 1;
}
.hr{
    width: 100%;
    height: 10px;
    background: url("../images/icon_hr.svg") repeat-x;
    margin: 40px 0;
}
.pondesc {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 30px;
    line-height: 2.1;
    font-size: var(--f20px);
    margin: 50px 0;
    position: relative;
    padding: 30px 0;
}

#ponchan .illust.c {
    position: absolute;
    z-index: -1;
}
#ponchan .illust.c01 {
    top: 0;
    left: -70px;
}
#ponchan .illust.c02 {
    top: 110px;
    right: -100px;
}
#ponchan .illust.c03 {
    top: 0;
    left: calc(0% - var(--side) - 200px);
}
#ponchan .illust.c04 {
    top: 30px;
    right: calc(0% - var(--side) - 300px);
}
#ponchan .illust.c05 {
    bottom: -30px;
    left: calc(0% - var(--side) - 300px);
}
#ponchan .illust.c06 {
    bottom: -50px;
    right: calc(0% - var(--side) - 160px);
}

/*- store ----------------------------*/
#store{
    padding: 100px 0;
}

#store h2{
    color: #7C5D0F;
}
#store p.desc {
    display: flex;
    justify-content: center;
    margin-bottom: 60px;
}


.storelist {
    padding: 50px 10%;
    position: relative;
    z-index: 0;
}
.storelist::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: #fff;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 15px;
    z-index: -1;
}

.illust.illust03 {
    position: absolute;
    z-index: -2;
    top: -170px;
    right: 0;
}

.storetable table{
    border-collapse: collapse;
    position: relative;
}
.storetable table thead {
    border-bottom: solid 2px;
    color: #7C5D0F;
    line-height: 1.2;
    position: sticky;
    top: 0;
    box-shadow: 0 2px 2px -2px;
    background: #fff;
}
.storetable table thead span {
    width: 63%;
    display: block;
    margin: 0 auto;
}
.storetable th,
.storetable td {
    border-bottom: solid 2px #9D864D;
    padding: 20px;
    text-align: center;
}
.storetable tbody th {
    text-align: left;
    font-size: var(--f18px);
    width: 13em;
}
.storetable thead th:nth-of-type(2),
.storetable thead th:nth-of-type(4),
.storetable td:nth-of-type(1),
.storetable td:nth-of-type(3) {
    background: #F5EBD1;
}
.storetable thead th:nth-of-type(3),
.storetable thead th:nth-of-type(5),
.storetable td:nth-of-type(2),
.storetable td:nth-of-type(4) {
    background: #FFF7E3;
}



/*- cm ----------------------------*/
#cm .inner {
    background: #fff;
    padding: 50px 0;
    position: relative;
    z-index: 0;
}
#cm .inner::after {
    content: "";
    background: url(../images/cm_bg.png) no-repeat;
    background-size: 100%;
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}
.movie_desc{
    padding: 0 4%;
    margin: 40px 0 100px;
    font-weight: 700;
}
.movie_desc h3{
    font-size: var(--f20px);
}
a.movieup{
    border-radius: 20px;
    background: #000;
    display: block;
    border: solid 2px transparent;
    overflow: hidden;
}
a.movieup:hover {
    opacity: 0.8;
    border: solid 2px #FF5509;
}

/*- social ----------------------------*/
#social h2,
#social h3 {
    color: #7C5D0F;
}
#social p.desc {
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
}
#social .cupbox {
    position: relative;
    padding: 100px 0 80px;
    margin: 50px 0 130px;
}
#social .cupbox::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 15px;
    z-index: -1;
    transform: translate(-50%, -50%);
    transition: transform 1s;
}
#social .cupbox.showin::before {
    transform: translate(-50%, -50%) rotate(-5deg);
}
#social .cupbox .width800{
    display: flex;
    gap: 5%;
    position: relative;
    align-items: center;
}
#social h3 span.sub {
    font-size: var(--f20px);
}
#social h3 span.main {
    font-size: var(--f36px);
    display: block;
}
#social .cupbox .img{
    order: -1;
    width: 47%;
}
#social .cupbox .txt{
    flex-basis: 0;
    flex-grow: 1;
}
#social .dancebox {
    background: #fff;
    border-radius: 15px;
    padding: 40px 0;
}
#social .dancebox .width800{
    display: flex;
    gap: 5%;
    position: relative;
    align-items: center;
}
.dancebox_item {
    text-align: center;
}

#social .illust {
    text-align: center;
}

/*--------------------------------------------------------------------------------------------------------------------------------
 Break Point----------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------------*/
@media (min-width:769px) {
    .sponly{
        display: none;
    }
}
@media (max-width:768px) {
    .pconly{
        display: none;
    }
}
@media (max-width:1280px) {
}
@media (max-width:1024px) {
    #menu .toggle{
        display: none;
    }
    #store p.desc {
        max-width: 700px;
        margin: 0 200px 60px 50px;
    }
    .storetable {
        overflow: scroll;
    }
    .storetable table {
        min-width: 750px;
    }
}
@media (max-width:768px) { /* hamburger size */
    /*--------------------------------
    common-----------------------------
    ----------------------------------*/
    :root{
        --f24px: 1.35rem;
        --f28px: 1.375rem;
        --f30px: 1.375rem;
        --f40px: 2rem;
    }
    /* margin */
    .mar70px {margin-bottom: 30px !important;}
    .mar90px {margin-bottom: 40px !important;}
    .mar100px {margin-bottom: 50px !important;}
    .mar120px {margin-bottom: 80px !important;}
    .mar170px {margin-bottom: 80px !important;}
    .mar220px {margin-bottom: 100px !important;}

    /*--------------------------------
    #header-----------------------------
    ----------------------------------*/
    #header .header__menu{
        display: none;
    }

    /*--------------------------------
    footer-----------------------------
    ----------------------------------*/
    .footer__clm {
        flex-direction: column;
    }

    /*--------------------------------
    main-----------------------------
    ----------------------------------*/
    #mv {
        aspect-ratio: auto;
        height: 100vh;
        max-height: 120vw;
        background: linear-gradient(to bottom, transparent 0%, transparent 50%, #FFB909 50%, #FFB909 100%);
    }
    #mv .back {
        position: absolute;
        top: 20%;
        left: 50%;
        width: 780px;
        transform: translateX(-50%);
    }
    #mv h1.title {
        width: 90%;
        top: 9%;
        left: 6%;
    }
    #mv p.txt {
        width: 28%;
        top: 1%;
        left: 67%;
    }
    #mv .item.item01 {
        width: 47%;
        top: 53%;
        left: -3%;
    }
    #mv .item.item02 {
        width: 38%;
        top: 68%;
        left: 21%;
    }
    #mv .item.item02 img {
        transform: rotate(-4deg);
    }
    #mv .item.item03 {
        width: 35%;
        top: 70%;
        left: 47%;
    }
    #mv .item.item03 img {
        transform: rotate(10deg);
    }
    #mv .item.item04 {
        width: 52%;
        top: 50%;
        left: 54%;
    }
    #mv .item.itembg {
        width: 87%;
        top: 90%;
        left: 8%;
    }
    #mv .illust.pon {
        width: 22%;
        top: 43%;
        left: -3%;
        z-index: 10;
    }
    #mv .illust.son {
        width: 14%;
        top: 22%;
        left: 86%;
    }
    #mv .illust.mom {
        width: 20%;
        top: 77%;
        left: 79%;
    }

    .desc_fuki .waku {
        width: 25em;
        margin: 0 auto;
    }

    #history h2.title {
        margin-bottom: 100px !important;
    }
    .illust.illust01 {
        top: -20vw;
        width: 31vw;
        display: flex;
        justify-content: flex-end;
    }
    .historylist__item,
    .historylist__item.no3,
    .historylist__item.no4 {
        padding: 60px 50px 30px;
        flex-direction: column;
    }
    .historylist__item > .txt {
        flex-basis: 100%;
        max-width: unset;
    }
    .historylist__item > .txt h3 {
        text-align: center;
    }
    .historylist__item .img {
        transform: none;
        width: 50%;
        margin-bottom: 20px;
    }
    .historylist__item.no3 .img {
        width: 63%;
    }
    .historylist__item.no4 .img {
        width: 70%;
    }
    .historylist__item.even .img {
        order: -1;
        transform: none;
    }

    #ponchan h2.title {
        margin-bottom: 100px !important;
    }
    .illust.illust02 {
        top: -20vw;
        width: 35vw;
    }
    .ponlist_item {
        flex-direction: column;
    }
    .ponlist_item .img {
        order: -1;
        width: min(320px, 90%);
    }
    .ponlist_item .txt h3 {
        margin-bottom: 10px;
        text-align: center;
    }
    .ponlist_item .txt p {
        margin-top: 0;
    }
    #ponchan .illust.c {
        width: 70vw;
    }

    #store p.desc {
        max-width: 80%;
        margin: 0 0 50px 20px;
    }
    .illust.illust03 {
        top: -18vw;
        width: 24vw;
    }
    .storetable th, .storetable td {
        padding: 15px;
    }

    #social .cupbox .width800 {
        gap: 20px;
        flex-direction: column;
    }
    #social .cupbox.show::before {
        transform: translate(-50%, -50%);
    }
    #social h3 {
        text-align: center;
        line-height: 1.4;
    }
    #social .cupbox {
        padding: 40px 0;
        margin: 50px 0;
    }
    #social .cupbox .img {
        order: -1;
        width: 100%;
        height: 50vw;
    }
    #social .cupbox .img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    #social .dancebox .width800 {
        gap: 20px;
        flex-direction: column;
    }
   
}
@media (max-width:540px) {
    /*--------------------------------
    common-----------------------------
    ----------------------------------*/
    :root{
        --h_height: 64px;
        --f18px: 1rem;
        --f20px: 1.125rem;
        --f22px: 1.125rem;
        --f24px: 1.125rem;
        --f26px: 1.25rem;
        --f28px: 1.25rem;
        --f30px: 1.25rem;
        --f32px: 1.375rem;
        --f34px: 1.375rem;
        --f36px: 1.625rem;
        --f38px: 1.625rem;
        --f40px: 1.625rem;
        --f42px: 1.625rem;
        --f44px: 1.75rem;
        --f46px: 1.75rem;
        --f48px: 1.75rem;
        --f50px: 2.25rem;
        --f60px: 2.25rem;
    }

    /* clm */
    .clm__item{
        width: 100%;
    }

    /* margin */
    .mar40px {margin-bottom: 20px !important;}
    .mar50px {margin-bottom: 25px !important;}
    .mar60px {margin-bottom: 25px !important;}
    .mar70px {margin-bottom: 30px !important;}
    .mar80px {margin-bottom: 30px !important;}
    .mar90px {margin-bottom: 40px !important;}
    .mar100px { margin-bottom: 50px !important;}
    .mar120px {margin-bottom: 50px !important;}
    .mar130px {margin-bottom: 60px !important;}
    .mar160px {margin-bottom: 60px !important;}
    .mar200px {margin-bottom: 100px !important;}


    #header {
        padding: 0 10px;
    }
    #menu {
        padding: 10px;
    }
    .desc_fuki .waku {
        width: calc(100vw - 10px);
        margin: 0 -15px;
    }
    .historylist__item,
    .historylist__item.no3,
    .historylist__item.no4 {
        padding: 30px;
    }
    .historylist__item .img,
    .historylist__item.no3 .img,
    .historylist__item.no4 .img {
        width: 90%;
        margin-bottom: 0;
    }

    #ponchan .illust.c03 {
        left: calc(0% - var(--side) - 130px);
    }
    #ponchan .illust.c04 {
        right: calc(0% - var(--side) - 150px);
    }
    #ponchan .illust.c05 {
        left: calc(0% - var(--side) - 170px);
    }
    #ponchan .illust.c06 {
        bottom: -80px;
        right: calc(0% - var(--side) - 100px);
    }

    .storetable tbody th {
        font-size: var(--f14px);
        width: 12em;
    }
    .storetable th, .storetable td {
        padding: 10px 5px;
    }
    .storetable th p {
        margin: 0 0 10px;
    }

    #social .cupbox .img {
        height: 80vw;
    }
}