@charset "utf-8";

:root {
	/* color */
	--base-gray: #e9eef5;
	--base-blue: #00479d;
	--accent: #d60081;

	--white: #ffffff;
	--black: #231815;

	--dark-blue: #003980;

	--light-yellow: #f9f3b7;
	--light-green: #2cb0ae;
	--light-blue: #f9f7f7;
	--light-gray: #767475;

	--yellow: #fff100;
	--orange: #f6ac0b;
	--navy: #132c8d;

	--hover-light-orange: #f9c555;
	--hover-light-green: #40cfcd;

	/* font family */
	--m-plus-rounded-1c: m-plus-rounded-1c, sans-serif;
	--vdl-v7MaruGothic: vdl-v7marugothic, sans-serif;

	/* font weight */
	--regular: 400;
	--medium: 500;
	--bold: 700;
	--heavy: 800;

	/* breakpoint */
	/* @media (480px <= width) {
		--breakpoint-xs: true;
	}
	@media (540px <= width) {
		--breakpoint-sm: true;
	}
	@media (768px <= width) {
		--breakpoint-md: true;
	}
	@media (960px <= width) {
		--breakpoint-md-large: true;
	}
	@media (1024px <= width) {
		--breakpoint-lg: true;
	}
	@media (1280px <= width) {
		--breakpoint-xl: true;
	}
	@media (1440px <= width) {
		--breakpoint-xxl: true;
	}
	@media (1920px <= width) {
		--breakpoint-xxxl: true;
	} */
}

/* 
============================================
common
============================================
*/
html {
	font-size: 62.5%;
}

body {
	font-family: var(--m-plus-rounded-1c);
}

/* button */
.button--primary {
	background: var(--accent);
	color: var(--white);
	font-size: 1.8rem;
	font-weight: var(--medium);

	@media (768px <= width) {
		font-size: 2.4rem;
	}
}

/* cta */
.cta-button_container {
	background: var(--base-gray);
	padding: 64px 0;

	@media (768px <= width) {
		padding: 80px 0;
	}

	.cta-button {
		margin-inline: auto;
		padding: 22px 16px;
		display: flex;
		justify-content: center;
		text-align: center;
		border-radius: 8px;
		width: 260px;
		box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
		transition:
			background-color 0.9s,
			box-shadow 0.2s ease;

		&:hover,
		&:active {
			background: var(--dark-blue);
			opacity: 0.75;
			box-shadow: none;
		}

		@media (768px <= width) {
			padding: 28px 16px;
			width: 368px;
		}
	}

	.cta-button_note {
		margin-top: 16px;
		font-size: 1.6rem;
		font-weight: var(--regular);
		text-align: center;
	}
}

/* program button */
.program_button {
	padding: 16px 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	font-size: 1.6rem;
	font-weight: var(--bold);
	border-radius: 24px;
	width: 74%;
	box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);

	@media (768px <= width) {
		padding: 16px 8px;
		width: 240px;
	}

	span {
		display: inline-block;
		width: 16px;
		height: 16px;
		vertical-align: middle;
	}
}

/* 
============================================
main
============================================
*/
.main_container {
	margin-inline: auto;
}

/* 
============================================
main content
============================================
*/
.main-content {
	background: linear-gradient(to bottom, var(--base-blue) 47.5%, var(--base-gray) 47.5%);
	padding-inline: 8.2%;
	padding-top: 56px;
	display: flex;
	flex-direction: column;
	align-items: center;

	@media (768px <= width) {
		background: linear-gradient(to bottom, var(--base-blue) 72%, var(--base-gray) 72%);
		padding-top: 126px;
	}
}

.main-content_title {
	width: clamp(310px, 83.5vw, 1008px);
}

.main-content_description {
	background: var(--dark-blue);
	margin-top: min(41.5vw, 451px);
	margin-inline: auto;
	padding: 64px 4.1%;
	border-radius: 4px;
	position: relative;
	max-width: 1092px;

	@media (768px <= width) {
		border-radius: 16px;
		padding: 64px 2.5%;
	}

	&::before {
		content: '';
		display: block;
		background: url(../images/mv-main-illustration.svg) no-repeat center center / cover;
		width: 74.8vw;
		height: 39.74vw;
		max-width: 850px;
		max-height: 450px;
		position: absolute;
		top: max(-37.4vw, -420px);
		left: 50%;
		transform: translateX(-50%);
	}

	.main-content_description_title {
		color: var(--white);
		margin-inline: auto;
		font-size: 1.8rem;
		font-weight: var(--bold);
		line-height: 1.5;
		text-align: center;

		@media (768px <= width) {
			font-size: 3.1rem;
		}

		.title_bottom {
			display: block;
			margin-top: 24px;
		}

		.font--l {
			font-size: 2.7rem;

			@media (768px <= width) {
				font-size: 3.9rem;
			}
		}

		.font--vdl {
			font-family: var(--vdl-v7MaruGothic);
		}

		.strong {
			color: var(--yellow);
			font-size: 2.2rem;
			font-weight: var(--heavy);

			@media (768px <= width) {
				font-size: 3.4rem;
			}

			sup {
				font-size: 1.2rem;

				@media (768px <= width) {
					font-size: 1.8rem;
				}
			}
		}
	}

	.main-content_description_text {
		color: var(--white);
		margin-top: 64px;
		font-size: 1.6rem;
		font-weight: var(--bold);
		line-height: 1.5;
		text-align: center;
		font-feature-settings: 'palt' on;

		@media (768px <= width) {
			margin-top: 106px;
			font-size: 2.5rem;
		}

		.font--l {
			font-size: 1.8rem;

			@media (768px <= width) {
				font-size: 2.8rem;
			}
		}

		.font--vdl {
			font-family: var(--vdl-v7MaruGothic);
		}

		.strong {
			font-weight: var(--heavy);
		}
	}

	.flow-chart {
		margin-top: 42px;
		margin-inline: auto;
		max-width: 914px;

		@media (768px <= width) {
			margin-top: 48px;
		}

		.flow-chart_sp_only {
			display: block;

			@media (768px <= width) {
				display: none;
			}
		}

		.flow-chart_pc_only {
			display: none;

			@media (768px <= width) {
				display: block;
			}
		}
	}

	.main-content_note {
		color: var(--white);
		margin-top: 24px;
		padding-left: 1em;
		font-size: 1.2rem;
		line-height: 1.5;
		text-indent: -1em;

		@media (768px <= width) {
			padding-left: 0;
			font-size: 1.6rem;
			text-align: center;
			text-indent: 0;
		}
	}
}

/* 
============================================
program
============================================
*/
.program_container {
	background: var(--white);
	padding: 64px 8.2%;
	margin-inline: auto;
	container: container_query / inline-size;

	@media (768px <= width) {
		padding: 80px 8.2%;
	}
}

.program_title {
	color: var(--base-blue);
	margin-bottom: 40px;
	font-size: 2.6rem;
	font-weight: var(--heavy);
	text-align: center;

	@media (768px <= width) {
		font-size: 2.9rem;
	}
}

.program_description_flex_container {
	display: flex;
	flex-direction: column;
	gap: 56px;
	max-width: 1092px;
	margin-inline: auto;
	container: container_query / inline-size;

	@container container_query (768px <= width) {
		flex-direction: row;
		gap: 40px;
	}
}

.program_description {
	display: flex;
	flex-direction: column;

	@container container_query (768px <= width) {
		flex: 1;
	}
}

.program_description_title_container {
	padding: 32px 16px 8px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	border-radius: 4px;

	@container container_query (768px <= width) {
		padding: 32px 40px 10px;
	}

	.program_description_title {
		padding: 12px;
		align-items: center;
		font-size: 1.9rem;
		font-weight: var(--bold);
		text-align: center;
		line-height: 1.5;
		border: 1px solid;
		border-radius: 4px;
		width: 100%;

		@container container_query (768px <= width) {
			font-size: 2.4rem;
		}
	}

	.program_description_title_text {
		font-size: 1.6rem;
		font-weight: var(--medium);
		text-align: center;
		line-height: 1.5;

		@container container_query (768px <= width) {
			font-size: 1.8rem;

			.nowrap {
				display: none;
			}

			.font-size--s {
				font-size: 1.6rem;
			}

			.font-size--l {
				font-size: 2rem;
			}

			.font-weight--bold {
				font-weight: var(--bold);
			}
		}
	}
}

.program_description_container {
	margin-top: 36px;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	border: 1px solid;
	border-radius: 8px;
	flex: 1;
	min-height: 0;

	@container container_query (768px <= width) {
		margin-top: 24px;
		padding: 24px 40px 32px;
	}

	h4 {
		padding-bottom: 8px;
		display: flex;
		align-items: center;
		gap: 2px;
		font-size: 1.6rem;
		font-weight: var(--heavy);
		border-bottom: 1px solid var(--black);

		&::before {
			content: '';
			display: block;
			width: 13px;
			height: 13px;
		}
	}
}

.program_description_list {
	display: flex;
	flex-direction: column;
	gap: 16px;

	.program_description_list_item {
		display: flex;
		padding-right: 16px;
		gap: 4px;
	}

	.program_description_list_item_num {
		display: block;
		flex: 1;
		width: 23px;
		height: 23px;
		max-width: 23px;
		max-height: 23px;
	}

	.program_description_list_item_text {
		flex: 11.5;
		font-size: 1.6rem;
		font-weight: var(--regular);
		line-height: 1.5;

		.strong {
			font-weight: var(--medium);
		}
	}
}

.program_button_container {
	margin-top: 36px;
	display: flex;
	justify-content: center;

	@media (768px <= width) {
		margin-top: 48px;
	}
}

.program_button {
	transition:
		background-color 0.9s,
		box-shadow 0.5s ease;

	&:hover,
	&:active {
		box-shadow: none;
	}
}

/* program description01 */
.program_description_01 {
	.program_description_title_container {
		background: var(--light-yellow);
	}

	.program_description_title {
		color: var(--light-gray);
		border-color: var(--light-gray);
	}

	.program_description_title_text {
		color: var(--light-gray);
	}

	.program_description_container {
		border-color: var(--orange);

		h4 {
			color: var(--orange);

			&::before {
				background-color: var(--orange);
			}
		}
	}

	.program_description_list_item_text {
		.strong {
			color: var(--orange);
		}
	}

	.program_button {
		color: var(--white);
		background: var(--orange);

		&:hover,
		&:active {
			background: var(--hover-light-orange);
		}
	}
}

/* program description02 */
.program_description_02 {
	.program_description_title_container {
		background: var(--light-green);
	}

	.program_description_title {
		color: var(--white);
		border-color: var(--white);
	}

	.program_description_title_text {
		color: var(--white);
	}

	.program_description_container {
		border-color: var(--light-green);

		h4 {
			color: var(--light-green);

			&::before {
				background-color: var(--light-green);
			}
		}
	}

	.program_description_list_item_text {
		.strong {
			color: var(--light-green);
		}
	}

	.program_button {
		color: var(--white);
		background: var(--light-green);

		&:hover,
		&:active {
			background: var(--hover-light-green);
		}
	}
}

/* 
============================================
information contact
============================================
*/
.information-contact_container {
	background: var(--base-blue);
	padding: 64px 4.1% 48px;

	@media (768px <= width) {
		padding: 104px 8.2% 80px;
	}
}

/* information */
.information_description {
	padding-inline: 4.1%;
	display: flex;
	flex-direction: column;
	position: relative;
	width: 100%;
	container: container_query / inline-size;

	@media (768px <= width) {
		margin-inline: auto;
		padding-inline: 0;
		width: min(74.5vw, 778px);
	}

	&::before {
		content: '';
		background: url(../images/sub-illustration_L.svg) no-repeat center center / cover;
		display: block;
		position: absolute;
		bottom: -6.67vw;
		left: -1%;
		width: 17.95vw;
		height: 23.85vw;

		@media (768px <= width) {
			bottom: 0;
			left: -110px;
			width: 93px;
			height: 118px;
		}
	}

	&::after {
		content: '';
		background: url(../images/sub-illustration_R.svg) no-repeat center center / cover;
		display: block;
		position: absolute;
		bottom: -6.67vw;
		right: -1%;
		width: 17.95vw;
		height: 21.54vw;

		@media (768px <= width) {
			bottom: 0;
			right: -102px;
			width: 92px;
			height: 112px;
		}
	}

	.section-title_sp_only {
		display: block;

		@media (768px <= width) {
			display: none;
		}
	}

	.section-title_pc_only {
		display: none;

		@media (768px <= width) {
			display: block;
		}
	}
}

.information_credit-union_logo_container {
	background: var(--white);
	margin-top: -1px;
	padding: 16px 8.21vw;
	border-radius: 0 0 8px 8px;

	@media (768px <= width) {
		padding: 4px 64px 10px;
	}

	.credit-union_logo_sp_only {
		display: block;

		@media (768px <= width) {
			display: none;
		}
	}

	.credit-union_logo_pc_only {
		display: none;

		@media (768px <= width) {
			display: block;
		}
	}
}

.information_text {
	color: var(--white);
	margin-top: 9.23vw;
	margin-inline: auto;
	padding-inline: 8.2%;
	font-size: 1.8rem;
	font-weight: var(--medium);
	line-height: 1.5;
	text-align: justify;
	max-width: 1012px;

	@media (768px <= width) {
		margin-top: 24px;
		padding-inline: 0;
		font-size: 2.3rem;
		line-height: 1.5;
		text-align: center;
	}
}

/* contact */
.contact_container {
	background: var(--base-gray);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin-top: 40px;
	margin-inline: auto;
	padding: 48px 4.1%;
	border-radius: 8px;
	max-width: 1092px;

	@media (768px <= width) {
		margin-top: 72px;
		padding: 48px 64px;
	}

	@media (1024px <= width) {
		flex-direction: row;
		align-items: center;
	}
}

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

	@media (1024px <= width) {
		align-items: flex-start;
		gap: 40px;
	}
}

.contact_title {
	color: var(--base-blue);
	display: flex;
	flex-direction: column;
	gap: 16px;
	font-size: 1.8rem;
	line-height: 1.5;
	text-align: center;

	@media (768px <= width) {
		font-size: 2.4rem;
	}

	.strong {
		font-weight: var(--bold);
		font-size: 2rem;

		@media (768px <= width) {
			font-size: 2.6rem;
		}
	}

	@media (768px <= width) {
		.nowrap {
			display: none;
		}
	}
}

.contact_text {
	color: var(--black);
	margin-top: 48px;
	font-size: 2rem;
	font-weight: var(--bold);
	text-align: center;

	@media (768px <= width) {
		font-size: 2.9rem;
	}

	@media (1024px <= width) {
		margin-top: 0;
		text-align: left;
		order: 1;
	}
}

.contact_text_sp_only {
	display: block;

	@media (768px <= width) {
		display: none;
	}
}

.contact_button {
	margin-top: 24px;
	margin-inline: auto;
	padding: 24px 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	font-size: 2rem;
	border-radius: 8px;
	width: 80%;
	box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);

	transition:
		background-color 0.9s,
		box-shadow 0.2s ease;

	&:hover,
	&:active {
		background: var(--dark-blue);
		opacity: 0.75;
		box-shadow: none;
	}

	@media (768px <= width) {
		padding: 32px 8px;
		font-size: 2.4rem;
		width: 312px;
	}

	@media (1024px <= width) {
		margin-inline: 0;
		margin-left: auto;
		margin-right: 24px;
	}

	span {
		display: inline-block;
		width: 24px;
		height: 24px;
		vertical-align: middle;
	}
}

.contact_button_sp_only {
	display: flex;

	@media (768px <= width) {
		display: none;
	}

	& + .cta-button_note {
		display: block;
		margin-top: 16px;
		font-size: 1.6rem;
		text-align: center;

		@media (768px <= width) {
			display: none;
		}
	}
}

.contact_cta-button_container_pc_only {
	display: none;

	@media (768px <= width) {
		background: var(--base-blue);
		margin-inline: auto;
		margin-top: 40px;
		padding: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.contact_button {
		@media (768px <= width) {
			margin: 0;
		}
	}

	.cta-button_note {
		@media (768px <= width) {
			color: var(--white);
		}
	}
}

/* 
============================================
footer
============================================
*/
.footer_top {
	background: var(--navy);
	color: var(--white);
	padding: 40px 0;
	font-size: 2rem;
	font-weight: var(--bold);
	text-align: center;
	line-height: 1.5;
	container: container_query / inline-size;

	@container container_query (width >= 768px) {
		.nowrap {
			display: none;
		}
	}

	@media (768px <= width) {
		font-size: 2.6rem;
	}
}

.footer_bottom {
	background: var(--base-gray);
	color: var(--black);
	padding: 40px 0 64px;

	@media (768px <= width) {
		padding: 40px 0 56px;
	}

	small {
		display: block;
		font-size: 1.2rem;
		font-weight: var(--regular);
		text-align: center;
	}
}