@charset "utf-8";

/* =========================
   トップページ：メインビジュアル
   ========================= */

/* 背景画像：画面いっぱいに表示（左右の白帯なし） */
.mv {
  position: relative;
  width: 100%;
  height: 1297px;
  overflow: hidden;
  background: url("../images/top/mv.jpg") center center no-repeat;
  background-size: cover;              /* ← ここを cover にすることで左右の白余白を解消 */
}

.mv__inner {
  position: relative;
  max-width: 1000px;                   /* 中央1000px領域 */
  height: 100%;
  margin: 0 auto;
  padding-top: 87px;                   /* mv上端からロゴまで 87px */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ロゴ */
.mv__logo img {
  display: block;
  width: 260px;                        /* 必要なら微調整 */
  height: auto;
}

/* キャッチコピー：ロゴの40px下 */
.mv__catch {
  margin-top: 40px;                    /* ロゴとの間隔 40px */
  font-size: 39px;
  letter-spacing: 0.18em;
  color: #111;
  white-space: nowrap;
}

/* リード文：キャッチの30px下 */
.mv__lead {
  margin-top: 30px;                    /* キャッチとの間隔 30px */
  font-size: 19px;
  line-height: 2;
  color: #111;
  text-align: center;
}

/* 駅情報：mv下端から15px、中央1000px内で右寄せ */
.mv__station {
  position: absolute;
  left: 50%;
  bottom: 15px;
  transform: translateX(-50%);
  width: 1000px;
  max-width: 100%;
  text-align: right;
  color: #fff;

  /* ドロップシャドウをかなり強めにする */
  text-shadow:
    0 0 4px  rgba(0, 0, 0, 1),
    0 0 8px  rgba(0, 0, 0, 1),
    0 0 12px rgba(0, 0, 0, 0.95),
    0 2px 4px rgba(0, 0, 0, 1);
}


/* 「一宮総合駅 徒歩7分」 */
.mv__station-main {
  margin: 0 0 6px;
  line-height: 1.1;
}

.mv__station-main-text,
.mv__station-main-unit {
  font-size: 49px;                     /* テキストと「分」49px */
}

.mv__station-main-num {
  font-size: 90px;                     /* 「7」だけ90px */
  margin: 0 4px;
}

/* 「『一宮総合』駅からJR…直通1駅12分」 */
.mv__station-sub {
  margin: 0;
  line-height: 1.2;
}

.mv__station-sub-small {
  font-size: 30px;                     /* ベース 30px */
}

.mv__station-sub-key {
  font-size: 36px;                     /* 「直通」「駅」「分」36px */
}

.mv__station-sub-digit {
  font-size: 42px;                     /* 数字 42px */
}

/* （新快速利用） */
.mv__station-note {
  margin: 4px 0 0;
  font-size: 18px;
}

/* =========================
   SP レイアウト
   ========================= */

@media (max-width: 768px) {

  .mv {
    height: 100vh;
    min-height: 540px;
  }

  .mv__inner {
    max-width: 100%;
    padding-top: 72px;                 /* SPはヘッダー分だけ少し詰める */
  }

  .mv__logo img {
    width: 190px;
  }

  .mv__catch {
    margin-top: 28px;
    font-size: 20px;
    letter-spacing: 0.14em;
    white-space: normal;
    text-align: center;
    padding: 0 16px;
    box-sizing: border-box;
  }

  .mv__lead {
    margin-top: 20px;
    padding: 0 16px;
    font-size: 13px;
    line-height: 1.8;
    text-align: center;
  }

  .mv__station {
    bottom: 32px;
    width: 100%;
    padding: 0 16px;
    box-sizing: border-box;
  }

  .mv__station-main-text,
  .mv__station-main-unit {
    font-size: 30px;
  }

  .mv__station-main-num {
    font-size: 56px;
  }

  .mv__station-sub-small {
    font-size: 16px;
  }
  .mv__station-sub-key {
    font-size: 18px;
  }
  .mv__station-sub-digit {
    font-size: 20px;
  }

  .mv__station-note {
    font-size: 12px;
  }
}

/* =========================
   メインビジュアル：アクセス時フェードイン
   ========================= */

.mv__logo,
.mv__catch,
.mv__lead {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

/* 表示状態（JS で .mv に mv--show を付ける） */
.mv.mv--show .mv__logo,
.mv.mv--show .mv__catch,
.mv.mv--show .mv__lead {
  opacity: 1;
  transform: translateY(0);
}

/* 時間差（ロゴ → キャッチ → リード） */
.mv.mv--show .mv__logo {
  transition-delay: 0.1s;
}
.mv.mv--show .mv__catch {
  transition-delay: 0.5s;
}
.mv.mv--show .mv__lead {
  transition-delay: 0.9s;
}

/* モーション軽減指定の人にはアニメーション無効化 */
@media (prefers-reduced-motion: reduce) {
  .mv__logo,
  .mv__catch,
  .mv__lead {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* =========================
   トップページ：特徴帯
   ========================= */

.top-features {
  width: 100%;
  background: linear-gradient(90deg, #3b3045, #000); /* グローバルナビと同じ */
  color: #fff;
}

.top-features__inner {
  max-width: 1000px;       /* 左右の白ボーダーまで 1000px */
  margin: 0 auto;
  padding: 20px 0;
  position: relative;
}

/* 左右端の白ボーダー */
.top-features__inner::before,
.top-features__inner::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 60px;
  background-color: rgba(255, 255, 255, 0.8);
}

.top-features__inner::before {
  left: 0;
}

.top-features__inner::after {
  right: 0;
}

.top-features__list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.top-features__item {
  flex: 1 1 0;
  text-align: center;
  position: relative;
  padding: 0 20px;
  box-sizing: border-box;
}

/* 内側の区切り線（中央3本） */
.top-features__item + .top-features__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 60px;
  background-color: rgba(255, 255, 255, 0.8);
}

/* 共通ラベル部：26px */
.top-features__label {
  margin: 0;
  font-size: 26px;
  line-height: 1.2;
}

/* 数値部：ベース26px＋数字30px */
.top-features__value {
  margin: 6px 0 0;
  font-size: 26px;
  line-height: 1.4;
}

.top-features__value-num {
  font-size: 49px;   /* 数字 */
	line-height: 100%;
	letter-spacing: 4px;
}

.top-features__value-unit {
  font-size: 26px;   /* ％ */
}

@media (max-width: 768px) {

  .top-features__inner {
    max-width: 100%;
    padding: 12px 0;
    box-sizing: border-box;
  }

  .top-features__inner::before,
  .top-features__inner::after {
    height: 48px;
  }

  .top-features__list {
    display: block;
  }

  .top-features__item {
    width: 100%;
    padding: 10px 24px;
    margin: 0;
    text-align: center;
    box-sizing: border-box;
  }

  .top-features__item + .top-features__item::before {
    content: "";
    position: absolute;
    left: 24px;
    right: 24px;
    top: 0;
    transform: none;
    width: auto;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.4);
  }

  /* ★ SPでは <br> を消して1行にする */
  .top-features__label br,
  .top-features__value br {
    display: none;
  }

  .top-features__label {
    font-size: 18px;
    line-height: 1.4;
    white-space: normal;   /* 念のため nowrap は解除しておく */
  }

  .top-features__value {
    margin-top: 6px;
    font-size: 18px;
    line-height: 1.4;
    white-space: normal;
  }

  .top-features__value-num {
    font-size: 30px;
    letter-spacing: 2px;
  }

  .top-features__value-unit {
    font-size: 18px;
  }
	
  /* 2つ目と4つ目は、ラベル＋値を1行に並べる */
  .top-features__item:nth-child(2) .top-features__label,
  .top-features__item:nth-child(2) .top-features__value,
  .top-features__item:nth-child(4) .top-features__label,
  .top-features__item:nth-child(4) .top-features__value {
    display: inline;          /* ブロック → インライン */
  }

  .top-features__item:nth-child(2) .top-features__value,
  .top-features__item:nth-child(4) .top-features__value {
    margin-top: 0;            /* 上マージンはいらない */
    margin-left: 0.4em;       /* ラベルとの間を少し空ける */
  }
}

/* =========================
   トップページ：リード文＋お問い合わせ
   ========================= */

.top-lead {
  padding: 80px 0 20px;
  background-color: #fff;
}

.top-lead__inner {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}

/* リード文エリア */
.top-lead__text {
  margin-bottom: 48px;
}

.top-lead__text p {
  margin: 0 0 0.8em;
  font-size: 18px;
  line-height: 2.2;
}

/* 「お電話で〜」ラベル */
.top-lead__tel-label {
  margin: 0 0 12px;
  font-size: 16px;
  letter-spacing: 0.16em;
}

/* 電話番号画像 */
.top-lead__tel {
  margin: 0 auto 32px;
	max-width: 640px;
}

.top-lead__tel img {
  display: block;
  margin: 0 auto;
  height: auto;
  max-width: 100%;
}

/* ここから下は既存の .cta-buttons のスタイルをそのまま使用 */

/* =========================
   SP レイアウト
   ========================= */

@media (max-width: 768px) {

  .top-lead {
    padding: 56px 16px 20px;
  }

  .top-lead__inner {
    max-width: none;
  }

  .top-lead__text {
    margin-bottom: 32px;
  }

  .top-lead__text p {
    font-size: 14px;
    line-height: 1.9;
    text-align: left;
  }

  .top-lead__tel-label {
    font-size: 12px;
    letter-spacing: 0.14em;
  }

  .top-lead__tel {
    margin-bottom: 24px;
  }

  .top-lead__tel img {
    max-width: 100%;
  }
}

/* =========================
   トップページ：INFORMATION
   ========================= */

.top-info {
  padding: 20px 0 80px;
  background-color: #ffffff;
}

.top-info__inner {
  max-width: 940px;        /* 上のボタンと同じ幅 */
  margin: 0 auto;
}

/* 見出し */
.top-info__title {
  margin: 0 0 12px;
  font-size: 16px;
  letter-spacing: 0.22em;
  text-align: center;
}

/* スクロールエリア本体 */
.top-info__body {
  max-height: 90px;         /* ここを超えた分はスクロール */
	overflow-y: scroll;
}

/* リスト・行レイアウト */
.top-info__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.top-info__item {
  display: flex;
  align-items: baseline;
  font-size: 18px;          /* ご指定の18px */
  line-height: 1.8;
}

/* 日付と本文の間隔調整 */
.top-info__date {
  display: inline-block;
  width: 120px;
}

.top-info__text {
  flex: 1;
}

/* =========================
   SP レイアウト
   ========================= */

@media (max-width: 768px) {

  .top-info {
    padding: 32px 16px 56px;
  }

  .top-info__inner {
    max-width: none;
  }

  .top-info__title {
    font-size: 13px;
  }

  .top-info__body {
    max-height: 120px;      /* スマホは少し高さを増やす */
  }

  .top-info__item {
    font-size: 14px;
    line-height: 1.6;
    flex-direction: column; /* スマホは縦積み */
  }

  .top-info__date {
    width: auto;
  }
}
/* =========================
   トップページ：CONTENTS BANNERS
   ========================= */

.top-section {
  background-color: #ffffff;
}

/* バナー同士の間隔 */
.top-section + .top-section {
  margin-top: 120px;
}

/* 背景画像エリア：画面幅100％ */
.top-section__bg {
  width: 100%;
  height: 500px;                    /* PC時の高さ */
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;           /* 横いっぱいに表示 */
  position: relative;               /* READ MORE の絶対配置用 */
  /* overflow: hidden;  ← これを削除（または overflow: visible;） */
}

/* 各バナーの背景画像 */
.top-section--img1 .top-section__bg { background-image: url("../images/top/img1.jpg"); }
.top-section--img2 .top-section__bg { background-image: url("../images/top/img2.jpg"); }
.top-section--img3 .top-section__bg { background-image: url("../images/top/img3.jpg"); }
.top-section--img4 .top-section__bg { background-image: url("../images/top/img4.jpg"); }
.top-section--img5 .top-section__bg { background-image: url("../images/top/img5.jpg"); }

/* テキストブロック：1000px の左寄せ */
.top-section__inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 80px 16px 80px;
  box-sizing: border-box;
  text-align: left;
}

/* 見出し */
.top-section__title {
  margin: -20px 0 10px;             /* デフォルト（PCでは後で上書き） */
  font-size: 60px;
  letter-spacing: 0.24em;
  line-height: 1;
}

/* サブテキスト：24px */
.top-section__lead {
  margin: 0 0 28px;
  font-size: 24px;
  line-height: 1.6;
}

/* READ MORE ボタン（中央寄せ） */
.top-section__more {
  margin: 0;
  text-align: center;
}

.top-section__more-link img {
  display: block;
  margin: 0 auto;
  max-width: 280px;
  width: 100%;
  height: auto;
}


/* =========================
   PC レイアウト
   ========================= */

@media (min-width: 769px) {

  /* 画像内でのテキスト位置を少し上げる */
  .top-section__inner {
    padding: 40px 16px 80px;
  }

  /* 見出しを画像上端よりさらに持ち上げて、白い余白側にはみ出させる */
  .top-section__title {
    margin: -75px 0 10px;
    font-size: 60px;
  }

  /* READ MORE ボタンを下から 56px に固定 */
  .top-section__more {
    position: absolute;
    left: 50%;
    bottom: 56px;
    transform: translateX(-50%);
    width: 100%;
    margin: 0;
    text-align: center;
  }
}


/* =========================
   SP レイアウト
   ========================= */

@media (max-width: 768px) {

  .top-section {
    margin-top: 40px;
  }

  .top-section + .top-section {
    margin-top: 24px;
  }

  /* 高さ最大320px・背景は cover のまま */
  .top-section__bg {
    height: 320px;
    background-size: cover;
  }

  .top-section__inner {
    padding: 56px 12px 56px;
  }

  .top-section__title {
    margin: -10px 0 8px;
    font-size: 32px;
    letter-spacing: 0.18em;
  }

  .top-section__lead {
    font-size: 14px;
    margin-bottom: 18px;
    line-height: 1.7;
  }

  .top-section__more-link img {
    max-width: 220px;
  }

  /* READ MORE ボタンを下から20pxに固定 */
  .top-section__more {
    position: absolute;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    width: 100%;
    margin: 0;
    text-align: center;
  }
	
  .top-section__title,
  .top-section__lead {
    text-shadow:
      0 0 4px rgba(255, 255, 255, 0.85),
      0 0 10px rgba(255, 255, 255, 0.75);
  }
}