@charset "utf-8";
/* CSS Document */
/* --------------------------------------------------
   英語版専用 SectionTitle の調整
-------------------------------------------------- */

/* セクションタイトルのフォントサイズを Our Services と統一 */
.section-title-wrapper h2,
.section-title-wrapper h3 {
  font-size: 1.8rem !important;   /* 少し小さめに統一 */
  color: #1e88e5 !important;      /* 青で統一 */
  text-align: center;
}

/* サブタイトル（jp）は小さめに */
.section-title-wrapper p {
  font-size: 1rem !important;
  color: #555 !important;
  text-align: center;
  margin-bottom: 20px;
}
/* --------------------------------------------------
   Our Services の SectionTitle を青で強制上書き
   （白になる影響を完全に無効化）
-------------------------------------------------- */
#services .section-title-wrapper h2,
#services .section-title-wrapper h3 {
  color: #1e88e5 !important;
}

#services .section-title-wrapper p {
  color: #555 !important;
}

/* SectionTitleProps に background がついて白文字になる場合の保険 */
#services .section-title-wrapper,
#services .section-title-wrapper * {
  color: inherit !important;
}

/* --------------------------------------------------
   英語トップ：Trusted / Comfortable セクション
-------------------------------------------------- */
/* トップ画像 → TRUST セクションタイトルの距離を広げる */
#feature {
  margin-top: 140px;  /* ← 好みで160〜180pxでもOK */
}
.feature-section {
  width: 100%;
  max-width: 1200px;
  margin: 120px auto 80px;
  padding: 20px;
  display: flex;
  gap: 120px;
  justify-content: center;
  align-items: flex-start;
}

.feature-box {
  flex: 1;
  background: #ffffff;
  border-radius: 12px;
  padding: 30px 40px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  border-top: 4px solid #1e88e5; /* 港交通の青ライン */
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.feature-box:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.feature-box h3 {
  font-size: 1.6rem;
  font-weight: 700;
  color: #1e88e5;
  margin-bottom: 8px;
}

.feature-sub {
  font-size: 0.95rem;
  color: #555;
  margin-bottom: 18px;
}

.feature-box ul {
  list-style: none;
  padding-left: 0;
}

.feature-box ul li {
  position: relative;
  margin: 10px 0;
  padding-left: 26px;
  font-size: 0.95rem;
  color: #333;
}

/* 青い丸アイコン */
.feature-box ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 3px solid #1e88e5;
}
/* --------------------------------------------------
   News リスト（英語トップ）
-------------------------------------------------- */
.section#news .news-list {
  list-style: none;      /* 黒い点を消す */
  margin: 0;
  padding-left: 0;
}

.section#news .news-item {
  list-style: none;
  margin: 6px 0;
}

.section#news .news-item a {
  color: #333;
  text-decoration: none;
}

.section#news .news-item a:hover {
  text-decoration: underline;
}
/* --------------------------------------------------
   News 一覧ページ（/en/news） リストの黒点削除
-------------------------------------------------- */
#news-list-page .news-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

#news-list-page .news-item {
  list-style: none;
  margin: 8px 0;
}

#news-list-page .news-item a {
  color: #333;
  text-decoration: none;
}

#news-list-page .news-item a:hover {
  text-decoration: underline;
}
/* --------------------------------------------------
   英語トップ News セクション（id="news"）
-------------------------------------------------- */
.section#news {
  margin-top: 100px;
  margin-bottom: 80px;
}

/* --------------------------------------------------
   英語ニュース一覧ページ（id="news-list-page"）
-------------------------------------------------- */
#news-list-page {
  margin-top: 200px;
  margin-bottom: 140px; /* 下は少し広めにしてフッターとの距離を確保 */
}
/* --------------------------------------------------
   英語ニュース詳細ページ（id="news-detail"）
   上下の余白を広げて読みやすくする
-------------------------------------------------- */
#news-detail {
  margin-top: 120px;
  margin-bottom: 140px;
}

/* スマホでは少し余白を縮める */
@media (max-width: 768px) {
  #news-detail {
    margin-top: 60px;
    margin-bottom: 80px;
  }
}
/* --------------------------------------------------
   OUR SERVICES（英語）
-------------------------------------------------- */
/* Our Services のセクションタイトルだけ色を上書きする */
#services .section-en {
  color: #1e88e5 !important;  /* 英語タイトルを青 */
}

#services .section-jp {
  color: #555 !important;     /* サブタイトルをグレー */
}
#services {
  margin-top: 120px;
  margin-bottom: 140px;
  text-align: center;
}

.services-lead {
  font-size: 0.95rem;
  color: #555;
  margin-bottom: 28px;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

/* 3カラム */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* ボックス本体 */
.service-card {
  background: #fff;
  border-radius: 12px;
  padding: 24px 26px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  border-top: 4px solid #1e88e5;
  transition: 0.25s ease;
  text-align: left;
  color: #333;
  text-decoration: none;
}

.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

/* タイトル */
.service-card h3 {
  font-size: 1.3rem;
  color: #1e88e5;
  margin-bottom: 6px;
}

/* サブタイトル */
.service-tagline {
  font-size: 0.95rem;
  color: #666;
  margin-bottom: 14px;
}

/* 箇条書き */
.service-card ul {
  list-style: none;
  padding-left: 0;
}

.service-card ul li {
  position: relative;
  padding-left: 22px;
  margin: 8px 0;
}

.service-card ul li::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid #1e88e5;
  position: absolute;
  left: 0;
  top: 7px;
}
/* --------------------------------------------------
   リクルートサイト非表示（英語）
-------------------------------------------------- */
#recruit-banner {
  display: none !important;
}

/* レスポンシブ */
@media (max-width: 1024px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .services-grid {
    grid-template-columns: 1fr;
  }
}

/* レスポンシブ対応：タブレット以下で2列、スマホで1列に */
@media (max-width: 1024px) {
  .services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  #services {
    margin-top: 60px;
    margin-bottom: 80px;
  }
  .services-grid {
    grid-template-columns: 1fr;
  }
}


/* レスポンシブ対応：タブレット以下では2列 → スマホで1列 */
@media (max-width: 1024px) {
  .services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  #services {
    margin-top: 60px;
    margin-bottom: 80px;
  }

  .services-grid {
    grid-template-columns: 1fr;
  }
}

/* レスポンシブ対応：スマホでは余白を小さく */
@media (max-width: 768px) {
  .section#news {
    margin-top: 60px;
    margin-bottom: 60px;
  }

  #news-list-page {
    margin-top: 60px;
    margin-bottom: 80px;
  }
}

/* レスポンシブ対応：スマホでは縦並び */
@media (max-width: 768px) {
  .feature-section {
    flex-direction: column;
    gap: 30px;
  }
}
/* --------------------------------------------------
   Top page sightseeing cards: link style
-------------------------------------------------- */
.slider-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.slider-card-link:hover {
  text-decoration: none;
}

.slider-card-link .slider-card {
  transition: transform 0.2s ease;
}

.slider-card-link:hover .slider-card {
  transform: translateY(-3px);
}

/* --------------------------------------------------
   Top page sightseeing section button
-------------------------------------------------- */
.tour-page-link {
  text-align: center;
  margin-top: 32px;
}

.tour-page-button {
  display: inline-block;
  padding: 12px 28px;
  border-radius: 999px;
  background: #007acc;
  color: #ffffff;
  text-decoration: none;
  font-weight: 700;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.tour-page-button:hover {
  opacity: 0.9;
  transform: translateY(-1px);
  text-decoration: none;
}