@charset 'utf-8';

.culture_wrap { display:flex; flex-wrap:wrap; gap:50px; margin:40px 0 100px 0;}
@media screen and (min-width:768px) {
.culture_wrap { margin:80px 0 200px 0; gap:100px; }
.crop-round img { height:71vh; }
}

.culture { width:100%; display:flex; flex-wrap:wrap; }
.culture li { width:100%; }
.culture li img { width:100%; }
.culture li p { text-align: justify; padding-bottom:24px; }
.culture li h3 { width:100%; font-size:24px; color:#000; /*border-bottom:1px solid #000; */padding-bottom:10px;  }
.culture li h3 span { color:#0D4D3B; margin-right:20px; }
.h2_en { font-size:32px; }
h2.h2_obi { font-size:35px; }
.h2_en {
  width: 100%;
  white-space: nowrap;
  font-size: clamp(24px, 6vw, 100px);
}
@media screen and (min-width:768px) {
  .h2_en {
    width: 100%;
    white-space: nowrap;
    font-size: clamp(28px, 9vw, 100px)
  }
  .culture { justify-content: space-between; }
  .culture li { width:48%; }
  .culture li h3 { font-size:32px; margin-bottom:10px; }
  .culture li h3 span { color:#0D4D3B; margin-right:20px; }
  .culture li p { font-size:18px; font-weight:600; }
  .culture_wrap .culture:nth-child(even) {flex-direction: row-reverse;}
  h2.h2_obi { font-size:60px; }

}

.lead { width:100%; display:inline-block; margin-top:40px; font-size:18px; font-weight:bold; }
@media screen and (min-width:768px) {
.lead { margin-top:80px; }
}

.culture_photo {margin:40px auto 0 auto;}
@media screen and (min-width:768px) {
  .culture_photo {margin:100px auto 0 auto;}
}

.photoGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)); /* 4列 */
  grid-auto-rows: 160px; /* 1マスの高さ。好みで調整 */
  gap:4px;
}

/* 各アイテムの共通スタイル */
.photoGrid li {
  list-style: none;
  overflow: hidden;
  opacity: 0;                     /* 最初は非表示 */
  transform: translateY(20px);    /* 下からふわっと */
  transition: opacity .7s ease, transform .7s ease;
}

.photoGrid li img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* 表示するときにつけるクラス */
.photoGrid li.is-show {
  opacity: 1;
  transform: translateY(0);
}

/* ───────── レイアウト（スクショ通り） ───────── */

/* 1段目：左の大きい画像（2列×2行） */
.photoGrid li:nth-child(1) {
  grid-column: 1 / span 2; /* 1〜2列目 */
  grid-row:    1 / span 2; /* 1〜2行目 */
}

/* 1段目：右側の小さい4枚（2×2） */
.photoGrid li:nth-child(2) {
  grid-column: 3; /* 3列目 */
  grid-row:    1; /* 1行目 */
}

.photoGrid li:nth-child(3) {
  grid-column: 4; /* 4列目 */
  grid-row:    1;
}

.photoGrid li:nth-child(4) {
  grid-column: 3;
  grid-row:    2; /* 2行目 */
}

.photoGrid li:nth-child(5) {
  grid-column: 4;
  grid-row:    2;
}

/* 2段目：大きい画像2つ横並び（各2列×2行） */
.photoGrid li:nth-child(6) {
  grid-column: 1 / span 2; /* 左2列 */
  grid-row:    3 / span 2; /* 3〜4行目 */
}

.photoGrid li:nth-child(7) {
  grid-column: 3 / span 2; /* 右2列 */
  grid-row:    3 / span 2;
}

/* 3段目：左の小さい2枚（縦並び） */
.photoGrid li:nth-child(8) {
  grid-column: 1; /* 1列目 */
  grid-row:    5; /* 5行目 */
}

.photoGrid li:nth-child(9) {
  grid-column: 1; /* 1列目 */
  grid-row:    6; /* 6行目 */
}

/* 3段目：中央の縦長画像（1列×2行） */
.photoGrid li:nth-child(10) {
  grid-column: 2;          /* 2列目 */
  grid-row:    5 / span 2; /* 5〜6行目 */
}

/* 3段目：右の大きい画像（2列×2行） */
.photoGrid li:nth-child(11) {
  grid-column: 3 / span 2; /* 3〜4列目 */
  grid-row:    5 / span 2; /* 5〜6行目 */
}

/* スマホ用（全部同じサイズでOKなら） */
@media (max-width: 768px) {
  .photoGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 140px;
  }
  .photoGrid li {
    grid-column: span 1 !important;
    grid-row: span 1 !important;
  }
}