/* --------------------------------------------------------------------------------------------- */
/*	 全体の設定
/* --------------------------------------------------------------------------------------------- */
body, h1, h2, h3, h4, h5, h6, p, div, dt, dd, dl, img, input, form, ul, li, ol, span, iframe {
	margin: 0px;
	padding: 0px;
vertical-align: bottom;
}
/* 1. リセット & ベース設定 */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  overflow-x: hidden; /* スマホでの横スクロール・横ブレを防止 */
}

body {
  min-height: 100vh;
  padding: 10%; /* スマホ画面端の余白 */
  
  /* テキスト・ブロック要素を含めて強制的に中央揃え */
  text-align: center;
}

/* 2. コンテナ設定（左右中央寄せの確実化） */
.desktop-container {
  width: 100%;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 3. 画像ラッパー設定 */
.content-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;    /* Flexボックスでの横方向中央揃え */
  justify-content: center;
  width: 100%;
}

/* 4. レイヤー & グループ共通設定 */
.layer-1,
.group {
  width: 100%;
  display: flex;
  justify-content: center; /* 子要素（img）を中央配置 */
  align-items: center;
}

/* 5. 画像要素のレスポンシブ & 中央揃え徹底 */
img {
  max-width: 100%;
  height: auto;
  margin-left: auto;
	margin-right: auto;
	vertical-align: bottom;
	display: block;
}

/* メイン画像・グループ画像の個別最大幅 */
.img-main {
  width: 100%;
  max-width: 1000px;
}

.group img {
  width: 100%;
  max-width: 800px;
}


.layer-1,
.group-1 {
	margin-bottom: 7%;
}
.group-2 {
	margin-bottom: 10px;
	width: 80%;
}
.group-3,
.group-4 {
	margin-bottom: 15px;
	width: 80%;
}


/* リンク化された画像ラッパーの設定 */
.img-link {
  display: block;
  text-decoration: none;
  transition: opacity 0.3s ease; /* ホバー時の変化を滑らかにする */
}

/* マウスオーバー時に80%透過（透明度80%） */
.img-link:hover {
  opacity: 0.6;
}

@media screen and (min-width: 768px) {
body {
  padding: 5% 10%;
	}
	.desktop-container {
		width: 80%;
	}
.group-2 {
		margin-bottom: 10px;
		width: 80%;
}	
.group-3,
.group-4 {
		margin-bottom: 20px;
		width: 80%;
}	
}

@media screen and (min-width: 1024px) {
body {
  padding: 3% 0%;
	}
	.desktop-container {
		width: 500px;
	}
.group-2 {
		margin-bottom: 10px;
		width: 80%;
}	
.group-3,
.group-4 {
		margin-bottom: 20px;
		width: 80%;
}	
}