@charset "utf-8";

:root{
	--font-sans: 'Noto Sans JP', serif;
	--font-serif: "Noto Serif JP", serif;
	--content-width-pc: 1104px;
	--content-width-sp: calc(675vw / 7.5);
	--content-width: min(var(--content-width-sp), var(--content-width-pc));
	--font-size-pc: 16px;
	--font-size-sp: 3.6vw;
	--default-color-black: #2C2A29;
	--content-color-green: #1c8080;
	--content-color-pink: #f54e5a;
	--content-color-blue: #26b7bc;
	--content-color-brown: #B04A13;
	--bg-color-green: #e6f8f8;
	--content-border_yellow: linear-gradient(transparent 60%, #fff553 50%);
}
.nopc {
    display: none
}
.main {
    font-size: var(--font-size-pc);
    color: var(--default-color-black);
    -webkit-text-size-adjust: none;/*ipad safari対策*/
    & a {
		text-decoration: none;
		&:hover {
			opacity: 0.8;
			transition: all 0.6s ease;
		}
	}
    & img {
        max-width: 100%;
		vertical-align: bottom;
    }
    & .inner {
        width: var(--content-width-pc);
		max-width: 100%;
        margin: 0 auto;
    }
	& .no-pc {
		display: none;
	}
}

/*------------------------------------------------
	メインビジュアル
--------------------------------------------------*/
#mainvisual {
	width: 100%;
	height: 500px;
	text-align: center;
	position: relative;
	overflow: hidden;
	& .slick-img img {
		height: 500px;
		margin: auto;
		max-height: 500px;
		max-width: 100%;
		object-fit: cover;
		width: 100%;
	}
	& .title {
		position: absolute;
		right: 0;
		left: 0;
		top: 160px;
		z-index: 2;
	}
}

/*------------------------------------------------
	ナビ
--------------------------------------------------*/
#navi {
	width: 100%;
	height: 70px;
	background-color: var(--content-color-green);
	padding: 8px 0;
	
	& .inner {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 100%;
	}
	
	& .navi-list {
		width: calc(var(--content-width-pc) - 120px - 40px);
		height: 100%;
		display: flex;
		justify-content: space-between;
		
		& li {
			flex: 1 0 auto;
			height: 100%;
			text-align: center;
			color: #fff;
			font-size: 16px;
			font-weight: 700;
			border-right: solid 1px rgba(255,255,255,0.5);
			
			&:first-child {
				border-left: solid 1px rgba(255,255,255,0.5);
			}
			
			& a {
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
				width: 100%;
				height: 100%;
				position: relative;
				
				&::after {
					content: "";
					display: inline-block;
					width: 25px;
					height: 25px;
					background: url(/cmn/icon/icon_arrow_down_white.svg) no-repeat center center / contain;
					position: absolute;
					bottom: -8px;
					right: 0;
					left: 0;
					margin: 0 auto;
				}
			}
		}
	}
}

/*発地切り替え*/
.display_selected {
	width: 120px;
	padding: 12px 0 17px;
	border-radius: 4px;
	background: #fff;
	font-size: 16px;
	font-weight: 700;
	text-align: center;
	position: relative;
	cursor: pointer;
	&::after {
		content: "";
		display: inline-block;
		width: 25px;
		height: 25px;
		background: url(/cmn/icon/icon_arrow_down.svg) no-repeat center center / contain;
		position: absolute;
		right: 0;
		left: 0;
		bottom: -3px;
		margin: auto;
	}
}
.dep-select-zone {
	display: none;
	width: 120px;
	background: #fff;
	position: absolute;
	font-size: 16px;
	z-index: 30;
	border: 1px solid var(--default-color-black);
	/*border-top: none;*/
	& .dep-select li {
		cursor: default;
		padding: 5px 10px;
		text-align: center;
		& a {
			color: inherit;
		}
		&:hover,
		&.selected {
			color: #fff;
			background: var(--default-color-black);
		}
	}
	& .close-button{
		display: none;
	}
}

/*ナビ固定時*/
.fix-navi:has(.fixed) {
	height: 50px;
}
#navi.fixed {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
	height: 50px;
	padding: 0;
	
	& .navi-list {
		& li {
			font-size: 15px;
		}
		& li a.active {
			background-color: #2d9999;
		}
		& li a::after {
			position: absolute;
			width: 18px;
			height: 18px;
			top: 16px;
			bottom: auto;
			right: 3px;
			left: auto;
		}
	}
	& .display_selected {
		padding: 5px 0 10px;
		font-size: 15px;
		&::after {
			width: 18px;
			height: 18px;
		}
	}
}

/*------------------------------------------------
	導入
--------------------------------------------------*/
#lead {
	width: 100%;
	padding: 64px 0;
	& .inner {
		display: flex;
		justify-content: space-between;
	}
	& dl {
		width: 50%;
		& dt {
			font-size: 24px;
			font-weight: 700;
			margin: 20px 0;
		}
		& dd {
			font-size: 16px;
		}
	}
	& .ph {
		width: 44%;
	}
}

/*------------------------------------------------
	共通見出し
--------------------------------------------------*/
.main {
	& :is(#tour, #event, #asobu, #hotel, #access) h2 {
		text-align: center;
		color: var(--content-color-green);
		margin-bottom: 48px;
		font-size: 28px;
		font-weight: 900;
		letter-spacing: 0.05em;
		background: url("../img/bg-titleicon.svg") no-repeat bottom center;
		background-size: 250px;
		padding-bottom: 16px;
		&::before {
			content: "";
			display: block;
			width: 40px;
			height: 40px;
			margin: 0 auto 8px;
			background-repeat: no-repeat;
			background-size: contain;
		}
		#tour &::before {background-image: url("../img/icon-plane.svg");}
		#hotel &::before {background-image: url("../img/icon-hotel.svg");}
		#event &::before {background-image: url("../img/icon-snow.svg");}
		#asobu  &::before {background-image: url("../img/icon-snowbord.svg");}
		#access &::before {background-image: url("../img/icon-access.svg");}
	}
}
/*------------------------------------------------
	ホテル特典
--------------------------------------------------*/
#point {
	width: 100%;
	background-color: #ffedee;
	padding: 40px 0 64px;	

	& h2 {
		font-size: 36px;
		font-weight: 900;
		text-align: center;
		color: var(--content-color-pink);
		margin-bottom: 40px;
		&::before,&::after {
			content: "";
			display: inline-block;
			width: 40px;
			height: 40px;
			background: url("../img/icon-snow-point.svg") no-repeat center center /contain;
			margin: 0 10px;
			transform: translateY(5px);
		}
	}
	& h3 {
		margin-bottom: 5px;
		color: var(--content-color-pink);
		font-size: 28px;
		font-weight: 900;
		text-align: center;
		& span {
			font-size: 0.8em;
			font-weight: 700;
		}
	}
	& .flex-box {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		background-color: #fff;
		border-radius: 8px;
		padding: 16px 40px;
		margin-bottom: 30px;
		
		& .gentei {
			width: 100%;
			margin-bottom: 5px;
			& span {
				display: inline-block;
				background-color: #fbb3be;
				font-size: 14px;
				font-weight: 500;
				padding: 0 10px 1px;
			}
		}
		& .text-area {
			width: 65%;
			
			& li {
				&:not(:last-child) {
					margin-bottom: 10px;
					padding-bottom: 10px;
					border-bottom: dashed 1px #ccc;
				}
				& .text-l {
					display: block;
					font-size: 18px;
					font-weight: 700;
				}
				& .text-m {
					display: block;
					font-size: 16px;
				}
				& .text-s {
					display: block;
					font-size: 14px;
					margin-top: 5px;
				}
				& .f-mini {
					font-size: 0.7em;
					font-weight: 500;
				}
				& .kikan {
					display: inline-block;
					background-color: #8c6708;
					color: #fff;
					font-size: 14px;
					font-weight: 500;
					padding: 0 15px 1px;
					&:nth-of-type(3) {
						margin-top: 10px;
					}
				}
				& .renpaku {
					display: inline-block;
					background-color: #8c6708;
					color: #fff;
					font-size: 14px;
					font-weight: 500;
					padding: 0 15px 1px;
					margin-right: 5px;
				}
				& mark {
					background: var(--content-border_yellow);
				}
			}
		}
		& .ph {
			width: 32%;
			margin-top: 10px;
		}
	}
}

/*------------------------------------------------
	ホテル紹介
--------------------------------------------------*/
#hotel {
	width: 100%;
	padding: 40px 0 96px;
    background-color: var(--bg-color-green);
	& .hotel-name {
		text-align: center;
		font-family: var(--font-serif);
		margin-bottom: 24px;
		& span:first-child {
			display: inline-block;
			font-size: 30px;
			border-bottom:1px solid var(--default-color-black);
			padding-bottom: 8px;
			letter-spacing: 0.1em;
		}
		& span:last-child {
			display: inline-block;
			font-size: 20px;
			padding-top: 8px;
		}
		&:nth-of-type(2) {
			margin-top: 96px;
		}
	}
	& .mainph {
		width: 100%;
		margin: 0 auto 16px;	
	}
	& .copy {
		font-size: 18px;
		line-height: 1.8;
		margin-bottom: 40px;
	}
	& .hotelinfo {
		width: 100%;
		display: flex;
		justify-content: space-between;
		& .hoteldata {
			width: 36%;
			background-color: #fff;
			& dt {
				font-size: 14px;
				background-color: var(--default-color-black);
				color: #fff;
				display: inline-block;
				padding: 4px 8px;
				margin-bottom: 8px;
			}
			& dd {
				font-size: 14px;
				padding: 0 16px;
			}
		}
		& .hotelimg {
			width: 60%;
			display: flex;
			justify-content: space-between;
			& li {
				width: 32%;
				& img {
					border-radius: 50%;
				}
			}
		}
	}
}

/*------------------------------------------------
	イベント・あそぶ
--------------------------------------------------*/
#event {
	width: 100%;
	padding: 40px 0 96px;
    background-color: var(--bg-color-green);
}
#asobu {
	width: 100%;
	padding: 40px 0 96px;
}
.conts-box {
	width: 100%;
	display: flex;
	justify-content: space-between;
    padding-bottom: 64px;
	margin-bottom: 64px;
    border-bottom: dashed 1px #ccc;
	& .ph {
		width: 45%;
	}
	& .copy-box {
		width: 50%;
	}
	& h3 {
		font-size: 28px;
		font-weight: 900;
		margin: 0 0 24px;
	}
	& .copy {
		line-height: 1.8;
		margin-bottom: 24px;
	}
}

#event div.conts-box:nth-last-of-type(1),
#asobu div.conts-box:nth-last-of-type(1){
	border-bottom: none;
	padding-bottom: 0;
	margin-bottom: 0;
}
.conts-box .memo, .conts-list .memo {
	width: 100%;
	font-size: 14px;
	color: var(--content-color-brown);
    padding: 8px;
    background-color: #fff;
	& .bold {
		font-weight: bold;
	}
	& .red {
		color: #FF0004;
	}
	& a {
		color: inherit;
		text-decoration: underline;
	}
}
#asobu .conts-box .memo {
    background-color: #f5f5f5;
}


/*偶数番目左右入れ替え*/
.conts-box:nth-child(even) .ph {
	order: 2;	
}
.conts-box:nth-child(even) .copy-box {
	order: 1;	
}

/*施設紹介*/
.conts-list-ttl {
	margin: 64px 0 36px;
	text-align: center;
	& span {
		display: inline-block;
		font-size: 26px;
		font-weight: 900;
		color: var(--content-color-green);
		position: relative;
		&::before,&::after {
			content: '';
			display: inline-block;
			width: 90px;
			height: 2px;
			background-color: var(--content-color-green);
			margin: 0 15px;
			transform: translateY(-8px);
		}
	}
}
.conts-list {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;	
	align-items: flex-start;
	gap: 40px;
	& li {
		width: calc((100% - 40px) / 2);
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		& .ph {
			width: 45%;
			& img {
				height: 160px;
				object-fit: cover;	
			}
		}
		& .copy-box {
			width: 52%;
			& h3 {
				font-weight: 700;
				margin-bottom: 8px;
				font-size: 22px;
				color: var(--content-color-green);	
			}
			& .copy {
				font-size: 14px;				
			}
		}
		& .memo {
			margin-top: 16px;
		}
	}
}
#event .note {
	text-align: center;
	margin-top: 24px;
	& span {
		padding: 4px 16px;
		font-size: 12px;
		border: solid 1px #cacaca;
	}
}
/*------------------------------------------------
	アクセス
--------------------------------------------------*/
#access {
	width: 100%;
	background-color: var(--bg-color-green);
	padding: 40px 0 96px;
	& .map {
		text-align: center;
		margin-bottom: 16px;
	}
	& .address {
		margin-bottom: 24px;
	}
	& .detail {
		background-color: #fff;
		padding: 16px 64px;
		& h3 {
			font-size: 18px;
			line-height: 1.8;
			font-weight: 700;
		}
		& ul {
			& li {
				&.car::before {
					content: "";
					display: inline-block;
					background: url(/cmn/icon2/directions_car.svg) no-repeat center center / contain;
					width: 20px;
					height: 20px;
					margin-right: 5px;
					transform: translateY(3px);
				}
				&.train::before {
					content: "";
					display: inline-block;
					background: url(/cmn/icon2/Train.svg) no-repeat center center / contain;
					width: 20px;
					height: 20px;
					margin-right: 5px;
					transform: translateY(3px);
				}
				& img {
					margin: 16px 0;
				}
				& .note {
					font-size: 14px;
				}
			}
		}
	}
}

/*------------------------------------------------
	ツアー
--------------------------------------------------*/
.area00{
  display: none;
	&.is-display{
	  display: block;
	}
}
#tour {
	width: 100%;
	padding: 40px 0 96px;
	
	& .product-title__dep {
		background-color: var(--content-color-green);
		font-size: 20px;
		padding: 7px 0;
		color: #fff;
		text-align: center;
		margin-bottom: 30px;
	}
	& .outsales-txt {
		text-align: center;
		margin: 30px auto;
		font-size: 16px;
		&:empty {
			display: none
		}
	}
	& .other-link {
		width: 700px;
		margin: 30px auto 0;
		
		& a {
			display: block;
			margin: 0 auto;
			font-size: 17px;
			color: #fff;
			background: var(--content-color-green);
			text-align: center;
			line-height: 50px;
			border-radius: 25px;
			position: relative;
			
			&::after {
				content: "";
				background: url(/cmn/icon/icon_arrow_right_white.svg) no-repeat center center / cover;
				width: 12px;
				height: 40px;
				position: absolute;
				top: 0;
				right: 3%;
				bottom: 0;
				margin: auto;
			}
		}
	}
}
/*------------------------------------------------
	商品部分調整・高さ揃え
--------------------------------------------------*/
.product-list.card-style > li {
	display: flex;
	flex-direction: column;
}
.product-list > li a {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}
.product-list.card-style > li .product-list__item {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
}
.product-list.card-style > li .product-list__item .item-txt__wrapper {
	display: flex;
	flex-direction: column;
}
.product-list.card-style > li .product-list__item .item-photo__wrapper .item-txt__port {
	position: static;
	line-height: 1.3em;
}
.item-txt__point {
	line-height: 1.5em;
	flex-grow: 1;
}
.item-txt__price {
	margin-top: 10px;
}
.item-txt__dep, .item-txt__note {
	line-height: 1.3em;
}
.product-list.card-style > li:empty,
.product-list > li:empty {
    display: none;
}
.product-list .label__wrapper.nopc {
	display: none;
}
.product-list .label__wrapper {
	top: -1px;
}
.product-list__label{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 90px;
}
.sp .product-list.card-style>li .item-txt__price .air_tour_code {
	font-size: 16px;
}
.sp .item-txt__dep, .item-txt__note {
	font-size: 10px;
}
.sp .port-type {
	font-size: 11px!important;
}
.product-list.card-style > li .product-list__item .item-photo__wrapper .item-txt__port {
	margin-top: -1px;
}

/*------------------------------------------------
	検索ボックス
--------------------------------------------------*/
#searchArea {
    background-color: #daedff!important;
    background: url("../img/search-bg.jpg") no-repeat bottom center;
    padding: 40px 0;
}
.rn-searchMod__inputField, .rn-searchMod__select {
	font-size: 14px!important;
	color: #222;
}
/*----------------------------------------------
ページトップ
------------------------------------------------*/
.goTop {
	position: fixed;
    bottom: 10px;
    right: 10px;
    transform: translateZ(0);
    z-index: 200;
	& a {
		display: flex;
		cursor: pointer;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		background-color: rgba(105, 113, 128, .5);
		width: 48px;
		height: 48px;
		& img {
				width: 24px;
				height: 24px;
		}
	}
}