@charset "utf-8";
@import url(../../../css/sp_reset.css);

/*==============================================
	sp_carenessspa.css
	Copyright(c)2018 happiness
===============================================*/
/* font */
@import url(https://fonts.googleapis.com/earlyaccess/roundedmplus1c.css);

/* block */
.break { display: block;}

/* font */
.p_size_s { font-size: 80%;}

#container { margin-top: -10px;; background: #f0f0ed;}

/* title */
h2.title { padding-top: 20px;}
h2.title > img { width: 100%; height: auto;}

/* mainImg */
.mainImg > img { width: 100%; margin: 20px auto; height: auto;}

/* present */
.present { text-align: center;}
.present img { width: 90%; height: auto;}

/* guide */
.guide { width: 90%; margin: 20px auto; display: flex; flex-wrap: wrap; list-style: none; font-size: 14px; text-align: left;}
.guide li { width: 48%; line-height: 40px; border-bottom: 1px dotted #575757;}
.guide li:nth-child(even) { margin-right: 2%;}
.guide li:nth-child(odd) { margin-left: 2%;}
.guide li:nth-of-type(1) { width: 100%; margin-left: 0;}
.guide li a { padding: 0 5px; font-weight: bold; display: block; color: #575757; position: relative;}
.guide li a::after {
	content: "\f054"; font-family: 'FontAwesome';
	position: absolute; right: 0; color: #cdcdcb;}

h3 > img { width: 100%; height: auto;}

/*-------- trouble ----------*/
.trouble { width: 90%; margin: auto;}
.trouble .intro { 
	margin: 30px auto auto; text-align: center;
	font-family: "Rounded Mplus 1c"; font-weight: bold; line-height: 40px; font-size: 110%;}
.trouble .intro::before {
	margin: 40px auto -20px; display: block; content: ""; border-bottom: 1px solid;}
.trouble .intro > span { padding: 0 5px; display: inline-block; background: #f0f0ed; color: #4b4b4b; font-size: 15px; letter-spacing: normal;}

.trouble > ul { list-style: none; display: flex; flex-wrap: wrap;}
.trouble > ul li { width: calc(100%/2); padding: 1%;}
.trouble > ul li img { width: 100%; height: auto;}

/*-------- #result --------*/
#result { margin: 100px auto auto; padding-bottom: 80px; background: #d7dce7; position: relative; color: #4b4b4b;font-size: 14.4px; text-align: left; letter-spacing: normal;
    font-family: Verdana, "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;}
#result h2 {
	width: 174px; height: 66px; margin: auto auto auto -87px; position: absolute; top: -64px; left: 50%;}
#result h2 > img { width: 100%; height: auto;}

#result ul { width: 90%; margin: auto; padding: 1px 0; list-style: none;}
#result ul li { margin: 4em auto 2em; padding: 15px; background: #fff; border-radius: 15px;}
#result ul li dl { position: relative;}
#result ul li dl dt { width: 90%; position: absolute; top: -3em; left: 0;}
#result ul li dl dt#result01::after { content: url(../img/result_t1_sub.png); position: absolute; top: -15px; right: -50px;}
#result ul li dl dt#result02::after { content: url(../img/result_t2_sub.png); position: absolute; top: -15px; right: -50px;}
#result ul li dl dt#result03::after { content: url(../img/result_t3_sub.png); position: absolute; top: -15px; right: -55px;}
#result ul li dl dt#result04::after { content: url(../img/result_t4_sub.png); position: absolute; top: -15px; right: -53px;}
#result ul li dl dt#result05::after { content: url(../img/result_t5_sub.png); position: absolute; top: -15px; right: -50px;}
#result ul li dl dt#result06::after { content: url(../img/result_t6_sub.png); position: absolute; top: -15px; right: -50px;}
#result ul li dl dt#result07::after { content: url(../img/result_t7_sub.png); position: absolute; top: -15px; right: -50px;}

#result ul li dl dt img { width: 100%; height: auto;}
#result ul li dl dd .text { padding: 2em 0;}
#result ul li dl dd .hence {
	margin-top: 2em; padding: 10px 0; background: #d7dce7; text-align: center;
	font-family: "Rounded Mplus 1c"; line-height: 130%; font-size: 110%; font-weight: bold;}
#result ul li dl dd .hence::before {
	width: 73px; height: 32px; margin: -50px auto 10px; display: block; content: "";
	background: url(../img/icon_result.png); background-size: 100%;}

#result ul li .push {
	width: 100%; height: 50px; margin-top: 15px; padding-left: 50px; display: table; position: relative; color: #304d8c;}
#result ul li .push::before {
	width: 50px; height: 50px; content: ""; display: block;
	background: url(../img/icon_push.png) no-repeat; background-size: 100%;
	position: absolute; left: 0;}

#result ul li .push .menuT,
#result ul li .push .menuT3row,
#result ul li .push .gomenu { height: 50px; display: table-cell; text-align: center; vertical-align: middle;}
#result ul li .push .menuT,
#result ul li .push .menuT3row { width: 80%; font-weight: bold; font-family: "Rounded Mplus 1c";}
#result ul li .push .gomenu { width: 20%; font-size: 80%;}
#result ul li .push .gomenu a { display: block; border: 1px solid; text-align: center; color: #304d8c;}
#result ul li .push .menuT3row { line-height: 100%;}


/*-------- #menu --------*/
#menu { border-top: 2px solid #304d8c; position: relative; color: #4b4b4b; text-align: left; letter-spacing: normal; font-family: Verdana, "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; font-size: 14.4px;}
#menu h2 {
	width: 174px; height: 68px; margin: auto auto auto -87px;
	position: absolute; top: -66px; left: 50%; z-index: 2;}
#menu h2::after { width: 171px; margin-left: -85px; content: ""; display: block; border-bottom: 3px solid #f0f0ed; position: absolute; z-index: 1; left: 50%;}
#menu h2 > img { width: 100%; height: auto;}
#menu > div, #menu > ul { width: 85%; margin: 25px auto;}

#menu > div h3 { padding-left: 80px; font-weight: normal; line-height: 80px; font-size: 90%; position: relative;}
#menu > div h3 .mainMenuT { display: block; font-size: 140%; font-weight: bold; font-family: "Rounded Mplus 1c";}

#menu h3::before {
	width: 65px; height: 65px; line-height: 65px; display: inline-block;
	background: #304d8c; border-radius: 50%;
	text-align: center; font-size: 60%; color: #fff; position: absolute; left: 0; top: 0;}
#menu #mspa h3::before { content: "リフトアップ";}
#menu #cspa h3::before { content: "デトックス";}

#menu .time { text-align: center; font-weight: bold; font-size: 120%;}
#menu .priceB { width: 80%; margin: auto; text-align: right;}
#menu .priceB .price { font-size: 150%; font-weight: bold; color:#304d8c;}

#menu > div .img { margin: 10px auto;}
#menu > div .img > img { width: 100%; height: auto;}

#menu > ul { list-style: none;}
#menu > ul li { width: 100%; margin: 1% auto; display: table;}
#menu > ul li .index,
#menu > ul li .menuName { display: table-cell; vertical-align: middle;}

#menu table { width: 90%; margin: 5px auto; letter-spacing: normal; list-style: none;}


#menu table th { width: 50%; padding: 2%; background: #d7dce7; border-right: 5px solid #f0f0ed; vertical-align: middle; text-align: center; font-weight: 600;}
#menu table th.borderT { border-top: 2px solid #f0f0ed;}
#menu table td { width: 50%; padding: 2%; border: 2px solid #d7dce7;}
#menu table td .menutitle span {
	display: block; font-size: 110%; font-weight: bold; line-height: 130%;}
#menu table td .menuP { margin: 1px auto; font-size: 120%; font-weight: bold; text-align: center;}
#menu table td .menutime {
	background: #304d8c; display: block; font-size: 70%; font-weight: normal; color: #fff;}

#menu table .small { margin-right: 10px; font-size: 60%; font-weight: normal;}

/* basic */
#menu .basic > p { text-align: center; font-weight: bold;}
#menu .basic > p .dblock { display: block; color: #304d8c;}
#menu .basic dl { margin-top: 10px; padding: 10px; border: 1px solid #304d8c;}
#menu .basic dt { background: #d7dce7; text-align: center; color: #304d8c;}
#menu .basic dt > span { display: block; font-size: 2.5rem; font-weight: bold;}
#menu .basic dd .price { margin: 10px auto; text-align: center; font-size: 3rem;}
#menu .basic dd .price .small { font-size: 0.8rem;}

/*-------- #persistence --------*/
#persistence { margin: 100px auto auto; padding: 1px 0 80px; background: #d7dce7; position: relative; color: #4b4b4b; letter-spacing: normal; font-size: 14.4px; text-align: left;}
#persistence h2 {
	width: 174px; height: 66px; margin: auto auto auto -87px; position: absolute; top: -64px; left: 50%;}
#persistence h2 > img { width: 100%; height: auto;}

#persistence > .block { width: 80%; margin: 30px auto;}
#persistence > .block > dl { margin: 15px auto;}
#persistence > .block > dl dt {
	margin-bottom: 15px; font-size: 120%; font-weight: bold; font-family: "Rounded Mplus 1c";
	line-height: 130%; text-align: center; color: #304d8c;}

#persistence img { width: 100%; height: auto;}

#persistence .staff > .text {
	margin-bottom: 20px; border: 1px solid;
	font-size: 110%; font-weight: bold; font-family: "Rounded Mplus 1c";
	line-height: 40px; text-align: center;}

#persistence .staff .img { width: 200px; height: 200px; margin: auto; border-radius: 50%; overflow: hidden;}
#persistence .staff dl { margin-top: 25px;}
#persistence .staff dl dt { margin-bottom: 10px; padding-bottom: 5px; border-bottom: 1px solid; font-size: 110%;}
#persistence .staff dl dt span { font-weight: normal;}

#persistence .staff .integrant { margin-top: 25px; padding: 15px; background: #fff;}
#persistence .staff .integrant h3 { font-size: 110%; text-align: center; font-family: "Rounded Mplus 1c"; color: #304d8c; font-weight: 600;}
#persistence .staff .integrant h3 .check { font-size: 120%;}
#persistence .staff .integrant h3 + p { margin-top: 15px; text-align: center;}
#persistence .staff .integrant dt { font-weight: bold;}


/*-------- #voice --------*/
#voice { padding-top: 20px; border-top: 2px solid #304d8c; position: relative; color: #4b4b4b; letter-spacing: normal; font-size: 14.4px; text-align: left;}
#voice h2 {
	width: 174px; height: 68px; margin: auto auto auto -87px;
	position: absolute; top: -68px; left: 50%; z-index: 2;}
#voice h2::after { width: 171px; margin-left: -85px; content: ""; display: block; border-bottom: 3px solid #f0f0ed; position: absolute; z-index: 1; left: 50%;}
#voice h2 img { width: 100%; height: auto;}

#voice > dl { width: 90%; margin: 20px auto; padding: 20px; border: 2px solid #d7dce7;}
#voice > dl dt {
	margin-bottom: 5px; padding-bottom: 5px;
	font-size: 110%; font-weight: bold; border-bottom: 1px dotted #d7dce7;}
#voice > dl dd .spec { margin-bottom: 10px; font-size: 90%; text-align: right;}


/*-------- #shop --------*/
#shop { width: 90%; margin: 30px auto; margin-bottom: 0px; padding: 20px 0; padding-bottom: 5%; color: #4b4b4b; letter-spacing: normal; font-size: 14.4px; text-align: left; font-family: Verdana, "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;}
#shop h2 {
	margin-bottom: 20px; padding: 5px 0; border-top: 1px solid; border-bottom: 1px solid; font-size: 110%; text-align: center; font-weight: 600;}
#shop ul { list-style: none;}
#shop > ul > li { margin-bottom: 10px; display: flex;}
#shop > ul > li a { display: block; line-height: 25px; color: #575757;}
#shop > ul > li a::before { margin-right: 8px; content: "\f054"; font-family: 'FontAwesome'; color: #cdcdcb;}
#shop ul > li p { width: 20%; font-weight: bold; line-height: 25px; color: #304d8c;}