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


/*===============
共通部分の設定
=================*/

html{
	font-size:14px;
	font-family: 'EB Garamond',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	color:#333333;
	box-sizing:border-box;
	line-height:1;
}

a{
	color:#666666;
	text-decoration:none;
}
a:hover{
	opacity:.8;
	transition:.4s;
}

.inner{
	width:1000px;
	margin:0 auto;
}
#sec1{
	padding:65px 0 100px;
}

#sec2,#sec3,#sec5{
	padding:100px 0;
}
.ttl{
	text-align:center;
}
.ttl h2{
	font-size:44px;
	letter-spacing:2px;
	position:relative;
	padding-bottom:5px;
	color:#333333;
}
.ttl h2::after{
	content:"";
	width:140px;
	border-bottom:1px solid #3f3f3f;
	display:block;
	position:absolute;
	bottom:0;
	left:50%;
	transform:translate(-50%,0);
}

.ttl h3{
	font-size:16px;
	margin-bottom:40px;
	padding-top:5px;
	text-align: center;
}
.flexB {
	display:flex;
	justify-content:space-between;	
}

.burger {
	display: none;
}

.button{
	display:block;
	width:200px;
	height:40px;
	text-align:center;
	border:1px solid #333;
	color:#333;
	line-height:40px;
	position:relative;
	z-index:2;
	overflow:hidden;
	
}
#sec5 .button{
	border-color:#fff;
	width:400px;
	height:50px;
	color:#fff;
	line-height:50px;
	margin:0 auto 20px;
}
#sec5 .button span{
	font-size:30px;
	margin-left:30px;
	vertical-align:bottom;
	letter-spacing: 2px;
}

.button::before,
.button::after{
	position:absolute;
	content:"";
	z-index:-1;
	display:block;
}
.button,
.button::before,
.button::after{
	box-sizing:border-box;
	transition:all .3s;
	}
.button:hover{
	color:#fff;
	opacity:1;
}
#sec5 .button:hover{
	color:#000;
	opacity:1;
}

.button::after{
	top:-100%;
	left:-100%;
	width:100%;
	height:100%;
}
.button:hover::after{
	top:0;
	left:0;
	background:#000;
}
#sec5 .button:hover::after{
	background:#fff;
}
/*===============
header style
=================*/

header{
	background:#fff;
	color:#333333;
	font-size:18px;
	padding:30px 0 20px;
}
header a{
	color:#333333;}	
h1{
	font-size:34px;
	letter-spacing:3px;
	margin-left:30px;
	color:#666;
	font-family:Arial, Helvetica, sans-serif;
}

.h_right{
	align-items:baseline;
}
.h_right li{
	margin-right:25px;
	list-style:none; 
}


/*===============
mv style
=================*/

main{
	display:block;
}
.mv{
	height:600px;
	background:url(../imges/flower-3410577_1920.jpg)no-repeat center;
	background-size:cover;
	position:relative;
	/*max-width: 100%;
    height: auto;*/
}

/*.mv{
	height:600px;
	background:url(../imges/christmas-1890539_1920.jpg)no-repeat center;
	background-size:cover;
	position:relative;
}*/
/*.mv{
	height:600px;
	background:url(../imges/oil-discharge-2794477_1920.jpg)no-repeat center;
	background-size:cover;
	position:relative;
}*/
.mv p{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	font-size:56px;
	color:#fff;
	text-shadow:2px 2px 5px #666;
	letter-spacing:2px;	
}
.mv span{
	display:block;
	font-size:16px;
	text-align:center;
	padding-top:2px;
			
}

/*===============
headImage style 
=================*/

/*#headImage { 
    overflow:hidden;
    position:relative;
	}*/
	
/*#headImage ul { 
    margin:0; 
    padding:0; 	
} 
*/
/*#headImage li { 
    position:absolute;   
    margin:0; 
    padding:0; 
    background:#fff; 
	list-style:none; 
} 
*/
/*#headImage li img {
max-width: 100%;
height: auto;
}
*/

/*===============
Concept style
=================*/
#sec1 p{
	width:348px;
	margin:0 auto;
	line-height: 2;
}

/*===============
Projects style
=================*/
#sec2{
	background:#f7f5f3;
}
#sec2 li{
	width:300px;
	height:200px;
}
#sec2 dl{
	width:300px;
}
#sec2 dt{
	font-size:16px;
	padding:15px 0 10px;
	border-bottom:1px solid #bfbfbf;
	margin-bottom:10px;
}
/*#sec2 dd{
	font-size:14px;
	padding:15px 0 10px;
	margin-bottom:10px;
}*/
/*===============
On Line Shop style
=================*/
#sec3{
	background:#efece8;	
}

.w_box{
	position:relative;
	margin-bottom:100px;
}
.w_box_inner{
	position:absolute;
	right:0;
	top:95px;
	padding:50px;
	background:rgba(255,255,255,.6);
	width:520px;
	box-sizing:border-box;
	
	}
.w_box_inner h4{
	font-size:20px;
	font-family:"sans-serif";
	color:#4d4d4d;
	margin-bottom:30px;
}
.w_box_inner p{
	font-family:"sans-serif";
	line-height:1.8;
	margin-bottom:30px;
	font-size:12px;
}
.w_box_inner p1{
	font-family:"sans-serif";
	line-height:1.8;
	margin-bottom:0;
	font-size:12px;
}
footer .inner small{
	margin-right:30px;	
}
/*#sec3 table{
	width:420px;
}
#sec3 th{
	width:140px;
	padding-bottom:8px;
	vertical-align:top;
	text-align:left;
    font-weight:bold;	
}

#sec3 td{
	padding-bottom:20px;
	font-family:sans-serif;
}エノテカピンキオーリの詳細は内部リンク*/

/*.w_box_inner a{
	display:block;
	width:200px;
	height:40px;
	text-align:center;
	border:1px solid #333;
	color:#333;
	line-height:40px;
	letter spacing:2px;
}*/
/*===============
Company Profile style
=================*/

.shop_ttl{
	height:425px;
	background:url(../imges/bath-balls-3006585_1920.jpg) no-repeat;
	background-attachment:fixed;
	background-size:cover;
	position:relative;
	margin-bottom:60px;	
}
#sec4 .inner.flexB .selecter a img {
	margin-top: 25px;
}
.shop_ttl .ttl{
	position:absolute;
	color:#fff;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	text-shadow:1px 1px 3px #666;	
}
.shop_ttl .ttl h3{
	margin-bottom:0;
}
.shop_ttl .ttl h2::after{
	border-color:#fff;
}
#sec4 table{
	width:420px;
}
#sec4 th{
	width:140px;
	padding-bottom:10px;
	vertical-align:top;
	text-align:left;	
}

#sec4 td{
	padding-bottom:20px;
}
#sec4 .inner{
	margin-bottom:100px;
	background: #fff;
}

#sec4 .ttl h2{
	font-size:44px;
	letter-spacing:2px;
	position:relative;
	padding-bottom:5px;
	color:#fff;		
}
/*===============
footer style
=================*/
#sec5,footer{
	background:#000;
	color:#fff;
	
}
.contact_txt{
	text-align:center;
	margin-bottom:30px;
	line-height:1.5;
}

/*.fas fa-globe h1::after{
	/*マテリアルアイコンを使用した場合
	font-family:"Material Icon";
	content:"mail_outline";*/
	
/*	font-family:"Font Awesome 5 Free";
	content:"\f0ac";
	font-size:16px;
	padding-right:5px;
}*/
/*.contact_tel{
	display:block;
	width:400px;
	height:50px;
	border:1px solid #fff;
	text-align:center;	
}
.contact_tel span{
	font-size:30px;
		
}
.contact_tel p{
    font-size:14px;	
}*/

/*.contact_mail{
	text-align:center;

}
.contact_mail a{
	color:#fff;
	font-size:20px;
	letter-spacing:2px;
}*/
.contact_mail a::before{
	/*マテリアルアイコンを使用した場合
	font-family:"Material Icon";
	content:"mail_outline";*/
	
	font-family:"Font Awesome 5 Free";
	content:"\f0e0";
	font-size:16px;
	padding-right:5px;
}

/*=========================
Roma Page
main Style
=========================*/

.container{
    display: grid;
	grid-template-columns: 155px 155px 155px 155px;
    grid-template-rows: 155px 155px 155px;
    position:relative;
}
.item1 {
	grid-column-start: 1;
    grid-column-end: 3;
	grid-row-start: 1;
    grid-row-end: 3;
    width:300px;
	height:300px;
	margin:auto;
}
.item2 {
    grid-column-start: 3;
    grid-column-end: 4;
	grid-row-start: 1;
    grid-row-end: 1;
    width:150px;
	height:150px;
   /* border:1px solid #999;*/
	margin:auto;
}
.item3 {
	grid-column-start: 4;
    grid-column-end: 5;
	grid-row-start: 1;
    grid-row-end: 1;
    width:150px;
	height:150px;
	/*border:1px solid #999*/;
	margin:auto;
}

.item4 {
	grid-column-start: 1;
    grid-column-end: 2;
	grid-row-start: 3;
    grid-row-end: 4;
    width:150px;
	height:150px;
	/*border:1px solid #999;*/
	margin:auto;
}

.item5 {
	grid-column-start: 2;
    grid-column-end: 3;
	grid-row-start: 3;
    grid-row-end: 4;
    width:150px;
	height:150px;
	/*border:1px solid #999;*/
	margin:auto;
}
.item6 {
	grid-column-start: 3;
    grid-column-end: 5;
	grid-row-start: 2;
    grid-row-end: 4;
    width:300px;
	height:300px;
   /* border:1px solid #999;*/
	margin:auto;
}

#sec1 table{
	width:240px;
	float:right;
	position:absolute;
	top:0;
	right:0;
	
		
}
#sec1 th{
	width:80px;
	padding-bottom:10px;
	vertical-align:top;
	text-align:left;
	font-size:10px;
		
}

#sec1 td{
	padding-bottom:20px;
	font-size:12px;
}
#sec1.inner{
	margin-bottom:100px;	
}	

#sec3_r1,#sec3_r2,#sec3_r3,#sec3_r4{
	background:#efece8;	
	padding:80px 0 5px;
}
.r_1 h2{
	font-size:42px;
	letter-spacing:2px;
	position:relative;
	padding-bottom:5px;
}	

/*=========================
Enoteca Pinchiorri Page
main Style
=========================*/
.w_box_inner_eno{
	position:absolute;
	right:0;
	top:95px;
	padding:20px;
	background:rgba(255,255,255,.6);
	width:520px;
	height:360px;
	box-sizing:border-box;
	
	}
	
/*=========================
Vaticano Page
main Style
=========================*/