@charset "utf-8";
/* LP css */

/*-------------------------------------------------------------------
header
-------------------------------------------------------------------*/
.toggle_menu {
	padding-bottom: 4vw;
}
@media screen and (min-width: 768px), print {
	.header_logo img {
		width: 101px;
		height: auto;
	}
	.toggle_menu {
		width: 120px;
		height: auto;
		padding-bottom: 0;
		background-color: rgba(255,255,255,0);
	}
	.toggle_menu ul {
		flex-wrap: wrap;
		width: 100%;
		margin: 1em 0 0;
	}
	.toggle_menu li {
		margin-right: 0;
		padding-right: 40px;
	}
	.toggle_menu a {
		position: relative;
		padding: .25em 0;
		font-size: 18px;
	}
	.toggle_menu a:hover,
	.toggle_menu a.active {
		border-bottom: none;
	}
	.toggle_menu a.active::after {
		content: "";
		position: absolute;
		right: -16px;
		top: 0;
		bottom: 0;
		display: block;
		margin: auto;
		width: .5em;
		height: 1px;
		background-color: #000;
	}
}

/*-------------------------------------------------------------------
footer
-------------------------------------------------------------------*/
.footer-lp {
	padding: 1.5em 0;
}
.copyright {
	padding: 0;
}
.inner-footer-lp {
	width: 100%;
}
@media screen and (min-width: 768px), print {
	.footer-lp {
		padding: 2em 0 1.5em;
	}
	.copyright {
		text-align: center;
	}
}


/*-------------------------------------------------------------------
mv
-------------------------------------------------------------------*/
.main-lp {
	padding-top: 0;
}
.inner-lp-mv {
	position: relative;
}
.blk-mv-lp {
	width: 100%;
	height: 126.67vw;
	background: url(img/bg_mv.jpg) no-repeat center;
	background-size: auto 107%;
}
.ttllp {
	position: absolute;
	top: 74.8vw;
	left: -1.2vw;
}
.ttllp > span {
	display: inline;
	padding: 0 2vw;
	background-color: #21cdaf;
	font-size: 8vw;
	color: #fff;
}
.txt-mv-lp {
	position: absolute;
	top: 102vw;
	left: -1.2vw;
}
.txt-mv-lp b {
	display: inline;
	padding: 0 0 0 2vw;
	background-color: #000;
	font-size: 4.8vw;
	color: #fff;
}
.txt-mv-lp small {
	font-size: 4vw;
}
@media screen and (min-width: 768px), print {
	.blk-mv-lp {
		height: 720px;
		background-size: cover;
		overflow: hidden;
	}
	.ttllp {
		top: 467px;
		left: -6.2%;
	}
	.ttllp > span {
		padding: 0 10px 2px;
		font-size: 48px;
		white-space: nowrap;
	}
	.txt-mv-lp {
		top: 550px;
		left: -6.2%;
	}
	.txt-mv-lp b {
		padding: 0 0 2px 10px;
		font-size: 30px;
	}
	.txt-mv-lp small {
		font-size: 21px;
	}
}

/*-------------------------------------------------------------------
section共通
-------------------------------------------------------------------*/
.sec-lp {
	position: relative;
	padding: 1em 0 0;
	border-top: solid .54vw #21cdaf;
	border-left: solid .54vw #21cdaf;
	overflow: hidden;
}
.sec-lp::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 2.12vw;
	height: 2.12vw;
	background-color: #21cdaf;
}
.ttl-lp {
	margin-bottom: 1em;
	font-size: 8vw;
}
.subttl-lp {
	margin-bottom: 2em;
	line-height: 1.2;
	text-align: center;
	font-size: 5.6vw;
}
.bg-lp {
	background-color: #eee;
}
.ttl-pt-lp {
	position: relative;
	padding-left: 17.2vw;
	padding-top: 2vw;
	height: 13.32vw;
	background-color: #fff;
	line-height: 1.3;
	letter-spacing: 0;
	font-family: inherit;
	font-weight: bold;
}
.pt-ttl {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	display: block;
	margin: auto;
	width: 13.32vw;
	height: 13.32vw;
	background-color: #21cdaf;
	line-height: 1;
	letter-spacing: 1px;
	text-align: center;
	font-family: 'Bree Serif';
	font-size: 4.8vw;
	font-weight: normal;
	color: #fff;
}
.pt-ttl::before {
	display: block;
	padding-top: 1.25em;
	font-size: 50%;
}
.flxpc-lp-triple {
	margin-bottom: 4.5em;
}
.col-lp-triple {
	margin-bottom: 2.5em;
}
.blk-ttl {
	position: relative;
	min-height: 20vw;
	background-color: #000;
	text-align: center;
	color: #fff;
}
.blk-ttl span {
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	width: 100%;
	transform: translate(-50%,-50%);
	font-size: 4.8vw;
	font-weight: bold;
}
.blk-txt {
	padding: 2em 2.5em;
	background-color: #f7f7f7;
}
.blk-txt p {
	font-size: 3.2vw;
}
.mark {
	transition: background-position 2s ease-out;
}
.mark1 {
	background: linear-gradient(to right, #ffc0cf 50%, rgba(255,255,255,0) 50%) no-repeat 100% 100% / 200% 30%;
}
.mark2 {
	background: linear-gradient(to right, #fff4a7 50%, rgba(255,255,255,0) 50%) no-repeat 100% 100% / 200% 30%;
}
.mark.show {
	background-position: left bottom;
}
@media screen and (min-width: 768px), print {
	.sec-lp {
		padding-top: 1.25em;
		border-width: 4px;
	}
	.sec-lp::before {
		width: 16px;
		height: 16px;
	}
	.ttl-lp {
		width: 92vw;
		margin-left: calc( 50% - 46vw );
		font-size: 60px;
	}
	.subttl-lp {
		margin-bottom: 2em;
		font-size: 42px;
	}
	.ttl-pt-lp {
		height: 80px;
		padding-left: 120px;
		padding-top: .5em;
		line-height: inherit;
	}
	.pt-ttl {
		width: 80px;
		height: 80px;
		font-size: 33px;
	}
	.pt-ttl::before {
		padding-top: 1em;
	}
	.flxpc-lp-triple {
		display: flex;
		flex-wrap: wrap;
		align-items: stretch;
		justify-content: flex-start;
	}
	.col-lp-triple {
		position: relative;
		width: 30%;
	}
	.col-lp-triple:not(:nth-of-type(3n+1)) {
		margin-left: 5%;
	}
	.blk-ttl {
		min-height: 87px;
	}
	.blk-ttl span {
		font-size: 18px;
	}
	.blk-txt {
		padding: 1.5em 1.75em;
	}
	.blk-txt p {
		font-size: 16px;
	}
}


/*-------------------------------------------------------------------
Contact
-------------------------------------------------------------------*/
.blk-contact-lp {
	padding: 3.5em 0 4em;
	background-color: #f7f7f7;
	text-align: center;
}
.ttl-contact-lp {
	margin-bottom: .5em;
	font-size: 6.8vw;
}
.inner-contact-lp > p {
	margin-bottom: 2em;
}
.inner-contact-lp p {
	font-size: 3.2vw;
}
.box-lp {
	display: inline-block;
	padding: 0 .5em;
	border: solid 1px #000;
	font-size: 4.4vw;
	font-weight: bold;
}
.btn-contact-lp {
	margin-bottom: 2em;
}
.btn-contact-lp a {
	position: relative;
	width: 100%;
	height: inherit;
	padding: 1em;
	letter-spacing: 0;
	font-family: inherit;
	font-size: 4.4vw;
}
.btn-contact-lp a::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	right: .5em;
	display: block;
	width: 1.5em;
	height: 1.5em;
	margin: auto;
	background: url(img/arw_anime.svg) no-repeat center;
	background-size: contain;
}
.tel-lp {
	line-height: 1.4;
}
.tel {
	font-family: 'Bree Serif';
	font-size: 6.8vw;
	color: #21cdaf;
}
@media screen and (min-width: 768px), print {
	.blk-contact-lp {
		padding: 6em 0;
	}
	.inner-contact-lp > p {
		line-height: 2;
	}
	.inner-contact-lp p {
		font-size: 18px;
	}
	.ttl-contact-lp {
		font-size: 60px;
	}
	.box-lp {
		font-size: 24px;
	}
	.btn-contact-lp a {
		max-width: 480px;
		font-size: 24px;
	}
	.tel {
		font-size: 42px;
	}
}

/*-------------------------------------------------------------------
Point
-------------------------------------------------------------------*/
.blk-lp-point-1 {
	margin-bottom: 4em;
}
.box-lp-point {
	position: relative;
	padding: 2em 1.25em;
	border: solid 1px #000;
}
.list-lp-point li {
	position: relative;
	padding-left: 2.25em;
	font-size: 4vw;
	font-weight: bold;
}
.list-lp-point li::before {
	content: "";
	position: absolute;
	top: .2em;
	left: 0;
	display: block;
	width: 6.4vw;
	height: 6.4vw;
	background: url('data:image/svg+xml,%3Csvg%20id%3D%22a%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2043.38%2034.56%22%3E%3Cpath%20d%3D%22M17.08%2C34.56h0c-.53%2C0-1.04-.21-1.41-.59L1.2%2C19.49c-1.61-1.61-1.61-4.22%2C0-5.83l3.24-3.22s.02-.02%2C.03-.03c1.61-1.57%2C4.2-1.56%2C5.79%2C.04l6.8%2C6.8L33.12%2C1.2h.01c.79-.79%2C1.83-1.2%2C2.94-1.2%2C1.11%2C0%2C2.14%2C.45%2C2.92%2C1.24l3.21%2C3.21c1.58%2C1.61%2C1.58%2C4.22%2C.01%2C5.82l-23.71%2C23.71c-.38%2C.38-.88%2C.59-1.41%2C.59ZM7.24%2C13.3l-3.22%2C3.2s-.04%2C.12%2C0%2C.17l13.05%2C13.07L39.37%2C7.44s.04-.13-.01-.18l-3.21-3.21c-.06-.06-.16-.06-.21-.01L18.49%2C21.48c-.78%2C.78-2.05%2C.78-2.83%2C0L7.45%2C13.27s-.13-.04-.17%2C0c0%2C.01-.02%2C.02-.03%2C.03ZM34.53%2C2.62h0Z%22%20style%3D%22fill%3A%2321cdaf%3B%22%2F%3E%3C%2Fsvg%3E') no-repeat center;
	background-size: contain;
}
.list-lp-point li:not(:last-child) {
	margin-bottom: 1em;
}
.svg-point.sp {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -16.28vw;
	display: block;
	margin: auto;
	width: 5.84vw;
	height: 16.28vw;
}
svg.svg-point.sp .svg-elem-1 {
  stroke-dashoffset: 183.740478515625px;
  stroke-dasharray: 183.740478515625px;
  -webkit-transition: stroke-dashoffset 2s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
          transition: stroke-dashoffset 2s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
}
svg.svg-point.sp.show .svg-elem-1 {
  stroke-dashoffset: 0;
}
.subttl-lp.point1 {
	margin-bottom: 1.25em;
}
.subttl-lp.point2 {
	width: 100vw;
	margin-left: calc( 50% - 50vw);
	margin-top: 3.75em;
	margin-bottom: 1em;
}
.blk-lp-point-1 p {
	text-align: center;
	font-size: 3.2vw;
}
.blk-lp-point {
	position: relative;
}
.ttl-pt-lp.point {
	height: 17.2vw;
	padding-top: 2.75vw;
	padding-right: 1em;
	margin-bottom: -17.2vw;
	z-index: 1;
	font-size: 4.4vw;
}
.ttl-pt-lp.point .pt-ttl {
	height: 17.2vw;
}
.ttl-pt-lp.point .pt-ttl::before {
	content: "Point";
	padding-top: 2em;
}
.ttl-pt-lp.point small {
	font-size: 2.8vw;
}
.img-lp-point {
	position: relative;
	margin-right: -6%;
	width: 106%;
	height: 70.8vw;
	background-position: center top;
	background-repeat: no-repeat;
	background-size: cover;
}
.txt-lp-point {
	margin: 0 auto;
	padding: 2em 0 3em;
	line-height: 1.625;
}
.txt-lp-point p {
	font-size: 3.2vw;
}
.txt-lp-point p + p {
	margin-top: 1em;
}
.blk-lp-point-2 {
	padding-bottom: 3.5em;
	text-align: center;
}
.blk-lp-point-2 > p {
	font-size: 3.2vw;
}
.txt-lp-point-2 {
	position: relative;
	padding: 1.5em 0 3.75em;
}
.txt-lp-point-2 span {
	position: relative;
	display: inline-block;
	background-color: rgba(255,255,255,.9);
	font-size: 5.6vw;
	font-weight: bold;
	z-index: 1;
}
.svg-point2 {
	position: absolute;
	left: 1.25em;
	right: 0;
	top: 0;
	display: block;
	width: 6vw;
	height: 20.7vw;
	margin: auto;
}
svg.svg-point2 .svg-elem-1 {
  stroke-dashoffset: 256.35862731933594px;
  stroke-dasharray: 256.35862731933594px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 2s cubic-bezier(0.47, 0, 0.745, 0.715) 0s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
          transition: stroke-dashoffset 2s cubic-bezier(0.47, 0, 0.745, 0.715) 0s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
}
svg.svg-point2.show .svg-elem-1 {
  stroke-dashoffset: 0;
  fill: rgb(255, 255, 255);
}
.box-lp-point-2 {
	position: relative;
	width: 78vw;
	height: 14.8vw;
	padding: 0;
	margin: 0 auto .75em;
	background-color: #21cdaf;
	font-size: 6.4vw;
	font-weight: bold;
	color: #fff;
}
.label-lp-point {
	position: relative;
	top: -1.75em;
	display: inline-block;
	padding: 0 .5em;
	background-color: #000;
	font-size: 4vw;
	color: #fff;
}
.box-lp-point-2 p {
	position: absolute;
	top: .5em;
	left: 0;
	right: 0;
	margin: auto;
}

@media screen and (min-width: 768px), print {
	.blk-lp-point-1 {
		margin-bottom: 6em;
	}
	.box-lp-point {
		padding: 3.9em;
		max-height: 290px;
		border-left: none;
	}
	.list-lp-point li {
		font-size: 24px;
	}
	.list-lp-point li::before {
		width: 37px;
		height: 29px;
	}
	.svg-point.pc {
		position: absolute;
		top: 0;
		left: 0;
	}
	svg.svg-point.pc .svg-elem-1 {
	  stroke-dashoffset: 767.2418823242188px;
	  stroke-dasharray: 767.2418823242188px;
	  -webkit-transition: stroke-dashoffset 5s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
	          transition: stroke-dashoffset 5s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
	}
	svg.svg-point.pc.show .svg-elem-1 {
	  stroke-dashoffset: 0;
	}
	.subttl-lp.point2 {
		width: 100%;
		margin-left: 0;
		margin-top: 2.5em;
	}
	.blk-lp-point-1 p {
		line-height: 2;
		font-size: 18px;
	}
	.blk-lp-point {
		height: 462px;
	}
	.ttl-pt-lp.point {
		height: 100px;
		margin-bottom: -100px;
		padding-top: .8em;
		padding-left: 140px;
		font-size: 30px;
	}
	.ttl-pt-lp.point small {
		font-size: 18px;
	}
	.ttl-pt-lp.point .pt-ttl {
		width: 100px;
		height: 100px;
		font-size: 36px;
	}
	.ttl-pt-lp.point .pt-ttl::before {
		padding-top: 1.25em;
		font-size: 18px;
	}
	.flxpc-lp-point {
		display: flex;
		align-items: stretch;
		justify-content: space-between;
		overflow: hidden;
	}
	.img-lp-point {
		position: absolute;
		right: 0;
		width: 48.125%;
		height: 462px;
		margin: 0;
		overflow: hidden;
	}
	.txt-lp-point {
		order: 2;
		width: 48%;
		margin-right: 52%;
		padding-top: 8em;
		padding-left: 2em;
		line-height: 1.875;
	}
	.txt-lp-point p {
		font-size: 16px;
	}
	.blk-lp-point-2 {
		padding-bottom: 6em;
	}
	.blk-lp-point-2 > p {
		line-height: 2;
		font-size: 18px;
	}
	.txt-lp-point-2 {
		padding: 4em 0 6.5em;
	}
	.txt-lp-point-2 span {
		font-size: 42px;
	}
	.svg-point2 {
		width: 43px;
		height: 195px;
	}
	.box-lp-point-2 {
		width: 584px;
		height: 110px;
		font-size: 48px;
	}
	.label-lp-point {
		font-size: 30px;
	}
}

/*-------------------------------------------------------------------
Price
-------------------------------------------------------------------*/
.box-lp.price {
	padding: .25em .5em;
	font-size: 3.2vw;
}
.price .pt-ttl {
	position: static;
	margin: 0;
}
.price .pt-ttl::before {
	content: "Type";
}
.price .blk-ttl small {
	display: block;
	font-size: 2.8vw;
	font-weight: normal;
}
.blk-price {
	padding: .4em 0;
	border-right: solid 1px #ccc;
	border-left: solid 1px #ccc;
	text-align: center;
	font-size: 6vw;
	font-weight: bold;
}
.blk-price b {
	font-family: 'Bree Serif';
	font-size: 200%;
	font-weight: normal;
	color: #21cdaf;
}
.price .blk-txt {
	border: solid 1px #ccc;
	border-top: none;
}
.price .blk-txt {
	padding-top: 1.5em;
}
.price .blk-txt b {
	display: block;
	padding-bottom: 1.5em;
	margin-bottom: 1.5em;
	border-bottom: solid 1px #ccc;
	text-align: center;
	font-size: 3.2vw;
}
.blk-txt .notes-lp-price {
	margin-top: .5em;
	font-size: 2.4vw;
}
@media screen and (min-width: 768px), print {
	.box-lp.price {
		font-size: 18px;
	}
	.blk-price {
		font-size: 30px;
	}
	.price .blk-txt {
		min-height: 209px;
	}
	.price .blk-ttl {
		font-size: 21px;
	}
	.price .blk-ttl small {
		font-size: 14px;
	}
	.price .blk-txt {
		padding-top: 1em;
	}
	.price .blk-txt b {
		padding-bottom: 1em;
		margin-bottom: 1em;
		font-size: 16px;
	}
	.blk-txt .notes-lp-price {
		font-size: 14px;
	}
}

/*-------------------------------------------------------------------
Facility
-------------------------------------------------------------------*/
.sec-facility {
	border-top: solid 1px #ccc;
}
.subttl-lp-facility {
	margin-bottom: 1em;
	line-height: 1.25;
	font-size: 5.2vw;
}
@media screen and (min-width: 768px), print {
	.subttl-lp-facility {
		font-size: 30px;
	}
}

/*-------------------------------------------------------------------
Step
-------------------------------------------------------------------*/
.step .pt-ttl {
	position: static;
	margin: 0;
}
.step .pt-ttl::before {
	content: "Step";
}
.step .blk-img {
	background-color: #999;
	border: solid .4vw #21cdaf;
}
.step .blk-txt {
	border: solid 1px #ccc;
	border-top: none;
}
@media screen and (min-width: 768px), print {
	.step .blk-img {
		border-width: 3px;
	}
	.step .blk-txt {
		min-height: 209px;
	}
}

/*-------------------------------------------------------------------
Voice
-------------------------------------------------------------------*/
.blk-lp-voice {
	position: relative;
}
.ttl-pt-lp.voice {
	margin-bottom: -13.32vw;
	z-index: 1;
	font-size: 3.2vw;
}
.ttl-pt-lp.voice .pt-ttl::before {
	content: "Voice";
}
.name-voice {
	font-family: 'Bree Serif';
	font-size: 5.6vw;
	font-weight: normal;
	color: #21cdaf;
}
.img-lp-voice {
	position: relative;
	margin-left: -6%;
	width: 106%;
	height: 70.8vw;
	background-position: center top;
	background-repeat: no-repeat;
	background-size: cover;
}
.txt-lp-voice {
	margin: 0 auto;
	padding: 2em 0 3em;
	line-height: 1.625;
}
.txt-lp-voice p {
	font-size: 3.2vw;
}
.txt-lp-voice p + p {
	margin-top: 1em;
}
@media screen and (min-width: 768px), print {
	.blk-lp-voice {
		height: 462px;
	}
	.ttl-pt-lp.voice {
		margin-bottom: -80px;
		font-size: 18px;
	}
	.name-voice {
		font-size: 36px;
	}
	.flxpc-lp-voice {
		display: flex;
		align-items: stretch;
		justify-content: space-between;
		overflow: hidden;
	}
	.img-lp-voice {
		position: absolute;
		left: 0;
		width: 48.125%;
		height: 462px;
		margin: 0;
		overflow: hidden;
	}
	.txt-lp-voice {
		order: 2;
		width: 48%;
		margin-left: 52%;
		padding-top: 8em;
		padding-right: 2em;
		line-height: 1.875;
	}
	.txt-lp-voice p {
		font-size: 16px;
	}
}

/*-------------------------------------------------------------------
Access
-------------------------------------------------------------------*/
.subttl-lp.access {
	margin-bottom: 1em;
}
.lead-access-lp {
	margin-bottom: 3em;
	margin-top: 0;
	text-align: center;
}
.lead-access-lp p {
	font-size: 3.2vw;
}
.salon_map_lp {
	width: 100vw;
	height: 70.8vw;
	margin-left: calc( 50% - 50vw );
	margin-bottom: 3em;
}
.access_blk {
	margin-bottom: 4em;
}
@media screen and (min-width: 768px), print {
	.lead-access-lp {
		margin-bottom: 4.5em;
	}
	.lead-access-lp p {
		line-height: 2;
		font-size: 18px;
	}
	.salon_map_lp {
		height: 450px;
		margin-bottom: 5.5em;
	}
}