/* ============================================
   トップページ専用スタイル
   index.phpでのみ使用されるスタイル
   ============================================ */

/* ============================================
   トップページのみタイトル文字サイズ変更
   ============================================ */
main .common-title-center h2,
main .common-title-left h2 {
  font-size: 5rem; /* 50px相当 */
}

main .common-title-center .sub-text,
main .common-title-left .sub-text {
  font-size: 3.2rem; /* 32px相当 */
}

main .common-title-center .gray-text,
main .common-title-left .gray-text {
  font-size: 3rem; /* 30px相当 */
}

.common-title-left .padding {
  padding: 60px 0;
}

@media screen and (max-width: 1100px) {
  main .common-title-center h2,
  main .common-title-left h2 {
    font-size: 4rem;
  }
}

/* タブレット以下（768px以下）の画面用スタイル */
@media screen and (max-width: 768px) {
  /* タイトルサイズ調整 - 画面が小さいので少し小さく */
  main .common-title-center h2,
  main .common-title-left h2 {
    font-size: 3.5rem; /* 32px→28pxに */
  }

  main .common-title-center .sub-text,
  main .common-title-left .sub-text {
    font-size: 2.5rem; /* 24px→20pxに */
  }

  main .common-title-center .gray-text,
  main .common-title-left .gray-text {
    font-size: 2.2rem;
    /* 23px→18pxに */
  }
}

/* スマートフォン（480px以下）の画面用スタイル */
@media screen and (max-width: 480px) {
  /* タイトルサイズをさらに調整 */
  main .common-title-center h2,
  main .common-title-left h2 {
    font-size: 3rem;
    /* 28px→24pxに */
  }

  main .common-title-center .sub-text,
  main .common-title-left .sub-text {
    font-size: 2.2rem;
    /* 20px→18pxに */
  }

  main .common-title-center .gray-text,
  main .common-title-left .gray-text {
    font-size: 2rem;
    /* 18px→16pxに */
  }
}

/* ========================================
   ファーストビュー
   ======================================== */
.first-view {
  position: relative; /* 相対位置指定（子要素の基準） */
  width: 100%; /* 幅を画面いっぱいに */
  height: 100vh; /* 高さを画面の90% */
  display: flex; /* フレックスボックス */
  align-items: center; /* 上下中央揃え */
  background-image: url("/assets/images/top/eyecatch.png"); /* 背景画像 */
  background-size: cover; /* 画像を要素全体に広げる */
  background-position: center; /* 背景画像を中央配置 */
}

.first-view .bg-texture {
  position: relative; /* 相対位置指定 */
  width: 43%; /* 幅を全体の43% */
  height: 100%; /* 高さを親要素いっぱい */
  background: url("/assets/images/top/first-view-bg.png") no-repeat; /* 背景画像（繰り返しなし・中央配置） */
  background-size: cover; /* 画像を要素全体に広げる */
  background-position: right; /* 背景画像を右側に配置 */
  display: flex; /* フレックスボックス */
  flex-direction: column; /* 子要素を縦並びに */
  justify-content: center; /* 上下中央揃え */
  align-items: center; /* 左右中央揃え */
  box-sizing: border-box; /* パディングを幅に含める */
}

.first-view h1 {
  color: #fff; /* 文字色を白に */
  font-size: 6rem; /* 55px相当の文字サイズ */
  font-weight: bold; /* 太字 */
  margin-bottom: 20px; /* 下に20pxの余白 */
  border-left: 7px solid white; /* 左に7pxの白い線 */
  padding-left: 30px; /* 左内側に30pxの余白 */
  padding-bottom: 5px; /* 下内側に5pxの余白 */
}

.first-view span {
  color: #fff; /* 文字色を白に */
  font-size: 2.3rem; /* 23px相当の文字サイズ */
}

/* PC大画面向け (1745px以下) */
@media screen and (max-width: 1745px) {
  .first-view .bg-texture {
    width: 50%; /* 幅を37%に拡大 */
    background: url("/assets/images/top/first-view-bg-op80.png") no-repeat; /* 透明度を調整した背景画像 */
    background-position: right; /* 背景画像を右寄せ */
    min-width: 500px; /* 最小幅を500pxに設定 */
    padding-left: 50px; /* 左に50pxの内側余白 */
    align-items: start; /* 子要素を上端に配置 */
  }

  .first-view h1 {
    font-size: 4.5rem; /* フォントサイズ調整 */
  }
}

/* タブレット向け (1100px以下) */
@media screen and (max-width: 1100px) {
  .first-view .bg-texture {
    align-items: center; /* 子要素を中央配置に変更 */
    height: auto; /* 高さを内容に合わせて自動調整 */
    background-position: top; /* 背景画像を上部に配置 */
    padding-left: 0; /* 左パディングをリセット */
    padding: 30px 0; /* 上下に30pxの内側余白 */
  }

  .first-view {
    justify-content: center; /* コンテンツを中央配置 */
    padding: 0 40px; /* 左右パディング追加 */
  }

  .first-view h1 {
    font-size: 5rem; /* フォントサイズ調整 */
    text-align: center; /* 中央揃え */
    border-left: none; /* ボーダー削除 */
    border-bottom: 3px solid white; /* 下に3pxの白い線 */
    padding-left: 0; /* パディング調整 */
  }

  .first-view span {
    text-align: center; /* 中央揃え */
    display: block; /* ブロック要素化 */
  }
}

/* スマートフォン向け (768px以下) */
@media screen and (max-width: 768px) {
  .first-view {
    height: 60vh; /* 画面の高さの60%に縮小 */
    padding: 0 20px; /* 左右に20pxの内側余白 */
  }

  .first-view .bg-texture {
    width: 95%; /* 幅を95%に拡大 */
    min-width: auto; /* 最小幅制限を解除 */
  }

  .first-view h1 {
    font-size: 4.5rem; /* フォントサイズ調整 */
    margin-bottom: 15px; /* 下余白を15pxに縮小 */
  }

  .first-view span {
    font-size: 2rem; /* フォントサイズ調整 */
  }
}

/* スマートフォン小サイズ (480px以下) */
@media screen and (max-width: 480px) {
  .first-view h1 {
    font-size: 3.5rem; /* フォントサイズ調整 */
  }

  .first-view span {
    font-size: 1.8rem; /* フォントサイズ調整 */
  }
}

/* ========================================
   MISSIONセクション
   ======================================== */
.top-mission {
  display: flex; /* フレックスボックスで柔軟なレイアウト */
  align-items: center; /* 子要素を上下中央に配置 */
  max-width: 1300px; /* 最大幅1300px */
  margin: 0 auto; /* 左右中央配置 */
  min-height: 100vh; /* 最低でも画面の高さ全体を使用 */
  padding: 110px 30px;
}

.top-mission-wrapper {
  display: flex; /* フレックスボックスで横並びレイアウト */
  align-items: flex-end; /* 子要素を下端で揃える */
  gap: 40px; /* 子要素間に40pxの間隔を設定 */
  padding-bottom: 60px; /* 下に60pxの内側余白 */
}

.top-mission .text-area,
.top-mission .image-area {
  flex: 1; /* 親要素の幅を均等に分配 */
}

.top-mission-description {
  font-size: 1.8rem; /* 16px相当の文字サイズ */
  line-height: 1.8; /* 行の高さを文字サイズの1.8倍に設定（読みやすさ向上） */
}

/* タブレット向け (1100px以下) */
@media screen and (max-width: 1100px) {
  .top-mission {
    padding: 40px 30px; /* 上下の内側余白を40pxに縮小 */
  }

  .top-mission-wrapper {
    flex-direction: column; /* 縦並びレイアウトに変更 */
    align-items: center; /* 子要素を中央配置 */
    padding-bottom: 20px; /* 下の内側余白を20pxに縮小 */
  }
}

/* ========================================
   TOTAL SUPPORTセクション
   ======================================== */
.top-support {
  display: flex; /* フレックスボックスで柔軟なレイアウト */
  align-items: center; /* 子要素を上下中央に配置 */
  min-height: 100vh; /* 最低でも画面の高さ全体を使用 */
  background-image: url("/assets/images/common/bg-image01.png"); /* 背景画像 */
  padding: 140px 0; /* 上下に140pxの内側余白 */
}

.top-support-inner {
  max-width: 1300px; /* 最大幅1300px */
  margin: 0 auto; /* 左右中央配置 */
  padding: 0 30px;
}

.top-support-list {
  display: flex; /* フレックスボックスで横並びレイアウト */
  gap: 45px; /* 子要素間に45pxの間隔を設定 */
  padding-top: 10px; /* 上に40pxの内側余白 */
}

.top-support-item {
  display: flex; /* フレックスボックスで柔軟なレイアウト */
  flex-direction: column; /* 子要素を縦方向に並べる */
  gap: 10px; /* 子要素間に10pxの間隔を設定 */
  align-items: center; /* 子要素を左右中央に配置 */
  min-width: 300px;
  min-height: 295px;
}

.top-support-item .top-support-item-image {
  width: 100%; /* 画像を親要素の幅に合わせる */
  height: 100%;
}

/* レスポンシブ対応 */
/* PC向け (1300px以下) */
@media screen and (max-width: 1300px) {
  .top-support-item .common-button {
    max-width: none; /* ボタンの最大幅制限を解除 */
  }
}

/* タブレット向け (1100px以下) */
@media screen and (max-width: 1400px) {
  .top-support {
    padding-top: 40px; /* 上下の内側余白を40pxに縮小 */
    padding-bottom: 40px; /* 上下の内側余白を40pxに縮小 */
  }

  .top-support-list {
    display: grid; /* グリッドレイアウトに変更 */
    grid-template-columns: repeat(2, 1fr); /* 2列の均等幅で配置 */
  }
}

/* タブレット向け (768px以下) */
@media screen and (max-width: 768px) {
  .top-support-list {
    grid-template-columns: 1fr; /* 1列レイアウトに変更 */
    padding-top: 30px; /* 上の内側余白を30pxに縮小 */
  }

  .top-support-item {
    gap: 8px; /* 子要素間の間隔を8pxに縮小 */
  }
}

/* スマートフォン向け (480px以下) */
@media screen and (max-width: 480px) {
  .top-support {
    padding: 30px 0; /* 上下の内側余白を30pxに縮小 */
  }
}

/* ========================================
   NEW PRODUCTS 製品紹介
   ======================================== */
.top-product {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* 最低でも画面の高さ全体を使用 */
}

.product-list {
  display: flex;
  flex-direction: column;
}

.top-product .product-list {
  max-width: 1500px; /* 最大幅を1650pxに制限 */
  padding: 0 30px;
  margin: 0 auto 150px; /* 左右中央配置 */
  display: grid; /* グリッドレイアウトで配置 */
  grid-template-columns: repeat(2, 1fr); /* 2列の均等幅で配置 */
  gap: 30px; /* グリッドアイテム間に30pxの間隔 */
  list-style: none; /* リストマーカーを非表示 */
}

/* 製品が1つのみの場合の特別なレイアウト */
.product-list.justOne {
  max-width: 1300px; /* 最大幅を1300pxに制限 */
  grid-template-columns: 1fr; /* 1列レイアウトに変更 */
  margin-bottom: 150px;
}

.top-product .product-list.justOne .product-list-item {
  height: 550px;
}

.top-product .product-list.justOne .product-list-item .text-area {
  display: flex; /* フレックスボックスで柔軟なレイアウト */
  flex-direction: column; /* 子要素を縦方向に並べる */
  justify-content: space-between; /* 子要素を均等に配置 */
  padding: 50px 30px; /* 全方向に50pxの内側余白 */
  gap: 30px; /* コンテンツ間に50pxの余白 */
}

.top-product .product-list.justOne .product-list-item .image-area {
  min-width: 530px; /* 画像エリアの最小幅を530pxに設定 */
}

.top-product .product-list.justOne .product-list-item .text-area h3 {
  font-size: 3.5rem;
}

.top-product .product-list.justOne .product-list-item .text-area p {
  font-size: 2rem; /* 20px相当の文字サイズ */
}

.top-product .product-list.justOne .orange-check-list .orange-check-list-item {
  font-size: 1.8rem; /* 18px相当の文字サイズ */
}

/* 複数列の場合 */
.top-product .product-list .product-list-item {
  display: flex; /* フレックスボックスで横並びレイアウト */
  background-color: white; /* 背景色を白に設定 */
  box-shadow: 4px 4px 10px 0 rgba(0, 0, 0, 0.25); /* 影を付けて立体感を演出 */
}

.top-product .product-list .product-list-item .image-area {
  min-width: 350px; /* 画像エリアの最小幅を350pxに設定 */
}

.top-product .product-list .product-list-item .image-area img {
  width: 100%; /* 画像を親要素の幅に合わせる */
  height: 100%; /* 画像を親要素の高さに合わせる */
  object-fit: cover; /* 画像を要素全体に表示（はみ出た部分は切り取り） */
  aspect-ratio: 4/3; /* 縦横比を4:3に固定 */
  object-position: left;
}

.top-product .product-list .product-list-item .text-area {
  display: flex;
  flex-direction: column;
  width: 100%; /* 残りの幅をすべて使用 */
  padding: 30px 30px; /* 内側に余白を設定（上下20px、左右30px） */
  gap: 12px;
}

.top-product .product-list .product-list-item .text-area h3 {
  font-size: 2.5rem;
  line-height: 1.2;
}

.top-product .product-list .product-list-item .text-area .common-button.white {
  width: 200px;
  height: 40px;
}

.orange-check-list {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-left: 0;
  gap: 12px;
}

/* タブレット向け (1300px以下) */
@media screen and (max-width: 1700px) {
  .product-list.justOne {
    margin-bottom: 100px;
  }

  .top-product .product-list.justOne .product-list-item {
    height: auto;
    min-height: 550px;
  }

  .top-product .product-list .product-list-item {
    height: auto;
    min-height: 350px;
  }

  .top-product .product-list .product-list-item .text-area {
    padding: 20px;
  }

  .top-product .product-list .product-list-item .text-area h3 {
    font-size: 2rem;
  }
}
/* タブレット向け (1300px以下) */
@media screen and (max-width: 1300px) {
  .product-list.justOne {
    margin-bottom: 60px;
  }

  .top-product .product-list.justOne .product-list-item {
    flex-direction: row; /* 横並びレイアウトを維持 */
  }

  .top-product .product-list.justOne .product-list-item .image-area {
    height: auto; /* 高さを内容に合わせて自動調整 */
  }

  .top-product .product-list .product-list-item {
    flex-direction: column; /* 縦並びレイアウトに変更 */
  }

  .top-product .product-list .product-list-item .image-area {
    height: 300px; /* 画像エリアの高さを300pxに固定 */
  }
}

/* タブレット向け (1100px以下) */
@media screen and (max-width: 1100px) {
  .top-product {
    padding-bottom: 0;
  }

  .top-product .product-list.justOne .product-list-item {
    flex-direction: column;
  }

  .top-product .product-list.justOne .product-list-item .text-area h3 {
    font-size: 2.5rem;
  }

  .top-product .product-list.justOne .product-list-item .text-area p {
    font-size: 1.6rem;
  }

  .top-product .product-list.justOne .product-list-item .image-area {
    height: 300px; /* 画像エリアの高さを300pxに固定 */
    min-width: auto; /* 最小幅の設定を自動に */
  }

  .top-product .product-list.justOne .product-list-item .text-area {
    padding: 20px; /* 全方向に20pxの内側余白 */
    gap: 10px;
  }

  .top-product .product-list .product-list-item .image-area {
    min-width: 300px; /* 画像エリアの最小幅を300pxに設定 */
  }

  .top-product .product-list .product-list-item .text-area {
    padding: 20px; /* 全方向に20pxの内側余白 */
  }
}

/* タブレット向け (768px以下) */
@media screen and (max-width: 768px) {
  .top-product {
    padding: 30px 0; /* 上下の内側余白を30pxに縮小 */
  }

  .top-product .product-list {
    grid-template-columns: 1fr; /* 1列レイアウトに変更 */
    gap: 20px; /* グリッドアイテム間の間隔を20pxに縮小 */
    margin-top: 20px;
    margin-bottom: 100px;
  }

  .top-product .product-list .product-list-item {
    flex-direction: column; /* 縦並びレイアウトに変更 */
  }

  .top-product .product-list .product-list-item .image-area {
    min-width: unset; /* 最小幅の設定を解除 */
    width: 100%; /* 幅を100%に設定 */
    height: 250px; /* 高さを250pxに固定 */
  }

  .top-product .product-list .product-list-item .text-area {
    padding: 30px;
  }

  .product-list.justOne {
    margin-bottom: 40px;
  }
}

/* スマートフォン向け (480px以下) */
@media screen and (max-width: 480px) {
  .top-product .product-list .product-list-item .image-area {
    height: 200px; /* 高さを200pxに固定 */
  }
}

.about-image::after {
  top: -62px;
  left: 59px;
  background-image: url(../images/top/top-images-backgraund.png);
}

@media screen and (max-width: 1400px) {
  .about-image::after {
    top: -30px;
    left: 30px;
  }
}

@media screen and (max-width: 768px) {
  .about-image::after {
    top: -12px;
    left: 9px;
  }
}