@charset "utf-8";

/************ 共通 **************/
body{
	position: relative;
	animation: fadeIn 2s ease 0s 1 normal;
	-webkit-animation: fadeIn 2s ease 0s 1 normal;
}
@keyframes fadeIn {
 0% {
opacity: 0
}
 100% {
opacity: 1
}
}
 @-webkit-keyframes fadeIn {
 0% {
opacity: 0
}
 100% {
opacity: 1
}
}
body a{
	color:#000;
}
section{
	display: block;
	width: 100%;
	padding: 120px 0 120px 0;
	text-align: center;
	box-sizing: border-box;
}
section .innerWrap{
	width: 100%;
	margin: 0 auto;
	position: relative;
}

/************ header **************/
header{
	display: block;
	width: 100%;
	padding: 10px 0 23px 0 !important;
	box-sizing: border-box;
	background: #FFF;
	top: 0;
	left: 0;
}
#headerInner::after,
header::after{
	content: "";
	display: block;
	clear: both;
}
header h1{
	position: relative;
	display: block;
	float: left;
	margin: 0 auto;
	padding-top: 24px;
}
header h1 img.pc{
	display: inline-block;
}
header h1 img.sp{
	display: none;
}
#headCatch{
	display: block;
	float: left;
	line-height: 100%;
	font-size: 11px;
	letter-spacing: 0.15em;
	padding: 28px 0 0 18px;
	color: #555;
}
nav{
	display: inline-block;
	float: right;
	padding: 0 0 0 0;
}
nav::after{
	content: "";
	display: block;
	clear: both;
}
nav #modalKey{
	display: none;
}
nav ul li{
	display: inline-block;
	float: left;
	font-size: 12px;
	letter-spacing: 0.05em;
	padding: 13px 0 0 30px;
	text-align: center;
}
nav ul li:not(#tel){
	font-size: 18px;
	line-height: 100%;
	padding-top: 18px;
	font-family: 'Spectral SC', serif;
}
nav ul li small{
	display: block;
	text-align: center;
	font-size: 10px;
	font-family:"Noto Sans Japanese","メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif;
	color: #666;
	font-weight: normal;
	letter-spacing: 0;
}
nav ul li#tel a{
	background:#D13032;
	color: #FFF;
	font-size: 14px;
	font-weight: bold;
	text-shadow: none;
	padding: 10px;
	display: block;
}
nav ul li#tel a span{
	display: inline-block;
	width: 18px;
	height: 18px;
	margin-right: 3px;
	background: url(common/images/icon_tel.png) no-repeat center top / auto 18px;
	position: relative;
	top: 4px;
}
nav ul li a{
	text-decoration: none;
	color: #000;
}
nav ul li a:hover{
	color: #D13032;
	filter:alpha(opacity=80);
	-moz-opacity: 0.8;
	opacity: 0.8;
}

nav #closeKey{
	display: none;
}
/************ mainVisual **************/
section#mainVisual{
	width: 100%;
	height: 85%;
	height: -webkit-calc(100% - 91px);
	height: -moz-calc(100% - 91px);
	height: calc(100% - 91px);
	margin: 0 auto 50px auto;
	padding: 0;
	position: relative;
}
section#mainVisual .innerWrap{
	max-width: none;
	max-width: 1000px;
	height: 100%;
}
section#mainVisual .vi_inner{
	background: url(common/images/main_bg.png) repeat left top;
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
}
section#mainVisual h1#mainCatch{
	display: block;
	width: 100%;
	text-align: center;
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
	color: #555;
}
section#mainVisual h1#mainCatch img{
	max-width: 100%;
}
section#mainVisual #cautionCaption{
	display: block;
	color: #FF0000;
	font-size: 11px;
	text-align: right;
	line-height: 120%;
	position: absolute;
	right: 0;
	bottom: 5px;
}
/************ 当店のこだわり **************/
section#about{
	padding: 80px 10% 120px 10%;
}
section#about .innerWrap{
	/*background: url(common/images/img03.png) no-repeat right 50px ;*/
	padding-top: 16px;
	min-height: 450px;
	font-size: 14px;
	text-align: left;
	display: flex;
	width: 100%;
	
}
section#about .innerWrap::after{
	content: "";
	display: block;
	clear: both;
}
section#about  .aboutParts{
	width: 80%;
	padding-right: 5%;
}
section#about .p1{
	display: block;
	text-indent: -0.15em;
	margin-bottom: 40px;
	color: #1B1B1B;
	font-size: 30px;
	font-weight: bold;
	letter-spacing: 0.1em;
	line-height: 100%;
	font-family: 'Spectral SC', serif;
}
section#about .p1 span{
	display: block;
	font-family:"Noto Sans Japanese","メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif;
	font-size: 12px;
	color: #1B1B1B;
	text-align: center;
	font-weight: normal;
	margin-top: 2px;
	letter-spacing: 0.05em;
}
section#about h2{
	display: block;
	font-size: 28px;
	line-height: 150%;
	letter-spacing: 0.1em;
	margin-bottom: 36px;
	font-weight: bold;
}
section#about p.read{
	line-height: 300%;
	margin-bottom: 65px;
}
section#about p.read span{
	display: inline-block;
	width: 26px;
	height: 10px;
	background: url(common/images/icon_arrow1.png) no-repeat center center;
}
section#about .photo{
	text-align: left;
	width: 100%;
	height: 500px;
	background: url(common/images/about_img01.jpg) no-repeat left top / cover;
}
section#about .photo .spImg{
	display: none;
}

/************ insta **************/
section#insta{
	background: #FEF2E0;
}
section#insta h2{
	display: block;
	text-indent: -0.15em;
	margin-bottom: 40px;
	color: #1B1B1B;
	font-size: 30px;
	font-weight: bold;
	letter-spacing: 0.1em;
	line-height: 100%;
	font-family: 'Spectral SC', serif;
}
section#insta h2 i{
	display: inline-block;
	width: 24px;
	height: 24px;
	margin: 0 16px 0 0;
	line-height: 100%;
	background: url(./common/images/icon_insta.png) no-repeat center center / contain;
}
section#insta h2 span{
	display: block;
	font-family:"Noto Sans Japanese","メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif;
	font-size: 12px;
	color: #1B1B1B;
	text-align: center;
	font-weight: normal;
	margin-top: 2px;
	letter-spacing: 0.05em;
}
section#insta .innerWrap{
	font-size: 16px;
	max-width: 1000px;
}
section#insta .seasonParts{
	display: block;
	margin-bottom: 40px;
}
section#insta .seasonParts::after{
	content: "";
	display: block;
	clear: both;
}
section#insta .seasonParts ul{
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: row;
	flex-direction: row;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
}
section#insta .seasonParts ul li{
	display: block;
	float: left;
	width:21%;
	width:-webkit-calc((100% - 24px ) / 4);
	width:-moz-calc((100% - 24px ) / 4);
	width:calc((100% - 24px ) / 4);
	padding-bottom: 10px;
	margin-right: 8px;
	margin-bottom: 16px;
	background: #FFF;
	box-shadow: 1px 1px 5px rgba(0,0,0,0.2) ,  -1px -1px 5px rgba(0,0,0,0.2);
}
section#insta .seasonParts ul li:nth-child(4n){
	margin-right:0;
}
section#insta .seasonParts ul li img{
	display: block;
	width: 100%;
	max-width: 400px;
}
section#insta .seasonParts ul li span{
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 12px;
	text-align: left;
	line-height: 150%;
	padding: 0 10px;
	margin-top: 8px;
	color: #666;
}
section#insta .read{
	display: block;
	text-align: center;
	font-size: 14px;
}
section#insta .read a{
	display: inline-block;
	width: 480px;
	height: 46px;
	text-align: center;
	padding-left: 30px;
	color: #FFF;
	text-decoration: none;
	padding-top: 9px;
	box-sizing: border-box;
	background:
	url(common/images/icon_insta.png) #000 no-repeat left 35px top 12px / 20px auto;
	border-radius: 50px;
}

/************ 店舗情報 **************/
section#company{
}
section#company h2{
	display: block;
	margin-bottom: 40px;
	font-size: 30px;
	font-weight: bold;
	letter-spacing: 0.1em;
	line-height: 100%;
	font-family: 'Spectral SC', serif;
}
section#company h2 span{
	display: block;
	font-family:"Noto Sans Japanese","メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif;
	font-size: 12px;
	color: #666;
	text-align: center;
	font-weight: normal;
	margin-top: 8px;
	letter-spacing: 0.05em;
}
section#company .innerWrap{
	font-size: 16px;
	max-width: 1000px;
}
section#company .TextStyle1{
	margin-bottom: 10px;
	font-size: 22px;
	letter-spacing: 0.1em;
	font-family: 'Spectral SC', serif;
}
section#company .tableParts{
	display: block;
	font-size: 14px;
	background: rgba(255,255,255,0.9);
	box-sizing: border-box;
	border:#FFF solid 1px;
	border-radius: 5px;
}
section#company .tableParts .leftParts{
	width: 48%;
	margin-left: 40px;
	margin-bottom: 48px;
	text-align: left;
	float: left;
}
section#company .tableParts table th{
	width: 7em;
	vertical-align: top;
	padding: 5px 15px 5px 14px;
	background: url(common/images/icon_arrow.png) no-repeat left 17px / 4px auto;
	text-align: left;
}
section#company .tableParts table td{
	text-align: left;
	vertical-align: top;
	padding: 5px;
}
section#company .img{
	display: block;
	width: 420px;
	float: left;
	margin-bottom: 48px;
}
section#company #map-canvas{
	display: block;
	width: 100%;
	overflow: hidden;
	height: 300px;
	border-top: #DDD solid 1px;
	border-bottom: #DDD solid 1px;
	background: #F4F4F4;
	clear: both;
	margin-bottom: 20px;
}
section#company p.btn a{
	display: inline-block;
	width: 220px;
	height: 38px;
	text-align: center;
	color: #FFF;
	text-decoration: none;
	padding-top: 6px;
	box-sizing: border-box;
	background:	url(common/images/btn_bg_small.png) no-repeat center center;
}

/************ footer **************/
footer{
	display: block;
	background:#000;
	width: 100%;
	color: #000;
	text-align: center;
	padding: 50px 0  !important;
}
footer .innerWrap{
	display: block;
	width: 100%;
	max-width: 750px;
	margin: 0 auto;
}
footer #snsArea{
	display: block;
	margin-bottom: 30px;
}
footer #snsArea::after{
	content: "";
	display: block;
	clear: both;
}
footer #snsArea .facebookBox{
	display: block;
	width:360px;
	height: 300px;
	float: left;
	margin-right: 30px;
	background: #FFF;
}
footer #snsArea .twitterBox{
	display: block;
	width:360px;
	height: 300px;
	overflow-y: scroll;
	float: left;
	background: #FFF;
}
footer small{
	font-size: 12px;
	letter-spacing: 0.05em;
	color: #FFF;
}
footer small a{
	color: #FFF !important;
}
footer #backTop{
	display: none;
}
footer #backTop a{
	display: block;
	width: 50px;
	height: 50px;
	position: fixed;
	right: 20px;
	bottom: 20px;
	border-radius: 100%;
	background:url(common/images/icon_arrow2.png) rgba(0,0,0,0.8) no-repeat center 10px;
	box-sizing: border-box;
	padding-top: 17px;
	z-index: 5;
	color: #FFF;
	text-decoration: none;
	font-weight: 900;
}


/*-- 以下PC --*/
@media (min-width:1061px){
	.sp{ display: none;}
	.pc{display:inline;}

	/************ header **************/
	#headerInner{
		display: block;
		width: 1000px;
		margin: 0 auto;
		box-sizing: border-box;
		position: relative;
	}
	nav ul li a:hover{
		opacity: 0.65;
		-webkit-transition:all 0.3s ease;
		-moz-transition:all 0.3s ease;
		transition:all 0.3s ease;
	}
	
	/************ インスタ **************/
	section#insta .read a:hover{
		opacity: 0.65;
		-webkit-transition:all 0.3s ease;
		-moz-transition:all 0.3s ease;
		transition:all 0.3s ease;
	}
	section#company  a.pc_tel{
		color: #000;
		text-decoration: none;
	}
	
	/************ 店舗情報 **************/
	section#company p.btn a:hover{
		opacity: 0.65;
		-webkit-transition:all 0.3s ease;
		-moz-transition:all 0.3s ease;
		transition:all 0.3s ease;
	}
	
	/************ footer **************/
	footer #backTop a:hover{
		opacity: 0.65;
		bottom:24px;
		-webkit-transition:all 0.3s ease;
		-moz-transition:all 0.3s ease;
		transition:all 0.3s ease;
	}


}

/*-- 以下スマートフォン --*/
@media only screen and  (max-width:1060px){
	body{
		padding-top: 20vw;
		background:url(common/images/bg02.png) no-repeat #FFF center 20vw / 110% auto;
	}
	br.sp{display: inline;}
	br.pc{ display: none;}

	/************ 共通 **************/
	section{
		padding: 10vh 0 10vh 0;
	}
	/************ header **************/
	header{
		height: 20vw;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		padding-top: 0;
		z-index: 10;
		background: #FFF;
	}
	header h1{
		display: block;
		padding: 5vw 0 5vw 0;
		float: none;
		width: 100%;
		top: 0;
		text-align: center;
	}
	header h1 img.pc{
	display: none;
}
header h1 img.sp{
	display: inline-block;
}
	header h1 img{
		width: auto;
		height: 3.8vw;
	}
	#headCatch{
		display: none;
	}
	nav #modalKey{
		display: block;
		width: 13vw;
		height: 13vw;
		background:url(common/images/menu.png) #000 no-repeat center center / 10vw auto;
		position: fixed;
		right: 3vw;
		top: 3.5vw;
		text-align: center;
		z-index: 12;
		box-sizing: border-box;
		border-radius: 50%;
	}
	nav ul{
		display: none;
		width: 100%;
		height: 100%;
		background: #1A1518;
		z-index: 15;
		position: fixed;
		top: 0;
		left: 0;
		text-align: center;
		padding-top: 8vw;
	}
	nav ul li{
		display: block;
		float: none;
		width: 100%;
		height: auto;
		padding: 5vw 10vw 0 10vw;
		color: #FFF;
		font-size: 5vw;
	}
	nav ul li:not(#tel){
		font-size: 6vw;
	}
	nav ul li a{
		color: #FFF;
	}
	nav ul li a:hover{
		color: #FFF;
	}
	nav ul li small{
		font-size: 2.8vw;
		color: #ABABAB;
		margin-top: 2px;
	}
	nav ul li#tel{
		display: block;
		width: 100vw;
		margin: 10px auto 30px auto;
	}
	nav ul li#tel a{
		display: block;
		text-align: center;
		border:#FFF solid 1px;
		border-radius: 5px;
		color: #FFF;
		background: none;
		padding: 10px 20px 10px 20px;
	}
	nav ul li#tel a span{
		display: inline-block;
		width: 14px;
		height: 14px;
		margin-right: 5px;
		background: url(common/images/icon_tel.png) no-repeat center top / auto 14px;
		position: relative;
		top: 2px;
	}
	nav #closeKey{
		display: block;
		font-size: 4vw !important;
		padding-top: 7vw;
	}

	/************ mainVisual **************/
	section#mainVisual{
		padding:20px 0;
		height: 120vw;
		margin-top: 20vw;
		margin-bottom: 0;
	}
	section#mainVisual h1#mainCatch{
		width: 100%;
	}
	section#mainVisual h1#mainCatch img{
		width: 90%;
	}
	section#mainVisual #cautionCaption{
		display: block;
		width: 100vw;
		color: #FF0000;
		font-size: 2.8vw;
		text-align: right;
		line-height: 120%;
		padding: 0 0;
		position: absolute;
		right: 10px;;
		bottom: 10px;
	}
	/************ 当店について **************/
	section#about{
		padding: 10vh 0 10vh 0;
	}
	section#about .p1{
		text-align: center;
		background: none;
		padding-bottom: 2vh;
		margin-bottom: 3vh;
		font-size: 8vw;
	}
	section#about h2{
		font-size: 5vw;
		letter-spacing: 0;
		line-height: 200%;
		margin-bottom: 4vw;
		text-align: center;
	}
	section#about .innerWrap{
		display: block;
		font-size: 4vw;
		padding-top: 0;
		padding-left: 3vw;
		padding-right: 3vw;
		background: none ;
		min-height: auto;
	}
	section#about .aboutParts{
		margin-bottom: 20px;
		width: 100%;
		padding-right:0;
	}
	section#about .aboutParts p.read{
		margin-bottom: 4vh;
		font-size: 3.2vw;
		line-height: 240%;
	}
	section#about .photo{
		padding-left: 0;
		height: 250px;
	}
	section#about .photo img{
		width: 100%;
		max-width: 1000px;
	}
	section#about .photo .spImg{
		display: block;
		margin-bottom: 5px;
	}
	/************ インスタ **************/
	section#insta{
		background-size: 200px auto, auto;
	}
	section#insta h2{
		font-size: 8vw;
		background: none ;
		margin-bottom: 6vw;
	}
	section#insta .innerWrap{
		font-size: 4vw;
		padding: 0 3vw;
		box-sizing: border-box;
	}
	section#insta .seasonParts{
		margin-bottom: 5vh;
	}
	section#insta .seasonParts ul{
		-webkit-flex-direction: row;
		flex-direction: row;
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
	}
	section#insta .seasonParts ul li{
		display: block;
		float: left;
		padding: 2vw;
		margin-right: 0;
		margin-bottom: 2vh;
		box-sizing: border-box;
		width:46vw;
	}
	section#insta .seasonParts ul li:nth-child(2n-1){
		margin-right: 2vw;
	}
	section#insta .seasonParts ul li::after{
		content: "";
		display: block;
		clear: both;
	}
	section#insta .seasonParts ul li img{
		display: block;
		width: 42vw;
		float: left;
	}
	section#insta .seasonParts ul li span{
		display: none;
	}
	section#insta .read a{
		display: inline-block;
		width: 90vw;
		height: auto;
		text-align: center;
		line-height: 150%;
		font-size: 3.5vw;
		padding: 5px 0;
		box-sizing: border-box;
		background:url(common/images/icon_insta.png) #000 no-repeat left 5vw center / 20px auto;
	}

	/************ 店舗情報 **************/
	section#company {
		background-size: 16px auto;
	}
	section#company h2{
		font-size: 8vw;
		background: none ;
		margin-bottom: 5vw;
	}
	section#company .innerWrap{
		font-size: 4vw;
		padding: 0 3vw;
		box-sizing: border-box;
	}
	section#company .tableParts .img{
		display: block;
		float: none;
		width: 100%;
		text-align: center;
		margin-bottom: 3vh;
	}
	section#company .tableParts .img img{
		width: 100%;
		max-width: 400px;
	}
	section#company .tableParts{
		width: 100%;
		padding: 3vw;
	}
	section#company .tableParts .leftParts{
		display: block;
		width: 100%;
		margin-left: 0;
		margin-bottom: 4vh;
		float: none;
		line-height: 4vh;
	}
	section#company .tableParts .leftParts p.TextStyle1{
		text-align: center;
		font-size: 5vw;
	}
	section#company .tableParts .leftParts table,
	section#company .tableParts .leftParts table tbody
	section#company .tableParts .leftParts table tr{
		display: block;
	}
	section#company .tableParts .leftParts table th{
		display: block;
		font-size: 3.6vw;
		width: 100%;
		padding: 0 0 0.5vh 1em;
		background-position: left 50%;
	}
	section#company .tableParts .leftParts table th::after{
		content: "：";
	}
	section#company .tableParts .leftParts table td{
		display: block;
		font-size: 3.6vw;
		padding: 0 0 3vw 4.2vw;
	}
	section#company .tableParts table td a.pc_tel{
		padding-left: 4vw;
		background: url(common/images/icon_tel_b.png) no-repeat left center / auto 4vw;
	}
	section#company #map-canvas{
		height: 30vh;
	}
	section#company p.btn a{
		display: block;
		width: 80%;
		height: auto;
		margin: 0 auto 20px auto;
		padding: 3px 0;
		background:#000;
	}


	/************ footer **************/
	footer{
		padding: 0;
	}
	footer {
	width: 100%;
	padding: 40px 0;
}
	footer .innerWrap{
		display: block;
		padding-left: 3vw;
		padding-right: 3vw;
	}

}

/*-- SNS Areaのみタブレットでの横幅調整 --*/
@media only screen and  (max-width:1060px){
	footer #snsArea .facebookBox,
	footer #snsArea .twitterBox{
		width: 42vw;
		max-width: 500px;
	}
	footer #snsArea .facebookBox{
		margin-right: 2vw;
	}

}
@media only screen and (max-width:700px){
	footer #snsArea .facebookBox{
		height: 360px;
		float: none;
		width:100% !important;
		margin-right: 0;
		margin-bottom: 4vh;
	}
	footer #snsArea .twitterBox{
		height: 360px;
		float: none;
		width:100%;
		margin-right: 0;
	}
}


@media print{
	body{
		width: 1100px !important;
	}
	.sp{
		display: none !important;
	}
	header{
		padding-left: 50px;
		padding-right: 50px;
	}
	section#mainVisual{
		height: 90vw;
	}
	section#mainVisual #cautionCaption{
		top: 88vw;
	}
	section#insta .seasonParts ul li{
		margin-right: 7px;
	}
	#ankWrap{
		display: none !important;
	}
	footer .innerWrap{
		display: block;
		max-width: auto;
	}
	footer #snsArea{
		display: block;
		position: relative;
	}
	footer #snsArea .facebookBox{
		display: block;
		float: left;
		width: 360px !important;
		height: 300px !important;
		background: #FFF !important;
	}
	footer #snsArea .twitterBox{
		display: block;
		float: right;
		width: 360px !important;
		height: 300px !important;
		position: absolute;
		top: 0;
		right: 0;
	}
	footer .innerWrap{
		width: 900px !important;
	}
	#backTop{display: none !important;}

}