@charset "UTF-8";

/* ==============================
  PCグローバルメニュー start
============================== */
@media screen and (min-width: 768px) {
  .MainVisualHeader {
    height: 70px;
  }

  .MainVisualHeader__inner {
    height: 70px;
    padding: 0 3vw;
    gap: 1.2vw;
  }

  .MainVisualHeader__logo {
    display: block;
    width: auto;
    flex: 0 0 auto;
    position: relative;
    z-index: 10001;
  }

  .MainVisualHeader__logo img {
    display: block;
    width: auto;
    height: auto;
    max-height: 45px;
  }

  .MainVisualHeader__controls,
  .BurgerMenu {
    display: none;
  }

  .GlobalNav {
    flex: 1 1 auto;
    align-self: stretch;
    min-width: 0;
  }

  .GlobalNav__list {
    height: 100%;
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 1.1vw;
    list-style: none;
  }

  .GlobalNav__item {
    height: 100%;
    display: flex;
    align-items: center;
  }

  .GlobalNav__link {
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    appearance: none;
    border: 0;
    background: transparent;
    color: #fff;
    cursor: pointer;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1;
    letter-spacing: .06em;
    text-decoration: none;
    white-space: nowrap;
    opacity: 1;
    transition: color .25s ease, opacity .25s ease;
  }

  .GlobalNav__link:hover,
  .GlobalNav__link:focus-visible,
  .GlobalNav__item.is-open > .GlobalNav__link {
    opacity: .72;
  }

  body.scrolled .GlobalNav__link,
  .MainVisualHeader.is-solid .GlobalNav__link,
  .MainVisualHeader--solid .GlobalNav__link,
  .MainVisualHeader--dark-start .GlobalNav__link {
    color: #221a19;
  }

  .GlobalNav__link:focus-visible,
  .GlobalMega a:focus-visible,
  .HeaderAction a:focus-visible {
    outline: .12rem solid currentColor;
    outline-offset: .2rem;
  }

  .GlobalMega {
    position: fixed;
    top: 70px;
    left: 0;
    width: 100vw;
    background: rgba(76, 94, 107, .84);
    -webkit-backdrop-filter: blur(.6rem);
    backdrop-filter: blur(.6rem);
    box-shadow: 0 .8rem 1.8rem rgba(20, 34, 42, .08);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-.55rem);
    pointer-events: none;
    transition: opacity .22s ease, transform .22s ease, visibility .22s ease;
    z-index: 9998;
  }

  .GlobalNav__item:hover > .GlobalMega,
  .GlobalNav__item.is-open > .GlobalMega {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }

  .GlobalMega__inner {
    width: 80vw;
    margin: 0 auto;
    padding: 2.1vw 0 1.9vw;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 5vw;
  }

  .GlobalMega--lineup .GlobalMega__inner {
    width: 88vw;
    gap: 3.8vw;
  }

  .GlobalMega--gallery .GlobalMega__inner {
    width: 60vw;
  }

  .GlobalMega--single .GlobalMega__inner {
    width: 36vw;
  }

  .GlobalMega--simple .GlobalMega__inner {
    width: 54vw;
    gap: 2.8vw;
    padding: 2.5vw 0;
  }

  .GlobalMega__card {
    display: block;
    width: 13.2vw;
    color: #fff;
    text-align: center;
    text-decoration: none;
  }

  .GlobalMega__img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin-bottom: .9rem;
    overflow: hidden;
    background: rgba(255, 255, 255, .14);
  }

  .GlobalMega__img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1;
    transition: transform .3s ease;
  }

  .GlobalMega__img--contact {
    display: flex;
    align-items: center;
    justify-content: center;
    background:
      url("../images/mega_contact_20260731.jpg?v=20260731") center center / cover no-repeat,
      #89817a;
  }

  .GlobalMega__mailIcon {
    display: none;
    width: 3.6rem;
    height: auto;
    fill: none;
    stroke: #fff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .GlobalMega__card:hover .GlobalMega__img img {
    transform: scale(1.025);
  }

  .GlobalMega__txt {
    display: block;
    width: 100%;
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .04em;
    text-align: center;
    white-space: nowrap;
  }

  .GlobalMega__textlink {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 14vw;
    padding: .8rem 1.2rem;
    border: 1px solid rgba(255, 255, 255, .48);
    color: #fff;
    font-size: 1.04rem;
    line-height: 1.5;
    letter-spacing: .06em;
    text-align: center;
    text-decoration: none;
    transition: background .2s ease, color .2s ease;
  }

  .GlobalMega__textlink:hover {
    background: rgba(255, 255, 255, .14);
  }

  .MainVisualHeader.is-menu-active {
    transform: translateY(0);
    pointer-events: auto;
  }
}
/* ==============================
  PCグローバルメニュー end
============================== */

/* ==============================
  ヘッダー右アクション start
============================== */
@media screen and (min-width: 768px) {
  .HeaderAction {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .8vw;
    flex: 0 0 auto;
  }

  .HeaderAction__sns {
    display: block;
    width: 1.45rem;
    height: 1.45rem;
  }

  .HeaderAction__sns img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 1;
  }

  body.scrolled .HeaderAction__sns img,
  .MainVisualHeader.is-solid .HeaderAction__sns img,
  .MainVisualHeader--solid .HeaderAction__sns img,
  .MainVisualHeader--dark-start .HeaderAction__sns img {
    filter: invert(1);
  }

  .HeaderAction__request {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-left: .35vw;
    padding: .28rem .7rem;
    border: 1px solid rgba(111, 101, 86, .22);
    border-radius: 10rem;
    background: #fff;
    color: #6f6556;
    font-size: .68rem;
    line-height: 1;
    letter-spacing: .05em;
    text-decoration: none;
  }

  .HeaderAction__free {
    display: inline-block;
    padding: .16rem .28rem;
    background: #e77d5d;
    color: #fff;
    font-size: .58rem;
  }

  .HeaderAction__ico {
    display: inline-block;
    width: .82rem;
    height: .82rem;
    border-radius: 50%;
    background: #637985;
    position: relative;
  }

  .HeaderAction__ico::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 34%;
    width: .25rem;
    height: .25rem;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    transform: translateY(-50%) rotate(45deg);
  }
}
/* ==============================
  ヘッダー右アクション end
============================== */

/* ==============================
  SPバーガーメニュー start
============================== */
@media screen and (max-width: 767px) {
  .MainVisualHeader--solid .MainVisualHeader__burger span {
    background-color: #6c6c6c;
  }

  body:not(.scrolled) .MainVisualHeader--dark-start .MainVisualHeader__burger span {
    background-color: #6c6c6c;
  }

  body.menu-lock {
    overflow: hidden;
    touch-action: none;
  }

  .BurgerMenu {
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    padding:
      calc(3.75rem + env(safe-area-inset-top, 0px))
      0
      calc(3.75rem + env(safe-area-inset-bottom, 0px));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background: rgba(0, 0, 0, .78);
    -webkit-backdrop-filter: blur(.5rem);
    backdrop-filter: blur(.5rem);
    z-index: 10020;
    scrollbar-width: none;
  }

  .BurgerMenu::-webkit-scrollbar {
    display: none;
  }

  .BurgerMenu__panel {
    flex: 0 0 auto;
    width: 79vw;
    margin: auto;
  }

  .BurgerMenu__main {
    width: 100%;
    max-width: none;
    padding: 0;
    overflow: visible;
    font-size: 1rem;
    font-weight: 300;
  }

  .BurgerMenu__main > .BurgerMenu__group {
    padding: 0 0 1rem;
    border-bottom: 0;
  }

  .BurgerMenu__parent {
    display: block;
    margin-bottom: .35rem;
    padding: 0 .25rem .18rem;
    border-bottom: 1px solid rgba(255, 255, 255, .82);
    color: rgba(255, 255, 255, .78);
    font-size: 1.05rem;
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: .08em;
  }

  .BurgerMenu__sub {
    margin: 0;
    padding: 0;
  }

  .BurgerMenu__sub li {
    margin: 0;
    border: 0;
  }

  .BurgerMenu__sub li a {
    padding: .04rem 0 .04rem .8rem;
    color: #fff;
    font-size: .86rem;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: .05em;
  }

  .BurgerMenu__sub li a:hover,
  .BurgerMenu__sub li a:focus-visible {
    background: rgba(255, 255, 255, .1);
    outline: none;
  }

  .BurgerMenu__close {
    position: fixed;
    top: calc(.75rem + env(safe-area-inset-top, 0px));
    right: calc(.75rem + env(safe-area-inset-right, 0px));
    width: 2.7rem;
    height: 2.7rem;
    padding: 0;
    font-size: 0;
  }

  .BurgerMenu__close::before,
  .BurgerMenu__close::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2.2rem;
    height: 1px;
    background: #fff;
    transform-origin: center;
  }

  .BurgerMenu__close::before {
    transform: translate(-50%, -50%) rotate(45deg);
  }

  .BurgerMenu__close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
  }

  .BurgerMenu__sns {
    display: flex;
    align-items: center;
    gap: 1.8rem;
    padding: 1.2rem 0 .4rem;
    border-bottom: 0;
  }

  .BurgerMenu__sns a {
    width: 1.65rem;
    padding: 0;
    background: transparent;
  }

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

  .BurgerMenu__request a {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1rem 0;
    background: #fff;
    color: #5d7180;
  }
}

/* ==============================
  SPバーガーメニュー（低い画面） start
============================== */
@media screen and (max-width: 767px) and (max-height: 740px) {
  .BurgerMenu {
    align-items: center;
    padding:
      calc(3.25rem + env(safe-area-inset-top, 0px))
      0
      calc(3.25rem + env(safe-area-inset-bottom, 0px));
  }

  .BurgerMenu__main > .BurgerMenu__group {
    padding-bottom: .65rem;
  }

  .BurgerMenu__parent {
    margin-bottom: .2rem;
    font-size: 1rem;
    line-height: 1.35;
  }

  .BurgerMenu__sub li a {
    font-size: .82rem;
    line-height: 1.4;
  }

  .BurgerMenu__sns {
    padding-top: .75rem;
  }
}
/* ==============================
  SPバーガーメニュー（低い画面） end
============================== */

/* ==============================
  SPバーガーメニュー（ブラウザUI表示時の低い画面） start
============================== */
@media screen and (max-width: 767px) and (max-height: 620px) {
  .BurgerMenu {
    padding:
      calc(3rem + env(safe-area-inset-top, 0px))
      0
      calc(3rem + env(safe-area-inset-bottom, 0px));
  }

  .BurgerMenu__main > .BurgerMenu__group {
    padding-bottom: .42rem;
  }

  .BurgerMenu__parent {
    margin-bottom: .1rem;
    padding-bottom: .1rem;
    font-size: .94rem;
    line-height: 1.25;
  }

  .BurgerMenu__sub li a {
    font-size: .82rem;
    line-height: 1.3;
  }

  .BurgerMenu__sns {
    gap: 1.5rem;
    padding-top: .45rem;
  }

  .BurgerMenu__sns a {
    width: 1.5rem;
  }
}
/* ==============================
  SPバーガーメニュー（ブラウザUI表示時の低い画面） end
============================== */
/* ==============================
  SPバーガーメニュー end
============================== */

/* ==============================
  固定資料請求ボタン start
============================== */
.FixedRequestBtn {
  position: fixed;
  right: 2.2vw;
  bottom: 3vw;
  z-index: 9997;
  width: 5.8rem;
  height: 5.8rem;
  border-radius: 50%;
  background: rgba(88, 118, 130, .96);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .15rem;
  font-size: .9rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .08em;
  text-align: center;
  text-decoration: none;
  opacity: 0;
  transform: translateY(1rem);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}

body.scrolled .FixedRequestBtn {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

@media screen and (max-width: 767px) {
  .FixedRequestBtn {
    right: 5vw;
    bottom: 5vw;
    width: 4.6rem;
    height: 4.6rem;
    font-size: .75rem;
  }
}
/* ==============================
  固定資料請求ボタン end
============================== */

@media (prefers-reduced-motion: reduce) {
  .GlobalMega,
  .GlobalMega__img img,
  .BurgerMenu,
  .FixedRequestBtn {
    transition: none;
  }
}
