@charset "utf-8";

/*----- プレス -----*/
.press .feature .section h2 {
	font-size: 2.8rem;
	color: #010e3b;
}
/*----- 背景色 -----*/
:root {
	--bg_hk: #ebefff;
	--gd: #b89a1e;
	--bg_gd: #f3eedb;
}
/*---------- 北海道 ----------*/
.seasonal.hokkaido {
	background-color: var(--bg_hk);
	/* background: var(--bg_hk) url(/content/dam/jretravel/site/page/hokkaido/images/tsugarukaisen/2025/img_tsugarukaisen_01.png) left top;
	background-size: 219px;
	background-repeat: repeat-y; */
	/* width: 219px;
	height: 639px; */
	/* aspect-ratio: 219 / 639; */
}
/* .seasonal .bubble {
	background: url(/content/dam/jretravel/site/page/hokkaido/images/tsugarukaisen/2025/img_tsugarukaisen_01.png) left top;
	background-size: 219px;
	background-repeat: repeat-y;
} */
.seasonal .txt_box {
	/* text-align: center; */
	display: flex;
	justify-content: space-evenly;
	padding: 0 48px;
	gap: 20px;
	align-items: center;
}
.seasonal .ttl_wrap {
	flex-shrink: 0;
}
.seasonal .txt_box h2 {
	letter-spacing: 2px;
}
.seasonal span.pick_tx {
	border: none;
	background-color: #010e3b;
	color: #fff;
	margin: 0;
	padding: 4px 10px;
	margin: 6px -2px 8px;
	font-size: 1.7rem;
}
.seasonal .cmp-text.opening {
	font-size: 1.6rem;
}
.seasonal .feature .section h3 {
	background-color: transparent;
	border-bottom: none;
	margin: 15px 0 -20px;
}
.seasonal .feature .section h3 img {
	/* margin-inline: auto; */
	left: calc(50% - 96px);
  position: relative;
}
.seasonal .higaeri .feature .section h3 img {
	margin-inline: auto;
	left: initial;
  position: relative;
}

.tsugaru_cm.hk, .tsugaru_cm.ao {
	position: relative;
}
/* .bg_img::before{
	content: "";
	position: absolute;
	background: url(/content/dam/jretravel/site/page/hokkaido/images/tsugarukaisen/2025/img_tsugarukaisen_01.png) no-repeat 50% 50%;
	background-size: contain;
	width: 335px;
	height: 180px;
	display: block;
	right: 0;
  top: 24%;
	aspect-ratio: 621 / 386;
} */
.tsugaru_cm.hk .bg_img {
	background: url(/content/dam/jretravel/site/page/hokkaido/images/tsugarukaisen/2025/img_tsugarukaisen_01.png) no-repeat 50% 50%;
	background-size: contain;
	width: 335px;
	height: 214px;
	display: block;
	right: -37%;
	top: 8%;
	position: absolute;
}
.tsugaru_cm.hk .bg_img02 {
	background: url(/content/dam/jretravel/site/page/hokkaido/images/tsugarukaisen/2025/img_tsugarukaisen_01.png) no-repeat 50% 50%;
	background-size: contain;
	width: 335px;
	height: 214px;
	display: block;
	left: -37%;
  top: -9%;
	position: absolute;
	transform: scale(-1, 1);
}

/*----- 限定プラン ボタン -----*/
.seasonal .btn_list {
	width: 54%;
	margin-inline: auto;
}
.seasonal .btn_item a, .seasonal .btn_item a:hover {
	display: block;
  background-repeat: no-repeat;
  background-size: contain;
  width: 100%; /* 親要素に対する幅を%で指定 */
  height: auto; /* 高さは自動調整 */
  aspect-ratio: 62 / 7; /* 比率を維持 */
	transition: all 0.3s;
}
.btn_item:first-child {
	margin-bottom: 20px;
}
.btn_hk {
  background-image: url('/content/dam/jretravel/site/page/hokkaido/images/tsugarukaisen/2025/btn_aomr_hokkaido.png');
	/* margin-bottom: 20px; */
}
.btn_hk:hover {
  background-image: url('/content/dam/jretravel/site/page/hokkaido/images/tsugarukaisen/2025/btn_aomr_hokkaido_on.png');
}
.btn_ao {
  background-image: url('/content/dam/jretravel/site/page/hokkaido/images/tsugarukaisen/2025/btn_hkd_aomori.png');
}
.btn_ao:hover {
  background-image: url('/content/dam/jretravel/site/page/hokkaido/images/tsugarukaisen/2025/btn_hkd_aomori_on.png');
}

/*----- 商品コンポーネント -----*/
.seasonal .base_prod.bdr li {
	background-color: #fff;
}
.seasonal .base_prod .hotel li>a .details_box>.area {
	background-color: #010e3b;
}
.seasonal .base_prod .hotel li>a .details_box>.tag>.icon {
	border: none;
}
.seasonal .base_prod .hotel li>a .details_box>.tag>.icon:first-child {
	border-bottom: 1px solid #010e3b;
	border-radius: 0;
	display: block;
	margin-bottom: 4px;
}
.seasonal .base_prod .hotel li>a .details_box>.tag {
	border: solid 1px #010e3b;
	/* border: solid 1px var(--gd); */
	border-radius: 6px;
	font-size: 1.3rem;
	padding: 6px;
	background-color: #f3f4f7;
	/* background-color: var(--bg_gd); */
}
.seasonal .base_prod .hotel li>a .details_box>.tag>p {
	margin: 0;
	padding: 0;
}
.seasonal .base_prod .day_trip.hotel li>a .details_box>.tag {
	border: none;
	display: none;
}
.seasonal .base_prod .day_trip.hotel li>a .img_box {
	margin-bottom: 0;
}
.seasonal .base_prod .day_trip.hotel li>a .details_box>p.cautions {
	font-size: 1.1rem;
}
.seasonal .base_prod.bdr li {
	border: solid 1px #afbae1;
}
.seasonal .base_prod .hotel li>a .details_box>.tag>.icon {
	color: #021c75;
	font-weight: bold;
	background-color: #f3f4f7;
	/* background-color: var(--bg_gd); */
}


.seasonal .box_content {
	border: solid 1px #afbae1;
	background-color: #fff;
}
/*----- カルーセル -----*/
.wrap_slide .swiper {
	overflow: hidden;
	position: relative;
	padding: 0 3% 40px;
}
.wrap_slide .swiper .swiper-wrapper .swiper-slide{
  width: 100%;
}
.wrap_slide .swiper .swiper-pagination {
  bottom: 0;
}
.wrap_slide .cmn_contents {
  margin: auto;
}
.base_prod {
  margin-bottom: 0;
}
.clm_3 .base_prod.clm1 li, .base_prod.side_box.clm1 li {
  padding: 10px 10px 0;
}
.seasonal .base_prod.side_box.clm1 .day_trip li {
  padding: 10px 10px;
}
.clm_3 .cm_btn .base_prod.clm1 li, .cm_btn .base_prod.side_box.clm1 li {
  padding: 0 10px;
}
/* ボックスの高さ揃え */
.wrap_slide .swiper .swiper-slide {
  height: auto;
}
.wrap_slide .swiper .swiper-slide .box_content,
.clm_3 .box_content {
  height: 100%;
}

.wrap_slide .swiper .swiper-slide .box_content {
	display: flex;
  flex-direction: column;
	flex: 1 auto;
}
.campaign .coupon .aem-Grid.aem-Grid--default--6>.aem-GridColumn.aem-GridColumn--default--6:has(.btn_01) {
	flex: 1 auto;
	align-content: flex-end;
}
/* 商品コンポーネントのページネーション */
.box_content .base_prod .swiper-button-next,
.box_content .base_prod .swiper-button-prev,
.box_content .base_prod .swiper-pagination {
  display: none !important;
}
/* 前へ/後ろへボタン */
.wrap_slide {
  position: relative;
}
/* 前へ/後ろへボタン */
.wrap_slide .swiper-button-prev,
.wrap_slide .swiper-button-next {
  display: block !important;
  position: absolute;
  width: 40px;
  height: 40px;
  top: 50%;
  margin-top: -15px;
  /* -webkit-filter: drop-shadow(1px 1px 5px rgba(160,160,160,0.2));
          filter: drop-shadow(1px 1px 5px rgba(160,160,160,0.2)); */
}
.wrap_slide .swiper-button-prev.swiper-button-disabled,
.wrap_slide .swiper-button-next.swiper-button-disabled
{
  opacity: .35;
}
.wrap_slide .swiper-button-prev::before,
.wrap_slide .swiper-button-next::after
 {
  top: 0%;
  bottom: 0;
  right: 14px;
  width: 12px;
  height: 12px;
  content: "";
  position: absolute;
  margin: auto;
  transform: rotate(-45deg);
}
.wrap_slide .swiper-button-prev::before {
  transform: rotate(-45deg);
  left: 15px;
  border-top: 2px solid #fff;
  border-left: 2px solid #fff;
}
.wrap_slide .swiper-button-next::after {
  transform: rotate(-45deg);
  right: 15px;
  border-bottom: 2px solid #fff;
  border-right: 2px solid #fff;
}
.wrap_slide .swiper-button-prev,
.wrap_slide .swiper-button-next
 {
  position: absolute;
  /* border: solid 1px #222; */
  width: 40px;
  height: 40px;
  border-radius: 999px;
  top: 48%;
	background-color: #7689cc;
	/* background-color: var(--gd); */
}
.wrap_slide .swiper-button-next
 {
	z-index: 3;
	right: -48px;
}
.wrap_slide .swiper-button-prev
 {
	left: -48px;
	z-index: 3;
}
/* .wrap_slide .swiper-button-prev {
  left: -50px;
} */
/* .wrap_slide .swiper-button-next {
  right: -50px;
} */
/* カルーセル PCのみ */
@media screen and (min-width: 768px) {
	.br_sp {
  	display: none;
	}
  .cmp-text.tx_lead, .cmp-text.tx_lead p {
    text-align: center !important;
  }
  .wrap_slide {
    position: relative;
  }
	.wrap_slide .swiper {
    padding: 0 0 30px;
  }
	/* 前へ/後ろへボタン */
	.wrap_slide .swiper-button-prev.swiper-button-disabled,
	.wrap_slide .swiper-button-next.swiper-button-disabled {
    opacity: .35;
  }
	/* カルーセルなし 非表示 */
	.wrap_slide.no_swipe .swiper-button-prev,
	.wrap_slide.no_swipe .swiper-button-next,
	.wrap_slide.no_swipe .swiper-pagination {
		display: none !important;
	}
	.campaign .plan .swiper-container .swiper-button-next, .campaign .plan .swiper-container .swiper-button-prev, .campaign .plan .swiper-container-horizontal>.swiper-pagination-bullets {
		display: none;
	}
	/* クーポンのカルーセル */
	.wrap_slide .swiper .swiper-wrapper .swiper-slide{
		display: flex;
  	/* flex: 1 auto; */
	}
}
.box_content .wrap_img.jretravel-image {
  aspect-ratio: 160 / 99;
}/*画像表示*/


/*---------- 青森 ----------*/
.seasonal.bg01.aomori {
	background-color: #fef1eb;
}
.press.ao .feature .section h2 {
	color: #230000;
}
.seasonal span.pick_tx.a,
.seasonal.aomori .base_prod .hotel li>a .details_box>.area,
.seasonal.aomori span.pick_tx {
	background-color: #230000;
}
.seasonal.aomori .box_content, .seasonal.aomori .base_prod.bdr li {
	border: solid 1px #e1afaf;
}
.seasonal.aomori .base_prod .hotel li>a .details_box>.tag {
	border: solid 1px #230000;
}
.seasonal.aomori .base_prod .hotel li>a .details_box>.tag>.icon:first-child {
	border-bottom: solid 1px #230000;
}
.seasonal.aomori .base_prod .hotel li>a .details_box>.tag,
.seasonal.aomori .base_prod .hotel li>a .details_box>.tag>.icon {
	background-color: #fefaf8;
	color:#230000
}
.aomori .wrap_slide .swiper-button-prev, .aomori .wrap_slide .swiper-button-next {
	background-color: #cc8787;
}
.tsugaru_cm.ao .bg_img_ao {
	background: url(/content/dam/jretravel/site/page/hokkaido/images/tsugarukaisen/2025/img_tsugarukaisen_ao_01.png) no-repeat 50% 50%;
	background-size: contain;
	width: 335px;
	height: 214px;
	display: block;
	right: -37%;
	top: 8%;
	position: absolute;
}
.tsugaru_cm.ao .bg_img02_ao {
	background: url(/content/dam/jretravel/site/page/hokkaido/images/tsugarukaisen/2025/img_tsugarukaisen_ao_01.png) no-repeat 50% 50%;
	background-size: contain;
	width: 335px;
	height: 214px;
	display: block;
	left: -37%;
	top: -9%;
	position: absolute;
	transform: scale(-1, 1);
}
/* ----------PCのみ---------- */
@media screen and (min-width: 768px) {
	.br_sp {
		display: none;
	}
}
/* ----------SPのみ---------- */
@media screen and (max-width: 767px) {
	.sp_mt0 {
		margin-top: 0 !important;
	}
	.press .feature .section h2 {
		font-size: 2.2rem;
	}
	.seasonal .cmp-text.opening {
		font-size: 1.4rem;
	}
	.seasonal .feature .section h3 {
		width: 58%;
		margin: 15px auto -20px;
		z-index: 3;
		position: relative;
	}
	.seasonal .feature .section h3 img {
		margin-inline: auto;
		/* left: calc(50% - 88.75px); */
	}
	.tsugaru_cm .base_prod.bdr li {
		width: 100% !important;
	}
	.seasonal .txt_box {
		flex-direction: column;
		gap: 0;
	}
	.seasonal .txt_box h2 {
		font-size: 2.4rem;
	}
	.seasonal span.pick_tx {
		font-size: 1.6rem;
	}
	.seasonal .btn_list {
		padding: 0 10px;
		width: 100%;
	}
	.btn_hk {
		margin-bottom: 10px;
	}
	.tsugaru_cm.hk {
		position: relative;
	}
/* .bg_img::before{
	content: "";
	position: absolute;
	background: url(/content/dam/jretravel/site/page/hokkaido/images/tsugarukaisen/2025/img_tsugarukaisen_01.png) no-repeat 50% 50%;
	background-size: contain;
	width: 335px;
	height: 180px;
	display: block;
	right: 0;
  top: 24%;
	aspect-ratio: 621 / 386;
} */
	.tsugaru_cm.hk .bg_img {
		background: url(/content/dam/jretravel/site/page/hokkaido/images/tsugarukaisen/2025/img_tsugarukaisen_01_sp.png) no-repeat 50% 50%;
		background-size: contain;
		width: 139px;
		height: 144px;
		display: block;
		right: 0;
		top: 167px;
		position: absolute;
	}
	.tsugaru_cm.hk .bg_img02 {
		background: url(/content/dam/jretravel/site/page/hokkaido/images/tsugarukaisen/2025/img_tsugarukaisen_01_sp.png) no-repeat 50% 50%;
		background-size: contain;
		width: 139px;
		height: 144px;
		display: block;
		left: 0;
		top: 25px;
		position: absolute;
		transform: scale(-1, 1);
	}
	.aem-Grid.aem-Grid--12>.aem-GridColumn.aem-GridColumn--default--12:has(.bg_img) {
		overflow: hidden;
	}
	.tsugaru_cm.ao .bg_img_ao {
		background: url(/content/dam/jretravel/site/page/hokkaido/images/tsugarukaisen/2025/img_tsugarukaisen_ao_01_sp.png) no-repeat 50% 50%;
		background-size: contain;
		width: 139px;
		height: 144px;
		display: block;
		right: 0;
		top: 167px;
		position: absolute;
	}
	.tsugaru_cm.ao .bg_img02_ao {
		background: url(/content/dam/jretravel/site/page/hokkaido/images/tsugarukaisen/2025/img_tsugarukaisen_ao_01_sp.png) no-repeat 50% 50%;
		background-size: contain;
		width: 139px;
		height: 144px;
		display: block;
		left: 0;
		top: 25px;
		position: absolute;
		transform: scale(-1, 1);
	}
	/*----- 商品コンポーネント -----*/
	.seasonal .base_prod .day_trip.hotel li>a .img_box,
	.seasonal .base_prod.side_box .day_trip.hotel li>a .details_box {
		width: 100%;
	}
	.seasonal .base_prod.side_box .day_trip.hotel li>a .details_box {
		margin: 10px 0 0 0;
	}
	/* 前へ後ろへボタン */
	.plan .swiper-button-prev, .plan .swiper-container-rtl .swiper-button-next, .plan .swiper-button-next, .plan .swiper-container-rtl .swiper-button-prev {
		display: block !important;
	}
	.wrap_slide .swiper-button-prev, .wrap_slide .swiper-button-next {
		width: 32px;
    height: 32px;
		top: 35%;
	}
	.wrap_slide .swiper-button-next {
		right: -8px;
	}
	.wrap_slide .swiper-button-prev {
		left: -8px;
	}
	.wrap_slide .swiper-button-prev::before {
		left: 12px;
	}
	.wrap_slide .swiper-button-next::after {
		right: 12px;
	}
}