@charset "UTF-8";

/* ==========================================================
   SUBPAGES / NEWS / TABLES
   下層ページ・新着情報・画像カラム・表
========================================================== */

/* サブページ共通 */


.two-column {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: flex-start; /* ← 上揃えに変更 */
}


.sub-page .two-column .text h2.custom-h2 {
  margin-top: 0;
}

/* 画像 → テキストの逆並び用 */
.two-column.reverse {
  flex-direction: row-reverse;
}


.two-column .text {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* ← 上に揃える */
}

.two-column .image {
  flex: 1;
  max-width: 100%;
  height: auto;
  display: block;
}


/* 2カラムテキストの下に画像を入れる時 */
.text-column .sub-image {
  margin-top: 1rem; /* テキストとの間に少し余白 */
}

.text-column .sub-image img {
  width: 100%;
  height: auto;
  display: block;
}


.class-info .images,
.uniforms .images {
  display: flex; 
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}

.class-info img,
.uniforms .images img {
  max-width: 32%;
  height: auto;
}

.message-content {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  flex-wrap: wrap;
}

.message-content img {
  width: 150px;
  border-radius: 50%;
}

.message-content .text {
  flex: 1;
}

 .text-right {
  flex: 1;
  text-align:right;
}

/* レスポンシブ */
@media (max-width: 768px) {
  .two-column {
    flex-direction: column;
  }

  

  .message-content {
    flex-direction: column;
    align-items: center;
    text-align: left;
  }

  .message-content img {
    margin-bottom: 1rem;
  }
}

/* ページ全体のセクション幅（サブページ共通） */

.sub-page section {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1rem 1rem;
}	

.page-hero {
  width: 100%;
max-width: 1100px; /* 他セクションと統一 */
  margin: 0 auto;
  max-height: 500px;
  overflow: hidden;
}

.page-hero img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover; /* 画像が縦に長い場合のトリミング調整 */
}


/* サブページ専用 h2 スタイル 【1カラム】*/
.sub-page h2.one-column-h2 {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  font-size: 2rem;
  color: var(--text-color);
  gap: 1.5rem;
  text-align: left;
  margin-bottom: 1rem;
  width: 100%;
}

/* 左の太線 */
.sub-page h2.one-column-h2 .line {
  width: 15px;
  height: calc(1em + 0.5em + 4px);
  background-color: var(--pastel-green);
  flex-shrink: 0;
}

/* テキスト */
.sub-page h2.one-column-h2 .text {
  position: relative;
  display: inline-block;
  line-height: 1.2;
  padding-left: 0.2em;
}

/* テキスト下線はオフ */
.sub-page h2.one-column-h2 .text::after {
  content: none !important;
}

/* ✅ セクション幅に下線を伸ばす */
.sub-page h2.one-column-h2::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 5px;
  width: 100%;
  height: 1.5px;
  background-color: var(--pastel-green);
}
/* サブページ専用 【1カラム】h2部分を画像にした時*/
/* 1カラム専用見出し（mainの中で100%表示） */
.one-column-h2 {
  width: 100%;
  max-width: 1100px;
  margin: 2rem auto 1rem;  /* ← autoで中央に配置！ */
  text-align: left;
}

.one-column-h2 img {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 600px) {
  .one-column-h2 {
    width: 100%;
    max-width: 100%;
  }
}

.img-heading::after {
  content: none !important;
}

.img-heading .text::after {
  content: none !important;
}

.img-heading img {
  width: 100%;
  height: auto;
}

/* 1カラムテキスト用（共通） */
.one-column-text {
  max-width: 90%;
  margin: 0 auto;
}


@media (max-width: 768px) {
  .img-heading img {
    width: 95%;
    margin: 0 auto;
  }
}

/* 新着情報 */
#news {
  display: block;
  width: 100%;
}

.top-news {
  display: block !important; /* ← これが一番重要！ */
  max-width: 1080px;         /* メイン幅に合わせる */
  margin: 1rem auto;        /* 中央寄せ */
  padding: 1.5rem;
  border: 1px solid #00D387;   /* 細めの枠線 */
  border-radius: 8px;
  background-color: #F4FFFC;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.top-news h2 {
  font-size: 1.5rem;
  text-align: center;
  margin-bottom: 1.2rem;
  color: #5a5a5a;
}

.top-news .news-item {
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px dashed #aaa;
}

.top-news .news-item:last-child {
  border-bottom: none;
}

.top-news .news-item h3 {
  font-size: 1.2rem;
  color: #2c3e50;
  margin-bottom: 0.3rem;
}

.top-news .news-item .date {
  font-size: 0.9rem;
  color: #888;
  margin-bottom: 0.5rem;
}

.top-news .news-item .content {
  font-size: 1rem;
  color: #444;
}

/* ▼ 新しいレイアウト用スタイル（ul/li構造） */
.top-news .news-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.top-news .news-list li {
  display: flex;
  gap: 1rem;
  border-bottom: 1px dotted #b5c27b;
  padding: 0.6rem 0;
  align-items: flex-start;
  flex-wrap: wrap;
}

.top-news .news-date {
  color: #a2c158;
  font-weight: bold;
  white-space: nowrap;
  min-width: 110px;
}

.top-news .news-title {
  flex: 1;
  font-weight: bold;
  color: #333;
}

.top-news .news-content {
  flex: 1 0 100%;
  color: #666;
  font-size: 0.95rem;
}

.top-news .news-link {
  display: inline-block;
  margin-top: 0.2rem;
  font-size: 0.85rem;
  color: #1e90ff;
  text-decoration: underline;
}


/* レスポンシブ対応 */
@media screen and (max-width: 768px) {
  .top-news {
    padding: 1rem;
    margin: 2rem 1rem;
  }

  .top-news h2 {
    font-size: 1.5rem;
  }

  .top-news .news-item h3 {
    font-size: 1rem;
  }

  .top-news .news-item .content {
    font-size: 0.95rem;
  }
}


/* サブページ専用 h2 スタイル 【２カラム】*/
.sub-page h2.custom-h2 {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  font-size: 2rem;
  color: var(--text-color);
  margin-bottom: 1rem;
  gap: 1.5rem;
  text-align: left;
  position: relative;
  width: 100%;  /* ← これを追加！ */
}


/* ★ 共通レイアウト（画像用） */
.two-column-images,
.three-column,
.four-column {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1.5rem;
  max-width: 1100px;
  margin: 2rem auto;
  padding: 0 1rem;
}

/* ★ カラムごとの幅設定 */
.two-column-images .item {
  width: 48%;
}

.three-column .item {
  width: 31.5%;
}

.four-column .item {
  width: 23%;
}

.text-image-two-column {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: flex-start; /* ← 上寄せ */
  max-width: 1100px;
  margin: 0 auto 3rem;
}

.text-image-two-column .text-column,
.text-image-two-column .image-column {
  flex: 1 1 48%;
}

.text-image-two-column .image-column img {
  width: 100%;
  height: auto;
  display: block;
}

/* ✅ レスポンシブ対応（スマホ表示） */
@media (max-width: 768px) {
  .text-image-two-column {
    flex-direction: column;
  }
	
  .text-image-two-column .text-column {
    margin-bottom: 1.5rem; /* テキストと画像の間に余白を追加 */
  }

  .text-image-two-column .text-column,
  .text-image-two-column .image-column {
    width: 100%;
  }
}


/* ★ 画像共通スタイル */
.item img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  object-fit: cover;
}

.single-image {
  margin: 2em 0;
  text-align: center; /* 必要なら中央寄せ */
}

/* ★ レスポンシブ：スマホは1列に */
@media (max-width: 768px) {
  .two-column-images .item,
  .three-column .item,
  .four-column .item {
    width: 100%;
  }
}


/* 左の太い線 */
.sub-page h2.custom-h2 .line {
  width: 15px;
  height: calc(1.5em + 4px);
  background-color: var(--pastel-green);
  flex-shrink: 0;
}

/* テキスト */
.sub-page h2.custom-h2 .text {
  position: relative;
  display: inline-block;
  line-height: 1.5;
  padding-left: 0.2em; /* ← 左に少し余白をつけて美しく */
}

/* 下線を「太線の下」からスタートさせる」 */
.sub-page h2.custom-h2 .text::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: -1.2em;  /* ← 横線を左にズラす（太線の位置まで） */
  width: calc(100% + 1.2em);  /* ← 横幅も調整して全体に伸ばす */
  height: 2px;
  background-color: var(--pastel-green);
}

.sub-page section h2.custom-h2::after {
  content: none !important;
}


/* ✅ セクション幅いっぱいの下線 */
.sub-page h2.custom-h2::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--pastel-green);
}


/* 保育内容ページ用：テーブルスタイル */

/* テーブルだけ少し狭めて中央揃え */
table {
  width: 80%;           /* PC時の幅 */
  max-width: 100%;      /* 安全のため */
  margin: 2rem auto;    /* 中央＋上下余白 */
  border-collapse: collapse;
  table-layout: fixed;
  word-wrap: break-word;
}

/* テーブル内セルの見た目 */
th, td {
  border: 1px solid #ccc;
  padding: 0.8rem;
  text-align: left;
}

th {
  background-color: #f7f7f7;
  font-weight: bold;
}

/* スマホ対応：テーブル幅98%に切り替え */
@media (max-width: 768px) {
  table {
    width: 98%;
  }
}

/* クラス紹介：テキスト＋画像並び */


.class-block .text {
  flex: 1;
}

.class-block .image {
  flex: 1;
}



/* スマホ対応 */

	
	
img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  box-sizing: border-box;
}

.image,
.two-column {
  overflow-x: hidden;
}


.one-column-section {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1rem;
}	
	
/* 横幅いっぱいに１枚の画像を貼る時 */	
.single-image {
  width: 100%;
  max-width: 1100px;  /* PC時に大きすぎないよう制限 */
  margin: 2rem auto;
  padding: 0 1rem 1rem;
  box-sizing: border-box; /* ← これ重要！ */
  text-align: center;
}

.single-image img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
}

	@media (max-width: 600px) {
  .single-image {
    padding: 0 0.5rem;
  }
}
	



@media (max-width: 768px) {
  .two-column {
    flex-direction: column;
  }

  
}
	
	

/* 募集内容テーブルの装飾 */
.info-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1.5rem;
}

.info-table th,
.info-table td {
  border: 1px solid #ccc;
  padding: 0.75rem 1rem;
  text-align: left;
  vertical-align: top;
  line-height: 1.5;
}

.info-table th {
  background-color: #f8f8f8;
  font-weight: bold;
}


/* 全ページ共通のリンクスタイル */
a {
  text-decoration: none;       /* アンダーラインを消す */
  color: #007644;  /* 基本の色 */
  transition: color 0.3s ease; /* 色変化をなめらかに */
}

a:hover,
a:focus {
  color: #FF7070;  /* ホバー・フォーカス時の色 */
  text-decoration: underline;  /* ホバー時だけ下線を付けたいなら残す */
}
	
	
@media (max-width: 768px) {
  table td, table th {
    font-size: 0.80rem;
    word-break: keep-all;
    white-space: normal;
  }
}


.topics-list{
    display:grid;
    grid-template-columns:120px 1fr;
    gap:12px 20px;
}

.topics-list dt{
    font-weight:bold;
    color:#666;
}

.topics-list dd{
    margin:0;
}

.topics-list a{
    color:#333;
    text-decoration:none;
}

.topics-list a:hover{
    text-decoration:underline;
}

/* 認定・説明文の中央寄せ */
.nintei p {
    text-align: center;
    max-width: 1080px;
    margin: 0 auto;
    line-height: 1.8;
}