/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jun 11 2026 | 06:17:40 */
/* 全体のリセットとフルワイド設定 */
.culture-section-container {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw; padding-top: 80px;
  padding-bottom: 80px;
}

/* 各段の基本スタイル */
.culture-row {
  display: flex;
  flex-wrap: wrap; /* スマホ表示時のレスポンシブ対応 */
  align-items: center;
}

/* 偶数段（2, 4, 6段目）の要素の並び順を反転 */
.culture-row:nth-child(even) {
  flex-direction: row-reverse;
}

/* テキストと画像ブロックの共通幅設定 */
.culture-text, .culture-image {
  flex: 1;
  min-width: 300px; /* スマホで縦並びにするためのトリガー */
  box-sizing: border-box;
}

/* 左右50pxの余白を担保するための設定 */
.culture-text {
  padding: 60px 50px; /* 上下60px、左右50px */
}
.culture-image {
  padding: 0 0px; 
}

/* 画像が枠からはみ出ないように設定 */
.culture-image img {
  width: 100%;
  height: 500px;
  display: block;
  object-fit: cover;
}

/* 配色パターン：1, 3, 5段目 (薄いピンク背景 × #C0392Bテキスト) */
.row-light {
  background-color: #FFF0F2; /* 薄いピンク */
}
.row-light .culture-text h2,
.row-light .culture-text p {
  color: #C0392B;
}

/* 配色パターン：2, 4, 6段目 (#C0392B背景 × 薄いピンクテキスト) */
.row-dark {
  background-color: #C0392B;
}
.row-dark .culture-text h2,
.row-dark .culture-text p {
  color: #FFF0F2; /* 薄いピンク */
}

/* タイトルのデザイン微調整 */
.culture-text h2 {
  font-size: 2rem;
  margin-bottom: 20px;
  font-weight: bold;
}
.culture-text p {
  font-size: 1.1rem;
  line-height: 1.6;
}

/* スマホ表示（画面幅768px以下）のレイアウト微調整 */
@media (max-width: 768px) {
  .culture-row, .culture-row:nth-child(even) {
    flex-direction: column; /* 縦並びに変更 */
  }
  .culture-text {
    padding: 40px 30px; /* スマホ時は少し余白を狭めて見やすく */
  }
  .culture-image {
    padding: 0 30px 40px 30px; /* 下側に余白を持たせる */
  }
}/* ここにCSSコードを追加

例:
.example {
    color: red;
}

CSS の知識に磨きをかけるためにご覧ください。
http://www.w3schools.com/css/css_syntax.asp

コメント終わり */