@charset "utf-8";
/*-----------------------------------------------------*/
/* 基本設定
/*-----------------------------------------------------*/
* {
	margin: 0;
	box-sizing: inherit;
}
*, ::before, ::after {
    box-sizing: inherit;
}
/* 10pxなら1remで指定（16pxなら1.6rem） */
html {
	font-size: 62.5%;
}
body {
	font-family: "Noto Sans JP", sans-serif;
	box-sizing: border-box;
}
img {
	max-width: 100%;
	display: block;
	height: auto;
}
a {
	display: inline-block;
}
/*-----------------------------------------------------*/
/* メインコンテンツと改行のスタイル
/*-----------------------------------------------------*/
.container {
    background-color: #2b80a8;
	color: #ffffff;
	font-family: "Zen Maru Gothic", sans-serif;
	letter-spacing: 0.125em;
}
.wrapper {
	padding-inline: clamp(2.5rem, 3.325vw - 0.053rem, 5rem);
}
.tb-br, .sp-br {
	display: none;
}
@media screen and (max-width: 767px) {
	.wrapper {
		padding-inline: clamp(1.6rem, 8.673vw - 1.652rem, 5rem);
	}
	.tb-br {
		display: block;
	}
}
@media screen and (max-width: 400px) {
	.sp-br {
		display: block;
	}
}
/*-----------------------------------------------------*/
/* セクションタイトルのスタイル
/*-----------------------------------------------------*/
.section-title {
	font-size: 4.8rem;
	margin: 0 auto;
	position: relative;
	z-index: 2;
	white-space: nowrap;
	margin-bottom: 6rem;
}
.section-title::after {
	content: "";
	position: absolute;
	z-index: 1;
	width: calc(300 / 48 * 1em);  /* 300px 相当 */
  	height: calc(90 / 48 * 1em);  /* 90px 相当 */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.about__title.section-title::after {
	background-image: url(images/ABOUT.png);
}
.plan__title.section-title::after {
	background-image: url(images/PLAN.png);
}
.point__title.section-title::after {
	background-image: url(images/POINT.png);
}
@media screen and (max-width: 1024px) {
	.section-title {
		font-size: 4.2rem;
	}
}
@media screen and (max-width: 767px) {
	.section-title {
		font-size: clamp(2.4rem, 4.592vw + 0.678rem, 4.2rem);
		margin: 0 auto;
		margin-bottom: 6rem;
		margin-bottom: calc(50 / 42 * 1em);
	}
}
/*-----------------------------------------------------*/
/* MVのスタイル
/*-----------------------------------------------------*/
.mv {
    width: 100%;
}
.mv__inner {
	font-size: clamp(5.5rem, 7.314vw - 0.117rem, 11rem);
	padding-inline: 5rem;
	padding-bottom: calc(100 / 110 * 1em);
}
.mv__content {
	position: relative;
	max-width: 1400px;
	margin: 0 auto;
}
.mv__theme {
	font-size: clamp(5.5rem, 7.314vw - 0.117rem, 11rem);
	margin: 0 auto;
	position: absolute;
	top: 20%;
	right: 9%;
	z-index: 2;
	white-space: nowrap;
}
.mv__theme::after {
	content: "";
	position: absolute;
	z-index: 1;
	width: calc(525 / 110 * 1em);  /* 600px 相当 */
  	height: calc(165 / 110 * 1em);  /* 165px 相当 */
	background-image: url(images/TWOSOME-GUARANTEE.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.mv__text {
	position: absolute;
	font-size: clamp(2rem, 2.66vw - 0.043rem, 4rem);
	font-weight: bold;
}
.mv__text:first-of-type {
	top: 50%;
	right: 28%;
}
.mv__text:nth-of-type(2) {
	top: 60%;
	right: 14%;
}
.mv__text:last-of-type {
	display: none;
}
.mv__image {
	width: 100%;
	max-width: 1400px;
	margin: 0 auto;
}
.mv__image:first-of-type {
	display: block;
}
.mv__image:last-of-type {
	display: none;
}
@media screen and (max-width: 767px) {
	.mv__inner {
		padding-inline: clamp(1.6rem, 2.296vw + 0.739rem, 2.5rem);
		padding-top: 14rem;
		padding-bottom: calc(8rem / 76.7rem * 100vw);
	}
	.mv__theme {
		top: -8rem;
		left: 50%;
		right: auto;
		transform: translateX(-50%);
		font-size: 10rem;
	}
	.mv__image:first-of-type {
		display: none;
	}
	.mv__image:last-of-type {
		display: block;
	}
	.mv__text {
		font-size: 3.6rem;
	}
	.mv__text:first-of-type {
		top: 81%;
		right: 25%;
		display: none;
	}
	.mv__text:nth-of-type(2) {
		top: 90%;
		right: 2%;
		display: none;
	}
	.mv__text:last-of-type {
		display: block;
		width: 100%;
		font-size: 3.6rem;
		top: -11.5rem;
		left: 50%;
		transform: translateX(-50%);
	}
}
@media screen and (max-width: 640px) {
	.mv__inner {
		padding-top: calc(20rem / 64rem * 100vw);
	}
	.mv__theme {
		font-size: clamp(4.8rem, 12.453vw + 0.13rem, 8.1rem);
		top: -30%;
	}
	.mv__text:last-of-type {
		font-size: clamp(2rem, 3.396vw + 0.726rem, 2.9rem);
		top: -38%;
	}
}
/*-----------------------------------------------------*/
/* ABOUTのスタイル
/*-----------------------------------------------------*/
.about {
	width: 100%;
}
.about__inner {
	width: 100%;
	padding-bottom: clamp(0rem, 7.713vw - 5.923rem, 5.8rem);
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	grid-template-rows: 19rem auto;
	align-items: center;
	place-items: center;
	gap: 0;
	margin: 0 auto;
	max-width: 1920px;
}
.about__desc {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: auto;
	max-width: 910px;
	width: 50%;
	max-width: 100%;
}
.about__title {
	grid-column: 1 / 2;
	grid-row: 1 / 2;
	padding-bottom: 0;
}
.about__text {
	font-size: clamp(2rem, 0.532vw + 1.591rem, 2.4rem);
	font-weight: bold;
	line-height: 2em;
	text-align: start;
	width: 87%;
	grid-column: 1 / 2;
	grid-row: 2 / 3;
	align-self: start;
}
.about__text-highlight {
	color: #ffc510;
	padding: 0;
}
.about__image-box {
	width: 100%;
	grid-column: 2 / 3;
	grid-row: 1 / 3;
	justify-self: end;
}
.about__image {
	width: 100%;
}
@media screen and (max-width: 1520px) {
	.about__inner {
		grid-template-columns: 1fr 1fr;
	}
}
@media screen and (max-width: 1024px) {
	.about__inner {
		grid-template-rows: auto auto;
	}
	.about__title {
		grid-column: 1 / 3;
	}
	.about__text {
		align-self: center;
	}
	.about__image-box {
		grid-row: 2 / 3;
		align-self: center;
	}
}
@media screen and (max-width: 767px) {
	.about__inner {
		display: flex;
		flex-direction: column;
	}
	.about__image:last-child {
		display: block;
	}
	.about__text {
		width: 100%;
		font-size: clamp(1.6rem, 1.02vw + 1.218rem, 2rem);
		font-weight: normal;
		padding-bottom: calc(40 / 20 * 1em);
	}
	.about__text-highlight {
		font-weight: bold;
	}
}
/*-----------------------------------------------------*/
/* PLANのスタイル
/*-----------------------------------------------------*/
.plan {
	width: 100%;
	color: #333333;
	padding-bottom: 8rem;
}
.plan__inner {
	width: 100%;
	height: 1142px;
	max-width: 1857px;
	background-image: url(images/plan__bk.png);
	background-repeat: no-repeat;
	background-position: top;
	/* background-size: 100%; */
	padding-top: 21rem;
}
.plan__content {
	max-width: 1360px;
	margin: 0 auto;
}
.plan__image {
	position: relative;
	max-width: 400px;
	min-width: 300px;
	height: auto;
	width: calc(40rem / 126rem * 100%);
	margin-top: 12.5rem;
	margin-left: 5rem;
	background-image: url(images/green.png);
	background-size: 100%;
	background-repeat: no-repeat;
	height: 17rem;
}
.plan__image-ball {
	position: absolute;
	top: 35%;
	left: 20%;
	transform: translate(-50%, -50%);
}
@media screen and (min-width: 1921px) {
	.plan__inner {
		margin: 0 auto;
	}
}
@media screen and (max-width: 767px) {
	.plan__inner {
		overflow: hidden;
		background-image: url(images/plan__bk-tb2.png);
		background-repeat: no-repeat;
		background-position: top;
		background-size: cover;
		height: 120rem;
		margin-top: 8rem;
		padding-top: 0;
	}
	.plan__title {
		position: relative;
		top: auto;
		left: auto;
		transform: none;
		margin-top: clamp(12.5rem, 9.434vw + 8.962rem, 15rem);
	}
	.plan__image {
		width: 40%;
		min-width: auto;
		max-width: none;
		margin-top: 3.5rem;
		margin-left: 50%;
		height: clamp(7.5rem, 24.235vw - 1.588rem, 17rem);
	}
	.plan__image-ball {
		top: 28%;
	}
	.plan__tab {
		position: static;
		transform: none;
		top: auto;
		left: auto;
	}
}
@media screen and (max-width: 640px) {
	.plan__image {
		width: 50%;
	}
	.plan__image-ball {
		top: clamp(3rem, 7.547vw + 0.17rem, 5rem);
		width: 10%;
	}
	.plan__inner {
		height: 130rem;
	}
}
@media screen and (max-width: 500px) {
	.plan__inner {
		height: 124rem;
	}
}
/*-----------------------------------------------------*/
/* 今回仕様のエリアタブのスタイル
/*-----------------------------------------------------*/
.area-tabs {
	background-color: #f4f5f7;
	margin-top: 0;
	padding: 0;
	width: 100%;
	max-width: calc(1260px + 100px);
}
.tab-list {
	font-size: 2.4rem;
}
.prefecture-blocks {
	font-size: 2.4rem;
	border-radius: 0 0 3rem 3rem;
	height: auto;
}
@media screen and (max-width: 767px) {
	.area-tabs {
		width: 98%;
		padding: 0;
		/* padding-inline: clamp(1.6rem, 2.296vw + 0.739rem, 2.5rem); */
	}
	.prefecture-blocks {
		border-radius: 3rem 3rem 3rem 3rem;
	}
	.prefecture-blocks .prefecture-grid.active {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media screen and (max-width: 640px) {
	.prefecture-blocks {
		font-size: clamp(1.6rem, 0.755vw + 1.317rem, 1.8rem);
	}
	.prefecture-blocks .prefecture-grid.active {
		grid-template-columns: 1fr;
	}
	.tab-list {
		grid-template-columns: repeat(2, 1fr);
		font-size: clamp(1.8rem, 0.755vw + 1.517rem, 2rem);
	}
}
/*-----------------------------------------------------*/
/* POINTのスタイル
/*-----------------------------------------------------*/
.point {
	width: 100%;
}
.point__inner {
	max-width: 1520px;
	margin: 0 auto;
	padding-bottom: 20rem;
}
.point__list {
	display: flex;
	flex-direction: column;
	gap: 5rem;
}
.point__item {
	display: flex;
	align-items: flex-start;
}
.point__item:first-of-type {
	flex-direction: row;
}
.point__item:nth-of-type(2) {
	flex-direction: row-reverse;
	align-items: center;
}
.point__item:last-of-type {
	flex-direction: row;
	align-items: center;
}
.point__desc {
	position: relative;
    z-index: 2;
    width: 44.5%;
    max-width: 632px;
    text-align: start;
    border: 0.3rem solid #ffffff;
    border-radius: 4.4rem;
	font-size: clamp(2.2rem, 1.33vw + 1.178rem, 3.2rem);;
	padding-inline: calc(40 / 32 * 1em);
	padding-block: calc(35 / 32 * 1em);
}
.point__item:first-of-type .point__desc {
	position: relative;
    z-index: 2;
    top: 3rem;
    left: 3rem;
}
.point__item:nth-of-type(2) .point__desc {
	position: relative;
    z-index: 2;
    top: 8.5rem;
    right: 3rem;
}
.point__item:last-of-type .point__desc {
	position: relative;
    z-index: 2;
    top: 23rem;
    left: 5rem;
}
.point__heading {
    font-size: clamp(2.2rem, 1.33vw + 1.178rem, 3.2rem);
    font-weight: bold;
	line-height: 1.5em;
	padding-bottom: calc(48 / 32 * 1em);
}
.point__text {
    font-size: clamp(1.8rem, 0.532vw + 1.391rem, 2.2rem);
	line-height: 1.5em;
}
.point__image-box {
    flex: 1;
    display: flex;
	width: 77.8rem;
	height: auto;
}
.point__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
@media screen and (max-width: 1024px) {
	.point__item:first-of-type .point__desc {
		top: 0;
	}
	.point__item:nth-of-type(2) .point__desc {
		top: 0;
		right: 2rem;
	}
	.point__item:last-of-type .point__desc {
		top: 0;
		left: 3rem;
	}
}
@media screen and (max-width: 980px) {
	.point__list {
		gap: 8rem;
	}
}
@media screen and (max-width: 767px) {
	.point__inner {
		padding-bottom: 10rem;
	}
	.point__list {
		gap: 8rem;
	}
	.point__item:first-of-type {
		flex-direction: column-reverse;
	}
	.point__item:nth-of-type(2) {
		flex-direction: column-reverse;
	}
	.point__item:last-of-type {
		flex-direction: column-reverse;
	}
	.point__item:first-of-type .point__desc {
		left: 0;
	}
	.point__item:nth-of-type(2) .point__desc {
		right: 0;
	}
	.point__item:last-of-type .point__desc {
		left: 0;
	}
	.point__desc {
		width: 100%;
		max-width: none;
		padding-inline: 2rem;
		margin: 0 auto;
		margin-top: calc(30 / 24 * 1em);
	}
	.point__heading {
		text-align: center;
		font-size: clamp(1.8rem, 1.531vw + 1.226rem, 2.4rem);
		padding-bottom: calc(30 / 24 * 1em);
	}
	.point__text {
		font-size: clamp(1.6rem, 1.02vw + 1.218rem, 2rem);
	}
	.point__image-box {
		width: 100%;
		justify-content: center;
	}
	.point__image {
		width: 100%;
		align-items: center;
	}
}
@media screen and (max-width: 640px) {
	.point__desc {
		padding-inline: 4vw;
	}
}
/*-----------------------------------------------------*/
/* 今回仕様のフッターのスタイル
/*-----------------------------------------------------*/
#footer {
    margin-top: 0;
}