@charset "utf-8";

/* =====================================
	normalize
===================================== */
/* html */
html {
	scroll-behavior: smooth;
	scroll-padding-top: var(--header-height);
}

/* body */
body {
	margin: 0;
	background-color: var(--color-light-navy);
}
@media (max-width: 1024px) {
	body:has(.hamburger[aria-expanded="true"]) {
		overflow: hidden;
	}
	body:has(.hamburger[aria-expanded="true"]) :where(.brand, .main, .footer) {
		visibility: hidden;
	}
}


/* =====================================
	header
===================================== */
/* header */
.header {
	position: sticky;
	z-index: 1000;
	top: 0;
	display: grid;
	gap: 15px;
	grid-template-columns: 1fr auto;
	align-items: center;
	max-width: var(--contents-width);
	min-height: var(--header-height);
	margin: 0 auto;
	padding: 0 var(--contents-padding);
	background-color: var(--color-light-navy);
}

/* brand */
.brand {
	margin: 0;
	font-size: 1.0rem;
}
@media (max-width: 1024px) {
	.brand__image {
		width: 168px;
	}
}

/* hamburger */
.hamburger {
	appearance: none;
	position: relative;
	z-index: 1;
	justify-self: end;
	width: 26px;
	height: 26px;
	padding: 0;
	border: none;
	border-radius: 0;
	background: none;
}
.hamburger__line,
.hamburger__line::before,
.hamburger__line::after {
	position: absolute;
	display: block;
	width: 26px;
	height: 2px;
	content: "";
	transition: top 0.3s, transform 0.3s, background-color 0.3s;
	border-radius: 1px;
	background-color: var(--color-navy);
}
.hamburger__line {
	top: 12px;
	left: 0;
}
.hamburger__line::before {
	top: -6px;
}
.hamburger__line::after {
	top: 6px;
}
.hamburger[aria-expanded="true"] .hamburger__line {
	background-color: transparent;
}
.hamburger[aria-expanded="true"] .hamburger__line::before {
	top: 0;
	transform: rotate(45deg);
}
.hamburger[aria-expanded="true"] .hamburger__line::after {
	top: 0;
	transform: rotate(-45deg);
}
@media (min-width: 1025px) {
	.hamburger {
		display: none;
	}
}

/* navbar */
@media (max-width: 1024px) {
	.navbar {
		position: fixed;
		inset: var(--header-height) 0 0 0;
		display: none;
		overflow-y: auto;
		padding: var(--contents-padding);
		transition: opacity 0.3s, display 0.3s;
		transition-behavior: allow-discrete;
		opacity: 0;
		background-color: var(--color-light-navy);
	}
	.hamburger[aria-expanded="true"] + .navbar {
		display: block;
		opacity: 1;
		@starting-style {
			opacity: 0;
		}
	}
}
@media (min-width: 1025px) {
	.navbar {
		display: grid;
		gap: 15px;
		grid-template-columns: auto auto;
	}
}

/* utility */
.utility {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
	letter-spacing: 0.02em;
	color: var(--color-dark-navy);
	font-size: 1.2rem;
}
.utility__item {
	padding-left: 18px;
	background: no-repeat url("../files/ico_circle-caret_navy_right_01.svg") left center;
}
.utility__link {
	text-decoration: none;
	color: inherit !important;
}
@media (max-width: 1024px) {
	.utility {
		gap: 10px;
		align-items: center;
		flex-direction: column;
		margin-top: 45px;
	}
	.utility--pc {
		display: none;
	}
}
@media (min-width: 1025px) {
	.utility {
		position: absolute;
		top: 5px;
		right: 24px;
		gap: 25px;
	}
	.utility--sp {
		display: none;
	}
}
@media (hover: hover) {
	.utility__link:hover {
		text-decoration: underline;
	}
}

/* global */
.global {
	margin: 0;
	padding: 0;
	list-style: none;
}
.global__link {
	display: inline-flex;
	gap: 9px;
	align-items: center;
	transition: color 0.3s;
	text-decoration: none;
	letter-spacing: 0.02em;
	color: var(--color-dark-gray) !important;
	font-size: 1.4rem;
}
.global__link::after {
	display: block;
	width: 19px;
	height: 19px;
	content: "";
	transition: transform 0.3s;
	background: no-repeat url("../files/ico_circle-arrow_black_down_01.svg") center center;
}
@media (max-width: 1024px) {
	.global {
		display: grid;
		gap: 30px;
		justify-items: center;
	}
}
@media (min-width: 1025px) {
	.global {
		display: flex;
		gap: 25px;
		align-items: center;
		min-height: 51px;
		padding-right: 25px;
		padding-left: 25px;
		border-radius: 25.5px;
		background-color: var(--color-white);
	}
}
@media (hover: hover) {
	.global__link:hover {
		color: var(--color-blue) !important;
		font-weight: 700;
	}
	.global__link:hover::after {
		transform: translateY(3px);
	}
}

/* cta */
.cta__link {
	gap: 9px;
	padding-left: 18px;
	background-color: var(--color-navy);
}
.cta__link::after {
	display: block;
	width: 19px;
	height: 19px;
	content: "";
	transition: transform 0.3s;
	background: no-repeat url("../files/ico_circle-arrow_white_down_01.svg") center center;
}
@media (max-width: 1024px) {
	.cta {
		margin-top: 45px;
		text-align: center;
	}
}
@media (min-width: 1025px) {
	.cta__link {
		min-width: 198px;
		min-width: min(15vw, 198px);
		min-height: 51px;
		border-radius: 25.5px;
	}
}
@media (hover: hover) {
	.cta__link:hover {
		background-color: var(--color-blue);
	}
	.cta__link:hover::after {
		transform: translateY(3px);
	}
}


/* =====================================
	main
===================================== */
/* hero */
.hero {
	max-width: var(--contents-width);
	margin: 0 auto;
	padding: 0 var(--contents-padding);
	background: var(--color-white) no-repeat url("../files/img_hero_01.svg");
}
.hero__inner {
	display: grid;
	align-content: center;
	margin: 0 auto;
}
.hero__heading {
	margin: 0 0 0 15px;
	line-height: 1.425;
	-webkit-text-stroke: 3px var(--color-white);
	paint-order: stroke;
}
.hero__heading-emphasis {
	color: var(--color-navy);
}
.hero__lead {
	display: flex;
	gap: 0.5em;
	align-items: center;
	margin: 20px 0 0 15px;
}
.hero__lead::before,
.hero__lead::after {
	width: 1em;
	height: 1px;
	content: "";
	background-color: var(--color-dark-gray);
}
.hero__point {
	position: relative;
	z-index: 1;
	display: flex;
	margin: 40px 0 0 0;
	padding: 0;
	list-style: none;
	background: no-repeat left center;
	background-size: contain;
}
.hero__point-item {
	display: grid;
	grid-template-rows: auto 1fr;
	justify-items: center;
	aspect-ratio: 1 / 1;
	width: 100%;
	text-align: center;
	color: var(--color-blue);
	font-weight: 700;
	line-height: 1.2125;
}
@media (max-width: 1024px) {
	.hero {
		border-radius: 30px 30px 0 0;
		background-position: right -77px top -68px;
		background-size: min(83vw, 600px) auto;
	}
	.hero__inner {
		max-width: 844px;
		min-height: 486px;
		padding-top: 15px;
	}
	.hero__heading {
		font-size: max(3.6vw, 2.8rem);
	}
	.hero__lead {
		font-size: 1.4rem;
	}
	.hero__point {
		max-width: 360px;
		background-image: url("../files/bg_hero_point_01_sp.svg");
	}
	.hero__point-item {
		gap: 7px;
		padding-top: 6px;
		font-size: 1.4rem;
	}
	.hero__point-item:not(:first-child) {
		margin-left: -11px;
	}
	.hero__point-image {
		width: 75px;
	}
}
@media (min-width: 1025px) {
	.hero {
		border-radius: 50px 50px 0 0;
		background-position: right 58px;
	}
	.hero__inner {
		max-width: 1186px;
		min-height: 654px;
	}
	.hero__heading {
		font-size: min(4.3vw, 5.2rem);
	}
	.hero__lead {
		font-size: 2.0rem;
	}
	.hero__point {
		width: 570px;
		background-image: url("../files/bg_hero_point_01_pc.svg");
	}
	.hero__point-item {
		gap: 10px;
		padding-top: 18px;
		font-size: 1.8rem;
	}
	.hero__point-item:not(:first-child) {
		margin-left: -18px;
	}
}

/* contents */
.contents {
	max-width: var(--contents-width);
	margin: 0 auto;
	padding: 0 var(--contents-padding);
	background-repeat: no-repeat;
	background-position: center top -1px, center bottom -1px;
	background-size: 100% auto, 100% auto;
}
.contents__inner {
	position: relative;
	max-width: var(--contents-inner-width);
	margin: 0 auto;
}
.contents__inner > :first-child {
	margin-top: 0;
}
.contents__inner > :last-child {
	margin-bottom: 0;
}
@media (max-width: 1024px) {
	.contents:not(.solutions):not(.issues) {
		margin-top: 100px;
	}
	.contents__inner:not(.solutions__inner):not(.issues__inner) {
		transform: translateY(-80px);
	}
}

/* contents background */
.solutions {
	background-color: var(--color-navy);
}
.features {
	background-color: var(--color-white);
}
.support {
	background-color: var(--color-blue);
}
.faq {
	background-color: var(--color-white);
}
.contact {
	background-color: var(--color-navy);
}
@media (max-width: 567px) {
	.solutions {
		background-image: url("../files/bg_contents_solutions_top_01_sp.png"), url("../files/bg_contents_solutions_bottom_01_sp.png");
	}
	.features {
		background-image: url("../files/bg_contents_white_top_01_sp.png"), url("../files/bg_contents_white_bottom_01_sp.png");
	}
	.support {
		background-image: url("../files/bg_contents_blue_top_01_sp.png"), url("../files/bg_contents_blue_bottom_01_sp.png");
	}
	.faq {
		background-image: url("../files/bg_contents_white_top_01_sp.png"), url("../files/bg_contents_white_bottom_01_sp.png");
	}
	.contact {
		background-image: url("../files/bg_contents_navy_top_01_sp.png"), url("../files/bg_contents_navy_bottom_01_sp.png");
	}
}
@media (min-width: 568px) {
	.solutions {
		background-image: url("../files/bg_contents_solutions_top_01_pc.png"), url("../files/bg_contents_solutions_bottom_01_pc.png");
	}
	.features {
		background-image: url("../files/bg_contents_white_top_01_pc.png"), url("../files/bg_contents_white_bottom_01_pc.png");
	}
	.support {
		background-image: url("../files/bg_contents_blue_top_01_pc.png"), url("../files/bg_contents_blue_bottom_01_pc.png");
	}
	.faq {
		background-image: url("../files/bg_contents_white_top_01_pc.png"), url("../files/bg_contents_white_bottom_01_pc.png");
	}
	.contact {
		background-image: url("../files/bg_contents_navy_top_01_pc.png"), url("../files/bg_contents_navy_bottom_01_pc.png");
	}
}

/* solutions */
.solutions__lead {
	margin: 0;
	color: var(--color-white);
}
.solutions__figure {
	max-width: var(--contents-inner-width);
	text-align: center;
	border-radius: 20px;
	background-color: var(--color-white);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
}
@media (max-width: 1024px) {
	.solutions {
		padding-top: 40px;
	}
	.solutions__lead {
		display: grid;
		justify-content: center;
		margin-top: -10px !important;
	}
	.solutions__figure {
		margin-top: 40px;
		padding: 15px;
	}
}
@media (min-width: 1025px) {
	.solutions {
		padding-top: 65px;
	}
	.solutions__lead {
		margin-top: -20px !important;
		text-align: center;
	}
	.solutions__figure {
		margin-top: 60px;
		padding: 30px 15px;
	}
}

/* issues */
.issues__heading {
	display: flex;
	gap: 0.5em;
	align-items: center;
	justify-content: center;
	color: var(--color-blue);
	font-weight: 700;
	line-height: 1.425;
}
.issues__heading::before,
.issues__heading::after {
	flex-grow: 0;
	width: 1em;
	height: 2px;
	content: "";
	background-color: var(--color-blue);
}
.issues__heading::before {
	transform: translateY(0.125em) rotate(45deg);
}
.issues__heading::after {
	transform: translateY(0.125em) rotate(-45deg);
}
.issues__list {
	display: flex;
	gap: 23px 35px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.issues__item {
	position: relative;
	width: 100%;
	filter: drop-shadow(0 8px 15px rgba(0, 0, 0, 0.05));
	border-radius: 20px;
	background-color: var(--color-white);
}
.issues__link {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 15px 10px;
	transition: color 0.3s;
	text-decoration: none;
	color: inherit !important;
}
.issues__link::after {
	position: absolute;
	z-index: 1;
	aspect-ratio: 1;
	content: "";
	transition: transform 0.3s;
	border-radius: 50%;
	background: var(--color-white) no-repeat url("../files/ico_circle-arrow_blue_down_01.svg") center center;
}
@media (max-width: 1024px) {
	.issues {
		margin-top: 40px;
	}
	.issues__heading {
		margin-bottom: 30px;
		font-size: 1.7rem;
	}
	.issues__list {
		flex-wrap: wrap;
		padding-bottom: 16px;
	}
	.issues__link {
		flex-wrap: wrap;
		min-height: 66px;
	}
	.issues__link::after {
		bottom: -16px;
		left: calc(50% - 16px);
		width: 32px;
		background-size: 27px;
	}
}
@media (min-width: 1025px) {
	.issues {
		margin-top: 70px;
	}
	.issues__heading {
		margin-bottom: 55px;
		font-size: 3.4rem;
	}
	.issues__list {
		align-items: flex-start;
		padding-bottom: 24px;
	}
	.issues__item:nth-child(2) {
		margin-top: 30px;
	}
	.issues__item::before {
		position: absolute;
		z-index: 1;
		width: 29px;
		height: 61px;
		content: "";
		background: no-repeat url("../files/ico_balloon_01.svg") center center;
		background-size: contain;
	}
	.issues__item:nth-child(1)::before {
		top: -36px;
		right: -21px;
		transform: rotate(45deg);
	}
	.issues__item:nth-child(2)::before {
		top: -45px;
		left: 50%;
		transform: translateX(-50%);
	}
	.issues__item:nth-child(3)::before {
		top: -36px;
		left: -21px;
		transform: rotate(-45deg);
	}
	.issues__link {
		flex-direction: column;
		min-height: 135px;
		font-size: 1.6rem;
	}
	.issues__link::after {
		bottom: -23.5px;
		left: calc(50% - 23.5px);
		width: 47px;
	}
}
@media (hover: hover) {
	.issues__link:hover {
		color: var(--color-blue) !important;
		font-weight: 700;
	}
	.issues__link:hover::after {
		transform: translateY(3px);
	}
}

/* features */
.features__detail {
	display: grid;
	gap: 30px 60px;
}
.features__body > :first-child {
	margin-top: 0;
}
.features__body > :last-child {
	margin-bottom: 0;
}
.features__detail {
	padding-right: 4px;
}
.features__detail:not(:last-of-type) {
	border-bottom: 1px solid var(--color-gray);
}
.features__figure {
	padding: 15px;
	text-align: center;
	border: 1px solid var(--color-light-blue);
	border-radius: 20px;
	background-color: var(--color-white);
	box-shadow: 4px 4px 0 0 var(--color-blue);
}
.features__image {
	width: 500px;
}
@media (max-width: 1024px) {
	.features {
		margin-top: 140px !important;
	}
	.features__detail:first-of-type {
		margin-top: -20px !important;
	}
	.features__detail {
		padding-top: 35px;
	}
	.features__detail:not(:last-of-type) {
		padding-bottom: 35px;
	}
}
@media (min-width: 1025px) {
	.features {
		margin-top: 90px;
		padding-bottom: 220px;
	}
	.features__detail {
		grid-template-columns: 428fr 532fr;
	}
	.features__detail:first-of-type {
		margin-top: -20px !important;
	}
	.features__detail {
		padding-top: 50px;
	}
	.features__detail:not(:last-of-type) {
		padding-bottom: 50px;
	}
}

/* support */
.support__detail {
	display: grid;
	gap: 30px;
	border-radius: 20px;
	background-color: var(--color-white);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
}
.support__body > :first-child {
	margin-top: 0;
}
.support__body > :last-child {
	margin-bottom: 0;
}
@media (max-width: 768px) {
	.support__detail {
		padding: 20px 20px 30px 20px;
	}
}
@media (min-width: 769px) {
	.support__detail {
		grid-template-columns: auto 1fr;
		min-height: 300px;
		padding: 45px 30px;
	}
}
@media (max-width: 1024px) {
	.support {
		padding-bottom: 40px;
	}
	.support__detail:not(:first-of-type) {
		margin-top: 10px;
	}
	.support__figure {
		justify-self: center;
	}
}
@media (min-width: 1025px) {
	.support {
		padding-bottom: 170px;
	}
	.support__detail:not(:first-of-type) {
		margin-top: 20px;
	}
	.support__figure {
		align-self: center;
	}
}

/* faq */
.faq__list {
	margin: 0;
}
.faq__question {
	position: relative;
	color: var(--color-white);
	border-radius: 5px;
	background-color: var(--color-blue);
}
.faq__question:nth-of-type(even) {
	background-color: var(--color-navy);
}
.faq__answer {
	position: relative;
	margin: 0;
}
.faq__en {
	position: absolute;
	top: -4px;
	left: 0;
	text-align: center;
	font-size: 1.8rem;
	font-weight: 700;
}
@media (max-width: 1024px) {
	.faq {
		padding-bottom: 25px;
	}
	.faq__question {
		margin-bottom: 15px;
		padding: 11px 15px 11px 50px;
		font-size: 1.5rem;
	}
	.faq__question:not(:first-of-type) {
		margin-top: 30px;
	}
	.faq__answer {
		padding: 0 15px 0 50px;
	}
	.faq__en {
		width: 50px;
	}
	.faq__question .faq__en {
		top: 7px;
	}
}
@media (min-width: 1025px) {
	.faq {
		padding-bottom: 300px;
	}
	.faq__question {
		margin-bottom: 20px;
		padding: 15px 15px 15px 60px;
		font-size: 1.6rem;
	}
	.faq__question:not(:first-of-type) {
		margin-top: 40px;
	}
	.faq__answer {
		padding: 0 15px 0 60px;
	}
	.faq__en {
		width: 60px;
	}
	.faq__question .faq__en {
		top: 12px;
	}
}

/* contact */
.contact__detail {
	border-radius: 20px;
	background-color: var(--color-white);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
}
.contact__list {
	margin: 0;
}
.contact__detail iframe {
	vertical-align: top;
}
@media (max-width: 1024px) {
	.contact {
		padding-bottom: 35px;
	}
	.contact__detail {
		padding: 25px 20px 45px 20px;
	}
	.contact__list {
		margin-bottom: 25px;
	}
}
@media (min-width: 1025px) {
	.contact {
		padding-bottom: 165px;
	}
	.contact__detail {
		padding: 50px 75px 60px 75px;
	}
	.contact__list {
		margin-bottom: 50px;
	}
}


/* =====================================
	footer
===================================== */
/* footer */
.footer {
	position: relative;
	display: grid;
	gap: 50px;
	justify-items: center;
	max-width: var(--contents-width);
	margin: 0 auto;
	padding: 0 var(--contents-padding) 50px var(--contents-padding);
}
@media (max-width: 1024px) {
	.footer {
		margin-top: -5px;
	}
}
@media (min-width: 1025px) {
	.footer {
		margin-top: -165px;
		padding-top: 85px;
	}
}

/* operation */
@media (min-width: 1025px) {
	.operation__image {
		width: 260px;
	}
}

/* copyright */
.copyright {
	font-size: 1.3rem;
}

/* pagetop */
.pagetop {
	position: absolute;
}
.pagetop__link {
	display: grid;
	place-content: center;
	aspect-ratio: 1 / 1;
	background-color: var(--color-white);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
}
.pagetop__image {
	transition: transform 0.3s;
}
@media (max-width: 1024px) {
	.pagetop {
		right: 0;
		bottom: 0;
	}
	.pagetop__link {
		width: 46px;
		border-top-left-radius: 5px;
	}
}
@media (min-width: 1025px) {
	.pagetop {
		top: 40px;
		right: var(--contents-padding);
	}
	.pagetop__link {
		width: 62px;
			border-radius: 5px;

	}
}
@media (hover: hover) {
	.pagetop__link:hover .pagetop__image {
		transform: translateY(-3px);
	}
}