@charset "UTF-8";

/* ==========================================================================
   1. ユーティリティ（表示切り替え） - 最優先設定
   ========================================================================== */
/* PCでの表示設定 */
.u-pc-only {
  display: block !important;
}

.u-sp-only {
  display: none !important;
}

/* スマホでの表示設定 (768px以下) */
@media screen and (max-width: 768px) {
  .u-pc-only {
    display: none !important;
  }

  .u-sp-only {
    display: block !important;
  }
}


/* ==========================================================================
   2. セクション全体レイアウト
   ========================================================================== */
.-mo-new-custom {
  padding-top: 20px;

}

.p-promo-section {
  background-color: #f7fafc;
  padding-bottom: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.p-promo-section__inner {
  background-color: #f7fafc;
  margin: 0 20px;
  border-radius: 20px;
  text-align: center;
}

.p-promo-section__image-area {
  display: flex;
  justify-content: center;
  width: 100%;
}

/* 画像ボックス */
.p-promo-section__img-box {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 100%;
}

.p-promo-section__img-box img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* 重ね合わせ用アイテム設定 */
.p-promo-section__tag-item {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.ServiceFunctions_head {
  margin: 20px 0px;
}

.section-wrapper {
  margin-top: 5%;

}

.wrapper {
  position: relative;
  width: 60%;
  aspect-ratio: 16/9;
}

.wrapper iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ServiceMerit {
  padding: 30px 12px 0px
}

.inner_pos {
  display: grid;
  grid-auto-flow: column;
  gap: 24px;
  margin: 40px 120px 51px 120px;
  text-align: center;
  align-items: center;
  justify-content: center;
}

[class^="all_inner_pos_"] {
  background-color: #FFF;
  padding-top: 0px;
  padding-bottom: 10px;
  display: flex;
  flex-flow: column;
  justify-content: center;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

/* ページコンテンツのメインエリアの共通設定 */
[class^="inner_pos_"] {
  background-color: #fff;
  border-radius: 20px;
  max-width: 100%;
  height: auto;
  text-align: center;
  object-fit: contain;
}

/* 画像セクションの全体ラッパーの共通設定 */
[class^="imag_inner_pos_"] {
  display: flex;
  justify-content: center;
  object-fit: contain;
}

/* PC表示用の画像配置コンテナ (grid利用) の共通設定 */
[class^="tag_box_pos_"] {
  display: grid;
  grid-auto-flow: column;
  gap: 0px;
  margin-top: 0px;
  justify-content: center;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

/* 各画像要素のラッパーの共通設定 */
[class^="tag1_pos_"],
[class^="tag2_pos_"],
[class^="tag3_pos_"],
[class^="tag4_pos_"],
[class^="tag5_pos_"] {
  display: flex;
}

/* 特定の画像の上方向へのオフセットの共通設定 */
[class^="tag3_pos_"],
[class^="tag4_pos_"],
[class^="tag5_pos_"] {
  margin-top: -50px;
}

/* .tag5 のみの個別スタイル */
[class^="tag5_pos_"] {
  width: 100%;
}

.tag1_pos {
  display: flex;
  align-items: center;
  justify-content: center;

}

.tag2_pos {
  display: flex;
  align-items: center;
  justify-content: center;

}

.tag3_pos {
  display: flex;
  align-items: center;
  justify-content: center;

}

.tag5_pos {
  display: flex;
  align-items: center;
  justify-content: center;

}

/* 画像の縦横比を維持するためのスタイル */
.tag1_pos img,
.tag2_pos img,
.tag3_pos img,
.tag4_pos img,
.tag5_pos img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.tag1_sp_pos {
  display: none;
  align-items: center;
  justify-content: center;
}

.tag2_sp_pos {
  display: none;
  align-items: center;
  justify-content: center;
}

.tag3_sp_pos {
  display: none;
  align-items: center;
  justify-content: center;
}

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

.tag5_sp_pos {
  display: none;
  align-items: center;
  justify-content: center;
}

.ServiceLineup {
  padding: 20px 12px 20px
}




/* ==========================================================================
   4. スマホ用スタイル調整 (max-width: 768px)
   ========================================================================== */
@media screen and (max-width: 768px) {

  .p-promo-section__inner {
    margin: 10px;
  }

  .p-promo-section__image-area {
    margin: 0px 0px 0px 0px;
    padding-bottom: 20px;
  }



}

.ServiceFunctions {
  padding: 50px 0px 0px 0px;
}

@media screen and (max-width: 768px) {
  .ServiceMerit {
    padding: 30px 12px 0px
  }

  .ServiceFunctions_head {
    margin: 0px 0px;
  }

  .ServiceFunctions_list {
    margin-top: 24px
  }

  .ServiceLineup_semihead {
    margin: 10px;

  }

  .section-wrapper {
    margin-top: 5%;

  }

  .wrapper {
    position: relative;
    width: 80%;
    aspect-ratio: 16/9;
  }

  .wrapper iframe {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .inner_pos {
    display: flex;
    gap: 0px;
    margin-top: 0px;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    align-items: center;
    justify-content: center;
  }

  [class^="imag_inner_pos_"] {
    background-color: #FFF;
    margin: 0px 10px 0px 10px;
    padding: 0px 20px 0px 20px;
    justify-content: center;
  }

  .tag_sp_pos {
    display: flex;
    margin-left: 10px;
    margin-right: 10px;
    gap: 20px;
    align-items: center;
    justify-content: center;
    /* ;を追加 */
  }

  .tag_sp_2_pos {
    display: flex;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 5px;
    gap: 20px;
    align-items: center;
    justify-content: center;
    /* ;を追加 */
  }

  .tag1_sp_pos {
    display: flex;
    margin-top: 20px;
  }

  .tag2_sp_pos {
    display: flex;
    margin-top: 20px;
  }

  .tag3_sp_pos {
    display: flex;
    margin-top: 12px;
  }

  .tag5_sp_pos {
    display: flex;
    margin-top: 12px;
  }

  .tag2_pos {
    display: none;
  }

  .tag1_pos {
    display: none;
  }

  .tag3_pos {
    display: none;
  }

  .tag5_pos {
    display: none;
  }

  /* 画像の縦横比を維持するためのスタイル (SP) */
  .tag1_sp_pos img,
  .tag2_sp_pos img,
  .tag3_sp_pos img,
  .tag4_sp_pos img,
  .tag5_sp_pos img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
  }


}

/* =================================================================
   ボタンのホバー効果 (透明度変化)
   ================================================================= */

/* 共通設定：変化を滑らかにする */
.MoHero_btns {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* ホバー時の動作 */
.MoHero_btn:hover,
.MoHero_mini_btn:hover {
  opacity: 0.7;
  /* 透明度を70%にする */
  cursor: pointer;
}

/* =================================================================
   ServiceMeritItem (Feature Layout)
   ================================================================= */
.ServiceMeritItem {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 0 20px 35px;
}

.ServiceMeritItem__inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  max-width: 1152px;
  background-color: #fff;
  gap: 40px;
}

/* 画像エリア */
.ServiceMeritItem__img {
  width: 50%;
  flex-shrink: 0;
}

.ServiceMeritItem__img img,
.ServiceMeritItem__img video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

/* コンテンツエリア */
.ServiceMeritItem__content {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
}

/* ヘッダー ("01" と ラベル) */
.ServiceMeritItem__header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  gap: 15px;
}

.ServiceMeritItem__number {
  font-size: 60px;
  font-weight: bold;
  font-family: 'Poppins', sans-serif !important;
  color: #ff8c00;
  letter-spacing: -0.04em;
  line-height: 1;
}

.ServiceMeritItem__label {
  background-color: #ff8c00;
  color: #fff;
  padding: 8px 16px;
  font-size: 16px;
  font-weight: bold;
  border-radius: 4px;
}

/* タイトル */
.ServiceMeritItem__title {
  font-size: 28px;
  font-weight: bold;
  color: #333;
  margin-bottom: 20px;
  line-height: 1.4;
}

/* 本文 */
.ServiceMeritItem__text {
  font-size: 16px;
  color: #666;
  line-height: 1.8;
}

/* SP (スマホ) 対応 */
@media screen and (max-width: 768px) {
  .ServiceMeritItem__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0px;
  }

  /* テキストラッパーのスタイルを無効化して子要素をフラットに扱う */
  .ServiceMeritItem__content {
    display: contents;
  }

  /* 順序の制御 (1: Header, 2: Title, 3: Image, 4: Text) */
  .ServiceMeritItem__header {
    order: 1;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin-bottom: 10px;
  }

  .ServiceMeritItem__title {
    order: 2;
    text-align: center;
    font-size: 18px;
    margin-bottom: 10px;
    width: 100%;
  }

  .ServiceMeritItem__img {
    order: 3;
    width: 100%;
    margin-bottom: 10px;
  }

  .ServiceMeritItem__text {
    order: 4;
    text-align: left;
    width: 100%;
  }

  .ServiceMeritItem__number {
    font-size: 40px;
    margin-right: 0;
    /* PCレイアウトの余白打ち消し */
  }
}

/* =================================================================
   SupportSystem (安心サポート)
   ================================================================= */
.SupportSystem {
  padding: 60px 20px 20px 20px;
  background-color: #fff;
  text-align: center;
}

.SupportSystem__subtitle {
  font-size: 20px;
  color: #666;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-bottom: 5px;
  font-family: 'Poppins', sans-serif !important;
}

.SupportSystem__title {
  font-size: 40px;
  color: #ff8c00;
  margin-bottom: 40px;
  font-weight: bold;
}

.SupportSystem__list {
  display: flex;
  justify-content: center;
  gap: 40px;
  max-width: 1152px;
  margin: 0 auto;
}

.SupportSystem__item {
  width: 50%;
  max-width: 560px;
}

.SupportSystem__item img {
  width: 100%;
  height: auto;
  display: block;
}

/* SP Responsive */
@media screen and (max-width: 768px) {
  .SupportSystem__list {
    flex-direction: column;
    align-items: center;
    gap: 30px;
  }

  .SupportSystem__item {
    width: 100%;
    max-width: 100%;
  }

  .SupportSystem__title {
    font-size: 24px;
    margin-bottom: 30px;
  }
}

.SupportSystem__item picture {
  display: block;
  width: 100%;
}

.SupportSystem__item picture img {
  width: 100%;
  height: auto;
  display: block;
}

/* --- FAQ Anchor Scroll Fix --- */
#faq {
  scroll-margin-top: 180px;
}