/* =========================================================
   GLOBAL MENU / TRIGGER
   TYPOGRAPHY NAVIGATION
========================================================= */

/* -----------------------------------------
   TRIGGER
----------------------------------------- */

.site-menu-trigger{
  position:fixed;
  top:20px;
  right:22px;
  z-index:10020;

  width:60px;
  height:60px;

  margin:0;
  padding:0;

  border:
    1px solid rgba(52,68,59,.12);

  border-radius:50%;

  background:
    rgba(250,249,245,.94);

  box-shadow:
    0 6px 20px rgba(33,45,38,.08);

  cursor:pointer;

  appearance:none;
  -webkit-appearance:none;

  -webkit-backdrop-filter:
    blur(10px);

  backdrop-filter:
    blur(10px);

  transition:
    transform .38s cubic-bezier(.22,.61,.36,1),
    background-color .32s ease,
    border-color .32s ease,
    box-shadow .38s ease;
}


.site-menu-trigger-line{
  position:absolute;

  left:50%;

  display:block;

  height:1px;

  border-radius:999px;

  background:#34443b;

  transform:
    translateX(-50%);

  transform-origin:center;

  transition:
    width .38s cubic-bezier(.22,.61,.36,1),
    top .42s cubic-bezier(.22,.61,.36,1),
    transform .48s cubic-bezier(.22,.61,.36,1),
    opacity .24s ease;
}


/*
 * 線の「太さ」はすべて同じ。
 * 中央だけ少し短くして、静かなリズムをつくる。
 */
.site-menu-trigger-line-1{
  top:21px;
  width:26px;
}

.site-menu-trigger-line-2{
  top:29.5px;
  width:18px;
}

.site-menu-trigger-line-3{
  top:38px;
  width:26px;
}


@media (hover:hover){

  .site-menu-trigger:hover{
    transform:
      scale(.96);

    background:
      rgba(255,255,255,.98);

    border-color:
      rgba(52,68,59,.18);

    box-shadow:
      0 8px 24px rgba(33,45,38,.10);
  }

  .site-menu-trigger:hover
  .site-menu-trigger-line-2{
    width:26px;
  }

}


/* OPEN → minimal X */
.site-menu-trigger.is-open{
  background:
    rgba(250,249,245,.97);

  border-color:
    rgba(255,255,255,.16);

  box-shadow:
    0 8px 26px rgba(20,31,25,.14);
}

.site-menu-trigger.is-open
.site-menu-trigger-line-1{
  top:29.5px;
  width:25px;

  transform:
    translateX(-50%)
    rotate(45deg);
}

.site-menu-trigger.is-open
.site-menu-trigger-line-2{
  width:0;
  opacity:0;
}

.site-menu-trigger.is-open
.site-menu-trigger-line-3{
  top:29.5px;
  width:25px;

  transform:
    translateX(-50%)
    rotate(-45deg);
}


/* =========================================================
   FULLSCREEN MENU
========================================================= */

.site-global-menu{
  position:fixed;
  inset:0;
  z-index:10000;

  visibility:hidden;
  overflow:hidden;

  /* 背景自体は透明。円形レイヤーをtransformで広げる */
  background:transparent;

  transition:
    visibility 0s linear 1.05s;

  contain:paint;
}

.site-global-menu.is-open{
  visibility:visible;

  transition:
    visibility 0s linear 0s;
}


/* -----------------------------------------
   RADIAL BACKDROP
   clip-pathではなくtransformだけで円形展開
----------------------------------------- */

.site-global-menu::before{
  content:"";

  position:absolute;

  /*
   * 円の中心を右上メニューボタン付近に合わせる。
   * 220vmaxの巨大円をscaleだけで展開するため、
   * clip-pathよりブラウザ負荷が軽い。
   */
  width:220vmax;
  height:220vmax;

  right:calc(56px - 110vmax);
  top:calc(54px - 110vmax);

  border-radius:50%;

  background:
    radial-gradient(
      circle at 50% 50%,
      #465C50 0%,
      #3B5145 48%,
      #30443A 100%
    );

  transform:
    scale(.001);

  transform-origin:center center;

  will-change:transform;

  transition:
    transform 1.02s cubic-bezier(.68,0,.22,1);

  pointer-events:none;

  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}

.site-global-menu.is-open::before{
  transform:
    scale(1);
}


/*
 * 円が展開している途中はコンテンツを少し遅らせる。
 * 背景と文字が同時に動いてカタついて見えるのを防ぐ。
 */
.site-global-menu-inner{
  opacity:0;

  transform:
    translate3d(0,12px,0);

  transition:
    opacity .42s ease,
    transform .62s cubic-bezier(.22,.61,.36,1);
}

.site-global-menu.is-open
.site-global-menu-inner{
  opacity:1;

  transform:
    translate3d(0,0,0);

  transition-delay:.32s;
}


/* =========================================================
   INNER
========================================================= */

.site-global-menu-inner{
  position:relative;
  z-index:2;

  width:
    min(1480px,calc(100% - 120px));

  min-height:100%;

  margin:0 auto;

  padding:
    clamp(90px,10vh,130px)
    0
    46px;

  display:flex;
  flex-direction:column;
  justify-content:center;
}


/* =========================================================
   NAVIGATION
========================================================= */

.site-global-nav{
  position:relative;

  width:
    min(1120px,88%);

  margin:
    auto 0
    auto
    7vw;

  border-top:
    1px solid rgba(245,241,232,.16);
}


/* -----------------------------------------
   ROWS
----------------------------------------- */

.site-global-nav > a,
.site-global-nav-group{
  position:relative;

  display:grid;

  grid-template-columns:
    78px
    minmax(0,1fr);

  align-items:center;

  min-height:
    clamp(86px,9vh,112px);

  border-bottom:
    1px solid rgba(245,241,232,.16);

  opacity:0;

  transform:
    translate3d(0,24px,0);

  transition:
    opacity .78s cubic-bezier(.22,.61,.36,1),
    transform .92s cubic-bezier(.22,.61,.36,1);
}

.site-global-menu.is-open
.site-global-nav > a,
.site-global-menu.is-open
.site-global-nav-group{
  opacity:1;

  transform:
    translate3d(0,0,0);
}


/* -----------------------------------------
   STAGGER
----------------------------------------- */

.site-global-menu.is-open
.site-global-nav > *:nth-child(1){
  transition-delay:.08s;
}

.site-global-menu.is-open
.site-global-nav > *:nth-child(2){
  transition-delay:.13s;
}

.site-global-menu.is-open
.site-global-nav > *:nth-child(3){
  transition-delay:.18s;
}

.site-global-menu.is-open
.site-global-nav > *:nth-child(4){
  transition-delay:.23s;
}

.site-global-menu.is-open
.site-global-nav > *:nth-child(5){
  transition-delay:.28s;
}

.site-global-menu.is-open
.site-global-nav > *:nth-child(6){
  transition-delay:.33s;
}

.site-global-menu.is-open
.site-global-nav > *:nth-child(7){
  transition-delay:.38s;
}


/* =========================================================
   NUMBER
========================================================= */

.site-global-nav-number{
  position:relative;
  z-index:3;

  display:block;

  font-family:
    "Times New Roman",
    serif;

  font-size:11px;

  line-height:1;

  letter-spacing:.18em;

  color:rgba(245,241,232,.54);

  transition:
    color .4s ease,
    transform .55s cubic-bezier(.22,.61,.36,1);
}


/* =========================================================
   JAPANESE LABEL
========================================================= */

.site-global-nav-label{
  position:relative;
  z-index:3;

  display:inline-block;

  width:max-content;

  font-family:
    "Noto Serif JP",
    serif;

  font-size:
    clamp(24px,2.4vw,42px);

  line-height:1.35;

  font-weight:300;

  letter-spacing:.08em;

  color:#F5F1E8;

  transition:
    transform .58s cubic-bezier(.22,.61,.36,1),
    color .4s ease,
    letter-spacing .58s cubic-bezier(.22,.61,.36,1);
}


/* =========================================================
   LARGE BACKGROUND NUMBER
========================================================= */

.site-global-nav > a::before,
.site-global-nav-group::before{
  position:absolute;

  right:
    clamp(15px,3vw,55px);

  top:50%;

  transform:
    translateY(-50%)
    translateX(18px);

  font-family:
    "Times New Roman",
    serif;

  font-size:
    clamp(72px,8.2vw,138px);

  line-height:1;

  font-weight:400;

  letter-spacing:-.04em;

  color:
    rgba(245,241,232,.075);

  opacity:0;

  pointer-events:none;

  transition:
    opacity .55s ease,
    transform .75s cubic-bezier(.22,.61,.36,1);
}

.site-global-nav > a:nth-child(1)::before{
  content:"01";
}

.site-global-nav > a:nth-child(2)::before{
  content:"02";
}

.site-global-nav-group::before{
  content:"03";
}

.site-global-nav > a:nth-child(4)::before{
  content:"04";
}

.site-global-nav > a:nth-child(5)::before{
  content:"05";
}

.site-global-nav > a:nth-child(6)::before{
  content:"06";
}

.site-global-nav > a:nth-child(7)::before{
  content:"07";
}


/* =========================================================
   ACTIVE HOVER LINE
========================================================= */

.site-global-nav > a::after,
.site-global-nav-group::after{
  content:"";

  position:absolute;

  left:78px;
  bottom:-1px;

  width:0;
  height:1px;

  background:
    linear-gradient(
      to right,
      #D7DFD4,
      rgba(215,223,212,.08)
    );

  transition:
    width .72s cubic-bezier(.22,.61,.36,1);
}


/* =========================================================
   HOVER EFFECT
========================================================= */

@media (hover:hover){

  /* 他の項目を少しだけ引かせる */
  .site-global-nav:hover
  > a:not(:hover)
  .site-global-nav-label,
  .site-global-nav:hover
  > .site-global-nav-group:not(:hover)
  .site-global-nav-label{
    color:
      rgba(245,241,232,.32);
  }


  .site-global-nav > a:hover
  .site-global-nav-number,
  .site-global-nav-group:hover
  .site-global-nav-number{
    color:#D7DFD4;

    transform:
      translate3d(4px,0,0);
  }


  .site-global-nav > a:hover
  .site-global-nav-label,
  .site-global-nav-group:hover
  .site-global-nav-label{
    color:#FFFFFF;

    transform:
      translate3d(14px,0,0);

    letter-spacing:.10em;
  }


  .site-global-nav > a:hover::before,
  .site-global-nav-group:hover::before{
    opacity:1;

    transform:
      translateY(-50%)
      translateX(0);
  }


  .site-global-nav > a:hover::after,
  .site-global-nav-group:hover::after{
    width:
      calc(100% - 78px);
  }

}


/* =========================================================
   SERVICE GROUP
========================================================= */

.site-global-nav-parent{
  display:contents;
}

.site-global-nav-sub{
  grid-column:2;

  display:flex;
  flex-wrap:wrap;

  gap:
    10px 26px;

  padding:
    0 0 24px;

  opacity:.82;
}

.site-global-nav-sub a{
  position:relative;

  display:inline-block;

  padding:
    4px 0
    6px;

  font-family:
    "Noto Serif JP",
    serif;

  font-size:
    clamp(13px,1vw,15px);

  line-height:1.7;

  letter-spacing:.05em;

  color:rgba(245,241,232,.72);

  transition:
    color .35s ease,
    transform .45s cubic-bezier(.22,.61,.36,1);
}

.site-global-nav-sub a::after{
  content:"";

  position:absolute;

  left:0;
  right:0;
  bottom:0;

  height:1px;

  background:
    rgba(245,241,232,.38);

  transform:
    scaleX(0);

  transform-origin:
    right center;

  transition:
    transform .48s
    cubic-bezier(.22,.61,.36,1);
}

@media (hover:hover){

  .site-global-nav-sub a:hover{
    color:#FFFFFF;

    transform:
      translate3d(5px,0,0);
  }

  .site-global-nav-sub a:hover::after{
    transform:
      scaleX(1);

    transform-origin:
      left center;
  }

}


/* =========================================================
   FOOTER
========================================================= */

.site-global-menu-footer{
  position:absolute;

  left:7vw;
  right:0;
  bottom:34px;

  display:flex;

  justify-content:space-between;
  align-items:flex-end;

  padding-top:24px;

  color:rgba(245,241,232,.64);

  opacity:0;

  transform:
    translate3d(0,10px,0);

  transition:
    opacity .8s ease .38s,
    transform .9s cubic-bezier(.22,.61,.36,1) .38s;
}

.site-global-menu.is-open
.site-global-menu-footer{
  opacity:1;

  transform:
    translate3d(0,0,0);
}

.site-global-menu-footer p,
.site-global-menu-footer a{
  margin:0;

  font-family:
    "Times New Roman",
    serif;

  font-size:11px;

  line-height:1.6;

  letter-spacing:.20em;
}



/* =========================================================
   LOCAL NAV SAFE ZONE
   固定ローカルナビと右上メニューボタンの干渉防止
========================================================= */

.rs-nav,
.ns-nav,
.hp-nav,
.rc-nav{
  padding-right:112px !important;
}

body.is-menu-open .rs-nav,
body.is-menu-open .ns-nav,
body.is-menu-open .hp-nav,
body.is-menu-open .rc-nav{
  opacity:0 !important;
  pointer-events:none !important;
  transition:opacity .22s ease !important;
}

@media (max-width:700px){
  .rs-nav,
  .ns-nav,
  .hp-nav,
  .rc-nav{
    padding-right:78px !important;
  }
}


/* =========================================================
   BODY LOCK
========================================================= */

body.is-menu-open{
  overflow:hidden;
}



/* =========================================================
   MOBILE / FINAL CLEAN VERSION
   右上ボタン・円形展開・スマホナビをここに一本化
========================================================= */

@media (max-width:700px){

  /* -----------------------------------------
     MENU BUTTON
     52 x 52 の完全な正円
  ----------------------------------------- */
  .site-menu-trigger{
    top:14px !important;
    right:14px !important;
    width:52px !important;
    height:52px !important;
    min-width:52px !important;
    min-height:52px !important;
    padding:0 !important;
    margin:0 !important;
    border-radius:50% !important;
    border:1px solid rgba(52,68,59,.11) !important;
    background:rgba(250,249,245,.94) !important;
    box-shadow:0 5px 18px rgba(33,45,38,.08) !important;
    overflow:hidden;
  }

  /* 3本線はボタン中央を基準に配置 */
  .site-menu-trigger-line{
    left:50% !important;
    top:50% !important;
    height:1px !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    border-radius:999px;
    background:#34443b;
    box-shadow:none !important;
    transform-origin:center center !important;
    transition:
      width .34s cubic-bezier(.22,.61,.36,1),
      transform .42s cubic-bezier(.22,.61,.36,1),
      opacity .22s ease !important;
  }

  .site-menu-trigger-line-1{
    width:23px !important;
    transform:translate(-50%,-50%) translateY(-6px) !important;
  }

  .site-menu-trigger-line-2{
    width:17px !important;
    transform:translate(-50%,-50%) !important;
  }

  .site-menu-trigger-line-3{
    width:23px !important;
    transform:translate(-50%,-50%) translateY(6px) !important;
  }

  /* OPEN → 中央に収まる X */
  .site-menu-trigger.is-open .site-menu-trigger-line-1{
    width:23px !important;
    transform:translate(-50%,-50%) rotate(45deg) !important;
  }

  .site-menu-trigger.is-open .site-menu-trigger-line-2{
    width:0 !important;
    opacity:0 !important;
    transform:translate(-50%,-50%) scaleX(0) !important;
  }

  .site-menu-trigger.is-open .site-menu-trigger-line-3{
    width:23px !important;
    transform:translate(-50%,-50%) rotate(-45deg) !important;
  }

  /* -----------------------------------------
     OVERLAY
  ----------------------------------------- */
  .site-global-menu{
    position:fixed !important;
    inset:0 !important;
    width:100% !important;
    height:100dvh !important;
    min-height:100svh !important;
    overflow:hidden !important;
    background:transparent !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
    transition:visibility 0s linear .98s !important;
  }

  .site-global-menu.is-open{
    visibility:visible;
    transition:visibility 0s linear 0s !important;
  }

  /* -----------------------------------------
     RADIAL CIRCLE
     ボタン中心 右40px / 上40px から展開
  ----------------------------------------- */
  .site-global-menu::before{
    content:"" !important;
    position:absolute !important;
    width:280vmax !important;
    height:280vmax !important;
    left:auto !important;
    right:calc(40px - 140vmax) !important;
    top:calc(40px - 140vmax) !important;
    bottom:auto !important;
    border-radius:50% !important;
    background:
      radial-gradient(
        circle at 50% 50%,
        #465C50 0%,
        #3B5145 48%,
        #30443A 100%
      ) !important;
    transform:translate3d(0,0,0) scale(.001) !important;
    transform-origin:50% 50% !important;
    will-change:transform !important;
    backface-visibility:hidden !important;
    -webkit-backface-visibility:hidden !important;
    transition:transform .98s cubic-bezier(.68,0,.22,1) !important;
    pointer-events:none !important;
  }

  .site-global-menu.is-open::before{
    transform:translate3d(0,0,0) scale(1) !important;
  }

  /* -----------------------------------------
     MENU CONTENT
  ----------------------------------------- */
  .site-global-menu-inner{
    position:relative !important;
    z-index:2 !important;
    width:calc(100% - 40px) !important;
    min-height:100% !important;
    margin:0 auto !important;
    padding:84px 0 28px !important;
    justify-content:flex-start !important;
    opacity:0;
    transform:translate3d(0,10px,0);
    transition:
      opacity .38s ease,
      transform .52s cubic-bezier(.22,.61,.36,1) !important;
  }

  .site-global-menu.is-open .site-global-menu-inner{
    opacity:1;
    transform:translate3d(0,0,0);
    transition-delay:.27s !important;
  }

  .site-global-nav{
    width:100%;
    margin:auto 0;
    border-top:1px solid rgba(245,241,232,.16);
  }

  .site-global-nav > a,
  .site-global-nav-group{
    grid-template-columns:42px minmax(0,1fr);
    min-height:68px;
  }

  .site-global-nav-number{
    font-size:9px;
  }

  .site-global-nav-label{
    font-size:clamp(20px,5.8vw,26px);
    line-height:1.45;
    letter-spacing:.06em;
  }

  .site-global-nav > a::before,
  .site-global-nav-group::before{
    display:none;
  }

  .site-global-nav > a::after,
  .site-global-nav-group::after{
    left:42px;
  }

  .site-global-nav-sub{
    grid-column:2;
    display:grid;
    gap:4px;
    padding:0 0 18px;
  }

  .site-global-nav-sub a{
    font-size:13px;
  }

  .site-global-menu-footer{
    position:relative;
    left:auto;
    right:auto;
    bottom:auto;
    margin-top:26px;
    padding-top:18px;
    border-top:1px solid rgba(245,241,232,.16);
  }

  .site-global-menu-footer p,
  .site-global-menu-footer a{
    font-size:9px;
    letter-spacing:.16em;
  }

  /* 固定ローカルナビとの干渉防止 */
  .rs-nav,
  .ns-nav,
  .hp-nav,
  .rc-nav{
    padding-right:78px !important;
  }
}


/* =========================================================
   SMALL HEIGHT
========================================================= */

@media (max-height:780px) and (min-width:701px){

  .site-global-menu-inner{
    padding-top:72px;
    padding-bottom:28px;
  }

  .site-global-nav > a,
  .site-global-nav-group{
    min-height:72px;
  }

  .site-global-nav-label{
    font-size:
      clamp(22px,2.2vw,36px);
  }

  .site-global-nav-sub{
    padding-bottom:16px;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion:reduce){

  .site-menu-trigger-line,
  .site-global-menu,
  .site-global-nav > a,
  .site-global-nav-group,
  .site-global-nav-label,
  .site-global-menu-footer{
    transition:none!important;
  }

}



/* =========================================================
   FOREST MENU COLOR OVERRIDES
========================================================= */

.site-global-menu .site-global-nav{
  border-top-color:rgba(245,241,232,.16);
}

.site-global-menu .site-global-nav > a,
.site-global-menu .site-global-nav-group{
  border-bottom-color:rgba(245,241,232,.16);
}

.site-global-menu .site-global-nav-number{
  color:rgba(245,241,232,.52);
}

.site-global-menu .site-global-nav-label{
  color:#F5F1E8;
  text-shadow:0 1px 18px rgba(17,27,21,.08);
}

.site-global-menu .site-global-nav-sub a{
  color:rgba(245,241,232,.72);
}

.site-global-menu .site-global-menu-footer,
.site-global-menu .site-global-menu-footer p,
.site-global-menu .site-global-menu-footer a{
  color:rgba(245,241,232,.68);
}

@media (hover:hover){

  .site-global-menu .site-global-nav:hover
  > a:not(:hover)
  .site-global-nav-label,
  .site-global-menu .site-global-nav:hover
  > .site-global-nav-group:not(:hover)
  .site-global-nav-label{
    color:rgba(245,241,232,.30);
  }

  .site-global-menu .site-global-nav > a:hover
  .site-global-nav-number,
  .site-global-menu .site-global-nav-group:hover
  .site-global-nav-number{
    color:#D9E2D8;
  }

  .site-global-menu .site-global-nav > a:hover
  .site-global-nav-label,
  .site-global-menu .site-global-nav-group:hover
  .site-global-nav-label{
    color:#FFFFFF;
  }

  .site-global-menu .site-global-nav-sub a:hover{
    color:#FFFFFF;
  }

}



/* =========================================================
   iPhone / Safari fallback
========================================================= */

@supports not (height:100dvh){

  @media (max-width:700px){

    .site-global-menu{
      height:100vh !important;
    }

  }

}