@charset "utf-8";


/* ===========================================================
   1. 変数定義（純黒・純白の最小構成）
=========================================================== */
:root {
  /* フォントを関数する必要はないが、今後のためにやっておく */
  --font-base: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;

  /* ベースカラー（白と黒のみに断捨離） */
  --color-black: #000000;
  --color-white: #ffffff;
  
  /* コピーライトなど、どうしても少し落としたい文字用のグレー */
  --color-text-sub: #86868b; 
}


/* ===========================================================
    ルート設定（流動的タイポグラフィの基盤）
   - PC最大表示幅 1120px のとき: 16px (100% / 1rem)
   - スマホ表示幅 370px のとき: 14px (87.5% / 0.875rem)
=========================================================== */
html {
  /* 370px(14px) 〜 1800px(16px) で無段階に変化 */
  font-size: clamp(0.875rem, 0.8427rem + 0.1399vw, 1rem);
}

/* ===========================================================
   2. ベース＆タイポグラフィ（既存のrem指定を継承）
=========================================================== */
body {
  font-family: var(--font-base);
  font-size: 1rem; /* ← 16px から 1rem に変更（htmlのclampを継承させるため） */
  font-weight: 400;
  line-height: 1.7;
  /* デフォルトは白背景・黒文字ベース */
  color: var(--color-black);
  background-color: var(--color-white);
  /* テキストの視認性と描画を美しくする指定（Mac/iOS向け） */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* font系は関数化しない。検証ツールで上下キー調整しやすいため */
h1 {
  font-size: 2rem;      /* 32px (16 × 2.0)  */
  font-weight: 700;
  line-height: 1.3;
}

h2 {
  font-size: 1.5rem;    /* 24px (16 × 1.5)  */
  font-weight: 700;
  line-height: 1.3;
}

h3 {
  font-size: 1.125rem;  /* 18px (16 × 1.125)  */
  font-weight: 500;
  line-height: 1.3;
}


.copyright {
  font-size: 0.75rem;   /* 12px (16 × 0.75)  */
  font-weight: 400;
  line-height: 1.2;
  color: var(--color-text-sub);
}


/* ===========================================================
   3. セクション別 白黒反転共通ルール
=========================================================== */
/* セクション自体の配置基準を設定 */
.js-bg-white,
.js-bg-black {
  position: relative;
}

/* キャンバスをセクション全体の背景として完全固定 */
.particle-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* クリックや選択を透過 */
  z-index: 0;           /* 一番奥に配置 */
}

/* セクション内の文字やコンテンツを背景より手前に出す */
.philosophy-box,
.content-container,
.logo-text-area,
.js-bg-white > h2,
.js-bg-black > h2 {
  position: relative;
  z-index: 1;
}

/* --- 黒背景セクション --- */
.js-bg-black {
  background-color: var(--color-black);
  color: var(--color-white);
}
/* 黒背景の中にある文字要素はすべて強制的に白 */
.js-bg-black h1,
.js-bg-black h2,
.js-bg-black h3,
.js-bg-black h4,
.js-bg-black p,
.js-bg-black a,
.js-bg-black button {
  color: var(--color-white);
}

/* --- 白背景セクション --- */
.js-bg-white {
  background-color: var(--color-white);
  color: var(--color-black);
}
/* 白背景の中にある文字要素はすべて強制的に黒 */
.js-bg-white h1,
.js-bg-white h2,
.js-bg-white h3,
.js-bg-white h4,
.js-bg-white p,
.js-bg-white a,
.js-bg-white button {
  color: var(--color-black);
}




.particle-canvas {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  pointer-events: none;
}



/*=========================================================== */
/* 画面幅設定(大外箱：outside-box) 実質max横表示域1120px */
/* =========================================================== */
.outside-container {
  /* --- 1. 縦幅とフッター押し出し設定 --- */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh; /* スマホのアドレスバー伸縮対策 */

  /* --- 2. 横幅とレスポンシブ設定 --- */
  width: 100%;
  max-width: 1800px; /* サイトの最大幅（デザインに合わせて変更可） */
  margin-right: auto;
  margin-left: auto; /* 中央寄せ */

  
  
}

/* ヘッダーとフッターの間にある要素（mainなど）を限界まで伸ばす */
.outside-container > main { 
  flex: 1;
}

/* ===========================================================
   4. 他ページ(website,analysis,otherworks)共通の余白設定
=========================================================== */



/* セクション全体の余白調整 */
section {
  padding: 60px 0px;
}

/* 一旦共通でかけておいて、個別cssで修正する */
section h2 {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 50px;
  letter-spacing:0.12em;
}

/* （画像orスライド）と（explain-box）が入る箱 */
.content-area {
  width: 100%;
  max-width: 800px;  /* PCやタブレットで広がりすぎないための上限幅 */
  margin: 0 auto;    /* 左右中央寄せ */
  /* padding は必要に応じて。基本は親の outside-container の 40px があるのでそのままでOKですが、
     もしカード内とのバランスを取るなら左右に小まめな調整を入れても良きです */
     gap: 16px;
     padding: 0 30px;
}

/* ===========================================================
   ベース要素の調整
   =========================================================== */

/* 画像が親要素からはみ出すのを防ぐ（レスポンシブ必須） */
img, picture, svg {
  max-width: 100%;
  height: auto;
}
/* 文法エラー調整用、index.html以外のサブページの隠れ見出し */
.visually-hidden {
  position: absolute ;
  width: 1px ;
  height: 1px ;
  padding: 0 ;
  margin: -1px ;
  overflow: hidden ;
  clip: rect(0, 0, 0, 0) ;
  white-space: nowrap ;
  border: 0 ;
}


/* ===========================================================
   ブレイクポイント定義（レスポンシブ設計基準）
   - Mobile (SP)  : ~ 767px
   - Tablet (TAB) : 768px ~ 1023px
   - Desktop (PC) : 1024px ~
   ※モバイルファースト（基本スタイルはスマホ、min-widthでPC拡張）で記述
   今回はわかりやすさのためブレイクポイントは768pxに設定。

   記述の際はコンポーネント毎に
   @media (min-width: 768px) {
  .セレクタ名 {}
  }
   =========================================================== */


 




/* ===========================================================
==============================================================
   ヘッダー基本レイアウト (SP)
==============================================================
=========================================================== */

.header {
  position: relative;
  z-index: 2;
}

.header__box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 8px;
  /* 背景色（CSS変数を利用） */
  background-color: var(--color-white);
  padding-right: 2em;
  padding-left: 2em;
}

.header-menu {
  position: relative;
}

/* ===========================================================
   ハンバーガーボタン (.hamburger-menu)
   - タップエリア: 幅32px × 高さ18px
   =========================================================== */
.hamburger-menu {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 32px;
  height: 18px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  /* ドロワーメニューより前に出す */
  position: relative;
  z-index: 3; 
}

/* 3本線の共通スタイル */
.hamburger-menu span {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--color-black);
  border-radius: 2px;
  /* アニメーションのスムーズ設定 (0.3秒) */
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* -----------------------------------------------------------
   [開いた状態] ハンバーガー ➔ 『✕』アイコンへ変化
   ----------------------------------------------------------- */
/* ① 上の線を45度回転させて中央へ落とす */
.hamburger-menu.is-active span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

/* ② 中央の線を透明にして消す */
.hamburger-menu.is-active span:nth-child(2) {
  opacity: 0;
}

/* ③ 下の線を-45度回転させて中央へ引き上げる */
.hamburger-menu.is-active span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}


/* ===========================================================
   ドロワーメニュー (.drawer-menu)
   - 右側から0.3秒で出現
   =========================================================== */
.drawer-menu {
  position: fixed;
  top: 0;
  right: 0;
  width: 40%;            /* 画面横幅の80%（必要に応じて調整） */
  max-width: 300px;
  height: auto;
  max-height: 100dvh;
  
  background-color: var(--color-white);
  box-shadow: -4px 0 12px rgba(0, 0, 0, 0.1);
  padding: 80px 24px 24px; /* 上部にボタンと被らないよう余裕を持たせる */
  z-index: 2;

  /* 初期状態：右外側へ隠しておく */
  transform: translateX(100%);
  /* 0.3秒でスッと移動するアニメーション */
  transition: transform 0.3s ease;
}

/* -----------------------------------------------------------
   [開いた状態] 右から画面内へスライドイン
   ----------------------------------------------------------- */
.drawer-menu.is-active {
  transform: translateX(0);
  
}

/* ナビゲーションリストの簡易スタイリング */
.drawer-menu ul {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.drawer-menu a {
  display: block;
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-text-main);
  transition: color 0.2s ease;
}

.drawer-menu a:hover {
  color: #040abc;
}

/* ==.drawer-menu出てる時に画面固定でスクロールできなくさせる== */
/* CSS：bodyのスクロールを止める */
body.no-scroll {
  overflow: hidden;
}

/* ===========================================================
   ハンバーガーの消失→隠れメニューのグロナビ化（768px ~）
   =========================================================== */
@media (min-width: 768px), (orientation: landscape) {

  /* 1. ハンバーガーボタンを非表示 */
  .hamburger-menu {
    display: none;
  }

  /* 2. ドロワーメニューを通常のグロナビにリセット */
  .drawer-menu {
    /* 固定配置・変形（スライド）を解除 */
    position: static;
    transform: none;
    
    /* 画面いっぱいのサイズ・影・背景色を解除 */
    width: auto;
    max-width: none;
    height: auto;
    background-color: transparent;
    box-shadow: none;
    
    /* 余白のリセット（スマホ時のpadding-top等を解除） */
    padding: 0;
  }

  /* 3. メニューリストを横並び（flex）に */
  .drawer-menu ul {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 32px; /* メニュー項目同士の間隔（デザインに合わせて調整） */
  }

  /* 4. リンクのスタイリング（ホバーエフェクト等） */
  .drawer-menu a {
    font-size: 0.9375rem; /* 15px相当 */
    font-weight: 500;
    padding: 8px 0;
    position: relative;
  }

  /* （おまけ）ホバー時に下線がスッと伸びる上品な演出 */
  .drawer-menu a::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--color-accent);
    transition: width 0.3s ease;
  }

  .drawer-menu a:hover::after {
    width: 100%;
  }

/* spacebetweenかかってるグロナビの左右余白の調整用 */
  .header__box{
    padding-left: auto;
    padding-right:auto;
    /* レイアウトに応じて変更可 */
  }

}

/* ===========================================================
==============================================================
   フッダー
==============================================================
=========================================================== */

/* 共通フッター */
.footer {
  width: 100%;
}

.footer-box {
  /* 背景色（CSS変数を利用） */
  background-color: var(--color-black);
 

  /* レイアウト・余白（必要に応じて調整） */
  width: 100%;
  padding: 40px 20px; /* 上下左右の余白 */

  /* 文字関連の配置・カラー設定 */
  text-align: center;
  color:var(--color-white); /* 暗い背景に適した文字色 */
}

.copyright {
  margin: 0;
  font-size: 0.875rem; /* 約14px（基準による） */
  line-height: 1.5;
}


/* ===========================================================
==============================================================
TOPへ戻るbutton
==============================================================
=========================================================== */

.page-top-btn {
  /* 配置設定（右下に固定） */
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1; /* 他の要素より手前に表示 */

  /* サイズと形状 */
  width: 48px;
  height: 48px;
  border-radius: 50%; /* 丸型 */

  /* 配色：変数は使わず、黒・白どちらの背景でもしっかり浮き出る明確な指定にする */
  /* ベース：黒寄りのダークグレー（高級感のある質感） */
  background-color: #1a1a1a;
  /* アイコン：くっきり見える白 */
  color: #ffffff;
  /* 枠線：黒背景に沈まないよう、少し明るめのグレー枠線を入れる */
  border: 1px solid #444444;
  /* 強めの影をつけて白背景・黒背景のどちらでもはっきり浮立たせる */
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);

  /* アイコン矢印の中央寄せ */
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;

  /* ホバー時のスムーズなアニメーション */
  transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.3s ease;

  /* 初期状態は非表示（JSで表示切り替えをする場合） */
  opacity: 0;
  visibility: hidden;
}

/* 矢印（span）の見た目微調整 */
.page-top-btn span {
  font-size: 1.25rem;
  font-weight: bold;
  line-height: 1;
}

/* ホバー時の演出（PC） */
@media (hover: hover) {
  .page-top-btn:hover {
    background-color: #333336;
    transform: translateY(-4px); /* 少し上に浮く */
  }
}

/* JavaScriptでスクロール時に付与するクラス（表示状態） */
.page-top-btn.is-active {
  opacity: 1;
  visibility: visible;
}




/* ==========================================
section全体のレイアウト設定
   ========================================== */


   
section {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  
  
  /* 画面中央にコンテンツを上下左右寄せ（レイアウトも綺麗になる） */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  
}


/* ===========================================================
   全ページ共通：セクションのフェードイン（FVは除外）
=========================================================== */
/* first-view 以外のセクションだけを初期状態：透明にする */
main section:not(.first-view) {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1),
              transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

/* JSによって画面内に入ったとき */
main section:not(.first-view).is-visible {
  opacity: 1;
  transform: translateY(0);
}




/* -----------------------------------------------------------
   スライドショー(section class="requirements-area js-bg-white" ) の装飾
   ----------------------------------------------------------- */

/* Swiperコンテナのスタイリング */
.swiper {
    position: relative;
    z-index: 1; /* 明示的に低めの階層にしておく */
    width: 100%;
    max-width: 800px; /* スライド表示の最大幅（お好みで調整） */
    margin: 0 auto 30px; /* 中央寄せ ＋ 下の解説ボックスとの余白 */
    height: auto;
    border-radius: 8px; /* スライドの角を少し丸く見せる場合 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* ほんのり影をつける */
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* 矢印やドットの色指定（ディープネイビー等に合わせる場合） */
.swiper-button-next,
.swiper-button-prev {
    color: #df8138; /* ブランドカラー等に変更可能 */
}

.swiper-pagination-bullet-active {
    background-color: #888888;
}


/* -----------------------------------------------------------
コンテンツ説明(index.html以外の"explain-box)の行間調整
 ----------------------------------------------------------- */


/* ベース（スマホ向け）：段落ごとの下余白設定 */
.content-sub p {
  /* 20px などの固定値ではなく文字サイズに比例させる */
  margin-bottom: 1.2em; 
}


/* 最後の段落だけは下に余白を作らない */
.content-sub p:last-child {
  margin-bottom: 0;
}

/* PC向け（768px〜）：余白を詰める */
@media (min-width: 768px) , (orientation: landscape){
  .content-sub p {
    margin-bottom: 1em; /* PCでの段落間の空き（お好みで調整） */
  }
}



/* "explain-box"の見出し装飾 */
.content-sub h3 {
  display: inline-block;             /* 文字の長さに合わせて下線を自動で切る */
  border-bottom: 2px solid #888888; /* 下線の太さと色 */
  padding-bottom: 4px;              /* 文字と下線の隙間 */
  margin-top: 2em;
  margin-bottom: 0.8em;
  letter-spacing: 0.05em;
}