@charset "utf-8";

body {
	margin: 0;
	padding: 0;
	font-family: 'BIZ UDGothic', 'BIZ UDPGothic', sans-serif;
	font-family: 'Shippori Mincho', serif;
	font-family: 'ヒラギノ角ゴ ProN W3', HiraKakuProN-W3, 游ゴシック, 'Yu Gothic', メイリオ, Meiryo;
	font-family: Verdana, Helvetica, Arial, sans-serif;
	max-width: 1366px;
	margin: 0 auto;
}

img {
	width: 100%;
}

p {
	line-height: 1.5;
	font-family: 'BIZ UDGothic';
}
h1 {
	font-family: 'BIZ UDGothic';
}

li {
	list-style-type: none;
}
/*  */

main {
	background: url('../img/main_pic.jpg');
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
	color: #fff;
	width: 100%;
	height: 100vh;
	position: relative;
}

@media (max-width: 600px) {
	main {
		position: relative;
		background: url('../img/main_sp@2x.jpg');
		background-size: contain;
		background-position: center top;
		background-repeat: no-repeat;
		color: #fff;
		width: 100%;
		height: 167vw;
	}
}
.head {
	/* ロゴ周囲に余白、高さ48+上下16= */
	height: 48px;
	padding: 16px 16px 16px 30px;
}
.head .logo img {
	width: 48px;
}
.head .logo {
	display: flex;
	height: 48px;
	align-items: center;
}
.head .logo p {
	font-size: 1rem;
	margin-left: 16px;
}

.mainbox {
	width: 200px;
	position: absolute;
	top: 100px;
	left: 30px;
}
.mainbox p {
	font-size: 18px;
	margin-top: 4px;
	margin-bottom: 4px;
}
.mainbox p .names {
	font-size: 24px;
}

.mainbox .mainline {
	background: url(../img/mainline_sp@2x.png);
	background-size: contain;
	background-repeat: no-repeat;
	height: 16px;
	width: 80%;
}

@media (max-width: 600px) {
	.mainbox {
		width: 180px;
		position: absolute;
		top: 100px;
		left: 50vw;
	}
	.mainbox p {
		font-size: 16px;
		margin-top: 4px;
		margin-bottom: 4px;
	}
	.mainbox p .names {
		font-size: 20px;
	}
}
@media (max-width: 400px) {
	.mainbox {
		width: 160px;
		position: absolute;
		top: 60px;
		left: 40vw;
	}
	.mainbox p {
		font-size: 14px;
		margin-top: 4px;
		margin-bottom: 4px;
	}
	.mainbox p .names {
		font-size: 18px;
	}
}

/*  */

.tour {
	width: 100%;
	/* 背景を全体に乗せるため、paddingを使った */
	padding: 16px 3% 80px 3%;
	box-sizing: border-box;
}
.tour .container {
	width: 100%;
	display: flex;
	justify-content: space-between;
	margin: 0;
	gap: 3%;
}

.tour1 {
	background: url(../img/backg1@2x.png);
	background-size: cover;
	background-repeat: repeat;
	background-position: center;
}
.tour2 {
	background: url(../img/backg2@2x.png);
	background-size: cover;
	background-repeat: repeat;
	background-position: center;
}
.tour3 {
	background: url(../img/backg3@2x.png);
	background-size: cover;
	background-repeat: repeat;
	background-position: center;
}
.tour4 {
	background: url(../img/backg4@2x.png);
	background-size: cover;
	background-repeat: repeat;
	background-position: center;
}
.tour5 {
	background: url(../img/backg5@2x.png);
	background-size: cover;
	background-repeat: repeat;
	background-position: center;
}

/* ツアーflexの左、タイトルと説明本文エリア */
.tour .container .titlebox {
	margin: 0 0 16px 0;
	display: flex;
	flex-direction: column;
	width: 45%;
}
/* ツアータイトルの枠 */
.tour .container .titlebox .title {
	display: flex;
	margin: 0 auto;
	/* justify-content: space-around; */
	align-content: center;
	width: 70%;
	/* 背景アクセント */
	background-size: contain;
	background-position: bottom;
	background-repeat: no-repeat;
}
/* タイトル文字、大と小 */
.tour .titleTx1 {
	font-size: 80px;
	margin: 0;
}
.tour .titleTx2 {
	font-size: 50px;
	margin-bottom: 0;
}
.tour4 .titleTx2 {
	font-size: 40px;
}

.tour .container .titlebox .title p {
	font-family: 'Shippori Mincho';
}

.tour1 .title {
	background: url(../img/line01_pc@2x.png);
}
.tour2 .title {
	background: url(../img/line02_pc@2x.png);
}
.tour3 .title {
	background: url(../img/line03_pc@2x.png);
}
.tour4 .title {
	background: url(../img/line04_pc@2x.png);
}
.tour5 .title {
	background: url(../img/line05_pc@2x.png);
}

/* ツアー説明文 */
.tour .container .titlebox .text {
	margin: 16px;
	line-height: 1.7rem;
	font-family: 'BIZ UDPGothic';
	/* tour説明文を均等配置 */
	text-align: justify;
	letter-spacing: 0.02rem;
	background-color: rgba(255, 255, 255, 0.7);
}
/* ツアー右、画像エリア */
.tour .container .picbox {
	width: 60%;
	height: 40vw;
	margin: 0 0 16px 0;
	position: relative;
}
/* ツアー写真の説明文 */
.tour .container .picbox p {
	background-color: rgba(255, 255, 255, 0.5);
	font-family: 'BIZ UDPGothic';
	z-index: 50;
}

@media (max-width: 600px) {
	.tour .container {
		width: 100%;
		display: flex;
		justify-content: space-between;
		margin: 0;
		gap: 3%;
		flex-direction: column;
	}

	.tour .container .titlebox {
		margin: 0 0 16px 0;
		display: flex;
		width: 100%;
	}
	.tour .container .titlebox .title {
		width: 40%;
	}
	.tour .container .picbox {
		width: 100%;
		height: 60vw;
		margin: 0 0 16px 0;
		position: relative;
	}
}
/* ツアー右、画像と文字の位置 */
.tour .container .picbox img {
	width: 60%;
}
.tour .container .picbox .pic1 {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
}
.tour .container .picbox .pic2 {
	position: absolute;
	bottom: 0;
	right: 0;
}
.tour .container .picbox .tx1 {
	position: absolute;
	margin: 0;
	top: 0;
	right: 0;
}
.tour .container .picbox .tx2 {
	position: absolute;
	margin: 0;
	bottom: 0;
	left: 0;
}
.tour3 .pic2 {
	z-index: 20;
}
.tour4 .pic2 {
	z-index: 20;
}

/*  */
/*  */
/*  */

.hotel .toptitle {
	width: 100%;
	height: 36px;
	padding: 4px 0 4px 0;
	background: #8dafe3;
}

.hotel .toptitle h1 {
	color: #fff;
	line-height: 48px;
	margin: 0 0 0 30px;
}

.hotel .container {
	display: flex;
	gap: 3%;
	background: #fff1e6;
}
.hotel .wrap1 {
	display: flex;
	flex-direction: column;
	width: 55%;
	margin: 16px 0 16px 3%;
}
.hotel .wrap2 {
	width: 40%;
	margin: 16px 3% 16px 0;
}

.hotel .wrap1 img {
	width: 100%;
}
.hotel .wrap1 .text {
	margin: 16px 0 16px 0;
	font-size: 18px;
}

@media (max-width: 600px) {
	.hotel .toptitle h1 {
		font-size: 18px;
		line-height: 36px;
	}
	.hotel .container {
		display: flex;
		gap: 3%;
		background: #fff1e6;
		flex-direction: column;
	}
	.hotel .wrap1 {
		display: flex;
		flex-direction: column;
		width: 90%;
		margin: 16px 5% 16px 5%;
	}
	.hotel .wrap2 {
		width: 90%;
		margin: 16px 5% 16px 5%;
	}
	.hotel .wrap1 img {
		width: 100%;
	}
	.hotel .wrap1 .text {
		margin: 16px 0 16px 0;
		font-size: 18px;
	}
}

.hotel dl {
	display: flex;
	flex-wrap: wrap;
	font-family: 'BIZ UDGothic';
}
.hotel dt {
	float: left;
	width: 25%;
	background: #9de398;
	border-bottom: solid 1px #fff;
	padding: 4px 0 4px 8px;
}
.hotel dd {
	padding: 4px 0 4px 0;
	width: 70%;
	margin-left: 8px;
}
.hotel dd .star {
	color: #e545a8;
	margin-left: 32px;
}

.hotel .wrap2 img {
	width: 100%;
}
.hotel .wrap2 .pricebox {
	/* display: flex; */
	/* flex-direction: column; */
	width: 100%;
	margin: 32px 0;
	font-family: Meiryo;
}

.hotel .wrap2 .tx1 {
	width: 50%;
	font-size: 36px;
	color: #e545a8;
	margin: 0;
}
.hotel .wrap2 .tx2 {
	font-size: 24px;
	color: #e545a8;
	margin: 0;
	text-align: right;
}

@media (max-width: 600px) {
	.hotel .wrap2 .pricebox {
		display: flex;
		align-content: space-between;
		width: 100%;
		margin: 32px 0;
	}
	.hotel .wrap2 .tx1 {
		font-size: 40px;
	}
	.hotel .wrap2 .tx2 {
		width: 50%;
		font-size: 24px;
	}
}
@media (max-width: 400px) {
	.hotel .wrap2 .tx1 {
		font-size: 32px;
	}
	.hotel .wrap2 .tx2 {
		font-size: 18px;
	}
}

.hotel .wrap2 .btn {
	width: 100%;
	height: 64px;
	background: #e545a8;
	color: #fff;
	font-size: 24px;
	border-radius: 36px;
	border: none;
	margin: 16px 0;
	font-family: 'BIZ UDPGothic';
	font-weight: bold;
}

.hotel .wrap2 .btn:hover {
	background: #ff55aa;
	border: solid 4px orange;
}

@media (max-width: 600px) {
	.hotel .wrap2 .btn {
		width: 60%;
		height: 48px;
		margin: 0 20%;
	}
}
@media (max-width: 400px) {
	.hotel .wrap2 .btn {
		font-size: 14px;
	}

	.hotel dl {
		font-size: 14px;
	}
	.hotel dt {
		width: 120px;
	}
	.hotel dd {
		font-size: 16px;
		width: 90%;
	}
	.hotel dd .star {
		color: #e545a8;
		margin-left: 0px;
	}
}

/*  */
/*  */
/*  */

footer {
	padding: 16px;
	background: #fcd791;
}
footer .container {
	height: 48px;
	margin: 0;
	display: flex;
	gap: 3%;
	justify-content: space-between;
}
footer .logo {
	display: flex;
	height: 48px;
	align-items: center;
}
footer .logo img {
	width: 48px;
}
footer .logo p {
	font-size: 1rem;
	margin-left: 16px;
}

footer .container .sns {
	width: 160px;
	max-height: 24px;
}

footer ul {
	display: flex;
	gap: 16px;
	justify-content: space-between;
	padding: 0;
}
footer .copy {
	font-size: 16px;
	text-align: center;
	margin: 0;
}

@media (max-width: 600px) {
	footer .logo img {
		width: 24px;
	}
	footer .logo p {
		font-size: 14px;
		margin-left: 4px;
	}

	footer .container .sns {
		width: 100px;
		max-height: 20px;
	}
	footer ul {
		display: flex;
		gap: 8px;
		justify-content: space-between;
		padding: 0;
	}
	footer .copy {
		font-size: 12px;
		text-align: center;
	}
}