@charset "utf-8";

/* .page-ai_trans
----------------------------------------------------------*/
/* common */
body {
	width: 100%;
}
#l-main {
	overflow-x: clip;
	line-height: 1.86;
	font-weight: 500;
	letter-spacing: .06em;
}
#l-main .line {
	z-index: -2;
	position: absolute;
	width: 0;
	height: 1px;
	background-image: linear-gradient(to right, #fff 0%, #00a0e9 50.74%, #d0edfb 100%);
	transform-origin: top left;
	transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}
#l-main .line.bg02 {
	background-image: linear-gradient(to right, #fff 0%, #67d0ff 0%, #fff 50.74%, #71d1ff 100%);
}

/* .catch */
.title-area .catch {
	position: relative;
	width: fit-content;
	padding: .8rem 3.3rem;
	border-radius: 100vh;
	background: #f8ff4d;
}
.title-area .catch::after {
	content: '';
	position: absolute;
	bottom: -1.5rem;
	left: 3.8rem;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 1.5rem 1.5rem 0 0;
	border-color: var(--theme-c03) transparent transparent transparent;
}
.title-area .catch+.catch {
	margin-top: 2.5rem;
}

@media screen and (min-width: 768px) {
	.title-area .catch {
		font-size: 1.7rem;
	}
}

/* js
-------------------------------------------------- */
.js-modalbtn {
	position: relative;
	border: 1px solid var(--theme-c_white);
	border-radius: 100vh;
	background-color: var(--theme-c02);
	cursor: pointer;
}
.js-modalbtn::before,
.js-modalbtn::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	width: 50%;
	height: .2rem;
	background-color: var(--c-white);
}
.js-modalbtn::after {
	opacity: 1;
	transform: rotate(90deg);
}
.js-modalbtn span {
	text-indent: 100%;
	font-size: 0;
	overflow: hidden;
}
.js-modalOpen {
	position: absolute;
	width: 3.6rem;
	height: 3.6rem;
}
.js-modalOpen.btn-zoom::before {
	width: 100%;
	height: 100%;
	background: url('../images/icon_zoom.svg') no-repeat 50% 50% / cover;
	clip-path: circle(40%);
}
.js-modalOpen.btn-zoom::after {
	display: none;
}
.js-modalClose {
	position: absolute;
	top: -6.0rem;
	right: 0;
	width: 5.0rem;
	height: 5.0rem;
}
.js-modalbtn.js-modalClose::before {
	transform: rotate(-45deg);
}
.js-modalbtn.js-modalClose::after {
	transform: rotate(45deg);
}
.p-modal {
	z-index: 300;
	display: flex;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(25, 26, 28, .7);
	align-items: center;
	flex-direction: column;
	justify-content: center;
	padding: 2.0rem;
	transition: .4s;
}
.p-modal[aria-hidden="true"] {
	visibility: hidden;
	opacity: 0;
}
.p-modal[aria-hidden="false"] {
	visibility: visible;
	opacity: 1;
}
.p-modal__contents {
	position: relative;
	width: fit-content;
	max-width: 1160px;
	max-height: 80dvh;
	padding: 1.0rem;
	background-color: var(--theme-c_white);
}
.p-modal__contents .image-zoom img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
@media screen and (min-width: 768px) {
	.js-modalbtn::before,
	.js-modalbtn::after {
		width: 40%;
		height: 2px;
	}
	.js-modalOpen {
		width: clamp(30px, calc(53 / var(--theme-w_full) * 100vw), 53px);
		height: clamp(30px, calc(53 / var(--theme-w_full) * 100vw), 53px);
	}
	.js-modalClose {
		top: -2.6rem;
		right: -2.6rem;
		width: 5.2rem;
		height: 5.2rem;
	}
	.js-modalbtn.js-modalClose::before,
	.js-modalbtn.js-modalClose::after {
		width: 50%;
	}
	.p-modal {
		padding-inline: min(calc(120 / var(--theme-w_full) * 100vw), 120px);
	}
	.p-modal__contents {
		padding: min(calc(40 / var(--theme-w_full) * 100vw), 40px);
	}
}

/* #mainvisual
================================================== */
#mainvisual {
	position: relative;
	background-image: linear-gradient(var(--theme-c_white) 40%, #c9eeff 100%);
}
#mainvisual::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 20.7rem;
	margin: auto;
	background-repeat: no-repeat;
	background-position: 35% 0;
	background-size: auto 100%;
	background-image: url("../images/title_bg_sp.png");
}
#mainvisual .inner {
	height: 49.8rem;
	max-width: 375px;
	margin-inline: auto;
}
#mainvisual .title-area {
	z-index: 2;
	position: relative;
	padding-top: 1.6rem;
}
#mainvisual .title-area .logo {
	display: block;
	width: 9.0rem;
	margin-left: -.4rem;
}
#mainvisual .title-area .catch-wrap {
	margin: 1.0rem 0 0 .8rem;
}
#mainvisual .title-area .catch+.catch {
	margin: .8rem 0 0 4.6rem;
}
#mainvisual .title-area .ttl {
	margin: 1.0rem 0 0 .8rem;
	font-size: 2.2rem;
	line-height: 1.45;
}
#mainvisual .title-area .ttl em {
	color: var(--theme-c_em);
	font-size: 3.4rem;
	line-height: 1.17;
}
#mainvisual .title-area .ttl b {
	display: block;
}
#mainvisual .title-area .ttl b+b {
	margin-top: .8rem;
}
#mainvisual .main-fig {
	position: relative;
}
#mainvisual .main-fig::after {
	content: '';
	position: absolute;
	bottom: 0;
	right: 0;
	left: 0;
	display: block;
	width: 37.5rem;
	height: 9.4rem;
	margin-inline: auto;
	background-repeat: no-repeat;
	background-position: 0 0;
	background-size: contain;
	background-image: url("../images/title_sp.svg");
	transform: translateX(-1.2rem);
}
#mainvisual .main-fig .bg,
#mainvisual .main-fig .bg::before,
#mainvisual .main-fig .bg::after,
#mainvisual .main-fig .bg span {
	content: '';
	position: absolute;
	display: block;
	border-radius: .6rem;
	background-image: linear-gradient(var(--theme-c02) 0%, var(--theme-c01) 100%);
	width: 2.6rem;
	height: 5.0rem;
	opacity: .6;
}
#mainvisual .main-fig .bg {
	top: 2.5rem;
	left: 7.9rem;
	width: 4.0rem;
	height: 9.0rem;
    opacity: .4;
}
#mainvisual .main-fig .bg::before {
	top: -.1rem;
	right: -21.2rem;
}
#mainvisual .main-fig .bg::after {
	top: -1.1rem;
	left: -8.3rem;
}
#mainvisual .main-fig .bg span {
	top: 2.3rem;
	left: -4.6rem;
}
#mainvisual .main-fig .illust {
	z-index: 2;
	position: relative;
	width: 27.7rem;
	margin: -.2rem 0 0 5.1rem;
}
@media screen and (max-width: 767px) {
	#mainvisual .title-area .catch {
		padding: .6rem 1.6rem;
		font-size: 1.2rem;
		line-height: 1;
	}
	#mainvisual .title-area .catch::after {
		bottom: -1.0rem;
		left: 1.8rem;
		border-width: 1.0rem 1.0rem 0 0;
	}
}
@media screen and (min-width: 768px) {
	#mainvisual {
	background-image: linear-gradient(var(--theme-c_white) 70%, #c9eeff 100%);
	}
	#mainvisual::before {
		height: 33.5rem;
		background-position: 49.5% 0;
		background-image: url("../images/title_bg_pc.png");
	}
	#mainvisual .inner {
		height: 51.0rem;
		max-width: calc(var(--w-max) * 1px);
	}
	#mainvisual .title-area {
		padding-top: min(calc(43 / var(--theme-w_full) * 100vw), 43px);
	}
	#mainvisual .title-area .logo {
		width: min(calc(147 / var(--theme-w_full) * 100vw), 147px);
		margin-left: 0;
	}
	#mainvisual .title-area .catch-wrap {
		display: flex;
		margin: min(calc(34 / var(--theme-w_full) * 100vw), 34px) 0 0 min(calc(37 / var(--theme-w_full) * 100vw), 37px);
	}
	#mainvisual .title-area .catch+.catch {
		margin: 0 0 0 min(calc(8 / var(--theme-w_full) * 100vw), 8px);
	}
	#mainvisual .title-area .ttl {
		margin: min(calc(21 / var(--theme-w_full) * 100vw), 21px) 0 0 min(calc(38 / var(--theme-w_full) * 100vw), 38px);
		font-size: 3.2rem;
		line-height: 1.25;
	}
	#mainvisual .title-area .ttl em {
		font-size: 5.6rem;
		line-height: 1.17;
	}
	#mainvisual .title-area .ttl b {
		display: block;
	}
	#mainvisual .title-area .ttl b+b {
		margin-top: min(calc(20 / var(--theme-w_full) * 100vw), 20px);
	}
	#mainvisual .main-fig {
		position: absolute;
		right: min(calc(33 / var(--theme-w_full) * 100vw), 33px);
		bottom: min(calc(27 / var(--theme-w_full) * 100vw), 27px);
	}
	#mainvisual .main-fig::after {
		left: auto;
		width: min(calc(765 / var(--theme-w_full) * 100vw), 765px);
		height: min(calc(83 / var(--theme-w_full) * 100vw), 83px);
		background-image: url("../images/title_pc.svg");
		transform: none;
	}
	#mainvisual .main-fig .bg,
	#mainvisual .main-fig .bg::before,
	#mainvisual .main-fig .bg::after,
	#mainvisual .main-fig .bg span {
		width: min(calc(43 / var(--theme-w_full) * 100vw), 43px);
		height: min(calc(87 / var(--theme-w_full) * 100vw), 87px);
	}
	#mainvisual .main-fig .bg {
		top: min(calc(270 / var(--theme-w_full) * 100vw), 270px);
		left: min(calc(60 / var(--theme-w_full) * 100vw), 60px);
		width: min(calc(69 / var(--theme-w_full) * 100vw), 69px);
		height: min(calc(130 / var(--theme-w_full) * 100vw), 130px);
	}
	#mainvisual .main-fig .bg::before {
		top: max(calc(-78 / var(--theme-w_full) * 100vw), -78px);
		right: max(calc(-476 / var(--theme-w_full) * 100vw), -476px);
	}
	#mainvisual .main-fig .bg::after {
		top: min(calc(52 / var(--theme-w_full) * 100vw), 52px);
		left: max(calc(-100 / var(--theme-w_full) * 100vw), -100px);
	}
	#mainvisual .main-fig .bg span {
		top: min(calc(18 / var(--theme-w_full) * 100vw), 18px);
		left: max(calc(-168 / var(--theme-w_full) * 100vw), -168px);
	}
	#mainvisual .main-fig .illust {
		width: min(calc(597 / var(--theme-w_full) * 100vw), 597px);
		margin: 0 min(calc(34 / var(--theme-w_full) * 100vw), 34px) max(calc(-3 / var(--theme-w_full) * 100vw), -3px) 0;
	}
}

/* #l-nav+.bnr
================================================== */
#l-nav+.bnr {
	padding-block: 3.2rem;
	background-color: var(--theme-c01);
}
#l-nav+.bnr a {
	display: block;
	max-width: 252px;
	margin-inline: auto;
}
@media screen and (min-width: 768px) {
	#l-nav+.bnr {
		padding-block: 3.6rem;
	}
	#l-nav+.bnr a {
		max-width: 400px;
	}
}

/* #problem
================================================== */
#problem {
	padding-top: 3.2rem;
}
#problem .ttl {
	width: fit-content;
	margin-inline: auto;
	font-size: 2.8rem;
	font-weight: 700;
}
#problem .text-area {
	display: flex;
	justify-content: center;
	align-items: center;
}
#problem .block {
	position: relative;
	max-width: 450px;
	height: 31.0rem;
	margin: 3.3rem auto 0;
	padding-top: 2.0rem;
}
#problem .block+.block {
	margin-top: 11.0rem;
}
#problem .block::before {
	z-index: -1;
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	border-radius: .6rem;
	background-image: linear-gradient(#B4E8FF 0%, #E3F5FF 100%);
}
#problem .block .text-area {
	height: 11.2rem;
	margin-inline: 2.0rem;
	border-radius: .6rem;
	background-color: var(--theme-c_white);
	font-size: 2.4rem;
	line-height: 1.66;
	font-weight: 700;
}
#problem .block .illust {
	position: absolute;
	right: 0;
	left: 0;
	margin-inline: auto;
}
#problem01.block .illust {
	width: 32.6rem;
	margin-top: 1.6rem;
	padding-inline: 1.2rem 0;
}
#problem01.block .line.is-show {
	width: 120vw;
}
#problem01.block .line.l01 {
	bottom: -.3rem;
	left: -8.0rem;
	transform: rotate(12deg);
}
#problem02.block .illust {
	width: 32.6rem;
	margin-top: 1.3rem;
}
#problem02.block .line.is-show {
	width: 150%;
}
#problem02.block .line.l01 {
	top: 18.7rem;
	left: 146%;
	transform: rotate(159deg);
}
#problem03.block .illust {
	width: 34.7rem;
	margin-top: 1.8rem;
}
#problem03.block .line.is-show {
	width: 120vw;
}
#problem03.block .line.l01 {
	top: 14.5rem;
	left: -8.0rem;
	transform: rotate(12deg);
}
#problem-clear {
	position: relative;
	margin-block: 11.0rem 15.7rem;
}
#problem-clear .line.is-show {
	width: 150%;
}
#problem-clear .line.l01 {
	top: -9.0rem;
	left: 126%;
	transform: rotate(159deg);
}
#problem-clear .line.l02 {
	display: none;
}
#problem-clear .text-area {
	max-width: 450px;
	width: 100%;
	margin: 0 auto;
	padding-block: 2.5rem 3.2rem;
	border: .4rem solid var(--theme-c_em);
	border-radius: .6rem;
	background-color: #4DB6E6;
	color: var(--theme-c_white);
	font-size: 2.6rem;
	line-height: 1.46;
	font-weight: 600;
}
#problem-clear .text-area em {
	color: var(--theme-c_em);
	font-weight: 700;
}
#problem-clear .ill-flightman {
	position: absolute;
	width: 19.0rem;
	right: 1.2rem;
	bottom: -16.1rem;
}

@media screen and (min-width: 768px) {
	#problem {
		padding-top: 6.4rem;
	}
	#problem .ttl {
		font-size: 3.8rem;
	}
	#problem .block {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		max-width: 814px;
		height: 20.4rem;
		margin-top: 9.8rem;
		padding-top: 0;
	}
	#problem .block+.block {
		margin-top: 13.0rem;
	}
	#problem .block .text-area {
		width: 35.8rem;
		height: 11.2rem;
		margin: 4.6rem 3.4rem;
	}
	#problem .block .illust {
		margin: 0;
		padding-inline: 0;
	}
	#problem01.block .illust {
		width: 45.0rem;
		top: -4.5rem;
		left: max(calc(-105 / var(--theme-w_full) * 100vw), -105px);
	}
	#problem01.block .line.is-show {
		width: 70vw;
	}
	#problem01.block .line.l01 {
		top: -3.6rem;
		bottom: auto;
		left: 146%;
		transform: rotate(159deg);
	}
	#problem02.block {
		justify-content: flex-start;
	}
	#problem02.block .illust {
		width: 50.0rem;
		right: max(calc(-132 / var(--theme-w_full) * 100vw), -132px);
		left: auto;
	}
	#problem02.block .line.is-show {
		width: 130%;
	}
	#problem02.block .line.l01 {
		top: -14.0rem;
		left: 14rem;
		transform: rotate(26deg);
	}
	#problem03.block .illust {
		width: 53.0rem;
		top: -8.0rem;
		left: max(calc(-123 / var(--theme-w_full) * 100vw), -123px);
	}
	#problem03.block .line.is-show {
		width: 50%;
	}
	#problem03.block .line.l01 {
		top: -31.8rem;
		bottom: auto;
		left: -33.0rem;
		transform: rotate(26deg);
	}
	#problem-clear {
		max-width: 708px;
		margin: 13.0rem auto 12.0rem;
	}
	#problem-clear .line.is-show {
		width: 150%;
	}
	#problem-clear .line.l01 {
		top: -11.5rem;
		left: 76%;
	}
	#problem-clear .line.l02 {
		display: block;
		top: -2.4rem;
		bottom: auto;
		left: -44.0rem;
		transform: rotate(26deg);
	}
	#problem-clear .text-area {
		max-width: initial;
		justify-content: flex-start;
		height: 16.0rem;
		padding: 2.5rem 4.0rem;
		font-size: 3.4rem;
		line-height: 1.38;
	}
	#problem-clear .ill-flightman {
		width: 24.6rem;
		right: 2.4rem;
		bottom: -5.4rem;
	}
}

/* #ai_trans-main
================================================== */
#ai_trans-main {
	padding-block: 3.0rem 4.0rem;
	background-color: var(--theme-c01);
}
#ai_trans-main .title-area .ttl {
	margin-top: 1.5rem;
	font-size: 2.4rem;
	font-weight: 700;
}
#ai_trans-main .block-main {
	position: relative;
	margin-top: 3.0rem;
}
#ai_trans-main .block-main::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: auto;
	background: url('../../../assets/images/ai_trans_main_bg_sp.svg') no-repeat 100% 0 / 100% auto;
}
#ai_trans-main .block-main ul {
	z-index: 2;
	position: relative;
	padding: 2.5rem 3.8rem 3.2rem;
}
#ai_trans-main .block-main li+li {
	margin-top: 2.2rem;
}
#ai_trans-main .text-area {
	position: relative;
	margin-top: -.2rem;
	font-size: 1.4rem;
}
#ai_trans-main .btn-box {
	width: max-content;
	margin: 3.2rem auto 0;
}

@media screen and (max-width: 767px) {
	#ai_trans-main .title-area,
	#ai_trans-main .block-main {
		width: 33.6rem;
		max-width: 100%;
		margin-inline: auto;
	}
}
@media screen and (min-width: 768px) {
	#ai_trans-main {
		padding-block: 8.0rem;
	}
	#ai_trans-main .title-area .ttl {
		margin-top: 1.5rem;
		font-size: 4.2rem;
		line-height: 1.42;
	}
	#ai_trans-main .title-area .catch-wrap {
		display: flex;
	}
	#ai_trans-main .title-area .catch+.catch {
		margin: 0 0 0 min(calc(8 / var(--theme-w_full) * 100vw), 8px);
	}
	#ai_trans-main .block-main {
		margin-top: 4.0rem;
	}
	#ai_trans-main .block-main::before {
		width: 96.5%;
		background: url('../../../assets/images/ai_trans_main_bg_pc.svg') no-repeat 100% 0 / 100% auto;
	}
	#ai_trans-main .block-main ul {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		width: min(calc(994 / var(--theme-w_full) * 100vw), 994px);
		margin-inline: auto;
		padding: 5.0rem 0 5.4rem;
	}
	#ai_trans-main .block-main li {
		max-width: min(calc(300 / var(--theme-w_full) * 100vw), 300px);
	}
	#ai_trans-main .block-main li+li {
		margin-top: 0;
	}
	#ai_trans-main .text-area {
		margin-top: 2.3rem;
		font-size: 1.8rem;
		line-height: 2;
	}
	#ai_trans-main .btn-box {
		margin-top: 5.5rem;
	}
}

/* .point
================================================== */
.point hgroup {
	font-size: 2.6rem;
	line-height: 1.69;
	font-weight: 700;
}
.point hgroup .ttl-sub {
	position: relative;
	margin-bottom: .8rem;
	padding-left: 4.2rem;
	font-size: 2.3rem;
	line-height: 1.1;
	font-weight: 600;
}
.point hgroup .ttl-sub span {
	font-size: 4.0rem;
}
.point hgroup .ttl-sub::before {
	content: '';
	position: absolute;
	bottom: 38%;
	left: 0;
	width: 3.0rem;
	height: 1px;
	background-color: var(--theme-c02);
}
.point hgroup .ttl {
	padding-left: .2rem;
	font-size: 2.8rem;
}
.point .text-area {
	margin-block: 2.4rem 2.0rem;
	font-size: 1.4rem;
}
.point .block-border {
	padding: 1.9rem 1.6rem 2.6rem;
	border-radius: .6rem;
	border: solid .2rem var(--theme-c04);
}
#point01 {
	margin-block: 7.2rem 6.0rem;
}
#point01 picture {
	display: block;
	max-width: 450px;
	margin-inline: auto;
}
#point02 {
	padding-block: 3.7rem 3.0rem;
	background-color: var(--theme-c01);
}
#point02 .text-area {
	margin-bottom: 3.0rem;
}
#point02 .text-area picture {
	display: block;
	width: 35.8rem;
	margin: 2.3rem auto 0;
}
#point02 .text-area picture img {
	margin-left: -.6rem;
}
#point02 .btn-area {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: .6rem;
	margin-inline: 1.0rem;
	padding-block: 2.0rem 3.0rem;
	border-radius: .6rem;
	background-color: var(--theme-c_white);
}
#point02 .btn-area p {
	font-size: 1.8rem;
	line-height: 1.44;
	font-weight: 700;
}
#point02 .btn-area p em {
	color: var(--theme-c02);
}
#point02 .btn-area .btn-box {
	margin-top: 1.0rem;
}
#point03 {
	margin-block: 6.8rem 5.0rem;
}
#point03 .text-area {
	margin-bottom: 3.7rem;
}
#point03 .text-area .note {
	margin-top: .5em;
	font-size: .8em;
}
#point03 .block+.block {
	margin-top: 3.0rem;
}
#point03.point .block-border.bw02 {
	padding: 1.3rem 1.5rem 1.6rem;
	border-width: .3rem;
}
#point03 .block .title {
	text-align: center;
	margin-bottom: 1.3rem;
	padding: 1.1rem 0 1.0rem;
	border-radius: .5rem;
	background-color: var(--theme-c03);
	color: var(--theme-c_white);
	font-size: 1.4rem;
	line-height: 1.71;
	font-weight: 700;
}
#point03 .block .caption {
	text-align: right;
	margin-bottom: 1.0rem;
	font-size: 1.3rem;
}
#point03 .block .image {
	position: relative;
	max-width: 450px;
	margin-inline: auto;
}
#point03-01 .js-modalOpen {
	top: 23.9%;
	right: 0;
}
#point03-02 .js-modalOpen {
	top: 32.4%;
	right: 12.8%;
}
#point03 .btn-area {
	margin-top: 3.0rem;
}
#point03 .btn-area .block {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding-block: 2.0rem 3.0rem;
}
#point03 .btn-area p {
	text-align: center;
	font-size: 1.8rem;
	line-height: 1.44;
	font-weight: 700;
}
#point03 .btn-area .btn-box {
	margin-top: 2.2rem;
}

@media screen and (min-width: 768px) {
	.point hgroup .ttl-sub {
		display: inline-block;
		margin-right: 2.7rem;
		padding-left: 0;
		font-size: 2.9rem;
	}
	.point hgroup .ttl-sub span {
		font-size: 4.6rem;
	}
	.point hgroup .ttl-sub::before {
		bottom: 33%;
		left: -4.2rem;
	}
	.point hgroup .ttl {
		display: inline-block;
		font-size: 3.8rem;
	}
	.point .text-area {
		margin-block: 5.6rem;
		font-size: 2.0rem;
	}
	.point .block-border {
		padding: 3.5rem 0 3.6rem;
	}
	#point01 {
		margin-block: 12.8rem 8.0rem;
	}
	#point01.point .block-border {
		padding-inline: 3.2rem 6.0rem;
	}
	#point01 picture {
		max-width: initial;
	}
	#point02 {
		padding-block: 8.8rem 8.0rem;
	}
	#point02 .text-area {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 1.8rem -2.8rem 4.6rem 0;
	}
	#point02 .text-area p {
		width: 60.2rem;
	}
	#point02 .text-area picture {
		width: 62.3rem;
		margin: 1.0rem 0 0 0;
	}
	#point02 .btn-area {
		max-width: 81.4rem;
		margin-inline: auto;
		padding-block: 2.4rem 3.6rem;
		gap: .4rem;
	}
	#point02 .btn-area p {
		font-size: 2.4rem;
	}
	#point02 .btn-area .btn-box {
		margin-top: 2.0rem;
	}
	#point03 {
		margin-block: 8.8rem 5.0rem;
	}
	#point03 .text-area {
		margin-bottom: 5.5rem;
	}
	#point03 .block+.block {
		margin-top: 4.0rem;
	}
	#point03.point .block-border.bw02 {
		padding: 2.4rem 2.5rem 3.6rem;
		border-width: .6rem;
	}
	#point03 .block .title {
		margin-bottom: 3.0rem;
		padding: 1.5rem 0 1.3rem;
		font-size: 2.2rem;
	}
	#point03 .block .caption {
		margin-bottom: 1.2rem;
		font-size: 1.6rem;
	}
	#point03 .block .image {
		max-width: initial;
	}
	#point03 #point03-01 .image {
		margin-inline: min(calc(49 / var(--theme-w_full) * 100vw), 49px) min(calc(59 / var(--theme-w_full) * 100vw), 59px);
	}
	#point03 #point03-01 .js-modalOpen {
		top: auto;
		bottom: 8.6%;
		right: 47%;
	}
	#point03.point #point03-02.block-border.bw02 {
		padding-bottom: 1.4rem;
	}
	#point03 #point03-02.block .caption {
		margin-bottom: 0;
	}
	#point03 #point03-02 .image {
		margin-inline: min(calc(157 / var(--theme-w_full) * 100vw), 157px) min(calc(171 / var(--theme-w_full) * 100vw), 171px);
	}
	#point03 #point03-02 .js-modalOpen {
		top: auto;
		bottom: 3.1%;
		right: auto;
		left: 38.1%;
	}
	#point03 .btn-area {
		max-width: 882px;
		margin: 5.6rem auto 8.0rem;
	}
	#point03 .btn-area .block {
		padding-block: 2.0rem 3.4rem;
	}
	#point03 .btn-area p {
		font-size: 2.4rem;
		line-height: 1.6;
	}
	#point03 .btn-area p em {
		color: var(--theme-c02);
	}
	#point03 .btn-area .btn-box {
		margin-top: 3.2rem;
	}
}

/* #option
-------------------------------------------------- */
#option {
	padding-block: 3.0rem 4.0rem;
	background-color: var(--theme-c01);
}
#option .title-area .ttl {
	margin-top: 1.4rem;
	font-size: 2.4rem;
	line-height: 1.58;
}
#option .option-block {
	display: flex;
	flex-direction: column;
	gap: 2.1rem;
	max-width: 450px;
	margin: 3.1rem auto 4.0rem;
}
#option .option-block li {
	margin-inline: 1.7rem;
}
#option .option-block li .head {
	position: relative;
	background-color: var(--theme-c02);
	border-radius: .6rem .6rem 0 0;
	text-align: center;
	align-content: center;
	height: 3.7rem;

	&::before {
		content: '';
		position: absolute;
		top: -0.7rem;
		left: 1rem;
		width: 5.3rem;
		height: 5.3rem;
		background-repeat: no-repeat;
		background-position: 50% 50%;
		background-size: contain;
	}
}
#option .option-block li .head>p {
	color: var(--theme-c_white);
	font-size: 1.7rem;
}
#option .option-block li:nth-child(1) .head::before {
	background-image: url('../images/icon_movie.png');
}
#option .option-block li:nth-child(2) .head::before {
	background-image: url('../images/icon_pin.png');
}
#option .option-block li:nth-child(3) .head::before {
	background-image: url('../images/icon_form.png');
}
#option .option-block li .main {
	text-align: center;
	align-content: center;
	padding-block: 1.7rem 1.9rem;
	border-radius: 0 0 .6rem .6rem;
	border: 1px solid var(--theme-c02);
	border-top: none;
	background-color: var(--theme-c_white);
}
#option .option-block li .main p {
	font-size: 1.4rem;
	line-height: 1.42;
}
#option .option-block li .main p+p {
	display: inline-block;
	margin-top: .8rem;
	font-size: 1.8rem;
	font-weight: 600;
}
#option .option-block li .main p>span {
	white-space: nowrap;
}
#option .btn {
	width: fit-content;
	margin-inline: auto;
}

@media screen and (max-width: 767px) {
	#option .title-area {
		width: fit-content;
		margin-inline: auto;
	}
	#option .title-area .catch {
		padding-inline: 2.5rem;
	}
	#option .catch::after {
		left: 2.0rem;
	}
}

@media screen and (min-width: 768px) {
	#option {
		padding-block: 8.0rem;
	}
	#option .title-area .ttl {
		margin-top: 1.4rem;
		font-size: 4.2rem;
	}
	#option .option-block {
		flex-direction: row;
		gap: min(calc(34 / var(--theme-w_full) * 100vw), 3.4rem);
		max-width: initial;
		margin: 5.2rem 0 6.0rem;
	}
	#option .option-block li {
		width: 33%;
		margin-inline: 0;
	}
	#option .option-block li .head::before {
		left: min(calc(30 / var(--theme-w_full) * 100vw), 30px);
	}
	#option .option-block li .main {
		padding-block: 2.1rem 2.3rem;
	}
	#option .option-block li .main p {
		font-size: 1.6rem;
	}
	#option .option-block li .main p+p {
		margin-top: .8rem;
		font-size: 2.4rem;
	}
	#option .btn-box a b {
		font-size: 1.8rem;
	}
}

/* flatline
-------------------------------------------------- */
#flatline {
	margin-top: 6.0rem;
}
#flatline .block-border {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 1.6rem;
	padding-block: 3.0rem 2.6rem;
	border-radius: .6rem;
	border: solid .2rem var(--theme-c04);
}
#flatline .block-border .mv-text {
	text-align: center;
	margin-bottom: 1.5rem;
	font-size: 2.0rem;
	font-weight: 700;
	line-height: 1.6;
}
#flatline .block-border .mv-text .ttl {
	text-align: center;
	margin-top: 1.0rem;
	font-size: 2.4rem;
	font-weight: 700;
	color: var(--theme-c02);
}
#flatline .fig {
	width: 25.7rem;
	margin: 1.8rem auto 0;
	padding-left: 1.5rem;
}

@media screen and (min-width: 768px) {
	#flatline {
		margin-top: 8.0rem;
	}
	#flatline .block-border {
		max-width: 882px;
		gap: 3.4rem;
		margin-inline: auto;
		padding-block: 4.5rem 5.7rem;
	}
	#flatline .block-border .mv-text {
		margin-bottom: 1.1rem;
		font-size: 2.6rem;
	}
	#flatline .block-border .mv-text .ttl {
		margin-top: 1.0rem;
		font-size: 3.2rem;
	}
	#flatline .fig {
		position: absolute;
		bottom: max(calc(-52 / var(--theme-w_full) * 100vw), -52px);
		left: 0;
		width: min(calc(347 / var(--theme-w_full) * 100vw), 347px);
		margin: 0;
		padding-left: 0;
	}
}
@media screen and (min-width: 1200px) {
	#flatline .fig {
		left: min(calc(74 / var(--theme-w_full) * 100vw), 74px);
	}
}

/* #flow
================================================== */
#flow {
	overflow: hidden;
}
#flow .ttls {
	text-align: center;
	margin-top: 3.7rem;
	padding-bottom: 4.0rem;
	font-size: 2.6rem;
	line-height: 1.69;
	font-weight: 700;
}
#flow .js-slide-item {
	margin: 0 -5.333vw;
}
#flow .swiper {
	overflow: visible;
	display: flex;
	width: 23.0rem;
}
#flow .swiper-wrapper {
	height: auto;
}
#flow .swiper-slide {
	display: flex;
	flex-direction: column;
}
#flow .swiper:not(.swiper-initialized) .swiper-slide {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: auto;
	height: auto;
}
#flow .swiper:not(.swiper-initialized) div.swiper-button-prev,
#flow .swiper:not(.swiper-initialized) div.swiper-button-next {
	display: none;
}
#flow .swiper div.swiper-button-prev,
#flow .swiper div.swiper-button-next {
	z-index: 5;
	position: absolute;
	top: calc(50% - 3.0rem);
	width: 3.6rem;
	height: 6.0rem;
	background: url('../../../assets/images/flow_fig_next.png') no-repeat 0 0 / contain;
	cursor: pointer;
}
#flow .swiper div.swiper-button-prev {
	left: -3.0rem;
	transform: rotate(180deg);
}
#flow .swiper div.swiper-button-next {
	right: -3.0rem;
}
#flow .swiper div.swiper-button-prev.swiper-button-disabled,
#flow .swiper div.swiper-button-next.swiper-button-disabled {
	display: none;
}
#flow .item {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;

	width: 23.0rem;
	height: 100%;
	margin: 0 auto;
	padding: 3.4rem 2.0rem 3.2rem;
	border-radius: .6rem;
	background-image: linear-gradient(to bottom, #00a0e9, #b9e6fb 69%, #e2f6ff);
}
#flow .item .step {
	text-align: center;
}
#flow .item .step img {
	width: auto;
	height: 5.4rem;
}
#flow .item h3 {
	position: relative;
	text-align: center;
	margin: 1.7rem -1.5rem 0;
	padding-top: .9rem;
	color: var(--theme-c_white);
	font-size: 2.2rem;
	font-weight: 700;
}
#flow .item h3::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	width: 1.6rem;
	height: 2px;
	margin: auto;
	background-color: var(--theme-c_white);
}
#flow .item .fig {
	display: flex;
	justify-content: center;
	align-items: center;
	width: fit-content;
	height: 5.7rem;
	margin: 1.1rem auto 0;
	padding-top: .9rem;
}
#flow .item .fig img {
	width: auto;
	height: calc(57 / 57 * 100%);
}
#flow .item .fig01 img {
	height: calc(53 / 57 * 100%);
}
#flow .item .fig03 img {
	height: calc(44 / 57 * 100%);
}
#flow .item .text {
	flex-grow: 1;
	margin-top: 2.4rem;
	line-height: 1.63;
	font-weight: 400;
}
#flow .text-end {
	position: relative;
	text-align: right;
	margin-top: 2.0rem;

}
#flow .text-end::before {
	content: '';
	position: absolute;
	bottom: 1.0rem;
	left: 0;
	width: 48%;
	height: 2.0rem;
	background: url('../../../assets/images/flow_ar.png') no-repeat 100% 100% / contain;
}
#flow .text-end img {
	width: min(50%, 32.4rem);
}

@media screen and (min-width: 768px) {
	#flow .ttls {
		margin-top: min(calc(117 / var(--theme-w_full) * 100vw), 117px);
		padding-bottom: min(calc(36 / var(--theme-w_full) * 100vw), 36px);
		font-size: 3.2rem;
	}
	#flow .js-slide-item {
		margin: 0 max(calc(-11 / var(--theme-w_full) * 100vw), -11px);
	}
	#flow .swiper {
		width: 100%;
	}
	#flow .item {
		width: min(calc(230 / var(--theme-w_full) * 100vw), 230px);
		padding: min(calc(34 / var(--theme-w_full) * 100vw), 34px) min(calc(32 / var(--theme-w_full) * 100vw), 20px) min(calc(900 / var(--theme-w_full) * 100vw), 32px);
	}
	#flow li+li .item::before {
		content: '';
		position: absolute;
		top: calc(50% - min(calc(30 / var(--theme-w_full) * 100vw), 30px));
		left: max(calc(-17 / var(--theme-w_full) * 100vw), -17px);
		width: min(calc(36 / var(--theme-w_full) * 100vw), 36px);
		height: min(calc(60 / var(--theme-w_full) * 100vw), 60px);
		background: url('../../../assets/images/flow_fig_next.png') no-repeat 0 0 / contain
	}
	#flow .text-end {
		margin-top: min(calc(30 / var(--theme-w_full) * 100vw), 30px);
	}
	#flow .text-end::before {
		width: min(calc(879 / var(--theme-w_full) * 100vw), 879px);
		height: min(calc(50 / var(--theme-w_full) * 100vw), 50px);
	}
	#flow .text-end img {
		width: min(calc(324 / var(--theme-w_full) * 100vw), 324px);
	}
}

@media screen and (min-width: 768px) and (max-width: 1199px) {
	#flow .item {
		padding: 2.4rem 1.5rem 2.4rem;
	}
	#flow .item .step img {
		height: 4rem;
	}
	#flow .item h3 {
		font-size: 1.8rem;
	}
	#flow .item .text {
		margin-top: 1.8rem;
		font-size: 1.4rem;
	}
}

/* #required
================================================== */
#required {
	overflow: hidden;
	margin-top: 8.2rem;
}
#required .block {
	position: relative;
	padding: 3.7rem 1.6rem 4.0rem;
	border-radius: .6rem;
	background: var(--theme-c01);
}
#required .ttls {
	text-align: center;
	padding-bottom: 2.6rem;
	font-size: 2.6rem;
	line-height: 1.69;
	font-weight: 700;
}

@media screen and (min-width: 768px) {
	#required {
		margin-top: min(calc(123 / var(--theme-w_full) * 100vw), 123px);
	}
	#required .block {
		margin-right: min(calc(106 / var(--theme-w_full) * 100vw), 106px);
		padding: min(calc(35 / var(--theme-w_full) * 100vw), 35px) min(calc(32 / var(--theme-w_full) * 100vw), 32px) min(calc(60 / var(--theme-w_full) * 100vw), 60px) 0;
		background: none;
	}
	#required .block::before {
		z-index: -1;
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		width: calc(var(--vw, 1vw) * 100 - min(calc(187 / var(--theme-w_full) * 100vw), 187px));
		height: 100%;
		border-radius: 0 10.0rem 0 0;
		background-color: var(--theme-c01);
	}
	#required .ttls {
		text-align: left;
		padding-bottom: min(calc(45 / var(--theme-w_full) * 100vw), 45px);
		font-size: 3.2rem;
	}
}