@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;700&family=Noto+Sans+JP:wght@300;400;500;700&family=Shippori+Mincho:wght@400;500;700&display=swap');


*, *:before, *:after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

html, body, h1, h2, h3, h4, h5, h6, p,
ul, ol, li, dl, dt, dd, a {
	margin: 0;
	padding: 0;
	font-size: 100%;
	font-weight: normal;
	line-height: 1;
}

a { color: inherit;text-decoration: none;transition: all 0.3s ease 0s; }
li {list-style: none;}
img {max-width: 100%;}


html {
	font-size: 10px;
	font-weight: 400;
	color: #333;
	-webkit-text-size-adjust: 100%;
/*	scroll-behavior: smooth;*/
}

body {
	font-size: 1.6rem;
	font-family: 'Noto Sans JP', "Hiragino Kaku Gothic ProN","メイリオ", sans-serif;
	font-style: normal;
	font-weight: 300;
	color:#626262;
	background:#fff;
}

.l-wrap {
	width: 100%;
	position: relative;
	padding: 0 0 0;
}
@media screen and (min-width: 1025px) {
	.l-wrap {
		padding: 0;
		overflow: hidden;
	}
}

.pcv { display:none; }
.spv { display:block; }

@media screen and (min-width: 1025px) {
	.pcv { display:block; }
	.spv { display:none; }
}

.floL {float:left;}
.floR {float:right;}

.clear  {content:"";display:table;clear:both;zoom:1;}
.ph-img { width:100%;height:auto; }

.shiM { font-family: 'Shippori Mincho', serif; }
.noto { font-family: 'Noto Sans JP', "Hiragino Kaku Gothic ProN","メイリオ", sans-serif; }
.danS { font-family: 'Dancing Script', cursive; }


/*********************************************************************************************

	HEADER

**********************************************************************************************/
#header {
	background:#fff;
	position:relative;
}
.h-inner {
	display:flex;
	justify-content: start;
	flex-wrap:wrap;
	align-items:center;
	padding:10px 0 10px 2%;
}

.siteid {  }
.siteid a {
	display:block;
	text-indent:-9999px;
	background:url(../img/msalon/siteid_sp.png) 0 0 no-repeat;
	background-size:100%;
	width:145px;
	height:31px;
}

@media screen and (min-width: 1025px) {
	.h-inner { padding:15px 0 15px 3%; }
	.siteid a {
		background:url(../img/msalon/siteid.png) 0 0 no-repeat;
		background-size:100%;
		width:290px;
		height:39px;
	}
}


.h-info {
	position:relative;
	padding:0;
	margin:0 0 0 10px;
}

.h-info li {
	font-size:1.6rem;
	font-weight:700;
	color:#7e1d6c;
	font-family: 'Shippori Mincho', serif;
	margin:0 0 8px 0;
}
.h-info li span {
	position:relative;
	padding:0 0 0 1.2em;
}
.h-info li span:before {
	content:"\f095";
	display:block;
	font-family: 'Font Awesome 6 Free';
	font-weight: 900;
	font-size:1.4rem;
	color:#d086c2;
	position:absolute;top:50%;left:0;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}
.h-info li.i-time span:before { content:"\f017"; }

@media screen and (min-width: 1025px) {
	.h-info {
		letter-spacing: -.4em;
		position:relative;
		padding:10px 0 10px 20px;
		margin-left:20px;
	}

	.h-info:before {
		content:"";
		display:block;
		width: 1px;
		height:100%;
		background:#d086c2;
		position:absolute;top:0;left:0;
	}
	.h-info li {
		display: inline-block;
		letter-spacing: normal; 
		font-size:2.4rem;
		margin:0 20px 0 0;
	}
	.h-info li span { padding:0 0 0 1em; }
	.h-info li span:before { font-size:1.7rem; }
}


.btn-site {
	position:absolute;top:10px;right:0;
	text-align:center;
}
.btn-site a {
	display:inline-block;
	background:#d086c2;
	padding:8px 5px 10px 1.1em;
	border-top-left-radius:30px;
	border-bottom-left-radius:30px;
	color:#fff;
	font-size:1.3rem;
	line-height:1;
}
.btn-site a span { display:block;font-size:80%;margin:5px 0 0 0; }

@media screen and (min-width: 1025px) {
	.btn-site { top:13px; }
	.btn-site a {
		padding:15px 10px 15px 2em;
		font-size:1.8rem;
	}
	.btn-site a span { display:inline-block;margin:0 0 0 10px; }
}




/*********************************************************************************************

	FOOTER

**********************************************************************************************/

#footer {
	background:#9a5a8d;
	padding:15px 0;
	text-align:center;
}
.f-copy {
	font-size:1.2rem;
	color:#fff;
}

@media screen and (min-width: 1025px) {
	#footer { padding:30px 0; }
}

#page_top{
	position: fixed;bottom: 10px;right: 10px;
	opacity: 1.0;
	z-index:500;
}
#page_top a{
	display: block;
	text-decoration: none;
}

#page_top a img {
	width:50px;
	height:50px;
}


@media screen and (min-width: 1025px) {
	#page_top{
		right: 50px;
		bottom:50px;
	}
	#page_top a img {
		width:62px;
		height:62px;
	}
}


/*********************************************************************************************

	CONTENTS

**********************************************************************************************/

@media screen and (max-width: 1024px) {
	.f-box {
		display:-webkit-box;
		display: -webkit-flex;
		display:-ms-flexbox;
		display: flex;
		-webkit-flex-wrap:wrap;
		-ms-flex-wrap:wrap;
		flex-wrap:wrap;
	}
	.box_1 {
		-webkit-box-ordinal-group:1;
		-ms-flex-order:1;
		-webkit-order:1;
		order:1;
	}
	.box_2 {
		-webkit-box-ordinal-group:2;
		-ms-flex-order:2;
		-webkit-order:2;
		order:2;
	}
}


.c-nav {
	background:#fff;
	padding:0px 0;
	width:100%;
}

.c-nav ul {
	display:flex;
	justify-content: space-between;
	flex-wrap:wrap;
	align-items:center;
	margin:0 5px;
}

.c-nav ul li {
	position:relative;
	padding:5px 0;
	width:calc(50% - 2px);
	background:#f4e4f4;
	margin:0 0 5px 0;
	text-align:center;
	display: table;
}

.c-nav ul li a {
	color:#d086c2;
	padding:0 5px 8px 5px;
	position:relative;
	text-align:center;
	font-size:1.3rem;
	line-height:1.4;
	display:block;
	width:100%;
	height:3.8em;

	display: table-cell;
	width:100%;
	vertical-align:middle;
}

.c-nav ul li a span { font-size:85%; }

.c-nav ul li a:after {
	content:"\f107";
	display:block;
	font-family: 'Font Awesome 6 Free';
	font-weight: 900;
	font-size:1.2rem;
	color:#9f6293;
	position:absolute;bottom:-5px;left:50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}


@media screen and (min-width: 1025px) {
	.c-nav { background:#f4e4f4; }
	.c-nav ul {
		width:1100px;
		display:flex;
		justify-content: center;
		flex-wrap:wrap;
		align-items:center;
		margin:0 auto;
	}
	.c-nav ul li {
		position:relative;
		padding:5px 0;
		width:auto;
	}
	.c-nav ul li:after,
	.c-nav ul li:first-child:before {
		content:"";
		display:block;
		width: 1px;
		height:4em;
		background:#b075a4;
		position:absolute;top:50%;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
	}
	.c-nav ul li:after { right:0; }
	.c-nav ul li:first-child:before { left:0; }

	.c-nav ul li a {
		padding:0 35px 15px 35px;
		font-size:1.5rem;
		line-height:1.4;
		height:4.5em;
	}

	.c-nav ul li a:after {
		font-size:1.2rem;
		bottom:0px;
	}
}

.mv { text-align:center; }
.mv img {
	width: 100%;
	height:auto;
	vertical-align:top;
}
@media screen and (min-width: 1025px) {
	.mv img {
		height:415px;
		object-fit: cover;
		vertical-align:top;
	}
}



.con-body {
	background:url(../img/msalon/ico_kazari.png) center 40px no-repeat;
	background-size:60%;
	padding:80px 0;
}

.m-box {}
.m-inner {
	margin:0 15px;
}

@media screen and (min-width: 1025px) {
	.con-body {
		background:url(../img/msalon/ico_kazari.png) center 110px no-repeat;
		background-size:auto;
		padding:245px 0;
	}

	.m-box {}
	.m-inner {
		width:1100px;
		margin:0 auto;
	}
}


.c-title {
	font-size:2.2rem;
	font-weight:500;
	text-align:center;
	font-family: 'Shippori Mincho', serif;
	position:relative;
	padding:0 0 15px;
	margin:0 0 30px;
}

.c-title:after {
	content:"";
	width: 100%;
	height:1px;
	background:#d6a0d7;
	position:absolute;bottom:0;left:50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}

.ttl-sub {
	display:block;
	font-size:3.6rem;
	color:#e6cade;
	font-family: 'Dancing Script', cursive;
	transform: rotate(-15deg);
	-moz-transform: rotate(-15deg);
	-webkit-transform: rotate(-15deg);
	margin:0 0 15px;
}

.ttl-cat {
	font-size:70%;
	margin:0 10px 0 0;
}


@media screen and (min-width: 1025px) {
	.c-title {
		font-size:3.6rem;
		padding:0 0 25px;
		margin:0 0 50px;
	}
	.c-title:after { width: 800px;}
	.ttl-sub {
		font-size:6.0rem;
		margin:0 0 15px;
	}
	.ttl-cat {
		font-size:70%;
		margin:0 10px 0 0;
	}
}



.is-beige { background-color:#f8ebc8; }
.is-items { align-items:center; }
.is-reverse { flex-direction: row-reverse; }

@media screen and (max-width: 1024px) {
	.is-sp {
		display:flex;
		justify-content: space-between;
		flex-wrap:wrap;
	}
}

@media screen and (min-width: 1025px) {
	.box-grid {
		display:flex;
		justify-content: space-between;
		flex-wrap:wrap;
	}
	.box-grid_c {
		display:flex;
		justify-content: center;
		flex-wrap:wrap;
	}
	.box-grid_s {
		display:flex;
		justify-content: start;
		flex-wrap:wrap;
	}
	.box-grid_s {
		display:flex;
		justify-content: end;
		flex-wrap:wrap;
	}
}


.t-txt {
	font-size:1.4rem;
	font-weight:300;
	line-height:1.6;
}

@media screen and (min-width: 1025px) {
	.t-txt {
		font-size:1.6rem;
		font-weight:300;
		line-height:1.6;
	}
}


.t-note {
	font-size:1.3rem;
	line-height:1.4;
	padding:0 0 0 1em;
	text-indent:-1em;
}
@media screen and (min-width: 1025px) {
	.t-note { font-size:1.4rem; }
}




/* ============================================================
  about
============================================================== */
#about { padding:60px 0; }
#about p {
	font-size:1.5rem;
	line-height:1.8;
	text-align:left;
	font-family: 'Shippori Mincho', serif;
}

@media screen and (min-width: 1025px) {
	#about { padding:0 0 120px; }
	#about p {
		font-size:1.7rem;
		line-height:2.0;
		text-align:center;
	}
}






/* ============================================================
  check
============================================================== */
#check { background:#fbf6fb;padding:60px 0 30px; }

#check ul { margin-top:50px; }
#check ul li {
	width:calc(50% - 5px);
	background:#fff;
	border:1px solid #e6cade;
	padding:30px 10px 20px 10px;
	text-align:center;
	position:relative;
	margin:0 0 40px;
}
.check-num {
	background:#fff;
	position:absolute;top:-1px;left:15px;
	padding:0 10px;
	margin:0 0 20px;
}
.check-num p {
	font-size:3.8rem;
	font-weight:500;
	color:#ce91bc;
	font-family: 'Dancing Script', cursive;
	margin-top:-0.5em;
}
.check-ttl {
	font-size:1.8rem;
	font-weight:700;
	color:#9a5a8d;
	margin:1em 0;
}
.check-txt {
	font-size:1.4rem;
	font-weight:300;
	line-height:1.4;
	text-align:left;
}

@media screen and (min-width: 1025px) {
	#check { padding:120px 0; }
	#check ul { margin-top:100px; }
	#check ul li {
		width:calc(25% - 20px);
		padding:30px 20px;
		margin:0 0;
	}
	.check-num {
		top:-1px;
		padding:0 20px;
		margin:0 0 20px;
	}
	.check-num p { font-size:4.8rem; }
	.check-ttl { font-size:2.2rem; }
	.check-txt { font-size:1.5rem; }
}


/* ============================================================
  point
============================================================== */

#point { padding:60px 0; }

.li-point { margin:0 10px; }
.li-point li {
	position:relative;
	margin-bottom:40px;
}
.num-set { position:relative; }
.num-set p {
	color:#9a5a8d;
	font-weight:500;
}

@media screen and (min-width: 1025px) {
	#point { padding:120px 0; }
	.li-point { margin:0; }
	.li-point li {
		width:calc(50% - 50px);
		margin-bottom:60px;
	}
}

.txt-1 {
	font-size:1.6rem;
	display:inline-block;
	position:absolute;top:0;
}

.txt-2 {
	font-size:3.6rem;
	display:inline-block;
	margin-left:45px;
	position:relative;
}

.txt-2:before {
	content:"";
	display:block;
	width: 1px;
	height:1em;
	background:#9a5a8d;
	transform: rotate(20deg);
	-moz-transform: rotate(20deg);
	-webkit-transform: rotate(20deg);
	position:absolute;top:0;left:-3px;
}



.point-img {
	position:relative;
	margin:0 auto 35px;
	width:80%;
	text-align:center;
}

.point-img img { width:100%;height:auto; }



.point-ttl {
	background:#c896ba;
	width:62%;
	height:40px;
	text-align:center;
	vertical-align:middle;
	color:#fff;
	position:absolute;bottom:-18px;right:0;
}

.point-ttl p {
	font-size:1.8rem;
	font-weight:500;
	color:#fff;
	line-height:40px;
}

.point-txt p {
	font-size:1.4rem;
	font-weight:300;
	line-height:1.6;
}

@media screen and (min-width: 1025px) {
	.point-img {
		margin:0 auto 55px;
		width:auto;
	}

	.point-ttl {
		width:280px;
		height:67px;
		bottom:-33px;
	}
	.point-ttl p {
		font-size:2.4rem;
		line-height:67px;
	}
	.point-txt p {
		font-size:1.5rem;
		line-height:1.6;
	}
}




/* ============================================================
  course
============================================================== */
#course { background:#fbf6fb;padding:60px 0; }
#course .t-txt { text-align:center; }

.li-course { margin:0 0; }
.li-course li { padding:0 0 30px; }

.course-num {
	width:80px;
	padding-top:0px;
	position:relative;
	z-index:10;
}
.course-num:after {
	content:"";
	display:block;
	width: 2px;
	background:#e0b9d5;
	position:absolute;left:50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	z-index:-1;
}

.course-num:after { bottom:-80px;height:100%; }
.li-course li:last-child .course-num:after { display:none; }

.course-txt {
	width:calc(100% - 100px);
	align-items:center;
}

.course-txt h3 {
	font-size:2.4rem;
	font-weight:300;
	margin-bottom:10px;
}
.course-txt p {
	font-size:1.4rem;
	font-weight:300;
	line-height:1.4;
}

.course-img { width:100%; }
.course-box { width:100%;margin-bottom:10px; }


@media screen and (min-width: 1025px) {
	#course { padding:120px 0; }

	.li-course { margin:0 70px; }
	.li-course li { padding:0 0 30px; }

	.course-num {
		width:102px;
		padding-top:50px;
	}

	.course-num:after { bottom:-100px;height:100%; }

	.course-txt { width:calc(100% - 130px); }
	.course-txt h3 {
		font-size:3.0rem;
		margin-bottom:15px;
	}
	.course-txt p {
		font-size:1.6rem;
		line-height:1.4;
	}

	.course-img { width:430px; }
	.course-box { width:calc(100% - 480px); }
}




/* ============================================================
  course
============================================================== */
#price { padding:60px 0; }
#price .t-txt {
	text-align:center;
	margin-bottom:20px;
}

.tbl-price {
	border-collapse:collapse;border-spacing:0px;
	width:100%;
	margin:0 0 10px;
	clear:both;
	border:1px solid #ccc;
	background:#fff;
/*
	table-layout: fixed;
*/
}

.tbl-price caption {
	font-size:1.6rem;
	font-weight:500;
	color:#626262;
	text-align:left;
	margin:0 0 10px;
	letter-spacing:0.05em;
}
.t-price_att {
	font-size:1.2rem;
	font-weight:300;
	text-align:right;
	margin:0 0 10px;
}

@media screen and (min-width: 1025px) {
	#price { padding:120px 0; }
	#price .t-txt { margin-bottom:80px; }
	.tbl-price {
		margin:0 0 60px;
		table-layout: fixed;
	}
	.tbl-price caption {
		font-size:1.8rem;
		margin:0 0 10px;
	}
	.t-price_att { font-size:1.4rem; }
	.tmb20 { margin-bottom:20px !important; }
}


.tbl-price thead th {
	background:#9a5a8d;
	border-left:1px solid #fcf7fb;
	font-family: 'Shippori Mincho', serif;
	font-size:1.7rem;
	font-weight:300;
	color:#fff;
	line-height:1.2;
	padding:10px 10px;
}

.tbl-price thead th:first-child { border-left:none; }

.th-s1 { font-size:80%;margin:0 0 0 10px; }
.th-s2 { font-size:1.2rem; }

.tbl-price tbody th {
	padding:10px 15px;
	background:#fcf7fb;
	border:1px solid #ccc;
	font-size:1.4rem;
	font-weight:300;
	text-align:left;
}

.tbl-price tbody td {
	padding:10px 15px;
	border:1px solid #ccc;
	font-size:1.4rem;
	line-height:1.4;
}

.t-price {
	text-align:right;
	font-size:1.6rem;
	font-weight:400;
}

.tbl-price ul li {
	font-size:1.4rem;
	font-weight:300;
	line-height:1.4;
}
.tbl-price ul li:first-child {
	padding-bottom:8px;
	margin-bottom: 8px;
	border-bottom:1px dotted #666;
}
.tbl-price ul li span { font-size:80%;margin:0 0 0 5px; }

.t-sub {
	font-size:1.4rem;
	font-weight:300;
	margin:0 10px 0 0;
}

.tbl-price .t-price ul li {
	font-size:1.6rem;
	font-weight:400;
}
.tbl-price .t-price ul li span {
	font-size:72%;
	font-weight:300;
	margin:0 10px 0 0;
}


@media screen and (min-width: 1025px) {
	.tbl-price thead th {
		font-size:2.2rem;
		line-height:1.2;
		padding:12px 0;
	}

	.tbl-price tbody th {
		padding:15px 20px;
		font-size:1.6rem;
	}

	.tbl-price tbody td {
		padding:15px 20px;
		font-size:1.6rem;
		line-height:1.4;
	}
	.t-price { font-size:1.8rem; }
	.tbl-price ul li { font-size:1.6rem; }

	.tbl-price ul li:first-child {
		padding-bottom:8px;
		margin-bottom: 8px;
	}
	.tbl-price .t-price ul li { font-size:1.8rem; }
}

@media screen and (max-width: 1024px) {
	.scroll {
		overflow: auto;
		white-space: nowrap;
		margin-bottom:40px;
	}
	.scroll::-webkit-scrollbar{ height: 5px; }
	.scroll::-webkit-scrollbar-track{ background: #F1F1F1; }
	.scroll::-webkit-scrollbar-thumb { background: #BCBCBC; }
	.smb10 { margin-bottom:10px !important; }

}







/* ============================================================
  access
============================================================== */
#access { padding:60px 0; }

.access-box { margin:0 10px; }
.access-img { width:100%;margin:0 auto 20px;text-align:center; }
.access-txt { width:100%; }

.li-access li {
	margin:0 0 15px;
	border-bottom:1px dotted #9a5a8d;
	font-size:1.5rem;
	font-weight:300;
	line-height:1.6;
	position:relative;
	padding:0 0 15px 1.5em;
}

.li-access li:before {
	content:"\f3c5";
	display:block;
	font-family: 'Font Awesome 6 Free';
	font-weight: 900;
	font-size:1.8rem;
	color:#9a5a8d;
	position:absolute;top:-2px;left:0;
}

.li-access li.i-tim:before  { content:"\f017";font-size:1.6rem; }
.li-access li.i-tel:before  { content:"\f095";top:4px; }

.li-access li.i-tel {
	font-size:2.2rem;
	font-weight:500;
}


@media screen and (min-width: 1025px) {
	#access { padding:0 0 120px; }

	.access-box { margin:0 70px; }
	.access-img { width:480px; }
	.access-txt { width:calc(100% - 550px); }

	.li-access li {
		margin:0 0 15px;
		font-size:1.6rem;
		padding:0 0 15px 1.5em;
	}

	.li-access li:before {
		font-size:2.0rem;
		position:absolute;top:-2px;left:0;
	}
	.li-access li.i-tim:before  { font-size:1.7rem; }
}






/* ============================================================
  coupon
============================================================== */
#coupon { padding:60px 0; }
.coupon-box { margin:0 20px; }

.btn-back {
	display:block;
	width:75%;
	margin:0 auto;
}
.btn-back a {
	display:block;
	font-size:1.6rem;
	font-weight:500;
	color:#832c20;
	position:relative;
	text-align:center;
	padding:15px 0;
	background:#fbeff8;
	border:1px solid #e6c3dd;
	border-radius:40px;
	font-family: 'Shippori Mincho', serif;
}
.btn-back a:after {
	content:"\f061";
	display:block;
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	font-size:1.5rem;
	color:#832c20;
	position:absolute;top:50%;right:20px;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}


@media screen and (min-width: 1025px) {
	#coupon { padding:120px 0; }
	.coupon-box { margin:0 70px; }

	.btn-back { width:300px; }
	.btn-back a {
		font-size:1.8rem;
		padding:20px 2em;
	}
}



@media screen and (min-width: 1025px) {
	/* Anime */
	.sa {
		opacity: 0;
		transition: all .5s ease;
	}
	.sa.show {
		opacity: 1;
		transform: none;
	}
	.sa--lr { transform: translate(-100px, 0); }
	.sa--rl { transform: translate(100px, 0); }
	.sa--up { transform: translate(0, 100px); }
	.sa--down { transform: translate(0, -100px); }
	.sa--scaleUp { transform: scale(.5); }
	.sa--scaleDown { transform: scale(1.5); }
	.sa--rotateL { transform: rotate(180deg); }
	.sa--rotateR { transform: rotate(-180deg); }
}