* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 基本設定 */
body {
  margin: 0;
  padding: 0;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

/* ヘッダー全体のスタイル */
.main-header {
  background-color: #E70801; /* 指定の背景色 */
  width: 100%;
  padding: 20px 0;
}

.header-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ナビゲーションメニュー */
.nav-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-around; /* メニューを均等に配置 */
  align-items: center;
}

.nav-menu li {
  margin: 0 10px;
}

.nav-menu a {
  text-decoration: none;
  color: #ffffff; /* 文字色は白 */
  font-weight: bold;
  font-size: 16px;
  transition: opacity 0.3s;
}

/* マウスを乗せた時の効果 */
.nav-menu a:hover {
  opacity: 0.7;
}

/* メイン写真のエリア */
.main-visual img {
  width: 100%;
  height: auto;
  display: block; /* 画像下の隙間を消す */
}

/* メインビジュアルの親コンテナ */
.main-visual {
  position: relative; /* 子要素の基準点になる */
  width: 100%;
  line-height: 0; /* 画像下の余計な隙間を防止 */
  overflow: hidden;
}

/* 背景写真 */
.bg-photo {
  width: 100%;
  height: auto;
  display: block;
}

/* 上に載せる画像のコンテナ */
.overlay-container {
  position: absolute;
  top: 60%;     /* 上から50%の位置 */
  left: 50%;    /* 左から50%の位置 */
  transform: translate(-50%, -50%); /* 自身のサイズの半分だけ戻して完全に中央へ */
  width: 30%;   /* 上に載せる画像のサイズ（お好みで調整） */
  z-index: 10;  /* 背景より前に出す */
}

/* 上に載せる画像自体の設定 */
.overlay-image {
  width: 100%;
  height: auto;
  /* 必要に応じて影などをつけるとかっこよくなります */
  filter: drop-shadow(0px 4px 10px rgba(0,0,0,0.3));
}

/* セクション全体の余白 */
.about-section {
  padding: 80px 20px;
  text-align: center; /* 全体を中央寄せ */
  background-color: #ffffff;
}

.container {
  max-width: 800px; /* 本文が広がりすぎないように制限 */
  margin: 0 auto;
}

/* フリガナ (ABOUT US) */
.subtitle {
  color: #AFAFAF; /* ヘッダーと同じ赤色をアクセントに */
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 0.1em;
  margin-bottom: 5px;
}

/* 大見出し (当園について) */
.title {
  font-size: 28px;
  font-weight: bold;
  margin-top: 0;
  margin-bottom: 40px;
  position: relative;
  display: inline-block;
}



/* 本文テキスト */
.content {
  line-height: 2.0; /* 行間を広げて読みやすく */
  color: #333333;
  font-size: 16px;
}

.content p {
  margin-bottom: 2em;
}

.about-section.about-bg {
  /* 背景画像の設定 */
  background-image: url('../images/background.png'); /* ここに書き出した画像のパスを入れる */
  background-size: cover;
  background-size: 100% auto; 
  background-position: top center;
  background-repeat: no-repeat;
  /* 重要：文字の量に関わらず、画像の比率に合わせて高さを保つ工夫 */
  width: 100%;
  padding: 100px 0; /* paddingを増やして画像の見える範囲を広げる */
}

/* もし画像の下がまだ切れるなら、ここも調整 */
.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 30px 30px 100px 30px;
}      



.container {
  max-width: 800px;
  margin: 0 auto;
}

/* フリガナ (ABOUT US) */
.subtitle {
  color: #AFAFAF; 
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 0.2em;
  margin-bottom: 15px;
  display: block;
  text-align: center;
}

/* 大見出し (当園について) */
.title {
  font-size: 32px;
  font-weight: bold;
  color: #333333;
  margin-top: 0;
  margin-bottom: 40px;
  text-align: center;
}

/* 本文テキスト */
.content {
  line-height: 2.2;
  color: #444444;
  font-size: 18px;
  text-align: center;
}

/* 完全予約制のラベル設定 */
.info-label {
  background-color: #155221; /* 深緑色 */
  color: #ffffff;           /* 文字は白 */
  display: inline-block;    /* 内容に合わせて横幅を決定（またはwidthで指定） */
  padding: 8px 30px;       /* 上下 左右の余白（ここで長さを調整） */
  margin-top: 30px;         /* 上の文章との間隔 */
  font-weight: bold;
  font-size: 18px;          /* 少し大きめで目立たせる */
  border-radius: 5px;       /* 角を少しだけ丸く（カプセル型にしたい場合は50px） */
  letter-spacing: 0.1em;    /* 文字の間隔を少し開けて高級感を出す */
}

/* セクション全体の余白 */
.nav-cards-section {
  padding: 0px 20px;
  background-color: #ffffff;
}

/* 横並びのレイアウト設定 */
.nav-cards-flex {
  display: flex;
  justify-content: center;
  gap: 100px; /* カード同士の間隔 */
  max-width: 1000px;
  margin: 0 auto;
}

/* 各カード（リンク全体） */
.nav-card {
  text-decoration: none;
  text-align: center;
  flex: 1;
  max-width: 250px; /* 広がりすぎないように制限 */
  transition: transform 0.3s ease;
}

.nav-card:hover {
  transform: translateY(-5px);
}

/* 丸い画像 */
.circle-image {
  width: 220px;
  height: 220px;
  margin: 0 auto 15px;
  overflow: hidden;
  border-radius: 50%;
  border: 3px solid #eee; /* 薄いグレーの枠線（お好みで） */
}

.circle-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 【修正ポイント】ピンクの角丸長方形ボタン */
.card-btn {
  background-color: #F9556F; /* ご指定の背景色 */
  color: #ffffff;           /* 文字は白 */
  font-weight: bold;
  font-size: 16px;
  padding: 12px 10px;       /* 上下 左右の余白 */
  border-radius: 30px;      /* 角を丸くする（高さの半分程度でカプセル型に） */
  display: block;           /* 横長に広げる */
  box-shadow: 0 4px 0 #d6445a; /* 下に少し濃い色で厚み（立体感）を出す */
  transition: background-color 0.3s;
}

/* マウスを乗せた時の色変化 */
.nav-card:hover .card-btn {
  background-color: #ff6b81; /* 少し明るくする */
}

/* お問い合わせセクション全体 */
.contact-section {
  padding: 60px 20px 100px; /* 上に60px、下に100pxの余白 */
  background-color: #ffffff;
  /* text-align: center;      中の要素を中央寄せ */
}

/* リンク兼画像コンテナ */
.contact-banner {
  display: inline-block;   /* 画像のサイズに合わせる */
  max-width: 800px;        /* 画像が大きすぎないように制限（お好みで調整） */
  width: 100%;             /* スマホで横幅いっぱいに */
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* 画像自体の設定 */
.contact-banner img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;    /* 角を少し丸くすると柔らかい印象になります */
  box-shadow: 0 4px 15px rgba(0,0,0,0.1); /* 軽い影で浮かせます */
}

/* マウスを乗せたときの演出 */
.contact-banner:hover {
  opacity: 0.8;            /* 少し透明にする */
  transform: scale(1.02);  /* ほんの少しだけ大きくする */
}

/* お問い合わせセクション全体 */
.contact-section {
    padding: 50px 0;
    max-width: 800px;
    margin: 0 auto;
}

/* h2見出しのスタイル */
.contact-section h2 {
    text-align: center;
    margin-bottom: 40px;
    font-size: 2rem;
    color: #333;
}

/* フォーム全体のスタイル */
.contact-section form {
    display: flex;
    flex-direction: column;
}

/* 各フォーム項目のコンテナ（ラベルと入力欄） */
.contact-section form div {
    margin-bottom: 20px;
}

/* ラベルのスタイル */
.contact-section label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
}

/* 入力欄（input, textarea）のスタイル */
.contact-section input,
.contact-section textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1rem;
}

/* テキストエリアの高さ調整 */
.contact-section textarea {
    min-height: 150px;
    resize: vertical; /* 縦方向のみリサイズ可能に */
}


/* 送信ボタンのスタイル */
.contact-section button {
    padding: 15px 30px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: bold;
}

.contact-section button:hover {
    background-color: #0056b3;
}

.submit-button{
    max-width: 300px;
    margin: 0 auto;
}


/* フッター全体のスタイル */
.main-footer {
  background-color: #E70801; /* 指定の背景色 */
  padding: 15px 0;           /* 上下の余白（一行なので少しスリムに） */
  text-align: center;        /* 中央寄せ */
  width: 100%;
}

/* フッター内のテキストスタイル */
.footer-text {
  color: #ffffff;            /* 文字色は白 */
  font-size: 16px;
  letter-spacing: 0.05em;
  font-family: sans-serif;   /* URLが読みやすいゴシック体系 */
  display: block;            /* しっかり一行で表示 */
}


/* スマホ向けの調整（画面が狭い場合） */
@media (max-width: 768px) {
  .nav-menu ul {
    flex-wrap: wrap; /* 折り返しを許可 */
    justify-content: center;
  }
  .nav-menu li {
    margin: 5px 10px;
  }
  .nav-menu a {
    font-size: 14px;
  }

  .overlay-container {
    width: 50%; /* スマホでは少し大きめに表示 */
  }

  .about-section {
    padding: 50px 20px;
  }
  .title {
    font-size: 24px;
  }
  .content {
    text-align: left; /* スマホでは左寄せの方が読みやすい場合もあります（お好みで） */
    display: inline-block; /* 左寄せにしつつ中央に配置するための設定 */
  }


  .info-label {
    font-size: 18px;
    padding: 12px 30px;     /* スマホでは横幅を少し狭める */
    width: 90%;             /* スマホでは画面幅いっぱいに近くする */
    box-sizing: border-box;
  }
  .nav-cards-flex {
    flex-direction: column;
    align-items: center;
    gap: 50px;
  }
  .nav-card {
    width: 100%;
    max-width: 280px;
  }

  .contact-section {
    padding: 40px 15px 60px;
  }

  .footer-text {
    font-size: 13px;         /* スマホでは少し小さくして一行に収める */
  }
}