/* 経産省リンク 通常時 */
.link {
  color: #E2D68F;  /* 通常色（例: 白） */
  transition: color 0.3s ease;
}

/* 経産省リンク ホバー時 */
.link:hover {
  color: #EE761C;  /* マウスを乗せたときの色 */
}


/* Contactセクション内の gold だけ確実に上書き */
.oli-section[data-anchor="contact"] .icon-gold {
  color: #E2D68F !important;
  transition: color .3s ease;
}
.oli-section[data-anchor="contact"] a:hover .icon-gold {
  color: #EE761C !important;
}

.site-footer .usefull-nav img {
  max-height: 40px;   /* 横幅を制限（お好みで調整） */
  height: auto;       /* 縦横比を維持して縮小 */
  display: block;     /* 余計な隙間を消す */
  margin: 0 auto;     /* 中央寄せ */
}

.oli-section + .oli-section {
  margin-top: 50px; /* セクション間の隙間 */
}


/* ===== Active menu highlight (fullPage/通常 共通) ===== */
.site-header .navbar-nav > li > a { position: relative; }

/* 下線はテキスト色と同色（currentColor） */
.site-header .navbar-nav > li > a:before {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -2px;
  border-bottom: 2px solid currentColor;
  opacity: 0; transition: opacity .25s ease;
}

/* activeで下線ON */
.site-header .navbar-nav > li.active > a:before { opacity: 1; }

/* activeの文字色を明るく（お好みで変更） */
.site-header .navbar-nav > li.active > a {
  color: #E2D68F;
  text-decoration: none;
}


/* === Ensure active highlight works whether active is on <li> or <a> === */
.site-header .navbar-nav > li > a { position: relative; }
.site-header .navbar-nav > li.active > a:before,
.site-header .navbar-nav > li > a.active:before { opacity: 1; }
.site-header .navbar-nav > li.active > a,
.site-header .navbar-nav > li > a.active { color: #E2D68F !important; text-decoration: none; }

/* Active表示（明るい色＋下線）— li.active と a.active の両対応 */
.site-header .navbar-nav > li > a { position: relative; }

.site-header .navbar-nav > li.active > a,
.site-header .navbar-nav > li > a.active {
  color: #E2D68F !important;
  text-decoration: none;
}

.site-header .navbar-nav > li.active > a:before,
.site-header .navbar-nav > li > a.active:before {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -2px;
  border-bottom: 2px solid currentColor;
  opacity: 1; transition: opacity .25s ease;
}

/* === Active表示（明るい色＋下線）— li.active と a.active の両対応・最終上書き === */
#navigation li > a { position: relative; }

#navigation li.active > a,
#navigation a.active {
  color: #E2D68F !important;    /* Bootstrapの .navbar-dark .nav-link.active を上書き */
  text-decoration: none !important;
}

#navigation li.active > a::after,
#navigation a.active::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -4px;
  border-bottom: 2px solid currentColor;
}

/* === Active表示（明るい色＋下線）— li.active と a.active の両対応・最終上書き === */
#navigation li > a { position: relative; }

#navigation li.active > a,
#navigation a.active {
  color: #E2D68F !important;
  text-decoration: none !important;
}

#navigation li.active > a::after,
#navigation a.active::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -4px;
  border-bottom: 2px solid currentColor;
}

/* ============================
   ヘッダーの統一スタイル（全画面サイズ共通）
   ============================ */

/* 全画面サイズで共通のヘッダースタイル */
.site-header.header-fixed {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
}

.site-header .navbar {
  background: rgba(0,0,0,0.60);
  backdrop-filter: saturate(120%) blur(4px);
  box-shadow: 0 2px 12px rgba(0,0,0,0.25);
  min-height: 44px;
  padding-block: 4px;
  padding-left: 12px;
  padding-right: 12px;
  display: flex;
  align-items: center;
}

.site-header .logo img,
.site-header .navbar .navbar-brand img {
  max-height: 55px;
  height: auto;
  width: auto;
  margin-top: 0;
  display: block;
}

.navbar-brand {
  min-width: 0;
  max-width: calc(100% - 44px);
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 0;
  margin-right: .75rem;
}

.site-header .nav-link {
  color: #fff;
  display: flex;
  align-items: center;
  line-height: 32px;
  padding: 0 .5rem;
}

.site-header .nav-link:hover {
  color: #E2D68F;
}

/* ハンバーガーメニューボタンの統一スタイル */
.navbar-toggler {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  margin-left: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: transparent;
}

/* メニューの展開/収納の統一動作 */
.site-header .navbar .navbar-collapse.collapse {
  display: none;
  height: auto;
  visibility: visible;
}

.site-header .navbar .navbar-collapse.collapse.show {
  display: block;
}

/* 本文の上部余白（固定ヘッダー分） */
.site-container {
  padding-top: 44px;
}

/* フッターの統一スタイル */
.site-footer {
  background: transparent;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: none;
  border-top: none;
  will-change: backdrop-filter;
  padding-top: 16px;
  padding-bottom: 16px;
}

.site-footer .usefull-nav img {
  max-height: 28px;
}

/* レスポンシブ対応（必要最小限） */
@media (min-width: 1200px) {
  .site-header .navbar {
    padding-block: 6px;
  }

  .site-header .logo img,
  .site-header .navbar .navbar-brand img {
    max-height: 36px;
  }

  .site-header .nav-link {
    line-height: 36px;
  }

  .site-container {
    padding-top: 48px;
  }
}

@media (max-width: 767.98px) {
  .site-footer .usefull-nav {
    display: none !important;
  }
}

/* Smartphone: make header overlay lighter */
@media (max-width: 1199.98px) {
  /* ヘッダーのオーバーレイを薄くする（濃さは 0.15〜0.35 で調整） */
  .site-header .overlay .overlay-inner{
    background: rgba(0,0,0,0.22) !important; /* ← ここだけ上げ下げで濃さ調整 */
    opacity: 1 !important;                   /* .opacity-xx の全体不透明度を無効化 */
  }
}

/* 任意：ナビバー自体も少しだけトーンダウン＋ぼかし */
@media (max-width: 767.98px) {
  .site-header .navbar{
    background: rgba(0,0,0,0.12) !important; /* 0.08〜0.18 くらいが目安 */
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
}

/* --- Fix: social icons hidden behind right frame --- */
@media (min-width: 1200px) {
  /* フレームよりも前面に出す */
  .social-nav.social-nav-pinned { z-index: 60; }

  /* 右/左/上下フレームはクリックを拾わないようにする（任意だが安全） */
  .frame > * { pointer-events: none; }
}

/* 念のため：デスクトップ/モバイルともアイコンを白に固定したい場合
.site-footer.footer-light .social-nav a,
.site-footer.footer-mobile-dark .social-nav a { color: #fff !important; }
*/



/* --- Desktop: pinned social icons visible & away from frame --- */
@media (min-width: 1200px) {
  /* 1) 右の白フレーム(50px)を避けて内側に寄せる */
  .social-nav.social-nav-pinned{
    right: 56px !important;  /* 55–70px で微調整OK */
    z-index: 200 !important; /* 念のため前面へ */
  }

  /* 2) “白固定”を上書きして見える色に（通常時ダーク、hoverはアクセント） */
  .social-nav.social-nav-pinned a{
    color: #252729 !important;
  }
  .social-nav.social-nav-pinned a:hover{
    color: #E2D68F !important;
  }
}

@media (min-width: 1200px) {
  .social-nav.social-nav-pinned{
    right: 56px !important;   /* フレーム50px + 余白6px。55〜70pxで微調整可 */
    z-index: 2000 !important; /* フレームより前面に */
  }
}

@media (min-width:1200px){
  .site-footer.footer-light .social-nav.social-nav-pinned a{
    color:#252729 !important;
  }
  .site-footer.footer-light .social-nav.social-nav-pinned a:hover{
    color:#E2D68F !important;
  }
}

/* === FINAL override for right-side social icons === */
@media (min-width: 1200px){
  /* フレーム(50px)の内側に寄せ、最前面へ */
  .social-nav.social-nav-pinned{
    right: 56px !important;   /* 55–70pxで微調整OK */
    z-index: 2000 !important;
  }
  /* footer-light の白指定より強く上書き（より高い特異性＋!important） */
  .site-footer.footer-light .social-nav.social-nav-pinned a{
    color:#252729 !important;
  }
  .site-footer.footer-light .social-nav.social-nav-pinned a:hover{
    color:#E2D68F !important;
  }
}

/* === Desktop: 右側アイコンを確実に見える位置&最前面に === */
@media (min-width:1200px){
  /* 右フレーム(50px)の内側へ 6px 余白を足して寄せる */
  body .social-nav.social-nav-pinned{
    right: 56px !important;
    z-index: 2000 !important;   /* フッター(z-index:50)やフレームより前へ */
    position: fixed !important; /* 念のため固定を明示 */
  }

  /* フレーム側は“見えるまま”で良いが、クリック妨害だけ止める */
  body .frame > *{
    pointer-events: none;       /* クリックを透過させる */
    /* z-index は付けない（低いままにしておく） */
  }
}

/* === FINAL: right-side social icons visible, above frames === */
@media (min-width:1200px){
  body .social-nav.social-nav-pinned{
    position: fixed !important;
    top: 50px !important;
    bottom: 50px !important;
    right: 56px !important;   /* 右フレーム50px + 余白6px */
    width: 50px !important;
    display: flex !important;
    align-items: center !important;
    z-index: 10010 !important; /* 何より前面 */
  }
  body .social-nav.social-nav-pinned ul{
    margin: 0 !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
  }
  /* フッターの白文字指定より強く上書き */
  .site-footer.footer-light .social-nav.social-nav-pinned a{ color:#252729 !important; }
  .site-footer.footer-light .social-nav.social-nav-pinned a:hover{ color:#E2D68F !important; }

  /* 右の白フレームがクリックを奪わないように */
  .frame > * { pointer-events: none !important; }
}

/* Desktop: pinned social on the white frame (white but strong) */
@media (min-width:1200px){
  /* 右端ぴったりを ID で最終上書き（旧 right:56px を無力化） */
  #pinned-social{ right: 0 !important; z-index: 10010 !important; }

  /* 色は白。白地でも埋もれないように濃い目の影を付ける */
  #pinned-social a{
    color: #fff !important;
    text-shadow:
      0 0 6px rgba(0,0,0,.45),
      0 0 2px rgba(0,0,0,.70); /* ほんのり縁取り効果 */
  }
  #pinned-social a:hover{
    color: #fff !important;
    text-shadow:
      0 0 8px rgba(0,0,0,.55),
      0 0 3px rgba(0,0,0,.80);
  }

  /* フレームがクリックを奪わないように（視覚はそのまま） */
  .frame > *{ pointer-events: none; }
}

/* ① 右端が切れないように、ブランド枠のはみ出し禁止を解除 */
.navbar-brand {
  overflow: visible !important;   /* ← これでロゴの右端が切れない */
}

/* デスクトップ（1200px以上）のときだけロゴを右に1cm移動 */
@media (min-width: 1200px) {
  .site-header .navbar .navbar-brand.logo img {
    margin-left: 0.8cm;              /* 今の位置から約1cm右へ */
  
  }
}


/* フッターの nestra2.png を“はみ出さず”に大きく見せる */
.site-footer .usefull-nav img {
  height: 40px !important;      /* ← ここで見た目の高さを決める（32〜48pxで調整） */
  max-height: 40px !important;  /* 念のため上限も同じに */
  width: auto;                   /* 縦横比は維持 */
  object-fit: contain;           /* 画像が切れにくい */
  display: block;                /* 余計な下余白を防ぐ */
}

/* 画像を縦中央に（HTML側の .usefull-nav は既にFlex運用想定） */
.site-footer .usefull-nav {
  display: flex;
  align-items: center;
}

.same-height {
  height: 300px;       /* ← 好きな高さに揃える */
  width: 100%;
  object-fit: cover;   /* 縦横比を保ちつつ余分をトリミング */
}

/* Vegas が失敗しても Firefox で必ず背景が見える保険 */
body.slideshow-background {
  background-image: url("../images/landing.jpg"); /* 先頭1枚でOK */
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.tweet-row {
  display: flex;
  gap: 50px;              /* 並びの間隔 */
  justify-content: center;/* 真ん中寄せ */
  flex-wrap: wrap;        /* スマホでは折り返す */
}

.tweet-col {
  flex: 1 1 45%;          /* 横幅45%で2つ並ぶ */
  max-width: 300px;       /* 大きさの上限（好みで調整） */
}

/* ロゴ画像を65pxに強制 */
.site-header .navbar .navbar-brand.logo img {
  max-height: 40px !important;
  height: auto !important;  /* 念のため高さを自動調整に戻す */
  width: auto !important;   /* 横幅は縦横比を維持 */
}

/* スマホ画面（768px未満）のときだけロゴを下げる */
@media (max-width: 767.98px) {
  .site-header .navbar .navbar-brand.logo img {
    margin-top: 8px;   /* ← 下げたい分だけ調整（例: 8px, 12px, 1emなど） */
  }
}

.preloader .loader-status {
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.preloader-image {
  max-width: 100px;
  max-height: 100px;
  width: auto;
  height: auto;
  animation: circle 0.8s ease-in-out infinite reverse;
}