@charset "shift_jis";

/* CSS Document */
/*全ページ共通項目*/
img {
	border: 0;
}


/*-----------------------------------top移管-----------------------------------------*/

/*--css変数--*/
:root {
	--txt_motion: txt_motion 2s steps(2, end) infinite;
	--txt_motion02: txt_motion02 2s steps(2, end) infinite;
	--slideInFromBottom: slideInFromBottom 0.5s forwards;
}

/*--/css変数--*/

/*---scroll--*/

.fadein_l {
	opacity: 0;
	transition: 1.5s;
	transform: translate(-50px, 0);
}

.fadein_l.fade_in_l,
.fadein_r.fade_in_r {
	opacity: 1;
	transform: translate(0px, 0);
}

.fadein_r {
	opacity: 0;
	transition: 1.5s;
	transform: translate(50px, 0);
}

.scalein {
	opacity: 0;
	transition: 0.8s;
	transform: scale(0);
}

.scalein.scale_in {
	opacity: 1;
	transform: scale(1);
}

.fadein {
	opacity: 0;
	transition: 1.5s;
	transform: translate(0, 50px);
}

.fadein.fade_in {
	opacity: 1;
	transform: translate(0px, 0);
}

/*---/scroll--*/

/*--tokusen--*/

.tokusen_box {
	display: flex;
	position: relative;
	height: 410px;

	& li {
		width: 336px;
		position: relative;
		margin-right: 30px;
		z-index: 5;
		transition-duration: .3s;
		height: 430px;

		&:hover {
			background-color: #EEF7F9;
			border-radius: 10px;
			box-sizing: border-box;
		}

		&:last-child {
			margin-right: 0;
		}

	}

	&::before {
		width: 1130px;
		height: 410px;
		background-color: #fff;
		content: "";
		display: block;
		border-radius: 20px;
		position: absolute;
		left: 0;
		right: 0;
		margin: 0 auto;
		top: -35px;
		z-index: 1;
	}

	&::after {
		width: 299px;
		height: 318px;
		background: url(../img/new_top/n_housuke02.webp)no-repeat;
		content: "";
		display: block;
		position: absolute;
		margin: 0 auto;
		left: 520px;
		right: 0;
		top: -283px;
		z-index: 0;
	}

}

.n_tokusen_link {
	position: absolute;
	width: 100%;
	height: 100%;
	padding: 10px;
	box-sizing: border-box;
}

.tokusen_img {}

.tokusen_img img {
	border-radius: 50px 5px 50px 5px;
	width: 316px;
	height: 246px;
	object-fit: cover;
}

.tokusen_syubetu {
	width: 125px;
	height: 34px;
	box-sizing: border-box;
	border: 2px solid #f29518;
	background-color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	font-weight: bold;
	color: #f29518;
	position: absolute;
	margin: 0 auto;
	left: 0;
	right: 0;
	top: 250px;
}

.tokusen_kakaku {
	font-size: 20px;
	font-weight: bold;
	margin-top: 35px;
	display: flex;

	& .n_color01 {
		color: #b01717;
	}

	& .n_madori {
		font-size: 17px;
		color: #f29518;
		font-weight: bold;
		display: block;
		margin: 0 20px;
	}

}

.tokusen_eki {
	margin: 15px 0;
	font-size: 18px;
	font-weight: bold;
}

.tokusen_txt {
	font-size: 15px;
	font-weight: bold;
	line-height: 1.5;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}


/*--/tokusen--*/

/*--tokusen02--*/
.tokusen02_box {
	display: flex;
	position: relative;
	flex-wrap: wrap;
	width: 950px;
	margin: 0 auto;

	& li {
		width: 220px;
		position: relative;
		margin-right: 23px;
		margin-bottom: 20px;
		z-index: 5;
		height: 280px;
	}

	& li:nth-child(4n) {
		margin-right: 0;
	}


	& li a:hover .tokusen02_img img {
		transform: scale(1.1);
	}

}

.n_tokusen_link02 {
	position: absolute;
	width: 100%;
	height: 100%;
}

.tokusen02_img {
	border-radius: 50px 5px 50px 5px;
	overflow: hidden;
	height: 168px;
	width: 220px;
	display: block;
}

.tokusen02_img img {
	object-fit: cover;
	height: 168px;
	width: 100%;
	transition-duration: .4s;
}

.tokusen02_syubetu {
	width: 87px;
	height: 21px;
	box-sizing: border-box;
	border: 2px solid #20A8FC;
	background-color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	font-weight: bold;
	color: #20A8FC;
	position: absolute;
	margin: 0 auto;
	left: 0;
	right: 0;
	top: 155px;
}

.tokusen02_kakaku {
	font-size: 14px;
	font-weight: bold;
	margin-top: 15px;
	display: flex;
	color: #B01717;
	align-items: center;

	& .n_txt_size {
		font-size: 17px;
	}

	& .n_madori {
		font-size: 10px;
		color: #20A8FC;
		font-weight: bold;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 0 10px;
		width: 55px;
		height: 20px;
		background-color: #fff;
		box-sizing: border-box;
		border-radius: 5px;
	}

}

.tokusen02_eki {
	margin: 10px 0;
	font-size: 14px;
	font-weight: bold;
}

.tokusen02_txt {
	font-size: 12px;
	font-weight: bold;
	line-height: 1.5;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

/*--/tokusen02--*/

/*--main--*/
.main_wrap {
	background: url(../img/new_top/main_bg.png)no-repeat;
	background-position: center;
	background-size: cover;
	position: relative;
}

.main_station {
	right: -58vw;
	left: 0;
	margin: 0 auto;
	bottom: 300px;
	position: absolute;
	width: 271px;
	height: 250px;
	display: block;
}

.main_raiten {
	right: -58vw;
	left: 0;
	margin: 0 auto;
	bottom: 60px;
	position: absolute;
	width: 271px;
	height: 220px;
	display: block;
}

@media only screen and (min-width: 768px) and (max-width: 1800px) {

	.main_txt {
		&::before {
			left: 20px !important;
		}
	}
}

.main_txt {
	text-align: left;
	position: relative;
	height: 700px;

	&::before {
		background: url(../img/new_top/main_txt02.webp);
		width: 245px;
		height: 245px;
		position: absolute;
		content: "";
		bottom: 0;
		left: 100px;
		z-index: 1;
		animation: var(--txt_motion);
	}

	/*&::after {
		background: url(../img/new_top/n_housuke01.webp)no-repeat;
		width: 299px;
		height: 318px;
		position: absolute;
		content: "";
		bottom: -88px;
		left: calc(50% - 540px);
	}*/
}


/*--/main--*/

/*--recommend--*/

.recommend_wrap {
	background: url(../img/new_top/n_rec_bg.webp)no-repeat;
	background-position-x: 575px;
	margin: 100px 0;
}

.recommend_inner {
	width: 1100px;
	margin: 0 auto 80px;


	& h2 {
		font-size: 50px;
		font-weight: bold;
		letter-spacing: 1.2px;
		margin-bottom: 50px;
		text-align: left;
	}

	/*** 全文字にアニメーションを適用 ***/

	.bound {
		overflow: hidden;
	}

	.bound span {
		display: inline-block;
		opacity: 0;
		transform: translateY(100%);
		animation: var(--slideInFromBottom);
		animation-delay: 1s;
		/* 0.1秒ずつ遅延して表示 */
	}

	/*** 各文字のスタート時間をずらす ***/

	.common_sbu {
		margin-bottom: 37px;
		text-align: left;
	}

}

@keyframes slideInFromBottom {

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes txt_motion {

	0% {
		transform: rotate(-10deg);
	}

	100% {
		transform: rotate(10deg);
	}
}

@keyframes txt_motion02 {

	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(10deg);
	}
}

.recommed_btn {
	margin-top: 55px;

	& a {
		width: 250px;
		margin: 0 auto;
		border: 3px solid #000;
		height: 55px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 20px;
		font-weight: bold;
		border-radius: 10px;
	}
}

/*--search--*/

.n_search_wrap {
	background-color: #20A8FC;
	margin-bottom: 40px;
	position: relative;

	&::before {
		background: url(../img/new_top/n_housuke03.webp)no-repeat;
		width: 299px;
		height: 318px;
		position: absolute;
		content: "";
		top: -52px;
		left: -900px;
		right: 0;
		margin: 0 auto;
		animation: var(--txt_motion);
	}
}

.n_search_inner {
	width: 1100px;
	margin: 0 auto;
	padding: 0 0 50px;

	& h2 {
		text-align: center;
		margin-bottom: 40px;
		position: relative;

		&::before {
			background: url(../img/new_top/n_sea_title02.webp)no-repeat;
			width: 53px;
			height: 53px;
			content: "";
			position: absolute;
			top: 100px;
			left: -655px;
			right: 0;
			margin: 0 auto;
			animation: var(--txt_motion);
		}

		&::after {
			background: url(../img/new_top/n_sea_title03.webp)no-repeat;
			width: 53px;
			height: 53px;
			content: "";
			position: absolute;
			top: 97px;
			left: -545px;
			right: 0;
			margin: 0 auto;
			animation: var(--txt_motion02);
		}

	}
}

.n_search_box {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;

	& .n_search_map {
		width: 572px;
	}
}

.n_search_zyouken {
	width: 515px;

	& span {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 15px;
		width: 190px;
		height: 37px;
		box-sizing: border-box;
		border: 2px solid #f1f1f1;
		background-color: #fff;
		color: #016ED8;
		font-weight: bold;
		margin-bottom: 12px;
	}
}

.n_search_box02 {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;

	& li a {
		width: 165px;
		height: 110px;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		border: 3px solid #016ED8;
		border-radius: 10px;
		background-color: #fff;
		flex-wrap: wrap;
		justify-content: center;

		&:hover p {
			color: #016ED8;
		}
	}

	& p {
		font-size: 14px;
		font-weight: bold;
		display: flex;
		height: 35px;
		width: 100px;
		justify-content: center;
		align-items: center;
		text-align: center;
		transition-duration: .2s;
	}
}

.n_search_box03 {
	display: flex;
	justify-content: space-between;
	margin-top: 17px;

	& li a {
		width: 165px;
		height: 130px;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		border: 3px solid #016ED8;
		border-radius: 10px;
		background-color: #fff;
		flex-wrap: wrap;
		justify-content: center;

		& p strong {
			color: #016ED8;
		}

		& p {
			font-size: 20px;
			font-weight: bold;
			height: 35px;
			width: 125px;
			text-align: center;
			transition-duration: .2s;
			line-height: 1.2;
		}

		&:hover p {
			color: #016ED8;
		}

	}

}

.n_search_box04 {
	display: flex;
	justify-content: space-between;
	margin-top: 40px;
}

/*--conts--*/

.n_conts_wrap {
	width: 1200px;
	margin: 0 auto;
}

/*-t_tokusen-*/

/*-inside-*/
.inside_wrap {
	width: 970px;
	float: right;
}

/*-/inside-*/
/*-t_tokusen-*/
.t_tokusen_wrap {
	position: relative;
	margin-bottom: 70px;

	&:before {
		background-color: #EEF7F9;
		width: 970px;
		height: 470px;
		position: absolute;
		border-radius: 20px;
		top: 70px;
		content: "";
	}

	& h2 {
		position: relative;
		width: 950px;
		height: 92px;
		font-size: 29px;
		font-weight: bold;
		border-radius: 10px;
		box-sizing: border-box;
		border: 4px solid #20A8FC;
		background-color: #fff;
		margin-bottom: 40px;
		display: flex;
		align-items: center;
		padding: 0 80px;
		justify-content: flex-start;
	}

	& h2::before {
		background: url(../img/new_top/n_mini_housuke.webp)no-repeat;
		width: 114px;
		height: 121px;
		display: block;
		content: "";
		position: absolute;
		left: -38px;
		top: -35px;
	}

}

/*-/t_tokusen-*/

/*--info--*/
.n_info_wrap {
	background-color: #f5f5f5;
	margin-bottom: 70px;
	border-radius: 10px;
}

.n_info_inner {
	width: 840px;
	margin: 0 auto;
	padding: 30px 0;

	& h2 {
		position: relative;
		margin-bottom: 15px;

		&::before {
			background: url(../img/new_top/n_info_title02.webp)no-repeat;
			width: 46px;
			height: 55px;
			top: 17px;
			left: 4px;
			content: "";
			position: absolute;
			transform-origin: center bottom;
			animation: var(--txt_motion);
		}

		&::after {
			background: url(../img/new_top/n_info_title03.webp)no-repeat;
			width: 46px;
			height: 55px;
			top: 29px;
			left: 60px;
			content: "";
			position: absolute;
			transform-origin: center bottom;
			animation: var(--txt_motion02);
		}

	}

	& ul {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

}


/*--/info--*/

/*--n_tokusen--*/
.n_tokusen_wrap {
	position: relative;
	margin-bottom: 90px;

	&:before {
		background-color: #EEF7F9;
		width: 970px;
		height: 505px;
		position: absolute;
		border-radius: 20px;
		top: 30px;
		content: "";
		z-index: -1;
	}

	& h2 {
		font-size: 30px;
		font-weight: bold;
		display: flex;
		align-items: center;
		margin-bottom: 30px;
		gap: 15px;
	}

	& h2 span {
		transform-origin: center bottom;
		animation: var(--txt_motion);
	}

}

.n_color02::before {
	background-color: #f5f5f5;
}

/*--/n_tokusen--*/

/*--about--*/

.n_about_wrap {
	background-color: #EEF7F9;
	border-radius: 10px;
	overflow: hidden;
	position: relative;
	margin-bottom: 135px;

	&::before {
		position: absolute;
		content: "";
		display: block;
		width: 299px;
		height: 318px;
		background: url(../img/new_top/n_housuke04.webp)no-repeat;
		top: -20px;
		left: -115px;
	}
}



.n_about_inner {
	width: 780px;
	margin: 0 auto;
	padding: 60px 0;
	position: relative;
	z-index: 1;

	& h2 {
		text-align: center;
		position: relative;

		&::before {
			width: 524px;
			height: 278px;
			display: block;
			content: "";
			background: url(../img/new_top/n_conts_bg.webp)no-repeat;
			position: absolute;
			top: -40px;
			left: 0;
			right: 0;
			margin: 0 auto;
			z-index: -1;
		}
	}

	& h3 {
		width: 710px;
		height: 45px;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #fff;
		font-size: 25px;
		font-weight: bold;
		border-radius: 5px;
		margin: 30px auto 20px;
		position: relative;
	}

	& p {
		font-size: 15px;
		font-weight: bold;
		line-height: 1.5;
		text-align: center;
	}

	& ul {
		display: flex;
		justify-content: center;
		gap: 20px;
		margin: 50px 0;
	}
}

.n_about_img02 {
	position: absolute;
	right: -50px;
	bottom: -75px;
}


/*--/about--*/

/*top_voice*/
.voice {
	height: 544px;
	position: relative;
	overflow: hidden;

	&::after {
		background: url(../img/new_top/nami.webp)no-repeat;
		width: 2276px;
		height: 861px;
		display: block;
		content: "";
		position: absolute;
		background-position-x: -300px;
		background-position-y: -305px;
		top: 0;
		z-index: -1;
	}
}

.voice_inner {
	height: 355px;
	margin: 60px 0 30px;
	text-align: left;
	overflow: hidden;
	-webkit-overflow-scrolling: touch;
	overflow-y: auto;
	width: 2080px;
	position: absolute !important;
	top: 0;
	left: calc(50% - 1040px);
}

.voice_inner iframe {
	width: 100%;
	height: 320px;
}

.voice_tl {
	background: #fff;
	height: 300px;
	width: 235px;
	position: absolute;
	top: 60px;
	left: calc(50vw - 510px);
	z-index: 10;
	border-radius: 10px;
	text-align: center;
}

.voice_tl h3 {
	margin: 30px auto 15px auto;
}

.voice_tl .top_more {
	width: 190px;
	height: 40px;
	margin: 0 auto;
}

.voice_tl .top_more a {
	width: 190px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	background-color: #b3dc4a;
	color: #fff;
	font-weight: bold;
	font-size: 14px;
	border: 1px solid #b3dc4a;
	box-sizing: border-box;
	transition-duration: .3s;

	&:hover {
		background-color: #fff;
		color: #b3dc4a;
	}
}

/*/top_voice*/

/*--アクションボタン--*/
.action_btn {
	opacity: 1;
	-webkit-transform: translateY(0px);
	transform: translateY(0px);
}

.shape_btn {
	margin-top: 50px;
	text-align: center;
}

.recommend_wrap .m_btn {
	width: 100%;
	max-width: 250px;
}

.m_btn:hover {
	color: #fff;
	font-weight: bold;
	border: 3px solid #20A8FC;
}

.m_btn {
	transition-property: color;
	transition-duration: 250ms;
	transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
	position: relative;
	display: inline-block;
	background-color: #fff;
	border: 3px solid #000;
	border-radius: 10px;
	padding: 15px 0;
	color: #000;
	font-size: 20px;
	line-height: 1.3;
	overflow: hidden;
	font-weight: bold;
}

.m_btn::before {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 110%;
	background-color: #20A8FC;
	-webkit-transform-origin: 100% 50%;
	transform-origin: 100% 50%;
	content: '';
	-webkit-transform: scale3d(0, 1, 1);
	transform: scale3d(0, 1, 1);
	transition-property: -webkit-transform;
	transition-property: transform;
	transition-property: transform, -webkit-transform;
	transition-duration: 250ms;
	transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}

.m_btn:hover::before {
	-webkit-transform: scale3d(1, 1, 1);
	transform: scale3d(1, 1, 1);
	-webkit-transform-origin: 0% 50%;
	transform-origin: 0% 50%;
}

.m_btn_in {
	position: relative;
	display: inline-block;
	vertical-align: top;
	overflow: hidden;
}

.m_btn_in_txt {
	position: relative;
	display: inline-block;
}

.m_btn:hover .m_btn_in_txt {
	-webkit-animation: move-up-btn-txt 250ms forwards, move-init-btn-txt 250ms forwards 250ms;
	animation: move-up-btn-txt 250ms forwards, move-init-btn-txt 250ms forwards 250ms;
}

/*--inside用--*/

.inside_wrap .shape_btn {
	margin-top: 20px;
}

.inside_wrap .m_btn {
	width: 100%;
	max-width: 250px;
	border: 3px solid #20A8FC;
	color: #20A8FC;
}

.inside_wrap .m_btn:hover {
	color: #fff;
}

/*--/inside用--*/

/*--/アクションボタン--*/