@charset "UTF-8";
  
    /* 全体のベース設定 */
    body {
      margin: 0;
      padding: 0;
      background-color: #FBF9F6; /* 生成り（アイボリー）の背景 */
      color: #4A3E3D;            /* 深いココアブラウンの文字 */
      font-family: 'Noto Serif JP', serif;
      font-weight: 300;
      line-height: 2.2;          /* 行間を少し広めにしてゆったり感を演出 */
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      box-sizing: border-box;
    }

    /* メインコンテナ */
    .container {
      width: 90%;
      max-width: 800px;         /* 画面が大きくなりすぎないよう上品な幅に制限 */
      padding: 60px 20px;
      text-align: center;       /* テキストを中央揃えに */
    }

    /* 画像エリア */
    .image-area {
      width: 100%;
      margin-bottom: 50px;      /* 画像とテキストの間の余白 */
    }

    .main-image {
      width: 100%;
      height: auto;
      display: block;
      /* ハガキの縦横比（148:100 ＝ 約 1.48 : 1）を正確に指定 */
      aspect-ratio: 148 / 100; 
      object-fit: cover;
      box-shadow: 0 4px 20px rgba(74, 62, 61, 0.05); /* 馴染む程度の薄い影 */
    }
    
    .mapimage {
    	width: 400px;
    }
    
    .wsimage {
    	width: 260px;
    	margin: 10px 60px;
    }

    /* 説明文エリア */
    .text-area {
      max-width: 600px;         /* 文章が横に広がりすぎず読みやすい幅に */
      margin: 0 auto;
    }

    /* タイトル */
    .title {
      font-size: 1.6rem;
      font-weight: 500;
      margin-top: 0;
      margin-bottom: 30px;
      letter-spacing: 0.2em;    /* 文字の間隔を広げて洗練された印象に */
    }

    /* 説明文 */
    .descriptionC {
      font-size: 0.95rem;
      letter-spacing: 0.1em;
      text-align: center;         /* 文章自体は左揃え（またはcenterでも綺麗です） */
      display: inline-block;    /* 左揃えにしつつ、全体を中央に寄せる */
    }
    .descriptionL {
      font-size: 0.95rem;
      letter-spacing: 0.1em;
      text-align: left;         /* 文章自体は左揃え（またはcenterでも綺麗です） */
      display: inline-block;    /* 左揃えにしつつ、全体を中央に寄せる */
    }
    table {
    	margin-left: auto;
    	margin-right: auto;
    	width: 80%;
    }
    td {
    	text-align: left;
    }
    
	.site-footer {
  position: relative;
  width: 100%;
  min-height: 280px; /* 雲が上下にズレるため、高さを少し広げました */
  /*background-color: #a1c4fd; /* 空の背景色 */
  padding: 20px 20px 20px;
  overflow: hidden;
}

/* 雲を背景に配置するベースの枠 */
.cloud-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-around; /* 横方向の均等配置 */
  align-items: center; /* 縦方向の基準を中央に */
  pointer-events: none;
  z-index: 1;
}

/* すべての雲に共通のベース設定 */
.cloud-icon {
  height: auto;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.05)); /* ほんのり影をつけて立体感アップ */
}

/* ＝ここから3つの雲をバラバラにカスタマイズ＝ */

/* 【1つ目の雲（左）：少し小さめで、高めの位置に少し傾ける】 */
.cloud-icon:nth-child(1) {
  width: 160px;
  transform: translateY(-30px) rotate(-5deg);
}

/* 【2つ目の雲（中央）：一番大きくて、どっしり低めの位置】 */
.cloud-icon:nth-child(2) {
  width: 280px;
  transform: translateY(20px) rotate(3deg);
}

/* 【3つ目の雲（右）：中くらいのサイズで、少し右肩上がりに】 */
.cloud-icon:nth-child(3) {
  width: 200px;
  transform: translateY(-10px) rotate(8deg);
}


/* フッターの文字コンテンツ */
.footer-content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #333333;
  margin-top: 40px;
}


    /* レスポンシブ対応 */
    @media (max-width: 768px) {
      .container {
        padding: 40px 10px;
      }
      .image-area {
        margin-bottom: 35px;
      }
      .title {
        font-size: 1.4rem;
        margin-bottom: 20px;
      }
    }