/* ーーーーーーーーー 全体  ーーーーーーーーー */

* {
	font-size: 16px;
	font-size: clamp(0.6rem, calc(0.5vw + 0.8rem), 1.8rem);
	font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	color: #595757;
	line-height: 1.7;
}

html{
  scroll-behavior: smooth;
}

a:hover {
	opacity: 0.7 ;
}

h2 {
  font-size: 1.7em;
  color: #333;
  margin-bottom: 20px;
  text-align: center;
	color: #595757;
}

h3 {
  font-size: 1.3em;
  color: #333;
  margin-bottom: 20px;
  text-align: center;
	color: #595757;

}

.center {
	text-align: center;
}

.bold {
	font-weight: bold;
}

.wave {
	width: 100%;
	position: relative;
	top:-4.9vw;
}

/* ーーーーーーーーー 固定ヘッダー  ーーーーーーーーー */

header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  color: #595757;
  padding: 10px 20px;
  z-index: 1000;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo img {
  height: 50px;
}

.contact {
  display: flex;
  align-items: center;
}

.contacthead {
  border-bottom: 2px solid #595757;
  margin-bottom: 5px;
  font-weight: bold;
  font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size: 0.6rem;
}

.contact a {
  height: 40px;
}

.contact a:first-child {
  margin-right: 1em;
}

body {
  margin-top: 70px;
}

/* ーーーーーーーーー セクション1　キャンペーン  ーーーーーーーーー */

.contact2 {
	width:80%;
	margin: 10px auto 5vw;
	display: flex;
	align-items: center;
}

.contact2 a:first-child {
	margin-right: 20px;
}

.wpimg {
	display: flex;
}

@media not all and (min-width: 768px) {
	.contact2 {
		flex-direction: column;
		width:70%;
	}
	.contact2 a:first-child {
	margin-right: 0px;
	}
}

/* ーーーーーーーーー セクション2  こんなお悩み抱えていませんかーーーーーーーーー */

.sec-nayami {
	background:#efefef;
	padding: 5vw 40px 10vw 40px;
	margin-bottom: 0;
}

.problem-list {
  padding: 0;
  text-align: left;
  display: inline-block;
}

.problem-list li {
	background:url("../img/check.png") no-repeat 0 0;
	background-size:auto 1.5em;
	padding-left: 2.5em;
	margin-bottom: 0.7em;
}

/* ーーーーーーーーー セクション3　コンテンツ  ーーーーーーーーー */

.sec-content {
	padding: 5vw 40px 10vh 40px;
}

.content {
  display: flex;
  align-items: flex-start;
  margin-bottom: 2em;
}

.content img {
  width: 40%;
  height: auto;
  margin-right: 20px;
}

.text h3 {
  font-size: 1.3em;
  border-left:#187fc4 1vw solid;
  text-align: left;
  padding-left: 1em;
	font-weight: bold;
}

@media not all and (min-width: 768px) {
	.content {
		flex-direction: column;
	}
	.content img {
		width: 100%;
		height: auto;
		margin-right: 0px;
		margin-bottom: 15px;
	}
}

/* ーーーーーーーーー セクション4　つらいお悩みで苦しんでいる皆様へ  ーーーーーーーーー */

.sec-tsurai {
	background:#efefef;
	padding: 5vw 40px 10vw 40px;
	margin-top: -6.5vw;
}

/* ーーーーーーーーー セクション5　インタビュー  ーーーーーーーーー */

.sec-interview {
  text-align: center;
	padding: 5vw 40px 10vw 40px;
	margin-top: -6.3vw;
}

.sec-interview img {
  width: 60vw;
  height: auto;
  margin-bottom: 20px;
}

.interviews-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
}

.interview {
  width: 45%;
  display: flex;
  text-align: left;
}

.gender {
	text-align: center;
	margin-right: 10px;
	width:13vw;
	font-weight: bold;
}

.gender img {
	margin-bottom: 0px;
}

.interview p {
	width:38vw;
}

@media not all and (min-width: 768px) {
	.interviews-container {
		flex-direction: column;
	}
	.interview {
		width: 100%;
	}
	.gender {
		width:18vw;
		font-weight: bold;
	}
	.interview p {
		width:82vw;
	}
}

/* ーーーーーーーーー セクション6  こんなことしていませんか　ーーーーーーーーー */

.sec-hatena {
	background:#efefef;
	padding: 5vw 40px 10vw 40px;
	margin-top: -6.5vw;
	position: relative;
	text-align: center
}

.sec-hatena h2 span {
	font-size: 0.5em;
}

.question {
	position: absolute;
	width:10vw;
	left:40px;
	top:10px;
}

.sec-hatena p {
	display: inline-block;
	margin: 0 auto 30px;
	text-align: center;
	width:60vw;
}

.katakori {
	position: absolute;
	width:25vw;
	right:40px;
	bottom:-4px;
}

/* ーーーーーーーーー セクション7  施術の流れ　ーーーーーーーーー */

.sec-nagare {
	background:#d3edfb;
	padding: 5vw 40px 10vw 40px;
	margin-top: -8vw;
	text-align: center;
}

.sec-nagare h2 {
  color: #187fc4;
  margin-bottom: 20px;
}

.procedure-list {
  text-align: left;
}

.procedure-list tr {
	border-bottom: 1px dashed #187fc4;
}

.icon {
  width: 1.8em;
  height: 1.8em;
  border-radius: 50%;
  background-color: #187fc4;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

.procedure-list td {
	font-size: 1em;
  text-align:left;
	padding: 0.5em
}

@media not all and (min-width: 768px) {
	.icon {
		width: 1em;
		height: 1em;
	}
	.procedure-list td {
		padding: 0.5em 0.1em;
	}

}

/* ーーーーーーーーー セクション8 プロフィール ーーーーーーーーー */

.sec-profile {
	padding: 5vw 40px 10vw 40px;
	margin-top: -7vw;
}

.sec-profile .bg {
  background-color: #efefef;
  border-radius: 20px;
  padding: 20px;
  display: flex;
	justify-content: center;
	align-items: center;
}

.sec-profile img {
  width: 25vw;
  height: auto;
  margin-right: 40px;
}

.profiletext {
	text-align: left;
}

.profiletext h3 {
	font-weight: bold;
	text-align: left;
}

.profiletext span {
  font-size: 0.8em;
  margin-right: 1em;
}

.profiletext .y {
	padding-right: 0.5em;
}

.sec-profile p {
	padding: 20px 0;
}

@media not all and (min-width: 768px) {
	.sec-profile img {
		width: 40vw;
		margin-right: 0;
	}
	.sec-profile .bg {
		flex-direction: column;
	}
	.profiletext h3 {
		text-align: center;
	}
}

/* ーーーーーーーーー セクション9 ご予約お問い合わせ ーーーーーーーーー */

.sec-contact {
  background-color: #0736a0;
	padding: 5vw 40px 1vw 40px;
	margin-top: -6.3vw;
	text-align: center;
}

.sec-contact h2 {
  color: white;
  margin-bottom: 10px;
}

@media not all and (min-width: 768px) {
	.sec-contact .contact2 :last-child img {
		width:60%;
	}
}

/* ーーーーーーーーー フッター  ーーーーーーーーー */

.footer {
	background-color: #898989;
  padding: 40px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.footer-left {
  width: 50%;
	margin-right: 20px;
}

.footer-left img {
  max-width: 250px;
  height: auto;
}

.footer p {
	color: #fff;
}

.footer table {
	margin-top: 1em;
}

.footer td ,.footer th,.footer a {
	font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	color: #fff;
}

.footer th {
	padding-right: 10px;
	width:6em;
}

.footer td img {
	margin-left: 0.5em;
	height: 15px;
}

.footer-right {
  width: 50%;
  text-align: left;
}

.footer-right p {
	font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.footer-right iframe {
  width: 100%;
  height: 50vh;
}

@media not all and (min-width: 768px) {
	.footer {
		flex-direction: column;
	}
	.footer-left {
		width: 100%;
		margin-right: 0;
	}
	.footer-right {
		width: 100%;
		margin-top: 10px;
	}
	.footer-right iframe {
		height: 30vh;
	}

}

/* ページトップに戻るボタン */
.scroll-top-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  background-color: #fff;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #898989;
  cursor: pointer;
  opacity: 0; /* 初期状態は非表示 */
  visibility: hidden; /* 初期状態は非表示 */
  transition: opacity 0.3s, visibility 0.3s;
}

.scroll-top-btn.show {
  opacity: 1;
  visibility: visible; /* スクロールすると表示 */
}