@charset "UTF-8";

/* =========================================================
   共通スマートフォン・タブレット用レスポンシブCSS (responsive-common.css)
   ========================================================= */

/* PC用デフォルト：スマホ専用要素（ハンバーガーボタン、SP言語切り替え）を非表示 */
#nav-toggle,
.sp-lang-select {
  display: none;
}

/* 画面幅が1100px未満（タブレット・スマホサイズ）の時のみ、PC用の固定幅設定をリセット */
@media screen and (max-width: 1100px) {
  html, body {
    overflow-x: hidden !important;
  }
  body, #container, #gHeader, #gFooter, #main {
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* 画面幅が768px以下（スマートフォンサイズ）の共通スタイル */
@media screen and (max-width: 768px) {
  /* ヘッダー全体の高さと位置固定（高さ74px固定、下端に1pxの区切り線を追加） */
  #gHeader {
    height: 74px !important;
    padding: 15px 20px !important;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    box-sizing: border-box;
    z-index: 100;
    background-color: #FFF;
    border-bottom: 1px solid #E2E2E8 !important;
  }
  #gHeader.on {
    padding: 15px 20px !important; /* スクロール時の余白変化リセット */
  }

  /* ロゴの配置とサイズ調整（上下マージン10px、横幅140pxに統一） */
  #gHeader .header-logo,
  #gHeader h1 {
    float: none;
    margin-top: 10px !important;
    margin-bottom: 10px !important;
    display: inline-block;
    vertical-align: middle;
  }
  #gHeader .header-logo img,
  #gHeader.on .header-logo img,
  #gHeader h1 img,
  #gHeader.on h1 img,
  #index_title {
    width: 140px !important;
    margin-top: 0 !important;
    margin-left: 0 !important;
  }

  /* トグル領域用コンテナ */
  #gHeader .hBox {
    float: none;
    display: block;
  }

  /* ハンバーガーボタン位置・タップ領域（上端から15px固定） */
  #nav-toggle {
    display: block;
    position: absolute;
    right: 15px;
    top: 15px !important;
    transform: none !important;
    width: 44px;
    height: 44px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 110;
  }

  /* 三本線の生成とアニメーション設定 */
  #nav-toggle span {
    display: block;
    position: absolute;
    left: 10px;
    width: 24px;
    height: 2px;
    background-color: #2b2c31;
    transition: all 0.3s;
  }
  #nav-toggle span:nth-child(1) { top: 14px; }
  #nav-toggle span:nth-child(2) { top: 21px; }
  #nav-toggle span:nth-child(3) { top: 28px; }

  /* メニュー展開時：三本線を「✕」に変形 */
  #gHeader.nav-open #nav-toggle span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  #gHeader.nav-open #nav-toggle span:nth-child(2) {
    opacity: 0;
  }
  #gHeader.nav-open #nav-toggle span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* スマホ用メニュー領域：初期状態は高さ0（ヘッダーと2px重ねる） */
  #gNavi {
    display: block;
    margin-top: 0;
    width: 100%;
    position: absolute;
    top: calc(100% - 2px) !important;
    left: 0;
    background-color: #FFF;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    z-index: 105 !important;
  }

  /* メニュー展開時の高さと境界線・上下余白 */
  #gHeader.nav-open #gNavi {
    max-height: 450px;
    border-top: 1px solid #F0F0F2;
    padding: 15px 0;
  }

  /* スクロール時のズレ・隙間バグを完全に防止 */
  #gHeader.on #gNavi {
    margin-top: 0 !important;
  }

  /* メニュー項目縦並びとタップ領域最適化 */
  #gNavi li {
    display: block;
    margin: 0;
    text-align: center;
    border-bottom: 1px solid #F0F0F2;
  }
  #gNavi li a {
    display: block;
    padding: 15px 0;
    font-size: 15px;
    letter-spacing: 1.5px;
    color: #2b2c31;
  }

  /* スマホ用言語切り替えの表示と配置（ハンバーガーボタンの左横、上下中央寄せ） */
  .sp-lang-select {
    display: block !important;
    position: absolute !important;
    right: 70px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 110 !important;
    font-size: 13px !important;
    letter-spacing: 1.2px !important;
    color: #2b2c31 !important;
  }
  .sp-lang-select a {
    color: #2b2c31 !important;
    text-decoration: none !important;
  }
  .sp-lang-select b {
    color: #2b2c31 !important;
  }

  /* ハンバーガーメニュー内の元の言語切り替え項目を非表示 */
  #gNavi li:last-child {
    display: none !important;
  }

  /* PC用ホバー時画像切り替えの無効化 */
  #gNavi li a .out { display: inline !important; }
  #gNavi li a .over { display: none !important; }

  /* 画像と動画の画面はみ出し防止 */
  img, video {
    max-width: 100%;
    height: auto !important;
  }

  /* フッターのスマホ表示調整 */
  #gFooter .fBox {
    padding: 30px 20px !important;
    text-align: center !important;
  }
  #gFooter .fBox .photo {
    margin-bottom: 10px !important;
    text-align: center !important;
  }
  #gFooter .fBox .photo img {
    margin: 0 auto !important;
    display: block !important;
  }
  #gFooter .fBox .copyright {
    text-align: center !important;
    margin-top: 5px !important;
  }
  #gFooter .pageTop {
    margin: 20px 0 15px !important;
  }
}