/* サービストップ */
/* --- ベース設定 --- */


.all_inner {
  background-color: #F2F7FF;
  padding-top: 36px;
  padding-bottom: 36px;
  display: flex;
  justify-content: center;
}

.inner {
  margin-top: 10px;
}

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

.ServiceFunctions {
  padding: 0px 0px;
}

/* --- テキストスタイル --- */
.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に変更（WPとの相性改善のため） */
  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;
}

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

@media screen and (max-width: 768px) {
  .ServiceLineup {
    padding: 0px 12px 20px 12px;
  }

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



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

  /* 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: 20px;
    display: flex !important;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    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;
  }
}

.all_inner_2 {

  height: auto;
  background-color: #fff;
  padding-top: 0px;
  padding-bottom: 60px;
}

.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
  }

  .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;
}

.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) {
  .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;
    align-items: center;
    justify-content: center;

  }

  .tag1_3 {
    display: none
  }

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

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

}

/* --- 繁盛店サイクル ここまで--- */
/* --- 機能紹介 --- */
.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修正版） --- */
.tag1_4 {
  position: absolute;
  top: 50%;
  right: 100%;
  transform: translateY(-51%);
  margin-right: -148px;
  z-index: 20;


}

/* ▼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: 60px;
  }

  /* テキストの切り替え */
  .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_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: visible;
    /* 見切れ防止の保険 */
  }
}

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

/* 機能紹介ここまで */
/* 投げ銭 */
/* --- ベース設定 --- */
.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: medium;
  /* 少し太くして視認性アップ */
  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-bottom: 50px;
  /* 下の余白 */
}

/* 中央の基準ボックス */
.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: 60px;
  }

  /* テキスト切り替え */
  .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;
}

.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: medium;
  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: medium;
    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;
  /* 背景色の水色 */
  width: 100%;
  padding: 60px 0;
  /* 上下の余白 */
  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;
  margin: 0;
  line-height: 1.6;
  text-align: center;
  justify-content: center;
  align-items: center
}

/* --- 画像エリア（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 0;
  }

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

  .txt_head {
    font-size: 14px;
    text-align: center;
    align-items: center;
    padding: 0 10px;
  }

  /* 画像エリアを縦積みに変更 */
  .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)
   ========================================= */
/* 背景色と余白 */
.serviceReason_Item.bg {
  background-color: #F2F7FF;
  padding: 60px 0;
  width: 100%;
}

.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: 80px;
  /* 下のボックスと被らないように広めに */
}

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

.ttl_head {
  font-size: 32px;
  font-weight: bold;
  color: #333;
  line-height: 1.4;
  margin-bottom: 20px;
  text-align: center;
}

.txt_head {
  font-size: 16px;
  color: #333;
  line-height: 1.8;
  text-align: center;
}

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

/* =========================================
   フローティングヘッダー (担当者吹き出し)
   ========================================= */
/* HTMLの構造上 .lead クラスが使われています */
.reason5_item .lead {
  position: absolute;
  top: -60px;
  /* 枠の上に配置 */
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 650px;
  z-index: 10;
}

/* 青い背景ボックス */
.lead_item {
  background-color: #5C6C8E !important;
  /* 背景色を強制 */
  border-radius: 10px;
  padding: 20px 30px 20px 100px;
  /* 左側は顔写真用に空ける */
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  min-height: 80px;
}

/* 顔写真 */
.lead_img {
  position: absolute;
  left: -40px;
  /* ボックスの外へ飛び出させる */
  top: 50%;
  transform: translateY(-50%);
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 4px solid #fff;
  overflow: hidden;
  margin: 0 !important;
  z-index: 11;
  background: #fff;
  /* 画像読み込み前のチラつき防止 */
}

.lead_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* テキスト */
.lead_txt {
  font-size: 18px;
  font-weight: bold;
  color: #fff !important;
  /* 白文字を強制 */
  margin: 0;
  line-height: 1.5;
  text-align: left;
}

/* =========================================
   フロー図 (矢印エリア)
   ========================================= */
/* 全体を囲むエリア */
.bottom {
  display: flex !important;
  flex-direction: row;
  align-items: stretch;
  /* 高さを揃える */
  gap: 10px;
  /* 矢印間の隙間 */
  width: 100%;
}

/* --- 共通の矢印ボックス設定 --- */
.box {
  background-color: #F0F6FB !important;
  /* 薄い水色背景を強制 */
  position: relative;
  padding: 20px;
}

/* 左：準備期間 */
.bottom .box:first-child {
  flex: 0 0 25%;
  /* 幅25% */
  display: flex;
  align-items: center;
  justify-content: center;
  /* 右向きの矢印カット */
  clip-path: polygon(0% 0%, 90% 0%, 100% 50%, 90% 100%, 0% 100%);
  padding-right: 30px;
  /* 文字が矢印に被らないように */
}

/* 右：運用開始 */
.bottom .box:last-child {
  flex: 1;
  /* 残りの幅全部 */
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 右向きの矢印カット（左側は前の矢印を受け入れる形にしない） */
  /* シンプルに長方形の右側だけ矢印にする */
  clip-path: polygon(0% 0%, 95% 0%, 100% 50%, 95% 100%, 0% 100%);
  padding-right: 30px;
}

/* ボックス内のタイトル */
.box_ttl {
  font-size: 20px;
  font-weight: bold;
  color: #5C6C8E;
  margin: 0 0 15px 0;
  text-align: center;
  width: 100%;
}

/* 運用開始の中にある3つの白い箱 */
.box_flex {
  display: flex !important;
  flex-direction: row;
  gap: 10px;
  width: 100%;
}

.box_txt {
  background-color: #fff !important;
  /* 白背景 */
  flex: 1;
  /* 3等分 */
  padding: 15px 5px;
  text-align: center;
  font-weight: bold;
  font-size: 15px;
  color: #333;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  border-radius: 4px;
}

.box_txt span {
  font-size: 12px;
  font-weight: normal;
  margin-top: 5px;
  display: block;
}

/* =========================================
   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;
  }

  /* テキストサイズ */
  .ttl_head {
    font-size: 24px;
    text-align: center;
  }

  .txt_head {
    font-size: 14px;
    text-align: center;
  }

  .ServiceLineup_inner {
    margin: 10px 0px 0px 0px;
  }

  .ServiceLineup_semihead {
    font-size: 22px;
    margin-top: 10px;
  }

  /* コンテンツボックス */
  .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;
}

.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;

}

.movie_start {
  position: absolute;
  display: block;



}

.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;

  }

}

/* サービストップ */

/* POSレジ */

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

.text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0px;
  align-self: stretch;
  margin-top: 10%;
}

.text .benefit span {
  color: #56698F;
  font-family: "Poppins";
  font-size: 20px;
  font-weight: 700;
  line-height: normal;
  text-align: center;
  /* ;を追加 */
}

.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: #3F4042;
  display: inline-block;
  padding-bottom: 0px;
  text-align: center;
  /* ;を追加 */
}

.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_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;
}

.text .lead_ttl_sp {
  display: none;
}

.tag4_pos {
  display: none;
}

@media (max-width: 768px) {
  .inner_pos {
    display: flex;
    gap: 0px;
    margin-top: 0px;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    align-items: center;
    justify-content: center;
  }

  .text .lead_sm {
    margin: 24px 0px 0px;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .text .lead_ttl_sp {
    font-size: 24px;
    font-weight: bold;
    color: #3F4042;
    text-align: center;
    line-height: 1.5;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .text .lead_ttl {
    display: none;
  }

  .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;
  }

  .ServiceFunctions {
    padding: 30px 16px 0px;
  }

  .ServiceFunctions_list {
    margin-top: 0px
  }
}

/* 導入メリットここまで */
/* それらを実現する機能 POSレジ */

.text .lead_sm_pos {
  font-size: 40px;
  font-weight: bold;
  color: #3F4042;
  margin: 0px 0px 8px 0px;
  text-align: center;
  /* ;を追加 */
}

.text .lead_sm_pos span {
  font-size: 40px;
  font-weight: bold;
  color: #3F4042;
  display: inline-block;
  padding-bottom: 0px;
  text-align: center;
  /* ;を追加 */
}

.text .lead_sm_sp_pos {
  display: none;
}

@media (max-width: 768px) {
  .text .lead_sm_pos {
    display: none;
  }

  .text .lead_sm_sp_pos {
    margin: 0px 0px 0px;
    font-size: 40px;
    font-weight: bold;
    color: #3F4042;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .text .lead_sm_sp_pos span {
    font-size: 40px;
    font-weight: bold;
    color: #3F4042;
  }
}

/* --- ベーススタイル（共通設定） --- */
/* 全体を囲むコンテナの共通設定 */
[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%;
}

/* テキストセクションの全体コンテナの共通設定 */
[class^="text_pos_"] {
  margin-top: 45px;
  display: flex;
  flex-flow: column;
  text-align: center;
  justify-content: center;
}

/* テキストスタイル（共通） */
[class^="text_pos_"] .benefit_pos_ span {
  color: #FAAA00;
  font-family: "Poppins", sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: normal;
}

[class^="text_pos_"] .lead_sm_pos_ {
  font-size: 40px;
  font-weight: bold;
  color: #000;
  margin: 0 0 8px;
  text-align: center;
}

[class^="text_pos_"] .lead_sm_pos_ span {
  font-size: 40px;
  font-weight: bold;
  color: #000000;
  display: inline-block;
  padding-bottom: 0px;
  text-align: center;
}

[class^="text_pos_"] .lead_mini_pos_ {
  font-size: 18px;
  color: #3F4042;
  margin: 0 0 8px;
  padding: 0px 240px;
  text-align: center;
  line-height: 1.4;
}

[class^="text_pos_"] .lead_ttl_pos_ {
  font-size: 32px;
  font-weight: bold;
  color: #3F4042;
  text-align: center;
  line-height: 1.5;
}

/* SP版でのみ表示される要素はPC版では非表示 */
[class^="text_pos_"] .lead_mini_sp_pos_,
[class^="img_sp_pos_"] {
  display: none;
}

/* 補足テキストのコンテナ（08, 09のみ使用） */
[class^="ServiceIntro_texts2_pos_"] {
  max-width: 670px;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  border-radius: 6px;
  margin: 0px 70px;
  padding: 0px 20px;
}

/* 補足テキストエリアのラッパー（08, 09のみ使用） */
[class^="textbox_pos_"] {
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
}


/* --- バージョン固有の上書き設定（PC版） --- */


/* 04, 05, 08, 09 inner の margin 0px */
.inner_pos_4,
.inner_pos_5,
.inner_pos_8,
.inner_pos_9 {
  margin: 0px;
}


/* --- レスポンシブ対応 (max-width: 768px) --- */
@media screen and (max-width: 768px) {

  /* 【修正箇所】PC版用の画像とテキストをSP版で非表示にする設定を追加 */
  [class^="img_pos_"],
  [class^="text_pos_"] .lead_mini_pos_ {
    display: none !important;
    /* 強制的に非表示 */
  }

  /* 【修正箇所】SP版用の画像とテキストを表示させる設定を追加 */
  [class^="img_sp_pos_"],
  [class^="text_pos_"] .lead_mini_sp_pos_ {
    display: flex !important;
    /* img_sp は flex */
  }

  /* lead_mini_sp は block で表示されることが多かったため、必要に応じて調整してください */


  /* SP時のメインエリアの余白調整（共通） */
  [class^="inner_pos_"] {
    background-color: #FFF;
    margin: 10px 10px 0px 10px;
  }

  /* SP時の画像セクションの余白調整（共通） */
  [class^="imag_inner_pos_"] {
    background-color: #FFF;
    margin: 0px 10px 0px 10px;
    padding: 0px 20px 0px 20px;
    justify-content: center;
  }

  /* SP時の特典表示位置調整（共通） */
  .benefit_pos_ {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /* SP時のテキスト寄せ（共通） */
  [class^="text_pos_"] {
    text-align: left;
  }

  /* SP時のメイン見出しフォントサイズ（共通） */
  [class^="text_pos_"] .lead_sm_pos_ span {
    font-size: 32px;
  }

  /* 予備または別のボックスをSP時に非表示（共通） */
  .tag_box2_pos_ {
    display: none;
  }

  /* SP時の各画像ラッパーの配置（共通） */
  [class^="tag1_pos_"],
  [class^="tag2_pos_"],
  [class^="tag3_pos_"] {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* SP時の補足テキストのコンテナ調整（共通） */
  [class^="ServiceIntro_texts2_pos_"] {
    max-width: 470px;
    margin: 10px 10px 0px 10px;
    padding: 0px 10px;
    text-align: left;
  }

  /* SP時の補足テキストのフォントサイズ（共通） */
  [class^="ServiceIntro_text2_pos_"] {
    font-size: 12px;
  }


  /* --- バージョン固有の上書き設定（SP版） --- */

  /* 06のみ z-index を設定 */
  .tag1_pos_6 {
    z-index: 2;
  }

  .tag2_pos_6 {
    z-index: 1;
  }

  /* 04, 05, 06, 08 の tag2, tag3 のマージン調整（共通） */
  .tag2_pos_2,
  .tag2_pos_3,
  .tag2_pos_4,
  .tag2_pos_5,
  .tag2_pos_6,
  .tag2_pos_8,
  .tag2_pos_9 {
    margin-top: 0%;
  }

  .tag3_pos_2,
  .tag3_pos_3,
  .tag3_pos_4,
  .tag3_pos_5,
  .tag3_pos_6 {
    margin-top: 3%;
    /* 03, 04, 05, 06 は 3% */
  }

  .tag3_pos_8,
  .tag3_pos_9 {
    margin-top: 5%;
    /* 08, 09 は 5% */
  }


  /* 07 の tag2, tag3 のマージン調整（個別） */
  .tag2_pos_7 {
    margin-top: -8%;
  }

  .tag3_pos_7 {
    margin-top: -5%;
  }

  /* 08 の tag2 のマージン調整（個別） */
  .tag2_pos_8 {
    margin-top: 10%;
  }
}

/* --- ベーススタイル (PC版) --- */
.inner_pos_10 {
  /* メインコンテンツエリア（PC版はグリッドレイアウト） */
  display: grid;
  grid-auto-flow: column;
  gap: 32px;
  margin: 40px 120px 51px 120px;
  text-align: center;
  align-items: center;
  justify-content: center;
}

.text_pos_10 {
  /* テキストセクションのコンテナ */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  align-self: stretch;
  margin-top: 36px;
}

.text_pos_10 .benefit_pos_10 span {
  /* 特典/カテゴリ名テキスト */
  color: #6F7175;
  font-family: "Poppins", sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: normal;
  text-align: center;
}

.text_pos_10 .lead_sm_pos_10 {
  /* メイン見出しテキスト */
  font-size: 40px;
  font-weight: bold;
  color: #FF7500;
  margin: 0 0 8px;
  /* 0px 0px 8px 0px を短縮 */
  text-align: center;
}

.text_pos_10 .lead_sm_pos_10 span {
  /* メイン見出し内の強調部分（親と同じスタイルのため冗長だが維持） */
  font-size: 40px;
  font-weight: bold;
  color: #FF7500;
  display: inline-block;
  padding-bottom: 0px;
  text-align: center;
}

.tag1_pos_10,
.tag2_pos_10 {
  /* PC版画像ラッパーの共通スタイル */
  display: flex;
  align-items: center;
  justify-content: center;
}

.tag1_sp_pos_10,
.tag2_sp_pos_10,
.text_pos_10 .lead_ttl_sp_pos_10 {
  /* SP版でのみ使用する要素はPC版では非表示 */
  display: none;
}


/* --- レスポンシブ対応 (max-width: 768px) --- */
@media (max-width: 768px) {
  .inner_pos_10 {
    /* SP時のメインコンテンツエリア（Flexboxに変更） */
    display: flex;
    flex-flow: column;
    /* flex-direction: column の短縮記法 */
    gap: 16px;
    margin: 0;
    margin-bottom: 10px;
    align-items: center;
    justify-content: center;
  }

  .text_pos_10 .lead_sm_pos_10 {
    /* SP時のメイン見出しスタイル調整 */
    margin: 0;
    /* 0px 0px 0px を短縮 */
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .text_pos_10 .lead_ttl_sp_pos_10 {
    /* SP時のサブ見出しを表示 */
    font-size: 24px;
    font-weight: bold;
    color: #3F4042;
    text-align: center;
    line-height: 1.5;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .text_pos_10 .lead_ttl_pos_10 {
    /* PC版サブ見出しをSP時に非表示 */
    display: none;
  }

  .tag1_pos_10,
  .tag2_pos_10 {
    /* PC版画像をSP時に非表示 */
    display: none;
    /* width: 225px; margin-left: 5px; はdisplay:noneのため効果なし */
  }

  .tag1_sp_pos_10,
  .tag2_sp_pos_10 {
    /* SP版画像を表示 */
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .tag1_sp_pos_10 {
    /* SP版画像1の余白調整 */
    margin-top: 10%;
  }
}

/* それらを実現する機能 POSレジ ここまで*/
/* =================================================================
   POS Function Item (Based on Mobile Order ServiceMeritItem)
   ================================================================= */
.PosFunctionItem {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 0 20px 35px;
  box-sizing: border-box;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .PosFunctionItem__number {
    font-size: 40px;
    margin-right: 0;
  }
}

/* =========================================
   注釈テキスト追加用スタイル
   ========================================= */

/* 親要素を縦並びに変更して、注釈を下に配置できるようにする */
.PosFunctionItem {
  flex-direction: column;
  align-items: center;
}

/* 注釈テキストのスタイル */
.PosFunctionItem__note {
  margin-top: 60px;
  /* 上のコンテンツとの間隔 */
  font-size: 14px;
  font-weight: bold;
  color: #333;
  text-align: center;
  line-height: 1.5;
  width: 100%;
  max-width: 1152px;
  /* メインコンテンツの最大幅に合わせる */
}

/* スマホ表示用 (SP) */
@media screen and (max-width: 768px) {
  .PosFunctionItem__note {
    margin-top: 40px;
    font-size: 12px;
    text-align: left;
  }
}