#base{width:1086px;
margin:0 auto;
background-color:#ffffff;}



@media screen and (max-width:798px) {
#base{width:100%;
margin:0;
background-color:#ffffff;}}

.video {
  width:100%;
}
.video_sp {
  width:100%;
}
.under1{	
border-top:7px solid #a78b64; width:25%; margin:5px auto 20px;}

@media screen and (max-width:480px) {.under1{
	
border-top:7px solid #a78b64; width:70%; margin:5px auto 20px;}}

@media screen and (max-width:798px) {.under1{
	
border-top:7px solid #a78b64; width:90%; margin:5px auto 20px;}}

.cacao{
padding:5px;}
.cacao1{
padding:0 5px;}

@media screen and (max-width:798px) {.cacao{
		padding:5px;
	width:50%;}
	.cacao1{
		width:50%;
padding:5px;}}

#s1{
height:942px;
background-image:url("/quality/chocolate/favorite/img/back01.jpg");
display: block;	
}

@media screen and (max-width:798px) {
	#s1{
background-size: 100%;
background-image:url("/quality/chocolate/favorite/img/back01sp.jpg");
		display: block;	
		height:auto;
		background:#3eee7e0;
			background-repeat:no-repeat;
}}

	#s2{
						height:818px;
	background-image:url("/quality/chocolate/favorite/img/back02.jpg");
	background-size: 100%;
		background-repeat:no-repeat;
display: block;}

	@media screen and (max-width:798px) {#s2{
						height:auto;
	background-image:none;
	background-size: 100%;
	display: block;}}

	#s3{
					height:auto+10px;
	background-image:url("/quality/chocolate/favorite/img/back03.jpg");
		background-size: 100%;
		background-repeat:no-repeat;
					  display: block;}

@media screen and (max-width:798px) {#s3{
		height:auto;
		background-size: 100%;
		background-repeat:no-repeat;
		background-image:url("/quality/chocolate/favorite/img/back03sp.jpg");
		background-color:#eee7e0;
display: block;}}

	#s4{
	height:700px;
}
@media screen and (max-width:798px) {#s4{height:auto;
}}

#s5{
						height:500px;
	background-image:url("/quality/chocolate/favorite/img/back04.jpg");
		background-size: 100%;
		background-repeat:no-repeat;
display: block;}



@media screen and (max-width:798px) {#s5{	
		height:auto;
		background-size: 100%;
		background-repeat:no-repeat;
		background-image:url("/quality/chocolate/favorite/img/back04sp.jpg");	
		background-color:#eee7e0;
}}


#s5-2{	height:auto;
			background-color:#eee7e0;
	
}


#s6{
height:400px;					  }
@media screen and (max-width:798px) {#s6{height:auto;
}}

#s7{background-color:#eee7e0;
height:900px;					  }
@media screen and (max-width:798px) {#s7{height:auto;
}}

.c1{
padding-top:0px;}




.liqueur{width:30%;
margin:20px 180px 0px 0px;}

.c2{
	padding-top:35px;
	text-align:center;
}
@media screen and (max-width:798px) {.c2{
	padding-top:20px;
	text-align:center;
}}


.c2-1{
	width:50%;
margin-top:50px;}
.c2-2{
width:50%;}
@media screen and (max-width:798px) {
	.c2-1{margin-top:0px;
			text-align:center;
		width:100%;
margin:0px auto;}}


@media screen and (max-width:798px) {.c2-2{
		width:100%;
		text-align:center;
	
	
}}
@media screen and (max-width:480px) {.c2-2{
				text-align:center;width:100%;
		margin-top:-80px;	
		
	

}}

.c3{padding-top:380px;
	
}








@media screen and (max-width:980px) {
	.c3{padding-top:220px;
		padding-bottom:30px;
	
}}

@media screen and (max-width:480px) {
	.c3{padding-top:150px;
		padding-bottom:30px;
	
}}
.c4{padding-top:50px;
	
	
}


@media screen and (max-width:798px) {
	.c4{padding-top:50px;padding-bottom:30px;
	
}}
.c5{
padding-top:45px;}
@media screen and (max-width:950px) {.c5{
		margin:0 auto;
		width:90%;
		padding-top:30px;
		
padding-bottom:50px;}}
@media screen and (max-width:480px) {.c5{
		margin:0 auto;
		width:90%;
		padding-top:240px;
		
padding-bottom:20px;}}


.c5-2{
	padding-top:-10px;
padding-bottom:20px;}



@media screen and (max-width:798px) {.c5-2{
		padding-top:0px;
}}
@media screen and (max-width:480px) {.c5-2{
		padding-top:30px;
}}


.c6{padding-top:50px;}



@media screen and (max-width:798px) {.c6{padding-top:30px;}}
.c7{padding-top:50px;}




@media screen and (max-width:798px) {.c7{padding-top:30px;padding-bottom:30px;}}

.whitezone{width:85%;

margin:0 auto;}

.svg{
	width:100%;
margin:0 auto;}

@media screen and (max-width:480px) {.svg{
		width:120%;
		margin:10px auto;
}}


.choco{color:#a78b64;
						font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;	font-weight:600;
	font-size:100%;
	line-height:200%;
padding-bottom:15px;}

				@media screen and (max-width:950px) {
	.choco{						font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", "Source Han Serif",serif;
	font-size:100%;
		line-height:150%;
		font-weight:600;
padding:15px;}}

				@media screen and (max-width:480px) {
	.choco{						font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", "Source Han Serif",serif;
	font-size:60%;
		line-height:150%;
		font-weight:600;
padding-bottom:15px;}}


	

.choco2{padding:70px 50px 10px 0px;
width:90%;}


			
@media screen and (max-width:950px) {.choco2{width:100%; padding:70px 30px 10px 30px;
}}
	
@media screen and (max-width:480px) {.choco2{width:80%; padding:70px 10px 10px 10px;
}}	

.choco3{color:#a78b64;text-align:left;		font-weight:600;
						font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", "Source Han Serif",serif;
	font-size:110%;
	
}



	@media screen and (max-width:798px) {
.choco3{color:#a78b64;text-align:left;		font-weight:600;
					font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", "Source Han Serif",serif;
	font-size:50%;
	
}}


.choco4{padding:80px 50px 10px 100px;
	width:50%;
}




	@media screen and (max-width:950px) {
.choco4{padding:50px 0px 10px 80px; width:50%;
	
}}
	@media screen and (max-width:480px) {
.choco4{padding:0px; width:80%;
	
}}
.choco5{color:#333333;		font-weight:600;
font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", "Source Han Serif",serif;
	font-size:80%;
	margin-top:15px;
	line-height:170%;	padding:10px auto;
 letter-spacing:-0.5pt;}
	@media screen and (max-width:1000px) {
.choco5{color:#333333;		font-weight:600;
font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", "Source Han Serif",serif;
	font-size:100%;
	margin-top:15px;
	line-height:130%;	padding:10px auto;
letter-spacing:-1.5pt;}}
	@media screen and (max-width:480px) {
.choco5{color:#333333;		font-weight:600;
font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", "Source Han Serif",serif;
	font-size:65%;
	margin-top:15px;
	line-height:140%;	padding:10px auto;
}}



.text1{
text-align:left;	padding:5px 5px 15px 5px;
	color:#333333;
font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", "Source Han Serif",serif;
	font-size:70%;
}}

	@media screen and (max-width:798px) {
.text1{
text-align:left;	padding:5px 5px 10px 5px;
		color:#333333;
		font-size:90%;
font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", "Source Han Serif",serif;
	font-size:70%;
}}
	@media screen and (max-width:798px) {
.text1{
text-align:left;	padding:5px 5px 15px 10px;
	color:#333333;
font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", "Source Han Serif",serif;
	font-size:60%;
}}
.text2{
text-align:center;	padding:75px 0px 10px 30px;
color:#a78b64;
font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", "Source Han Serif",serif;
	font-size:130%;		font-weight:600;
	
}



	@media screen and (max-width:798px) {
.text2{line-height:150%;
		text-align:center;	margin:0px;
		font-weight:600;
color:#a78b64;
		padding:50px 0px 0px 10px;				
		font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", "Source Han Serif",serif;
	font-size:90%;
}}
	@media screen and (max-width:798px) {
	.text2{
		font-size:120%;
		margin:10px 10px 0 10px;
		padding:10px;
			font-weight:bold;
}}

.setsumei{
	padding:15px 0px 15px 20px;
}

	@media screen and (max-width:798px) {.setsumei{
font-size:80%;
	padding:10px 5px 0px 5px;}
}

	@media screen and (max-width:798px) {.setsumei{
font-size:120%;
	padding:0px 10px 0px 15px;}
}
.info{
	color:#333333;
	font-size:20%;
	text-align:right;
letter-spacing:-1.1px;}
@media screen and (max-width:798px) {	.info{
	color:#333333;
	font-size:70%;
		text-align:left;
		margin-left:10px;
}}
.big{color:#a78b64;
	font-size:150%;
	font-weight:500;
font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;

}


@media screen and (max-width:798px) {
	
	
	.big{color:#a78b64;	
		font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
letter-spacing:-1px;
	font-size:100%;
		font-weight:500;
	
	}
}

@media screen and (max-width:480px) {
	
	
	.big{color:#a78b64;	
		font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
letter-spacing:-1px;
	font-size:100%;
		font-weight:500;
	
	}
}
.big2{color:#333333;
	font-size:150%;
	font-weight:900;
}


.big3{color:#1e1204;
	font-size:130%;	font-weight:bold;
}

@media screen and (max-width:798px) {
.big3{color:#1e1204;
	font-size:90%;	font-weight:bold;
}}
@media screen and (max-width:798px) {
.big3{color:#1e1204;
	font-size:130%;	font-weight:bold;
}}


.big4{color:#a78b64;
	font-size:150%;
	font-weight:700;
font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
margin-bottom:10px;
}




.big_title{
	width:30%;
margin:0 auto;}
@media screen and (max-width:798px) {
	.big_title{
	width:80%;
margin:0 auto;}}
	
	
	
.parent0{
	width:70%;
	margin:20px auto;
  display: flex;
}
@media screen and (max-width:798px) {
.parent0 {
	width:100%;
	margin:0px auto;
		display: flex;
			flex-wrap: wrap;
}}


.parent {
	width:90%;
	margin:0px auto;
  display: flex;
}
@media screen and (max-width:798px) {
.parent {
	width:100%;
	margin:0px auto;
  display: flex;
}}


.parent3 {
	width:100%;
	margin:0px auto;
		display: flex;
	flex-wrap: wrap;
	margin:50px 0px 0px 130px;
	}


ul.parent2 {
	width:100%;
	margin:0px auto;
  display: flex;
}

@media screen and (max-width: 798px) {	.parent {
	width:100%;
	margin:0px auto;
		display: flex;
		flex-wrap: wrap;
}}

@media screen and (max-width: 798px) { ul.parent2 {
	width:100%;
	margin:0px auto;
  display: flex;		flex-wrap: wrap;
}}
	
	@media screen and (max-width: 798px) {	
.parent3 {
	width:100%;
	margin:0px auto;
		display: flex;
		flex-wrap: wrap;
		margin:10px;
	}}

@media screen and (max-width: 798px) {	li.menu{
	
		width:50%;
		
		
}}
li.menu img:hover {
	opacity: 0.5 ;
}
li.menu{
	padding:5px;
}
li.menu img:hover {
	opacity: 0.5 ;
}
.sen{
	border-top:5px solid #1e1204; width:65%;  margin:0 auto; }

.base03:hover {
	opacity: 0.5 ;
}

					.base03{
			
				width:30%;
				margin:20px auto;}
			@media screen and (max-width: 798px) {		.base03{
			
				width:80%;
margin:20px auto;}	}

.text-line {
	display: flex;
	align-items: center;
}


.text-line:before,
.text-line:after {
  content: "";
  flex-grow: 1;
  height: 1px; /* 線の太さ */
  background: #000; /* 線の色 */
  margin:0 2em; /* 文字と線の余白 */
}


.plainchoco{
	width:800px;
margin:-30px auto 0px;}
@media screen and (max-width: 798px) {.plainchoco{
	width:100%;
}}
@media screen and (max-width: 798px) {.plainchoco{
	width:100%;
margin:-30px auto 0px;}}

.PAIRING{
		width:900px;
margin:-30px auto 0px;}

@media screen and (max-width: 798px) {.PAIRING{
		width:100%;
margin:0px auto;}}
@media screen and (max-width: 798px) {.PAIRING{
		width:100%;
margin:0px auto;}}

.aratana1{		height:auto;
	width:100%;
	margin:5px;

}

.aratana2{	
height:auto;
	width:100%;
		margin:5px;
}


		
	
	
	

				@media screen and (min-width:798px){
.sp{
display: none;
  }
  .pc{ display:block;
	}
	 .pc2{ display:block;
							}
}
@media screen and (max-width:798px) {
.pc{
    display: none;
	}
	.pc2{
    display:block;
	}
.sp{ display:none;}}	
	@media screen and (max-width:798px) {
.pc{
    display: none;
	}
	.pc2{
    display:none;
							}
.sp{ display:block;}}
		
.chocotitle{
					width:30%;
margin:20px auto 5px;}
.chocotitle2{
					width:30%;
				margin:20px auto 5px;}
@media screen and (max-width:798px) {.chocotitle{
						width:70%;
				margin:				-50px auto 10px;}}
				
	@media screen and (max-width:798px) {.chocotitle2{
						width:70%;
				margin:	25px auto 15px;}}			
.three{
width:33%;
float:left;
padding:10px;
color:#333333;
text-align:center;}

.hontai{
font-size:70%;}

@media screen and (max-width:798px) {
.three{
width:100%;
						padding:0 auto;
color:#333333;
text-align:center;
				}}
				
				
				.button{
					height:30px;
					margin:10px auto 3px;
					width:200px;
					border-radius:20px;
					text-align:center;
					background-color:#c7ad7e;
					padding:8px;
color:#000;}
		
.button:hover {
	opacity: 0.5 ;
}