/* ========================================
   LP風デザイントップページのアイキャッチ
   ======================================== */
.lp-header {
  display: flex;
  justify-content: center;
}

.lp-header img {
  width: 100%;
  height: auto; /* アスペクト比を維持 */
}

/* ========================================
   背景色指定
   ======================================== */
.bg-blue {
  background-color: #0d9cfd;
}

/* ========================================
   中央揃えタイトル
   ======================================== */
.lp-title-center {
  text-align: center;
  padding-bottom: 80px;
}

.lp-title-center span {
  font-size: 3rem;
  line-height: 1; /* 行の高さを文字サイズと同じに */
  font-weight: bold;
}

.lp-title-center h2 {
  font-size: 6rem;
  line-height: 1.2;
}

/* 文字色が白い場合 */
.lp-title-center.white {
  color: #fff;
}

/* ========================================
   黄色ななめデザインのタイトル
   ======================================== */
.diagonal-title {
  margin: 0 2%;
  display: inline-block;
  transform: skewX(-15deg); /* 要素を-15度傾ける */
  max-width: 370px;
  width: 100%;
  text-align: center;
  background: #fffe00;
  filter: drop-shadow(4px 4px 10px #747474); /* 要素全体に影を付ける */
  margin-bottom: 60px;
}

.diagonal-title h2 {
  transform: skewX(15deg); /* 親の傾きを打ち消して文字を水平に */
  font-size: 4.6rem;
}

/* ========================================
   LP風デザインの概要説明欄デザイン
   ======================================== */
.lp-about {
  max-width: 1320px;
  width: 95%;
  margin: 0 auto; /* 水平方向中央揃え */
  display: flex;
  align-items: center; /* 子要素を上下中央に配置 */
  padding-top: 60px;
  padding-bottom: 80px;
}

.lp-wrapper {
  display: flex;
  gap: 60px; /* 子要素間の間隔 */
  margin: 0 auto;
}

.lp-about .text-area {
  flex: 1; /* 残りスペースを均等に分配 */
  font-weight: bold;
}

.lp-about .image-area {
  flex: 1.5; /* text-areaの1.5倍の幅を確保 */
}

.lp-about-list {
  font-size: 2.5rem;
}
@media screen and (max-width: 768px) {
  .lp-about-list {
    font-size: 2.2rem;
  }
}

/* ========================================
   カラー文字いりタイトル
   ======================================== */
.lp-color-title {
  display: flex;
  justify-content: center;
  color: #002244;
  padding: 0 20px;
}

.lp-color-title h2 {
  font-size: 6rem;
}

.lp-color-title .orange-text {
  color: #ff7f32;
}

.lp-color-title .blue-text {
  color: #0d9cfd;
}

.lp-color-title .fz-68 {
  font-size: 10rem;
}

/* ========================================
   シャドウつきリストデザイン
   ======================================== */
.lp-shadow-list {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap; /* 折り返しを許可 */
  gap: 50px 25px; /* 行間50px、列間25px */
  padding-top: 50px;
}

.lp-shadow-item a {
  display: block;
  position: relative; /* 子要素の絶対配置の基準 */
  background-color: #007acc;
  padding: 24px 6px 12px 6px;
  border: 3px solid #000;
  box-shadow: 10px 10px 0px 0px rgba(0, 0, 0, 1); /* 立体的な影 */
  transition: 0.2s all; /* ホバー時のアニメーション */
  transform-origin: right bottom; /* 変形の基点 */
}
.lp-shadow-item img:not(.arrow) {
  width: 100%;
}

.lp-shadow-item a:hover {
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 1); /* 影を消す */
  background-color: #ff7f32;
}

/* ナンバーバッジ */
.lp-shadow-item .number {
  display: block;
  position: absolute; /* 親要素を基準に絶対配置 */
  top: -40px; /* 上にはみ出す */
  right: 0;
  left: 0;
  margin: auto; /* 水平方向中央揃え */
  font-size: 4.5rem;
  text-align: center;
  color: #fff;
  border-radius: 30px; /* 角丸 */
  border: 5px solid #fff;
  background-color: #007acc;
  max-width: 115px;
  width: 100%;
  transition: 0.2s all;
}

.lp-shadow-item a:hover .number {
  background-color: #ff7f32;
}

.lp-shadow-item h3 {
  font-size: 2.8rem;
  line-height: 1.2;
  color: #fff;
  padding: 10px 0;
  text-align: center;
}

.lp-shadow-item .arrow {
  position: relative;
  right: 0;
  left: 0;
  margin: auto;
  transform: rotate(90deg); /* 矢印を下向きに回転 */
}

/* ========================================
   シャドウつきタイトル
   ======================================== */
.lp-shadow-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding-bottom: 60px;
}

/* 大きな番号 */
.lp-shadow-title span {
  font-size: 14rem;
  line-height: 1;
  color: #007acc99; /* 透明度60%の青 */
  font-weight: bold;
}

/* タイトルボックス */
.lp-shadow-title h2 {
  display: block;
  background-color: #007acc;
  color: #fff;
  padding: 15px 20px;
  border: 3px solid #000;
  box-shadow: 10px 10px 0px 0px rgba(0, 0, 0, 1); /* 立体的な影 */
  font-size: 4.8rem;
}

/* ========================================
   before - after リスト
   ======================================== */
.lp-before-after-list {
  display: flex;
  width: 95%;
  margin: 0 auto;
  align-items: center;
  position: relative; /* キャプションの絶対配置の基準 */
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  padding-bottom: 30px;
}

.lp-before-after-list.only-center {
  max-width: 1190px;
}

.lp-before-after-list .before,
.lp-before-after-list .after {
  max-width: calc(50% - 5px);
}

#plating-only .lp-before-after-list.only-center .before {
  max-width: 100%;
  width: 100%;
  display: block;
}

/* キャプション */
.lp-before-after-list .caption {
  font-weight: bold;
  font-size: 2.7rem;
}

.lp-before-after-list-only .caption {
  font-weight: bold;
  font-size: 2.7rem;
}

#semi-roof .lp-before-after-list {
  max-width: 1475px;
}

#semi-roof .lp-before-after-list .caption {
  font-weight: 500;
  padding-bottom: 80px;
  text-align: left !important;
  font-size: 2.5rem;
}
@media screen and (max-width: 768px) {
  #semi-roof .lp-before-after-list .caption {
    padding-bottom: 50px;
    font-size: 2rem;
  }
}
@media screen and (max-width: 480px) {
  #semi-roof .lp-before-after-list .caption {
    padding-bottom: 30px;
    font-size: 1.8rem;
  }
}

/* ========================================
   動画エリア
   ======================================== */
.lp-video {
  padding: 60px 30px;
  width: 1560px;
  max-width: 100%;
  margin: 0 auto; /* 水平方向中央揃え */
}

.lp-videoArea {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* YouTube埋め込みのレスポンシブ対応 */
.lp-videoArea iframe {
  max-width: 100%;
  height: auto;
  aspect-ratio: 16 / 9; /* 16:9のアスペクト比を維持 */
}

/* 矢印付きタイトル */
.arrow-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.arrow-title h3 {
  font-size: 2.4rem;
}

/* ========================================
   レスポンシブ対応
   ======================================== */

/* ------------------------------------------
   1200px以下（大画面）
   ------------------------------------------ */
@media screen and (max-width: 1200px) {
  /* シャドウつきタイトル */
  .lp-shadow-title span {
    font-size: 10rem;
  }

  .lp-shadow-title h2 {
    font-size: 4rem;
  }

  /* シャドウつきリスト */
  .lp-shadow-list {
    gap: 50px 20px;
  }

  .lp-shadow-item h3 {
    font-size: 2.4rem;
  }
}

/* ------------------------------------------
   1100px以下（タブレット横向き）
   ------------------------------------------ */
@media screen and (max-width: 1100px) {
  /* 概要説明欄 */
  .lp-about {
    padding-top: 40px;
    padding-bottom: 0;
  }

  .lp-wrapper {
    flex-direction: column; /* 縦並びに変更 */
    align-items: center;
    gap: 20px;
    padding-bottom: 20px;
  }
}

/* ------------------------------------------
   768px以下（タブレット）
   ------------------------------------------ */
@media screen and (max-width: 768px) {
  /* 中央揃えタイトル */
  .lp-title-center {
    padding-bottom: 50px;
  }

  .lp-title-center span {
    font-size: 2.4rem;
  }

  .lp-title-center h2 {
    font-size: 4.5rem;
  }

  /* 黄色ななめタイトル */
  .diagonal-title {
    margin-bottom: 30px;
    max-width: 300px;
  }

  .diagonal-title h2 {
    font-size: 4.4rem;
  }

  /* ラッパー */
  .lp-wrapper {
    gap: 20px;
  }

  /* カラー文字タイトル */
  .lp-color-title h2 {
    font-size: 4rem;
  }

  /* シャドウつきタイトル */
  .lp-shadow-title {
    flex-direction: column; /* 縦並びに変更 */
    gap: 10px;
    padding-bottom: 40px;
  }

  .lp-shadow-title span {
    font-size: 8rem;
  }

  .lp-shadow-title h2 {
    font-size: 3rem;
    padding: 12px 16px;
    box-shadow: 6px 6px 0px 0px rgba(0, 0, 0, 1);
  }

  /* シャドウつきリスト */
  .lp-shadow-list {
    gap: 40px 15px;
    padding-top: 40px;
    padding-left: 15px;
    padding-right: 15px;
  }

  .lp-shadow-item {
    width: calc(50% - 8px);
  }

  .lp-shadow-item a {
    width: 100%;
    padding: 20px 6px 10px 6px;
    box-shadow: 6px 6px 0px 0px rgba(0, 0, 0, 1);
  }

  .lp-shadow-item .number {
    font-size: 3.5rem;
    max-width: 90px;
    top: -30px;
    border-width: 4px;
  }

  .lp-shadow-item .arrow {
    max-width: 12px;
  }

  /* before-afterリスト */
  .lp-before-after-list {
    flex-direction: column; /* 縦並びに変更 */
    gap: 10px;
    padding-bottom: 30px;
  }

  .lp-before-after-list .before,
  .lp-before-after-list .after {
    max-width: 100%;
  }

  .lp-before-after-list .caption {
    position: static; /* 絶対配置を解除 */
    font-size: 2.2rem;
    text-align: center;
    padding-top: 10px;
  }

  .lp-before-after-list .arrow {
    transform: rotate(90deg); /* 矢印を下向きに */
  }
  .lp-before-after-list .arrow img {
    height: 50px;
  }

  /* 動画エリア */
  .lp-video {
    padding: 0 15px;
  }

  .arrow-title img {
    width: 24px;
    height: auto;
  }

  .lp-videoArea iframe {
    width: 100%;
  }

  .lp-color-title .fz-68 {
    font-size: 8rem;
  }
}

/* ------------------------------------------
   480px以下（スマートフォン）
   ------------------------------------------ */
@media screen and (max-width: 480px) {
  /* 中央揃えタイトル */
  .lp-title-center {
    padding-bottom: 40px;
  }

  .diagonal-title h2 {
    font-size: 3.5rem;
  }

  /* シャドウつきタイトル */
  .lp-shadow-title {
    padding-bottom: 30px;
  }

  .lp-shadow-title span {
    font-size: 6rem;
  }

  .lp-shadow-title h2 {
    font-size: 2.4rem;
    padding: 10px 14px;
    box-shadow: 4px 4px 0px 0px rgba(0, 0, 0, 1);
  }

  /* シャドウつきリスト */
  .lp-shadow-list {
    gap: 35px 10px;
    padding-top: 30px;
  }

  .lp-shadow-item a {
    padding: 16px 4px 8px 4px;
    box-shadow: 4px 4px 0px 0px rgba(0, 0, 0, 1);
    border-width: 2px;
  }

  .lp-shadow-item .number {
    font-size: 2.8rem;
    max-width: 70px;
    top: -25px;
    border-width: 3px;
  }

  .lp-shadow-item h3 {
    font-size: 1.6rem;
    padding: 6px 0;
  }

  .lp-shadow-item .arrow {
    width: 20px;
  }

  .lp-before-after-list .caption {
    font-size: 1.8rem;
  }

  /* 動画エリア */
  .lp-video {
    padding: 30px 15px;
  }

  .arrow-title h3 {
    font-size: 1.6rem;
  }

  .arrow-title img {
    width: 20px;
  }

  /* カラー文字タイトル */
  .lp-color-title h2 {
    font-size: 3rem;
  }

  .lp-color-title .fz-68 {
    font-size: 6rem;
  }
}