@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Quicksand:500,700');
@import url('https://fonts.googleapis.com/css?family=Courgette:400');

html {
	height: 100%;
}
body {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	font-size: 16px;
	font-family:
		"Quicksand", cursive;
		"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",
		"メイリオ",Meiryo,
		"ＭＳ Ｐゴシック", "MS P Gothic",
		sans-serif;
	color: #333;
	background-color: #839a5c;
	line-height: 1.6;
}
a:link { 
	color: #005c4c; font-weight: normal; text-decoration: none;
}
a:visited {
	color: #005c4c; font-weight: normal; text-decoration: none;
}
a:hover {
	text-decoration: none;
}
h1, h2, h3, h4, p, li, a {
	font-family: "Quicksand";
	color: #333;
}
h2 {
	font-family: "Courgette";
}

.right {text-align: right;display: block;}
.line2 {line-height: 2.5;}
.fuchidori {
  color: #000;
  -webkit-text-stroke: 1px #FFF;
  text-stroke: 1px #FFF;
}

.header_wrapper {
	width: auto;
	height: 100%;
	margin: 8px 8px 0px 8px;
	background-color: #f8f6ef;
	border-radius: 30px 30px 0px 0px;
	box-sizing: border-box;
}

.contents_wrapper {
	margin: 0 8px 0px 8px;
	background-color: #f8f6ef;
	border-radius: 0px 0px 30px 30px;
	box-sizing: border-box;
}

.footer_wrapper {
	width: auto;
	margin: 0px 8px 8px 8px;
	background-color: #f8f6ef00;
	border-radius: 0px 0px 30px 30px;
	box-sizing: border-box;
}

.stripe {
  background: repeating-linear-gradient(-45deg, #ffae00, #ffae00 5px, #fce6ba 5px, #fce6ba 10px);
}

/*===== header ==========================================*/
header#header {
	background-color: #c4c46a80;
	width: 100%;
	height: 1px;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 30;
}
/*--- SmartPhone & tablet ---*/
@media (max-width: 979px){
	header#header {
		height: 0;
	}
}
/*--- PC ---*/
@media (min-width: 980px){
	header#header {
		height: 46px;
	}
}

/*--- SmartPhone Tablet ---*/
@media (max-width: 979px) {
	nav.menu {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		margin: 0 0;
	}
}
/*--- PC ---*/
@media (min-width: 980px) {
	nav.menu {
		width: -webkit-calc(100% - 20px);
		width: calc(100% - 20px);
		height: 40px;
		position: relative;
		margin-top: 5px;
		margin-left: auto;
		margin-right: auto;
	}
}
a#menubutton {
	display: block;
	width: 40px;
	height: 40px;
	position: absolute;
	top: 0px;
	left: -webkit-calc(100% - 63px);
	left: calc(100% - 63px);
	font-size: 0px;
	cursor: pointer;
	background-color: #c4c46a80;
	z-index: 30;
}

/*--- SmartPhone Tablet ---*/
@media (max-width: 979px){
	a#menubutton { display: block; }
}
/*--- PC ---*/
@media (min-width: 980px){
	a#menubutton { display: none; }
}
i.menubars{
	display: inline-block;
	width: 24px;
	height: 2px;
	background-color: #fff;
	box-shadow: 0px -8px #fff, 0px 8px #fff;
	border-radius: 0.1px;
	margin: 19px 8px 0 8px;
	font-size: 0px;
}

ul.menu {
	position: relative;
	clear: both;
	z-index: 20;
}
/*--- SmartPhone Tablet ---*/
@media (max-width: 979px){
	ul.menu {
		display: none;
		width: 100%;
		height: auto;
		margin-top: 40px;
		list-style: none;
		background-color: #fff;
		padding-bottom: 60px;
		border-bottom: 1px solid #ccc;
		position: relative;
	}
}
/*--- PC ---*/
@media (min-width: 980px){
	ul.menu {
		display: block;
		width: 860px;
		height: 100%;
		list-style: none;
		position: relative;
		margin-left: auto;
		margin-right: auto;
	}
}
li.menu { text-align: left; }
a.menu { -webkit-text-size-adjust: none; }


/*--- SmartPhone & Tablet ---*/
@media (max-width: 979px){
	li.menu {
		display: block;
		width: auto;
		height: auto;
	}
	a.menu {
		display: block;
		width: 80%;
		height: 100%;
		font-size: 16px;
		line-height: 1.6;
		padding: 12px 0;
		margin-left: 10%;
		border-bottom: 1px solid #ccc;
	}
	li.menu:hover a.menu { background: #b29649; }
	li.submenu {
		display: block;
		width: auto;
		height: auto;
	}
	li.submenu:hover a.submenu { background: #b29649; }
}
/*--- PC ---*/
@media (min-width: 980px){
	li.menu {
		display: block;
		width: -webkit-calc(100% / 8);
		width: calc(100% / 8);
		height: 100%;
		float: left;
		text-align: center;
	}
	li.menu:first-child {
		margin-left: -webkit-calc((100% / 8 ) / 2);
		margin-left: calc((100% / 8 ) / 2);
	}
	a.menu {
		display: block;
		width: -webkit-calc(100% - 1);
		width: calc(100% - 1);
		height: auto;
		font-size: 16px;
		line-height: 22px;
		padding: 0 0;
		margin: 10px 0 0 0; 
		// border-left: 1px #eee solid;
		color: white;
	}
	li.menu:first-child a.menu { border-left: none; }
	li.menu:hover {
		display: block;
	}

	a.menu {
	  padding-bottom: 5px;
	  position: relative;
	}
	a.menu::before {
	  background: #ff701e;
	  content: '';
	  width: 100%;
	  height: 2px;
	  position: absolute;
	  left: 0;
	  bottom: 0;
	  margin: auto;
	  transform-origin: right top;
	  transform: scale(0, 1);
	  transition: transform .3s;
	}
	a.menu:hover::before {
	  transform-origin: left top;
	  transform: scale(1, 1);
	}

}

/*===== contents ==========================================*/

/*--- Smartphone & Tablet ---*/
@media (max-width: 979px){
	div.logoArea {
		width: 100%;
		height: 100%;
		//margin-top: 40px;
		clear: none;
		position: relative;
		overflow: hidden;
	}
	div#photo1, div#photo2, div#photo3 {
		display: block;
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}
}
/*--- PC ---*/
@media (min-width: 980px){
	div.logoArea {
		width: 100%;
		height: 100%;
		//margin-top: 58px;
		clear: none;
		position: relative;
		overflow: hidden;
	}
	div#photo1, div#photo2, div#photo3 {
		display: block;
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}
}
div.visual_frame {
	width: -webkit-calc(100% - 20px);
	width: calc(100% - 20px);
	height: -webkit-calc(80% - 20px);
	height: calc(80% - 20px);
	margin: 10px 10px; 
	clear: both;
}
div.visual_nonframe {
	width: 100%;
	height: -webkit-calc(80% - 20px);
	height: calc(80% - 20px);
	margin: 0 0; 
	clear: both;
}
div.visual_nonframe:after {
	content: "";
	display: block;
	clear: both;
	visibility: hidden;
}
div.squares {
//	min-height: -webkit-calc(80% - 20px);
//	min-height: calc(80% - 20px);
	height: auto;
}
img.visual_square {
	width: 100%;
	height: auto;
}
/*--- SmartPhone ---*/
@media (max-width: 767px){
	div.visual_square {
		width: 50%;
		min-height: 10px;
		float: left;
		overflow: hidden;
		position: relative;
	}
}
/*--- Tablet ---*/
@media (min-width: 768px) and (max-width: 979px){
	div.visual_square {
		width: -webkit-calc(100% / 3);
		width: calc(100% / 3);
		min-height: 10px;
		float: left;
		overflow: hidden;
		position: relative;
	}
}
/*--- PC ---*/
@media (min-width: 980px){
	div.visual_square {
		width: 25%;
		min-height: 10px;
		float: left;
		overflow: hidden;
		position: relative;
	}
}
div#logo_color {
	border-radius: 30px;
	width: 100%;
	height: 100%;
	position: relative;
	z-index: 10;
}
div#logo {
	border-radius: 30px 30px 0px 0px;
	width: 100%;
	height: 100%;
	background: url(../img/logo.png) center no-repeat;
	background-size: contain;
	background-color: rgba(0,0,0,0.1);
	position: relative;
	z-index: 10;
}
/*--- SmartPhone ---*/
@media (max-width: 767px){
	div#logo_color {
		border-radius: 30px 30px 0px 0px;
		background: url(../img/logo_color.png) center no-repeat;
		background-size: contain;
	}
}
/*--- Tablet&PC ---*/
@media (min-width: 768px){
	div#logo_color {
		border-radius: 30px 30px 0px 0px;
		background: url(../img/logo_color.png) center no-repeat;
		background-size: contain;
	}
}

// ------------ news ---------------------------------
div#newsList {
	width:80%;
}

div#newsList p {
	margin-bottom:16px;
	text-align: left;
}

/*
div#newsList ul {
	padding:0;
}

div#newsList li {
	list-style-type: none;
	line-height:2.0em;
	border-bottom: 1px dotted #ccc;
//	list-style-position: inside;
//	padding-left: 15px;
	text-indent: -1em;
	padding-left: 2em;
}
div#newsList li::before {
	content: "・";
}
*/
div#newsList h4 {
	margin: 0px 20px 20px 10px;
	border-bottom: 1px dotted #ccc;
	height: 1.8em;
}
div#newsList p {
	margin: 0px 20px 20px 20px;
}

div#news h2::after, div#concept h2::after, div#owner h2::after, div#commitment h2::after
,div#menu h2::after, div#access h2::after, div#reservation h2::after, div#sns h2::after {
	display: inline-block;
	content: url(/img/icons/kira.png);
	filter: saturate(50%);
	vertical-align: middle;
	padding-left: 6px;
}

div#news h2::before {
	display: inline-block;
	content: url(/img/icons/news.png);
	filter: sepia(100%);
	transform: scale(-1, 1);
	vertical-align: middle;
	padding-left: 6px;
}
div#concept h2::before {
	display: inline-block;
	content: url(/img/icons/good.png);
	filter: sepia(100%);
	transform: scale(-1, 1);
	vertical-align: middle;
	padding-left: 6px;
}
div#owner h2::before {
	display: inline-block;
	content: url(/img/icons/lady.png);
	filter: sepia(100%);
	vertical-align: middle;
	padding-right: 6px;
}
div#commitment h2::before {
	display: inline-block;
	content: url(/img/icons/hasami.png);
	filter: sepia(100%);
	transform: scale(1, -1);
	vertical-align: middle;
	padding-right: 6px;
	padding-top: 13px;
}
div#menu h2::before {
	display: inline-block;
	content: url(/img/icons/menu.png);
	filter: sepia(100%);
	vertical-align: middle;
	padding-right: 6px;
}
div#access h2::before {
	display: inline-block;
	content: url(/img/icons/map.png);
	filter: sepia(100%);
	vertical-align: middle;
	padding-right: 6px;
}

div#reservation h2::before {
	display: inline-block;
	content: url(/img/icons/note.png);
	filter: sepia(100%);
	vertical-align: middle;
	padding-right: 6px;
}
div#sns h2::before {
	display: inline-block;
	content: url(/img/icons/sns.png);
	filter: sepia(100%);
	transform: scale(-1, 1);
	vertical-align: middle;
	padding-left: 6px;
}

/*--- SmartPhone ---*/
@media (max-width: 767px){
	div#news {
		min-height: 320px
		height: auto;
		position: relative;
		margin-bottom: 100px;
	}
}
/*--- Tablet ---*/
@media (min-width: 768px) and (max-width: 979px){
	div#news {
		min-height: 320px
		height: auto;
		position: relative;
	}
}
/*--- PC ---*/
@media (min-width: 980px){
	div#news {
		min-height: 320px;
		height: auto;
		position: relative;
	}
	div#newsList {
		width:60%;
		margin:auto;
	}
}

/*--- SmartPhone ---*/
@media (max-width: 767px){
	h2#owner {
		letter-spacing: 0.1em;
	}
	
	div.logoArea {
	}
	div#photo1 {
		border-radius: 30px 30px 0px 0px;
		background: url(../img/cover_1_1536.jpg?1) center top no-repeat;
		background-size: cover;
		vertical-align: bottom;
	}
	div#photo2 {
		border-radius: 30px 30px 0px 0px;
		background: url(../img/cover_2_1536.jpg?1) center top no-repeat;
		background-size: cover;
		vertical-align: bottom;
	}
	div#photo3 {
		border-radius: 30px 30px 0px 0px;
		background: url(../img/cover_3_1536.jpg?1) center top no-repeat;
		background-size: cover;
		vertical-align: bottom;
	}
}
/*--- Tablet ---*/
@media (min-width: 768px) and (max-width: 979px){
	div.logoArea {
	}
	div#photo1 {
		border-radius: 30px 30px 0px 0px;
		background: url(../img/cover_1_1536.jpg?1) center top no-repeat;
		background-size: cover;
		background-position: 90% 30%;
		vertical-align: bottom;
	}
	div#photo2 {
		border-radius: 30px 30px 0px 0px;
		background: url(../img/cover_2_1536.jpg?1) center top no-repeat;
		background-size: cover;
		background-position: 80% 100%;
		vertical-align: bottom;
	}
	div#photo3 {
		border-radius: 30px 30px 0px 0px;
		background: url(../img/cover_3_1536.jpg?1) center top no-repeat;
		background-size: cover;
		background-position: 80% 100%;
		vertical-align: bottom;
	}
}

img.footer_img {
	border-radius: 0px 0px 30px 30px;
	width:100%;
}
/*--- PC ---*/
@media (min-width: 980px){
	div.logoArea {
	}
	div#photo1 {
		border-radius: 30px 30px 0px 0px;
		background: url(../img/cover_1_1536.jpg?1) center top no-repeat;
		background-size: cover;
		vertical-align: bottom;
	}
	div#photo2 {
		border-radius: 30px 30px 0px 0px;
		background: url(../img/cover_2_1536.jpg?1) center top no-repeat;
		background-size: cover;
		vertical-align: bottom;
	}
	div#photo3 {
		border-radius: 30px 30px 0px 0px;
		background: url(../img/cover_3_1536.jpg?1) center top no-repeat;
		background-size: cover;
		vertical-align: bottom;
	}
}
div.contents {
	width: 100%;
	width: 100%;
	height: auto;
	position: relative;
}
div.contents.centering {
	text-align: center;
}

div#news, div#menu, div#reservation, div#access, div#concept, div#sns {
	padding-bottom: 0;
	margin-bottom: 0;
	box-sizing: border-box;
}

div#concept{
	padding-bottom: 30px;
	background-color: #fff;
}

div#sns {
	background-color: #fff;
}

div#menu {
	background-color: #f8f5e3;
	overflow: hidden;
}
/*--- SmartPhone ---*/
@media (max-width: 767px){
	div.contents {
		padding: 20px 0px;
	}
	div.contents h2 {
		font-size: 30px;
	}
	div.contents h3 {
		font-size: 16px;
		padding: 0 0 30px 0;
	}
	div.note {
		position: relative;
		width: 100%;
		padding: 0 ;
		margin: 0 0;
	}
	div.note p {
		display: block;
		color: #333;
		padding: 0 0;
		margin: 0 10px;
		font-size:14px;
		text-align: left;
		-webkit-text-size-adjust: none;
	}
}
/*--- Tablet ---*/
@media (min-width: 768px) and (max-width: 979px){
	div.contents {
		padding: 20px 0px;
	}
	div.contents h2 {
		font-size: 35px;
	}
	div.contents h3 {
		font-size: 17px;
		padding: 0 0 35px 0;
	}
	div.note {
		position: relative;
		width: 100%;
		padding: 0 0;
		margin: 0 0;
	}
	div.note p {
		display: block;
		color: #333;
		padding: 0 0;
		margin: 0 0;
		text-align: center;
		-webkit-text-size-adjust: none;
	}
}
/*--- PC ---*/
@media (min-width: 980px){
	div.contents {
		padding: 20px 0px;
	}
	div.contents h2 {
		width: 100%;
		text-align: center;
		font-size: 40px;
		color: #005c4c; //#333;
		padding: 0 0 0 0;
		letter-spacing: 0.2em;
	}
	div.contents h3 {
		width: 100%;
		text-align: center;
		font-size: 18px;
		color: #333;
		padding: 0 0 40px 0;
		letter-spacing: 0.2em;
	}
	div.note {
		position: relative;
		width: 100%;
		padding: 0 0;
		margin: 0 0;
	}
	div.note p {
		display: block;
		color: #333;
		padding: 0 0;
		margin: 0 0;
		text-align: center;
		-webkit-text-size-adjust: none;
	}
}

div#owner {
	padding-bottom: 30px;
	background-color: #faf3eb;
}

/*--- SmartPhone ---*/
@media (min-width: 351px) and (max-width: 767px){
	#ownerbody1 {
		width: 100%;
		height: auto;
		text-align: left;
		overflow: hidden;
		background-color: #fff;

	}
	
	#ownermessage1 {
		background-color: #fff;
		margin: 0 10px;
	}

	#ownerimage1 {
		text-align: right;
	}
	
	#ownerimage1 img {
		vertical-align:top;
		width: 100%;
	}

	#ownermessage1 p {
		font-size: 14px;
		margin: 8px 8px;
		text-align: left;
	}
	

	#ownerbody2 {
		width: 100%;
		height: auto;
		text-align: left;
		overflow: hidden;
		background-color: #fff;

	}
	
	#ownermessage2 {
		background-color: #fff;
		margin: 0 10px;
	}

	#ownerimage2 {
		text-align: right;
	}
	
	#ownerimage2 img {
		vertical-align:top;
		width: 100%;
	}

	#ownermessage2 p {
		font-size: 14px;
		margin: 8px 8px;
		text-align: left;
	}
	


}
/*--- Tablet ---*/
@media (min-width: 768px) and (max-width: 979px){
	#ownerbody1 {
		display: flex;
		position: relative;
		padding: 0 0px;
		margin: 0 auto;
	}

	#ownermessage1 {
		background-color: #fff;
		float: right;
		width: 70%;
	}
	#ownerimage1 {
		float: left;
		text-align: right;
		width: 90%;;
	}
	
	#ownerimage1 img {
		vertical-align:top;
		width: 100%;
	}
	
	#ownermessage1 p {
		margin-top: 10px;
		margin-right: 16px;
		margin-left: -64px;
		text-align: left;
		line-height: 1.3;
	}
	
	#ownerbody2 {
		display: flex;
		position: relative;
		padding: 0 0px;
		margin: 0 auto;
	}

	#ownermessage2 {
		background-color: #fff;
		float: right;
		width: 70%;
	}
	#ownerimage2 {
		float: left;
		text-align: right;
		width: 90%;;
	}
	
	#ownerimage2 img {
		vertical-align:top;
		width: 100%;
	}
	
	#ownermessage2 p {
		margin-top: 10px;
		margin-right: 16px;
		margin-left: -64px;
		text-align: left;
		line-height: 1.3;
	}

}
/*--- PC ---*/
@media (min-width: 980px){
	#ownerbody1 {
		display: flex;
		position: relative;
		padding: 0 40px;
		margin: 0 auto;
	}

	#ownermessage1 {
		background-color: #fff;
		float: right;
		width: 80%;
		margin-right: -10px;
	}
	#ownerimage1 {
		float: left;
		text-align: right;
	}
	
	#ownerimage1 img {
		vertical-align: top;
		width: 100%;
	}
	
	
	#ownermessage1 p {
		margin: 10px 16px;
		text-align: left;
	}

	#ownerbody2 {
		display: flex;
		position: relative;
		padding: 20px 40px;
		margin: 0 auto;
	}

	#ownermessage2 {
		background-color: #fff;
		float: right;
		width: 80%;
		margin-right: -10px;
	}
	#ownerimage2 {
		float: left;
		text-align: right;
	}
	
	#ownerimage2 img {
		vertical-align: top;
		width: 100%;
	}
	
	
	#ownermessage2 p {
		margin: 10px 16px;
		text-align: left;
	}

}

#ownerimage1 .middle { display: block !important; }
#ownerimage1 .large { display: none !important; }
#ownerimage2 .middle { display: block !important; }
#ownerimage2 .large { display: none !important; }


@media only screen and (min-width: 768px) {
    #ownerimage1 .middle { display: none !important; }
    #ownerimage1 .large { display: block !important; }
    #ownerimage2 .middle { display: none !important; }
    #ownerimage2 .large { display: block !important; }
}


div#commitment {
	padding-bottom: 30px;
	background-color: #f6f6f6;
}

/*--- SmartPhone ---*/
@media (min-width: 351px) and (max-width: 767px){

	#commitmentbody {
		position: relative;
		width: 100%;
		height: auto;
		text-align: left;
		overflow: hidden;
		background-color: #faf3eb;

	}

	#commitmentmessage {
		background-color: #f6f6f6;
		background-image: url("/img/henna.jpg");
		background-size: contain;
		background-position: top right;
		background-repeat: no-repeat
	}

	#commitmentmessage p {
		font-size: 14px;
		padding: 8px 8px;
		text-align: left;
		background-color: rgba(255, 255, 255, 0.6);;

	}
	
}
/*--- Tablet ---*/
@media (min-width: 768px) and (max-width: 979px){
	#commitmentbody {
		position: relative;
		padding: 0 0px;
		margin: 0 auto;
	}

	#commitmentmessage {
		background-color: #f6f6f6;
		width: 100%;
		background-image: url("/img/henna.jpg");
		background-position: right;
		background-repeat: no-repeat
	}
	
	#commitmentmessage p {
		margin: 8px 400px 8px 8px;
		text-align: left;
		line-height: 1.3;
	}
	
}
/*--- PC ---*/
@media (min-width: 980px){
	#commitmentbody {
		position: relative;
		padding: 0 40px;
		margin: 0 auto;
	}

	#commitmentmessage {
		background-color: #f6f6f6;
		width: 100%;
		background-image: url("/img/henna.jpg");
		background-position: right;
		background-repeat: no-repeat
	}
	
	#commitmentmessage p {
		margin: 10px 400px 10px 40px;
		text-align: left;
	}

}

#commitmentimage .middle { display: block !important; }
#commitmentimage .large { display: none !important; }

 
@media only screen and (max-width: 1398px) {
    #commitmentimage .middle { display: none !important; }
    #commitmentimage .large { display: block !important; }
}






#menu div.cols {
	float: left;
	width: -webkit-calc(100% - 60px);
	width: calc(100% - 60px);
	height: auto;
	margin: 10px 10px 0px 10px;
	padding: 20px 20px;
	overflow: hidden;
	text-align: left;

	background-color: rgba(255,255,255,0.3);
	border-radius: 20px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
}
#menu div.cols:after {
	content: "";
	display: block;
	clear: both;
	visibility: hidden;
}
p.tax {
	clear: both;
	width: -webkit-calc(100% - 20px);
	width: calc(100% - 20px);
	height: auto;
	margin: 0px 10px 20px 10px;
	color: #333;
	text-align: right;
	-webkit-text-size-adjust: none;
}
/*--- SmartPhone(narrow) ---*/
@media (max-width: 500px){
	#menu div.cols {
		float: left;
		width: -webkit-calc(100% - 20px);
		width: calc(100% - 20px);
		height: auto;
		margin: 0 0;
		padding: 10px 10px;
	}
}
/*--- smartphone(narrow) ---*/
@media (max-width: 350px){
	#menu div.col {
		float: none;
		width: 100%;
	}
	p.tax {
		font-size: 14px;
	}
}
/*--- SmartPhone ---*/
@media (min-width: 351px) and (max-width: 767px){
	#menu div.col {
		float: left;
		width: 100%;
	}
	#menu div.col:first-child {
		margin-left: 0;
	}
	p.tax {
		width: -webkit-calc((100% - 20px)*0.98);	/* Android4.4未満&iOSsafari10未満対応 */
		width: calc((100% - 20px)*0.98);
		height: auto;
		margin: 10px 0 20px 10px;
		font-size: 14px;
	}
}
/*--- Tablet ---*/
@media (min-width: 768px) and (max-width: 979px){
	#menu div.col {
		float: left;
		width: calc(50% - 20px);
		margin-left:40px;
	}
	#menu div.col:first-child {
		margin-left: 0;
	}
	p.tax {
		width: -webkit-calc((100% - 20px)*0.98);	/* Android4.4未満&iOSsafari10未満対応 */
		width: calc((100% - 20px)*0.98);
		height: auto;
		margin: 10px 0 20px 10px;
		font-size: 16px;
	}
}
/*--- PC ---*/
@media (min-width: 980px){
	#menu div.col {
		float: left;
		width: calc(50% - 50px);
		margin-left:100px;
	}
	#menu div.col:first-child {
		margin-left: 0;
	}
}
h4.col {
	width: 100%;
	text-align: center;
	border-bottom: thick double #ffdead;
	color: #333;
	padding: 5px 0;
	background-color: rgba(255,255,255,0.6);
}
ul.col {
	width: 100%;
	height: auto;
	list-style: none;
	padding: 5px 0 30px 0;
}
li.salonmenu {
	display: block;
	position: relative;
	width: 100%;
	min-height: 100%;
	height: auto;
/*	margin-left: 2%;*/
	color: #333;
	padding: 0 0;
}
li.salonmenu.asta {
	margin-top: 16px;
}
span.price {
	position: relative;
	width: 30%;
	float: right; 
}
li.salonmenu:after {
	width: 100%;
	content: "";
	display: block;
	clear: both;
	visibility: hidden;
}
img.photo {
	width: 100%;
	height: auto;
	margin: 0 0;
	padding: 0 0;
}
/*--- SmartPhone ---*/
@media (max-width: 767px){
	div.colwrapper {
		position: relative;
		width: -webkit-calc(100% - 30px);
		width: calc(100% - 30px);
		height: 195px;
		padding: 0 0;
		margin: 0 15px;
		overflow: hidden;
	}
	h4.col {
		font-size: 14px;
	}
	li.salonmenu {
		font-size: 12px;
		margin-left: 12px;
	}
	span.price {
		width: 120px;
	}
}
/*--- Tablet ---*/
@media (min-width: 768px) and (max-width: 979px){
	div.colwrapper {
		position: relative;
		width: -webkit-calc(100% - 40px);	/* Android4.4未満&iOSsafari10未満対応 */
		width: calc(100% - 40px);
		height: 266px;	/* fontsize14px×19文字 */
		padding: 0 0;
		margin: 0 20px;
		overflow: hidden;
	}
	h4.col {
		font-size: 16px;
	}
	li.salonmenu {
		font-size: 14px;
		margin-left: 14px;
	}
	span.price {
		width: 38%;
	}
}
/*--- PC ---*/
@media (min-width: 980px){
	div.colwrapper {
		position: relative;
		width: -webkit-calc(100% - 50px);
		width: calc(100% - 50px);
		height: 304px;
		padding: 0 0;
		margin: 0 25px;
		overflow: hidden;
	}
	h4.col {
		font-size: 18px;
	}
	li.salonmenu {
		font-size: 15px;
		margin-left: 15px;
	}
	span.price {
		width: 35%;
	}
}
a.map {
	display: inline-block;
	width: auto;
	line-height: 40px;
	font-size: 18px;
	color: #333;
	border: 1px #333 solid;
	margin: 20px 0 50px 0;
	padding: 0 20px 5px 20px;
	border-radius: 30px; 
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
}
a.reserve {
	display: inline-block;
	width: auto;
	line-height: 40px;
	font-size: 18px;
	color: #333;
	border: 1px #333 solid;
	margin: 8px 0 50px 0;
	padding: 0 20px 5px 20px;
	border-radius: 30px;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
}
div#scrollback {
	position: fixed;
	width: 100px;
	height: 100px;
	top: -webkit-calc(100% - 180px);
	top: calc(100% - 180px);
	left: -webkit-calc(100% - 120px);
	left: calc(100% - 120px);
	border-radius: 50px;
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	background-color: rgba(0,0,0,0.3);
	cursor: pointer;
}
div#scrollback:hover {
	background-color: rgba(0,0,0,0.6);
}
span.arrow {
	position: absolute;
	width: 40px;
	height: 40px;
	border-left: 2px solid rgba(255,255,255,0.6);
	border-top: 2px solid rgba(255,255,255,0.6);
	top: 40px;
	left: 30px;
	transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-ms-transform: rotate(45deg)
}
div#scrollback:hover span.arrow {
	border-left: 2px solid rgba(255,255,255,0.5);
	border-top: 2px solid rgba(255,255,255,0.5);
}
/*--- SmartPhone ---*/
@media (max-width: 767px){
	a.map, a.reserve {
		line-height: 40px;
		font-size: 16px;
	}
	div#scrollback {
		position: fixed;
		width: 60px;
		height: 60px;
		top: -webkit-calc(100% - 70px);
		top: calc(100% - 70px);
		left: -webkit-calc(100% - 70px);
		left: calc(100% - 70px);
		border-radius: 30px;
		-webkit-border-radius: 30px;
		-moz-border-radius: 30px;
		cursor: pointer;
	}
	span.arrow {
		position: absolute;
		width: 24px;
		height: 24px;
		top: 24px;
		left: 18px;
		transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
		-o-transform: rotate(45deg);
		-ms-transform: rotate(45deg)
	}
}

div.snsicon, div.shareicon {
	margin-bottom: 20px;
}

div.snsicon h4{
	margin-top: 20px;
	margin-bottom: 10px;
}

div.snsicon a {
	margin: 0px 6px;
}
a.snsicon img {
	//width: 80px;
}

div.shareicon h4{
	margin-bottom: 10px;
}
div.shareicon span {
	display: inline-block;
	margin: 0px 6px;
	height: 40px;
	line-height: 50%;
}

/*===== footer ==========================================*/


p.copyright {
	background-color: #ffffffa0;
	
	display: inline-block;
	width: auto;
	font-size: 18px;
	color: #333;
	border: 1px #fff solid;
	margin: 2px 0;
	padding: 0 6px;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
}


/*--- SmartPhone ---*/
@media (max-width: 767px){
}

/*--- Tablet ---*/
@media (min-width: 768px) and (max-width: 979px){
}

/*--- PC ---*/
@media (min-width: 980px){
}