@charset "utf-8";

/* index_main
====================================================================== */
.index_main {
	overflow: hidden;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100svh;
	z-index: 5;
	.copy {
		--ls: .2em;
		position: absolute;
		top: calc(180 / 900 * 100%);
		right: 8rem;
		color: #fff;
		font-size: 2rem;
		line-height: calc(50 / 20);
		writing-mode: vertical-rl;
		z-index: 5;
	}
	.title {
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: center;
		z-index: 5;
		h1 {
			--ls: .2em;
			font-size: 2.8rem;
			line-height: 1;
			writing-mode: vertical-rl;
			color: #fff;
			.l {
				margin-top: 2rem;
				font-size: 10rem;
				ruby {
					ruby-position: over;
					ruby-align: center;
					rt {
						position: relative;
						left: 0.8em;
						font-size: 1.4rem;
						letter-spacing: 1em;
					}
				}
			}
		}
		.en {
			margin-top: 1rem;
			font-size: 1.4rem;
			color: var(--color-theme);
		}
	}
	&::before {
		content: "";
		position: absolute;
		inset: 0;
		background: url(../img/top/main_bg.png) no-repeat 50%;
		background-size: 160rem;
		z-index: 2;
	}
	.bg {
		position: absolute;
		inset: 0;
		z-index: -1;
		.img {
			position: absolute;
			inset: 0;
			opacity: 0;
			transition: opacity 1.2s ease-in-out;
			&.is-show {
				opacity: 1;
				z-index: 2;
			}
			&.no-trans {
				transition: none;
			}
		}
	}
	@media screen and (max-width: 743px) {
		height: calc(100svh - var(--header-height));
		padding-bottom: var(--fix-nav-height);
		.copy {
			top: 3rem;
			right: 2rem;
			font-size: 1.4rem;
			line-height: calc(60 / 28);
		}
		.title {
			h1 {
				font-size: 2rem;
				.l {
					margin-top: 1rem;
					font-size: 5rem;
					ruby {
						rt {
							left: 0.5em;
							font-size: 1.1rem;
							letter-spacing: .5em;
						}
					}
				}
			}
			.en {
				font-size: 1.1rem;
			}
		}
		&::before {
			background-image: url(../img/top/main_bg_sp.png);
			background-size: 100%;
		}
	}
}

/* index_about
====================================================================== */
.index_about {
	position: relative;
	clip-path: inset(0);
	color: #fff;
	&::before {
		content: "";
		position: absolute;
		inset: 0;
	}
	.index_about_contents {
		position: relative;
		z-index: 2;
	}
	.fixed_bg {
		&::after {
			content: "";
			position: absolute;
			inset: 0;
			background-color: #323232;
			opacity: 0.8;
			mix-blend-mode: multiply;
		}
	}
	.index_about_header {
		display: flex;
		flex-direction: row-reverse;
		.point_v_title {
			position: relative;
			top: -5rem;
			margin-inline: 0;
		}
		.title {
			--ls: 0.3em;
			margin-right: 5rem;
			writing-mode: vertical-rl;
			font-size: 5.6rem;
			line-height: 1.5;
			ruby {
				ruby-position: over;
				ruby-align: center;
				rt {
					position: relative;
					left: 0.8em;
					font-size: 1.4rem;
					letter-spacing: .4em;
				}
			}
		}
	}
	.more {
		a {
			position: relative;
			display: block;
			color: #fff;
			text-decoration: none;
			font-size: 1.8rem;
			&::after {
				content: "";
				position: absolute;
				width: 2rem;
				height: 2rem;
				background: url(../img/ico-link-arrow.svg) no-repeat 50%;
				background-size: 100%;
			}
		}
	}
	@media screen and (min-width: 744px), print {
		padding-block: 25rem 20rem;
		&::before {
			background: url(../img/top/about_img.png) no-repeat 50%;
			background-size: 160rem;
		}
		.index_about_contents {
			max-width: var(--base-width);
			margin-inline: auto;
			padding-inline: 5rem;
			display: flex;
			flex-direction: row-reverse;
			justify-content: center;
		}
		.text {
			margin-right: 6rem;
			display: flex;
			flex-direction: row-reverse;
			gap: 1lh;
			font-size: 1.6rem;
			line-height: calc(40 / 16);
			& > * {
				writing-mode: vertical-rl;
			}
		}
		.more {
			padding-top: 25.5rem;
			margin-right: 6rem;
			a {
				--ls: .2em;
				writing-mode: vertical-rl;
				padding-bottom: 3rem;
				&::after {
					left: calc(50% - 1rem);
					bottom: 0;
				}
				@media (hover) {
					&:hover {
						opacity: 0.5;
					}
				}
			}
		}
	}
	@media screen and (max-width: 743px) {
		padding: 12rem 3rem 7rem;
		&::before {
			top: var(--header-height);
		}
		.index_about_header {
			margin-bottom: -4rem;
			.point_v_title {
				top: -4rem;
			}
			.title {
				margin-right: 3rem;
				font-size: 5rem;
				ruby {
					rt {
						left: 0.5em;
						font-size: 1.1rem;
						letter-spacing: .6em;
					}
				}
			}
		}
		.text {
			font-size: 1.3rem;
			line-height: calc(60 / 26);
			& > * {
				margin-bottom: 1lh;
			}
		}
		.more {
			margin-top: 6rem;
			a {
				width: fit-content;
				margin-inline: auto;
				padding-right: 3rem;
				font-size: 1.4rem;
				&::after {
					top: calc(50% - 1rem);
					right: 0;
				}
			}
		}
	}
}

/* index_hall
====================================================================== */
.index_hall {
	position: relative;
	.index_hall_header {
		padding-block: 16rem 9rem;
		background: url(../img/top/hall_header_bg.png) no-repeat 50%;
		background-size: 160rem;
		z-index: 2;
		@media screen and (max-width: 743px) {
			padding-block: 8rem 5rem;
			background-image: url(../img/top/hall_header_bg_sp.png);
			background-size: 100%;
		}
	}
	.contents {
		display: flex;
		a {
			position: relative;
			display: block;
			padding-bottom: 4rem;
			text-align: center;
			text-decoration: none;
			&::after {
				content: "";
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				height: 2rem;
				background: url(../img/ico-link-arrow.svg) no-repeat 50%;
				background-size: 2rem;
			}
		}
		.ph {
			position: relative;
			&::after {
				content: "";
				position: absolute;
				inset: 0;
				background-color: #323232;
				opacity: 0.5;
				mix-blend-mode: multiply;
				pointer-events: none;
			}
		}
		h3 {
			position: relative;
			padding-top: 3rem;
			font-size: 2.2rem;
			line-height: 1.6;
			font-weight: var(--font-weight-medium);
			&::before {
				content: "";
				position: absolute;
				top: -1.5rem;
				left: 50%;
				height: 3rem;
				border-left: 1px solid var(--color-theme);
				z-index: 3;
			}
		}
		.address {
			margin-top: 1.5rem;
			font-size: 1.4rem;
			line-height: 1.6;
		}
		.tel {
			margin-top: 1rem;
			color: var(--color-theme);
			font-size: 2rem;
			line-height: 1.2;
			.number {
				font-size: 2.8rem;
			}
		}
		@media (hover) {
			.ph::after {
				transition: opacity var(--transition);
			}
			a:hover .ph::after {
				opacity: 0;
			}
		}
		@media screen and (min-width: 744px), print {
			& > * {
				width: 100%;
			}
			.ph {
				padding-top: min(calc(400 / 534 * 100%), 40rem);
			}
		}
		@media screen and (max-width: 743px) {
			flex-direction: column;
			gap: 5em;
			padding-inline: var(--sp-base-padding);
			a {
				padding-bottom: 3.5rem;
			}
			.ph {
				aspect-ratio: 670 / 400;
			}
			h3 {
				position: relative;
				padding-top: 2rem;
				font-size: 1.7rem;
				&::before {
					top: -1rem;
					height: 2rem;
				}
			}
			.address {
				margin-top: 1rem;
				font-size: 1.2rem;
			}
			.tel {
				font-size: 1.5rem;
				.number {
					font-size: 2.3rem;
				}
			}
		}
	}
	.general-guide {
		position: relative;
		max-width: 44rem;
		margin-top: 11rem;
		margin-inline: auto;
		padding-block: 3.5rem 3rem;
		border-top: 1px solid var(--color-theme);
		border-bottom: 1px solid var(--color-theme);
		text-align: center;
		h3 {
			position: absolute;
			right: 0;
			left: 0;
			top: -1px;
			width: fit-content;
			margin-inline: auto;
			padding-inline: 3rem;
			background-color: var(--bg-base);
			font-size: 2.2rem;
			font-weight: var(--font-weight-medium);
			transform: translateY(-50%);
		}
		.tel {
			a {
				color: var(--color-theme);
				font-size: 2rem;
				line-height: 1.2;
				text-decoration: none;
				.number {
					font-size: 2.8rem;
				}
			}
		}
		.tel-note {
			margin-top: 0.8rem;
			font-size: 1.3rem;
		}
		@media screen and (max-width: 743px) {
			max-width: 29.5rem;
			margin-top: 6rem;
			padding-block: 2.5rem 2rem;
			h3 {
				padding-inline: 2rem;
				font-size: 1.7rem;
			}
			.tel {
				a {
					font-size: 1.5rem;
					.number {
						font-size: 2.3rem;
					}
				}
			}
		}
	}
}


/* index_mutual-aid
====================================================================== */
.index_mutual-aid {
	position: relative;
	max-width: 130rem;
	margin-inline: auto;
	margin-top: 10rem;
	&::before {
		content: "";
		position: absolute;
		top: -13rem;
		left: 0;
		right: 0;
		height: 18rem;
		background: url(../img/top/mutual-aid_bg_top.png) no-repeat 50%;
		background-size: 100%;
		pointer-events: none;
		z-index: 2;
	}
	&::after {
		content: "";
		position: absolute;
		left: -4.5rem;
		bottom: -8.6rem;
		width: 14rem;
		height: 14rem;
		background: url(../img/top/bg-circle.png) no-repeat 50%;
		background-size: 100%;
		pointer-events: none;
		z-index: 2;
	}
	.contents_box {
		background-color: rgba(255,255,255,.6);
		clip-path: var(--frame);
	}
	.index_mutual-aid_header {
		display: flex;
		flex-direction: row-reverse;
		.point_v_title {
			margin-inline: 0;
		}
		.lead {
			margin-right: 6rem;
			padding-top: 5.5rem;
			writing-mode: vertical-rl;
			font-size: 1.6rem;
			line-height: calc(40 / 16);
		}
	}
	@media screen and (min-width: 744px), print {
		.contents_box {
			display: flex;
			flex-direction: row-reverse;
			justify-content: space-between;
			padding: 10rem;
		}
	}
	@media screen and (max-width: 743px) {
		margin-top: 8rem;
		&::before {
			top: -5rem;
			left: calc(100% - 8.6rem);
			right: 0;
			height: 10rem;
			background-image: url(../img/top/bg-circle.png);
			background-position: 0;
			background-size: 10rem;
		}
		&::after {
			left: calc(var(--sp-base-padding) + 2.5rem);
			bottom: -5rem;
			width: 8rem;
			height: 8rem;
		}
		.contents_box {
			margin-inline: var(--sp-base-padding);
			padding: 6rem 3rem;
		}
		.index_mutual-aid_header {
			justify-content: center;
			margin-bottom: 2rem;
			.lead {
				margin-right: 3rem;
				padding-top: 4rem;
				font-size: 1.4rem;
				line-height: calc(60 / 28);
			}
		}
	}
}


/* index_pricing
====================================================================== */
.index_pricing {
	position: relative;
	clip-path: inset(0);
	margin-top: 16rem;
	padding-block: 16rem;
	color: #fff;
	.contents_box {
		position: relative;
		max-width: 130rem;
		margin-inline: auto;
		padding: 5rem;
		&::before {
			--c: var(--color-theme);
			--b: 1px;
			--s: var(--frame-s);
			--ss: calc(var(--frame-s) * 2);

			content: "";
			position: absolute;
			inset: 0;
			pointer-events: none;

			background:
				linear-gradient(var(--c) 0 0)
					top center / calc(100% - (var(--s) * 2)) var(--b) no-repeat,
				linear-gradient(var(--c) 0 0)
					bottom center / calc(100% - (var(--s) * 2)) var(--b) no-repeat,

				linear-gradient(var(--c) 0 0)
					center left / var(--b) calc(100% - (var(--s) * 2)) no-repeat,
				linear-gradient(var(--c) 0 0)
					center right / var(--b) calc(100% - (var(--s) * 2)) no-repeat,

				linear-gradient(-45deg,
					transparent calc(50% - (var(--b) / 2)),
					var(--c) 0 calc(50% + (var(--b) / 2)),
					transparent 0)
					top left / var(--s) var(--s) no-repeat,

				linear-gradient(45deg,
					transparent calc(50% - (var(--b) / 2)),
					var(--c) 0 calc(50% + (var(--b) / 2)),
					transparent 0)
					top right / var(--s) var(--s) no-repeat,

				linear-gradient(45deg,
					transparent calc(50% - (var(--b) / 2)),
					var(--c) 0 calc(50% + (var(--b) / 2)),
					transparent 0)
					bottom left / var(--s) var(--s) no-repeat,

				linear-gradient(-45deg,
					transparent calc(50% - (var(--b) / 2)),
					var(--c) 0 calc(50% + (var(--b) / 2)),
					transparent 0)
					bottom right / var(--s) var(--s) no-repeat;
		}
	}
	.index_pricing_header {
		display: flex;
		flex-direction: row-reverse;
		.point_v_title {
			margin-inline: 0;
		}
		.lead {
			margin-right: 6rem;
			padding-top: 5.5rem;
			writing-mode: vertical-rl;
			font-size: 1.6rem;
			line-height: calc(40 / 16);
			& > * + * {
				margin-right: 2em;
			}
		}
	}
	.more {
		a {
			position: relative;
			display: block;
			color: #fff;
			text-decoration: none;
			font-size: 1.8rem;
			&::after {
				content: "";
				position: absolute;
				width: 2rem;
				height: 2rem;
				background: url(../img/ico-link-arrow.svg) no-repeat 50%;
				background-size: 100%;
			}
		}
	}
	.ph {
		display: flex;
		flex-wrap: wrap;
		gap: .2rem;
		li {
			width: calc((100% - .2rem * 3) / 4);
			&:first-child {
				width: 100%;
			}
		}
	}
	@media screen and (min-width: 744px), print {
		.contents_box {
			display: flex;
			flex-direction: row-reverse;
		}
		.index_pricing_header {
			padding-right: 5rem;
			padding-top: 3rem;
		}
		.more {
			padding-top: calc(25.5rem + 5rem);
			margin-right: 4rem;
			a {
				--ls: .2em;
				writing-mode: vertical-rl;
				padding-bottom: 3rem;
				&::after {
					left: calc(50% - 1rem);
					bottom: 0;
				}
				@media (hover) {
					&:hover {
						opacity: 0.5;
					}
				}
			}
		}
		.ph {
			width: 67.8rem;
			margin-right: auto;
		}
	}
	@media screen and (max-width: 743px) {
		margin-top: 8rem;
		padding: 8rem var(--sp-base-padding);
		.contents_box {
			display: flex;
			flex-direction: column;
			padding: 3rem 3rem 5rem;
		}
		.index_pricing_header {
			position: relative;
			justify-content: center;
			margin-bottom: 2rem;
			.lead {
				margin-right: 3rem;
				padding-top: 4rem;
				font-size: 1.4rem;
				line-height: calc(60 / 28);
			}
			&::after {
				content: "";
				position: absolute;
				bottom: -1rem;
				left: -1rem;
				width: 8.5rem;
				height: 3.3rem;
				background: url(../img/top/bg-point.png) no-repeat 50%;
				background-size: 100%;
			}
		}
		.more {
			margin-top: 4rem;
			a {
				width: fit-content;
				margin-inline: auto;
				padding-right: 3rem;
				font-size: 1.4rem;
				&::after {
					top: calc(50% - 1rem);
					right: 0;
				}
			}
		}
		.ph {
			margin-bottom: 4rem;
			order: -1;
		}
	}

}


/* index_news_block
====================================================================== */
.index_news_block {
	position: relative;
	padding-block: 16rem;
	&::before {
		content: "";
		position: absolute;
		inset: 50% 0 0;
		background: linear-gradient(to bottom, var(--bg-base) 20%, var(--color-grad2) 80%);
		z-index: -1;
	}
	@media screen and (min-width: 744px), print {
		&::after {
			content: "";
			position: absolute;
			inset: 0;
			background: url(../img/top/news_img.png) no-repeat 50%;
			background-size: 180rem;
			z-index: -1;
		}
	}
	@media screen and (max-width: 743px) {
		padding: 8rem var(--sp-base-padding);
	}
}

/* index_news
====================================================================== */
.index_news {
	position: relative;
	.news_list {
		li {
			border-bottom: 1px solid #c8c8c8;
		}
		a {
			display: flex;
			text-decoration: none;
			padding-block: 2.2rem;
			font-size: 1.5rem;
			line-height: 1.6;
			.date {
				flex-shrink: 0;
				margin-right: 2rem;
				padding-block: .1rem;
				font-size: 1.3rem;
			}
			.category {
				flex-shrink: 0;
				margin-right: 2rem;
				padding-block: .1rem;
				font-size: 1.3rem;
				color: var(--color-theme);
			}
		}
	}
	.more {
		display: flex;
		justify-content: end;
		margin-top: 2.5rem;
		a {
			position: relative;
			padding-right: 3rem;
			font-size: 1.6rem;
			&::after {
				content: "";
				position: absolute;
				right: 0;
				top: calc(50% - 1rem);
				width: 2rem;
				height: 2rem;
				background: url(../img/ico-link-arrow.svg) no-repeat 50%;
				background-size: 100%;
			}
		}
	}
	@media screen and (min-width: 744px), print {
		max-width: var(--base-width);
		margin-inline: auto;
		display: flex;
		justify-content: space-between;
		.index_news_header {
			width: 30rem;
		}
		.contents {
			width: 85rem;
		}
		.news_list {
			margin-top: -2.2rem;
			a {
				.category {
					min-width: 7.5rem;
					padding-right: 1rem;
					border-right: 1px solid #c8c8c8;
				}
			}
		}
	}
	@media screen and (max-width: 743px) {
		.news_list {
			margin-top: 1rem;
			li:nth-child(n + 4) {
				display: none;
			}
			a {
				flex-wrap: wrap;
				font-size: 1.4rem;
				line-height: calc(51 / 28);
				.date {
					font-size: 1.1rem;
				}
				.category {
					font-size: 1.1rem;
				}
				.title {
					margin-top: 1rem;
					width: 100%;
				}
			}
		}
		.more {
			margin-top: 1.5rem;
			a {
				font-size: 1.4rem;
			}
		}
		&::before {
			content: "";
			position: absolute;
			left: 0;
			top: 0;
			width: 10rem;
			height: 10rem;
			background: url(../img/top/bg-circle.png) no-repeat 50%;
			background-size: 100%;
			pointer-events: none;
		}
		&::after {
			content: "";
			position: absolute;
			left: 2rem;
			bottom: -4rem;
			width: 9rem;
			height: 5rem;
			background: url(../img/top/bg-point.png) no-repeat 50%;
			background-size: 100%;
			pointer-events: none;
		}
	}
}

/* index_bnr
====================================================================== */
.index_bnr {
	margin-top: 10rem;
	display: flex;
	gap: 6rem;
	a {
		display: block;
		text-align: center;
		text-decoration: none;
		background: rgba(255,255,255,.6);
		clip-path: var(--frame);
		.title {
			display: flex;
			justify-content: center;
			align-items: center;
			span {
				font-size: 2.6rem;
				line-height: 2;
				writing-mode: vertical-rl;
			}
		}
		.more {
			position: relative;
			display: block;
			width: fit-content;
			margin-inline: auto;
			padding-block: 3rem;
			padding-right: 3.2rem;
			font-size: 1.6rem;
			line-height: 1.6;
			&::after {
				content: "";
				position: absolute;
				right: 0;
				top: calc(50% - 1rem);
				width: 2rem;
				height: 2rem;
				background: url(../img/ico-link-arrow.svg) no-repeat 50%;
				background-size: 100%;
			}
		}
		@media (hover) {
			&:hover {
				background: rgba(255,255,255,1);
			}
		}
	}
	@media screen and (min-width: 744px), print {
		max-width: var(--base-width);
		margin-inline: auto;
		& > * {
			width: calc((100% - 6rem * 2) / 3);
		}
		a {
			.title {
				height: 22rem;
			}
		}
	}
	@media screen and (max-width: 743px) {
		margin-top: 6rem;
		flex-direction: column;
		gap: 2rem;
		a {
			display: flex;
			flex-wrap: wrap;
			flex-direction: row-reverse;
			background: rgba(255,255,255,.8);
			.title {
				width: 12.5rem;
				background-color: #fff;
				span {
					font-size: 1.6rem;
				}
			}
			.img {
				width: calc(100% - 12.5rem);
			}
			.more {
				padding-block: 2rem;
				font-size: 1.4rem;
			}
		}
	}
}


/* index_article
====================================================================== */
.index_article {
	position: relative;
	clip-path: inset(0);
	overflow: hidden;
	padding-block: 16rem;
	color: #fff;
	&::after {
		content: "";
		position: absolute;
		bottom: 14rem;
		left: calc(50% + 56rem);
		width: 14rem;
		height: 6rem;
		background: url(../img/top/bg-point.png) no-repeat 50%;
		background-size: 100%;
		z-index: 2;
	}
	.fixed_bg {
		&::before {
			content: "";
			position: absolute;
			inset: 0;
			background: linear-gradient(to bottom, var(--color-grad1) 0%, var(--color-grad2) 100%);
			opacity: 0.8;
			mix-blend-mode: multiply;
			z-index: 1;
		}
	}
	.contents_box {
		position: relative;
		max-width: var(--base-width);
		margin-inline: auto;
		z-index: 3;
	}
	.index_article_header {
		display: flex;
		flex-direction: row-reverse;
		.point_v_title {
			margin-inline: 0;
		}
		.lead {
			margin-right: 6rem;
			padding-top: 5.5rem;
			writing-mode: vertical-rl;
			font-size: 1.6rem;
			line-height: calc(40 / 16);
		}
	}
	.article_list {
		display: flex;
		flex-wrap: wrap;
		gap: 3rem 2rem;
		a {
			position: relative;
			display: block;
			background-color: #fff;
			text-decoration: none;
			&::after {
				content: "";
				position: absolute;
				right: 0;
				bottom: 0;
				width: 1.5rem;
				height: 1.5rem;
				background-color: var(--color-theme);
				clip-path: polygon(100% 0, 100% 100%, 0 100%);
				z-index: 3;
			}
			header {
				position: relative;
				padding: 3.5rem 4rem;
				background-color: #f2f2f2;
				font-size: 2rem;
				line-height: 1.6;
				time {
					display: block;
					margin-bottom: 3rem;
					font-size: 1.2rem;
				}
				.ico {
					position: absolute;
					right: 2rem;
					top: 2rem;
					width: 4rem;
				}
			}
			.desc {
				padding: 3rem 4rem 4.5rem;
				font-size: 1.4rem;
				line-height: 2;
			}
		}
	}
	@media screen and (min-width: 744px), print {
		.contents_box {
			display: flex;
			flex-direction: row-reverse;
			align-items: start;
			justify-content: space-between;
		}
		.article_list {
			width: 94rem;
			justify-content: center;
			padding-top: 5.5rem;
			& > * {
				width: calc((100% - 2rem * 2) / 3);
			}
			a {
				height: 100%;
			}
		}
	}
	@media screen and (max-width: 743px) {
		padding: 6rem var(--sp-base-padding) 8rem;
		&::after {
			bottom: auto;
			top: 2rem;
			left: 4.5rem;
			width: 8rem;
		}
		.index_article_header {
			position: relative;
			justify-content: center;
			margin-bottom: 4rem;
			.lead {
				margin-right: 3rem;
				padding-top: 4rem;
				font-size: 1.4rem;
				line-height: calc(60 / 28);
			}
		}
		.article_list {
			flex-direction: column;
			a {
				header {
					padding: 2rem 2.5rem;
					font-size: 1.7rem;
					time {
						margin-bottom: 0.4rem;
						font-size: 1.1rem;
					}
				}
				.desc {
					padding: 1.5rem 2.5rem 2.5rem;
					font-size: 1.2rem;
					line-height: calc(42 / 22);
				}
			}
		}
	}
}