@charset "utf-8";
/* CSS Document */

/* 
------------------------------
リセットCSS
------------------------------
*/	
html{
	font-size: 62.5%;/* ルートのフォントサイズ10px */
} 
body{
	font-size:14px;
	font-size:1.4em;/* 14px*/
	line-height:1.5;
}	
body{
	width:100%;
	margin:0;
	padding:0;
	letter-spacing:0.05em;
	color:#666;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

body{
	/*スマホで勝手に文字が大きくなる対策*/
	-webkit-text-size-adjust: 100%; 
} 
body img{border:0;}

/* ウィンドウサイズに合わせて画像サイズを自動で伸縮させる */
img,iframe{
	max-width:100%;
	height:auto;
}
/* ウィンドウサイズに合わせて画像サイズを自動で伸縮させる */
 

ul,ol{
	list-style:none;
	margin:0;
	padding:0;
}

p{
	margin:0;
	padding:0;
}
p.indent{
	padding-left:1em;
	text-indent:-1em;
}

/*リンク画像透明*/
a:hover img{
	opacity:0.7;
	filter:alpha(opacity=70);
	-ms-filter: "alpha(opacity=70 )";
	background:#FFF;
}
/*リンク画像透明*/

/*リンク下線有り*/
a{text-decoration:underline;}
/*リンク下線有り*/

/*リンク色*/
a:link{color:#0033cc;/*デフォルト*/}
/*リンク色*/

/*リンクhover時下線*/
a:hover{text-decoration:none !important;} 
/*リンクhover時下線*/

/* リンク画像の右側に＞ */
.arrow {
	position: relative;
	text-decoration: none;
}
.arrow::after {
	content: '';
	display: block;
	width: 6px; /* 矢印の大きさの指定 */
	height: 6px; /* 矢印の大きさの指定 */
	border-top: 2px solid #0000ff; /* 矢印の太さの指定 */
	border-left: 2px solid #0000ff; /* 矢印の太さの指定 */
  transform: rotate(135deg); /* 矢印の角度の指定 */
	position: absolute; /* 矢印の位置の指定 */
}
/* リンク画像の右側に＞ */


/* ---ClearFix--- */ 
.clearfix:after{
	content: ".";
	display: block;
	 height: 0px;
	 clear: both;
	 visibility: hidden; 
} 
.clearfix{
	display: inline-block;
} 
/* Hides from IE Mac \*/ 
* html .clearfix{
	height: 1px; 
} 
.clearfix{
    display: block;
} 
/* ---ClearFix--- */

/*float解除*/
.clear{
	clear:both;
	font-size: 1.0rem;
	line-height: 0;
}   
/*float解除*/

.bold{font-weight:bold;}
.red{color:#F00;}
.blue{color:#00F;}
.green{color:#0C0;}
.yellow{color:#FF0;}

.underline{text-decoration: underline;}

/*width*/
.width-98{
	width: 98% !important;
	margin: auto;
}
.width-96{
	width: 96% !important;
	margin: auto;
}
.width-95{
	width: 95% !important;
	margin: auto;
}
.width-94{
	width: 94% !important;
	margin: auto;
}
.width-92{
	width: 92% !important;
	margin: auto;
}
.width-90{
	width: 90% !important;
	margin: auto;
}
.width-88{
	width: 88% !important;
	margin: auto;
}
.width-85{
	width: 85% !important;
	margin: auto;
}
.width-80{
	width: 80% !important;
	margin: auto;
}
/*width*/

/*下margin*/
.margin-bottom1{
	margin-bottom:1% !important;
}
.margin-bottom2{
	margin-bottom:2% !important;
}
.margin-bottom3{
	margin-bottom:3% !important;
}
.margin-bottom4{
	margin-bottom:4% !important;
}
.margin-bottom5{
	margin-bottom:5% !important;
}
.margin-bottom10{
	margin-bottom:10% !important;
}
/*下margin*/

/*line-height*/
.line-height11{
	line-height:1.1 !important;
}
.line-height12{
	line-height:1.2 !important;
}
.line-height13{
	line-height:1.3 !important;
}
.line-height14{
	line-height:1.4 !important;
}
.line-height15{
	line-height:1.5 !important;
}
/*line-height*/
/* 
------------------------------
リセットCSS
------------------------------
*/


/* ▼ヘッダー▼ */
header{
  display: flex;
  align-items: center;
	width: 100%;
	margin: 0 auto 0 auto;
	padding: 0;
}
p#top-logo{
  width: 49%;
  min-width: 120px;
  margin: 0 6% 0 0;
	padding: 0;
}
ul#header-yoyaku{
  display: flex;
  width: 44%;
	margin: 0 1% 0 0;
	padding: 0;
}
ul#header-yoyaku li{
  margin: 0;
  padding: 0;
}
/* ▲ヘッダー▲ */

/* ▼パンくず▼ */
#pankuzu{
  background-color: #F1F1F1;
	width:100%;
	margin:0 auto 0 auto;
	padding:1.5% 0 1.5% 0;
	font-size: 1.0rem;
	letter-spacing: 0;
  color: #666;
}
#pankuzu ol{
	margin:0 2% 0 1%;
	padding:0;
	list-style:none;
}
#pankuzu li{
	display:inline;
	margin:0;
	padding:0;
}
/* ▲パンくず▲ */

/* ▼メイン▼ */
main{
	width: 100%;
	margin: 0 auto 10% auto;
	padding: 0;
}
#title-box{
  width: 90%;
  margin: 0 auto 2% auto;
	padding: 2%;
  border-top: 1px solid #CCC;
  border-right: 2px solid #CCC;
  border-bottom: 2px solid #CCC;
  border-left: 1px solid #CCC;
  border-radius: 8px;
}
#title-box h1{
  width: 94%;
  margin: 0 auto 2% auto;
  padding: 0;
  font-size: 1.3rem;
}
#title-box p{
  width: 94%;
  margin: 0 auto 0 auto;
  padding: 0;
  font-size: 1.2rem;
}

.yoyaku{
  display: flex;
  align-items: center;
	width: 90%;
	margin: 2% auto 3% auto;
	padding: 0;
}
.yoyaku .left-yoyaku{
	width: 60%;
	margin: 0 auto 0 auto;
	padding: 0;
  text-align: center;
}
.yoyaku .left-yoyaku p{
  margin: 0;
	padding: 0;
  font-size: 1.1rem;
  line-height: 1.8em;
  display: inline-block;
  text-align: left;
}
.yoyaku .left-yoyaku p.line-text{
  margin: 0 0 0 0;
	padding: 0;
  font-size: 1.4rem;
  font-weight: bold;
  letter-spacing: 0;
  color: #039C14;
  display: block;
  text-align: center;
}
.yoyaku .left-yoyaku p.telephone-text{
  margin: 0 0 0 -1%;
	padding: 0;
  font-size: 1.4rem;
  font-weight: bold;
  letter-spacing: 0;
  color: #666;
  display: block;
  text-align: center;
}
.yoyaku .left-yoyaku p.discount-text{
  margin: 0 0 0 -1%;
	padding: 0;
  font-size: 1.4rem;
  font-weight: bold;
  letter-spacing: 0;
  color: #F00;
  display: block;
  text-align: center;
}
.yoyaku .left-yoyaku p.discount-text2{
  width: 90%;
  margin: 0 auto 0 auto;
	padding: 0;
  font-size: 1.1rem;
  line-height: 1.8em;
  color: #F00;
  display: inline-block;
  text-align: left;
}

.yoyaku .right-yoyaku{
	width: 40%;
	margin: 0 auto 0 auto;
	padding: 0;
}
.yoyaku .right-yoyaku p{
	width: 100%;
	margin: 0;
	padding: 0;
}
#shop{
  width: 96%;
  margin: 5% auto 5% auto;
}
#shop #left-box{
	width: 100%;
  margin: 0 auto 0 auto;
  text-align: center;
}
#shop #left-box p#nail-parking{
  width: 50%;
  margin: 0 auto 0 auto;
}
#shop #left-box p#address{
  margin: 0 auto 3% auto;
	font-size: 1.4rem;
  line-height: 1.6em;
  display: inline-block;
  text-align: left;
}
#shop #left-box p#shop-youtube{
  width: 96%;
  margin: 0 auto 5% auto;
  padding: 0;
  font-size: 1.2rem;
}
#shop #right-box{
	width: 100%;
  margin: 0 0 4% 0;
}
#shop #right-box #map{
	position: relative;
	width: 99%;
	padding-top: 56.25%;
	margin: 0 auto 0 auto;
	overflow:auto;
	border:1px solid #ccc;
}
#shop #right-box #map iframe{
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	border:none;
  display:block;
}

h2{
	background-color: #FF159D;
  width: 94%;
	margin: 5% auto 0 auto;
	padding: 2% 2% 2% 2%;
	font-size: 1.4rem;
	line-height: 1.5em;
	color: #FFF;
}
#explanation-text{
  width: 89.3%;
	margin: 0 auto 2% auto;
	padding: 4% 4% 4% 4%;
  font-size: 1.2rem;
  line-height: 1.8em;
  border-right: 1px solid #F859B6;
  border-bottom: 1px solid #F859B6;
  border-left: 1px solid #F859B6;
}

/* ▲メイン▲ */

/* ▼フッター▼ */
footer{
  background-color: #A78B75;
  margin: 0;
  padding: 0;
  color: #FFFFFF;
}
p#footer-logo{
  width: 33%;
  min-width: 200px;
  margin: 0 auto 0 auto;
  padding: 0;
  text-align: center;
}
footer ul{
  width: 100%;
  margin: 0 auto 5% auto;
  padding: 0;
  border-bottom: 1px solid #FFFFFF;
}
footer ul li{
	width: 100%;
  height: 40px;
	margin: 0;
	padding: 0;
  font-size: 1.2rem;
  line-height: 40px;
  border-top: 1px solid #FFFFFF;
}
/* リンク画像の右側に＞ */
ul .arrow {
	position: relative;
}
ul .arrow::after {
	content: '';
	display: block;
	width: 6px; /* 矢印の大きさの指定 */
	height: 6px; /* 矢印の大きさの指定 */
	border-top: 2px solid #FFFFFF; /* 矢印の太さの指定 */
	border-left: 2px solid #FFFFFF; /* 矢印の太さの指定 */
}
ul .arrow-right::after {
	transform: rotate(135deg); /* 矢印の角度の指定 */
	position: absolute; /* 矢印の位置の指定 */
	right: 4%; /* 矢印の位置の指定 */
	top: 50%; /* 矢印の位置の指定 */
  margin-top: -3px;
}
/* リンク画像の右側に＞ */

footer ul li a{
  display: block;
  width: 90%;
  height: 40px;
  padding: 0 5% 0 5%;
  color: #FFF;
}
footer ul li a:link{
	color: #FFFFFF;
}
footer ul li a:hover{
	background: #AC8E77;
	color: #EDEDED;
}
footer ul li a:visited{
	color: #FFFFFF;
}
p#copyright{
	width: 100%;
	margin:0;
	padding:1%;
	text-align:center;
	font-size:1.0rem;
}
/* ▲フッター▲ */





/* 
------------------------------
------------------------------
▼320px～350px用の記述▼
------------------------------
------------------------------
*/
 @media screen and (min-width: 320px) and (max-width: 350px){

}
/* 
------------------------------
------------------------------
▲320px～350px用の記述▲
------------------------------
------------------------------
*/





/* 
------------------------------
------------------------------
▼560px以上用（タブレット／PC用）の記述▼
------------------------------
------------------------------
*/
 @media screen and (min-width : 560px ){

/* 
------------------------------
リセットCSS
------------------------------
*/
html{
	font-size: 62.5%;/* ルートのフォントサイズ10px */
} 
body{
	font-size:1.6em;/* 16px*/
	line-height:1.5;
}
	
body{
	width:1080px;
  margin:0 auto 0 auto;
	letter-spacing:0.1em;
}

/*リンク下線無し*/
a{text-decoration:none;}
/*リンク下線無し*/

/*リンクhover時下線*/
a:hover{text-decoration:underline !important;} 
/*リンクhover時下線*/
/* 
------------------------------
リセットCSS
------------------------------
*/




/* ▼パンくず▼ */
#pankuzu{
	padding:1% 0 1% 0;
	font-size: 1.2rem;
}
/* ▲パンくず▲ */

/* ▼メイン▼ */
#title-box{
  width: 80%;
}
#title-box h1{
  font-size: 2.2rem;
}
#title-box p{
  font-size: 1.8rem;
}

.yoyaku{
  display: flex;
  align-items: center;
	width: 80%;
	margin: 2% auto 3% auto;
	padding: 0;
}
.yoyaku .left-yoyaku{
	width: 50%;
	margin: 0 auto 0 auto;
	padding: 0;
  text-align: left;
}
.yoyaku .left-yoyaku p{
  margin: 0;
	padding: 0;
  font-size: 1.8rem;
  line-height: 1.8em;
  display: block;
  text-align: left;
}
.yoyaku .left-yoyaku p.line-text{
  margin: 0 0 0 -1%;
	padding: 0;
  font-size: 4.0rem;
  font-weight: bold;
  letter-spacing: 0;
  color: #039C14;
  display: block;
  text-align: left;
}
.yoyaku .left-yoyaku p.telephone-text{
  margin: 0 0 0 -1%;
	padding: 0;
  font-size: 4.0rem;
  font-weight: bold;
  letter-spacing: 0;
  color: #666;
  display: block;
  text-align: left;
}
.yoyaku .left-yoyaku p.discount-text{
  margin: 0 0 0 -1%;
	padding: 0;
  font-size: 4.0rem;
  font-weight: bold;
  letter-spacing: 0;
  color: #F00;
  display: block;
  text-align: left;
}
.yoyaku .left-yoyaku p.discount-text2{
  margin: 0;
	padding: 0;
  font-size: 1.8rem;
  line-height: 1.8em;
  color: #F00;
  display: block;
  text-align: left;
}
.yoyaku .right-yoyaku{
	width: 50%;
	margin: 0 auto 0 auto;
	padding: 0;
}
.yoyaku .right-yoyaku p{
	width: 84%;
	margin: 0;
	padding: 0;
}
#shop{
  display: flex;
  width: 96%;
  margin: 5% auto 5% auto;
}
#shop #left-box{
	width: 45%;
  margin: 0 auto 0 auto;
  text-align: left;
}
#shop #left-box p#nail-parking{
  width: 100%;
  margin: 0;
}
#shop #left-box p#address{
  width: 94%;
  margin: 0 0 5% 6%;
	font-size: 1.8rem;
  line-height: 1.8em;
  display: block;
}
#shop #left-box p#shop-youtube{
  width: 80%;
  margin: 0 auto 0 auto;
  padding: 0;
  font-size: 1.8rem;
}
#shop #right-box{
	width: 55%;
  margin: 0 0 4% 0;
}
#shop #right-box #map{
	position: relative;
	width: 99%;
	padding-top: 75%;
	margin: 0 auto 0 auto;
	overflow:auto;
	border:1px solid #ccc;
}
#shop #right-box #map iframe{
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	border:none;
  display:block;
}

h2{
  width: 90%;
	padding: 1.5% 2% 1.5% 2%;
	font-size: 1.8rem;
}	
#explanation-text{
  width: 85.8%;
	margin: 0 auto 5% auto;
  font-size: 1.8rem;
}
/* ▲メイン▲ */

/* ▼フッター▼ */
footer ul{
  width: 98%;
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto 5% auto;
  padding: 0;
  border-bottom: 1px solid #FFFFFF;
  border-right: 1px solid #FFFFFF;
}
footer ul li{
	width: 33.2%;
  height:60px;
	margin: 0;
	padding: 0;
  font-size: 1.6rem;
  line-height: 60px;
  border-top: 1px solid #FFFFFF;
  border-left: 1px solid #FFFFFF;
}
footer ul li a{
  height: 60px;
}
p#copyright{
	font-size:1.3rem;
}
/* ▲フッター▲ */

}
/* 
------------------------------
------------------------------
▲560px以上用（タブレット／PC用）の記述▲
------------------------------
------------------------------
*/