@charset "UTF-8";

/* ==================================================
   style.css — 完全版（重複除去済み / スコープ化 / PC & SP 一貫表示）
   備考:
   - ページ固有の料金計算ツールは .nakamuraku-page スコープで保護
   - footer とメディアクエリは統合・整理済み
   ================================================== */

/* ===============================
   全体設定
   =============================== */
html, body {
  width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  height: 100%;
  text-align: center;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: "Noto Sans JP", "Helvetica Neue", "Hiragino Sans", "Meiryo", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #333;
  text-align: center;
  background-image: url("../images/background.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  background-attachment: fixed;
}

*, *::before, *::after {
  box-sizing: border-box;
}

/* モバイルで background-attachment:fixed は問題を起こす端末があるため上書き */
@media (max-width: 768px) {
  body {
    background-attachment: scroll;
    background-position: top center;
  }
}

/* ================================
   にじいろキッズ（中村区ページ専用）
   — 料金計算ツール（ページスコープ）
   ================================ */
.nakamuraku-page .outer-wrapper {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 80vh;
  margin: 32px 0 0 0;
  padding: 0;
  background: none;
  box-sizing: border-box;
  width: 100%;
}

.nakamuraku-page .calc-box {
  background-color: #fffaf0;
  border-radius: 20px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  width: 370px;
  max-width: 96vw;
  min-width: 0;
  padding: 40px 28px 32px 28px;
  text-align: left;
  box-sizing: border-box;
  margin: 0 auto;
  transition: width 0.2s, max-width 0.2s, padding 0.2s;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nakamuraku-page .calc-box h2 {
  font-size: 1.25rem;
  margin-bottom: 20px;
  text-align: center;
}

.nakamuraku-page .calc-box label {
  margin-top: 9px;
  margin-bottom: 3px;
  font-size: 0.98rem;
  display: block;
}

.nakamuraku-page .calc-box select,
.nakamuraku-page .calc-box input[type="text"],
.nakamuraku-page .calc-box input[type="number"],
.nakamuraku-page .calc-box input[type="tel"],
.nakamuraku-page .calc-box input[type="date"] {
  width: 100%;
  padding: 7px;
  font-size: 1rem;
  margin-bottom: 8px;
  border-radius: 8px;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

.nakamuraku-page .time-selector {
  display: flex;
  flex-direction: row;
  gap: 10px;
  margin-bottom: 8px;
  align-items: center;
}

.nakamuraku-page .calc-box button {
  background-color: #a05d00;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 11px 0;
  cursor: pointer;
  width: 100%;
  font-size: 1.07rem;
  margin: 10px 0 0 0;
}

.nakamuraku-page .calc-box button:hover,
.nakamuraku-page .calc-box button:focus {
  background-color: #c46d00;
  outline: none;
}

.nakamuraku-page .calc-box .total {
  margin-top: 18px;
  font-weight: bold;
  font-size: 1.13rem;
  color: #d32f2f;
  text-align: center;
}

/* スマホ調整 - calc-box を PC と同じ見た目に揃える（幅のみ伸縮） */
@media (max-width: 600px) {
  .nakamuraku-page .outer-wrapper {
    min-height: unset;
    margin-top: 8px;
    padding: 0;
  }

  .nakamuraku-page .calc-box {
    max-width: 99vw;
    width: 370px; /* PC見た目に近づけるため固定幅を維持 */
    transform-origin: top center;
    padding: 20px;
    border-radius: 11px;
    font-size: 0.98rem;
  }

  /* 横幅が狭い端末でコンテナが切れる場合に備え、横スクロール許容 */
  .nakamuraku-page .outer-wrapper { padding-left: 10px; padding-right: 10px; overflow-x: auto; }

  .nakamuraku-page .time-selector {
    flex-direction: column;
    gap: 7px;
  }
}

/* ===============================
   テキストボックス共通デザイン
   （サイト共通） 
   =============================== */
.textbox-container {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 32px 0;
  padding: 0 10px;
}

.textbox {
  width: 100%;
  max-width: 700px;
  background: rgba(252, 242, 208, 0.98);
  border: 2px solid #ffe2a8;
  border-radius: 12px;
  box-shadow: 0 4px 18px rgba(255, 216, 77, 0.09), 0 2px 7px rgba(0,0,0,0.04);
  padding: 28px 24px 24px 24px;
  color: #724c19;
  font-size: 1.13rem;
  line-height: 1.7;
  position: relative;
  text-align: left;
  z-index: 2;
  margin: 0 auto;
}

.textbox-title {
  font-size: 1.35rem;
  font-weight: bold;
  color: #e9a93b;
  margin-bottom: 16px;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 2px #fffde0;
  text-align: left;
}

.textbox-subtext {
  font-size: 1.02rem;
  color: #b59441;
  margin-bottom: 12px;
  text-align: left;
}

.textbox::after {
  content: "";
  display: block;
  position: absolute;
  right: -26px;
  bottom: -32px;
  width: 100px;
  height: 100px;
  background: url("../images/himawari-footer.png") no-repeat center/contain;
  opacity: 0.08;
  z-index: 1;
  pointer-events: none;
}

/* sup03（施設概要）専用のテーブル左寄せ */
#sup03 .textbox table,
#sup03 .textbox th,
#sup03 .textbox td {
  text-align: left !important;
  vertical-align: top;
  border: 1px solid #ffe2a8;
  padding: 10px 12px;
}

#sup03 .textbox table {
  width: 100%;
  border-collapse: collapse;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  overflow: hidden;
}

/* ===============================
   施設概要系カスタム
   =============================== */
.facility-summary {
  max-width: 700px;
  margin: 40px auto;
  background: rgba(255,255,255,0.98);
  border-radius: 22px;
  box-shadow: 0 7px 30px rgba(120,200,250,0.09), 0 2.5px 10px rgba(0,0,0,0.08);
  padding: 40px 32px;
  position: relative;
  overflow: hidden;
  border: 3px solid #efc86e;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.facility-summary-textbox {
  width: 100%;
  min-height: 90px;
  background: rgba(252, 242, 208, 0.65);
  border: 2px solid #ffe2a8;
  border-radius: 10px;
  box-shadow: 0 1px 5px rgba(255, 216, 77, 0.08);
  padding: 18px;
  margin-bottom: 24px;
  font-size: 1.08rem;
  color: #724c19;
  position: relative;
  z-index: 2;
  text-align: left;
  line-height: 1.6;
}

.facility-summary::after {
  content: "";
  display: block;
  position: absolute;
  right: -32px;
  bottom: -38px;
  width: 130px;
  height: 130px;
  background: url("../images/himawari-footer.png") no-repeat center/contain;
  opacity: 0.10;
  z-index: 0;
  pointer-events: none;
}

.facility-summary-title {
  font-size: 1.7rem;
  font-weight: bold;
  color: #ef874b;
  margin-bottom: 32px;
  letter-spacing: 0.03em;
  text-shadow: 0 1px 3px #fff4e0;
  z-index: 2;
  text-align: left !important;
}

/* facility list */
.facility-summary-list { list-style: none; padding: 0; margin: 0; display:flex; flex-direction:column; gap:18px; width:100%; }
.facility-summary-list li {
  background: rgba(255,253,239,0.94);
  border: 2px solid #ffe2a8;
  border-radius: 9px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 18px;
  font-size: 1.09rem;
  box-shadow: 0 2px 10px rgba(252,200,103,0.06);
}

/* label/value */
.facility-summary-label { min-width:95px; font-weight:600; color:#febf00; text-align:left; font-size:1.07em; margin-right:16px; }
.facility-summary-value { color:#4b4b47; text-align:left; font-weight:400; word-break:break-word; font-size:1.03em; }

/* ===============================
   セカンダリーセクション
   =============================== */
.section-secondary { max-width:640px; margin:32px auto; background:rgba(255,255,242,0.93); border-radius:16px; padding:30px 23px; border:2px solid #ffe18b; }
.section-secondary-title { font-size:1.25rem; font-weight:bold; color:#a38c40; margin-bottom:18px; }
.section-secondary-list { list-style: disc; padding-left:1.2em; margin:0; }

/* レスポンシブ微調整 */
@media (max-width: 900px) {
  .textbox { max-width: 97vw; padding: 16px 6vw; font-size: 1.02rem; }
}
@media (max-width: 600px) {
  .textbox-container { margin: 16px 0; padding: 0 2vw; }
  .textbox { max-width: 99vw; padding: 9px 3vw; font-size: 0.97rem; border-radius:8px; }
  .textbox-title { font-size: 1.05rem; margin-bottom: 8px; }
}

/* ===============================
   グリッド / 画像系
   =============================== */
.grid.grid-col-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; width: 100%; margin: 0 auto 24px; justify-items:center; align-items:center; overflow-x:auto; }
.grid.grid-col-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; width:100%; margin:0 auto 24px; justify-items:center; align-items:center; overflow-x:auto; }
.grid.grid-col-3 img, .grid.grid-col-2 img { display:block; width:100%; max-width:260px; height:auto; border-radius:8px; object-fit:contain; margin:0 auto; }

@media (max-width: 1200px) { .grid.grid-col-3 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) { .grid.grid-col-2 { grid-template-columns: 1fr; gap:20px; } }
@media (max-width: 1000px) { .grid.grid-col-3 { overflow-x:auto; } }
@media (max-width: 800px) {
  .grid.grid-col-3 { grid-template-columns: repeat(3, minmax(180px, 1fr)); gap:20px; overflow-x:auto; }
}

/* 横スクロールグリッドの微調整 */
.grid.grid-col-3 { overflow-x:auto; grid-auto-flow: column; grid-auto-columns: minmax(180px, 260px); }
.grid.grid-col-3::-webkit-scrollbar, .grid.grid-col-2::-webkit-scrollbar { height:8px; background:#f4eab4; }
.grid.grid-col-3::-webkit-scrollbar-thumb, .grid.grid-col-2::-webkit-scrollbar-thumb { background:#ffeab8; border-radius:6px; }

/* スマホ時画像幅 */
@media (max-width: 600px) {
  .grid.grid-col-3 { gap:20px; grid-template-columns: repeat(3, minmax(140px, 1fr)); grid-auto-columns: minmax(140px, 94vw); }
  .grid.grid-col-3 img { max-width:94vw; width:100%; }
}

/* header top images */
.top-images { display:block; width:80%; height:auto; margin:0 auto; object-fit:contain; }

/* ===============================
   Main（2カラムの画像リンク）
   =============================== */
.grid-container { display:grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap:20px; padding:10px; width:100%; max-width:1000px; margin:20px auto; justify-items:center; align-items:center; text-align:center; }
.information-item { display:flex; flex-direction:column; justify-content:center; align-items:center; border:1px solid #ddd; border-radius:10px; padding:10px; transition: transform .3s, box-shadow .3s; width:100%; }
.information-item:hover { transform: translateY(-5px); box-shadow: 0 4px 10px rgba(0,0,0,0.15); }
.location-image { width:80%; max-width:500px; height:auto; display:block; border-radius:8px; object-fit:contain; margin:0 auto; }

/* ===============================
   フッター（統合済み）
   =============================== */
footer {
  position: relative;
  width: 100%;
  background-image: url("../images/himawari-footer.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center bottom;
  overflow: hidden;
  padding-top: 80px;
  padding-bottom: 220px;
}

.footer-nav {
  position: absolute;
  bottom: 8%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  color: #fff;
  z-index: 10;
  width: 90%;
  font-family: "Noto Sans JP", sans-serif;
}

/* スマホ用フッター挙動 */
@media (max-width: 768px) {
  footer {
    background-image: url("../images/footer_bottom.png");
    background-size: 100% 200%;
    background-repeat: no-repeat;
    background-position: bottom center;
    padding-top: 60px;
    padding-bottom: 320px;
  }

  .footer-nav { bottom: 10%; width: 95%; }
  .footer-row { font-size: clamp(10px, 2.8vw, 14px); white-space: normal; }
  line-height: 1.6;
  .footer-row a { margin: 2px 4px; display:inline-block; }
  footer::before, footer::after { display:none; }
}

/* ===============================
   画像/テーブル/汎用調整
   =============================== */
.location-item { background-color: transparent !important; border:none !important; text-align:center; }

img, video { max-width: 80vw; height:auto; display:block; margin-left:auto; margin-right:auto; text-align:center; }
table img { max-width: 80%; height:auto; display:block; margin:0 auto; text-align:center; }

table, th, td { text-align: center; }

/* 特定領域を左寄せにする例（施設概要等） 
   — それ以外はセンタリング */
p:not(.facility-summary *):not(.facility-summary),
span:not(.facility-summary *):not(.facility-summary),
a:not(.facility-summary *):not(.facility-summary),
li:not(.facility-summary *):not(.facility-summary),
h1:not(.facility-summary *):not(.facility-summary),
h2:not(.facility-summary *):not(.facility-summary),
label:not(.facility-summary *):not(.facility-summary) {
  text-align: center !important;
}

/* sup03 用：テキストボックス化（代替） */
#sup03 .textbox-container { display:flex; justify-content:center; padding: 20px 10px; }
#sup03 .textbox { width:100%; max-width:760px; background: rgba(252,242,208,0.98); border:2px solid #ffe2a8; border-radius:12px; padding:28px; margin:0 auto; }

/* sup03 テーブル微調整（モバイル） */
@media (max-width: 600px) {
  #sup03 .textbox { padding:12px; border-radius:8px; }
  #sup03 .textbox table th, #sup03 .textbox table td { padding:8px 10px; font-size:0.98rem; }
}

/* ===============================
   最終確認用のユーティリティ（必要なら調整）
   =============================== */
/* フォーカスの視認性向上 */
a:focus, button:focus, input:focus { outline: 3px solid rgba(160,93,0,0.15); outline-offset: 2px; }

/* 必要時はここで追加の微調整（保守用コメント） */