@charset "UTF-8";

#key-visual02{
	background-image: url(../images/test-key-visual.png);
	background-image: image-set(url(../images/test-key-visual.png) 1x, url(../images/test-key-visual.png) 2x);
	background-image: -webkit-image-set(url(../images/test-key-visual.png) 1x, url(../images/test-key-visual.png) 2x);
}


/* 横並びのコンテナ（共通） */
.iframe-row {
  display: flex;
  gap: 10px;                /* 2つの iframe の間隔 */
  align-items: flex-start;
  flex-wrap: wrap;          /* 狭い幅では折り返し（縦並び） */
  margin-bottom: 10px;
}



/* --- Bパターン：縮小＋横並び（80%の例） --- */
.scaled-box {
  /* 80% に縮小表示 */
  transform: scale(0.8);
  transform-origin: 0 0;    /* 左上基準に縮小 */
  /* 見た目の幅を逆数で補正（1/0.8 = 1.25 -> 125%） */
  width: 125%;
  /* 中身の高さ 400px を表示領域として確保するため、400/0.8 ≈ 500px */
  height: 400px;
  flex: 1 1 520px;
  min-width: 360px;
 /* overflow: hidden;          はみ出し対策 */
}
.scaled-box iframe {
  width: 1000px;            /* 元々の想定幅 */
  height: 400px;            /* 元々の想定高さ */
  border: 0;
}

.scaled-box2 {
  /* 80% に縮小表示 */
  transform: scale(0.8);
  transform-origin: 0 0;    /* 左上基準に縮小 */
  /* 見た目の幅を逆数で補正（1/0.8 = 1.25 -> 125%） */
  width: 125%;
  /* 中身の高さ 400px を表示領域として確保するため、400/0.8 ≈ 500px */
  height: 550px;
  flex: 1 1 520px;
  min-width: 360px;
 /* overflow: hidden;          はみ出し対策 */
}

.scaled-box2 iframe {
  width: 1000px;            /* 元々の想定幅 */
  height: 550px;            /* 元々の想定高さ */
  border: 0;
}

/* --- レスポンシブ調整（任意） --- */
@media (max-width: 900px) {
  .iframe-item iframe {
    height: 360px;
  }
  .scaled-box {
    height: 460px;          /* 画面が狭い時に少し詰める */
  }
}