/***********************************
      　　　トップページCSS
***********************************/
/* 全体 */
html {
  font-size: 62.5%;
}
body {
  font-family: sans-serif;
  text-size-adjust: 100%;
  font-size: 1.6rem;
  background-color: #F7F0D4;/* 京王アイボリー */
  font-family: "ヒラギノ丸ゴ ProN W4", "HiraMaruProN-W4", "HG丸ｺﾞｼｯｸM-PRO", "HGMaruGothicMPRO";
}

/* ヘッダー */
header {
  width: 100%;
  position: sticky;
  top: 0;
  background-color: #F7F0D4;
}
a {
  text-decoration: none;
}

/* レスポンシブ対応フォントサイズ */
@media (max-width: 1200px) {
  body {
    font-size: 1.8rem;
    /* 18px */
  }
}

@media (max-width: 992px) {
  body {
    font-size: 1.6rem;
    /* 16px */
  }
}

@media (max-width: 768px) {
  body {
    font-size: 1.4rem;
    /* 14px */
  }
}

@media (max-width: 576px) {
  body {
    font-size: 1rem;
    /* 12px */
  }
}

@media (max-width: 768px) {
  .wrapper nav ul.main-nav li {
    flex: 0 0 auto;
    /* レスポンシブ時は自動幅に戻す */
    width: auto;
  }
}

/*画像サイズ設定*/
.main_contents {
  width: 100%;
  margin: 0 auto;
}

.main_contents img {
  width: 100%;
}

.flexbox {
  display: flex;
  align-items: flex-end;
}

.box_logo {
  width: 55%;
  margin: auto;
}

.box_topimg {
  width: 50%;
  margin: 0 auto;
}

.box_Exhibition {
  width: 53%;
  margin: auto;
}

@media screen and (max-width: 1023px) {
  .flexbox {
    display: block;
  }

  .flexbox .box {
    width: 100%;
    margin: 0 auto;
  }

  .flexbox .box_logo {
    width: 95%;
    margin: 0 auto;
  }

  .box_topimg {
    width: 100%;
    margin: 0 auto;
  }

  .topimg {
    width: 100%;
    margin: 0 auto;
  }

  .box_Exhibition {
    width: 100%;
    margin: auto;
  }

  .Exhibition_inside_box {
    width: 100%;
    margin: 0 auto;
  }
}

/* 文字サイズ */
@media screen and (min-width: 1023px) {
  .car_type {
    font-size: 3rem;
  }
}

@media screen and (max-width: 1023px) {
  .car_type {
    font-size: 2rem;
  }
}

/* トップ画像背景色 */
/*.topimg_background{
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 30px;
  padding-right: 30px;
  background-color: #000000;
  margin: 0 auto;
}*/

/* グラデーションhr */
hr.fading {
  --bg: #F7F0D4;
  /* 背景色（参考） */
  --line-r: 107;
  /* 中央線の RGB (R) */
  --line-g: 79;
  /* 中央線の RGB (G) */
  --line-b: 42;
  /* 中央線の RGB (B) */
  --thickness: 2px;
  --fade-pos: 18%;
  /* 端のフェード幅（%）を調整して滑らかさを変えられます */

  border: 0;
  height: var(--thickness);
  margin: 15px 0;
  background-image:
    linear-gradient(to right,
      rgba(var(--line-r), var(--line-g), var(--line-b), 0) 0%,
      rgba(var(--line-r), var(--line-g), var(--line-b), 0.15) var(--fade-pos),
      rgba(var(--line-r), var(--line-g), var(--line-b), 1) 50%,
      rgba(var(--line-r), var(--line-g), var(--line-b), 0.15) calc(100% - var(--fade-pos)),
      rgba(var(--line-r), var(--line-g), var(--line-b), 0) 100%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  /* レスポンシブに中央や左右の余白を調整したいときは下を変更 */
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

/* 例：細い/濃い線にしたいときのオーバーライド */
hr.fading.thin {
  --thickness: 1px;
}

hr.fading.bold {
  --thickness: 3px;
}

hr.fading.blue {
  --line-r: 34;
  --line-g: 85;
  --line-b: 170;
}

/*告知欄*/
.notice-box {
  max-width: 800px;
  margin: 24px auto;
  /* 中央配置 */
  background-color: #fff8e1;
  /* 優しい黄色系背景 */
  border: 2px solid #e0c15a;
  /* 薄いゴールド枠 */
  border-radius: 16px;
  /* 角丸 */
  padding: 20px 24px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
}

/* タイトル部分（⚫︎告知） */
.notice-title {
  text-align: center;
  font-weight: bold;
  color: #6b4f2a;
  /* 落ち着いたブラウン系 */
  margin-bottom: 12px;
}

/* 本文 */
.notice-text {
  text-align: center;
  /* PCでは中央揃え */
  line-height: 1.8;
  color: #333;
}

/* スマホ（768px以下）では本文を左揃えに */
@media screen and (max-width: 768px) {
  .notice-text {
    text-align: left;
  }
}

/* グローバルメニュー調整用 */
.wrapper {
  position: relative;
  /*←相対位置*/
  box-sizing: border-box;
  /*←全て含めてmin-height:100vhに*/
}

.wrapper nav {
  overflow-x: hidden;
  /* 横スクロールを無効にする */
}

.wrapper nav ul.main-nav {
  display: flex;
  list-style-type: none;
  /* リストのデフォルトスタイルを無効化 */
  padding: 0;
}

.wrapper nav ul.main-nav li {
  flex: 1;
  /* 幅を均等にする */
  text-align: center;
  /* テキストを中央揃えにする */
}

@media screen and (max-width: 768px) {
  .wrapper nav ul.main-nav li {
    font-size: 0.7rem;
  }
}

.heading-wrapper {
  display: flex;
  justify-content: center;
  /* 子要素を中央へ */
}

.heading {
  text-align: left;
  /* テキストは左寄せ */
  width: 17em;
  /* 幅を決める */
}

/* 見出しブロック全体を中央配置（中身は左寄せ） */
.center-block {
  display: flex;
  justify-content: center;
  /* 子要素を中央に */
  align-items: center;
  margin: 2em 0;
}

/*展示室ボタン*/

/* ====== ボタンコンテナ（横並び制御） ====== */
.button-container {
  display: flex;
  justify-content: center;
  /* 中央揃え */
  align-items: flex-start;
  gap: 12px;
  /* ボタン間の隙間 */
  flex-wrap: wrap;
  /* はみ出したら折り返す（安全策） */
  margin: 1em auto;
  max-width: auto;
}

/* ====== 個々のボタン ====== */
.styled-button {
  display: inline-block;
  width: 420px;
  padding: 18px 24px;
  border-radius: 16px;
  text-decoration: none;
  background-color: #2C67B2;
  /* 青ベース */
  color: #FFF;
  /* 通常時：黒文字 */
  border: 2px solid transparent;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
  transition: all 0.3s ease;
}

.styled-button.red {
  display: inline-block;
  width: 420px;
  padding: 18px 24px;
  border-radius: 16px;
  text-decoration: none;
  background-color: #DE8A46;
  /* 青ベース */
  color: #FFF;
  /* 通常時：黒文字 */
  border: 2px solid transparent;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
  transition: all 0.3s ease;
}

.styled-button.green {
  display: inline-block;
  width: 420px;
  padding: 18px 24px;
  border-radius: 16px;
  text-decoration: none;
  background-color: #A2C344;
  /* 緑ベース */
  color: #FFF;
  /* 通常時：黒文字 */
  border: 2px solid transparent;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
  transition: all 0.3s ease;
}

.styled-button.orange {
  display: inline-block;
  width: 420px;
  padding: 18px 24px;
  border-radius: 16px;
  text-decoration: none;
  background-color: #EC8632;
  /* オレンジベース */
  color: #FFF;
  /* 通常時：黒文字 */
  border: 2px solid transparent;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
  transition: all 0.3s ease;
}

.styled-button.yellow {
  display: inline-block;
  width: 420px;
  padding: 18px 24px;
  border-radius: 16px;
  text-decoration: none;
  background-color: #F2A800;
  /* 黄色ベース */
  color: #000;
  /* 通常時：黒文字 */
  border: 2px solid transparent;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
  transition: all 0.3s ease;
}

.styled-button.green2 {
  display: inline-block;
  width: 420px;
  padding: 18px 24px;
  border-radius: 16px;
  text-decoration: none;
  background-color: #00A59E;
  /* 緑ベース */
  color: #FFF;
  /* 通常時：黒文字 */
  border: 2px solid transparent;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
  transition: all 0.3s ease;
}

/* ====== ホバー時の色変化 ====== */
.styled-button:hover {
  background-color: #D32D30;
  /* 赤に変化 */
  color: #fff;
  /* 文字を白く */
  box-shadow: 0 0 12px rgba(211, 45, 48, 0.6);
  border-color: #fff;
  /* 縁は白のまま保持 */
  transform: translateY(-2px);
  /* 少し浮き上がる演出（お好み） */
}

/* ====== ホバー時の色変化 ====== */
.styled-button.full:hover {
  background-color: #CEE0BC;
  /* 薄緑に変化 */
  color: #fff;
  /* 文字を白く */
  box-shadow: 0 0 12px rgba(163, 143, 192, 0.6);
  border-color: #fff;
  /* 縁は白のまま保持 */
  transform: translateY(-2px);
  /* 少し浮き上がる演出（お好み） */
}

/* ====== ホバー時の色変化 ====== */
.styled-button.full2:hover {
  background-color: #D32D30;
  /* 赤に変化 */
  color: #fff;
  /* 文字を白く */
  box-shadow: 0 0 12px rgba(211, 45, 48, 0.6);
  border-color: #fff;
  /* 縁は白のまま保持 */
  transform: translateY(-2px);
  /* 少し浮き上がる演出（お好み） */
}

/* ====== ホバー時の色変化 ====== */
.styled-button.red:hover {
  background-color: #D32D26;
  /* 赤に変化 */
  color: #fff;
  /* 文字を白く */
  box-shadow: 0 0 12px rgba(211, 45, 48, 0.6);
  border-color: #fff;
  /* 縁は白のまま保持 */
  transform: translateY(-2px);
  /* 少し浮き上がる演出（お好み） */
}

/* ====== ホバー時の色変化 ====== */
.styled-button.green:hover {
  background-color: #DADE48;
  /* 緑に変化 */
  color: #FFFFFF;
  /* 文字を白く */
  box-shadow: 0 0 12px rgba(218, 222, 72, 0.6);
  border-color: #FFFFFF;
  /* 縁は白のまま保持 */
  transform: translateY(-2px);
  /* 少し浮き上がる演出（お好み） */
}

/* ====== ホバー時の色変化 ====== */
.styled-button.orange:hover {
  background-color: #E95D19;
  /* 緑に変化 */
  color: #FFFFFF;
  /* 文字を白く */
  box-shadow: 0 0 12px rgba(217, 109, 42, 0.6);
  border-color: #FFFFFF;
  /* 縁は白のまま保持 */
  transform: translateY(-2px);
  /* 少し浮き上がる演出（お好み） */
}

/* ====== ホバー時の色変化 ====== */
.styled-button.yellow:hover {
  background-color: #FCD700;
  /* 緑に変化 */
  color: #000;
  /* 文字を白く */
  box-shadow: 0 0 12px rgba(246, 217, 73, 0.6);
  border-color: #FFFFFF;
  /* 縁は白のまま保持 */
  transform: translateY(-2px);
  /* 少し浮き上がる演出（お好み） */
}

/* ====== ホバー時の色変化 ====== */
.styled-button.green2:hover {
  background-color: #99C41E;
  /* 緑に変化 */
  color: #FFFFFF;
  /* 文字を白く */
  box-shadow: 0 0 12px rgba(218, 222, 72, 0.6);
  border-color: #FFFFFF;
  /* 縁は白のまま保持 */
  transform: translateY(-2px);
  /* 少し浮き上がる演出（お好み） */
}

/* ====== 幅を2つ分にした「全幅ボタン」 ====== */
.styled-button.full {
  width: calc(500px * 2 + 12px);
  /* 2つ分＋間の隙間 */
  background-color: #4999A8;
  /* 青緑ベース */
  max-width: 905px;
}

.styled-button.full2 {
  width: calc(500px * 2 + 12px);
  /* 2つ分＋間の隙間 */
  background-color: #2C67B2;
  /* 青緑ベース */
  max-width: 905px;
}

/* 上段タイトル */
.styled-button .title {
  display: block;
  font-weight: bold;
  font-size: 2rem;
  margin-bottom: 6px;
  text-align: center;
}

/* 下段説明文 */
.styled-button .desc {
  display: block;
  font-size: 1.2rem;
  text-align: center;
  line-height: 1.5;
  color: #FFF;
}

.styled-button.yellow .desc {
  display: block;
  font-size: 1.2rem;
  text-align: center;
  line-height: 1.5;
  color: #000;
}

/* ==== 左上・右上の「白い丸の中に青い丸」 ==== */
.styled-button::before,
.styled-button::after {
  content: "";
  position: absolute;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 29% 33%, /* 通常時：外側方向（左上・右上で反転） */
    #2C67B2 29%,
    #ffffff 28%,
    #ffffff 100%
  );
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.4);
  z-index: 1;
  pointer-events: none;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

/* 左上：青い円が右下の外側を向く */
.styled-button::before {
  top: 0px;
  left: 1px;
  background: radial-gradient(
    circle at 29% 33%, /* 左上外側 */
    #2C67B2 25%,
    #ffffff 28%,
    #ffffff 100%
  );
}

/* 右下：青い円が左上の外側を向く */
.styled-button::after {
  top: 60px;
  right: 1px;
  background: radial-gradient(
    circle at 70% 66%, /* 右上外側 */
    #2C67B2 25%,
    #ffffff 28%,
    #ffffff 100%
  );
}

/* ==== ホバー時 ==== */
.styled-button:hover::before {
  animation: moveDotInwardLeft 5s ease-in-out forwards;
}
.styled-button:hover::after {
  animation: moveDotInwardRight 5s ease-in-out forwards;
}

/* ==== 左上の青丸が内側へ動く ==== */
@keyframes moveDotInwardLeft {
  0% {
    background: radial-gradient(circle at 70% 65%, #2C67B2 25%, #ffffff 28%, #ffffff 100%);
  }
  100% {
    background: radial-gradient(circle at 70% 65%, #2C67B2 25%, #ffffff 28%, #ffffff 100%);
  }
}

/* ==== 右上の青丸が内側へ動く ==== */
@keyframes moveDotInwardRight {
  0% {
    background: radial-gradient(circle at 29% 33%, #2C67B2 25%, #ffffff 28%, #ffffff 100%);
  }
  100% {
    background: radial-gradient(circle at 29% 33%, #2C67B2 25%, #ffffff 28%, #ffffff 100%);
  }
}

/* ====== スマホ対応 ====== */
@media screen and (max-width: 768px) {
  .button-container {
    flex-direction: column;
    align-items: center;
  }

  .styled-button {
    width: 85%;
    max-width: 100%;
    /* はみ出し防止 */
    padding: 12px 20px;
    /* スマホで少し詰める */
  }
  .styled-button.full {
    width: 85%;
    max-width: 100%;
  }
  .styled-button.full2 {
    width: 85%;
    max-width: 100%;
    padding: 12px 20px;
  }
  .styled-button.green {
    width: 85%;
    max-width: 100%;
    padding: 12px 20px;
  }
  .styled-button.green2 {
    width: 85%;
    max-width: 100%;
    padding: 12px 20px;
  }
  .styled-button.red {
    width: 85%;
    max-width: 100%;
    padding: 12px 20px;
  }
  .styled-button.yellow {
    width: 85%;
    max-width: 100%;
    padding: 12px 20px;
  }
  .styled-button.orange {
    width: 85%;
    max-width: 100%;
    padding: 12px 20px;
  }

  /* ====== フォントをスマホ向けに調整 ====== */
  .styled-button .title {
    font-size: 1.2rem;
    /* タイトルを少し小さく */
    margin-bottom: 2px;
  }
  .styled-button .desc {
    font-size: 0.9rem;
    /* 説明文を控えめに */
    line-height: 1.4;
  }
  .styled-button.yellow .desc {
    font-size: 0.9rem;
    /* 説明文を控えめに */
    line-height: 1.4;
  }
}

/* ====== タブレット対応（中間サイズ） ====== */
@media screen and (max-width: 1024px) and (min-width: 769px) {
  .styled-button {
    width: 380px;
  }

  .styled-button.full {
    width: calc(380px * 2 + 12px);
  }

  .styled-button .title {
    font-size: 1.15rem;
  }

  .styled-button .desc {
    font-size: 0.9rem;
  }
}

/* 更新履歴セクション */

.update-modern {
  text-align: center;
  color: #444;
  width: 50%;
  /* 画像幅に合わせる */
  box-sizing: border-box;
  /* パディングを含める */
  margin: 0 auto;
}
.update-modern hr {
  border: none;
  border-top: 1px solid #ddd;
  width: 100%;
  /* 画像幅いっぱいに */
  margin: 8px 0;
  /* 上下マージン調整 */
}
.update-modern span {
  font-weight: bold;
  color: #1a1a1a;
}
@media screen and (max-width: 768px) {
  .update-modern {
    width: 95%;
    /* ほぼ画面幅いっぱいに */
    padding: 0 5%;
    /* 余白を少し確保 */
  }
}

/* お知らせセクション */

.news-section {
  width: 40%;
  max-width: 100%;
  margin: 20px auto;
  box-sizing: border-box;
}
@media screen and (max-width: 768px) {
  .news-section {
    width: 95%;
  }
}
.news-section details {
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 8px 12px;
  background-color: #e0dede;
  cursor: pointer;
}
.news-section summary {
  font-weight: bold;
  outline: none;
  /* デフォルトの枠線を消す */
  list-style: none;
  /* ここがポイント */
}
.news-section summary::-webkit-details-marker {
  display: none;
  /* デフォルトマーカー非表示 */
}
.news-section summary::before {
  content: '▶';
  /* 閉じている時のマーカー */
  display: inline-block;
  margin-right: 8px;
  transition: transform 0.3s;
}
.news-section details[open] summary::before {
  transform: rotate(90deg);
  /* 開いた時にマーカー回転 */
}
.news-section .news-content {
  margin-top: 10px;
  line-height: 1.5;
  color: #333;
}

/* グローバルメニュー トップページ用*/
ul,
li {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul li a {
  display: block;
  color: #FFFFFF;
  padding: 8px;
  /*縦幅*/
  text-align: center;
  text-decoration: none;
}

@media screen and (max-width: 1023px) {
  ul li a {
    padding: 5px;
    /*縦幅*/
  }
}

/* トップ用メニュー 上*/
.main-nav {
  display: flex;
  /* 縦並び修正 */
  justify-content: center;
}

.main-sub {
  width: 100%;
}

.main-nav a {
  margin: 0.5px;
  /* 横幅 */
  border-radius: 2px;
  /*角取り*/
  background: #003F6C;
  color: #FFFFFF;
  display: block;
  text-decoration: none;
}

.main-nav a:hover {
  background: #0077cc;
}

@media screen and (min-width: 1023px) {
  .main-nav a {
    padding: 15px;
    border-radius: 2px;
    /*角取り*/
  }
}

@media screen and (max-width: 480px) {
  .main-nav li a {
    font-size: 8px;
    /* 小さめにする */
    padding: 5px 8px;
  }
}


/* 裏ページ用 */
.other_nav {
  display: flex;
  /* 縦並び修正 */
  justify-content: center;
}

/* 中央配置 */
.center {
  text-align: center;
}

/* 文字サイズ */
.font1 {
  font-size: 120%;
}

/* テキスト系 */
.header_text {
  line-height: 25px;
  /* 行間 */
  /*pタグ小文字問題の解決策*/
  padding-left: 10px;
  padding-right: 10px;
  /*pタグ小文字問題の解決策 ここまで*/
}
@media screen and (max-width: 768px) {
  .header_text {
    text-align: left;
  }
}
.all_page_standard_text {
  width: 900px;
  height: auto;
  margin: 0 auto;
  text-align: justify;
  text-justify: inter-ideograph;
}

/* フッター */
footer {
  width: 100%;
  background-color: #89c7de;
  color: #FFFFFF;
  text-align: center;
  padding: 30px 0;
  /*position: absolute;*/
  /*←絶対位置*/
  bottom: 0;
  /*下に固定*/
}
#div img {
  width: 100%;
}

nav ul li {
  font-family: "ヒラギノ丸ゴ ProN W4", "HiraMaruProN-W4", "HG丸ｺﾞｼｯｸM-PRO", "HGMaruGothicMPRO";
}

a.link {
  text-decoration: none;
}