@charset "utf-8";
/* ============================
/* トップ-トレイル
/* ========================= */
.p-cta {
	position: relative;
	padding-block: 11.25rem;
	background-image: url("/img/trail/top/top-cta.jpg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.p-cta::after {
	position: absolute;
	z-index: 0;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	content: "";
	display: block;
	background-color: var(--theme-main);
	opacity: 0.5;
}

.p-cta__inner {
	position: relative;
	z-index: 1;
}

.p-cta__container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}

.p-cta__title {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 3.75rem;
	letter-spacing: 0.1em;
	color: var(--theme-base-reverse-text);
	position: relative;
}

.p-cta__title::before {
	content: "";
	display: block;
	background-image: url("/img/trail/common/trail-angel.webp");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	width: 2.75rem;
	height: 2.8125rem;
	max-width: 100%;
	margin-top: 0.25em;
}

.p-cta__text {
	padding-top: 1.875rem;
	text-align: center;
	font-size: clamp(0.75rem, 0.9375vw, 1.125rem);
	line-height: 2;
	color: var(--theme-base-reverse-text);
}

.p-cta__button {
	padding-top: 3.5rem;
}

.p-cta__button-link {
	display: block;
	border: 0.125rem solid var(--theme-white);
	padding: 2rem 4.5rem;
	font-weight: 700;
	font-size: clamp(1.0625rem, 1.3020833333vw, 1.5625rem);
	line-height: 1.2;
	text-decoration: none;
	color: var(--theme-base-reverse-text);
	-webkit-transition: background-color 0.3s ease, color 0.3s ease;
	transition: background-color 0.3s ease, color 0.3s ease;
}

/* ============================
/* トップ-探す
/* ========================= */

.p-explore {
	padding-block: 8.75rem;
	border-top: 0.125rem solid var(--theme-black);
}

.p-explore__container {
	max-width: 100%;
	margin-inline: auto;
}

.p-explore__cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	justify-content: center;
	gap: 6.8125rem;
}

.p-explore__card {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-align: start;
	-ms-flex-align: start;
	align-items: flex-start;
	gap: 1.0625rem;
}

.p-explore__card-image {
	width: 100%;
	max-width: 45rem;
	height: 35rem;
}

.p-explore__card-image img {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
}

.p-explore__card-content {
	width: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	gap: 2.1875rem;
}

.p-explore__card-title {
	font-weight: 900;
	font-size: 3.125rem;
	line-height: 1.2;
	color: var(--theme-main);
}

.p-explore__card-body {
	padding-top: 0.8125rem;
	border-top: 0.125rem solid var(--theme-black);
	display: grid;
	align-items: center;
	justify-content: space-between;
  grid-template-columns:  minmax(0, 1fr) 10em;
  gap: 1rem;
}

.p-explore__card-body .c-button__link {
  justify-self: flex-end;
}

.p-explore__card-text {
	font-size: clamp(0.75rem, 0.9375vw, 1.125rem);
}

/* ============================
/* トップ-info
/* ========================= */

.p-fv-info {
	width: 100%;
	border-top: 0.125rem solid var(--theme-black);
}

.p-fv-info__container {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	-webkit-box-align: stretch;
	-ms-flex-align: stretch;
	align-items: stretch;
}

.p-fv-info__infomation {
	padding: 2.8125rem 6.25rem 3.4375rem 11.5rem;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 90px;
	align-items: center;
	justify-content: space-between;
	gap: 0.9375rem;
}

.p-fv-info__infomation-body {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-align: start;
	-ms-flex-align: start;
	align-items: flex-start;
	gap: 1.9375rem;
}

.p-fv-info__infomation-title {
	font-weight: 900;
	font-size: 2.5rem;
	line-height: 1.2;
	letter-spacing: 0.1em;
	color: var(--theme-main);
}

.p-fv-info__infomation-content-link {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: start;
	-ms-flex-align: start;
	align-items: flex-start;
	gap: 1.4375rem;
	text-decoration: none;
}

.p-fv-info__infomation-date {
	font-weight: 700;
	font-size: clamp(0.8125rem, 1.0416666667vw, 1.25rem);
	color: var(--theme-main);
}

.p-fv-info__infomation-heading {
	font-size: clamp(0.8125rem, 1.0416666667vw, 1.25rem);
}

.p-fv-info__infomation-btn-link {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	gap: 0.4375rem;
	text-decoration: none;
}

.p-fv-info__infomation-btn-link::before {
	content: "";
	display: block;
	width: 100%;
	max-width: 4rem;
	aspect-ratio: 1/1;
	-webkit-mask-image: url("/img/trail/common/icon-arrow-circle.svg");
	mask-image: url("/img/trail/common/icon-arrow-circle.svg");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	background-color: var(--theme-main);
}

.p-fv-info__infomation-btn-text {
	font-weight: 700;
	font-size: clamp(0.75rem, 0.9375vw, 1.125rem);
	line-height: 1.2;
	letter-spacing: 0.025em;
}

.p-fv-info__map {
	width: 100%;
	border-left: 0.125rem solid var(--theme-black);
	background-color: var(--theme-main);
}

.p-fv-info__map-link {
	height: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	padding-inline: 5.5rem 11.5625rem;
	padding-bottom: 1.625rem;
	-webkit-transition: background-color 0.3s ease;
	transition: background-color 0.3s ease;
	text-decoration: none;
}

.p-fv-info__map-link.is-external::after {
	display: none;
}

.p-fv-info__map-title {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: end;
	-ms-flex-align: end;
	align-items: flex-end;
	gap: 2.1875rem;
	font-weight: 900;
	font-size: 2.5rem;
	line-height: 1.2;
	color: var(--theme-base-reverse-text);
	-webkit-transition: color 0.3s ease;
	transition: color 0.3s ease;
}

.p-fv-info__map-title::after {
	content: "";
	display: block;
	width: 3.3125rem;
	max-width: 100%;
	height: 4.625rem;
	-webkit-mask-image: url("/img/trail/common/icon-map.svg");
	mask-image: url("/img/trail/common/icon-map.svg");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	background-color: var(--theme-white);
	-webkit-transition: background-color 0.3s ease;
	transition: background-color 0.3s ease;
}

.p-fv {
	width: 100%;
}

/* ============================
/* トップ-mv
/* ========================= */

.p-mv {
	position: relative;
	padding-block: 9rem 8.5rem;
	background-image: url("/img/trail/top/mv.webp");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	width: 100%;
	height: 100%;
}

.p-mv::after {
	position: absolute;
	z-index: 0;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	content: "";
	display: block;
	background-color: var(--theme-main);
	opacity: 0.5;
}

.p-mv__container {
	position: relative;
	z-index: 1;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	gap: 6.1875rem;
}

.p-mv__logo {
	width: 100%;
	max-width: 49.5rem;
	height: 33.8125rem;
}

.p-mv__logo img {
	width: 100%;
	height: 100%;
	-o-object-fit: contain;
	object-fit: contain;
}

.p-mv__title {
	text-align: center;
	font-size: clamp(1.625rem, 2.0833333333vw, 2.5rem);
	line-height: 2;
	color: var(--theme-base-reverse-text);
}

@media screen and (max-width: 767px) {

  .p-cta {
    padding-block: 4rem;
  }

  .p-cta__title {
    font-size: 1.875rem;
  }

  .p-cta__text {
    font-size: 1rem;
    padding-top: 1.5rem;
  }

  .p-cta__button {
    padding-top: 2rem;
  }

  .p-cta__button-link {
    padding: 0.75rem 1.5rem;
    font-size: 1.25rem;
  }

  .p-explore {
    padding-block: 4rem;
  }

  .p-explore__cards {
	grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }

  .p-explore__card {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 1rem;
  }

  .p-explore__card-image {
    width: 20.9375rem;
    max-width: 100%;
    height: auto;
  }

  .p-explore__card-content {
    gap: 1rem;
  }

  .p-explore__card-title {
    font-size: 1.5625rem;
  }

  .p-explore__card-body {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.625rem;
    padding-top: 1rem;
  }

  .p-explore__card-text {
    font-size: 1rem;
  }

  .p-explore__card-btn {
    margin-left: auto;
  }

  .p-fv-info__container {
    grid-template-columns: minmax(0, 1fr);
  }

  .p-fv-info__infomation {
	grid-template-columns: minmax(0, 1fr);
	align-items: flex-start;
    padding: 0.75rem 1rem;
  }

  .p-fv-info__infomation-body {
    gap: 0.5rem;
  }

  .p-fv-info__infomation-title {
    font-size: 1.25rem;
  }

  .p-fv-info__infomation-content-link {
    gap: 1rem;
  }

  .p-fv-info__infomation-date {
    font-size: 1rem;
  }

  .p-fv-info__infomation-heading {
    font-size: 1rem;
  }

  .p-fv-info__infomation-btn {
    margin-left: auto;
  }

  .p-fv-info__infomation-btn-link {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
  }

	.p-fv-info__infomation-btn-link::before {
    max-width: 2.5rem;
    width: auto;
    height: 2.5rem;
	}

  .p-fv-info__infomation-btn-text {
    font-size: 1rem;
  }

  .p-fv-info__map {
    border-left: none;
  }

  .p-fv-info__map-link {
    padding: 0.75rem 1rem;
    -webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
  }

  .p-fv-info__map-title {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 1rem;
    font-size: 1.25rem;
  }

  .p-fv-info__map-title::after {
    width: 2.9375rem;
    height: 2.1875rem;
    -webkit-mask-position: center;
            mask-position: center;
  }

  .p-mv {
    padding-block: 2rem 3.625rem;
  }

  .p-mv__container {
    gap: 1rem;
  }

  .p-mv__logo {
    max-width: 23.4375rem;
    height: auto;
  }

  .p-mv__title {
    font-size: 1.25rem;
  }

}

@media (any-hover: hover) {
	/* ============================
	/* トップ-トレイル
	/* ========================= */
  .p-cta__button-link:hover {
    background-color: var(--theme-white);
    color: var(--theme-main);
  }

  /* ============================
  /* トップ-info
  /* ========================= */
  .p-fv-info__map-link:hover {
    background-color: var(--theme-white);
  }

  .p-fv-info__map-link:hover .p-fv-info__map-title {
    color: var(--theme-main);
  }

  .p-fv-info__map-link:hover .p-fv-info__map-title::after {
    background-color: var(--theme-main);
  }

}