@charset "UTF-8";

/* ===================================================================
CSS information

file name  :style.css

構成：ページの上から順に、id（セクション）ごとにまとめています。
各セクションの中は「PC → ～1100px → 800～1100px → ～767px」の順です。
（後ろに書いたものが前を上書きするので、この順番を崩さないこと）

  PC       : 1101px～（ベース）
  ～1100px : タブレット + スマホ
  800～1100: タブレット
  ～767px  : スマホ

目次
  1. common   2. header   3. #mv   4. #detail   5. #nav   6. #video
  7. .conv   8. #point   9. #flow   10. #faq   11. #sms_mes
  12. footer

※ reset.css（リセット）と、このファイルの2つを index.html から直接読み込む
=================================================================== */

/*===== 1. common =====*/
/* 旧 module.css から移したルール（使用中のものだけ） */
html {
	overflow-y: scroll;
}

section {
	display: block;
}

.cfx:before,
.cfx:after {
	content: " ";
	display: table;
}

.cfx:after {
	clear: both;
}

.left {
	float: left;
}

.right {
	float: right;
}

html {
	font-size: 62.5%;
}

a {
	color: #e45c51;
}

body {
	font-family: "Noto Sans JP", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
	font-size: 1.6em;
	color: #333333;
	list-style: none;
}

.sp {
	display: none;
}

.box {
	max-width: 1070px;
	margin: 0 auto;
	position: relative;
}

h2 {
	text-align: center;
	position: relative;
}

.orange {
	color: #f06813;
}

@media (min-width: 801px) {
	a[href*="tel:"] {
		pointer-events: none;
		cursor: default;
		text-decoration: none;
		color: #000;
	}
}

@media only screen and (max-width: 1000px) {
	img {
		height: auto;
	}
}

@media only screen and (max-width: 1100px) {
	.pc {
		display: none;
	}

	.sp {
		display: block !important;
	}

	img {
		max-width: 100%;
	}

	body {
		font-size: 1.2em;
	}
}

@media only screen and (min-width: 800px) and (max-width: 1100px) {
	body {
		font-size: 1.6em;
	}
}

/*===== 2. header =====*/
header {
	position: absolute;
	z-index: 2;
	left: 62px;
	top: 40px;
	height: auto;
	padding: 0;
}

@media only screen and (max-width: 1100px) {
	header h1 img {
		max-width: 100px;
	}
}

@media only screen and (min-width: 800px) and (max-width: 1100px) {
	header h1 img {
		max-width: 140px;
	}
}

@media only screen and (max-width: 767px) {
	header {
		position: relative;
		left: 0;
		top: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		width: 100%;
		max-width: none;
		height: 50px;
		padding: 0 2%;
		background: #fff;
	}

	header h1 {
		position: static;
		margin: 0;
	}

	header h1 img {
		width: 100px;
		display: block;
	}
}

/*===== 3. #mv（PC：画像 + オレンジ帯を横並び） =====*/
#mv {
	background: #fcedd9;
	display: flex;
	align-items: stretch;
}

#mv .box {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	max-width: none;
	margin: 0;
}

#mv .box picture,
#mv .box img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

#mv .mv_sub {
	flex: 0 0 30%;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	padding: 30px;
	background-color: #f06813;
}

#mv .mv_sub img {
	width: 100%;
	height: auto;
}

@media only screen and (max-width: 767px) {
	#mv {
		display: block;
	}

	#mv .box picture,
	#mv .box img {
		position: static;
		height: auto;
		object-fit: initial;
	}

	#mv .mv_sub {
		display: block;
		padding: 6.6vw 6.8vw;
	}
}

/*===== 4. #detail =====*/
#detail {
	background-color: #f06813;
	padding: 20px 60px;
	color: #fff;
	border-top: 2px solid #ffffff;
}

@media only screen and (max-width: 767px) {
	#detail {
		padding: 5.5vw;
	}
}

/*===== 5. #nav =====*/
#nav {
	background: #fff;
}

#nav ol {
	display: flex;
	box-sizing: border-box;
	max-width: 1000px;
	height: 130px;
	margin: 0 auto;
	padding: 15px 0;
}

#nav ol li {
	display: flex;
	flex: 1 1 0;
}

#nav ol li+li {
	border-left: 2px solid #f06813;
}

#nav ol li a {
	position: relative;
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: center;
	padding: 0 20px 24px;
	text-align: center;
	text-decoration: none;
	font-size: 24px;
	font-weight: bold;
	line-height: 1.2;
	letter-spacing: .05em;
	color: #333;
}

#nav ol li a:after {
	content: url("../imgs/arrow.png");
	position: absolute;
	bottom: 8px;
	left: 50%;
	margin-left: -14px;
}

@media only screen and (max-width: 767px) {
	#nav ol {
		display: block;
		max-width: none;
		height: auto;
		padding: 0;
	}

	#nav ol li {
		display: block;
		width: 100%;
	}

	#nav ol li+li {
		border-left: 0;
		border-top: 1px solid #f06813;
	}

	#nav ol li a {
		min-height: 44px;
		padding: 0 20px;
		font-size: 14px;
		line-height: 1.5;
		letter-spacing: 0;
	}

	#nav ol li a br {
		display: none;
	}

	#nav ol li a:after {
		content: "";
		top: 50%;
		right: 40px;
		bottom: auto;
		left: auto;
		margin-left: 0;
		width: 13px;
		height: 8px;
		transform: translateY(-50%);
		background: url("../imgs/arrow.png") center / contain no-repeat;
	}
}

/*===== 6. #video =====*/
#video {
	background-color: #fcedd9;
	padding: 100px 0;
}

#video p {
	margin-top: 10px;
	text-align: center;
	font-weight: bold;
	color: #f06813;
	font-size: 18px;
}

.video-wrap {
	position: relative;
	max-width: 700px;
	aspect-ratio: 16 / 9;
	border-radius: 15px;
	overflow: hidden;
	cursor: pointer;
	margin: 0 auto;
}

.video-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.video-wrap iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* サムネ＋再生ボタン：iframe の上に重ねる（タップで JS が非表示にする） */
.video-cover {
	position: absolute;
	inset: 0;
	z-index: 2;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.play-btn {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 68px;
	height: 48px;
	transform: translate(-50%, -50%);
	background: rgba(0, 0, 0, .7);
	border: 0;
	border-radius: 12px;
	cursor: pointer;
}

.play-btn::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-40%, -50%);
	border-style: solid;
	border-width: 10px 0 10px 18px;
	border-color: transparent transparent transparent #fff;
}

.video-wrap:hover .play-btn {
	background: #f00;
}

@media only screen and (max-width: 767px) {
	#video {
		padding: 14vw 5.3vw;
	}

	#video p {
		margin-top: 2.6vw;
		font-size: 3.2vw;
	}
}

/*===== 7. .conv =====*/
.conv {
	padding: 40px 0 100px;
	text-align: center;
}

.conv a {
	display: inline-block;
}

.conv a img {
	display: block;
}

/* ボタン画像（button01 / button02）：クリック中に沈む */
.conv a,
#point .point_btn_wrap a {
	-webkit-tap-highlight-color: transparent;
}

.conv a img,
#point .point_btn_wrap a img {
	transition: transform 0.2s ease, filter 0.2s ease;
}

/* .is-pressed は index.html 末尾のJSが付け外し（素早いクリックでも沈みが見えるよう最低180ms保持） */
.conv a:active img,
.conv a.is-pressed img,
#point .point_btn_wrap a:active img,
#point .point_btn_wrap a.is-pressed img {
	transform: translateY(4px) scale(0.98);
	filter: brightness(0.92);
	transition-duration: 0.05s;
}

.conv small {
	display: block;
	margin-top: -16px;
	font-weight: bold;
	font-size: 18px;
}

@media only screen and (max-width: 767px) {
	.conv {
		padding: 5.3vw;
	}

	.conv small {
		font-size: 3.2vw;
		padding-top: 2.0vw;
	}
}

/*===============================================

	8. #point（ASUMOの特徴・3カード）
	  .point01 … スマホ完結（写真右下）
	  .point02 … お使い道自由（文章の下に シーン画像）
	  .point03 … 月々2,000円（写真右下 + ボタン）
	PC：見出し + 文章を左、写真を右下
	SP：見出し → 写真 → 文章 の縦積み

===============================================*/

#point {
	background-color: #fcedd9;
	padding: 60px 4% 90px;
}

/* ---- h2（見出し + 短い下線） ---- */
#point h2 {
	font-size: 34px;
	font-weight: 800;
	line-height: 1.4;
	margin-bottom: 70px;
}

#point h2 .orange {
	font-size: 40px;
}

#point h2 .line {
	position: relative;
	display: inline-block;
}

#point h2 .line::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -6px;
	width: 100px;
	height: 2px;
	background: #f06813;
	transform: translateX(-50%);
}

/* ---- カード共通 ---- */
#point .point01,
#point .point02,
#point .point03 {
	position: relative;
	box-sizing: border-box;
	max-width: 1000px;
	margin: 0 auto 80px;
	padding: 40px 50px 30px;
	border: 2px dashed #f06813;
	border-radius: 15px;
	background-color: #fff;
}

#point .point03 {
	margin-bottom: 0;
}

/* 写真が右下に乗るカードは最低の高さを確保 */
#point .point01,
#point .point03 {
	min-height: 300px;
}

/* ---- h3（アイコン + 見出し） ---- */
#point h3 {
	display: flex;
	align-items: center;
	margin: 0 0 24px;
	font-size: 36px;
	font-weight: 800;
	line-height: 1.3;
	text-align: left;
}

#point h3 .orange {
	font-size: 40px;
}

#point h3::before {
	content: "";
	flex: 0 0 auto;
	margin-right: 20px;
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
}

#point .point01 h3::before {
	width: 44px;
	height: 59px;
	background-image: url("../imgs/point01_icon.png");
}

#point .point02 h3::before {
	width: 70px;
	height: 59px;
	background-image: url("../imgs/point02_icon.png");
}

#point .point03 h3::before {
	width: 61px;
	height: 59px;
	background-image: url("../imgs/point03_icon.png");
}

/* 2行見出しの行間を詰める */
#point .point03 h3 .h3_txt {
	line-height: 0.8;
}

/* ---- 本文 ---- */
#point .point01_main,
#point .point02_main {
	position: static;
}

#point .point01_main p,
#point .point02_main p {
	box-sizing: border-box;
	width: 80%;
	margin: 0;
	padding-left: 20px;
	border-left: 3px solid #f06813;
	font-size: 18px;
	font-weight: bold;
	line-height: 1.9;
}

/* お使い道：文章は全幅 */
#point .point02_main p {
	width: 100%;
}

/* ---- 写真：カード右下に固定（01・03） ---- */
#point .point01_main_img {
	position: absolute;
	right: 30px;
	bottom: 0;
	width: 28%;
	max-width: 280px;
	line-height: 0;
}

#point .point01_main_img img {
	display: block;
	width: 100%;
	height: auto;
}

/* ---- シーン画像（02）
	アイコン帯(scene_icon_pc)を土台に、女性・吹き出し+フクロウを重ねる
	女性はカード左下、吹き出しはカード下端に近い位置へ ---- */
#point .point02 {
	padding: 40px 66px 0;
}

#point .point02_scene {
	position: relative;
	height: 0;
	margin-top: 48px;
	/* 高さ＝帯(250) + カード下端までの余白(67) ＝ 幅の約35.8% */
	padding-bottom: 35.8%;
}

/* 薄いオレンジの帯（画像ではなくCSSで作る） */
#point .point02_scene::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 78.9%;
	/* 帯250 ÷ 全体317 */
	border-radius: 10px;
	background: #fcedd9;
}

#point .point02_scene img {
	position: absolute;
	display: block;
	height: auto;
}

/* アイコン一覧：帯の右側（画像内の余白ぶん少し左から） */
#point .scene_icon {
	top: 7%;
	left: 28%;
	width: 68%;
}

/* 女性：帯の左に重ね、足元はカード下端 */
#point .scene_woman {
	bottom: 0;
	left: -3.4%;
	width: 32%;
}

/* 吹き出し + フクロウ：帯の下に重ねる */
#point .scene_bubble {
	bottom: 7.9%;
	left: 38%;
	width: 64%;
}

/* ---- ボタン + 注釈（03） ---- */
#point .point_btn_wrap {
	width: 62%;
	margin-top: 24px;
}

#point .point_btn_wrap a {
	display: block;
	max-width: 460px;
}

#point .point_btn_wrap img {
	display: block;
	width: 100%;
	height: auto;
}

#point .point_btn_wrap small {
	display: block;
	font-size: 14px;
	line-height: 1.6;
	text-align: start;
	font-weight: bold;
}

/* ～767px：スマホ（縦積み） */
@media only screen and (max-width: 767px) {
	#point {
		padding: 10.6vw 5.3vw;
	}

	#point h2 {
		margin-bottom: 8vw;
		font-size: 4.8vw;
	}

	#point h2 .orange {
		font-size: 5.8vw;
	}

	#point h2 .line::after {
		bottom: -1.6vw;
		width: 18vw;
	}

	#point .point01,
	#point .point02,
	#point .point03 {
		max-width: none;
		min-height: 0;
		margin: 0 0 8vw;
		padding: 6vw 5vw;
	}

	#point .point03 {
		margin-bottom: 0;
	}

	#point .scene_woman {
		bottom: 0;
		left: -3.4%;
		width: 32%;
	}

	#point .point01_main_img img {
		display: block;
		width: 80%;
		height: auto;
		margin: 0 auto;
	}

	#point h3 {
		justify-content: center;
		margin-bottom: 4vw;
		font-size: 3.7vw;
	}

	#point h3 .orange {
		font-size: 5vw;
	}

	#point h3 br {
		display: none;
	}

	#point h3::before {
		margin-right: 1vw;
	}

	#point .point01 h3::before {
		width: 5.2vw;
		height: 8.6vw;
	}

	#point .point02 h3::before {
		width: 7.8vw;
		height: 7.4vw;
	}

	#point .point03 h3::before {
		width: 7vw;
		height: 7.8vw;
	}

	/* 写真を上、文章を下へ */
	#point .point01_main {
		display: flex;
		flex-direction: column-reverse;
	}

	#point .point01_main_img {
		position: static;
		width: 40%;
		max-width: none;
		margin: 0 auto 5vw;
	}

	#point .point01_main p,
	#point .point02_main p {
		width: 100%;
		padding-left: 3.2vw;
		border-left-width: 2px;
		font-size: 3.2vw;
		line-height: 1.65;
	}

	#point .point01_main p br,
	#point .point02_main p br {
		display: none;
	}

	/* お使い道：SPもPCと同じ重ね方（帯はCSS、女性・吹き出しは重ねる） */
	#point .point02 {
		padding: 6vw 6.7vw 0;
	}

	#point .point02_scene {
		margin-top: 5vw;
		/* 高さ＝帯(216) + カード下端までの余白(27) ＝ 幅の約57.6% */
		padding-bottom: 57.6%;
	}

	#point .point02_scene::before {
		height: 88.9%;
		/* 帯216 ÷ 全体243 */
		border-radius: 2.5vw;
	}

	/* アイコン一覧（3＋2の並び） */
	#point .scene_icon {
		top: 8%;
		left: 33%;
		width: 60%;
	}

	/* 女性：帯の左に重ね、足元はカード下端 */
	#point .scene_woman {
		bottom: 0;
		left: -1.7%;
		width: 38%;
	}

	/* 吹き出し + フクロウ */
	#point .scene_bubble {
		bottom: 7%;
		left: 37%;
		width: 62%;
	}

	#point .point_btn_wrap {
		width: 100%;
		margin-top: 5vw;
	}

	#point .point_btn_wrap a {
		max-width: none;
	}

	#point .point_btn_wrap small {
		text-align: center;
		font-size: 2.1vw;
	}
}

/*===============================================

	9. #flow（ご契約までの流れ）
	STEP1〜5を <ol> で並べ、縦のオレンジ点線は CSS で引く
	PC / SP で同じHTML。SPは数値を vw にして縮める

	【縦線と末尾の丸の考え方】
	  線  ：STEP丸の下（top）から、項目の下端（bottom:0）まで
	  丸  ：最後の項目の「下端」に固定（top の px ではなく bottom:0）
	  → テキストが折り返して項目が高くなっても、線と丸が一緒に動くのでズレない

===============================================*/

#flow {
	background-color: #fff;
	padding: 60px 4% 0;
}

/* ---- h2（#point と同じ） ---- */
#flow h2 {
	font-size: 34px;
	font-weight: 800;
	line-height: 1.4;
	margin-bottom: 70px;
}

#flow h2 .orange {
	font-size: 40px;
}

#flow h2 .line {
	position: relative;
	display: inline-block;
}

#flow h2 .line::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -6px;
	width: 100px;
	height: 2px;
	background: #f06813;
	transform: translateX(-50%);
}

/* ---- リスト ---- */
#flow .flow_list {
	max-width: 1000px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

#flow .flow_item {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 50px;
	padding-bottom: 44px;
}

/* 縦の点線：STEP丸の下から項目の下端まで（丸の中心 = 36px） */
#flow .flow_item::before {
	content: "";
	position: absolute;
	top: 72px;
	bottom: 0;
	left: 49px;
	border-left: 3px dotted #f06813;
	transform: translateX(-50%);
}

/* 最後の項目：線の終点に小さい丸（下端に固定） */
#flow .flow_item:last-child::after {
	content: "";
	position: absolute;
	bottom: 0;
	/* ← top の固定pxをやめて下端基準に */
	left: 49px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #f06813;
	transform: translateX(-50%);
}

/* ---- STEP丸 ---- */
#flow .flow_step {
	position: relative;
	z-index: 1;
	flex: 0 0 100px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100px;
	height: 100px;
	border-radius: 50%;
	background: #f06813;
	color: #fff;
	line-height: 1;
}

/* STEP画像は丸の幅に合わせる（画面幅で大きさが変わらないように） */
#flow .flow_step img {
	display: block;
	width: 100%;
	height: auto;
}

/* ---- 本文 ---- */
#flow .flow_body {
	flex: 1;
	min-width: 0;
	padding-top: 10px;
}

#flow .flow_body h3 {
	align-items: center;
	gap: 50px;
	margin: 0 0 10px;
	font-size: 36px;
	font-weight: 800;
	line-height: 1.4;
	display: flex;
}

#flow .flow_icon {
	flex: 0 0 auto;
	width: 83px;
	height: auto;
}

#flow .flow_sub {
	font-size: 24px;
	font-weight: bold;
}

#flow .flow_body .kari {
	line-height: 1.0;
}

#flow .flow_body p {
	margin: 0;
	font-size: 20px;
	line-height: 1.8;
	font-weight: bold;
	margin-bottom: 5px;
}

/* 説明文を h3 の「文字」と同じ位置から始める（アイコン幅 86px + h3 の gap 40px） */
#flow .body_sb {
	margin-left: calc(86px + 50px);
}

#flow .flow_body small {
	display: block;
	font-size: 11px;
	line-height: 1.6;
}

/* 注釈の ※：.caution を基準にして左端に置く */
#flow .flow_body .caution {
	position: relative;
	padding-left: 1.2em;
	font-size: 14px;
}

#flow .flow_body .caution::before {
	content: "※";
	position: absolute;
	left: 0;
	top: 0;
}

/* ---- 末尾の写真 ---- */
#flow .flow_end {
	margin-top: 10px;
	text-align: center;
	line-height: 0;
}

#flow .flow_end img {
	width: 260px;
	max-width: 60%;
	height: auto;
}

/* ～767px：スマホ */
@media only screen and (max-width: 767px) {
	#flow {
		padding: 10.6vw 5.3vw 0;
	}

	#flow h2 {
		margin-bottom: 8vw;
		font-size: 4.8vw;
	}

	#flow h2 .orange {
		font-size: 5.8vw;
	}

	#flow h2 .line::after {
		bottom: -1.6vw;
		width: 18vw;
	}

	#flow .flow_item {
		gap: 6.6vw;
		padding-bottom: 7vw;
	}

	/* 丸 12vw → 中心 6vw（線は項目の下端まで。last-child の height 指定は削除） */
	#flow .flow_item::before {
		top: 12vw;
		left: 6vw;
		border-left-width: 2px;
	}

	/* 末尾の丸：PCと同じく下端固定。大きさと位置だけ vw に（丸12vwの半分 = 6vw） */
	#flow .flow_item:last-child::after {
		left: 6vw;
		width: 6vw;
		height: 6vw;
	}

	#flow .flow_step {
		flex-basis: 12vw;
		width: 12vw;
		height: 12vw;
	}

	#flow .flow_body h3 {
		gap: 2vw;
		margin-bottom: 1.6vw;
		font-size: 3.7vw;
	}

	#flow .flow_icon {
		width: 9vw;
	}

	#flow .flow_sub {
		font-size: 2.8vw;
	}

	/* SPは説明文を左端から（PCの字下げを戻す） */
	#flow .body_sb {
		margin-left: 0;
	}

	#flow .flow_body p {
		font-size: 3.2vw;
		line-height: 1.65;
		font-weight: bold;
	}

	#flow .flow_body small {
		margin-top: 1.4vw;
		font-size: 2.4vw;
	}

	#flow .flow_end img {
		width: 40vw;
		max-width: none;
	}

	#flow .flow_body .caution {
		position: relative;
		padding-left: 2.4vw;
		font-size: 2.1vw;
	}

	#flow .flow_body .caution::before {
		position: absolute;
		content: "※";
		width: 1em;
		height: 1em;
		left: 0;
		top: 0;
	}
}

/*===============================================

	10. #faq（よくあるご質問：クリックで開閉）

	※ セレクタの頭に「#faq」を付けているのは、import.css など他のCSSの
	  指定（クラスだけの指定）より優先させるため。外さないこと

	【見た目のしくみ】
	  ・1つの質問 = .s_faq_default（白いカード）
	      ├ dt.s_faq_question … Qアイコン + 質問文 + 右の矢印
	      └ dd.s_faq_answer   … Aアイコン(faq_icon_a.png) + 回答文
	  ・カードの白背景は .s_faq_default に付け、dt / dd は透明
	    → 開くと「Q と A が同じ白いカードの中」に見える

	【開閉のしくみ】
	  ・回答は最初 display:none。JS が .active を付け外し + slideToggle
	  ・開いている間（.active）だけ矢印が180度回る
	  ※ JS は HTML 末尾の「FAQ：質問をクリックで回答を開閉」ブロック

===============================================*/

#faq {
	padding: 120px 5.3vw;
	background: #fcedd9;
}

#faq h2 {
	font-size: 34px;
	font-weight: 800;
	line-height: 1.4;
	margin-bottom: 70px;
}

#faq h2 .line {
	position: relative;
	display: inline-block;
}

#faq h2 .line::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -6px;
	width: 100px;
	height: 2px;
	background: #f06813;
	transform: translateX(-50%);
}

#faq #q_and_a {
	max-width: 1000px;
	margin: 0 auto;
}

/* ---- 1問ぶんの白いカード ---- */
#faq .s_faq_default {
	margin-top: 20px;
	border-radius: 10px;
	background: #fff;
}

/* ---- 質問（クリックする部分） ---- */
#faq .s_faq_default .s_faq_question {
	position: relative;
	padding: 18px 110px 18px;
	border-radius: 20px;
	background: transparent;
	/* 白はカード側に任せる */
	font-weight: bold;
	cursor: pointer;
	font-size: 28px;
}

/* 左の「Q」アイコン */
#faq .s_faq_default .s_faq_question::before {
	content: "";
	position: absolute;
	left: 30px;
	top: 50%;
	transform: translateY(-50%);
	width: 50px;
	height: 50px;
	background: url("../imgs/faq_icon_q.png") center / contain no-repeat;
}

/* 右の矢印（閉じているときは下向き） */
#faq .s_faq_default .s_faq_question::after {
	content: "";
	position: absolute;
	right: 24px;
	top: 50%;
	transform: translateY(-50%);
	width: 14px;
	height: 14px;
	background: url("../imgs/arrow.png") center / contain no-repeat;
	transition: transform .3s;
}

/* 開いている間：矢印だけ上向き（文字色は変えない） */
#faq .s_faq_default .s_faq_question.active::after {
	transform: translateY(-50%) rotate(180deg);
}

/* キーボード（Tab）で選んだとき */
#faq .s_faq_default .s_faq_question:focus-visible {
	outline: 2px solid #f06813;
	outline-offset: -2px;
}

/* ---- 回答（最初は閉じておく） ---- */
#faq .s_faq_default .s_faq_answer {
	display: none;
	/* ← JS が開閉する。消さないこと */
	position: relative;
	/* Aアイコン（::before）の基準 */
	--lh: 1.8;
	/* 行の高さ。文字サイズを変えても A は1行目の中央に付く */
	margin: 0;
	padding: 0 40px 26px 110px;
	/* 左70px ＝ 質問文の開始位置と揃える */
	line-height: var(--lh);
	font-size: 20px;
	font-weight: bold;
}

/* Aアイコン：「1行目の高さの箱」の中央に置く
   → font-size や line-height を変えても、1行目と一緒に動く */
#faq .s_faq_default .s_faq_answer::before {
	content: "";
	position: absolute;
	top: 0;
	left: 40px;
	/* Qアイコンと同じ左位置 */
	width: 30px;
	/* Qアイコンと同じ幅（この箱の中央に画像を置く） */
	height: calc(var(--lh) * 1em);
	/* 1行ぶんの高さ */
	background: url("../imgs/faq_icon_a.png") center / 23px auto no-repeat;
}

/* 注釈（※） */
#faq .s_faq_default .s_faq_answer ul {
	margin-top: 10px;
	font-size: 1.2rem;
	line-height: 1.6;
}

#faq .s_faq_default .s_faq_answer ul li {
	text-indent: -1em;
	padding-left: 1em;
	font-size: 14px;
}

/* ～767px：スマホ */
@media only screen and (max-width: 767px) {
	#faq .conv {
		padding: unset;
		margin-bottom: 10.6vw;
	}

	#faq h2 {
		margin-bottom: 8vw;
		font-size: 4.8vw;
	}

	#faq h2 .line::after {
		bottom: -1.6vw;
		width: 18vw;
	}

	#faq .s_faq_default {
		margin-top: 3.2vw;
		border-radius: 3vw;
	}

	#faq .s_faq_default .s_faq_question {
		padding: 3.6vw 12vw 3.6vw 12.5vw;
		border-radius: 3vw;
		font-size: 3.5vw;
		line-height: 1.5;
	}

	#faq .s_faq_default .s_faq_question::before {
		left: 3.4vw;
		width: 6vw;
		height: 6vw;
	}

	#faq .s_faq_default .s_faq_question::after {
		right: 4vw;
		width: 4vw;
		height: 4vw;
	}

	#faq .s_faq_default .s_faq_answer {
		--lh: 1.7;
		padding: 0 12vw 3.6vw 12.5vw;
		/* 左12.5vw ＝ 質問文の開始位置と揃える */
		font-size: 2.6vw;
		/* ← 変えても A は1行目の中央に付く */
		line-height: var(--lh);
		font-weight: bold;
	}

	#faq .s_faq_default .s_faq_answer::before {
		left: 3.4vw;
		/* Qアイコンと同じ左位置 */
		width: 6vw;
		/* Qアイコンと同じ幅 */
		background-size: 4vw auto;
		/* Aの大きさ */
	}

	#faq .s_faq_default .s_faq_answer ul {
		margin-top: 2vw;
		font-size: 2.4vw;
	}

	#faq .s_faq_default .s_faq_answer ul li {
		font-size: 2vw;
	}

	#faq {
		padding: 10.6vw 5.3vw;
	}
}

/*===== 11. #overview" =====*/
#overview p a {
	display: inline-flex;
	align-items: center;
}
    #overview {
       padding: 60px 5.3vw 80px;

    }

#overview p a::after {
	content: "";
	display: inline-block;
	flex: 0 0 26px;
	width: 26px;
	height: 33px;
	margin-left: 7px;
	background-image: url("../imgs/pdf_icon.png");
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
}

#overview p {
	text-align: center;
	font-size: 30px;
	font-weight: bold;
	line-height: normal;
}



@media only screen and (max-width: 767px) {
	#overview {
		    padding: 7.6vw 5.3vw 10.6vw;
	}

	#overview p {
		text-align: center;
		font-size: 4vw;
		font-weight: bold;
		line-height: normal;
	}

	#overview p a::after {
	flex: 0 0 4.2vw;
	width: 4.2vw;
	height: 5.4vw;
	margin-left: 0.9vw;
	
}
}


/*===== 11. #sms_mes =====*/
#sms_mes {
	display: none;
	text-align: center;
	padding: 0 4% 40px;
}

#sms_mes.sms {
	display: block;
}

#sms_mes .sms_mes_text {
	font-size: 16px;
	margin-top: 1rem;
	line-height: 1.5em;
}

#sms_mes h5,
#sms_mes h5 span {
	font-size: 24px;
	font-weight: bold;
}

#sms_mes h5:before,
#sms_mes h5 span:before,
#sms_mes h5:after,
#sms_mes h5 span:after {
	content: "●";
	font-size: 16px;
	position: relative;
	top: -4px;
}

#sms_mes h5:before {
	color: #00aede;
	margin-right: 5px;
}

#sms_mes h5 span:before {
	color: #007cc3;
	margin-right: 20px;
}

#sms_mes h5:after {
	color: #00aede;
	margin-left: 5px;
}

#sms_mes h5 span:after {
	color: #007cc3;
	margin-left: 20px;
}

/*===== 12. footer =====*/
footer {
	position: relative;
	background: #f08200;
	margin-top: 60px;
	padding: 60px 0 30px;
	color: #fff;
}

footer:before {
	content: url("../imgs/footer_img.png");
	position: absolute;
	left: 50%;
	margin-left: -450px;
	top: -60px;
}

footer div>strong {
	display: block;
	text-align: center;
	font-size: 3rem;
	font-weight: bold;
	margin-bottom: 1rem;
}

footer a {
	color: #fff;
	text-decoration: none;
}

footer>div {
	max-width: 749px;
	margin: 0 auto;
	text-align: right;
}

footer>div img {
	margin-bottom: 20px;
}

footer #copyright {
	max-width: 900px;
	margin: 40px auto 0;
}

footer ul li a {
	position: relative;
	padding-left: 15px;
}

footer ul li a:before {
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	left: 0;
	margin: -5px 0 0;
	border-left: 5px solid #fff;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
}

@media only screen and (max-width: 1100px) {
	footer {
		margin-top: 20px;
		padding: 8% 4% 30px;
	}

	footer:before {
		content: none;
	}

	footer>img.sp {
		position: absolute;
		max-width: 90%;
		top: -8%;
		left: 50%;
		display: inline-block !important;
		margin-left: -45%;
	}

	footer div>strong {
		font-size: 1.6rem;
	}

	footer>div {
		font-size: 1rem;
	}

	footer #copyright {
		margin: 30px auto 0;
	}

	footer #copyright ul {
		text-align: center;
	}

	footer #copyright ul li.left,
	footer #copyright ul li.right {
		float: none;
	}

	footer #copyright ul li.left {
		font-size: 1.6rem;
	}
}

@media only screen and (min-width: 800px) and (max-width: 1100px) {
	footer div>strong {
		font-size: 2.4rem;
	}

	footer>div {
		font-size: 1.2rem;
	}
}