@charset "UTF-8";
/* CSS Document */


/* =========================
   PC 各ページ共通　ファーストビュー関連 
   ========================= */

html { 
  scroll-behavior: smooth; 
  scroll-padding-top: 80px;
} 

body {
    font-family: YakuHanMP, "IBM Plex Sans JP", "Murecho", sans-serif;
    width: 100%;
/*    max-width: 1200px;*/
    background: #b4ada9;
    color: #333;
}




/* =========================
   PC 各ページ共通 ヘッダー
   ========================= */

header {
    width: 100%;
    position: fixed;
/*  position: relative;*/
    z-index: 1500;
    display: flex;
    justify-content: space-between;
    padding: 0 4rem;
}

header h1 {
    width: 100%;
    
  position: absolute;
  top: 2rem;
  left: 4rem;
  z-index: 2000; /* メニューより上 */
  
/*    pointer-events: none;*/
}
h1 a {
    font-size: 3rem;
    font-weight: bold;
    letter-spacing: .1rem;
    color: #b54200;

}

.menu__w button {
    font-size: 2rem;
    font-weight: bold;
    letter-spacing: 0.1rem;
    color: #b54200;
    padding: .5rem 2rem;
}

    /*========  menu開閉  ========*/
    
    /* 使い回し変数：降下距離（SP/PCで切替） */
    :root {
      --menu-drop-distance: 2rem;       /* SPの降下距離（初期） */
      --menu-bg: #ffffff;
      --menu-text: #222;
      --menu-overlay: rgba(0,0,0,0.25);
      --menu-shadow: 0 10px 24px rgba(0,0,0,0.12);
    }
    
    .menu__w.is-open {
      --menu-bg: #b4ada9;
    }
    /* main-menu の背景は変数を参照（すでに記述済みの箇所） */
    .main-menu {
      background: var(--menu-bg);
    }


    /* PCでは距離を大きく（好みに応じて調整） */
    @media (min-width: 768px) {
      :root { --menu-drop-distance: 4rem; }
    }

    /* メニュー全体のラッパ */
    .menu__w {
      position: relative;
    }

    /* 開閉ボタン（例：右上固定。必要なら位置は調整） */
    .btn-menu {
      position: fixed;
      top: 1rem;
      right: 1rem;
/*      z-index: 1000;*/
      z-index: 2000;
      padding: 0.5rem 1rem;
      border: 1px solid #ccc;
      border-radius: 999px;
      background: #fff;
/*      font-size: 0.9375rem;*/
      line-height: 1.6;
      cursor: pointer;
    }

    /* メインメニュー：画面上部に展開（初期は hidden） */
    .main-menu {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      background: var(--menu-bg);
      box-shadow: var(--menu-shadow);
      z-index: 900;
      transform: translateY(-1rem);
      opacity: 0;
      transition: transform 220ms ease, opacity 220ms ease;
    }

    /* オーバーレイ（開いた時に背景を薄暗く） */
    .menu__w.is-open::after {
      content: "";
      position: fixed;
      inset: 0;
      background: var(--menu-overlay);
      z-index: 800;
    }

    /* メニューの中身 */
    .main-menu ul {
      margin: 0;
/*      padding: 1rem 1.25rem;*/
      padding: 1.75rem 1.25rem 1rem ;
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    .main-menu a {
      display: inline-block;
      color: var(--menu-text);
      text-decoration: none;
      font-size: 1rem;
      line-height: 1.8;
      padding: 0.25rem 0.5rem;
      border-radius: 0.25rem;
    }

    .main-menu a:hover,
    .main-menu a:focus {
      background: rgba(0,0,0,0.06);
      outline: none;
    }

    /* “降りてくる”アニメの初期状態（閉じている時） */
    .main-menu li, .sub-menu__box {
      transform: translateY(calc(-1 * var(--menu-drop-distance)));
      opacity: 0;
      will-change: transform, opacity;
      transition: transform 240ms ease, opacity 240ms ease;
    }

    /* 開いた時：li を順に降ろす（遅延ステップ） */
    .menu__w.is-open .main-menu li, .sub-menu__box {
      transform: translateY(0);
      opacity: 1;
    }

    /* 遅延（ステップは調整可） */
    .menu__w.is-open .main-menu li:nth-child(1) { transition-delay: 0ms; }
    .menu__w.is-open .main-menu li:nth-child(2) { transition-delay: 60ms; }
    .menu__w.is-open .main-menu li:nth-child(3) { transition-delay: 120ms; }
    .menu__w.is-open .main-menu li:nth-child(4) { transition-delay: 180ms; }
    .menu__w.is-open .main-menu li:nth-child(5) { transition-delay: 240ms; }
    .menu__w.is-open .main-menu li:nth-child(6) { transition-delay: 300ms; }
    .sub-menu__box { transition-delay: 0ms; }

    /* メニュー全体のスライド＆フェード（open時） */
    .menu__w.is-open .main-menu {
      transform: translateY(0);
      opacity: 1;
    }

    /* モーションを減らしたいユーザー設定への配慮 */
    @media (prefers-reduced-motion: reduce) {
      .main-menu,
      .main-menu li,
      .sub-menu__box {
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
      }
    }

    /*========  menu開閉  ========*/


.main-menu {
/*    padding: 6.5rem 0 1.5rem .75rem; */
    padding-left: .75rem;
    padding-bottom: 1.5rem;
      
  position: fixed;
  z-index: 1000; /* h1より低く */
}
.main-menu ul li span::before {
  font-family: "Font Awesome 5 Free";
  content: '\f062';
  font-weight: 900;
  display: inline-block;
  transform: rotate(45deg);
  margin-left: 1rem;
}
.main-menu ul {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.main-menu ul li a {
    font-size: 2rem;
    padding-left: 2rem;
    color: #b54200;
    letter-spacing: .1rem;
}

.main-menu__cat {
    padding-top: 8rem !important;
}

    /*========  main-menu　li横に円（0101_06 class名修正）  ========*/

    .main-menu__cat li a {  
      display: flex;  /* テキストと疑似要素を横並びにする */
      align-items: center;  /* 上下中央に揃える */
    }
    .main-menu__cat li a::before {
      width: 0; /* 初期表示は表示しないようにする */
      height: 0;
      content: "";
      background-color: transparent;
      border-radius: 50%;
      transition: 0.3s;
    }
    .main-menu__cat li a:hover::before {
      width: 0.5em; /* ホバー時に表示 */
      height: 0.5em;
      margin-right: 1.5rem;
      background-color: #b54200;
    }

    /*========  main-menu　li横に円（0101_06 class名修正）  ========*/



.sub-menu__box {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    padding-left: 25rem;
    position: relative;
}
.sub-menu {
    display: flex;
/*    align-items: center;*/
}
.sub-menu a {
    color: #b54200;
}
.sub-menu__sns {
    width: auto;
    display: flex;
    flex-wrap: nowrap !important;
    position: absolute;
    z-index: 2000;
}

    /*========  sub-menu__sns　hover拡大設定  ========*/

    .sub-menu__sns--icon:hover a {
      transform: scale(1.2); /* 拡大 */
      opacity: 1;
    }

    /*========  sub-menu__sns　hover拡大設定  ========*/


.sub-menu__lang {
    width: auto;
    height: 5rem;
    background: #fff;
    border-radius: 6rem;
    display: flex;
    justify-content: space-around;
    align-content: center;
    margin-left: 1rem;
    padding: 1rem 2rem !important;
}
.sub-menu__sns li a, .sub-menu__lang li a {
    color: #b54200;
    display: inline-block;
    margin: 0 auto;
}
.sub-menu__sns li a {
    padding-left: 0 !important;
}
.sub-menu__sns .fa-stack {
    font-size: 2.5rem;
}
.sub-menu__lang {
    font-size: 2rem;
    gap: 0 !important;
}
.sub-menu__lang--ja a {
    line-height: 0;
    padding-left: 1.75rem !important;
}
.sub-menu__lang--en a {
    line-height: 0;
}

    /*========  sub-menu__lang　切替のhover色設定  ========*/

    /* 初期状態：JAはアクティブ色、ENは非アクティブ色 */
    /* 初期色は非アクティブ（グレー）にしておき、active クラスで上書きする */
    .sub-menu__lang--ja a,
    .sub-menu__lang--en a {
      color: #b4ada9;
      text-decoration: none;
    }
    .sub-menu__lang--ja a.active {
      color: #b54200 !important;
    }
    .sub-menu__lang--en a.active {
      color: #b54200 !important;
    }

    /* EN hover 時に JA をグレー化（:has() を使う場合） */
    .sub-menu__lang:has(.sub-menu__lang--en a:hover) .sub-menu__lang--ja a {
      color: #b4ada9;
    }
    /* :has() がない環境用は JS で active を付け替える */

    /*========  sub-menu__lang　切替のhover色設定  ========*/




/* =========================
   PC TOPページ　MV
   ========================= */

.MV__w {
    width: 100%;
    height: 100vh;
    /*background: #b54200;*/
    background: #b4ada9;
    display: flex;
    position: relative;
}
.MV__img {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
}
.MV__img img {
        height: 100vh;
        width: 100%; /* 親要素の幅に合わせる */
        object-fit: cover; /* または contain */
}
.MV__img {
    /* width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute; */
}
.MV__img img {
    /* max-width: max-content !important;
    height: 100vh !important; */
}



    /*========  スクロール喚起アニメーション設定  ========*/
    .scroll__box {
        /*color: #333;*/
        color: #b54200;
        writing-mode: vertical-rl;
        display: flex;
        flex-direction: column;
        left: 4rem;
        bottom: 0;
    /*    transform: translateY(75vh);*/
        position: absolute;
    }
    .scroll__box p {
        font-size: 1.5rem;
        font-weight: bold;
        display: flex;
        margin: 2rem;
    }
    .scroll-border {
      position: relative;
      width: 10px;
      height: 160px;
      overflow: hidden;
    }
    .scroll-border::before {
      content: "";
      display: block;
      position: absolute;
      width: 1px;
      height: 100%;
      top: 0;
      left: 0;
      right: 0;
/*      background: #333;*/
      background: #b54200;
      margin: auto;
    }
    .scroll-border::after {
      content: "";
      display: block;
      position: absolute;
      width: 7px;
      height: 7px;
      left: 0;
      right: 0;
/*      background: #333;*/
      background: #b54200;
      border-radius: 50%;
      animation: scrollbar 2.0s ease-in-out infinite;
      margin: auto;
    }
    @keyframes scrollbar {
      0% {
        bottom: 170px;
        opacity: 0;
      }
      50% {
        opacity: 1;
      }
      100% {
        bottom: -10px;
        opacity: 0;
      }
    }
    /*========  スクロール喚起アニメーション設定  ========*/


/* =========================
   PC ここまで
   ========================= */




@media screen and (max-width:750px) {

/* =========================
   SP 各ページ共通　ファーストビュー関連 
   ========================= */

body {
/*    width: 100%;*/
}

/* =========================
   SP 各ページ共通 ヘッダー
   ========================= */
   
header h1 {
    width: 100%;
/*    top: 5rem;*/
    left: 2rem;
}
.menu__w button {
    font-size: 1.5rem;
}
.main-menu__cat {
/*    padding-top: 11rem !important;*/
    width: 98%;
    flex-direction: column !important;
    margin: 0 auto;
}
.sub-menu__box {
    padding-top: 100px;
    padding-left: 0;
}
.sub-menu__sns {
    padding: .75rem 1rem 1rem .5rem !important;
    gap: 0 !important;
}
.sub-menu__sns .fa-stack {
    font-size: 2.25rem;
}
.sub-menu__lang {
    padding: .25rem 1.75rem !important;
}


/* =========================
   SP TOPページ　MV
   ========================= */

.MV__img img {
    max-width: max-content !important;
    height: 100vh !important;
}

}




@media screen and (max-width:389px) {

h1 a {
    font-size: 2.8rem;
    letter-spacing: 0;
}
.menu__w button {
    letter-spacing: 0;
    top: 2.65rem;
    padding: .4rem 1.75rem;
}
.btn-menu {
    /* min-width: 88px; */ /* 例：マテリアルデザイン推奨に近い幅 */
}
.btn-menu__label.is-cross {
    font-size: 2.75rem;
}

}

/* =========================
   SP ここまで
   ========================= */