/*
Theme Name: あつまれ！はたらくくるま2024
Theme URI:
Version: 1.0
Author: takami
Author URI: https://yoshida-designbu.com/
License: takami
*/


 /*----------
 common
 ----------*/
*,*::after,*::before{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html{
    font-size: 62.5%;
}

body{
    font-size: min(1.5rem, 3.6vw);
    font-family: "Montserrat",'Zen Kaku Gothic New', 'YuGothic', 'Yu Gothic', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'メイリオ', 'Meiryo', 'ＭＳ ゴシック', sans-serif;
    line-height: 1.75;
    letter-spacing: 0.01em;
    color: var(--color-black);
    font-weight: 500;
    position: relative;
}

:root{
    --color-black:#000;
    --color-white:#fefefe;
    --color-yg:#abcd03;
    --color-lPink:#fbe4e2;
    --color-pink:#eb6ea5;
    --color-pink2:#f7c5db;
    --color-blue:#03b8df;
    --color-lBlue:#7DCDF3;
    --color-green:#13ae67;
    --color-orange:#f39800;
    --color-red:#ec6d65;
    --text-white:#fefefe;
    --color-gray:#666;
    --font-en:"Montserrat", sans-serif;;
    --gb-dashed:dashed 1px var(--color-gray);
    --wb-solid:solid 2px var(--color-white);
    --font-224rem:min(2.24rem,5vw);
    --font-183rem:min(1.83rem,4vw);
    --font-14rem:min(1.4rem,3.6vw);
    --bgw-margin:min(32px,5vw);
    --titleB-margin:min(16px,2vw);
    --ps-margin:min(32px,6.5vw);
    --b-radius:min(1em,4vw);
    --ls-0:0;
    --cha-contents-width: 530px;
}

li{
    list-style: none;
}

a{
	text-decoration:none;
    color: var(--color-black);
    position: relative;
    transition: all .4s;
}

img{
    max-width:100%;
    height: auto;
    box-sizing: border-box;
    vertical-align: bottom;
}

table{
    clear: both;
    border-collapse: collapse;
    width: 100%;
}

tr{
    border-bottom: solid 1px #e9e9e9;
}

th{
    padding: 12px 0 12px 12px;
    vertical-align: top;
}

td{
    padding: 12px;
}

.contents{
    margin: 0 6%;
}

.contents-wrapper{
    background: var(--color-white);
    padding: var(--bgw-margin);
    border-radius: 1em;
    margin-bottom: 72px;
    position: relative;
}

.linkBox{
    border: var(--wb-solid);
    border-radius: 14px;
    display: block;
    text-align: center;
    width: 80%;
    margin: auto;
    padding: 24px 16px;
    font-weight: 600;
}

ul.linkBox-list{
    display: flex;
    gap: min(12px, 2vw);
}
ul.linkBox-list li{
    width: calc(100% / 2);
}
ul.linkBox-list li img{
    transition: ease .3s;
}
ul.linkBox-list a:hover img{
    transform: scale(1.05);
}

@keyframes zoomInOut {
    0%{
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes zoomOutIn {
    0%{
        transform: scale(1);
    }

    100% {
        transform: scale(1.2);
    }
}

.-sb_subText{
    font-size: 1.4rem;
    display: block;
}

.contentsTitleArea{
    position: relative;
    z-index: 1;
}

.contentsTitleArea-carRight{
    right: 0;
}

.contentsTitleArea-carLeft{
    left: -4%;
    width: 57%;
    top: -30%;
}

.breadcrumbs{
    font-size: min(1.24rem, 2.8vw);
    margin: 20px auto;
    text-align: center;
    color: var(--color-pink);
}

.breadcrumbs span{
padding: 0 2px;
font-weight: 500;
color: var(--color-pink);
}

.breadcrumbs a{
    color: var(--color-pink);
    text-decoration: underline;
}

#page-top {
    position: absolute;
    top: min(60px, 16vw);
    right: min(32px, 3vw);
    max-width: 70px;
    width: min(90px, 15vw);
    z-index: 2;
}

#page-top a{
    display: block;
}

#page-top a:hover{
    transform: translateY(-6%);
}

.c-decoImage{
    position: absolute;
}


/*---- youtube/googleMap -----*/
.googleMap{
    position: relative;
    padding-bottom: 65.25%;
    height: 0;
    overflow: hidden;
}

.googleMap iframe, .googleMap object, .googleMap embed{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.youtube{
    position:relative;
    width:100%;
    padding-top:56.25%;
}

.youtube iframe{
    position:absolute;
    top:0;
    right:0;
    width:100%;
    height:100%;
}

/*--- animation ---*/
.kakukaku{
    animation: kakukaku 2s steps(2, start) infinite;
}

@keyframes kakukaku{
    0% {
        transform: translateY(-8px);
    }
    100% {
        transform: translateY(0px);
    }
}

.fuwafuwa {
    animation: fuwafuwa 4.2s infinite ease-in-out .8s alternate;
}

.fuwafuwa2 {
    animation: fuwafuwa 5s infinite ease-in-out .8s alternate;
}

@keyframes fuwafuwa {
    0% {
    transform:translate(0, 0);
    }
    50% {
    transform: var(--f-transform);
    }
    100% {
    transform:translate(0, 0);
    }
}

@keyframes fuwafuwa2 {
    0% {
    transform:translate(0, 0);
    }
    50% {
    transform: var(--f-transform);
    }
    100% {
    transform:translate(0, 0);
    }
}

.fuwafuwa-move1{
    --f-transform:translate(0, -5px);
}

.fuwafuwa-move2{
    --f-transform:translate(0, -9px);
}

.fuwafuwa-move3{
    --f-transform:translate(0, -11px);
}

.js-zoomIn{
    animation-name: scrollZoomInAnime;
    animation-delay: 0.5s;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes scrollZoomInAnime{
    0% {
        transform: scale(0.4);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.fade-in2,
.menu-scrollFallIn{
    opacity: 0;
}
.fade-in2.is-active{
    animation: fadeInPopup .4s ease-in-out .8s forwards;
}
@keyframes fadeInPopup {
    0%{
        transform: translate(0, 10px);
    }
    50%{
        transform: translate(0, -8px);
        opacity: 1;
    }
    100%{
        transform: translate(0, 0);
        opacity: 1;
    }
}

.menu-scrollFallIn.is-active{
    animation: scrollFallIn .4s ease-in-out forwards;
}
@keyframes scrollFallIn {
    0%{
        transform: translate(0, -30px);
    }
    100%{
        transform: translate(0, 0);
        opacity: 1;
    }
}


.gatagata{
    animation: gatagata 1.2s infinite;
}
@keyframes gatagata {
    20% {
        transform: translateY(-2px);
        animation-timing-function: cubic-bezier(.4,0,1,1.3);
    }
    25% {
        transform: translateY(0px);
    }
    55% {
        transform: translateY(-2px);
        animation-timing-function: cubic-bezier(.4,0,1,1.3);
    }
    60% {
        transform: translateY(0px);
    }
}

.chicachica{
    animation: chicachica 2s step-end infinite;
}
@keyframes chicachica {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
}

.a-katakata {
    animation: katakata steps(1) 6s infinite;
}
.a-katakata2{
    animation: katakata steps(1) 8s infinite;
}
@keyframes katakata {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    10% {
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg);
    }
    20% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
    30% {
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg);
    }
    40% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
    100% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
}

.a-rotate{
    animation: rotate 10s linear infinite;
}
@keyframes rotate {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}


/*----text animation----*/
.slide-in {
	overflow: hidden;
    display: block;
}

.slide-in_inner {
    display: block;
    margin: 0 6%;
}

.leftAnimeInner,
.rightAnimeInner,
.page-leftAnimeInner,
.page-rightAnimeInner{
    opacity: 0;
}

.leftAnimeInner.is-active,
.page-leftAnimeInner.is-active {
    animation:text-left-to-right 1s 0.8s forwards cubic-bezier(0.22,1,0.1,1)
}

.rightAnimeInner.is-active,
.page-rightAnimeInner.is-active {
    animation:text-left-to-right 1s 0.8s forwards cubic-bezier(0.22,1,0.1,1)
}

@keyframes text-left-to-right {
    0% {
        width: 0%;
        opacity: 0;
    }
    100% {
        width: 100%;
        opacity: 1;
    }
}

.contentsTitleArea-carRight{
    opacity: 0;
    -webkit-transform: translate(-30%, -10%);
    transform: translate(-30%, -10%);
}

.contentsTitleArea-carLeft{
    opacity: 0;
    -webkit-transform: translate(30%, -10%);
    transform: translate(30%, -10%);
}

.titleCar-anime.is-active,
.page-titleCar-anime.is-active{
    opacity: 1;
    transform: translate(0%, 0%);
    transition: transform 0.3s cubic-bezier(0.04, 0.83, 0.79, 1.22) .5s,opacity 0.3s linear .5s;
}


/*----------
  Header
----------*/
#js-top {
    opacity: 0;
    position: fixed;
    z-index: 3;
    transition: ease .5s;
}
#js-top.is-show {
    opacity: 1;
    transition: ease .5s;
}

/*----------*/
/* hamburger
/*----------*/
.openbtn{
    cursor: pointer;
    position: relative;
    width: min(60px, 14vw);
    height: min(60px, 14vw);
    z-index: 200;
    background: url(img/gNav-bg.png) no-repeat center;
    background-size: 100%;
    transition: ease .5s;
}

.openbtn span{
    display: inline-block;
    transition: all .3s;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    height: 3px;
    border-radius: 2px;
    background: var(--color-pink);
    width: 46%;
  }

.openbtn span:nth-of-type(1) {
    top: min(22px,5vw);
}
.openbtn span:nth-of-type(2) {
    top: min(30px,7vw);
}
.openbtn span:nth-of-type(3) {
    top: min(38px,9vw);
}


.openbtn.active span:nth-of-type(1){
    transform:translateX(-50%) rotate(-24deg);
    top: min(29px, 7vw);
}
.openbtn.active span:nth-of-type(2){
    display: none;
}
.openbtn.active span:nth-of-type(3){
    transform:translateX(-50%) rotate(24deg);
    top: min(30px, 7vw);
}

.openbtn small{
    position: absolute;
    bottom: 15%;
    left: 50%;
    width: 50%;
    transform: translate(-50%, -15%);
}

.g-nav{
    position: fixed;
    z-index: 100;
    top: 0;
    width:100%;
    height: 100vh;
    background-color: var(--color-pink2);
    background-size: 100%;
    transition: all 0.3s;
    opacity: 0;
    visibility: hidden;
}

#g-nav.panelactive{
    opacity: 1;
    visibility: inherit;
    overflow-x: hidden;
    overflow-y: auto;
}

.g-nav_wrapper{
    margin-top: min(48px, 22%);
    position: relative;
}

a.g-nav_logo{
    display: block;
    z-index: 1;
    max-width: 270px;
    width: 70%;
    margin: 0 auto min(24px,10vw);
}

.g-nav_ticket{
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: min(30px, 6vw);
    max-width: 370px;
    width: 90%;
    margin: 0 auto;
}

.g-nav_ticket a{
    display: block;
    color: var(--color-white);
}
.g-nav_ticket a p{
    text-align: center;
    position: absolute;
    bottom: 8%;
    left: 50%;
    transform: translate(-50%, -8%);
    width: 90%;
}
.g-nav_ticket a:nth-of-type(1){
    width: 47%;
}
.g-nav_ticket a:nth-of-type(2){
    width: 40%;
}

.g-nav_ticket a img{
    transition: ease .4s;
}
.g-nav_ticket a:hover img{
    transform: scale(1.05);
}

li.-nav_menuItem{
    padding: min(12px, 3vw) 0;
    transition: .2s;
    -webkit-transform: translateY(20%);
    transform: translateY(20%);
    opacity: 0;
}
li.-nav_menuItem a{
    color: var(--color-pink);
    text-align: center;
}
li.-nav_menuItem a span{
    display: block;
    font-size: min(1.83rem, 4.6vw);
    font-weight: 500;
}

li.-nav_menuItem img{
    margin: 0 auto min(8px, 2.24vw);
    display: block;
    height: min(34px, 7vw);
}

img.contentsMenu-illust{
    position: absolute;
}
img.contentsMenu-illust.-illust_gNav1{
    width: min(120px, 25vw);
    top: min(30px, 9vw);
    left: 3vw;
}
img.contentsMenu-illust.-illust_gNav2{
    width: min(100px, 21vw);
    top: min(130px, 19vw);
    right: -4%;
}

#g-nav.panelactive li.-nav_menuItem{
    transition: ease .5s;
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
}
#g-nav.panelactive li.-nav_menuItem:nth-of-type(1){
    transition-delay: .6s;
}
#g-nav.panelactive li.-nav_menuItem:nth-of-type(2){
    transition-delay: .65s;
}
#g-nav.panelactive li.-nav_menuItem:nth-of-type(3){
    transition-delay: .7s;
}
#g-nav.panelactive li.-nav_menuItem:nth-of-type(4){
    transition-delay: .75s;
}
#g-nav.panelactive li.-nav_menuItem:nth-of-type(5){
    transition-delay: .8s;
}
#g-nav.panelactive li.-nav_menuItem:nth-of-type(6){
    transition-delay: .85s;
}
#g-nav.panelactive li.-nav_menuItem:nth-of-type(7){
    transition-delay: .9s;
}
#g-nav.panelactive li.-nav_menuItem:nth-of-type(8){
    transition-delay: .95s;
}

.g-nav li a:hover{
    opacity: .6;
}

.g-nav_image1{
    left: 0;
    width: 16%;
    top: -4%;
}
.g-nav_image2{
    width: 32%;
    top: -5%;
    right: -5%;
}

.fixedInformation{
    z-index: 100;
    right: min(82px, 19vw);
    top: 18px;
    transition: ease .5s;
}

.fixedInformation a{
    width: min(60px,14vw);
    height: min(60px,14vw);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.fixedInformation a img,
.openbtn{
    transition: ease .4s;
}
.fixedInformation a:hover img,
.openbtn:hover{
    transform: scale(1.06);
}

.fixedInformation ul{
    display: flex;
    gap: 6px;
}

.fixedLogo{
    z-index: 3;
    width: min(170px, 34vw);
}
.fixedLogo a:hover{
    opacity: .6;
}

.fixedMenu{
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: ease .5s;
    width: calc(var(--cha-contents-width) - 12%);
    margin: min(16px,3vw) 12px 0;
}

.fixedMenu.is-hidden{
    opacity: 0;
    visibility: hidden;
}

.fixedMenu.is-hidden:has(.openbtn.active){
    opacity: 1;
}

.fixedMenu-wrapper{
    display: flex;
    align-items: center;
    gap: min(8px, 2vw);
}

/*----------*/
/* site layout
/*----------*/
main.hk-container{
    position: relative;
    width: 100%;
    background: var(--color-lBlue);
}

.site-main {
    background: var(--color-lPink);
    box-sizing: border-box;
    overflow: hidden;
    order:2;
}

.site-sideLeft{
    position: sticky;
    top: 0;
    height: 100svh;
    overflow: hidden;
    z-index: 1;
}
.site-sideLeft::before,
.site-sideLeft::after{
    content: "";
    position: absolute;
}
.site-sideLeft::before{
    background: url(img/sideLeft-bg.png) no-repeat top;
    background-size: cover;
    left: 0;
    top: -7dvh;
    width: 100%;
    height: 114%;
    z-index: -1;
}
.site-sideLeft::after{
    background: url(img/sideLeft-bg2.png) no-repeat top;
    background-size: 100%;
    width: 120%;
    height: min(320px, 16vw);
    bottom: -1vw;
    left: 0px;
    z-index: -1;
}

.-sideLeft_cloud1{
    width: min(120px, 40vw);
    top: 3vw;
    right: 10%;
}

.-sideLeft_cSlider{
    position: absolute;
    top: 76%;
    transform: translateY(-76%);
    left: 2vw;
    width: 60vw;
    z-index: -1;
}

span.-sideLeft_dfs{
    top: -1vw;
    width: 7vw;
    left: 10vw;
}
span.-sideLeft_wood{
    width: 5vw;
    left: 3vw;
    top: 1vw;
}
span.-sideLeft_dGuitar{
    width: 8vw;
    bottom: 5vw;
    right: 29vw;
    z-index: 1;
}
span.-sideLeft_dTigo{
    width: 6vw;
    bottom: 5vw;
    right: 39vw;
    z-index: 1;
}
span.-sideLeft_dPigo{
    width: 4.4vw;
    top: 10vw;
    left: 3vw;
    z-index: 1;
}
span.-sideLeft_family{
    left: -1vw;
    bottom: 4vw;
    width: 9vw;
    z-index: 1;
}

.site-sideRight{
    order: 3;
    position: sticky;
    top: 0;
    height: 100dvh;
    overflow: hidden;
    z-index: 1;
}
.site-sideRight::before{
    content: "";
    position: absolute;
    background: url(img/sideRight-bg.png) no-repeat top;
    background-size: 100%;
    left: 0;
    top: -5vw;
    width: 100%;
    height: 114%;
    z-index: -1;
}

.-sideRight_menu{
    position: absolute;
    display: flex;
    gap: min(24px,4vw);
}

.-sideRight_menu li{
    width: 7vw;
}
.-sideRight_menu._menu-top li{
    width: 8vw;
}
.-sideRight_menu li a img{
    transition: ease .2s;
}
.-sideRight_menu li a img:hover{
    transform: translateY(-10px);
}

.-sideRight_menu._menu-top{
    bottom: 70%;
    gap: 14px;
    left: 50%;
    transform: translateX(-50%);
}
.-sideRight_menu._menu1{
    left: 70%;
    transform: translateX(-70%);
    bottom: 48%;
    gap: min(16px, 2vw);
    align-items: flex-start;
}
.-sideRight_menu._menu2{
    left: 30%;
    transform: translateX(-30%);
    bottom: 27%;
    gap: min(32px, 2vw);
}

.-sideRight_ticket{
    position: absolute;
    bottom: 0;
    width: min(400px, 100%);
    right: 0;
}
.-sideRight_ticket a{
    color: var(--color-white);
    display: block;
}
.-sideRight_ticket a p{
    position: absolute;
    width: 90%;
    left: 50%;
    bottom: 4%;
    text-align: center;
    transform: translate(-50%, -4%);
    font-size: min(1.6rem, 1vw);
    line-height: 1.5;
}

.-sideRight_ticket a img{
    transition: ease .2s;
}
.-sideRight_ticket a:hover img{
    transform: scale(1.05);
}

.-sideRight_ticket .ticketInfo-flower1{
    width: min(36px, 9.4vw);
    left: min(92px, 21vw);
}
.-sideRight_ticket .ticketInfo-flower2{
    width: min(45px, 14vw);
    right: min(87px, 5vw);
    bottom: min(70px, 17vw);
}

.-sideRight_cloud._cloud1{
    top: 6%;
    left: 50%;
    transform: translate(-50%,-6%);
    width: min(114px,10vw);
    z-index: -1;
}

/*----- swiper -----*/
.swiper-slide img {
    height: auto;
    width: 100%;
}

.swiper-wrapper,
.swiper-slide>div{
    height: 100%;
    width: 100%;
}

.swiper-slide-prev, .swiper-slide-next {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease-in-out;
  }

/*----------
loading
----------*/
#js-loading {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background: var(--color-pink2);
    z-index: 100;
    overflow: hidden;
  }

.-loading_imagesWrapper{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: 100%;
}

div.-logoAnimation_image{
    position: absolute;
    width: min(320px, 36vw);
    top: 90px;
    animation: carAnimation 8s ease-in-out 0s infinite forwards;
}
div.-logoAnimation_image img.-image_icon{
    width: min(240px, 36vw);
    animation: carRunAnimation .5s infinite;
}
@keyframes carRunAnimation {
    20% {
        transform: translateY(-4px);
        animation-timing-function: cubic-bezier(1, 0, 1, 1.3);
    }
    25% {
        transform: translateY(0px);
    }
    55% {
        transform: translateY(-3px);
        animation-timing-function: cubic-bezier(1, 0, 1, 1.3);
    }
    60% {
        transform: translateY(0px);
    }
}
@keyframes carAnimation {
    0% {
        right: -40%;
    }
    100% {
        right: calc(100% + 83px);
    }
}

div.-logoAnimation_image._image2{
    width: min(300px, 34vw);
    top: -180px;
    animation: carAnimation-left 8s ease-in-out 0s infinite forwards;
}
@keyframes carAnimation-left {
    0% {
        left: -40%;
    }
    100% {
        left: calc(100% + 83px);
    }
}

._hand-loading{
    opacity: 0;
    animation: deco-fadeIn .3s ease .9s normal forwards;
    position: relative;
    right: -4%;
}

.-loading_text{
    text-align: center;
    color: var(--color-pink);
    font-family: var(--font-en);
    font-size: min(3.24rem,5.4vw);
    font-weight: 900;
    text-transform: uppercase;
    animation: ladingGoBackAnime .4s ease 7.5s normal forwards;
    display: flex;
    justify-content: center;
    align-items: center;
}

.-loading_text.is-active {
    --opacity: 1;
    --scale: 1;
}
.char {
    display: inline-block;
    transform: scale(var(--scale, 0));
    opacity: var(--opacity, 0);
    transition: opacity 0.4s cubic-bezier(0.77, 0, 0.175, 1), transform 0.4s cubic-bezier(0.39, 0.575, 0.565, 1);
    transition-delay: calc(0.02s * var(--char-index));
}


.splashbg{
    display: none;
	content: "";
	position:fixed;
	transform: scale(0);
	background-color:var(--color-lPink);
	z-index: 999;
    top:50%;
    left:50%;
	width: 2rem;
	height: 2rem;
}

body.appear .splashbg{
    display: block;
    border-radius: 50%;
	animation-name:PageAnime;
	animation-duration:.8s;
	animation-fill-mode:forwards;
}

@keyframes PageAnime{
	0% {
        display: block;
		transform: scale(0);
	}
	100% {
		transform: scale(100);
		display: none;
	}
}

@keyframes deco-fadeIn {
    0%{
        opacity: 0;
        transform: scale(0);
    }
    50%{
        opacity: 1;
        transform: scale(1.2);
    }
    100%{
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes ladingGoBackAnime {
    0%{
        transform: scale(1);
    }
    50%{
        transform: scale(1.3);
    }
    100%{
        transform: scale(0);
    }
}

/*----------*/
/* KV
/*----------*/
.kv{
    position: relative;
    height: 65svh;
    max-height: 446px;
    background: var(--color-lBlue);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.kv .kv-main{
    z-index: 2;
    width: min(390px, 73vw);
    margin-top: min(44px, 8vw);
}

.is-loadActive .kv-main_inner{
    opacity: 0;
    animation:KV-fade-bottomIn .3s ease-out 1.4s normal forwards;
}
@keyframes KV-fade-bottomIn {
    0% {
        transform: scale(.8) translateY(8%);
    }
    50% {
        opacity: 1;
        transform: scale(1.4) translateY(-3%);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0%);
    }
}

.kv-main_inner p{
    padding-bottom: 8px;
}

span.kv-cloud{
    position: absolute;
}
span.kv-cloud.-cloud1{
    width: min(128px, 24vw);
    left: -2vw;
    top: min(124px, 34vw);
}
span.kv-cloud.-cloud2{
    width: min(98px, 16vw);
    right: 2vw;
    top: min(150px, 28vw);
}

span.kv-cloud.-cloud3{
    width: min(130px, 22vw);
    right: -4vw;
    top: min(248px, 47vw);
}

.is-loadActive .delay-time07{
    opacity: 0;
    animation: deco-fadeIn .3s ease .8s normal forwards;
}
.is-loadActive .delay-time075{
    opacity: 0;
    animation: deco-fadeIn .3s ease .85s normal forwards;
}
.is-loadActive .delay-time08{
    opacity: 0;
    animation: deco-fadeIn .3s ease .9s normal forwards;
}
.is-loadActive .delay-time085{
    opacity: 0;
    animation: deco-fadeIn .3s ease .95s normal forwards;
}
.is-loadActive .delay-time09{
    opacity: 0;
    animation: deco-fadeIn .3s ease 1s normal forwards;
}
.is-loadActive .delay-time095{
    opacity: 0;
    animation: deco-fadeIn .3s ease 1.05s normal forwards;
}
.is-loadActive .delay-time1{
    opacity: 0;
    animation: deco-fadeIn .3s ease 1.1s normal forwards;
}

.fadeIn{
    animation-name:fadeInAnime;
    animation-duration:1s;
    animation-delay: 2.6s;
    animation-fill-mode:forwards;
    opacity:0;
}

@keyframes fadeInAnime{
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/*----------*/
/* event date
/*----------*/
.eventDays{
    padding-top: min(224px, 43vw);
    padding-bottom: min(48px, 16vw);
    position: relative;
    z-index: 1;
}
.eventDays::before{
    position: absolute;
    content: "";
    background: url(img/road-line.svg) no-repeat center;
    background-size: 100%;
    width: 109%;
    height: 100%;
    top: 34%;
    left: 50%;
    transform: translateX(-50%);
}

.event-zoomIn{
    animation-delay: 3.8s;
}

.eventDays-mainImage{
    margin: 0 min(42px, 8vw);
    z-index: 1;
    position: relative;
}

.is-loadActive .eventDays-mainImage{
    opacity: 0;
    animation: fadeInPopup .4s ease-in-out 1.6s forwards;
}

img.eventDays-dog{
    width: min(62px, 14vw);
    bottom: 0;
    left: min(47px, 6vw);
}
img.eventDays-tigo{
    width: min(92px, 17vw);
    bottom: min(64px, 18vw);
    right: min(59px, 10vw);
    z-index: 1;
}
img.eventDays-wood{
    width: min(48px, 10vw);
    top: -2%;
    left: min(24px, 4vw);
}
img.eventDays-soda{
    width: min(64px, 12vw);
    top: 10%;
    right: min(24px, 4vw);
}
img.eventDays-fs{
    width: min(68px, 12vw);
    top: 10%;
    left: min(24px, 5vw);
}
img.eventDays-family{
    width: min(102px, 21vw);
    top: 17%;
    left: min(88px, 18vw);
}
img.eventDays-sign{
    width: min(88px, 18vw);
    top: 25%;
    right: min(12px, 7vw);
}
img.eventDays-wood2{
    width: min(84px, 18vw);
    top: 27%;
    left: min(8px, 2vw);
}

/*----------*/
/* side content
/*----------*/
.fixed{
    position: fixed;
}

/*----------*/
/* top menu list
/*----------*/
.contentsMenuList{
    position: relative;
    z-index: 1;
}
.contentsMenuList::before{
    position: absolute;
    content: "";
    width: 116%;
    height: 86%;
    top: 10%;
    left: 50%;
    transform: translate(-50%, -10%);
    background: url(img/road-line2.svg) no-repeat center;
    background-size: 100%;
}

ul.contentsMenuList-main{
    padding: 0 min(8vw, 48px);
    display: flex;
    flex-wrap: wrap;
    position: relative;
    justify-content: space-around;
}

ul.contentsMenuList-main li{
    width: min(245px, 46%);
}
ul.contentsMenuList-main li.menu-scrollFallIn.is-active:nth-of-type(1){
    animation-delay: .5s;
}
ul.contentsMenuList-main li.menu-scrollFallIn.is-active:nth-of-type(2){
    animation-delay: .55s;
}

ul.contentsMenuList-other{
    padding: 0 min(8vw, 48px);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: min(92px, 20vw);
}
ul.contentsMenuList-other li{
    width: 33.3%;
}
ul.contentsMenuList-other li:nth-of-type(2),
ul.contentsMenuList-other li:nth-of-type(4){
    margin-top: max(-21vw, -110px);
}

ul.contentsMenuList-other li.menu-scrollFallIn.is-active:nth-of-type(2){
    animation-delay: .55s;
}
ul.contentsMenuList-other li.menu-scrollFallIn.is-active:nth-of-type(1){
    animation-delay: .6s;
}
ul.contentsMenuList-other li.menu-scrollFallIn.is-active:nth-of-type(3){
    animation-delay: .65s;
}
ul.contentsMenuList-other li.menu-scrollFallIn.is-active:nth-of-type(4){
    animation-delay: .7s;
}

.contentsMenuList ul li img{
    transition: ease .2s;
}
.contentsMenuList ul li img:hover{
    transform: translateY(-8px);
}

img.contentsMenuList-family{
    width: min(104px, 20vw);
    left: 8%;
    top: 25%;
}
img.contentsMenuList-wood{
    width: min(77px, 15vw);
    right: 8%;
    top: 23%;
}

.ticketInfo{
    position: relative;
    margin-top: min(24px,5vw);
}
.ticketInfo a img{
    transition: ease .2s;
}
.ticketInfo a:hover img{
    transform: scale(1.03);
}
img.ticketInfo-family1{
    width: min(78px, 17vw);
    right: min(48px, 16vw);
    top: -24%;
    z-index: -1;
}
img.ticketInfo-family2{
    width: min(85px, 18vw);
    left: min(42px, 4vw);
    top: -26%;
    z-index: -1;
}

.ticketInfo a p{
    text-align: center;
    color: var(--color-white);
    position: absolute;
    bottom: 12%;
    left: 50%;
    transform: translate(-50%, -12%);
    width: 90%;
    font-size: min(1.6rem,4vw);
}

.ticketInfo-flower1 {
    width: min(52px, 9.4vw);
    left: min(112px, 21vw);
    bottom: min(78px, 17vw);
}
.ticketInfo-flower2 {
    width: min(65px, 14vw);
    right: min(132px, 18vw);
    bottom: min(80px, 17vw);
}

/*----------*/
/* main contents
/*----------*/
/*-- road bg --*/
.roadBg-main{
    position: relative;
    margin-top: max(-140px, -60%);
}
.roadBg-main::before{
    position: absolute;
    content: "";
    background: url(img/index-bg.png) no-repeat top;
    background-size: 100%;
    width: 100%;
    height: 100%;
}

.roadBg-sub{
    position: relative;
}
.roadBg-sub::before{
    position: absolute;
    content: "";
    background: url(img/index-bg2.png) no-repeat top;
    background-size: 100%;
    background-color: var(--color-pink2);
    width: 100%;
    height: 100%;
    top: min(340px, 24%);
}

/*-- thank you --*/
.thankYou{
    margin: min(80px, 16vw) var(--bgw-margin) min(48px, 4vw);
}

.thankYou h3{
    margin-bottom: calc(var(--titleB-margin) * 2.5);
}

.thankYou p{
    color: var(--color-gray);
    line-height: 2;
    font-size: var(--font-183rem);
    padding-bottom: min(16px,2vw);
}

.archiveLinks p{
    text-align: center;
    color: var(--color-gray);
    line-height: 2;
    font-size: var(--font-183rem);
}
.archiveLinks p.text-lineBubble span{
    display: block;
    line-height: 1.5;
    padding: 0 min(2rem, 3vw);
}

.archiveLinks .contents-wrapper{
    padding: var(--bgw-margin) var(--bgw-margin) calc(var(--bgw-margin) * 2);
    margin-bottom: 0;
}

/*-- gallery --*/
.gallery{
    margin-bottom: 16%;
    text-align: center;
}

.gallery .title-sb{
    max-width: 322px;
    width: 84%;
}

.gallery p{
    font-size: 1.4rem;
    font-weight: 600;
}

.gallery-link{
    background: var(--bg-orange);
    color: var(--text-white);
    border: none;
    font-size: 1.83rem;
    font-weight: 600;
    padding: 12px;
    margin: 16px auto 0;
    box-sizing: border-box;
    width: 100%;
}


/*-- concept --*/
.concept{
    position: relative;
}

.concept .contents{
    margin: 0 5% 0;
}

.concept h3{
    width: 76%;
    padding-bottom: min(24px, 4vw);
}

.concept p{
    color: var(--color-gray);
    line-height: 2;
}

.concept-archive{
    display: flex;
    justify-content: center;
    align-items: end;
    width: 76%;
    margin: -7vw auto 0;
}
.concept-archive h3{
    width: min(160px, 28vw);
}
.-archive_carImage{
    width: min(250px, 46vw);
}
.concept-archive h3 a img{
    transition: ease .2s;
}
.concept-archive h3 a:hover img{
    transform: translateY(-8px);
}

/*-- instagram --*/
.contentsTitleArea-y{
    position: absolute;
    top: -60%;
    width: 40%;
    max-width: 167px;
    left: 22%;
}

.instagram .contents-wrapper{
    margin-bottom: min(48px, 18%);
    position: relative;
    padding: 26% var(--bgw-margin) var(--bgw-margin);
}

.instagram .contentsTitleArea-carLeft{
    width: 100%;
}

.contentsTitleArea-instagram{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row-reverse;
    margin-bottom: max(-114px, -21vw);
    z-index: 1;
    position: relative;
}

h2.title-instagram{
    width: min(62vw, 340px);
}

.instagram-links{
    width: min(22vw, 106px);
}

.instagram-links a{
    display: block;
}

.instagram-links a:hover{
    transform: scale(1.08);
}

.instagram-topCarImage{
    margin: min(40px, 10vw) min(50px, 6vw) max(-52px, -8vw);
    z-index: 1;
    position: relative;
}

/*-- toyopet --*/
.toyopetCharacter{
    z-index: 2;
    position: relative;
    margin: 0 min(36px, 8vw) min(158px, 30vw);
}

.toyopetCharacter a{
    display: flex;
    flex-direction: column;
    margin: auto;
    gap: min(16px,3.6vw);
    width: 90%;
}

.toyopetCharacter a:hover{
    transform: scale(1.02);
}

.toyopetCharacter-sponsor{
    margin-bottom: calc(var(--ps-margin) * 1.2);
}

.toyopetCharacter-image{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: min(20px, 5vw);
}

.toyopetCharacter span.-sb_deco{
    margin: 0 min(72px, 12vw) min(12px, 3vw);
    display: block;
}

.toyopetCharacter-link{
    text-align: center;
    color: var(--toyopetColor);
    --toyopetColor:#005952;
}

.toyopetCharacter-link a img:nth-of-type(2){
    width: 63%;
    margin: 0 auto;
}

.toyopetCharacter-link h3{
    width: 68%;
    padding-bottom: min(32px, 7vw);
    margin: 0 auto;
}

.character-mainImage{
    width: 52%;
}
.character-name{
    width: 22%;
}

/*----------*/
/* Topics
/*----------*/
.index-news{
    position: relative;
    z-index: 1;
    margin: min(148px, 24vw) auto min(182px, 32vw);
    width: min(550px, 100%);
}

.index-newsWrap{
    background: var(--color-white);
    border-radius: var(--b-radius);
    padding: min(32px, 6vw);
    margin: 0 min(62px, 12vw);
    min-height: 320px;
}

.index-news .contents-title{
    width: min(142px, 28vw);
    margin: 0 auto min(40px, 8vw);
}

img.news-bg{
    position: absolute;
    max-width: none;
    width: 124%;
    top: 54%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
}

img.-news_girl1{
    width: min(124px, 24vw);
    top: max(-102px, -15vw);
    left: min(36px, 6vw);
}
img.-news_girl2{
    width: min(130px, 26vw);
    top: max(-111px, -18vw);
    right: min(36px, 6vw);
}
img.-news_pigo{
    width: min(68px, 14vw);
    left: min(46px, 7vw);
    bottom: max(-150px, -28vw);
}
img.-news_guitar{
    width: min(104px, 21vw);
    right: min(12px, 7vw);
    bottom: max(-162px, -30vw);
}

.news .contents-wrapper{
    padding: 24px 24px 24%;
    position: relative;
    margin-bottom: 20%;
}

.topics-list a{
    font-weight: 500;
}

.topics-list a:hover{
    opacity: 0.6;
}

.topics-list a h3{
    font-weight: 500;
}

.topics-list ul li{
    padding: min(16px, 3vw) 0;
    border-bottom: var(--gb-dashed);
}

.topics-list ul li:first-of-type{
    padding: 0 0 16px;
}

.topics-list ul li h4{
    padding-top: 2px;
    line-height: 1.4;
    font-weight: 500;
    font-size: var(--font-183rem);
}

.date{
    font-family: var(--font-en);
    color: var(--color-gray);
    font-weight: 400;
    font-size: min(1.4rem,3.4vw);
    letter-spacing: 0.04em;
}

.new-text{
    font-family: var(--font-en);
    text-transform: uppercase;
    font-size: min(1.4rem, 2.8vw);
    color: var(--color-pink);
    font-weight: 600;
}

.postnav{
    text-align: center;
    padding-top: 50px;
}

.newsLink{
    position: relative;
    color: var(--color-yg);
    border: solid 2px var(--color-yg);
    border-radius: .6em;
    padding: min(8px, 2vw) 12px;
    display: block;
    width: min(110px, 26vw);
    margin: min(24px, 6vw) 0 0 auto;
}
.newsLink::before{
    position: absolute;
    content: "";
    background: var(--color-yg);
    width: 22%;
    height: 2px;
    top: 50%;
    left: -16%;
}

.newsLink img{
    display:block;
}

.newsLink:hover{
    transform: scale(1.05);
}

/*--- single ---*/
.single-page .topics-title{
    border-bottom: dashed 2px var(--color-yg);
    padding-bottom: 12px;
    margin-bottom: 24px;
}

.single-page .topics-title h3{
    padding-top: 4px;
    font-size: var(--font-224rem);
    line-height: 1.6;
    font-weight: 700;
}

.single-contents h3{
    font-size: min(2.12rem, 4.8vw);
    font-weight: 500;
    position: relative;
    color: var(--color-yg);
    padding-bottom: 8px;
}

.single-contents ul{
    margin-bottom: 12px;
}
.single-contents ul li{
    position: relative;
    padding-bottom: 4px;
    padding-left: 12px;
}
.single-contents ul li::before{
    position: absolute;
    content: "";
    background: var(--color-yg);
    border-radius: 50%;
    width: min(8px, 2vw);
    height: min(8px, 2vw);
    top: min(9px, 2vw);
    left: 0;
}

.single-contents ul li a{
    font-weight: 600;
    text-decoration: underline;
    color: var(--color-pink);
}

.single-contents blockquote{
    background: #fff6f5;
    border-radius: calc(var(--b-radius) / 2);
    padding: calc(var(--bgw-margin) / 2);
    margin-bottom: 12px;
}

.single-contents blockquote ul{
    margin-bottom: 0;
}

.single-page_inner p{
    padding-bottom: min(16px, 3vw);
    line-height: 2;
    letter-spacing: 0;
}
.single-page_inner p:last-of-type{
    padding-bottom: 0;
}

.single-page_inner p a{
    font-weight: 600;
    text-decoration: underline;
    color: var(--color-pink);
}
.single-page_inner p a:hover{
    opacity: .6;
}

.single-page_inner p strong{
    font-weight: 600;
    font-size: min(1.7rem, 4vw);
}

._pageConfetti-news{
    top: -57%;
    right: 0;
    width: 12%;
}

.-topicsLinks{
    margin-top: min(56px, 7vw);
    padding-top: min(32px, 4vw);
    border-top: solid 1px #eee;
}
.-topicsLinks a{
    margin: 0 auto;
    width: min(132px, 34vw);
}

.news-singleList a{
    font-weight: 600;
    text-decoration: underline;
    color: var(--color-pink);
}

/*----------*/
/* Supporter
/*----------*/
.supporter{
    position: relative;
    padding: 0 0 6%;
    z-index: 1;
    background: var(--color-pink2);
}

.supporter .contentsTitleArea{
    margin: 0 6%;
}

.supporter::before{
    position: absolute;
    content: "";
    background: url(img/round-bg.svg) no-repeat center;
    background-size: 100%;
    left: 0;
    top: -6%;
    width: 100%;
    height: min(7%, 22vw);
}

.supporter h2.contents-mainTitle{
    position: absolute;
    width: min(162px, 33vw);
    right: min(44px, 5vw);
    top: max(-68px, -27vw);
}f

.supporter .contentsTitleArea{
    margin: 0 5% 0;
}

.contentsTitleArea-images.-images_supporter{
    position: relative;
    z-index: 1;
    width: min(310px, 61vw);
}
.contentsTitleArea-images.-images_supporter img.ch-image{
    position: absolute;
    width: min(120px, 23vw);
    top: max(-71px, -14vw);
    left: min(24px, 5vw);
}

.supporter .contents-wrapper{
    padding: 24px;
}

.supporter-list{
    text-align: center;
    padding: var(--bgw-margin);
    margin-bottom: 24px;
    background: var(--color-white);
    border-radius: var(--b-radius);
    margin-bottom: min(32px, 6vw);
}

.supporter-list h4{
    color: var(--color-pink);
    border-bottom: solid 2px var(--color-pink);
    font-size: min(2rem, 4.24vw);
    line-height: 1.5;
    padding-bottom: min(16px, 3vw);
    margin-bottom: min(24px, 6vw);
}

.supporter-list h4 span{
    display: block;
}

.supporter-list ul{
    display: flex;
    flex-wrap: wrap;
    gap: 12px 10px;
    justify-content: center;
}

.supporter-list ul li {
    width: calc((100% - 20px) / 3);
}

.supporter-list ul.supporterMain,
.supporter-list ul.supporterMain2,
ul.supporterCar{
    margin-bottom: calc(var(--ps-margin)* 1.5);
}

.supporter-list ul.supporterMain li,
ul.supporterCar li {
    width: calc((100% - 12px) / 2);
}
.supporter-list ul.supporterMain li:nth-of-type(1),
.supporter-list ul.supporterMain li:nth-of-type(2){
    width: calc((100% - 80px) / 1);
}

.supporter-list ul.supporterMain2 li{
    width: calc((100% - 36px) / 2);
}


/*----------
 footer
----------*/
footer{
    background: url(img/footer-bg.png);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: bottom;
    background-color: var(--color-pink2);
    text-align: center;
    position: relative;
    padding: min(72px, 12vw) 0 0px;
    z-index: 1;
}

body.single footer,
body.page footer,
body.archive footer{
    background-color: unset;
}

.footer-information{
    font-size: min(2rem, 4.24vw);
    letter-spacing: 0;
    text-align: center;
    padding: 0 min(24px,6vw) min(4vw, 24px);
    z-index: 1;
    position: relative;
    color: var(--text-white);
}

.footer-information h4{
    padding-bottom: 8px;
}

.footer-information p a:hover{
    opacity: 0.6;
}
.footer-information p a{
    width: min(240px, 49vw);
    display: block;
    margin: min(10px, 2vw) auto 0;
}
.footer-information p a img{
    display: block;
}

small.copyright{
    color: var(--color-gray);
    text-align: center;
    display: block;
    padding-bottom: 16px;
    font-size: min(1.24rem, 3vw);
}

/*--------------*/
/*レスポンシブ基本CSS
/*--------------*/
.pcheader{
    display:block;
}

.pc{
    display:none;
}

.mobile{
    display: none!important;
}

@media screen and (min-width:769px){
    body{
        font-size: min(1.6rem,3.83vw);
    }

    .site-main{
        z-index: 2;
        position: relative;
        border-left: solid 1px var(--color-gray);
        border-right: solid 1px var(--color-gray);
        width: var(--cha-contents-width);
    }
    main.hk-container{
        display: flex;
    }

    .site-sideRight{
        width: calc((100% - var(--cha-contents-width)) / 2.5);
    }
    .site-sideLeft{
        width: calc((100% - var(--cha-contents-width)) / 1.5);
    }

    .roadBg-main{
        margin-top: -24%;
    }

    .fixedInformation{
        right: min(82px, 10vw);
    }

    .fixedLogo{
        right: min(340px, 44vw);
    }

    .page-car{
        right: 2vw;
        width: 18%;
    }
    .page-car2{
        left: 2vw;
        width: 18%;
    }

    .supporter::before{
        top: -5%;
    }

    footer{
        padding: 15% 0 0px;
    }

    .concept-archive{
        margin: -12% auto 0;
    }
}

@media screen and (max-width:1279px){
    .site-sideRight{
        display: none;
    }
    .site-sideLeft{
        width: calc(100% - var(--cha-contents-width));
    }
    .site-sideLeft::before{
        top: 3vw;
    }
    .site-sideLeft::after{
        height: min(24vw, 18vw);
    }

    .-sideLeft_cSlider{
        width: 86vw;
        top: 50%;
        transform: translateY(-50%);
        left: -1vw;
    }

    span.-sideLeft_dGuitar{
        width: 11vw;
        bottom: 13vw;
        right: 36vw;
    }
    span.-sideLeft_dTigo{
        right: 52vw;
        width: 8vw;
        bottom: 12vw;
    }
    span.-sideLeft_dPigo{
        width: 6vw;
        top: 25vw;
    }
    span.-sideLeft_family{
        width: 15vw;
        bottom: 11vw;
        left: 3vw;
    }
    span.-sideLeft_wood{
        width: 7vw;
        left: 4vw;
        top: 6vw;
    }
    span.-sideLeft_dfs{
        width: 9vw;
        left: 13vw;
        top: 4vw;
    }

    .g-nav{
        width: var(--cha-contents-width);
    }
    .fixedMenu{
        width: calc(var(--cha-contents-width) - 6%);
    }

    .site-main{
        margin: 0;
    }
}

@media screen and (min-width:1280px){
    .pc{
        display:block;
    }

    .g-nav{
        width: var(--cha-contents-width);
    }

    .kv .kv-main{
        width: min(370px, 43svh);
    }

    .roadBg-main{
        margin-top: max(-134px);
    }

}

@media screen and (max-width:1280px){
    .-sideRight_menu._menu1{
        gap: min(16px, 2vw);
    }
}

@media screen and (max-width:768px){
    .site-sideLeft{
        display: none;
    }

    #js-top{
        width: 94%;
    }

    .g-nav,
    .fixedMenu {
        width: 100%;
    }
    a.g-nav_logo{
        max-width: 360px;
        width: 52%;
        margin: 0 auto min(40px, 6vw);
    }

    div.-logoAnimation_image{
        top: 17vw;
    }
    div.-logoAnimation_image._image2{
        top: -34vw;
    }

    .supporter::before{
        top: -4%;
    }

    .supporter-list ul.supporterMain li:nth-of-type(1) {
        width: calc((100% - 66px) / 1);
    }
}

@media screen and (max-width:521px){
    .roadBg-main{
        margin-top: min(-20svh, -48vw);

    }

}