/* =================================================================== */
/*00111 ===== コンテンツのレスポンシブレイアウト（最終決定版） ================ */
/* =================================================================== */

/* --- 1. 親コンテナ(.main)へのスタイル適用 --- */
/* PC表示時に最大幅と左右余白を設定し、左寄せを強制 */
.main {
    max-width: 1200px;
    margin: 0 auto !important;
    padding: 20px 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
}

/* --- 2. セクションの共通スタイル --- */
/* .main の直下の子セクションにのみ適用 */
/* ★ .about もこの共通ルールに含める */
.main > section, .main > .about, .about2, .about3 {
    box-sizing: border-box;
    margin: 0 1.5% 20px 1.5% !important;
    padding: 15px;
    border-radius: 8px;
}

/* 枠線と影を付けるセクション */
/* ★ .about にも枠線と影を適用 */
.wd100, .gallery-item, .about, .about2, .about3 {
    border: 1px solid #cccccc;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

}

/* 新設枠だけ*/
.wk {
    border: 1px solid #cccccc;
}


/* 枠線と影を付けないセクション */
.wd-full {
    border: none;
    box-shadow: none;
    padding: 16px; 
}

/* ★★★ .wd50 は常に2列にするための最終ルール ★★★ */
.wd50 {
   /* width: 47% !important; /* 親コンテナのマージンを考慮した2列分の幅 */
    border: none !important;
    box-shadow: none !important;
    padding: 16px !important; 
    width: 47% !important; /* 2つのカラムの幅を親要素の47%に設定 */
    display: inline-block;
}


/* --- 3. 入れ子コンテナのスタイル --- */
.wd100 {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: stretch;

}

/* 見出しの中央寄せを維持するためのルール */
.wd100 > h1,
.wd100 > h2 {
    width: 100%;
    text-align: center;
}


/* =================================================================== */
/* ===== モバイル表示のスタイル (幅 0px 〜 767px) ==================== */
/* =================================================================== */

.wd-full { width: 97%; }
.wd100 { width: 97%; }
.gallery-item { width: 97%; }
.about { width: 97%; } /* ★ モバイルでは1列 */
.about2 { width: 97%; } /**/
.about3 { width: 97%; } /**/

.gallery-item .gallery-images {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.gallery-item .gallery-images img {
  width: calc(100% - 5px);
  height: auto;
  object-fit: contain;
  border-radius: 4px;
}


/* =================================================================== */
/* ===== PC表示のスタイル (幅 768px 以上) ========================== */
/* =================================================================== */
@media (min-width: 768px) {
  .wd100 {
    width: 47%;
  }

  /* ★ PCでは .about を3列にする */
  .about {
    width: 30.333%; /* 3列レイアウト */
    display: flex; /* 中の要素を柔軟にレイアウトするため */
    flex-direction: column; /* 子要素を縦に並べる */
    align-self: stretch; /* 親のalign-itemsを上書きし、同じ行で最も高い要素に高さを合わせる */
  }

 .about2 {
    width: 47%; /* 2列レイアウト */
    display: flex; /* 中の要素を柔軟にレイアウトするため */
    flex-direction: column; /* 子要素を縦に並べる */
    align-self: stretch; /* 親のalign-itemsを上書きし、同じ行で最も高い要素に高さを合わせる */
  }


 .about3 {
    width: 60%; /* 2列レイアウト */
    display: flex; /* 中の要素を柔軟にレイアウトするため */
    flex-direction: column; /* 子要素を縦に並べる */
    align-self: stretch; /* 親のalign-itemsを上書きし、同じ行で最も高い要素に高さを合わせる */
  }




  /* .wd50 は常に2列なので、ここでの変更は不要 */

  .gallery-item {
    width: 47%;
  }
  .gallery-item .gallery-images {
    display: block;
  }
  .gallery-item .gallery-images img {
    width: 100%;
    margin-bottom: 10px;
  }
}