@charset "UTF-8";

.pre-inc .mv{
	width: 100%;
	overflow: hidden;
}
.pre-inc .mv-stage{
	position: relative;
	width: 100%;
	aspect-ratio: 3840 / 2160;
	overflow: hidden;
	background: #fff;
}
.pre-inc .mv-pan{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1;
	will-change: transform;
}
.pre-inc .mv-pan picture,
.pre-inc .mv-pan img{
	display: block;
	width: 100%;
}
.pre-inc .mv-name,
.pre-inc .mv-city-layers{
	position: absolute;
	inset: 0;
	pointer-events: none;
}
.pre-inc .mv-name{
	z-index: 2;
	will-change: transform, opacity;
}
.pre-inc .mv-city-layers{
	z-index: 3;
}
.pre-inc .mv-name-bg{
	position: absolute;
	inset: 0;
	opacity: 0;
	will-change: opacity;
}
.pre-inc .mv-name-item{
	position: absolute;
	inset: 0;
	opacity: 0;
	will-change: transform, opacity;
}
.pre-inc .mv-city-layer{
	position: absolute;
	inset: 0;
	opacity: 0;
	will-change: opacity;
}
.pre-inc .mv-name-bg picture,
.pre-inc .mv-name-bg img,
.pre-inc .mv-name-item picture,
.pre-inc .mv-name-item img,
.pre-inc .mv-city-layer picture,
.pre-inc .mv-city-layer img{
	display: block;
	width: 100%;
	height: 100%;
}
@media screen and (max-width:767px){
	.pre-inc .mv-stage{
		aspect-ratio: 768 / 1200;
	}
}

/* =====================================================
  koudou
===================================================== */
.pre-inc .koudou_lead{
	padding: 2.25em 0 1.625em;
}
.pre-inc .koudou_lead p{
	font-size: 3.125em;
	letter-spacing: 0.08em;
	line-height: 1.5;
}
.pre-inc .koudou_lead p strong{
	color: #005498;
	display: block;
	font-size: 0.7em;
}
.pre-inc .koudou_lead p strong span{
	color: #005498;
	font-size: 1.2em;
}
.pre-inc .koudou_lead p strong big{
	font-size: 1.5em;
}
.pre-inc .koudou_lead p strong span{
	font-size: 1.2em;
}
.pre-inc .access{
	position: relative;
	background: url("../img/top/access_bg.webp") no-repeat;
	background-size: cover;
	padding: 5em 0;
}
.pre-inc .route_main{
	text-align: center;
}
.pre-inc .station_route{
	display: inline-block;
	text-align: left;
}
.pre-inc .station_routetext{
	text-align: center;
}
.pre-inc .station_routetext p.note{
	display: inline-block;
	text-align: left;
}
.pre-inc .station_route p{
	font-size: 1.125em;
}
.pre-inc .route_main .station_route .route{
	color: #005498;
	font-size: 3.75em;
	line-height: 1;
	margin: 0.166667em 0;
}
.pre-inc .route_main .station_route .route span{
	font-size: 1.666667em;
	line-height: 0;
}
.pre-inc .route_list{
	text-align: center;
}
.pre-inc .route_list h3{
	font-size: 1.8em;
	margin: 0.5em auto 1.2em;
	letter-spacing: 0.025em;
	background: linear-gradient(90deg, rgb(0 84 152 / 0%), #005498, rgb(0 84 152 / 0%));
	color: #fff;
	max-width: 900px;
}
.pre-inc .route_list h3 span{
	font-size: 1.5625em;
}
.pre-inc .route_list {
  display: block;
}
.pre-inc .routegrid_container{
	display: flex;
	justify-content: center;
}
.pre-inc .routegrid {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 1.875em 3.25em;
}
.pre-inc .griditem {
  text-align: left;
}
.pre-inc .griditem .station_route p{
	font-size: 0.875em
}
.pre-inc .griditem .station_route .route {
	font-size: 2.25em;
	line-height: 1.1;
	letter-spacing: 0.0125em;
}
.pre-inc .griditem .station_route .route span{
	color: #005498;
	font-size: 2.222222em;
	line-height: 0;
}
.pre-inc .griditem .station_route .distance{
	font-size: 0.875em;
	text-align: right;
}

@media (max-width: 768px) {
	.pre-inc .koudou_lead p{
		font-size: 1.3em;
	}
	.pre-inc .station_route p {
		font-size: 1em;
	}
	.pre-inc .route_main .station_route .route {
		font-size: 1.875em;
		line-height: 1.5;
	}
	.pre-inc .station_routetext p.note {
		font-size: 0.7em;
	}
	.pre-inc .route_list h3 {
		font-size: 1.3em;
		padding: 0.2em 0 0.5em 0;
	}
	.pre-inc .griditem .station_route .route {
		font-size: 1.5em;
	}
  .pre-inc .routegrid  {
    grid-template-columns: 1fr;
    gap: 20px 0; 
    text-align: center; 
  }
  .pre-inc .routegrid  .griditem {
    text-align: center;
  }
}

/* =====================================================
  information
===================================================== */
.pre-inc #information{
	padding: 3.125em 0 6.25em;
}
.pre-inc #information .inner {
	max-width: 64em;
	width: 100%;
	margin: 0 auto;
}
.pre-inc #information .inner h2{
	position: relative;
	color: #555555;
	font-size: 3.75em;
	line-height: 0.7;
	letter-spacing: 0.05em;
	margin-bottom: 0.666667em;
}
.pre-inc #information .inner h2::after{
	position: absolute;
	bottom: 0;
	background: #555;
	content: "";
	display: block;
	width: 100%;
	height: 1px;
}
.pre-inc .entry_container{
	text-align: center;
}
.pre-inc .entry_container h3{
	font-size: 3.125em;
	letter-spacing: 30%;
}
.pre-inc .entry_container h3 + p{
	font-size: 1.8em;
}
.pre-inc .entrybtn{
	margin-top: 2.5em;
}
.pre-inc .entrybtn .arwbtn{
	background: linear-gradient(to bottom, #074170, #4c99d8);
	color: #FFF;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	font-size: 2em;
	letter-spacing: 0.05em;
	width: 100%;
	max-width: 11.25em;
	height: 1.875em;
	text-decoration: none;
	margin-right:0.5em;
}
.pre-inc .entrybtn .arwbtn:hover{
	opacity: 0.8;
}
.pre-inc .entrybtn .arwbtn span{
	position: relative;
	display: inline-block;
}
.pre-inc .entrybtn .arwbtn span::after{
	position: absolute;
	bottom: 0.3125em;
	right: -3.125em;
	background: url("../common/img/btnarw.svg") no-repeat bottom right;
	background-size: cover;
	content: "";
	display: block;
	width: 2.5625em;
	height: 0.3125em;
}
.pre-inc .entrybtn .arwbtn02{
	background: linear-gradient(to bottom, #df9c50, #ebca98);
	color: #FFF;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	font-size: 2em;
	letter-spacing: 0.05em;
	width: 100%;
	max-width: 11.25em;
	height: 1.875em;
	text-decoration: none;
	margin-left:0.5em;
}
.pre-inc .entrybtn .arwbtn02:hover{
	opacity: 0.8;
}
.pre-inc .entrybtn .arwbtn02 span{
	position: relative;
	display: inline-block;
}
.pre-inc .entrybtn .arwbtn02 span::after{
	position: absolute;
	bottom: 0.3125em;
	right: -3.125em;
	background: url("../common/img/btnarw.svg") no-repeat bottom right;
	background-size: cover;
	content: "";
	display: block;
	width: 2.5625em;
	height: 0.3125em;
}

@media screen and (max-width: 768px) {
	.pre-inc #information {
		padding: 2em 0 3em;
	}
	.pre-inc #information .inner {
		width: 94%;
	}
	.pre-inc #information .inner h2 {
		font-size: 1.875em;
		margin-bottom: 0.666667em;
	}
	.pre-inc .entry_container h3 {
		font-size: 1.625em;
	}
	.pre-inc .entry_container h3 + p {
		font-size: 1.2em;
	}
	.pre-inc .entrybtn {
		margin-top: 1.25em;
	}
	.pre-inc .entrybtn .arwbtn {
		font-size: 1.5em;
		margin-right:unset;
		margin-bottom:0.5em;
	}
	.pre-inc .entrybtn .arwbtn02 {
		font-size: 1.5em;
		margin-left:unset;
	}
}

/* =====================================================
  ulalaka
===================================================== */
.pre-inc .ulalaka{
	width: 100%;
	overflow: hidden;
}
.pre-inc .ulalaka_mainfflex{
	position: relative;
	display: flex;
	width: 100%;
	overflow: hidden;
}
.pre-inc .ulalaka_main{
	max-width: 1920px;
  margin: 0 auto;
}
.pre-inc .ulalaka_mainfflex .flexitem{
	width: 50%;
	transition-delay: .25s;
	position: relative;
}
.pre-inc .ulalaka_mainfflex .flexitem::after{
	position: absolute;
	bottom: 0;
	content: "";
	display: block;
	background-image: linear-gradient(transparent, #ffffff 90%);
	width: 100%;
	height: 18em;
	z-index: 10;
}
.pre-inc .ulalaka_mainfflex .flexitem img{
	position: relative;
	z-index: -1;
}
.pre-inc .ulalaka_mainfflex figure{
	position: relative;
}
.pre-inc .ulalaka_mainfflex figure figcaption{
	z-index: 30;
	bottom: 20px;
	text-align: right;
}
.pre-inc .ulalaka_mainfflex .flexitem:nth-child(1) figure figcaption{
	text-align: left;
}
.pre-inc .ulalaka_container{
	position: relative;
	margin-top: -5.4375em;
	z-index: 20;
}
.pre-inc .ulalaka_container::before{
	position: absolute;
	top: 0;
	background: url("../img/top/ulalaka_over.webp") no-repeat top center;
	content: "";
	display: block;
	margin-top: -16.25em;
	width: 100%;
	height: calc(100% + 16.25em);
	z-index: 15;
}
.pre-inc .ulalaka_contents{
	display: flex;
	justify-content: space-between;
	width: 100%;
	margin: 0 auto;
}
.pre-inc .ulalaka_contents .contentsleft{
	width: 28.375em;
	margin-right: 10.625em;
}
.pre-inc .ulalaka_contents .contentsright{
	flex: 1;
	margin-right: calc(50% - 50vw);
}
.pre-inc .ulalaka_contents .contentsright h3{
	color: #221815;
	font-size: 2.25em;
	margin: 1.111111em 0;
	line-height: 1.66;
}
.pre-inc .ulalaka_contents .contentsright p{
	font-size: 1em;
	line-height: 2.625
}
.pre-inc .ulalaka_logo{
	margin: 3.125em 0 5em;
}

@media screen and (max-width: 768px) {
	.pre-inc .ulalaka_mainfflex::after {
		height: 50%;
	}
	.pre-inc .ulalaka_container {
		margin-top: 2em;
	}
	.pre-inc .ulalaka_contents {
		display: block;
	}
	.pre-inc .ulalaka_contents .contentsleft {
		width: 100%;
		margin-right: 0;
		text-align: center;
		margin-top: -3em;
	}
	.pre-inc .ulalaka_contents .contentsleft img{
		width: 90%;
	}
	.pre-inc .ulalaka_contents .contentsright h3 {
		font-size: 1.5em;
		margin: 1em 0;
	}
	.pre-inc .ulalaka_contents .contentsright p {
		line-height: 2;
	}
	.pre-inc .ulalaka_mainfflex figure img{
		object-fit: cover;
		height: 250px;
		object-position: 78%;
	}
	.pre-inc .ulalaka_contents .contentsright p{
		font-size: 0.9em;
    padding: 0 0.2em;
	}
	.pre-inc .ulalaka_mainfflex figure figcaption{
		bottom: 28px;
	}
	
}

/* =====================================================
  bottom_note
===================================================== */
.pre-inc .bottom_note{
	padding: 5em 0;
}
.pre-inc .bottom_note .inner{
	padding: 0 5em;
}
.pre-inc .bottom_note p{
	font-size: 0.8125em;
}
@media screen and (max-width: 768px) {
	.pre-inc .bottom_note{
		padding: 2em 0;
	}
	.pre-inc .bottom_note .inner{
		padding: 0 1em;
	}
}