@charset "UTF-8";

/* 共通部分 */
html {
  font-size: 100%;
  background-color: rgb(30, 31, 34);
}
body {
  font-family:
    "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", sans-serif;
  line-height: 1.7;
  color: rgb(255, 255, 255);
  background-color: rgb(30, 31, 34);
}
a {
  text-decoration: none;
}
img {
  max-width: 100%;
}

.header-background {
  background-color: rgb(30, 31, 34);
}

.heading-large {
  font-size: 1.5rem;
  text-align: center;
  margin-bottom: 25px;
  margin-top: 0;
  text-shadow: 2px 2px 4px rgb(0, 0, 0);
}
/* ロゴと会社名 */
.logo-group {
  display: flex;
  align-items: center;
  gap: 3px;
  text-decoration: none;
  color: #ffffff;
}
.logo-group img {
  width: 30px;
  height: auto;
}
.company-name {
  font-size: 14px;
  font-weight: bold;
}

/* メニュー */
nav ul {
  display: flex;
  gap: 5px;
  list-style: none;
}
nav a {
  color: rgb(255, 255, 255);
  font-weight: bold;
  font-size: 12px;
}

/* ヘッダー全体 */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
}

/* メイン写真エリア */
.main-visual {
  background-image:
    linear-gradient(
      to right,
      rgba(0, 0, 0, 0.8) 0%,
      rgba(0, 0, 0, 0.4) 40%,
      rgba(0, 0, 0, 0) 70%
    ),
    url(image/office.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 50vh;
  display: flex;
  align-items: center;
}
/* ラッパー */
.main-visual .wrapper {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: flex-start; /* 左揃え */
  padding-left: 10%;
  width: 100%;
  box-sizing: border-box;
}
/* ポップ */
.info {
  color: rgb(255, 255, 255);
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  padding: 2px 8px;
  font-weight: normal;
  border-radius: 100px;
  display: inline-flex;
  align-items: center;
  margin-bottom: 10px;
  font-size: 12px;
}
.info::before {
  content: "•";
  color: #ffffff;
  margin-right: 4px;
}

/* タイトルと文字 */
.main-title {
  color: #ffffff;
  font-size: 26px;
  font-weight: bold;
  font-family: "Philosopher", sans-serif;
  text-align: left;
  margin-bottom: 15px;

  text-shadow: 2px 2px 4px rgb(0, 0, 0);
}
.accent {
  color: rgb(80, 80, 255);
}
.sub-text {
  color: #ffffff;
  font-size: 14px;
  font-weight: normal;
  text-shadow: 2px 2px 4px rgb(0, 0, 0);
  font-family: "Philosopher", sans-serif;
  text-align: left;
  margin-bottom: 15px;
}

/* 見学予約ボタン */
.btn {
  display: inline-block;
  background-color: rgb(0, 96, 221);
  color: #ffffff;
  padding: 8px 100px;
  font-size: 12px;
  border-radius: 4px;
  font-weight: bold;
  transition: 0.2s;
}

.btn:hover {
  background-color: #0090aa;
}

/* 箇条書き全体のスタイル */
.features-list {
  list-style: none; /* 💡ブラウザ特有のズレるポッチ機能を無効化 */
  padding: 0; /* 💡左側の無駄な余白をゼロにして左揃えにする */
  margin: 0 0 20px 0; /* 下のボタンとの間に20pxの隙間を作る */
  color: #ffffff;
  font-size: 14px;
  font-weight: normal;
}

/* 箇条書きの各行のスタイル */
.features-list li {
  position: relative;
  padding-left: 22px; /* 💡チェック画像の分だけ、文字を右にずらす */
  line-height: 1.8;
  text-shadow: 1px 1px 3px rgb(0, 0, 0);
}

/* 💡チェック画像を「左端」に綺麗に配置する魔法 */
.features-list li::before {
  content: "";
  position: absolute;
  left: 0; /* これで他の文字と左端が完全に揃います */
  top: 50%; /* 上下中央に配置 */
  transform: translateY(-50%);
  width: 14px; /* 💡チェックマークの横幅（文字の大きさに合わせる） */
  height: 14px; /* 💡チェックマークの縦幅 */
  background-image: url(image/check.png);
  background-size: contain;
  background-repeat: no-repeat;
}
.info2 {
  width: 100%;
  max-width: 800px;
  font-size: 11px;
  margin: auto;
  padding: 0;
  border-spacing: 0;
  border-top: 1px solid #fff;
}
.info2 th,
.info2 td {
  text-align: center;
  display: block;
  width: 100%;
}
.info2 th {
  text-align: center;
  font-weight: bold;
  padding-top: 7px;
  font-size: 14px;
  text-shadow: 2px 2px 4px rgb(0, 0, 0);
}
.info2 td {
  padding-bottom: 7px;
  border-bottom: 1px solid #fff;
  color: #fff;
  font-weight: normal;
}

.page-footer {
  background-color: rgb(30, 31, 34); /* ヘッダーと同じネイビー */
  color: #ffffff; /* 💡文字をすべて白にして読みやすくする */
  padding: 40px 20px;
}

.copyright {
  background: none; /* 💡犯人！黒い背景を消して透明にする */
  text-align: center; /* 💡文字をフッターの「真ん中」に寄せる */
  font-size: 11px; /* 💡文字を少し小さくして上品にする */
  color: rgba(
    255,
    255,
    255,
    0.5
  ); /* 💡文字を「半透明の白」にして控えめにする */
  margin-top: 50px; /* 💡上のテーブル（電話番号）との間に50pxの心地いい隙間を作る */
}

/* ===================================================
   2ページ目（特徴ページ）専用のスタイル
   =================================================== */

/* 💡 ページ全体の背景を、お気に入りの「#c5c5c5」に完全統一！これで白い余白が消えます */
body.page-light {
  background-color: #c5c5c5;
}

/* 中のコンテナの背景は透明にして、bodyのグレーをそのまま透かします */
.sub-div {
  background-color: transparent;
}

/* タイトルの設定（重複を削除して1つに統合） */
body.page-light .main-title2 {
  color: rgb(30, 31, 34); /* 読みやすい濃いチャコール */
  text-shadow: none; /* 影を消してスッキリ */
  text-align: center; /* 中央寄せ */
  font-size: 28px;
  font-weight: bold;
  font-family: "Philosopher", sans-serif;
  margin-top: 40px;
  margin-bottom: 15px;
}

/* サブタイトルの設定（重複を削除） */
body.page-light .sub-title2 {
  color: #333333; /* 背景のグレーに合わせて少し濃いめにして読みやすく */
  text-shadow: none;
  text-align: center;
  font-size: 14px;
  margin-bottom: 40px;
}

/* カードを並べるグリッド */
.grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr; /* スマホは1列 */
  width: 100%;
  max-width: 840px;
  margin: 0 auto 40px auto; /* グリッドごと画面の真ん中に寄せる */
  padding: 0 20px;
  box-sizing: border-box;
}

/* 白いカードのデザイン */
.item {
  background-color: #ffffff; /* カードは綺麗な白 */
  border: 1px solid #aaaaaa; /* 薄いグレーの枠線をつける */
  border-radius: 12px;
  padding: 24px;
  box-sizing: border-box;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.item img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.item-main {
  color: rgb(30, 31, 34);
  font-weight: bold;
  font-size: 18px;
}

.item-sub {
  color: #666666;
  font-size: 14px;
  line-height: 1.6;
}

.btn1 {
  display: block; /* 💡 block に変えることで、真ん中寄せができるようになります */
  width: fit-content; /* 💡 ボタンの横幅を、文字の長さに自動で合わせます */
  margin: 40px auto 60px auto; /* 💡 上下に程よい隙間を作りつつ、画面の「真ん中」に配置します */
  background-color: rgb(0, 96, 221);
  color: #ffffff;
  padding: 12px 60px; /* 💡 左右100pxは広すぎて崩れる原因になるため、綺麗な60pxに調整します */
  font-size: 14px; /* 💡 文字の大きさを他のボタンと統一します */
  border-radius: 6px; /* 💡 角丸のなめらかさを他のボタンと統一します */
  font-weight: bold;
  text-align: center;
  transition: 0.2s;
}
.btn1:hover {
  background-color: #0090aa;
}

/* 見学予約ボタン */
.btn2 {
  display: block;
  width: 100%;
  margin: auto 0 0 0; /* ボタン自体を画面の真ん中に寄せる */
  background-color: rgb(0, 96, 221);
  color: #ffffff;
  padding: 12px 0;
  font-size: 14px;
  border-radius: 6px;
  font-weight: bold;
  text-align: center;
  box-sizing: border-box;
  transition: 0.2s;
}

.btn2:hover {
  background-color: #0090aa;
}

/* 3ページ目 */
/* ===================================================
   3ページ目：Figma再現用の詳細デコレーション
   =================================================== */

.grid2 {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr; /* スマホは1列 */
  width: 100%;
  max-width: 840px;
  margin: 0 auto 40px auto; /* グリッドごと画面の真ん中に寄せる */
  padding: 0 20px;
  box-sizing: border-box;
}

.item3 {
  background-color: #ffffff; /* ボックスの背景を白にする */
  border: 1px solid #aaaaaa; /* 薄いグレーの枠線をつける */
  border-radius: 12px; /* 角を丸くする */
  padding: 30px 24px; /* ボックスの内側に余白を作る */
  display: flex; /* 中身を縦に綺麗に並べる */
  flex-direction: column;
}

/* 1. マンスリーの背景をネイビーにして、枠線を消す */
.item3.recommend {
  border: 1px solid #003cff; /* 薄いグレーの枠線をつける */
  background-color: rgb(30, 31, 34);
}

/* 2. マンスリーの中の文字を白くする */
.item3.recommend .plan-name {
  color: #ffffff;
}
.item3.recommend .plan-price {
  color: #ffffff;
}
.item3.recommend .plan-status-list li {
  color: #ffffff;
}
/* ===================================================
   マンスリーカード（ダーク背景）専用のグレーアウト設定
   =================================================== */

/* 使えない項目の文字を、ダーク背景に馴染むグレーにする */
.item3.recommend .plan-status-list li.disabled {
  color: #888888;
}

/* 使えない項目の「ー」の色を、強制的に同じグレーにする */
.item3.recommend .plan-status-list li.disabled::before {
  color: #888888 !important;
}
/* 1. ターゲットの青い文字 */
.plan-target {
  color: rgb(0, 96, 221);
  font-size: 12px;
  font-weight: bold;
}

/* 2. プラン名 */
.plan-name {
  color: rgb(30, 31, 34);
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 5px;
}

/* 3. 金額（ドカンと大きく！） */
.plan-price {
  font-size: 38px;
  font-weight: bold;
  color: rgb(30, 31, 34);
}
.plan-unit {
  font-size: 14px;
  color: #666666;
}
.plan-sub-price {
  font-size: 12px;
  color: #666666;
}

/* 4. 箇条書き（チェックマーク化） */
.plan-status-list {
  list-style: none;
  padding: 0;
  margin: 20px 0;
}
.plan-status-list li {
  position: relative;
  padding-left: 20px;
  font-size: 14px;
  color: rgb(30, 31, 34);
  line-height: 2;
}
/* 💡 使える機能の頭に、青いチェックマークを出す（2ページ目の応用！） */
.plan-status-list li::before {
  content: "✓"; /* テキストのチェックマークか、画像（check.png）にしてもOK！ */
  position: absolute;
  left: 0;
  color: rgb(0, 96, 221);
  font-weight: bold;
}

/* 5. 💡【魔法】使えない機能（disabled）の文字を薄くして、横線を引く */
.plan-status-list li.disabled {
  color: #cccccc; /* 文字を薄いグレーに */
}
.plan-status-list li.disabled::before {
  content: "—"; /* チェックマークを「ハイフン」に変える */
  color: #cccccc;
}

/* 6. ドロップイン専用のグレーボタン */
.btn-dropin {
  display: block;
  width: 100%;
  box-sizing: border-box; /* 💡ボタンが箱からはみ出すのを防ぐ */
  margin: auto 0 0 0; /* 💡ボタンを箱の「一番下」に綺麗に揃えて固定する */
  background-color: #eeeeee;
  color: rgb(30, 31, 34);
  padding: 12px 0;
  border-radius: 6px;
  font-weight: bold;
  text-align: center;
  transition: 0.2s;
}
.btn-dropin:hover {
  background-color: #000000;
  color: #ffffff;
}

/* 4ページ目 */

/* お問い合わせフォーム全体の枠 */
.contact-form {
  background-color: #ffffff; /* 💡中身を白にする */
  border: 1px solid #aaaaaa; /* 薄いグレーの枠線をつける */
  border-radius: 12px; /* 角を丸くする */
  padding: 30px 24px; /* 内側の余白 */
  max-width: 600px; /* 💡フォームが横に広がりすぎないように制限 */
  margin: 0 auto 60px auto; /* 💡画面の真ん中に寄せる */
  box-sizing: border-box;
} /* 入力項目ごとの上下のすき間 */
.form-item {
  margin-bottom: 20px; /* 項目ごとに20pxのすき間をあける */
}

/* 「お名前」などの文字のスタイル */
.form-item label {
  display: block; /* 💡文字の後ろで強制改行させる */
  color: rgb(30, 31, 34); /* 濃いチャコールグレー */
  font-weight: bold;
  font-size: 14px;
  margin-bottom: 8px; /* 入力欄とのすき間 */
}

/* 入力欄（1行の箱と、広い箱）の共通スタイル */
.form-item input,
.form-item textarea {
  width: 100%; /* 横幅いっぱいにつかう */
  padding: 10px; /* 箱の内側のすき間 */
  border: 1px solid #cccccc; /* 箱の枠線 */
  border-radius: 6px; /* 箱の角を少し丸くする */
  box-sizing: border-box; /* 横幅からはみ出るのを防ぐ */
  font-size: 16px; /* スマホでズームされない文字の大きさ */
}
/* 必須項目の「*」を赤色にする */
.required {
  color: #ff4d4d; /* 💡パッと目を引く赤色 */
  margin-left: 4px; /* 文字との間に少しだけすき間をあける */
}

/* アクセス */
/* 店舗情報 */
/* 💡料金プランと全く同じ幅で、確実に真ん中寄せにする設定 */
.location {
  display: flex;
  flex-direction: column-reverse; /* 💡スマホでは「縦並び」にする魔法！ */
  gap: 30px; /* 住所と地図の上下のすき間 */
  margin: 40px 20px 60px 20px; /* 左右に20pxの余白を作って、画面端への衝突を防ぐ */
}

/* 📱 スマホ版のGoogleマップのサイズ調整 */
.location iframe {
  width: 100% !important; /* 💡地図がスマホ画面からはみ出さないように横幅いっぱいに */
  height: 300px; /* スマホで見やすい高さに固定 */
}
.location-info1 {
  margin-bottom: 2rem;
}
.location-info1 .info1 {
  padding: 0;
}

.location-map {
  width: 100%;
}
.location-map iframe {
  width: 100% !important; /* HTMLの width="600" を無視して画面に合わせる */
  height: 350px;
  border-radius: 8px;
  border: 1px solid #aaaaaa !important;
}

.page-title,
.heading-large,
.heading-medium {
  font-size: 3rem;
  text-align: center;
}

.info1 {
  width: 100%;
  max-width: 544px;
  margin: 3rem auto;
  padding: 0 1.5rem;
  border-spacing: 0;
  color: rgb(30, 31, 34);
}
.info1 th,
.info1 td {
  border-bottom: 1px solid #000000;
}
.info1 th {
  text-align: left;
  font-weight: normal;
  padding: 1rem;
}
.info1 td {
  padding: 1rem 0;
}
/* ===================================================
   ★PC用（画面幅800px以上）
   =================================================== */
@media (min-width: 800px) {
  header {
    padding: 20px 40px;
  }

  .company-name {
    font-size: 20px;
    font-weight: bold;
  }

  nav ul {
    gap: 20px;
  }
  nav a {
    font-size: 16px;
  }
  .main-visual {
    min-height: 80vh;
  }
  .main-title {
    font-size: 48px;
    margin-bottom: 20px;
  }
  .sub-text {
    font-size: 14px;
    margin-bottom: 25px;
  }
  .btn {
    padding: 12px 60px;
    font-size: 16px;
    margin-top: 50px;
  }
  .features-list {
    margin-top: 2rem;
  }

  /* 💡 PC版のタイトル（頭に body.page-light をつけて強さを合わせて上書き！） */
  body.page-light .main-title2 {
    font-size: 48px;
    margin-bottom: 20px;
  }

  /* PC版のグリッド（2列にして中央寄せ） */
  .grid {
    grid-template-columns: repeat(2, 390px);
    justify-content: center;
  }

  .grid2 {
    grid-template-columns: repeat(3, 390px);
    justify-content: center;
  }

  .location {
    flex-direction: row-reverse; /* 💡PCでは「横並び」に切り替える！ */
    gap: 60px; /* 住所と地図の左右のすき間 */
    max-width: 1210px; /* 料金プランと全く同じ横幅に揃える */
    margin: 50px auto 120px auto; /* コンテンツ全体を画面の真ん中に寄せる */
  }

  /* 💻 PC版のGoogleマップのサイズ調整 */
  .location iframe {
    width: 600px !important; /* PCで見たときのちょうどいい地図の横幅 */
    height: 450px; /* PCで見たときのちょうどいい地図の高さ */
  }

  .location-info1 {
    flex: 1; /* 左側の住所エリアが伸縮して綺麗に収まる */
    margin-bottom: 0;
  }

  .info1 {
    margin: 1.5rem 0; /* 左寄せに合わせて余白をリセット */
  }
  .location-map {
    width: 55%; /* 右側の地図エリアの黄金比率 */
  }
  .location-map iframe {
    height: 400px; /* PCの大画面に合わせて地図を少し高く */
  }
}