@charset "utf-8";

/* Hero 背景 */
.drone-hero{
  position:relative;
  width:100%;
  height:420px;
  background:url("/images/drone_main.jpg") center center / cover no-repeat;
  overflow:hidden;
}

/* 斜めの薄グレー帯：ヒーロー内に敷いて回転 */
.drone-hero::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: -150px;                     /* 帯の上下位置（お好みで微調整） */
  width: 140vw;                     /* 画面より広く → 回転しても端まで埋まる */
  height: 210px;                     /* 帯の太さ（スクショに合わせて調整） */
  background: #eee;
  transform: translateX(-50%) rotate(-5deg); /* 回転角は -2.5〜-3.5deg で調整 */
  transform-origin: center;
  z-index: 1;
}
/* タイトル */
.drone-title{
  position: absolute;
  right: 8%;                    /* 右に寄せる */
  bottom: 16px;                 /* 帯の中に収まる高さ */
  margin: 0;
  font-size: clamp(22px, 3.2vw, 38px);
  letter-spacing: .1em;
  color: #555;
  font-weight: 700;
  z-index: 2;                   /* 帯より前面に */
}

/* ========== リード（左右2カラム） ========== */
.drone-lead {
    margin-top: 4rem;
}
.drone-lead__grid{
  display:grid;
  grid-template-columns: 1.15fr 1fr;  /* 画像をやや大きく */
  gap: 40px;
  align-items:start;
}
.drone-lead__image img{ width:100%; height:auto; display:block; }

/* 画像内キャプション（白字オーバーレイ） */
.photo-with-caption{ position:relative; }
.caption-overlay{
  position:absolute;
  left:16px;
  bottom:14px;
  color:#fff;
  font-weight:700;
  letter-spacing:.08em;
  /* 文字を読みやすくする影。背景は敷かない指定 */
  text-shadow:0 0 8px rgba(0,0,0,.65), 0 0 2px rgba(0,0,0,.65);
  font-size: clamp(13px, 1.2vw, 16px);
}

.drone-lead__heading{
  margin-top: 4px;
  margin-bottom: 10px;
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight:700;
  letter-spacing:.04em;
}
.drone-lead__heading .accent{ color:#e60012; } /* 赤小見出しのニュアンス */
.drone-lead__sub{
  font-weight:700; margin-bottom:8px;
}
.drone-lead__text p{ margin: .8em 0; line-height:1.9; }

/* ========== 3枚ギャラリー ========== */
.drone-gallery {
    margin-bottom: 4rem;
}
.drone-gallery__grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.drone-gallery__grid img{ width:100%; height:auto; display:block; }

/* ========== レスポンシブ ========== */
@media (max-width: 900px){
  .drone-hero{ height: 360px; }
  .drone-hero::after{ bottom: -160px; }
  .drone-title{ bottom: 14px; line-height: 56px; }
}
@media (max-width: 768px){

  /* ヒーロー */
  .drone-hero{
    height: 280px;
    display: flex;                 /* 中央揃えのためflex利用 */
    align-items: center;           /* 縦方向中央 */
    justify-content: center;       /* 横方向中央 */
  }
  .drone-hero::after{
    display: none;                 /* 帯は非表示 */
  }

  .drone-title{
    position: static;              /* absolute解除 */
    margin-top: 0;                 /* 必要なら余白を調整 */
    text-align: center;            /* 中央揃え */
    width: 100%;                   /* 横幅いっぱい使う */
    color: #fff;
    font-size: clamp(20px, 6vw, 28px);
    text-shadow: 0 0 8px rgba(0,0,0,0.8);
    line-height: 1.4;
  }

  /* リード部・ギャラリーは前と同じ */
  .drone-lead__grid{ grid-template-columns: 1fr; gap: 20px; }
  .drone-gallery__grid{ grid-template-columns: 1fr; gap: 16px; }
}