@charset "utf-8";
:root{
	--default-color-black: #2c2a29;
    --content-width-pc: 1104px;
	--content-color-wine: #811e27;
	--content-color-khaki: #8A6B37;
	--content-color-brown: #a24c00;
	--content-color-yellow: #fded3c;
	--content-color-red: #df0d00;
	--content-color-orange: #ff7c1b;
	--content-color-green: #34870e;
	--content-color-navy: #02117f;
	--content-color-navy-d: #114f7f;
	--bg-color-orange: #ffe7a6;
	--bg-color-green: #d7f8b3;
	--bg-color-pink: #ffd9d9;
	--bg-color-yellow: #fdffde;
	--bg-color-blue: #ddf9ff;
	--content-border-yellow: linear-gradient(transparent 60%, #fded3c 0%);
}
.nopc {
  display: none
}
.main {
	-webkit-text-size-adjust: none;
}
.contents {
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 16px;
	line-height: 1.5;
	color: var(--default-color-black);
	a {
		text-decoration: none;
		&:hover {
			opacity: 0.8;
			transition: all 0.6s ease;
		}
	}
	img {
        max-width: 100%;
		height: auto;
		&.round {
			border-radius: 16px;
		}
    }
	.inner {
        width: var(--content-width-pc);
		max-width: 100%;
        margin: 0 auto;
	}
	mark {
		background: var(--content-border-yellow);
		color: inherit;
	}
}

/*-----------------------------------------
メインビジュアル
-------------------------------------------*/
#mainvisual {
	width: 100%;
	height: 800px;
	overflow: hidden;
	position: relative;
	text-align: center;
	.bg-img {
		/* position: absolute; から fixed に変更(iPadバグのため) */
		position: fixed; 
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		z-index: -1;
		background-position: center center;
		background-size: cover;
		opacity: 0;
		animation: fade-animation 12s infinite;
	}
	.img1 { background-image: url('../images/main-bg1.webp'); animation-delay: 0s;}
	.img2 { background-image: url('../images/main-bg2.webp'); animation-delay: 4s;}
	.img3 { background-image: url('../images/main-bg3.webp'); animation-delay: 8s;}

	.fukidashi {
		position: absolute;
		top: 150px;
		left: calc(50% - 200px); 
		transform: translateX(-50%);
	}
	.badge {
		position: absolute;
		top: 110px;
		right: calc(50% - 350px); 
	}
	.title {
		position: absolute;
		top: 90px;
		right: 0;
		left: 0;
		margin: 0 auto;
	}
	.text {
		position: absolute;
		top: 570px;
		right: 0;
		left: 0;
		margin: 0 auto;
	}
	&::after {
		content: "";
		display: block;
		width: 100%;
		height: 380px;
		background: url("../images/main-bottom-pc.png") no-repeat bottom center;
		position: absolute;
		bottom: 0;
	}
}
/* フェードアニメーションの定義 */
@keyframes fade-animation {
  0%   { opacity: 0; } 
  10%  { opacity: 1; } 
  33%  { opacity: 1; }
  43%  { opacity: 0; }
  100% { opacity: 0; }
}
/*ipad用調整*/
.is-ipad {
	.ui-static-breadcrumb {
		margin-top: -1px;
	}
	#mainvisual .bg-img {
		position: absolute;
		height: 100%;
	}
}
/*パンくず調整*/
.ui-static-breadcrumb {
	background-color: #fff;
}
/*-----------------------------------------
導入
-------------------------------------------*/
#lead {
	width: 100%;
	background: var(--content-color-wine) url("../images/lead-bg.png") repeat left top / 200px;
	position: relative;
	.inner {
		position: relative;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 40px 0;
		background: url("../images/lead-illust-pc.png") no-repeat left 425px top 120px;
	}
	h2 {
		position: absolute;
		left: -10px;
		top: -20px;
	}
	.text-area {
		width: 550px;
		.title {
			padding: 100px 0 0 0;
			margin-bottom: 16px;
			font-size: 44px;
			line-height: 1.3;
			font-weight: 900;
			color: #fff;
			span {
				display: block;
				font-size: 0.7em;			
			}
		}
		.fukidashi {
			margin-left: 190px;
			position: relative;
			display: inline-block;
			width: 216px;
			padding: 8px 16px;
			border: 2px solid var(--content-color-khaki);
			border-radius: 8px;
			background-color: #fff;
			font-size: 16px;
			line-height: 1.3;
			font-weight: 500;
			text-align: left;
			box-shadow: 3px 3px 0px 0px rgba(0, 0, 0, 0.3);
			&::before {
			  content: "";
			  position: absolute;
			  bottom: 0;
			  left: 30%;
			  border-style: solid;
			  border-width: 30px 40px 0 0;
			  border-color: var(--content-color-khaki) transparent transparent;
			  translate: -50% 100%;
			  transform: skew(-45deg);
			  transform-origin: top;
			}
			&::after {
			  content: "";
			  position: absolute;
			  bottom: 0;
			  left: 30%;
			  border-style: solid;
			  border-width: 24px 32px 0 0;
			  border-color: #fff transparent transparent;
			  translate: calc(-50% - 1px) 100%;
			  transform: skew(-45deg);
			  transform-origin: top;
			}
		}
	}
	.movie {
		.title {
			color: #fff;
			font-size: 18px;
			font-weight: 700;
			margin-bottom: 8px;
		}
		iframe {
		  width: 530px;
		  height: 298px;
		  border: none;
		}
		.coming {
			width: 530px;
			height: 298px;
			background-color: #000;
			font-size: 38px;
			font-weight: 900;
			line-height: 298px;
			text-align: center;
			color: #555;
		}
	}
	.housou {
		width: 830px;
		margin: 20px 0 0 auto;
		background-color: #fff;
		padding: 8px 24px;
		border-radius: 8px;
		position: relative;
		.abc {
			display: inline-block;
			background-color: var(--content-color-khaki);
			font-weight: 700;
			font-size: 14px;
			padding: 0 24px;
			color: #fff;
			margin-bottom: 4px;
		}
		ul li {
			font-size: 14px;
			font-weight: 600;
			border-bottom: dotted 1px var(--content-color-khaki);
			span {
				color: var(--content-color-khaki);
			}
		}
		.okita {
			position: absolute;
			right: -20px;
			top: -15px;
			display: inline-block;
			animation: fuwafuwa-anim 3s ease-in-out infinite;
			width: 200px;
		}
	}
	.kobitsu {
		position: absolute;
		left: -20px;
		bottom: 0;
	}
	.attention {
		width: 830px;
		margin: 30px 0 0 auto;
		background-color: #fff;
		padding: 8px 20px 8px 20px;
		font-size: 14px;
		background-color: #fff5f5;
		border: solid 1px #f00;
		color: #f00;
		.attentionMsg__title {
			font-weight: bold;
		}
	}
}
@keyframes fuwafuwa-anim {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-5px) rotate(4deg);
  }
}

/*------------------------------------------------
	アニメーション
--------------------------------------------------*/
/*おきた*/
@keyframes korokoro-anim {
  0%   { transform: translate(0%, 0%); }
  5%   { transform: translate(5%, 0%) rotate(5deg); }
  25%  { transform: translate(10%, 0%) rotate(10deg); }
  30%  { transform: translate(-5%, 0%) rotate(-5deg); }
  35%  { transform: translate(-8%, 0%) rotate(-8deg); }
  45%  { transform: translate(5%, 0%) rotate(5deg); }
  50%  { transform: translate(8%, 0%) rotate(8deg); }
  60%  { transform: translate(-3%, 0%) rotate(-3deg); }
  65%  { transform: translate(-4%, 0%) rotate(-4deg); }
  75%  { transform: translate(0%, 0%) rotate(0deg); }
  100% { transform: translate(0%, 0%) rotate(0deg); }
}
/*スクロールフェードイン*/
.scrollin {
  opacity: 0;
  transform: translateY(100px);
  transition: opacity 1.0s ease-out, transform 1.0s ease-out;
}
.scrollin.active {
  opacity: 1;
  transform: translateY(0);
}

/*-----------------------------------------
電話受付
-------------------------------------------*/
.contact {
	width: 100%;
	background-color: #fff;
	border-top: solid 4px var(--content-color-navy);
	border-bottom: solid 4px var(--content-color-navy);
	padding: 16px 0;
	.inner {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 24px;
		h2 {
			background-color: var(--content-color-navy);
			border-radius: 8px;
			color: #fff;
			font-size: 18px;
			font-weight: 700;
			padding: 8px 36px;
		}
		.cc {
			font-size: 18px;
			font-weight: 700;
			&::before {
				content: "";
				display: inline-block;
				vertical-align: middle;
				width: 44px;
				height: 44px;
				background: url("../images/icon-tel.svg") no-repeat center center / contain;
				margin-right: 8px;
				position: relative;
  				top: -2px;
			}
		}
		.tel {
			font-family: Roboto;
			font-size: 48px;
			font-weight: 900;
			a {
				color: inherit;
				pointer-events: none;
			}
		}
		.time {
			font-size: 16px;
			font-weight: 600;
		}
	}
}

/*-----------------------------------------
ツアーポイント
-------------------------------------------*/
#tourpoint {
	width: 100%;
	.inner {
			position: relative;
	}	
	.title {
		width: var(--content-width-pc);
		margin: 0 auto 24px;;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 0 24px;
		position: relative;
		.no {
			flex: none;
			width: 160px;
			height: 160px;
			background-repeat: no-repeat;
			background-size: contain;
			font-family: Roboto;
			font-weight: 900;
			font-size: 56px;
			padding-top: 56px;
			text-align: center;
			color: #fff;
			-webkit-text-stroke: 4px var(--default-color-black);
			paint-order: stroke;
			.point1 &,.point2 & {background-image: url("../images/point-no-bg-hotel.png");}
			.point3 & {background-image: url("../images/point-no-bg-3.png");}
			.point4 & {background-image: url("../images/point-no-bg-4.png");}
			.point5 & {background-image: url("../images/point-no-bg-5.png");}
			.point6 & {background-image: url("../images/point-no-bg-6.png");}
			.point7 &,.point8 & {background-image: url("../images/point-no-bg-sightseeing.png");}
			.point9 &,.point10 &,.point11 &,.point12 & {background-image: url("../images/point-no-bg-other.png");}
		}
		h3 {
			flex: 1;
			font-size: 40px;
			font-weight: 900;
			line-height: 1.3;
			.tag {
				display: inline-block;
				background-color: var(--content-color-khaki);
				color: #fff;
				font-size: 22px;
				font-weight: 700;
				padding: 0 8px 3px;
				.point1 & {
					margin-bottom: 8px;
				}
			}
			.f-small {
				font-size: 0.7em;
			}
			.note {
				display: block;
				font-size: 14px;
				font-weight: 500;
				padding-top: 16px;
			}
		}
	}
	/*▼ホテル背景*/
	.bg-hotel {
		width: 100%;
		background-image: url("../images/hotel-bg-top.png"),url("../images/hotel-bg-bottom.png"),url("../images/hotel-bg-pc.jpg");
		background-repeat: no-repeat,no-repeat,no-repeat;
		background-size: auto,auto,cover;
		background-position: center top,center bottom, center top;
		padding: 96px 0;
	}
	/*ポイント1*/
	.point1 {
		margin-bottom: 80px;
		.title .base {
			font-size: 12px;
			font-weight: 500;
			margin-left: 16px;
		}
		.okita {
			position: absolute;
			top: 920px;
			right: 0;
		}
		.colony {
			display: flex;
			justify-content: flex-end;
			padding: 24px 40px;
			background-color: #fff;
			border: 3px solid var(--content-color-khaki);
			outline: 1px solid var(--content-color-khaki);
			outline-offset: -6px;
			margin-top: 96px;
			position: relative;
			.text {
				width: 320px;
				margin-right: 16px;
				dt {
					font-size: 20px;
					font-weight: 700;
				}
			}
			.ph {
				width: 500px;
				display: flex;
				gap: 8px;
			}
			&::before {
				content: "";
				display: block;
				width: 286px;
				height: 73px;
				background: url("../images/illust-flower.png") no-repeat center center / contain;
				position: absolute;
				top: -76px;
				left: 40px;
			}
			.kawasaki {
				position: absolute;
				left: 0;
				bottom: 0;
			}
			.kawasaki-f {
				position: absolute;
				top: -40px;
				left: 140px;
			}
		}
 	}
	.hotel-wrap {
		display: grid;
		width: 100%;
		grid-template-columns: 392px minmax(0, 1fr) 392px;
		gap: 12px;
		img {
			display: block;
		}
		.ph1 {
			grid-column: 1 / 3;
			grid-row: 1 / 3;
		}
		.text1 {
			grid-column: 3;
			grid-row: 1;
		}
		.ph2 {
			grid-column: 2 / 4;
			grid-row: 3 / 5;
		}
		.ph3 {
			grid-column: 3;
			grid-row: 2;
			width: 300px;
			justify-self: left;
			align-self: end;
		}
		.text2 {
			grid-column: 1;
			grid-row: 3;
		}
		.ph4 {
			grid-column: 1;
			grid-row: 4;
			width: 300px;
			justify-self: right;
			align-self: end;
		}
	}
	/*ポイント2*/
	.point2 {
		.okita {
			position: absolute;
			top: 320px;
			left: 0;
		}
		.furukawa {
			position: absolute;
			left: 0;
			bottom: -96px;
		}
		.furukawa-f {
			position: absolute;
			left: 173px;
			bottom: 30px;
		}
	}
	.lounge-wrap {
		display: grid;
		width: 100%;
		grid-template-columns: 392px minmax(0, 1fr) 392px;
		gap: 12px;
		margin-bottom: 40px;
		img {
			display: block;
		}
		p {
			position: relative;
			span {
				position: absolute;
				right: 3px;
				bottom: 0;
				font-size: 12px;
				font-weight: 600;
				-webkit-text-stroke: 2px #fff;
				paint-order: stroke fill;
			}
		}
		.text {
			grid-column: 1;
			grid-row: 1;
		}
		.ph1 {
			grid-column: 2 / 4;
			grid-row: 1;
		}
		.ph2 {
			grid-column: 1 / 3;
			grid-row: 2 / 4;
		}
		.ph3 {
			grid-column: 3;
			grid-row: 2;
			width: 300px;
			height: 197px;
			justify-self: left;
		}
		.info {
			grid-column: 3;
			grid-row: 3;
			align-self: end;
			width: 100%;
			background-color: #fff;
			position: relative;
			dt {
				font-weight: 700;
				line-height: 1.8;
				background-color: #fae3bb;
				padding: 0 16px;
			}
			dd {
				padding: 8px 16px;
			}
			&::before {
				content: "";
				display: block;
				width: 215px;
				height: 55px;
				background: url("../images/illust-flower.png") no-repeat center center / contain;
				position: absolute;
				top: -55px;
				right: 0px;
			}
		}
	}
	/*正解おきた吹き出し*/
	.seikaiokita-wrap {
		display: flex;
		flex-direction: row-reverse;
		align-items: center;
		gap: 16px;
		.seikaiokita {
			width: 170px;
			display: inline-block;
			animation: korokoro-anim 2.5s linear infinite;
		}
		.fukidashi {
			position: relative;
			display: inline-block;
			margin-right: 18px;
			padding: 16px 24px;
			border-radius: 8px;
			background-color: #fff;
			font-size: 18px;
			font-weight: 700;
			color: #15a9b5;
			box-shadow: 2px 2px 0 #15a9b5;
			&::before {
				content: "";
				position: absolute;
				top: 50%;
				right: 0;
				border-style: solid;
				border-width: 10px 0 10px 24px;
				border-color: transparent transparent transparent #fff;
				translate: 100% -50%;
			}
		}
	}
	/*▼ポイント3*/
	.point3 {
		padding: 64px 0 96px;
		background-color: var(--bg-color-orange);
		background-image: url("../images/point3-bg-top-pc.png"),url("../images/point3-bg-bottom-pc.png");
		background-repeat: no-repeat,no-repeat;
		background-position: top center,bottom center;
		.kobitsu {
			position: absolute;
			right: 50px;
			top: -40px;
		}
		.kobitsu-f {
			position: absolute;
			right: 210px;
			top: -45px;
		}
		.flex-box {
			width: 100%;
			display: flex;
			justify-content: space-between;
			.text {
				width: 35%;
				dt {
					font-size: 36px;
					font-weight: 900;
					color: var(--content-color-brown);
					border-left: solid 8px var(--content-color-brown);
					padding-left: 16px;
					margin-bottom: 24px;
					span {
						display: block;
						font-size: 18px;
						font-weight: 600;
						color: var(--default-color-black);
					}
				}
				dd {
					text-align: justify;
					.note {
						display: block;
						font-size: 0.8em;
						margin-top: 16px;
					}
				}
			}
			.ph {
				width: 63%;
			}
			&:nth-of-type(2) {
				flex-direction: row-reverse;
				background: url("../images/point3-line.png") no-repeat top center;
				padding-top: 48px;
				margin-top: 40px;				
			}
		}
		.cafe {
			width: 100%;
			min-height: 240px;
			background: url("../images/point3-cafe-bg-pc.png") no-repeat top center;
			padding: 40px 48px 0 184px;
			display: flex;
			justify-content: space-between;
			.text {
				width: 65%;
				dt {
					font-size: 24px;
					font-weight: 900;
					color: var(--content-color-brown);
					margin-bottom: 8px;
					span {
						font-size: 0.8em;
						color: var(--default-color-black);
					}
				}
			}
			.ph {
				width: 31%;
			}
		}
	}
	
	/*ポイント4*/
	.point4 {
		padding: 64px 0 96px;
		background: #000e21 url("../images/point4-bg-pc.jpg") no-repeat top center;
		.inner {
			padding-top: 230px;
		}
		.title-text {
			width: 100%;
			font-size: 18px;
			color: #fff;
			padding-left: 184px;
		}
		.flex-box {
			width: 100%;
			display: flex;
			justify-content: space-between;
			.text-area {
				width: 48%;
				position: relative;
				dt {
					margin-bottom: 16px;
				}
				.text {
					padding: 0 0 0 200px;
					text-align: justify;
					color: #fff;
				}
			}
			.ph {
				width: 48%;
				img {
					border: solid 1px #fff;
				}
				span {
					display: block;
					font-size: 12px;
					color: #fff;
					margin-top: 8px;
				}
			}
			&:nth-of-type(2) {
				flex-direction: row-reverse;
				margin-top: 64px;
				.text-area {
					.text {
						padding: 0 200px 0 0;
					}
				}
			}
			.furukawa-p4-f {
				position: absolute;
				left: 0;
				bottom: 190px;
			}
			.furukawa-p4 {
				position: absolute;
				left: 0;
				bottom: -30px;
			}
			.kawasaki-p4-f {
				position: absolute;
				right: 0;
				bottom: 188px;
			}
			.kawasaki-p4 {
				position: absolute;
				right: -15px;
				bottom: -35px;
			}
		}
	}
	
	/*ポイント5・6*/
	.bg-themepark {
		width: 100%;
		background-image: url("../images/themepark-bg-top-pc.png"),url("../images/themepark-bg-bottom-pc.png"),linear-gradient(0deg, #3ba8cc 30%, #0e593b 60%);
		background-repeat: no-repeat,no-repeat,no-repeat;
		background-position: top center,bottom center,center center;
		padding: 64px 0 96px;
	}	
	.point5 {
		.flex-box {
			width: 100%;
			display: flex;
			justify-content: space-between;
			margin-bottom: 200px;
			position: relative;
			.ph1 {
				width: 50%;
				border: solid 1px #fff;
			}
			.text {
				width: 46%;
				dt {
					font-size: 28px;
					font-weight: 700;
					margin-bottom: 16px;
					color: var(--content-color-yellow);
				}
				dd {
					text-align: justify;
					color: #fff;
					span {
						color: var(--content-color-yellow);
					}
				}
			}
			.ph2 {
				position: absolute;
				left: 10px;
				top: 320px;
			}
			.ph3 {
				position: absolute;
				right: 0px;
				top: 340px;
				width: 250px;
			}
		}
	}
	.point6 {
		padding-top: 64px;
		.flex-box {
			width: 100%;
			display: flex;
			justify-content: space-between;
			.text {
				width: 38%;
				text-align: justify;
				color: #fff;
			}
			.ph {
				width: 62%;
				text-align: right;
			}
		}
		.kobitsu {
			position: absolute;
			left: -10px;
			bottom: -96px;
		}
		.kobitsu-f {
			position: absolute;
			left: 250px;
			bottom: 22px;
		}
	}
	/*ポイント7*/
	.point7 {
		padding: 64px 0 40px;
		background-color: var(--bg-color-green);
		.title {
			position: relative;
			&::after {
				content: "";
				display: block;
				width: 381px;
				height: 110px;
				background: url("../images/point7-illust.png") no-repeat;
				position: absolute;
				right: 0;
				top: -40px;
			}
			.title-text {
				width: 100%;
				padding: 0 250px 0 184px;
				margin-bottom: 24px;
			}
		}
		.okita {
			position: absolute;
			top: -150px;
			right: 0;			
		}
		.bus {
			position: absolute;
			top: 215px;
			left: -20px;
			width: 110px;
		}
		.spot-list {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			gap: 40px 0;
			margin-bottom: 40px;
			li {
				background-color: #fff;
				border-radius: 8px;
				font-size: 14px;
				line-height: 1.3;
				width: 240px;
				box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.3);
				img {
					border-top-left-radius: 8px;
					border-top-right-radius: 8px;
				}
				span {
					display: block;
					padding: 8px;
				}
				&:nth-child(1),&:nth-child(10) {
					width: 80px;
					background-color: transparent;
					align-self: center;
					box-shadow: none;
				}
			}
		}
		.lunch {
			width: 100%;
			padding: 24px 32px 24px 96px;
			display: flex;
			justify-content: space-between;
			border: dashed 2px var(--content-color-green);
			border-radius: 16px;
			background-color: #fff;
			position: relative;
			.icon {
				position: absolute;
				left: -20px;
				top: -20px;
				width: 105px;
			}
			.text {
				width: 66%;
				dt {
					font-size: 24px;
					font-weight: 700;
					color: var(--content-color-green);
				}
				.note {
					display: block;
					font-size: 0.8em;
					margin-top: 8px;
				}
			}
			.ph {
				width: 34%;
			}
		}
	}
	/*ポイント8*/
	.point8 {
		padding: 64px 0;
		background-color: var(--bg-color-green);
		.title {
			.title-text {
				width: 100%;
				padding: 24px 0 0 184px;
				font-size: 18px;
			}
		}
		.text-box {
			width: 580px;
			background-color: #fff;
			border-radius: 16px;
			position: relative;
			.tag {
				position: absolute;
				top: -15px;
				left: 24px;
				img {
					transform: rotate(-2deg);
				}
			}
			h4 {
				font-size: 32px;
				font-weight: 900;
			}
		}
		.flower {
			min-height: 310px;
			background: url("../images/point8-1-bg.png") no-repeat left 300px top 0;
			padding-top: 64px;
			position: relative;
			.ph {
				position: absolute;
				top: 50px;
				right: 0;
			}
			.text-box {
				padding: 24px 48px 24px 32px;
			}
			h4 {
				color: #e45050;
			}
			.tag {
				width: 180px;
			}
		}
		.forest {
			min-height: 420px;
			background: url("../images/point8-2-bg.png") no-repeat right 0 top 0;
			padding-top: 136px;
			position: relative;
			.ph {
				position: absolute;
				top: -45px;
				left: 0;
			}
			.text-box {
				padding: 24px 32px 24px 48px;
				margin: 0 0 0 auto;
				position: relative;
				.note {
					position: absolute;
					bottom: -20px;
					left: 50px;
					font-size: 12px;
				}
			}
			h4 {
				color: #2a6f08;
			}
			.tag {
				width: 300px;
			}
		}
		.okita {
			position: absolute;
			top: -310px;
			right: 0;			
		}
		.kawasaki {
			position: absolute;
			left: 0;
			bottom: -64px;
		}
		.kawasaki-f {
			position: absolute;
			left: 180px;
			bottom: -25px;
		}
	}
	
	/*ポイント9-12*/
	.bg-other {
		padding: 64px 0 40px;
		background-color: var(--bg-color-pink);
	}
	.point9 {
		margin-bottom: 24px;
		.title-text {
			width: 100%;
			padding: 16px 400px 0 184px;
			span {
				display: block;
				font-size: 12px;
				margin-top: 8px;
			}
		}
		.ph {
			position: absolute;
			right: 0;
			top: 0;
			width: 320px;
		}
	}
	.point10,.point11 {
		margin-bottom: 36px;
	}
	#present {
		margin-top: 40px;
		.sg-logo {
			width: 200px;
			margin-top: 24px;
		}
	}
}

/*-----------------------------------------
商品
-------------------------------------------*/
#tour {
	width: 100%;
	background-color: var(--bg-color-blue);
	padding: 64px 0 96px;
	.h2logo {
		width: 470px;
		margin: 0 auto 40px;
	}
	.h2text {
		text-align: center;
		color: var(--content-color-navy-d);
		font-size: 42px;
		line-height: 1.3;
		font-weight: 700;
		margin-bottom: 24px;
		&::before {
			font-family: "Material Symbols Rounded";
			font-weight: 400;
			content: "\e6ca";
			display: block;
		}
	}
	.title-text {
		text-align: center;
		font-size: 24px;
		font-weight: 700;
		color: var(--content-color-navy-d);
		margin: 0 auto 40px;
	}
	.arrange {
		width: 100%;
		border-top: solid 1px #ccc;
		margin-top: 16px;
		padding-top: 16px;
		h3 {
			font-size: 16px;
			font-weight: 700;
			color: var(--content-color-navy-d);
			&::before {
				font-family: "Material Symbols Rounded";
				font-weight: 400;
				content: "\e53a";
				font-size: 22px;
				display: inline-block;
				transform: translateY(4px);
				margin-right: 8px;
			}
		}
		dl {
			display: flex;
			flex-wrap: wrap;
			font-size: 14px;
			font-weight: 500;
			border-top: dashed 1px #ccc;
			dt {
				width: 35%;
				font-weight: 700;
				background-color: #ffe6ea;
				padding: 8px 8px 4px 8px;
				border-bottom: dashed 1px #ccc;
			}
			dd {
				width: 65%;
				padding: 4px 8px;
				border-bottom: dashed 1px #ccc;
				.add {
					font-weight: 700;
					color: #DF0D00;
					font-size: 1.3em;
					padding-left: 8px;
				}
				.note {
					font-size: 12px;
				}
			}
		}
	}
	.schedule {
		padding-top: 64px;
		margin-bottom: 64px;
		position: relative;
		h3 {
			text-align: center;
			color: var(--content-color-navy-d);
			font-size: 36px;
			font-weight: 700;
			background: url("../images/schedule-title-bg.png") no-repeat top center;
			padding: 25px 0;
			margin-bottom: 24px;
		}
		table {
			width: 100%;
			background-color: #fff;
			border-collapse: collapse;
			border: solid 1px #d7d7d7;
			th {
				width: 10%;
				background-color: #114f7f;
				color: #fff;
				font-size: 18px;
				font-weight: 500;
				text-align: center;
				vertical-align: middle;
				border: solid 1px #d7d7d7;
			}
			td {
				width: 90%;
				font-size: 16px;
				position: relative;
				padding: 16px 24px;
				border: solid 1px #d7d7d7;
				.visit {
					display: block;
					color: var(--content-color-navy-d);
					font-weight: 700;
					padding: 8px 0;
					.icon {
						display: inline-block;
						background-color: var(--content-color-orange);
						color: #fff;
						padding: 0 8px;
						font-size: 0.8em;
						margin-right: 4px;
						font-weight: 500;
					}
				}
				.reco {
					margin-top: 8px;
					display: inline-block;
					font-size: 0.9em;
					font-weight: 500;
					padding: 2px 8px 4px;
					color: var(--content-color-red);
					background-color: #fffce4;
					border: solid 1px var(--content-color-red);
					margin-bottom: 4px;
				}
				.stay {
					position: relative;
					padding-left: 24px;
					&::before {
						font-family: "Material Symbols Rounded";
						font-weight: 700;
						content: "\e53a";
						font-size: 1.3em;
						margin-right: 8px;
						position: absolute;
						left: 0;
						top: -3px;
						color: #8c8c8c;
					}
				}
				.meal {
					position: absolute;
					right: 24px;
					bottom: 16px;
					img {
						width: 40px;
					}
				}
				.note {
					font-size: 0.8em;
					font-weight: normal;
					color: var(--default-color-black);
					margin-left: 8px;
				}
			}
		}
		.okita {
			position: absolute;
			right: 0;
			top: 80px;
			width: 165px;
			display: inline-block;
			animation: korokoro-anim 2.5s linear infinite;
		}
		.bold {
			font-weight: 700;
		}
		.lounge {
			margin-top: 16px;
			dt {
				font-weight: 700;
			}
		}
		.note {
			font-size: 14px;
			margin-top: 16px;
		}
	}
	.tour-btn {
		width: 700px;
		margin: 0 auto;
		text-align: center;
		a {
			display: block;
			background-color: #ffd800;
			color: #483000;
			border-radius: 40px;
			font-size: 18px;
			font-weight: 700;
			padding: 16px;
			position: relative;
			&::after {
				font-family: "Material Symbols Rounded";
				font-weight: 400;
				content: "\e5e1";
				font-size: 20px;
				position: absolute;
				right: 10px;
				top: 50%;
				transform: translateY(-50%);
			}
		}			
	}
	.tour-btn-text,.tour-btn-text2 {
		text-align: center;
		padding-top: 64px;
		font-size: 24px;
		font-weight: 700;
		margin-bottom: 8px;
	}
}
/*カセット調整*/
#tour .ui-static-grid-list {
	margin-bottom: 24px;
	a {
		background-color: #fff;
	}
	.ui-static-image {
		width: 34%;
	}
	.product-text {
		width: 66%;
		padding: 16px 24px;
	}
	.ui-static-product-card-summary {
		.note {
			display: block;
			font-size: 12px;
			line-height: 1.3;
		} 
	}
	.ui-static-price-container {
		margin-top: 16px;
		padding: 0;
		.ui-static-price-info {
			display: block;
		}
	}
	.ui-static-product-card .ui-static-image img {
		aspect-ratio: 352 / 235;
	}
	/*完売*/
	&.kanbai {
		position: relative;
		a {
			cursor: default;
			pointer-events: none;
			position: relative;
			&::before {
				content: "";
				display: block;
				position: absolute;
				left: 0;
				top:0;
				width: 100%;
				height: 100%;
				background-color: rgba(0,0,0,0.3);
				z-index: 100;
			}
			&::after {
				content: "8/3(月) 10:25～再販売予定";
				display: inline-block;
				position: absolute;
				right: 0;
				left: 0;
				top: 150px;
				width: 340px;
				margin: 0 auto;
				background-color: #FF0004;
				color: #fff;
				font-size: 24px;
				font-weight: 700;
				text-align: center;
				z-index: 101;
			}
		}
	}
}

/*------------------------------------------------
	販売終了
--------------------------------------------------*/
#tour .end {
	text-align: center;
	font-size: 18px;
}
/*------------------------------------------------
	その他ツアー
--------------------------------------------------*/
#othertour {
	width: 100%;
	padding: 64px 0;
	background-color: #eee;
	.fukidashi {
		font-size: 28px;
		font-weight: 700;
		text-align: center;
		margin-bottom: 8px;
	}
	.kanbai {
		font-size: 22px;
		text-align: center;
		margin-bottom: 16px;
	}
	.btn {
		width: 700px;
		margin: 0 auto;
		text-align: center;
		a {
			display: block;
			background-color: #004097;
			border-radius: 40px;
			font-size: 18px;
			padding: 16px;
			color: #fff;
			position: relative;
			&::after {
				font-family: "Material Symbols Rounded";
				font-weight: 400;
				content: "\e5e1";
				font-size: 20px;
				position: absolute;
				right: 10px;
				top: 50%;
				transform: translateY(-50%);
			}
		}			
	}
}
/*------------------------------------------------
	固定バナー
--------------------------------------------------*/
.fix-bnr {
    display: none;
    position: fixed;
    right: 10px;
    top: 300px;
    z-index: 100;
	width: 150px;
	.js-scroll-btn {
		display: block;
		cursor:pointer;
		&:hover {
			opacity: 1;
		}
	}
	.close {
		position: absolute;
		right: 10px;
		top: 14px;
		a {
		  display: block;
			span {
				font-size: 16px;
				color: #333;
				background-color: #fff;
				border-radius: 50%;
				padding: 5px;
			}
		}
	}
}

/*------------------------------------------------
	クローズ
--------------------------------------------------*/
#close {
	background-color: #fff1e1;
    padding: 100px 0;
    text-align: center;
    font-size: 18px;
    line-height: 1.8;
}
#close a {
    color: #1a7acd;
}