/* メイン画像 */
.mainimg {
  position: relative;
  width: 100%;
}

.mainimg img {
  width: 100%;
  height: auto;
  display: block;
}

/* PC画面では画像サイズを縮小（高さが結果的に半分になる） */
@media (min-width: 769px) {
  .mainimg img {
    width: 50%;   /* 横幅を半分に → 高さも自動で半分になる */
    margin: 0 auto;
  }
}


/*メイン画像上のテキスト
-------------------------------------*/
.mainimg-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  text-align: center;
  z-index: 2;
  width: 80%;
  max-width: 900px;
}

.mainimg-text p.jp {
  font-size: clamp(0.8rem, 3.5vw, 1.4rem);
  line-height: 1.4;
  margin-bottom: 0.35em; 
}

.mainimg-text h2.jp-title {
  font-size: clamp(2.8rem, 5vw, 4.8rem);
  font-weight: bold;
  line-height: 1.12;
  margin-bottom: 0.35em; 
} 

.mainimg-text h2.en-title {
  font-size: clamp(1.6rem, 5vw, 3.6rem);
  font-weight: bold;
  line-height: 1.1;
}


/* スマホ調整 */
@media (max-width: 768px) {
  .mainimg-text {
    width: 90%;
  }
}

@media (min-width: 1400px) {
  .mainimg-text h2.jp-title {
    font-size: clamp(3rem, 4vw, 7.2rem);
  }

  .mainimg-text h2.en-title {
    font-size: clamp(3.6rem, 5vw, 8rem);
  }

  .mainimg-text p.jp {
    font-size: clamp(1.2rem, 2.5vw, 2.6rem);
  }
}

/*見出し
-------------------------------------*/
.title {
    text-align: center;
}

.title h2 {
    position: relative;
    display: inline-block; /* テキスト幅に合わせる */
    margin: 2.8rem auto 0.6rem; /* 上に余白を多め、下は控えめ */
    padding-bottom: 1.6rem;
    font-size: clamp(1.8rem, 4vw, 2.8rem); /* PCで大きく、スマホで自動調整 */
    color: #160a57;
    font-weight: 700; 
}

@media (max-width: 600px) {
  .title h2 {
    font-size: 1.6rem;   /* ← PCより小さくする */
    padding-bottom: 1.2rem; 
    display: block;      /* ← inline-block のままだと改行しやすい */
  }
}

.title h2::after {
    content: "";
    display: block;
    width: 80px;
    height: 4px;
    background: linear-gradient(to right, #FF7B95, #FFF60E);
    margin: 1.4rem auto 0; 
    border-radius: 2px;
}


/*レイアウト
-------------------------------------*/
section {
    padding-bottom: 0.1rem; /* セクション間の余白を統一 */
}

.text-container {
    max-width: 760px;   
    margin: 0 auto;     
    padding: 0 1rem;    
}

.row.flow {
  display: block !important;
}

.col.span-9 {
  margin: 0 auto;
  float: none;      /* float がある場合は解除 */
}




/* 実施報告 */
.flow.row {
    margin-bottom: 1.0rem;
}

.s-title2 {
  font-size: 1.2em; 
  color: #160a57;
  font-weight: bold;
  text-align: center;
}

@media (max-width: 600px) {
  .s-title2 {
    font-size: 1.1em; /* ← さらに少し小さめにすると読みやすい */
    line-height: 1.4; /* ← 行間を少し広げるとスマホで読みやすい */
  }
}

.s-sub{
    font-size: 1.0em;
    font-weight: bold;
    margin-top: 2rem;
    margin-bottom: 0.5rem;
}

/* 写真 */
.photo-row {
  display: flex;
  justify-content: center;
  gap: 20px;        /* 画像の間の余白 */
  flex-wrap: wrap;  /* スマホで縦並びになる */
  margin: 40px auto;
}

.photo-item {
  width: 300px;     
  height: auto;
  border-radius: 8px; 
}

@media (max-width: 600px) {
  .photo-item {
    width: 90%;
  }
}

/* ==========================================
   フッターを中央（2番目のカラム位置）に配置＆テキスト中央揃え
   ========================================== */

/* フッター内のテキストをすべて中央揃えにする */
.footer-block {
    text-align: center !important;
}

/* PC表示時（768px以上）：グリッドの左から4カラム分空けて中央に配置 */
@media screen and (min-width: 768px) {
    .footer-flex {
        display: flex !important;
        flex-direction: row !important;
    }

    .footer-flex .footer-block {
        /* offset-4 と同等の計算（全12カラム中の左4カラム分の空域） */
        margin-left: 34.6666666667% !important;
        max-width: 30.6666666667% !important;
        flex: 0 0 30.6666666667% !important;
    }
}

/* スマホ表示時（767px以下）：全幅で表示 */
@media screen and (max-width: 767px) {
    .footer-flex .footer-block {
        margin-left: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }
}