@charset "utf-8";
/* CSS Document */



/*MV*/
/*MVの大枠*/
.mv-con{
	/*border:1px solid #000000;*/
	width:100%;height:auto;/*大枠の大きさ決め*/
	position:relative;/*ロゴの基準*/
	overflow: hidden;/*角がはみ出ないように*/
	border-radius:40% 0 40% 0;
}

/*スマホの時スライダー非表示*/
@media(max-width:768px){
	.mv-con{
		visibility:hidden;
		height:0;
	}
}

/*スマホ用MVの大枠*/
.mv-consp{
	width:100%;height:auto;
	position:relative;
	overflow:hidden;
	/*border:1px solid #000000;*/
	visibility:hidden;
	height:0;
}

	/*スマホの時スライダー表示*/
@media(max-width:768px){
	.mv-consp{
		visibility:visible;
		height:100vh;
	}
	
}

/*スマホロゴ大枠*/
.mv-logosp{
	/*border:1px solid #000000;*/
	width:40%;height:auto;
	position:absolute;
	z-index:5;
	left:50%;top:50%;
	transform:translate(-40%,-50%);
}

/*スマホのロゴ本体*/
.mv-logosp img{
	width:100%;height:100%;
}

/*スライダー表示非表示*/




/*スライダーの大きさ*/
.mv-slider{
	/*border:1px solid #000000;*/
	width:100%;height:auto;
}

/*ロゴの位置決め*/
.mv-logo{
	width:20%;height:auto;
	position:absolute;
	z-index:5;
	left:50%;top:50%;
	transform:translate(-40%,-50%);
}

/*スマホの場合のロゴの大きさ*/
@media(max-width:768px){
	.mv-logo{
		width:40%;
	}
	
}


.mv-logo img{
	width:100%;
}



/*Topicセクション*/
/*Topicの大枠と縦並べ*/
/*残りタスク、写真の最小px決める*/
.to-con{
	/*border:1px solid #000000;*/
	width:100%;height:auto;
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:170px;
}

/*タイトル、写真グループ、ボタン間の余白*/
@media(max-width:768px){
	.to-con{
		gap:30px;
	}
	
}

/*h2の位置決め*/
.to-h2{
	/*border:1px solid #000000;*/
	display:inline-block;
	margin:0 auto;
	margin-top:220px;
}

/*タイトル上*/
@media(max-width:768px){
	.to-h2{
		margin-top:30px;
	}
	
}

/*写真グループ*/
.to-group{
	/*border:1px solid #000000;*/
	width:70%;height:auto;
	display:flex;
	justify-content:space-between;
	
}

/*スマホで縦に並べる*/
@media(max-width:768px){
	.to-group{
		width:90%;height:auto;
		flex-direction:column;
		align-items:center;
		gap:30px;
	}
}


/*写真と文章の大枠*/
.to-group-item{
	/*border:1px solid #000000;*/
	width:30%;height:auto;
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:40px;
}

@media(max-width:768px){
	.to-group-item{
		width:100%;
		gap:10px;
	}
}

/*文章のフレックス*/
.to-text{
	display:flex;
	flex-direction: column;
	gap:10px;
	line-height:1.5em;
}

@media(max-width:768px){
	.to-text{
		
		text-align:center;
	}
	
}


/*textのホバー*/
.to-text span{
	transition:color 0.5s;
}

.to-text span:hover {
	color:#DCA187;
}

/*写真の大枠*/
.to-img-con{
	width:100%;height:auto;
	/*border:1px solid #000000;*/
	border-radius:50%;
	overflow:hidden;
}

@media(max-width:768px){
	.to-img-con{
		width:60%;
	}
	
}


/*写真を大枠に合わせる*/
.to-group-img{
	width:100%;height:auto;
	transition:transform 1s;
	position:relative;
}


/*写真のhover*/
.to-group-img:hover{
	transform:scale(1.1,1.1);
}

#to-button{
	
	margin-bottom:200px;
}


@media(max-width:768px){
	#to-button{
		
		margin-bottom:30px;
	}
}




/*Conceptセクション*/
/*Conceptセクション大枠*/


.se-con{
	
	/*border:1px solid #000000;*/
	width:100%;height:auto;
	display:flex;
	flex-direction:column;
	gap:100px;
	align-items:center;
	padding-top:400px;
	padding-bottom:400px;
	background:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTI4MCIgaGVpZ2h0PSIyMjI1IiB2aWV3Qm94PSIwIDAgMTI4MCAyMjI1IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8ZyBmaWx0ZXI9InVybCgjZmlsdGVyMF9kXzg3XzQpIj4KPHBhdGggZD0iTTEyODAgMjExOS43OEM4NjguOSAyMjU2LjMzIDc1NS4wNiAyMTk2LjI4IDY5OS4yMDcgMjE2OS45NkM2NDMuMzUzIDIxNDMuNjQgMzQyLjQ0NyAxODk1LjIyIDAgMjEwMy4zM1YxMDIuNDNDMzQyLjQ1MyAtMTA1LjY5MSA2NDMuMzUzIDE0Mi43MzkgNjk5LjIwNyAxNjkuMDY1Qzc1NS4wNiAxOTUuMzkxIDg2OC45IDI1NS40MzkgMTI4MCAxMTguODgxVjIxMTkuNzhaIiBmaWxsPSJ1cmwoI3BhaW50MF9saW5lYXJfODdfNCkiIGZpbGwtb3BhY2l0eT0iMC42IiBzaGFwZS1yZW5kZXJpbmc9ImNyaXNwRWRnZXMiLz4KPC9nPgo8ZGVmcz4KPGZpbHRlciBpZD0iZmlsdGVyMF9kXzg3XzQiIHg9Ii01MCIgeT0iLTIwIiB3aWR0aD0iMTM4MCIgaGVpZ2h0PSIyMjg2IiBmaWx0ZXJVbml0cz0idXNlclNwYWNlT25Vc2UiIGNvbG9yLWludGVycG9sYXRpb24tZmlsdGVycz0ic1JHQiI+CjxmZUZsb29kIGZsb29kLW9wYWNpdHk9IjAiIHJlc3VsdD0iQmFja2dyb3VuZEltYWdlRml4Ii8+CjxmZUNvbG9yTWF0cml4IGluPSJTb3VyY2VBbHBoYSIgdHlwZT0ibWF0cml4IiB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDEyNyAwIiByZXN1bHQ9ImhhcmRBbHBoYSIvPgo8ZmVPZmZzZXQgZHk9IjEwIi8+CjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjI1Ii8+CjxmZUNvbXBvc2l0ZSBpbjI9ImhhcmRBbHBoYSIgb3BlcmF0b3I9Im91dCIvPgo8ZmVDb2xvck1hdHJpeCB0eXBlPSJtYXRyaXgiIHZhbHVlcz0iMCAwIDAgMCAxIDAgMCAwIDAgMC42NDE2NjcgMCAwIDAgMCAwLjY0MTY2NyAwIDAgMCAwLjI1IDAiLz4KPGZlQmxlbmQgbW9kZT0ibm9ybWFsIiBpbjI9IkJhY2tncm91bmRJbWFnZUZpeCIgcmVzdWx0PSJlZmZlY3QxX2Ryb3BTaGFkb3dfODdfNCIvPgo8ZmVCbGVuZCBtb2RlPSJub3JtYWwiIGluPSJTb3VyY2VHcmFwaGljIiBpbjI9ImVmZmVjdDFfZHJvcFNoYWRvd184N180IiByZXN1bHQ9InNoYXBlIi8+CjwvZmlsdGVyPgo8bGluZWFyR3JhZGllbnQgaWQ9InBhaW50MF9saW5lYXJfODdfNCIgeDE9IjY0MCIgeTE9IjIwIiB4Mj0iNjQwIiB5Mj0iMjIwNiIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgo8c3RvcCBzdG9wLWNvbG9yPSIjRUNGRkMzIi8+CjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0id2hpdGUiIHN0b3Atb3BhY2l0eT0iMC44Ii8+CjwvbGluZWFyR3JhZGllbnQ+CjwvZGVmcz4KPC9zdmc+Cg==");/*SVGの読み込み方＞メモでアスペクト比変更書き換え→base64エンコード→コピペ*/
	
	background-size:2000px 100%;
}

@media(max-width:768px){
	.se-con{
		/*border:1px solid #000000;*/
		padding-top:80px;
		padding-bottom:30px;
		gap:20px;
		background-size:180% 100%;
		padding-bottom:170px;
	}
}

/*ｈ２枠*/
.se-h2{
	text-align:center;
	/*border:1px solid #000000;*/
	width:70%;height:auto;
}

@media(max-width:768px){
	
}

/*画像枠*/
.se-mv{
	/*border:1px solid #000000;*/
	width:40%;height:auto;
}
/*画像大きさ合わせ*/
.se-mv img{
	width:100%; height:auto;
}

.se-tx{
		color:#6A3C27;
	}
.se-point{
		color:#C6B201;
	}

@media(max-width:768px){
	.se-mv{
		width:70%;
		
	}
	
}

/*text*/
.se-text{
	display:flex;
	flex-direction:column;
	gap:50px;
	text-align:center;
	/*border:1px solid #000000;*/
	width:45%;height:auto;
}

@media(max-width:768px){
	.se-text{width:80%;
	gap:20px;
	text-align:left;
	}
	
}

/*ロゴ*/
.se-logo{
	text-align:center;
	/*border:1px solid #000000;*/
	width:70%;height:auto;
}
@media(max-width:768px){
	.se-logo{
		margin-top:40px;
		margin-bottom:40px;
	}
	
}


.catch{
	line-height:2em;
	text-shadow: 4px 4px 4px rgba(0 ,0 ,0 ,0.2);
}

@media(max-width:768px){
	.catch{
		
		margin-bottom:40px;
		text-align:center;
	}
}

/*使用シーンセクション*/
/*使用シーンコンテンツ幅*/
.sc-con{
	/*border:1px solid #000000;*/
	width:80%;height:auto;
	margin:0 auto;
	padding-top:200px;
	padding-bottom:200px;
	display:flex;
	flex-direction:column;
	gap:400px;
}

@media(max-width:768px){
	.sc-con{
		/*border:1px solid #000000;*/
		width:100%;
		background-image:url("../imges/sceneback.png");
		background-repeat:no-repeat;
		background-size:100% 100%;
		padding-top:0px;
		padding-bottom:70px;
		gap:50px;
	}
}

/*写真の大枠（1枚ずつ）*/
#scene1{
	/*border:1px solid #000000;*/
	width:40%;height:auto;
	animation:fuwapic 5s infinite;
	
}

@media(max-width:768px){
	#scene1{
		width:38%;
		margin-right:30px;
	}
	
}

@keyframes fuwapic{
	0%{
		transform:translate(0px);
	}
	
	50%{
		transform:translate(3%,10%);
	}
	
	100%{
		transform:translate(0px);
	}
	
}

#scene2{
	/*border:1px solid #000000;*/
	width:45%;height:auto;
	animation:fuwapic 7s infinite;
}

@media(max-width:768px){
	#scene2{
		width:38%;
		margin-left:30px;
	}
	
}



#scene3{
	/*border:1px solid #000000;*/
	width:50%;height:auto;
	animation:fuwapic 6s infinite;
}

@media(max-width:768px){
	#scene3{
		width:38%;
		margin-right:30px;
	}
	
}

/*写真の位置*/
.sc-imgbox1{
	/*border:1px solid #000000;*/
	width:100%;height:auto;
	display:flex;
	justify-content:flex-end;
	position:relative;
}

.sc-imgbox2{
	/*border:1px solid #000000;*/
	width:100%;height:auto;
	display:flex;
	justify-content:flex-start;
	position:relative;
}



.sc-imgbox3{
	/*border:1px solid #000000;*/
	width:100%;height:auto;
	display:flex;
	justify-content:flex-end;
	position:relative;
}

/*写真アニメーション*/





/*文字の位置*/

.sc-text{
	position:absolute;
	z-index:5;
	right:20%;bottom:-50px;
	font-size:clamp(1rem, -0.091rem + 5.45vw, 4rem);
	text-shadow: 4px 4px 4px rgba(0 ,0 ,0 ,0.2);
}

@media(max-width:768px){
	.sc-text{
		bottom:-30px;right:20%;
		
	}
}


.sc-text2{
	position:absolute;
	z-index:5;
	left:20%;bottom:-50px;
	font-size:clamp(1rem, -0.091rem + 5.45vw, 4rem);
	text-shadow: 4px 4px 4px rgba(0 ,0 ,0 ,0.2);
}

@media(max-width:768px){
	.sc-text2{left:20%;bottom:-30px;}
}

/*写真を大枠に合わせる*/
.sc-img{
	width:100%;height:auto;
}




/*商品紹介セクション*/
/*商品セクション大枠*/

.pr-con{
	/*border:1px solid #000000;*/
	width:100%;height:auto;
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:100px;
	margin:0 auto;
	padding-bottom:400px;
	padding-top:400px;
	background:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTI4MCIgaGVpZ2h0PSIyMjI1IiB2aWV3Qm94PSIwIDAgMTI4MCAyMjI1IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8ZyBmaWx0ZXI9InVybCgjZmlsdGVyMF9kXzg3XzQpIj4KPHBhdGggZD0iTTEyODAgMjExOS43OEM4NjguOSAyMjU2LjMzIDc1NS4wNiAyMTk2LjI4IDY5OS4yMDcgMjE2OS45NkM2NDMuMzUzIDIxNDMuNjQgMzQyLjQ0NyAxODk1LjIyIDAgMjEwMy4zM1YxMDIuNDNDMzQyLjQ1MyAtMTA1LjY5MSA2NDMuMzUzIDE0Mi43MzkgNjk5LjIwNyAxNjkuMDY1Qzc1NS4wNiAxOTUuMzkxIDg2OC45IDI1NS40MzkgMTI4MCAxMTguODgxVjIxMTkuNzhaIiBmaWxsPSJ1cmwoI3BhaW50MF9saW5lYXJfODdfNCkiIGZpbGwtb3BhY2l0eT0iMC42IiBzaGFwZS1yZW5kZXJpbmc9ImNyaXNwRWRnZXMiLz4KPC9nPgo8ZGVmcz4KPGZpbHRlciBpZD0iZmlsdGVyMF9kXzg3XzQiIHg9Ii01MCIgeT0iLTIwIiB3aWR0aD0iMTM4MCIgaGVpZ2h0PSIyMjg2IiBmaWx0ZXJVbml0cz0idXNlclNwYWNlT25Vc2UiIGNvbG9yLWludGVycG9sYXRpb24tZmlsdGVycz0ic1JHQiI+CjxmZUZsb29kIGZsb29kLW9wYWNpdHk9IjAiIHJlc3VsdD0iQmFja2dyb3VuZEltYWdlRml4Ii8+CjxmZUNvbG9yTWF0cml4IGluPSJTb3VyY2VBbHBoYSIgdHlwZT0ibWF0cml4IiB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDEyNyAwIiByZXN1bHQ9ImhhcmRBbHBoYSIvPgo8ZmVPZmZzZXQgZHk9IjEwIi8+CjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjI1Ii8+CjxmZUNvbXBvc2l0ZSBpbjI9ImhhcmRBbHBoYSIgb3BlcmF0b3I9Im91dCIvPgo8ZmVDb2xvck1hdHJpeCB0eXBlPSJtYXRyaXgiIHZhbHVlcz0iMCAwIDAgMCAxIDAgMCAwIDAgMC42NDE2NjcgMCAwIDAgMCAwLjY0MTY2NyAwIDAgMCAwLjI1IDAiLz4KPGZlQmxlbmQgbW9kZT0ibm9ybWFsIiBpbjI9IkJhY2tncm91bmRJbWFnZUZpeCIgcmVzdWx0PSJlZmZlY3QxX2Ryb3BTaGFkb3dfODdfNCIvPgo8ZmVCbGVuZCBtb2RlPSJub3JtYWwiIGluPSJTb3VyY2VHcmFwaGljIiBpbjI9ImVmZmVjdDFfZHJvcFNoYWRvd184N180IiByZXN1bHQ9InNoYXBlIi8+CjwvZmlsdGVyPgo8bGluZWFyR3JhZGllbnQgaWQ9InBhaW50MF9saW5lYXJfODdfNCIgeDE9IjY0MCIgeTE9IjIwIiB4Mj0iNjQwIiB5Mj0iMjIwNiIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgo8c3RvcCBzdG9wLWNvbG9yPSIjRUNGRkMzIi8+CjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0id2hpdGUiIHN0b3Atb3BhY2l0eT0iMC44Ii8+CjwvbGluZWFyR3JhZGllbnQ+CjwvZGVmcz4KPC9zdmc+Cg==") no-repeat;
	background-size:2000px 100%;
	
	
}

@media(max-width:768px){
	.pr-con{
		background-size:130% 100%;
		gap:30px;
		padding-bottom:70px;
		padding-top:70px;
	}
	
}



.pr-slider{
	/*border:1px solid #000000;*/
	width:100%;height:auto;
	
}

@media(max-width:768px){
	.pr-slider{
		width:85%;
	}
	
}

.pr-item{
	/*border:1px solid #00FF00;*/
	width:100%;
	
}
/*.pr-img img::after{
	content:"";
	position:absolute;
	top:0;left:0;
	z-index:5;width:70%;height:100%;
	background-color:rgba(255,255,255,0.5);
	border-radius:10%;
	transition:opacity 0.5s;
	opacity:0;
}
.pr-img img:hover::after{
	opacity:1;
}
*/
.pr-img{
	/*border:1px solid #000000;*/
	width:30%;height:auto;
	display:flex;
	justify-content:center;
	align-items:center;
	margin:0 auto;

}


@media(max-width:768px){
	.pr-img{width:20%;}
	
}


.pr-item p{
	/*border:1px solid #FF0000;*/
	text-align:center;
	padding:20px;
	width:70%;
	margin:0 auto;
}

.prtx{
	 line-height:1.5em;
	font-size:16px;
	transition:color 0.5s;
}
.prtx:hover{
	color:#DCA187;
}


/*残りセクション*/
/*全体大枠*/
.no-con{
	width:80%;height:auto;
	margin:0 auto;
	/*borer:1px solid #000;*/
	display:flex;
	justify-content: space-between;
	align-items:center;
	padding-top:400px;
	padding-bottom:400px;
}

@media(max-width:768px){
.no-con{
	padding-top:50px;
	padding-bottom:50px;
	flex-direction:column;
	gap:40px;
}
}


/*shop*/
.so-con{
	width:45%;height:auto;
	/*border:1px solid #000000;*/
	display:flex;
	flex-direction:column;
	justify-content: space-between;
	align-items:center;
	gap:100px;
}


@media(max-width:768px){
.so-con{
	width:100%;
	gap:20px;
}
}


/*Q＆Aセクション*/
.qa-con{
	width:45%;height:auto;
	/*border:1px solid #000000;*/
	display:flex;
	flex-direction:column;
	justify-content: space-between;
	align-items:center;
	gap:100px;
}

@media(max-width:768px){
.qa-con{
	width:100%;
	gap:20px;
}
}


/*イメージコンテナ*/
.no-img-con{
	
	/*border:1px solid #000000;*/
	border-radius:50%;
	overflow:hidden;
}

@media(max-width:768px){
	.no-img-con{
		width:70%;
	}
	
}

.no-img{
	width:100%; height:auto;
	transition:transform 1s;
}

.no-img:hover{
	transform:scale(1.1,1.1);
}




/*スクロールでふわっとぼかし*/

.fadein{
	opacity:0;
	filter: blur(3px);
	transition:all 1.5s;
}

.scrollin{
	opacity:1;
	filter:blur(0px);
	
}