@charset "utf-8";
/* ===================================================================
CSS information

 File Name  : section.css
 Style Info : コンテンツに関するスタイル指定
=================================================================== */

/*-------------------------------------------------------------------
/* PHILOSOPHY&MENU
--------------------------------------------------------------------*/
.con01{
	width:40%;	
}
.philo #contents .wrapper, #menu #contents .wrapper{
	width:95%;
	margin:0 0 0 5%;
}

/*-------------------------------------------------------------------
/* OUR PEOPLE
--------------------------------------------------------------------*/
.people01 img, .people02 img{
	width:20%;
	float:left;
	margin:0 0 4% 0;
}
.people01 h3, .people01 p, .people02 h3, .people02 p{
	width:77%;
	float:right;
}
.people01, .people02{
	margin:0 0 4% 0;	
	clear:both;
}
/*
	width:62%;
	float:left;
}
.people02 img{
	width:24.2%;
	float:left;
}
.people02 h3, .people02 p{
	width:72%;
	float:right;
}
*/
.people03{
	clear:both;
	/*float:right;
	width:35%;*/
}
.tbl_people{
	width:100%;
}
.tbl_people th{
	font-size:182%;
	font-family: 'Josefin Sans', sans-serif;
	font-weight:normal;
	vertical-align:top;
}
.tbl_people td{
	padding:0.7em 0 0 1em;
}

/*-------------------------------------------------------------------
/* MENU
--------------------------------------------------------------------*/
#menu .date{
	text-align:right;
	font-family: 'Josefin Sans', sans-serif;
	font-size:123.1%;
	margin:-1em 0 0 0;
}
#menu .menuTtl, .menuSub{
	display:block;
	line-height:130%;
}
#menu .menuTtl{
	padding:1em 0 0 0;	
	font-size:123.1%;
}
#menu .menuSub{
	color:#CCC;
}
.dinnerNote{
	border-bottom:#CCC 1px dotted;
	padding:1em 0;
	margin:0 0 1em 0;
}
.bgmaximage{
	display:none;
}

/*-------------------------------------------------------------------
/* GIFT
--------------------------------------------------------------------*/
.giftL{
	float:left;
	width:47%;
	margin:0 6% 0 0;
}
.giftL img, .giftR img{
	width:100%;
	margin:0 0 2% 0;
}
.giftL  .gift_olive {
	margin:10% 0 0 0;	
}
.giftL  .gift_olive img{
	width:22%;
	float:left;
}
.giftL .gift_olive h3, .giftL .gift_olive p{
	width:76%;
	float:right;
}
.giftR{
	float:right;
	width:47%;	
}
.giftR:after{
	clear:both;
}
.purchaseForm {
	float:right;
	width:45%;
}
.sp_purchaseForm{
	display:none;
}
	

/*-------------------------------------------------------------------
/* FAQ
--------------------------------------------------------------------*/

.faq dt:before, .faq dd:before{
	content: "Q.";
	font-family: 'Josefin Sans', sans-serif;
	margin:0 1.5em 0 0;
	font-size:182%;
}
.faq dt:before{
	content: "Q.";
}
.faq dt{
	padding:0 0 0.6em 4.6em;	
	text-indent: -4.6em;
	font-family:Helvetica;
	line-height:150%;
}
.faq dd:before{
	content: "A.";
	padding:0 0.1em;
}
.faq dd{
	padding:0 0 2.2em 4.6em;	
	text-indent: -4.6em;
	line-height:150%;
}

/*-------------------------------------------------------------------
/* reservations
--------------------------------------------------------------------*/
#res{
}
.resL{
	float:left;
	width:60%;
	margin:0 5% 0 0;
}
#mfp_loading_screen, .mailform data-type {
	display:none!important;
}
#res_form{
	background:#FFF;
	color:#333;
	padding:2em 7%;
	text-shadow: none;
	line-height:130%;
	margin:2em 0 0 0;
	box-shadow: 3px 3px 5px 2px rgba(0,0,0,0.2);
}
.mailform th{
	font-family: 'Josefin Sans', sans-serif;
	font-weight: 400; 
	text-align:right;
	font-size:110%;
}
.mailform td input, .mailform td select, .mailform td textarea{
	background:#DEDEDE;
	border:none;
	padding:0.5em;
}
.mailform td input, .mailform td select {
	width:62.9%;
	height:2em;	
}
.mailform .form_name select{
	width:15%;
}
.mailform .form_name input{
	width:40%;
}

.mailform th, .mailform td{
	vertical-align: top;
	padding:0.5em;
}
.mailform .must{
	color:#C00;
	font-weight:bold;
	margin:0 0 0 0.3em;
}
.mailform .border{
	border-top:1px solid #CCC;
}
.mailform input{
	width:60%;
}
.mailform label input{
	padding:0.1em;
	width:13px;
}
.mailform textarea{
	width:90%!important;
}

.mailform button{
	text-align:center;
	font-family: 'Josefin Sans', sans-serif;
	font-weight: 400;
	width:40%;
	background:#333;
	color:#FFF;
	padding:1em 0;
	margin:1em auto 0 auto;
}
.mailform button:hover{
	background:#666;
}
.mailform .small{
	font-size:80%;	
}
.cancel dd{
	padding:0 0 4em 0;
}
.resR{
	float:right;
	width:35%;
	text-align:center;
}
.resR h3{
	margin:2em 0 0.8em 0;	
}
.resR h3:first-child{
	margin:0 0 0.8em 0;		
}
.resR .fa{
	margin:0 0.5em 0 0;	
}
.resR .address{
	margin:0 0 1em 0;	
}
.resBox  #acMenu{
	margin:0;
	padding:0 ;	
	width:100%;
}
#res img{
	width:100%;
}
.map{
	width:96%;
	height:230px;
	margin:0 auto;
}
#oursisters p a{
	color:#FFF;
	font-weight:bold;
}
.resInfo{
	margin-left:-340px;
	float:right;
	width:100%;
}
.resInfo_innner{
	margin-left:340px;
}
.widget{
	float:left;
	width:300px;
	margin-right:40px;
	margin-top:0em;
}
.resBox{
	width:34%;
	margin:0 4% 0 0;
	float:left;
	text-align:center;
}
.resBox:last-child{
	width:24%;
	margin:0;
	float:left;
}
.resWidget{
	margin-bottom:4em;
}
.ggmap {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
 
.ggmap iframe,
.ggmap object,
.ggmap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

/*-------------------------------------------------------------------
/* VIDEOS
--------------------------------------------------------------------*/
.video_block{
	width:21%;
	margin:0 4% 1.2em 0;	
	float:left;
}
.video_block1{
	width:22%;
	margin:0 0 1.2em 0;	
	float:left;
}
.videoImg{
	width:100%;
	margin:0 0 4% 0;
}
.video_block h3{
	margin:0 0 0.4em 0;
	line-height:120%;
}
.video_block p{
	margin:0 0 3em 0;
	line-height:140%;
}
.video .f_yt{
	width:36px;
	height:36px;
	display:block;
	margin:1em 0 3em 0;
}
.video .f_yt:after{
    content: ""; 
    display: block;
    clear: both;
}
.video .f_yt a{
	display: block;
	overflow: hidden;
	width: 100%;
	height: 100%;
}
.video .f_yt span{
	display:none;
}

/* ==========================================================================
   SmartPhone
========================================================================== */

@media screen and (max-width: 640px){
	
	.con01{
		width:100%;
	}
	.philo #contents .wrapper, #menu #contents .wrapper{
		width:90%;
		margin:0 auto;
	}
	
	/*-------------------------------------------------------------------
	/* OUR PEOPLE
	--------------------------------------------------------------------*/
	.people{
		background: linear-gradient(0deg, rgba(0, 0, 0, .8), rgba(0, 0, 0, .5)),
		url(../../img/sp_bg/peo.jpg) center fixed;
		background-size: cover;
	}
	.people01, .people02{
		padding:0;	
		margin:0 0 4em 0;
		float:none;
		width:100%;
	}
	.people01 h3, .people01 p, .people02 h3, .people02 p, .people03{
		float:none;
		width:100%;	
	}
	.people01 img, .people02 img{
		display:none;
	}

	/*-------------------------------------------------------------------
	/* PHILOSOPHY
	--------------------------------------------------------------------*/
	.philo{
		background: linear-gradient(0deg, rgba(0, 0, 0, .8), rgba(0, 0, 0, .5)),
		url(../../img/sp_bg/phi.jpg) center fixed;
		background-size: cover;
	}
	/*----------------------------------------------------------
  	MENU
	----------------------------------------------------------- */	
	/*#menu{
		background: linear-gradient(0deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, .7)),
		url(../../img/sp_bg/men.jpg) center fixed;
		background-size: cover;
	}*/
	img.bgmaximage{
		display:inline;
		position:fixed !important;top:0;left:-426px;
	}

	#menu{
  		position: absolute;
  		top: 0;
		left: 0;
		z-index: 50;
		width: 100%;
		background: linear-gradient(0deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, .3));
	}


	/*----------------------------------------------------------
  	GIFT
	----------------------------------------------------------- */	
	.gift{
		background: linear-gradient(0deg, rgba(0, 0, 0, .8), rgba(0, 0, 0, .5)),
		url(../../img/sp_bg/gif.jpg) center fixed;
		background-size: cover;
	}
	.giftL{
		float:none;
		width:100%;
		margin:0;
	}
	.giftL p{
		margin:0 0 20% 0;	
	}
	.giftL  .gift_olive img{
		margin:0 0 10% 0.3em;	
	}
	.giftR{
		float:none;
		width:100%;
	}
	.sp_purchaseForm{
		display:inline;
	}

	/*-------------------------------------------------------------------
	/* お問い合わせフォーム
	--------------------------------------------------------------------*/
	/*#res{
		background: linear-gradient(0deg, rgba(0, 0, 0, .8), rgba(0, 0, 0, .5)),
		url(../../img/sp_bg/res.jpg) center fixed;
		background-size: cover;
	}*/
	.resL{
		float:none;
		width:100%;
		margin:0 0 5em 0;
	}
	.mailform th,.mailform td{
		display:block;	
		width:100%;
	}
	.mailform th{
		text-align:left;
		margin:0 0 -1em 0;
	}
	.mailform input,.mailform select, .mailform textarea{
		width:90%;	
	}
	.resR{
		float:none;
		width:100%;
		text-align:left;
	}
	.resR .map{
		margin:0;	
	}
	#zool img{
		border:#666 1px solid;
	}
	.faq dt:before, .faq dd:before{
		margin:0 0.5em 0 0;
	}
	.faq dt{
		padding:0 0 0.6em 2.8em;	
		text-indent: -2.8em;
	}
	.faq dd{
		padding:0 0 2.2em 2.8em;	
		text-indent: -2.8em;
	}
	.resInfo{
		margin-left:0;
		float:none;
	}
	.resInfo_innner{
		margin-left:0;
	}
	.widget{
		float:none;
		width:100%;
		margin-top:1em;
	}
	.resBox{
		width:100%;
		margin:4em 0 0 0;
		float:none;
		text-align:left;
	}
	.resBox:last-child{
		width:100%;
		margin:4em 0 0 0;
		float:none;
	}
	/*-------------------------------------------------------------------
	/* VIDEOS
	--------------------------------------------------------------------*/
	.video_block{
		width:100%;
		margin:0 0 3em 0;	
		float:none;
	}
	.video_block1{
		width:100%;
		margin:0 0 3em 0;	
		float:none;
		clear:none;
	}
	.videoImg{
		width:100%;
		margin:0;
	}
	.video_block h3{
		margin:0.3em 0 0.4em 0;
	}
	.video_block p{
		margin:0;
	}

}