/*===============================================================================
***MV
================================================================================*/
/*===============================
* カバー
* =================================*/
.f-mv-cover{
	--cont-layer: 5;
	position: relative;
	z-index: 0;
	display: flex;
	justify-content: center;
	padding-top: clamp(8rem, 6.571rem + 3.81vw, 10rem);
	padding-bottom: var(--g-sec--xl);
}
@media (min-width: 768px){
	.f-mv-cover{
		padding-bottom: 0;
	}
}
/* グレースケール */
.f-mv-cover__grayScale{
	position: absolute;
	top: 0;
	left: calc( 50% - 50vw );
	z-index: calc( var(--cont-layer) - 5 );
	width: 100vw;
	height: 100%;
	background: linear-gradient(180deg, #F5FBFE 0%, #EAF8FF 50%, #F5FBFE 100%);
}
.f-mv-cover__bgi img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
}
/* コンテンツ */
.f-mv-cover__content{
	width: 100%;
	z-index: var(--cont-layer);
}

/*===============================
* カバー：コンテンツ
* =================================*/
.f-mv__containar{
	line-height: var(--lh-xl);
	color: var(--c-main);
}
@media (min-width: 768px){
	.f-mv__containar{
		display: flex;
		justify-content: space-between;
	}
}

/* タイトル */
.f-mv__title{
	margin-bottom: 1.5rem;
	font-family: var(--ff-m);
	font-size: clamp(1.75rem, 0.857rem + 2.38vw, 3rem);
	font-weight: var(--fw-xl);
}
@media (min-width: 768px){
	.f-mv__title{
		order: 3;
		display: flex;
		flex-direction: column;
		margin-bottom: 0;
		white-space: pre;
		writing-mode: vertical-rl;
		text-orientation: upright;
	}
}

/* リード文 */
.f-mv__lead{
	margin-bottom: var(--g-sec--xs);
	font-weight: var(--fw-lg);
}
.f-mv__lead.--pc{display: none;}
@media (min-width: 768px){
	.f-mv__lead.--pc{display: flex;}
	.f-mv__lead.--sp{display: none;}
	.f-mv__lead{
		order: 1;
		display: flex;
		flex-direction: column;
		margin-bottom: 0;
		padding-bottom: 15rem;
		white-space: pre;
		writing-mode: vertical-rl;
		text-orientation: upright;
	}
}

/* イメージ画像 */
.f-mv__image{
	position: relative;
	z-index: -3;
	width: clamp(22.5rem, 13.571rem + 23.81vw, 35rem);
	margin-inline: auto;
}
@media (min-width: 768px){
	.f-mv__image{
		order: 2;
	}
}
.f-mv__image img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.f-mv__image-text{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: -1;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: max-content;
	line-height: var(--lh-xs);
	font-weight: var(--fw-xl);
	font-size: clamp(4rem, 1.5rem + 6.67vw, 7.5rem);
	color: var(--c-light);
	opacity: 0.45;
}

/*===============================
* ボタン
* =================================*/
.f-mv__btn-wrap{
	position: absolute;
	bottom: var(--g-sec--xl);
	left: 50%;
	transform: translateX(-50%);
	z-index: 1;
	width: clamp(22.5rem, 20.714rem + 4.76vw, 25rem);
	font-family: var(--ff-g);
	font-weight: var(--fw-lg);
}
@media (min-width: 768px){
	.f-mv__btn-wrap{
		left: 0;
		transform: translateX(0%);
	}
}
.f-mv__btn-lead{
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
	width: max-content;
	padding: .25rem 1.5rem;
	text-align: center;
	line-height: var(--lh-xs);
	background: var(--c-light);
	border-radius: 100vmax;
	border: 2px solid var(--c-act01);
	color: var(--c-act01);
}
.f-mv__btn{
	--circle-size: 1.2em;
	--circle-position: 1em;
	position: relative;
	display: inline-block;
	width: 100%;
	padding: 1rem calc( var(--circle-size) + var(--circle-position) * 2 );
	text-align: center;
	background: var(--c-act01);
	border-radius: 100vmax;
	box-shadow: 0px 0px 8px rgba(14, 90, 167, 0.2);
	font-size: 1.25rem;
	color: var(--c-light);
	cursor: pointer;
	transition: var(--ani-t--normal) ease-out;
}
/* 〇や＞も同時に色変更可能 */
.f-mv__btn:is(:focus, :hover){
	background: var(--c-act01--light);
}
.f-mv__btn-img{
	position: absolute;
	bottom: 0;
	left: clamp(2rem, 1.643rem + 0.95vw, 2.5rem);
	width: 2rem;
}
/*〇のCSS*/
.f-mv__btn-arrow{
	position: absolute;
	top: 50%;
	right: var(--circle-position);
	transform: translate(0, -50%);
	width: var(--circle-size);
	height: var(--circle-size);
	background: var(--c-light);
	border-radius: 50%;
	transition: var(--ani-t--normal) ease-out;
}
/*＞のCSS*/
.f-mv__btn-arrow::after{
	--arrow-size: calc(var(--circle-size) / 3.5);
	--arrow-skew: 0deg;
	--arrow-weight: 2px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-65%, -50%) rotate(0deg) rotate(45deg) skew(var(--arrow-skew), var(--arrow-skew));
	content: "";
	width: var(--arrow-size);
	height: var(--arrow-size);
	border-top: var(--arrow-weight) solid var(--c-act01);
	border-right: var(--arrow-weight) solid var(--c-act01);
	transition: var(--ani-t--normal) ease-out;
}

/*===============================
* 波アイコン
* =================================*/
.f-mv__nami{
	position: absolute;
	bottom: 0;
	left: calc( 50% - 50vw );
	z-index: -2;
	width: 100vw;
}

/*===============================
* 水玉イラスト
* =================================*/
.f-mv__mizutama{
	position: absolute;
	z-index: -3;
}
.f-mv__mizutama.--1{
	top: 24%;
	left: calc(50% - 43vw);
	transform: translateX(-50%) rotate(90deg);
	width: clamp(10rem, 9.107rem + 2.38vw, 11.25rem);
	opacity: 10%;
}
@media (min-width: 768px){
	.f-mv__mizutama.--1{
		top: 9%;
		left: calc( 50% - 50vw );
		opacity: 50%;
	}
}
.f-mv__mizutama.--2{
	top: -2.5%;
	left: 30%;
	transform: rotate(-45deg);
	width: clamp(5rem, 3.75rem + 3.33vw, 6.75rem);
	opacity: 30%;
}
@media (min-width: 768px){
	.f-mv__mizutama.--2{
		top: 4.5%;
		left: 10%;
		transform: rotate(150deg);
	}
}
.f-mv__mizutama.--3{
	top: 13.5%;
	right: 0;
	width: clamp(2.5rem, 1.786rem + 1.9vw, 3.5rem);
	transform: rotate(90deg);
	opacity: 35%;
}
@media (min-width: 768px){
	.f-mv__mizutama.--3{
		top: 14.5%;
		right: 18%;
	}
}
.f-mv__mizutama.--4{
	bottom: 14%;
	left: 0;
	width: clamp(4.25rem, 3.179rem + 2.86vw, 5.75rem);
	opacity: 25%;
}
@media (min-width: 768px){
	.f-mv__mizutama.--4 {
		bottom: 5.5%;
		left: 5%;
	}
}
.f-mv__mizutama.--5{
	bottom: 25%;
	right: 0;
	width: clamp(3rem, -0.214rem + 8.57vw, 7.5rem);
	opacity: 50%;
}
@media (min-width: 768px){
	.f-mv__mizutama.--5 {
		bottom: 20%;
		right: 25%;
		transform: rotate(-45deg);
	}
}
.f-mv__mizutama.--6{
	bottom: 9.5%;
	right: calc(50% - 47vw);
	transform: translate(50%, 50%);
	width: clamp(15rem, 11.429rem + 9.52vw, 20rem);
	opacity: 20%;
}

/*===============================
* スクロールを促す
* =================================*/
.f-mv__scroll{
	position: absolute;
	bottom: var(--g-sec--xl);
	left: calc(50% - 50vw + clamp(0rem, -3rem + 5vw, 1.5rem));
	display: none;
}
@media (min-width: 960px){
	.f-mv__scroll{
		display: block;
	}
}



/*===============================================================================
***お知らせ
================================================================================*/
.f-news{
	position: relative;
	z-index: 1;
}
/*===============================
* 背景
* =================================*/
.f-news__inner{
	position: relative;
	padding: var(--g-sec--md) 0;
}
.f-news__bgi{
	position: absolute;
	top: 0;
	left: calc( 50% - 50vw );
	z-index: -1;
	max-width: 100vw;
	width: 100vw;
	height: 100%;
}

/*===============================
* コンテンツ
* =================================*/
.f-news__flex {
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 0 var(--g-sec--xs);
	justify-content: space-between;
	margin-bottom: var(--g-sec--sm);
}
@media (min-width: 768px) {
	.f-news__flex {
		flex-wrap: nowrap;
	}
}
.f-news__title {
	max-width: fit-content;
}
.f-news__body {
	flex-grow: 1;
	width: 100%;
	margin-top: var(--g-sec--xs);
}

/*===============================
* タブ
* =================================*/
.f-news-tab .c-tab__head{
	margin-bottom: 1.5rem;
}
.f-news-tab .c-tab__head-list{
	display: flex;
	align-items: center;
	gap: .75rem;
}
/* タブボタン */
.f-news-tab .c-tab__head-item{
	position: relative;
	display: flex;
	justify-content: center;
	width: fit-content;
	padding: .25rem clamp(1.75rem, 1.214rem + 1.43vw, 2.5rem);
	text-align: center;
	background: var(--c-gradient--dark);
	border-radius: 100vmax;
	overflow: hidden;
	transition: var(--ani-t--normal) ease-out;
}
/* 白背景色 */
.f-news-tab .c-tab__head-item::before{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 0;
	content: "";
	width: calc( 100% - 4px );
	height: calc( 100% - 6px );
	background: var(--c-light);
	border-radius: 100vmax;
	transition: var(--ani-t--normal) ease-out;
}
/* 白背景色：アクティブ時 */
.f-news-tab .c-tab__head-item:has(.is-active)::before,
.f-news-tab .c-tab__head-item:is(:hover, :focus)::before{
	content: none;
}
/* リンク部分 */
.f-news-tab .c-tab__head-link{
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	background: linear-gradient(315.39deg, #0E5AA7 0.33%, #3EB7E8 99.67%);
	background: -webkit-var-linear-gradient(315.39deg, #0E5AA7 0.33%, #3EB7E8 99.67%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-weight: var(--fw-lg);
	transition: var(--ani-t--normal) ease-out;
}
/* リンク部分：アクティブ時 */
.f-news-tab .c-tab__head-link.is-active, 
.f-news-tab .c-tab__head-item:is(:hover, :focus) .c-tab__head-link{
	-webkit-text-fill-color: var(--c-light);
}

/*===============================
* 水玉
* =================================*/
.f-news__mizutama{
	position: absolute;
	z-index: -1;
}
.f-news__mizutama.--1{
	bottom: 8px;
	left: clamp(-2.5rem, -13.929rem + 30.48vw, 13.5rem);
	transform: rotate(60deg);
	width: 80px;
	opacity: 25%;
}
.f-news__mizutama.--2{
	top: 1.75rem;
	right: 0;
	width: clamp(5.75rem, 4.5rem + 3.33vw, 7.5rem);
	opacity: 25%;
}

/*===============================
* スクロールを促す
* =================================*/
.f-news__scroll{
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translate(-50%, 50%);
	z-index: 1;
}



/*===============================================================================
***concept
================================================================================*/
/*===============================
* 背景
* =================================*/
.f-concept__inner{
	position: relative;
	padding: var(--g-sec--md) 0;
}
.f-concept__bgi{
	position: absolute;
	top: 0;
	left: calc( 50% - 50vw );
	z-index: -1;
	max-width: 100vw;
	width: 100vw;
	height: 100%;
	transform: rotate(180deg);
	transform-origin: center;
}

/*===============================
* コンテンツ
* =================================*/
.f-concept__head{
	margin-bottom: var(--g-sec--xs);
}
@media (min-width: 768px){
	.f-concept__head{
		max-width: 680px;
	}
}
.f-concept__title {
	max-width: fit-content;
}
.f-concept__title .c-title-main span{
	display: block;
	width: fit-content;	padding: .25rem 1rem;
	margin-bottom: .5rem;
	background: var(--c-main);
	color: var(--c-light);
}
@media (min-width: 768px) {
	.c-title-main span:nth-of-type(2),
	.c-title-main span:nth-of-type(3) {
		display: inline-block;
		margin-bottom: 0;
	}
}
@media (min-width: 768px){
	.f-concept__body{
		max-width: 54%;
	}
}
.f-concept__group:not(:last-of-type){
	margin-bottom: 1.25rem;
}
.f-concept__group p{
	line-height: var(--lh-xl);
}

/*===============================
* イメージ画像
* =================================*/
.f-concept__image{
	display: none;
}
@media (min-width: 768px){
	.f-concept__image{
		position: absolute;
		bottom: 0;
		right: calc( 50% - 50vw );
		transform: translate(15%,18%);
		display: block;
		width: 56.75%;
	}
}
.f-concept__image::before{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: -1;
	content: "";
	width: calc( 106% + 0rem );
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--c-blue);
	opacity: .2;
}
.f-concept__image img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
}

/*===============================
* 水玉
* =================================*/
.f-concept__mizutama{
	position: absolute;
	z-index: -1;
}
.f-concept__mizutama.--1{
	bottom: calc( clamp(4.75rem, 3.054rem + 4.52vw, 7.125rem) * -1 );
	left: 0;
	transform: rotate(45deg);
	width: clamp(10rem, 4.643rem + 14.29vw, 17.5rem);
	opacity: 15%;
}
.f-concept__mizutama.--2{
	top: 9%;
	right: clamp(1.25rem, -15.714rem + 45.24vw, 25rem);
	width: clamp(5.5rem, 4.607rem + 2.38vw, 6.75rem);
	transform: rotate(-75deg);
	opacity: 20%;
}

/*===============================
* 流れるテキスト
* =================================*/
.f-concept__flow-wrap{
	position: absolute;
	top: 0;
	left: calc( 50% - 50vw );
	z-index: -1;
	width: 100vw;
	height: 100%;
	overflow: hidden;
}
.f-concept__flow {
	writing-mode: vertical-rl;
	white-space: nowrap;
	opacity: .3;
	animation: flowUp 30s linear infinite;
	height: max-content; /* 縦書き時の高さをブラウザに明示 */
	/* 要素の高さ(200vh) × 50%(移動距離) = 100vh(画面を埋め続ける最低限の高さ) */
	min-height: 200vh; /* ループに必要な十分な高さを担保 */
	will-change: transform;
}
.f-concept__flow span {
	display: inline-block;
	margin-bottom: .25em;
	line-height: var(--lh-xs);
	text-transform: capitalize;
	font-size: clamp(5.75rem, 4.5rem + 3.33vw, 7.5rem);
	font-weight: var(--fw-xl);
	color: var(--c-blue);
}
@keyframes flowUp {
	0% {
		transform: translateY(0);
	}
	100% {
		transform: translateY(-50%);
	}
}


/*===============================================================================
***こんなお悩みありませんか？
================================================================================*/
.f-trouble{
	position: relative;
	z-index: 1;
}
/*===============================
* 背景
* =================================*/
.f-trouble__container{
	position: relative;
	z-index: 2;
	padding: var(--g-sec--md) 0;
}
.f-trouble__bgi-wrap{
	--arrow: 5rem;
	--arrow-deg: clamp(2rem, -0.143rem + 5.71vw, 5rem);
	position: absolute;
	top: 0;
	left: calc( 50% - 50vw );
	z-index: -1;
	max-width: 100vw;
	width: 100vw;
	height: 100%;
	filter: drop-shadow(0px 8px 16px rgba(51, 51, 51, 0.2));
}
.f-trouble__bgi{
	height: 100%;
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--arrow-deg)), 50% 100%, 0 calc(100% - var(--arrow-deg)));
}
/*===============================
* ボックス
* =================================*/
.f-trouble__box{
	position: relative;
	margin-bottom: var(--g-sec--sm);
	padding-top: var(--g-sec--sm);
	box-shadow: 0px 8px 16px rgba(51, 51, 51, 0.2);
	background: var(--c-blue--light);
	border-radius: var(--bd-r--xxl);
	overflow: hidden;
}
/* 蛇口 */
.f-trouble__deor{
	position: absolute;
	top: 7%;
	right: -.5rem;
	width: clamp(3rem, 0.679rem + 6.19vw, 6.25rem);
}
/*===============================
* ヘッド
* =================================*/
.f-trouble__head{
	margin-bottom: var(--g-sec--xs);
}
.f-trouble__balloon-wrap{
	--triangle-w: .5em;
	--triangle-h: .7em;
	--bd-w: 2px;
	--bg-c: var(--c-main);
	margin-bottom: .5rem;
	padding-bottom: var(--triangle-h);
}
/* 吹き出し */
.f-trouble__balloon {
	position: relative;
	display: block;
	width: fit-content;
	margin-inline: auto;
	padding: 0.25em 1.5em;
	background: var(--bg-c);
	border: var(--bd-w) solid var(--bd-c);
	border-radius: 100vmax;
	text-align: center;
	font-weight: var(--fw-lg);
	font-family: var(--ff-g);
	color: var(--c-light);
}
.f-trouble__balloon:after {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translate(-50%, -1px);
	z-index: 1;
	content: '';
	display: block;
	width: 0;
	height: 0;
	border-width: calc( var(--triangle-h) - var(--bd-w) ) calc( var(--triangle-w) - var(--bd-w) ) 0 calc( var(--triangle-w) - var(--bd-w) );
	border-color: var(--bg-c) transparent transparent transparent;
	border-style: solid;
}
.f-trouble__title{
	position: relative;
	max-width: fit-content;
	margin-inline: auto;
}
.f-trouble__title span{
	display: inline-block;
	margin: 0 .25rem;
	font-size: calc( 1em + .25rem );
}
.f-trouble__title img{
	position: absolute;
	top: -.25rem;
	left: 18%;
	width: .6em;
}
/*===============================
* 波
* =================================*/
.f-trouble__nami{
	position: relative;
	top: 1px;
}
.f-trouble__nami svg{
	width: 100%;
}
/*===============================
* ボディ
* =================================*/
.f-trouble__body{
	padding: 1rem 1.25rem var(--g-sec--sm);
	background: linear-gradient(180deg, #C7DBED 0%, #9EBDD8 100%);
}
.f-trouble__list-wrap{
	max-width: 816px;
	margin-inline: auto;
}
.f-trouble__list {
	--circle-width: calc(1em + var(--over-fz)); /* ｱｲｺﾝｻｲｽﾞ */
	--over-fz: 0.25em; /* ｱｲｺﾝをﾌｫﾝﾄｻｲｽﾞより大きくする値 */
	--check-long: calc(var(--circle-width) * 0.75); /* ﾁｪｯｸｱｲｺﾝの長辺 */
	--check-color: Var(--c-light);
	--check-weight: 2px; /*ﾁｪｯｸｱｲｺﾝの太さ  */
	--count: 1;
	--gap: 1rem;
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap);
}
@media (min-width: 600px){
	.f-trouble__list{
		--count: 2;
	}
}
.f-trouble__list > li {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: .5em;
	width: calc( ( 100% - var(--gap) * (var(--count) - 1) ) / var(--count) );
	padding: 1.5rem .5rem;
	background: var(--c-light);
	border-radius: var(--bd-r--sm);
	overflow: hidden;
	font-weight: var(--fw-xl);
	color: var(--c-main);
}
/* サークル */
.f-trouble__list-icon {
	position: relative;
	top: var(--over-fz); /* ｱｲｺﾝとﾃｷｽﾄの高さを揃える */
	display: inline-block;
	min-width: var(--circle-width);
	aspect-ratio: 1;
	background: Var(--c-main);
	border-radius: 50%;
}
/* チェックアイコン */
.f-trouble__list-icon::before {
	position: absolute;
	top: 15%;
	left: 20%;
	transform: rotate(-45deg);
	content: "";
	display: inline-block;
	width: var(--check-long);
	aspect-ratio: 2 / 1;
	border-left: var(--check-weight) solid var(--check-color);
	border-bottom: var(--check-weight) solid var(--check-color);
}
/*===============================
* フット
* =================================*/
.f-trouble__foot{
	line-height: var(--lh-xl);
	color: var(--c-light);
	font-weight: var(--fw-lg);
}
@media (min-width: 768px){
	.f-trouble__foot{
		text-align: center;
	}
}
/*===============================
* カバー
* =================================*/
.f-trouble-cover{
	position: relative;
	z-index: 1;
	margin-top: calc( var(--g-sec--md) * -1 );
	padding: var(--g-sec--xl) 0 var(--g-sec--xxl);
}
/* グレースケール */
.f-trouble-cover__grayscale{
	position: absolute;
	top: 0;
	left: calc( 50% - 50vw );
	z-index: -1;
	width: 100vw;
	height: 100%;
	background: var(--c-light);
	opacity: .4;
}
/* 背景画像 */
.f-trouble-cover__bgi{
	position: absolute;
	top: 0;
	left: calc( 50% - 50vw );
	z-index: -2;
	max-width: 100vw;
	width: 100vw;
	height: 100%;
	object-fit: cover;
	object-position: 54% 50%;
}
.f-trouble-cover__points{
	--count: 1;
	--gap: 1.5rem;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .75rem var(--gap);
}
@media (min-width: 600px){
	.f-trouble-cover__points{
		--count: 2;
	}
}
@media (min-width: 960px){
	.f-trouble-cover__points{
		--count: 3;
	}
}
.f-trouble-cover__point{
	position: relative;
	max-width: clamp(17.5rem, 16.607rem + 2.38vw, 18.75rem);
	width: calc( ( 100% - var(--gap) * (var(--count) - 1) ) / var(--count) );
	padding: var(--g-sec--sm) 1.25rem var(--g-sec--xs);
	background: var(--c-light);
	box-shadow: 0px 0px 16px rgba(51, 51, 51, 0.1);
	border-radius: var(--bd-r--lg);
	overflow: hidden;
}
.f-trouble-cover__label{
	position: absolute;
	top: 1.25rem;
	left: 1.25rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	line-height: var(--lh-xs);
	text-transform: uppercase;
	font-weight: var(--fw-xl);
	font-size: .75rem;
	color: var(--c-main);
}
.f-trouble-cover__number{
	font-size: 3.33em;
}
.f-trouble-cover__icon{
	display: block;
	width: clamp(4.25rem, 3.714rem + 1.43vw, 5rem);
	margin-inline: auto;
	margin-bottom: 1.125rem;
}
.f-trouble-cover__title{
	width: fit-content;
	margin-inline: auto;
	margin-bottom: .75rem;
	text-align: center;
	background: linear-gradient(transparent 70%, #c7dbed80 70%);
	color: var(--c-main);
	font-size: 1.5rem;
	font-weight: var(--fw-xl);
}
.f-trouble-cover__contents{
	text-align: center;
	font-weight: var(--fw-md);
	font-size: .875rem;
}

/*===============================
* 波アイコン
* =================================*/
.f-trouble-cover__nami{
	position: absolute;
	bottom: 0;
	left: calc( 50% - 50vw );
	z-index: -2;
	transform: rotateY(180deg);
	width: 100vw;
}

/*===============================================================================
***サービス
================================================================================*/
/*===============================
* 背景
* =================================*/
.f-service__inner{
	position: relative;
	padding: var(--g-sec--md) 0;
}
.f-service__bgi{
	position: absolute;
	top: 0;
	left: calc( 50% - 50vw );
	z-index: -1;
	max-width: 100vw;
	width: 100vw;
	height: 100%;
}
/*===============================
* ヘッド
* =================================*/
.f-service__head{
	margin-bottom: var(--g-sec--sm);
}
.f-service__title{
	text-align: center;
}
/*===============================
* ボディ
* =================================*/
.f-service__body{
	margin-bottom: var(--g-sec--sm);
}
.f-service-cards{
	--count: 2;
	--gap: clamp(0.625rem, -0.179rem + 2.14vw, 1.75rem);
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap);
}
@media (min-width: 768px){
	.f-service-cards{
		--count: 3;
	}
}
.f-service-card{
	width: calc( ( 100% - var(--gap) * (var(--count) - 1) ) / var(--count) );
	padding: 1rem;
	background: var(--c-light);
	box-shadow: 0px 0px 16px rgba(14, 90, 167, 0.1);
	border-radius: var(--bd-r--lg);
	color: var(--c-blue--dark);
	transition: var(--ani-t--normal) ease-out;
}
.f-service-card:is(:hover, :focus){
	background: var(--c-blue--dark);
	color: var(--c-light);
}
.f-service-card__title{
	margin-bottom: 1rem;
	text-align: center;
	font-weight: var(--fw-xl);
	font-family: var(--ff-g);
	font-size: clamp(1rem, 0.821rem + 0.48vw, 1.25rem);
	transition: var(--ani-t--normal) ease-out;
}
.f-service-card__title.--fz-sm{
	font-size: clamp(0.75rem, 0.393rem + 0.95vw, 1.25rem);
}
.f-service-card__img{
	display: block;
	box-shadow: inset 0px 0px 16px rgba(51, 51, 51, 0.1);
	border-radius: var(--bd-r--sm);
	overflow: hidden;
}
/*===============================
* フット
* =================================*/
.f-service__foot{
	text-align: center;
}
/*===============================
* 水玉
* =================================*/
.f-service__mizutama{
	position: absolute;
	z-index: -1;
}
.f-service__mizutama.--1{
	top: clamp(11.25rem, 10.357rem + 2.38vw, 12.5rem);
	left: calc( 50% - 50vw - 80px );
	width: clamp(12.5rem, 10.714rem + 4.76vw, 15rem);
	opacity: 20%;
}
.f-service__mizutama.--2{
	top: clamp(1.25rem, 0.893rem + 0.95vw, 1.75rem);
	right: clamp(2.5rem, 1.607rem + 2.38vw, 3.75rem);
	width: clamp(4rem, 1.5rem + 6.67vw, 7.5rem);
	opacity: 25%;
}
.f-service__mizutama.--3{
	top: clamp(5rem, 2.143rem + 7.62vw, 9rem);
	right: .75rem;
	transform: rotate(-30deg);
	width: clamp(1.5rem, 0.786rem + 1.9vw, 2.5rem);
	opacity: 25%;
}
.f-service__mizutama.--4{
	bottom: clamp(2.5rem, 1.964rem + 1.43vw, 3.25rem);
	right: calc( 50% - 50vw - clamp(2.5rem, 1.786rem + 1.9vw, 3.5rem) );
	width: clamp(8.5rem, 7.429rem + 2.86vw, 10rem);
	opacity: 20%;
}
/*===============================
* スクロールを促す
* =================================*/
.f-service__scroll{
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translate(-50%, 50%);
	z-index: 1;
}



/*===============================================================================
***選ばれる理由
================================================================================*/
/*===============================
* 背景
* =================================*/
.f-reason__inner{
	position: relative;
	padding: var(--g-sec--lg) 0;
}
.f-reason__bgi{
	position: absolute;
	top: 0;
	left: calc( 50% - 50vw );
	z-index: -1;
	transform: rotate(180deg);
	max-width: 100vw;
	width: 100vw;
	height: 100%;
}
/*===============================
* カラム
* =================================*/
.f-reason__flex{
	--count: 1;
	--gap: var(--g-sec--xs);
	--head-width: 90%;
	--body-width: calc( 200% - var(--head-width) );
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--gap);
	padding-bottom: 35%;
}
@media (min-width: 600px){
	.f-reason__flex{
		--count: 2;
		padding-bottom: 0;
	}
}
/*===============================
* ヘッド
* =================================*/
.f-reason__head{
	max-width: 448px;
	width: calc( ( var(--head-width) - var(--gap) * (var(--count) - 1) ) / var(--count) ); 
}
.f-reason__title{
	margin-bottom: var(--g-sec--xs);
}
.f-reason__lead{
	margin-bottom: var(--g-sec--sm);
	font-weight: var(--fw-lg);
}
.f-reason__btn{
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	text-align: center;
}
@media (min-width: 600px){
	.f-reason__btn{
		position: static;
		transform: translateX(0%);
		text-align: left;
	}
}
/*===============================
* ボディ
* =================================*/
.f-reason__body{
	width: calc( ( var(--body-width) - var(--gap) * (var(--count) - 1) ) / var(--count) );
}
.f-reason-cards {
	position: relative;
	width: 100%;
	height: 100%;
	padding: 1rem;
}
/* カード */
.f-reason-card {
	--tab-size: clamp(2.5rem, 1.607rem + 2.38vw, 3.75rem);
	position: relative;
	z-index: 10;
	width: 100%;
	margin-top: var(--tab-size);
	padding: clamp(1.25rem, 0.357rem + 2.38vw, 2.5rem);
	background-color: var(--c-light);
	border-radius: var(--bd-r--lg);
	box-shadow: 0px 0px 16px rgba(14, 90, 167, 0.1); 
	will-change: transform, width, height, background-color;
}
/* カード：タブ */
.f-reason-card__tab {
	position: absolute;
	top: calc( calc( var(--tab-size) - 2px ) * -1 );
	left: 50%;
	transform: translateX(-50%);
	z-index: 20;
	height: var(--tab-size);
	aspect-ratio: 2 / 1;
	background-color: var(--c-light);
	border-radius: 100vmax 100vmax 0 0;
	box-shadow: 
		/* 融合感を出すための、上部と側面の影 */
		0px -3px 6px rgba(14, 90, 167, 0.03), /* 上 */
		1px 0px 6px rgba(14, 90, 167, 0.02), /* 右 */
		-1px 0px 6px rgba(14, 90, 167, 0.02); /* 左 */
}
/* カード：数字 */
.f-reason-card__number{
	position: absolute;
	top: clamp(0.5rem, 0.143rem + 0.95vw, 1rem);
	left: 50%;
	transform: translateX(-50%);
	z-index: 30;
	line-height: var(--lh-xs);
	font-weight: var(--fw-xl);
	font-size: clamp(2.25rem, 1.357rem + 2.38vw, 3.5rem);
	background: var(--c-gradient--dark);
	background: -webkit-var(--c-gradient--dark);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
/* カード：コンテンツ */
.f-reason-card__content{
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	aspect-ratio: 32 / 28;
}
@media (min-width: 600px){
	.f-reason-card__content{
		aspect-ratio: 640 / 529;
	}
}
/* カード：タイトル */
.f-reason-card__title{
	margin-bottom: 1.25rem;
	font-size: clamp(1.25rem, 0.893rem + 0.95vw, 1.75rem);
	font-weight: var(--fw-xl);
	color: var(--c-light);
}
.f-reason-card__title span{
	display: block;
	width: fit-content;
	padding: .25rem .75rem;
	background: var(--c-main);
	color: var(--c-light);
}
.f-reason-card__title span:not(:last-child){
	margin-bottom: .5rem;
}
/* カード：画像 */
.f-reason-card__img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: var(--bd-r--sm);
	overflow: hidden;
	object-fit: cover;
}

.f-reason-card__illust {
	position: absolute;
	bottom: -4rem;
	right: calc( clamp(2rem, -1.571rem + 9.52vw, 7rem) * -1 );
	z-index: 9999;
	width: clamp(8rem, 4.786rem + 8.57vw, 12.5rem);
}
.f-reason-card__illust img {
	width: 100%;
	height: auto;
}

/*===============================
* 水玉
* =================================*/
.f-reason__mizutama{
	position: absolute;
	z-index: -1;
}
.f-reason__mizutama.--1{
	top: 2.5rem;
	left: calc( clamp(2.5rem, 1.429rem + 2.86vw, 4rem) * -1 );
	width: 3.75rem;
	opacity: 15%;
}
.f-reason__mizutama.--2{
	top: 7%;
	right: clamp(0.5rem, -7.357rem + 20.95vw, 11.5rem);
	width: clamp(4.5rem, 4.143rem + 0.95vw, 5rem);
	opacity: 15%;
}
.f-reason__mizutama.--3{
	bottom: 9.5rem;
	left: calc(50% - 50vw - -1.5rem);
	transform: rotate(45deg);
	width: clamp(2.5rem, 1.607rem + 2.38vw, 3.75rem);
	opacity: 20%;
}
.f-reason__mizutama.--4{
	bottom: clamp(-2.5rem, -5.357rem + 7.62vw, 1.5rem);
	left: calc(50% - clamp(-5.75rem, -13.964rem + 21.9vw, 5.75rem));
	transform: translateX(-50%);
	width: clamp(5.75rem, 0.929rem + 12.86vw, 12.5rem);
	opacity: 10%;
}
.f-reason__mizutama.--5{
	top: calc(100% + clamp(-24rem, -39rem + 40vw, -3rem));
	right: clamp(-2rem, -13.429rem + 30.48vw, 14rem);
	width: clamp(3.75rem, 1.071rem + 7.14vw, 7.5rem);
	opacity: 25%;
}



/*===============================================================================
***CTA
================================================================================*/
.f-cta{
	position: relative;
	z-index: 1;
}
.f-cta .fb__sec{
	padding-bottom: var(--g-sec--md);
}
.f-cta .fb__sec::before{
	bottom: 0;
	width: clamp(7rem, 3.964rem + 8.1vw, 11.25rem);
	height: clamp(7rem, 3.964rem + 8.1vw, 11.25rem);
}



/*===============================================================================
***Voice
================================================================================*/
/*===============================
* 背景
* =================================*/
.f-voice__inner{
	position: relative;
	padding: var(--g-sec--md) 0;
}
.f-voice__bgi{
	position: absolute;
	top: 0;
	left: calc( 50% - 50vw );
	z-index: -1;
	max-width: 100vw;
	width: 100vw;
	height: 100%;
}
/*===============================
* ヘッド
* =================================*/
.f-voice__head{
	margin-bottom: var(--g-sec--sm);
}
.f-voice__title{
	text-align: center;
}
/*===============================
* ボディ
* =================================*/
.f-voice__body{
	margin-bottom: var(--g-sec--sm);
}
.f-voice-cards{
	--count: 2;
	--gap: clamp(0.625rem, -0.179rem + 2.14vw, 1.75rem);
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap);
}
@media (min-width: 768px){
	.f-voice-cards{
		--count: 3;
	}
}
.f-voice-card{
	width: calc( ( 100% - var(--gap) * (var(--count) - 1) ) / var(--count) );
	padding: 1rem;
	background: var(--c-light);
	box-shadow: 0px 0px 16px rgba(14, 90, 167, 0.1);
	border-radius: var(--bd-r--lg);
	color: var(--c-blue--dark);
	transition: var(--ani-t--normal) ease-out;
}
.f-voice-card:is(:hover, :focus){
	background: var(--c-blue--dark);
	color: var(--c-light);
}
.f-voice-card__title{
	margin-bottom: 1rem;
	text-align: center;
	font-weight: var(--fw-xl);
	font-family: var(--ff-g);
	font-size: clamp(1rem, 0.821rem + 0.48vw, 1.25rem);
	transition: var(--ani-t--normal) ease-out;
}
.f-voice-card__title.--fz-sm{
	font-size: clamp(0.75rem, 0.393rem + 0.95vw, 1.25rem);
}
.f-voice-card__img{
	display: block;
	box-shadow: inset 0px 0px 16px rgba(51, 51, 51, 0.1);
	border-radius: var(--bd-r--sm);
	overflow: hidden;
}
/*===============================
* フット
* =================================*/
.f-voice__foot{
	text-align: center;
}
/*===============================
* 水玉
* =================================*/
.f-voice__mizutama{
	position: absolute;
	z-index: -1;
}
.f-voice__mizutama.--1{
	top: clamp(1.25rem, -0.357rem + 4.29vw, 3.5rem);
	left: calc( 50% - 50vw + clamp(1.25rem, -0.357rem + 4.29vw, 3.5rem) );
	transform: rotate(60deg);
	width: clamp(4rem, 2.571rem + 3.81vw, 6rem);
	opacity: 20%;
}
.f-voice__mizutama.--2{
	bottom: 80px;
	left: clamp(-1.5rem, -13.286rem + 31.43vw, 15rem);
	width: clamp(10rem, 8.214rem + 4.76vw, 12.5rem);
	opacity: 10%;
}
.f-voice__mizutama.--3{
	top: clamp(5.75rem, 4.5rem + 3.33vw, 7.5rem);
	right: calc( 50% - 50vw - 80px );
	width: clamp(12.5rem, 7.143rem + 14.29vw, 20rem);
	opacity: 20%;
}
/*===============================
* スクロールを促す
* =================================*/
.f-voice__scroll{
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translate(-50%, 50%);
	z-index: 1;
}



/*===============================================================================
***flow
================================================================================*/
/*===============================
* 背景
* =================================*/
.f-flow__inner{
	position: relative;
	padding: var(--g-sec--md) 0;
}
.f-flow__bgi{
	position: absolute;
	top: 0;
	left: calc( 50% - 50vw );
	transform: rotate(180deg);
	z-index: -1;
	max-width: 100vw;
	width: 100vw;
	height: 100%;
}
/*===============================
* ヘッド
* =================================*/
.f-flow__head{
	margin-bottom: var(--g-sec--sm);
}
/*===============================
* ボディ
* =================================*/
.f-flow__body{
	margin-bottom: var(--g-sec--sm);
}
.f-flow__body .p-flow__ttl{
	padding-bottom: 0;
	border-bottom: none;
}

/*===============================
* カード
* =================================*/
.f-flow__body .p-flow__sec{
	flex-direction: column;
}
@media (min-width: 768px){
	.f-flow__body .p-flow__sec{
		flex-direction: row;
	}
}
.f-flow__body .p-flow__textcontent{
	--gap: 1rem;
	--icon-size: 1.5rem;
}
.f-flow__body .p-flow__ttl{
	display: flex;
	align-items: baseline;
	gap: var(--gap);
}
.f-flow-radio {
	--radio-size: var(--icon-size);
	--radio-inner-size: calc( var(--radio-size) * .66 );
	--radio-border-width: 2px;
	--radio-gap-color: var(--c-light);
	--radio-gradient: var(--c-gradient--dark);
	width: var(--radio-size);
	height: var(--radio-size);
	border-radius: 50%;
	background: var(--radio-gradient);
	display: grid;
	place-items: center;
	position: relative;
	flex-shrink: 0;
}
.f-flow-radio::before,
.f-flow-radio::after {
	content: "";
	position: absolute;
	border-radius: 50%;
}
.f-flow-radio::before {
	width: calc(100% - (var(--radio-border-width) * 2));
	height: calc(100% - (var(--radio-border-width) * 2));
	background: var(--radio-gap-color);
}
.f-flow-radio::after {
	width: var(--radio-inner-size);
	height: var(--radio-inner-size);
	background: var(--radio-gradient);
}
@media (min-width: 768px){
	.f-flow__body .p-flow__text{
		padding-left: calc( var(--icon-size) + var(--gap) );
	}
}
/*===============================
* フット
* =================================*/
.f-flow__foot{
	text-align: center;
}
/*===============================
* 水玉
* =================================*/
.f-flow__mizutama{
	position: absolute;
	z-index: -1;
}
.f-flow__mizutama.--1{
	top: 7.5rem;
	left: calc( 50% - 50vw - 1.25rem );
	width: 17.5rem;
	opacity: 10%;
	display: none;
}
@media (min-width: 600px){
	.f-flow__mizutama.--1{
		display: block;
	}
}
.f-flow__mizutama.--2{
	bottom: clamp(8.25rem, 7rem + 3.33vw, 10rem);
	left: calc( 50% - 50vw + clamp(7.25rem, -4.536rem + 31.43vw, 23.75rem) );
	width: clamp(2.5rem, 2.143rem + 0.95vw, 3rem);
	opacity: 20%;
}
.f-flow__mizutama.--3{
	bottom: 12px;
	right: calc( 50% - 50vw + clamp(-2rem, -21.464rem + 51.9vw, 25.25rem) );
	width: clamp(8.5rem, 7.429rem + 2.86vw, 10rem);
	opacity: 10%;
}
.f-flow__mizutama.--4{
	top: 1.25rem;
	right: calc( 50% - 50vw + clamp(4rem, -3.857rem + 20.95vw, 15rem) );
	width: clamp(3.5rem, 2.786rem + 1.9vw, 4.5rem);
	opacity: 20%;
}
/*===============================
* スクロールを促す
* =================================*/
.f-flow__scroll{
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translate(-50%, 50%);
	z-index: 1;
}



/*===============================================================================
***faq
================================================================================*/
/*===============================
* 背景
* =================================*/
.f-faq__inner{
	position: relative;
	padding: var(--g-sec--md) 0;
}
.f-faq__bgi{
	position: absolute;
	top: 0;
	left: calc( 50% - 50vw );
	z-index: -1;
	max-width: 100vw;
	width: 100vw;
	height: 100%;
}
/*===============================
* ヘッド
* =================================*/
.f-faq__head{
	margin-bottom: var(--g-sec--sm);
}
.f-faq__title{
	text-align: center;
}
/*===============================
* ボディ
* =================================*/
.f-faq__body{
	margin-bottom: var(--g-sec--sm);
}
/*===============================
* フット
* =================================*/
.f-faq__foot{
	text-align: center;
}
/*===============================
* 水玉
* =================================*/
.f-faq__mizutama{
	position: absolute;
	z-index: -1;
}
.f-faq__mizutama.--1{
	top: clamp(1.25rem, -0.357rem + 4.29vw, 3.5rem);
	left: calc( 50% - 50vw + clamp(1.25rem, -0.357rem + 4.29vw, 3.5rem) );
	transform: rotate(60deg);
	width: clamp(4rem, 2.571rem + 3.81vw, 6rem);
	opacity: 20%;
}
.f-faq__mizutama.--2{
	bottom: 80px;
	left: clamp(-1.5rem, -13.286rem + 31.43vw, 15rem);
	width: clamp(10rem, 8.214rem + 4.76vw, 12.5rem);
	opacity: 10%;
}
.f-faq__mizutama.--3{
	top: clamp(5.75rem, 4.5rem + 3.33vw, 7.5rem);
	right: calc( 50% - 50vw - 80px );
	width: clamp(12.5rem, 7.143rem + 14.29vw, 20rem);
	opacity: 20%;
}



/*===============================================================================
***column
================================================================================*/
/*===============================
* 背景
* =================================*/
.f-column__inner{
	position: relative;
	padding: var(--g-sec--md) 0;
}
.f-column__bgi{
	position: absolute;
	top: 0;
	left: calc( 50% - 50vw );
	z-index: -1;
	max-width: 100vw;
	width: 100vw;
	height: 100%;
}
/*===============================
* ヘッド
* =================================*/
.f-column__head{
	margin-bottom: var(--g-sec--sm);
}
.f-column__title{
	text-align: center;
}
/*===============================
* 水玉
* =================================*/
.f-column__mizutama{
	position: absolute;
	z-index: -1;
}
.f-column__mizutama.--1{
	top: clamp(1.25rem, -0.357rem + 4.29vw, 3.5rem);
	left: calc( 50% - 50vw + clamp(1.25rem, -0.357rem + 4.29vw, 3.5rem) );
	transform: rotate(60deg);
	width: clamp(4rem, 2.571rem + 3.81vw, 6rem);
	opacity: 20%;
}
.f-column__mizutama.--2{
	bottom: 80px;
	left: clamp(-1.5rem, -13.286rem + 31.43vw, 15rem);
	width: clamp(10rem, 8.214rem + 4.76vw, 12.5rem);
	opacity: 10%;
}
.f-column__mizutama.--3{
	top: clamp(5.75rem, 4.5rem + 3.33vw, 7.5rem);
	right: calc( 50% - 50vw - 80px );
	width: clamp(12.5rem, 7.143rem + 14.29vw, 20rem);
	opacity: 20%;
}
/*===============================
* スクロールを促す
* =================================*/
.f-column__scroll{
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translate(-50%, 50%);
	z-index: 1;
}


/*===============================================================================
***map
================================================================================*/
/*===============================
* 背景
* =================================*/
.f-map__inner{
	position: relative;
	padding: var(--g-sec--md) 0 var(--g-sec--xxl);
}
.f-map__bgi{
	position: absolute;
	top: 0;
	left: calc( 50% - 50vw );
	transform: rotate(180deg);
	z-index: -1;
	max-width: 100vw;
	width: 100vw;
	height: 100%;
}
.f-map__wrap{
	border-radius: var(--bd-r--lg);
	overflow: hidden;
}
.f-map__wrap iframe{
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 358 / 269;
}
@media (min-width: 960px){
	.f-map__wrap iframe{
		aspect-ratio: 3 / 1;
	}
}
/*===============================
* 水玉
* =================================*/
.f-map__mizutama{
	position: absolute;
	z-index: -1;
}
.f-map__mizutama.--1{
	bottom: 8.75rem;
	left: calc( 50% - 50vw - 1.5rem );
	width: 6rem;
	opacity: 20%;
}
.f-map__mizutama.--2{
	top: 1rem;
	right: calc( 50% - 50vw - 2.5rem );
	display: none;
	width: 120px;
	opacity: 12%;
}
@media (min-width: 600px){
	.f-map__mizutama.--2{
		display: block;
	}
}

/*===============================
* 波アイコン
* =================================*/
.f-map__nami{
	position: absolute;
	bottom: 0;
	left: calc( 50% - 50vw );
	z-index: -1;
	width: 100vw;
}