@charset "UTF-8";

/*--------------------------------------------------------------------
スマホ調整
---------------------------------------------------------------------*/
@media screen and (max-width: 1280px) {
	/*#content {
		padding-left: 20px;
		padding-right: 20px;
	}*/

	/*-------------------------------------*/
}
	
@media screen and (max-width: 1200px) {
	#branding {
		padding-left: 10px;
		padding-right: 10px;
	}
	#wrap_toppage #shop1 {
		padding-left: 0;
		margin-bottom: 50px;
	}
	#wrap_toppage #shop2 {
		padding-right: 0;
	}

	/*-------------------------------------*/
}
	
@media screen and (max-width: 1000px) {
	/*トップページ*/
	#top_greeting .flexbox .txt {
		width: 65%;
	}
	/**/
	#wrap_catalog .stylebox .ph img {
		height: 200px;
	}
	#wrap_catalog .stylebox .title {
		line-height: 1.2;
	}

	/*-------------------------------------*/
}
	
@media screen and (max-width: 980px) {
	#wrap_toppage #shop1 .txt,
	#wrap_toppage #shop2 .txt {
		width: 55%;
	}
	#wrap_toppage #shop1 .ph,
	#wrap_toppage #shop2 .ph {
		width: 40%;
		margin-top: 100px;
	}
	
	#wrap_concept .boxA,
	#wrap_concept .boxB,
	#wrap_concept .boxC,
	#wrap_concept .boxD,
	#wrap_concept .boxE {
		float: none;
		width: 100%;
	}
	
	#wrap_concept .boxA .ph,
	#wrap_concept .boxB .ph,
	#wrap_concept .boxC .ph,
	#wrap_concept .boxD .ph,
	#wrap_concept .boxE .ph {
		width: 40%;
	}
	#wrap_concept .txt {
		padding-left: 30px;
		padding-right: 30px;
	}
	
	#wrap_salon .box1,
	#wrap_salon .box2,
	#wrap_salon .box3 {
		float: none;
		width: 100%;
		padding: 0;
	}
	
	/*-------------------------------------*/
}
	
@media screen and (max-width: 940px) {
	#content h1.entry-title {
		margin-bottom: 50px;
	}
	#wrap_catalog .stylebox .ph img {
		height: 180px;
	}
	#wrap_sty .inner {
		padding: 0;
		background-color: inherit;
		border-radius: 0;
		margin-bottom: 0;
	}
	.entry-content {
		padding-top: 0;
	}
	#content #wrap_sty h2 {
		font-size: 24px;
	}
	#content #wrap_sty h3 {
		font-size: 18px;
		background-size: 30px;
		padding-left: 35px;
	}

	/*-------------------------------------*/
}

@media screen and (max-width: 850px) {
	/*トップページ*/
	#top_greeting .flexbox .txtbox {
		font-size: 16px;
		line-height: 2;
	}
	/**/
	#wrap_catalog .stylebox .ph img {
		height: 160px;
	}

	/*-------------------------------------*/
}

@media screen and (max-width: 800px) {
	#sitedesc {
		padding-left: 10px;
		padding-right: 10px;
	}
	#header-container > div {
		margin-top: 0;
	}
	#header-container {
		width: 30%;
	}
	#header-container #h_logo {
		margin-top: 0;
	}
	#header-widget-area {
		width: 60%;
		padding-top: 10px;
	}
	#branding {
		min-height: inherit;
	}
	
	#access a > span {
		padding: 10px 15px;
	}
	#access ul li a {
		letter-spacing: 0;
	}

	/*-------------------------------------*/
}

@media screen and (max-width: 767px) {
	.pc {
		display: none;
	}
	.sp {
		display: block;
	}
	div.page {
		margin-bottom: 0;
	}
	
	#content h1.entry-title {
		font-size: 36px;
		margin-bottom: 30px;
	}
	#content h2,
	#pp-afterslider h2 {
		font-size: 24px;
		margin-bottom: 30px;
	}
	
	/*トップページ*/
	body.home #content h2 {
		font-size: 30px;
		margin-bottom: 30px;
	}
	#slidearea {
		margin-bottom: 30px;
	}
	#top_greeting .flexbox {
		display: block;
		padding: 0;
		margin-bottom: 50px;
		overflow: hidden;
	}
	#top_greeting .flexbox .txt {
		float: left;
		width: 55%;
		position: relative;
	}
	#top_greeting .flexbox .txtbox {
		padding: 20px;
	}
	#top_greeting .flexbox .ph {
		float: right;
		width: 45%;
		padding-left: 20px;
		margin-top: 120px;
	}
	
	#newsarea .inner {
		border-radius: 20px;
		padding: 20px;
	}
	/**/
	#wrap_concept .boxA .txt,
	#wrap_concept .boxB .txt,
	#wrap_concept .boxC .txt,
	#wrap_concept .boxE .txt {
		margin-top: 0;
	}
	#stafflist .staffbox {
		padding-left: 5px;
		padding-right: 5px;
	}
	.bikoubox01 {
		padding: 30px;
		border-radius: 30px;
	}
	#stafflist .staffbox .subtxt {
		padding-left: 0;
		padding-right: 0;
	}
	#wrap_catalog .stylebox {
		width: 25%;
	}
	#wrap_catalog .stylebox .ph img {
		height: 180px;
	}
	
	#wrap_sty .ph,
	#wrap_sty .txt {
		float: none;
		width: 100%;
	}
	#wrap_sty .ph {
		margin-bottom: 30px;
	}
	.entry-content #wrap_sty .detail ul {
		width: 50%;
		margin: 0 auto;
	}
	.entry-content #wrap_sty .detail ul li img {
		height: 120px;
	}
	
	/*footer*/
	footer#footer .widget-container {
		padding: 0;
	}
	#f_logo,
	#f_shopping {
		text-align: center;
	}
	#f_logo {
		margin-bottom: 15px;
	}
	#f_shopping {
		margin-bottom: 20px;
	}
	#main .widget-area ul#menu-fnavi {
		padding: 0;
		margin: 0;
		text-align: center;
		font-size: 0;
	}
	#menu-fnavi li {
		display: inline-block;
		padding: 0 10px;
	}
	
	footer#footer #first.widget-area {
		width: 100%;
	}
	footer#footer #second.widget-area,
	footer#footer #third.widget-area {
		width: 50%;
	}
	footer#footer #second.widget-area {
		padding-left: 0;
	}
	footer#footer #third.widget-area {
		padding-right: 0;
	}

/*-------------------------------------*/
}

@media screen and (max-width: 700px) {
	#content h2, #pp-afterslider h2 {
		font-size: 22px;
	}
	
	#top_greeting .flexbox .txt,
	#top_greeting .flexbox .ph,
	#wrap_toppage #shop1 .txt,
	#wrap_toppage #shop2 .txt,
	#wrap_toppage #shop1 .ph,
	#wrap_toppage #shop2 .ph,
	#newsarea,
	#topbnr {
		float: none;
		width: 100%;
	}
	#top_greeting .flexbox .ph,
	#wrap_toppage #shop1 .ph,
	#wrap_toppage #shop2 .ph {
		width: 60%;
		margin: 30px auto 0;
	}
	#top_greeting .flexbox .ph {
		padding: 0;
	}
	#wrap_toppage #shop2 {
		margin-bottom: 30px;
	}
	#newsarea {
		margin-bottom: 30px;
	}
	
	#wrap_concept .boxA .txt,
	#wrap_concept .boxB .txt,
	#wrap_concept .boxC .txt,
	#wrap_concept .boxD .txt,
	#wrap_concept .boxE .txt {
		float: none;
		width: 100%;
	}
	#wrap_concept .boxA .ph,
	#wrap_concept .boxB .ph,
	#wrap_concept .boxC .ph,
	#wrap_concept .boxD .ph,
	#wrap_concept .boxE .ph {
		float: none;
		width: 60%;
		margin: 0 auto 10px;
	}
	
	#wrap_salon .box1,
	#wrap_salon .box2 {
		margin-bottom: 0;
	}
	#wrap_salon .box1 .txt {
		float: none;
		width: 100%;
	}
	#wrap_salon .box1 .ph {
		float: none;
		width: 60%;
		margin: 0 auto 20px;
	}
	#wrap_catalog .stylebox .ph img {
		height: 160px;
	}

/*-------------------------------------*/
}

@media screen and (max-width: 667px) {
	#access a > span {
		padding: 10px;
	}
	#wrap_catalog .stylebox .ph img {
		height: 150px;
	}

/*-------------------------------------*/
}

@media screen and (max-width: 630px) {
	#content h1.entry-title {
		font-size: 32px;
		background-size: 60px;
		padding-top: 55px;
	}
	#content #wrap_sty h2 {
		font-size: 22px;
	}
	#content h3 {
		font-size: 20px;
	}
	
	#stafflist .over {
		display: flex;
		flex-wrap: wrap;
	}
	#stafflist .staffbox {
		width: 33.3%;
		float: none;
	}
	
	#wrap_catalog .stylebox {
		width: 33.3%;
	}
	#wrap_catalog .stylebox .ph img {
		height: 200px;
	}
	.entry-content #wrap_sty .detail ul li img {
		height: 100px;
	}

/*-------------------------------------*/
}

@media screen and (max-width: 600px) {
	footer#footer #first.widget-area,
	footer#footer #second.widget-area,
	footer#footer #third.widget-area {
		float: none;
		width: 100%;
		padding: 0;
	}
	footer#footer #second.widget-area .widget-container {
		margin-bottom: 15px;
		padding-bottom: 10px;
		border-bottom: 1px solid rgba(255,255,255,0.5);
	}

/*-------------------------------------*/
}

@media screen and (max-width: 540px) {
	#content table {
		overflow: hidden;
	}
	#content th,
	#content td,
	#content #wrap_menu th,
	#content #wrap_menu td,
	.entry-content #wrap_sty .txt th,
	.entry-content #wrap_sty .txt td {
		float: left;
		width: 100%;
		border: none;
	}
	#content th,
	.entry-content #wrap_sty .txt th {
		background-color: #e4cbac;
		padding: 3px 10px;
		color: #3c1b0a;
	}
	#content #wrap_menu .sub {
		color: #222;
	}
	
	#top_greeting .flexbox .ph,
	#wrap_toppage #shop1 .ph,
	#wrap_toppage #shop2 .ph {
		width: 100%;
	}
	#wrap_concept .boxA .ph,
	#wrap_concept .boxB .ph,
	#wrap_concept .boxC .ph,
	#wrap_concept .boxD .ph,
	#wrap_concept .boxE .ph {
		width: 100%;
	}
	#wrap_catalog .stylebox .ph img {
		height: 160px;
	}
	.entry-content #wrap_sty .detail ul {
		width: 60%;
	}

/*-------------------------------------*/
}

@media screen and (max-width: 460px) {
	#wrap_catalog .stylebox .ph img {
		height: 140px;
	}
	.entry-content #wrap_sty .detail ul {
		width: 80%;
	}

/*-------------------------------------*/
}

@media screen and (max-width: 400px) {
	#content h1.entry-title {
		font-size: 28px;
	}
	
	#stafflist .staffbox,
	#wrap_catalog .stylebox {
		width: 50%;
	}
	#wrap_catalog .stylebox .ph img {
		height: 180px;
	}

/*-------------------------------------*/
}

@media screen and (max-width: 360px) {
	#wrap_catalog .stylebox .ph img {
		height: 160px;
	}
	.entry-content #wrap_sty .detail ul {
		width: 100%;
	}

/*-------------------------------------*/
}