@charset "utf-8";

.p-top__mv {
	/* padding-left: calc(12 * var(--width-ratio)); */
	/* padding-right: calc(12 * var(--width-ratio)); */
	background: url(../img/top-mv-bg.jpg) no-repeat center bottom/cover;
}

.p-top__mv__inner {
	position: relative;
	/* max-width: calc(1020 * var(--width-ratio)); */
	/* max-width: calc(1272 * var(--width-ratio)); */
	margin: 0 auto;
	padding: calc(106 * var(--width-ratio)) calc(48 * var(--width-ratio)) calc(116 * var(--width-ratio));
}

.p-top__mv__inner__box {
	position: relative;
	max-width: calc(720 * var(--width-ratio));
	/* margin: 0 0 0 auto; */
	margin: 0 auto;
	z-index: 2;
}

.p-top__mv__inner__box__catch {
	display: grid;
	grid-template-columns: 55% 1fr;
	column-gap: calc(50 * var(--width-ratio));
	margin-left: calc(-6 * var(--width-ratio));
	/* padding: calc(20 * var(--width-ratio)) calc(16 * var(--width-ratio)) calc(14 * var(--width-ratio)) calc(24 * var(--width-ratio)); */
	padding: 0 calc(10 * var(--width-ratio)) 0 0;
	/* background-color: rgb(255 255 255 / 50%); */
	/* border-radius: calc(4 * var(--width-ratio)); */
	/* box-shadow: 0 calc(4 * var(--width-ratio)) calc(8 * var(--width-ratio)) rgb(0 0 0 / 8%); */
}

.p-top__mv__inner__box__catch__text {
	display: grid;
	grid-template-columns: calc(164 * var(--width-ratio)) 1fr;
	align-items: baseline;
	column-gap: calc(18 * var(--width-ratio));
}

.p-top__mv__inner__box__catch__text__1 {
	font-size: calc(56.9106 * var(--width-ratio));
	line-height: 1.26514217035;
}

.p-top__mv__inner__box__catch__img {
}

.p-top__mv__inner__box__catch__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	row-gap: calc(6 * var(--width-ratio));
	text-align: center;
	margin: auto 0;
}

.p-top__mv__inner__box__catch__link__button {
	width: 100%;
	padding: calc(12.5 * var(--width-ratio)) calc(8 * var(--width-ratio));
	background-color: #D40000;
}

.p-top__mv__inner__box__catch__link__text{
	color:#fff;
}

.p-top__mv__inner__box__search {
	display: flex;
	flex-direction: column;
	row-gap: calc(8 * var(--width-ratio));
	background-color: #fff;
	/* margin-top: calc(34 * var(--width-ratio)); */
	margin-top: calc(20 * var(--width-ratio));
	padding: calc(32 * var(--width-ratio));
	border-radius: calc(4 * var(--width-ratio));
	box-shadow: 0 calc(4 * var(--width-ratio)) calc(8 * var(--width-ratio)) rgb(0 0 0 / 8%);
}

.p-top__mv__inner__box__search__form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: end;
	gap: calc(16 * var(--width-ratio));
}

.p-top__mv__inner__box__search__form__col {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: calc(16 * var(--width-ratio));
	width: calc(100% - ((104 + 16) * var(--width-ratio)));
}

.p-top__mv__inner__box__search__form__submit {
	width: calc(104 * var(--width-ratio));
}

.p-top__mv__inner__box__search__form__submit>.c-button {
	width: 100%;
	padding: calc(12.5 * var(--width-ratio)) calc(24 * var(--width-ratio));
}

.p-top__mv__inner__box__search__form__link {
	font-weight: 700;
	font-size: calc(14 * var(--width-ratio));
	display: flex;
	color:#274875;
}

.p-top__mv__inner__box__search__form__link .c-icon {
	width: calc(20 * var(--width-ratio));
}

.p-top__mv__inner__box__search__banner__list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	column-gap: calc(16 * var(--width-ratio));
	margin-top: calc(16 * var(--width-ratio));
}

.p-top__mv__inner__box__search__banner__list__item {
	width: 100%;
	padding: calc(12.5 * var(--width-ratio)) calc(24 * var(--width-ratio));
}

.p-top__mv__inner__image {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.p-top__mv__inner__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.p-top__recommended {
	padding: calc(40 * var(--width-ratio)) calc(16 * var(--width-ratio)) calc(20 * var(--width-ratio));
}

.p-top__recommended__inner {
	max-width: calc(1020 * var(--width-ratio));
	margin: 0 auto;
}

.p-top__recommended__inner__heading {
	display: flex;
	align-items: center;
	column-gap: calc(16 * var(--width-ratio));
}

.p-top__recommended__inner__heading__main {
	display: flex;
	align-items: center;
	column-gap: calc(8 * var(--width-ratio));
}

.p-top__recommended__inner__heading__main>.c-icon {
	width: calc(32 * var(--width-ratio));
}

.p-top__recommended__inner__heading__main>.c-icon path {
	fill: #7499CC;
}

.p-top__recommended__inner__slider {
	margin-top: calc(20 * var(--width-ratio));
}

.p-top__recommended__inner__link {
	max-width: calc(400 * var(--width-ratio));
	margin: calc(28 * var(--width-ratio)) auto 0;
}

.p-top__recommended__inner__link__button {
	width: 100%;
	margin-top: calc(8 * var(--width-ratio));
	padding: calc(12 * var(--width-ratio)) calc(16 * var(--width-ratio));
	background-color: #D40000;
	border-radius: calc(999 * var(--width-ratio));
}

.p-top__recommended__inner__link__button>.c-icon {
	width: calc(20 * var(--width-ratio));
}

.p-top__recommended__inner__link__button>.c-icon path {
	fill: #fff;
}

.p-top__banner {
	padding: calc(32 * var(--width-ratio)) calc(16 * var(--width-ratio));
}

.p-top__banner__list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: calc(16 * var(--width-ratio));
	max-width: calc(1024 * var(--width-ratio));
	margin: 0 auto;
}

.p-top__banner__list__item:hover {
	opacity: 0.6;
}

.p-top__banner__list__item img {
	width: 100%;
}

.p-top__featured {
	padding: calc(20 * var(--width-ratio)) calc(16 * var(--width-ratio)) calc(40 * var(--width-ratio));
}

.p-top__featured__inner {
	max-width: calc(1020 * var(--width-ratio));
	margin: 0 auto;
}

.p-top__featured__inner__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: calc(32 * var(--width-ratio));
	margin-top: calc(20 * var(--width-ratio));
}

@media screen and (max-width: 767px) {
	.p-top__mv {
		padding: 0;
		background-image: url(../img/top-mv-bg_sp.jpg);
	}

	.p-top__mv__inner {
		padding: calc(24 * var(--width-ratio)) calc(12 * var(--width-ratio)) calc(12 * var(--width-ratio));
	}

	.p-top__mv__inner__box {
		margin: 0 auto;
	}

	.p-top__mv__inner__box__catch {
		grid-template-columns: 1fr;
		row-gap: calc(7 * var(--width-ratio));
		/* width: calc(224 * var(--width-ratio)); */
		/* margin: 0 0 0 auto; */
		/* padding: calc(4 * var(--width-ratio)) calc(12 * var(--width-ratio)) calc(7 * var(--width-ratio)); */
		/* box-shadow: 0 calc(3 * var(--width-ratio)) calc(6 * var(--width-ratio)) rgb(0 0 0 / 8%); */
		margin: auto;
		padding: 0 calc(18 * var(--width-ratio));
		text-align: center;
	}

	.p-top__mv__inner__box__catch__text {
		grid-template-columns: calc(87 * var(--width-ratio)) 1fr;
		column-gap: calc(9 * var(--width-ratio));
	}

	.p-top__mv__inner__box__catch__text__1 {
		font-size: calc(30* var(--width-ratio));
		line-height: 1.26666666667;
	}

	.p-top__mv__inner__box__catch__link{
		width: calc(200 * var(--width-ratio));
		margin: auto;
	}

	.p-top__mv__inner__box__catch__link__button {
		padding: calc(8 * var(--width-ratio));
	}

	.p-top__mv__inner__box__catch__link__text {
		font-weight: 500;
	}

	.p-top__mv__inner__box__search {
		row-gap: calc(16 * var(--width-ratio));
		margin-top: calc(26 * var(--width-ratio));
		padding: calc(16 * var(--width-ratio));
	}

	.p-top__mv__inner__box__search__form__col {
		column-gap: calc(8 * var(--width-ratio));
		width: 100%;
	}

	.p-top__mv__inner__box__search__form__submit {
		width: 100%;
	}

	.p-top__mv__inner__box__search__form__submit>.c-button {
		padding: calc(12 * var(--width-ratio));
	}

	.p-top__mv__inner__box__search__banner__list {
		margin-top: calc(8 * var(--width-ratio));
	}

	.p-top__mv__inner__image {
		height: auto;
	}

	.p-top__recommended {
		padding-top: calc(24 * var(--width-ratio));
		padding-bottom: calc(16 * var(--width-ratio));
	}

	.p-top__recommended__inner__heading {
		flex-direction: column;
		align-items: flex-start;
		row-gap: calc(8 * var(--width-ratio));
	}

	.p-top__recommended__inner__slider {
		margin-top: calc(16 * var(--width-ratio));
	}

	.p-top__recommended__inner__link {
		margin-top: calc(24 * var(--width-ratio));
	}

	.p-top__banner {
		padding-top: calc(24* var(--width-ratio));
		padding-bottom: calc(24* var(--width-ratio));
	}

	.p-top__banner__list {
		grid-template-columns: 1fr;
	}

	.p-top__featured {
		padding-top: calc(16 * var(--width-ratio));
	}

	.p-top__featured__inner__list {
		grid-template-columns: repeat(2, 1fr);
		gap: calc(16 * var(--width-ratio));
		margin-top: calc(16 * var(--width-ratio));
	}

	.p-top__featured__inner__list .c-banner {
		text-align: center;
	}
}