/*!
 * 2026 Modern Template (Internal / Training Use)
 * ------------------------------------------------------------
 * このCSSは、新人が読んで理解できるように「なぜ必要か」をコメントで説明しています。
 * 目的：
 *  - index.html / template1.html / template2.html / template3.html の見た目を統一
 *  - 1ファイルで管理しやすくする（= 修正が一箇所で済む）
 *  - Bootstrapを読み込んでも崩れにくい（必要最小の上書きだけ）
 */

/* ============================================================
   1) Reset / Base
   ============================================================ */
   /* dropdown のリンクも他メニューと同じ下線アニメ */
   .nav .dropdown-toggle{
     position: relative;
     padding-bottom: 4px;
   }

   .nav .dropdown-toggle::before{
     content:"";
     position:absolute;
     left:0;
     bottom:0;
     width:0;
     height:2px;
     background:#5b7cfa;
     transition:0.3s;
   }

   .nav .dropdown-toggle:hover::before{
     width:100%;
   }

   /* =====================================
      Bootstrap dropdown の三角マーク削除
      ===================================== */
.dropdown-toggle::after{
     display: none !important;
   }
/* 余白や計算方法を統一して「環境差によるズレ」を減らします */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* ベース背景・文字色（ダークテーマ） */
body{
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #0f172a;
  color: #fff;
}

/* 画像は親幅に収めてレイアウト崩れを防ぎます */
img{ max-width: 100%; display: block; }

/* aタグはデザインで下線を自作するので、標準下線は外します */
a{ text-decoration: none; color: inherit; }

/* コンテンツ幅：多くのページで同じ「最大幅」を使います */
.container{
  width: 90%;
  max-width: 1200px;
  margin: auto;
}

/* ============================================================
   2) Header / Navigation (template4.html と同じ見栄え)
   ============================================================ */

/* 固定ヘッダー：ページ上部に貼り付く */
.header{
  position: fixed;
  width: 100%;
  top: 0;
  backdrop-filter: blur(12px); /* 背景をぼかして「今っぽさ」を出す */
  padding: 18px 0;
  z-index: 1000;
  transition: 0.3s; /* スクロール時に縮む動きを滑らかに */
}

/* スクロールでヘッダーをコンパクトにする（JSで付け外し） */
.header.compact{
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

/* ヘッダー内の並び：ロゴ（左）／メニュー（中央）／ボタン（右） */
.header .container{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ロゴ画像（img/title.png） */
.logo{
  display: flex;
  align-items: center;
}
.logo img{
  width: 200px;       /* 指定幅（見本に合わせる） */
  height: auto;
}

/* ナビ（PC表示） */
.nav{
  display: flex;
  gap: 28px;
  font-weight: 500;
  align-items: center;
}

/* 通常リンク：下線アニメを作るため relative を付けます */
.nav > a,
.nav .dropdown > a{
  position: relative;
  padding-bottom: 4px;
}

/* 下線（hover / activeで伸びる） */
.nav > a::after,
.nav .dropdown > a::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: #5b7cfa;
  transition: 0.3s;
}
.nav > a:hover::after,
.nav > a.active::after,
.nav .dropdown > a:hover::after,
.nav .dropdown > a.active::after{
  width: 100%;
}

/* ハンバーガー（スマホ用） */
.menu-btn{
  display: none;
  font-size: 1.4rem;
  background: none;
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  padding: 6px 10px;
  border-radius: 10px;
}

/* ============================================================
   3) Bootstrap Dropdown を「ダーク + 統一感」にする
   ============================================================ */
/* Bootstrapの.dropdown-menuは白背景がデフォルトなので暗めに調整 */
.nav .dropdown-menu{
  background: #1e293b;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 16px;
  padding: 10px;
  min-width: 220px;
}
.nav .dropdown-item{
  color: rgba(255,255,255,0.92);
  border-radius: 12px;
  padding: 10px 12px;
}
.nav .dropdown-item:hover,
.nav .dropdown-item:focus{
  background: rgba(255,255,255,0.08);
  color: #fff;
}

/* ============================================================
   4) Mobile Navigation (template4 と同じ挙動)
   ============================================================ */
@media (max-width: 900px){
  /* ナビを右上にポップアップ表示 */
  .nav{
    position: absolute;
    top: 70px;
    right: 5%;
    background: #1e293b;
    flex-direction: column;
    padding: 20px;
    border-radius: 16px;
    display: none; /* JSで active のときだけ表示 */
  }
  .nav.active{ display: flex; }

  .menu-btn{ display: block; }

  /* スマホでは下線よりもタップ領域を大きくした方が安全 */
  .nav > a,
  .nav .dropdown > a{
    padding: 8px 0;
  }
}

/* ============================================================
   5) Pages (index / template1 / template2 / template3)
   ============================================================ */

/* index.html / template1.html 用の「シンプルページ」 */
.page{
  padding-top: 120px;   /* 固定ヘッダー分の余白 */
  padding-bottom: 60px;
  width: 90%;
  max-width: 900px;
  margin: auto;
}
.page h1{
  font-size: 2.2rem;
  margin-bottom: 20px;
}
.page p{
  line-height: 1.8;
  opacity: 0.9;
}

/* template2 / template3 用の hero */
.hero{
  padding-top: 120px; /* 固定ヘッダー分 */
  padding-bottom: 40px;
  background: linear-gradient(135deg, rgba(91,124,250,0.25), rgba(159,91,250,0.15));
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.hero-inner{
  width: 90%;
  max-width: 1200px;
  margin: auto;
}
.breadcrumb{
  font-size: 0.9rem;
  opacity: 0.85;
}
.breadcrumb a{
  border-bottom: 1px solid rgba(255,255,255,0.25);
}
.hero-title{
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-top: 10px;
}
.hero-lead{
  margin-top: 14px;
  max-width: 60ch;
  line-height: 1.9;
  opacity: 0.92;
}

/* template2 のレイアウト：本文＋サイドバー */
.main{ padding: 60px 0; }
.grid{
  width: 90%;
  max-width: 1200px;
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 40px;
  align-items: start;
}
@media (max-width: 920px){
  .grid{ grid-template-columns: 1fr; }
}

/* セクション（見出し＋本文） */
.section{ margin-bottom: 26px; }
.section h2{ font-size: 1.6rem; margin-bottom: 10px; }
.section p{ line-height: 1.9; opacity: 0.95; }

/* Noteカード：強調枠 */
.note{
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 18px;
  padding: 18px;
}

/* サイドバー */
.sidebar{
  position: sticky;
  top: 110px;
  display: grid;
  gap: 14px;
}
@media (max-width: 920px){
  .sidebar{ position: static; top: auto; }
}
.card{
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 20px;
  padding: 18px;
  backdrop-filter: blur(12px);
}
.card h3{ font-size: 1rem; margin-bottom: 10px; opacity: 0.95; }
.card a{
  display: block;
  padding: 10px;
  margin-top: 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  transition: 0.2s;
}
.card a:hover{ transform: translateY(-2px); }

/* CTA */
.cta{
  margin-top: 40px;
  border-radius: 24px;
  padding: 28px;
  background: linear-gradient(135deg, rgba(91,124,250,0.35), rgba(159,91,250,0.20));
  border: 1px solid rgba(255,255,255,0.12);
}
.btn{
  display: inline-block;
  margin-top: 12px;
  padding: 12px 26px;
  border-radius: 999px;
  background: #fff;
  color: #000;
  transition: 0.2s;
}
.btn:hover{ transform: translateY(-3px); }

/* ============================================================
   6) Animation helpers
   ============================================================ */

/* スクロールでふわっと出す（JSで表示） */
.fade-up{
  opacity: 0;
  transform: translateY(14px);
  transition: 0.6s ease;
}

/* template3：ページ遷移（フェードアウト） */
body{ opacity: 1; transition: opacity .25s ease; }
body.fadeout{ opacity: 0; }

/* アニメが苦手な環境では控えめに */
@media (prefers-reduced-motion: reduce){
  .fade-up{ opacity: 1; transform: none; transition: none; }
  body{ transition: none; }
}

/* ============================================================
   7) Footer
   ============================================================ */
.footer{
  padding: 30px;
  text-align: center;
  border-top: 1px solid rgba(255,255,255,0.1);
}