@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 .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;
}
.seasonal .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_label) {
	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;
	}
}

/*----- 2025.10 青函クーポン追加 -----*/
.wrap_container {
	border: solid 2px #16377a;
	width: 56%;
	padding: 20px 30px;
}
.wrap_container .inner_ttl {
	padding-bottom: 10px;
	border-bottom: solid 1px #222;
}
.wrap_container .inner_ttl h2 {
	font-size: 2.2rem;
	text-align: center;
	line-height: 1.3;
	color: #222;
}
.wrap_container .inner_ttl h2 .area_color01 {
	color: #e01998;
}
.wrap_container .inner_ttl h2 .area_color02 {
	color: #7362a5;
}
.wrap_container .inner_ttl h2 .area_color03 {
	color: #03a17e;
}
.wrap_container .inner_text {
	padding: 10px 20px 20px;
	/* display: flex;
	flex-direction: column; */
}
.wrap_container .category {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 20px 10px;
}
.wrap_container .category .item_label {
  width: 64px;
  padding: 2px 10px;
  background-color: #dceaf7;
  color: #0070c0;
  text-align: center;
  flex-shrink: 0;
}
.wrap_container .category .period_block {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  margin-bottom: 10px;
  width: 72%;
  text-align: left;
}
/* .wrap_container .term {
	display: grid;
	grid-template-columns: 0.8fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
} */

.wrap_container .term>.period_block {
	display: grid;
	grid-template-columns: 0.9fr 1fr 1fr;
	grid-template-rows: auto;
	gap: 10px 0;
}
.wrap_container .term>.period_block.entry .item_label {
	grid-column: 1 / 2;
  grid-row: 1 / 2;
}
.wrap_container .term>.period_block.entry .item_detail {
	grid-column: 2 / 4;
  grid-row: 1 / 2;
}


.wrap_container .term>.period_block.target .item_label {
	grid-column: 1 / 2;
  grid-row: 2 / 3;
}
.wrap_container .term>.period_block.target .item_detail {
	grid-column: 2 / 4;
  grid-row: 2 / 3;
}

/* .wrap_container .term>.period_block.entry {
	grid-column: 1 / 3;
  grid-row: 1 / 2;
}
.wrap_container .term>.period_block.target {
	grid-column: 1 / 3;
  grid-row: 2 / 3;
} */
.wrap_container .price_box {
	font-weight: bold;
	font-size: 1.8rem;
	letter-spacing: 1.0px;
}
.wrap_container .price_box .u_line {
  background: linear-gradient(transparent 60%, #ffcccc 60%);
}
.wrap_container .price_inner {
	font-size: 2.6rem;
	color: #ff0000;
}
/* ボタン */
.wrap_container .btn_list {
	display: flex;
  justify-content: space-evenly;
	gap: 10px;
}
.wrap_container .btn_item .btn_label a {
	color: #fff;
	padding: 8px;
	display: block;
	text-align: center;
	font-weight: bold;
	position: relative;
	background-color: #16377a;
	border-radius: 6px;
}
.wrap_container .btn_item .btn_label a::after {
	content: "";
	position: absolute;
	margin: auto;
	top: 0;
	bottom: 0;
	right: 6%; /* 右 */
	width: 8px;
	height: 8px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	transform: rotate(45deg);
}
.wrap_container .btn_item .btn_label a:hover {
	text-decoration: none;
	opacity: .7;
}
/* ボタンが1つの場合 */
.wrap_container .btn_item.btn01 {
	width: 68%;
}
.wrap_container .btn_item .btn_label a {
	padding: 10px;
}
/* ボタンが2つの場合 */
.wrap_container .btn_item.btn02 {
	width: calc((100% - (10px * 1)) / 2);
}
/* ----------SPのみ---------- */
@media screen and (max-width: 767px) {
	.wrap_container {
		width: 100%;
		padding: 20px 10px;
	}
	.wrap_container .category {
		padding: 0;
		align-items: center;
		margin-bottom: 10px;
	}
	.wrap_container .category .period_block {
		width: 100%;
		margin-bottom: 0;
	}
	.wrap_container .term>.period_block {
		display: block;
	}
	.wrap_container .term>.period_block.target {
		margin-top: 10px;
	}
	.wrap_container .btn_list {
		display: flex;
		gap: 10px;
    flex-direction: column;
	}
	.wrap_container .btn_item.btn01 {
		width: 100%;
	}
}