@charset "utf-8";

/*------------------------------------------------------------
	ベースライン
------------------------------------------------------------*/

div#wrapper {
	overflow:hidden;
}


h1 {
	font-size:22px;
	font-family:'Futura Plus W08 Cd Light Obl';
	text-align:center;
	margin-bottom:10px;
}

h2 {
	width:96%;
	max-width:424px;
	margin:0 auto;
	font-size:10px;
}

h3 {
	font-size:16px;
}

h4 {
	font-size:16px;
}

h5 {
	font-size:13px;
}

h6 {
	font-size:13px;
}

p.txt01 {
	line-height:1.8;
	color:#444;
}


/*------------------------------------------------------------
	現在表示店舗（storeLink。ヘッダーとフッターに表示）
------------------------------------------------------------*/

ul.storeLink {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

ul.storeLink li.storeLinkItem {
	width: 340px;
}

ul.storeLink li.storeLinkItem:nth-of-type(n+3) {
	margin-top: 24px;
}

ul.storeLink li.storeLinkItem a {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 3px 0 2px;
	width: 100%;
	border: 1px solid #CAC3B1;
	box-sizing: border-box;
	text-decoration: none;
	-webkit-transition: 0.3s ease-in-out;
	   -moz-transition: 0.3s ease-in-out;
		 -o-transition: 0.3s ease-in-out;
			transition: 0.3s ease-in-out;
}

ul.storeLink li.storeLinkItem a span {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 18px;
	font-family:'Futura W01 Medium';
	color: #CAC3B1;
	text-shadow: none;
	-webkit-transition: 0.3s ease-in-out;
	   -moz-transition: 0.3s ease-in-out;
		 -o-transition: 0.3s ease-in-out;
			transition: 0.3s ease-in-out;
}

ul.storeLink li.storeLinkItem:not(.active) a span:after {
	 font-size: 11px;
	 font-family: "fontawesome";
   content: "\f077";
   transform: rotate(90deg);
   margin-left: 16px;
}

ul.storeLink li.storeLinkItem.active a {
	background-color: #CAC3B1;
}

ul.storeLink li.storeLinkItem:hover a {
	background-color: #CAC3B1;
	-webkit-transition: 0.3s ease-in-out;
	   -moz-transition: 0.3s ease-in-out;
		 -o-transition: 0.3s ease-in-out;
			transition: 0.3s ease-in-out;
}

ul.storeLink li.storeLinkItem.active a span {
	color: #2B1F0F;
}

ul.storeLink li.storeLinkItem:hover a span {
	color: #2B1F0F;
	-webkit-transition: 0.3s ease-in-out;
	   -moz-transition: 0.3s ease-in-out;
		 -o-transition: 0.3s ease-in-out;
			transition: 0.3s ease-in-out;
}

#currentNavi {
	width: 1044px;
  margin-top: 11px;
  margin-bottom: 32px;
  margin-left: auto;
  margin-right: auto;
}

#currentNavi .storeLink {
	justify-content: flex-start;
	margin-left: -12px;
}

#currentNavi .storeLink .storeLinkItem {
	margin-left: 12px;
}

#currentNavi .storeLink .storeLinkItem:nth-of-type(3) {
	margin-top: 0;
}

#currentNavi .storeLink .storeLinkItem:nth-of-type(n+4) {
	margin-top: 12px;
}

@media only screen and (max-width: 641px) {
	#currentNavi {
		width: calc((335/375)*100%);
	  margin-top: 24px;
	  margin-bottom: 24px;
	  margin-left: auto;
	  margin-right: auto;
	}

	#currentNavi .storeLink {
		justify-content: flex-start;
		margin-left: 0;
	}

	#currentNavi .storeLink .storeLinkItem {
		width: 100%;
		margin-left: 0;
	}

	#currentNavi .storeLink .storeLinkItem:nth-of-type(n+2) {
		margin-top: 8px;
	}
}


/*------------------------------------------------------------
	ヘッダー
------------------------------------------------------------*/

header {
	width:100%;
	height:60px;
	box-sizing:border-box;
}

header div#inner_head {
	width:94%;
	height:65px;
	box-sizing:border-box;
	margin:0 auto;
	position:relative;
	padding-top:15px;
}

header div#inner_head p.siteID {
	width:123px;
}

header div#inner_head p.siteID a {
	display:block;
	width:123px;
	height:40px;
	background:url(../img/logo_hawaii.png) left top no-repeat;
	background-size:123px 40px;
	text-indent:-9999px;
}


nav#pcMenu {
	display:none;
}


header div#inner_head form {
	display:none;
}

p.menuBtn a {
	font-size:14px;
	position:absolute;
	top:18px;
	right:3%;
	display:block;
	width:20px;
	height:20px;
	text-decoration:none;
}

p.menuBtn a:before {
	 font-family: "fontawesome";
	 content: "\f0c9";
	 font-size:18px;
}

p.languageBtn {
	position:absolute;
	top:20px;
	right:45px;
}


p.languageBtn a {
	font-weight:bold;
	font-size:14px;
}


ul.snsBtn {
	position: absolute;
	top: 18px;
	right: 108px;
}

ul.snsBtn li {
	display: inline-block;
	margin: 0 0 0 8px;
}

ul.snsBtn li a {
	font-size: 16px;
	color: #000;
}



.customSelect { 
/* This is the default class that is used */
/* Put whatever custom styles you want here */
	background:url(../img/bg_select.png) left top no-repeat;
	width:120px;
	height:26px;
	color:#fff;
	box-sizing:border-box;
	line-height:20px;
}

.customSelect.customSelectHover {
/* Styles for when the select box is hovered */
}

.customSelect.customSelectOpen {
/* Styles for when the select box is open */
}

.customSelect.customSelectFocus {
/* Styles for when the select box is in focus */
}

.customSelectInner {
/* You can style the inner box too */
	font-size:11px;
	padding:3px 0 0 35px;
}

div#floatNavi {
	display:none;
}

/*------------------------------------------------------------
	レイアウト
------------------------------------------------------------*/

div#container {
	width:100%;
	margin:0 auto;
}

div#container div.contents {
	clear:both;
	width:96%;/*１．コンテンツの幅を指定*/
	margin:2% auto 4%;
}

div.grid {
	float:left;
}

/*------------------------------------------------------------
	パンくず
------------------------------------------------------------*/
ul.breadcrumb {
	margin-bottom:20px;
}

ul.breadcrumb li {
	float:left;
}

ul.breadcrumb li:after {
	content:">";
	margin:0 1em;
}

/*------------------------------------------------------------
	RESPONSIVE GRID
------------------------------------------------------------*/

div.fullwidth,
div.one_half,
div.one_half_end,
div.one_third,
div.one_third_end {
	width:100%;
}

div.one_fourth,
div.one_fourth_end {
	width:100%;
}

div.one_fourth,
div#side_main div.one_fourth {
	margin-right:2%;
	margin-bottom:20px;
}

div.one_fourth:nth-child(2n+1) {
	margin-right:0;
}

div#side_main div.one_fourth:nth-child(2n) {
	margin-right:0;
}

div.two_third,
div.two_third_end {
	width:100%;
}

div.one_fifth,
div.one_fifth_end {
	width:50%;
}

div.one_fifth_end {
	margin-bottom:10px;
}

/*div.one_fifth,
div#side_main div.one_fifth {
	margin-right:2%;
}

div.one_fifth:nth-child(2n+1),
div#side_main div.one_fifth:nth-child(2n) {
	margin-right:0;
}*/

div.two_fifth,
div.two_fifth_end,
div.three_fifth,
div.three_fifth_end {
	width:100%;
}


/*------------------------------------------------------------
	2カラム（サイドナビ有り）
------------------------------------------------------------*/


div#side_left {
	display:none;
	/*↓2行 テンプレ判別用 実際には不要*/
	background:#3BC9B4;
}
div#side_main {
	width:100%;
	/*↓2行 テンプレ判別用 実際には不要*/
	background:#DBD2F0;
}


div#side_right {
	display:none;
	/*↓2行 テンプレ判別用 実際には不要*/
	background:#3BC9B4;
}



/*------------------------------------------------------------
	メインビジュアル（見出しエリア）
------------------------------------------------------------*/

div.mainVis {
	background:url(../img/bg_main2.jpg) center top no-repeat;
	width:100%;
	box-sizing:border-box;
	padding-top:10px;
	position:relative;
}

div.mainVis img {
	max-width:100%;
	height:auto;
	margin-bottom:-6px;
}

div.mainVis div.mainCopy {
	width:94%;
	margin:0 auto;
}

div#container div.contents {
	padding:20px 0 10px;
}


/*------------------------------------------------------------
	フッター
------------------------------------------------------------*/

nav#spMenu {
	margin:0 3%;
	margin-bottom:40px;
	border-top:1px solid #CDC6B4;
	padding-top:40px;
}

nav#spMenu ul li {
	margin-bottom:2px;
	background:#CDC6B4;
	padding:0 10px;
	line-height:40px;
	text-decoration:none;
	position:relative;
}

nav#spMenu ul li a {
	display:block;
	text-decoration:none;
		font-size: 12px;
	font-family:'Futura W01 Medium';
	color:#fff;
}

nav#spMenu ul li a:after {
	 font-family: "fontawesome";
	 content: "\f105";
	 position:absolute;
	 right:10px;
}

div#pageTop {
	background:#CAC3B1;
	background:url(../img/bg_pagetop.png) left top repeat-x;
	text-align:center;
	height:50px;
	box-sizing:border-box;
	padding:12px 0;
}

div#pageTop a {
	display:block;
	font-family:'Futura W01 Medium';
	color:#fff;
	text-decoration:none;
}

div#pageTop a:before {
	 font-family: "fontawesome";
	 content: "\f077";
	 padding-right:10px;
}

footer {
	width:100%;
	background:#ECE8E2;
	background:url(../img/bg_footer.png) left top repeat;
	padding-bottom:20px;
	text-shadow:1px 1px 1px #fff;
}

footer div.footInner {
	width:96%;
	padding:10px 3% 20px;
	overflow:hidden;
	text-align:center;
}

/*footer div.footInner img.logo {
	padding-top:20px;
}*/

footer div.footInner dl dt {
	font-size:13px;
	font-family:'Futura W01 Medium';
	margin-bottom:5px;
}

footer div.footInner dl dt#footLocation:before {
	 font-family: "fontawesome";
	 content: "\f041";
	 padding-right:7px;
}

footer div.footInner dl dt#footContact:before {
	 font-family: "fontawesome";
	 content: "\f095";
	 padding-right:7px;
}

footer div.footInner dl dt#footHours:before {
	 font-family: "fontawesome";
	 content: "\f017";
	 padding-right:7px;
}

footer div.footInner dl dt#footSalons {
	 display: flex;
	 align-items: center;
}

footer div.footInner dl dt#footSalons:before {
	 display: block;
	 content: "";
	 margin-right:7px;
	 width: 11px;
	 height: 9px;
	 background: url(../img/icon-shop.svg);
	 background-repeat: no-repeat;
	 background-size: contain;
	 background-position: center;
	 box-sizing: border-box;
}

footer div.footInner dl dd {
	font-size:12px;
	line-height:1.8;
	margin-top: 24px;
}

footer div.footInner div.footInnerLinks {
	margin-top: 28px;
}

footer div.footInner ul.socialLinks {
	width:192px;
	margin:10px auto 0;
}

footer div.footInner ul.socialLinks li {
	background:#D0CAB9;
	font-size:18px;
	color:#fff;
	text-shadow:none;
	text-align:center;
	border-radius:50%;
	float:left;	
	margin:0 5px;
}

footer div.footInner ul.socialLinks a li {
	display:block;
	width:38px;
	height:38px;
	box-sizing:border-box;
	padding-top:5px;
}

footer div.footInner ul.socialLinks a li:hover {
	background:#2B1F0F;
	-webkit-transition: 0.3s ease-in-out;
	   -moz-transition: 0.3s ease-in-out;
		 -o-transition: 0.3s ease-in-out;
			transition: 0.3s ease-in-out;
}

footer div.footInner ul.socialLinks li.btnGoogle:before {
	 font-family: "fontawesome";
	 content: "\f0d5";
	 padding-top:2px;
}

footer div.footInner ul.socialLinks li.btnFacebook:before {
	 font-family: "fontawesome";
	 content: "\f09a";
}

footer div.footInner ul.socialLinks li.btnInsta:before {
	 font-family: "fontawesome";
	 content: "\f16d";
}

footer div.footInner ul.socialLinks li.btnTwitter:before {
	 font-family: "fontawesome";
	 content: "\f099";
}

footer div.footInner div.footCopyright address {
	font-size: 11px;
}

footer div.footInner h5 {
	font-size:11px;
	padding:20px;
}

/*確認後削除 20220428

footer div.footInner ul.socialBtn li {
	margin:5px;
	padding-top:5px;
	float:left;
}

footer div.footInner ul.socialBtn li.twitter {
	width:88px;
	overflow:hidden;
}
*/

/*footer div#footerTop {
	border-bottom:1px solid #CFCBB8;
}

footer div#footerMiddle {
	border-top:1px solid #fff;
	border-bottom:1px solid #CFCBB8;
}*/

footer div#footerBottom {
	border-top:1px solid #fff;
	text-align:center;
	padding:30px 0;
}
footer div#footerBottom address {
	font-size:11px;
	font-family:'Futura W01 Medium';
}

footer div#footerTop div.one_fourth #footLocation,
footer div#footerTop div.one_fourth #footContact,
footer div#footerTop div.one_fourth_end #footHours,
footer div#footerMiddle div.one_fourth #footSalons {
	padding-bottom: 12px;
	border-bottom:1px solid #CFCBB8;
}

footer div#footerTop span.footLocationName {
	display: block;
	font-size: 16px;
	font-family:'Futura W01 Medium';
	margin-bottom: 14px;
}

footer div#footerMiddle ul.storeLink {
	/*display: flex;
	justify-content: space-between;
	flex-wrap: wrap;*/
}
footer div#footerMiddle ul.storeLink li.storeLinkItem {
	
}

@media only screen and (max-width: 641px) {

	.vis-pc {
		display: none;
	}

	footer div#footerTop,
	footer div#footerMiddle {
		padding-left: 5.3%;
    padding-right: 5.3%;
	}

	footer div.footInner {
		width: 100%;
		padding-top: 48px;
		padding-left: 0;
		padding-right: 0;
	}
	
	footer div.footInner p.footHeadTxt {
		margin-top: 24px;
	}

	footer #footerTop div.footInner div.one_fourth:nth-of-type(2) {
		margin-top: 48px;
	}

	footer #footerTop div.footInner div.one_fourth:nth-of-type(3),
	footer #footerTop div.footInner div.one_fourth_end {
		margin-top: 48px;
	}

	footer #footerTop div.footInner div.one_fourth img.logo {
		margin: 0 auto;
	}

	footer div#footerTop div.one_fourth #footLocation, 
	footer div#footerTop div.one_fourth #footContact, 
	footer div#footerTop div.one_fourth_end #footHours, 
	footer div#footerMiddle div.one_fourth #footSalons {
		padding-bottom: 4px;
	}

	footer div.footInner dl dt#footSalons {
		display: flex;
		justify-content: center;
	}

	footer div.footInner div.footInnerLinks {
		margin-bottom: 38px;
	}

	footer #footerMiddle div.footInner {
		display: flex;
	  flex-direction: column-reverse;
	}

	footer div#footerMiddle ul.storeLink li.storeLinkItem {
		width: 100%;
	}

	footer div#footerMiddle ul.storeLink li.storeLinkItem:nth-of-type(n+2) {
		margin-top: 8px;
	}

	footer div.footInner ul.socialLinks {
		display: flex;
		justify-content: center;
		margin-top: 28px;
	}

	footer div.footInner div.footCopyright {
		margin-top: 24px;
	}
	
}

/*------------------------------------------------------------
	フッターフロート
------------------------------------------------------------*/

#footerMenu {
  width: 100%;
  height: 0px;
  z-index: 300;
  overflow: none;
  position: fixed;
  bottom: 0;
  left: 0;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
}

#footerMenu.show {
  height: 40px;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
}

#footerMenu div {
	background: rgba(72,58,39,0.85);
	width: 50%;
	text-align: center;
	float: left;
	border-right: 1px solid #483A27;
	box-sizing: border-box;
}

#footerMenu div:last-child {
	border-right: 0;
}

#footerMenu div a {
	display: block;
  font-size: 11px;
  font-weight: bold;
	color: #fff;
	line-height: 42px;
	text-decoration: none;
}
	
#footerMenu div.w50 {
	width: 50%;
}

#footerMenu div.w15 {
	width: 12%;
}


/*	--------------------------------------------------
	Reveal Modals
	-------------------------------------------------- */
	
	
	.reveal-modal-bg { 
		position: fixed; 
		height: 100%;
		width: 100%;
		background: #000;
		background: rgba(0,0,0,.8);
		z-index: 100;
		display: none;
		top: 0;
		left: 0; 
		}
	
	.reveal-modal {
		visibility: hidden;
		top: 30px; 
		left: 50%;
		margin-left: -135px;
		width: 270px;
		background: #fff;
		position: absolute;
		z-index: 101;
		padding: 38px 0 0;
		}		
		.reveal-modal ul li {
			border-bottom:1px solid #CDC6B4;
			line-height:40px;
			padding-left:10px;
			position:relative;
	font-family:'Futura W01 Medium';
		}
		
		.reveal-modal ul li a {
			display:block;
			text-decoration:none;
		}
		
		.reveal-modal ul li a:after {
	 font-family: "fontawesome";
	 content: "\f105";
	 position:absolute;
	 right:10px;
		}
		
	.reveal-modal.small 		{ width: 200px; margin-left: -140px;}
	.reveal-modal.medium 		{ width: 400px; margin-left: -240px;}
	.reveal-modal.large 		{ width: 600px; margin-left: -340px;}
	.reveal-modal.xlarge 		{ width: 800px; margin-left: -440px;}
	
	.reveal-modal .close-reveal-modal {
		font-size: 11px;
	font-family:'Futura W01 Medium';
		position: absolute;
		color:#fff;
		top: 8px;
		right: 11px;
		padding:5px 10px;
		text-decoration:none;
		background:#CDC6B4;
		cursor: pointer;
		} 
	/*
		
	NOTES
	
	Close button entity is ×
	
	Example markup
	
	<div id="myModal" class="reveal-modal">
		<h2>Awesome. I have it.</h2>
		<p class="lead">Your couch.  I it's mine.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ultrices aliquet placerat. Duis pulvinar orci et nisi euismod vitae tempus lorem consectetur. Duis at magna quis turpis mattis venenatis eget id diam. </p>
		<a class="close-reveal-modal">&#215;</a>
	</div>
	
	*/