/*--------------------------------------------------------------
# Google fonts
--------------------------------------------------------------*/
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap");

/*--------------------------------------------------------------
# カスタムプロパティ
--------------------------------------------------------------*/
:root {
  /* 色 */
  --color-primary: #912525;
  --color-secondary: #912525;
  --color-tertiary: #d2af50;
  --color-quaternary: #d2af50;
  --color-highlight: #c8b6e2;
  --color-danger: #ff2020;
  /* コンテナーの幅 */
  --container-width: 960px;
  /* コンテナーの最大幅 */
  --container-max-width: 90%;
  /* Fontawesome */
  --fontawesome: "Font Awesome 6 Pro";
  --fontawesome-brands: "Font Awesome 6 Brands";
  /* font-family */
  --font-accent: "Playfair Display", serif;
  --font-main: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "游明朝",
    "Yu Mincho", "游明朝体", "YuMincho", "ＭＳ Ｐ明朝", "MS PMincho", serif;
  /* Gridレイアウト 要素同士の間隔 */
  --grid-gap: 3.25rem;
  /* セクション内の余白 */
  --inner-padding: 3.5rem;
  /* 見出しの標準サイズ */
  --h2-font-size: 3.75rem;
  /* ヘッダーの高さ */
  --header-height: 80px;
  /* CTAの高さ(PCでは幅) */
  --cta-height: 40px;
  /* SNS */
  --color-facebook: #4267b2;
  --color-twitter: #1da1f2;
  --color-instagram: #c13584;
  --color-youtube: #ff0000;
}

@media screen and (min-width: 768px) {
  :root {
    /* CTAの高さ(PCでは幅) */
    --cta-height: 64px;
  }
}

@media screen and (min-width: 992px) {
  :root {
    /* コンテナーの最大幅 */
    --container-max-width: calc(100% - 180px);
    /* Gridレイアウト 要素同士の間隔 */
    --grid-gap: 3.75rem;
    /* セクション内の余白 */
    --inner-padding: 6.25rem;
    /* 見出しの標準サイズ */
    --h2-font-size: 5.75rem;
  }
}

/* 色の割り当て
--------------------------------------------- */
:root {
  /* 文字色 */
  --color-headline-primary: #bbe1bb;
  --color-text-primary: #ffffff;
  /* 背景色 */
  --color-background: #912525;
  /* ボタン背景 */
  --btn-background-color: var(--color-primary);
  /* ボタン背景 hover*/
  --btn-background-color-hover: #e6f1e6;
  /* テキストリンク文字色 */
  --btn-text-color: var(--color-primary);
  --btn-text-hover-color: var(--color-highlight);
  /* ボーダー */
  --border-color: var(--color-quaternary);
  /* セクションの背景 */
  --card-background: var(--color-quaternary);
}

/* normalize
--------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

a,
a:visited {
  display: inline-block;
  color: inherit;
  text-decoration: none;
}

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

a:focus {
  outline: none;
}

.post,
.page {
  margin: 0;
}

/*--------------------------------------------------------------
# レイアウト崩れ防止
--------------------------------------------------------------*/
/* footerが常に画面最下部にいるように固定
--------------------------------------------- */
#page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.site-footer {
  margin-top: auto;
}

/*--------------------------------------------------------------
# 汎用
--------------------------------------------------------------*/
html {
  font-size: 16px;
}

body {
  font-family: var(--font-main);
  background: var(--color-background);
  line-height: 1.75em;
}

p {
  line-height: 2em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.75em;
}

.page h1,
.page h2,
.page h3,
.page h4,
.page h5,
.page h6,
.home h1,
.home h2,
.home h3,
.home h4,
.home h5,
.home h6,
.sub-header h1,
p {
  margin: 0;
}

.post h1,
.post h2,
.post h3,
.post h4,
.post h5,
.post h6 {
  line-height: 1.25em;
}

.sub-header {
  padding-top: var(--header-height);
}

@media screen and (min-width: 768px) {
  .align-right {
    text-align: right;
  }
}

/* コンテンツの幅
--------------------------------------------- */
section {
  padding-top: var(--inner-padding);
}

section#first-view {
  padding: 0;
}

.container {
  width: var(--container-width);
  max-width: var(--container-max-width);
  margin-right: auto;
  margin-left: auto;
}

@media screen and (min-width: 992px) {
  section {
    padding-top: 6.25rem;
  }
}

/*--------------------------------------------------------------
# フォント
--------------------------------------------------------------*/
/* 見出し
--------------------------------------------- */
.home h2 {
  font-size: var(--h2-font-size);
  color: var(--color-headline-primary);
  margin-bottom: 2.25rem;
}

/* 文章
--------------------------------------------- */
body,
button,
input,
select,
optgroup,
textarea,
p {
  color: var(--color-text-primary);
}

.text-accent {
  font-family: var(--font-accent);
  color: var(--color-primary);
  line-height: 1.25em;
  transform: translate(0, 0.2em);
}

/*--------------------------------------------------------------
# 画像
--------------------------------------------------------------*/
.bg-img {
  background: #666;
}

/*--------------------------------------------------------------
# グリッド
--------------------------------------------------------------*/
.grid-wrapper {
  display: grid;
  grid-gap: var(--grid-gap);
  gap: var(--grid-gap);
}

@media screen and (min-width: 768px) {
  .grid-wrapper.half-width {
    grid-template-columns: repeat(2, 1fr);
  }
}

/*--------------------------------------------------------------
# サイトロゴ
--------------------------------------------------------------*/
.site-title a,
.site-title img {
  display: block;
}

/* Header Logo */
.site-header .site-branding {
  display: block;
  height: calc(100% - 0.5rem);
  padding: 1.25rem;
}

.site-header .site-branding .site-title,
.site-header .site-branding .site-title a,
.site-header img {
  height: 100%;
  display: block;
}

.site-header .site-branding img {
  height: 100%;
}

@media screen and (min-width: 992px) {
  .site-header .site-branding {
    height: auto;
    padding: 0;
  }

  .site-header .site-branding .site-title {
    width: 65%;
    margin-right: auto;
    margin-left: auto;
  }

  .site-header .site-branding .site-title,
  .site-header .site-branding .site-title a,
  .site-header img {
    height: auto;
  }
}

/* Footer Logo */
.site-footer .site-title {
  width: 160px;
  max-width: 75%;
  height: auto;
  margin: auto;
}

@media screen and (max-width: 992px) {
  .site-footer .site-title {
    margin-left: auto;
  }
}

/*--------------------------------------------------------------
# HEADER
--------------------------------------------------------------*/
.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: var(--header-height);
  transition: all ease 0.2s;
  z-index: 11;
}

.nav_wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px;
}

@media screen and (min-width: 992px) {
  .home .site-header {
    flex-direction: column;
    justify-content: space-around;
    height: auto;
  }

  .nav_wrapper {
    width: 75%;
    margin-right: auto;
    margin-left: auto;
  }
  .nav_wrapper a {
    color: var(--color-secondary);
    display: inline-block;
    transition: 0.3s;
  }
  .nav_wrapper a:hover {
    text-decoration: underline;
  }
}

/* 予約リンク
--------------------------------------------- */
.site-header .btn-reserve {
  width: 100%;
}

.pc.main-navigation ul .btn-reserve a,
.sp.main-navigation ul .btn-reserve a {
  display: flex;
  justify-content: center;
  background: var(--color-tertiary);
  color: var(--color-background);
  width: 100%;
  padding: 0.5rem 0;
  border: 1px solid var(--color-tertiary);
  transition: all 0.2s;
}

.pc.main-navigation ul .btn-reserve a:hover,
.sp.main-navigation ul .btn-reserve a:hover {
  background: transparent;
  color: var(--color-tertiary);
}

/* PCナビゲーション
--------------------------------------------- */
.home .pc.main-navigation ul {
  flex-direction: column;
  align-items: center;
}

.home .pc.main-navigation ul li:not(:last-child) {
  margin-bottom: 1.25rem;
}

.pc.main-navigation ul a {
  color: var(--btn-text-color);
  transition: all 0.2s;
}

.pc.main-navigation ul a:hover {
  color: var(--btn-text-hover-color);
}

/* SNSリスト
--------------------------------------------- */
.sns-list {
  margin-right: auto;
  margin-left: auto;
}

.sns-list ul {
  display: flex;
  list-style: none;
  justify-content: center;
  margin: 0;
  padding: 0;
}

.sns-list i {
  color: var(--btn-background-color);
  font-size: 3.7rem;
  transition: all 0.2s ease-out;
}

.sns-list .facebook:hover i,
.sns-list .facebook:focus i {
  color: var(--color-facebook);
}

.sns-list .twitter:hover i,
.sns-list .twitter:focus i {
  color: var(--color-twitter);
}

.sns-list .instagram:hover i,
.sns-list .instagram:focus i {
  color: var(--color-instagram);
}

.sns-list .youtube:hover i,
.sns-list .youtube:focus i {
  color: var(--color-youtube);
}

@media screen and (max-width: 991px) {
  .sns-list i {
    font-size: 2.7rem;
  }
  .nav_wrapper a {
    font-size: 0.9rem;
    border-bottom: 1px solid var(--color-secondary);
    color: var(--color-secondary);
  }
  a.instagram {
    border-bottom: none;
  }
}

/* SNSリスト SP */
.sns-list.sp {
  margin: auto;
}

/* SNSリスト PC */
.sns-list.pc {
  width: 75%;
}

/*--------------------------------------------------------------
# CTA, Topに戻るボタン
--------------------------------------------------------------*/
#cta-wrapper {
  position: fixed;
  display: grid;
  grid-template-columns: 1fr var(--cta-height);
  grid-gap: 0.75rem;
  gap: 0.75rem;
  height: calc(var(--cta-height) + 0.75rem);
  width: 100%;
  padding: 0 0.75rem 0.75rem 0.75rem;
  bottom: calc(-1 * var(--cta-height) - 0.75rem);
  transition: all 0.2s ease-out;
  z-index: 50;
}

#cta-wrapper.scrolled {
  bottom: 0;
}

@media screen and (min-width: 992px) {
  #cta-wrapper {
    grid-template-columns: var(--cta-height);
    width: var(--cta-height);
    height: auto;
    padding: 0;
    right: calc(-1 * var(--cta-height) - 0.75rem);
    bottom: 0.75rem;
  }

  #cta-wrapper.scrolled {
    right: 0.75rem;
    bottom: 0.75rem;
  }
}

/* CTAボタン
--------------------------------------------- */
#cta {
  color: var(--color-secondary);
  border: 1px solid var(--color-secondary);
}

#cta a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.9rem;
  background: rgba(255, 255, 255, 0.8);
  line-height: 1em;
  width: 100%;
  height: 100%;
  transition: all 0.2s ease-out;
}

#cta a:hover {
  background-color: var(--card-background);
}

@media screen and (min-width: 992px) {
  #cta a {
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    text-orientation: upright;
    height: fit-content;
    padding: 1.25rem 0;
  }
}

/* Topに戻るボタン
--------------------------------------------- */
#totop {
  border: 1px solid var(--color-secondary);
  color: var(--color-secondary);
  transition: all 0.2s ease-out;
  z-index: 50;
}

#toptop:hover {
  background-color: var(--color-secondary);
}

.scrolled #totop {
  right: 1.25rem;
}

#totop a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.3rem;
  background: rgba(255, 255, 255, 0.8);
  line-height: 1em;
  width: 100%;
  height: 100%;
  transition: all 0.2s ease-out;
}

#totop a:hover {
  background-color: var(--card-background);
}

#totop i {
  font-size: 1rem;
}

@media screen and (min-width: 992px) {
  #totop {
    height: var(--cta-height);
  }
}

/*--------------------------------------------------------------
# FOOTER
--------------------------------------------------------------*/

.site-footer {
  padding-bottom: calc(var(--cta-height) + 2.25rem);
}

.site-footer .site-info {
  width: 100%;
  margin-bottom: 2.25rem;
}

@media screen and (min-width: 992px) {
  .home .site-footer {
    padding-top: 5rem;
    text-align: center;
    background-color: #ececec;
  }

  .site-footer {
    padding-bottom: 3.25rem;
  }

  .site-footer > .container {
    flex-direction: initial;
    justify-content: space-between;
    align-items: flex-end;
  }

  .site-footer .site-info {
    margin-bottom: 20px;
  }
}
@media screen and (max-width: 992px) {
  .home .site-footer {
    text-align: center;
    background-color: #ececec;
    padding-top: 2rem;
    margin-top: 6.25rem;
  }
}

/* FOOTERナビゲーション
--------------------------------------------- */
.footer-navigation {
  display: flex;
  justify-content: center;
  align-items: center;
}

#menu-footernav {
  display: flex;
  list-style: none;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 0 2.25rem 0;
  padding: 0;
}

#menu-footernav li {
  line-height: 1em;
  margin-top: 0.25em;
  margin-bottom: 0.25em;
}

#menu-footernav li:not(:last-child) {
  margin-right: 0.5em;
  padding-right: 0.5em;
  border-right: 1px solid var(--color-primary);
}

@media screen and (min-width: 992px) {
  #menu-footernav {
    margin: 0 0 0 1.75rem;
  }
}

/* COPYRIGHT
--------------------------------------------- */
copyright {
  color: #808080;
  font-size: 0.9rem;
}

/*--------------------------------------------------------------
# ファーストビュー
--------------------------------------------------------------*/
.home .first-view-wrapper {
  min-height: 100vh;
}

@media screen and (max-width: 991px) {
  .home #first-view {
    height: calc(100vh - var(--header-height));
  }
}

/* ZoomDown アニメーション
--------------------------------------------- */
@keyframes zoomDown {
  0% {
    -webkit-transform: scale(1.15);
    transform: scale(1.15);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

/* スライダー
--------------------------------------------- */
.slider-first-view {
  width: 100%;
  height: 100%;
  position: relative;
}

.first-view-catchcopy {
  position: absolute;
  top: 10%;
  right: 5%;
  font-size: 3rem;
  z-index: 100;
  color: #d2af50;   /* ゴールド系のベースカラー */
  font-weight: bold;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;

  /* 光彩を強めてロゴっぽく */
  text-shadow:
    0 0 8px #fff,                     /* 細い白フチ */
   /* 0 0 4px rgba(255,255,255,0.9),     内側の光 */
   0 0 12px rgba(255, 255, 255, 1),    /* 黄金寄りの光 */
   0 0 12px rgba(255, 255, 255, 1),    /* 黄金寄りの光 */
   0 0 14px rgba(242, 242, 236, 1),   /* 柔らかい外光 */
    0 0 14px rgba(255, 255, 255, 1);   /* 広がる輝き */
}


.slider-first-view .swiper-slide {
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.slider-first-view .swiper-slide-active .bg-img,
.slider-first-view .swiper-slide-duplicate-active .bg-img,
.slider-first-view .swiper-slide-prev .bg-img {
  -webkit-animation: zoomDown 12s linear 0s;
  animation: zoomDown 12s linear 0s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.slider-first-view .bg-img {
  background-size: cover;
  background-position: center center;
  height: 100%;
}

@media screen and (min-width: 992px) {
  .home .first-view-wrapper {
    display: grid;
    grid-template-columns: 320px minmax(50%, 1fr);
  }
}

/* スライドイン アニメーション
--------------------------------------------- */
@keyframes slideCover {
  100% {
    transform: translateX(100%);
  }
}

.slidein-img {
  overflow: hidden;
  position: relative;
}

.slidein-img:before {
  content: "";
  background-color: rgba(0, 0, 0, 0.1);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.slidein-img > span {
  animation: slideCover 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  content: "";
  position: absolute;
  background: var(--color-background);
  height: calc(100% / 3);
  right: 0;
  left: 0;
  will-change: transform;
  z-index: 1;
}

.slidein-img > span:first-child {
  top: 0;
}

.slidein-img > span:nth-child(2) {
  animation-delay: 0.2s;
  top: calc(100% / 3);
}

.slidein-img > span:nth-child(3) {
  animation-delay: 0.4s;
  top: calc(100% / 3 * 2);
}

/* 画像指定
--------------------------------------------- */
.slider-first-view .slide-1 .bg-img {
  background: url(img/first-view/first-view1.webp) center center / cover
    no-repeat;
}

.slider-first-view .slide-2 .bg-img {
  background: url(img/first-view/first-view2.webp) center center / cover
    no-repeat;
}

.slider-first-view .slide-3 .bg-img {
  background: url(img/first-view/first-view3.webp) center center / cover
    no-repeat;
}

/*--------------------------------------------------------------
# コンセプト
--------------------------------------------------------------*/
#concept .container {
  width: 95%;
  max-width: none;
  margin-right: auto;
  margin-left: 0;
  padding-bottom: 0;
}

#concept .inner {
  background: var(--card-background);
  padding: var(--inner-padding) 0 calc(var(--inner-padding) * 2);
}

#concept .wrapper {
  text-align: justify;
  max-width: 80%;
  margin-right: auto;
  margin-left: auto;
}

/* 見出し */
#concept h2 {
  color: var(--card-background);
  margin: 0;
}

/* テキスト */
#concept .copy {
  font-size: 1.25em;
  line-height: 1.75em;
  margin-bottom: 0.75em;
}
#concept .copy__detail {
  font-size: 0.85em;
}

/* 画像 */
#concept .bg-img {
  width: 90%;
  max-height: 480px;
  aspect-ratio: 16 / 9;
  margin-top: -3.25rem;
  margin-left: auto;
}

@media screen and (min-width: 992px) {
  #concept {
    display: flex;
    align-items: flex-end;
  }

  #concept .wrapper {
    width: 60%;
  }

  #concept .inner {
    position: relative;
    margin-bottom: 3.25rem;
    padding: var(--inner-padding) 0;
  }

  #concept .inner > * {
    position: relative;
    z-index: 1;
  }

  #concept .inner::after {
    content: "";
    position: absolute;
    background: var(--card-background);
    width: 180%;
    height: 100%;
    bottom: 0;
    left: 0;
    z-index: 0;
  }

  /* 画像 */
  #concept .bg-img {
    max-width: none;
    margin: 0;
    aspect-ratio: 4 / 3;
  }
}

/* 画像指定
--------------------------------------------- */
#concept .bg-img {
  background: url(img/concept/concept.webp) center center / cover no-repeat;
}

/*--------------------------------------------------------------
# スタッフ
--------------------------------------------------------------*/
#staff .container {
  width: 95%;
  max-width: none;
  margin-right: 0;
  margin-left: auto;
  padding-bottom: 0;
}

#staff .inner {
  background: var(--card-background);
  padding: 0 0 var(--inner-padding);
}

#staff .grid-wrapper {
  text-align: justify;
  max-width: 80%;
  margin-right: auto;
  margin-left: auto;
}

/* 見出し */
#staff h2 {
  color: var(--color-background);
  margin-bottom: var(--inner-padding);
  transform: translate(-0.05em, -0.3em);
}

/* スタッフ情報
--------------------------------------------- */
.staff-profile {
  font-size: 0.9rem;
}

/* 各項目間の余白 */
.staff-profile > *:not(:last-child) {
  margin-bottom: 1.75rem;
}

/* 役職 */
.staff-profile .position {
  color: var(--color-primary);
}

/* 氏名 */
.staff-profile h3 {
  font-size: 1.25rem;
}

/* 英語氏名 */
.staff-profile h3 span {
  display: inline-block;
  font-size: 0.75em;
  padding-left: 1em;
}

/* 従業員写真 */
.staff-profile .staff-photo {
  background: center center / cover no-repeat;
  aspect-ratio: 1 / 1;
}

/* 保有資格 */
/* 活動実績 */
.staff-profile .license h4,
.staff-profile .ahievement h4 {
  color: var(--color-primary);
  margin-bottom: 0.25rem;
}

.staff-profile .license ul,
.staff-profile .ahievement ul {
  margin: 0;
  padding-left: 1.25em;
}

/* 画像指定
--------------------------------------------- */
#staff-a.staff-profile .staff-photo {
  background-image: url(img/staff/staff1.webp);
}

#staff-b.staff-profile .staff-photo {
  background-image: url(img/staff/staff2.webp);
}

/*--------------------------------------------------------------
# メニュー
--------------------------------------------------------------*/
#menu h2 {
  color: var(--card-background);
  margin: 0;
}

#menu .container {
  width: 100%;
  max-width: 100%;
}

#menu .inner {
  background: var(--card-background);
  padding: var(--inner-padding) 0;
}

#menu .grid-wrapper {
  grid-gap: var(--grid-gap);
  gap: var(--grid-gap);
  width: var(--container-width);
  max-width: var(--container-max-width);
  margin: auto;
}
p.description {
  font-size: 0.85rem;
}

#menu .grid-wrapper:not(:last-child) {
  margin-bottom: var(--grid-gap);
  padding-bottom: 0;
}

#menu .grid-wrapper:not(:first-child) {
  padding-top: 0;
}

/* 各項目間の余白 */
.menu-item > *:not(:last-child) {
  margin-bottom: 1rem;
}

/*--------------------------------------------------------------
# ギャラリー
--------------------------------------------------------------*/
#gallery .container {
  position: relative;
  width: 100%;
  max-width: 100%;
  padding-bottom: 1.25rem;
}

#gallery .container::before {
  content: "";
  position: absolute;
  background: var(--color-tertiary);
  width: 100%;
  height: 50%;
  left: 0;
  bottom: 0;
}

#gallery h2 {
  color: var(--color-tertiary);
  margin: 0;
  line-height: 1.25em;
}

#gallery .wrapper {
  position: relative;
  z-index: 1;
}

#gallery .wrapper.text-accent {
  transform: translate(0, 0.75em);
  z-index: 2;
}

#gallery .slider-gallery {
  width: 90%;
  margin-right: auto;
  margin-left: auto;
}

#gallery .slider-gallery .swiper-slide .bg-img {
  background-size: cover;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 4 / 3;
}

@media screen and (min-width: 768px) {
  #gallery .container {
    padding-bottom: 3.25rem;
  }

  #gallery .wrapper {
    display: flex;
    align-items: flex-end;
  }

  #gallery .slider-gallery {
    width: 80%;
  }
}

@media screen and (min-width: 992px) {
  #gallery .wrapper.text-accent {
    transform: translate(0, 1.2em);
  }
}

/* ナビゲーションのノーマライズ
--------------------------------------------- */
#gallery .swiper-button-next,
#gallery .swiper-button-prev {
  position: relative;
  width: auto;
  height: auto;
  margin: 0;
  top: initial;
  right: initial;
  bottom: initial;
  left: initial;
}

#gallery .swiper-button-wrapper {
  flex: 1;
  display: flex;
  grid-gap: 0.75rem;
  gap: 0.75rem;
  justify-content: flex-start;
  height: fit-content;
}

/* ナビゲーションのスタイル
--------------------------------------------- */
#gallery .swiper-button-wrapper {
  width: fit-content;
  margin-top: 1.25rem;
  margin-right: 5%;
  margin-left: auto;
}

#gallery .swiper-button-next,
#gallery .swiper-button-prev {
  color: var(--btn-text-color);
  width: fit-content;
  height: fit-content;
}

#gallery .swiper-button-prev:after,
#gallery .swiper-rtl .swiper-button-next:after {
  content: "\f104";
  font-family: var(--fontawesome);
  font-weight: 200;
  width: 1.25em;
  height: 1.25em;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid;
  border-radius: 50%;
  transition: 0.2s;
}

#gallery .swiper-button-next:after,
#gallery .swiper-rtl .swiper-button-prev:after {
  content: "\f105";
  font-family: var(--fontawesome);
  font-weight: 200;
  width: 1.25em;
  height: 1.25em;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid;
  border-radius: 50%;
  transition: 0.2s;
}

#gallery .swiper-button-next:hover::after,
#gallery .swiper-button-prev:hover::after {
  background: rgba(255, 255, 255, 0.2);
}

@media screen and (min-width: 768px) {
  #gallery .swiper-button-wrapper {
    margin: 0 0 0 1.75rem;
  }
}


/* 画像指定
--------------------------------------------- */

/* 旧：slider-gallery の画像割当は未使用化推奨

#gallery .slider-gallery .slide-1.swiper-slide .bg-img {
  background-image: url(img/gallery/gallery1.webp);
  background-position: 60% 25%;
}

#gallery .slider-gallery .slide-2.swiper-slide .bg-img {
  background-image: url(img/gallery/gallery2.webp);
  background-position: 0% 45%;
}

#gallery .slider-gallery .slide-3.swiper-slide .bg-img {
  background-image: url(img/gallery/gallery3.webp);
  background-position: bottom;
}

#gallery .slider-gallery .slide-4.swiper-slide .bg-img {
  background-image: url(img/gallery/gallery4.webp);
  background-position: 0% 60%;
}

#gallery .slider-gallery .slide-5.swiper-slide .bg-img {
  background-image: url(img/gallery/gallery5.webp);
  background-position: 0% 60%;
}
*/

/*--------------------------------------------------------------
# アクセス
--------------------------------------------------------------*/
#access h2 {
  color: var(--color-tertiary);
  margin-top: -0.65em;
  transform: translate(0, 0.15em);
}

#access .container {
  padding-top: 0;
}

#access .bg-img {
  width: 95%;
  max-width: 95%;
  aspect-ratio: 16 / 9;
  margin-left: auto;
}

#access table {
  margin-bottom: 2.25rem;
}

#access tr {
  display: block;
}

#access tr:not(:last-child) {
  margin-bottom: 1.75rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--border-color);
}

#access th,
#access td {
  display: block;
  text-align: left;
  padding: 0;
  line-height: 2em;
}

#access th {
  margin-bottom: 0.75rem;
}

#access .map {
  width: 100%;
  aspect-ratio: 4 / 3;
}

#access .map iframe {
  display: block;
}

@media screen and (min-width: 992px) {
  #access .container {
    padding: 3.5rem 5%;
  }

  #access .wrapper {
    display: flex;
    padding-top: 3.5rem;
  }

  #access .wrapper > * {
    width: 50%;
  }

  #access .title-wrapper {
    display: flex;
    flex-direction: column;
  }

  #access .title-wrapper > .bg-img {
    position: relative;
    order: 2;
  }

  #access .title-wrapper > h2 {
    width: 95%;
    margin-bottom: -0.2em;
    text-align: right;
    transform: initial;
    order: 1;
  }

  #access .bg-img {
    height: 100%;
    aspect-ratio: initial;
    margin-right: auto;
    margin-left: 0;
  }
}

/* 画像指定
--------------------------------------------- */
#access .bg-img {
  background: var(--color-tertiary) url(img/access/access.webp) left top /
    contain no-repeat;
}

@media screen and (min-width: 992px) {
  #access .bg-img {
    background-position: center top;
  }
}

/* ==========================================================
404
=========================================================== */
.error404 .page-content {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%;
  margin: 0;
}

.error404 .site-header {
  display: none;
}

.error404 h2 {
  font-family: var(--font-accent);
  font-size: 6.25rem;
  font-weight: 700;
  margin: 0;
}

.error404 .text {
  font-weight: 700;
}

.error404 .back {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-primary);
  min-width: 240px;
  margin: 3.25rem auto 0;
  padding: 1.25rem 3.25rem;
  border: 1px solid var(--color-primary);
  cursor: pointer;
  transition: all 0.2s;
}

.error404 .back:hover {
  background: var(--color-primary);
  color: var(--color-background);
}

/*--------------------------------------------------------------
# アニメーション
--------------------------------------------------------------*/
.animate {
  opacity: 0;
}

/* ブラー
--------------------------------------------- */
.animate__blur.animate__animated {
  animation-name: animateBlur;
  animation-delay: 0.2s;
}
.menu-item h3 {
  border-bottom: 1px solid;
}

@keyframes animateBlur {
  0% {
    -webkit-filter: blur(15px);
    -moz-filter: blur(15px);
    -ms-filter: blur(15px);
    -o-filter: blur(15px);
    filter: blur(15px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    -ms-filter: blur(0px);
    -o-filter: blur(0px);
    filter: blur(0px);
    opacity: 1;
  }
}

/* 左から表示
--------------------------------------------- */
.animate__slideInBox {
  overflow: hidden;
  position: relative;
}

.animate__slideInBox.animate__animated {
  opacity: 1;
}

.animate__slideInBox::before {
  animation: animateSlideInBox 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  background: var(--color-background);
  bottom: 0;
  content: "";
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  /* will-change: transform; */
  z-index: 1;
}

@keyframes animateSlideInBox {
  100% {
    transform: translateX(100%);
  }
}

/*--------------------------------------------------------------
# メディアクエリ
--------------------------------------------------------------*/
.pc {
  display: none;
}

@media (min-width: 992px) {
  .pc {
    display: block;
  }

  .sp {
    display: none;
  }
}



/* ギャラリー：隙間ゼロ＆端まで */
#gallery .gallery-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr)); /* SP: 横2 */
  gap:0; /* ← 隙間なし */
  width:100%;
  margin:0;
}
@media (min-width: 992px){
  #gallery .gallery-grid{
    grid-template-columns:repeat(3,minmax(0,1fr)); /* PC: 横3 */
  }
}

/* 各セルも余白ゼロ */
#gallery .gallery-grid .gallery-item{ margin:0; }
#gallery .gallery-grid .gallery-item .bg-img{
  display:block;
  width:100%;
  aspect-ratio:4/3;         /* 必要に応じて変更可 */
  background-size:cover;
  background-position:center;
  /* 動きを残すなら下2行、完全に静止にしたいなら削除 */
  transition:transform .25s ease, box-shadow .25s ease;
}
#gallery .gallery-grid .gallery-item:hover .bg-img{
  transform:scale(1.02);
  box-shadow:0 6px 20px rgba(0,0,0,.12);
}

/* （任意）セクション下の色帯が“隙間”に見える場合は消す */
#gallery .container{ padding-bottom:0; }
#gallery .container::before{ content:none; }


/* 画像割当（gallery1.webp〜gallery6.webp） */
#gallery .gallery-grid .g1 .bg-img { background-image: url(img/gallery/gallery1.webp); }
#gallery .gallery-grid .g2 .bg-img { background-image: url(img/gallery/gallery2.webp); }
#gallery .gallery-grid .g3 .bg-img { background-image: url(img/gallery/gallery3.webp); }
#gallery .gallery-grid .g4 .bg-img { background-image: url(img/gallery/gallery4.webp); }
#gallery .gallery-grid .g5 .bg-img { background-image: url(img/gallery/gallery5.webp); }
#gallery .gallery-grid .g6 .bg-img { background-image: url(img/gallery/gallery6.webp); }



/* PC：2カラム解除＆高さを明示してヒーロー化 */
@media (min-width: 992px){
  /* 旧レイアウト上書き */
  .home .first-view-wrapper{
    display:block !important;
    grid-template-columns:none !important;
    min-height:100vh;
  }

  #first-view{ min-height:100vh; }
  .slider-first-view{
    position:relative;   /* ここを基準に重ねる */
    width:100%;
    min-height:100vh;    /* ←高さゼロ防止 */
  }
  .slider-first-view .bg-img{ height:100%; } /* 念のため */
}

/* PC：ロゴを“画像の上・中央”にCSSだけで重ねる（擬似要素） */
@media (min-width: 992px){
  .slider-first-view::before{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);
    z-index:130;
    width:40vw;                /* ロゴの大きさ。30〜45vwで調整可 */
    max-width:720px;           /* 上限 */
    aspect-ratio: 5 / 2;       /* ロゴ比率の目安。実物に合わせて調整可 */
    background-repeat:no-repeat;
    background-position:center;
    background-size:contain;

    /* どちらか一方を採用（推奨：絶対パス） */
    /* 絶対パス（テーマ名が変わっても安全） */
    background-image:url("/wp-content/themes/ont_temp-b/img/logo/yosapark-logo-.webp");
    /* 相対パス（custom.cssがテーマ直下ならこれでもOK）
    background-image:url("img/logo/yosapark-logo-.webp"); */
    pointer-events:none;
  }

  /* PCでヘッダーロゴが被るなら非表示（任意） */
  .home .site-header .site-branding{ display:none; }
}

/* 既存の縦書きキャッチがロゴに被るなら微調整（任意） */
@media (min-width: 992px){
  .first-view-catchcopy{
    right: 3%;
    top: 8%;
  }
}


/* === PC：ヒーロー領域の高さを確保（上から下まで100vh） === */
@media (min-width: 992px){
  #first-view{ min-height: 100vh; }

  .slider-first-view{
    position: relative;
    width: 100%;
    min-height: 100vh;  /* ここが要。コンテナ自体に高さを与える */
    overflow: hidden;   /* はみ出し防止（任意） */
  }

  /* Swiper内部にも高さを伝播させる */
  .slider-first-view .swiper-wrapper,
  .slider-first-view .swiper-slide{
    height: 100%;
  }

  /* 背景ボックスにも保険で高さを付与 */
  .slider-first-view .bg-img{
    height: 100%;
    min-height: 100vh;
  }
}



/* === PC：ロゴ中央重ね（擬似要素にサイズを持たせる） === */


@media (min-width: 992px){
  .slider-first-view{ position:relative; } /* 念のため */

  .slider-first-view::before{
    content:"";
    display:block;                 /* ←サイズが付く */
    position:absolute;
    left:50%; top:50%;
    transform:translate(-50%,-50%);
    z-index:200;

    /* ロゴの大きさ（調整OK） */
    width: clamp(280px, 40vw, 720px);
    aspect-ratio: 5 / 2;           /* 合わなければ height を併用 */

    /* ここを “相対パス” に */
    background: center / contain no-repeat
      url("img/logo/yosapark-logo.webp");

    pointer-events:none;
  }
}


/* ── PCで左上ロゴを“枠外”に戻す（重ねない） ───────────────── */
@media (min-width: 992px){
  /* ヘッダーは通常フロー（重ねない） */
  .home .site-header{
    position: static;   /* 以前の absolute を上書き */
    z-index: auto;
  }

  /* 左上ロゴは通常配置（位置固定しない） */
  .home .site-header .site-branding{
    position: static;   /* 以前の absolute を上書き */
    padding: 0.5rem 1rem;
    height: var(--header-height);  /* 既存のヘッダー高さを利用 */
  }
  .home .site-header .site-branding .site-title{ width:auto; margin:0; }
  .home .site-header img{ height:100%; width:auto; }

  /* ヒーロー高さは“ヘッダーぶん差し引き”でちょうど画面内に収める */
  #first-view{
    min-height: calc(100vh - var(--header-height));
  }
}


/* PC用の左上ロゴ復活ブロックを無効化
@media (min-width: 992px){
  .home .site-header .site-branding{
    display:block !important;
    position:absolute;
    left:1rem;
    top:1rem;
    z-index:300;
  }
  .home .site-header .site-branding img{
    height:56px;
    width:auto;
  }
}
*/


/* height:56px; メモとして抜き出し PC時のロゴ高さ。お好みで */



/* PC時：ヘッダー高さ分の余白をスライダー上部に確保 */
@media (min-width: 992px){
  :root{
    --header-h-pc: 80px;  /* ロゴ高さ＋余裕。70px前後なら 80px が目安 */
  }

  .home .site-header{
    position:absolute;
    top:0; left:0;
    width:100%;
    height:var(--header-h-pc);
    z-index:300;
  }

  #first-view{
    padding-top:var(--header-h-pc);
  }
}


/* === SP(〜991px)：中央は大ロゴ、左上は小ロゴを固定 === */
@media (max-width: 991px){
  /* 中央の大ロゴ（前回と同様） */
  .slider-first-view{ position: relative; }
  .slider-first-view::after{
    content:"";
    position:absolute;
    left:50%; top:50%;
    transform:translate(-50%,-50%);
    z-index:130;
    width: clamp(180px, 55vw, 380px);
    aspect-ratio: 5 / 2;
    background: center / contain no-repeat url("img/logo/yosapark-logo.webp");
    pointer-events:none;
  }

  /* ── 左上の小ロゴを “明示サイズでロック” ── */
  /* テーマによって .custom-logo or <img> を想定して両方指定 */
  .site-header .site-branding{
    position:absolute; left:12px; top:10px; z-index:300;
  }
  .site-header .site-branding img,
  .site-header .site-branding .custom-logo{
    height:34px !important;   /* ← 好みで 30–42px 程度に調整 */
    width:auto !important;
    max-width:none !important;
  }

  /* ヘッダーバーの高さが小ロゴに被る場合の保険（必要時） */
  .site-header{ min-height:56px; }
}



/* ハンバーガーボタン */
.hamburger{
  position:absolute; right:12px; top:14px;
  width:32px; height:24px; cursor:pointer; z-index:400;
  display:flex; flex-direction:column; justify-content:space-between;
}
.hamburger span{ display:block; height:3px; width:100%; background:#fff; transition:.25s; }

.nav-toggle:checked + .hamburger span:nth-child(1){ transform:translateY(10px) rotate(45deg); }
.nav-toggle:checked + .hamburger span:nth-child(2){ opacity:0; }
.nav-toggle:checked + .hamburger span:nth-child(3){ transform:translateY(-10px) rotate(-45deg); }

/* PC */
@media (min-width: 992px){
  .global-nav{ position:absolute; right:64px; top:14px; }
  .global-nav .menu{ display:flex; gap:24px; }
  .hamburger{ display:none; }
}

/* SP */
@media (max-width: 991px){
  .global-nav{
    position:fixed; inset:0 0 0 auto; width:75%;
    background:rgba(20,20,20,.96); transform:translateX(100%); transition:.25s;
    padding:72px 20px; z-index:350;
  }
  .nav-toggle:checked ~ .global-nav{ transform:translateX(0); }
  .global-nav .menu{ list-style:none; margin:0; padding:0; }
  .global-nav .menu li{ border-bottom:1px solid rgba(255,255,255,.12); }
  .global-nav .menu a{ display:block; padding:14px 8px; color:#fff; font-size:16px; }
}


/* スマホ用ハンバーガーメニューのリンク色を白に */
@media (max-width: 991px){
  .global-nav .menu a {
    color: #fff !important;    /* 白文字に固定 */
    font-size: 18px;           /* 大きさ調整 */
    padding: 16px 8px;         /* 余白調整 */
  }
  .global-nav .menu li {
    border-bottom: 1px solid rgba(255,255,255,0.2);
  }
}


/* SP時：ハンバーガーは常に右上に固定＆最前面 */
@media (max-width: 991px){
  .hamburger{
    position: fixed;
    right: 12px;
    top: 10px;
    z-index: 1000;  /* navより上 */
  }
  .global-nav{ z-index: 900; } /* ドロワー本体 */
}

/* SP時：チェック時だけ出る半透明オーバーレイ */
@media (max-width: 991px){
  .drawer-overlay{ display:none; }
  .nav-toggle:checked ~ .drawer-overlay{
    display:block;
    position:fixed; inset:0;
    background:rgba(0,0,0,.6);
    z-index: 800; /* nav(900)より下/ハンバーガー(1000)より下 */
  }
}


/* --- CTA（WEBで予約）とToTopを全ページで非表示 --- */
#cta-wrapper,
#cta,
#totop { display: none !important; }

/* CTAを消したぶん、フッター下の余白を通常化 */
.site-footer { padding-bottom: 2.25rem !important; }

/* PC時に出る右下の突き出しも念のため抑止 */
@media (min-width: 992px){
  #cta-wrapper { right: auto !important; bottom: auto !important; }
}



/* === PC(992px〜)でもハンバーガー&ドロワーを使う === */
@media (min-width: 992px){
  /* 右上に常時表示（既存で非表示なら !important で上書き） */
  .hamburger{
    display:flex !important;
    position:fixed; right:16px; top:12px;
    width:36px; height:28px;
    z-index:1000;
    flex-direction:column; justify-content:space-between;
  }

  /* ドロワー本体（スマホと同じ右スライド） */
  .global-nav{
    position:fixed; inset:0 0 0 auto;
    width:min(360px, 28vw);
    background:rgba(20,20,20,.96);
    transform:translateX(100%);
    transition:transform .25s ease;
    padding:96px 24px 24px;
    z-index:900;
  }
  .nav-toggle:checked ~ .global-nav{ transform:translateX(0); }

  /* 画面の暗幕（クリックで閉じる） */
  .drawer-overlay{ display:none; }
  .nav-toggle:checked ~ .drawer-overlay{
    display:block; position:fixed; inset:0;
    background:rgba(0,0,0,.5); z-index:800;
  }

  /* メニューの体裁（縦並びに固定） */
  .global-nav .menu{ list-style:none; margin:0; padding:0; display:block; }
  .global-nav .menu li{ border-bottom:1px solid rgba(255,255,255,.12); }
  .global-nav .menu a{
    display:block; padding:14px 8px; font-size:16px; color:#fff;
  }
}


/* 左上のヘッダーロゴを完全に非表示 */
.site-header .site-branding {
  display: none !important;
}

/* PC/SPともに左上のヘッダーロゴを完全に非表示 */
.site-header .site-branding {
  display: none !important;
}



/* === SPだけ：上の赤帯を消して、写真を最上部に === */
@media (max-width: 991px){
  /* ヘッダー背景を完全に透明化（よくあるクラスをまとめて潰す） */
  header#masthead,
  #masthead,
  .site-header,
  .site-header .header-inner,
  .site-header .container,
  .site-header .wrap{
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* ヘッダーを写真の上に重ねる（帯として高さを取らせない） */
  header#masthead,
  .site-header{
    position: absolute !important;
    top: 0; left: 0; right: 0;
    height: 0 !important;     /* 物理的な高さを持たせない */
    min-height: 0 !important;
  }

  /* 余白用のスペーサー類があれば消す */
  .site-header-spacer,
  .header-spacer { display: none !important; height: 0 !important; }

  /* ファーストビュー側の上余白をゼロに */
  #first-view,
  .slider-first-view,
  #content,
  .site-main{
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}