@charset "UTF-8";
/*!
Theme Name: suzuran
Version:    1.0.0
*/

/*--------------------------------------------------------------
# Elements base
--------------------------------------------------------------*/

body,
button,
input,
select,
optgroup,
textarea {
	font-family: "Hiragino Kaku Gothic ProN","Hiragino Kaku Gothic Pro",メイリオ,Meiryo,sans-serif;
}

a,a:visited{
	color: #333333;
	text-decoration: none;
}
a:hover{
	text-decoration: underline;
}

.post,.page{
	margin-bottom: 0;
}

header#masthead,footer#colophon .site-info{
	background-color: #f7b0b0;
}

/*--------------------------------------------------------------
# flex box
--------------------------------------------------------------*/
.flex-wrap{
	display: flex;
	justify-content: space-around;
	align-items: center;
}

@media screen and (max-width: 640px) {
	.flex-wrap{
		flex-direction:column;
	}
	footer #footer-address .flex-wrap a{
		margin-bottom: 20px;
	}
	#footer-banners ul li+li{
		margin-top: 20px;
	}
}

/*--------------------------------------------------------------
# header
--------------------------------------------------------------*/

header#masthead{
	display: flex;
	justify-content:space-between;
	align-items:center;
	position: fixed;
	width: 100%;
	padding: 10px 2%;
	z-index: 95;
}
.site-branding{
	width: 140px;
}
h1.site-title,
p.site-title{
	margin: 0;
}
.site-title a{
	display: block;
}
.site-title a img{
	display: block;
	width: 100%;
	height: auto;
}
.site-header:before,
.site-header:after {
	content: none;
}

#nav-list {
	display: flex;
	justify-content: space-between;
	list-style: none;
	margin: 0;
	padding-left: 0;
}
#nav-list li {
	position: relative;
	margin-left: 2.6em;
}
#nav-list li a {
	/*display: block;*/
	text-decoration: none;
	color: #333333;
	font-size: 1.3em;
}
#nav-list li a:hover {
	display: block;
	text-decoration: underline;
	color: #333333;
}
#nav-list li#nav-recruit a{
	color: #c59835;
}
#nav-list li#nav-access {
	white-space: nowrap;
}

#nav-toggle {
		display: none;
	}

@media screen and (max-width: 768px) {
	.site-branding{
		width: 22%;
	}

	/* Toggle Button */
	#nav-toggle {
		display: block;
		position: relative;
		width: 28px;
		height: 32px;
		margin-right: 10px;
		cursor: pointer;
		z-index: 101;
	}
	#nav-toggle span {
		display: inline-block;
		position: absolute;
		height: 3px;
		width: 100%;
		top: 15px;
		left: 0;
		background-color: #ffffff;
		-webkit-transition: .35s ease-in-out;
		-moz-transition: .35s ease-in-out;
		transition: .35s ease-in-out;
	}
	#nav-toggle span::before, 
	#nav-toggle span::after {
		content: '';
		width: 100%;
		height: 100%;
		position: absolute;
		background-color: #ffffff;
		-webkit-transition: -webkit-transform .5s, top .5s, background-color 0.3s, width 0.2s;
		-moz-transition: -moz-transform .5s, top .5s, background-color 0.3s width 0.2s;
		transition: transform .5s, top .5s, background-color 0.3s width 0.2s;
	}
	#nav-toggle span::before {
		top: -10px;
	}
	#nav-toggle span::after {
		top: 10px;
	}

	/* navigation */
	#nav-list {
		position: fixed;
		flex-direction: column;
		justify-content: flex-start;
		right: 0;
		top: 0px;
		z-index: 99;
		width: 80%;
		max-width: 280px;
		height: 100vh;
		padding: 5em 0 0;
		/*font-size: 2.3vw;*/
		background-color: #f7b0b0;
		/*transition: .3s ease-in-out;*/
		-moz-transform: translateX(105%);
		-webkit-transform: translateX(105%);
		transform: translateX(105%);
	}
	#nav-list li{
		margin-left: 1em;
		margin-bottom: 2em;
	}
	#top-head #nav-list ul li a,
	#top-head.fixed #nav-list ul li a {
		width: 100%;
		display: block;
		color: #fff;
		padding: 18px 0;
	}
	/* #nav-toggle 切り替えアニメーション */
	.open #nav-toggle span:after {
		top: 0px;
		width: 32px;
		transform-origin: center;
		-webkit-transform: rotate(225deg);
		-moz-transform: rotate(225deg);
		transform: rotate(225deg);
	}
	.open #nav-toggle span {
		width: 0;
		transform-origin: center;
	}
	.open #nav-toggle span:before {
		top: 0px;
		width: 32px;
		transform-origin: center;
		-webkit-transform: rotate(-225deg);
		-moz-transform: rotate(-225deg);
		transform: rotate(-225deg);
	}
	/* #global-nav スライドアニメーション */
	.open #nav-list {
		/* #global-nav top + #mobile-head height */
		-moz-transform: translateX(0%);
		-webkit-transform: translateX(0%);
		transform: translateX(0%);
		transition: .35s ease-in-out;
	}
	.open #nav-bg {
		position: absolute;
		display: block;
		/*content: '';*/
		width: 100vw;
		height: 120vh;
		margin-top: -5em;
		background-color: #000;
		opacity: 0.75;
		-webkit-transform: translateX(-100%);
		-moz-transform: translateX(-100%);
		transform: translateX(-100%);
	}
}


/*--------------------------------------------------------------
# screen
--------------------------------------------------------------*/

#slide-screen .slider{
	display: none;
	width: 100%;
	height: 100vh;
	margin: 0 auto;
	padding: 0;
	overflow: hidden;
}
#slide-screen .slider.slick-initialized {
	display: block;
}
#slide-screen .slider img{
	max-width: 100%;
	object-fit: cover;
}
@media screen and (max-width: 1320px) {
	#slide-screen .slider{
		height: auto;
	}
}

/*--------------------------------------------------------------
# content
--------------------------------------------------------------*/

.content-area{
	max-width: 1180px;
	margin: 0 auto;
}

.pink-head{
	display: inline-block;
	width: 200px;
	margin-top: 0px;
	padding: 70px 10px 15px;
	color: #ffffff;
	font-weight: normal;
	font-size: 1.8em;
	text-align: center;
	background-color: #f7b0b0;
}
header.entry-header{
	text-align: center;
}
h1.entry-title{
	display: inline-block;
	margin-top: 1.2em;
	font-weight: normal;
	border-bottom:3px solid #666666;
}

/* scroll fade */
.scroll-fade {
	opacity : 0;
	transform: translateY(40px);
	transition: all 1.2s;
}

/*-------- home --------*/
#home-catchcopy,#home-insta-news{
	align-items: flex-start;
	margin-bottom: 50px;
}
#home-catchcopy{
	justify-content: center;
	margin: 30px 0 80px;
}
#home-catchcopy h2{
	margin-right: 60px;
	font-weight: normal;
}
#home-insta-news{
	margin-bottom: 80px;
}
#home-catchcopy section,#home-insta-news section{
	width: 50%;
	text-align: center;
}
/*- home news -*/
#home-insta-news #home-news article{
	margin: 3em 0;
}
#home-insta-news #home-news article a{
	font-size: 0.9em;
	font-weight: normal;
}
#home-insta-news #home-news article time{
	font-size: 0.9em;
}
#home-newsmore-btn a{
	position: relative;
	display: inline-block;
	padding: 5px 25px;
	padding-right: 54px;
	border-radius: 2em;
	background-clip: padding-box;
	background:#ffffff;
	border: solid transparent;
}
#home-newsmore-btn a::before{
	content: "";
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	margin: -6px;
	border-radius: inherit;
	background: linear-gradient(to right,#edbf84 0%,#da1d6f 100%);
	z-index: -1;
	transition: all 0.8s;
}
#home-newsmore-btn a:hover::before{
	opacity: 0.6;
}
#home-newsmore-btn a span{
	position: relative;
	display: inline-block;
	vertical-align: middle;
	text-decoration: none;
	color: #121212;
	font-size: 0.9em;
	transition: all 0.8s;
}
#home-newsmore-btn a:hover span{
	opacity: 0.6;
}
#home-newsmore-btn a span::before{
	position: absolute;
	content: "";
	vertical-align: middle;
	top: -7px;
	bottom: 0;
	right: -52px;
	width: 2.7em;
	height: 2.35em;
	border-radius: 2em;
	background-color: #db2570;
	background: linear-gradient(to right,#edbf84 0%,#da1d6f 100%);
}
#home-newsmore-btn a span::after{
	position: absolute;
	content: "";
	vertical-align: middle;
	top: 3px;
	right: -36px;
	width: 15px;
	height: 15px;
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
/*- home insta -*/
#sb_instagram{
	width: 68%;
}
@media screen and (max-width: 1180px) {
	#sb_instagram{
		width: 90%;
	}
}
/*- home recruit btn -*/
#home-recruit{
	text-align: center;
}
#home-recruit a{
	display: inline-block;
	width: 40%;
	margin-bottom: 80px;
	padding: 20px;
	font-size: 2em;
	text-decoration: none;
	color: #212121;
	background-color: #d6d6d6;
}
#home-recruit a:hover{
	opacity: 0.9;
}

@media screen and (max-width: 640px) {
	#home-catchcopy h2{
		width: 100%;
		margin-right: 0px;
		text-align: center;
	}
	#home-catchcopy p{
		width: 80%;
		margin: 0 auto;
	}
	#home-insta-news{
		margin-bottom: 40px;
	}
	#home-insta-news section{
		width: 90%;
		margin: 0 auto;
	}
	#home-insta-news #home-insta{
		margin-bottom: 30px;
	}
	#home-insta-news #home-news article{
		margin: 0 0 2em;
	}
	#home-recruit a{
		width: 90%;
		margin-bottom: 40px;
	}
}

/*-------- price --------*/
#price-wrap h2{
	padding-left: 10px;
	font-weight: normal; 
	border-left: 1px solid #333333;
}
#price-wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-bottom: 80px;
	padding: 0 15%;
}
#price-wrap section{
	width: 40%;
	min-width: 260px;
	box-sizing: border-box;
	margin-bottom: 30px;
}
#price-wrap section dl dt{
	float: left;
	clear: both;
	font-weight: normal;
}
#price-wrap section dl dd{
	float: right;
	margin: 0;
}
@media screen and (max-width: 768px) {
	#price-wrap {
		width: 90%;
		margin: 0 auto 50px;
		padding: 0;
	}
}

@media screen and (max-width: 640px) {
	#price-wrap {
		flex-direction: column;
		padding: 0;
	}
	#price-wrap section{
		width: 80vw;
		margin: 0 auto 30px;
	}
}

/*-------- staff --------*/
#staff-list-wrap{
	justify-content: center;
	align-items: flex-start;
	margin-bottom: 50px;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 0 12%;
}
#staff-list-wrap section{
	width:40%;
	margin: 0 10px;
	text-align: center;
}
#staff-list-wrap section h2{
	margin: 0;
	font-weight: normal;
}
#staff-list-wrap section h2 .name-jp{
	display: block;
	margin-bottom: 10px;
	font-size: 1.3em;
}
#staff-list-wrap section h2 .name-en{
	font-size: 0.9em;
}
#staff-list-wrap section p.staff-txt{
	display: inline-block;
	width:250px;
	text-align: left;
}
@media screen and (max-width: 640px) {
	#staff-list-wrap section{
		width:95%;
	}
	#staff-list-wrap section h2 .name-jp{
		font-size: 1em;
	}
	#staff-list-wrap{
		align-items: center;
	}
}

/*-------- access --------*/
main#main article#post-24{
	text-align: center;
}
main#main article#post-24 h2{
	margin-top: 50px;
}
main#main article#post-24 address{
	margin-top: 50px;
	font-style: normal;
}
main#main article#post-24 dl{
	max-width: 400px;
	margin: 0 auto 40px;
}
main#main article#post-24 dl,
main#main article#post-24 dl dt,
main#main article#post-24 dl dd{
	box-sizing: border-box;
	text-align: left;
}
main#main article#post-24 dl dt{
	float: left;
}
main#main article#post-24 dl dd{
	margin: 0 0 10px 0;
	padding-left: 5em;
}
main#main article#post-24 address .access-gmap {
	position: relative;
	height: 0;
	overflow: hidden;
	max-width: 780px;
	width: 100%;
	margin: 0 auto;
	padding-bottom: 50%;
}
main#main article#post-24 address .access-gmap iframe {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
}

main#main article#post-24 #access-salon-list {
	justify-content: space-between;
	flex-wrap: wrap;
	margin-top: 60px;
}
main#main article#post-24 #access-salon-list section{
	width: 48%;
	margin-bottom: 60px;
}
main#main article#post-24 #access-salon-list section img{
	max-width: 350px;
	max-height: 130px;
}
main#main article#post-24 #access-salon-list section address{
	margin-top: 0px;
}

@media screen and (max-width: 768px) {
	main#main article#post-24 #access-salon-list section,
	main#main article#post-24 address#access-honten {
		width: 96%;
		margin: 50px auto;
	}
}


/*-------- recruit --------*/
#post-62 header h1{
	color: #c59835;
	border-bottom-color: #c59835;
}
main#main #recruit-text,
main#main #recruit-message h3{
	text-align: center;
}
main#main #recruit-message h3{
	font-size: 1.8em;
	font-weight: normal;
	color: #c59835;
}
main#main #recruit-text{
	line-height: 3em;
	margin-bottom: 100px;
}
main#main #recruit-text p{
	width: 50%;
}
main#main #recruit-text img{
	width: 80vw;
}

main#main #recruit-message{
	max-width: 740px;
	margin: 0 auto 60px;
}
main#main #recruit-message #recruit-owner{
	text-align: right;
}

/*- form -*/
#mw_wp_form_mw-wp-form-73 {
	background-color: #d6d6d6;
	max-width: 767px;
	margin: 0 auto 100px;
	padding: 20px;
}
#mw_wp_form_mw-wp-form-73 h3{
	text-align: center;
	font-size: 1.3em;
	margin-bottom: 10px;
}
#mw_wp_form_mw-wp-form-73 .form-attention{
	text-align: center;
	font-size: 0.9em;
	margin: 0;
}
#mw_wp_form_mw-wp-form-73 .form-attention span{
	color: #B70000;
}
#mw_wp_form_mw-wp-form-73 form{
	max-width: 440px;
	margin: 0 auto;
}
#mw_wp_form_mw-wp-form-73 form dl {
	display: flex;
	flex-wrap: wrap;
}
#mw_wp_form_mw-wp-form-73 form dl dt {
	width: 20%;
	margin: 0;
	padding: 10px 0;
	display: flex;
	align-items: center;
}
#mw_wp_form_mw-wp-form-73 form dl dd {
	width: 80%;
	margin: 0;
	padding: 10px 0;
}
#mw_wp_form_mw-wp-form-73 form dl dd > input,
#mw_wp_form_mw-wp-form-73 form dl dd textarea{
	width: 100%;
}
#mw_wp_form_mw-wp-form-73 form dl dd span.mwform-tel-field input{
	width:25%;
}
#mw_wp_form_mw-wp-form-73 form  #recruit-submit{
	text-align: center;
	clear: both;
}
#mw_wp_form_mw-wp-form-73 form  #recruit-submit input{
	background-color: #fff;
	padding: 10px 20px;
	font-size: 0.9em;
	font-weight: bold;
	cursor: pointer;
}
#mw_wp_form_mw-wp-form-73 form  #recruit-submit input:hover{
	border-color: #333;
	background-color: #eee;
}

@media screen and (max-width: 768px) {
	main#main #recruit-message{
		max-width: 80%;
	}
	main#main #recruit-text{
		line-height: 2em;
		margin-bottom: 40px;
	}
	main#main #recruit-text p{
		width: 100%;
	}
	#mw_wp_form_mw-wp-form-73 form dl{
		flex-flow: column nowrap;
	}
	#mw_wp_form_mw-wp-form-73 form dl dt,
	#mw_wp_form_mw-wp-form-73 form dl dd{
		width: 100%;
		padding: 0;
	}
	#mw_wp_form_mw-wp-form-73 form dl dd{
		padding-bottom: 20px;
	}
}

/*-------- news --------*/
main.news-main{
	margin-top:2em;
	text-align: center;
	margin-bottom: 80px;
}
main.news-main header{
	margin-bottom: 40px;
}
main.news-main article{
	margin-bottom: 50px;
}
main.news-main article h2{
	font-size: 1em;
	font-weight: normal;
}
main.news-main article .entry-meta{
	margin-bottom: 30px;
}
main.news-main article .entry-meta time{
	font-size: 0.9em;
}

/*- news single page -*/
main.news-main-page article h1.entry-title{
	margin-top: 0;
}
main.news-main-page .comment-navigation .nav-next,
main.news-main-page .posts-navigation .nav-next,
main.news-main-page .post-navigation .nav-next{
	text-align: center;
}

/*- pagination -*/
main.news-main nav{
	margin-top: 80px;
}
main.news-main nav ul.page-numbers{
	list-style: none;
	list-style-position: inside;
	display: flex;
	justify-content: center;
	margin: 0;
	padding: 0;
}
main.news-main nav ul.page-numbers li{
	font-size: 1.5em;
}
main.news-main nav ul.page-numbers li:after{
	content: "."
}
main.news-main nav ul.page-numbers li:last-child:after{
	content: ""
}
main.news-main nav ul.page-numbers li .current{
	color:#f7b0b0;
}

/*--------------------------------------------------------------
# footer
--------------------------------------------------------------*/

footer #footer-address address{
	text-align: center;
	font-style: normal;
	margin-bottom: 0px;
}
footer #footer-address address span{
	display: block;
	margin-bottom: 20px;
	font-size: 1.8em;
}
footer #footer-address .flex-wrap{
	max-width: 1180px;
	margin: 0 auto 30px;
}
footer #footer-address .flex-wrap a{
	width: 200px;
}
footer #footer-address .flex-wrap a img{
	width: 100%;
}
footer#colophon .gmap {
	height: 0;
	overflow: hidden;
	padding-bottom: 30%;
	position: relative;
}
footer#colophon .gmap iframe {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
}

#footer-banners ul{
	list-style: none;
	max-width: 1180px;
	margin: 0 auto;
	padding: 50px 10px;
}
#footer-banners ul li a{
	display: inline-block;
}
#footer-banners ul li a img{
	width: 190px;
}

footer#colophon .site-info {
	padding-top: 70px;
}
footer#colophon .site-info #footer-sns-icon ul{
	display: flex;
	justify-content: center;
	list-style: none;
	max-width: 1180px;
	margin: 0 auto 15px;
	padding: 0;
}
footer#colophon .site-info #footer-sns-icon ul li+li{
	margin-left: 30px;
}
footer#colophon .site-info p#footer-copyright{
	margin: 0;
	padding-bottom: 25px;
	text-align: center;
}


@media screen and (max-width: 768px) {
	footer#colophon .gmap {
		padding-bottom: 50%;
	}
}