@charset "utf-8";
.wf-loading body {
	font-family: Meiryo, sans-serif;
}

body {
	font-family: Meiryo, sans-serif;
	line-height: 1.5;
	text-align: center;
	color: rgb(49,49,49);
}

.text-color-0-69-156		{ color: rgb(0,69,156); }
.text-color-0-150-255		{ color: rgb(0,150,255); }
.text-color-3-68-184		{ color: rgb(3,68,184); }
.text-color-41-201-230	{ color: rgb(41,201,230); }
.text-color-109-101-97	{ color: rgb(109,101,97); }
.text-color-126-82-90		{ color: rgb(126,82,90); }
.text-color-135-0-0			{ color: rgb(135,0,0); }
.text-color-143-0-0			{ color: rgb(143,0,0); }
.text-color-230-0-18		{ color: rgb(230,0,18); }
.text-color-235-110-6		{ color: rgb(235,110,6); }
.faq dt::before,
.faq dd::before,
.text-color-white,
.text-color-white a			{ color: #fff; }

/*
|-------------------------------------------------------------------------------
|   font size
|-------------------------------------------------------------------------------
*/

body	{ font-size: 16px; }
h1,
h2,
h3,
h4,
h5,
h6		{ font-size: 1em; }

.text-x0-5	{ font-size: .5em; }
.text-x0-8	{ font-size: .8em; }
.text-x0-9	{ font-size: .9em; }
.text-x0-95	{ font-size: .95em; }
.text-x1-1	{ font-size: 1.1em; }
.text-x1-2	{ font-size: 1.2em; }
.faq dt::before,
.faq dd::before,
.text-x1-3	{ font-size: 1.3em; }
.text-x1-4	{ font-size: 1.4em; }
.text-x1-6	{ font-size: 1.6em; }
.text-x1-8	{ font-size: 1.8em; }
.text-x2		{ font-size: 2em; }
.text-x2-1	{ font-size: 2.1em; }
.text-x2-2	{ font-size: 2.2em; }
.text-x2-3	{ font-size: 2.3em; }
.text-x3		{ font-size: 3em; }
.text-x3-2	{ font-size: 3.2em; }

/*
|-------------------------------------------------------------------------------
|   font weight
|-------------------------------------------------------------------------------
*/

.text-400	{ font-weight: 400; }
.text-500	{ font-weight: 500; }
.faq dt::before,
.faq dd::before,
.text-700	{ font-weight: 700; }
.text-800	{ font-weight: 800; }
.text-900	{ font-weight: 900; }

/*
|-------------------------------------------------------------------------------
|   reset
|-------------------------------------------------------------------------------
*/

.cta-btn.sp-only,
.sp-only	{ display: none; }

*			{ -webkit-box-sizing: border-box; box-sizing: border-box; }

html	{ -webkit-text-size-adjust: 100%; }

body {
	position: relative;
	margin: 0;
	padding: 0;
	overflow-x: hidden;
}

a	{ text-decoration: none; }

img	{
	width: 100%;
	height: auto;
	vertical-align: top;
}

img.width-524		{ max-width: 32.75rem; }
img.width-563		{ max-width: 35.1875rem; }
img.width-883		{ max-width: 55.1875rem; }
img.width-891		{ max-width: 55.6875rem; }
img.width-919		{ max-width: 57.4375rem; }
img.width-966		{ max-width: 60.375rem; }
img.width-1225	{ max-width: 76.5625rem; }

h1,
h2,
h3,
h4,
h5,
h6,
p { margin: 0; }

span	{ vertical-align: 0%; }
table	{ border-collapse: collapse; width: 100%;}

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

/*
|-------------------------------------------------------------------------------
|   svg
|-------------------------------------------------------------------------------
*/

svg.text {
	fill: currentColor;
	text-anchor: middle;
	alignment-baseline: central;
}


/*
|-------------------------------------------------------------------------------
|   custom class
|-------------------------------------------------------------------------------
*/

a:focus:hover,
a:focus,
a				{ opacity: 1; }
a:hover	{ opacity: .8; }

.bg-color-red		{ background-color: red; }
.bg-color-white	{ background-color: #fff; }

.bg-color-30-46-82		{ background-color: rgb(30,46,82); }
.bg-color-51-199-227	{ background-color: rgb(51,199,227); }
.bg-color-64-106-201	{ background-color: rgb(64,106,201); }
.bg-color-130-130-130	{ background-color: rgb(130,130,130); }
.bg-color-190-167-226	{ background-color: rgb(190,167,226); }
.bg-color-230-0-18		{ background-color: rgb(230,0,18); }
.bg-color-246-162-153	{ background-color: rgb(246,162,153); }
.bg-color-247-247-247	{ background-color: rgb(247,247,247); }
.bg-color-251-194-187	{ background-color: rgb(251,194,187); }
.bg-color-252-250-248	{ background-color: rgb(252,250,248); }
.bg-color-255-145-145	{ background-color: rgb(255,145,145); }
.bg-color-255-252-209	{ background-color: rgb(255,252,209); }
.bg-color-255-102-120	{ background-color: rgb(255,102,120); }

.paterned-bg {
	background-color: #002881;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cg fill='%23012473' fill-opacity='1'%3E%3Cpath fill-rule='evenodd' d='M0 0h4v4H0V0zm4 4h4v4H4V4z'/%3E%3C/g%3E%3C/svg%3E");
	background-size: 1em 1em;
}

.border-2px								{ border: 2px solid; }
.border-bottom-1px				{ border-bottom: 1px solid; }
.border-color-250-196-195	{ border-color: rgb(250,196,195); }

.flex-box {
	margin: 0 auto;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-ms-flex-line-pack: center;
	    align-content: center;
}

.flex-box.flex-align-top {
	-webkit-box-align: start;
	    -ms-flex-align: start;
	        align-items: flex-start;
}

.flex-box.flex-space-between {
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
}

.flex-box.flex-space-around {
	-ms-flex-pack: distribute;
	    justify-content: space-around;
}

.line-height-0-5	{ line-height: .5; }
.line-height-0-8	{ line-height: .8; }
.line-height-0-9	{ line-height: .9; }
.line-height-1		{ line-height: 1; }
.line-height-1-1	{ line-height: 1.1; }
.line-height-1-2	{ line-height: 1.2; }
.line-height-1-6	{ line-height: 1.6; }
.line-height-1-7	{ line-height: 1.7; }
.line-height-2		{ line-height: 2; }
.line-height-2-5	{ line-height: 2.5; }

.image-wrap {
	position: relative;
	display: inline-table;
	width: 100%;
	vertical-align: top;
}

.image-wrap::before {
	content: '';
	position: relative;
	display: block;
	z-index: 2;
}

.image-wrap.image-ratio-1-1::before			{ padding-bottom: calc(100% / 1 * 1); }
.image-wrap.image-ratio-1-2::before			{ padding-bottom: calc(100% / 1 * 2); }
.image-wrap.image-ratio-2-1::before			{ padding-bottom: calc(100% / 2 * 1); }
.image-wrap.image-ratio-3-2::before			{ padding-bottom: calc(100% / 3 * 2); }
.image-wrap.image-ratio-4-3::before			{ padding-bottom: calc(100% / 4 * 3); }
.image-wrap.image-ratio-41-25::before		{ padding-bottom: calc(100% / 41 * 25); }
.image-wrap.image-ratio-282-189::before	{ padding-bottom: calc(100% / 282 * 189); }
.image-wrap.image-ratio-491-175::before	{ padding-bottom: calc(100% / 491 * 175); }

.image-body {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: cover;
	z-index: 1;
}

.bordered .image-wrap::before {
	border: 2px solid rgb(161,186,206);
	-webkit-box-shadow: inset 0 0 0 2px #fff;
	        box-shadow: inset 0 0 0 2px #fff;
}

.text-align-left    { text-align: left; }
.faq dt::before,
.faq dd::before,
.text-align-center  { text-align: center; }
.text-align-right   { text-align: right; }
.text-align-just    { text-align: justify; }

.palt	{
	-webkit-font-feature-settings: "palt" on;
	font-feature-settings: "palt" on;
}

ul.kome li {
	position: relative;
	padding-left: 1.25em;
}

ul.kome li::before {
	content: '※';
	position: absolute;
	left: 0;
}

section > .inner,
#footer > .inner {
	margin: 0 auto;
	padding: 0 1em;
	width: 100%;
	max-width: 60.375em;
}

section#access > .inner,
#footer > .inner {
	max-width: 37.5em;
}

@-webkit-keyframes rolling {
	0%		{ -webkit-transform: rotate(0deg); transform: rotate(0deg); }
	100%	{ -webkit-transform: rotate(359deg); transform: rotate(359deg); }
}

@keyframes rolling {
	0%		{ -webkit-transform: rotate(0deg); transform: rotate(0deg); }
	100%	{ -webkit-transform: rotate(359deg); transform: rotate(359deg); }
}

a {
	transition: .15s ease-out;
}

/*
|-------------------------------------------------------------------------------
|   first view
|-------------------------------------------------------------------------------
*/

#first-view .first-view-image.pc-only {
	height: 29.375em;
	background-image:	url(../../img/epi/fv-A.png),
										url(../../img/epi/fv-B.png),
										url(../../img/epi/fv-bg.jpg);
	background-repeat: no-repeat;
	background-position:	calc(50% - 18em) top,
												calc(50% + 14em) bottom,
												left top;
	background-size:	auto 100%,
										auto 96%,
										100vw 100%;
}

#first-view {
	margin-bottom: -3em;
}

#first-view dl {
	margin: 1em 3em 2em;
}

#first-view dt {
	float: left;
}

#first-view dd {
	margin-left: 6em;
	opacity: .75;
}

/*
|-------------------------------------------------------------------------------
|   cta btn
|-------------------------------------------------------------------------------
*/

body > .cta-button > img {
	margin: 3em auto 5em;
	max-width: 53.8125rem;
}

/*
|-------------------------------------------------------------------------------
|   intro
|-------------------------------------------------------------------------------
*/

#intro {
	margin-top: -3em;
	padding: 3em 0 4em;
}

#intro h2 {
	text-shadow: 0 0 .2em;
}

#intro p {
	margin-top: 2em;
}

/*
|-------------------------------------------------------------------------------
|   performance
|-------------------------------------------------------------------------------
*/

#performance img {
	margin: 3em auto;
}

#performance img + img {
	margin-top: 0;
}

/*
|-------------------------------------------------------------------------------
|   parts
|-------------------------------------------------------------------------------
*/

#parts h2 {
	background-image: url(../../img/epi/ke.png);
	background-repeat: no-repeat;
	background-position: calc(50% + 7.5em) top;
	background-size: auto 1.73828125em;
}

#parts img {
	margin: 3em auto;
}

/*
|-------------------------------------------------------------------------------
|   faq
|-------------------------------------------------------------------------------
*/

#faq > .faq {
	max-width: 36em;
}

.faq dt,
.faq dd {
	position: relative;
}

.faq dt {
	padding: 1em 1em .5em 3em;
}

.faq dd {
	margin: 0;
	padding: 1.5em;
	padding-left: 6.4em;
	min-height: 4em;
	border-bottom: 2px dotted rgb(30,46,82);
}

.faq dt::before,
.faq dd::before {
	position: absolute;
	border-radius: 100%;
	width: 1.6em;
	line-height: 1.6em;
}

.faq dt::before {
	content: 'Q';
	left: .2em;
	background-color: rgb(3,68,184);
}

.faq dd::before {
	content: 'A';
	left: 2.8em;
	background-color: rgb(137,137,137);
}

/*
|-------------------------------------------------------------------------------
|   salons
|-------------------------------------------------------------------------------
*/

a.salons {
	margin: 1em auto;
	padding: 0 .6em 0 1em;
	display: inline-block;
	letter-spacing: .4em;
}

/*
|-------------------------------------------------------------------------------
|   access
|-------------------------------------------------------------------------------
*/

#access {margin-bottom: 2em;}

#access p	{ margin: 2em auto 2.6em; }

.map.pc-only {
	position: relative;
	width: 100%;
	height: 26em;
}

.map.pc-only > a {
	position: absolute;
	padding-left: .15em;
	letter-spacing: .15em;
	display: block;
	text-shadow: 0 -1px #000;
	border-width: 0 .2em .2em 0;
	border-style: solid;
	border-color: rgb(10,26,62);
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
	border-radius: .5em;
}

.map.pc-only > a.hokkaidou {
	top: 0;
	right: 0;
	width: 7em;
	line-height: 5;
}

.map.pc-only > a.touhoku {
	top: calc(5em + .7em);
	right: 0;
	width: 7em;
	line-height: 7.8;
}

.map.pc-only > a.hokuriku {
	top: calc(5em + .7em + 7.8em - 4em);
	right: calc(7em + .7em);
	width: 13.85em;
	line-height: 4;
}

.map.pc-only > a.toukyou,
.map.pc-only > a.kantou,
.map.pc-only > a.toukai,
.map.pc-only > a.kansai {
	top: calc(5em + .7em + 7.8em + .7em);
	line-height: 6.58;
}

.map.pc-only > a.toukyou {
	right: 0;
	width: 3em;
}

.map.pc-only > a.kantou,
.map.pc-only > a.toukai,
.map.pc-only > a.kansai { width: calc((7em + .7em + 13.85em - 3em - .7em * 3) / 3); }

.map.pc-only > a.kantou	{ right: calc(3em + .7em); }
.map.pc-only > a.toukai	{ right: calc(3em + .7em + ((7em + .7em + 13.85em - 3em - .7em * 3) / 3) + .7em); }
.map.pc-only > a.kansai	{ right: calc(3em + .7em + ((7em + .7em + 13.85em - 3em - .7em * 3) / 3) + .7em + ((7em + .7em + 13.85em - 3em - .7em * 3) / 3) + .7em); }

.map.pc-only > a.tyuugoku {
	bottom: calc(3.75em + .7em);
	left: calc(6em + .7em);
	width: 6.55em;
	line-height: 5.83;
}

.map.pc-only > a.sikoku {
	bottom: 0;
	left: calc(6em + .7em);
	width: 6em;
	line-height: 3.75;
}

.map.pc-only > a.kyuusyuu {
	bottom: 0;
	left: 0;
	width: 6em;
	line-height: 7.92;
}

#access ~ .cta-btn	{ margin: .85em auto; }

/*
|-------------------------------------------------------------------------------
|   footer
|-------------------------------------------------------------------------------
*/

#footer ul.kome {
	margin: 0 auto 2.6em;
	max-width: 39em;
}

#footer .statement p {
	margin-bottom: 2.6em;
	padding: 12em 0 0;
	width: 50%;
	background-repeat: no-repeat;
	background-position: top center;
	background-size: calc(100% - 2em) auto;
}

#footer .link a {
	position: relative;
	padding: 0 1em;
	display: block;
}

#footer .link + .link a::before {
	content: '|';
	position: absolute;
	left: -.1em
}

#footer .above + div {
	padding: .6em 0;
}

/*
|-------------------------------------------------------------------------------
|   responsive
|-------------------------------------------------------------------------------
*/

@media (max-width: 984px) {
	body	{ font-size: calc(1vw * 16 * 100 / 984); }
}

@media (max-width: 766px) {
	#footer .link + .link a::before,
	.pc-only	{ display: none; }
	.sp-only	{ display: inline; }
	.cta-btn.sp-only	{ display: inline-block; }
	#footer .statement { font-size: .5em; }
	.intro-text { font-size: 1.15em; }
	.step-text,
	#intro,
	#footer .above + div { font-size: 1.2em; }
	#access p,
	.point-text { font-size: 1.4em; }
	#first-view dl { font-size: 1.6em; }
	#intro p,
	.point-image.order-made svg.text:nth-child(2) { font-size: 1.8em; }
	#footer,
	.point-image svg.text { font-size: 2em; }
	#faq > .faq { font-size: 2.4em; }
	ul.areas	{ font-size: 14px; }
	section > .inner, #footer > .inner	{ padding: 0 2em; }
	#first-view .image-wrap::before	{ padding-bottom: calc(100% / 3 * 2); }

	#first-view > img {
		width: 100vw;
		max-width: unset;
	}

	#first-view dl {
		margin-left: 0;
		margin-right: 0;
		word-break: break-all;
	}

	#performance img,
	#parts img {
		padding: 0 2em;
	}

	#faq > .faq {
		padding: 0 1em;
	}

	.intro-image,
	.step-image,
	.intro-text,
	.step-text,
	.point-image,
	.point-text,
	#footer .statement p,
	#footer .link	{ width: 100% }

	.intro-image,
	.step-image,
	.point-image	{ margin-bottom: 1.6em; }

	#points	{ padding-bottom: 1em; }

	.point-image:nth-child(4)	{ order: 0; }
	.point-text:nth-child(3)	{ order: 1; }
	.point-image:nth-child(5),
	.point-text:nth-child(6)	{ order: 2; }

	.point-image svg.text {
		top: .6em;
		left: .6em;
		width: 6.5em;
		height: 2.5em;
	}

	.point-image.order-made svg.text:nth-child(2) {
		right: .6em;
		border-bottom: .4em;
	}

	.point-image.personal svg.text	{ width: 5.2em; }
	.point-image.facility svg.text	{ width: 4.5em; }

	.point-text	{
		margin-bottom: 2em;
		padding: 0 .8em;
	}

	section#access > .inner {
		max-width: 100%;
	}

	#access p	{ white-space: nowrap; }

	ul.areas h3 {
		position: relative;
		cursor: pointer;
		padding: 0 1em;
		line-height: 3.5;
	}

	ul.areas h3::after {
		content: '';
		position: absolute;
		top: 50%;
		right: 1em;
		border-width: .75em .5em 0;
		border-style: solid;
		border-color: transparent;
		border-top-color: currentColor;
		-webkit-transform: translate3d(0,-30%,0);
		        transform: translate3d(0,-30%,0);
	}

	ul.areas h3.opened::after {
		-webkit-transform: translate3d(0,-50%,0) rotate(180deg);
		        transform: translate3d(0,-50%,0) rotate(180deg);
	}

	ul.areas > li + li { border-top: 2px solid #fff; }

	ul.areas h4,
	ul.areas a {
		position: relative;
		padding: 0 1.2em;
		display: block;
		line-height: 3.5;
	}

	ul.areas h4 { border-top: 2px solid; border-bottom: 2px solid; }
	ul.areas a { padding-left: 2.2em; border-bottom: 2px dotted #ccc; }
	ul.areas h4:nth-of-type(1) { border-top: 0; }
	ul.areas li:nth-last-of-type(1) > a	{ border: 0; }

	ul.areas .salon-list {
		display: none;
	}

	.ladys > a::after {
		content: 'レディース専門店';
		color: #fff;
		margin-left: .8em;
		padding: 0 .4em;
		display: inline-block;
		line-height: 1.6;
		background-color: rgb(255,145,145);
		border-radius: .2em;
	}

	#footer .statement p	{ padding-top: 12em; }

	#footer .above + div {
		padding: 0;
		line-height: 3;
	}

	#footer .link + .link a { border-top: .15em solid rgb(255,255,255); }
	#footer .copyright			{ background-color: rgb(13,27,36); }
}