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



#wide{
	padding: 0 0 10px;
	background-color: #e8e4d5;
	position: relative;
margin-top: 70px;
}

#sd_logo{
	position: absolute;
	z-index: 10;
	width: 80px;
	top: 10px;
	left: 10px;
}

#sd_logo img{
	width: 100%;
}

#header.fixed + #wide{
	margin-top: 125px;
	
}

.ttlwp {
	text-align: center;	
	height: 100px;
}

.ttlwp img{
	width: 36%;
}

.inner {
    padding: 30px 4% 30px;
	width: 100%;
}


.sec h2 {
 font-size: 26px;
font-family: 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN","Hiragino Mincho Pro",HGS明朝E,メイリオ,Meiryo,serif;
}

.sec h2 img{	
	width:100%;
	margin: 0 0;
}



.sec .ph,
.sec .ph2{
	width: 100%;
}



.ttlwp .ttsub{
	margin: -18px auto 10px;
	display:inline-block;
	text-align: center;

}

.ttlwp .stx{
	font-size: 60%;
	display: block;
}

.ph,
.ph2{
	margin-top: 10px;
}

.ttlwp + .ph{
	margin-top: 0;
}

.btn01{
	margin: 20px 0;
	text-align: center;
}

.btn01 a{
	text-decoration: none;
	color: #fff;
	background-color: #000;
	padding: 0.8em 3.2em;
	display: inline-block;
	text-align: center;
	font-size: 18px;
	
}


.tx1{

}

.tx2{
	font-size: 20px;
	font-weight: bold;
}

.txG{
	font-size: 18px;

}

.itemArea{

	width: 90%;
	margin: 50px auto 0;
}

.itemArea > div{
	border: #00a88e solid 1px;
	border-radius: 15px;
	padding: 20px 12px;
	text-align: center;
	margin-bottom: 60px;
}

.itemArea > div .mk{
	margin-top: -60px;
	width: 120px;
}

.itemArea > div:last-child{
	margin-bottom: 30px;
}	
	

.photoWp{
	width: 100%;
    display: flex;
justify-content: space-between;
	padding-bottom: 50px;
}

.photoWp img{
	height: auto;

}

#mbtNavi{
	background-color: #006a60;
}

#mbtNavi ul{
	width: 98%;
	margin: 0 auto;
}

#mbtNavi li{
	display: inline-block;
	width: 49%;
	border-bottom: rgba(255,255,255,0.5) dotted 1px;
	padding: 5px 0;
}

#mbtNavi li:nth-child(5),
#mbtNavi li:last-child{
	border-bottom: none;
}

#mbtNavi li a{
    display: block;
    color: #fff;
    line-height: 1.4em;
    font-size: 82%;
	letter-spacing: -0.04em;
    text-decoration: none;
    padding: 1.5em 0.4em;
    margin: 0;
	text-align: center;
	border-right: rgba(255,255,255,0.5) dotted 1px;
}

#mbtNavi li:nth-child(2) a,
#mbtNavi li:nth-child(4) a,
#mbtNavi li:last-child a{
	border-right: none;
}



@media screen and (min-width: 768px), print {
	
#wide{
margin-top: 0;
	padding-bottom: 18px;
}	
	
	#header{
		top:700px;
	}	
	
#sd_logo{
	position: absolute;
	z-index: 10;
	width: 160px;
	top: 30px;
	left: calc(50% - 600px);
}


.ttlwp {
    text-align: center;
    height: 190px;
}
	
.ttlwp .ttsub{
	margin: -25px auto 15px;
}
	
	
.ttlwp img{
	width: 200px;
}	
	
.inner {
    width: 1280px;
    margin: 0 auto;
    padding: 100px 0;
}
		
	
.sec h2 {
 font-size: 65px;
	letter-spacing: 0.1em;

}	
	
.sec h2 img {
    width: 800px;
}	
	
	
.itemArea{
display: flex;
    justify-content: space-between;
	margin: 0 0;
	padding-top: 120px;
	width: 100%;

}	

.itemArea > div{
	width: 28%;
	border: #00a88e solid 1px;
	border-radius: 15px;
	padding: 35px 25px 20px;
	height: 190px;


}

.itemArea > div .mk{
	margin-top: -130px;
	width: 240px;
}
	

.ph,
.ph2{
    width: 48%;
	display: inline-block;
	vertical-align: top;
	margin: 0;

}
	
.bxTxt,
.bxTxt2{
    width: 48%;
	display: inline-block;
	vertical-align: top;
	margin-left: 3.6%;
}
		
.tx2{
	font-size: 32px;
	font-weight: bold;
}

.txG{
	font-size: 28px;

}
.btn01{
	margin: 40px 0;
	

}
	
	.btn01 a{
		font-size: 22px;
	}	
	
.photoWp{
	padding-bottom: 150px;
}	
	
}

/******concept*******/
#concept{
	background: url(../img_index/bg_rg.jpg) left top no-repeat;
	background-size: cover;

}

#concept .inner{
	padding-bottom: 40px;
}

#concept p{


}

#concept .ctx1{
font-family: 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN","Hiragino Mincho Pro",HGS明朝E,メイリオ,Meiryo,serif;
	font-size: 22px;
	line-height: 1.6;
	font-weight: bold;
	text-align: center;
}


#concept .ctx2{
	font-weight: bold;
}



#concept #p_concept1{
	width: 86%;
	margin: 15px 7% 0;	
}

#concept #p_concept2{
	width: 80%;
	margin: 15px 10% 0;	
}

@media screen and (min-width: 768px), print {
	
#concept .inner{
	width: 1280px;
	position: relative;
	padding-top: 200px;
	padding-bottom: 200px;
}	

#concept{


}
	
#concept p{
	text-align: center;
	font-size: 20px;
	padding-top: 30px;
}
	
#concept .ctx1{
	font-size: 40px;
}
	
#concept .ctx2{
	font-size: 26px;
}	
	
#concept #p_concept1 {
	position: absolute;
	left: -100px;
	top: 290px;
	
	width: 350px;
	margin: 0 0;

}	
	
#concept #p_concept2 {
	position: absolute;
	right: -60px;
	bottom: 0;
	
	width: 360px;
	margin: 0 0;

}
	
}


/******bento*******/


#bento{

}

#bento .ttlwp{
	background:#E7E3D4 url(../img_index/bg1.png) -50% 90% no-repeat;
	background-size: 80%;

}


#bento .ph{
    display: inline-block;	
}

#bento .bxTxt {

}



#bento .photoWp div{
	width: 31%;

}

	

@media screen and (min-width: 768px), print {
	
#bento .ph{
    width: 48%;
}
	
#bento .bxTxt {
    width: 45%;
	display: inline-block;
}
	
	#bento .bxTxt .btn01{
		text-align: left;
	}
}

/******sake******/

#sake{


}

#sake .ttlwp{
	background:#4e3e2d url(../img_index/bg2.png) 200% 90% no-repeat;
	background-size: 80%;
}

#sake .inner{

}



#sake h3{
font-family: "游明朝", "YuMincho", serif;
	font-size: 150%;
	margin-bottom: 1em;
}



#sake .photoWp div{
	width: 48%;

}




@media screen and (min-width: 768px), print {
#sake .txG{
	text-align: center;
}	
}


/******delivery******/

#delivery{
	
}

#delivery .ttlwp{
	background:#E7E3D4 url(../img_index/bg1.png) -50% 90% no-repeat;
	background-size: 80%;
}

.dotBx{
	border: #999 dotted 1px;
	padding: 0 10px 10px;
	margin: 20px 0;
}

.dotBx p{
	padding-left: 1em; 
    text-indent: -1em;
	font-size: 90%;
}

#delivery #delivery_bg{
	position: absolute;
	right: 0;
	bottom: -42px;
	z-index: 1;

}


#delivery .ph,
#delivery .ph2{
    width: 90%;
	height: auto;
	margin: 15px 5% 15px;
}

#delivery .fk {
    width: 100%;

}
	

	
@media screen and (min-width: 768px), print {

	#delivery .bxTxt{
		float: right;
		padding-top: 60px;
		width: 45%;
	}
	
	#delivery .ph{
		width: 48%;
		float: left;
		margin: 0 0 50px;
	}
	
	#delivery .bxTxt2{
		width: 45%;
		padding-top: 30px;
		clear: both;
		float: left;
		margin: 0 0 60px;
	}
	
	#delivery .ph2{
		width: 45%;
		float: right;
		margin: 0 0 0 3.6%;
		padding-top: 100px;
		
	}	
	
}


/********baked**********/

#baked{
	
	
}

#baked .ttlwp{
	background:#936844 url(../img_index/bg2.png) 200% 90% no-repeat;
	background-size: 80%;
}

#baked .itemArea > div .mk {
    margin-top: -60px;
    width: 180px;
}


@media screen and (min-width: 768px), print {
#baked .bxTxt2 {
    width: 45%;
    padding-top: 30px;
    float: right;
    margin: 0 0 100px;
}	
#baked .ph2 {
    width: 45%;
    float: left;
    margin: 0 0 0 3.6%;
}

#baked .bxTxt{
	width: 46%;
	margin-left: 0;
	}
	
#baked .ph{
	width: 49%;	
	margin-left: 3%;
}
	
#baked.itemArea > div{
		height: 140px;
	}	
	
#baked.itemArea > div .mk {
    margin-top: -140px;
    width: 272px;
}	
	
	#baked .btbx{
		text-align: center;

	}
	
}

/********about**********/

#about {
	background-color:#E7E3D4;
}

#about .ttlwp{
	background:#E7E3D4 url(../img_index/bg1.png) -50% 90% no-repeat;
	background-size: 80%;

}

#about .ttlwp img {
    width: 60%;
	margin-bottom: 25px;
}

.shopName{
	border-bottom: #006a60 solid 2px;
font-family: 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN","Hiragino Mincho Pro",HGS明朝E,メイリオ,Meiryo,serif;
	font-weight: bold;
	margin-bottom: 0.5em;
}

.shopInfo dl{
	margin-top: 14px;
}

.shopInfo dt{
	color: #00a88e;
	font-size: 90%;
 width: 5em;
float: left;
clear: both;
	padding-bottom: 14px;
}


.shopInfo dd{
padding: 0 0 14px 5.3em;
}

.shopInfo .num{
font-size: 18px;
	font-weight: bold;
}


#about .photoWp div{
	width: 31%;

}

#about .bxTxt2 .txG{
	font-size: 20px;
	margin-bottom: 20px;
}

#map{
	height: 300px;
}


@media screen and (min-width: 768px), print {
#about .ttlwp img {
    width: 300px;

}
	
	#about .inner{
		padding-top: 0;
	}	
	
#about .ph{
width: 50%;	
	margin-bottom: 100px;

}
	
#about .bxTxt{
width: 45%;			
}
	
#about .ph2{
width: 50%;	
	float: right;

}
	
#about .bxTxt2{
width: 50%;	
	margin-left: 0;
}
	
	#about .bxTxt2 .txG{
		font-size: 24px;
	}
	
.shopName{
	font-size: 140%;
}
	
	.shopName span{
		font-size: 180%;
	}
	
#map{
	height: 600px;
}
	
}



/********insta**********/
#instaBx{
	background-color: #fff;
	padding: 25px 4%;
	margin: 0 0 40px;
}

#instaBx .tt{
	width: 80%;
	margin: 0 10% 15px;
}

#instaBx .sc{
	width: 80%;
	margin: 0 10% 15px;
}

#instaBx .sc + p{
	margin:0 0 20px;
}

@media screen and (min-width: 768px), print {
	
#instaBx{
	width: 1160px;
	margin: 40px auto 60px;
	padding: 50px 100px;
}
	
#instaBx .tt{
	width: 300px;
	margin: 0;
	display: inline-block;

	margin-bottom: 20px;
}
	
#instaBx .sc{
	width: 300px;
	margin: 0;
	display: inline-block;
	margin-bottom: 20px;
	margin-top: 10px;
	float: right;
	vertical-align: top;
}	
	
	#instaBx .sc + p{
	display: inline-block;
		vertical-align: top;
		margin-top: 10px;
}
	
	
	
}


/*---20200729----*/

#wg3sp {
	width: 100% !important;
	margin: 20px 0 0;
	position: relative;
	text-align: center;
}

#wg3sp > a{
	position: absolute;
	width: 100%;
	height: 100%;
	top:0;
	left: 0;
	display: block;
}


@media screen and (min-width: 768px), print {
#wg3 {
	width: 100% !important;
	margin: 20px 0 0;
	position: relative;
}

#wg3 > a{
	position: absolute;
	width: 100%;
	height: 100%;
	top:0;
	left: 0;
	display: block;
}
	
}


/******omoro******/

#omoro{
	
}

#omoro .ttlwp{
	background:#d75332 url(../img_index/bg2.png) -50% 90% no-repeat;
	background-size: 80%;
}

#omoro #omoro_bg{
	position: absolute;
	right: 0;
	bottom: -42px;
	z-index: 1;

}


#omoro .ph,
#omoro .ph2{
    width: 90%;
	height: auto;
	margin: 15px 5% 15px;
}

#omoro .fk {
    width: 100%;

}
	

	
@media screen and (min-width: 768px), print {

	#omoro .bxTxt{
		float: right;
		padding-top: 60px;
		width: 45%;
  margin-bottom: 60px;  
	}
	
	#omoro .ph{
		width: 48%;
		float: left;
		margin: 0 0 50px;
	}
	
	#omoro .bxTxt2{
		width: 45%;
		padding-top: 30px;
		clear: both;
		float: left;
		margin: 0 0 60px;
	}
	
	#omoro .ph2{
		width: 45%;
		float: right;
		margin: 0 0 0 3.6%;
		padding-top: 100px;
		
	}	
 #omoro .bxTxt .btn01 {
    text-align: left;
}  
	
}

/******wine******/

#wine{
	
}

#wine .ttlwp{
	background:#7b1515 url(../img_index/bg2.png) 200% 90% no-repeat;
	background-size: 80%;
}

#wine #wine_bg{
	position: absolute;
	right: 0;
	bottom: -42px;
	z-index: 1;

}


#wine .ph,
#wine .ph2{
    width: 90%;
	height: auto;
	margin: 15px 5% 15px;
}

#wine .fk {
    width: 100%;

}

	
@media screen and (min-width: 768px), print {

	#wine .bxTxt{
		float: right;
		padding-top: 60px;
		width: 45%;
	}
	
	#wine .ph{
		width: 48%;
		float: left;
		margin: 0 0 50px;
	}
	
	#wine .bxTxt2{
		width: 45%;
		padding-top: 30px;
			float: left;
		margin: 0 0 100px;
	}
	
	#wine .ph2{
		width: 45%;
		float: right;
		margin: 0 0 0 3.6%;

		
	}	
  
 #wine .bxTxt2 .btn01 {
    text-align: left;
}    
	
}