@charset "UTF-8";
/* CSS Document */
/* --------------20260902追記-------------------*/
#index #contents{
    background-image: none;
    display: block;
}
/* kv
--------------------------------------------------------------------------------------*/
#index #kv{
	position: relative;
	margin-bottom: 50px;
}


/* bottle_button
--------------------------------------------------------------------------------------*/
#index #bottle_button{
	position:fixed;
	left:calc(50% + 540px);
	top:120px;
	z-index:1000;
	animation:bottleShake 3s infinite;
	transform-origin:center bottom;
	will-change:transform;
}

#index #bottle_button a{
	display:block;
	background:none !important;
	outline:none;
}

#index #bottle_button img{
	display:block;
	width:85px;
	height:auto;
	background:none !important;
}

#index #bottle_button a:hover img{
	opacity:0.60 !important;
	filter:alpha(opacity=60) !important;
	-ms-filter:"alpha( opacity=60 )" !important;
	background:none !important;
}

/* caption
--------------------------------------------------------------------------------------*/
#index #caption{
  position: relative;
}

#index #caption figure{position: relative;}
#index #caption figure:nth-child(1){top:0; z-index: 8 !important;}
#index #caption figure:nth-child(2){top:40px; z-index: 10 !important;}

#index #caption #voice{
	width: 100%;
	background: url("../img/index/voice.jpg") no-repeat top center;
	background-size: 100% auto;
	margin-top: -100px;
	margin-bottom: 150px;
	position: relative;
	top:100px;
	z-index: -6 !important;
	min-height: 1340px;
}

#index #caption #voice .voice_bottleB{position: absolute; top: 0;right: 1%; }
#index #caption #voice .voice_bottleA{position: absolute; top:230px; left: 0;}
#index #caption #voice .voice_bottleT{position: absolute; top: 31%; left: 33%;}
#index #caption #voice .voice_bottleC{position: absolute; right: 0; bottom: 3%;}

#index #caption #voice .voice_bottleB img,
#index #caption #voice .voice_bottleA img,
#index #caption #voice .voice_bottleC img,
#index #caption #voice .voice_bottleT img{
	display: block;
}



/* movie
--------------------------------------------------------------------------------------*/
#index #movie{
  position: relative;
}
.youtube{
	width:960px;
	max-width:100%;
	margin:0 auto 20px auto;
	position:relative;
	aspect-ratio:16 / 9;
}

.youtube iframe{
	width:100%;
	height:100%;
	display:block;
	border:0;
}


/* point
--------------------------------------------------------------------------------------*/
#index #point{
	position:relative;
	height:1200px;
	background:#fff;
	overflow:visible;
	z-index:1;
}

#index #point::before{
	content:"";
	position:absolute;
	top:0;
	left:-60px;
	width:1320px;
	height:100%;
	background:url("../img/index/point.jpg") no-repeat center top;
	background-size:cover;
	z-index:0;
}

#index #point #secret{
	position:absolute;
	top:60%;
	left:50%;
	transform:translate(-50%, -50%);
	z-index:2;
}


/* type
--------------------------------------------------------------------------------------*/
#index #type{
	position:relative;
	max-width:1200px;
	margin:0 auto 80px;
}

#index #type h2{
	margin:0 0 60px;
	text-align:center;
}

#index #type h2 img{
	display:block;
	width:100%;
	height:auto;
	margin:0 auto;
}

#index #type .types{
	display:flex;
	justify-content:space-between;
	align-items:flex-start;
	margin:0 0 80px;
	padding:0;
}

#index #type .types > div{
	width:25%;
}

#index #type figure{
	margin:0;
	padding:0;
}

#index #type .sake-main-image{
	margin:0;
}

#index #type .sake-main-image img{
	display:block;
	width:100%;
	height:auto;
}

#index #type .sake-main-image .forPc{
	display:block;
}

#index #type .sake-main-image .forSp{
	display:none !important;
}

#index #type .features{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:18px;
	margin:26px 0 0;
}

#index #type .features img{
	display:block;
	width:82%;
	height:auto;
}

#index #btton{
	padding-bottom: 10%;
}




/* Sp
--------------------------------------------------------------------------------------*/
/* 
--------------------------------------------------------------------------------------*/

@media screen and (max-width: 768px) {

/* kv
--------------------------------------------------------------------------------------*/
#kv{
	position:relative;
}

.kvVideo{
	width: 90%;
	margin: 0 5%;
	position:relative;
}



/* bottle_button
--------------------------------------------------------------------------------------*/
#index #bottle_button{
		position:fixed !important;
		right:10px !important;
		top:100px !important;
		left:auto !important;
		width:12% !important;
		z-index:999999 !important;
		animation:bottleShake 3s infinite;
		transform-origin:center bottom;
	}

	#index #bottle_button a{
		display:block;
		background:none !important;
		outline:none;
	}

	#index #bottle_button img{
		display:block;
		width:100%;
		height:auto;
		background:none !important;
	}

	/* hover時の透明化は維持 */
	#index #bottle_button a:hover img{
		opacity:0.60 !important;
		filter:alpha(opacity=60) !important;
		-ms-filter:"alpha( opacity=60 )" !important;
		background:none !important;
	}

/* caption
----------------------------------------------------*/

#index #caption{
	width:90%;
	position:relative;
	margin:0 5% 0 5%;
}

#index #caption.mgB80{
	margin-bottom:3%;
}

#index #caption > figure{
	margin:0 auto;
}

#index #caption > figure:nth-child(1){
	width:90%;
}

#index #caption > figure:nth-child(2){
	width:70%;
	margin-top:20px;
}

#index #caption > figure img{
	width:100%;
	height:auto;
	display:block;
}

#index #caption #voice{
	position:relative;
	width:100%;
	background:url("../img/index/voiceS.jpg") no-repeat top center;
	background-size:100% auto;
	margin-top:60px;
	margin-bottom:0;
	top:0;
	min-height:750px;
}

#index #caption #voice figure{
	position:absolute;
	margin:0;
}

#index #caption #voice figure img{
	display:block;
	width:100%;
	height:auto;
}


#index #caption #voice .voice_bottleA{
	width:40%;
	top:0;
	right:18%;
	left:auto;
}

#index #caption #voice .voice_bottleA img{
	display:block;
	width:100%;
	height:auto;
	transform:rotate(-15deg);
}


#index #caption #voice .voice_bottleB{
	width:55%;
	top:48%;
	right:-3%;
	left:auto;
}

#index #caption #voice .voice_bottleT{
	display:none;
}

#index #caption #voice .voice_bottleC{
	width:62%;
	top:60%;
	right:43%;
	left:auto;
	bottom:auto;
}



/* movie
--------------------------------------------------------------------------------------*/
#index #movie{
	width:80%;
	margin:0 10% 50px 10%;
}

#index #movie img{
	width:100%;
	height:auto;
	display:block;
}
#index #movie .movie-title{
	width:50%;
	margin:0 25%;
}
	
/* point
----------------------------------------------------*/

#index #point{
	position:relative;
	width:100%;
	height:150vw;
	background:url("../img/index/pointS.jpg") no-repeat center top;
	background-size:cover;
	overflow:hidden;
}

#index #point::before{
	display:none;
}

#index #point #secret{
	position:absolute;
	top:60%;
	left:50%;
	transform:translate(-50%, -50%);
	width:50%;
	z-index:1;
}

#index #point #secret img{
	display:block;
	width:100%;
	height:auto;
}
	
	
/* type
----------------------------------------------------*/

#index #type{
	margin:60px auto;
}

#index #type h2{
	width: 96%;
	margin:0 2% 35px 2%;
}

#index #type h2 img{
	width:100%;
	height:auto;
}

#index #type .types{
	display:block;
}

#index #type .types > div{
	width:100%;
	margin-bottom:45px;
}

#index #type figure{
	margin:0;
	padding:0;
}

#index #type .sake-main-image{
	width:98%;
	margin: 0 1%;
}

#index #type .sake-main-image img{
	width:100%;
	height:auto;
}

#index #type .sake-main-image .forPc{
	display:none !important;
}

#index #type .sake-main-image .forSp{
	display:block !important;
}

#index #type .features{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:20px;
	width:85%;
	margin:20px auto 0;
}

#index #type .features img{
	width:65%;
	height:auto;
}

#index #btton{
	width:75%;
	margin: 0 15% 0 10%;
	padding-top: 10%;
	padding-bottom: 10%;
}
	
#index #btton img{
	width:100%;
	height:auto;
}
	
}


@keyframes bottleShake{
	0%,88%,100%{
		transform:translateY(0) rotate(0deg);
	}
	89%{
		transform:translateY(-8px) rotate(-3deg);
	}
	90%{
		transform:translateY(5px) rotate(3deg);
	}
	91%{
		transform:translateY(-6px) rotate(-2deg);
	}
	92%{
		transform:translateY(3px) rotate(2deg);
	}
	93%{
		transform:translateY(-3px) rotate(-1deg);
	}
	94%{
		transform:translateY(0) rotate(0deg);
	}
}


/*Andoroid : takano */
@media screen and (min-width:390px) and (max-width:429px){

#index #caption #voice{
	min-height:780px;
}

#index #caption #voice .voice_bottleB{
	width:50%;
	top:45%;
	right:-5%;
}

#index #caption #voice .voice_bottleC{
	width:60%;
	top:60%;
	right:35%;
	/*
	border: 1px solid #000;
	*/
}

}



/*iPhone16 : Araki */
@supports (-webkit-touch-callout: none){
@media screen and (min-width:390px) and (max-width:429px){

#index #caption #voice{
	min-height:700px;
	margin-bottom:-20px;
}

#index #caption #voice .voice_bottleB{
	width:50%;
	top:47%;
	right:-5%;
}
		
#index #caption #voice .voice_bottleC{
	width:60%;
	top:60%;
	right:35%;
	left:auto;
	bottom:auto;
	/*
	border: 1px solid #cc0;
	*/
}

}}