@charset "utf-8";

/* =====================================
	normalize
===================================== */
/* body */
body::before {
	position: absolute;
	display: block;
	width: 100%;
	content: "";
	background: url("../files/bg_home_body_01.jpg") center top;
	background-size: cover;
	z-index: -1;
}
@media (max-width: 1024px) {
	body::before {
		height: 556px;
	}
}
@media (min-width: 1025px) {
	body::before {
		height: 580px;
	}
}

/* =====================================
	main
===================================== */
.main {
	overflow-x: hidden;
}


/* =====================================
	hero
===================================== */
.hero {
	display: grid;
	align-items: center;
}
.hero__heading {
	margin: 0;
	display: grid;
	gap: 10px 0;
	justify-content: center;
	justify-items: center;
}
.hero__text {
	background-color: var(--color-white);
	padding: 0 0.25em;
}
@media (max-width: 1024px) {
	.hero {
		min-height: 500px;
		padding-bottom: 25px;
	}
	.hero__text--small {
   	 	font-size: 1.5rem;
		font-size: min(4vw, 2.6rem);
	}
	.hero__text--large {
   	 	font-size: 2.7rem;
		font-size: min(7.2vw, 4.8rem);
	}
	.hero__kana {
   	 	font-size: min(6.6vw, 4.4rem);
	}
}
@media (min-width: 1025px) {
	.hero {
		min-height: 450px;
		padding-bottom: 80px;
	}
	.hero__text--small {
   	 	font-size: 2.6rem;
		grid-column: 1 / 3;
	}
	.hero__text--large {
   	 	font-size: 4.8rem;
	}
	.hero__text--large:nth-child(2) {
		padding-right: 0;
	}
	.hero__text--large:nth-child(3) {
		padding-left: 0;
	}
	.hero__kana {
   	 	font-size: 4.4rem;
	}
}


/* =====================================
	contents
===================================== */
.contents__inner {
	position: relative;
	z-index: 1;
}
.contents__inner::before {
	position: absolute;
	z-index: -1;
	background: no-repeat;
	background-size: contain;
}
@media (max-width: 768px) {
	.contents--first {
		padding-top: 30px;
	}
	.contents__inner {
		padding-top: 30px;
	}
	.contents__action {
		margin-top: 40px;
	}
}
@media (min-width: 769px) {
	.contents--first {
		padding-top: 60px;
	}
}


/* =====================================
	heading-home
===================================== */
.heading-home {
	margin: 0;
	text-align: center;
	padding: 0 var(--inner-padding);
	background: repeat-x url("../files/bg_heading-home_01.svg") center center;
	z-index: 1;
	position: relative;
}
.heading-home__text {
	background-color: var(--color-white);
	padding: 0 1em;
	display: inline-block;
}
@media (max-width: 768px) {
	.heading-home {
   	 	font-size: 2.2rem;
	}
}
@media (min-width: 769px) {
	.heading-home {
   	 	font-size: 3.5rem;
	}
}
@media (min-width: 1025px) {
	.heading-home__break {
		display: none;
	}
}


/* =====================================
	about
===================================== */
.contents__inner--about::before {
	content: "";
	background-image: url("../files/bg_home_about_01.png");
}
@media (max-width: 768px) {
	.contents__inner--about {
		padding-bottom: 205px;
	}
	.contents__inner--about::before {
		bottom: 40px;
		right: -125px;
		width: 391px;
		height: 255px;
	}
}
@media (min-width: 769px) {
	.contents__inner--about {
		padding-bottom: 150px;
	}
	.contents__inner--about::before {
		bottom: 35px;
		right: -285px;
		width: 628px;
		height: 414px;
	}
	.contents__figure--about {
		padding: 20px;
		display: block;
	}
}


/* =====================================
	how-to
===================================== */
.contents__inner--how-to::before {
	content: "";
	background-image: url("../files/bg_home_how-to_01.png");
}
@media (max-width: 768px) {
	.contents__inner--how-to {
		padding-bottom: 215px;
	}
	.contents__inner--how-to::before {
		bottom: 25px;
		left: -60px;
		width: 384px;
		height: 215px;
	}
}
@media (min-width: 769px) {
	.contents__inner--how-to {
		padding-bottom: 280px;
	}
	.contents__inner--how-to::before {
		bottom: 10px;
		left: -335px;
		width: 715px;
		height: 401px;
	}
}

/* table-multi */
.table-multi {
	width: 100%;
	margin: 20px 0;
	border-spacing: 0;
}
.table-multi > :where(thead, tbody) > tr > :where(td, th) {
	padding: 10px;
	text-align: left;
}
.table-multi > :where(thead, tbody) > tr > th {
	color: var(--color-white);
	border-right: 1px solid var(--color-white);
	border-bottom: 1px solid var(--color-white);
	background-color: var(--color-blue);
}
.table-multi > :where(thead, tbody) > tr > th[scope="col"] {
	background-color: var(--color-turquoise);
}
.table-multi > tbody > tr > td {
	border-right: 1px solid var(--color-light-gray);
	border-bottom: 1px solid var(--color-light-gray);
	background-color: var(--color-white);
}
.table-multi > :where(thead, tbody, tfoot) > tr > :where(td, th) > :first-child {
	margin-top: 0;
}
.table-multi > :where(thead, tbody, tfoot) > tr > :where(td, th) > :last-child {
	margin-bottom: 0;
}

/* table-how-to */
.table-how-to {
	margin: 0;
}
.table-how-to > :where(thead, tbody, tfoot) > tr > :where(td, th) {
	text-align: center;
}
.table-how-to > :where(thead, tbody) > tr > th {
	white-space: nowrap;
}
.table-how-to > tbody > tr > td {
	vertical-align: top;
}
.table-how-to > tfoot > tr > td:has(.table-how-to__service-area) {
	padding-top: 20px;
	border-right: 1px dashed var(--color-light-gray);
	border-left: 1px dashed var(--color-light-gray);
}
.table-how-to > tbody > tr > td > img {
	margin: 10px 0 !important;
}
.table-how-to > tbody > tr > td > .list-disc {
	display: inline-grid;
	margin: 0 auto;
	text-align: left;
}
.table-how-to__service-area {
	position: relative;
	display: block;
	margin: 0 20px;
	padding: 8px 0;
	color: var(--color-white);
	background: var(--color-blue);
}
.table-how-to__service-area::before,
.table-how-to__service-area::after {
	position: absolute;
	top: 0;
	display: block;
	width: 20.5px;
	height: 100%;
	content: "";
	background-color: inherit;
}
.table-how-to__service-area::before {
	left: -20px;
	clip-path: polygon(0 50%, 100% 0, 100% 100%);
}
.table-how-to__service-area::after {
	right: -20px;
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}


/* =====================================
	case
===================================== */
.contents__inner--case::before {
	content: "";
	background-image: url("../files/bg_home_case_01.png");
}
.box--case {
	margin: 40px 0;
}
@media (max-width: 768px) {
	.contents__inner--case {
		padding-bottom: 190px;
	}
	.contents__inner--case::before {
		bottom: -13px;
		right: -127px;
		width: 414px;
		height: 276px;
	}
}
@media (min-width: 769px) {
	.contents__inner--case {
		padding-bottom: 205px;
	}
	.contents__inner--case::before {
		bottom: -35px;
		right: -540px;
		width: 930px;
		height: 620px;
	}
}


/* =====================================
	partner
===================================== */
.contents__inner--partner {
	display: grid;
	gap: 30px 11.7%;
	justify-items: center;
	align-items: center;
}
.contents__text--partner > :first-child {
	margin-top: 0;
}
.contents__text--partner > :last-child {
	margin-bottom: 0;
}
@media (max-width: 768px) {
	.contents__inner--partner {
		padding-bottom: 90px;
	}
	.contents__figure--partner {
		width: 224px;
		padding: 10px;
	}
}
@media (min-width: 769px) {
	.contents__inner--partner {
		padding-bottom: 180px;
		grid-template-columns: 1fr 1fr;
	}
}


/* =====================================
	news
===================================== */
@media (max-width: 768px) {
	.posts-news {
		margin-top: 10px !important;
	}
}