.concept-section {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 60vh;
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}
.concept-section--1 {background-image: url('/myimage.php?path=images/concept/section1-bg.jpg&w=1600&h=900&crop=1');}
.concept-section--2 {background-image: url('/myimage.php?path=images/concept/section2-bg.jpg&w=1600&h=900&crop=1');}
.concept-section--3 { background-image: url('/images/concept/section3-bg.jpg'); }
.concept-section--4 { background-image: url('/images/concept/section4-bg.jpg'); }
.concept-section--5 { background-image: url('/images/concept/section5-bg.jpg'); }


.concept-section__overlay {
  width: 100%;
  background: rgba(0, 0, 0, 0.5); /* 可読性確保のための暗幕 */
}
.concept-section__inner {
  max-width: 700px;
  margin: 0 auto;
  padding: 3rem 1.5rem;
  color: #fff;
}

@media (max-width: 768px) {
  .concept-section { min-height: 40vh; }
  .concept-section__inner { padding: 2rem 1rem; }
}



/* =========================================
   牧場の一日 - タイムライン記事用CSS
   Cassiopeiaのカスタムスタイルシート(template.user 等)に追加してください
========================================= */

.day-timeline{
  --dt-ink:#3f3227;
  --dt-green:#2f4a2f;
  --dt-green-soft:#cddac0;
  --dt-caption:#7a6d5c;
  position:relative;
  max-width:900px;
  margin:32px auto 0;
  padding:0 4px;
}

.day-timeline::before{
  content:"";
  position:absolute;
  left:52px;
  top:8px;
  bottom:8px;
  width:2px;
  background:var(--dt-green-soft);
}

.day-slot{
  position:relative;
  padding-left:100px;
  margin-bottom:52px;
}
.day-slot:last-child{ margin-bottom:0; }

.day-slot-dot{
  position:absolute;
  left:44px;
  top:6px;
  width:16px;
  height:16px;
  border-radius:50%;
  background:var(--dt-green);
  border:3px solid #fff;
  box-shadow:0 0 0 2px var(--dt-green-soft);
}

.day-slot-time{
  position:absolute;
  left:-100px;
  top:-4px;
  width:90px;
  text-align:right;
  font-size:.82rem;
  letter-spacing:.03em;
  color:var(--dt-green);
  font-weight:600;
  line-height:1.4;
}

.day-slot h3{
  font-size:1.1rem;
  margin:0 0 16px;
  color:var(--dt-ink);
}

/* 画像+キャプション */
.day-fig{ margin:0 0 12px; }
.day-fig img{
  width:100%;
  height:auto;
  display:block;
  border-radius:6px;
}
.day-fig figcaption{
  font-size:.78rem;
  color:var(--dt-caption);
  text-align:right;
  margin-top:6px;
}
.day-fig-left{
  float:left;
  width:300px;
  max-width:100%;
  margin:2px 24px 14px 0;
}
.day-fig-right{
  float:right;
  width:300px;
  max-width:100%;
  margin:2px 0 14px 24px;
}

/* 動画埋め込み(レスポンシブ) */
.day-video{
  position:relative;
  width:100%;
  max-width:340px;
  aspect-ratio:16/9;
  margin:2px 24px 14px 0;
  border-radius:6px;
  overflow:hidden;
  float:left;
}
.day-video iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}

.day-group{ overflow:hidden; } /* floatを内包 */
.day-group p{
  line-height:1.9;
  font-size:.92rem;
  margin:0 0 .8rem;
}
.day-clear{ clear:both; }

/* =========== スマホ幅(768px未満)============ */
@media (max-width:767.98px){
  .day-timeline::before{ left:28px; }
  .day-slot{ padding-left:56px; }
  .day-slot-dot{ left:20px; }
  .day-slot-time{
    position:static;
    text-align:left;
    display:block;
    margin-bottom:6px;
  }
  .day-fig-left,
  .day-fig-right,
  .day-video{
    float:none;
    width:100%;
    max-width:100%;
    margin:0 0 14px;
  }
}