@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&family=Noto+Sans+JP:wght@100..900&display=swap');

:root {
	/* font */
	--gothic: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Arial", "Noto Sans JP", sans-serif;
	--mincho: "游明朝", "Yu Mincho", YuMincho, "Hiragino Mincho Pro", serif;
	--jost: "Jost", sans-serif;

	/* color */
	--blk: 0, 0, 0;
	--wht: 255, 255, 255;
	--nvy: 45, 99, 121;
	--darkNvy: 31, 58, 67;
	--yel: 233, 166, 7;
}

/* ----------------------------------------------------
	基本設定
---------------------------------------------------- */
html {
	scroll-behavior: smooth;
	scroll-padding-top: 117px;
}

@media screen and (max-width: 1150px) {
	html {
		scroll-padding-top: 10.174vw;
	}
}

@media screen and (max-width: 768px) {
	html {
		scroll-padding-top: 0;
	}
}

/*
	表示設定
------------------------------ */
body {
	background: rgb(var(--wht));
	padding-top: 117px;
	line-height: 1.8;
}

.visually-hidden {
	margin: -1px;
	padding: 0;
	width: 1px;
	height: 1px;
	white-space: nowrap;
	clip: rect(0, 0, 0, 0);
	overflow: hidden;
	border: 0;
	position: absolute;
}

a {
	display: inline-block;
	text-decoration: underline;
	transition: all 0.5s ease 0s;
}

a:hover {
	text-decoration: none;
	opacity: 0.6;
}

@media screen and (max-width: 1150px) {
	body {
		padding-top: 10.174vw;
	}
}

@media screen and (max-width: 768px) {
	body {
		padding-top: 0;
	}
}

/*
	font
------------------------------ */
body {
	font-family: var(--gothic);
	font-feature-settings: "palt"1;
	letter-spacing: 0.05em;
	font-weight: 500;
}

body,
th,
td {
	color: rgb(var(--blk));
	font-size: 16px;
	font-weight: normal;
}

@media screen and (max-width: 1150px) {

	body,
	th,
	td {
		font-size: 1.391vw;
	}
}

@media screen and (max-width: 768px) {

	body,
	th,
	td {
		font-size: 4vw;
	}
}

/*
	SP,PC表示切り替え
------------------------------ */
.pc {
	display: block;
}

.sp {
	display: none;
}

@media screen and (max-width: 768px) {
	.pc {
		display: none;
	}

	.sp {
		display: block;
	}
}

/*
	list
------------------------------ */
ul.list li {
	margin-left: 1em;
	text-indent: -1em;
}

/* note */
ul.note li {
	font-size: 14px;
}

ul.note li::before {
	content: "※";
}

ul.note.en li::before {
	content: "*";
}

@media screen and (max-width: 1150px) {
	ul.note li {
		font-size: 1.217vw;
	}
}

@media screen and (max-width: 768px) {
	ul.note li {
		font-size: 3.2vw;
	}
}

/*
	linkBtn
------------------------------ */
.linkBtn a {
	text-decoration: none;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}

/* ----------------------------------------------------
	pagetop
---------------------------------------------------- */
.pageTop a {
	width: 80px;
	height: 80px;
	border-radius: 8px;
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	right: 1rem;
	bottom: 1rem;
	z-index: 10;
}

.pageTop a svg {
	fill: rgb(var(--wht));
	width: 16px;
	height: auto;
}

@media screen and (max-width: 768px) {
	.pageTop a {
		width: 68px;
		height: 68px;
	}
}

/* ----------------------------------------------------
	fadeIn
---------------------------------------------------- */
/*
	共通初期設定
	透明度が変化
------------------------------ */
.fadeBlock {
	opacity: 0;
	transition: all 1s;
}

.fadeBlock.fadeIn {
	opacity: 1;
}

/*
	下から
------------------------------ */
.fadeBottom {
	transform: translateY(30px);
}

.fadeBottom.fadeIn {
	transform: translateY(0);
}

/* ---------------------------------------------------
	bgBody
---------------------------------------------------- */
.bgBody {
	background: rgb(var(--wht)) url(../img/bgBody.webp) center no-repeat;
	background-size: cover;
	width: 100%;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
}

@media screen and (max-width: 768px) {
	.bgBody {
		background-size: auto 100%;
		width: 100%
	}
}

/* ---------------------------------------------------
	header
---------------------------------------------------- */
.header {
	text-align: center;
}

.header__inner {
	background: linear-gradient(180deg, rgba(255, 255, 255, 1) 15%, rgba(255, 255, 255, 0) 50%);
}

.header__content {
	background: rgba(var(--wht), 0.8);
	margin: 0 auto;
	width: 1000px;
}

.header__logo {
	margin: 0 auto;
	padding: 80px 0;
	width: 510px;
}

.header__title {
	margin-bottom: 28px;
	line-height: 2;
	color: rgb(var(--nvy));
	font-size: 30px;
	font-weight: 400;
}

.header__title--collaboration {
	line-height: 1;
	font-family: var(--jost);
	font-size: 55px;
	font-weight: 500;
	display: block;
}

.header__date {
	margin-bottom: 65px;
	line-height: 2;
	color: rgb(var(--nvy));
}

.header__date--title {
	font-size: 26px;
	font-weight: 500;
}

.header__date--content {
	line-height: 1;
	font-family: var(--jost);
	font-size: 42px;
	font-weight: 500;
}

@media screen and (max-width: 1150px) {
	.header__content {
		width: 86.957vw;
	}

	.header__logo {
		padding: 6.957vw 0;
		width: 44.348vw;
	}

	.header__title {
		margin-bottom: 2.435vw;
		font-size: 2.609vw;
	}

	.header__title--collaboration {
		font-size: 4.783vw;
	}

	.header__date {
		margin-bottom: 5.652vw;
	}

	.header__date--title {
		font-size: 2.261vw;
	}

	.header__date--content {
		font-size: 3.652vw;
	}
}

@media screen and (max-width: 768px) {
	.header__content {
		width: 100%;
	}

	.header__logo {
		padding: 12.8vw 0;
		width: 76vw;
	}

	.header__title {
		margin-bottom: 4.267vw;
		line-height: 1.35;
		font-size: 4.533vw;
	}

	.header__title--collaboration {
		margin-top: 4vw;
		font-size: 6.933vw;
	}

	.header__date {
		margin-bottom: 10.667vw;
	}

	.header__date--title {
		font-size: 4vw;
	}

	.header__date--content {
		font-size: 5.6vw;
	}
}

/*
	about
------------------------------ */
.about {
	background: url(../img/aboutBg.webp) center no-repeat;
	background-size: cover;
	margin: 0 auto;
	padding: 55px 63px;
	width: 870px;
	color: rgb(var(--wht));
	border: solid 1px rgb(var(--yel));
}

.about__title {
	font-size: 35px;
	font-weight: 600;
}

.about__title .eng {
	font-family: var(--jost);
	font-size: 36px;
	display: block;
}

.about__date {
	margin-bottom: 20px;
	font-size: 28px;
	font-weight: 600;
}

.about__date .eng {
	font-family: var(--jost);
	font-size: 36px;
	font-weight: 600;
}

.about__image {
	margin-bottom: 30px;
}

.about__text {
	margin-bottom: 44px;
	text-align: left;
}

.about__link a {
	color: rgb(var(--wht));
	font-size: 18px;
	font-weight: 600;
	text-decoration: none;
	display: inline-flex;
	justify-content: center;
	align-items: center;
}

.about__link a svg {
	margin-left: 11px;
	width: 21px;
	height: 10px;
}

@media screen and (max-width: 1150px) {
	.about {
		padding: 4.783vw 5.478vw;
		width: 75.652vw;
	}

	.about__title {
		font-size: 3.043vw;
	}

	.about__title .eng {
		font-size: 3.13vw;
	}

	.about__date {
		margin-bottom: 1.739vw;
		font-size: 2.435vw;
	}

	.about__date .eng {
		font-size: 3.13vw;
	}

	.about__image {
		margin-bottom: 2.609vw;
	}

	.about__text {
		margin-bottom: 3.826vw;
	}

	.about__link a {
		font-size: 1.565vw;
	}

	.about__link a svg {
		width: 1.826vw;
		height: 0.87vw;
	}
}

@media screen and (max-width: 768px) {
	.about {
		padding: 9.067vw 0;
		width: 90.4vw;
	}

	.about__title {
		font-size: 4.8vw;
	}

	.about__title .eng {
		font-size: 5.6vw;
	}

	.about__date {
		margin-bottom: 4vw;
		font-size: 4vw;
	}

	.about__date .eng {
		font-size: 5.067vw;
	}

	.about__image {
		margin-bottom: 4.267vw;
		padding: 0 4.8vw;
	}

	.about__text {
		margin-bottom: 4.267vw;
		padding: 0 4.8vw;
	}

	.about__link a {
		font-size: 4vw;
	}

	.about__link a svg {
		margin-left: 3.2vw;
		width: 5.067vw;
		height: 2vw;
	}
}

/* ---------------------------------------------------
	footer
---------------------------------------------------- */
.footer {
	background: #ECECEC;
	padding-top: 69px;
	font-size: 16px;
}

@media screen and (max-width: 1150px) {
	.footer {
		padding-top: 6vw;
		font-size: 1.391vw;
	}
}

@media screen and (max-width: 768px) {
	.footer {
		padding-top: 16vw;
		font-size: 4vw;
	}
}

/*
	hotel-list
------------------------------ */
.hotel-list {
	margin: 0 auto 44px;
	width: 1100px;
	line-height: 1;
	display: flex;
	flex-wrap: wrap;
}

.hotel-list__item {
	margin-bottom: 30px;
	width: 25%;
}

.hotel-list__item.long {
	width: 27%;
}

.hotel-list__item.short {
	width: 23%;
}

.hotel-list__item a {
	color: rgb(var(--blk));
	white-space: nowrap;
}

.hotel-list__item a::before {
	content: "＞";
}

@media screen and (max-width: 1150px) {
	.hotel-list {
		margin-bottom: 3.826vw;
		width: 95.652vw;
	}
}

@media screen and (max-width: 768px) {
	.hotel-list {
		margin-bottom: 16vw;
		padding: 0 9.6vw;
		width: 100%;
		display: block;
	}

	.hotel-list__item {
		margin-bottom: 5.067vw;
	}

	.hotel-list__item,
	.hotel-list__item.long,
	.hotel-list__item.short {
		width: 100%;
	}

	.hotel-list__item a {
		color: rgb(var(--blk));
		white-space: nowrap;
	}

	.hotel-list__item a::before {
		content: "＞";
	}
}

/*
	hotelNav
------------------------------ */
.footer__hotelNav {
	line-height: 1;
	color: rgb(var(--blk));
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.footer__hotelNav li {
	margin: 0 0 1rem;
	text-indent: 0;
	display: flex;
	position: relative;
}

.footer__hotelNav li:first-of-type::before,
.footer__hotelNav li::after {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

.footer__hotelNav li:first-of-type::before {
	left: 0;
	content: "|";
}

.footer__hotelNav li::after {
	right: 0;
	content: "|";
}

.footer__hotelNav li a {
	padding: 0 1em;
	color: rgb(var(--blk));
	text-decoration: none;
	display: inline-block;
}

.footer__hotelNav li a:hover {
	text-decoration: underline;
	opacity: 1;
}

@media screen and (max-width: 768px) {
	.footer__hotelNav {
		text-align: center;
		display: block;
	}

	.footer__hotelNav li:first-of-type::before,
	.footer__hotelNav li::after {
		content: "";
	}

	.footer__hotelNav li {
		margin-bottom: 1rem;
		justify-content: center;
	}

	.footer__hotelNav li a {
		display: inline-block;
		position: relative;
	}

	.footer__hotelNav li a::before,
	.footer__hotelNav li a::after {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		content: "|";
	}

	.footer__hotelNav li a::before {
		left: 0;
	}

	.footer__hotelNav li a::after {
		right: 0;
	}
}

/*
	copy
------------------------------ */
.copy {
	padding: 50px 0;
	font-size: 10px;
	text-align: center;
}

@media screen and (max-width: 1150px) {
	.copy {
		padding: 4.348vw 0;
		font-size: 0.87vw;
	}
}

@media screen and (max-width: 768px) {
	.copy {
		padding: 6.4vw 0;
		font-size: 2.667vw;
	}
}

/* ---------------------------------------------------
	gnav
---------------------------------------------------- */
.gnav {
	background: rgb(var(--darkNvy));
	width: 100%;
	line-height: 1;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999;
}

.gnav__container {
	margin: 0 auto;
	padding: 0 64px;
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.gnav__logo {
	width: 422px;
	height: 100%;
	display: flex;
	align-items: center;
}

.gnav__logo img {
	width: auto;
	height: 79px;
}

.gnav__list {
	display: flex;
}

.gnav__list--item {
	position: relative;
}

.gnav__list--item:not(:first-of-type) {
	margin-left: 40px;
}

.gnav__list--item .switch,
.gnav__list--item a {
	height: 117px;
	color: rgb(var(--wht));
	font-size: 20px;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
}

.gnav__list--item .switch {
	cursor: pointer;
}

.gnav__list--item .switch svg {
	margin-left: 11px;
	width: 21px;
	height: 10px;
}

.gnav__list--item .switch .gnav__hotel {
	background: rgb(var(--darkNvy));
	width: 250px;
	display: none;
	position: absolute;
	top: 100px;
	z-index: 1000;
}

.gnav__list--item .switch:hover .gnav__hotel {
	display: block;
}

.gnav__list--item .switch .gnav__hotel--item a {
	padding: 1em;
	height: auto;
	color: rgb(var(--wht));
	font-size: 14px;
	display: block;
}

@media screen and (max-width: 1150px) {
	.gnav__logo {
		width: 36.696vw;
	}

	.gnav__logo img {
		height: 6.87vw;
	}

	.gnav__list--item:not(:first-of-type) {
		margin-left: 3.478vw;
	}


	.gnav__list--item .switch,
	.gnav__list--item a {
		height: 10.174vw;
		font-size: 1.739vw;
	}

	.gnav__list--item .switch svg {
		margin-left: 0.957vw;
		width: 1.826vw;
		height: 0.87vw;
	}

	.gnav__list--item .switch .gnav__hotel {
		width: 21.739vw;
		top: 8.696vw;
	}

	.gnav__list--item .switch .gnav__hotel--item a {
		font-size: 1.217vw;
	}
}

@media screen and (max-width: 768px) {
	.gnav {
		background: rgb(var(--nvy));
		padding-top: 77px;
		max-width: 375px;
		width: 100%;
		height: 100%;
		overflow: auto;
		position: fixed;
		top: 0;
		right: 0;
		left: auto;
		transform: translateX(100%);
		transition: transform 1s cubic-bezier(0.215, 0.61, 0.355, 1);
	}

	.gnav__container {
		padding: 0 6.4vw;
		width: 100%;
		height: auto;
		display: block;
	}

	.gnav__logo {
		display: none;
	}

	.gnav__list {
		padding: 0;
		width: 100%;
		display: block;
	}

	.gnav__list--item:not(:first-of-type),
	.gnav__list--item {
		margin: 0;
	}

	.gnav__list--item .switch,
	.gnav__list--item a {
		padding: 1em 0;
		height: auto;
		font-size: 20px;
	}

	.gnav__list--item .switch {
		flex-wrap: wrap;
	}

	.gnav__list--item .switch svg {
		margin-left: 11px;
		width: 21px;
		height: 10px;
	}

	.gnav__list--item .switch .gnav__hotel {
		background: none;
		margin-top: 1.5em;
		width: 100%;
		display: block;
		position: static;
	}

	.gnav__list--item .switch .gnav__hotel--item:not(:last-of-type) {
		margin-bottom: 1em;
	}

	.gnav__list--item .switch .gnav__hotel--item a {
		padding: 0 0 0 1em;
		height: auto;
		font-size: 14px;
		display: block;
	}

	.overlay {
		background: rgba(var(--blk), 0.75);
		width: 100vw;
		height: 100vh;
		opacity: 0;
		visibility: hidden;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 998;
		content: "";
	}

	/* is-open */
	.is-open {
		overflow: hidden;
	}

	.is-open .gnav {
		z-index: 999;
		transform: translateX(0);
	}

	.is-open .overlay {
		opacity: 1;
		visibility: visible;
		cursor: pointer;
	}
}

/*
	toggle
------------------------------ */
.toggle {
	display: none;
}

@media screen and (max-width: 768px) {
	.toggle {
		background: #2D6379;
		width: 55px;
		height: 55px;
		border-radius: 55px;
		display: block;
		position: fixed;
		top: 11px;
		right: 13px;
		z-index: 1000;
	}

	.toggle__inner {
		width: 100%;
		height: 100%;
		position: relative;
		cursor: pointer;
	}

	.toggle__inner--item {
		background: rgb(var(--wht));
		width: 23px;
		height: 1px;
		display: block;
		position: absolute;
		left: 50%;
		transition: all 0.6s;
	}

	.toggle__inner--item:nth-child(1) {
		top: 18px;
		transform: translateX(-50%);
	}

	.toggle__inner--item:nth-child(2) {
		top: 50%;
		transform: translate(-50%, -50%);
	}

	.toggle__inner--item:nth-child(3) {
		bottom: 18px;
		transform: translateX(-50%);
	}

	/* is-open */
	.is-open .toggle__inner--item {
		background: rgb(var(--wht));
		transform-origin: 0 0;
	}

	.is-open .toggle__inner--item:nth-child(1) {
		top: 50%;
		transform: rotate(45deg) translate(-50%, -50%);
	}

	.is-open .toggle__inner--item:nth-child(2) {
		opacity: 0;
	}

	.is-open .toggle__inner--item:nth-child(3) {
		top: 50%;
		bottom: auto;
		transform: rotate(-45deg) translate(-50%, -50%);
	}
}