body {
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-weight: 600;
	font-style: normal;
	margin: 0;
	font-size: 18px;
	color: #000;
	margin: 0 auto;
	/* max-width: 390px; */
	background: aliceblue;
	letter-spacing: 5%;
}

.container {
	max-width: 390px;
	margin: 0 auto;
	background: #fff;
}

img {
	width: 100%;
	display: block;
}

p {
	font-size: 16px;
}

p.shippori-mincho-bold {
	font-family: "Shippori Mincho", serif;
	font-weight: 700;
	font-style: normal;
}

span.font_monts {
	font-size: 2.2em;
	padding-right: 3px;
	color: #FF1100;
}

.mincho {
	font-family: "Zen Old Mincho", serif;
	font-weight: 700;
	font-style: normal;
}

section {
	padding: 40px 0;
}

.flex {
	display: flex;
	justify-content: center;
	align-items: center;
}

/* -------------

header 

---------------*/
.header {
	position: fixed;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	max-width: 390px;
	z-index: 9999;
}

.header-inner {
	height: 55px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: rgba(255, 255, 255, 0.8);
}

.header-logo img {
	width: 160px;
}

a.shippori-mincho-bold {
	font-family: "Shippori Mincho", serif;
	font-weight: 700;
	font-style: normal;
	line-height: 0;
	text-decoration: none;
}

span.line.hd-line {
	font-size: 18px;
	text-align: center;
	display: block;
}

i.bi.bi-line {
	font-size: 32px;
	color: #0C3969;
	padding-right: 7px;
}

/* =====================
hamburger
===================== */

.hamburger {
	width: 55px;
	height: 55px;
	position: relative;
	background: #0C3969;
	border: none;
	cursor: pointer;
	z-index: 1001;
}

.hamburger span {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: 24px;
	height: 1px;
	background: #fff;
	transition: .4s;
}

.hamburger span:nth-child(1) {
	top: 20px;
}

.hamburger span:nth-child(2) {
	top: 28px;
}

.hamburger span:nth-child(3) {
	top: 36px;
}

/* active */

.hamburger.active span:nth-child(1) {
	transform:
		translateX(-50%) rotate(45deg);

	top: 21px;
}

.hamburger.active span:nth-child(2) {
	opacity: 0;
}

.hamburger.active span:nth-child(3) {
	transform:
		translateX(-50%) rotate(-45deg);

	top: 21px;
}

/* =====================
drawer
===================== */

.drawer-menu {
	position: fixed;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	max-width: 581px;
	height: 100vh;
	z-index: 999;

	background:
		linear-gradient(180deg,
			#0C3969 0%,
			#071F3A 100%);

	transition: .5s;
	z-index: 1000;
	overflow-y: auto;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: .3s;
}

.drawer-menu.active {
	right: 0;
}

.drawer-menu.active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.drawer-inner {
	padding: 15px 15px 50px;
}

.drawer-nav li {
	border-bottom:
		1px solid rgba(255, 255, 255, .08);
	list-style: none;
}

.drawer-nav li:last-child {
	border: none;
}

.drawer-nav a {
	display: flex;
	flex-direction: column;
	padding: 20px 0;
	color: #fff;
	text-decoration: none;
}

.drawer-nav .en {
	font-size: 11px;
	letter-spacing: .18em;
	color: rgba(255, 255, 255, .5);
	margin-bottom: 8px;
}

.drawer-nav .jp {
	font-size: 18px;
	letter-spacing: .08em;
}

.drawer-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 56px;
	margin-top: 18px;
	background: linear-gradient(135deg, #D4B06A 0%, #B78D4A 100%);
	color: #fff;
	font-size: 16px;
	letter-spacing: .08em;
	border-radius: 5px;
	text-decoration: none;
	width: 90%;
	margin: 0 auto;
	margin-bottom: 17px;
}

/* -------------

kv 

---------------*/
section.top-kv {
	background-image: url(./img/top-mv_bg.png);
	background-size: cover;
	background-position: center;
	padding: 75px 0 30px;
	background-repeat: no-repeat;
}

p.kv-brand {
	margin: 0;
	text-align: center;
	font-size: 32px;
	line-height: 1.2;
	letter-spacing: 6%;
}

.kv-brand .line {
	text-align: center;
	line-height: 1.2;
	letter-spacing: 6%;
	display: inline-block;
	font-size: 32px;
	letter-spacing: 0.08em;
	background: linear-gradient(180deg,
			#1e3a5f 0%,
			#4a6f96 50%,
			#1e3a5f 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.kv-brand .sub {
	display: inline-block;
	font-size: 28px;
	margin-top: 5px;
	letter-spacing: 3%;
	background: linear-gradient(180deg,
			#1e3a5f 0%,
			#4a6f96 50%,
			#1e3a5f 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

h1.kv-title {
	font-weight: 500;
	text-align: center;
	font-size: 30px;
	margin-bottom: 5px;
}

span.brown_line {
	position: relative;
	z-index: 99;
}

span.brown_line::before {
	content: '';
	position: absolute;
	bottom: 1px;
	display: inline-block;
	width: 100%;
	height: 27%;
	background-color: rgba(200, 169, 106, 29%);
	z-index: -1;
}

p.kv-sub {
	text-align: center;
	font-weight: 500;
	margin-top: 0;
}

.kv-icons {
	display: flex;
	align-items: baseline;
	justify-content: space-evenly;
	font-size: 17px;
	text-align: center;
	line-height: 17px;
	margin: 28px 0;
}

.kv-icons div {
	background: #F4F9FF;
	width: 120px;
	height: 120px;
	border-radius: 50%;
	box-shadow: 0px 0px 5px 1px rgba(145, 145, 145, 30%);
}

.kv-icons img {
	width: 38%;
	display: block;
	margin: 12px auto;
}

/* -------------

CTAボタン 

---------------*/
.cta-box {
	width: 90%;
	margin: 0 auto;
}

/* カード */
.cta-card {
	background-image: url(./img/cta_bg.png);
	background-position: center;
	background-size: inherit;
	position: relative;
	margin: 0 auto;
	border-radius: 12px;
	padding: 65px 13px 25px;
	box-shadow: 0 0 6px 4px #CACACA;
}

/* 上の帯 */
.cta-label {
	position: absolute;
	top: 17px;
	left: 50%;
	transform: translateX(-50%);
	background: #243b55;
	padding: 10px 40px;
	width: 83%;
	text-align: center;
}

/* 左の折れ */
.cta-label::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: -10px;

	border-top: 10px solid #1b2c40;
	/* 少し暗く */
	border-left: 10px solid transparent;
}

/* 右の折れ */
.cta-label::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: -10px;

	border-top: 10px solid #1b2c40;
	border-right: 10px solid transparent;
}

.cta-label span {
	background: #fff;
	color: #243b55;
	padding: 3px 35px;
	border-radius: 50px;
	font-weight: bold;
	letter-spacing: 15%;
}

.cta-content {
	background: #fff;
	padding: 10px 0px;
	margin: 15px 0;
}

/* タイトル */
.cta-title {
	text-align: center;
	font-size: 19px;
	margin-bottom: 0px;
	margin-top: 0;
	text-align: left;
	padding-left: .5em;
	font-weight: 300;
}

/* 価格エリア */
.cta-price-area {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0px;
	width: 95%;
	margin: 0 auto;
}

.price-old {
	width: 32%;
}

.price-new {
	display: flex;
	align-items: flex-end;
	gap: 4px;
	display: inline-block;
	transform: skewX(-15deg);
}

.price-old_flex {
	justify-content: flex-start;
	transform: skewX(-15deg);
}

/* 数字 */
.price-num {
	font-size: 23px;
	font-weight: bold;
	color: #243b55;
	padding-right: 1px;
}

/* 通常価格 */
.price-old p {
	font-weight: 300;
	font-size: 12px;
	margin-bottom: -12px;
}

/* 新価格 */
.price-new span {
	font-size: 36px;
	color: #e74c3c;
	font-weight: bold;
}

/* 円 */
.price-old span.price-yen {
	font-size: 13px;
	margin-bottom: 11px;
	margin-top: -7px;
	display: block;
	font-weight: 300;
}

.price-new span.price-yen {
	font-size: 19px;
	margin-bottom: 4px;
	margin-top: -8px;
	display: block;
	font-weight: 300;
}

/* 税込 */
.price-old span.price-tax {
	font-size: 5px;
	font-weight: 300;
}

.price-new span.price-tax {
	font-size: 7px;
	font-weight: 300;
}

.price-old span {
	position: relative;
}

/* 斜線をそれっぽく */
.price-old .price-num::after {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 110%;
	height: 2px;
	background: #1e3a5f;
	transform: rotate(-10deg);
}

/* 矢印 */
.price-arrow {
	font-size: 23px;
	color: #1e3a5f;
}

/* ボタン */
.cta-btn {
	display: block;
	text-align: center;
	background: #39b36e;
	color: #fff;
	padding: 10px 16px;
	border-radius: 999px;
	font-weight: bold;
	text-decoration: none;
	box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.3);
	transition: 0.3s;
}

.cta-btn:hover {
	opacity: 0.9;
}

.cta-flex {
	display: flex;
	align-items: center;
	justify-content: space-around;
	margin-top: 10px;
	padding: 5px 0;
}

.cta-flex a {
	text-decoration: none;
	color: #fff;
	font-weight: 400;
	font-size: 12px;
	text-align: center;
	display: block;
	width: 100%;
	background: #C8A96A;
	padding: 10px 0;
	margin: 0 3px;
	border-radius: 30px;
	/* letter-spacing: 0; */
}

/* -----------------------

バナー

-------------------------- */
section.banner {
	padding-top: 0;
	width: 92%;
	margin: 0 auto;
}

/* -----------------------

お悩み

-------------------------- */
section.question {
	background: url(./img/trouble_bg.png);
	background-position: center;
	background-size: cover;
	padding: 40px 0 65px;
	position: relative;
	z-index: 99;
}

.question-txt {
	text-align: center;
	line-height: 34px;
}

.question-txt p {
	margin-top: 0;
	font-size: 35px;
	margin-bottom: 25px;
}

.question_list p {
	padding: 16px 0;
	width: 80%;
	background: linear-gradient(to right, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.4) 40%, rgba(0, 0, 0, 0) 100%);
	color: #fff;
	padding-left: 1.8em;
	position: relative;
}

.question_list p::before {
	content: '';
	position: absolute;
	background: url(./img/check_icon.png);
	background-size: contain;
	display: inline-block;
	width: 19px;
	height: 19px;
	background-repeat: no-repeat;
	left: 2%;
	top: 54%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
}

/* -----------------------

answer

-------------------------- */
section.answer {
	background: url(./img/trouble_bg-2.png);
	background-position: center;
	background-size: cover;
	margin-top: -47px;
	z-index: 9;
	position: relative;
	padding-top: 50px;
	text-align: center;
}

/* section.answer:after {
	position: absolute;
	bottom: -24px;
	font-size: 45px;
	content: "|";
	font-weight: 100;
	text-align: center;
	left: 49%;
	opacity: .5;
	color: #1F3853;
} */

/* -----------------------

heading

-------------------------- */
.heading-25 {
	position: relative;
	text-align: center;
	color: #fff;
	z-index: 1111;
	font-size: 30px;
	text-shadow: 0 2px 5px rgba(0, 0, 0, 25%);
	margin-top: 0;
}

.heading-25::before {
	position: absolute;
	bottom: -19px;
	left: 50%;
	z-index: -1;
	color: #fff;
	font-size: 40px;
	line-height: 1;
	content: attr(data-word);
	pointer-events: none;
	font-family: "Great Vibes", cursive;
	font-weight: 400;
	font-style: normal;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	width: 100%;
	opacity: .25;
	letter-spacing: 13%;
}

h2.heading-25.text_blue {
	color: #000;
	text-shadow: none;
}

.heading-25.text_blue::before {
	color: #0C3969;
	opacity: .1;
}

span.answer-heading {
	font-size: 22px;
}

p.answer-main {
	font-size: 35px;
	margin: 20px 0;
}

span.brown_bg {
	background: #C8A96A;
	padding: 0 10px;
	color: #fff;
}

p.answer-text {
	font-size: 25px;
	color: #1F3853;
	margin: 15px 0;
}

span.blue_bg {
	background: linear-gradient(159deg, #1e3a5f 7%, #4a6f96 66%, #1e3a5f 85%);
	color: #fff;
	padding: 0px 5px;
	font-size: 35px;
}

p.answer-text-2 {
	font-size: 20px;
	font-weight: 400;
	line-height: 45px;
}

span.blue_bg {
	background: linear-gradient(159deg, #1F3853 7%, #637485 66%, #1F3853 85%);
	color: #fff;
	padding: 0px 5px;
	font-size: 35px;
	font-weight: bold;
	margin-right: 5px;
}

/* -----------------------

what

-------------------------- */
section.what {
	background: url(./img/what_bg.png);
	background-size: cover;
	background-position: center;
	margin-top: -43px;
	padding-top: 70px;
}

h2.what-heading {
	text-align: center;
	font-size: 28px;
	color: #1F3853;
}

h2.what-heading span {
	font-weight: 900;
}

p.center-text {
	text-align: center;
	font-weight: 500;
}

.efficacy-item:first-child {
	background: url(./img/explanation-1.jpg);
	background-size: cover;
	background-position: center;
}

.efficacy-item:nth-child(2) {
	background: url(./img/explanation-2.jpg);
	background-size: cover;
	background-position: center;
}

.efficacy-item:last-child {
	background: url(./img/explanation-3.jpg);
	background-size: cover;
	background-position: center;
}

.efficacy-item {
	padding: 10px 25px;
	color: #fff;
}

p.efficacy-ttl.mincho {
	letter-spacing: 10%;
	font-weight: 600;
	background: linear-gradient(to right, rgba(200, 169, 106, 0.6) 40%, rgba(200, 169, 106, 0.4) 60%, rgba(200, 169, 106, 0) 100%);
	display: inline-block;
	padding: 5px 20px 5px 15px;
	margin-bottom: 0;
}

p.efficacy-text {
	font-size: 16px;
}

.efficacy-list {
	margin: 25px 0;
}

p.what-text {
	text-align: center;
	font-size: 22px;
	font-weight: 400;
	line-height: 38px;
	margin-bottom: 0;
}

p.what-text span {
	font-weight: bold;
	font-size: 28px;
	color: #E35848;
}

/* -----------------------

point

-------------------------- */
/* 全体 */
.point {
	padding: 50px 0px 20px;
	text-align: center;
	background: #F9FCFF;
	background-position: center;
	background-size: cover;
	margin-top: -40px;
}

p.point-heading {
	font-size: 25px;
	line-height: 44px;
	font-weight: 500;
	color: #0C3969;
}

.point-inner {
	margin: 30px auto;
	width: 92%;
}

/* 見出し（線＋丸） */
.point-head {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: -8px;
}

/* 線 */
.point-head .line {
	height: 1px;
	background: #1e3a5f;
	flex: 1;
	max-width: 105px;
}

/* 丸 */
.point-circle {
	position: relative;
	width: 70px;
	height: 70px;
	background: #1e3a5f;
	border-radius: 50%;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	margin: 0 25px;
}

/* 外側の円弧（右下） */
.point-circle::after {
	content: "";
	position: absolute;
	width: 85px;
	height: 85px;
	border: 1px solid #1e3a5f;
	border-radius: 50%;

	top: -10px;
	left: -10px;

	/* ここが超重要 */
	clip-path: polygon(60% 50%, 96% 40%, 100% 100%, 40% 95%);
}

/* 外側の円弧（左上） */
.point-circle::before {
	content: "";
	position: absolute;
	width: 85px;
	height: 85px;
	border: 1px solid #1e3a5f;
	border-radius: 50%;
	top: -6px;
	left: -6px;
	clip-path: polygon(0 0, 40% 0, 40% 40%, 0 40%);
}

/* POINT */
.point-label {
	font-size: 10px;
	letter-spacing: 1px;
}

/* 01 */
.point-num {
	font-size: 20px;
	font-weight: bold;
}

/* タイトル */
.point-title {
	font-size: 25px;
	line-height: 1.6;
	margin-bottom: 20px;
	color: #1e3a5f;
	border-bottom: 1px solid #000;
	padding-bottom: 16px;
}

/* 画像 */
.point-img img {
	width: 100%;
	margin-bottom: 15px;
}

/* テキスト */
.point-text {
	font-size: 16px;
	line-height: 1.8;
	text-align: left;
	font-weight: 500;
	letter-spacing: 3%;
}

.point-text span {
	color: #1e3a5f;
	font-weight: bold;
}

/* -----------------------

voice

-------------------------- */
.voice {
	position: relative;
	padding: 60px 0px;
	overflow: hidden;
	/* ベースグラデ */
	background: linear-gradient(180deg,
			#d9bb84 0%,
			#caa86f 50%,
			#b8925f 100%);
}

.voice::before {
	content: "";
	position: absolute;
	inset: 0;

	background: radial-gradient(circle at 50% 0%,
			rgba(255, 255, 255, 0.4),
			rgba(255, 255, 255, 0) 60%);

	pointer-events: none;
}

.voice::after {
	content: "";
	position: absolute;
	inset: 0;

	background: linear-gradient(to bottom,
			rgba(0, 0, 0, 0) 60%,
			rgba(0, 0, 0, 0.15));

	pointer-events: none;
}

.voice {
	background:
		linear-gradient(120deg,
			rgba(255, 255, 255, 0.2) 0%,
			rgba(255, 255, 255, 0) 40%),
		linear-gradient(180deg,
			#d9bb84 0%,
			#caa86f 50%,
			#b8925f 100%);
}

.voice {
	background-blend-mode: soft-light;
}

.voice-list {
	margin-top: 40px;
}

.voice-item {
	position: relative;
	padding: 20px;
	border-radius: 0 100px 100px 0;
	background: #fff;
	overflow: hidden;
	margin-right: 20px;
	margin: 20px 0;
	width: 85%;
}

/* 背景レイヤー */
.voice-item::before {
	content: "";
	position: absolute;
	inset: 0;
	background: inherit;
	border-radius: inherit;
	z-index: -1;
}

.voice-item.reverse {
	border-radius: 100px 0px 0px 100px;
	margin-right: 0px;
	margin-left: 20px;
	padding-left: 45px;
	padding-right: 0;
}

p.mincho.voice-num {
	font-size: 28px;
	margin-bottom: 0;
	margin-top: 5px;
	transform: skewX(-15deg);
	color: #0C3969;
}

.voice-inner {
	font-size: 16px;
	margin: 5px 0;
	font-weight: 500;
}

/* -----------------------

サロンについて

-------------------------- */
section.saron {
	padding-top: 0;
	background-color: #F9FCFF;
}

.saron-heading {
	background: linear-gradient(to bottom,
			#1c3d63 0%,
			#244a75 50%,
			#2f5b8a 100%);
	color: #fff;
	text-align: center;
	padding: 5px 20px;
	position: relative;
	margin-bottom: 40px;
}

.saron-heading::after {
	content: "";
	position: absolute;
	bottom: -20px;
	left: 50%;
	transform: translateX(-50%);
	border-left: 25px solid transparent;
	border-right: 25px solid transparent;
	border-top: 20px solid #2f5b8a;
}

.saron-heading h2 {
	font-size: 30px;
	margin: 20px 0;
}

.saron-item img {
	width: 20%;
	padding-right: 15px;
}

.saron-item {
	background: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 87%;
	margin: 17px auto;
	border-radius: 15px;
	box-shadow: 2px 4px 9px 1px #DEDBDB;
	padding: 0 10px;
}

p.saron-ttl {
	margin-bottom: 5px;
}

p.saron-inner {
	font-size: 16px;
	font-weight: 500;
	margin-top: 0;
}

.saron-efficacy {
	position: relative;
	padding-left: 20px;
	/* チェック分の余白 */
}

.saron-efficacy::before {
	content: "✔";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	color: #0C3969;
	font-size: 14px;
}

.saron-item-2 {
	background: #fff;
	width: 87%;
	margin: 17px auto;
	border-radius: 15px;
	box-shadow: 2px 4px 9px 1px #DEDBDB;
	padding: 0 10px 15px;
}

p.yellow_bg {
	text-align: center;
	padding-top: 15px;
	position: relative;
	color: #0C3969;
	font-size: 20px;
	z-index: 99;
	margin-bottom: 10px;
}

p.yellow_bg::before {
	content: '';
	position: absolute;
	left: 50%;
	display: inline-block;
	width: 85%;
	height: 8px;
	background-color: #FCF236;
	opacity: 0.6;
	z-index: -1;
	bottom: 2px;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
}

.saron-item-2 .flex {
	flex-wrap: wrap;
	justify-content: space-between;
	width: 91%;
	margin: 0 auto;
}

.saron-efficacy {
	position: relative;
	padding-left: 19px;
	width: 43%;
	margin: 5px 0;
}

.saron-efficacy::before {
	content: "✔";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	color: #0C3969;
	font-size: 14px;
}

/* -----------------------

price

-------------------------- */
section.price {
	padding-bottom: 20px;
}

.price-table {
	width: 100%;
	max-width: 350px;
	margin: 0 auto 30px;
	border-collapse: collapse;
	background: #fff;
}

.price-table th {
	background: #1e3a5f;
	color: #fff;
	padding: 10px;
	font-size: 14px;
	border-right: 1px solid #fff;
}

.price-table td {
	border: 1px solid #cfd8e3;
	padding: 12px;
	font-weight: bold;
	color: #1e3a5f;
	text-align: center;
	font-size: 19px;
}

.price-table td span.table-item {
	font-size: 12px;
	padding-left: 2px;
}

/* モニターラベル */
.monitor-label {
	display: inline-block;
	background: #e85c4a;
	color: #fff;
	padding: 12px 30px;
	border-radius: 0 30px 30px 0px;
	margin-bottom: 20px;
	margin-top: 0;
	font-weight: bold;
	width: 40%;
	font-size: 18px;
}

/* 割引表 */
.monitor .old {
	color: #888;
	margin-right: 5px;
}

.monitor .arrow {
	margin: 0 5px;
	color: #0C3969;
	font-size: 13px;
}

.monitor .new {
	color: #e85c4a;
	font-weight: bold;
	font-size: 22px;
}

.old {
	position: relative;
}

.old::after {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 100%;
	height: 1px;
	background: red;
	transform: rotate(-10deg);
}

.access {
	width: 92%;
	margin: 0 auto;
}

.access p {
	margin: 5px 0;
}

p.note_red {
	font-size: 13px;
	font-weight: 500;
	color: #E35848;
	margin-top: 12px;
}

span.red_bg {
	color: #fff;
	background: #E35848;
	padding: 2px 5px;
	margin-right: 5px;
	font-weight: bold;
}

/* -----------------------

flow

-------------------------- */
section.flow {
	background: url(./img/flow_bg.png);
	background-position: center;
	background-size: cover;
}

.flow-list {
	position: relative;
	width: 94%;
	margin: 35px auto 0;
}

/* 縦の点線 */
.flow-list::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: 2px;
	height: 100%;
	background: repeating-linear-gradient(to bottom, #0C3969, #0C3969 4px, transparent 4px, transparent 8px);
	transform: translateX(-50%);
}

/* 各行 */
.flow-item {
	display: flex;
	align-items: center;
	margin-bottom: 40px;
	position: relative;
	justify-content: center;
	width: 100%;
	;
}

/* 丸 */
.flow-circle {
	position: absolute;
	left: 0;
	width: 90px;
	height: 90px;
	background: #0C3969;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
}

/* テキストカード */
.flow-card {
	margin-left: 40px;
	background: #f5f5f5;
	border-radius: 999px;
	padding: 0px 20px;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
	padding-left: 65px;
	width: 65%;
}

.flow-card p {
	font-size: 20px;
}

.flow-circle p {
	font-size: 22px;
	font-weight: 500;
}

.flow-circle p span {
	font-size: 24px;
	padding-left: 3px;
}

.flow-item:nth-child(1) .flow-circle {
	background-image: url(./img/step-1.png);
	background-position: center;
	background-size: inherit;
}

.flow-item:nth-child(2) .flow-circle {
	background-image: url(./img/step-2.png);
	background-position: center;
	background-size: inherit;
}

.flow-item:nth-child(3) .flow-circle {
	background-image: url(./img/step-3.png);
	background-position: center;
	background-size: inherit;
}

.flow-item:nth-child(4) .flow-circle {
	background-image: url(./img/step-4.png);
	background-position: center;
	background-size: inherit;
}

.flow-item:nth-child(5) .flow-circle {
	background-image: url(./img/step-5.png);
	background-position: center;
	background-size: inherit;
}

.flow-item:nth-child(6) .flow-circle {
	background-image: url(./img/step-6.png);
	background-position: center;
	background-size: inherit;
}

/* -----------------------

qa

-------------------------- */
section.qa {
	background: #F5EDDC;
	text-align: center;
}

.heading-qa {
	display: inline-block;
	position: relative;
}

.heading-qa:before {
	content: '';
	display: inline-block;
	position: absolute;
	bottom: -15px;
	left: 50%;
	transform: translateX(-50%);
	width: 60px;
	height: 2px;
	background-color: #C8A96A;
}

.qa-wrap {
	background: #fff;
	width: 85%;
	margin: 20px auto;
	padding: 5px 10px;
}

p.qa-q span {
	font-family: "Montserrat";
	font-weight: bold;
	font-size: 30px;
	color: #C8A96A;
	margin-right: 10px;
}

p.qa-q {
	text-align: left;
	margin-top: 5px;
	border-bottom: 1px solid;
	padding-bottom: 15px;
	font-size: 18px;
}

.qa-a {
	text-align: left;
	font-weight: 500;
}

/* -----------------------

note

-------------------------- */
section.note {
	background: #F8F1F0;
	width: 80%;
	padding: 5px 20px;
	margin: 40px auto;
	position: relative;
	z-index: 99;
}

p.note-red-text {
	color: #E35848;
	font-weight: bold;
	line-height: 28px;
	font-size: 18px;
}

section.note:after {
	content: '';
	position: absolute;
	background: url(./img/note_mark.png);
	background-size: contain;
	display: inline-block;
	width: 150px;
	height: 150px;
	background-repeat: no-repeat;
	right: 5px;
	bottom: -8px;
	z-index: -1;
	opacity: .8;
}

/* -----------------------

staff

-------------------------- */
section.staff {
	background: url(./img/staff_bg.png);
	background-position: center;
	background-size: cover;
}

.staff-wrap {
	background: #fff;
	width: 80%;
	margin: 25px auto 0;
	padding: 20px;
}

.staff-wrap .flex {
	justify-content: inherit;
}

.staff-wrap img {
	width: 20%;
}

p.staff-name {
	font-size: 20px;
	padding-left: 20px;
}

p.staff-text {
	font-size: 18px;
	font-weight: 500;
	margin: 5px 0;
}

/* -----------------------

footer

-------------------------- */
footer.footer {
	background: #0C3969;
	color: #fff;
	padding-top: 5px;
	text-align: center;
}

.footer__inner p {
	font-size: 16px;
	margin-bottom: 10px;
}

.footer__copyright {
	font-size: 8px;
	font-weight: 100;
	padding-bottom: 10px;
}

.sns-links {
	display: flex;
	gap: 14px;
	align-items: center;
	justify-content: center;
	margin-bottom: 12px;
}

.sns-links a {
	width: 38px;
	height: 38px;
	border: 1px solid rgba(255, 255, 255, .3);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 16px;
	transition: .3s;
}

.sns-links a:hover {
	background: rgba(255, 255, 255, .1);
	transform: translateY(-2px);
}