@charset "UTF-8";
html {
  font-size: max(12px, 1.1111111111vw);
}
@media screen and (min-width: 960px) {
  html {
    font-size: 1.6666666667vw;
  }
}
@media screen and (min-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (min-width: 320px) {
  html {
    font-size: 16px;
  }
}

/* デフォ：まず何も消さない（UA既定を尊重） */
/* 1) キーボード操作でない時だけ、見た目の枠を抑制 */
body:not(.using-keyboard) :is(:focus, :focus-visible) {
  outline: none;
  box-shadow: none;
}

/* 2) :focus-visible が使える環境では、より厳密に抑制 */
@supports selector(:focus-visible) {
  body:not(.using-keyboard) :focus-visible {
    outline: none;
    box-shadow: none;
  }
}
/* 3) キーボード時は"UA既定"へ戻す（色や太さは各OS/ブラウザ任せ） */
body.using-keyboard :focus {
  outline: revert; /* UAの既定に戻す（auto等） */
  box-shadow: revert; /* フレームワークがbox-shadowで上書きしてた場合の保険 */
  outline-offset: 2px; /* ここだけ少し余白（任意） */
}

/* 4) :focus-visible 対応なら、こちらが優先される */
@supports selector(:focus-visible) {
  body.using-keyboard :focus {
    outline: none;
    box-shadow: none;
  } /* 衝突回避 */
  body.using-keyboard :focus-visible {
    outline: revert; /* UA既定 */
    box-shadow: revert;
    outline-offset: 2px;
  }
}
/* 5) メニュー容器にフォーカスが当たっても枠は不要 */
.header__sp-menu:focus {
  outline: none;
}

/* 6) iOSのタップ時の青ハイライトは不要なら消す（見た目の誤解を防止） */
.header__sp-menu a,
.hamburger {
  -webkit-tap-highlight-color: transparent;
}

/* 7) slick のドットは :focus で明示（:focus-visible 依存を避ける） */
body.using-keyboard .slick-dots li button:focus {
  box-shadow: 0 0 0 5px #e2709f;
}

/* ===================== 以降は既存のレイアウト/装飾 ===================== */
.main {
  position: relative;
}

@media screen and (min-width: 320px) {
  .fv__image-subpage {
    width: 100%;
  }
}
@media screen and (min-width: 320px) {
  .fv__image-subpage-text {
    position: absolute;
    top: 82%;
    left: 9%;
    font-family: "Shippori Mincho B1", serif;
    font-weight: 600;
    font-size: 1.375rem;
    color: #fff;
    letter-spacing: 0.1em;
    z-index: 100;
  }
}
.fv__class-title {
  font-family: "Shippori Mincho B1", serif;
  font-weight: 600;
  font-size: 1.375rem;
  color: #fff;
  letter-spacing: 0.1em;
  position: absolute;
  top: 82%;
  left: 10%;
  z-index: 100;
}

/* 既存ルール：クリック時の視覚変化だけ残したいならOK */
.btn__arrow {
  position: relative;
  /* ← これは“アウトライン”ではなく装飾アニメなので残す */
}
.btn__arrow::before {
  z-index: 1;
  content: "";
  position: absolute;
  width: 40px;
  height: 1px;
  top: 54%;
  left: 132px;
  display: block;
  background: linear-gradient(to right, #fff 50%, #c9b859 50%);
  transition: all 0.7s ease;
}
.btn__arrow::after {
  content: "";
  position: absolute;
  display: block;
  border-bottom: 1px solid #c9b859;
  left: 169px;
  top: 46.5%;
  width: 7px;
  z-index: 3;
  transform: translateX(-50%) rotate(45deg);
  transition: all 0.7s ease;
}
@media (any-hover: hover) {
  .btn__arrow:hover::before {
    left: 142px;
    opacity: 0.5;
  }
  .btn__arrow:hover::after {
    left: 179px;
    opacity: 0.5;
  }
}
.btn__arrow:focus-visible::before {
  left: 142px;
}
.btn__arrow:focus-visible::after {
  left: 179px;
}

/* ====== 以降は既存スタイル（内容は変更なし or 微修正） ====== */
/* ✅ タイポ修正: 先頭に謎の 's' が付いてた */
@media screen and (min-width: 320px) {
  .small__br {
    display: block;
  }
}
@media screen and (min-width: 370px) {
  .small__br {
    display: none;
  }
}

.mask-fade-right,
.mask-fade-left {
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
  will-change: opacity, mask;
}

.mask-fade-right {
  opacity: 0;
  mask-image: linear-gradient(to right, #000 0%, #000 100%);
  mask-size: 0% 100%;
  mask-repeat: no-repeat;
  mask-position: left center;
  mask-mode: match-source;
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 100%);
  -webkit-mask-size: 0% 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: left center;
  -webkit-mask-mode: match-source;
  -webkit-animation: mask-animation-right 1.8s cubic-bezier(0, 0.4, 0.6, 1) forwards;
          animation: mask-animation-right 1.8s cubic-bezier(0, 0.4, 0.6, 1) forwards;
}

@-webkit-keyframes mask-animation-right {
  0% {
    mask-size: 0% 100%;
    -webkit-mask-size: 0% 100%;
    opacity: 0;
  }
  100% {
    mask-size: 100% 100%;
    -webkit-mask-size: 100% 100%;
    opacity: 1;
  }
}

@keyframes mask-animation-right {
  0% {
    mask-size: 0% 100%;
    -webkit-mask-size: 0% 100%;
    opacity: 0;
  }
  100% {
    mask-size: 100% 100%;
    -webkit-mask-size: 100% 100%;
    opacity: 1;
  }
}
.mask-fade-left {
  opacity: 0;
  mask-image: linear-gradient(to left, #000 0%, #000 100%);
  mask-size: 0% 100%;
  mask-repeat: no-repeat;
  mask-position: right center;
  mask-mode: match-source;
  -webkit-mask-image: linear-gradient(to left, #000 0%, #000 100%);
  -webkit-mask-size: 0% 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: right center;
  -webkit-mask-mode: match-source;
  -webkit-animation: mask-animation-left 1.8s cubic-bezier(0, 0.4, 0.6, 1) forwards;
          animation: mask-animation-left 1.8s cubic-bezier(0, 0.4, 0.6, 1) forwards;
}

@-webkit-keyframes mask-animation-left {
  0% {
    mask-size: 0% 100%;
    -webkit-mask-size: 0% 100%;
    opacity: 0;
  }
  100% {
    mask-size: 100% 100%;
    -webkit-mask-size: 100% 100%;
    opacity: 1;
  }
}

@keyframes mask-animation-left {
  0% {
    mask-size: 0% 100%;
    -webkit-mask-size: 0% 100%;
    opacity: 0;
  }
  100% {
    mask-size: 100% 100%;
    -webkit-mask-size: 100% 100%;
    opacity: 1;
  }
}
.menu__item-contact {
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 320px) {
  .menu__item-contact-text {
    font-family: "Shippori Mincho B1", serif;
    font-weight: 500;
    font-size: 1.25rem;
    color: #333;
    letter-spacing: 0.04em;
  }
}
@media screen and (min-width: 901px) {
  .menu__item-contact-text {
    font-family: "Shippori Mincho B1", serif;
    font-weight: 500;
    font-size: 1.25rem;
    color: #333;
    letter-spacing: 0.04em;
  }
}
@media screen and (min-width: 800px) and (max-width: 900px) {
  .menu__item-contact-text {
    font-size: 1.125rem;
  }
}
.menu__item-contact span:nth-child(2) {
  justify-content: center;
  display: flex;
}

.btn__wrapper {
  display: flex;
  justify-content: center;
}

.another__fade-in {
  opacity: 0;
  translate: 0 16px;
  transition: translate 0.6s ease, opacity 0.6s ease;
  filter: blur(10px) brightness(0.6);
}

.another__fade-in.is-visible {
  opacity: 1;
  translate: 0 0;
  filter: blur(0) brightness(1);
}

.fade-in {
  opacity: 0;
  filter: blur(10px) brightness(0.6);
  transform: translateY(100px);
  transition: all 0.8s ease-out;
}

.fade-in.is-visible {
  opacity: 1;
  filter: blur(0) brightness(1);
  transform: translateY(0);
}

.btn {
  position: absolute;
  width: 9.5rem;
  height: 2.375rem;
  display: block;
  background-color: #c9b859;
  transition: opacity 0.3s ease;
  border-radius: 1px;
}
@media (any-hover: hover) {
  .btn:hover {
    opacity: 0.8;
  }
}

.btn__container {
  width: 9.5rem;
  height: 2.375rem;
  display: flex;
  justify-content: center;
}

.btn__text {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-family: "Lato", sans-serif;
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  color: #fff;
}

@media screen and (min-width: 320px) {
  .sp__br {
    display: block;
  }
}
@media screen and (min-width: 768px) {
  .sp__br {
    display: none;
  }
}

@media screen and (min-width: 320px) {
  .pc__br {
    display: none;
  }
}
@media screen and (min-width: 768px) {
  .pc__br {
    display: block;
  }
}

.menu__item-btn-design {
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 320px) {
  .menu__item-btn-design span {
    font-family: "Shippori Mincho B1", serif;
    font-weight: 500;
    font-size: 1rem;
    color: #333;
    letter-spacing: 0.04em;
  }
  .menu__item-btn-design span:nth-child(2) {
    justify-content: center;
    display: flex;
  }
}
@media screen and (min-width: 600px) {
  .menu__item-btn-design span {
    font-size: 1rem;
  }
}
@media screen and (min-width: 900px) {
  .menu__item-btn-design span {
    font-size: 1rem;
  }
}

.menu__btn-design {
  display: flex;
  flex-direction: column;
}
.menu__btn-design span:nth-child(2) {
  justify-content: center;
  display: flex;
}

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

#sb_instagram .sbi_item,
#sb_instagram .sbi_photo_wrap {
  overflow: visible;
}

#sb_instagram a.sbi_photo {
  aspect-ratio: 1/1;
}

#sb_instagram a.sbi_photo:focus {
  position: relative;
  z-index: 1000;
}

body.using-keyboard #sb_instagram a.sbi_photo:focus {
  outline-offset: 3px;
}