/****************************** topimg ******************************/

a.navbar-logo, div.bg-base {
  display: none;
  height: 0;
}

  body#page-body>nav {
    background: none!important;
  }
@media (min-width: 48em) {
  body#page-body>nav {
    display:none!important;
  }
}


    /* body の基本スタイル */
    body#page-body {
      margin-top: 0!important;
      background-color: #FFF; /* 背景が見える場合の背景色 */
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    /* 背景表示用のビューポート (初期画面領域) */
    #background-viewport {
      position: relative; /* 子要素の absolute の基準点 */
      width: 100%;
      height: 100vh; /* 画面全体の高さを確保 */
      overflow: hidden; /* この要素からはみ出したものを非表示にする */
    }

    /* 回転する画像コンテナ */
    #rotating-image-container {
      position: absolute;
      /* ★ 修正: デフォルトのtopを元に戻す */
      top: 160px; /* デフォルトは160px */
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 0; /* 重なり順: 一番後ろ */
      /* 回転の中心軸を調整 */
      -webkit-transform-origin: 50% calc(50% + 40vh);
      -moz-transform-origin: 50% calc(50% + 40vh);
      transform-origin: 50% calc(50% + 40vh);
      /* 回転アニメーションの設定 */
      transition: transform 1s ease-in-out;
      -webkit-transition: -webkit-transform 1s ease-in-out;
      -moz-transition: -moz-transform 1s ease-in-out;
    }

    /* 実際に画像を持つ要素 */
    #rotating-image {
      position: absolute;
      height: 300vh; /* 回転しても画面を覆う十分な大きさ */
      width: 300vh;  /* 回転しても画面を覆う十分な大きさ */
      top: -60vh; /* デフォルトのtop位置 */
      left: 50%;
      -webkit-transform: translateX(-50%); /* デフォルトは中央揃えのみ */
      -moz-transform: translateX(-50%);
      transform: translateX(-50%);
      /* 背景画像の設定 */
      background-image: url('/assets/img/topimg/topimg_bg_l.jpg');
      background-size: cover; /* ★デフォルトは cover */
      background-position: center center;
      background-repeat: no-repeat; /* ★ no-repeat を明示 */
    }

    /* --- 追加要素のスタイル --- */

    /* ① タイトル画像 */
    #title-image {
        position: absolute;
        top: 20px; /* 上からの余白 */
        left: 20px; /* 左からの余白 */
        z-index: 2; /* 他のボタン等より手前 */
        width: 300px;
        max-width: 20vw; /* 最大幅をビューポート基準に */
        height: auto;
        transition: filter 0.3s ease;
        -webkit-transition: filter 0.3s ease;
    }
    #title-image:hover {
        -webkit-filter: brightness(1.1);
        filter: brightness(1.1); /* 少し明るく */
    }


    /* ②③ 配置用コンテナ (中央画像) */
    #center-image-container {
        position: absolute;
        top: 100%; /* 下端に配置 */
        left: 50%; /* 水平中央 */
        transform: translate(-50%, -100%); /* Y軸方向に自身の高さ分上に移動 */
        z-index: 1; /* 回転背景より手前 */
        width: 65vw; /* ビューポート幅の50% */
        height: 65vh; /* ビューポート高さの50% */
        pointer-events: none; /* コンテナ自体はクリックイベントを拾わない */
    }

    /* 中央画像共通スタイル */
    #center-image-container img {
        position: absolute;
        top: 0; /* コンテナ基準 */
        left: 0; /* コンテナ基準 */
        width: 100%; /* コンテナ幅に合わせる */
        height: auto; /* 高さは自動調整 */
        max-width: 100%; /* 最大幅 */
        max-height: 100%; /* 最大高さ */
        opacity: 0; /* ★JSで制御するため初期値0 */
        object-fit: contain; /* アスペクト比を保ち、コンテナ内に収める */
        transition: opacity 0.5s ease-in-out; /* フェード効果 */
        -webkit-transition: opacity 0.5s ease-in-out;
    }

     /* ② 丸ボタン共通スタイル */
     .circle-button-link {
        position: absolute;
        z-index: 2;
        opacity: 0; /* ★ デフォルトは非表示(透明) */
        pointer-events: auto;
        cursor: pointer;
        display: block;
        /* ★ 追加: 通常時はアニメーション時間を0にする */
          transition-property: opacity, transform, left, right, top, bottom, width, height;
          transition-duration: 0s;
          /* ★ アニメーションさせない */
     }

     /* ★ 表示状態クラス (.is-visibleが付いた時にアニメーション) */
     .circle-button-link.is-visible {
         opacity: 1;
         transition-property: opacity, transform, left, right, top, bottom, width, height;
         transition-duration: 0.3s, 0.5s, 0.5s, 0.5s, 0.5s, 0.5s, 0.5s, 0.5s;
         transition-timing-function: ease-in-out;
     }

     /* ★ アニメーション中はクリック不可にするスタイル */
     .animating .circle-button-link {
         pointer-events: none;
         cursor: default;
     }

     .circle-button-link img {
        display: block;
        width: 100%;
        height: 100%;
        opacity: 1;
        transition: filter 0.3s ease; /* filterの変化をアニメーション */
        -webkit-transition: filter 0.3s ease;
     }

     /* ★★★ 修正: 丸ボタン共通ホバーエフェクトを白く光るように変更 ★★★ */
     .circle-button-link:hover img {
        /* 白いドロップシャドウを複数重ねて光彩効果を出す */
        -webkit-filter: drop-shadow(0px 0px 15px rgba(255, 255, 255, 0.9)) drop-shadow(0px 0px 5px rgba(255, 255, 255, 0.7));
        filter: drop-shadow(0px 0px 15px rgba(255, 255, 255, 0.9)) drop-shadow(0px 0px 5px rgba(255, 255, 255, 0.7));
        /* 既存の brightness/saturate は削除 */
     }

     /* ★ボタンの状態別スタイル (デフォルト) */
     .circle-button-link.pos-center {
        left: 50%;
        bottom: 50px; /* 下から50px */
        width: 120px;
        height: 120px;
        transform: translateX(120px) scale(1); /* 中央から少し右へ */
     }
      .circle-button-link.pos-left {
        left: 60px; /* 左から60px */
        bottom: 30%; /* 下から30% */
        width: 80px;
        height: 80px;
        transform: translateY(-50%) scale(1); /* 垂直方向中央揃え */
     }
      .circle-button-link.pos-right {
        right: 60px; /* 右から60px */
        bottom: 30%; /* 下から30% */
        width: 80px;
        height: 80px;
        transform: translateY(-50%) scale(1); /* 垂直方向中央揃え */
     }

    /* ③ Gボタン用コンテナ */
    #g-buttons-container {
        position: absolute;
        width: 300px;
        max-width: 20vw; /* 最大幅をビューポート基準に */
        top: 20px;
        right: 20px;
        z-index: 2;
        display: flex;
        flex-direction: column;
        gap: 10px;
        opacity: 1;
        transition: opacity 0.3s ease-in-out;
        -webkit-transition: opacity 0.3s ease-in-out;
    }

    /* アニメーション中はGボタンコンテナを少し薄くしてクリックも無効化 */
    body.animating #g-buttons-container {
        opacity: 0.5;
        pointer-events: none;
    }

    /* Gボタンリンクスタイル */
    #g-buttons-container a {
        display: block;
        width: 100%;
        height: auto;
        cursor: pointer;
        transition: filter 0.3s ease;
        -webkit-transition: filter 0.3s ease;
        text-decoration: none;
    }
    /* Gボタン画像スタイル */
    #g-buttons-container a img {
        display: block;
        width: 100%;
        height: auto;
    }
    /* Gボタン画像のホバーエフェクト */
    #g-buttons-container a:hover img {
        -webkit-filter: brightness(0.8) saturate(1.5);
        filter: brightness(0.8) saturate(1.5);
    }

    /* 右下固定ボタンコンテナ */
    #fixed-bottom-right-buttons {
        position: absolute;
        bottom: 0;
        right: 20px;
        z-index: 2;
        display: flex;
        flex-direction: row;
        align-items: flex-end;
        gap: 0;
    }

    /* 右下固定ボタンのリンクと画像スタイル */
    #fixed-bottom-right-buttons a {
        display: block;
        width: 180px;
        max-width: 13vw; /* 最大幅をビューポート基準に */
        height: auto;
        cursor: pointer;
        transition: filter 0.3s ease;
        -webkit-transition: filter 0.3s ease;
        text-decoration: none;
    }
    #fixed-bottom-right-buttons a img {
        display: block;
        width: 100%;
        height: auto;
    }
    /* 右下固定ボタンのホバーエフェクト */
    #fixed-bottom-right-buttons a:hover img {
       -webkit-filter: brightness(0.8) saturate(1.5);
       filter: brightness(0.8) saturate(1.5);
    }


    /* メインコンテンツ */
    main {
       position: relative;
       z-index: 3;
       padding-top: 0rem;
       padding-bottom: 0rem;
       background-color: white;
    }

    /* スクロール確認用のダミーコンテンツ */
    .dummy-content {
        height: 150vh;
        background-color: #e9ecef;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 2rem;
        color: #6c757d;
    }

    /* ★★★ スマートフォン向けスタイル (max-width: 48em) ★★★ */
    /* 48em は約 768px (1em = 16px の場合) */
    @media (max-width: 48em) {


    /* 背景表示用のビューポート (初期画面領域) */
    #background-viewport {
        margin-top: -15vh;
    }

        /* ★追加: スマホ時に回転コンテナ全体を上に移動 */
        #rotating-image-container {
            top: 30px; /* デフォルトの160pxから変更 */
        }

        #rotating-image {
            /* ★ 修正: background-size で縮小 */
            background-size: 55% 55%;
        }

        /* 中央画像コンテナのサイズ調整 */
        #center-image-container {
            width: 80vw;  /* 幅を広げる */
            height: 45vh; /* 高さを少し抑える */
        }

        /* タイトル画像の最大幅調整 */
        #title-image {
             max-width: 50vw; /* スマホでは大きめに */
             top: 150px;
        }
        /* Gボタンコンテナの最大幅調整 */
         #g-buttons-container {
             /* max-width: 40vw; */
             display: none; /* スマホでは非表示にする例 */
         }


        /* 丸ボタンの位置とサイズ調整 */
        .circle-button-link.pos-center {
            left: 50%;
            bottom: 50px; /* 下からの距離を調整 */
            width: 100px;  /* サイズを小さく */
            height: 100px;
            transform: translateX(-50%) scale(1); /* 中央揃えに変更 */
        }
        .circle-button-link.pos-left {
            left: 15px; /* 左からの距離を縮める */
            bottom: 30%; /* 下からの距離を%で調整 */
            width: 75px; /* サイズを小さく */
            height: 75px;
            transform: translateY(0%) scale(1); /* Y方向のtransformをリセット */
        }
        .circle-button-link.pos-right {
            right: 15px; /* 右からの距離を縮める */
            bottom: 30%; /* 下からの距離を%で調整 */
            width: 75px; /* サイズを小さく */
            height: 75px;
            transform: translateY(0%) scale(1); /* Y方向のtransformをリセット */
        }

        /* ★★★ 修正: 右下固定ボタンのスマホレイアウト ★★★ */
        #fixed-bottom-right-buttons {
            display: flex; /* ★ 表示させる */
            flex-direction: row; /* 横並び */
            width: 100%; /* 幅を100%に */
            bottom: 0;   /* 下端に配置 */
            right: 0;    /* 右端をリセット */
            left: 0;     /* 左端もリセット */
            gap: 0;      /* 隙間をなくす */
            /* align-items: flex-end; */ /* 不要 */
        }
         #fixed-bottom-right-buttons a {
             width: 50%; /* ★ 幅を50%に */
             max-width: none; /* ★ 最大幅制限を解除 */
             /* ★ 修正: padding を削除 */
             /* padding: 5px; */
             box-sizing: border-box; /* パディングを幅に含める */
         }
         #fixed-bottom-right-buttons a img {
             /* 画像スタイルは変更なし */
         }


    } /* @media終了 */