@charset "utf-8";
/* ============================================================
   ポートフォリオサイト
   参考サイト unshift.jp の作法（四隅固定・中央1点・作品の色を
   全体に流す）を、静的HTML＋素のJSで組んだもの。
   色や書体はこのファイルの :root だけを直せば全部入れ替わる。
   ============================================================ */

:root{
  /* 地と文字 — 黒を既定にする。
     ------------------------------------------------------------
     黄金が映えるのは黒地なので、既定を黒にした。
     既定値を白のままにして JS でクラスを付けて黒くすると、
     JS が動くまでの一瞬だけ白い画面が出る。その一瞬で世界観が壊れるので、
     既定値そのものを黒にして、明るいテーマだけをクラスで上書きする */
  --bg:#0d0d0d;
  --ink:#f2f2f2;
  /* 演出の上に文字を置くための霞。テーマごとに向きが逆になる */
  --scrim:rgba(13,13,13,.88);
  --scrim0:rgba(13,13,13,0);
  --ink-2:rgba(242,242,242,.58);
  --ink-3:rgba(242,242,242,.30);
  --line:rgba(242,242,242,.18);
  --panel:#161616;
  --veil:rgba(13,13,13,.90);

  /* アクセント。既定は金。作品ページでは JS が作品ごとの色に差し替える */
  --work:#D9AE4F;
  --work-ink:#0d0d0d;

  /* 城の金。--gold-hi は光の当たったところ（屋根や旗）に使う */
  --gold:#D9AE4F;
  --gold-hi:#F0D48A;

  /* 四大元素。創造の魔法陣が起動するあいだだけ、陣ごとにこの色が灯る。
     ------------------------------------------------------------
     黒地に加算合成で置くので、彩度は高く・明度はやや抑えめにする。
     明度を上げると加算で白へ飛び、4色の区別が消える。
     発動したあとは全部が金へ寄っていき、宮殿は黄金一色になる */
  --elem-fire:#E2603A;    /* 火 */
  --elem-water:#3F8FD6;   /* 水 */
  --elem-wind:#5FC5A8;    /* 風 */
  --elem-earth:#C9A24A;   /* 地 */

  --font-en:"Helvetica Neue",Arial,"Hiragino Sans","Noto Sans JP",sans-serif;
  --font-jp:"Hiragino Sans","Noto Sans JP","Yu Gothic UI",Meiryo,system-ui,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;

  --edge:38px;
  --u:8px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
/* 明るいテーマ。設定で選んだときだけ効く。
   白地に明るい金を置くと飛んで見えなくなるので、金は沈んだ色に替える */
.is-light{
  --bg:#ffffff;
  --ink:#111111;
  --ink-2:rgba(17,17,17,.58);
  --ink-3:rgba(17,17,17,.30);
  --line:rgba(17,17,17,.16);
  --panel:#ffffff;
  --veil:rgba(255,255,255,.90);
  /* 明るいテーマでは霞も白側へ。黒のままだと文字のうしろだけ黒い雲が出る */
  --scrim:rgba(255,255,255,.90);
  --scrim0:rgba(255,255,255,0);
  --work:#9C7A2E;
  --work-ink:#ffffff;
  --gold:#9C7A2E;
  --gold-hi:#C9A244;
  /* 明るいテーマは通常の重ねなので、白地に負けないよう濃い側へ寄せる */
  --elem-fire:#B23F1E;
  --elem-water:#25639E;
  --elem-wind:#2E8B72;
  --elem-earth:#8C6C22;
}

*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%;}
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--font-jp);
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}
button{margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer;-webkit-appearance:none;appearance:none;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,p{margin:0;font-weight:400;}
[hidden]{display:none !important;}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;}

/* ---- 土台 -------------------------------------------------- */
.stage{position:fixed;inset:0;overflow:hidden;}
#patternCanvas,#viewerCanvas{position:absolute;inset:0;width:100%;height:100%;display:block;}
#patternCanvas{z-index:0;}
#viewerCanvas{z-index:1;}
/* 魔法陣と、そこから生まれる成果物の板。背景とリード文の間。
   大きさは JS が入れる（全画面にしない）。クリックは下の要素に通す。
   2枚は同じ場所に重ね、進行に合わせて片方だけを出す（app.js） */
#sigilCanvas,#forgeCanvas{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  display:block; z-index:1; pointer-events:none;
}
/* 出番でないほうは隠す（描画は app.js が止める）。
   display:none にすると canvas の大きさが取れなくなるので visibility にする */
#sigilCanvas.is-off,#forgeCanvas.is-off{visibility:hidden;}

/* 宮殿（WebGL版）は画面いっぱいに描く。
   中央の正方形に収めると宮殿が小さくなり、粒子の雲も画面内で切れて
   「端から湧いてくる」感じが出ない。全面にすると雲が画面外へ抜ける。
   canvas 2D 版（低スペック向けの控え）はこのクラスを付けないので、
   これまでどおり中央の正方形のまま */
#forgeCanvas.is-full{
  top:0; left:0; transform:none; width:100%; height:100%;
}
.chrome{position:absolute;inset:0;z-index:5;pointer-events:none;}
.chrome > *{pointer-events:auto;}

/* ---- ロゴ -------------------------------------------------- */
.logo{
  position:absolute; top:var(--edge); left:var(--edge);
  display:flex; align-items:baseline; gap:.34em;
  font-family:var(--font-en); font-size:34px; font-weight:700;
  letter-spacing:.10em; line-height:1;
  border-bottom:3px solid currentColor; padding-bottom:6px;
}
.logo__mark{
  display:inline-block; width:.52em; height:.52em;
  border:3px solid currentColor;
}

/* ---- ナビ -------------------------------------------------- */
.nav{
  position:absolute; top:var(--edge); right:var(--edge);
  display:flex; align-items:center; gap:34px;
}
.nav__link{
  font-size:16px; letter-spacing:.16em; padding-bottom:3px; white-space:nowrap;
  border-bottom:2px solid transparent;
  transition:border-color .3s var(--ease);
}
.nav__link:hover{border-bottom-color:var(--ink-3);}
.nav__link.is-current{border-bottom-color:currentColor;}
.btnSquare{
  width:52px; height:52px; border:2px solid currentColor;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  transition:background-color .25s var(--ease), color .25s var(--ease);
}
.btnSquare:hover{background:var(--ink); color:var(--bg);}
.btnSquare svg{width:19px;height:19px;fill:currentColor;}
.btnSquare span{font-size:9px;letter-spacing:.06em;line-height:1;}

/* ---- 区分タブ ---------------------------------------------- */
.tabs{
  position:absolute; top:var(--edge); left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:26px;
}
.tab{
  position:relative;
  display:flex; align-items:baseline; gap:8px;
  font-size:13px; letter-spacing:.14em; color:var(--ink-3);
  padding-bottom:4px; border-bottom:2px solid transparent;
  transition:color .25s var(--ease), border-color .25s var(--ease);
  white-space:nowrap;
}
/* 見た目は変えずにタップ領域だけ広げる（指で押せる大きさにする） */
.tab::after{content:"";position:absolute;left:-10px;right:-10px;top:-13px;bottom:-13px;}
.tab:hover{color:var(--ink-2);}
.tab.is-on{color:var(--ink); border-bottom-color:var(--work);}
.tab__n{font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;color:var(--ink-3);}

/* ---- 作品ラベル -------------------------------------------- */
/* 作品名は旗の写真の上に焼き込むようになった（assets/js/artwork.js の
   drawName）。別枠の札は画面から消すが、読み上げのため DOM には残す。
   JS が毎フレーム transform と opacity を書くので要素自体は消さない */
.workLabel{
  position:fixed; left:0; top:0;
  width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
  pointer-events:none;
}
.workLabel__main{
  display:inline-block;
  background:var(--work); color:var(--work-ink);
  font-family:var(--font-en); font-weight:700; font-style:italic;
  font-size:30px; letter-spacing:.01em; line-height:1;
  padding:9px 16px 11px;
  white-space:nowrap;
}
.workLabel__sub{
  display:inline-block; margin-top:3px;
  background:var(--work); color:var(--work-ink);
  font-family:var(--font-jp); font-size:12px; letter-spacing:.04em; line-height:1;
  padding:6px 12px 7px;
  white-space:nowrap;
}
.workLabel__row{display:block;}

/* ---- ページ送り -------------------------------------------- */
.pager{
  position:absolute; left:50%; bottom:calc(var(--edge) - 10px); transform:translateX(-50%);
  display:flex; align-items:center; gap:14px;
  font-family:var(--font-mono); font-size:15px; letter-spacing:.16em;
  color:var(--ink-2);
}
.pager__btn{
  width:26px; height:26px; display:grid; place-items:center;
  color:var(--ink-3); transition:color .25s var(--ease);
}
.pager__btn:hover{color:var(--ink);}
.pager__btn svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:9;}
.pager__btn--prev svg{transform:rotate(180deg);}
.pager__num{display:flex;color:var(--ink);}
.pager__total{display:flex;color:var(--ink-3);}
.pager__sep{color:var(--ink-3);}
.digit{height:1em;line-height:1;overflow:hidden;}
.digit__inner{
  display:block;
  transform:translateY(calc(var(--i,1) * -1em));
  transition:transform .5s var(--ease);
}
.digit__inner > span{display:block;height:1em;line-height:1;}

/* ---- 操作ヒント -------------------------------------------- */
.hints{
  position:absolute; left:var(--edge); bottom:var(--edge);
  display:flex; flex-direction:column; gap:13px;
  color:var(--ink-3);
}
.hint{display:flex;align-items:center;gap:9px;font-family:var(--font-mono);font-size:10px;letter-spacing:.13em;}
.hint svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:4;}
.hint small{display:block;font-size:9px;opacity:.8;letter-spacing:.08em;}
@media (hover:none){ .hint--key,.hint--scroll{display:none;} }
@media (hover:hover){ .hint--swipe{display:none;} }

/* ---- カーソル追従 ------------------------------------------ */
.cursor{
  position:fixed; left:0; top:0; z-index:40;
  display:flex; flex-direction:column; align-items:center; gap:7px;
  opacity:0; transition:opacity .28s var(--ease);
  pointer-events:none; will-change:transform;
}
.cursor__mark{
  width:15px; height:15px; border:2px solid var(--work);
  transform:rotate(45deg);
}
.cursor__label{font-family:var(--font-jp);font-size:10px;letter-spacing:.12em;color:var(--work);white-space:nowrap;}
@media (hover:none){ .cursor{display:none;} }

/* ---- 設定パネル -------------------------------------------- */
.settings{position:fixed;inset:0;z-index:50;display:none;}
.settings.is-open{display:block;}
.settings__veil{position:absolute;inset:0;background:var(--veil);backdrop-filter:blur(7px);}
.settings__box{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(520px, calc(100vw - 32px));
  max-height:calc(100vh - 64px); overflow-y:auto;
  background:var(--panel); border:2px solid var(--ink);
}
.settings__head{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 20px; border-bottom:2px solid var(--ink);
}
.settings__title{font-family:var(--font-mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;}
.settings__close{width:30px;height:30px;position:relative;}
.settings__close::before,.settings__close::after{
  content:"";position:absolute;left:50%;top:50%;width:17px;height:2px;background:currentColor;
}
.settings__close::before{transform:translate(-50%,-50%) rotate(45deg);}
.settings__close::after{transform:translate(-50%,-50%) rotate(-45deg);}
.settings__body{padding:6px 20px 22px;}
.field{padding:18px 0;border-bottom:1px solid var(--line);}
.field:last-child{border-bottom:0;}
.field__name{font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);margin-bottom:10px;}
.field__note{margin-top:9px;font-size:11px;line-height:1.7;color:var(--ink-3);}
.seg{position:relative;display:flex;gap:8px;}
.seg__mark{position:absolute;top:0;left:0;height:100%;border:2px solid var(--ink);pointer-events:none;transition:transform .35s var(--ease),width .35s var(--ease);}
.seg__item{border:1px solid var(--line);padding:11px 6px;color:var(--ink-2);transition:color .25s var(--ease);}
.seg__item:hover,.seg__item.is-on{color:var(--ink);}
.seg__label{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;}

/* ---- 詳細（モーダル） --------------------------------------- */
.detail{position:fixed;inset:0;z-index:45;display:none;}
.detail.is-open{display:block;}
.detail__veil{position:absolute;inset:0;background:var(--veil);backdrop-filter:blur(7px);}
.detail__box{
  position:absolute; inset:0; display:grid; place-items:center; padding:var(--edge);
}
.detail__inner{
  width:min(720px,100%); max-height:100%; overflow-y:auto;
  background:var(--panel); border:2px solid var(--ink); padding:28px;
}
.detail__back{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;color:var(--ink-2);
  margin-bottom:18px; display:inline-block;
}
.detail__back:hover{color:var(--ink);}
.detail__title{
  display:inline-block;background:var(--work);color:var(--work-ink);
  font-family:var(--font-en);font-weight:700;font-style:italic;font-size:26px;
  padding:8px 14px 10px;line-height:1;
}
.detail__sub{margin-top:10px;font-size:14px;color:var(--ink-2);}
.detail__rows{margin-top:22px;border-top:1px solid var(--line);}
.detail__row{display:flex;gap:16px;padding:11px 0;border-bottom:1px solid var(--line);font-size:13px;}
.detail__rowKey{width:6.5em;flex:none;color:var(--ink-3);font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding-top:3px;}
.detail__tags{display:flex;flex-wrap:wrap;gap:6px;}
.detail__tag{border:1px solid var(--work);color:var(--work);border-radius:999px;padding:3px 11px;font-size:11px;}
.detail__notice{
  margin-top:20px;padding:13px 15px;border:1px solid var(--line);
  background:color-mix(in srgb, var(--work) 7%, transparent);
  font-size:12.5px;line-height:1.7;color:var(--ink-2);
}
.detail__link{
  display:inline-block;margin-top:18px;border:2px solid var(--ink);
  padding:11px 20px;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;
  transition:background-color .25s var(--ease),color .25s var(--ease);
}
.detail__link:hover{background:var(--ink);color:var(--bg);}
/* 個別の詳細ページへ。実物へのリンクと並ぶので、こちらは控えめな枠にする
   （主役は「サイトにアクセス」のほう）*/
.detail__link--page{border-color:var(--line);margin-right:10px;}
.detail__link--page:hover{background:var(--ink);border-color:var(--ink);}

/* ---- トップページ ------------------------------------------ */
.lead{
  /* 画面の主役は中央の演出。**文字は上下の端に寄せて、中央を空ける。**
     上に見出し、下にボタン1つだけ */
  position:absolute;inset:0;z-index:2;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  padding:calc(var(--edge) + 74px) var(--edge) calc(var(--edge) + 10px);
  text-align:center;
}
.lead > *{pointer-events:auto;}
.lead__ttl{margin:0;font-weight:400;}
/* 英語を大きく。演出の上に乗るので、影で必ず浮かせる */
.lead__en{
  display:block;font-family:var(--font-en);
  font-size:clamp(20px,3.2vw,38px);line-height:1.4;font-weight:700;letter-spacing:.04em;
  color:var(--ink);
  text-shadow:0 1px 4px var(--scrim),0 2px 22px var(--scrim),0 0 40px var(--scrim);
}
/* 日本語はルビのように小さく添える */
.lead__jp{
  display:block;margin-top:10px;font-size:clamp(11.5px,1.4vw,14px);line-height:1.7;
  letter-spacing:.12em;color:var(--ink);opacity:.92;
  text-shadow:0 1px 3px var(--scrim),0 1px 10px var(--scrim),0 2px 26px var(--scrim);
}
/* ボタンは画面下の中央。地を敷かないと陣が突き抜けて見える */
.lead__btn{
  display:inline-block;border:2px solid var(--ink);padding:15px 34px;
  font-size:14px;letter-spacing:.08em;font-weight:700;
  position:relative;overflow:hidden;background:var(--scrim);
}
.lead__btn span{position:relative;transition:color .4s var(--ease);}
.lead__btn::before{content:"";position:absolute;inset:0;background:var(--ink);transform:scaleX(0);transform-origin:0 50%;transition:transform .4s var(--ease);}
.lead__btn:hover::before{transform:scaleX(1);}
.lead__btn:hover span{color:var(--bg);}
.lead__btn--go{background:var(--gold);border-color:var(--gold);color:var(--bg);}
.lead__btn--go::before{background:var(--ink);}
.lead__btn--go:hover span{color:var(--bg);}
/* 陣が中心へ収束するあいだ、文字も一緒に引く */
.is-leaving .lead{opacity:0;transform:scale(.96);transition:opacity .38s var(--ease),transform .5s var(--ease);}

/* ---- 画面が狭いとき ---------------------------------------- */
/* ロゴとナビに挟まれて窮屈になる幅から、タブを次の行へ落とす。
   上端は「ナビの下端 + 余白」。ナビは --edge + ボタン高なので、それより下に置く */
@media (max-width:1000px){
  .tabs{ top:calc(var(--edge) + 62px); left:var(--edge); transform:none; gap:24px; }
}
@media (max-width:820px){
  :root{--edge:18px;}
  /* 日本語の一行を、見出しの直下から**ボタンの真上**へ移す。
     ------------------------------------------------------------
     狭い画面では中央に城の演出が来るので、見出しの下に置くと
     絵の明るい部分と重なって読めない（実測: 375px幅で y=190〜210 が城に乗る）。
     下端のボタンの上へ寄せると、地の暗い帯に乗るので読める。

     **h1 の中から出していない。** DOM はそのままなので、
     見出しとしての意味づけも、検索や読み上げでの読まれ方も変えていない。
     変えたのは見た目の位置だけ。

     位置の基準は下端。内訳は
       ボタンの下余白 calc(var(--edge) + 10px) … .lead の padding-bottom と同じ
       ボタンの高さ   var(--leadBtnH)
       ボタンとの間隔 14px
     --leadBtnH はボタンの実測高さ（上下 padding 15px + 枠 2px + 行の高さ）。
     **ボタンの padding や文字サイズを変えたら、この値も直す。** */
  .lead{--leadBtnH:54px;}
  .lead__jp{
    letter-spacing:.06em;
    position:absolute;left:var(--edge);right:var(--edge);
    bottom:calc(var(--edge) + 10px + var(--leadBtnH) + 14px);
    margin-top:0;
  }
  .tabs{ top:calc(var(--edge) + 52px); gap:24px; }
  .tab{font-size:12px;letter-spacing:.06em;padding-bottom:3px;}
  /* 430px 幅ではロゴとナビが重なっていた。両方を詰めて隙間をつくる */
  .logo{font-size:20px;letter-spacing:.14em;border-bottom-width:2px;}
  .nav{gap:14px;}
  .nav__link{font-size:12px;letter-spacing:.06em;}
  .btnSquare{width:42px;height:42px;}
  .workLabel__main{font-size:20px;padding:7px 12px 9px;}
  .hints{bottom:calc(var(--edge) + 34px);}
}
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important;animation-duration:.01ms !important;}
}


/* ---- 狭い画面のロゴとナビ ----------------------------------
   ロゴを左、ナビを右に置いたままだと、**390px幅で57px重なる**（実測）。
   横一列に収まらないので2段に分ける:
     1段目 … 左にロゴ、右に設定ボタン
     2段目 … トップ／作品／について／お問い合わせ を中央に

   設定ボタンは HTML 上は nav の中にあるが、
   1段目の右端へ出したいので、ここだけ画面に対して位置を決める */
@media (max-width:520px){
  .logo{
    left:var(--edge); transform:none;
    font-size:19px; letter-spacing:.12em; padding-bottom:4px; border-bottom-width:2px;
  }
  /* **transform を使わずに中央へ寄せる。**
     変形した先祖があると、中の position:fixed がその枠の中に閉じ込められ、
     設定ボタンが1段目へ出られない（実際そうなった）*/
  .nav{
    top:calc(var(--edge) + 46px); left:0; right:0; transform:none;
    justify-content:center; gap:16px;
  }
  .nav__link{font-size:12px; letter-spacing:.04em;}
  /* 作品の区分タブを3段目へ落とす。
     ------------------------------------------------------------
     この幅からナビが2段目（top: --edge + 46px、高さ22px）に来るので、
     820px 以下の指定のまま（--edge + 52px）だとタブがナビに食い込む。
     **実測で16px重なっていた**（ナビ 64〜86、タブ 70〜92）。
     ナビの下端は --edge + 68px。そこから12px空けて置く。 */
  .tabs{top:calc(var(--edge) + 80px);}
  .btnSquare{
    position:fixed; top:var(--edge); right:var(--edge); z-index:6;
    width:36px; height:36px;
  }
  .btnSquare svg{width:16px;height:16px;}
  .btnSquare span{font-size:8px;}
  .lead{padding-top:calc(var(--edge) + 106px);}
}