@charset "utf-8";

:root {
	--vw: 1vw;
	--main-font-color: #000;
	--dark-blue: #112c41;
	--blue: #0e4169;
	--main-color: var(--blue);
	--main-color-middle: #e5bb9b;
	--main-color-light: #fadeca;
	--main-color-super-light: #fbf3ec;
	--default-letter-spacing: 0.05em;
	--default-transition: 0.5s;
	--max-width: 1200px;
	--inner-padding: 40px;
	--inner-width: calc(var(--max-width) + var(--inner-padding) * 2);
	--over-margin: min(calc((-1 * var(--vw) * 100 + var(--max-width)) / 2),
			calc(-1 * var(--inner-padding)));
	/* noto入れるの忘れない */
	--font-main: YakuHanJPs, "Zen Kaku Gothic Antique", "メイリオ", "Meiryo", "Hiragino Kaku Gothic ProN",
		"ヒラギノ角ゴ ProN W3", Hiragino Sans, "Osaka", "MS PGothic", -apple-system,
		BlinkMacSystemFont, arial, helvetica, sans-serif;
	--font-min: YakuHanMPs;
	--font-maru: YakuHanRPs;
}

.qr {
	margin: 0 auto;
	width: 11.7rem;
}

/*共通*/

h2,
h3,
h4,
h5,
h6 {
	font-weight: 900;
}

.catch_copy,
.flow_arrow_box .tl,
.flow_arrow_box .tl_block .step p,
#under .catch,
.m_col_ttl,
.reason_line_text_ttl,
.under_page_wrap :is(h2,h3,h4,h5,h6) {
	font-weight: 700;
}

.t_section {
	padding: 13vw 0;
}

.calendar {
	position: relative;
	min-height: 90vw;

	iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
}

#wrapper {
	padding-top: 13.85vw;
}

/*その他の追加変更 ここから*/
.m_ttl01 {
	--color: var(--dark-blue);
	position: relative;
	text-align: center;
	margin-bottom: 8vw;
	padding-bottom: 5vw;
	color: var(--color);

	&:before {
		content: '';
		display: block;
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 8vw;
		height: 2px;
		z-index: 1;
		background: var(--color);
	}

	.txt01 {
		font-size: 4rem;
		letter-spacing: 0.12em;
		display: block;
		font-style: italic;
		line-height: 1.4;
	}

	.txt02 {
		font-size: 2rem;
		letter-spacing: 0.12em;
		display: block;
		line-height: 1.4;

		strong {
			font-weight: 900;
			font-style: italic;
			font-size: 3rem;
			letter-spacing: 0.12em;
		}
	}
}

.m_ttl02_wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 5vw;
}

.m_ttl02 {
	font-style: italic;
	color: #fff;
	font-size: 3.7rem;
	letter-spacing: 0.05em;
	line-height: 1;
}

.m_ttl02_more {
	--icon-right: -2.9vw;
	--icon-size: 6.1vw;
	text-decoration: none;
	font-size: 1.8rem;
	letter-spacing: 0.05em;
	line-height: 1;
	padding: 1vw 7vw 2.4vw 3vw;
	position: relative;
	color: #fff;
	display: block;
	font-weight: 900;
	background: var(--dark-blue);

	&:before {
		content: "";
		position: absolute;
		border: 0;
		top: calc(50% - 0.2rem);
		right: var(--icon-right);
		width: var(--icon-size);
		height: auto;
		aspect-ratio: 60/14;
		transform: translateY(-50%);
		-webkit-mask: url(../images/icon_arrow.png) center / 100% no-repeat;
		mask: url(../images/icon_arrow.png) center / 100% no-repeat;
		background: #fff;
		z-index: 1;
	}
}

.m_txt p {
	line-height: 1.875;
}

.m_txt p+p {
	margin-top: 1em;
}

.btn01 {
	--btn-height: 13vw;
	--btn-width: auto;
	--icon-right: -2.9vw;
	--icon-size: 6.1vw;
	--border-radius: 0;
	--border-width: 0px;
	font-size: 1.8rem;
	padding: 3vw 9vw 3vw 8vw;
	background: var(--dark-blue);
	color: #fff;
	letter-spacing: 0;
	line-height: calc(24/18);
	border-radius: var(--border-radius);
	border: var(--border-width) solid var(--main-color);
	min-width: var(--btn-width);
	min-height: var(--btn-height);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin-inline: auto;
	font-weight: 900;
}

.btn01:before {
	content: "";
	position: absolute;
	border: 0;
	top: 50%;
	right: var(--icon-right);
	width: var(--icon-size);
	height: auto;
	aspect-ratio: 60/14;
	transform: translateY(-50%);
	-webkit-mask: url(../images/icon_arrow.png) center / 100% no-repeat;
	mask: url(../images/icon_arrow.png) center / 100% no-repeat;
	background: var(--dark-blue);
	z-index: 1;
}

.btn01:after {
	content: "";
	position: absolute;
	border: 0;
	top: 50%;
	right: var(--icon-right);
	width: var(--icon-size);
	height: auto;
	aspect-ratio: 60/14;
	transform: translateY(-50%);
	-webkit-mask: url(../images/icon_arrow.png) center / 100% no-repeat;
	mask: url(../images/icon_arrow.png) center / 100% no-repeat;
	background: #fff;
	z-index: 2;
	-webkit-clip-path: polygon(0 0, calc(100% + var(--icon-right)) 0, calc(100% + var(--icon-right)) 100%, 0% 100%);
	clip-path: polygon(0 0, calc(100% + var(--icon-right)) 0, calc(100% + var(--icon-right)) 100%, 0% 100%);
}

.btn_white {
	color: var(--dark-blue);
	background: #fff;

	&:before {
		background: #fff;
	}

	&:after {
		background: var(--dark-blue);
	}
}

.btn01 span:before {
	border-radius: var(--border-radius);
	content: '';
	display: block;
	position: absolute;
	top: calc(var(--border-width) * -1);
	left: calc(var(--border-width) * -1);
	width: calc(100% + var(--border-width) * 2);
	height: calc(100% + var(--border-width) * 2);
	z-index: 10;
	background: #fff;
	opacity: 0;
	pointer-events: none;
	border-radius: var(--border-radius);
	transition: 0.5s;
}

.btn05_wrap {
	background: #fff;
}

.btn05 {
	--gutter: 1vw;
	position: relative;
	isolation: isolate;
	text-decoration: none;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 3vw 9vw 3vw 9vw;
	background: #fff;
	text-align: center;
	font-weight: 900;
	line-height: calc(24/19);
	font-size: 1.7rem;
	min-height: 14vw;

	&:before {
		content: '';
		display: block;
		position: absolute;
		top: var(--gutter);
		left: var(--gutter);
		width: calc(100% - var(--gutter) * 2);
		height: calc(100% - var(--gutter) * 2);
		z-index: -1;
		border: 2px solid var(--blue);
	}

	&:after {
		content: '';
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 15vw;
		aspect-ratio: 1 / 1;
		background: color-mix(in srgb, var(--blue) 5%, transparent);
		-webkit-clip-path: polygon(0 100%, 0 0, 100% 0);
		clip-path: polygon(0 100%, 0 0, 100% 0);
		z-index: -2;
	}

	span {
		&:before {
			content: '';
			display: block;
			position: absolute;
			top: calc(50% - 1px);
			right: 3vw;
			width: 7vw;
			height: 2px;
			z-index: 1;
			background: var(--dark-blue);
		}

		&:after {
			content: '';
			display: block;
			position: absolute;
			top: calc(50% - 1px);
			right: 2.9vw;
			width: 2vw;
			height: 2px;
			z-index: 1;
			background: var(--dark-blue);
			transform: rotate(30deg);
			transform-origin: right;
		}
	}
}

/*______________________________________________________________________________________
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
m_mv
______________________________
^^^^^^^^^^^^^^^^^^^^^^^^^^^^*/
.m_mv {
	position: relative;
}

.m_mv img {
	width: 100%;
}

.m_mv_inner {
	position: relative;
}

.m_mv_main {
	position: relative;
	z-index: 1;
}

.m_mv_txt {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
	width: 100%;
	height: 100%;
}

/*______________________________________________________________________________________
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
t_xxx
______________________________
^^^^^^^^^^^^^^^^^^^^^^^^^^^^*/
.t_trouble {
	--gutter: 3vw;
	background: url(../images/bg_pattern.png) center top / 1px repeat;
	position: relative;
	isolation: isolate;
	overflow: hidden;

	&:before {
		content: '';
		display: block;
		position: absolute;
		top: var(--gutter);
		left: 0;
		width: 100%;
		height: calc(100% - var(--gutter) * 2);
		z-index: -10;
		background: linear-gradient(95deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 14%, rgba(255, 255, 255, 1) 71%, rgba(255, 255, 255, 0) 96%, rgba(255, 255, 255, 0) 100%);
		opacity: 0.85;
	}

	.t_trouble_in {
		&:before {
			content: '';
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: var(--gutter);
			z-index: 1;
			background: #b2b2b2;
			opacity: 0.3;
			box-shadow: 0px 0px 1.4rem -0.4rem rgba(0, 0, 0, 0.3);
		}

		&:after {
			content: '';
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: var(--gutter);
			z-index: 1;
			opacity: 0.77;
			background: linear-gradient(95deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 8%, rgba(255, 255, 255, 0.4) 29%, rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, 1) 91%, rgba(255, 255, 255, 0) 100%);
		}
	}

	.inner {
		position: static;

		&:before {
			content: '';
			display: block;
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: var(--gutter);
			z-index: 1;
			background: #b2b2b2;
			opacity: 0.3;
			box-shadow: 0px 0px 1.4rem -0.4rem rgba(0, 0, 0, 0.3);
		}

		&:after {
			content: '';
			display: block;
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: var(--gutter);
			z-index: 1;
			opacity: 0.77;
			background: linear-gradient(95deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 2%, rgba(255, 255, 255, 0.4) 14%, rgba(255, 255, 255, 0) 43%, rgba(255, 255, 255, 1) 74%, rgba(255, 255, 255, 0) 97%);
		}
	}

	.t_trouble_ttl {
		position: relative;
		text-align: center;

		.txt01 {
			color: var(--dark-blue);
			letter-spacing: 0.12em;
			line-height: 1.5;
			font-size: 2.2rem;
			position: relative;
			z-index: 10;
			font-style: italic;
		}

		.txt02 {
			font-weight: 400;
			color: #fff;
			letter-spacing: 0.12em;
			position: absolute;
			top: 50%;
			left: 50%;
			translate: -50% -54%;
			z-index: 1;
			font-size: 5.5rem;
		}
	}

	.t_trouble_block {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 2vw;
		margin-top: 7vw;
	}

	.t_trouble_item {
		text-decoration: none;
		background: #fff;
		box-shadow: 0px 0px 1.4rem -0.4rem rgba(0, 0, 0, 0.7);
		display: flex;
		flex-direction: column;
	}

	.t_trouble_item_head {
		position: relative;
		isolation: isolate;
		padding: 4vw 0 2vw;
		--gutter: 1vw;

		&:before {
			content: '';
			display: block;
			position: absolute;
			bottom: 0;
			left: var(--gutter);
			width: calc(100% - var(--gutter) * 2);
			height: calc(100% - var(--gutter));
			z-index: -1;
			border: 1px solid var(--blue);
			border-bottom: 0;
		}

		&:after {
			content: '';
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			width: 70%;
			aspect-ratio: 1/1;
			z-index: -2;
			background: var(--main-color);
			-webkit-clip-path: polygon(0 100%, 0 0, 100% 0);
			clip-path: polygon(0 100%, 0 0, 100% 0);
			opacity: 0.05;
		}
	}

	.t_trouble_item_img {
		display: flex;
		flex-direction: column;
		align-items: center;

		img {
			width: 30vw;
		}

		figcaption {
			min-height: 3em;
			font-weight: 900;
			color: var(--dark-blue);
			display: flex;
			align-items: center;
			flex-direction: column;
			justify-content: center;
			margin-top: 1.3vw;
			font-style: italic;

			.txt01 {
				letter-spacing: 0.025em;
				font-size: 1.6rem;
				line-height: 1.3;
			}

			.txt02 {
				letter-spacing: 0.12em;
				margin-top: 0.3vw;
				font-size: 1.3rem;
				line-height: 1.3;
			}
		}
	}

	.t_trouble_item_body {
		flex: 1;
		background: var(--blue);
		padding: 3vw 3vw 5vw;
		position: relative;

		&:before {
			content: '';
			display: block;
			position: absolute;
			bottom: 3vw;
			right: 3vw;
			width: 8vw;
			height: 2px;
			z-index: 1;
			background: #fff;
		}

		&:after {
			content: '';
			display: block;
			position: absolute;
			bottom: 3vw;
			right: 2.9vw;
			width: 2vw;
			height: 2px;
			z-index: 1;
			background: #fff;
			transform: rotate(30deg);
			transform-origin: right;
		}
	}

	.t_trouble_item_txt {
		color: #fff;
		line-height: calc(24/16);
		font-size: 1.3rem;
	}

	.t_trouble_cards {
		margin-top: 8vw;
		display: grid;
		gap: 3vw;
	}

	.t_trouble_card {
		text-decoration: none;
		position: relative;
		padding: 0 5vw 5vw;
		display: flex;
		flex-direction: column;
		background: var(--dark-blue);
		color: #fff;
		isolation: isolate;

		&:before {
			content: '';
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			width: 30%;
			aspect-ratio: 1/1;
			z-index: -2;
			background: #fff;
			-webkit-clip-path: polygon(0 100%, 0 0, 100% 0);
			clip-path: polygon(0 100%, 0 0, 100% 0);
			opacity: 0.05;
		}
	}

	.t_trouble_card_ttl {
		position: relative;
		background: var(--url) left center / 12.5vw no-repeat;
		padding: 5vw 0 5vw 14.8vw;
		font-weight: 900;
		letter-spacing: 0.025em;
		line-height: 1.4;
		font-size: 1.9rem;
		border-bottom: 1px solid #fff;
		font-style: italic;
	}

	.t_trouble_card_txt {
		font-size: 1.6rem;
		margin-top: 1.9vw;

		&:before {
			content: '';
			display: block;
			position: absolute;
			bottom: 3vw;
			right: 3vw;
			width: 8vw;
			height: 2px;
			z-index: 1;
			background: #fff;
		}

		&:after {
			content: '';
			display: block;
			position: absolute;
			bottom: 3vw;
			right: 2.9vw;
			width: 2vw;
			height: 2px;
			z-index: 1;
			background: #fff;
			transform: rotate(30deg);
			transform-origin: right;
		}
	}
}

/*______________________________________________________________________________________
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
t_feature
______________________________
^^^^^^^^^^^^^^^^^^^^^^^^^^^^*/
.t_feature {
	position: relative;
	isolation: isolate;

	&:before {
		content: '';
		display: block;
		position: absolute;
		top: 0;
		left: -30vw;
		width: 200vw;
		aspect-ratio: 1465/917;
		z-index: -1;
		background: url(../images/top/feature_bg01.webp) center / 100% no-repeat;
	}

	&:after {
		content: '';
		display: block;
		position: absolute;
		top: 50%;
		left: 50%;
		width: 330vw;
		aspect-ratio: 2105/1801;
		transform: translate(-50%, -50%);
		z-index: -1;
		background: url(../images/top/feature_bg02.webp) center / 100% no-repeat;
	}

	.inner {
		position: static;

		&:before {
			content: '';
			display: block;
			position: absolute;
			bottom: 0;
			left: -8vw;
			width: 170vw;
			aspect-ratio: 1165/730;
			z-index: -1;
			background: url(../images/top/feature_bg03.webp) center / 100% no-repeat;
		}
	}

	.t_feature_block {
		display: grid;
		gap: 12vw;
	}
}

.m_feature {
	--bg: #aac2d4;
	--url: url(../images/top/feature_glass01_vertical.webp);
	position: relative;
	isolation: isolate;
	background-color: color-mix(in srgb, var(--bg) 20%, transparent);
	padding: 6vw 5vw;

	&:before {
		content: '';
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: -1;
		background: var(--url) center top / 100% no-repeat;
	}

	&:nth-of-type(2n) {
		--bg: #c0d4c2;
		--url: url(../images/top/feature_glass02_vertical.webp);
	}

	.m_feature_body {
		margin-top: 5vw;
	}

	.m_feature_body_top {
		color: var(--dark-blue);
		padding-bottom: 2vw;
		border-bottom: 2px solid var(--dark-blue);
		display: flex;
		align-items: center;
		gap: 3vw;
	}

	.m_feature_num {
		display: flex;
		align-items: baseline;
		font-weight: 900;
		position: relative;
		top: -0.3em;

		.txt01 {
			-webkit-writing-mode: vertical-rl;
			writing-mode: vertical-rl;
			line-height: 1;
			letter-spacing: 0;
			font-size: 1rem;
			position: relative;
			top: -0.1em;
			margin-right: 1vw;
		}

		.txt02 {
			font-size: 6.5rem;
			line-height: 1;
		}
	}

	.m_feature_ttl {
		line-height: calc(32/28);
		font-size: 2.2rem;
		letter-spacing: 0.05em;
		font-style: italic;
	}

	.m_feature_catch {
		margin-top: 4.8vw;
		font-weight: 900;
		color: var(--blue);
		letter-spacing: 0.04em;
		font-size: 1.8rem;
		line-height: 1.6;
	}

	.m_feature_txt {
		margin-top: 2.4vw;
		line-height: 1.875;
	}

	.m_feature_btns {
		margin-top: 6vw;
	}
}

/*______________________________________________________________________________________
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
t_ortho
______________________________
^^^^^^^^^^^^^^^^^^^^^^^^^^^^*/
.t_ortho {
	background: #2c3a46 url(../images/top/ortho_bg_sp.webp) center top / 100% no-repeat;
	margin-top: 11vw;

	.t_ortho_ttl {
		color: #fff;

		&:before {
			background: #fff;
		}
	}

	.t_ortho_body {
		margin-top: 8vw;
		display: grid;
		gap: 4vw;
	}

	.t_ortho_btns {
		display: grid;
		gap: 3vw;
		margin-top: 8vw;
	}
}

.m_ortho {
	background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 64%, rgba(212, 212, 212, 1) 100%);
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	padding: 5vw 0;
	box-shadow: 1vw 1vw 0px 0px color-mix(in srgb, #727272 70%, transparent);
	text-decoration: none;

	&:before {
		content: '';
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 30vw;
		aspect-ratio: 1 / 1;
		background: color-mix(in srgb, var(--blue) 5%, transparent);
		-webkit-clip-path: polygon(0 100%, 0 0, 100% 0);
		clip-path: polygon(0 100%, 0 0, 100% 0);
		z-index: -1;
	}

	.m_ortho_ttl {
		letter-spacing: 0.12em;
		font-size: 1.8rem;
		border-right: 2px solid var(--dark-blue);
		width: 36vw;
		padding-left: 1vw;
		min-height: 23vw;
		display: flex;
		align-items: center;
		text-align: center;
		justify-content: center;
	}

	.m_ortho_txt {
		padding: 2vw 3vw 2vw 5vw;
		letter-spacing: 0.12em;
		flex: 1;
		line-height: 1.6;
		font-size: 1.5rem;
	}

	.m_ortho_more {
		--clip-size: 5vw;
		position: absolute;
		bottom: -0.5px;
		right: -0.5px;
		background: var(--dark-blue);
		color: #fff;
		font-weight: 900;
		padding: 0.2vw 10vw 0.2vw 7vw;
		font-size: 1.3rem;
		-webkit-clip-path: polygon(var(--clip-size) 0%, 100% 0%, 100% 100%, 0% 100%);
		clip-path: polygon(var(--clip-size) 0%, 100% 0%, 100% 100%, 0% 100%);

		&:before {
			content: '';
			display: block;
			position: absolute;
			top: calc(50% - 1px);
			right: 2vw;
			width: 6vw;
			height: 2px;
			z-index: 1;
			background: #fff;
		}

		&:after {
			content: '';
			display: block;
			position: absolute;
			top: calc(50% - 1px);
			right: 1.9vw;
			width: 2vw;
			height: 2px;
			z-index: 1;
			background: #fff;
			transform: rotate(30deg);
			transform-origin: right;
		}
	}
}

/*______________________________________________________________________________________
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
t_medical
______________________________
^^^^^^^^^^^^^^^^^^^^^^^^^^^^*/
.t_medical {
	background: url(../images/top/medical_bg.webp) center top / 620px;

	.t_medical_block {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 3vw;
	}

	.t_medical_item {
		text-decoration: none;
		background: #fff;
		box-shadow: 0px 0px 1.4rem -0.4rem rgba(0, 0, 0, 0.7);
		display: flex;
		flex-direction: column;
	}

	.t_medical_item_head {
		position: relative;
		isolation: isolate;
		padding: 6vw 0 5vw;
		--gutter: 1vw;

		&:before {
			content: '';
			display: block;
			position: absolute;
			bottom: 0;
			left: var(--gutter);
			width: calc(100% - var(--gutter) * 2);
			height: calc(100% - var(--gutter));
			z-index: -1;
			border: 1px solid var(--blue);
			border-bottom: 0;
		}

		&:after {
			content: '';
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			width: 70%;
			aspect-ratio: 1/1;
			z-index: -2;
			background: var(--main-color);
			-webkit-clip-path: polygon(0 100%, 0 0, 100% 0);
			clip-path: polygon(0 100%, 0 0, 100% 0);
			opacity: 0.05;
		}
	}

	.t_medical_item_ttl {
		letter-spacing: 0.12em;
		line-height: 1.3;
		color: var(--dark-blue);
		font-size: 1.6rem;
		text-align: center;
		font-style: italic;
	}

	.t_medical_item_body {
		flex: 1;
		background: var(--blue);
		padding: 3vw 2.9vw 5vw;
		position: relative;

		&:before {
			content: '';
			display: block;
			position: absolute;
			bottom: 3vw;
			right: 3vw;
			width: 8vw;
			height: 2px;
			z-index: 1;
			background: #fff;
		}

		&:after {
			content: '';
			display: block;
			position: absolute;
			bottom: 3vw;
			right: 2.9vw;
			width: 2vw;
			height: 2px;
			z-index: 1;
			background: #fff;
			transform: rotate(30deg);
			transform-origin: right;
		}
	}

	.t_medical_item_txt {
		color: #fff;
		line-height: 1.7;
		font-size: 1.3rem;
	}
}

/*______________________________________________________________________________________
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
t_concept
______________________________
^^^^^^^^^^^^^^^^^^^^^^^^^^^^*/
.t_concept {
	background: var(--blue) url(../images/top/concept_bg01.webp) center / 250px;
	position: relative;
	isolation: isolate;
	padding: 20vw 0 67vw;

	&:before {
		content: '';
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		aspect-ratio: 800/493;
		z-index: -1;
		background: url(../images/top/concept_bg02_sp.webp) center top / 100% no-repeat;
	}

	&:after {
		content: '';
		display: block;
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		aspect-ratio: 800/520;
		z-index: -1;
		background: url(../images/top/concept_img01_sp.webp) center bottom / 100% no-repeat;
	}

	.t_concept_ttl {
		width: 68vw;
		margin: 0 auto;
	}

	.t_concept_txt {
		--shadow: 0px 0px 0.7rem rgb(17 44 65 / 0.3);
		filter: drop-shadow(var(--shadow)) drop-shadow(var(--shadow)) drop-shadow(var(--shadow)) drop-shadow(var(--shadow)) drop-shadow(var(--shadow)) drop-shadow(var(--shadow)) drop-shadow(var(--shadow)) drop-shadow(var(--shadow)) drop-shadow(var(--shadow)) drop-shadow(var(--shadow));
		color: #fff;
		margin-top: 5vw;
	}

	.t_concept_btns {
		margin-top: 8vw;
	}

	.t_concept_drs {
		margin-top: 5vw;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 3vw;

		a {
			display: block;
		}

		p {
			background: #fff;
		}

		img {
			display: block;
		}
	}
}

/*______________________________________________________________________________________
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
t_info
______________________________
^^^^^^^^^^^^^^^^^^^^^^^^^^^^*/
.t_info {
	background: #525252 url(../images/info_bg.png) center top / 39px;
	isolation: isolate;
	position: relative;

	&:before {
		content: '';
		display: block;
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 140%;
		height: 100%;
		z-index: -1;
		box-shadow: 0px 0px 5rem -0.4rem color-mix(in srgb, #000 100%, transparent) inset;
	}

	.t_info_block {
		display: grid;
		gap: 5vw;
	}

	.t_info_item {
		background: #858f9b;
		position: relative;
		isolation: isolate;
		color: #fff;
		overflow: hidden;
		padding: 6vw 5vw;

		&:before {
			content: '';
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			width: 30%;
			aspect-ratio: 1/1;
			z-index: -2;
			background: var(--dark-blue);
			-webkit-clip-path: polygon(0 100%, 0 0, 100% 0);
			clip-path: polygon(0 100%, 0 0, 100% 0);
			opacity: 0.1;
		}
	}

	.t_info_calendars {
		display: grid;
		gap: 5vw;
		margin-top: 8vw;
	}

	.t_info_btn {
		margin-top: 8vw;
	}
}

.m_newslist {
	border-top: 2px solid #fff;
	border-bottom: 2px solid #fff;
}

.m_newslist_item {
	border-bottom: 1px solid #fff;
}

.m_newslist_item:last-of-type {
	border-bottom: 0;
}

.m_newslist_item_in {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding: 3.3vw 0;
	text-decoration: none;
}

.m_newslist_item_in .date {
	letter-spacing: 0.24em;
	color: #fff;
	margin-right: 3vw;
	line-height: 1.4;
}

.m_newslist_item_in em {
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

.m_access {
	display: grid;
	gap: 2vw;
	border-top: 2px solid #fff;
	border-bottom: 2px solid #fff;
	padding: 3.6vw 0;
	margin-top: 5vw;

	li {
		position: relative;
		padding: 1vw 0 1vw 15vw;
		color: #fff;
		line-height: calc(24/16);

		&:before {
			content: '';
			display: block;
			position: absolute;
			top: 50%;
			left: 0;
			transform: translateY(-50%);
			width: 12vw;
			aspect-ratio: 1/1;
			z-index: 1;
			background: var(--url) center / 100% no-repeat;
		}
	}
}

/*______________________________________________________________________________________
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
t_other
______________________________
^^^^^^^^^^^^^^^^^^^^^^^^^^^^*/
.t_other {
	background: #f2ebe4 url(../images/top/other_bg_sp.webp) center bottom / 100% no-repeat;

	.t_other_block {
		display: grid;
		gap: 10vw;
	}

	.m_ttl02 {
		color: #3d474f;
	}

	.t_other_instagram_wrap {
		position: relative;

		.t_other_instagram_btn {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			z-index: 10;
			width: 25vw;
		}

		.t_other_instagram {
			position: relative;
			z-index: 1;
			/* margin: -5px; */
		}
	}
}

/*______________________________________________________________________________________
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
t_recruit
______________________________
^^^^^^^^^^^^^^^^^^^^^^^^^^^^*/
.t_recruit {
	background: linear-gradient(180deg, rgba(14, 65, 105, 1) 0%, rgba(17, 44, 65, 1) 100%);
	color: #fff;
	position: relative;
	padding-bottom: 8vw;

	.t_recruit_en {
		position: absolute;
		top: -19vw;
		left: 1vw;
		width: 50vw;
	}

	.t_recruit_ttl {
		font-size: 3.5rem;
		text-align: center;
	}

	.t_recruit_txt {
		color: #fff;
		font-size: 1.8rem;
		line-height: 1.65;
		margin-top: 2vw;
		text-align: center;
	}

	.t_recruit_btn {
		display: block;
		width: 36vw;
		margin: 5vw auto 0;
	}
}