@charset "utf-8";

/* ========================================================
   1. Variables (CSS変数定義)
   サイト全体の共通設定です。ここを変更すれば全体に反映されます。
   ======================================================== */
:root {
  /* --- Typography: Font Family (ft_) --- */
  --ft_base: "Noto Sans JP", "Yu Gothic Medium", "YuGothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  
  /* 英語フォント */
  --ft_pop: "Poppins", sans-serif;
  --ft_osw: "Oswald", sans-serif;
  --ft_man: "Manrope", sans-serif;

  /* --- Colors (cl_) --- */
  --cl_text:   #333333;       /* 基本文字色 */
  --cl_link:   #000000;       /* リンク色 */
  --cl_main:   #000000;       /* メインカラー */
  --cl_accent: #C00000;       /* アクセントカラー */
  --cl_bg:     #ffffff;       /* 背景色 */

  /* --- Layout: Sizes (wd_) --- */
  --wd_pc: 1200px;
  --wd_sp: 37.5rem;
}

/* ========================================================
   2. Base Style (基本設定)
   ======================================================== */
html {
  font-size: 62.5%; /* 1rem = 10px */
  scrollbar-gutter: stable;
}

body {
  font-family: var(--ft_base);
  font-size: 1.6rem; /* 16px */
  line-height: 1.8;
  color: var(--cl_text);
  text-align: justify;
  font-feature-settings: "palt";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-size-adjust: 100%;
}
body:before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    background: url(../img/body_bg.webp) no-repeat center / cover;
}

/* リンク設定 */
a {
  color: var(--cl_link);
  text-decoration: none;
  transition: transform 0.3s ease,background 0.3s ease;
}

a:hover {
  transform: scale(1.05);
}

/* 画像のレスポンシブ対応 */
img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

/* ========================================================
   3. Layout (レイアウト共通)
   ======================================================== */

/* コンテンツ幅制限用ラッパー */
.l-inner {
  width: 90%;
  max-width: var(--wd_pc);
  margin: 0 auto;
}

/* ========================================================
   4. Utility (汎用クラス)
   ======================================================== */

/* --- Display Switching (PC/SP切り替え) --- */
@media screen and (min-width: 751px) {
	.u-pc-only { display: block; }
	.u-sp-only { display: none; }
}


/* --- Font Helpers (英語フォント指定) --- */
.u-font-en-poppins { font-family: var(--ft_pop); }
.u-font-en-oswald  { font-family: var(--ft_osw); }
.u-font-en-manrope { font-family: var(--ft_man); }

/* --- Text Alignment --- */
.u-text-center { text-align: center; }
.u-text-left   { text-align: left; }
.u-text-right  { text-align: right; }

/* --- Flex Helpers (横並び)  --- */
.u-flex { display: flex; }
.u-flex-wrap { display: flex; flex-wrap: wrap; }
.u-flex_col1 { width: calc(100%/1); }
.u-flex_col2 { width: calc(100%/2); }
.u-flex_col3 { width: calc(100%/3); }
.u-flex_col4 { width: calc(100%/4); }


/* ========================================================
   5. Component (コンポーネントの基底)
   ======================================================== */

/* ボタンのベーススタイル */
.c-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: all 0.3s ease;
}

/* ========================================================
   6. Media Queries (SP対応)
   max-width: 750px
   ======================================================== */
@media screen and (max-width: 750px) {
  html {
    font-size: calc(1.333vw*2); 
  }
  body {
	font-size: 1.6rem;
    line-height: 1.6;
  }
  /* 表示切り替え */
  .u-pc-only { display: none; }
  .u-sp-only { display: block }

  /* FlexカラムをSPで1列に戻す（リセット） */
  .u-flex_col2,
  .u-flex_col3,
  .u-flex_col4 {
    width: calc(100%/1);
  }
}


/* ヘッダー */
.l-header {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 999;
  width: 37.5rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 100%;
  transition: 0.2s max-width;
  padding: 1.5rem 2rem;
}
header.is-blend {
    mix-blend-mode: difference;
}

.l-header .l-header__logo {
  min-width: 14.1rem;
  width: 35%;
}
.l-header .l-header__logo img {
    margin: 0 auto;
    display: block;
}
.l-header.is-menu-open {
  max-width: 100%!important;
  mix-blend-mode: normal;
}


.l-header.is-menu-open .c-hamburger span {
  background-color: #fff !important;
}


/* ナビメニュー&ハンバーガーアイコン */

.p-nav-frame {
  position: relative;
  min-width: 25rem;
  margin: 0 auto;
}


.p-nav-inner {
}

.p-nav-title {
  width: 100%;
  margin: 0 auto 2rem;
  border-bottom: 1px solid rgba(255,255,255,0.5);
}
.p-nav-title img {
    width: 9.8rem;
    min-width: calc(9.8rem + 1.7vw);
    margin: 0;
}
.p-nav-list > li {
    border-bottom: 2px dotted rgba(255, 255, 255, 0.5);
}
.p-nav-list li a {
    position: relative;
    padding: 1.7rem 0;
    display: block;
}
.p-nav-list li a:after {
    content: '';
    display: block;
    width: 1.6rem;
    height: 1.6rem;
    background: url(../img/nav_arrow.webp) no-repeat center/contain;
    position: absolute;
    right: 1.2rem;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 50%;
}

.p-nav-list > li > a {
  width: 100%;
  display: flex;
  gap: 1rem;
  font-size: clamp(1.4rem, calc(1.4rem + 0.3vw), 2.4rem); /* 最小 1.4rem、基本は可変、最大 2.4rem */
  color: #fff;
  font-weight: 400;
  padding: 1.5rem 0;
  padding-right: 8rem;
}

.p-nav-area-list {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    justify-content: center;
    margin: 1rem auto 2rem;
}
.p-nav-area-list li {
    aspect-ratio: 1/1;
    width: 30%;
    border-radius: 50%;
    font-size: clamp(1.2rem, calc(1.2rem + 0.2vw), 2rem);
    background: rgba(255,255,255,0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
}
.p-nav-area-list a {
    width: 100%;
    height: 100%;
    text-align: center;
    line-height: 1.3;
}
.p-nav-area-list li a::after {
    top: auto;
    bottom: 1rem;
    right: 0;
    left: 0;
    margin: 0 auto;
    filter: invert(100%);
    background-size: 1.6rem;
    width: 1.3rem;
    height: 1.3rem;
    transform: translateY(0%);
}


/* --- PC版：1200px以下 --- */
@media (max-width: 1200px) {
  .is-active .p-nav-overlay {
    left: auto!important;
    right: 0;
    transform: translateX(0%);
}
}

/* --- PC版：900px以上 --- */
@media (min-width: 901px) {
  .c-hamburger {
    display: none;
  }
	.l-header,.p-nav-overlay {
	    width: calc(50% - (37.5rem / 2));
	    height: 100%;
	    flex-flow: column;
	    justify-content: center;
	    /* min-height: 75rem; */
	    right: auto;
	    box-sizing: border-box;
	    overflow-y: auto;
	}
.l-header {
    mix-blend-mode: normal!important;
}
	.l-header .u-pc-only .logo {
    width: 34%;
    margin: 4rem auto 6rem;
    filter: invert(100%);
}
.l-header .u-pc-only .p-shop__banner {
    width: 50%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}


	
  .p-nav-overlay {
    position: fixed;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 99;
    display: flex;
    align-items: center;
    right: 0;
  }
}

/* PC版（901px以上）かつ、画面の高さが低い時（650px以下）の限定 */
@media screen and (min-width: 901px) and (max-height: 650px) {
	.l-header {
		justify-content: normal;
		padding: 10vh 0;
	}
}
/* 画面の高さが低い時（750px以下）の限定 */
@media screen and (max-width: 900px) and (max-height: 750px) {
	.p-nav-overlay {
		justify-content: normal!important;
		padding: 6rem 0;
		overflow: auto;
	}
}
/* --- SP版※メニューだけ：900px以下 --- */
@media (max-width: 900px) {
.l-header .u-pc-only {
		display: none;
}
.p-nav-overlay .u-sp-only {
    display: block;
}
.p-nav-overlay .u-sp-only .logo {
    filter: invert(100%);
    width: 11rem;
    margin: 22% auto auto;
    display: block;
}
 .is-active .c-hamburger {
    display: block;
 }
.c-hamburger {
    position: relative;
    width: 3rem;
    height: 0.9rem;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 100;
    padding: 0;
  }
  .c-hamburger span {
    display: block;
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: #fff;
    transition: all 0.4s;
    left: 0;
    border-radius: 0.5rem;
  }

  .c-hamburger span:nth-child(1) {
    top: 0;
  }

  .c-hamburger span:nth-child(2) {
    top: 100%;
    width: calc(100% - 1.4rem);
    right: 0;
    left: auto;
  }

  .c-hamburger.is-active span:nth-child(1) {
    transform: translateY(0.8rem) rotate(45deg);
  }
  .c-hamburger.is-active span:nth-child(2) {
    transform: rotate(-45deg);
    width: 100%;
  }
  .p-nav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../img/menu_bg.webp) no-repeat center /cover;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
    z-index: 90;
    flex-wrap: wrap;
  }
  .p-nav-overlay.is-open {
    opacity: 1;
    visibility: visible;
  }
}


main,footer {
  width: var(--wd_sp);
  margin: 0 auto;
}
main {
	background: #fff;
}

/* fv */
 .p-fv__slide {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100dvh;
  min-height: 70rem;
}

.p-fv__slide-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
}

.is-zoom .p-fv__slide-img {
  animation: zoomUp 8s linear forwards;
}

/* ゆっくり拡大するキーフレーム */
@keyframes zoomUp {
  0% {
      transform: scale(1);
  }
  100% {
      transform: scale(1.15); 
  }
}



.p-fv__silder {
    background: #000;
}
.p-fv__slide.bg-shadow:before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    background: linear-gradient(0deg, rgb(0 0 0) 5%, rgba(35, 24, 21, 0) 20%);
}
.p-fv__slide-catch {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}
.p-fv__slide-catch > * {
    position: absolute;
}

.slide01 .p-fv__slide-catch > * {
    right: 0;
    left: 0;
    margin: 0 auto;
}
.slide01 .p-fv__slide-catch  h1 {
    width: 19rem;
    top: calc(50% - 10rem);
    transform: translateY(-50%);
}
.slide01 .p-fv__slide-catch p {
    width: 9rem;
    bottom: 6%;
}
.slide01 .p-fv__slide-catch h1 span {
    width: 6rem;
    display: block;
    margin: 0 auto 1.6rem;
}
.slide01 .p-fv__slide-catch h1 .logo {
    filter: invert(100%);
}

.slide02 .p-fv__slide-catch {
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    margin-top: 3rem;
}
.slide02 .p-fv__slide-catch > * {
    width: 32rem;
    margin-bottom: 3rem;
    position: relative;
}
.slide02 .p-fv__slide-catch p {
}
.slide02 .p-fv__slide-catch > img:nth-of-type(even) {
    margin-left: auto;
}
.slide02 .p-fv__slide-catch > img:nth-of-type(odd) {
    margin-right: auto;
}

.slide03 .p-fv__slide-catch p {
    width: 20rem;
    margin: 9.5rem 3.5rem;
}
.slide04 .p-fv__slide-catch p {
    width: 8.8rem;
    top: calc(50% - 2rem);
    left: 50%;
    transform: translate(-50%,-50%);
}
.slide04.p-fv__slide.bg-shadow:before {
    background: linear-gradient(0deg, rgb(0 0 0) 7%, rgba(35, 24, 21, 0) 26%);
}

@media (min-width: 751px) {
.p-fv__slide {
    max-height: 75rem;
}
}
@media screen and (max-width: 750px) {
.slide02 .p-fv__slide-catch > * {
    margin-bottom: 1.7rem;
}
}


/* info */
.p-info {
    background: url(../img/info_bg.webp) no-repeat center top/cover;
    color: #fff;
    text-align: center;
    padding: 1rem 0 10rem;
}
.p-info h2 {
    font-size: 1.6rem;
    margin-bottom: 2.5rem;
}
.p-info__catch {
    margin-bottom: 7rem;
}
.p-info__text {
    font-size: 1.3rem;
    line-height: 2;
}

/* facility */
.p-facility {
    margin-top: -12rem;
}
.p-facility__list {
    position: relative;
    padding-bottom: 2rem;
}
.p-facility__list:after {
    content: '';
    display: block;
    width: 100%;
    height: 6rem;
    background: url(../img/facility__list_bottom.webp) no-repeat center/contain;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.5px;
    margin: 0 auto -6rem;
}


.p-facility__card +.p-facility__nav {
    margin-top: 8rem;
}
.p-facility__nav {
    text-align: center;
    font-weight: 500;
}
.p-facility__nav-area-name {
    background: #000;
    color: #fff;
    font-size: 1.5rem;
    padding: 1rem;
    position: relative;
    text-align: center;
    justify-content: center;
    align-items: center;
}

.p-facility__nav-area-name:before,.p-facility__nav-area-name:after {
    content: '';
    display: block;
    width: 0.6rem;
    height: 0.6rem;
    background: #fff;
    box-shadow: 1.2rem 0 0 0 #fff;
}
.p-facility__nav-area-name:before {
    margin-right: 3rem;
}
.p-facility__nav-area-name:after  {
    box-shadow: -1.2rem 0 0 0 #fff;
    margin-left: 3rem;
}
.p-facility__nav-area-list {
	background: url(../img/wood_bg.webp) repeat center/52.6rem;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	border-top: 1px solid #fff;
}
.p-facility__nav-area-list li {
	border-bottom: 1px solid #fff;
}
.p-facility__nav-area-list li:nth-child(even) {
    border-left: 1px solid #fff;
}
.p-facility__nav-area-list li a {
    color: #fff;
    font-size: 1.3rem;
    padding: 1.5rem 2.5rem;
    position: relative;
    line-height: 1.5;
    min-height: 7rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}
.p-facility__nav-area-list li a:after {
    content: '';
    display: block;
    width: 0.9rem;
    height: 0.9rem;
    background: url(../img/facility_nav_arrow.webp) no-repeat center/contain;
    position: absolute;
    right: 1.2rem;
    top: 50%;
    transform: translateY(-50%);
}
.p-facility__nav-area-list li a .u-pick_bg {
    background: #fff;
    color: #42210b;
    margin: 0 2rem;
    padding: 0rem 0.5rem 0.1rem;
}
.p-facility__nav-area-list .coming-soon a {
    pointer-events: none;
    letter-spacing: 0.1rem;
}
.p-facility__nav-area-list .coming-soon a:after {
    opacity: 0;
}


.p-facility__card {
    width: 90%;
    margin: 3.2rem auto;
}
.p-facility__logo {
    width: 28rem;
    margin: 0 auto;
}
.p-facility__name {
    font-size: 1.3rem;
    margin: 1.3rem auto;
    text-align: center;
    font-weight: 500;
}


.p-facility__intro {
    width: 28rem;
    margin: 0 auto;
    padding: 0 3rem 3rem;
    box-sizing: content-box;
    position: relative;
    color: #fff;
    z-index: 1;
}
.p-facility__intro:before {
    content: '';
    display: block;
    width: 100%;
    height: calc(100% - 5rem);
    position: absolute;
    background: #000;
    z-index: -1;
    left: 0;
    bottom: 0;
    border-radius: 1.2rem;
}

.p-facility__img {
    margin:  auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.3rem;
}
.p-facility__text {
    font-size: 1.3rem;
    line-height: 2;
    margin: 2rem 0;
}
.p-facility__link {
    font-size: 1.3rem;
    text-align: center;
    display: block;
    letter-spacing: 0.4rem;
    color: #fff;
    border: 1px solid;
    padding: 1rem 4rem;
    position: relative;
    background: #000;
}
.p-facility__link:hover {
    background: #4d4d4d;
}
.p-facility__link:after {
    content: '';
    display: block;
    width: 2.4rem;
    height: 0.6rem;
    background: url(../img/more_arrow.webp) no-repeat center/contain;
    position: absolute;
    right: 1.3rem;
    top: 50%;
    transform: translateY(-50%);
}

.p-facility__card.coming-soon .p-facility__name {
    font-size: 2.2rem;
    letter-spacing: 0.4rem;
    color: #31485d;
}
.u-pick_bg {
    padding: 0.1rem 0.5rem 0.3rem;
}
.p-facility__card.coming-soon .p-facility__name .u-pick_bg {
    color: #fff;
    padding: 0.1rem 0.5rem 0.3rem;
    padding-left: 1rem;
    background: #31485d;
    margin-right: 1rem;
}

.p-facility__card.coming-soon .p-facility__intro {
    /* padding: 0; */
    /* width: 100%; */
}
.p-facility__card.coming-soon .p-facility__intro:before {
    /* opacity: 0; */
}

.p-facility_more {
    background: url(../img/wood_bg.webp) repeat center / 52.6rem;
    text-align: center;
    color: #fff;
    padding: 8rem 0 21rem;
    font-size: 1.3rem;
    line-height: 2;
    margin: 0 0 -20rem;
}



/* shop */
.p-shop {
    background: #000;
    padding: 10rem 0 5rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
}
.p-shop__item {
    width: 85%;
    margin: 0 auto;
}
.p-shop__item-title {
  text-align: center;
  font-size: 1.5rem;
  padding-bottom: 1rem;
  margin-bottom: 2.6rem;
  position: relative;
  color: #fff;
}

.p-shop__item-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 17rem;
  height: 1px;
  background: #fff;
}
.p-shop__banner a {
    display: block;
}



/* footer */
.l-footer {
    background: #000;
    color: #fff;
    text-align: center;
    padding-bottom: 1rem;
}
.l-footer__logo {
    width: 11.8rem;
    display: block;
    margin: 0 auto;
}
.copy {
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.2rem;
    margin: 2rem auto;
}


.p-float {
    position: fixed;
    z-index: 99;
    transition: 0.3s opctiy;
    width: 100%;
    left: 0;
    bottom: 0;
}
.p-float .l-inner {
    width: 100%;
    max-width: var(--wd_sp);
    padding: 1.5rem;
}
#page-top {
    width: 7rem;
    display: block;
    margin: 0 0 0 auto;
}
@media screen and (max-width: 900px) {
	.p-float {
    z-index: 1;
}
}
@media screen and (max-width: 750px) {
	#page-top {
	    width: 5rem;
	}
}