@charset "utf-8";

/*---------------carouselの設定-------------------------------*/

/* mv_iconの全体のスタイル */

.css_part_section {
  width: 100%;
  margin-block: 100px;
  /* 必要に応じてmin-heightを調整 */
}

.section_inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 50px;
}
.section_title {
  position: relative;
  font-size: min(2.78vw, 40px);
  font-weight: bold;
  color: var(--text-color);
  text-align: left;
  margin-bottom: min(1.39vw, 20px);
  padding-left: 15px;
}
.section_title::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 100%;
  background-color: var(--black--);
}

/*---------------mv_iconの詳細設定--------------------*/

/*　重要ポイント：例えば1440pxの幅のデザインカンプで子要素が横200px高さは不順のの画像があったとしたら、
1440pxではカンプ通りのサイズでmvの親要素は1200pxです。後は幅によって変わりたいのですがどうすればよいか？ */
/*答え：その場合、親要素の幅に対して「200pxが1200px時の比率」を計算し、
width: 16.666%（= 200 ÷ 1200 × 100）と指定すれば、1440px時は200px、縮小時は親幅に応じて自動で縮みます。
高さは画像のアスペクト比を維持したい場合、aspect-ratioを使うのが簡単です。*/

.parent {
  position: relative; /* 子要素のabsoluteの基準になる */
  width: 100%; /* 例としてサイズを指定 */
  aspect-ratio: 16 / 9; /* 横:縦 の比率 */
  background-color: var(--bg-beige);
  border: 1px solid gray;
}

.child {
  position: absolute; /* 親要素を基準に配置 */
  width: 16.666%; /* 200px ÷ 1200px × 100 */
  aspect-ratio: 4 / 3; /* 画像の比率に合わせて調整 */
  background-color: #3498db;
}

/*上*/
.top-position {
  top: 0;
  left: 50%;
  transform: translateX(-50%); /* 中央寄せ */
}

/*上斜め右*/
.top-right-position {
  top: 0;
  right: 0;
}

/*右*/
.right-position {
  top: 50%;
  right: 0;
  transform: translateY(-50%); /* 中央寄せ */
}

/*右斜め下*/
.bottom-right-position {
  bottom: 0;
  right: 0;
}

/*下*/
.bottom-position {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%); /* 中央寄せ */
}

/*左斜め下*/
.bottom-left-position {
  bottom: 0;
  left: 0;
}

/*左*/
.left-position {
  top: 50%;
  left: 0;
  transform: translateY(-50%); /* 中央寄せ */
}

/*左斜め上*/
.top-left-position {
  top: 0;
  left: 0;
}

/*---------------画像配置バージョンの基本設定---------------*/

.child_images {
  position: absolute; /* 親要素を基準に配置 */
  width: 16.666%; /* 200px ÷ 1200px × 100 */
  aspect-ratio: 1; /* 画像の比率に合わせて調整 */
  background-size: cover;
  background-position: center;
  /* デフォルト画像（必要なら） */
  /* background-image: url('../images/default.jpg'); */
}

/*上*/
.top-position_images {
  top: 0;
  left: 50%;
  transform: translateX(-50%); /* 中央寄せ */
  background-image: url("../images/1.webp");
}

/*上斜め右*/
.top-right-position_images {
  top: 0;
  right: 0;
  background-image: url("../images/2.webp");
}

/*右*/
.right-position_images {
  top: 50%;
  right: 0;
  transform: translateY(-50%); /* 中央寄せ */
  background-image: url("../images/3.webp");
}

/*右斜め下*/
.bottom-right-position_images {
  bottom: 0;
  right: 0;
  background-image: url("../images/4.webp");
}

/*下*/
.bottom-position_images {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%); /* 中央寄せ */
  background-image: url("../images/5.webp");
}

/*左斜め下*/
.bottom-left-position_images {
  bottom: 0;
  left: 0;
  background-image: url("../images/6.webp");
}

/*左*/
.left-position_images {
  top: 50%;
  left: 0;
  transform: translateY(-50%); /* 中央寄せ */
  background-image: url("../images/7.webp");
}

/*左斜め上*/
.top-left-position_images {
  top: 0;
  left: 0;
  background-image: url("../images/8.webp");
}