﻿@charset "utf-8";
/*@import url("/content/dam/jretravel/site/common/css/nt_panel.css");*/

/*---------------------------------------------------------
	00. 既存コンポーネント　変更
---------------------------------------------------------*/

a{text-decoration:none}
a:hover{text-decoration:underline;outline:none;}
.bg_navi{background: #029e9a}
.codeitem .listitem li{background: #fff}

/*
.swichi_box{width:auto;}*/
.swichi_mv img{width:100%;text-align:center;position: relative;	z-index:1;}
.swichi_thumb{width:100%;margin:10px 0;display: block;justify-content: space-between;}
.swichi_thumb img{width: calc(100%/3.15);height: calc(100%/3.15);}
.swichi_thumb img:nth-child(even){margin:0 calc(3.6%/2);}
.swichi_mv:after{content: attr(title);display: block;color: #fff;margin-top: -42px;position: relative;background: #000;width: auto;opacity: 0.8;padding: 10px 0 10px 10px;z-index: 3;}

.circle_img{width:100%}
.circle_img img{width:inherit;border-radius: 0;}

/*観光地下おすすめ施設*/
/*.clm_osusume_s_img{width:54%;margin-bottom: 0;}
.codeitem .codeitem_img img {object-fit: contain;}*/

.center_box {text-align: center}

/*目的地から探す*/
.tyo_destination_banner .leaditem {line-height: 1.5;}

@media screen and (max-width: 568px) {
	.aem-Grid.aem-Grid--12>.aem-GridColumn.aem-GridColumn--default--6{width:100%;}
/*	.swichi_box{margin: 0 auto 0;}*/
	.swichi_thumb img{width: calc(100%/3.165);height: calc(100%/3.165);}
/*	.codeitem_img img {height: 103px !important;}*/
}

/*-----------------------
  new cp
-------------------------*/
.title.feature + .productcontainer2.base_prod{margin-bottom:0;}

/*----------------------------------------------------------
  01.MAP
-----------------------------------------------------------*/

.map_1,.map_01 { background: url("/content/dam/jretravel/site/page/hokkaido/images/map_1.png") no-repeat; } /* 北海道 */

.map_2 { background: url("/content/dam/jretravel/site/page/tohoku/images/map_2.png") no-repeat; } /* 東北 */
.map_02 { background: url("/content/dam/jretravel/site/page/tohoku/images/map_02.png") no-repeat; } /* 青森 */
.map_03 { background: url("/content/dam/jretravel/site/page/tohoku/images/map_03.png") no-repeat; } /* 岩手 */
.map_04 { background: url("/content/dam/jretravel/site/page/tohoku/images/map_04.png") no-repeat; } /* 宮城 */
.map_05 { background: url("/content/dam/jretravel/site/page/tohoku/images/map_05.png") no-repeat; } /* 秋田 */
.map_06 { background: url("/content/dam/jretravel/site/page/tohoku/images/map_06.png") no-repeat; } /* 山形 */
.map_07 { background: url("/content/dam/jretravel/site/page/tohoku/images/map_07.png") no-repeat; } /* 福島 */

.map_4 { background: url("/content/dam/jretravel/site/page/nkanto/images/map_4.png") no-repeat; } /* 北関東 */
.map_08 { background: url("/content/dam/jretravel/site/page/nkanto/images/map_08.png") no-repeat; } /* 茨城 */
.map_09 { background: url("/content/dam/jretravel/site/page/nkanto/images/map_09.png") no-repeat; } /* 栃木 */
.map_10 { background: url("/content/dam/jretravel/site/page/nkanto/images/map_10.png") no-repeat; } /* 群馬 */

.map_5 { background: url("/content/dam/jretravel/site/page/shutoken/images/map_5.png") no-repeat; } /* 首都圏 */
.map_11 { background: url("/content/dam/jretravel/site/page/shutoken/images/map_11.png") no-repeat; } /* 埼玉 */
.map_12 { background: url("/content/dam/jretravel/site/page/shutoken/images/map_12.png") no-repeat; } /* 千葉 */
.map_12_02 { background: url("/content/dam/jretravel/site/page/shutoken/images/map_12_02.png") no-repeat; } /* 千葉 首都圏発*/
.map_13 { background: url("/content/dam/jretravel/site/page/shutoken/images/map_13.png") no-repeat; } /* 東京 */
.map_14 { background: url("/content/dam/jretravel/site/page/shutoken/images/map_14.png") no-repeat; } /* 神奈川 */
.map_14_02 { background: url("/content/dam/jretravel/site/page/shutoken/images/map_14_02.png") no-repeat; } /* 神奈川 首都圏発*/

.map_22 { background: url("/content/dam/jretravel/site/page/izu/images/map_22.png") no-repeat; } /* 伊豆 */

.map_7 { background: url("/content/dam/jretravel/site/page/koushinetsu/images/map_7.png") no-repeat; } /* 甲信越・中部 */
.map_15 { background: url("/content/dam/jretravel/site/page/koushinetsu/images/map_15.png") no-repeat; } /* 新潟 */
.map_19 { background: url("/content/dam/jretravel/site/page/koushinetsu/images/map_19.png") no-repeat; } /* 山梨 */
.map_20 { background: url("/content/dam/jretravel/site/page/koushinetsu/images/map_20.png") no-repeat; } /* 長野 */
.map_21 { background: url("/content/dam/jretravel/site/page/koushinetsu/images/map_21.png") no-repeat; } /* 岐阜 */

.map_8 { background: url("/content/dam/jretravel/site/page/hokuriku/images/map_8.png") no-repeat; } /* 北陸 */
.map_16 { background: url("/content/dam/jretravel/site/page/hokuriku/images/map_16.png") no-repeat; } /* 富山 */
.map_17 { background: url("/content/dam/jretravel/site/page/hokuriku/images/map_17.png") no-repeat; } /* 石川 */
.map_18 { background: url("/content/dam/jretravel/site/page/hokuriku/images/map_18.png") no-repeat; } /* 福井 */


/*----------------------------------------------------------

  02.Contents

-----------------------------------------------------------*/
area{border:none;outline:none;}

.area_note{font-size: 1.1rem;}
.area_note li:before {content: '※';}
.area_note li .outside_icon{background-position: 0 1px;padding: 0 2px 0 15px;}
#daytrip .listitem img {width: 100%;}

@media screen and (max-width: 568px) {
.clm1_box {/*width: 92%; */ margin: 0 2%;}
.clm1_box .clm01_side_tag {width: 100%;}
#daytrip .listitem img {width: 100%;height:inherit !important;}
}

/*---------------------------------------------------------
	02. エリア_PC
---------------------------------------------------------*/

/*▼メインビジュアルのカラーボーダー*/
/*.mv_hokkaido{border-bottom:1px solid #7eb2da}
.mv_tohoku{border-bottom:1px solid #7ec357}
.mv_nkanto{border-bottom:1px solid #b48ebf}
.mv_shutoken{border-bottom:1px solid #ea4c49}
.mv_koushinetsu{border-bottom:1px solid #eb738f}
.mv_izu{border-bottom:1px solid #f4a450}
.mv_hokuriku{border-bottom:1px solid #7590c7}
.mv_kansai{border-bottom:1px solid #c06c7c}*/

/*▼お得な国内ツアーBG*/
.bg_yellow{background: #fffce5}

/*季節のおすすめ観光地*/
/*▼1カラム部分*/
.colom1_spot .clm2_right .sightseeing{margin:32px 0 0}

.sightseeing dl{margin:5px 0;padding:10px;border-radius: 5px;background: #f8f6f0}

.recommend .btn{width:100%}
.recommend .btn a{display: block;width: 100%;height: 100%;padding: 10px;text-align: center;background: #353540;color: #fff;text-decoration: none;position: relative;}
.recommend .btn a:after {content: '';border-top: 2px solid #fff;border-right: 2px solid #fff;display: block;width: 1rem;height: 1rem;position: absolute;top: 50%;right: 10%;-webkit-transform: rotate(45deg) translate(-35%,-40%);transform: rotate(45deg) translate(-35%,-40%);}

/*びゅうたび*/
.vtabi_box{width:80%;height:100%;background-color: #fafafa;margin:0 auto;padding: .2%;}
.vtabi_box > .contents{margin:10px;width:auto}
.vtabi_box > .contents > div{display: inline-block;width:41.5%;padding:0 .5%;vertical-align: top}
.vtabi_box > .contents > div:first-child{width:58%;display: inline-block;padding:0;vertical-align: top}
.vtabi_box > .contents > div > img{width: 100%;position: relative;}
.vtabi_box > .contents > div > p > a {margin:0}
.vtabi_box > .contents > div > p .logo{padding:2% 0;display: inline-block;vertical-align: middle;}
.vtabi_box > .contents > div > p .logo:hover{opacity:.8}
.vtabi_box > .contents > div > p .logo img{width:80px;vertical-align: bottom}
.vtabi_box > .contents div p{margin:0;padding:0;}
.vtabi_box > .contents div p a.link01{color:#222;text-decoration: none;display:inline-block;position: relative;margin:0 2%;}
.vtabi_box > .contents div p a.link01:hover{color:#06c;text-decoration: underline;}
.vtabi_box > .contents div p a.link01:after{content:''; border-top: 1px solid #222;border-right: 1px solid #222;display: block;width: .5rem;height: .5rem;position: absolute;top: 50%;right: 10%;-webkit-transform: rotate(45deg) translate(-35%,-40%);transform: rotate(45deg) translate(-35%,-40%);}
.vtabi_box > .contents > div > .article_photo{margin:0;padding:0;align-content: start;display: flex;}
.vtabi_box > .contents > div > .article_photo li{list-style:none;display:inline-block;width:50%;padding: 1%}
.vtabi_box > .contents > div > .article_photo li p{color:#999;font-size:.7rem}
.vtabi_box > .contents > div > .article_photo li img{width:100%;height: 150px;object-fit: cover;/*heightは要確認*/}
.vtabi_box .outside_icon {padding: 0 15px;}

.clm_2box, .clm_2box > .contents > div, .clm_2box > .contents > div > .article_photo li{width:100% !important}

.spring_quality{display: block!important;padding: 10px 0 0}

@media screen and (max-width: 568px) {
.recommend .area_name{font-size:1.2rem}
.recommend .title_name{font-size:1.6rem}
.recommend .feature .section h4{margin:10px 0 0;border-bottom:none;font-size:1.5rem}
.recommend .productbyhotel{margin:0 0 1rem!important;}
.recommend .clm_osusume_s_product .listitem4 li{width: 94%;margin: 0 auto 10px;}

.area_box .circle_ttl{font-size:1.6rem}

.vtabi_box{width:100%;}
.vtabi_box > .contents > div{width:100%}
.vtabi_box > .contents > div:first-child{width:100%}

}


/*新規・期間限定プランコンテンツ*/
#newhotel{background-color: #E1E6EC;background-image: -webkit-linear-gradient(top, #E1E6EC 2%, #F0F4F7 96%), -webkit-radial-gradient(at 50% 100%, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.5) 200%);background-image: linear-gradient(-180deg, #E1E6EC 2%, #F0F4F7 96%), radial-gradient(at 50% 100%, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.5) 200%);background-blend-mode:normal, color-burn;}
.newplan{display: block;text-align: center;background: #ffd8ed;padding:.3em;margin-bottom:.5em;}
.newhtl{display: block;text-align: center;background: #f9ff98;padding:.3em;margin-bottom:.5em;}
.codeitem_txt{margin-bottom:.5em}


/*coming soon*/
.comingsoon {
	text-align: center;
	width: 40%;
	margin: 0 auto;
	padding: 0 0 14px;
	background-color: #adcfec;
	border-radius: 8px;
	font-size: 1.8rem;
	font-weight: bold;
	color: #687c8e;
}
.comingsoon>.stroke {
	margin-bottom: 4px;
	letter-spacing: 0.06em;
	-webkit-text-shadow: 3px 3px 0 #687c8e;
	text-shadow: 3px 3px 0 #687c8e;
	font-size: 3.2rem;
	color: #fff;
}
.comingsoon>p:last-child {
	position: relative;
	display: inline-block;
	padding: 0 10px;
	background: #fff;
	border-radius: 4px;
	z-index: 2;
}
.comingsoon>p:last-child::before {
	position: absolute;
	content: "";
	width: 160%;
	height: 4px;
	top: 50%;
	left: 50%;
	background-image: -webkit-repeating-linear-gradient(-45deg,#fff,#fff 1px,transparent 2px,transparent 4px);
	background-image: repeating-linear-gradient(-45deg,#fff,#fff 1px,transparent 2px,transparent 4px);
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	border-radius: 20px;
	z-index: -1;
}
.comingsoon>p>span {
	display: inline;
	background: -webkit-linear-gradient(transparent 70%, #bffce4 30%);
	background: linear-gradient(transparent 70%, #bffce4 30%);
}

/*------------過ごし方で選ぶ------------*/
.spendtimebox {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}
.spendtimebox>li {
	position: relative;
	width: 244px;
	height: 100%;
	margin: 0 8px 8px 0;
	overflow: hidden;
}
.spendtimebox>li:nth-child(4n) {margin-right: 0;}
.spendtimebox>li>a>figure>img {transition: .4s;}
.spendtimebox>li>a:hover>figure>img {transform: scale(1.05);transition: .4s;}
.spendtimebox>li>a>p {
	position: absolute;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: end;
	-ms-flex-align: end;
	align-items: flex-end;
	padding: 0 3% 2%;
	width: 100%;
	height: 60%;
	bottom: 0;
	background: -webkit-gradient(linear,left top, left bottom,color-stop(0, transparent),to(rgba(0,0,0,.7)));
	background: linear-gradient(180deg,transparent 0,rgba(0,0,0,.7));
	color: #fff;
}

/* ---- common.cssから移動 06.北海道で使用しているボタン ---- */
/*北海道　道内エリアで使用中*/
/*4つボタン--1つボタンと3つボタン*/
.btn01_1_3>p.btn01_rt {width: 31%;margin: 20px 0;text-align: center;display: inline-flex;}
.btn01_1_3>p.btn01_rt a {background: #029E9A;font-size: 1.1em;color: #fff;width: 100%;border-radius: 10px;line-height: 1.4;padding: 20px 60px 20px 32px;position: relative;text-decoration: none;}
.btn01_1_3>p.btn01_rt:first-child {display: block;margin: 20px auto;}
.btn01_1_3>p.btn01_rt:nth-child(3) {margin: 20px 30px;}
/*3つボタン*/
.btn01_3>p.btn01_rt {width: 31%;margin: 20px 0;text-align: center;display: inline-flex;}
.btn01_3>p.btn01_rt a {background: #029E9A;font-size: 1.1em;color: #fff;width: 100%;border-radius: 10px;line-height: 1.4;padding: 20px 60px 20px 32px;position: relative;text-decoration: none;}
.btn01_3>p.btn01_rt:nth-child(2) {margin: 20px 30px;}


/* -------- 見頃のタイトル用css（東北DCから拝借） --------- */
.pick_tx {
  padding: 2px 3px 1px;
  margin: 2px -2px 8px;
  font-size: 1.5rem;
  font-weight: bold;
  border-bottom: 1px dashed;
  display: inline-block;
}


/*---------------------------------------------------------
	03. エリア_SP
---------------------------------------------------------*/

@media screen and (max-width: 568px) {

/*	.colom1_spot .clm2_right .sightseeing{margin:0}*/
	.colom1_spot .sightseeing , .clm2_left .sightseeing , .clm2_right .sightseeing {width:94%;margin:0 auto !important}

/*20191223 バナーサイズ変更*/
	.fourcols_title img{max-height: /*70px*/inherit;}


/*モデルコース*/
	.model_course .clm_list_txtarea {display: none;}

	/*coming soon*/
	.comingsoon {width: 94%;padding: 4px 0 14px;font-size: 1.6rem;}
	.comingsoon>.stroke {
		-webkit-text-shadow: 2px 3px 0 #687c8e;
		text-shadow: 2px 3px 0 #687c8e;
		font-size: 2.4rem;
	}
	.comingsoon>p:last-child::before {width: 140%;}

	/*過ごし方で選ぶ*/
	.spendtimebox {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
	}
	.spendtimebox>li {
		width: 96%;
		overflow: initial;
		margin: 0 2%;
		border-bottom: 1px solid #D1D1D1;
	}
	.spendtimebox>li>a {
		position: relative;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		padding: 2% 0;
	}
	.spendtimebox>li>a::after {
		position: absolute;
		content: "";
		width: 8px;
		height: 8px;
		right: 4%;
		border-top: 2px solid #999;
		border-right: 2px solid #999;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	.spendtimebox>li>a>figure {width: 50%;}
	.spendtimebox>li>a>figure>img {transition: initial;}
	.spendtimebox>li>a:hover>figure>img {transform: initial;transition: initial;}
	.spendtimebox>li>a>p {
		position: initial;
		display: initial;
		align-items: initial;
		width: 100%;
		height: initial;
		padding: 0 0 0 2%;
		bottom: initial;
		font-size: 1.2rem;
		font-weight: bold;
		background: none;
		color: #222;
	}
	.spendtimebox>li:first-child {border-top: 1px solid #D1D1D1;}
	.spendtimebox>li:nth-child(4n) {margin-right: 2%;}
	.spendtimebox>li:last-child {margin-bottom: 0;}
	.spendtimebox>li>a:hover {text-decoration: none;}
}
/* ---- common.cssから移動 06.北海道で使用しているボタン ---- */
/*北海道　道内エリアで使用中*/
/*4つボタン--1つボタンと3つボタン*/
@media screen and (max-width: 568px) {
.btn01_1_3>p.btn01_rt {width: 100%}
.btn01_1_3>p.btn01_rt {margin: 10px 0 !important;}
.btn01_3>p.btn01_rt {width: 100%}
.btn01_3>p.btn01_rt {margin: 10px 0 !important;}
}

/*---------------------------------------------------------
	04. 県別_PC
---------------------------------------------------------*/
/*北海道*/
/*.hokkaido_title00{}/*道内用*/
/*.hokkaido_title01:before {
    content: "【福島県沖地震に伴う北海道新幹線の運行状況について】\A\A 2月13日（土）に発生した福島県沖地震により、北海道新幹線は臨時ダイヤで運転を行っておりますが、3月26日（金）より全線で通常ダイヤで運転を再開いたします。\A（3月18日現在）";
	display: block;
    white-space: pre-line;
    border-top: 1.5px solid #ff0000;
    border-bottom: 1.5px solid #ff0000;
    padding: 10px;
    margin-bottom: 50px;
    margin-top: -30px;
	font-size:1.3rem;
}*/
/*東北*/
/*.tohoku_title01:before {
    content: "【福島県沖地震に伴う東北新幹線の運行状況について】\A\A 2月13日（土）に発生した福島県沖地震により、東北新幹線は臨時ダイヤで運転を行っておりますが、3月26日（金）より全線で通常ダイヤで運転を再開いたします。\A（3月18日現在）";
	display: block;
    white-space: pre-line;
    border-top: 1.5px solid #ff0000;
    border-bottom: 1.5px solid #ff0000;
    padding: 10px;
    margin-bottom: 50px;
    margin-top: -30px;
	font-size:1.3rem;
}
*/
/*---------------------------------------------------------
	05. IE11対応
---------------------------------------------------------*/
/*@media all and (-ms-high-contrast: none) {
	.clm01_product .listitem5 .clm01_side_tag{width:490px;}
}*/

/*---------------------------------------------------------
	06. 温泉(2022/04追加)
---------------------------------------------------------*/
/*1カラム対応*/
.onsenadd_1col_l{margin-right: 5px;}
.onsenadd_1col_r{margin-left: 5px;}


/*全共通*/
.onsenadd_cntnts{
	display: flex;
    justify-content: center;
}
.onsenadd_box{
	margin: 0 7px;/*本番アップ時に0にする*/
}

.onsenadd_box_left{
	margin: 0 4px 0 0;
}
.onsenadd_box_center{
	margin: 0 2px 0 2px;
}
.onsenadd_box_right{
	margin: 0 0 0 4px;
}


.onsenadd_box img{
	margin-bottom: 10px;/*本番アップ時に消す*/
}

.onsenadd_box_left img,
.onsenadd_box_center img,
.onsenadd_box_right img{
	margin-bottom: 10px;
}

.onsenadd_txt {
    margin: 10px 0 15px;
}
.onsenadd_glay_box {
    background: #eee;
    padding: 10px;
    font-size: 1.2rem;
	margin-bottom: 10px;
}

.onsenadd_glay_box .sensitsu {
	font-weight: bold;
	display: inline-block;
    font-size: 1.4rem;
}
.onsenadd_btn {
    display: inline-block;
    margin-bottom: 0;
    margin-top: -20px;
    font-weight: 700;
    text-align: center;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    padding: 0px 20px 8px 20px;
    font-size: 14px;
    line-height: 1.71428571;
    border-radius: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 100%;
}

.onsenadd_btn a {
    display: block;
    width: 100%;
    height: 100%;
    padding: 10px;
    text-align: center;
    background: #353540;
    color: #fff;
    text-decoration: none;
    position: relative;
}

.onsenadd_btn a:after {
    content: '';
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    display: block;
    width: 1rem;
    height: 1rem;
    position: absolute;
    top: 50%;
    right: 10%;
    -webkit-transform: rotate(45deg) translate(-35%,-40%);
    transform: rotate(45deg) translate(-35%,-40%);
}


@media screen and (max-width: 568px) {
	.onsenadd_1col_l{
		margin: 0 10px;
	}
	.onsenadd_1col_r{
		margin: 7px;
	}
	.onsenadd_box{
		/*margin: 10px;*/
		margin: 5px;
}
	
	.onsenadd_box_left, .onsenadd_box_center, .onsenadd_box_right{margin: 7px;}
	.onsenadd_box_center, .onsenadd_box_right{margin-top: 0px;}
	
	.onsenadd_btn {
		margin-bottom: 3em;
	}
}

/*---------------------------------------------------------
	07. 発売停止メッセージ(2022/6/20追加)
---------------------------------------------------------*/
.yado_msg{
	text-align: center;
    font-weight: bold;
    border: solid 1px #cccccc;
    padding: 10px;
    margin: 20px 10%;

}

/*--------------------------------------------------------
  08. tyo_add.css
----------------------------------------------------------*/
@media screen and (max-width: 568px) {
  .hover_img img {
    margin: 0 auto;
    max-width: calc(100% - 30px);
  }
}

/* 導線バナー2カラム */
.cmn_contents.tyo_bnrlist {
  padding: 0 18px;
}

.tyo_bnrlist>.txt_center {
  width: 460px;
  display: inline-block;
  margin: 0 10px 30px;
}

.tyo_bnrlist .txt_center a {
  display: block;
  margin-top: 5px;
  text-align: center;
}

.tyo_bnrlist .txt_center .textitem {
  color: #06c;
  text-decoration: underline;
}

.tyo_bnrlist .txt_center .textitem:hover {
  text-decoration: none;
}

@media screen and (max-width: 568px) {
  .cmn_contents.tyo_bnrlist {
    padding: 0 2%;
  }

  .tyo_bnrlist>.txt_center {
    width: 100%;
    margin: 0 0 5%;
    line-height: 1.4;
  }

  .tyo_bnrlist img {
    max-width: 100%;
  }
}
