@charset "UTF-8";

/* サービストップ */

/* --- 横揺れ防止（全体） --- */
body {
  overflow-x: hidden;
}

.resetFv {
  overflow: hidden;
}

/* --- ベース設定 --- */
.fvr {
  margin-left: 40px;
  margin-top: -30px;
}

.all_inner {
  background-color: #F2F7FF;
  padding-top: 36px;
  padding-bottom: 36px;
  display: flex;
  justify-content: center;
  /* 横揺れ防止 */
  width: 100%;
  overflow: hidden;
}

.inner {
  margin-top: 10px;
  width: 100%;
}

/* --- テキストスタイル --- */
.text {
  margin-top: 0px;
}

.text .lead_sm {
  font-size: 40px;
  font-weight: bold;
  color: #3F4042;
  margin: 0px 0px 8px 0px;
  text-align: center;
}

.text .lead_sm span {
  font-size: 40px;
  font-weight: bold;
  color: #FF7500;
  margin: 0px 0px 8px 0px;
  text-align: center;
  border-bottom: 3px solid #FF7500;
  display: inline-block;
  padding-bottom: 10px;
}

.ServiceMerit_head span {
  font-size: 40px;
  font-weight: bold;
  color: #3F4042;
  border-bottom: 3px solid #FF7500;
  display: inline-block;
  padding-bottom: 10px;
}



.text .lead_ttl {
  font-size: 32px;
  font-weight: bold;
  color: #3F4042;
  text-align: center;
  line-height: 1.5;
}

/* --- 画像エリア（PC） --- */
.img {
  margin-top: 0px;
}

.img_inner {
  display: flex;
  justify-content: center;
}

/* メイン画像の箱 */
.img_box {
  width: 500px;
  max-width: 100%;
  /* はみ出し防止 */
}

.img_box img {
  width: 100%;
  height: auto;
}

/* --- タグセクション（PC） --- */
.tag_box {
  display: flex;
  /* gridからflexに変更 */
  justify-content: center;
  gap: 36px;
  margin: -150px 0 60px 0;
  /* 左右マージンを削除し中央寄せ */
  width: 100%;
}

/* PC版タグ画像の親要素 */
.tag1,
.tag2,
.tag3 {
  display: block;
  /* 幅を指定しないとflex内で潰れるため、具体的な幅かflex-basisを指定 */
  flex: 0 1 auto;
  width: auto;
  max-width: 300px;
  /* 必要に応じて画像の最大幅を調整 */
}

/* PC版タグ画像の強制修正（重要） */
.tag_box img {
  width: auto !important;
  /* 横幅の強制引き伸ばしを解除 */
  max-width: 100% !important;
  /* 親要素からはみ出さない */
  height: auto !important;
  /* 縦比率を維持 */
  display: block;
  margin: 0 auto;
}

/* figureタグのリセット */
.tag_box figure,
.tag_box_sp figure {
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
}

/* --- PC・SP 表示切り替え --- */
/* PCで隠すもの */
.img_sp,
.img_box_sp,
.tag4,
.tag1_sp,
.tag2_sp,
.tag3_sp,
.tag_inner_sp,
.tag_box_sp {
  display: none !important;
}

.ServiceLineup {
  padding: 0px 20px 20px 20px !important;
}

/* =================================================================
   Clientsセクション（導入店舗・会員数）のコンパクト化
   ================================================================= */

/* 1. 全体の幅と余白を詰める */
.Clients_inner {
  margin: 0 auto !important;
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}

/* 2. 上部（数字部分）のレイアウト調整 */
.Clients_top {
  margin-bottom: 0px !important;
  /* 下のロゴとの距離を詰める */
  gap: 140px !important;
  /* 左右の項目の間隔を調整 */
}

/* 肩書き（導入店舗、利用会員数） */
.Clients_top-shoulder {
  font-size: 30px !important;
  margin-bottom: 5px !important;
}

/* 数字部分 (3,000 / 2,000) */
.Clients_top-head-number {
  font-size: 60px !important;
  /* 強調しつつも大きすぎないサイズへ */
  line-height: 1 !important;
}

/* 単位・補足テキスト (店舗 / 万人突破) */
.Clients_top-head-text {
  font-size: 12px !important;
  line-height: 1.4 !important;
  margin-left: 5px !important;
}

.Clients_top-item::after,
.Clients_top-item::before {
  content: "";
  width: 37px;
  height: 120px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.resetFv_btn .resetFv_btn_as {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* ホバー時の動作 */
.resetFv_btn.btn1:hover,
.resetFv_btn.btn2:hover,
.resetFv_btn.btn3:hover,
.resetFv_btn_as.btn1_as:hover,
.resetFv_btn_as.btn2_as:hover {
  opacity: 0.7;
  /* 透明度を70%にする */
  cursor: pointer;
}

.CasestudyList.-slider {
  padding: 30px 0
}

/* --- SP（スマホ）表示 --- */
@media (max-width: 768px) {

  .Clients_inner {
    margin: -50px auto !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
  }

  /* 2. 上部（数字部分）のレイアウト調整 */
  .Clients_top {
    margin-bottom: 0px !important;
    /* 下のロゴとの距離を詰める */
    gap: 50px !important;
    /* 左右の項目の間隔を調整 */
  }

  /* 肩書き（導入店舗、利用会員数） */
  .Clients_top-shoulder {
    font-size: 20px !important;
    margin-bottom: 5px !important;
  }

  /* 数字部分 (3,000 / 2,000) */
  .Clients_top-head-number {
    font-size: 35px !important;
    /* 強調しつつも大きすぎないサイズへ */
    line-height: 1 !important;
  }

  /* 単位・補足テキスト (店舗 / 万人突破) */
  .Clients_top-head-text {
    font-size: 10px !important;
    line-height: 1.4 !important;
    margin-left: 5px !important;
  }

  .Clients_top-item::after,
  .Clients_top-item::before {
    content: "";
    width: 27px;
    height: 100px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
  }

  .Clients_sliders {
    margin-top: 14px
  }

  .ServiceLineup {
    padding: 0px 12px 20px 12px !important;
  }

  /* SPで隠すもの（PC要素） */
  .img_box,
  .tag1,
  .tag2,
  .tag3 {
    display: none !important;
  }

  /* --- SP版レイアウト調整 --- */
  .all_inner {
    padding-bottom: 30px;
  }

  /* SP画像全体コンテナ */
  .img_sp {
    display: block !important;
    margin: 0 auto;
    width: 100%;
  }

  .img_inner_sp {
    display: flex !important;
    justify-content: center;
    align-items: center;
  }

  /* SPメイン画像ボックス */
  .img_box_sp {
    display: flex !important;
    justify-content: center;
    margin-top: 0px;
    width: 100%;
    max-width: 278px;
    /* 画像サイズに合わせて調整 */
  }

  .img_box_sp img,
  .img_box_sp video {
    width: 100% !important;
    height: auto !important;
  }

  /* SPタグセクション */
  .tag_inner_sp {
    display: flex !important;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  .tag_box_sp {
    margin-top: 40px;
    display: flex !important;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    z-index: 2;
    gap: 20px;
    /* 画像間の隙間 */
  }

  /* SPタグアイテム */
  .tag1_sp,
  .tag2_sp,
  .tag3_sp {
    display: block !important;
    margin: 0;
    width: 80%;
    /* スマホ画面幅に対する画像の大きさ */
    max-width: 300px;
  }

  /* SPタグ画像の強制修正 */
  .tag_box_sp img {
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
    /* WPの制限解除 */
    display: block;
  }

  /* --- テキストSP調整 --- */
  .text .lead_sm {
    margin-top: 10px;
    font-size: 24px;
    padding: 0 10px;
    /* 横幅いっぱいの時に文字が切れないように */
  }

  .text .lead_sm span {
    font-size: 24px;
    padding-bottom: 0px;
  }

  .text .lead_ttl {
    font-size: 20px;
    /* スマホではタイトルを少し小さく */
    padding: 0 10px;
  }

  .CasestudyList.-slider {
    padding: 20px 0;
  }
}

.all_inner_2 {
  height: auto;
  background-color: #fff;
  padding-top: 0px;
  padding-bottom: 60px;
  /* 横揺れ防止 */
  width: 100%;
  overflow: hidden;
}

.inner_2 {
  margin-top: 40px;
}

.text_2 {
  margin-top: 0px;
}

.tag_box2 {
  display: grid;
  grid-auto-flow: column;
  gap: 30px;
  margin: 40px 120px 0px 120px;
  align-items: center;
  justify-content: center;
}

.text_2 .lead_sm {
  font-size: 40px;
  font-weight: bold;
  color: #3F4042;
  margin: 0px 0px 8px 0px;
  text-align: center;
  line-height: 1.4;
}

.text_2 .lead_min {
  font-size: 11px;
  font-weight: medium;
  color: #666666;
  margin: 0px 0px 8px 0px;
  text-align: center;
  line-height: 1.4;
}

.text_2 .lead_min_sp {
  display: none;
}

.tag_box2 img {
  max-width: 100%;
  height: auto;
  display: block;
}

.tag_box2 figure {
  margin: 0;
  padding: 0;
}

.tag_box_sp2 img {
  max-width: 100%;
  height: auto;
  display: block;
}

.tag_box_sp2 figure {
  margin: 0;
  padding: 0;
}

@media (max-width: 768px) {
  .all_inner_2 {
    padding-bottom: 10px;
    overflow: hidden;
  }

  .tag_box2 {
    display: none;
  }

  .tag_box_sp2 {
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
  }

  .text_2 .lead_sm {
    margin: 24px 0px -0px;
    font-size: 24px;
  }

  .text_2 .lead_min {
    display: none;
  }

  .text_2 .lead_min_sp {
    display: block;
    font-size: 11px;
    font-weight: medium;
    color: #666666;
    margin: 10px 0px 8px 0px;
    text-align: center;
    line-height: 1.4;
  }
}


/* --- 繁盛店サイクル --- */
.all_inner_3 {
  background-color: #F2F7FF;
  height: auto;
  padding-top: 36px;
  padding-bottom: 60px;
  /* 横揺れ防止 */
  width: 100%;
  overflow: hidden;
}

.inner_3 {
  margin-top: 20px;
}

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

.tag1_3top {
  margin-top: 170px;
  width: 85%;
}

.tag1_3 {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  width: 100%;
}

.text_3 {
  margin-top: 0px;
}

.text_3 .lead_sm {
  display: block;
  font-size: 40px;
  font-weight: bold;
  color: #3F4042;
  margin: 0px 0px 8px 0px;
  text-align: center;
  line-height: 1.4;
}

.text_3 .lead_sm_sp {
  display: none;
}

.tag_inner_sp {
  display: none;
}

.tag1_sp_3 {
  display: none;
}


@media screen and (max-width: 768px) {
  .all_inner_3 {
    padding-top: 15px;
    padding-bottom: 0px;
  }


  .text_3 .lead_sm_sp {
    display: block;
    font-size: 24px;
    font-weight: bold;
    color: #3F4042;
    margin: 0px 0px 8px 0px;
    text-align: center;
    line-height: 1.4;
  }

  .text_3 .lead_sm {
    display: none;
  }

  .tag_inner_3 {
    display: none;
  }

  .tag_inner_sp {
    display: flex;
    margin-top: 0px;
    align-items: center;
    justify-content: center;
  }

  .tag1_3 {
    display: none;
  }

  .tag1_sp_3 {
    margin-top: -20px;
    margin-bottom: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 95%;
  }
}

/* --- 繁盛店サイクル ここまで--- */

/* --- 機能紹介 --- */
.all_inner_4 {
  background-color: #fff;
  width: 100%;
  height: auto;
  /* 高さは中身に合わせる */
  padding-top: 60px;
  padding-bottom: 60px;
  overflow-x: hidden;
  /* 横スクロール防止 */
}

/* --- テキストエリア（共通） --- */
.inner_4 {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto 40px;
  padding: 0 20px;
  box-sizing: border-box;
}

.text_4 {
  display: flex;
  flex-flow: column;
  justify-content: center;
  object-fit: center;
  align-items: center;
  margin-bottom: 80px;
}

.text_4 .lead_sm {
  text-align: center;
  font-size: 32px;
  font-weight: bold;
  color: #3F4042;
  margin-bottom: 16px;
  line-height: 1.4;
}

.text_4 .lead_mini {
  text-align: center;
  font-size: 16px;
  color: #3F4042;
  line-height: 1.6;
}

/* SP用テキストはPCでは非表示 */
.text_4 .lead_sm_sp,
.text_4 .lead_mini_sp {
  display: none;
}

/* --- PCレイアウト（画像を中央基準で結合） --- */
.tag_inner_4 {
  width: 100%;
  display: flex;
  justify-content: center;
  padding-bottom: 40px;
}

/* 中央の動画エリアを基準点(relative)にする */
.tag_box_4 {
  position: relative;
  width: 325px;
  /* 動画の横幅 */
  height: 401px;
  /* 動画の高さ */
  margin: 0 auto;
}

/* 中央：動画 */
.tag2_4 {
  width: 100%;
  height: 100%;
  transform: translateX(20%);
  position: relative;
  z-index: 10;
  /* 最前面ではないが奥でもない */
}

.tag2_4 video {
  width: 100%;
  height: 100%;
  border-radius: 0px;
  /* スマホの角丸に合わせる（必要に応じて調整） */
}

/* --- 左：説明画像（WP修正版） --- */
/* ★修正：誤字 !importa を !important に修正 */
.tag1_4 {
  position: absolute;
  top: 50%;
  right: 100%;
  transform: translateY(-51%);
  margin-right: -148px;
  z-index: 20;
  width: 465px !important;
  min-width: 465px !important;
  /* これ以上縮ませない */
  max-width: none !important;
  /* WPの制限を解除 */
  display: block;
}

/* ▼WPテーマの「画像100%制限」をこの画像だけ無効化 */
.tag1_4 img {
  width: 100% !important;
  /* 親の465pxに合わせる */
  max-width: none !important;
  /* 制限解除 */
  height: auto !important;
  /* 縦横比維持 */
}

/* --- 右：説明画像（WP修正版） --- */
.tag3_4 {
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
  margin-left: -20px;
  z-index: 20;
  width: 496.5px !important;
  min-width: 496.5px !important;
  max-width: none !important;
  display: block;
}

.tag3_4 img {
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
}

/* 右：説明画像の配置調整（重複していたため整理） */
.tag3_4 {
  position: absolute;
  top: 50%;
  left: 100%;
  /* 中央ボックスの右端にくっつける */
  transform: translateY(-51%);
  /* 垂直中央揃え */
  margin-left: -175px;
  /* 中央動画に少し重ねる微調整 */
  z-index: 20;
  width: 496.5px;
  /* 画像の幅 */
  display: block;
}

/* SP版エリアはPCで非表示 */
.tag_inner_sp_4 {
  display: none;
}


/* --- SPレイアウト（768px以下） --- */
@media screen and (max-width: 768px) {
  .all_inner_4 {
    padding-top: 40px;
    padding-bottom: 0px;
    overflow: hidden;
  }

  .text_4 {
    margin-bottom: 0px;
  }

  /* テキストの切り替え */
  .text_4 .lead_sm,
  .text_4 .lead_mini {
    display: none;
  }

  .text_4 .lead_sm_sp {
    display: block;
    font-size: 24px;
    font-weight: bold;
    color: #3F4042;
    margin-bottom: 10px;
    line-height: 1.4;
    text-align: center;
  }

  .text_4 .lead_mini_sp {
    display: block;
    font-size: 15px;
    line-height: 1.6;
    text-align: left;
    /* SPは左寄せが見やすい */
  }

  /* PCエリア非表示 */
  .tag_inner_4 {
    display: none;
  }

  /* SPエリア表示 */
  .tag_inner_sp_4 {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 20px;
  }

  /* SPの画像ボックス設定 */
  .tag_box_sp_4 {
    position: relative;
    width: 100%;
    max-width: 375px;
    /* スマホ画像自体の最大幅 */
    /* アスペクト比を維持するための高さ確保（画像の比率に合わせて調整） */
    aspect-ratio: 350 / 588;
    margin: 0 auto;
  }

  /* スマホ枠画像（手前） */
  .tag1_sp_4 {
    position: relative;
    /* 高さを確保する主役 */
    width: 100%;
    z-index: 2;
    /* 動画より手前に表示 */
    pointer-events: none;
    /* 画像をクリック無効にして下の動画を操作可能にする（必要であれば） */
  }

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

  /* 動画（奥） */
  .tag2_sp_4 {
    position: absolute;
    z-index: 1;
    /* 枠画像の下 */
    /* 以下の数値で「スマホ枠の画面エリア」に動画を配置します */
    top: 21.5%;
    /* 上からの位置（微調整してください） */
    left: 31%;
    /* 左からの位置（微調整してください） */
    width: 55%;
    /* 動画の幅（微調整してください） */
    height: auto;
  }

  .tag2_sp_4 video {
    width: 100%;
    display: block;
    border-radius: 10px;
    /* 少し角丸をつけるとなじむ */
  }
}

/* --- ノートPC・タブレット向けの縮小対応 --- */
/* 画面幅が769px以上 〜 1350px以下のときだけ適用 */
@media screen and (min-width: 769px) and (max-width: 1350px) {
  .tag_inner_4 {
    /* 全体を80%のサイズに縮小（数字を変えれば微調整可能） */
    transform: scale(0.9);
    /* 縮小の基準点を「上・中央」にする */
    transform-origin: top center;
    /* 縮小すると上下に隙間ができるため、マイナスマージンで詰める */
    margin-bottom: -80px;
    width: 100%;
    overflow: hidden;
  }
}

/* さらに画面が狭い場合（1100px以下など）はもっと縮める */
@media screen and (min-width: 769px) and (max-width: 1100px) {
  .tag_inner_4 {
    transform: scale(0.8);
    /* 65%まで縮小 */
    margin-bottom: -140px;
    overflow: hidden;
  }
}

/* 機能紹介ここまで */
/* ピンクCTA*/

.resetFv_bttomimg_sp {
  display: none;
}

.resetFv_bttomimg_sp_2 {
  display: none;
}

.resetFv_bttomimg {
  margin-top: 0px;
  display: flex;
  justify-content: center;
}

.resetFv_bttomimg_2 {
  margin-top: 10px;
  display: flex;
  justify-content: center;
}

.resetFv_btns_as {
  margin-top: 70px;
}

.resetFv_btn_as:first-child {
  margin-right: 0px;
}

/* Download Button (Visual First/Left) */
.resetFv_btn_as.btn2_as {
  color: #FF0046;
  background: white;
  margin-right: 20px;
}

/* Contact Button (Visual Second/Right) */
.resetFv_btn_as.btn1_as {
  margin-right: 0;
}

.resetFv_btn_as.btn1_as span:first-child {
  color: white;
  margin-right: 18px;
}

.resetFv_btn_as.btn2_as span {
  color: #FF0046;
}

.resetFv_btn_as.btn2_as span:first-child {
  margin-right: 18px;
}

.resetFv_btns1_as {
  display: flex;
  flex-direction: row-reverse;
  /* Swap to [Download] [Contact] */
  margin-top: 10px;
  justify-content: center;
  margin-bottom: unset;
  align-items: center;
  margin-top: -50px;
}

.resetFv_btn_as {
  background: #FBA75c;
  background: linear-gradient(181deg, rgb(241, 93, 150) 0%, rgb(255, 61, 112) 24%, rgb(255, 0, 21) 42%, rgb(215, 2, 42) 100%);
  width: 254px;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  font-weight: bold;
  border: 2px solid #FF0046;
  border-radius: 3.25px;
}

.resetFv_under {
  margin: 23px 21% 0px 21%;
  display: flex;
  justify-content: center;
}

.resetFv_pc_bottom_txt {
  margin-bottom: 50px;
  font-size: 9px;
  color: #666666;
  display: flex;
  justify-content: center;
}

@media (max-width: 768px) {

  .resetFv_bttomimg {
    display: none !important;
  }

  .resetFv_bttomimg_2 {
    display: none !important;
  }

  .resetFv_bttomimg_sp {
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
  }

  .resetFv_bttomimg_sp_2 {
    display: flex;
    margin-top: 20px;
    flex-flow: column;
    align-items: center;
    justify-content: center;
  }

  .resetFv_btns_as {
    margin: 60px 15% 0 15%;
  }

  .resetFv_btn_as {
    width: 164px;
    height: 60px;
  }

  .resetFv_btn_as:first-child {
    margin-right: 0;
  }

  /* Reverse Order: Contact(btn1) -> Download(btn2) becomes [Download] [Contact] */
  .resetFv_btns1_as {
    flex-direction: row-reverse;
  }

  /* Download Button (Visual First/Left) */
  .resetFv_btn_as.btn2_as {
    margin-right: 12px;
  }

  /* Contact Button (Visual Second/Right) */
  .resetFv_btn_as.btn1_as {
    margin-right: 0;
  }

  .resetFv_btn_as.btn1_as span:first-child {
    margin-right: 12px;
  }

  .resetFv_btn_as.btn2_as span:first-child {
    margin-right: 10px;
  }

  .resetFv_btn_as.btn1_as span {
    font-size: 14px;
  }

  .resetFv_btn_as.btn2_as span {
    font-size: 14px;
  }

  .resetFv_under {
    margin: 23px 6% 0px 6%;
    display: flex;
    justify-content: center;
  }
}

/* ピンクCTAここまで*/
/* 投げ銭 */
/* --- ベース設定 --- */
.all_inner_5 {
  background-color: #fff;
  width: 100%;
  height: auto;
  padding-top: 40px;
  padding-bottom: 80px;
  margin-top: 0;
  overflow: hidden;
  /* 横スクロール防止 */
}

.inner_5 {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto 50px;
  padding: 0 20px;
  box-sizing: border-box;
}

/* --- テキストスタイル --- */
.text {
  text-align: center;
}

.text .lead_mini {
  font-size: 18px;
  font-weight: 500;
  /* medium -> 500 */
  color: #3F4042;
  margin: 0;
  line-height: 1.6;
}

.lead_mini_sp {
  display: none;
}

/* --- 画像エリア（PC） --- */
.tag_inner_5 {
  background-color: #fff;
  display: flex;
  justify-content: center;
  position: relative;
  width: 100%;
  padding: 0px 20px 20px 20px;
  /* 余白 */
}

/* 中央の基準ボックス */
.tag_box_5 {
  position: relative;
  width: 400px;
  /* 中央画像の幅 */
  height: 400px;
  /* 中央画像の高さ */
  margin: 0 auto;
}

/* PC画像の共通設定（WP対策含む） */
.tag1_5,
.tag2_5,
.tag3_5 {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: block !important;
  margin: 0 !important;
}

.tag_box_5 img {
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
  display: block;
}

/* --- PC各画像の配置 --- */

/* 左の画像（推しエール吹き出し＋説明） */
.tag1_5 {
  right: 100%;
  /* 中央ボックスの左端 */
  margin-right: 10px !important;
  /* 中央画像に寄せる */
  width: 314px !important;
  /* 画像の上端位置調整（必要に応じてtop/transformを微調整） */
}

/* 中央の画像（2つのスマホ画面） */
.tag2_5 {
  position: relative;
  /* 中央配置 */
  width: 399px !important;
  z-index: 10;
  margin: 0 auto !important;
  transform: none;
  top: auto;
}

/* 右の画像（チップ機能吹き出し＋説明） */
.tag3_5 {
  left: 100%;
  /* 中央ボックスの右端 */
  margin-left: 10px !important;
  /* 中央画像に寄せる */
  width: 315px !important;
}

/* PCサイズ調整（ノートPCなどで見切れないように） */
@media screen and (min-width: 769px) and (max-width: 1300px) {
  .tag_inner_5 {
    transform: scale(0.85);
    /* 全体を85%に縮小 */
    transform-origin: top center;
    margin-bottom: -60px;
  }
}

/* --- SP要素の非表示（PC時） --- */
.tag_inner_sp_5,
.tag_box_sp_5,
.tag1_sp_5,
.tag2_sp_5,
.tag3_sp_5,
.tag4_sp_5 {
  display: none !important;
}


/* --- SP（スマホ 768px以下）レイアウト --- */
@media screen and (max-width: 768px) {
  .all_inner_5 {
    padding-top: 40px;
    padding-bottom: 20px;
  }

  /* テキスト切り替え */
  .text .lead_mini {
    display: none;
  }

  .text .lead_mini_sp {
    display: block;
    font-size: 15px;
    line-height: 1.6;
    text-align: left;
    margin: 0 0 20px 0;
    color: #3F4042;
  }

  /* PCエリア非表示 */
  .tag_inner_5 {
    display: none !important;
  }

  /* SPエリア表示 */
  .tag_inner_sp_5 {
    display: flex !important;
    justify-content: center;
    width: 100%;
  }

  .tag_box_sp_5 {
    display: flex !important;
    flex-direction: column;
    /* 縦積み */
    align-items: center;
    gap: 30px;
    /* 各ブロック間の余白 */
    width: 100%;
  }

  /* SP画像の共通設定 */
  .tag1_sp_5,
  .tag2_sp_5,
  .tag3_sp_5,
  .tag4_sp_5 {
    display: block !important;
    width: 100% !important;
    max-width: 350px;
    /* スマホ画面での最大幅 */
    margin: 0 auto !important;
  }

  .tag_box_sp_5 img {
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
    display: block;
  }

  /* 個別の順序調整が必要な場合（HTMLの順番通りなら不要） */
  /* 今回HTML順序は tag1(推しスマホ) -> tag2(推し説明) -> tag3(チップスマホ) -> tag4(チップ説明) と推測されます */
}

/* 推しエールここまで */

/* さらに */
.all_inner_6 {
  background-color: #FFF;
  padding-top: 36px;
  padding-bottom: 30px;
  display: flex;
  justify-content: center;
  /* 横揺れ防止 */
  width: 100%;
  overflow: hidden;
}

.inner_6 {
  background-color: #F2F7FF;
  margin: 10px 50px 0px 50px;
  justify-content: center;
}

.img_6 {
  margin-top: 32px;
  display: flex;
}

.img_inner_6 {
  display: flex;
  justify-content: center;

}

.tag_box_6 {
  display: grid;
  grid-auto-flow: column;
  gap: 0px;
  margin: 0px 80px 60px 80px;
  justify-content: center;

}

.tag_box2_6 {
  display: grid;
  grid-auto-flow: column;
  gap: 0px;
  margin: 50px 0px 60px 0px;
  justify-content: center;

}

.tag1_6 {
  display: flex;
  width: 100%;

}

.tag2_6 {
  display: flex;
  width: 100%;
}

.tag3_6 {
  display: flex;
  margin-top: -50px;
  width: 100%;
}

.tag4_6 {
  display: flex;
  width: 100%;
  margin-top: -50px;
}

.tag5_6 {
  display: flex;
  width: 100%;
  margin-top: -50px;
}

.text_6 {
  margin-top: -45px;
  display: flex;
  flex-flow: column;
  text-align: center;
  justify-content: center;
}

.text_6 .lead_sm_6 {
  font-size: 40px;
  font-weight: bold;
  color: #000;
  margin: 0px 0px 8px 0px;
  text-align: center
}

.text_6 .lead_sm_6 span {
  font-size: 40px;
  font-weight: bold;
  color: #000000;
  border-bottom: 10.51px solid #FCCC66;
  display: inline-block;
  padding-bottom: 0px;
  text-align: center
}

.text_6 .lead_mini_6 {
  font-size: 18px;
  font-weight: 500;
  color: #3F4042;
  margin: 0px 0px 8px 0px;
  padding: 0px 240px 0 240px;
  text-align: center;
  line-height: 1.4;
}

.text_6 .lead_ttl_6 {
  font-size: 32px;
  font-weight: bold;
  color: #3F4042;
  text-align: center;
  line-height: 1.5;
}

.text_6 .lead_mini_sp_6 {
  display: none;

}

.img_sp_6 {
  display: none;

}

@media screen and (max-width: 768px) {
  .inner_6 {
    background-color: #FFF;
    margin: 10px 10px -60px 10px;
    justify-content: center;
  }

  .imag_inner_6 {
    background-color: #F2F7FF;
    margin: 10px 10px 0px 10px;
    padding: 20px 20px 20px 20px;
    justify-content: center;

  }

  .lead_mini_6 {
    display: none;

  }

  .text_6 {

    text-align: left;
  }

  .text_6 .lead_sm_6 span {
    font-size: 32px;
  }

  .text_6 .lead_mini_sp_6 {
    font-size: 18px;
    font-weight: 500;
    color: #3F4042;
    margin: 0px 20px 8px 20px;
    padding: 0px 0px 0 0px;
    line-height: 1.4;
  }

  .img_6 {
    display: none;
  }

  .tag_box_6 {
    display: none;
  }


  .tag_box2_6 {
    display: none;
  }

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

  .tag1_6 {
    display: flex;
    width: 95%;
  }

  .tag2_6 {
    display: flex;
    width: 95%;
  }

  .tag3_6 {
    display: flex;
    width: 95%;
    margin-top: 0px
  }

  .tag4_6 {
    display: flex;
    width: 95%;
    margin-top: 0px
  }

  .tag5_6 {
    display: flex;
    width: 95%;
    margin-top: 0px
  }

}

/* --- セクション全体の背景と余白 --- */
.serviceReason_Item.bg {
  background-color: #F2F7FF;
  /* 背景色の水色 */
  padding: 60px 0;
  /* 上下の余白 */
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  /* 横揺れ防止 */
}

.inner {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

/* --- テキストエリア（タイトル・リード文） --- */
.item {
  text-align: center;
  margin-bottom: 40px;

}

.ttl_head {
  font-size: 32px;
  font-weight: bold;
  color: #3F4042;
  margin: 0 0 16px 0;
  line-height: 1.4;
  text-align: center;
  justify-content: center;
  align-items: center
}

.txt_head {
  font-size: 16px;
  color: #3F4042;
  line-height: 1.6;
  text-align: center;
  width: fit-content;
  margin: 0 auto;
}

/* --- 画像エリア（PCレイアウト） --- */
.reason3 {
  width: 100%;
}

/* Flexboxで横並びにする */
.reason3_lead {
  display: flex !important;
  justify-content: center !important;
  align-items: flex-start !important;
  text-align: center;
  gap: 30px;
  /* 画像間の隙間 */
  width: 100%;
}

/* 画像を囲むタグ（figure）の設定 */
.reason3_img1,
.reason3_img2 {
  display: block !important;
  width: 48% !important;
  /* PCでは画面の半分弱 */
  max-width: 500px !important;
  /* 最大幅制限 */
  margin: 0 !important;
  /* WPのデフォルト余白削除 */
  padding: 0 !important;
}

/* 画像本体の設定 */
.reason3_img1 img,
.reason3_img2 img {
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  display: block !important;

}

/* --- ノートPCなど（幅が少し狭い画面）の調整 --- */
@media screen and (min-width: 769px) and (max-width: 1200px) {

  .reason3_img1,
  .reason3_img2 {
    width: 45% !important;
    /* 少し小さくして収める */
  }
}

/* --- SP（スマホ 768px以下）レイアウト --- */
@media screen and (max-width: 768px) {

  .serviceReason_Item.bg {
    padding: 40px 0px 0px;
    width: 100%;
  }

  /* テキストのスマホ調整 */
  .ttl_head {
    font-size: 20px;
    /* スマホでは少し小さく */
    text-align: center;
    padding: 0 10px;
  }

  .txt_head {
    font-size: 14px;
    text-align: left;
    align-items: center;
    padding: 0 10px;
    width: fit-content;
    margin: 0 auto;
  }

  /* 画像エリアを縦積みに変更 */
  .reason3_lead {
    display: flex !important;
    flex-direction: column !important;
    /* 縦並び */
    align-items: center !important;
    gap: 40px;
    /* 縦の隙間 */
  }

  /* 画像の幅をスマホ用に調整 */
  .reason3_img1,
  .reason3_img2 {
    width: 100% !important;
    max-width: 350px !important;
    /* スマホでの画像の最大幅 */
  }
}

/* =========================================
   ベーススタイル (Section 5)
   ========================================= */
/* 背景色と余白 */

.inner {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

/* 画像レスポンシブ */
img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

/* PC/SP 表示切り替え（強制適用） */
.u-sp-block {
  display: none !important;
}

.u-pc-block {
  display: block !important;
}

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

.pc-only {
  display: block !important;
}

/* =========================================
   テキスト周り
   ========================================= */
.item {
  text-align: center;
  margin-bottom: 20px;
  /* 下のボックスと被らないように広めに */
}

.num_head {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-bottom: 0px;
  text-align: center;
}


/* =========================================
   メインコンテンツエリア (枠線ボックス)
   ========================================= */
.reason5_item {
  background-color: #fff;
  border: 2px solid #5C6C8E;
  /* 濃い青枠 */
  border-radius: 10px;
  /* 上部余白を大きく取って吹き出しと被らないようにする */
  padding: 80px 30px 40px;
  position: relative;
  margin-top: 80px;
  /* 吹き出しが飛び出る分の余白 */
}

.savicetop-support {
  padding-top: 0px;
  display: flex;
  flex-flow: column;
  justify-content: center;
}

.savicetop-support-inner {
  margin: 0px 10px 0px 10px;
  justify-content: center;
}

.savicetop-support-img {
  margin-top: 0px;

}

.savicetop-support-img_inner {
  display: flex;
  justify-content: center;


}

.savicetop-support-img_box {

  display: grid;
  grid-auto-flow: column;
  gap: 0px;
  margin-top: 0px;
  padding: 0px 30px 0px 30px;
  justify-content: center;
  max-width: 100%;
  height: auto;

}

.savicetop-support-cr {
  display: flex;


}


.savicetop-support-img_sp {
  display: none;

}

@media screen and (max-width: 768px) {
  .savicetop-support-inner {
    margin: 10px 10px 10px 10px;
    justify-content: center;
  }

  .savicetop-support-img_inner {

    background-color: #FFF;
    margin: 10px 10px 0px 10px;
    padding: 2 0px 20px 0px 20px;
    justify-content: center;

  }

  .savicetop-support-img {
    display: none
  }



  .savicetop-support-img_sp {
    display: flex;
    align-items: center;
    justify-content: center;

  }

  .savicetop-support-cr {
    display: flex;
    align-items: center;
    justify-content: center;
  }




}

/* =========================================
   SP (スマホ) 用レスポンシブ設定
   ========================================= */
@media screen and (max-width: 768px) {

  /* 表示切り替え */
  .u-sp-block {
    display: inline !important;
  }

  .u-pc-block {
    display: none !important;
  }

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

  .pc-only {
    display: none !important;
  }



  /* コンテンツボックス */
  .reason5_item {
    padding: 100px 15px 30px;
    /* 上部余白をさらに拡大 */
    margin-top: 60px;
  }

  /* ヘッダー吹き出し */
  .reason5_item .lead {
    width: 100%;
    top: -60px;
  }

  .lead_item {
    flex-direction: column;
    align-items: flex-start;
    padding: 15px 15px 15px 60px;
    /* 画像スペース */
  }

  .lead_img {
    left: -10px;
    /* 少し内側に入れる */
    top: 20px;
    transform: none;
    width: 60px;
    height: 60px;
  }

  .lead_txt {
    font-size: 14px;
    margin-left: 0;
  }

  /* フロー図（縦積み） */
  .bottom {
    flex-direction: column !important;
    gap: 0;
    /* 矢印をくっつける */
  }

  /* 矢印の形を「下向き」に変更 */
  .bottom .box:first-child {
    width: 100%;
    clip-path: polygon(0% 0%, 100% 0%, 100% 85%, 50% 100%, 0% 85%);
    padding: 20px 20px 50px;
    /* 下に余白 */
    margin-bottom: -30px;
    /* 次の矢印に重ねる */
    z-index: 2;
  }

  .bottom .box:last-child {
    width: 100%;
    clip-path: polygon(0% 0%, 100% 0%, 100% 90%, 50% 100%, 0% 90%);
    padding-top: 50px;
    /* 上の矢印と被る分 */
    padding-bottom: 50px;
    z-index: 1;
  }

  .box_ttl {
    margin-bottom: 10px;
  }

  .box_flex {
    flex-direction: column;
    gap: 10px;
  }

  .box_txt {
    width: 100%;
    box-sizing: border-box;
  }
}

.movie {
  position: relative;
  padding: 60px 0 40px;
  background-color: rgb(242, 247, 255);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  /* 横揺れ防止 */
  width: 100%;
  overflow: hidden;
}

.movie::before {
  content: "";
  width: 100%;
  height: 100%;
  background-color: rgba(86, 105, 143, 0.25);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}

.movie_item {
  max-width: 1440px;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;

}

.movie_lead {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.movie_txt {
  font-size: 26px;
  font-weight: bolder;
  color: #282828;
  z-index: 3;
}

.movie_txt span:first-child {
  color: #FF7500;
  font-size: 56px;
  line-height: 1;
  font-weight: 600;
  margin-bottom: -8px;
  font-family: "Poppins", sans-serif;
}

.movie_txt span:nth-child(2) {
  color: #FF7500;
  font-size: 26px;
  font-weight: bolder;
}

.movie_ttl {
  font-size: 40px;
  font-weight: bolder;
  color: #282828;
  line-height: 1;
  z-index: 3;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
}

.movie_img {
  margin-top: 40px;
  /* 中央配置の基準 */
  position: relative;
}

/* ★修正：再生ボタンを中央に配置 */
.movie_start {
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.movie_start:hover {
  opacity: 0.8;
  transition: 0.3s;


}

.video-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 999999 !important;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.video-modal.active {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.video-container {
  position: relative;
  max-width: 60%;
  max-height: 60%;
}

@media (max-width: 768px) {
  .video-container {
    max-width: 90%;
    max-height: 90%;
  }
}

.video-container video {
  width: 100%;
  height: auto;
  display: block;
}

.close-video {
  position: absolute;
  top: -40px;
  right: 0;
  color: white;
  font-size: 30px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 5px;
}

@media (max-width: 768px) {
  .movie {
    padding-left: 30px;
    padding-right: 30px;
  }

  .movie_txt {
    font-size: 14px;
  }

  .movie_ttl {
    font-size: 20px;
  }

  .movie_txt span:first-child {
    font-size: 40px;
  }

  .movie_txt span:nth-child(2) {
    font-size: 14px;
  }

  .movie_img img {
    width: 200px;
  }

  .movie_start {
    width: 80px;

  }

}

html,
body {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}