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

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

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

@font-face {
font-family: "hana";
src: url("hana.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:#beaed8;
	background:#fff;
	font-family: "SF-Pro-Display-Light", "Zen Kaku Gothic New", serif;
	}


ul, li{
	list-style:none;
}


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


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


.text_right{
	text-align:right;
}



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


.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 #beaed8;
  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);
}



header{
	z-index:9998;
	position:fixed;
	width: 33.3333333%;
	max-width:500px;
	margin: 0 auto;
	left:50%;
	padding: 0px 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: center;
}


#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: absolute;
	z-index: 9999;
	width: 25px;
	top: 10px;
	left: 20px;
	-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: 25px;
	height: 2px;
	margin: 0px 0 0 -12px;
	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: 25px;
	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: -9px;
}

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

body.active .sub_grand_menu .button-navi-icon, body.active .sub_grand_menu .button-navi-icon:after, body.active .sub_grand_menu .button-navi-icon:before {
	background: #beaed8;
	-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_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;
}

.sub_grand_menu .button-navi-icon.close:after, .sub_grand_menu .button-navi-icon.close:before {
  background:#beaed8;
}

.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: 33.33333333%;
	max-width:500px;
	height: 100%;
	background-image: url(../images/pc_bk.webp);
	background-size: cover;
	background-color: #fff;
}

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

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



.menus{
	padding-top:120px;
}


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

.menus ul li a{
	font-size:16px;
	color: #8bbad8;
	font-family: "SF-Pro-Display-Light", sans-serif;
}


.page_top{
	position:absolute;
	right: 20px;
	bottom: 20px;
	width:150px;
}

footer{
		margin:50px 0 80px;
}

footer .btn_all{
		margin-top:0px;
}

.footer_sns_btn > a{
	width:28px;
	display:block;
}

.footer_sns_btn > a .cls-1 {
    fill: #000;
}


.footer_sns_btn{
	display:flex;
	justify-content: center;
	gap:20px;
	margin-top:40px;
}

.footer_sns_btn > div{
	width:30px;
}

.btn_official{
	text-align:center;
	margin-top:20px;
}

.btn_official a{
	width:250px;
	display:inline-block;
}



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

#pc_content:after{
	content: "";
	position: absolute;
	z-index: -99;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-image: url(../images/pc_bk.webp);
	background-size: cover;
	}




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

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

.pc_left_wrap{
	text-align:center;
	position: relative;
	top:50%;
	padding-left: 30px;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	}

.side_left{
	position:absolute;
	width:30px;
	padding:0 5px;
	height:100%;
	background:#dbbecc;
}


.side_left p{
	position:absolute;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
}

.sns_icon{
	position: absolute;
	width: 100%;
	bottom:50px;
	display:flex;
	justify-content: center;
	gap:25px;
}

.sns_icon > div{
	width:30px;
}


.pc_left_img{
	margin-top:30px;
	width: 72%;
	max-width:300px;
	display:inline-block;
	animation: fuwafuwa01 1.8s ease-in-out infinite alternate-reverse;
}


.pc_right{
	width: 33.3333333%;
	height: 100%;
	position:absolute;
	right:0;
}




.pc_right_wrap{
	text-align:center;
	position:relative;
	top:50%;
	padding-right: 30px;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
}



.pc_right_img{
	margin-top:30px;
	width: 72%;
	max-width:300px;
	display:inline-block;
	animation: fuwafuwa02 1.8s ease-in-out infinite alternate-reverse;
}

.side_right{
	position:absolute;
	top:0;
	right:0;
	width:30px;
	padding:0 5px;
	height:100%;
	background:#6eaec4;
}


.side_right p{
	position:absolute;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
}

.logo_right{
	position:absolute;
	top:10%;
	padding-right:30px;
	width:100%;
	text-align:center;
}


.logo_right p{
	width:200px;
	display:inline-block;
}










.menu_list{
	text-align:left;
	display:inline-block;
}

.menu_list > a {
	font-size: 28px;
	position:relative;
	display:block;
	color:#727171;
	font-weight:400;
	font-family: "SF-Pro-Display-Light", sans-serif;
	margin-bottom:8px;
		-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_list > a:hover {
	color:#beaed8;
		-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_index .icon_insta{
	left:30px;
	}


	#menu_index .icon_insta .cls-1 {
	fill: #fff!important;
	}




	.page_top .cls-1 {
	fill: none;
	stroke: #fff;
	stroke-miterlimit: 10;
			-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);
		}

	.page_top .cls-2 {
	fill: #fff;
			-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);
		}

	.page_top .cls-3 {
	fill: #beaed8;
			-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);
}



	.page_top:hover .cls-1 {
	stroke: #beaed8;
			-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);
	}
	
	.page_top:hover .cls-2 {
	fill: #beaed8;
			-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);
	}
	
	.page_top:hover .cls-3 {
	fill: #fff;
			-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);
}








@keyframes fuwafuwa01{
  0% {
    transform: translateY(-5%);
  }
  100% {
    transform: translateY(5%);
  }
}


@keyframes fuwafuwa02{
  0% {
    transform: translateY(5%);
  }
  100% {
    transform: translateY(-5%);
  }
}



@keyframes fuwafuwa_w01{
  0% {
    transform: translateY(-15%);
  }
  100% {
    transform: translateY(15%);
  }
}


@keyframes fuwafuwa_w02{
  0% {
    transform: translateY(15%);
  }
  100% {
    transform: translateY(-15%);
  }
}

@keyframes fuwafuwa_w03{
  0% {
    transform: translateY(-25%);
  }
  100% {
    transform: translateY(25%);
  }
}


@keyframes fuwafuwa_w04{
  0% {
    transform: translateY(25%);
  }
  100% {
    transform: translateY(-25%);
  }
}






@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, -3px) rotate(0deg);}
  24% {transform:translate(0, -3px) rotate(3deg);}

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

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



@keyframes typing {
  from {
    width: 0
  }
}
    
@keyframes effect {
  50% {
    border-color: transparent
  }
		}
		
		

	#top_sec01{	
	}


.top_detail_img{
	position:relative;
}

.top_text{
	margin-top:40px;
}

.top_text h4{
	color:#727171;
	font-weight: 400;
	font-size:18px;
	text-align:center;
	margin-bottom:30px;
}

.top_text p{
		color:#727171;
	font-size: 14px;
	line-height: 200%;
		text-align:center;
}




.btn_all{
	margin-top:60px;
	text-align:center;
}


.btn_all a{
	font-family: "SF-Pro-Display-Light";
	position:relative;
	width: 180px;
	height: 180px;
	display:inline-block;
	font-size:36px;
	line-height:100%;
	color:#beaed8;
	border:1px solid #beaed8;
	border-radius: 333px;
	-webkit-border-radius: 333px;
	-moz-border-radius: 333px;
	-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_all a:hover{
	color:#fff;
	background:#beaed8;
	-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_all a span{
	position:absolute;
	top:47%;
	left:50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
}



.btn_all a .circle{
	width: 210px;
	height: 210px;
	position:absolute;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
}

.btn_all a .circle img{
	animation: rotateAnimation 22s linear infinite;
}



@keyframes rotateAnimation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}





.content_wrap{
	padding:0 30px;
}


.main_title p{
	text-align:center;
	color:#000;
}



.product_title{
			position:absolute;
			z-index: 99;
			width:30%;
			left: 20px;
}


#top_sec03{
	padding-top:50px;
	margin-top:0px;
}

#top_sec03 .product_title{
	right:30px;
	top:0px;
}



#top_sec05 .product_title{
	right:30px;
	top:0px;
}


#top_sec06 .product_title{
	right:30px;
	top:0px;
}


#top_sec07 .product_title{
	right:30px;
	top:0px;
}

#top_sec08 .product_title{
	right:30px;
	top:0px;
}

#top_sec09 .product_title{
	right:30px;
	top:0px;
}

#top_sec11 .product_title{
	right:30px;
	top:0px;
}



.product_box{
	padding:0 30px;
	position:relative;
}

.product_box span{
	font-family: "hana";
	font-size:20px;
	position:absolute;
}



.product_cal_box{
	position:relative;
	margin-top:30px;
}


.product_cal_wrap{
	margin:0 30px;
	padding:40px 60px;
	border:2px solid #a52cd1;
	border-radius: 30px;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	background-image: url(../images/cal_bk.webp);
	background-size: cover;
	background-color:#fff;
	box-shadow: 6px 6px 6px 0px rgba(0, 0, 0, 0.45);
}


.product_cal{
	
}

.product_thum{
	overflow:hidden;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	
}

.product_cal > div .caption{
	text-align:center;
	margin-top:10px;
}

.product_cal > div .caption a{
	font-size:12px;
	line-height: 180%;
	color:#727171;
}



.product_cal > div .caption a span{
	font-family: "Lexend", sans-serif;
	font-weight:bold;
	color:#beaed8;
}



.slick-progress {
	width: 100%;
	height: 10px;
	background: #beaed8;
	border-radius: 10px;
	position: relative;
	overflow: hidden;
	margin-top:20px;
}


.slick-progress-bar{
  position:absolute;
  top:0;
  height:100%;
	background:#fff;
	border:1px solid #a52cd1;
  border-radius:10px;
  left:0;
	transition: left 0.3s cubic-bezier(.4,0,.2,1);
}



.water_drop{
	position:absolute;
	z-index:99;
}

.w01_01{
    width: 15px;
    top: 36%;
	left: 15%;
	animation:fuwafuwa_w01 1.2s infinite ease-in-out alternate;
}

.w01_02{
    width: 20px;
    top: 75%;
	left: 18%;
    animation: fuwafuwa_w02 1.2s infinite ease-in-out alternate;
}

.w01_03{
    width: 27px;
    top: 20%;
	right: 22%;
	 animation: fuwafuwa_w02 1.2s infinite ease-in-out alternate;
}

.w01_04{
	width: 11px;
	top: 54%;
	right: 30%;
			animation:katakata 1s infinite ease-in-out alternate;
			animation: fuwafuwa_w03 .8s infinite ease-in-out alternate;
}

.w01_05{
    width: 9px;
    top: 73%;
	right: 24%;
	animation:fuwafuwa_w01 1.2s infinite ease-in-out alternate;
}

.w01_06{
    width: 18px;
    top: 75%;
	right: 19%;
	animation:fuwafuwa_w04 1.6s infinite ease-in-out alternate;
}






.w02_01{
    width: 12px;
    top: 30%;
	left: 28%;
	animation:fuwafuwa_w01 1.2s infinite ease-in-out alternate;
}

.w02_02{
    width: 12px;
    top: 60%;
	left: 25%;
	animation: fuwafuwa_w02 .8s infinite ease-in-out alternate;
}

.w02_03{
    width: 24px;
    top: 63%;
	left: 18%;
	animation: fuwafuwa_w02 1.2s infinite ease-in-out alternate;
}

.w02_04{
    width: 24px;
    top: 15%;
	right: 16%;
	animation:fuwafuwa_w04 1.6s infinite ease-in-out alternate;
}

.w02_05{
    width: 22px;
    top: 86%;
	right: 18%;
	animation:fuwafuwa_w03 1.6s infinite ease-in-out alternate;
}



.w03_01{
    width: 16px;
    top: 12%;
	left: 12%;
	animation:fuwafuwa_w04 1.6s infinite ease-in-out alternate;
}

.w03_02{
    width: 10px;
    top: 14%;
	left: 17%;
	animation: fuwafuwa_w02 1.2s infinite ease-in-out alternate;
}

.w03_03{
    width: 30px;
    top: 66%;
	left: 13%;
	animation: fuwafuwa_w02 1.2s infinite ease-in-out alternate;
}

.w03_04{
    width: 25px;
    top: 28%;
	right: 18%;
	animation:fuwafuwa_w04 1.6s infinite ease-in-out alternate;
}

.w03_05{
    width: 24px;
    top: 76%;
	right: 13%;
	animation:fuwafuwa_w01 1.2s infinite ease-in-out alternate;
}







.hane{
	position:absolute;
	z-index:99;
}


.hane01_01{
	width:90px;
	top:20%;
	right:8%;
		animation: fuwafuwa01 1.8s ease-in-out infinite alternate-reverse;
}

.hane01_02{
	width:60px;
	top:70%;
	left:12%;
	animation: fuwafuwa02 1.8s ease-in-out infinite alternate-reverse;
}


.hane02_01{
	width:90px;
	top:20%;
	left:8%;
	animation: fuwafuwa01 1.8s ease-in-out infinite alternate-reverse;
}

.hane02_02{
	width:60px;
	top:90%;
	right:15%;
	animation: fuwafuwa02 1.8s ease-in-out infinite alternate-reverse;
}



.hane03{
	width:70px;
	top:20%;
	left:13%;
}





.bk_img{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-size: cover;
	z-index:-99;
}





.about_text{
	margin-top:20px;
}


.about_text p{
	color:#000;
	font-size:13px;
	text-align: justify;
}


		.product_box.product_01_01 span{
			position: static;
		}


		.product_01_01 .t01{
			position:absolute;
			color:#dbbecc;
			top:25%;
			right:29%;
			opacity:0;
			transform: rotate(10deg);
			-ms-transform: rotate(10deg);
			-moz-transform: rotate(10deg);
			-webkit-transform: rotate(10deg);
		}
		
		.product_01_01 .t02{
			position:absolute;
			color:#dbbecc;
			margin-top:15px;
			top:28%;
			right:20%;
			opacity:0;
			transform: rotate(10deg);
			-ms-transform: rotate(10deg);
			-moz-transform: rotate(10deg);
			-webkit-transform: rotate(10deg);
		}
		
		.product_01_01.active .t01{
			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) .2s;
		}
		
		
		.product_01_01.active .t02{
			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) 2s;
		}
		
		.product_01_01.active .t01 span{
			opacity:1;
			width: 4ch;
			animation: typing 2s steps(4), effect .5s step-end infinite alternate;
			white-space: nowrap;
			overflow: hidden;
			display: block;
		}
		
		.product_01_01.active .t02 span{
			opacity:1;
			width: 8ch;
			animation: typing 2s steps(8), effect .5s step-end infinite alternate;
			animation-delay: 2s;
			white-space: nowrap;
			overflow: hidden;
			display: block;
		}
		
		
		
		
		
.product_01_02 span{
	width: 0;
	color:#6eaec4;
	bottom:12%;
			left:45%;
			opacity:0;
			
	transform: rotate(-10deg);
	-ms-transform: rotate(-10deg);
	-moz-transform: rotate(-10deg);
	-webkit-transform: rotate(-10deg);
}

		.product_01_02.active span{
			opacity:1;
  width: 7ch;
  animation: typing 2s steps(7), effect .5s step-end infinite alternate;
  white-space: nowrap;
  overflow: hidden;
		}
		
		
		
		
		

		.product_04_02 span{
			color:#6eaec4;
			top:25%;
			right:20%;
			opacity:0;
			transform: rotate(-10deg);
			-ms-transform: rotate(-10deg);
			-moz-transform: rotate(-10deg);
			-webkit-transform: rotate(-10deg);
		}
		
		
		.product_04_02.active span{
			opacity:1;
			width: 9ch;
			animation: typing 2s steps(9), effect .5s step-end infinite alternate;
			white-space: nowrap;
			overflow: hidden;
		}
		
		

		.product_03_01 span{
			color:#fff;
			top: 28%;
			left: 19%;
			opacity:0;
			transform: rotate(-10deg);
			-ms-transform: rotate(-10deg);
			-moz-transform: rotate(-10deg);
			-webkit-transform: rotate(-10deg);
		}
		
		
		.product_03_01.active span{
			opacity:1;
			width: 7ch;
			animation: typing 3s steps(7), effect .5s step-end infinite alternate;
			white-space: nowrap;
			overflow: hidden;
		}
		





	
	
	
	
	
	
	#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: 33.333333333%;
		max-width:500px;
		margin: 0 auto;
		height:100%;
		background:#fff;
	}
	
	
	#content{
	width: 33.3333333%;
	max-width:500px;
	margin: 0 auto;
	height:100%;
	margin:0 auto;
	left:50%;
	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;
	-ms-overflow-style: none;
	scrollbar-width: none;
}

.wrap::-webkit-scrollbar{
  display: none;
}
	
	
	.st_sec{
	position: relative;
	margin-top: 50px;
	padding-top: 50px;
	}

	.bk_sec{
	padding-bottom: 50px;
	}


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

















	.sp_img{
		display:none!important;
	}
	
	




















@media screen and (max-width: 570px) {
	
	.sp_img{
			display:block!important;
		}
		
		.pc_img{
			display:none!important;
	}
			
			
			
			
			
		
		#pc_content{
			display:none;
	}
	
	section{
		overflow:hidden;
	}
		
		.bg_img{
			display:none;
		}
	
		
	header{
		width:100%;
	}

	
	

			
			#menu_index {
				width:100%;
			}
			
			
			.menus {
				padding-top: 75px;
			}
			
			
			
			
			#content {
				width:100%;
			}
			
			#bgc{
				width:100%;
			}
	
	
	.about_text{
		padding:0 30px;
	}
	
	
	
	.product_title {
		left:25px;
	}
	
	
	#top_sec05 .product_title, #top_sec06 .product_title,#top_sec07 .product_title,#top_sec08 .product_title,#top_sec09 .product_title,#top_sec11 .product_title{
		left: auto;
		right:25px;
	}
	
	
	
	
	
	
	
	.product_cal_wrap {
		padding: 40px 30px;
	}
			
			
			
			.page_top {
				width: 130px;
			}
			
			
			.btn_all {
				padding-bottom: 20px;
			}
	
	
}