@charset "utf-8";
/* CSS Document */
:root{
	--font-sans: 'Noto Sans 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: calc(28vw / 7.5);
	--default-color-black: #2C2A29;
	--content-color-green: #00aa3f;
	--content-color-navy: #003c79;
	--content-color-yellow: #ffec1a;
	--content-color-red: #cb1d1e;
	--content-color-khaki: #bda72f;
	--bg-color-blue: #eafbff;
	--bg-color-grey: #efefef;
}
.nopc {
    display: none
}
.main {
    font-family: var(--font-sans);
	line-height: 1.5;
    font-size: var(--font-size-pc);
    color: var(--default-color-black);
	background-color: var(--bg-color-blue);
    -webkit-text-size-adjust: none;/*ipad safari対策*/
    & a {
		text-decoration: none;
		&:hover {
			opacity: 0.8;
			transition: all 0.6s ease;
		}
	}
    & img {
        max-width: 100%;
    }
    & .inner {
        width: var(--content-width-pc);
		max-width: 100%;
        margin: 0 auto;
    }
}

/*------------------------------------------------
	メインビジュアル
--------------------------------------------------*/
#mainvisual {
	width: 100%;
	height: 460px;
	background: url("../img/main-bg-pc.jpg") no-repeat center top;
	
	& .inner {
		position: relative;
	}
	& .title {
		padding-top: 55px;
		width: 330px;
		margin: 0 auto;
	}
	& .catch {
		position: absolute;
		right: 240px;
		top: 10px;
	}
}


/*------------------------------------------------
	発地切り替え
--------------------------------------------------*/
.display_selected {
	width: 130px;
	height: 62px;
	padding: 16px 0;
	background: var(--default-color-black);
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	text-align: center;
	cursor: pointer;
	position: absolute;
	right: 0;
	top: 0;
	&::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;
		right: 0;
		left: 0;
		bottom: 0;
		margin: auto;
	}
}
.dep-select-zone {
	display: none;
	width: 130px;
	background: #fff;
	position: absolute;
	right: 0;
	top: 62px;
	z-index: 30;
	border: 1px solid #ccc;
	& .dep-select li {
		cursor: default;
		padding: 3px 10px;
		text-align: center;
		& a {
			color: inherit;
		}
		&:hover,
		&.selected {
			color: #fff;
			background: #00aa3f;
		}
	}
	& .close-button{
		display: none;
	}
}

/*------------------------------------------------
	共通特典
--------------------------------------------------*/
#cpn {
	width: 100%;
	background-color: #fff;
	padding: 40px 0 64px;
	text-align: center;
	& h2 {
		display: inline-block;
		color: var(--content-color-green);
		font-size: 38px;
		font-weight: 900;
		letter-spacing: 0.05em;
		background: linear-gradient(transparent 70%, var(--content-color-yellow) 0%);
		margin-bottom: 40px;
		&::before,&::after {
			content: "";
			display: inline-block;
			width: 50px;
			height: 65px;
			background: url("../img/cpn-fukidashi.svg") no-repeat;
			background-size: contain;
			margin: 0 10px 0 0;
			vertical-align: bottom;
		}
		&::after {
			transform: scaleX(-1);
			margin: 0 0 0 10px;
		}
	}
	& .ttn-list {
		display: flex;
		justify-content: center;
		& li {
			width: 330px;
			height: 130px;
			margin: 0 10px;
			border: solid 5px var(--content-color-green);
			border-radius: 8px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			font-size: 20px;
			font-weight: 700;
			text-align: center;
			position: relative;
			& p {
				position: absolute;
				left: -1px;/*ipad対応*/
				top: -1px;/*ipad対応*/
				width: 65px;
				height: 65px;
				background: url("../img/cpn-no-bg.svg") no-repeat left top / contain;
				color: #fff;
				font-family: Roboto, "sans-serif";
				font-size: 24px;
				text-align: left;
				padding-left: 6px;
			}
			& span {
				display: inline-block;
				background-color: var(--content-color-yellow);
				font-size: 0.8em;
				padding: 2px 8px;
				position: absolute;
				right: 130px;
				top: 10px;
				margin-bottom: 10px;
				&::after {
				  content: "";
				  position: absolute;
				  bottom: 0;
				  left: 50%;
				  border-style: solid;
				  border-width: 10px 5px 0 5px;
				  border-color: var(--content-color-yellow) transparent transparent;
				  translate: -50% 100%;
				}
			}
		}
	}
}
/*------------------------------------------------
	共通見出しタイトル
--------------------------------------------------*/
.title-wrap {
	width: 100%;
	background-color: var(--content-color-green);
	padding: 40px 0 48px;
	margin-bottom: 64px;
	& .inner {
		position: relative;
	}
	& .fuki {
		text-align: center;
		margin-bottom: 40px;
		& span {
			display: inline-block;
			padding: 5px 30px 7px;
			background-color: #fff;
			font-size: 26px;
			font-weight: 700;
			border-radius: 30px;
			position: relative;
			&::after {
			  content: "";
			  position: absolute;
			  bottom: 0;
			  left: 50%;
			  border-style: solid;
			  border-width: 15px 10px 0 10px;
			  border-color: #fff transparent transparent;
			  translate: -50% 100%;
			}
		}
	}
	& h2 {
		font-size: 44px;
		font-weight: 900;
		color: var(--content-color-yellow);
		margin-bottom: 16px;
		& span {
			font-size: 0.8em;
		}
	}
	& .text {
		font-size: 22px;
		font-weight: 700;
		color: #fff;
	}
	& .note {
		margin-top: 16px;
		font-size: 16px;
		/*font-weight: 500;*/
		color: #fff;
	}
	& .image {
		position: absolute;
		right: 0;
		&.hotel {top:50px;}
		&.bus {top: 120px; width: 280px;}
		&.omiyage{top: 0px; width: 300px; border: solid 2px #fff;}
	}
	& .sarani {
		font-size: 36px;
		font-weight: 900;
		color: #fff;
		padding: 20px 0 0 120px;
		margin-bottom: 8px;
		position: relative;
		& span {
			position: absolute;
			left: 0;
			top: -25px;
			display: inline-block;
			width: 100px;
			height: 100px;
			background: url("../img/hnd-fukidash.svg") no-repeat center center / contain;
			font-size: 24px;
			font-weight: 700;
			color: var(--default-color-black);
			text-align: center;
			padding-top: 30px;
		}
	}
}

/*------------------------------------------------
	ホテル
--------------------------------------------------*/
#hotel {
	width: 100%;
	padding: 0 0 96px;
}
.hotel-ttn-wrap {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.hotel-box {
	&.half {width: 50%;}
	&:nth-child(1) {border-bottom: dashed 1px #333;}
	&:nth-child(2) {border-right: dashed 1px #333; padding: 40px 40px 0 0;}
	&:nth-child(3) {padding: 40px 0 0 40px;}
	padding-bottom: 40px;
	position: relative;
	
	& .text {
		margin-bottom: 16px;
		& dt {
			font-size: 30px;
			font-weight: 700;
			margin: 5px 0;
		}
		& dd {
			font-size: 16px;
		}
	}
	& .point {
		width: 100%;
		margin-top: 15px;
		background-color: #fff;
		position: relative;
		border: solid 2px var(--content-color-khaki);
		padding: 10px 10px 10px 75px;
		&.arrange {
			padding: 10px;
		}
		& img {
			position: absolute;
			left: 10px;
			top: -6px;
			width: 50px;
		}
		& p {
			font-size: 18px;
			font-weight: 700;
			color: var(--content-color-red);
			& .note {
				display: block;
				font-size: 14px;
				font-weight: 500;
				color: var(--default-color-black);
			}
		}
	}
	
	&.full {
		width: 100%;
		& .ph {
			display: flex;
			justify-content: space-between;
			align-items: flex-end;	
			& img:nth-of-type(1) {width: 52%;}
			& img:nth-of-type(2) {width: 23%;}
			& img:nth-of-type(3) {width: 23%;}
		}
		& .text {
			position: absolute;
			right: 0;
			top: 10px;
			width: 45%;
		}
	}
}


/*------------------------------------------------
	バスツアー
--------------------------------------------------*/
#bus {
	width: 100%;
	padding: 0 0 96px;
}
.bus-box {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	&:not(:last-child) {
		padding-bottom: 40px;
		margin-bottom: 40px;
		border-bottom: dashed 1px #333;
	}
	
	& .bustour-ttl {
		width: 100%;
		display: flex;
		align-items: center;
		margin-bottom: 20px;
		& .no {
			width: 12%;
		}
		& .text {
			width: 88%;
			font-size: 22px;
			font-weight: 700;
			& span {
				font-size: 0.8em;
				display: block;
				color: var(--content-color-red);
			}
		}
	}
	& .ph-slider {
		width: 50%;
	}
	& .point {
		width: 47%;
		background-color: #fff;
		position: relative;
		padding: 10px 20px;
		& img {
			position: absolute;
			left: 10px;
			top: 5px;
			width: 100px;
		}
		& .date {
			display: inline-block;
			background-color: var(--content-color-navy);
			color: #fff;
			font-size: 14px;
			padding: 2px 10px;
			margin: 20px 0 30px 120px;
		}
		& ul {
			font-size: 16px;
			font-weight: 500;
			& li {
				position: relative;
				padding-left: 24px;
				margin-bottom: 5px;
				& .red {
					color: var(--content-color-red);
				}
				& .f-mini {
					font-size: 0.8em;
				}
				&::before {
					content: "";
                    display: inline-block;
                    width: 18px;
                    height: 18px;
                    background: url("../img/icon-check.svg") no-repeat center center / contain;
                    position: absolute;
                    left: 0;
                    top: 2px;
				}
			}
		}
	}
}
/*スライダー調整*/
#bus {
    & .slick-prev, .slick-next {
        top: 48%;
        width: 30px;
        height: 30px;
        z-index: 100;
    }
    & .slick-prev {
        left: -15px;
    } 
    & .slick-next {
        right: -15px;
    }
	& .slick-prev:before{
		content: "";
		display: inline-block;
		width: 30px;
		height: 30px;
		background: #fff url(/cmn/icon/icon_arrow_left.svg) no-repeat center center / contain;
	}
	& .slick-next:before{
		content: "";
		display: inline-block;
		width: 30px;
		height: 30px;
		background: #fff url(/cmn/icon/icon_arrow_right.svg) no-repeat center center / contain;
	}
    & .slick-dots li button:before {
        font-size: 12px;
    }
}
/*------------------------------------------------
 羽田空港
--------------------------------------------------*/
#haneda {
	width: 100%;
	padding: 0 0 96px;
	& .product {
		padding: 0;
	}
}

/*------------------------------------------------
　HISオリジナルサービス
--------------------------------------------------*/
#hisservice {
	width: 100%;
	background-color: var(--bg-color-grey);
	padding: 40px 0 64px;
	& .inner {
		display: grid;
		grid-template-rows: repeat(4, max-content);
        grid-template-columns: 20% 76%;
        grid-row-gap: 24px;
		grid-column-gap: 4%;
	}
	& h2 {
		grid-row: 1;
        grid-column: 1 / 3;
		margin-bottom: 24px;
		text-align: center;
		& span {
			display: inline-block;
			font-size: 32px;
			font-weight: 700;
			padding: 0 10px 5px;
			border-bottom: solid 2px var(--default-color-black);
			position: relative;
			&::before {
				content: "";
				position: absolute;
				bottom: 0;
				left: 50%;
				border-style: solid;
				border-width: 20px 10px 0 10px;
				border-color: var(--default-color-black) transparent transparent;
				translate: -50% 100%;
				transform: skew(-25deg);
				transform-origin: top;
			}
			&::after {
			  content: "";
			  position: absolute;
			  bottom: 0;
			  left: 50%;
			  border-style: solid;
			  border-width: 15.5px 7.8px 0 7.8px;
			  border-color: var(--bg-color-grey) transparent transparent;
			  translate: -50% 100%;
			  transform: skew(-25deg);
			  transform-origin: top;
			}
		}
	}
	& .ph {
		grid-row: 2 / 5;
        grid-column: 1;
	}
	& h3 {
		grid-row: 2;
		grid-column: 2;
		color: var(--content-color-navy);
		font-size: 30px;
		font-weight: 700;
		& span {
			font-size: 0.7em;
			display: block;
		}
	}
	& .text {
		grid-row: 3;
		grid-column: 2;
	}
	& .btn {
		grid-row: 4;
		grid-column: 2;
		& a {
			display: inline-block;
			background-color: #fff;
			color: inherit;
			padding: 5px 40px 7px 30px;
			border-radius: 30px;
			border: solid 1px var(--default-color-black);
			position: relative;
			&::after {
				content: "";
				display: inline-block;
				width: 20px;
				height: 20px;
				background: url(/cmn/icon/icon_arrow_right.svg) no-repeat center center / contain;
				position: absolute;
				right: 5px;
				top: 7px;
			}
		}
	}
}

/*------------------------------------------------
　ツアー商品
--------------------------------------------------*/
.area00{
  display: none;
	&.is-display{
	  display: block;
	}
}
.product {
	padding: 64px 0 0;
	& h3 {
		text-align: center;
		margin-bottom: 24px;
		font-size: 34px;
		line-height: 1.3;
		font-weight: 900;
		&::before {
			content: "";
			width: 50px;
			height: 50px;
			display: block;
			margin: 0 auto;
			background: url(/cmn/icon2/travel.svg) no-repeat center center / contain;
			transform: rotate(-45deg);
		}
	}
	& .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: 18px;
			color: #fff;
			background: var(--content-color-navy);
			text-align: center;
			border-radius: 30px;
			padding: 16px 0;
			position: relative;

			&::after {
				content: "";
				background: url(/cmn/icon/icon_arrow_right_white.svg) no-repeat center center / contain;
				width: 30px;
				height: 30px;
				position: absolute;
				top: 0;
				right: 3%;
				bottom: 0;
				margin: auto;
			}
		}
	}
}
/*------------------------------------------------
	商品部分調整
--------------------------------------------------*/
.product-list.card-style > li .product-list__item .item-photo__wrapper .item-txt__port {
	position: static;
	margin-top: -1px;/*ios用調整*/
}

/*------------------------------------------------
	おすすめバナー
--------------------------------------------------*/
#recobnr {
	width: 100%;
	background-color: #fff;
	padding: 40px 0 64px;
	
	& h2 {
		text-align: center;
		font-size: 28px;
		font-weight: 700;
		margin-bottom: 30px;
	}
	& .bnr-list {
		width: var(--content-width-pc);
		max-width: 100%;
		margin: 0 auto;
		display: flex;
		justify-content: center;
		gap: 0;
		& li {
			width: calc(88% / 6);
			margin: 0 1%;
			& img {
				width: 100%;
			}
			&:empty {
				display: none;
			}
		}
	}
	&:has(.area00.is-display ul li:nth-child(1):empty) {
		display: none;
	}
}

/*------------------------------------------------
	検索ボックス調整
--------------------------------------------------*/
#searchArea {
    background: url("../img/search-bg.jpg") no-repeat bottom center;
	background-size: cover;
    padding: 40px 0;
}
.rn-searchMod__inputField, .rn-searchMod__select {
	font-size: 14px!important;
	color: #222;
}

/*----------------------------------------------
	終了
------------------------------------------------*/
#close {
    padding: 100px 0;
    background-color: var(--bg-color-blue);
    text-align: center;
    font-size: 18px;
    line-height: 1.8;
}

/*----------------------------------------------
ページトップ
------------------------------------------------*/
.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;
		}
	}
}