@charset "utf-8";

/* CSS Document */
/* .bg01.hokkaido {
	background-color: #DEEBF7;
}
.bg01.tohoku {
	background-color: #f3e6e6;
} */
.hokkaido .pattern {
	background-image: url(/content/dam/jretravel/site/page/hokkaido/images/bg_tsugarukaisen_01.png);
	width: 100%;
	height: 78px;
	position: relative;
	margin-top: -38px;
}
.tohoku .pattern {
	background-image: url(/content/dam/jretravel/site/page/hokkaido/images/bg_tsugarukaisen_02.png);
	width: 100%;
	height: 78px;
	position: relative;
	margin-top: -38px;
}
#tsugarukaisen h2 img:hover {
	opacity: initial;
}
.tsugaru_contents {
	display: flex;
}
.txt_box {
	padding-left: 2.0rem;
	width: 52%;
}
.txt_box h3 {
	padding: 1.1rem 0;
	/* width: 70%; */
}
.txt_box ul {
	display: flex;
	justify-content: space-around;
	margin-top: 2.0rem;
	flex-direction: column;
	position: relative;
	gap: 20px;
}
.hotel li {
	background-color: #fff;
}
/* -----PCのみ----- */
@media screen and (min-width:768px) {
	.txt_box ul li a:hover {
		opacity: 0.7;
	}
	#tsugarukaisen .plan h2 {
		font-size: 2.4rem;
		width: 30%;
		margin: 20px auto
	}
}
/* -----SPのみ----- */
@media screen and (max-width: 767px) {
	#tsugarukaisen .plan h2 {
		width: 70%;
	}
	.txt_box h3, .txt_box ul li {
		text-align: center;
	}
	.tsugaru_contents, .txt_box ul {
		flex-direction: column;
	}
	/* .img_box, .txt_box,	.txt_box ul li {
		width: 94%;
		margin: 0 auto;
	} */
	.txt_box, .txt_box ul li {
		padding: 0;
	}
	/* .txt_box ul li:nth-of-type(2) {
		margin-top: 1.6rem;
	} */
	#tsugarukaisen .base_prod .hotel {
		width: 94%;
		margin: auto;
	}
	/* #tsugarukaisen .plan .hotel li {
		width: 45% !important;
	} */
	.txt_box ul li a {
		font-size: 1.6rem;
	}
	.txt_box h3 {
		width: 100%;
	}
	.hokkaido .pattern,
	.tohoku .pattern {
		width: 100%;
		height: 63px;
		margin-top: -8px;
	}
}
/*----- ツガルカイセン2024 -----*/
#tsugarukaisen .plan .hotel.day_trip li {
	width: 100% !important;
}
.hokkaido_btn, .aomori_btn {
	width: 100%;
}

#tsugarukaisen .base_prod.sort li:nth-child(-n+2)>a .details_box,
.base_prod.side_box .hotel li>a .details_box {
	text-align: left;
}
button:hover {
	background-position-y: -50px;
}
button:active {
	transform: scale(0.99);
}
.top .section.tsugaru_ttl h3 {
	display: inline-block;
	position: relative;
	color: #fff;
	font-weight: 500;
	font-size: 1.9rem;
	text-decoration: none;
	text-transform: uppercase;
	padding: 8px 60px;
	text-align: center;
	border: none;
	clip-path: polygon(7% 0, 93% 0, 100% 50%, 93% 100%, 7% 100%, 0 50%);
	background-color: #000000;
	background-image: radial-gradient(200% 70% at center 20%, rgb(214 216 217) -30%, rgb(143 149 151) 49%, rgb(112 120 125) 50%, rgb(40 48 47) 150%);
	background-repeat: no-repeat;
	transition: background-position-y ease-in-out 250ms;
	border-radius: 0;
}
.top .section.tsugaru_ttl a {
	display: inline-block;
	filter: drop-shadow(3px 4px 0px #009690);
	margin-inline: auto;
}
.section.tsugaru_ttl {
	text-align: center;
}
.tsugaru_contents a {
	display: block;
	/* padding: 30px 0; */
}
/*北海度 ボタン*/
.hokkaido {
	.tsugaru_contents .hokkaido_link a {
		display: block;
		background: url("/content/dam/jretravel/site/page/hokkaido/images/btn_hokkaido_2.png") no-repeat;
		background-size: contain;
		width: 400px;
		height: 63px;
		transition: all 0.3s ease-in-out;
	}
	.tsugaru_contents .hokkaido_link a:hover {
		background: url("/content/dam/jretravel/site/page/hokkaido/images/btn_hokkaido_2_on.png") no-repeat;
		background-size: contain;
		width: 400px;
		height: 63px;
		opacity: 1;
	}
	.tsugaru_contents .aomori_link a {
		display: block;
		background: url("/content/dam/jretravel/site/page/hokkaido/images/btn_aomori_shako.png") no-repeat;
		background-size: contain;
		width: 400px;
		height: 63px;
		transition: all 0.3s ease-in-out;
	}
	.tsugaru_contents .aomori_link a:hover {
		background: url("/content/dam/jretravel/site/page/hokkaido/images/btn_aomori_shako_on.png") no-repeat;
		background-size: contain;
		width: 400px;
		height: 63px;
		opacity: 1;
	}
}

/*青森 ボタン*/
.aomori {
	.tsugaru_contents .hokkaido_link a {
		display: block;
		background: url("/content/dam/jretravel/site/page/hokkaido/images/btn_hokkaido_madara.png") no-repeat;
		background-size: contain;
		width: 400px;
		height: 63px;
		transition: all 0.5s ease-in-out;
	}
	.tsugaru_contents .hokkaido_link a:hover {
		background: url("/content/dam/jretravel/site/page/hokkaido/images/btn_hokkaido_madara_on.png") no-repeat;
		background-size: contain;
		width: 400px;
		height: 63px;
		opacity: 1;
	}
	.tsugaru_contents .aomori_link a {
		display: block;
		background: url("/content/dam/jretravel/site/page/hokkaido/images/btn_aomori_2.png") no-repeat;
		background-size: contain;
		width: 400px;
		height: 63px;
		transition: all 0.5s ease-in-out;
	}
	.tsugaru_contents .aomori_link a:hover {
		background: url("/content/dam/jretravel/site/page/hokkaido/images/btn_aomori_2_on.png") no-repeat;
		background-size: contain;
		width: 400px;
		height: 63px;
		opacity: 1;
	}
}
/* .tsugaru_contents li:nth-child(2) {
	margin-top: 20px;
} */
.tsugaru_contents a img:hover, .txt_box ul li a:hover {
	opacity: 1;
}
.hokkaido_btn.btn a:hover {
	opacity: 0.7;
}
.hokkaido .pattern {
	opacity: 0.4;
}
.tohoku .pattern {
	opacity: 0.4;
}

.tsugaru_contents .txt_box h2 {
	color: #000;
	font-size: 3.0rem;
}
.tsugaru_contents rt {
	font-size: 0.85rem;
}
/*2024.05.13 修正*/
.day_trip .cautions {
	font-size: 1.1rem;
}
/* .hokkaido .pattern {
	opacity: 0.7;
	background-image: url(/content/dam/jretravel/site/page/hokkaido/images/bg_tsugarukaisen_03.png);
}
.tohoku .pattern {
	opacity: 0.7;
	background-image: url(/content/dam/jretravel/site/page/hokkaido/images/bg_tsugarukaisen_04.png);
} */
#tsugarukaisen .plan.ep_5 h2 {
	width: 46%;
	margin: 10px auto;
}
.ep_5 .text:has(.cmp-text.cautions) {
	font-size: 1.2rem;
}

/*----- ツガルカイセン 2025 -----*/
:root {
	--nv: #081135;
	--nvb: #3748b1;
	--blu: #dee2f5;
	--rd: #470a08;
	--rrd: #b13739;
	--pk: #faeeee;
}
#hokkaido_link, #aomori_link {
	padding-top: 100px;
  margin-top: -100px;
}
.hokkaido .tsugaru_contents {
	span.pick_tx {
		background-color: #13235d;
	}
}
.aomori .tsugaru_contents {
	span.pick_tx {
		background-color: #6a1512;
	}
}
.tsugaru_contents {
		span.pick_tx {
		font-size: 1.6rem;
		border: none;
		color: #fff;
		padding: 4px 4px 4px 10px;
		margin: 8px 0 8px;
	}
	.detail {
		font-size: 1.5rem;
	}
}
.tsugaru_cm {
	.base_prod.bdr li {
		border: solid 1px var(--nv);
	}
	.base_prod .hotel li>a .details_box>.area {
		background-color: var(--nv);
	}
	.base_prod .hotel li>a .details_box>.tag {
		background-color: var(--blu);
		padding: 8px;
		border-radius: 6px;
	}
	.base_prod .hotel li>a .details_box>.tag>.icon {
		color: var(--nv);
		border: none;
		background-color: transparent;
		padding: 0;
		font-size: 1.4rem;
	}
	.base_prod .hotel li>a .details_box>.tag>.icon:first-child {
		border-bottom: 1px solid var(--nv);
    display: block;
		border-radius: 0;
		font-weight: bold;
	}
	.base_prod .hotel li>a .details_box>.tag>.icon:nth-child(2) {
		margin: .5rem 0 0 0;
	}
	.feature .section.hk_ttl {
		text-align: center;
	}
	.feature .section h3 {
		display: inline-block;
		border-bottom: 6px solid var(--nvb);
		font-size: 2.8rem;
		color: var(--nv);
		background-color: transparent;
	}
	&.higaeri {
		.base_prod .hotel li>a .details_box>.tag {
			display: none;
		}
	}
	.hokkaido_btn.btn a, .aomori_btn.btn a {
		display: block;
		width: 100%;
		height: 100%;
		padding: 10px;
		text-align: center;
		color: #fff;
		text-decoration: none;
		position: relative;
		line-height: 1.7;
	}
	.hokkaido_btn.btn a {
		background: var(--nv);
	}
	.aomori_btn.btn a {
		background: var(--rd);
	}
	.hokkaido_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: 8%;
		-webkit-transform: rotate(45deg) translate(-35%, -40%);
		transform: rotate(45deg) translate(-35%, -40%);
	}
	.aomori_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: 8%;
		-webkit-transform: rotate(45deg) translate(-35%, -40%);
		transform: rotate(45deg) translate(-35%, -40%);
	}
	.hokkaido_btn a span, .aomori_btn a span {
		font-size: 1.8rem;
	}
}

.tsugaru_cm.ao {
	.feature .section h3 {
		border-bottom: 6px solid var(--rrd);
		color: var(--rd);
	}
	.base_prod.bdr li {
		border: solid 1px var(--rd);
	}
	.base_prod .hotel li>a .details_box>.area {
		background-color: var(--rd);
	}
	.base_prod .hotel li>a .details_box>.tag {
		background-color: #fcf6f6;
	}
	.base_prod .hotel li>a .details_box>.tag>.icon:first-child {
		border-bottom: 1px solid var(--rd);
	}
	.base_prod .hotel li>a .details_box>.tag>.icon {
		color: var(--rd);
	}
	.txt_day {
		background-color: #fcf6f6;
		border-radius: 6px;
		padding: 8px;
		color: var(--rd);
		font-size: 1.4rem;
	}
	.term_day {
		font-size: 1.1rem;
		margin-top: .5rem;
    margin-bottom: .5rem;
	}
	&.higaeri .base_prod.bdr li {
		margin-bottom: 10px;
	}
}
.bg01.hokkaido {
	background-color: #edeffa;
}
.bg01.tohoku {
	background-color: #fcf6f6;
}

/*-----  -----*/

@media screen and (min-width: 768px) {
	#tsugarukaisen .base_prod .hotel.hotel.day_trip li>a .img_box {
		margin-bottom: 0;
	}
	.hokkaido_btn, .aomori_btn {
		width: 50%;
	}
	.freehtml:has(.hokkaido_btn), .freehtml:has(.aomori_btn) {
		text-align: center;
	}
	/* .tsugaru_contents .hokkaido_link,
	.tsugaru_contents .aomori_link {
		width: 79.5%;
	} */
	/* .tsugaru_contents a {
		padding: 28px 0;
	} */
	/*----- PCのページネーションと矢印 -----*/
	/* .aomori .swiper-container .swiper-button-next.swiper-button-disabled,
	.aomori .swiper-container .swiper-button-prev.swiper-button-disabled,
	.aomori .swiper-container-horizontal>.swiper-pagination-bullets,
	.aomori .swiper-pagination-custom,
	.aomori.swiper-pagination-fraction {
		display: none;
	} */
}
/* ----------SPのみ---------- */
@media screen and (max-width: 767px) {
	/*北海度 ボタン*/
	.tsugaru_contents .hokkaido_link,
	.tsugaru_contents .hokkaido_link:hover,
	.tsugaru_contents .aomori_link,
	.tsugaru_contents .aomori_link:hover {
		width: 100%;
		aspect-ratio: 6 / 1;
	}
	/*青森 ボタン*/
	.tsugaru_contents.hotate .hokkaido_link,
	.tsugaru_contents.hotate .hokkaido_link:hover,
	.tsugaru_contents.hotate .aomori_link,
	.tsugaru_contents.hotate .aomori_link:hover {
		width: 98%;
	}
	.term {
		text-align: center;
	}
	/*日帰りプラン*/
	#tsugarukaisen_higaeri .base_prod.side_box .hotel.day_trip li>a .img_box,
	#tsugarukaisen_higaeri .base_prod.side_box .hotel.day_trip li>a .details_box {
		width: 100%;
	}
	.base_prod.side_box .hotel.day_trip li>a .details_box {
		margin-left: 0;
	}
	#tsugarukaisen .plan.ep_5 h2 {
		width: 90%;
		margin: 10px auto;
	}
	.ep_5 .text:has(.cmp-text.cautions) p {
		text-align: left !important;
	}
}
/* @media (hover: none) {
  hoverが使えない端末 スマホ想定
	北海度 ボタン
	.tsugaru_contents .hokkaido_link:active {
		background: url("/content/dam/jretravel/site/page/hokkaido/images/btn_hokkaido_2_on.jpg") no-repeat;
		background-size: contain;
		height: auto;
		opacity: 1;
	}
	.tsugaru_contents .aomori_link:active {
		background: url("/content/dam/jretravel/site/page/hokkaido/images/btn_aomori_on.jpg") no-repeat;
		background-size: contain;
		height: auto;
		opacity: 1;
	}
} */
/* ----------PCのみ 2025---------- */
@media screen and (min-width: 768px) {
	.tsugaru_cm.ao {
		&.higaeri {
			.swiper-container .swiper-button-next.swiper-button-disabled,
			.swiper-container .swiper-button-prev.swiper-button-disabled,
			.swiper-container-horizontal>.swiper-pagination-bullets,
			.swiper-pagination-custom,
			.swiper-pagination-fraction {
				display: none;
			}
		}
	}
}
/* ----------SPのみ 2025---------- */
@media screen and (max-width: 767px) {
	.tsugaru_contents .txt_box h2 {
		font-size: 2.8rem;
    text-align: center;
	}
	.tsugaru_cm {
    .feature .section h3 {
			font-size: 2.6rem;
    }
		.base_prod.bdr li {
			width: 86% !important;
		}
		&.higaeri .base_prod.bdr li {
			width: 100% !important;
		}
		&.higaeri.ao .base_prod.bdr li {
			width: 86% !important;
		}
		.hokkaido_btn.btn, .aomori_btn.btn {
			padding: 8px 10px;
		}
	}
	.tsugaru_contents {
		.txt_box {
			width: 100%;
			padding: 0 10px;
		}
	}
	.hokkaido {
    .tsugaru_contents .hokkaido_link a, .tsugaru_contents .aomori_link a,
    .tsugaru_contents .hokkaido_link a:hover, .tsugaru_contents .aomori_link a:hover {
			width: 100%;
			height: 100%;
    }
	}
	.aomori {
    .tsugaru_contents .hokkaido_link a, .tsugaru_contents .aomori_link a,
    .tsugaru_contents .hokkaido_link a:hover, .tsugaru_contents .aomori_link a:hover
		 {
			width: 100%;
			height: 100%;
    }
	}
}