@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;
}


/* --- Bパターン：縮小＋横並び（80%の例） --- */
.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: 600px;
  flex: 1 1 620px;
  min-width: 360px;
 /* overflow: hidden;          はみ出し対策 */
}
.scaled-box2 iframe {
  width: 1000px;            /* 元々の想定幅 */
  height: 600px;            /* 元々の想定高さ */
  border: 0;
}



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


.kintone-iframe-wrap.half {
  width: 50%;
}

.kintone-iframe-wrap.height-parent {
  height: 800px;          /* 親の高さを決める（例） */
}

.kintone-iframe-wrap.height-parent iframe {
  width: 100%;
  height: 50%;            /* 親(800px)の50% = 400px */
  border: 0;
}