/* ==========================================================================
   1. Base Settings (Fonts, Variables, Reset)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Special+Gothic+Expanded+One&display=swap');

/* base.css の一番上にこの行を追加 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');

/* --- Font Definition --- */
@font-face {
  font-family: 'din-2014';
  src: url('../fonts/din-2014.otf') format('opentype'); /* パスを ../ に変更 */
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Apple Garamond Light';
  src: url('../fonts/AppleGaramond-Light.woff2') format('woff2'); /* パスを ../ に変更 */
  font-weight: 300;
  font-style: normal;
}

/* CSSの先頭に追記 */
@font-face {
  font-family: 'Garamond Condensed Light';
  src: url('../fonts/your-garamond-font.woff2') format('woff2'); /* フォントファイルへのパス */
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'BR Hendrix';
  src: url('../fonts/your-brhendrix-font.woff2') format('woff2'); /* フォントファイルへのパス */
  font-weight: 600;
  font-style: normal;
}


/* ==========================================================================
   フォントの読み込み設定
   ========================================================================== */

@font-face {
  font-family: 'Garamond Condensed Light Regular';
  /* 拡張子を.ttfにし、formatを'truetype'に変更 */
  src: url('../fonts/garamond-condensed-light-regular/Garamond-Condensed-Light-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'BR Hendrix';
  /* 拡張子を.otfにし、formatを'opentype'に変更 */
  src: url('../fonts/br-hendrix/BRHendrix-SemiBold-BF6556d1b51cbb8.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@import url('https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@100..900&display=swap');
/* ▲▲▲【ここまで追記】▲▲▲ */


.logo img {
  height: 50px;
  display: block;
}




/* --- Global Variables --- */
:root {
  --font-base: 'Yu Gothic', '游ゴシック', YuGothic, '游ゴシック体', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  --font-title: 'din-2014', sans-serif;
  --font-accent: 'Apple Garamond Light', serif;
  --font-sub: 'Montserrat', sans-serif;

  --color-primary: #111D3C;
  --color-text: #333;
  --color-text-light: #555;
  --color-accent: #007bff;
  --color-white: #fff;
  --color-background: #f0f0f0;
  --color-border: #ddd;

  --culture-blue: hsl(198, 27%, 24%);
  --culture-rightBlue:#007bff;
  --culture-otherBlue: hsl(198, 100%, 24%);
  --culture-red: #E52C2C;
  --culture-green: #18AD54;

  --header-height: 80px;
}

/* --- Basic Reset & Body --- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/* base.css に記述する統一されたbodyスタイル */
body {
  margin: 0; /* ブラウザのデフォルトマージンをリセット */
  font-family: 'Noto Sans JP', sans-serif; /* 基本フォントをNoto Sans JPに統一 */
  font-weight: normal; /* 基本の太さを標準（bold指定を解除）*/
  line-height: 1.8;
  color: var(--color-text); /* 基本文字色をCSS変数で指定 */
  background-color: var(--color-background); /* 基本背景色をCSS変数で指定 */
  padding-top: var(--header-height); /* 固定ヘッダー分の余白を確保 */
  cursor: url('../images/pointer.png'), auto; /* カスタムカーソルを指定 */
}
/* =============================================
   ▼▼▼ Footer (フッター) スタイル ▼▼▼
   ============================================= */

/* --- フッター全体 --- */
footer {
  background-color: #1a2333; /* 背景をダークネイビーに */
  color: #ffffff; /* 文字色を薄いグレーに */
  text-align: center;
  padding: 40px 20px;
  margin-top: 80px;
  font-size: 0.9rem;
}

/* --- フッターナビゲーション --- */
.footer-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap; /* スマホ表示で折り返すように */
  gap: 15px 30px; /* リンク間の余白 */
  margin-bottom: 30px;
}

.footer-nav a {
  color: #ffffff; /* 親要素の文字色を継承 */
  text-decoration: none;
  font-weight: bold;
  transition: color 0.3s ease;
}

/* リンクの基本スタイル（訪問済みも含む）*/
.footer-nav a,
.footer-nav a:visited { /* ★ :visited を追加 */
  color: #ffffff !important; /* 親要素の文字色を継承 */
  text-decoration: none;
  font-weight: bold;
  transition: color 0.3s ease;
}

.footer-nav a:hover {
  color: #ffffff !important; /* ホバー時に文字色を白に */
  text-decoration: underline;
  cursor: url('../images/pointer.png'),auto;
}

/* --- コピーライト --- */
.footer-copyright {
  font-size: 0.8rem;
  color: #7d899e;
  padding-top: 30px;
  border-top: 1px solid #3a455a; /* 区切り線 */
}


/* --- Animations --- */
@keyframes loading {
  from { width: 0%; }
  to { width: 100%; }
}

@keyframes floatUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 画像が波打つように表示されるアニメーション */
@keyframes wave-in {
    0% {
        opacity: 0;
        transform: translateY(30px); /* 最初は下にいる */
    }
    40% {
        transform: translateY(-15px); /* 本来の位置を通り越して上に跳ねる */
    }
    70% {
        transform: translateY(8px); /* 少し下に沈む */
    }
    100% {
        opacity: 1;
        transform: translateY(0); /* 本来の位置に収まる */
    }
}