/* =============================================================
   THE SCENT OF REALITY  共通スタイル
   対象ページ: index.html / works.html / contact.html
   （visualization-*.html は各ファイル内の <style> を使うため対象外）

   構成:
     1. ベース（リセット・body・リンク）
     2. レスポンシブ表示切替（.pc / .sp）
     3. ヘッダー（タイトル＋ハンバーガー）
     4. ハンバーガーアイコン
     5. スライドメニュー（黒半透明オーバーレイ .sp_menu）
     6. メイン画像
     7. フッター
     8. モバイル調整（@media max-width:750px）
   ============================================================= */


/* ---------- 1. ベース ---------- */

/* padding/border を width に含めて計算崩れを防ぐ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  /* スマホブラウザが本文の文字を勝手に拡大する（フォントブースト）のを無効化。
     これを入れないとフッターやタイトルが約2倍に膨らんで表示される。 */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* 横はみ出しの抑止は body だけでなく html にも指定する。
     モバイル(iOS Safari / Android Chrome)は html 側で横スクロール判定をすることがあり、
     body だけだと画面外スライドメニュー等のわずかなはみ出しで
     「左上が少しズームした状態」になってしまう。 */
  overflow-x: hidden;
}

body {
  margin: 0;
  width: 100%;
  /* 以前あった min-width:1920px を削除。
     これがデバイス幅を無視して横スクロール／スマホのズーム表示を
     引き起こしていた主原因。width=device-width に正しく追従させる。 */
  color: #89c7de;
  font-family: "Arial Black", Impact, sans-serif;
  text-align: center;
  /* スライドメニューを画面外に隠す際の意図しない横スクロールを抑止 */
  overflow-x: hidden;
}

a {
  display: block;
  padding: 10px;
  color: #ffffff;
  text-decoration: none;
}

a:hover {
  background: #ffffff;
  color: rgb(0, 0, 0);
  opacity: 0.7;
  mix-blend-mode: screen;
}


/* ---------- 2. レスポンシブ表示切替 ---------- */
/* .pc = PC用要素 / .sp = スマホ用要素。幅で出し分ける。
   単一定義どうしの切替なので !important は不要。 */

.pc {
  display: block;
}

.sp {
  display: none;
}


/* ---------- 3. ヘッダー ---------- */
/* ハンバーガーとタイトルを横並びにし、画像に重ねて中央寄せ表示する。
   margin-bottom の負値で直後のメイン画像にタイトルを重ねている（既存の見た目を踏襲）。 */

header {
  position: relative;
  top: 10px;
  margin-bottom: -200px;
  /* z-index は付けない。付けるとヘッダーが独立したスタッキングコンテキストになり、
     中のハンバーガー(×)をオーバーレイより前面に出せず、開いたメニューの上から
     閉じられなくなる。position:relative だけでメイン画像の上には正しく載る。 */

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: xxx-large;
  font-weight: bold;
  line-height: 75px;
}

/* トップページのタイトルだけ遅延フェードインさせる。
   重要: animation は header ではなく中の h1 に当てる。
   header に opacity アニメを当てると、その間 header がスタッキングコンテキストになり、
   中のハンバーガー(×)を z-index でオーバーレイより前面に出せず＝メニューを閉じられなくなる。
   h1 だけをフェードさせれば header は素のままで、× が常に最前面に保てる。 */
header.index_Header h1 {
  opacity: 0;
  animation: fadein-anim 3.8s linear 1.2s forwards;
}

/* works / contact はフェードなしで最初から表示 */
header.contact_Header {
  opacity: 1;
}

@keyframes fadein-anim {
  100% {
    opacity: 1;
  }
}


/* ---------- 4. ハンバーガーアイコン ---------- */
/* 3本線。.active 付与（JSでトグル）で×印に変形する。 */

.menu_move_ham {
  width: fit-content;
  margin: 2.5rem 1rem 3rem 1.5rem;
  cursor: pointer;
  /* オーバーレイ(z-index:3)より前面に置き、メニューを開いた状態でも
     ×をタップして閉じられるようにする。 */
  position: relative;
  z-index: 4;
}

.menuline {
  display: block;
  width: 50px;
  height: 2px;
  margin-top: 15px;
  border-bottom: solid 2px black;
  transition: .5s;
}

.menuline1 {
  transform-origin: left bottom;
}

.menuline1.active {
  transform: rotate(45deg) translateX(2px);
}

.menuline2.active {
  transform: translateX(-50px);
  opacity: 0;
}

.menuline3 {
  transform-origin: left top;
}

.menuline3.active {
  transform: rotate(-45deg);
}


/* ---------- 5. スライドメニュー（黒半透明オーバーレイ） ---------- */
/* 左から滑り込む全画面オーバーレイ。
   - position:fixed + inset:0（top/right/bottom/left = 0）だけで
     スクロール位置・画面サイズに関係なく常にビューポート全体を覆う。
     fixed では top:0/bottom:0 が高さを、left:0/right:0 が幅を決めるため、
     固定の width/height（旧 height:1120px 等）は不要＝撤廃。
   - 隠す位置は translateX(-100%)。自分の幅基準なので 4K でも確実に画面外へ。
     （以前の translateX(-1920px) 決め打ちを撤廃） */

.sp_menu {
  position: fixed;
  inset: 0;
  /* オーバーレイをタイトル・フッターより前面に出し、メニュー項目を確実にタップ可能にする。
     タイトル文字が項目の上に重なってタップを奪う問題を防ぐ。
     ×(ハンバーガー)だけは z-index:4 でさらに前面に残し、閉じる操作を可能にしている。 */
  z-index: 3;

  background-color: rgba(0, 0, 0, .5);
  color: white;

  display: grid;
  align-content: center;
  text-align: center;
  line-height: 10px;

  transform: translateX(-100%);
  /* 非表示時は visibility:hidden で描画・タップ・レイアウト計算から外す。
     スライドアウト演出は残したいので visibility は transform 完了後(0.5s後)に切り替える。
     これで画面外オーバーレイがモバイルの横幅計算に影響せず、わずかなズームを防げる。 */
  visibility: hidden;
  transition: transform .5s, visibility 0s linear .5s;
}

.sp_menu.active {
  transform: translateX(0);
  /* 開く時は即座に表示してからスライドイン */
  visibility: visible;
  transition: transform .5s, visibility 0s linear 0s;
}

.sp_menu ul {
  padding-inline: 0;
}

.sp_menu li {
  list-style: none;
  margin-top: 1.5rem;
  cursor: pointer;
}


/* ---------- 6. メイン画像 ---------- */

img.pc,
img.sp {
  width: 100%;
  height: auto;
  border-style: none;
}

/* contact ページの Instagram アイコン（中央に小さく配置） */
img.contact {
  width: 10%;
  height: auto;
  margin-top: 22%;
  border-style: none;
}


/* ---------- 7. フッター ---------- */
/* 画面下に固定。.push は固定フッターに隠れない余白確保用。 */

footer {
  position: fixed;
  bottom: 0;
  z-index: 2;

  width: 100%;
  height: 100px;
  padding: 0;
  margin-bottom: -30px;

  background-color: #89c7de;
  color: #fff;
  line-height: 37.5px;
}

.push {
  height: 65px; /* 値を上げると本文が下がる（固定フッター用の余白） */
}


/* ---------- 8. モバイル調整（max-width: 750px） ---------- */
/* スマホでは .pc / .sp の表示を反転。差分のみ記述（重複定義は撤廃）。 */

@media screen and (max-width: 750px) {
  .pc {
    display: none;
  }

  .sp {
    display: block;
  }

  /* スマホでは画面幅が狭いのでタイトルを縮小し、はみ出し（横スクロール）を防ぐ。
     clamp で端末幅に応じて 20〜28px の範囲で可変。
     多行に折り返るため line-height は詰める（編集前の見た目に近づける）。 */
  header {
    margin-bottom: -275px;
    font-size: clamp(1.25rem, 6.5vw, 1.75rem);
    line-height: 1.15;
  }

  /* フッターの著作権表示はスマホでは小さめにして折り返しを抑える */
  footer {
    font-size: 0.75rem;
  }

  /* WORKS: スマホではタイトルと1枚目の画像が重ならないよう、画像の上に少しだけ余白を確保する。
     ヘッダーの margin-bottom:-275px による引き上げをほぼ打ち消しつつ、余白は控えめ（タイトル下〜画像で約15px）。
     （main.works は works.html だけに付与。index の img.sp ヒーロー表示には影響しない） */
  main.works {
    margin-top: 150px;
  }

  /* CONTACT: Instagram アイコンをスマホでは画面の上下左右中央に固定配置する。
     position:fixed + inset:0 + margin:auto でヘッダー/フッターのレイアウトに影響されず確実に中央寄せ。
     （img.contact は contact.html だけに存在するので main クラス不要） */
  img.contact {
    position: fixed;
    inset: 0;
    margin: auto;
    width: 30%;
    height: auto;
  }

  /* CONTACT: アイコンを fixed にすると main が空になり body 高さがつぶれ、
     body の overflow(overflow-x:hidden により overflow-y:auto化) で
     ヘッダー(タイトル・×)がクリップされて消える。main に高さを与えて body を確保し、
     ヘッダーを必ず表示させる（main 自体は透明で、中央のアイコン位置には影響しない）。 */
  main.contact {
    min-height: 100dvh;
  }
}