


@font-face {
font-family: "CSArquis";
src: url("CSArquis.woff") format('woff');
}


@font-face {
font-family: "Analogue";
src: url("Analogue.woff") format('woff');
}


@font-face {
font-family: "ZTBros-Regular";
src: url("ZTBros-Regular.woff") format('woff');
}


@font-face {
font-family: "ZTBros-Light";
src: url("ZTBros-Light.woff") format('woff');
}

@font-face {
font-family: "SF-Pro-Display";
src: url("SF-Pro-Display-Light.woff") format('woff');
}



* {
	margin: 0;
	padding: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}




body{
	color:#727171;
	background:#e2d3ed;
	font-family: "Lexend", "Zen Kaku Gothic New", serif;
	}


ul, li{
	list-style:none;
}


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





video{
	width:100%;
	height:auto;
	display:block;
}
	

a{
	position:relative;
	color:#000000;
	text-decoration:none;
}


			div a {
				position: relative;
				display: block;
			}


.text_right{
	text-align:right;
}



	.loading {
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	bottom: 0;
	z-index: 999999;
	opacity: 1;
	background: #e2d3ed;
}


.loader
{
display: block!important;
  position: absolute;
  display: inline-block;
  top:50%;
  left:50%;
  margin-left:-17px;
  margin-top:-30px;
  width: 30px;
  height: 30px;
  border-radius: 30px;
  border: 0.5px solid #e95899;
  border-right-color: transparent;
  -webkit-animation: spin 1s infinite linear;
  -moz-animation: spin 1s infinite linear;
}


@-webkit-keyframes spin
{
0% { -webkit-transform: rotate(0deg); opacity: 0.4; }
50%  { -webkit-transform: rotate(180deg); opacity: 1; }
100%   { -webkit-transform: rotate(360deg); opacity: 0.4; }
}

@-moz-keyframes spin
{
0% { -moz-transform: rotate(0deg); opacity: 0.4; }
50%  { -moz-transform: rotate(180deg); opacity: 1; }
100%   { -moz-transform: rotate(360deg); opacity: 0.4; }
}


#p_top{
	position:absolute;
	top:0;
}


.bg_img{
	position:fixed;
	width:100%;
	height:100%;
	background-size:cover;
	background-position:center center;
	opacity: 0;
	-webkit-transition: .4s cubic-bezier(0.78, .18, .34, .98);
  -moz-transition: .4s cubic-bezier(0.78, .18, .34, .98);
  -ms-transition: .4s cubic-bezier(0.78, .18, .34, .98);
  -o-transition: .4s cubic-bezier(0.78, .18, .34, .98);
  transition: .4s cubic-bezier(0.78, .18, .34, .98);
}



.bg_img.active {
	opacity: 1;
	-webkit-transition: .4s cubic-bezier(0.78, .18, .34, .98);
  -moz-transition: .4s cubic-bezier(0.78, .18, .34, .98);
  -ms-transition: .4s cubic-bezier(0.78, .18, .34, .98);
  -o-transition: .4s cubic-bezier(0.78, .18, .34, .98);
  transition: .4s cubic-bezier(0.78, .18, .34, .98);
}


#bg_img01{
	background-color: #ffdfe4;
}

#bg_img02{
	background-color: #ebffe5;
}

#bg_img03{
	background-color: #d8bfa9;
}

#bg_img04{
	background-color: #fdffcf;
}

#bg_img_footer{
	background-color: #fff;
}



















header{
	display:none;
	z-index:9998;
	position:fixed;
	width: 32.2314049587vw;
	max-width:500px;
	margin: 0 auto;
	left:50%;
	padding: 10px 20px;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-o-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
}

			.header_wrap{
				display: flex;
				justify-content: space-between;
				align-items: center;
				flex-direction: row-reverse;
			}


#title_season{
	position:absolute;
	z-index:99;
	top:30px;
	left:50%;
	width:220px;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-o-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
}




.sub_grand_menu{
	width:25px;
}

.sub_grand_menu{
	position:relative;
  z-index: 9999;
	width: 25px;
  -webkit-transition: 1s cubic-bezier(0.78, .18, .34, .98);
  -moz-transition: 1s cubic-bezier(0.78, .18, .34, .98);
  -ms-transition: 1s cubic-bezier(0.78, .18, .34, .98);
  -o-transition: 1s cubic-bezier(0.78, .18, .34, .98);
  transition: 1s cubic-bezier(0.78, .18, .34, .98);
}

.sub_grand_menu.active{
  opacity: 1;
  -webkit-transition: 1s cubic-bezier(0.78, .18, .34, .98);
  -moz-transition: 1s cubic-bezier(0.78, .18, .34, .98);
  -ms-transition: 1s cubic-bezier(0.78, .18, .34, .98);
  -o-transition: 1s cubic-bezier(0.78, .18, .34, .98);
  transition: 1s cubic-bezier(0.78, .18, .34, .98);
}


.sub_grand_menu p{
  text-align:center;
  color:#fff;
}


.sub_grand_menu.sub_grand_menu_ani{
  position:fixed;
  top:0px;
  z-index: 9999;
  -webkit-transition: 1s cubic-bezier(0.78, .18, .34, .98);
  -moz-transition: 1s cubic-bezier(0.78, .18, .34, .98);
  -ms-transition: 1s cubic-bezier(0.78, .18, .34, .98);
  -o-transition: 1s cubic-bezier(0.78, .18, .34, .98);
  transition: 1s cubic-bezier(0.78, .18, .34, .98);
}


.sub_grand_menu .button-navi-icon {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 2px;
  margin: 0px 0 0 -11px;
  background: #fff;
  -webkit-transition: 0.2s ease-out;
  -moz-transition: 0.2s ease-out;
  -ms-transition: 0.2s ease-out;
  -o-transition: 0.2s ease-out;
  transition: 0.2s ease-out;
}


.sub_grand_menu .button-navi-icon:after, .sub_grand_menu .button-navi-icon:before {
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 22px;
  height: 2px;
  background: #fff;
  -webkit-transition: 0.3s ease-out;
  -moz-transition: 0.3s ease-out;
  -ms-transition: 0.3s ease-out;
  -o-transition: 0.3s ease-out;
  transition: 0.3s ease-out;
}








.sub_grand_menu .button-navi-icon:before {
  margin-top: -8px;
}

.sub_grand_menu .button-navi-icon:after {
  margin-top: 7px;
}

.sub_grand_menu_top{
  padding: 15px 0px;
  overflow:hidden;
}

.sub_grand_menu_top .sub_menu ul li{
  display: inline-block;
  padding:0 20px;
}


.sub_grand_menu .button-navi-icon.close:before, .sub_grand_menu .button-navi-icon.close:after {
	margin-top: 0;
	background: #fff;
}

.sub_grand_menu .button-navi-icon.close:after {
  
}

.button-navi-icon.close:after {
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.button-navi-icon.close:before {
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}


.button-navi-icon.close {
  background: transparent!important;
}

.scroll .button-navi-icon.close {
  background: transparent!important;
}

.button-close{
	position:absolute;
	padding: 25px 0px 6px;
	width: 25px;
	top: 0;
	z-index:-9999;
	}


#menu_index{
	position: fixed;
	z-index:9997;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-o-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	width: 32.2314049587vw;
	max-width:500px;
	height: 100%;
	background: #e2d3ed;
}

.menu_index_inner{
	width: auto;
	height: 100%;
	overflow: scroll;
	margin: 0 auto;
	position: relative;
	padding: 0 0px;
	overflow: scroll;
	-ms-overflow-style: none;
	scrollbar-width: none;
}

.menu_index_inner::-webkit-scrollbar{
  display: none;
			}
			
			.menu_index_inner .btn_shoplimited > a {
				width: 140px;
			}
			
			.menu_index_inner  .pc_right_sns{
				padding-bottom: 100px;
			}


.menus{
	padding-top:120px;
}


.menus ul li{
	margin-bottom:10px;
}

			.menus ul li a{
				font-size:16px;
				color: #8bbad8;
				font-family: "Lexend", sans-serif;
			}
			
			
			.footer_all{
				padding:0 60px;
				 animation: yureru-s 2s infinite;
			}
			
			@keyframes yureru-s {
				0% {
					transform: translate(2px, 0px);
				}
				5% {
					transform: translate(-2px, 0px);
				}
				10% {
					transform: translate(2px, 0px);
				}
				15% {
					transform: translate(-2px, 0px);
				}
				20% {
					transform: translate(2px, 0px);
				}
				25% {
					transform: translate(-2px, 0px);
				}
				30% {
					transform: translate(0px, 0px);
				}
}


.katakata{
	animation:katakata 5s infinite ease-in-out alternate;
}



@keyframes katakata {
  0% {transform:translate(0, 0) rotate(0deg);}
  21% {transform:translate(0, 0) rotate(0deg);}

  22% {transform:translate(0, 0) rotate(-3deg);}
  23% {transform:translate(0, -1px) rotate(0deg);}
  24% {transform:translate(0, -1px) rotate(3deg);}

  25% {transform:translate(1px, 0) rotate(-2deg);}
  26% {transform:translate(0, 1px) rotate(0deg);}
  27% {transform:translate(0, 0) rotate(3deg);}

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








			
			
			
			.footer_sns_btn{
				display:flex;
				justify-content: center;
				gap:40px;
				margin-top: 60px;
			}
			
			.footer_sns_btn > a{
				height: 30px;
				fill: #663590;
			}
			
			.footer_sns_btn > a svg {
				width: auto;
				height: 100%;
			}
			
			
	.footer_btn{
	display:flex;
	justify-content: center;
	gap: 40px;
	margin-top: 60px;
	padding: 0 40px;
	}
			
			.footer_btn a{
				opacity:1;
				-webkit-transition: .6s cubic-bezier(0.78, .18, .34, .98);
				-moz-transition: .6s cubic-bezier(0.78, .18, .34, .98);
				-ms-transition: .6s cubic-bezier(0.78, .18, .34, .98);
				-o-transition: .6s cubic-bezier(0.78, .18, .34, .98);
				transition: .6s cubic-bezier(0.78, .18, .34, .98);
			}
			
			
			.footer_btn a:hover{
				opacity:.6;
				-webkit-transition: .6s cubic-bezier(0.78, .18, .34, .98);
				-moz-transition: .6s cubic-bezier(0.78, .18, .34, .98);
				-ms-transition: .6s cubic-bezier(0.78, .18, .34, .98);
				-o-transition: .6s cubic-bezier(0.78, .18, .34, .98);
				transition: .6s cubic-bezier(0.78, .18, .34, .98);
}














#pc_content{
	position:fixed;
	left: 0;
	right: 0;
	height:100%;
	}

.pc_content_wrap{
	position: relative;
	max-width: 100%;
	padding: 0 0px;
	height: 100%;
	margin:0 auto;
}

.pc_left{
	width: 34%;
    height: 100%;
    position: absolute;
    left: 0;
}
			
			
			


			





			.pc_right{
				width: 28%;
				height: 100%;
				position:absolute;
				right:0;
			}
			
			
			.menu_wrap{
				display: flex;
				flex-direction: column;
				height: 100%;
				justify-content: space-around;
				padding:50px 0;
			}
			
			
			.menu_title{
				padding:0 30px;
				max-width:300px;
			}
			
			
			.menu_btn_list{
				margin-top:40px;
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				grid-column-gap: 0px;
				grid-row-gap: 30px;
	}
	
	/*
	body.active .menu_btn_list > div{
	opacity:.6;
	-webkit-transition: .4s cubic-bezier(0.78, .18, .34, .98);
	-moz-transition: .4s cubic-bezier(0.78, .18, .34, .98);
	-ms-transition: .4s cubic-bezier(0.78, .18, .34, .98);
	-o-transition: .4s cubic-bezier(0.78, .18, .34, .98);
	transition: .4s cubic-bezier(0.78, .18, .34, .98);
	}
	*/


	
	body.active.top_sec01 .menu_btn_list > div.menu_btn01{
	opacity:1;
	-webkit-transition: .4s cubic-bezier(0.78, .18, .34, .98);
	-moz-transition: .4s cubic-bezier(0.78, .18, .34, .98);
	-ms-transition: .4s cubic-bezier(0.78, .18, .34, .98);
	-o-transition: .4s cubic-bezier(0.78, .18, .34, .98);
	transition: .4s cubic-bezier(0.78, .18, .34, .98);
}



	body.active.top_sec02 .menu_btn_list > div.menu_btn02{
	opacity:1;
	-webkit-transition: .4s cubic-bezier(0.78, .18, .34, .98);
	-moz-transition: .4s cubic-bezier(0.78, .18, .34, .98);
	-ms-transition: .4s cubic-bezier(0.78, .18, .34, .98);
	-o-transition: .4s cubic-bezier(0.78, .18, .34, .98);
	transition: .4s cubic-bezier(0.78, .18, .34, .98);
}



	body.active.top_sec03 .menu_btn_list > div.menu_btn03{
	opacity:1;
	-webkit-transition: .4s cubic-bezier(0.78, .18, .34, .98);
	-moz-transition: .4s cubic-bezier(0.78, .18, .34, .98);
	-ms-transition: .4s cubic-bezier(0.78, .18, .34, .98);
	-o-transition: .4s cubic-bezier(0.78, .18, .34, .98);
	transition: .4s cubic-bezier(0.78, .18, .34, .98);
	}

	body.active.top_sec04 .menu_btn_list > div.menu_btn04{
	opacity:1;
	-webkit-transition: .4s cubic-bezier(0.78, .18, .34, .98);
	-moz-transition: .4s cubic-bezier(0.78, .18, .34, .98);
	-ms-transition: .4s cubic-bezier(0.78, .18, .34, .98);
	-o-transition: .4s cubic-bezier(0.78, .18, .34, .98);
	transition: .4s cubic-bezier(0.78, .18, .34, .98);
}


.menu_btn_list.active > div{
	opacity:.6;
	-webkit-transition: .4s cubic-bezier(0.78, .18, .34, .98);
	-moz-transition: .4s cubic-bezier(0.78, .18, .34, .98);
	-ms-transition: .4s cubic-bezier(0.78, .18, .34, .98);
	-o-transition: .4s cubic-bezier(0.78, .18, .34, .98);
	transition: .4s cubic-bezier(0.78, .18, .34, .98);
}

















			
			
			
			
			.btn_shoplimited{
				display:flex;
				justify-content: center;
				margin-top: -40px;
			}
			
			
			.btn_shoplimited > a{
				width:170px;
			}
			
			
			
			
			
			
			
			
			.menu_list > a span b{
				font-family: "Noto Serif Display", serif;
				font-weight: 300;
				line-height:0%;
			}
			
			
			
			
			.pc_right_sns{
				display:flex;
				gap: 30px;
				justify-content: center;
				margin-top:50px;
			}
			
			.pc_right_sns > a{
				height:30px;
				fill: #663590;
			}
			
			.pc_right_sns > a svg{
				width:auto;
				height:100%;
			}
			
			
			
			
			
			


.top_sec01 .pc_right_sns > a, .top_sec02 .pc_right_sns > a,.top_sec04 .pc_right_sns > a {
	fill: #e95899;
}


.top_sec03 .pc_right_sns > a {
	fill: #7f4f21;
}













			
			
			
			
			.menu_index_bottom{
				display:flex;
				margin-top: 40px;
			}
			
			
			#menu_index .icon_insta{
				left:30px;
			}
			
			
			#menu_index .menu_list > a.active span:after{
				display:none;
			}
			
			
			
			
			.s_note {
				
			}
			
			.s_note p{
					font-family: "Zen Kaku Gothic New", serif;
	font-size:15px;
	    font-weight: bold;
				line-height:180%;
				text-align: center;
				color:#5a7aff;
			}



#top_movie video{
	width:100%;
}



.main_img{
	position:relative;
}








			#top_sec00{
				margin-top:0px;
				padding: 0 0;
			}
			
			
			#top_sec00 .banner_all{
				text-align: center;
			}
			
			
			
			.banner_all{
				position: relative;
				z-index: 9;
				margin-top: 80px;
				padding:0 20px;
				text-align: center;
			}
			
			
			
			
			
			.banner_all a{
				display: inline-block;
				overflow:hidden;
				position:relative;
				font-family: "cooper-black-std", serif;
						font-size: 35px;
				text-align:center;
				color:#fff;
				background:#e95899;
				border-radius: 333px;
				    padding: 40px 65px;
				-webkit-transition: .4s cubic-bezier(0.78, .18, .34, .98);
				-moz-transition: .4s cubic-bezier(0.78, .18, .34, .98);
				-ms-transition: .4s cubic-bezier(0.78, .18, .34, .98);
				-o-transition: .4s cubic-bezier(0.78, .18, .34, .98);
				transition: .4s cubic-bezier(0.78, .18, .34, .98);
			}
			
			.banner_all a:hover{
				color:#fff;
				background:#7dce85;
				-webkit-transition: .4s cubic-bezier(0.78, .18, .34, .98);
				-moz-transition: .4s cubic-bezier(0.78, .18, .34, .98);
				-ms-transition: .4s cubic-bezier(0.78, .18, .34, .98);
				-o-transition: .4s cubic-bezier(0.78, .18, .34, .98);
				transition: .4s cubic-bezier(0.78, .18, .34, .98);
			}
			
			
			
			
			
			
			
			.top_sec01_scroll{
				margin-top:60px;
				overflow: hidden;
			}




			.caption a{
				font-family: "Zen Kaku Gothic New", serif;
				font-size:12px;
				line-height:140%;
				display: block;
				margin-bottom: 5px;
				position: relative;
			}
			
			.caption a:last-child{
				margin-bottom: 0px;
			}
			
			.caption span{
				position: relative;
				font-family:"Lexend", serif;
				display:inline-block;
				font-weight:bold;
				transition: 0.5s;
			}
			
			.caption a:hover span{
				color:#fff!important;
			}
			
			.caption a span:before {
				position: absolute;
				left: 0;
				width: 0;
				height: 100%;
				content: "";
				background-color: #bb1200;
				transition: 0.3s;
				z-index:-9;
			}
			
			.caption a:hover span:before {
				width: 100%;
			}
			
			
			.top_sec01_05_caption .caption a span:before {
				background-color: #2600e6;
			}
			
			
			.top_sec02_02_caption .caption a span:before {
				background-color: #bc6ae5;
			}
			
			.top_sec03_02_caption .caption a span:before {
				background-color: #af865d;
			}
			
			
			
			
			






















			.mute{
				position:absolute;
				z-index: 9;
				right:30px;
				bottom:30px;
				width:80px;
			}

.mute span{
    position: absolute;
    z-index: -99;
    top: 10px;
    left: 10px;
    width: 18px;
    height: 1.5px;
    background: #7dce85;
    transform: translate(-50%, -50%) rotate(45deg);
    -webkit-transform: translate(-50%, -50%) rotate(45deg);
	}


      .mute .cls-1 {
        fill: #7dce85;
      }

      .mute .cls-2 {
        fill: none;
        stroke: #7dce85;
        stroke-miterlimit: 10;
        stroke-width: 2px;
      }












			footer{
				padding: 0px 0 120px;
				background-image:url(../img/footer_bk.webp);
						background-size: contain;
}

.footer_top{
	margin-bottom:50px;
}

.footer_box{
	position:relative;
	padding:30px;
	margin:0 30px;
	background:#fdf5db;
	border:2px solid #eb8ab7;
	border-radius: 20px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
}

.footer_box .icon_ice01{
    width: 96px;
    position: absolute;
    top: 47%;
	right: -8px;
	animation: fuwafuwa 1.2s ease-in-out infinite alternate-reverse;
}

.footer_box .icon_ice02{
    width: 85px;
    position: absolute;
    top: 72%;
	left: -10px;
	animation: fuwafuwa02 1.2s ease-in-out infinite alternate-reverse;
}

.footer_box_title{
	padding-left:32%;
	margin-bottom:20px;
}

			
			.footer_gif{
				position:relative;
			}
			
			
	.shop_limited{
	position: absolute;
	z-index: 99;
	top: 0;
	margin-top: -7%;
	left: -5%;
	width: 38%;
			}
			
.footer_text{
	position: relative;
	margin-top:40px;
	}
			
	.footer_text p{
	font-family: "Zen Kaku Gothic New", serif;
	font-size: 16px;
	text-align:center;
	line-height: 160%;
	color:#e95899;
	}

	.footer_text p span{
	font-size: 20px;
	font-weight:bold;
			}

	.footer_text p small{
	font-size: 12px;
			}
			
			
			.footer_img_list{
				margin-top:30px;
				display:flex;
				gap:10px;
			}
			
			.footer_img_fade{
				position:relative;
			}
			
			.footer_img_fade{
				width:50%;
				min-width: 0; 
			}
			
			.fade_img_text{
				position:absolute;
				z-index:99;
				pointer-events: none
			}
			
			footer .banner_all{
			    margin-top: -60px;
	}
	
	
	
	
	
	
	
	.footer_box02{
		margin-top:100px;
		padding-bottom: 100px;
	}
	
	.footer_box02.footer_box{
		    background: #d0e8e7;
	}
	
	.footer_box .icon_ice03 {
		width: 96px;
		position: absolute;
		top: 26%;
		left: -8px;
		animation: fuwafuwa02 1.2s ease-in-out infinite alternate-reverse;
	}
	
	.footer_box .icon_ice04 {
		width: 85px;
		position: absolute;
		top: 72%;
		right: -10px;
		animation: fuwafuwa 1.2s ease-in-out infinite alternate-reverse;
	}
	
	
	
	
	
	
	
	
			
			
			
			.first_blank{
				height:150vh;
			}
			
			
			
			#top_movie{
				opacity: 1;
				z-index: 99;
				width: 34%;
				height: 100%;
				position:fixed;
				top:0;
				left:0%;
				-webkit-transition: .6s cubic-bezier(0.78, .18, .34, .98);
				-moz-transition: .6s cubic-bezier(0.78, .18, .34, .98);
				-ms-transition: .6s cubic-bezier(0.78, .18, .34, .98);
				-o-transition: .6s cubic-bezier(0.78, .18, .34, .98);
				transition: .6s cubic-bezier(0.78, .18, .34, .98);
			}
			
			
			
			
			
			
			
			.main_img01 {
				position: relative;
				z-index: 99;
				pointer-events: none;
			}
			
			
			
			#top_movie .top_movie_wrap video{
		position: absolute;
		
				top: 50%;
				left: 50%;
				width: 100%;
				height: 100%;
				object-fit: cover;
				object-position: center;
				transform: translate(-50%, -50%);
				-webkit-transform: translate(-50%, -50%);
				-moz-transform: translate(-50%, -50%);
				-o-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		background: transparent;
			}
			
			
			
			body.active #top_movie{
				left:0%;
				transform: translateX(0%);
				-webkit-transform: translateX(0%);
				-moz-transform: translateX(0%);
				-o-transform: translateX(0%);
				-ms-transform: translateX(0%);
				-webkit-transition: .4s cubic-bezier(0.78, .18, .34, .98);
				-moz-transition: .4s cubic-bezier(0.78, .18, .34, .98);
				-ms-transition: .4s cubic-bezier(0.78, .18, .34, .98);
				-o-transition: .4s cubic-bezier(0.78, .18, .34, .98);
				transition: .4s cubic-bezier(0.78, .18, .34, .98);
			}
			
			
			
			#bgc{
				content:"";
				position:fixed;
				top:0;
				left:50%;
				transform: translateX(-50%);
				-webkit-transform: translateX(-50%);
				-moz-transform: translateX(-50%);
				-o-transform: translateX(-50%);
				-ms-transform: translateX(-50%);
				width: 38%;
				min-width:300px;
				margin: 0 auto;
				height:100%;
				background: transparent;
			}





#content{
	width: 38%;
	min-width:300px;
	margin: 0 auto;
	height:100%;
	margin:0 auto;
	left:53%;
	top: 0px;
	position:absolute;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-o-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
}


	
			.wrap{
				overflow: scroll;
				overflow-x: hidden;
				-ms-overflow-style: none;
				scrollbar-width: none;
			}

.wrap::-webkit-scrollbar{
  display: none;
}


				.st_sec{
					overflow:hidden;
					padding:100px 0 200px;
					position: relative;
				}

.view a{
	font-family: "arno-pro", serif;
	font-weight:400;
	border-bottom:1px solid #bbb;
	letter-spacing: 0.3px;
	font-size: 15px;
}












			.sec_about{
				padding: 60px 10px;
			}
			
			
			
			
			
			
			
			
			
			
			.sec_main_img{
				margin-top:80px;
			}
			
			
			
			.look_btn a{
				overflow:hidden;
				position:relative;
				font-family: "ZTBros-Regular", sans-serif;
				font-size:28px;
					padding:5px 20px;
				text-align:center;
				color:#64caff;
				background:transparent;
				border: 1px solid #64caff;
				border-radius: 50%;
				padding: 10px 50px;
				-webkit-transition: .4s cubic-bezier(0.78, .18, .34, .98);
				-moz-transition: .4s cubic-bezier(0.78, .18, .34, .98);
				-ms-transition: .4s cubic-bezier(0.78, .18, .34, .98);
				-o-transition: .4s cubic-bezier(0.78, .18, .34, .98);
				transition: .4s cubic-bezier(0.78, .18, .34, .98);
			}
			
			.look_btn a:hover{
				color:#fff;
				background:#64caff;
				-webkit-transition: .4s cubic-bezier(0.78, .18, .34, .98);
				-moz-transition: .4s cubic-bezier(0.78, .18, .34, .98);
				-ms-transition: .4s cubic-bezier(0.78, .18, .34, .98);
				-o-transition: .4s cubic-bezier(0.78, .18, .34, .98);
				transition: .4s cubic-bezier(0.78, .18, .34, .98);
				}
				
				
				
				
				
				
				a .credit{
					display: flex;
					justify-content: center;
					opacity:0;
					position:absolute;
					width: 100%;
					top: 50%;
					padding:0 30px;
					-moz-transition: .4s cubic-bezier(0.78, .18, .34, .98);
					-ms-transition: .4s cubic-bezier(0.78, .18, .34, .98);
					-o-transition: .4s cubic-bezier(0.78, .18, .34, .98);
					transition: .4s cubic-bezier(0.78, .18, .34, .98);
				}
				
				.credit p, .credit a{
					text-align:right;
					font-size:13px;
					color:#fff;
				}
				
				
				
				.credit.text_right{
					text-align:right;
				}
				
				
				img.over{
					position:absolute;
					top: 0;
					left: 0;
					opacity:1;
					-moz-transition: .4s cubic-bezier(0.78, .18, .34, .98);
					-ms-transition: .4s cubic-bezier(0.78, .18, .34, .98);
					-o-transition: .4s cubic-bezier(0.78, .18, .34, .98);
					transition: .4s cubic-bezier(0.78, .18, .34, .98);
				}
				
				
				img.hover{
					position:absolute;
					top: 0;
					left: 0;
					opacity:0;
					-moz-transition: .4s cubic-bezier(0.78, .18, .34, .98);
					-ms-transition: .4s cubic-bezier(0.78, .18, .34, .98);
					-o-transition: .4s cubic-bezier(0.78, .18, .34, .98);
					transition: .4s cubic-bezier(0.78, .18, .34, .98);
				}
				
				
				a:hover .hover{
					opacity:1;
					-webkit-transition: .4s cubic-bezier(0.78, .18, .34, .98);
					-moz-transition: .4s cubic-bezier(0.78, .18, .34, .98);
					-ms-transition: .4s cubic-bezier(0.78, .18, .34, .98);
					-o-transition: .4s cubic-bezier(0.78, .18, .34, .98);
					transition: .4s cubic-bezier(0.78, .18, .34, .98);
				}
				
				a:hover .credit{
					opacity:1;
					-webkit-transition: .4s cubic-bezier(0.78, .18, .34, .98);
					-moz-transition: .4s cubic-bezier(0.78, .18, .34, .98);
					-ms-transition: .4s cubic-bezier(0.78, .18, .34, .98);
					-o-transition: .4s cubic-bezier(0.78, .18, .34, .98);
					transition: .4s cubic-bezier(0.78, .18, .34, .98);
				}
				
				
				
				.text_scroll{
					position:absolute;
					z-index:-9;
					left:0;
				}
				
				
				.text_scroll_list {
					display: flex;
					gap: 20px;
					align-items: center;
					width: max-content;
					animation: infinity-scroll 35s linear infinite;
					list-style: none;
					padding: 0;
					margin: 0;
					justify-content: center;
					flex-direction: column;
				}
				
				
				.text_scroll_list > div {
					width: calc(20vw / 2);
				}
				
				
				
				@keyframes infinity-scroll {
					from {
						transform: translateY(0%);
					}
					to {
						transform: translateY(-50%);
					}
				}
				
				
				
				@keyframes fuwafuwa {
					0% {
						transform: translateY(-3%);
					}
					100% {
						transform: translateY(3%);
					}
	}
	
					
				@keyframes fuwafuwa02 {
					0% {
						transform: translateY(3%);
					}
					100% {
						transform: translateY(-3%);
					}
				}
				
				
	
	
	
	
	
	.top_sec00_01{
		position:relative;
	}
	
	
.top_sec00_01 {
	position: relative;
	overflow: hidden;
}

/* 最初は中央の小さい円だけ表示 */
.top_sec00_01 a {
	display: block;
	clip-path: circle(0% at 50% 50%);
	-webkit-clip-path: circle(0% at 50% 50%);
	transition:
	clip-path 2.2s cubic-bezier(.77,0,.18,1),
	-webkit-clip-path 2.2s cubic-bezier(.77,0,.18,1) 1s;
}

/* activeで円が広がる */
.top_sec00_01.active a {
	clip-path: circle(150% at 50% 50%);
	-webkit-clip-path: circle(150% at 50% 50%);
}
	
	
.top_sec00_01 img {
	display: block;
	width: 100%;
}	
	
				
				
				
				.top_sec01_01{
					padding-left:20%;
				}
				
				
				.top_sec01_02{
					position:relative;
					margin-top:80px;
					width:80%;
				}
								
				.top_sec01_icon01{
					position: absolute;
					z-index: 99;
					bottom: -30px;
					left: 80%;
					width: 35%;
					animation: fuwafuwa 1.2s ease-in-out infinite alternate-reverse;
				}
				
				.top_sec01_03{
					margin-top:80px;
					padding-left:20%;
				}
				
				.top_sec01_04{
					position:relative;
					margin-top:80px;
					width:80%;
				}
				
				.top_sec01_icon02{
					position: absolute;
					z-index: -9;
					top: -90px;
					left: 0%;
					width: 38%;
					animation: fuwafuwa 1.2s ease-in-out infinite alternate-reverse;
				}
				
				.top_sec01_05{
					position:relative;
					margin-top:80px;
					padding-left:20%;
				}
				
				.top_sec01_icon03{
					position: absolute;
					z-index: -9;
					top: -80px;
					right: 0%;
					width: 22%;
					animation: fuwafuwa 1.2s ease-in-out infinite alternate-reverse;
				}
				
				
				.top_sec01_icon04{
					position: absolute;
					z-index: 9;
					bottom: 0px;
					left: 0%;
					width: 30%;
					animation: fuwafuwa 1.2s ease-in-out infinite alternate-reverse;
				}
				
				
				
				
				
				
				
				#top_sec02 .text_scroll{
					position:absolute;
					z-index:-9;
					left:auto;
					right:0;
				}
				
				
				
				.top_sec02_01{
					width:80%;
					margin: 0 auto;
				}
				
				
				.top_sec02_02{
					width:80%;
					margin-top:60px;
					margin-left:2%;
				}
				
				
				.top_sec02_03{
					width:80%;
					margin-top:60px;
					margin-left:15%;
				}
				
				.top_sec02_04{
					width:80%;
					margin-top:60px;
					margin-left:2%;
				}
				
				
				#top_sec02 .banner_all a{
					color: #ff2460;
					background: #fdfeff;
				}
				
								
				#top_sec02 .banner_all a:hover{
					color: #fdfeff;
					background: #ff2460;
				}
				
				
				
				.top_sec02_icon01{
					position:absolute;
					z-index:-9;
					width:40%;
					top:40px;
					left:0;
				}
				
				
				.top_sec02_icon02{
					position:absolute;
					z-index:-9;
					width:60%;
					top:20%;
					right:0;
				}
				
				.top_sec02_icon03{
					position:absolute;
					z-index:-9;
					width:40%;
					top:40%;
					left:0;
				}
				
				
				.top_sec02_icon04{
					position:absolute;
					z-index:-9;
					width:40%;
					top:65%;
					right:0;
				}
				
				.top_sec02_icon05{
					position:absolute;
					z-index:-9;
					width:60%;
					bottom:30px;
					left:0;
				}
				
				
				
				
				
				#top_sec03:after{
					content:"";
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					z-index: -99;
					background-image:url(../img/top_sec03_bk.webp);
					background-size: cover;
					background-position: center center;
				}
				
				.top_sec03{
					display: flex;
					flex-direction: column;
					align-items: center;
				}
				
				
				
				.top_sec03_01{
					position:relative;
					z-index:99;
					width:75%;
				}
				
				
				.top_sec03_02{
					position:relative;
					z-index:9;
					width:75%;
					margin-top:-80px;
				}
				
				.top_sec03_03{
					position: relative;
					z-index: 8;
					width:75%;
					margin-top:-60px;
				}
				
				.top_sec03_04{
					width:75%;
					margin-top:-100px;
				}
				
				
	.top_sec03_05{
		position:relative;
		z-index:-9;
		margin-top: -265px;
		margin-left: 15px;
		width: 75%;
	}
				
				
				
				
				#top_sec03 .banner_all a{
					color: #d8bfa9;
					background: #7f4f21;
				}
				
				#top_sec03 .banner_all a:hover{
					color: #7f4f21;
					background: #d8bfa9;
				}
				
				
				
				#top_sec04:after{
					content:"";
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					z-index: -99;
					background-image:url(../img/top_sec04_bk.webp);
					background-size: cover;
					background-position: center center;
				}
				
				#top_sec04 .text_scroll{
					position:absolute;
					z-index:-9;
					left:auto;
					right:0;
				}
				
				
				
				.top_sec04_01{
					width:90%;
					padding-left:5%;
				}
				
				.top_sec04_01 .credit{
							top: 53%;
				}
				
				.top_sec04_02{
					margin-top:60px;
					padding-left:30%;
					width:90%;
				}
				
				.top_sec04_02 .credit{
					top: 48%;
				}
				
				.top_sec04_02_icon{
					position: relative;
					width: 58%;
					margin-top: -60px;
					padding-left: 8%;
				}
				
				
				.top_sec04_03{
					margin-top:60px;
					padding-left:20%;
					width:95%;
				}
				
				.top_sec04_03 .credit{
					top: 55%;
				}
				
				
				.top_sec04_04{
					margin-top:-20px;
					padding-left:5%;
					width:80%;
				}
				
				.top_sec04_04 .credit{
					top: 42%;
				}
	
	.top_sec04_05{
		margin-top: 80px;
					padding:0 5%;
				}
				
				
				.top_sec04_05 .credit{
					margin-top:10px;
				}
				
				
				.top_sec04_05_icon{
					position:absolute;
					width:50%;
					right:5%;
					bottom: 20px;
				}
				
				
				#top_sec04 .banner_all a{
					color: #f7f4cb;
				}
				
				#top_sec04 .banner_all a:hover{
					color:#e95899;
					background: #f7f4cb;
				}
	
	
		
	
				
				
				
				
				
				
				
				.main_img_img{
				position: relative;
				overflow: hidden;
				height: 100%;
			}
			
			.main_img01_video{
				position: absolute;
				top: 0;
				width: 100%;
				height: 100%;
			}
			
			.main_img01_video video{
			    position: absolute;
				top: 50%;
				left: 50%;
				width: 100%;
				height: 100%;
				object-fit: cover;
				object-position: center;
				transform: translate(-50%, -50%);
				-webkit-transform: translate(-50%, -50%);
				-moz-transform: translate(-50%, -50%);
				-o-transform: translate(-50%, -50%);
				-ms-transform: translate(-50%, -50%);
			}
			
			
				
				
				
				
				
				#first_animation{
					background:#ffdfe4;
					position: fixed;
					top: 0;
					left: 0;
					width: 100%;
					height: 120vh;
					overflow: hidden;
					pointer-events: none;
					z-index: 9999;
				}
				
				
				
				#first_animation.hide{
					animation: loadingFadeOut .5s ease forwards;
				}

@keyframes loadingFadeOut{

	0%{
		opacity: 1;
	}

	100%{
		opacity: 0;
		visibility: hidden;
	}
}
				
				
				/* 共通 */
				.ice{
					position: absolute;
					width: 20%;
					top: -50vh; /* 見えない上 */
					will-change: transform, opacity;
					opacity: 0;
				}
				
				.ice img{
					width: 100%;
					display: block;
				}
				
				
				
				/* ice01 */
				.ice01{
					left: 5%;
					animation: fall01 4.2s ease-in forwards;
					animation-delay: 0s;
				}
				
				/* ice02 */
.ice02{
	left: 28%;
	animation: fall02 3.2s ease-in forwards;
	animation-delay: .5s;
}

/* ice03 */
.ice03{
	left: 52%;
	animation: fall03 4.8s ease-in forwards;
	animation-delay: 1.0s;
}

/* ice04 */
.ice04{
	left: 78%;
	animation: fall04 3.9s ease-in forwards;
	animation-delay: 1.4s;
}



/* =========
	ice01
========= */
@keyframes fall01{

	0%{
		transform:
			translate(0,0)
			rotate(0deg);
		opacity: 0;
	}

	10%{
		opacity: 1;
	}
		
		70%{
			transform:
				translate(-30px,120vh)
				
			}
			
			82%{
				transform:
					translate(-10px,100vh)
					rotate(160deg);
				opacity: 1;
			}
			
			100%{
				transform:
					translate(0,120vh)
					rotate(180deg);
				opacity: 0;
			}
		}



/* =========
	ice02
========= */
@keyframes fall02{

	0%{
		transform:
			translate(0,0)
			rotate(0deg)
		opacity: 0;
	}

	10%{
		opacity: 1;
	}

	65%{
		transform:
			translate(40px,120vh)
	}

	78%{
		transform:
			translate(20px,95vh)
						rotate(-150deg);
					opacity: 1;
	}
				
	100%{
		transform:
						translate(0,100vh)
						rotate(-150deg);
						opacity: 0;
	}
}



/* =========
	ice03
========= */
@keyframes fall03{

	0%{
		transform:
			translate(0,0)
			rotate(0deg);
		opacity: 0;
	}

	10%{
		opacity: 1;
	}

	72%{
		transform:
			translate(-60px,120vh)
	}

	84%{
		transform:
			translate(-30px,105vh)
							rotate(190deg);
						opacity: 1;
	}

					100%{
						transform:
							translate(0,110vh)
							rotate(190deg);
						opacity:0;
	}
}



/* =========
	ice04
========= */
@keyframes fall04{

	0%{
		transform:
			translate(0,0)
			rotate(0deg)
		opacity: 0;
	}

	10%{
		opacity: 1;
	}

	68%{
		transform:
			translate(60px,120vh)
			scale(1.1);
	}

	80%{
		transform:
			translate(30px,98vh)
							rotate(-140deg);
						opacity: 1;
	}

	100%{
		transform:
			translate(0,110vh)
							rotate(-140deg);
						opacity: 0;
	}
}
				
	
	
	
	
	
	
	
	
	
	
	.ice{
	position: absolute;
	width: 20%;
	top: -50vh;
	will-change: transform, opacity;
	opacity: 0;
}

/* start が付いてからアニメーション開始 */
#first_animation.start .ice01{
	left: 5%;
	animation: fall01 4.2s ease-in forwards;
	animation-delay: 0s;
}

#first_animation.start .ice02{
	left: 28%;
	animation: fall02 3.2s ease-in forwards;
	animation-delay: .5s;
}

#first_animation.start .ice03{
	left: 52%;
	animation: fall03 4.8s ease-in forwards;
	animation-delay: 1.0s;
}

#first_animation.start .ice04{
	left: 78%;
	animation: fall04 3.9s ease-in forwards;
	animation-delay: 1.4s;
}
				
				
				
				
				
				
				.onlyPc {
					display: block;
				}
				
				.onlySp {
					display: none;
				}
				
				
				
				
				
				
				
				
				
				
@media screen and (max-width: 570px) {
	
	
	.onlyPc {
		display: none;
	}
	
	
	.onlySp {
		display: block;
	}
				
				#pc_content{
					display:none;
				}
				
				
				header {
					width:100%;
					display:block;
				}
				
				#menu_index {
					width:100%;
				}
					
					
					body.active .menu_btn_list > div{
						opacity:1!important;
					}
				
				#content {
						width:100%;
						left:50%;
				}
					
					
				#bgc{
					width:100%;
				}
				
				.first_view_maison {
					top: 18px;
				}
				
				
				
				
				
				.caption a {
					font-size: 12px;
				}
					
					
					.mute {
					right: 20px;
					bottom: 20px;
					width: 70px;
				}
				
				.s_note p {
						font-size: 14px;
					}
					
					
					
					.text_scroll_list > div {
						width: calc(35vw / 2);
					}
					
					
					
					
					
					.ice{
						width: 40%;
					}
					
					
					.banner_all a {
						font-size: 32px;
						padding: 30px 40px;
					}
					

		
	
	
}











@media screen and (max-width:400px) {
	
	
				.s_title p {
					font-size: 15px;
				}
				
				.s_note p {
					font-size: 12px;
				}
				
					
					.footer_box .icon_ice01 {
						width: 80px;
						top: 40%;
					}
					
					.footer_box .icon_ice02 {
						width: 80px;
						top: 75%;
					}
					.footer_box .icon_ice03 {
						width: 75px;
					}
					
					.footer_box .icon_ice04 {
						width: 68px;
						top: 67%;
					}
					
										
					.footer_text p span {
						font-size: 18px;
					}
					
					.footer_text p {
						font-size: 14px;
					}
					
				
				.footer_text p small {
						font-size: 10px;
					}
				
				
				
				
			}








































