/* Template */
@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Noto+Sans+JP:wght@100..900&display=swap");

:root {

  /* font */
  --font-8: 8px;
  --font-14: 14px;
  --font-16: 16px;
  --font-20: 20px;
  --font-24: 24px;
  --font-32: 32px;
  --font-40: 40px;
  --font-80: 80px;

  /* font default */
  --font-51:51px;
  --font-41:41px;
  --font-28:28px;
  --font-21:21px;
  --font-16:16px;
  --font-13:13px;


  --opacity-0:0;
  --opacity-4:0.04;
  --opacity-8:0.08;
  --opacity-10:0.1;
  --opacity-20:0.2;
  --opacity-32:0.32;
  --opacity-50:0.5;
  --opacity-100:1;

  
  
  /* color */
  --color-base: #fff;
  --color-bg: #141516;
  --color-surface: #f7f7f7;
  --color-border: #fff;
  --color-primary: #20f8ff;
  
  /* font color*/
  --textColor-def:#fff;
  --textColor-hover:#20f8ff;

  /* spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-4: 4px;
  --space-8: 8px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-80: 80px;

  /* radius */
  --radius-8: 8px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-20: 20px;
  --radius-40: 40px;
  --radius-80: 80px;

  /* opacity */
  --opacity-0: 0;
  --opacity-4: 0.04;
  --opacity-8: 0.08;
  --opacity-10: 0.1;
  --opacity-20: 0.2;
  --opacity-32: 0.32;
  --opacity-50: 0.5;
  --opacity-80: 0.8;
  --opacity-100: 1;

  /* easing */
  /* 減速 */
  --ease-default: cubic-bezier(0, 0.8, 0, 1);
  /* 加速＆減速 */
  --ease-accelerationdeceleration: cubic-bezier(1, 0, 0, 1);
  --ease-accelerationdeceleration-looser: cubic-bezier(0.77, 0, 0.18, 1);
}

::selection {
  background-color: #fff;
  color: #000;
}


.opa0 {opacity: var(--opacity-0);}
.opa4 {opacity: var(--opacity-4);}
.opa8 {opacity: var(--opacity-8);}
.opa10 {opacity: var(--opacity-10);}
.opa20 {opacity: var(--opacity-20);}
.opa32 {opacity: var(--opacity-32);}
.opa50 {opacity: var(--opacity-50);}
.opa80 {opacity: var(--opacity-80);}
.opa100 {opacity: var(--opacity-100);}

.radius8-full {border-radius: var(--radius-8);}
.radius12-full {border-radius: var(--radius-12);}
.radius16-full {border-radius: var(--radius-16);}
.radius20-full {border-radius: var(--radius-20);}
.radius40-full {border-radius: var(--radius-40);}
.radius80-full {border-radius: var(--radius-80);}

.mbm-difference {mix-blend-mode: difference;}
.mbm-overlay {mix-blend-mode: overlay;}
.mbm-multiply {mix-blend-mode: multiply;}
.mbm-screen {mix-blend-mode: screen;}


html {
  font-feature-settings: "palt";
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: "Hiragino Sans", "Noto Sans JP", "Yu Gothic", sans-serif;
    font-feature-settings: inherit;
    color: var(--textColor-def);
    font-size: var(--font-16);
    line-height: 1.4;
    letter-spacing: 0.05em;
}

body * {
  font-feature-settings: inherit;
}

h1 {
	font-size: var(--font-51);
}
@media screen and (max-width: 1024px) {h1 {font-size: 40px;}}
@media screen and (max-width: 768px) {h1 {font-size: 32px;}}
@media screen and (max-width: 480px) {h1 {font-size: 26px;}}
h2 {
	font-size: var(--font-51);
}
@media screen and (max-width: 1024px) {h2 {font-size: 40px;}}
@media screen and (max-width: 768px) {h2 {font-size: 32px;}}
@media screen and (max-width: 480px) {h2 {font-size: 26px;}}
h3 {
	font-size: var(--font-41);
}
@media screen and (max-width: 1024px) {h3 {font-size: 34px;}}
@media screen and (max-width: 768px) {h3 {font-size: 28px;}}
@media screen and (max-width: 480px) {h3 {font-size: 22px;}}
h4 {
	font-size: var(--font-28);
}
@media screen and (max-width: 1024px) {h4 {font-size: 24px;}}
@media screen and (max-width: 768px) {h4 {font-size: 20px;}}
@media screen and (max-width: 480px) {h4 {font-size: 18px;}}
h5 {
	font-size: var(--font-21);
}
@media screen and (max-width: 1024px) {h5 {font-size: 19px;}}
@media screen and (max-width: 768px) {h5 {font-size: 17px;}}
@media screen and (max-width: 480px) {h5 {font-size: 15px;}}
h6 {
	font-size: var(--font-16);
}
@media screen and (max-width: 1024px) {h6 {font-size: 15px;}}
@media screen and (max-width: 768px) {h6 {font-size: 14px;}}
@media screen and (max-width: 480px) {h6 {font-size: 13px;}}

p {
	font-size: var(--font-16);
}

article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary {
    display: block;
}
audio,canvas,progress,video {
    display: inline-block;
    vertical-align: baseline;
}
audio:not([controls]) {
    display: none;
    height: 0;
}
[hidden],template {
    display: none;
}
a:active,a:hover {
    outline: 0;
}
abbr[title] {
    border-bottom: 1px dotted;
}
p {
   font-feature-settings: "palt";
}

.blur {
	background-color: rgba(0, 0, 0, 0.08);
	backdrop-filter: blur(100px);
	-webkit-backdrop-filter: blur(100px);
}

/* Breakpoint */

/* 1440px以下*/
@media screen and (max-width: 1440px) {
}

/* 1024x以下*/
@media screen and (max-width: 1024px) {
}

/* 768x以下*/
@media screen and (max-width: 768px) {
}

/* 480px以下*/
@media screen and (max-width: 480px) {
}




/* 1441px以上*/
@media screen and (min-width: 1441px) {
}

/* 1025px以上*/
@media screen and (min-width: 1025px) {
}

/* 769x以上*/
@media screen and (min-width: 769px) {
}

/* 481px以上*/
@media screen and (min-width: 481px) {
}


/* wrapper */
#wrapper {
    overflow: hidden;
    background: var(--color-bg);
}


/* header */

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9998;
  isolation: auto;
  
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(100px);
  -webkit-backdrop-filter: blur(100px);
  
  /* ◯ 修正：noneを削除（デフォルトのautoに）。これでヘッダー領域の下のコンテンツは触れなくなります */
  pointer-events: auto; 
}
body.menu-is-open header {
  /*
    header が width: 100% (position: fixed) なので、
    bodyと同様に右余白を空けることで、ロゴの中央位置がズレるのを防ぎます。
  */
  padding-right: var(--scrollbar-width, 0px);
}

#logo {
  position: relative;
  width: 100%;
  z-index: 2;

  /* ◯ 修正：Flexboxで横中央に配置 */
  display: flex;
  justify-content: center;
  align-items: center;

  /* ◯ 修正：上下に「全く同じピクセル数」の余白を設定することで、物理的に上下を均等にします */
  padding: 40px 0; 
  margin: 0;
}

/* レスポンシブ時も、上下に同じ数値を適用して均等に縮小させます */
@media screen and (max-width: 768px) {
  #logo {
    padding: 20px 0; /* タブレット：上下均等に20px */
  }
}
@media screen and (max-width: 480px) {
  #logo {
    padding: 16px 0; /* スマホ：上下均等に16px */
  }
}

#logo a {
  /* ◯ 修正：インラインブロックによる意図しない隙間（ベースラインの余白）を消すため、flexにするかline-heightを調整します */
  display: flex;
  pointer-events: auto; /* クリック可能 */
}

#lottie {
  width: 56px;
  display: block;
  /* background-color: #117376; */
}
@media screen and (max-width: 768px) {
  #lottie {
    width: 44px;
  }
}

#lottie svg {
  display: block;
}

.menu-btn {
  position: fixed; 
  top: 40px;       
  /* 変更：初期値（PCサイズ）の右位置を変数で定義 */
  --btn-right: 40px;
  right: var(--btn-right);
  
  z-index: 10012;
  width: 56px;
  height: 56px;
  background-color: rgba(255, 255, 255, 0);
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  border-radius: 56px;
  isolation: isolate;
  transition: background-color 0.4s var(--ease-accelerationdeceleration-looser);
}

/* 変更：メニュー展開中（.is-active）もホバーと同じ白背景にする */
.menu-btn:hover,
.menu-btn.is-active {
  background-color: rgba(255, 255, 255, 1);
}

/* 固定値の「40px」を「var(--btn-right)」に変更 */
body.menu-is-open .menu-btn {
  /* これで768px以下（16px）になっても自動的に「16px + スクロールバーの幅」で計算されます */
  right: calc(var(--btn-right) + var(--scrollbar-width, 0px));
}

/* メニューが開いているとき */
body.menu-is-open {
  padding-right: var(--scrollbar-width, 0px);
}

/* ×ボタン（position: fixed の要素）もズレる場合 */
body.menu-is-open .close-button {
  margin-right: var(--scrollbar-width, 0px);
}


/* --- レスポンシブ（ヘッダーの縮小に合わせる） --- */
@media screen and (max-width: 768px) {
  .menu-btn {
    top: 14px;
    /* 修正：変数の中身だけを上書き */
    --btn-right: 16px;
  }
}
@media screen and (max-width: 480px) {
  .menu-btn {
    top: 10px;
    /* 修正：変数の中身だけを上書き */
    --btn-right: 16px;
  }
}

.bar {
  display: block;
  width: 24px;
  height: 2px;
  background-color: #fff; /* 通常時もホバー時も#fffのままにする */
  
  /* 追加：ホバーされて親の背景が白になったとき、色を反転させる */
  mix-blend-mode: difference;
  pointer-events: none;
  
  /* 追加：前のステップで希望された、ホバー時に3本線の色が変わる際のスムーズなアニメーション（cubic-bezier） */
  transition: background-color 0.4s cubic-bezier(0, 0.8, 0, 1);
}


/* --- オーバーレイ（背景無効化用） --- */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 10010; 
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.sidebar {
  position: fixed;
  top: 0;
  right: 0;
  width: 560px;
  height: 100%;

  /* background: #000; */
  background: rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(40px);
  backdrop-filter: blur(40px);

  z-index: 10011; 
  transform: translateX(100%);
  box-shadow: -4px 0 40px rgba(0,0,0,0.12);
}
@media screen and (max-width: 768px) {
  .sidebar {
    width: 100%;
  }
}

.sidebar-inner {
  height: 100%;
  overflow-y: auto; 
  padding: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  box-sizing: border-box;
}

.sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar li {
  margin: 0;
  padding: 0;
}

.sidebar li p {
  position: relative;
  display: block;
  width: 100%;
  padding: 24px 48px;
  color: #ffffff; /* 通常時もホバー時も#fffのまま */
  text-decoration: none;
  font-size: 1.4rem;
  font-weight: 800;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  background-color: rgba(0, 0, 0, 0.12);
}

.sidebar li p .hide {
  color: transparent;
}

/* 1. aタグの定義 */
.sidebar li a.sideMenuTextStage {
  position: relative;
  display: block;
  width: 100%;
  padding: 16px 48px;
  color: #ffffff; /* 通常時もホバー時も#fffのまま */
  text-decoration: none;
  font-size: 1.2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  background-color: transparent; /* 通常時は透明 */
  
  /* 🌟重要: 親要素がブレンドの邪魔をしないよう隔離(分離)する */
  isolation: isolate; 
  
  transition: background-color 0.8s var(--ease-default);
}
@media screen and (max-width: 768px) {
  .sidebar li a.sideMenuTextStage,
  .sidebar li p {
    padding: 16px 24px;
  }
}



/* 2. テキスト部分とロゴ画像のブレンド設定 */
.sidebar li a.sideMenuTextStage .sideMenuTextLink,
.sidebar li a.sideMenuTextStage img {
  display: inline-block;
  mix-blend-mode: difference;
  pointer-events: none; /* マウスイベントの干渉を防ぐ */
}

/* 3. 背景画像だった矢印を疑似要素にしてブレンドさせる */
.sidebar li a.sideMenuTextStage::after {
  content: "";
  position: absolute;
  right: 48px; /* 通常時の位置 */
  top: 50%;
  transform: translateY(-50%);
  width: 24px;   /* 矢印のサイズ（必要に応じて調整） */
  height: 24px;  /* 矢印のサイズ（必要に応じて調整） */
  background: url(/assets/images/arrow-link.svg) no-repeat center center / contain;
  mix-blend-mode: difference;
  transition: right 0.8s var(--ease-default);
}
@media screen and (max-width: 768px) {
  .sidebar li a.sideMenuTextStage::after {
    right: 24px;
  }
}

/* 4. 最初の子要素（ロゴ部分）の個別スタイル */
.sidebar li:first-child a.sideMenuTextStage {
  padding: 56px 48px;
  border-top: 1px solid transparent;
}
@media screen and (max-width: 768px) {
  .sidebar li:first-child a.sideMenuTextStage {
    padding: 28px 24px;
  }
}

/* 最初の子要素には矢印を出さない */
.sidebar li:first-child a.sideMenuTextStage::after {
  display: none;
}

/* 5. ホバー時の処理（aタグの背景を白にする） */
.sidebar li a.sideMenuTextStage:hover {
  background-color: #ffffff; /* 背景が白になることで、中の白文字が反転して黒になる */
}
.sidebar li:first-child a.sideMenuTextStage:hover {
  background-color: transparent; /* 背景が白になることで、中の白文字が反転して黒になる */
}

/* ホバー時に矢印を動かす */
.sidebar li a.sideMenuTextStage:hover::after {
  right: 8px; 
}

/* ロゴ画像のスタイル */
.sidebar li a.sideMenuTextStage img {
  width: 56px;
  height: auto;
  margin: 24px 0;
}




/* footer */

footer {
  width: 100%;
  height: 80px;
  height: auto;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 9998;
}
/* 追加：メニューが開いたとき、footerもスクロールバー分だけ右余白を空ける */
body.menu-is-open footer {
  /*
    footer が width: 100% (position: fixed) なので、
    右余白を空けることで、ページトップボタン（#pagetop）の中央位置がズレるのを防ぎます。
  */
  padding-right: var(--scrollbar-width, 0px);
}

footer #pagetop {
  line-height: 0;
}

footer #pagetop a {
  position: absolute;
  display: inline-block;
  width: 160px;
  height: 80px;
  left:50%;
  bottom: 0;
  margin: 0 0 0 -80px;
  padding: 0;
  border-radius: 50% / 100% 100% 0 0;
  -webkit-backdrop-filter: blur(40px);
  backdrop-filter: blur(40px);
  background: rgba(255, 255, 255, 0.6);
  transition: all 0.4s var(--ease-accelerationdeceleration-looser);
  box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.4);

  position: relative; /* SVG配置用 */
  overflow: hidden;

  transform: translateY(100%);
  opacity: 0;
}

footer #pagetop a img {
  display: block;
}

footer #pagetop a:hover {
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 0px 80px rgba(0, 0, 0, 0.8);
}

/* SVG */
.progress-ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 160px;
  height: 80px;
}

/* 線 */
.progress-bg,
.progress-bar {
  fill: none;
  stroke-linecap: butt; /* ← まずはこれにする（ズレ確認用） */
}

/* 背景 */
.progress-bg {
  stroke: rgba(0,0,0,0.2);
}

/* 本体 */
.progress-bar {
  stroke: #000;
  stroke-width: 8;

  stroke-dasharray: 245;
  stroke-dashoffset: 245;
}


/* アイコン中央寄せ */
footer #pagetop a img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -40%);
  z-index: 2;
}




/* #main */

main {
  width: 100%;
}


/* 遷移 */
#page-transition {
  position: fixed;
  inset: 0;
  background: #000;
  opacity: 1;
  pointer-events: none;
  z-index: 9999;
}


#js {
  display: none;
}


/* split text */
.split-line {
  overflow: hidden;
}

.split-line .line {
  display: block;
  overflow: hidden;
}

.split-line .line-inner {
  display: block;
}

/* shuffle-text */
.shuffle-text {
  /* 高さと幅の計算を崩さないために必須 */
  /* display: inline-block; */
  display: block;
  text-overflow: ellipsis;
  overflow: hidden;
  transition: opacity 0.2s ease;/* 画面外に消える時に少し滑らかになります */
}

/* Loader */
body.is-loading {
  overflow: hidden;
  position: fixed;
  width: 100%;
}

#preloader {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 20000;
  display: flex;
  align-items: center;
  justify-content: center;
}

#preloader.hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.preloader-inner {
  width: 100%;
  position: relative;
}

.progress-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  background: #000;
}

.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,0.08);
}

.progress {
  /* width: 0%; */
  width: 100%;               /* 最初から100%にしておく */
  transform: scaleX(0);      /* 最初は0（見えない状態） */
  transform-origin: left;    /* 左端を基準に伸びるようにする */
  will-change: transform;    /* ブラウザに最適化を促す */
  height: 100%;
  background: rgba(255,255,255,0.12);
}

.progress-text {
  position: absolute;
  top: 40px;
  right:40px;
  transform: none;
  white-space: nowrap;
  color: #fff;

  font-size: 80px;
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/barlowcondensed/v13/HTx3L3I-JCGChYJ8VI-L6OO_au7B6x7T2kn3.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;flex-shrink: 0;
  mix-blend-mode: difference;
}
@media screen and (max-width: 768px) {
  .progress-text {
    top: 32px;
    right:32px;
    font-size: 56px;
  }
}
@media screen and (max-width: 480px) {
  .progress-text {
    top: 24px;
    right:24px;
    font-size: 40px;
  }
}


/* ページ遷移 */
#page-transition {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 19999;
  opacity: 1;
  pointer-events: none;
}

#wall {
  position: fixed;
  inset: 0;
  z-index: -1;
}