@charset 'UTF-8';

/* ========================================
	Founfation (id推奨)
========================================= */

html {
	font-size: 62.5%;
}

body {
	font-family: "Noto Sans JP", YuGothic, "Yu Gothic", "Yu Gothic UI", "ＭＳ ゴシック", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", sans-serif;
	font-size: 1rem;
	letter-spacing: 0.05em;
	position: relative;
	color: #395052;
	-webkit-font-feature-settings: "palt";
	font-feature-settings: "palt";
	overflow-x: clip;
	overflow-wrap: anywhere;
	word-break: normal;
	line-break: strict;

	&.js-menuopen {
    position: fixed;
    left: 0;
    width: 100%;
    overflow: hidden;

		.header-logo {
			height: 50px !important;
		}
  }
}

@media screen and (max-width: 768px) {
	body {
		&.js-menuopen {
			.header-logo {
				height: 40px !important;
			}
		}
	}
}

main {
	position: relative;
}

picture {
	display: block;
	width: 100%;
	height: auto;
}

img {
	display: block;
	width: 100%;
	height: auto;
}

a {
	color: inherit;
	text-decoration: none;
}

a,
button {
	cursor: pointer;
	-webkit-transition: 0.3s;
	transition: 0.3s;

	&:hover {
		opacity: .8;
	}
}

html #wpadminbar {
	display: none;
}

::selection {
  color: #fff;
  background-color: #395052;
}

/* ========================================
	font
========================================= */

/* PPHatton */
@font-face {
	font-family: "PPHatton";
	src: url("../font/PPHatton-Bold.otf") format("opentype");
	font-weight: bold;
	font-style: normal;
	letter-spacing: 0;
}
@font-face {
	font-family: "PPHatton";
	src: url("../font/PPHatton-Medium.otf") format("opentype");
	font-weight: 500;
	font-style: normal;
	letter-spacing: 0;
}
@font-face {
	font-family: "PPHatton";
	src: url("../font/PPHatton-Ultralight.otf") format("opentype");
	font-weight: 200;
	font-style: normal;
	letter-spacing: 0;
}
@font-face {
	font-family: "PPHatton";
	src: url("../font/PPHatton-MediumItalic.otf") format("opentype");
	font-weight: 500;
	font-style: italic;
	letter-spacing: 0;
}
@font-face {
	font-family: "PPHatton";
	src: url("../font/PPHatton-BoldItalic.otf") format("opentype");
	font-weight: bold;
	font-style: italic;
	letter-spacing: 0;
}
@font-face {
	font-family: "PPHatton";
	src: url("../font/PPHatton-UltralightItalic.otf") format("opentype");
	font-weight: 200;
	font-style: italic;
	letter-spacing: 0;
}

:root {
	--font-pphatton: "PPHatton", sans-serif;
	--font-bevietnam: "Be Vietnam Pro", sans-serif;
	--font-cardo: "Cardo", sans-serif;
	--font-mincho: 'Yu Mincho Light','YuMincho','Yu Mincho','游明朝体', sans-serif;
}

/* ========================================
	共通パーツ
========================================= */

@media screen and (min-width: 769px) {
	.c-pc-only {
		display: block !important;
	}
	.c-pc-only--flex {
		display: flex !important;
	}
	.c-sp-only {
		display: none !important;
	}
	.c-sp-only--flex {
		display: none !important;
	}
}

@media screen and (max-width: 768px) {
	.c-pc-only {
		display: none !important;
	}
	.c-pc-only--flex {
		display: none !important;
	}
	.c-sp-only {
		display: block !important;
	}
	.c-sp-only--flex {
		display: flex !important;
	}
}

/* container */
.container {
	max-width: 1240px;
	padding: 0 20px;
	margin: 0 auto;
}

/* button */
.c-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: max-content;
	height: 50px;
	border: 1px solid #fff;
	border-radius: 30px;
	padding: 0 30px;
	font-size: 1.6rem;
	color: #fff;
	font-family: var(--font-bevietnam);
	letter-spacing: 0.1em;

	&.u-wht {
		border: 1px solid #395052;
		color: #395052;

		&:hover {
			background: #395052;
			color: #fff;
		}
	}
	&.u-green {
		border: 1px solid #395052;
		background: #395052;

		&:hover {
			background: #fff;
			color: #395052;
		}
	}
}

@media screen and (max-width: 768px) {
	.c-btn {
		height: 44px;
		padding: 0 40px;
		font-size: 1.2rem;
	}
}

/* スクロールフェードイン */

.c-fadein {
	opacity: 0;
	transform: scale(1.02);
	filter: blur(10px);
	transition: opacity 2s ease-out, transform 2s ease-out, filter 2s ease-out;

	&.js-show {
		opacity: 1;
		transform: scale(1);
		filter: blur(0);
	}
}

/* sub_section */
.sub_section {
	.container {
		display: flex;
	}

	&.u-black {
		border-bottom: 1px solid #fff;
		background: #395052;
		color: #fff;
	}
}
.sub_section-header {
	width: calc(400/1200*100%);
}
.sub_section-title {
	font-size: 2.4rem;
	line-height: 1;
	letter-spacing: 0.05em;
	text-box: trim-both cap alphabetic;
}
.sub_section-contents {
	flex: 1;
}
.sub_section-text {
	font-size: 1.6rem;
	line-height: calc(29/16);
	letter-spacing: 0.1em;
	text-box: trim-both cap alphabetic;
}
.sub_section-link {
	width: 300px;
	height: 70px;
	margin-top: 42px;
	border: 1px solid #9fb2b5;
	border-radius: 35px;
	font-size: 1.8em;
	color: #395052;
}
.sub_section-wrap {
	display: flex;
	align-items: flex-end;
	gap: 24px;
	margin-top: 40px;
}
.sub_section-tel {
	font-size: 2.4rem;
	line-height: 1;
	letter-spacing: 0.05em;
	text-box: trim-both cap alphabetic;
	pointer-events: none;
}
.sub_section-note {
	font-size: 1.4rem;
	letter-spacing: 0.05em;
	text-box: trim-both cap alphabetic;
}

@media (any-hover: hover) {
}

@media (min-width: 768px) and (max-width: 1024px) {
	.sub_section-title {
		font-size: 2rem;
	}

	.sub_section-text {
		font-size: 1.4rem;
	}

	.sub_section-tel {
		font-size: 2rem;
	}
	.sub_section-note {
		font-size: 1.2rem;
	}
}

@media (max-width: 768px) {
	.sub_section {
		.container {
			flex-direction: column;
			gap: 24px;
			max-width: 560px;
			margin-inline: auto;
			padding: 0 30px;
		}
	}
	.sub_section-header {
		width: 100%;
	}
	.sub_section-title {
		font-size: 1.6rem;
	}
	.sub_section-contents {
		width: 100%;
	}
	.sub_section-text {
		font-size: 1.2rem;
		line-height: calc(34/24);
		letter-spacing: 0.05em;
	}
	.sub_section-link {
		width: 240px;
		height: 48px;
		border-radius: 24px;
		margin: 29px auto 0;
		font-size: 1.3em;
	}
	.sub_section-wrap {
		align-items: flex-start;
		flex-direction: column;
		gap: 17px;
		margin-top: 40px;
	}
	.sub_section-tel {
		font-size: 1.6rem;
		pointer-events: all;
	}
	.sub_section-note {
		font-size: 0.9rem;
	}
}

/* parking */
.parking {
	padding: 80px 0;
	background: #395052;
	color: #fff;
}

.parking-inner {
	display: flex;
	gap: 38px;
	padding: 38px calc(40/1200*100%) 42px;
	border: 1px solid #fff;
}

.parking-photo {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 219px;
	height: auto;

	figcaption {
		font-size: 1.4rem;
		font-family: var(--font-bevietnam);
		line-height: 1;
		letter-spacing: 0;
		text-box: trim-both cap alphabetic;
	}
}

.parking-contents {
	flex: 1;
}

.parking-title {
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.05em;
	text-box: trim-both cap alphabetic;
}

.parking-list {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-top: 13px;

	li {
		position: relative;
		padding-left: 12px;
		font-size: 1.4rem;
		line-height: calc(32/14);
		letter-spacing: 0.05em;

		&.strong {
			color: #fff44c;
		}

		strong {
			color: #fff44c;
		}

		&:before {
			position: absolute;
			top: 0;
			left: 0;
			content: '・';
			font-size: 1.4rem;
			line-height: calc(32/14);
			letter-spacing: 0.05em;
		}
	}
}

.parking-note {
	position: relative;
	margin-top: 8px;
	padding-left: 16px;
	font-size: 1.4rem;
	line-height: calc(24/14);
	letter-spacing: 0.05em;

	&:before {
		content: '※';
		position: absolute;
		top: 0;
		left: 0;
		font-size: 1.4rem;
		line-height: calc(24/14);
	}
}

.parking-link {
	width: 290px;
	height: 70px;
	margin-top: 17px;
	border-radius: 35px;
	font-size: 2rem;
}

@media (max-width: 768px) {
	.parking {
		padding: 58px 0;
	}

	.parking-inner {
		display: block;
		max-width: 500px;
		margin: 0 auto;
		padding: 30px calc(22/315*100%) 39px;
	}

	.parking-photo {
		gap: 11px;
		width: 100%;
		margin-top: 20px;

		figcaption {
			font-size: 0.8rem;
			font-weight: 300;
		}
	}

	.parking-contents {
		width: 100%;
	}

	.parking-title {
		font-size: 1.2rem;
	}

	.parking-list {
		margin-top: 25px;
		gap: 14px;

		li {
			padding-left: 15px;
			font-size: 1.2rem;
			line-height: calc(34/24);

			&:before {
				left: 3px;
				font-size: 1.2rem;
				line-height: calc(32/24);
			}
		}
	}

	.parking-note {
		margin-top: 13px;
		padding-left: 15px;
		font-size: 1.2rem;
		line-height: calc(34/24);

		&:before {
			font-size: 1.2rem;
			line-height: calc(34/24);
		}
	}

	.parking-link {
		width: 240px;
		height: 48px;
		margin: 30px auto 0;
		border-radius: 24px;
		font-size: 1.3rem;
	}
}

/* bnr */
.bnr {
	padding-block: 240px;
}

.bnr-container {
	display: flex;
	width: calc(100% - 40px);
	max-width: 960px;
	margin: 0 auto;
	background: #f0f0f0;
}

.bnr-textbox {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 50%;
	padding: 45px calc(46/960*100%) 40px;
}

.bnr-title {
	position: relative;
	font-size: 1.9rem;
	font-family: var(--font-cardo);
	color: #000;
	line-height: 1;
	letter-spacing: 0.05em;

	&:after {
		content: '';
		position: absolute;
		bottom: -22px;
		left: 0;
		width: 48px;
		height: 1px;
		background: #000;
	}
}

.bnr-link {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	width: 176px;
	height: 44px;
	border: 1px solid #9e9e9e;
	font-size: 1.6rem;
	font-weight: 500;
	color: #333;
	font-family: var(--font-mincho);
	line-height: 1;
	letter-spacing: 0.05em;

	&:hover {
		opacity: .8;
	}

	span {
		font-size: 1.6rem;
		font-weight: 500;
		color: #333;
		font-family: var(--font-mincho);
		line-height: 1;
		letter-spacing: 0.05em;
	}
}

.bnr-splide {
	width: 50%;
}

@media (max-width: 768px) {
	.bnr {
		padding-block: 120px 0;
	}

	.bnr-container {
		flex-direction: column;
		width: calc(100% - 40px);
		max-width: 500px;
	}

	.bnr-textbox {
		width: 100%;
		height: 245px;
		padding: 40px calc(20/325*100%);
	}

	.bnr-title {
		font-size: 1.6rem;

		&:after {
			bottom: -15px;
			width: 40px;
		}
	}

	.bnr-link {
		gap: 9px;
		width: 127.5px;
		height: 33px;
		font-size: 1.4rem;

		span {
			font-size: 1.2rem;
		}
	}

	.bnr-splide {
		width: 100%;
	}
}

/* next */

.next {
  padding: 90px 0;
}

.next-link {
  position: relative;
	display: block;
  height: 600px;
  margin: 0 auto;
  &:hover {
    .next-ph {
      opacity: 0; /* 非表示 */
    }
		.next-ph--hover {
      opacity: 1; /* 非表示 */
    }
  }
}

.next-ph {
  position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
  display: block;
  width: auto;
  height: 100%;
	transition: .5s;

	& img {
		width: auto;
		height: 100%;
	}
}

.next-ph--hover {
  position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
  display: block;
  width: auto;
  height: 100%;
	opacity: 0;
	transition: .5s;

	& img {
		width: auto;
		height: 100%;
	}
}

/* modal */

.modal {
	position: fixed;
	z-index: 10001;
	display: none;

	&.js-active {
		display: block;
	}
}

.modal-bg {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10000;
	display: none;
	width: 100vw;
	height: 100dvh;
	background: rgba(255, 255, 255, .9);
	opacity: 0;
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
	.next-link {
		height: 450px;
	}
}

@media screen and (max-width: 768px) {
	.next {
		padding: 120px 0;
	}

	.next-link {
		height: 300px;
		&:hover {
			.next-ph {
				opacity: 1;
			}
			.next-ph--hover {
				opacity: 0;
			}
		}
	}
}

/* ========================================
	header
========================================= */

.header {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10000;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	width: 100%;
	height: 70px;
	padding: 10px;
	background: #fff;
}

.header-logo {
	position: absolute;
	top: 10px;
	left: 10px;
	width: auto;
	height: 50px;
	transition: .1s;

	&.js-header-logo {
		height: 120px;
	}

	a {
		display: block;
		width: auto;
		height: 100%;
	}

	img {
		display: block;
		width: auto;
		height: 100%;
	}
}

.header-nav {
	display: flex;
	align-items: center;
	gap: 32px;
}

.header-nav-linklist {
	display: flex;
	align-items: center;
	gap: 34px;
}

.header-nav-linklistitem {
	font-size: 1.6em;
	line-height: 1;
	letter-spacing: 0.1em;

	a {
		position: relative;
		text-decoration: none;

		&:hover {
			opacity: 1;

			.en {
				opacity: 0;
			}
			.jp {
				opacity: 1;
			}
		}
		.en {
			opacity: 1;
			white-space: nowrap;
			transition: .3s;
		}
		.jp {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			opacity: 0;
			white-space: nowrap;
			transition: .3s;
		}
	}
}

.header-nav-linkbtns {
	display: flex;
	align-items: center;
	gap: 10px;
}

.header-nav-linkbtn {
	padding: 0 24px;
}

.header-nav-toggle {
	display: none;
}

.header-globalmenu {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 15000;
	width: 100%;
	height: 100dvh;
	background: #395052;
	opacity: 0;
	visibility: hidden;

	&.js-active {
		opacity: 1;
		visibility: visible;
	}
}

.header-globalmenu-logo {
	position: absolute;
	top: 7.5px;
	left: 7.5px;
	width: auto;
	height: 87.5px;
	transition: .1s;

	img {
		display: block;
		width: auto;
		height: 100%;
	}
}

.header-globalmenu-linklist {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	display: flex;
	flex-direction: column;
	gap: 25px;
	width: max-content;
}

.header-globalmenu-linklistitem {
	display: block;
	width: max-content;
	line-height: 1;

	a {
		display: block;
		width: max-content;
		padding: 10px;
		text-decoration: none;
		font-size: 1.6rem;
		font-family: var(--font-bevietnam);
		color: #fff;
		line-height: 1;
		letter-spacing: 0.1em;
	}
}

.header-globalmenu-linkbtns {
	position: absolute;
	bottom: 0;
	left: 0;
	display: flex;
	width: 100%;
}

.header-globalmenu-linkbtn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50%;
	height: 60px;
	text-decoration: none;
	font-size: 1.2rem;
	color: #fff;
	letter-spacing: 0.085em;
	&:first-child {
		background: #576667;
	}
	&:last-child {
		background: #213c3e;
	}
}

@media screen and (max-width: 899px) {
	.header {
		height: 55px;
		padding: 7.5px;
	}

	.header-logo {
		top: 7.5px;
		height: 40px;

		&.js-header-logo {
			height: 87.5px;
		}
	}

	.header-nav {
		display: none;
	}

	.header-nav-toggle {
		position: relative;
		z-index: 20000;
		display: block;
		width: 40px;
		height: 40px;
		border: 1px solid #395052;
		border-radius: 50%;

		&.js-active {
			border: 1px solid #fff;

			span {
				background: #fff;
				transform: translate(-50%, -50%) rotate(-45deg);

				&::before {
					top: 0;
					transform: rotate(90deg);
					background: #fff;
				}

				&::after {
					display: none;
				}
			}
		}

		span {
			position: absolute;
			top: 50%;
			left: 50%;
			width: 18px;
			height: 1px;
			background: #395052;
			transform: translate(-50%, -50%);
			&::before,
			&::after {
				content: '';
				position: absolute;
				left: 0;
				width: 18px;
				height: 1px;
				background: #395052;
			}
			&::before {
				top: -5px;
			}
			&::after {
				bottom: -5px;
			}
		}
	}
}

/* ========================================
	footer
========================================= */

.footer {
	display: grid;
	row-gap: 130px;
	padding: 12px 10px;
	background: #395052;
	color: #fff;
	font-size: 1.2rem;
}

.footer-top {
	display: flex;
	justify-content: space-between;
}

.footer-address a {
	display: flex;
	align-items: center;
	padding-left: 24px;
	min-height: 23px;
	background: url(../images/common/icon-flag.svg) left center no-repeat;
	background-size: 17px auto;
}

.footer-instagram a {
	display: block;
}

.footer-instagram img {
	width: 24px;
}

.footer-logo img {
	width: 177px;
	margin: 0 auto;
}

.footer-btm {
	display: flex;
	justify-content: space-between;
}

@media screen and (max-width: 768px) {
	.footer {
		row-gap: 120px;
		padding: 10px 10px;
		font-size: 0.8rem;
	}

	.footer-address a {
		padding-left: 19px;
		min-height: 17px;
		background-size: 13px auto;
	}

	.footer-instagram img {
		width: 13px;
	}

	.footer-logo img {
		width: 89px;
	}
}