/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
       ▼ 【PC表示時】のベーススタイル（元の設定を維持）
    ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

    /* メニュー全体のコンテナ（右下に固定） */
    .floating-menu-container {
      position: fixed;
      bottom: 50px; /* PCでは広めの位置 */
      right: 50px;
      display: flex;
      align-items: center;
      z-index: 1000;
      pointer-events: none;
    }

    /* ボタンとメニューの共通クリック有効化 */
    .floating-menu-container * {
      pointer-events: auto;
    }

    /* 展開する横長メニュー */
    .horizontal-menu {
      display: flex;
      gap: 40px; /* PCではゆったり */
      background-color: #ffffff;
      padding: 10px 25px;
      border-radius: 30px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      margin-right: 15px;
      
      /* アニメーション用の初期状態 */
      opacity: 0;
      transform: scaleX(0);
      transform-origin: right center;
      transition: transform 0.3s ease, opacity 0.3s ease;
    }

    /* SNSアイコン（リンク）の基本スタイル */
    .horizontal-menu a {
      color: #666666;
      font-size: 50px; /* PCでは大きく表示 */
      text-decoration: none;
      transition: transform 0.2s, color 0.2s;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    /* ホバー（タップ）時に各SNSのブランドカラーにする演出 */
    .horizontal-menu a.icon-instagram:hover {
      color: #e1306c;
      transform: scale(1.1);
    }
    .horizontal-menu a.icon-facebook:hover {
      color: #1877f2;
      transform: scale(1.1);
    }
    .horizontal-menu a.icon-x:hover {
      color: #000000;
      transform: scale(1.1);
    }

    /* 固定ボタン（＞） */
    .menu-toggle-btn {
      width: 50px;
      height: 50px;
      background-color: #00948C;
      color: white;
      border: none;
      border-radius: 50%;
      cursor: pointer;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      font-size: 18px;
      font-weight:lighter;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.3s ease, background-color 0.2s;
    }
    .menu-toggle-btn:hover {
      background-color: #75C7C5;
    }

    /* ーーー アクティブ（展開時）の状態 ーーー */
    .floating-menu-container.is-active .horizontal-menu {
      opacity: 1;
      transform: scaleX(1);
    }

    /* ＞ ボタンを回転させる効果 */
    .floating-menu-container.is-active .menu-toggle-btn {
      transform: rotate(180deg);
      background-color: #333333;
    }


    /* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
       ▼ 【スマホ表示時（画面幅768px以下）】の調整
    ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
    @media screen and (max-width: 768px) {
      /* 1. 常駐位置を画面の端に寄せる（押しやすさとコンテンツの邪魔にならない配慮） */
      .floating-menu-container {
        bottom: 20px;
        right: 20px;
      }

      /* 2. メニュー全体のサイズをコンパクトに */
      .horizontal-menu {
        gap: 20px; /* アイコン同士の間隔を狭く */
        padding: 8px 18px; /* 内側の余白を小さく */
        border-radius: 25px;
        margin-right: 10px;
        
        /* スマホの小さな画面でも左側にはみ出さないようブレーキをかける */
        max-width: calc(100vw - 100px);
        overflow-x: auto;
      }

      /* 3. アイコンサイズをスマホに最適な大きさに縮小 */
      .horizontal-menu a {
        font-size: 26px; /* 50pxだと大きすぎるため、タップしやすい26px前後に調整 */
      }
      
      /* スマホはホバーがないため、アクティブ（タップ中）の微細な変化に変更可能（現状は引き継ぎ） */
    }