/*
Theme Name: Astra Child
Template: astra
*/



/* =========================================
/* アンカーへのリンク移動をゆっくり
   ========================================= */
html {
  scroll-behavior: smooth;
}

/* =========================================
/* 流体タイポグラフィ
   ========================================= */
/* 見出し用のレスポンシブクラス */
.fluid-heading {
  font-size: clamp(3.0rem, 12vw, 8.0rem) !important;
  font-weight: 700; /* 少し太くすると視認性が上がります */
}
.fluid-heading-long {
  font-size: clamp(2.0rem, 8vw, 5.0rem) !important;
}
/* 本文用のレスポンシブクラス */
.fluid-text {
  font-size: clamp(1.0rem, 3vw, 2rem) !important;
}
/* ボタン専用のレスポンシブクラス */
.fluid-button a {
  font-size: clamp(1.0rem, 2.5vw, 1.8rem) !important;
}


/* =========================================
   ズームクラス (.zoom-obj) 画像、見出し、コンテナなど何でも拡大します
   ========================================= */
.zoom-obj {
    transition: transform 0.6s ease !important; /* 滑らかに動かす */
    position: relative; 
}
.zoom-obj:hover {
    transform: scale(1.03); /* 1.05倍に拡大（お好みで1.1に変更OK） */
}


/* =========================================
   ホバーで上にフワッと浮き上がる共通クラ
   ========================================= */
/* ホバーで上にフワッと浮き上がる共通クラス */
.float_up {
    transition: transform 0.3s ease, box-shadow 0.3s ease !important; /* なめらかに動かす */
}
.float_up:hover {
    transform: translateY(-5px); /* 上に5px移動 */
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1); /* 影を濃く・広くする */
}

/* =========================================
   軌跡ページの背景をギャラリー風にする設定
========================================= */
body.page-id-2435 {
    /* さっきより少し彩度を落とした、知的なブルーグレー */
    background: linear-gradient(180deg, #f0f4f8 0%, #cfd8dc 100%) !important;
    background-attachment: fixed !important;
}






/* =========================================
/ サイト内の主要なボタンのアニメーションをゆっくりにする
   ========================================= */
.uagb-buttons-repeater__cta,  /* Spectraのボタン */
.wp-block-button__link        /* WordPress標準のボタン */
{
    transition: all 0.6s ease !important; /* 0.6秒かけて変化 */
}




/* =========================================
   ベントー・グリッドデザイン
   ========================================= */
/* ベントーグリッドのアイテム */
.bento-grid-wrapper > * {
  /* ホバーした時滑らかに */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* ホバー時 */
.bento-grid-wrapper > *:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

/* =========================================
/*フルスクリーンにしたいカバー:(理念)で使用中
/*functions.phpにページIDを追加する。タイトルを非表示にする
   ========================================= */
.cover-fullscreen {
  width: 100vw;
  height: 100vh;
}


/* =========================================
   右下に表示する
   ========================================= */
.bottom-link {
    position: absolute !important; /* 絶対配置 */
    bottom: 30px !important;       /* 下から30px浮かす */
    right: 30px;        /* 右から30px浮かす */
    color: white;       /* 文字色 */
}





/* =========================================
   テーブル表のレイアウト
   ========================================= */
/* --- 特定のテーブルを縦スクロールにする --- */
.scroll-y.wp-block-table {
    display: block;          /* 枠として機能させる */
    max-height: 400px;       /* ★ここが高さの上限（好きな数字に変えてね） */
    overflow-y: auto;        /* 縦にはみ出たらスクロール */
    border: 1px solid #ddd;  /* 枠線があると分かりやすい */
}

/* (オプション) 見出し（th）を上に固定する */
/* エクセルみたいに、スクロールしても見出しが残ります */
.scroll-y thead th {
    position: sticky;
    top: 0;
    background-color: #f9fafb; /* 背景色（透けないように必須） */
    z-index: 1;
    box-shadow: 0 2px 2px -1px rgba(0,0,0,0.1); /* 見出しの下に影 */
}

/* テーブルの行番号を自動で振る */
.scroll-y tbody {
  counter-reset: rowNumber;
}

.scroll-y tbody tr {
  counter-increment: rowNumber;
}

.scroll-y tbody tr td:first-child::before {
  content: counter(rowNumber);
  display: block;
  text-align: right;
  color: #666;
}



/* =========================================
   cookie
   ========================================= */
#cookie-notice {
  position: fixed;
  bottom: 20px;
  right: 20px;
  max-width: 320px;
  background: #e8f3ff; /* 明るい爽やかブルー */
  color: #003366; /* 読みやすい濃いめの青 */
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  z-index: 9999;
  font-size: 14px;
  line-height: 1.5;
}

#cookie-notice a {
  color: #0055aa; /* リンクは少し濃い青 */
  text-decoration: underline;
}

#cookie-close {
  margin-top: 10px;
  padding: 6px 12px;
  background: #0055aa; /* ボタンはアクセントの青 */
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

#cookie-close:hover {
  background: #003f7f; /* ホバーで少し濃く */
}