/* File: assets/css/base.css */
@charset "UTF-8";

/* ==========================================================================
   0. RESET & VARIABLES (Brutalist Corporate)
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

:root {
  --header-height: 72px;
  --container-width: 1080px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* Colors: 徹底した白黒と、1%のネイビー */
  --c-black: #111111;
  --c-dark: #333333;
  --c-gray: #767676;
  --c-light: #f5f5f5;
  --c-white: #ffffff;
  --c-border: #e0e0e0;
  --c-accent: #2b9bc8; /* 水色アクセント（5ページHP・共通UI） */
  --c-danger: #d32f2f;

  /* プラン別アクセントカラー */
  --c-mini: #9b7a00;
  --c-mini-light:  rgba(200, 165, 30, 0.08);
  --c-mini-mid:    rgba(200, 165, 30, 0.25);
  --c-mini-border: rgba(200, 165, 30, 0.45);
  --c-mini-accent: rgba(185, 150, 10, 0.90);

  --c-lp: #1a9b6a;
  --c-lp-light:  rgba(50, 185, 120, 0.08);
  --c-lp-mid:    rgba(50, 185, 120, 0.25);
  --c-lp-border: rgba(50, 185, 120, 0.45);
  --c-lp-accent: rgba(30, 160, 100, 0.90);

  --c-hp: #b03030;
  --c-hp-light:  rgba(180, 50, 50, 0.08);
  --c-hp-mid:    rgba(180, 50, 50, 0.22);
  --c-hp-border: rgba(180, 50, 50, 0.42);
  --c-hp-accent: rgba(160, 35, 35, 0.88);

  --c-support: #8b6fc8;
  --c-support-light:  rgba(155, 120, 210, 0.08);
  --c-support-mid:    rgba(155, 120, 210, 0.22);
  --c-support-border: rgba(155, 120, 210, 0.40);
  --c-support-accent: rgba(130, 95, 200, 0.88);

  /* フォントシステム */
  --font-base: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Noto Serif JP", serif;
  --font-mono: "Space Mono", monospace;
  --font-display: "Plus Jakarta Sans", "Noto Sans JP", sans-serif;
}

/* ==============================================
   1. BASE STYLES
============================================== */

html {
  font-size: 16px;
  scroll-behavior: smooth;
  height: 100%;
  /* 最背面レイヤー：大理石の質感と固定グラデーション */
  background-color: #ffffff;
  background-image: 
    url("data:image/svg+xml,%3Csvg viewBox='0 0 500 500' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='marble'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.004' numOctaves='4' result='noise'/%3E%3CfeColorMatrix type='matrix' values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 4 -1.8' in='noise' result='colormatrix'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23marble)' opacity='0.07'/%3E%3C/svg%3E"),
    linear-gradient(135deg, #ffffff 0%, rgba(15, 44, 89, 0.05) 100%);
  background-attachment: fixed;
  background-size: 100vw 100vh, 100% 100%;
}

/* iOS Safari は background-attachment:fixed を正しく処理しないため無効化 */
@supports (-webkit-touch-callout: none) {
  html { background-attachment: scroll; }
}

body {
  margin: 0;
  background: #f4f8fc;
  color: var(--c-dark);
  font-family: var(--font-base);
  line-height: 1.8;
  letter-spacing: 0.04em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
  z-index: 0; /* ガラス板の基準レイヤー */
  min-height: 100%;
}

/* ==============================================
   テキスト保護の絶対的ルール (Absolute Z-Index Protection)
============================================== */
/* 背景が絶対にテキストへ干渉しないよう、コンテンツ全体を上位レイヤーに強制固定する */
main,footer, .container, .hero-section { 
  position: relative; 
  z-index: 10 !important; /* 背景（マイナス値）と圧倒的な差をつけ、いかなる場合も前面に配置 */
}

/* ==============================================
   疑似リサージュ・極細ガラス軌道 (Lissajous Harmonic Glass Lines)
============================================== */

/* 共通スタイル：ガラスの質感定義（極めて軽量） */
body::before, body::after, main::before, main::after {
  content: "";
  position: fixed; /* スクロール追従 */
  /* 中央付近にアンカーを置き、そこを基準に回転・移動させる */
  top: 50%; left: 50%;
  
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.1) 100%);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 10px 20px rgba(15, 44, 89, 0.05);
  pointer-events: none;
  will-change: transform;
}

/* ガラス1：主軸となる大きなサインカーブ */
body::before {
  width: 160vw;
  height: 2.5vh; /* ガラス感を残す限界の細さ */
  border-radius: 50% 50% 50% 50% / 80% 20% 80% 20%; /* わずかなS字カーブ */
  z-index: -5;
  /* 素数秒（23秒）で調和運動 */
  animation: lissa-1 23s infinite alternate ease-in-out;
}

/* ガラス2：逆位相で交差するコサインカーブ */
body::after {
  width: 150vw;
  height: 2vh;
  border-radius: 50% 50% 50% 50% / 20% 80% 20% 80%;
  z-index: -4;
  /* 素数秒（29秒）で調和運動 */
  animation: lissa-2 29s infinite alternate-reverse ease-in-out;
}

/* ガラス3：鋭角に切り込む極細の軌道 */
main::before {
  width: 140vw;
  height: 1.5vh; /* 最も細い線 */
  border-radius: 50% 50% 50% 50% / 70% 30% 70% 30%;
  z-index: -3;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.2) 100%);
  /* 素数秒（31秒）で調和運動 */
  animation: lissa-3 31s infinite alternate ease-in-out;
}

/* ガラス4：奥行きを作る遠景の軌道 */
main::after {
  width: 130vw;
  height: 2vh;
  border-radius: 50% 50% 50% 50% / 30% 70% 30% 70%;
  z-index: -6; /* 最奥 */
  opacity: 0.5;
  /* 素数秒（37秒）で調和運動 */
  animation: lissa-4 37s infinite alternate-reverse ease-in-out;
}

/* リサージュ軌道アニメーション
  異なる周期のXY移動と回転を組み合わせることで、
  中心付近で永遠に繰り返さない複雑な交差（数学的曲線）を生み出す
*/
@keyframes lissa-1 {
  0% { transform: translate(-40%, -60%) rotate(-35deg) skewX(10deg); }
  100% { transform: translate(-60%, -40%) rotate(15deg) skewX(-5deg); }
}
@keyframes lissa-2 {
  0% { transform: translate(-60%, -50%) rotate(45deg) skewX(-15deg); }
  100% { transform: translate(-40%, -50%) rotate(-10deg) skewX(10deg); }
}
@keyframes lissa-3 {
  0% { transform: translate(-50%, -40%) rotate(-60deg); }
  100% { transform: translate(-50%, -60%) rotate(30deg); }
}
@keyframes lissa-4 {
  0% { transform: translate(-30%, -30%) rotate(20deg); }
  100% { transform: translate(-70%, -70%) rotate(-25deg); }
}

/* スマホ表示時の最適化（配置のズレを防ぎ、確実に画面全体を覆う） */
@media (max-width: 768px) {
  /* 縦長のスマホ画面で回転・移動しても線の端（余白）が見えないよう、長さを「画面の最大辺の3倍」に拡張 */
  body::before { width: 300vmax; height: 1.5vh; }
  body::after { width: 300vmax; height: 1.2vh; }
  main::before { width: 300vmax; height: 1vh; } 
  main::after { display: none; } /* 情報過多と負荷を避けるため1本減らす */
}
/* アニメーション軽減設定（省電力モード / 前庭障害ユーザー対応） */
@media (prefers-reduced-motion: reduce) {
  body::before, body::after, main::before, main::after {
    animation: none;
  }
}

body.scroll-lock { overflow: hidden; height: 100vh; }

img, svg { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; transition: opacity 0.3s; }
@media(hover:hover){ a:not(.btn):hover { opacity: 0.6; } }