/* 四季のセクションのスタイル */
.season-section {
    display: flex;
    flex-direction: column; /* 縦方向に並べる */
    align-items: center;
    width: 100%;
    margin-top: 20px; /* トップ画像と四季セクションの間にスペースを追加 */
    background: rgba(255,255,255,0.8);
    padding: 0px 0;
}

.season {
    width: 100%;
    aspect-ratio: 3 / 1; /* 3:1の比率 */
    background-size: cover;
    background-position: center;
    position: relative; /* 疑似要素のために relative を指定 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    margin-bottom: 25px;
    /*padding: 20px;*/
    transition: height 0.3s ease;
    z-index: 0; /* 他の要素よりも上に表示 */
    font-size: 4em;
     font-weight: bold;
}

/* 画像の上下をぼやかすエフェクト */
.season::before,
.season::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 20%;
    z-index: 1;
}

.season::before {
    top: 0;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0));
}

.season::after {
    bottom: 0;
    background: linear-gradient(to top, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0));
}

/* オーバーレイ共通 */
.season-overlay {
    /*background-color: rgba(0, 0, 0, 0.5);*/
    padding: 15px;
    border-radius: 10px;
    position: absolute;
    width: 80%;
}

/* 春のテキスト配置 */
.spring-text {
    text-align: left;
    left: 10%;
    top: 50%;
    transform: translateY(-40%);
    color: #32CD32;
    font-size: 0.9em;
    z-index: 2;
}

.spring-text:first-letter{
  color:#FFA500;
  font-size:180%;
}

/* 夏のテキスト配置 */
.summer-text {
    text-align: center;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #66FFFF;
    z-index: 2;
}

.summer-text:first-letter{
  color:#FFA500;
  font-size:180%;
}

/* 秋のテキスト配置 */
.autumn-text {
    text-align: right;
    left: 10%;
    top: 50%;
    transform: translateY(-50%);
    color: #FFFF22;
    font-size:0.8em;
    z-index: 2;
}

.autumn-text:first-letter{
  color:#FFA500;
  font-size:180%;
}

/* 冬のテキスト配置 */
.winter-text {
    text-align: center;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #FF97C2;
    font-size:0.9em;
    z-index: 2;
}

.winter-text:first-letter{
  color:#FFA500;
  font-size:180%;
}

/*サンプル文字の縁取り*/
.sample1oya{
  display     : inline-block;
  font-weight : bold;
  color       : #FF97C2;
  text-shadow:  2px  2px 10px #777 ,
               -2px  2px 10px #777 ,
                2px -2px 10px #777 ,
               -2px -2px 10px #777;
}
.sample1{
  text-align: center;
   left: 60%;
    top: 40%;
    transform: translate(-0%, -21%);*/
    color: #FF97C2;
    font-size:0.8em;
    z-index: 2;
}


/*==============================
  四季セクションのスマホ対応
-------------------------------------*/
@media screen and (max-width: 768px) {

  /* 四季のセクション全体をスマホ用に調整 */
  .season-section {
      padding: 10px 0; /* セクション上下の余白を小さく調整 */
  }

  /* 四季それぞれのセクションの調整（共通設定） */
  .season {
      aspect-ratio: auto; /* 比率固定を解除 */
      height: 150px; /* 固定の高さに変更（スマホ用） */
      font-size: 15px; /* 基準となるフォントサイズを調整 */
      margin-bottom: 15px; /* 下のセクションとの間隔調整 */
      overflow: hidden; /* はみ出し防止 */
  }

  /* 四季それぞれのテキスト配置の調整（共通設定） */
  .season-overlay {
      width: 90%; /* スマホ用にオーバーレイの幅を調整 */
      padding: 8px; /* 内側余白を小さく */
  }

  /* 季節ごとの個別調整（フォントサイズを変える） */

  /* 春のセクション個別設定 */
  .spring-text {
      font-size: 1.4em; /* 春の文字を大きめに */
      left: 5%; /* スマホでは左の余白を小さく */
      top: 50%;
  }

  /* 夏のセクションの調整 */
  .summer-text {
      font-size: 1.4em; /* 夏はやや小さめに */
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
  }

  /* 秋のセクションの調整 */
  .autumn-text {
      font-size: 1.2em; /* 秋の文字サイズを調整 */
      left: 5%;
      top: 50%;
  }

  /* 冬のセクションの調整 */
  .winter-text {
      font-size: 20px; /* 冬の文字を小さく調整 */
      left: 50%;
      top: 50%;
  }

  /* テキストの折り返し（スマホで横幅はみ出し防止） */
  .season-overlay,
  .spring-text,
  .summer-text,
  .autumn-text,
  .winter-text,
  .sample1oya,
  .sample1 {
      overflow-wrap: break-word; /* 文字が長くても途中で折り返す */
      word-wrap: break-word; /* 念のため古いブラウザ用も追加 */
  }

}