/*--------------------------------
    Base: モバイルファースト
--------------------------------*/
/* CSS Variables */
:root {
    /* Global Settings */
    --color-white: #ffffff;    
    --color-page-top-bg: #22b7e5;
    --color-page-top-hover-bg: #001c81;
}

/* ヘッダー全体 */
.site-header {
  width: 100%;
}
  
/* ロゴエリア */
.logoarea {
  display: flex;
  flex-direction: column; /* モバイルは縦配置 */
  align-items: flex-start;
  justify-content: space-between;
  font-size: 0.8rem;
  padding: 0em 0.5em 0em 0.5em;
  margin: 0.5em 0 0 0;
  width: 100%; /* 親要素の幅を100%にする */
  height: auto;
  gap: 0 2em;
  box-sizing: border-box;
}

.logomark {
  width: 100%;  /* 親要素の幅を100%に設定 */
  height: auto; /* 高さはコンテンツに応じて自動調整 */
}

.logomark a {
  display: inline-block; /* 画像のサイズにリンク範囲を制限 */
}

/* ロゴ画像 */
.logomark img {
  background-color: #fff;
  width: 100%;
  max-width: 450px; /* 最大幅を450pxに変更 */
  height: auto; /* 縦横比を維持して自動調整 */
}
  
  .logomark img:hover {
    opacity: 0.5;
  }
  
  .logomark a:hover {
    background-color: transparent;
  }
  
  /* SNSラップ */
  .sns_wrap {
    display: flex;
    flex-direction: column; /* モバイルはSNSと検索を縦並びに */
    align-self: flex-end; /* 見た目を維持するために調整 */
  }
  
  /* SNSシェア */
  .share {
    display: flex;
    width: 100%;
    justify-content: flex-end;
    margin: 0.5em 0 0.3em 0;
    list-style: none;
    gap: 0 8px;
  }
  
/* SNSシェア（共通スタイル） */
  .tweet_share,
  .fb_share,
  .line_share {
    margin: 0;
    padding: 0;
    line-height: 0;  /* 不要な行間を削除 */
    border: none;
  }

  .line-it-button {
    display: block !important;   /* インライン要素化を防ぐ */
    margin: 0 !important;        /* デフォルトの余白削除 */
    padding: 0 !important;       /* 余白削除 */
    border: none !important;     /* 不要なボーダー削除 */
    box-sizing: border-box;      /* ボックスモデル調整 */

  }
  
  /* カスタム検索エリア */
  /*--------------------------------
    Base: Mobile-first（画面幅 768px 以下：オリジナルのSP用設定）
--------------------------------*/
.c_search {
  display: flex;
  align-items: center;
  justify-content: flex-end; /* "end" と同等 */
  /* オリジナル（SP）: margin: 0.5em 0.1em 0.7em 0em; padding: 0 */
  margin: 0.5em 0.1em 0.7em 0;
  padding: 0;
}

.g_wrap {
  /* オリジナル（SP）では 265px */
  width: 265px;
}

.c_search .gsc-input-box {
 height: 100%;
 padding: 0;
}

.c_search * {
  box-sizing: border-box;
  margin: 0 !important;
}

.c_search .gsc-control-cse {
  background: none;
  border: none;
  padding: 0;
}

.c_search table.gsc-input {
  height: 100%;
}

.c_search td.gsc-input {
  height: 100%;
  padding-right: 0 !important;
}

.c_search .gsib_a {
  height: 100%;
  padding: 3.4px 10px;
}

.c_search input.gsc-input {
  display: block;
  font-size: 16px;
  height: 100% !important;
  -webkit-appearance: none;
  appearance: none;
}

.c_search .gsib_b,
.c_search .gsst_b {
  height: 100%;
  padding: 0;
}

.c_search .gsst_a {
  display: block;
  height: 100%;
  padding: 0;
  text-decoration: none;
}

.c_search .gscb_a {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  /* オリジナルでは height: 100% も指定 */
  height: 100%;
  width: 29px;
  line-height: 1;
}

/* 検索ボタン本体 */
.c_search td.gsc-search-button {
  height: 100%;
}

.c_search .gsc-search-button-v2 {
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  /* SP用（max-width:768px）は角丸 0 6px 6px 0 */
  border-radius: 0 6px 6px 0;
  margin-left: 0;
  width: 31px;
  height: 100%;
  padding: 7px;
  /* 背景色はオリジナルでコメントアウト */
  /* background: #75bc58; */
}

.c_search .gsc-search-button-v2:hover {
  opacity: 0.5;
  /* transition はオリジナルにはなかったので追加せず */
}

.c_search .gsc-search-button-v2:focus {
  outline: none;
  box-shadow: none;
}
  
  /* 公開日・更新日などの例: クラスはそのまま */
  .publish_date,
  .modified_date {
    text-align: right;
    font-size: 0.9rem;
    color: #AAAAAA;
  }
  
  .open {
    color: #1a3e7e;
    margin: 0;
  }
  
  .d_jp {
    font-size: 0.8rem;
  }

  

/* ------------------------------------------
   ページトップ フローティングボタン (タッチフィードバック修正版)
------------------------------------------- */

/* (1) デフォルトスタイル: 全デバイス共通 */
  .page-top-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    width: 45px;
    height: 45px;
    background: transparent;
    color: #fff;
    border: none;
    border-radius: 50%;
    padding: 0;
    font-size: 0.8em;
    font-weight: normal;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    overflow: hidden;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    touch-action: manipulation;
    will-change: transform, opacity;

    /* 初期状態は非表示 (JSで.showクラスを付与して表示) */
    opacity: 0;
    transform: scale(0.5);
    pointer-events: none;
    transition: opacity 0.3s ease,
                transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);

  -webkit-appearance: none;
  appearance: none;
  -webkit-touch-callout: none;
  }

  /* JSによって付与され、ボタンを表示状態にするクラス */
  .page-top-btn.show {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
  }

  /* アイコンは最前面に配置 */
  .page-top-btn > * {
    position: relative;
    z-index: 2;
    padding-bottom: 3px; /* 元のスタイルを維持 */
  }

  /* 疑似要素 ::before でデフォルトのグラデーション背景を描画 */
  .page-top-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(#26ccff, #0026ac);
    opacity: 1;
    transition: opacity .28s ease;
    z-index: 1;
  }

  /* 疑似要素 ::after でホバー/アクティブ時の背景レイヤーを準備 */
  .page-top-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    background: #26ccff;
    opacity: 0;
    transition: opacity .28s ease;
    z-index: 1;
  }

  /* (2) タップ/クリック時のスタイル (:active) (修正箇所) */
  .page-top-btn:active {
    /* 押し込みエフェクト。transitionはベースクラスの定義に従う */
    transform: translateY(2px) scale(0.98);
    /* ★★★ THE FIX: ここにあったtransitionの上書きを削除 ★★★ */
  }
  /* タップ/クリック時にホバー用背景を表示 */
  .page-top-btn:active::after {
    opacity: 1;
  }

  /* (3) フォーカス時のスタイル (アクセシビリティ) */
  .page-top-btn:focus-visible {
    outline: 3px solid #26ccff;
    outline-offset: 3px;
  }

  /* (4) ホバー時のスタイル (マウスを持つデバイス専用) */
  @media (hover: hover) {
    .page-top-btn:hover {
      transform: scale(1.1);
    }
    .page-top-btn:hover::after {
      opacity: 1;
    }
    .page-top-btn:hover:active {
      /* マウスでホバーしながらクリックした時のスタイル */
      transform: scale(1.05) translateY(2px);
    }
  }

  /* (5) タッチデバイス用の保険 (ホバー固定問題対策) */
  /* @media (hover: none) {
    .page-top-btn:hover { transform: none; }
    .page-top-btn:hover::after { opacity: 0; }
  } */


/* いまの hover 無効化を書き換える */
@media (hover: none) {
  /* 押下中(:active)やJS保険(.is-pressed)のときは無効化しない */
  .page-top-btn:hover:not(:active):not(.is-pressed) { transform: none; }
  .page-top-btn:hover:not(:active):not(.is-pressed)::after { opacity: 0; }
}

/* 念のため、押下見た目はこのブロックの“後ろ”に置いて後勝ちにする */
.page-top-btn:active,
.page-top-btn.is-pressed {
  transform: translateY(2px) scale(0.98);
}
.page-top-btn:active::after,
.page-top-btn.is-pressed::after {
  opacity: 1;
}



  /* (6) ダークモード対応 */
  html.dark-mode .page-top-btn::before {
    background: linear-gradient(#1976D2, #22264c);
  }
  html.dark-mode .page-top-btn::after {
    background: #1976D2;
  }
  html.dark-mode .page-top-btn:focus-visible {
    outline-color: #1976D2;
  }

  /* (7) 動きを減らす設定への対応 (アクセシビリティ) */
  @media (prefers-reduced-motion: reduce) {
    .page-top-btn,
    .page-top-btn::before,
    .page-top-btn::after {
      transition: none;
    }
  }

  /* (8) JS用の非表示クラス (念のため元のクラスも定義) */
  .page-top-btn.is-hidden {
      opacity: 0;
      transform: scale(0.5);
      pointer-events: none;
  }





  /* フッター */
  footer {
    /* font-family: Times New Roman, 'Hiragino Mincho ProN', 'Yu Mincho', serif; */
    text-align: center;
    font-size: 0.8rem;
    color: #fff;
    background: #0026ac;
    padding: 8px 0 5px;
    line-height: 1.5;
  }
  
  footer a {
    color: #fff;
    text-decoration: none;
  }
  
  footer a:hover {
    color: #26ccff;
  }
  
  footer li {
    display: inline-block;
  }
  
  footer li::after {
    content: ' ｜ ';
  }
  
  footer li:last-child::after {
    content: '';
  }
  
  footer span {
    display: block;
  }
  
  /*--------------------------------
     Media Queries
  --------------------------------*/
  
  /* タブレットサイズ (768px ~ 1023px) */
/* タブレット（オリジナル：min-width:769px ～ max-width:1366px） */
@media screen and (min-width: 768px) and (max-width: 1023px) {
    .logoarea {
      /* モバイルで縦並びにしていたものを横並びに調整 */
      flex-direction: row;
      align-items: center;
      margin: 0.5em 0 0.5em 0;
    }
  
    .sns_wrap {
      flex-direction: column;
      align-self: center;
      gap: 0.8em 0;
      margin: 0.3em 0;
    }

    .share {
      margin: 0;
    }
  
    .line_share {
      margin: 0;
    }
  
  .c_search {
    /* オリジナル（iPad用）は margin: 1em 0em 0em 0em, padding: 0 */
    margin: 0 2px 0 0;
    padding: 0;
  }
  
  /* iPad用：入力ボックスの高さ固定 */
  .c_search .gsc-input-box {
    border-radius: 0;
    height: 100%;
    padding: 0;
  }
  
  /* ボタン：角の丸みをオフにする */
  /* .c_search .gsc-search-button-v2 {
    border-radius: 0;
  } */
  
  /* ボタン内アイコンのサイズ調整 */
  .c_search .gsc-search-button-v2 svg {
    display: block;
    width: 13px;
    height: 13px;
  }
}


  @media screen and (min-width: 1024px) {
  .logoarea{
    flex-flow: row;
    align-items: center;
    margin: 0.5em 0 0.5em 0;
  }

  .sns_wrap {
    flex-flow: row;
    align-self: center;
    align-items: center;
    gap: 0 8px;
  }

  .share {
    margin: 0;
    padding: 0;
  }

  .c_search {
    margin: 0;
    padding: 0;
  }
  
  .g_wrap {
    width: 254px;
  }
  
  /* ボタン：PC用は角丸 0 */
  .c_search .gsc-search-button-v2 {
    border-radius: 0;
  }

  }