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

/* スマホに適用するスタイルを書く */
.wrap{
	margin: 0 auto;
	width: 88%;
	position: relative;
}
.no-mb{
		display: none;
}
section{
	margin-top: 8rem;
}
header{
	position:relative;
	width: 100%;
	min-height: 6.25em;
	/*background: url(../images/header_back.jpg) center repeat-x;*/
	border-bottom: #fffb83 solid 0.25em;
	background: #b2e0ef;
}
h1{
	position:  absolute;
	line-height: 1.25em;
	font-size: 0.625em;
	font-weight: normal;
	color: #FFF;
	left: 0;
	top: 7.38em;
	margin: 0;
	padding: 0;
}
#logo{
	position: absolute;
	z-index: 5;
	width: 36%;
	margin: 0;
	top: 0.9em;
}
p#tell{
	display: block;
	position: absolute;
	margin: 0;
	top: /*2.5em;*/1em;
	left: 9.2em;
	color: #ED9369;
	padding: 0;
text-shadow: 1px 1px 0.5px #FFF,
             -1px 1px 0.5px #FFF,
             1px -1px 0.5px #FFF,
             -1px -1px 0.5px #FFF;	
}
p#tell a{
	text-decoration: none;
	color: #ED9369;
}
#main-photo{
	width: 100%;
	position: relative;
}
#main-photo p{
	position: absolute;
	margin: 0;
	top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
.sub-photo:before{
	display: block;
	content:" ";
	height: 43.75vw;
}
h2{
	text-align: center;
	margin-bottom: 3.5rem;
}
h2:after{
	position: absolute;
	display: block;
	content:"";
	border-bottom: 0.25em solid #FFF;
	width: 80%;
}
.tx-ce{
	text-align: center;
}
.background01{
	background: url(../images/background01.jpg) center repeat;
}
.bnr-m{
	width: 22.5rem;
	border-radius: 0.5rem;
}
/*コンセプト*/
h2#hconcept:after{
	border-bottom: 0.25em solid #f7a6c3;
}
/*プライス表*/
h2#hprice:after{
	border-bottom: 0.25em solid #A0DC9A;
}
article.price-box{
	display: flex;
	flex-wrap: wrap;
}
.price {
	width: 90%;
	padding: 1em;
	padding-top: 0;
	font-size: 0.875em; /*14px*/
}
.price p {
	text-align: left;
	font-size: 1.25em; /*20px*/
	color: #328B21;
	font-weight: bold;
	margin: 0 0 0.5em;
}
.price dl {
	margin: 0 auto 1em;
	background: url(../images/price_parts01.png) repeat-x;
	background-position-y: -0.25em;
}
.price dl.sub{
	margin-bottom: 0.375em;
}
.price dl dt {
	float: left;
	padding: 0 1em 0 0;
	background-color: #FFF;
	text-align: left;
}
.price dl dd {
	float: right;
	padding: 0 0 0 1em;
	background-color: #FFF;
}
.new {
	font-size:75%;
	color: red;
}
aside p{
	font-size: 0.8em;
}
h3{
	font-size: 1em;
	font-weight: bold;
	text-align: center;
}
p.nailcaution {
	line-height: 1.5;
	font-size: 0.9rem;
	margin-bottom: 2.5rem;
}
/*リクルート*/
h2#hrecuruit:after{
	border-bottom: 0.25em solid #f7e688;
}
/*ヘアドネーション*/
h2#hjhd:after{
	border-bottom: 0.25em solid #acdbe8;
}
/*ご新規のお客様へ*/
h2#hnewone:after{
	border-bottom: 0.25em solid #afaedc;
}
/*アクセス*/
h2#haccess:after{
	border-bottom: 0.25em solid #fbb282;
}
h2#shirase:after {
	border-bottom: 0.25em solid #3BB13B;
}
h2#ooshima:after {
	border-bottom: 0.25em solid #E554B4;
}
#googlemap{
	margin: 1em;
}
#hnews:after{
	border-bottom: 0.25em solid #ca7474;
}
/*スタイリスト*/
h2#hstylist:after{
	border-bottom: 0.25em solid #efbaba;
}
/*h2 other*/
h2.other:after{
	border-bottom: 0.25em solid #efbaba;
}

.stylist{
	display: flex;
	flex-wrap: wrap;
}
.stylist_style00{
	margin: 1em auto;
	width: 88%;
	text-align: center;
}
.stylist_style00 dd{
	margin-left: 0;
}
/*整体*/
h2#hseitai:after{
	border-bottom: 0.25em solid #ebf224;
}

/*フッター*/
footer {
	padding: 0.5em 0.375em;
	color: #FFF;
	font-size: 0.85em; /*14px*/
	/*background: url(../images/header_back.jpg) center repeat;*/
	background-color: #B2E0EF;
	text-align: center;
	border-top: #fffb83 solid 0.25em;
}
/*バックグラウンドロゴ挿入用*/
.backlogo{
	z-index: 0;
	position: absolute;
	right: 2em;
	opacity: 0.3;
}
/*フレックスボックス用*/
.flex-cont{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	align-items: center;
}
p.nail{
-webkit-filter: drop-shadow(0px 1px 3px rgba(0,0,0,.4));
        filter: drop-shadow(0px 0px 3px rgba(0,0,0,.4));
	width: 50%;
}
p.nail img {
	width: 90%;
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	margin-bottom:0.5em;
}
/*ニュース*/
div.news dd a,a:link,a:visited{
	color: #3B428C;
}
/*特筆ニュース*/
section.caution p{
	margin: 1.5rem auto;
	line-height: 2;
}
/*ネイルボタン*/
.square_btn {
    position: relative;
    display: inline-block;
    padding: 0.25em 0.5em;
    text-decoration: none;
    color: #FFF;
    background: #fd9535;/*色*/
    border-radius: 4px;/*角の丸み*/
    box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.05);
    font-weight: bold;
    border: solid 2px #d27d00;/*線色*/
}
.square_btn a,a:link,a:visited{
	color: #FFF;
}

.square_btn:active {/*押したとき*/
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.30);
}

@media screen and (min-width:414px)  {
/* iphone plus シリーズ */
	h1{
		top: 8.2em;
	}
}
@media screen and (min-width:768px)  {
/* タブレットに適用したいスタイル */
	.wrap{
		width: 80%;
	}
	.no-mb{
		display: block;
	}
	h1{
		font-size: 0.8em;
		font-weight: normal;
		top: 0;
		left: 7em;
		margin: 0;
		padding: 1em 0;
	}
	#logo{
		position: absolute;
		z-index: 5;
		width: 23%;
		margin: 0;
	}
	p#tell{
		position: relative;
		top: 2.5em;
		left: 0;
		text-align: right;
		padding-right: 5em;
	}
	.price{
		width: 45%;
	}
	.pjhd{
		width: 48%;
		float: left;
	}
	.tx-jhd{
		padding-left: 1em;
	}
	.stylist_style00{
		width: 50%;
	}
	p.nail{
	width: 25%;
	}
	/*ニュース*/
	div.news{
		width: 60%;
	}
	dl#time{
		display: flex;
		flex-wrap: wrap;
	}
	dl#time dt{
		width: 48%;
		text-align: right;
	}
	dl#time dd{
		margin-left: 1.5em;
	}
}
@media screen and (min-width:960px)  {
/* 通常のデスクトップに適用したいスタイル */
	h1{
		left: 10em;
	}
	.stylist_style00{
		width: 33%;
	}
	p#tell{
		font-size: 1.3em;
		line-height: 0;
	}
}
@media screen and (min-width:1280px) {
/* 横幅の広いデスクトップに適用したいスタイル */
	h1{
		left: 15em;
	}
	header > section.wrap{
		width: 80%;
	}
	.wrap{
		width: 60em;
	}
	.stylist_style00{
		width: 16em;;
	}
	div.news{
		width: 53em;
	}
}