@charset "UTF-8";

@import url('//fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;600;700;900&display=swap');
@import url('//fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300;400;500;600;700;900&display=swap');
@import url('//fonts.googleapis.com/css2?family=Zen+Old+Mincho:wght@400;500;600;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;500;600;700;800&display=swap');
/* Google font Icon */
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200");


/*========================
ヘッダーMV
========================*/
header {
	position: relative;
	width: 100%;
	margin: 0 auto 64px;
	padding: 0;
  background-repeat:no-repeat;
  -moz-background-size:cover;
  background-size:cover;
  background-image:url(../img/mv.png);
  background-position:center center;
	aspect-ratio: 16 / 9;
}
header ul{
  width:100%;
	height: auto;
  margin: auto;
  padding:0;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  justify-content: center;
  align-items:center;
}
header ul li:first-child{
	width: 85%;
	padding: 0 0 0 3em;
}
header ul li:first-child img{
	display: block;
	width: 100%;
	max-width: 380px;
	transition: 0.3s;
}
header ul li:first-child h2{
	display: inline-block;
  font-family: "Inter", "Noto Sans JP", sans-serif;
  letter-spacing: 0.05em;
	font-weight: 500;
	font-size: 1.15em;
	color: #8C455B;
	margin-top: 42px;
	transition: 0.3s;
}
header ul li:first-child h2 strong {
	padding: 0 0.4em 0 0;
	white-space: nowrap;
}
header ul li:first-child h2 strong:after{
	content: "/";
	color: #888;
	margin: 0 0 0 0.4em;
	font-weight: 300;
}
header ul li:first-child h2 strong:last-child:after {
	content: none;
	margin: 0 0 0 0;
}
header ul li:last-child{
	flex: 1;
  writing-mode: vertical-rl;
  white-space: nowrap;
  letter-spacing: 0.06em;
	font-weight: 600;
	font-size: 2.8em;
	color: #FFF;
  text-shadow:
  0 0 5px rgba(0, 0, 0, 0.8),
  0 0 12px rgba(0, 0, 0, 0.6),
  0 0 18px rgba(0, 0, 0, 0.4);
	padding: 1.4em 1.6em 12px 12px;
	transition: 0.3s;
}
@media screen and (max-width: 1240px) {
header ul li:first-child{
	padding: 2.4em 0 0 2em;
	}
header ul li:first-child img{
	max-width: 300px;
	}
header ul li:last-child{
	font-size: 2.1em;
	padding: 1em 1.2em 12px 12px;
	}
}
@media screen and (max-width: 1000px) {
header ul li:first-child{
	padding: 0 0 0 1.5em;
	}
header ul li:first-child img{
	max-width: 240px;
	}
header ul li:first-child h2{
	font-size: 1em;
	margin-top: 24px;
	}
header ul li:last-child{
	font-size: 1.7em;
	}
}
@media screen and (max-width: 640px) {
header {
	margin: 0 auto 42px;
	}
header ul li:first-child{
	padding: 1em 0 0 1.2em;
	}
header ul li:first-child img{
	max-width: 164px;
	}
header ul li:first-child h2{
	font-size: 0.9em;
	margin-top: 18px;
	}
header ul li:last-child{
	font-size: 1.3em;
	}
}
@media screen and (max-width: 480px) {
header ul li:first-child img{
	max-width: 132px;
	}
header ul li:first-child h2{
	margin-top: 12px;
	}
header ul li:last-child{
	font-size: 1.2em;
	}
}


/*========================
こんなお悩みありませんか？
========================*/
.trouble {
  width:100%;
	max-width: 1240px;
  margin: auto;
  padding:0 12px;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  justify-content: center;
  align-items:flex-start;
	flex-wrap: wrap;
}
.trouble li{
  width: 25%;
  max-width:25%;
  width: calc(100% / 4);
  padding: 0 6px;
	text-align: center;
}
.trouble li img{
	display: block;
  border-radius: 9999px;
  -webkit-border-radius: 9999px;
  -moz-border-radius: 9999px;
	margin-bottom: 12px;
}
.trouble li h4{
	color: #07323F;
	font-size: 1.25em;
	font-weight: 600;
	line-height: 1.5;
}
.trouble li:nth-child(2),
.trouble li:nth-child(4){
  padding: 42px 6px 0;
}
@media screen and (max-width: 1000px) {
.trouble li h4{
	font-size: 1em;
	}
}
@media screen and (max-width: 640px) {
.trouble {
	max-width: 480px;
}
.trouble li{
  width: 50%;
  max-width:50%;
  width: calc(100% / 2);
  padding: 0 6px 18px;
	}
.trouble li:nth-child(2),
.trouble li:nth-child(4){
  padding: 0 6px 18px;
	}
.trouble li h4{
	font-size: 1.15em;
	}
.trouble li img{
	max-width: 164px;
	margin: 0 auto 12px;
	}
}
@media screen and (max-width: 480px) {
.trouble li h4{
	font-size: 1.05em;
	}
.trouble li img{
	max-width: 124px;
	}
}

/* それらはすべて～ */
.cause {
	position: relative;
	width: 100%;
	text-align: center;
	font-size: 2.1em;
	font-weight: 600;
	padding: 24px 18px;
	background: linear-gradient(to right, 
	rgba(255, 255, 255, 0) 0%,
	rgba(255, 255, 255, 0.8) 20%,
	rgba(255, 255, 255, 0.8) 80%,
	rgba(255, 255, 255, 0) 100%
	);
	margin: 32px auto 0;
}
.cause:before {
content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 1px;
	margin: 0 auto;
	text-align: center;
	background-image: -webkit-linear-gradient(left, transparent, #999 25%, #999 75%, transparent);
	background-image: linear-gradient(to right, transparent, #999 25%, #999 75%, transparent);
	background-position: center;
	background-repeat: no-repeat;
}
.cause:after {
content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 1px;
	margin: 0 auto;
	text-align: center;
	background-image: -webkit-linear-gradient(left, transparent, #999 25%, #999 75%, transparent);
	background-image: linear-gradient(to right, transparent, #999 25%, #999 75%, transparent);
	background-position: center;
	background-repeat: no-repeat;
}
.cause strong{
  font-family: "Inter", "Noto Sans JP", sans-serif;
  letter-spacing: 0.05em;
	color: #E08513;
	font-size: 1.15em;
	font-weight: 400 !important;
	margin: 0 0.2em;
}
@media screen and (max-width: 1240px) {
.cause {
	font-size: 1.8em;
	}
}
@media screen and (max-width: 1000px) {
.cause {
	font-size: 1.4em;
	}
}
@media screen and (max-width: 767px) {
.cause {
	padding: 18px 18px;
	margin: 24px auto 0;
	}
.cause strong{
  display: block;
	}
}
@media screen and (max-width: 640px) {
.cause {
	margin: 0 auto 0;
	font-size: 1.25em;
	}
}


/*========================
メニュー
========================*/
/*-------------------------
タイトル
--------------------------*/
.menutitle{
  position: relative;
  width: 100%;
  height: 240px;
  padding: 0 24px;
  margin: 0 auto 18px;
  background-repeat:no-repeat;
  -moz-background-size:contain;
  background-size:contain;
  background-image:url(../img/menu/hand.png);
  background-position:left center;
}
.menutitle h2{
  position: absolute;
  top: 45%;
  left: 7.4em;
  transform: translateY(-45%);
  -webkit-transform: translateY(-45%);
  -ms-transform: translateY(-45%);
  font-size: 2.1em;
  line-height: 1.6;
  font-weight: 600;
}
.menutitle h2 span{
  display: block;
  font-size: 0.6em;
  color: #8C455A;
	padding: 0 12px 0 0;
  line-height: 1.55;
	margin-top: 3px;
}
@media screen and (max-width: 1000px) {
.menutitle{
  height: 200px;
  }
.menutitle h2{
  left: 7em;
  font-size: 1.8em;
  }
}
@media screen and (max-width: 767px) {
.menutitle{
  height: 142px;
  }
.menutitle h2{
  left: 5.6em;
  font-size: 1.6em;
  top: 42%;
  transform: translateY(-42%);
  -webkit-transform: translateY(-42%);
  -ms-transform: translateY(-42%);
  }
}
@media screen and (max-width: 640px) {
.menutitle{
  height: 142px;
  background-position:-36px center;
  }
.menutitle h2{
  left: 4.8em;
  font-size: 1.5em;
  }
}

/*-------------------------
メニュー並び
--------------------------*/
.menux-scroll{
  width:100%;
  height: auto;
  margin: 0 auto;
  padding:0 18px 6px;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items:stretch;
  overflow-x: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
  cursor: grab;
}
.menux-scroll:active {
  cursor: grabbing;
}
.menux-scroll li{
  width: 480px;
  max-width:none;
  min-width: 480px;
  padding: 0 12px;
}
@media screen and (max-width: 767px) {
.menux-scroll li{
  width: 420px;
  min-width: 420px;
  }
}
@media screen and (max-width: 480px) {
.menux-scroll{
  padding:0 8px 6px;
	}
.menux-scroll li{
  width: 340px;
  min-width: 340px;
  padding: 0 6px;
  }
}

/*-------------------------
メニューボックス
--------------------------*/
.menux-scroll .menubox {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  padding: 18px 18px 68px;
  background-color: #FFF;
  box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.3);
}
.menuboxinner{
	padding: 18px;
}
.menuboxinner h3{
  font-family: "Inter", "Noto Sans JP", sans-serif;
  letter-spacing: 0.03em;
	color: #8D455C;
	font-size: 1.2em;
	font-weight: 500;
	line-height: 1.55;
	margin-bottom: 6px;
}
.menuboxinner p{
	font-size: 0.9em;
	line-height: 1.65;
	letter-spacing: 0.03em;
	margin-bottom: 8px;
}
@media screen and (max-width: 640px) {
.menuboxinner{
	padding: 18px 6px;
	}
}
@media screen and (max-width: 480px) {
.menux-scroll .menubox {
  padding: 12px 12px 64px;
	}
.menuboxinner{
	font-size: 0.95em;
	}
}

/*画像リボン*/
.menubox .img{
	position: relative;
}
.menubox .img .ribbon {
  font-size: 0.9em;
  font-weight: 600;
  color: #FFF;
  font-family: "Inter", "Noto Sans JP", sans-serif;
  letter-spacing: 0.06em;
	text-align: center;
	line-height: 1.4;
}
.menubox .img .ribbon {
  --f: .5em;
  --r: .8em;
  position: absolute;
  right: 12px;
  top: calc(-1*var(--f));
  padding: 0.8em 0.6em;
  background: #E59532;
  border-left: var(--f) solid #0005;
  border-bottom: var(--r) solid #0000;
  clip-path: polygon(var(--f) 0,100% 0,100% 100%,calc(50% + var(--f)/2) calc(100% - var(--r)), var(--f) 100%,var(--f) var(--f),0 var(--f));
}

/*注釈ラベル*/
.menuboxinner .note{
	display: inline;
	white-space: nowrap;
	font-size: 0.85em;
	line-height: 1;
	font-weight: 400;
	background: #8D455C;
	border: 1px solid #8D455C;
	color: #FFF;
	padding: 0.15em 0.3em;
  font-family: "Inter", "Noto Sans JP", sans-serif;
  letter-spacing: 0.04em;
	margin-right: 0.3em;
}
.menuboxinner .noteadd{
	display: inline;
	white-space: nowrap;
	font-size: 0.85em;
	line-height: 1;
	font-weight: 400;
	background: #FFF;
	border: 1px solid #8D455C;
	color: #8D455C;
	padding: 0.15em 0.3em;
  font-family: "Inter", "Noto Sans JP", sans-serif;
  letter-spacing: 0.04em;
	margin-right: 0.3em;
}

/*このような方におすすめです*/
.menuboxinner h4{
  font-family: "Inter", "Noto Sans JP", sans-serif;
  letter-spacing: 0.03em;
	color: #6B555B;
	font-size: 1em;
	font-weight: 500;
	line-height: 1.55;
	margin: 12px auto 6px;
}
.menuboxinner .checkbox{
	width: 100%;
	background: #F4F2EE;
	padding: 0.3em 0.5em;
	margin: 0 auto 6px;
}
.menuboxinner .checkbox p{
  font-family: "Inter", "Noto Sans JP", sans-serif;
	line-height: 1.6;
	font-size: 0.85em;
  letter-spacing: 0.03em;
  padding: 0 0 0 1.6em;
  font-weight: 400;
	position: relative;
	margin: 0 auto;
}
.menuboxinner .checkbox p:before{
	position: absolute;
	top: 0.1em;
	left: 0;
  font-size: 1.4em;
  line-height: 1;
  color: #9E878D;
  font-family:"Material Symbols Rounded";
	content: "\e834"; /*チェックマーク*/
  font-variation-settings:
  'FILL' 1,
  'wght' 300
}

/*初回料金*/
.begprice{
	color: #8D455C;
	font-size: 1em;
	line-height: 1;
	white-space: nowrap;
  font-family: "Inter", "Noto Sans JP", sans-serif;
  letter-spacing: 0.03em;
	text-align: right;
	margin: 1.2em 0 0.8em;
}
.begprice span{
	background: #8D455C;
	color: #FFF;
	font-size: 0.9em;
	padding: 0.25em 0.5em;
	font-weight: 400;
	letter-spacing: 0.06em;
	margin: 0 0.6em 0 0;
}
.begprice strong{
	font-size: 1.5em;
	margin: 0 0.1em 0 0;
	font-weight: 500 !important;
	letter-spacing: 0.06em;
}
.begprice .taxin{
	font-size: 0.7em;
	background: none !important;
	color: #8D455C;
	margin: 0 0 0 0.3em;
	padding: 0;
}

/*通常料金*/
.regprice{
	font-size: 0.85em;
	line-height: 1;
	white-space: nowrap;
  font-family: "Inter", "Noto Sans JP", sans-serif;
  letter-spacing: 0.03em;
	text-align: right;
}
.regprice span{
	font-size: 0.95em;
	padding: 0.3em 0.5em;
	font-weight: 400;
	letter-spacing: 0.06em;
	margin: 0 0 0 0;
}
.regprice strong{
	font-size: 1.4em;
	margin: 0 0.1em 0 0;
	font-weight: 400 !important;
	letter-spacing: 0.06em;
}
.regprice .taxin{
	font-size: 0.7em;
	background: none !important;
	margin: 0 0 0 0.3em;
	padding: 0;
}

/*予約ボタン枠*/
.menux-scroll .menubox .jumpresv{
	position: absolute;
	left: 50%;
	bottom: 18px;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	width: 100%;
	display: block;
	padding: 0 18px;
}

/*補足 (クリックで展開)*/
.menuboxinner details{
	background: #F4F2EE;
	padding: 0 1em;
	font-size: 0.9em;
	line-height: 1.55;
	transition: 0.5s;
	margin: 0.4em auto;
}
.menuboxinner details summary{
	cursor: pointer;
	padding: 0.4em 0;
	font-weight: 400;
  font-family: "Inter", "Noto Sans JP", sans-serif;
}
.menuboxinner details summary::marker {
	color: #9E878D;
}
.menuboxinner details article{
	padding: 0 0 0.6em;
	color: #444;
	font-weight: 400;
}
.menuboxinner details article .kajo {
  padding: 0;
	line-height: 1.5 !important;
}
.menuboxinner details article .kajo p {
  margin:0.2em 0 0.2em 1em;
  text-indent:-1em;
}


/*========================
お客様の声
========================*/
.voice {
	width: 100%;
	max-width: 1120px;
	margin: 164px auto 0;
	padding: 0 18px;
	position: relative;
}
.voice h3{
	position: absolute;
	top: -64px;
	left: 24px;
  writing-mode: vertical-rl;
	font-weight: 500;
	font-size: 2.4em;
	z-index: 1;
}
.voicebox{
	position: relative;
	width: 100%;
	max-width: 960px;
	padding: 42px 42px;
	margin: 42px 0 0 auto;
	background: linear-gradient(to right, 
	rgba(255, 255, 255, 0) 0%,
	rgba(255, 255, 255, 0.6) 10%,
	rgba(255, 255, 255, 0.6) 90%,
	rgba(255, 255, 255, 0) 100%
	);
}
.voicebox:nth-child(odd){
	margin: 42px 0 0;
}
.voicebox:before {
content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 1px;
	margin: 0 auto;
	text-align: center;
	background-image: -webkit-linear-gradient(left, transparent, #999 25%, #999 75%, transparent);
	background-image: linear-gradient(to right, transparent, #999 25%, #999 75%, transparent);
	background-position: center;
	background-repeat: no-repeat;
}
.voicebox:after {
content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 1px;
	margin: 0 auto;
	text-align: center;
	background-image: -webkit-linear-gradient(left, transparent, #999 25%, #999 75%, transparent);
	background-image: linear-gradient(to right, transparent, #999 25%, #999 75%, transparent);
	background-position: center;
	background-repeat: no-repeat;
}
.voicebox p{
	max-width: 640px;
	line-height: 1.8;
	margin: 0 auto;
}
.voicebox .voicefrom{
	max-width: 640px;
  font-family: "Inter", "Noto Sans JP", sans-serif;
	text-align: right;
	font-weight: 400;
	font-size: 0.9em;
	letter-spacing: 0.05em;
	margin-top: 18px;
	color: #616161;
}
@media screen and (max-width:1000px) {
.voice {
	margin: 64px auto 0;
	padding: 0 18px;
	}
.voice h3{
	position: static;
  writing-mode: horizontal-tb;
	font-size: 2em;
	padding: 0 0 0 24px;
	}
.voicebox {
	background: linear-gradient(to right, 
	rgba(255, 255, 255, 0) 0%,
	rgba(255, 255, 255, 0.6) 5%,
	rgba(255, 255, 255, 0.6) 95%,
	rgba(255, 255, 255, 0) 100%
	);
	}
}
@media screen and (max-width:767px) {
.voice h3{
	font-size: 1.8em;
	}
.voicebox{
	padding: 32px 32px;
	margin: 32px 0 0 auto;
	}
.voicebox:nth-child(odd){
	margin: 32px 0 0;
	}
}
@media screen and (max-width:480px) {
.voice {
	margin: 42px auto 0;
	padding: 0 0;
	}
.voice h3{
	font-size: 1.3em;
	}
.voicebox{
	padding: 24px 32px;
	}
.voicebox p{
	line-height: 1.7;
	font-size: 0.95em;
	}
}


/*========================
店舗写真
========================*/
.salonphoto {
	width: 100%;
	padding: 0;
	margin: 100px auto;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  justify-content: center;
  align-items:center;
	flex-wrap: wrap;
}
.salonphoto li{
  width: 25%;
  max-width:25%;
  width: calc(100% / 4);
}
@media screen and (max-width:840px) {
.salonphoto {
	margin: 64px auto;
	}
.salonphoto li{
  width: 50%;
  max-width:50%;
  width: calc(100% / 2);
	}
}
@media screen and (max-width:480px) {
.salonphoto {
	margin: 48px auto;
	}
}


/*========================
店舗情報
========================*/
.saloninfo {
	width: 100%;
	max-width: 1240px;
	padding: 0 32px;
	margin: auto;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  justify-content: center;
  align-items:flex-start;
	flex-wrap: wrap;
}
.saloninfo li:first-child{
	width: 320px;
}
.saloninfo li:last-child{
	flex: 1;
	padding: 24px 0 0 84px;
}
.saloninfo li:last-child h3 {
  font-size: 2.4em;
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: 0.02em;
  margin-bottom: 18px;
}
.saloninfo li:last-child h4{
	font-weight: 600;
	font-size: 1.5em;
  line-height: 1.7;
}
@media screen and (max-width: 1240px) {
.saloninfo li:first-child{
	width: 240px;
	}
.saloninfo li:last-child{
	padding: 24px 0 0 64px;
	}
}
@media screen and (max-width: 1000px) {
.saloninfo li:first-child{
	width: 200px;
	}
.saloninfo li:last-child{
	padding: 18px 0 0 48px;
	}
.saloninfo li:last-child h3 {
  font-size: 2em;
	}
.saloninfo li:last-child h4{
	font-size: 1.3em;
	}
}
@media screen and (max-width: 840px) {
.saloninfo {
	display: block;
	flex-direction: column;
	}
.saloninfo li:first-child{
	width: 100%;
	}
.saloninfo li:first-child img{
	width: 100%;
	max-width: 240px;
}
.saloninfo li:last-child{
	padding: 24px 0 0 0;
	}
}
@media screen and (max-width: 640px) {
.saloninfo {
	padding: 0 24px;
	}
.saloninfo li:first-child img{
	max-width: 200px;
	}
}
@media screen and (max-width: 480px) {
.saloninfo li:last-child{
	padding: 18px 0 0 0;
	}
.saloninfo li:first-child img{
	max-width: 164px;
	}
.saloninfo li:last-child h3 {
  font-size: 1.5em;
	}
.saloninfo li:last-child h4{
	font-size: 1.15em;
	}
}

/*-------------------------
アイコンリンク
--------------------------*/
.infoSNS {
  display: inline-block;
	margin: 32px auto;
}
.infoSNS a{
  display: inline-block;
  padding: 0 0.5em;
}
.infoSNS a:first-child{
  padding: 0 0.5em 0 0;
}
.infoSNS a:last-child {
  padding: 0 0 0 0.5em;
}
.infoSNS img{
  max-width: 42px;
}
@media screen and (max-width: 480px) {
.infoSNS {
  margin: 24px 0;
  }
}

/*-------------------------
サロン概要
--------------------------*/
.salonguide {
	width: 100%;
	height: auto;
	padding: 0;
	margin: auto;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  justify-content: flex-start;
  align-items:stretch;
}
.salonguide li:first-child{
	width: 6.8em;
	height: auto;
	border-right: 1px solid #7E7E7E;
	padding: 0.6em 24px 0.6em 0;
	text-align: right;
	white-space: nowrap;
}
.salonguide li:last-child{
	flex: 1;
	height: auto;
	padding: 0.6em 0 0.6em 24px;
}
.salonguide li:last-child a{
  font-family: "Inter", "Noto Sans JP", sans-serif;
	margin: 0 0.3em;
	letter-spacing: 0.05em;
	font-size: 1.05em;
	white-space: nowrap;
}
@media screen and (max-width: 640px) {
.salonguide li:first-child{
	width: 6em;
	padding: 0.4em 18px 0.4em 0;
	}
.salonguide li:last-child{
	padding: 0.4em 0 0.4em 12px;
	}
}
@media screen and (max-width: 480px) {
.salonguide {
	font-size: 0.95em;
	}
}

/*-------------------------
サロンからのお願い
--------------------------*/
.favor {
  width: 100%;
  max-width: 1000px;
  margin: 32px auto 0;
  padding: 24px 32px;
	border: 1px solid #7E7E7E;
}
.favor h3{
  font-family: "Inter", "Noto Sans JP", sans-serif;
  letter-spacing: 0.05em;
	font-size: 1.15em;
	margin: 0 auto 12px;
	font-weight: 500;
}
@media screen and (max-width: 640px) {
.favor {
  padding: 18px 24px;
  }
}
@media screen and (max-width: 480px) {
.favor {
  padding: 15px 18px 12px;
  }
}


/*========================
セラピスト紹介
========================*/
.profile h4{
  font-family: "Inter", "Noto Sans JP", sans-serif;
  letter-spacing: 0.05em;
	font-weight: 400;
	font-size: 1.1em;
	margin-bottom: 0.4em;
	color: #444;
}
.profile h5{
  padding: 0 0 0 1.1em;
  margin: 0 0 0.5em;
	position: relative;
	font-weight: 500;
}
.profile h5:before{
	position: absolute;
	top: 0.25em;
	left: 0;
  font-size: 0.8em;
  color: #9E878D;
  font-family:"Material Symbols Rounded";
	content: "\ef4a"; /*サークル*/
  font-variation-settings:
  'FILL' 1,
  'wght' 400
}
@media screen and (max-width: 480px) {
.profile h4{
  font-size: 1em;
	}
.profile h5{
  font-size: 0.95em;
	}
}

/*-------------------------
略歴
--------------------------*/
.timeline li {
	width: 100% !important;
  margin: 0;
	padding: 0 !important;
  position: relative;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  justify-content:flex-start;
  align-items:flex-start;
}
.timeline li div{
  width: 5em;
  text-align: right;
  padding: 0 1.2em 0 0;
  letter-spacing: 0.06em;
}
.timeline li span{
  width: calc(100% - 5em);
  border-left: 1px solid #7E7E7E;
  padding: 0 0 0.8em 1.2em;
}
.timeline li span:before {
  content: '';
  width: 0.6em;
  height: 0.6em;
  background: #9E878D;
  position: absolute;
  left: 4.7em;
  top: 0.5em;
  border-radius: 100%;
}
@media screen and (max-width: 480px) {
.timeline {
	font-size: 0.95em;
	}
}


/*========================
補足アナウンス
========================*/
.announce {
	width: 100%;
}
.announce h4{
	color: #FFF;
  font-family: "Figtree", sans-serif;
	font-size: 3.4em;
	font-weight: 300;
	line-height: 1;
	margin-bottom: 18px;
	letter-spacing: 0.06em;
	white-space: nowrap;
}
.announce h3{
  font-family: "Inter", "Noto Sans JP", sans-serif;
  letter-spacing: 0.05em;
	font-size: 1.2em;
	font-weight: 500;
	line-height: 1;
	margin-bottom: 32px;
	letter-spacing: 0.06em;
}
.announce .inner{
	padding: 0 1em;
	font-size: 1.05em;
	line-height: 1.8;
}
.announce .inner p{
	margin: 1em 0;
}
@media screen and (max-width: 640px) {
.announce h4{
	font-size: 3em;
	}
.announce h3{
	font-size: 1.1em;
	}
.announce .inner{
	padding: 0 0.8em;
	font-size: 1em;
	line-height: 1.75;
	}
}
@media screen and (max-width: 480px) {
.announce h4{
	font-size: 2.6em;
	}
.announce .inner h3{
	margin-bottom: 32px;
	}
.announce .inner{
	padding: 0 0.6em;
	}
.announce .inner p{
	margin: 0.8em 0;
	}
}

/* スパアイコンテキスト */
.spaicon{
  padding: 0 0 0 3.2em;
  margin: 0.6em 0 0 !important;
  font-weight: 400;
	position: relative;
	white-space: nowrap;
	color: #8C455A;
	font-size: 1.1em;
  font-family: "Inter", "Noto Sans JP", sans-serif;
  letter-spacing: 0.06em;
}
.spaicon strong{
	font-weight: 400 !important;
	font-size: 1.5em;
}
.spaicon:before{
	position: absolute;
	top: 0;
	left: 0;
  font-size: 3em;
  line-height: 0.85;
  font-family:"Material Symbols Rounded";
	content: "\eb4c"; /*スパ*/
  font-variation-settings:
  'FILL' 0,
  'wght' 200
}
.spatext{
	font-size: 0.95em;
	padding: 0 0 0 1em;
	line-height: 1.65;
	margin: 0 !important;
}

/* 画像横並び２枚 */
.announceimg{
  width:100%;
	max-width: 840px;
  margin: 24px auto;
  padding:0;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  justify-content: center;
  align-items:flex-start;
}
.announceimg li{
  width: 50%;
  max-width:50%;
  width: calc(100% / 2);
  margin: 0 18px 0 0;
}
.announceimg li:last-child{
	margin: 0 0 0 0;
}
@media screen and (max-width: 640px) {
.announceimg li{
  margin: 0 12px 0 0;
	}
}