body {
   margin: 0;
   font-family: "Raleway", sans-serif;
   font-weight: 100;
font-style: normal;
background-color: #000;  /* ← 下地を黒に固定 */
}


html, body { max-width: 100%; overflow-x: hidden; }

/* overscroll の適用先を限定：慣性は生かす + 横スクロールを完全封じる */
html,
body {
  max-width: 100%;
  overflow-x: hidden;      /* ← 横のはみ出しを強制的にカット */
  overscroll-behavior-y: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* === Background wall: fixed layer, not in layout === */
.bg-wall{
position: fixed;
inset: -16vh -3vw;          /* ← 上下左右に余白を確保（白見え防止） */
z-index: -1;
background-color: #000;     /* 念のため下地も黒 */
background-image: url("images/background.webp");
background-position: center top;
background-size: cover;
background-repeat: no-repeat;
will-change: transform;     /* Safariでのチラ抑止 */
transform: translateZ(0);
opacity: 1;
}


section.top {
   margin: 0;
   min-height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
   font-family: "Raleway", sans-serif;
   font-weight: 100;
   color: #fff;
}

.top-container .top-logo{
    max-width: 750px;
    width: 65%;
    z-index: 10; /* handsより前面（必要なら後で調整OK） */
}


.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 20px;
}

.header .logo {
    display: flex;
    align-items: center;
}

.header .logo img {
    height: 40px;
    margin-right: 10px;
}


/* ===== Top hands layout (Stage 16:9 + scale) ===== */
/* 16:9 の“基準座標系”を作って、そのまま全体をスケールする */

.top-container{
  position: relative;
  width: 100%;
  height: 100svh;      /* モバイルのUI込みでも安定 */
  min-height: 100vh;   /* fallback */
  overflow: hidden;
}

/* iOS実機でDevToolsと一致させるための可視viewport高さ（JSが --ios-vh をセット） */
.top-container{
  height: var(--ios-vh, 100vh);
  min-height: var(--ios-vh, 100vh);
}

/* 16:9ステージ（基準：1440x810） */
.hero-stage{
  /* 例：あなたの値に合わせてOK */
  --stage-w: 1517;
  --stage-h: 982;

  /* ここが重要：vw や svh を px 換算したもの(=長さ)で割る */
  --scale: min(
    calc(100vw / (var(--stage-w) * 1px)),
    calc(100svh / (var(--stage-h) * 1px))
  );

  position: absolute;
  left: 50%;
  top: 50%;

  width: calc(var(--stage-w) * 1px);
  height: calc(var(--stage-h) * 1px);

transform: translate(-50%, -50%) translate(var(--shift-x), var(--shift-y)) scale(var(--ios-scale, var(--scale)));
  transform-origin: center;
}

/* hands */
.top-hand{
  position: absolute;
  height: auto;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* ロゴ：ステージ中央固定（handsより前） */
.hero-stage .top-logo{
  position: absolute;
  left: -1%;
  top: -1%;
  transform: translate(-50%, -50%);
  /* max-width: 550px; */
  width: 34%;
  z-index: 10;
}

/* ===== 初期レイアウト（16:9のスクショ寄せ） =====
   ※ ここは “px” でOK（ステージ全体がscaleされるのでレスポンシブになる）
   ※ 上の手(1,3)が下 / 下の手(2,4)が上
*/
.top-hand--1{left: -912px;top: -492px;width: 813px;z-index: 1;}
.top-hand--3{right: 612px;top: -531px;width: 821px;z-index: 1;}

.top-hand--2{left: -995px;bottom: 600px;width: 852px;z-index: 3;}
.top-hand--4{right: 430px;bottom: 430px;width: 835px;z-index: 3;}

/* ===== 端末別の“少数ルール”で補正（比率で分岐） ===== */

/* タブレット縦〜正方形寄り：少し上に寄せる + 下側を控えめに */
@media (max-aspect-ratio: 4/3) and (min-width: 768px){
  .hero-stage{
    --shift-y: -1560px;
    /* --shift-x: 50px; */
  }
  .top-hand--2{left: -899px;bottom: 622px;width: 800px;}
  .top-hand--4{right: 504px;bottom: 410px;width: 800px;}
}

/* スマホ縦（かなり縦長）：さらに上寄せ + 下側をもう少し内側へ */
@media (max-width: 767px) and (orientation: portrait){

.bg-wall {
    background-size: 140% auto;
    background-position: 50% 20%;
}

/* 既存 .hero-stage の中に「追加」してください */
/* 71行目〜93行目の .hero-stage 内だけ */
.hero-stage{
  --stage-w: 1517px;
  --stage-h: 982px;

  --scale: min(
    calc(100vw / var(--stage-w)),
    calc(100svh / var(--stage-h))
  );

  /* 未定義で transform が壊れないように保険（PCにも無害） */
  --shift-x: 0px;
  --shift-y: 0px;

  position: absolute;
  left: 50%;
  top: 50%;

  width: var(--stage-w);
  height: var(--stage-h);

  transform: translate(-50%, -50%)
             translate(var(--shift-x), var(--shift-y))
             scale(var(--scale));
  transform-origin: center;
}

  .top-hand--1{left: -529px;top: -740px;width: 1307px;}
  .top-hand--3{right: -572px;top: -814px;width: 1300px;}

  .top-hand--2{left: -580px;bottom: -350px;width: 1378px;}
  .top-hand--4{right: -789px;bottom: -734px;width: 1400px;}

.top-container .top-logo{
    max-width: 1400px;
    width: 86%;
    z-index: 10; /* handsより前面（必要なら後で調整OK） */
    top: 32%;
    left: 51.4%;
}




}


/* ===== Top intro animation (hands -> logo) ===== */

:root{
  --intro-ease: cubic-bezier(.16,1,.3,1);

  /* 下＝速い / 上＝遅い（残像っぽく） */
  --intro-dur-hand-bottom: 1400ms;
  --intro-dur-hand-top:    2050ms;

  --intro-delay-hand-bottom: 0ms;
  --intro-delay-hand-top: 120ms;  /* ← ここを 60〜180ms で好みに調整 */

  /* ロゴは “上が止まった後” に出す */
  --intro-dur-logo: 1400ms;
  --intro-delay-logo: 750ms;  /* = top(1500) + 少し余韻 */

  /* introが終わる時刻（=上の手の終了時刻を基準にする） */
  --intro-end: calc(var(--intro-delay-hand-top) + var(--intro-dur-hand-top));

  /* ナビ表示は、intro完了の少し後（余韻） */
  --nav-reveal-delay: calc(var(--intro-end) + 110ms);
  --nav-reveal-dur: 200ms;

}

/* パフォーマンス */
.top-hand,
.hero-stage .top-logo{
  will-change: transform, opacity, filter;
}

/* Assets load gate: keep top visuals hidden until images are ready */
body:not(.assets-loaded) #top .top-hand,
body:not(.assets-loaded) #top .hero-stage .top-logo{
  opacity: 0;
}

/* pivot（“振りかざし”の支点を外側寄りに） */
.top-hand--2{ transform-origin: 20% 85%; } /* 左下 */
.top-hand--4{transform-origin: 80% 85%;} /* 右下 */
.top-hand--1{ transform-origin: 25% 15%; } /* 左上 */
.top-hand--3{ transform-origin: 75% 15%; } /* 右上 */

body.assets-loaded .top-hand--2{ animation: handRaiseBL var(--intro-dur-hand-bottom) var(--intro-ease) var(--intro-delay-hand-bottom) both; }
body.assets-loaded .top-hand--4{ animation: handRaiseBR var(--intro-dur-hand-bottom) var(--intro-ease) var(--intro-delay-hand-bottom) both; }
body.assets-loaded .top-hand--1{ animation: handRaiseTL var(--intro-dur-hand-top)    var(--intro-ease) var(--intro-delay-hand-top)    both; }
body.assets-loaded .top-hand--3{ animation: handRaiseTR var(--intro-dur-hand-top)    var(--intro-ease) var(--intro-delay-hand-top)    both; }

/* ④：ロゴを優雅に出す（最後） */
body.assets-loaded .hero-stage .top-logo{
  opacity: 0;
  filter: blur(10px);
  animation: logoReveal var(--intro-dur-logo) var(--intro-ease) var(--intro-delay-logo) both;
}

/* ---- Keyframes（“翼を広げる / ダンス”の感じ：一度大きく入って、少し行き過ぎて、ゆっくり収束） ---- */

/* Bottom Left */
@keyframes handRaiseBL{
  0%{
    opacity: 0;
    transform: translate3d(-520px, -120px, 0) rotate(-38deg) scale(1.03);
    animation-timing-function: cubic-bezier(.18,.95,.2,1);
  }
  18%{ opacity: 1; }
  100%{ opacity: 1; transform: translate3d(0,0,0) rotate(0) scale(1); }
}

@keyframes handRaiseBR{
  0%{
    opacity: 0;
    transform: translate3d(520px, -120px, 0) rotate(38deg) scale(1.03);
    animation-timing-function: cubic-bezier(.18,.95,.2,1);
  }
  18%{ opacity: 1; }
  100%{ opacity: 1; transform: translate3d(0,0,0) rotate(0) scale(1); }
}


@keyframes handRaiseTL{
  0%{
    opacity: 0;
    transform: translate3d(-560px, -110px, 0) rotate(-34deg) scale(1.03);
    animation-timing-function: cubic-bezier(.18,.95,.2,1);
  }
  18%{ opacity: 1; }
  100%{ opacity: 1; transform: translate3d(0,0,0) rotate(0) scale(1); }
}

@keyframes handRaiseTR{
  0%{
    opacity: 0;
    transform: translate3d(560px, -110px, 0) rotate(34deg) scale(1.03);
    animation-timing-function: cubic-bezier(.18,.95,.2,1);
  }
  18%{ opacity: 1; }
  100%{ opacity: 1; transform: translate3d(0,0,0) rotate(0) scale(1); }
}

/* Logo */
@keyframes logoReveal{
  0%   { opacity: 0; transform: translate(-50%, -46%) scale(.985); filter: blur(12px); }
  60%  { opacity: 1; filter: blur(2px); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: blur(0); }
}

/* アクセシビリティ：動きを減らす設定ならアニメOFF */
@media (prefers-reduced-motion: reduce){
  .top-hand,
  .hero-stage .top-logo{
    animation: none !important;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }
}

.header nav ul {
    list-style: none;
    display: flex;
    gap: 15px;
    margin: 0;
    padding: 0;
}

.header nav ul li a {
    color: #fff;
    text-decoration: none;
}

main {

}

section {
    text-align: center;
}

section .top{
min-height: 100vh;
    display: flex;    
    text-align: center;
}

section .about{
min-height: 100vh;
    display: flex;
}

#works {
    position: relative;
    min-height: 60vh;
    /* カードをどれだけ上げるか（マイナスで上へ） */
    --cards-offset: -15vh;   /* 好みで -8〜-16vh */
   /* 持ち上げたぶん上にスペースを作る → ファーストスクリーンに覗かない */
   padding-top: calc(var(--cards-offset) * -1);
}

@media (max-width: 680px){
  #works{ --cards-offset: -10vh; }  /* 上に持ち上げる量を弱め/強める */
}

.slider {
    display: flex;
    overflow: hidden;
    height: auto;
    margin-top: 20%;
}

.slide {
    display: flex;
    transition: transform 0.5s ease;
    min-width: 100%;
}

.work-item {
    position: relative;
    width: 33.33%;
    overflow: hidden;
    cursor: pointer;
}

.work-item .default-image {
    width: 100%;
    height: auto;
    display: block;
}

.work-item .work-preview {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
min-height: 100vh;
    opacity: 0;
    transition: opacity 0.3s;
}

.work-item:hover .work-preview {
    opacity: 1;
}

.work-item .work-preview img {
    width: 100%;
min-height: 100vh;
    object-fit: cover;
}

.work-item .work-info {
    position: absolute;
    bottom: 20px;
    left: 20px;
    z-index: 10;
    background: rgba(0, 0, 0, 0.5);
    padding: 10px;
    border-radius: 5px;
}

.work-item .work-info h2 {
    margin: 0;
    font-size: 24px;
}

.work-item .work-info p {
    margin: 5px 0 0;
    font-size: 16px;
}

button.prev, button.next {
position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0);
    border: none;
    color: white;
    font-size: 45px;
    padding: 10px;
    cursor: pointer;
}

button.prev {
    left: 0;
}

button.next {
    right: 0;
}

/* モーダル */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;

  /* ここが重要：スクロールは modal 側で持つ */
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;

  /* フォールバック（背景が無い時用） */
  background-color: rgba(0, 0, 0, 0.75);
}

/* ===== Modal background (fixed gradient layer) ===== */
.modal::before {
  content: "";
  position: fixed;
  inset: -10vh -10vw; /* 少し大きめにして端の欠けを防ぐ */
  z-index: 0;
  pointer-events: none;

  /* 背景色は work ごとの CSS 変数を維持。外側は“薄く” */
  background: radial-gradient(circle at 30% 20%, color-mix(in oklab, var(--bg-a) 80%, transparent), transparent 55%),
              radial-gradient(circle at 70% 35%, color-mix(in oklab, var(--bg-b) 80%, transparent), transparent 60%),
              radial-gradient(circle at 40% 80%, color-mix(in oklab, var(--bg-c) 80%, transparent), transparent 55%),
              radial-gradient(circle at 80% 75%, color-mix(in oklab, var(--bg-d) 80%, transparent), transparent 60%);
  filter: blur(38px);
  transform: translate3d(0,0,0);
  animation: modalBgDrift 18s ease-in-out infinite alternate;

  /* ★ここが重要：外側はかなり薄く */
  opacity: var(--bg-outer-opacity, 0.02);
}

@keyframes modalBgDrift {
  from { transform: translate3d(-1.5%, -1.0%, 0) scale(1.02); }
  to   { transform: translate3d( 1.5%,  1.0%, 0) scale(1.06); }
}

.modal-content {
  /* 背景はグラデーションが見えるように薄く */
  background-color: rgba(13, 16, 15, 0.55);
  backdrop-filter: blur(10px);

  margin: 1.5% auto;
  padding: 59px; ;
  border: none;
  width: 88%;
  position: relative;
  color: #fff;

  /* スクロールはmodal側に移したので、ここではしない */
  max-height: none;
  overflow: hidden; /* ::before のぼかしが外にはみ出さないように */

  /* グラデーションより前に出す */
  z-index: 1;
}

.modal-content .close {
  position: absolute; /* レイアウトに干渉させない */
  top: 10px;
  right: 37px;
  left: auto;
  z-index: 5; /* 背景グラデより上 */
  font-size: 75px;
  font-weight: 200;
  line-height: 1;
  color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  user-select: none;
  text-shadow: 0 0 16px rgba(0,0,0,0.55);
}

.modal-content .close:hover,
.modal-content .close:focus {
    color: #ccc;
    text-decoration: none;
    cursor: pointer;
}

/* Animated gradient background inside modal (per work via CSS variables) */
#work-detail-modal{
  /* Default background palette (overridden per work via scripts.js setProperty) */
  --bg-a: #0b0f14;
  --bg-b: #112235;
  --bg-c: #0f1a2a;
  --bg-d: #1a1f2a;
}

#work-detail-modal .modal-content{
  position: relative;
  isolation: isolate; /* keeps ::before behind the content */
}

#work-detail-modal .modal-content::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.9;
  background:
    radial-gradient(1200px 600px at 20% 20%, var(--bg-b), transparent 60%),
    radial-gradient(900px 500px at 80% 30%, var(--bg-c), transparent 55%),
    radial-gradient(900px 700px at 50% 85%, var(--bg-d), transparent 60%),
    linear-gradient(135deg, var(--bg-a), var(--bg-b), var(--bg-c), var(--bg-d));
  filter: blur(14px) saturate(1.05);
  transform: scale(1.15);
  animation: modalGradientDrift 18s ease-in-out infinite;
}

#work-detail-modal .modal-content > :not(.close) {
  position: relative;
  z-index: 1;
}

@keyframes modalGradientDrift {
  0%   { transform: scale(1.04) translate3d(0,0,0); filter: blur(14px) saturate(1.05); }
  50%  { transform: scale(1.07) translate3d(10px,-8px,0); filter: blur(18px) saturate(1.10); }
  100% { transform: scale(1.04) translate3d(0,0,0); filter: blur(14px) saturate(1.05); }
}

.detail-header {
    text-align: left;
    margin-bottom: 20px;
    width: 100%;
}

.detail-header h1 {
  font-family: kepler-std, serif;
  font-weight: 900;
  font-style: normal;
  margin: 0;
  font-size: 35px;
  color: #c5c5c5;
  margin-bottom: -10px;
  line-height: 50px;
  letter-spacing: 2px;
}

.detail-header h2 {
  font-family: "Raleway", sans-serif;
  font-weight: 600;
  font-style: normal;
  margin: 0;
  font-size: 18px;
  color: #c5c3c3;
  letter-spacing: 3px;
  line-height: 20px;
}

.detail-content {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.detail-images {
    flex: 60%;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.detail-images img {
    width: 100%;
    height: auto;
}

/* ==== work5 blocks layout ==== */
.detail-blocks{
  display: flex;
  flex-direction: column;
  gap: 200px;
  padding-bottom: 75px;
  margin-top: 100px;
}

.work-block{
  display: flex;
  gap: 30px;
  align-items: flex-start;
}

.work-block .block-media{
  flex: 60%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.work-block .block-media img,
.work-block .block-media video{
  width: 100%;
  height: auto;
  display: block;
}

.work-block .block-text{
  flex: 40%;
  font-family: "Raleway", sans-serif;
  font-weight: 100;
  color: #fff;
  text-align: left;
}

.work-block .block-text p {
    font-size: 12px;
    letter-spacing: 0.2em;
    margin-bottom: 10px;
    line-height: 2.1em;
}

.work-block .block-text h3 {
    color: #c5c5c5;
}


.work-block .block-text h4 {
    margin-top: 50px;
    color: #c5c5c5;
}



/* eye1/eye2 を少し小さくして中央揃え（比率は維持） */
.work-block .block-media img.detail-media--eye{
  width: clamp(260px, 75%, 640px); /* “少し小さく”の主役 */
  height: auto;
  display: block;
  margin-inline: auto;            /* 中央寄せ */
}

/* スマホは幅優先で自然に */
@media (max-width: 768px){
  .work-block .block-media img.detail-media--eye{
    width: min(100%, 88vw);
  }
}

/* モバイルは縦積み */
@media (max-width: 768px){
  .work-block{ flex-direction: column; }
  .work-block .block-media,
  .work-block .block-text{
    flex: unset;
    width: 100%;
  }
}

.detail-body {
    flex: 39%;
    font-family: "Raleway", sans-serif;
    font-weight: 100;
    font-style: normal;
    color: #fff;
    text-align: left;
    padding-left: 1%;
}

.detail-body img{
    width: 100%;
    margin-top: 20px;
}

.detail-body .IKEA img{
    width: 30%;
    margin-right: 2%;
    margin-top: 20px;
}

.detail-body h3{
    font-size: 14px;
    line-height: 1.9em;
    margin-block-start: 0;
    margin-bottom: 21px;
    color: #b8b8b8;
    letter-spacing: 0.2px;
}

.detail-body h3.award{
    color: #daa488;
    font-size: 14px;
}


.detail-body h4{
    font-size: 12px;
    line-height: 2.0em;
    margin-block-start: 0;
    font-weight: 200;
    color: #bcbcbc;
    letter-spacing: 0.1em;
    margin-top: 40px;
}

.detail-body p {
    font-size: 12px;
    letter-spacing: 0.2em;
    margin-bottom: 10px;
    line-height: 2.1em;
    color: #dbdbdb;
    font-weight: 200;
}


.work7-open .detail-header h2 {
    font-family: kepler-std, serif;
    font-weight: 800;
    font-style: normal;
    margin: 0 0 16px;
    font-size: 40px;
    color: #c5c5c5;
    line-height: 65px;
    letter-spacing: 1.1em;
}

.work7-open .detail-header h1 {
    font-family: "Raleway", sans-serif;
    font-size: 14px;
    color: #717171;
    line-height: 28px;
    letter-spacing: 0.35em;
    margin-bottom: 40px;
    font-weight: 300;
}

.work7-open .detail-header h1 span {
    font-size: 22px;
    color: #bbb;
    letter-spacing: 0.5em;
}

/* work3/4/6 の “移動したタイトル” だけに効く共通フック */
.detail-header--moved h1,
.detail-header--moved h2{
  /* ここに共通調整を入れられる */
}

/* 個別調整例（好きに増やしてOK） */
.detail-header--work3 h1{ /* 例: font-size: 32px; letter-spacing: 3px; */ }
.detail-header--work4 h1{ /* 例: color: #fff; */ }
.detail-header--work6 h1{ /* 例: margin-bottom: 8px; */ }

/* スマホだけ別にしたい場合（上に出るmobile側だけ狙える） */
@media (max-width: 768px){
  .detail-header--mobile.detail-header--work3 h1{ /* mobile work3 */ }
  .detail-header--mobile.detail-header--work4 h1{ /* mobile work4 */ }
  .detail-header--mobile.detail-header--work6 h1{ /* mobile work6 */ }
}


@media (max-width: 768px) {
    .modal-content {
        width: 85%;
        padding:25px;
    }

    .modal-content .close {
        top: 0px;
        right: 17px;
        font-size: 50px;
    }

    .detail-header h1 {
        font-size: 23px;
        margin-bottom: 0px;
        line-height: 28px;
    }

    .detail-header h2 {
        font-size: 15px;
        line-height: 29px;
    }

    .detail-content {
        flex-direction: column;
    }

    .detail-images {
        width: 100%;
    }

    .detail-body {
        width: 100%;
    }




.work7-open .detail-header h2 {
    font-size: 22px;   
    line-height: 37px;
}


.work7-open .detail-header h1 {
    font-size: 9px;
    color: #717171;
    line-height: 23px;
}

.work7-open .detail-header h1 span {
    font-size: 12px;
    color: #bbb;
}


}

.about-container {
    display: flex;
min-height: 100vh;
}

.about-image {
    flex: 40%;
    display: flex;
    justify-content: right;
    align-items: right;
    gap: 10px;
    margin-top: 300px;
}

.about-image img {
    width: 230px;   
    height: 331px;
}

.about-text {
    flex: 55%;
  font-family: "Raleway", sans-serif;
  font-weight: 100;
  font-style: normal;
    color: #fff;
    text-align: right;
    padding-left: 5%;
    padding-top: 10%;
    padding-right: 5%;
}

.about-text img{
    width: 50%;
    align-content: left;
}


.about-text h2{
    font-size: 4vw;
    margin-top: 25px;
    margin-bottom: 3%;
    color: #6d7419;
}

.about-text h2.former{
    margin-top: 25px;
    top: 110%;
    color: #6d7419;
    text-align: left;
}

.about-text h2.latter{margin-bottom: 13%;}

.about-text h3{font-size: 2.5vw;line-height: 52px;margin-block-start: 90px;text-decoration-line: line-through;}

.about-text h4{
    font-size: 14px;
    line-height: 18px;
    margin-block-start: 0;
    font-weight: 400;
}

.about-text p {
    font-size: 1.1vw;
    letter-spacing: 0.08em;
    line-height: 150%;
}

.about-text ul {
    font-size: 1.2vw;
    letter-spacing: 0.06em;
    /* margin-bottom: 10px; */
    padding-inline-start: 7px;
    /* margin-top: 8%; */
    text-align: left;
}

.about-text li {
    line-height: 30px;
}

.about-text mark{
    background-color: yellow;background-color: hsl(91.48deg 100% 50% / 23%);
    color: white; /* マーカーの色に応じてテキストの色も変更 */
}

.about-details {
    margin-top: 25%;
}

#bg-video {
    position: absolute;
    top: 135vh;
    left: 0;
    z-index: -1;
    background-size: cover;
    max-height: 70vh;
    max-width: 43vw;
}

/* work3/4/6 用：ヘッダー出し分け（デフォはPC想定） */
.detail-header--mobile{ display: none; }
.detail-header--desktop{ display: block; }

/* 右カラム内のヘッダーは少し詰める（任意） */
.detail-body .detail-header{
  margin-bottom: 18px;
}

/* スマホでは従来通り、上にタイトル。右カラム内は消す */
@media (max-width: 768px){
  .detail-header--mobile{ display: block; }
  .detail-header--desktop{ display: none; }
}

.worksbody{
min-height: 100vh;
}

hr{
    height: 110vh;
    color: #fff;
    position: absolute;
    left: 33%;
    z-index: -2;
    top: 112vh;
}

.loop-wrap {
  display: flex;
  align-items: center;
  overflow: hidden;
  height: 50px;
}
.loop-area {
  display: flex;
  animation: loop-slide 20s infinite linear 1s both;
  list-style: none;
  margin: 0;
  padding: 0;
}
.loop-area .content {
  width: 100hw;
}
@keyframes loop-slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

.marquee {

    padding: 1em 0;
    overflow: hidden;
    color: #eee;
    font-family: "Raleway", sans-serif;
    font-size: 3.5vw;
    margin-bottom: -47%;
    margin-top: 20%;
}   

.marquee-text {
  display: inline-block;
  padding-left: 100%;
  white-space: nowrap;
  animation: marquee 25s linear infinite;
}

@keyframes marquee {
  0% { transform: translate(0); }
  100% { transform: translate(-100%); }
}

.muse{
    color: #a09f9f;
    font-size: 16px;
    padding: 0px;
}


/* ===== CircleCards（安定版） ===== */

.circlecards .stage{
  position: relative;
  width: min(1800px, 92vw);
  height: 72vh;
  margin: 0 auto;
  perspective: 1100px;
  transform-style: preserve-3d;
}

.cardList{
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
transform: translateY(var(--cards-offset)); /* #works で定義した値を参照 */
}

.sampleCard{
  position: absolute;
  inset: 0;
  list-style: none;
  pointer-events: none;          /* クリックは .face 側のみ */
  --r: 560px;                    /* 半径（奥行きもこの値で決まる） */
  --rotate-deg: 0deg;            /* 未使用（JSで計算） */
}

.sampleCard .face{
  position: absolute;
  left: 50%; top: 50%;
  translate: -50% -50%;
  backface-visibility: hidden;
  pointer-events: auto;
  transform-origin: center center;
　will-change: transform;
}

/* === responsive card size === */
:root{
  --cardW: clamp(390px, 28vw, 860px); /* 240〜520pxで滑らかに可変 */
}

/* ▼スマホ専用サイズ（幅を小さくする等） */
@media (max-width: 680px){
  :root{
    --cardW: clamp(380px, 60vw, 560px); /* ←お好みに調整 */
  }
}

.sampleCard .face.front img{
  width: var(--cardW);
  aspect-ratio: 7/9;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 12px 36px rgba(0,0,0,.5);
  will-change: transform;
}

body.is-dragging{ cursor: grabbing; user-select: none; }

@media (max-width: 900px){
  .sampleCard{ --r: 400px; }
  .sampleCard .face.front img{ width: min(36vw, 360px); }
}
@media (max-width: 600px){
  .sampleCard{ --r: 340px; }
  .sampleCard .face.front img{ width: min(44vw, 260px); }
}

/* ステージ：perspectiveはそのまま（既に指定済みでOK） */
/* .circlecards .stage { position:relative; perspective:1100px; transform-style:preserve-3d; overflow:visible; } */

/* ステージ内の床（カードの背面） */
.floorStage{
  position: absolute;
  left: 50%;
  bottom: 0;                 /* ステージの下端を支点にする */
  translate: -50% 0;
  transform-origin: 50% 100%;/* 下端基準で奥へ倒す */
  pointer-events: none;
  z-index: 100;              /* ★カードより小さく（背面） */

  /* 調整ノブ */
  --tilt: 16deg;             /* 角度：84–88degで調整 */
  --w: 110%;                 /* 幅：ステージ幅の割合 */
  --h: 38vmin;               /* 奥行きの見た目の長さ */

  width: var(--w);
  height: var(--h);
  transform: rotateX(var(--tilt));

  background-image:
    linear-gradient(to top, rgba(0,0,0,.42), rgba(0,0,0,0)),
    url("images/stage.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center bottom;
  filter: brightness(.9) contrast(1.05);
}

/* カードは既に face に z-index を振っている想定。足りない場合は最低値を保証 */
.sampleCard .face.front{ position:absolute; z-index: 1000; }
/* === Side labels（親を固定＆回転させる安定版） === */
.sideLabels{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10000;
  font-family: system-ui,-apple-system,"Helvetica Neue",Helvetica,Arial,sans-serif;

  /* 調整ノブ */
  --size: 70vh;                 /* 文字列の長さ（縦70%） */
  --gutter: 1.8vw;              /* 端からの余白 */
  --weight: 200;                /* Ultra Light */
  --track: 0.22em;              /* 文字間隔 */
  --color: rgba(255,255,255,.92);
--shadow: 0 0 6px rgba(0,0,0,.35), 0 0 18px rgba(0,0,0,.25);
}

/* 親を固定＆回転（spanは回転させない） */
.sideLabels .side{
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  transform-origin: center center;
  height: var(--size);
  width: 0;                     /* 端を支点にするため0でOK */
  display: flex;
  align-items: center;
  will-change: transform;
  z-index: 10000;
}

/* 左右の位置と回転だけ親に適用 */
.sideLabels .side.left{
  left: var(--gutter);
  transform: translateY(-50%) rotate(90deg);
  transform-origin: left 50%;
--track: 6.2em;
top: 15%;
}
.sideLabels .side.right{
  right: var(--gutter);
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: right 50%;
--track: 3.2em;
top: 85%;
}

/* テキストの装飾（回転はしない） */
.sideLabels .side span{
  display: inline-block;
  white-space: nowrap;
  width: var(--size);
  text-align: center;
  color: var(--color);
  font-weight: var(--weight);
  letter-spacing: var(--track);
  text-shadow: var(--shadow);
  font-size: clamp(14px, 1.25vw, 18px);
  line-height: 1;
}



/* モーダルが開いているときはサイドラベルを隠す */
.sideLabels{ transition: opacity .2s ease; }
.modal-open .sideLabels{ opacity: 0; pointer-events: none; }

.stageLink3d{
  position: absolute;
  left: 6%;
  bottom: 8%;
  translate: 0 0;
  transform-origin: left bottom;
  /* 床の傾きを適用した上で、文字だけ反転して中和する */
  transform: rotateX(var(--tilt, 50deg)) rotateX(-60deg);

  z-index: 150;
  pointer-events: auto;

  font: 200 18px/1.2 system-ui, -apple-system, "Helvetica Neue", Arial;
  letter-spacing: .18em;
  text-decoration: none;
  color: rgba(255,255,255,.9);
  text-shadow: 0 0 10px rgba(0,0,0,.6);
  padding: .35rem .6rem;
  background: linear-gradient(to right, rgba(0,0,0,.15), rgba(0,0,0,.0));
  border-radius: 10px;
  backdrop-filter: blur(2px);
}

/* overscroll の適用先を限定：慣性は生かす */
html, body { overscroll-behavior-y: auto; }

main, #works, .about-container { overscroll-behavior-y: contain; } /* セクション境界の白を抑止 */
.modal { overscroll-behavior: none; }                                /* モーダル中は裏を完全に止める */



/* 画像のネイティブドラッグ＆選択を禁止 */
.sampleCard .face img{
  -webkit-user-drag: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* ステージ内は横スワイプ優先（縦スクロールは許可） */
.circlecards .stage{ touch-action: pan-y; }

/* === Card size (final override) === */
:root{
  --cardW: clamp(240px, 28vw, 375px);  /* PC〜タブレット */
}

@media (max-width: 680px){
  :root{
    --cardW: clamp(180px, 60vw, 260px);  /* ←スマホの幅（お好みで調整） */
  }
}

/* 変数を必ず参照させる（上書き保証） */
.sampleCard .face.front img{
  width: var(--cardW) !important;
  max-width: none !important;
}

/* ==== About Me (work7) 専用レイアウト ==== */
#work-detail-modal.work7-open .detail-content {
    display: flex;
    gap: 50px;
}

#work-detail-modal.work7-open .detail-images {
    flex: 45%;     /* ← 画像幅を小さくする（デフォルト63%） */
}

#work-detail-modal.work7-open .detail-body {
    flex: 55%;     /* ← テキストを広げる */
}

/* ======== 大画面（iMac / 4K / 5K）向け調整 ======== */
@media (min-width: 1600px) {

  /* カードサイズを拡大 */
  :root {
    --cardW: clamp(360px, 22vw, 560px);
  }

  /* About セクションの見出し・本文を少し大きく */
  .about-text h2 {
    font-size: 3vw;
  }

  .about-text h3 {
    font-size: 2vw;
  }

  .about-text p,
  .about-text ul {
    font-size: 1.2vw;
  }

  /* sideLabels（SOCIAL / ANTI-SOCIAL の縦書き）も拡大 */
  .sideLabels .side span{
    font-size: clamp(16px, 1.4vw, 26px);
  }

  /* marquee (ART DIRECTOR の横流し) を少し大きく */
  .marquee {
    font-size: 3vw;
  }
}

/*========= Lottie "SCROLL" animation position =========*/
.scroll-lottie {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: min(8vh, 90px);   /* ← 全画面で安定して "下部" に配置される */
    width: 310px;
    height: 70px;
    z-index: 15;
    pointer-events: none;
    opacity: 0.5;
    transition: opacity 0.9s ease;
}

/* 下にスクロールしたらフェードアウトする */
.scroll-lottie.hide {
    opacity: 0;
}

/* === TEMP: hide side labels === */
.sideLabels {
  display: none;
}

.detail-hero {
  width: 100%;
  margin: 20px 0 40px;
}

.detail-hero video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
}

/* ===== Scroll snap: Top (logo) <-> Works (cards) ===== */
html, body {
  height: 100%;
  scroll-snap-type: y mandatory;
  /* wheel/trackpad の snap を "ピタッ" とさせるため、ここでは smooth を使わない */
  scroll-behavior: auto;
}

.top, #works {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

#works {
  /* snap target: full viewport */
  height: 100vh;
  min-height: 100vh;

  /* 過去の「カード持ち上げ用 padding」等を無効化し、余白を作らない */
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  --cards-offset: 0px;

  /* カードを上下中央に固定 */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ===== Bottom nav (ABOUT / WORK / CONTACT) ===== */
.bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 26px;
  z-index: 1200;

  /* 左下 / 中央下 / 右下 */
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  padding: 0 28px;

  /* intro後に出すため、初期は隠す */
  opacity: 0;
  visibility: hidden;
  filter: blur(14px);
  transform: translateY(6px); /* 移動は最小限 */

  /* 「文字の下部→上にかけて」出す：まずクリップで下→上に開く */
  clip-path: inset(100% 0 0 0);

  /* あるとより上品（対応ブラウザで“下から薄く→上へ”のマスク） */
  -webkit-mask-image: linear-gradient(to top, transparent 0%, rgba(0,0,0,.35) 18%, #000 45%, #000 100%);
  -webkit-mask-size: 100% 200%;
  -webkit-mask-position: 0 100%;

  animation: none;
  will-change: opacity, filter, transform, clip-path, -webkit-mask-position;
  pointer-events: none; /* 表示完了までクリック不可 */
}

@supports (-webkit-touch-callout: none) {
  @media (max-width: 768px) {
    .bottom-nav{
      bottom: calc(26px + env(safe-area-inset-bottom));
    }
  }
}

#nav-about { justify-self: start; }
#nav-work  { justify-self: center; }
#nav-contact { justify-self: end; }

.bottom-nav__link {
  font-family: "Bebas Neue", sans-serif;
  letter-spacing: 5em;
  font-size: 10px;
  text-transform: uppercase;
  color: rgb(194 194 194 / 85%);
  text-decoration: none;
  padding: 8px 10px;
  border-radius: 999px;
  text-shadow: 0 0 6px rgb(255 255 255 / 42%), 0 0 16px rgb(255 255 255 / 32%);
}

body.assets-loaded .bottom-nav{
  animation: bottomNavReveal var(--nav-reveal-dur) var(--intro-ease) var(--nav-reveal-delay) both;
}

.bottom-nav__link:hover {
  color: rgba(255,255,255,1);
  background: rgba(0,0,0,0.28);
}


@keyframes bottomNavReveal{
  0%{
    opacity: 0;
    visibility: hidden;
    filter: blur(14px);
    transform: translateY(6px);
    clip-path: inset(100% 0 0 0);
    -webkit-mask-position: 0 100%;
    pointer-events: none;
  }
  1%{
    visibility: visible; /* delay後にアニメ開始した瞬間から可視化 */
  }
  60%{
    opacity: 1;
    filter: blur(5px);
    clip-path: inset(0 0 0 0);  /* 下→上に開き切る */
    -webkit-mask-position: 0 30%;
  }
  100%{
    opacity: 1;
    visibility: visible; /* ★これを追加 */
    filter: blur(0);
    transform: translateY(0);
    clip-path: inset(0 0 0 0);
    -webkit-mask-position: 0 0;
    pointer-events: auto;
    }
}

.modal-open .bottom-nav{
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  filter: blur(10px) !important;
}

body.is-work-section #nav-work {
  opacity: 0.35; /* dim when already in Work section */
}


@media (max-width: 768px) {
  .detail-hero {
    margin-bottom: 20px;
  }

  .detail-content {
    flex-direction: column;
  }

.bottom-nav__link{
    font-size: 9px;
    letter-spacing: 0.7em;
    padding: 0;
}

.detail-body h4 {
    color: #f0f0f0;
}

}

/* ===== Video mute/unmute toggle ===== */
.detail-hero{
  position: relative;
  width: 100%;
  margin: 0px 0 30px;
}

.video-with-toggle{
  position: relative;
}

.detail-hero video,
.video-with-toggle > video,
.detail-hero iframe{
  width: 100%;
  height: auto;
  display: block;
}

/* ===== MP4 SOUND toggle ===== */
.video-with-toggle{
  position: relative;
}

.video-with-toggle video{
  display:block;
  width:100%;
  height:auto;
}

.mute-toggle{
  position:absolute;
  right: 14px;
  bottom: 14px;
  z-index: 5;

  font-family: "Raleway", sans-serif;
  font-weight: 300;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;

  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 999px;
  padding: 8px 10px;

  color: rgba(255,255,255,.75);
  opacity: var(--soundOpacity, .75);

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

  cursor: pointer;
  transition: opacity .25s ease, transform .25s ease;
}

.mute-toggle:hover{
  opacity: 1;
}

/* ★ hoverできる端末だけ「以降はhoverでだけ見える」 */
@media (hover:hover){
  .video-with-toggle.sound-hover-only .mute-toggle{
    opacity: 0;
    pointer-events: none;
    transform: translateY(6px);
  }
  .video-with-toggle.sound-hover-only:hover .mute-toggle{
    opacity: var(--soundOpacity, .75);
    pointer-events: auto;
    transform: translateY(0);
  }
}