@charset "utf-8";
/* CSS Document */

/* --------------------------------------------------
   responsive.css - 共通レスポンシブ対応（〜600px）
-------------------------------------------------- */
@media screen and (max-width: 600px) {

  /* ===============================
     ★ ヘッダーまわり
     （ハンバーガー実装するならここに追記でOK）
  =============================== */

  /* 必要になったときに復活させる用
  .hamburger {
    display: block;
  }

  .main-nav {
    display: none;
  }

  .main-nav.active {
    display: block;
    background: #e0f0ff;
    padding: 10px;
  }

  .main-nav ul {
    flex-direction: column;
    gap: 10px;
  }
  */

  /* ===============================
     ★ トップ動画／画像（HERO）
  =============================== */

  .main-visual {
    height: 420px;
    padding: 0 10px;
  }

  .main-visual video,
  .main-visual img {
    object-fit: cover;
  }

  .main-visual-text {
    margin-top: 14vh;
    padding: 0 10px;
  }

  .main-visual-text h1 {
    font-size: 1.6em;
  }

  .main-visual-text p {
    font-size: 0.95em;
  }

  /* ===============================
     ★ TRUST & COMFORT セクション
     （TRUST & COMFORT の2つのボックス）
  =============================== */

  /* ボックスを1列表示にする想定 */
  #feature .feature-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
  }

  #feature .feature-card {
    max-width: 360px;
    margin: 0 auto;
  }

  /* ===============================
     ★ SERVICE / OUR SERVICES セクション
     （青い円＋サービスカード）
  =============================== */

 /* ===============================
   スマホ幅：サービス背景をシンプルな青に
   （円アニメはタブレット以上でのみ表示）
=============================== */
@media screen and (max-width: 600px) {
  /* 円は非表示にする */
  #services .service-bg-circle {
    display: none;
  }

  /* セクション全体を青背景にして演出を維持 */
  #services {
    background-color: #1e88e5;
  }

  /* 中身のカード周りだけ白い箱が浮いている感じを維持 */
  #services .service-card {
    background: #ffffff;
  }
}

  /* サービスカードは1列表示（日本語6枚／英語3枚共通） */
  #services .services-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
  }

  #services .service-card {
    max-width: 360px;
    margin: 0 auto;
    padding: 20px 18px;
  }

  #services .service-card h3 {
    font-size: 1.15rem;
  }

  #services .service-card ul li {
    font-size: 0.9rem;
  }

 /* ===============================
   ★ 観光スライダー（Tours Slider）
   スマホでは縦に 1 枚ずつ表示
=============================== */
	@media screen and (max-width: 600px) {
  /* 日本語トップ：サービスの円（スマホ用）
     → アニメ用の transform / top / left には触らず、サイズだけ大きくする */
  #services .service-bg-circle {
    width: 220vw;
    height: 220vw;
  }
}

#scroll-slider-section {
  padding: 40px 0;
}

/* 横スクロールは使わない */
.horizontal-scroll-container {
  overflow-x: visible;
  overflow-y: visible;
}

/* track を縦方向に */
.horizontal-scroll-track {
  display: flex;
  flex-direction: column;  /* ← ここがポイント：縦並び */
  gap: 16px;
}

/* カード 1 枚ずつ縦に表示 */
.slider-card {
  flex: 0 0 auto;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
}
/* ===============================
   ツアースライダー（スマホ）
=============================== */
@media screen and (max-width: 600px) {

  /* track の横スクロールオフ */
  .horizontal-scroll-track {
    padding: 0 !important;
    gap: 14px !important;
  }

  /* カード幅を狭くして見切れ防止 */
  .slider-card {
    width: 90% !important;
    margin: 0 auto !important;
  }

  /* 画像にはみ出し防止 */
  .slider-card img {
    width: 100%;
    height: auto;
    border-radius: 12px;
  }
}


  /* ===============================
     ★ NEWS セクション（英日共通で少し文字を小さく）
  =============================== */
  #news .news-list li a {
    font-size: 0.9rem;
  }

  /* ===============================
     ★ フッター
  =============================== */

  .footer-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-top: 8px;
  }

  .footer-inner p {
    font-size: 0.85rem;
  }

  .site-header h2,
  .site-footer h2 {
    font-size: 1.2em;
  }
}
/* ===============================
   ★ 日本語トップ：リクルートバナー（スマホ調整）
=============================== */
#recruit-banner .recruit-banner-wrapper {
  max-width: 100%;
  margin: 0 auto;
  padding: 0 10px;
}

#recruit-banner .recruit-banner-wrapper img {
  width: 100%;
  height: auto;
  display: block;
}
/* --------------------------------------------------
   スマホ固定電話ボタン
-------------------------------------------------- */
.fixed-call {
  display: none;
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 9999;
  background: #007acc;
  color: #fff;
  text-decoration: none;
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: 0 10px 24px rgba(0, 122, 204, 0.35);
  align-items: center;
  gap: 12px;
}

.fixed-call__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.fixed-call__icon-img {
  width: 24px;
  height: 24px;
  display: block;
}

.fixed-call__text {
  display: flex;
  flex-direction: column;
  font-weight: 800;
  font-size: 1.05rem;
  line-height: 1.2;
}

.fixed-call__sub {
  margin-top: 2px;
  font-size: 0.85rem;
  font-weight: 600;
  opacity: 0.9;
}

.fixed-call:active {
  transform: translateY(1px);
  opacity: 0.95;
}

/* レスポンシブ対応：スマホでは固定電話ボタンを表示 */
@media screen and (max-width: 768px) {
  .fixed-call {
    display: flex;
  }

  .main-container,
  .main-fullwidth {
    padding-bottom: 96px;
  }

  .site-footer {
    padding-bottom: 96px;
  }

  .page-top {
    bottom: 92px;
  }
}
/* ======================================================
   日本語トップ専用：SERVICE セクション（スマホ）
   英語サイトには一切影響しない
====================================================== */
@media screen and (max-width: 600px) {

  /* 背景を青に、余白を十分確保 */
  html[lang="ja"] #services {
    background-color: #007acc !important;
    padding: 40px 0 90px !important;
    position: relative;
  }

  /* 円アニメはスマホでは非表示 */
  html[lang="ja"] #services .service-bg-circle {
    display: none !important;
  }

  /* セクションタイトル（SERVICE / サービスのご案内）を白に */
  html[lang="ja"] #services .section-heading .section-en,
  html[lang="ja"] #services .section-heading .section-jp {
    color: #ffffff !important;
  }

  /* 画像の白枠を完全除去 */
  html[lang="ja"] #services .image-wrapper {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
  }

  html[lang="ja"] #services .image-wrapper img {
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  /* カードの白い箱デザインを削除 */
  html[lang="ja"] #services .service-card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
  }

  /* a タグの色指定が強いので完全上書き */
  html[lang="ja"] #services .service-card a,
  html[lang="ja"] #services .service-card a * {
    color: #ffffff !important;
    text-decoration: none !important;
  }

  /* サービス名・説明文も白く統一 */
  html[lang="ja"] #services .service-caption h3,
  html[lang="ja"] #services .service-caption p {
    color: #ffffff !important;
  }
}
/* 1024px 以下はハンバーガー表示・ナビは折りたたみ */
@media screen and (max-width: 1024px) {
  /* PCナビはデフォルト非表示 */
  .main-nav {
    display: none;
    position: absolute;
    top: 60px;      /* ヘッダーの下あたりに展開 */
    left: 0;
    right: 0;
    background: #ffffff;
    z-index: 900;
  }

  /* ★ JS が付ける .active のときだけ表示する */
  .main-nav.active {
    display: block;
  }

  /* ハンバーガーは表示 */
  .hamburger {
    display: block;
  }
}

/* PC 幅では従来通り横並びメニュー＆ハンバーガー非表示 */
@media screen and (min-width: 1025px) {
  .main-nav {
    display: flex;
  }
  .hamburger {
    display: none;
  }
}