@charset "UTF-8";
/* font-family: 'EB Garamond', serif; */
/* ---------------------------------------
共通部分の設定
-------------------------------------------*/
html {
  font-size: 62.5%;
  /* 16*62.5%=10px */
}
body {
  font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif;
  color: #3f3f3f;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  /*	文字のアンチエイリアス設定 */
  -moz-osx-font-smoothing: grayscale;
  /*	Firefoxのアンチエイリアス設定*/
  font-feature-settings: "palt";
  /*	文字詰の設定*/
  line-height: 1;
  /*	行間の設定*/
}
@media (min-width:769px){
	.pc_none{
		display: none!important;
	}
	body{
		font-size: 16px;
	}
}
/*PCサイズ時の指定*/
@media (max-width:768px){
	.sp_none{
		display: none!important;
	}
	body{
		font-size: 14px;
	}
}
/*SPサイズ(スマホ)時の指定*/
img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
  /*	原因不明な余白ができた時の対策*/
}
a {
  color: #3f3f3f;
  text-decoration: none;
}
a:hover { /*	カーソルを乗せた時の変化*/
  opacity: 0.8;
  /*	不透明度を８０%*/
  transition: .4s;
  /*	何秒間かけて変化させるか*/
}
/* ---- frexboxの設定 ---- */
.frexB {
  display: flex;
  justify-content: space-between;
}
.inner {
  max-width: 1000px;
  margin: 0 auto;
	padding: 0 5%;
/*	画面を縮小した時にサイドに余白を作る*/
}
ul {
  list-style: none;
}
.sec_ttl {
  font-size: 5.6rem;
  font-family: 'EB Garamond', serif;
  text-align: center;
  font-weight: normal;
  text-transform: uppercase;
}
.sec_ttl::after {
  content: "";
  /*	新しく要素を入れる */
  display: block;
  /*	ブロック要素に変える */
  width: 120px;
  /*	ブロック要素に変えてから幅指定ができる */
  border-bottom: 1px solid #3f3f3f;
  /*	幅分のボーダー(線)を引く*/
  margin: 1rem auto 0;
  /*	幅を指定した場合は中央配置が可能*/
}
.sec_subttl {
  text-align: center;
  font-weight: normal;
  margin-bottom: 5rem;
  padding-top: 1.2rem;
	font-size: 1.6rem;
}
@media (max-width:768px){
	.inner{
		padding: 0 1.5rem;
	}
	.sec_ttl{
		font-size: 2.1rem;
	}
	.sec_ttl::after{
		width: 80px;
		margin: 0.5rem auto 0;
	}
	.sec_subttl{
		font-size: 1.4rem;
		padding-top: 1rem;
		margin-bottom: 3.6rem;
	}
	.frexB{
		flex-direction: column;
	}
}/*max-width:768px*/
/*--------------------------------------
Header
-----------------------------------------*/
header {
  background: #000;
  font-family: 'EB Garamond', serif;
}
header a {
  color: #fff;
}
.logo {
  font-size: 3.6rem;
}
header .inner {
  padding: 2.9rem 0 2.5rem;
}
header ul {
  align-items: flex-end;
}
header li {
  font-size: 1.8rem;
  margin-left: 3rem;
}
@media (max-width:768px){
	header nav.show{
		display: block;
		opacity: 1;
		visibility: visible;
	}
	header nav{
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		background: rgba(0, 0, 0, .85);
		z-index: 500;
		opacity: 0;
		visibility: hidden;
		transition: all .7s;
	}
	header ul {
		align-items: center;
		margin-top: 50px;
	}
	header li{
		font-size: 2.4rem;
		margin-bottom: 3.5rem;
	}
	header li a img{
		max-width: 25px;
	}
/*	後でハンバーガーメニューを作成する時に消す*/
	header .inner{
		padding: 2rem 1.5rem;
	}
	.logo{
		font-size: 3.2rem;
	}
}/*max-width:768px*/
/*--------------------------------------
Hamburger menu
-----------------------------------------*/
.nav_toggle{
	display: block;
	width: 32px;
	height: 20px;
	position: fixed;
	top: 26px;
	right: 16px;
	z-index: 9999;
}
.nav_toggle i{
	display: block;
	position: absolute;
	width: 100%;
	height: 2px;
	background-color: #fff;
}
.nav_toggle i:nth-child(1) {
	top: 0;
}
.nav_toggle i:nth-child(2) {
	top: 0;
	bottom: 0;
	margin: auto;
}
.nav_toggle i:nth-child(3) {
	bottom: 0;
}
.nav_toggle.show i:nth-child(1){
	transform: translateY(8px) rotate(-45deg);
}
.nav_toggle.show i:nth-child(2){
	opacity: 0;
}
.nav_toggle.show i:nth-child(3){
	transform: translateY(-9px) rotate(45deg);
}
@media (min-width:769px){
	.nav_toggle{
		display: none;
	}
}
/*--------------------------------------
MainVisual
-----------------------------------------*/
.mainVisual {
  position: relative;
	overflow: hidden;
	 /* slickを入れた時は、hiddenで横スクロールを消してあげる  */
}
.mainVisual h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /*	先にx軸、後にy軸
	transform: translateX(-50%)横方向のみ
	transform: translateY(-50%)縦方向のみ
	*/
  color: #fff;
  font-size: 5.6rem;
  font-family: 'EB Garamond', serif;
  font-weight: normal;
  text-shadow: 2px 2px 5px rgba(102, 102, 102, .8);
  line-height: 1.1;
	z-index: 100;
}
.mainVisual span {
  font-size: 2.8rem;
  display: block;
  text-align: center;
}
.mainVisual img {
  width: 100%;
}
@media (max-width:768px){
	.mainVisual h1{
		font-size: 2.8rem;
	}
	.mainVisual span{
		font-size: 1.8rem;
	}
}/*max-width:768px*/
/*--------------------------------------
concept
-----------------------------------------*/
.concept {
  padding: 7rem 0 10rem;
}
.concept p {
  line-height: 2;
}
@media (max-width:768px){
	.concept{
		padding: 3rem 0 4rem;
	}
}
/*--------------------------------------
Items
-----------------------------------------*/
.items {
  background: #f7f5f3;
  padding: 10rem 0;
}
.items li {
/*  max-width: 300px;*/
	width: calc(33.3333% - 100px / 3);
/*	100px / 3 は余白の合計を３で割る*/
	margin-right: 50px;
}
.items li:last-child{
	margin-right: 0;
}
.items h4 {
  border-bottom: 1px solid #dfdfdf;
  padding: 2rem 0 .7rem;
  font-weight: normal;
  margin-bottom: 1rem;
}
.items p {
  font-size: 1.4rem;
  line-height: 1.8;
}
@media (max-width:768px){
	.items{
		padding: 4.3rem 0 1.4rem;
	}
	.items li{
/*		max-width: inherit;*/
		width: 100%;
		margin-right: 0;
/*	calc計算したことで携帯用のwidth、marginを設定し直す。*/
		margin-bottom: 3rem;
	}
	.items li:last-child{
		margin-bottom: 0;
	}
	.items h4{
		font-size: 1.8rem;
		padding: 2rem 0 1rem;
	}
	.items p{
		line-height: 1.5;
	}
}/*max-width:768*/
/*--------------------------------------
Shop Info
-----------------------------------------*/
.ttl_inner {
  background: url("../images/bg_shopinfo.jpg") no-repeat center/cover;
  height: 0;
  padding-top: 26.5%;
  position: relative
}
.inner_txt {
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.inner_txt .sec_ttl::after {
  border-color: #fff;
}
.inner_txt .sec_subttl {
  margin-bottom: 0;
}
.shopInfo .inner{
	padding: 4rem 0 10rem;
}
.map{
/*	親要素1000pxに対して53%で表示*/
	width: 53%;
}
.map iframe{
	width: 100%;
}
.shopInfo table{
	/*	親要素1000pxに対して42%で表示*/
	width: 42%;
	font-size: 1.4rem;
}
.shopInfo th{
	width: 32%;
	text-align: left;
	font-weight: normal;
}
.shopInfo th,
.shopInfo td{
	line-height: 1.6;
}
@media (max-width:768px){
	.ttl_inner{
		background: url("../images/bg_shopinfo_sp.jpg") no-repeat center/cover;
		padding-top: 42.6%;
	}
	.shopInfo .inner{
		padding: 3rem 1.5rem 7rem;
	}
	.map{
		width: 100%;
		height: 0;
		padding-bottom: 64%;
		overflow: hidden;
/*		はみ出た部分を隠す  */
		position: relative;
		margin-bottom: 3rem;
	}
	.map iframe{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	.shopInfo table{
		width: 100%;
		font-size: 1.2rem;
	}
}/*max-width:768px*/
/*--------------------------------------
Contact
-----------------------------------------*/
.contact{
	background: #000;
	color: #fff;
	padding: 10rem 0 12rem;
	text-align: center;
}
.contact .sec_ttl::after{
	border-color: #fff;
}
.contact p{
	font-size: 1.4rem;
	line-height: 1.7;
}
.form_btn{
	border: 1px solid #fff;
	display: block;
	max-width: 400px;
	height: 50px;
	margin: 3rem auto;
	color: #fff;
	font-size: 1.6rem;
	line-height: 50px;
/*	ボタンの上下中央に配置するために、ボタンの高さと同じ50pxをline-heigthに指定した(注意:文章が一行であること。二行になる時はpaddingで指定する)	*/
}
.contact .tel{
	font-size: 1.8rem;
	line-height: 1;
	margin-bottom: 1.6rem;
}
.tel a{
	font-size: 3rem;
	color: #fff;
	font-family: 'EB Garamond', serif;
}
@media (max-width:768px){
	.contact{
		padding: 4rem 0 4.8rem;
	}
	.contact p{
		line-height: 1.3rem;
/*	下記２行を入れる事でタブレットなどで見たときに中央に配置される。(書かなかったら左寄せになる)	*/
		display: flex;
		justify-content: center;
	}
	.contact_txt{
		text-align: left;
	}
	.form_btn{
		max-width: 300px;
		height: 40px;
		margin-top: 1.6rem;
		line-height: 40px;
	}
	
}/*max-width:768px*/
/*--------------------------------------
Footer
-----------------------------------------*/
footer{
	background: #000;
	color: #fff;
	font-size: 1.4rem;
	padding-bottom: 2rem;
}
footer small{
	display: block
}
@media (max-width:768px){
	footer{
		font-size: 1.1rem;
		text-align: center;
	}
}