@charset "utf-8";

/* ================================================================
	トップページ
================================================================ */

#page_top #container {
	background: #fdeeea;
	background: var(--color-white);
}
#page_top #contents {
	padding: 0 0;
	background: #fdeeea;
	background: var(--color-white);
}

#page_top #contents section {
	width: 78%;
	padding: 0 11%;
}
#page_top #contents section > div {
	margin: 10% 11%;
}
#page_top #contents section > div.maintain {
	margin-bottom: 1.6em;
}
#page_top #contents section > div.improve {
	margin-top: 1.6em;
}

#page_top #contents section > h3 {
	display: inline-block;
	color: var(--color-blue);
	font-size: 1.1em;
	font-weight: bold;
	letter-spacing: 0.1em;
	transform: scale(1,1.1);
	border-bottom: solid 1px var(--color-blue);
	margin-top: 10%;
	margin-bottom: 1em;
}

#page_top #contents section > div a,
#page_menu #contents h2,
#page_shop #contents section#shop_index h2,
#page_shop #contents section#menu .detail strong,
#page_search #contents h2 {
	display: block;
	width: 100%;
	text-align: center;
	font-weight: bold;
	letter-spacing: 0.1em;
	text-indent: 0.4em;
	text-decoration: none;
	color: var(--color-black);
	padding: 1em 0;
	border-radius: 2em;
	box-shadow: 0 0 1em rgba(255,255,255,0) inset;
	margin: 1em auto;
}
#page_top #contents section > div a {
	transition: box-shadow 0.4s;
	position: relative;
}
#page_top #contents section > div a::before {
	content: '';
	display: block;
	width: 0.7em;
	height: 0.7em;
	border-top: solid 1px var(--color-gray);
	border-right: solid 1px var(--color-gray);
	transform: rotate(45deg) translateY(-50%);
	position: absolute;
	top: 50%;
	right: 8%;
}
#page_top #contents section > div a::after {
	content: '　';
}
#page_top #contents section > div a:hover,
#page_top #contents section > div a:active {
	box-shadow: 0 0 1em rgba(255,255,255,1) inset;
	opacity: 1;
}
#page_top #contents section > div.maintain a {
	background: var(--color-green);
	background: rgba(110,185,174,0.33);
}
#page_top #contents section > div.improve a {
	background: var(--color-red);
	background: rgba(191,118,118,0.33);
}
#page_top #contents section > div.shop {
	margin: 10% auto;
}
#page_top #contents section > div.shop a {
	color: var(--color-white);
	background: var(--color-blue);
	margin-top: 10%;
	border-radius: 0;
	box-shadow: none;
}
#page_top #contents section > div.shop a::before,
#page_top #contents section > div.shop a::after {
	content: none;
}
#page_top #contents section > div.shop a span {
	display: block;
	border: solid 1px var(--color-white);
	box-sizing: border-box;
	padding: 1.5em 0;
	margin: 0 1em;
	position: relative;
	transition: 0.4s;
}
#page_top #contents section > div.shop a span::before,
#page_top #contents section > div.shop a span::after {
	content: '';
	display: block;
	position: absolute;
	transition: 0.4s;
}
#page_top #contents section > div.shop a span::before {
	background: linear-gradient(to right, var(--color-blue) 0%, var(--color-blue) 10%, transparent 10%, transparent 90%, var(--color-blue) 90%, var(--color-blue) 100%);
	width: calc(100% + 2px);
	height: 25%;
	top: 37.5%;
	left: -1px;
}
#page_top #contents section > div.shop a span::after {
	background: linear-gradient(to bottom, var(--color-blue) 0%, var(--color-blue) 10%, transparent 10%, transparent 90%, var(--color-blue) 90%, var(--color-blue) 100%);
	width: 54%;
	height: calc(100% + 2px);
	top: -1px;
	left: 23%;
}
#page_top #contents section > div.shop a:hover span {
	border-color: transparent;
}
#page_top #contents section > div.shop a:hover span::before {
	height: 100%;
	top: 0%;
	height: 0%;
	top: 50%;
}
#page_top #contents section > div.shop a:hover span::after {
	width: 100%;
	left: 0%;
}
#page_top #contents section > div.complex ul {
	display: flex;
	justify-content: space-between;
}
#page_top #contents section > div.complex ul li {
	flex-basis: 31%;
}
#page_top #contents section > div.complex ul li a {
	letter-spacing: 0;
	text-indent: 0;
}
#page_top #contents section > div.complex ul li:nth-child(3) a {
	line-height: 1.2;
	padding: 0.6em 0;
	white-space: nowrap;
}

/* 晴れの日コース 非公開 */
#page_top #contents section > div.special {
	pointer-events: none;
	filter: grayscale(0.4);
	opacity: 0.4;
	position: relative;
}
#page_top #contents section > div.special::after {
	content: 'comming soon !';
	display: block;
	width: 100%;
	text-align: center;
	color: var(--color-jet);
	font-size: 2em;
	letter-spacing: -0.05em;
	position: absolute;
	top: 1em;
	left: 0;
}



/* ================================================================
	コース一覧ページ
================================================================ */

#page_menu #contents {
}
#page_menu #contents section {
	width: 84%;
	padding: 1.8em 8%;
}
#page_menu #contents section h2 {
	color: var(--color-white);
}
#page_menu #contents section.maintain h2 {
	background: var(--color-green);
}
#page_menu #contents section.improve h2 {
	background: var(--color-red);
}

#page_menu #contents a {
	display: block;
	width: 100%;
	/* background: var(--color-gray-l); */
	border: solid 2px var(--color-gray);
	box-shadow:  0 0 0.1em var(--color-gray) inset, 0 0 10em var(--color-gray-l) inset;
	box-sizing: border-box;
	text-decoration: none;
	font-size: 0.9em;
	overflow: hidden;
	margin-top: 3.5em;
}
#page_menu #contents section.maintain a {
	border-color: var(--color-green);
	box-shadow: 0 0 0.1em var(--color-green) inset, 0 0 10em rgba(110,185,174,0.2) inset;
}
#page_menu #contents section.improve a {
	border-color: var(--color-red);
	box-shadow: 0 0 0.1em var(--color-red) inset, 0 0 10em rgba(191,118,118,0.2) inset;
}

#page_menu #contents a img {
	width: 100%;
}
#page_menu #contents a div {
	padding: 0.6em 1em;
}
#page_menu #contents a div ul {
}
#page_menu #contents a div ul li {
	display: inline-block;
	margin-right: 1.2em;
	font-size: 0.9em;
	color: var(--color-gray);
	text-shadow: 0 0 0.1em var(--color-white);
}
#page_menu #contents a div ul li:last-child {
	margin-right: 0;
}
#page_menu #contents a div strong {
	display: block;
	margin-top: 0.9em;
	font-weight: normal;
	/* display: none; */
}
#page_menu #contents a div h3 {
	color: var(--color-jet);
	text-shadow: 0 0 0.2em var(--color-white);
	font-size: 1.2em;
	font-weight: bold;
	margin: 0.15em 0;
	/* margin-top: 0.6em; */
}
#page_menu #contents a div i {
	display: inline-block;
	font-size: 0.9em;
	font-style: normal;
	color: var(--color-gray);
	text-shadow: 0 0 0.1em var(--color-white);
	margin-left: 0.6em;
}
#page_menu #contents a span {
	display: block;
	margin: 0.4em 0 1.2em 0;
	text-align: center;
}
#page_menu #contents section.maintain a span {
	color: var(--color-green);
}
#page_menu #contents section.improve a span {
	color: var(--color-red);
}


/* ================================================================
	店舗詳細ページ
================================================================ */

#page_shop #contents {
}

/* お店紹介 */

#page_shop #contents section#shop {
	width: 84%;
	padding: 1.8em 8%;
	text-align: justify;
}
#page_shop #contents section#shop > span {
	padding-top: 1%;
	margin-top: 3%;
	font-size: 0.9em;
	line-height:1.6em;
}
#page_shop #contents section#shop h2 {
	padding-bottom: 1%;
	margin-bottom: 2%;
	font-size: 1.5em;
	font-weight: bold;
	text-align: left;
}
#page_shop #contents section#shop h2 em {
	display: inline-block;
	font-style: normal;
}
#page_shop #contents section#shop h2 span {
	font-size: 0.8em;
	line-height: 1em;
}

#page_shop #contents section#shop ul.anchor {
	display: flex;
	justify-content: space-between;
	width: 100%;
	margin: 2% auto;
}
#page_shop #contents section#shop ul.anchor li {
	display: inline-block;
	background: var(--color-blue);
	width: 33%;
	padding: 3px 0;
}
#page_shop #contents section#shop ul.anchor li:nth-child(3) {
	width: 34%;
}
#page_shop #contents section#shop ul.anchor li a {
	display: block;
	font-size: 0.7em;
	line-height: 2em;
	white-space: npwrap;
	text-decoration: none;
	text-align: center;
	color: var(--color-white);
	margin: 1% 0;
	border-right: 1px solid var(--color-white);
	box-sizing: border-box;
}
#page_shop #contents section#shop ul.anchor li:last-child a {
	border-right: none;
}
#page_shop #contents section#shop ul.anchor li:first-child {
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px; 
}
#page_shop #contents section#shop ul.anchor li:last-child {
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
}
#page_shop #contents section#shop ul.anchor li a:hover {
}

#page_shop #contents section#shop ul.keyword {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 100%;
	margin: 1.4rem auto;
}
#page_shop #contents section#shop ul.keyword li {
	width: 30%;
	text-align: center;
	font-size: 0.7em;
	line-height: 2.8em;
	white-space: nowrap;
	overflow: hidden;
	color: var(--color-blue);
	background: var(--color-white);
	border-radius: 10px;
	border: 1px solid var(--color-blue);
	box-shadow: 0 0 5px var(--color-gray);
	margin: 0.6rem auto;
}
#page_shop #contents section#shop ul.keyword li strong {
	font-weight: normal;
}
#page_shop #contents section#shop ul.keyword li strong.small {
	font-size: 1em;
	letter-spacing: -0.1em;
}

#page_shop #contents section#shop img {
	width: 100%;
	margin-bottom: 1.5rem;
}
#page_shop #contents section#shop h3 {
	font-weight: bold;
	font-size: 1.1em;
	margin: 0.5rem 0;
}

/* メニュー */

#page_shop #contents section#menu {
	padding-top: 1.8em;
}
#page_shop #contents section#menu > ul {
	width: 96%;
	margin: 0 2%;
}
#page_shop #contents section#menu > ul > li {
	width: 100%;
	padding: 0;
	border: solid 2px var(--color-gray);
	box-sizing: border-box;
	margin-bottom: 2%;
	margin-bottom: 4%;
}
#page_shop #contents section#menu > ul > li:last-child {
	margin-bottom: 0;
}
#page_shop #contents section#menu > ul > li.maintain {
	border-color: var(--color-green);
}
#page_shop #contents section#menu > ul > li.improve {
	border-color: var(--color-red);
}

#page_shop #contents section#menu > ul > li .detail {
	text-align: justify;
	padding: 1em 6%;
	padding-bottom: 1.2em;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	text-shadow: 0 0 0.1em var(--color-white);
}
#page_shop #contents section#menu > ul > li.maintain .detail {
	box-shadow: 0 0 0.1em var(--color-green) inset, 0 0 10em rgba(110,185,174,0.2) inset;
	box-shadow: 0 0 15em rgba(110,185,174,0.1) inset;
}
#page_shop #contents section#menu > ul > li.improve .detail {
	box-shadow: 0 0 0.1em var(--color-red) inset, 0 0 10em rgba(191,118,118,0.2) inset;
	box-shadow: 0 0 15em rgba(191,118,118,0.1) inset;
}
/*
#page_shop #contents section#menu > ul > li.luxury .detail {
	background-image: url(../image/bg_menu_luxury.jpg);
}
#page_shop #contents section#menu > ul > li.special .detail {
	background-image: url(../image/bg_menu_special.jpg);
}
#page_shop #contents section#menu > ul > li.complex .detail {
	background-image: url(../image/bg_menu_complex.jpg);
}
*/
#page_shop #contents section#menu > ul > li .detail strong {
	font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	letter-spacing: 0.6em;
	font-weight: normal;
	margin: 1em 0;
	border-radius: 0;
	box-shadow: 0 0 0.2em rgba(255,255,255,0.2);
	text-shadow: none;
	position: relative;
}
#page_shop #contents section#menu > ul > li .detail strong::before {
	content: '';
	display: block;
	height: 2em;
	width: 100%;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	position: absolute;
	top: -1.1em;
	z-index: 9;
}
#page_shop #contents section#menu > ul > li.maintain .detail strong {
	background: var(--color-green);
	background: rgba(110,185,174,0.4);
}
#page_shop #contents section#menu > ul > li.maintain .detail strong::before {
	background-image: url(../image/txt_maintain.png);
}
#page_shop #contents section#menu > ul > li.improve .detail strong {
	background: var(--color-red);
	background: rgba(191,118,118,0.4);
}
#page_shop #contents section#menu > ul > li.improve .detail strong::before {
	background-image: url(../image/txt_improve.png);
}
#page_shop #contents section#menu > ul > li .detail img {
	width: 100%;
}
#page_shop #contents section#menu > ul > li .detail ul {
	margin-top: 0.6em;
}
#page_shop #contents section#menu > ul > li .detail ul li {
	display: inline-block;
	margin-right: 1.2em;
	font-size: 0.8em;
	color: var(--color-gray);
}
#page_shop #contents section#menu > ul > li .detail ul li:last-child {
	margin-right: 0;
}
#page_shop #contents section#menu > ul > li .detail h3 {
	color: var(--color-gray);
	font-size: 1.2em;
	font-weight: bold;
	text-shadow: 0 0 0.1em var(--color-gray);
	margin: 0.15em 0;
	margin-top: 0.6em;
}
#page_shop #contents section#menu > ul > li .detail span {
	font-size: 0.9em;
	color: var(--color-gray);
	text-align: left;
	display: block;
	margin-bottom: 0.8em;
}
#page_shop #contents section#menu > ul > li .detail span i {
	display: inline-block;
	font-size: 0.9em;
	font-style: normal;
	margin-left: 0.6em;
}
#page_shop #contents section#menu > ul > li.maintain .detail ul li,
#page_shop #contents section#menu > ul > li.maintain .detail h3,
#page_shop #contents section#menu > ul > li.maintain .detail span {
	color: var(--color-green);
	text-shadow: 0 0 0.1em var(--color-white);
	text-shadow: 0 0 0.1em var(--color-white), 0 0 1em var(--color-white);
}
#page_shop #contents section#menu > ul > li.improve .detail ul li,
#page_shop #contents section#menu > ul > li.improve .detail h3,
#page_shop #contents section#menu > ul > li.improve .detail span {
	color: var(--color-red);
	text-shadow: 0 0 0.1em var(--color-white);
	text-shadow: 0 0 0.1em var(--color-white), 0 0 1em var(--color-white);
}
#page_shop #contents section#menu > ul > li .detail h4 {
	font-weight: bold;
	font-size: 1em;
	margin-bottom: 0.2em;
}

#page_shop #contents section#menu > ul > li .point {
	padding: 1em 6%;
	padding-bottom: 1.2em;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	box-shadow:  0 0 0.1em var(--color-gray) inset, 0 0 10em var(--color-gray-l) inset;
}
#page_shop #contents section#menu > ul > li.maintain .point {
	/* background-image: url(../image/bg_point_luxury.jpg); */
	box-shadow:  0 0 0.1em var(--color-green) inset, 0 0 10em rgba(110,185,174,0) inset;
	box-shadow:  0 0 0.2em rgba(110,185,174,0.2) inset;
}
#page_shop #contents section#menu > ul > li.improve .point {
	/* background-image: url(../image/bg_point_special.jpg); */
	box-shadow:  0 0 0.1em var(--color-red) inset, 0 0 10em rgba(191,118,118,0) inset;
	box-shadow:  0 0 0.2em rgba(191,118,118,0.2) inset;
}
#page_shop #contents section#menu > ul > li .point strong {
	display: block;
	width: 100%;
	height: 3em;
	line-height: 3em;
	color: var(--color-white);
	font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	text-align: center;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	margin: 1em 0;
	margin-top: 0.4em;
}
#page_shop #contents section#menu > ul > li.maintain .point strong {
	background-image: url(../image/deco_maintain.svg);
}
#page_shop #contents section#menu > ul > li.improve .point strong {
	background-image: url(../image/deco_improve.svg);
}
#page_shop #contents section#menu > ul > li .point figure {
	width: 100%;
	border-radius: 0.5rem;
	overflow: hidden;
}
#page_shop #contents section#menu > ul > li.maintain .point figure {
	background: rgba(110,185,174,0.33);
	text-shadow: 0 0 1em var(--color-white);
}
#page_shop #contents section#menu > ul > li.improve .point figure {
	background: rgba(191,118,118,0.33);
	text-shadow: 0 0 1em var(--color-white);
}
#page_shop #contents section#menu > ul > li .point figure img {
	width: 100%;
}
#page_shop #contents section#menu > ul > li .point figure figcaption {
	font-size: 0.9em;
	/* text-shadow: 0 0 0.2em var(--color-white); */
	margin: 0.8em 1em;
}
#page_shop #contents section#menu > ul > li .point ul {
	padding-bottom: 0.6em;
}
#page_shop #contents section#menu > ul > li .point ul li {
	font-size: 0.9em;
	text-align: justify;
	text-shadow: 0 0 0.2em var(--color-white);
	border-bottom: solid 2px var(--color-gray);
	padding: 0.8em 0.5em;
	padding-left: 1.5em;
	position: relative;
}
#page_shop #contents section#menu > ul > li .point ul li::before {
	content: '●';
	color: var(--color-gray);
	position: absolute;
	left: 0.5em;
}
#page_shop #contents section#menu > ul > li.maintain .point ul li {
	border-color: var(--color-green);
}
#page_shop #contents section#menu > ul > li.maintain .point ul li::before {
	color: var(--color-green);
}
#page_shop #contents section#menu > ul > li.imorove .point ul li {
	border-color: var(--color-red);
}
#page_shop #contents section#menu > ul > li.improve .point ul li::before {
	color: var(--color-red);
}

/* インフォメーション */

#page_shop #contents section#info {
	width: 100%;
	margin: 1.8em auto;
	padding-top: 1.8em;
}
#page_shop #contents section#info strong {
	display: block;
	color: var(--color-white);
	background: var(--color-gray);
	font-weight: normal;
	text-align: center;
	padding: 0.1em 0;
}
#page_shop #contents section#info > ul {
	width: 100%;
}
#page_shop #contents section#info > ul > li {
	width: 100%;
	/* margin-bottom: 0.5em; */
	/* border-top: 1px solid var(--color-gray); */
}
#page_shop #contents section#info > ul > li:last-child {
	margin-bottom: 0;
}
#page_shop #contents section#info > ul > li div {
	width: 90%;
	padding: 3% 5%;
	border-bottom: 1px solid var(--color-gray);
	background: var(--color-gray-l);
}
#page_shop #contents section#info > ul > li div span {
	font-size: 0.8em;
}
#page_shop #contents section#info > ul > li div h3 {
	font-size: 1.1em;
	font-weight: bold;
}

#page_shop #contents section#info > ul > li dl {
	line-height: 1.8em;
	width: 100%;
	overflow: hidden;
}
#page_shop #contents section#info > ul > li dl dt {
	color: var(--color-blue);
	width: 15%;
	padding: 3% 0 3% 5%;
	float: left;
	overflow: hidden;
}
#page_shop #contents section#info > ul > li dl dd {
	padding: 3% 5% 3% 25%;
	border-bottom: 1px solid var(--color-gray);
}
#page_shop #contents section#info > ul > li dl dd a.map {
	display: inline-block;
	font-size: 0.8em;
	color: var(--color-white);
	background: var(--color-gray);
	text-decoration: none;
	padding: 0 0.7em;
	border-radius: 2em;
	float: right;
	position: relative;
	padding-right: 1.6em;
}
#page_shop #contents section#info > ul > li dl dd a.map::after {
	content: '';
	display: block;
	width: 1em;
	height: 1.4em;
	background: url(../image/icon_map.svg) no-repeat center;
	background-size: contain;
	position: absolute;
	right: 0.45em;
	bottom: 0.45em;
}
#page_shop #contents section#info > ul > li ul.link {
	width: 90%;
	padding: 1em 5%;
	display: flex;
	justify-content: space-between;
	padding-bottom: 1.8em;
	border-bottom: 1px solid var(--color-gray);
}
#page_shop #contents section#info > ul > li ul.link li {
	width: 30%;
}
#page_shop #contents section#info > ul > li ul.link li a {
	display: block;
	width: 100%;
	text-align: center;
	text-decoration: none;
	font-size: 0.8em;
	line-height: 3em;
	color: var(--color-white);
	background: var(--color-gray);
	border-radius: 10px;
}
#page_shop #contents section#info > ul > li ul.link li a.none {
	pointer-events: none;
	background: var(--color-gray-l);
}



/* ================================================================
	サロン一覧ページ
================================================================ */

#page_shop #contents section#shop_index {
	width: 84%;
	padding: 1.8em 8%;
}
#page_shop #contents section#shop_index h2 {
	color: var(--color-white);
	background: var(--color-blue);
}

#page_shop #contents section#shop_index ul {
	margin-top: 3.2em;
}
#page_shop #contents section#shop_index li {
	margin-bottom: 5%;
}
#page_shop #contents section#shop_index li:last-child {
	margin-bottom: 0;
}
#page_shop #contents section#shop_index li a {
	display: block;
	color: var(--color-black);
	text-decoration: none;
	padding: 1% 0;
	overflow: hidden;
}
#page_shop #contents section#shop_index li img {
	float: left;
	width: 204px;
	height: 134px;
	margin-right: 20px;
	background: rgba(118,156,191,0.33);
}
#page_shop #contents section#shop_index li div {
	padding-left: 224px;
}
#page_shop #contents section#shop_index li p.si_shop_location {
	color: var(--color-gray);
	font-size: 0.9em;
	line-height: 1.25em;
}
#page_shop #contents section#shop_index li p.si_main_copy {
	color: var(--color-blue);
	line-height: 1.25em;
	margin: 7px 0;
}
#page_shop #contents section#shop_index p.si_shop_name {
	font-weight: bold;
	margin: 0;
}
#page_shop #contents section#shop_index p.si_shop_name span {
	color: var(--color-jet);
	font-size: 1.25em;
	line-height: 1.2em;
	display: inline-block;
}



/* ================================================================
	サイト内検索ページ
================================================================ */

#page_search #contents section {
	width: 84%;
	padding: 1.8em 8%;
}
#page_search #contents section h2 {
	color: var(--color-white);
	background: var(--color-blue);
}
#page_search #contents section > div {
	width: 100%;
	margin-top: 2.5em;
	font-size: 1em;
	min-height: 40vh;
}
#page_search #contents section > div a {
	font-weight: bold;
}