/* =====================================
  全体ベース設定
===================================== */
@media screen and (min-width: 1025px) {
}

body {
  margin: 0 auto;
  text-align: left;
  padding: 0;
  background-color: #000;
  background-image: url(../../../../images/project/okcj/gate/背景.jpeg);
  background-position: top center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  overflow-x: hidden; /* 横スクロールを完全に禁止 */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

body::before {
  content: "";
  position: fixed;
  top: 0;
  right: 0;
  z-index: -1;
  width: 100%;
  height: 100vh;
  background-image: url(../../../../images/project/okcj/gate/背景.jpeg);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
}

#wrapper {
  max-width: 100%;
}

.section-title {
  border: 2px solid #c00 !important;
  padding-bottom: 8px;
  margin-top: 2rem;
  margin-bottom: 1.5rem;
}

hr {
  border: none; /* 余計な枠線を消す */
  border-top: 1px solid #ccc; /* 線の太さと色を指定 */
  height: 0; /* 高さは border-top で制御 */
  margin: 2rem 0; /* 上下に間隔をとる */
  /* 必要に応じて
  opacity: 0.5;
  border-style: dashed; などカスタマイズ可能 */
}

/* =====================================
  画像
===================================== */

#header .FV2 {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  margin-top: -10px;
  margin-bottom: -55px;
}

.footer {
  width: 80%;
  margin: 40px auto 0;
  text-align: center;
  color: #888;
}

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

.jisseki {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  margin-bottom: -50px;
}

.jisseki2 {
  width: 60%;
  max-width: 60%;
  height: auto;
  display: block; /* ← ここを block に */
  margin: 0 auto -50px; /* ← 中央寄せ + 下マイナスマージン */
  text-align: center;
}

.jisseki-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.jisseki-item {
  width: calc(50% - 10px); /* 2列分割用 */
  box-sizing: border-box;
}

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

/* スマホ対応：1列に変更 */
@media screen and (max-width: 768px) {
  .jisseki-item {
    width: 100%;
  }
}
.tobira {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
}

.chara {
  width: 70%;
  max-width: 70%;
  height: auto;
  display: block;
  margin: 5px auto;
}

.chara2 {
  width: 50%;
  max-width: 50%;
  height: auto;
  display: block;
  margin: 5px auto;
}
.quest {
  width: 70%;
  max-width: 70%;
  height: auto;
  display: block;
  margin: 5px auto;
}
.shuudan {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 5px auto;
}

.price {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 5px auto;
}

.price2 {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 5px auto;
}

.price3 {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 5px auto;
  margin-top: -180px;
  margin-bottom: -170px;
}
.rogo1 {
  width: 50%;
  max-width: 50%;
  height: auto;
  display: block;
  margin: 5px auto;
}
/* =====================================
  汎用テキスト
===================================== */
.highlight {
  background: linear-gradient(transparent 60%, #fff89e 60%);
}

.mark {
  background: linear-gradient(to right, #fff2cc, #ffe599);
  padding: 0 4px;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.keyword {
  color: #c00;
}

.emphasis {
  color: #d90000;
}

.dashed-line {
  border: none;
  border-top: 4px dashed #333;
  margin: 20px 0;
}

/*位置*/
.br-sp {
  display: none;
}
.br-pc {
  display: none;
}

@media screen and (max-width: 768px) {
  .br-sp {
    display: inline;
  }
}

@media screen and (min-width: 769px) {
  .br-pc {
    display: inline;
  }
}

.center {
  text-align: center;
}

/*カラー*/
.red {
  color: red;
}

.blue {
  color: blue;
}

.white {
  color: white;
}

.yellow {
  color: rgb(255, 251, 0);
}

.bgred {
  background-color: red;
  color: white; /* 見やすさのために文字色も白に */
  display: inline-block;
  padding: 0.2em 0.5em; /* 背景に少し余白を付けると美しく見えます */
}

.bgorange {
  background-color: rgb(255, 165, 0);
  color: white; /* 見やすさのために文字色も白に */
  display: inline-block;
  padding: 0.2em 0.5em; /* 背景に少し余白を付けると美しく見えます */
}

.bgyellow {
  background-color: rgb(255, 251, 0);
  display: inline-block;
  padding: 0.2em 0.5em; /* 背景に少し余白を付けると美しく見えます */
}

.bgblue {
  background-color: rgb(0, 4, 255);
  color: white; /* 見やすさのために文字色も白に */
  display: inline-block;
  padding: 0.2em 0.5em; /* 背景に少し余白を付けると美しく見えます */
}
/*フォントサイズ*/
.b {
  font-weight: bold;
}
.fs20 {
  font-size: 25px;
}

.fs20 {
  font-size: 20px;
}

.fs25 {
  font-size: 25px;
}

.fs30 {
  font-size: 30px;
}

.fs35 {
  font-size: 35px;
}

.fs40 {
  font-size: 40px;
}
.fs50 {
  font-size: 50px;
}

/*下線*/

.unred {
  border-bottom: 3px solid #ff0000;
  display: inline; /* 短いテキストなら inline でOK */
}

.unbl {
  border-bottom: 3px solid #000;
  display: inline; /* 短いテキストなら inline でOK */
}

.unye {
  border-bottom: 3px solid #f0ff1e;
  display: inline; /* 短いテキストなら inline でOK */
}

.unwh {
  border-bottom: 3px solid #ffffff;
  display: inline; /* 短いテキストなら inline でOK */
}
/* 念のため中央寄せを上書き */
p.fs40 {
  text-align: center !important;
}

/* =====================================
  画像
===================================== */

.kimura {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 30px auto;
}

/* =====================================
  バナー・見出し装飾系
===================================== */
.wide-banner {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background-image: url("../../../../images/project/okcj/gate/横長背景.jpeg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  text-align: center;
  box-sizing: border-box;
  border-top: 4px solid rgb(255, 255, 255);
  border-bottom: 4px solid rgb(255, 255, 255);
}

.wide-banner-text {
  color: gold;
  text-shadow: 2px 2px 2px black;
  letter-spacing: 0.1em;
  font-size: 50px;
}

/* =====================================
  コンテンツラップ・構造用スタイル
===================================== */
.frame-box {
  width: 90%;
  box-sizing: border-box;
  padding: 40px 20px;
  margin: 0 auto;
  background-color: #ffffff;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}

@media screen and (min-width: 1025px) {
  .frame-box {
    max-width: 50%;
  }
}

/* サービス要綱 */ /* サービス要綱 */ /* サービス要綱 */ /* サービス要綱 */ /* サービス要綱 */

.youkou-section {
  margin: 40px auto;
  background: #f9f9f9;
  border: 1px solid #ccc;
  border-radius: 8px;
  max-width: 65%;
}

.info-table {
  border-collapse: collapse;
  width: 100%;
  max-width: 1600px; /* ←ここを1400pxから拡大 */
  line-height: 1.8;
  table-layout: fixed;
  word-wrap: break-word;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 900px;
}

.comment-bubble-section {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
  /* 以下を追加・確認 */
  width: 120%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0 24px; /* 必要なら左右に余白も */
}

.comment-bubble {
  background: #f5f5f5;
  border-radius: 18px;
  padding: 18px 32px;
  max-width: 1400px; /* 横幅をさらに大きく調整 */
  position: relative;
  font-size: 1.1em;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
  width: 100%;
}

.bubble-arrow {
  position: absolute;
  left: 40px;
  bottom: -18px;
  width: 0;
  height: 0;
  border-top: 18px solid #f5f5f5;
  border-left: 18px solid transparent;
  border-right: 18px solid transparent;
  content: "";
}

/* --- ユーザーコメントリスト30選 --- */
.user-comments-list {
  max-width: 900px;
  margin: 40px auto 60px auto;
  padding: 30px 24px;
  background: #fffef8;
  border: 2px solid #d2b76f;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(180, 150, 30, 0.08);
  list-style: none;
}

.user-comments-list li:last-child {
  margin-bottom: 0;
}

.user-comments-list strong {
  color: #b89b27;
  font-weight: bold;
  margin-right: 6px;
  font-size: 1.08em;
}

@media screen and (max-width: 767px) {
  .user-comments-list {
    padding: 12px 4vw;
    font-size: 0.98em;
  }
  .user-comments-list li {
    padding: 10px 8px;
    font-size: 1em;
  }
}

.notice-list {
  list-style: none;
  text-align: left;
}

/* ===== フォントサイズユーティリティ ===== */

/* ===============================
  フォーム全体
================================= */
.main-content {
  max-width: 800px;
  margin: 40px auto;
  padding: 48px 32px 40px 32px;
  background: #ffffff; /* ネイビーパープル */
  border-radius: 16px;
  box-shadow: 0 0 32px rgba(255, 223, 0, 0.15); /* Victory黄 */
  border: 5px solid #001b55;
  position: relative;
}

/* ===============================
  タイトル
================================= */
.form-title {
  font-size: 32px;
  text-align: center;
  color: #000000;
  margin-bottom: 44px;
  border-bottom: 2px solid #000000;
  padding-bottom: 14px;
  font-weight: bold;
  letter-spacing: 0.06em;
}

/* ===============================
  入力フィールド
================================= */
.form-group {
  margin-bottom: 32px;
}

.form-group label {
  display: block;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #000000;
}

.mailaddress {
  display: block;
  font-size: 25px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #000000;
}

.form-group .note {
  font-size: 18px;
  color: #000000;
  margin-bottom: 10px;
}

.form-group input[type="email"],
.form-group input[type="text"] {
  width: 100%;
  padding: 16px 18px;
  font-size: 17px;
  border: 1.5px solid #000000;
  border-radius: 8px;
  background: #ffffff;
  color: #000000;
  transition: border 0.3s, box-shadow 0.3s;
  margin-bottom: 6px;
  box-sizing: border-box;
}

.form-group input:focus {
  border-color: #000000;
  box-shadow: 0 0 0 3px rgba(255, 223, 0, 0.13);
}

.error {
  color: #ff1500;
  font-size: 15px;
  margin-top: 8px;
  text-align: left;
  padding-left: 4px;
}

/* ===============================
  ラジオボタンカスタマイズ
================================= */
.radio-group {
  margin-top: 20px;
  margin-bottom: 32px;
}

.radio-label-title {
  font-size: 25px !important;
  font-weight: bold;
  display: block;
  margin-bottom: 16px;
  color: #000000;
  letter-spacing: 0.03em;
  text-align: center;
}

.radio-btns {
  display: flex;
  gap: 32px;
  justify-content: center;
}

.radio-btn-label {
  display: block;
  cursor: pointer;
}

.radio-btn-label input[type="radio"] {
  display: none;
}

.radio-btn-custom {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 180px;
  padding: 20px 0;
  font-size: 1.25em;
  border-radius: 32px;
  border: 2.5px solid #ffdf00;
  background: linear-gradient(90deg, #fffbe7 0%, #ffee58 100%);
  color: #232323;
  font-weight: bold;
  letter-spacing: 0.06em;
  box-shadow: 0 2px 8px rgba(255, 223, 0, 0.15);
  transition: background 0.2s, color 0.2s, border 0.2s, transform 0.1s,
    box-shadow 0.2s;
  margin: 0 8px;
  text-align: center;
  user-select: none;
  position: relative;
}

.radio-btn-label input[type="radio"]:checked + .radio-btn-custom {
  background: linear-gradient(90deg, #ffee58 0%, #fdd835 100%);
  color: #3b2b6d;
  border: 2.5px solid #fdd835;
  box-shadow: 0 4px 16px rgba(255, 223, 0, 0.22);
  transform: scale(1.04);
}

.radio-btn-label input[type="radio"]:focus + .radio-btn-custom,
.radio-btn-label:hover .radio-btn-custom {
  border: 2.5px solid #fbc02d;
  box-shadow: 0 4px 16px rgba(255, 223, 0, 0.18);
  outline: none;
}

/* 銀行振込ボタン（青系） */
.radio-btn-label .radio-btn-custom.bank {
  background: linear-gradient(90deg, #e3f2fd 0%, #bbdefb 100%);
  border: 2.5px solid #64b5f6;
  color: #232323;
}
.radio-btn-label input[type="radio"]:checked + .radio-btn-custom.bank {
  background: linear-gradient(90deg, #42a5f5 0%, #1e88e5 100%);
  color: #ffffff;
  border: 2.5px solid #1e88e5;
  box-shadow: 0 4px 16px rgba(66, 165, 245, 0.2);
}

/* クレジットボタン（赤系） */
.radio-btn-label .radio-btn-custom.credit {
  background: linear-gradient(90deg, #ffebee 0%, #ffcdd2 100%);
  border: 2.5px solid #ef9a9a;
  color: #232323;
}
.radio-btn-label input[type="radio"]:checked + .radio-btn-custom.credit {
  background: linear-gradient(90deg, #ef5350 0%, #c62828 100%);
  color: #ffffff;
  border: 2.5px solid #c62828;
  box-shadow: 0 4px 16px rgba(229, 57, 53, 0.2);
}
/* ===============================
  スマホ対応：ラジオボタン縦並び
================================= */
@media screen and (max-width: 640px) {
  .radio-btns {
    flex-direction: column;
    gap: 16px;
    align-items: center;
  }

  .radio-btn-label {
    width: 100%;
    max-width: 300px;
  }

  .radio-btn-custom {
    width: 100%;
  }
}

/* ===============================
  送信ボタン（薄い赤ベースに変更）
================================= */
.submit-btn {
  display: block;
  margin: 10px auto 0 auto;
  margin-top: -20px;
  width: 70%;
  min-width: 260px;
  max-width: 600px;
  background: linear-gradient(90deg, #ffe5e5 0%, #ffb3b3 100%);
  color: #8b0000;
  border: 4px solid #000000;
  border-radius: 48px;
  padding: 28px 0;
  font-size: 2.4em;
  font-weight: bold;
  letter-spacing: 0.12em;
  box-shadow: 0 16px 48px rgba(255, 128, 128, 0.28), 0 4px 0 #fff0f0;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s,
    box-shadow 0.2s;
  outline: none;
  position: relative;
  overflow: hidden;
  text-align: center;
  animation: btn-bounce-in 0.8s cubic-bezier(0.68, -0.4, 0.27, 1.6);
}

.submit-btn::before {
  content: "";
  position: absolute;
  top: -150%;
  left: -50%;
  width: 200%;
  height: 400%;
  background: radial-gradient(
    ellipse at center,
    rgba(255, 200, 200, 0.5) 0%,
    rgba(255, 200, 200, 0.3) 30%,
    rgba(255, 255, 255, 0) 60%
  );
  opacity: 0.5;
  animation: glowSweep 4s ease-in-out infinite;
  transform: rotate(45deg);
  pointer-events: none;
  z-index: 1;
  filter: blur(12px);
}

@keyframes glowSweep {
  0% {
    transform: rotate(45deg) translateY(-150%);
  }
  100% {
    transform: rotate(45deg) translateY(100%);
  }
}

@keyframes btn-bounce-in {
  0% {
    opacity: 0;
    transform: scale(0.7);
  }
  60% {
    opacity: 1;
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

.submit-btn span,
.submit-btn::after {
  position: relative;
  z-index: 2;
}

.submit-btn:hover,
.submit-btn:focus {
  background: linear-gradient(90deg, #fff5f5 0%, #ffc0c0 100%);
  color: #8b0000;
  border-color: #000000;
  transform: translateY(-6px) scale(1.05);
  box-shadow: 0 32px 64px rgba(255, 153, 153, 0.35), 0 8px 0 #ffe5e5;
}

.submit-btn:hover::after,
.submit-btn:focus::after {
  margin-left: 36px;
  color: #000000;
}

.submit-btn:active {
  background: linear-gradient(90deg, #fce4e4 0%, #f5cfcf 100%);
  color: #232323;
  border-color: #000000;
  transform: scale(0.97);
  box-shadow: 0 4px 12px rgba(200, 100, 100, 0.15);
}

/* ===============================
  サポートリンク（変更なし）
================================= */
.support-link {
  position: static;
  text-align: right;
  z-index: 10;
  margin-top: 30px;
  transform: none;
  padding-right: 0;
}

/* ===============================
  セクション１
================================= */

.btn-apply {
  display: inline-block;
  padding: 12px 24px;
  background-color: #e60012; /* 好みで変更OK */
  color: #fff;
  text-decoration: none;
  font-size: 30px;
  border-radius: 6px;
  margin-top: 20px;
  margin-bottom: -40px;
  transition: background-color 0.3s;
}

.btn-apply:hover {
  background-color: #b8000f;
}

.tg-service-block {
  text-align: center;
  padding: 3rem 1.5rem;
}

/* タイトル：グラデーションテキスト＋スライドアニメーション */
.tg-service-heading {
  display: inline-block;
  padding: 0.6rem 1.2rem;
  margin: 0;
  font-size: 80px;
  font-weight: 800;
  text-transform: uppercase;

  /* グラデーション背景（そのまま） */
  background-size: 200% 200%;
  background-position: 0% 50%;
  animation: tg-heading-bg-move 6s ease infinite;

  /* 文字色を白に固定し、シャドウで浮かび上がらせる */
  color: #ffffff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);

  /* 枠は薄めの黒に */
  border: 4px solid rgba(0, 0, 0, 0.3);
  border-radius: 0.6rem;
}

/* キーフレームは共通 */
@keyframes tg-heading-bg-move {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* 1週目：赤系（background-imageのみ上書き） */
.tg-week1 {
  background-image: linear-gradient(120deg, #e53935, #ff8a80, #e53935);
}

/* 2週目：サンドベージュ系 */
.tg-week2 {
  background-image: linear-gradient(120deg, #c2b280, #e0d8a3, #c2b280);
}

/* 3週目：青いネオン系 */
.tg-week3 {
  background-image: linear-gradient(120deg, #00e5ff, #2979ff, #00e5ff);
}

/* 日付 */
.tg-service-delivery {
  font-size: 50px;
  font-weight: 600;
  text-transform: uppercase;
  margin: 1rem 0 0;
  /* 赤強調 */
  color: #e53935;
  position: relative;
}

/* 受付中バッジ：パルスアニメーション */
.tg-service-badge {
  display: inline-block;
  background-color: #ffd54f;
  padding: 0.6rem 1.2rem;
  border-radius: 0.6rem;
  font-weight: 600;
  margin-top: 1.2rem;
  color: #333;
  font-size: 30px;

  /* 落ち着いた揺れ */
  animation: tg-badge-shake 1.2s ease-in-out infinite;
  transform-origin: center;
}

@keyframes tg-badge-shake {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(-1px, 0.5px) rotate(-0.5deg);
  }
  50% {
    transform: translate(1px, -0.5px) rotate(0.5deg);
  }
  75% {
    transform: translate(-1px, 0.5px) rotate(-0.5deg);
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}

.tg-service-header {
  display: flex;
  align-items: center; /* 垂直方向の中央揃え */
  justify-content: center; /* 横方向の中央寄せ */
  gap: 1rem; /* 要素間のスペース */
  flex-wrap: wrap; /* 狭い画面では折り返しも可 */
  margin: 2rem 0; /* 上下の余白 */
}

.tg-service-header p {
  margin: 0; /* デフォルトの段落余白をリセット */
}

/* 開始日時の強調 */
.tg-service-start {
  font-weight: 600;
  color: #000000; /* 赤系で目立たせる */
}

/* サービス名（下線アニメーション） */
.tg-service-name {
  display: inline-block;
  position: relative;
  font-size: 45px;
  font-weight: 700;
  color: #222;
  margin-left: 20px;
}

/* 下線アニメーション */
.tg-service-name::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0%;
  height: 4px;
  background: linear-gradient(90deg, #e53935, #ff8a80);
  border-radius: 2px;
  animation: tg-underline-grow 3s infinite forwards;
}

@keyframes tg-underline-grow {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}

/* ラッパーを flex 配置 */
#section1.services-intro {
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 2rem; /* 各要素の間隔を固定 */
  padding: 1rem 0;
}
.service-content {
  flex: 3; /* 画像より少し広めに */
  display: flex;
  flex-direction: column;
  justify-content: center; /* テキストを縦方向中央に */
  text-align: center; /* 横方向は中央揃え */
}

.service-detail {
  text-align: center;
}
.service-intro {
  display: flex;
  align-items: center; /* 子要素（.service-content と .service-image）を縦方向中央に揃える */
  justify-content: space-between;
  gap: 2rem; /* テキストと画像の間隔 */
  max-width: 800px;
  margin: 0 auto;
  padding: 1.5rem;
}
/* ヘッダー：中央寄せ */
.service-header {
  text-align: center;
  margin-bottom: 2rem;
}
.service-header h2 {
  font-size: 2rem;
  color: #e60000;
  margin: 0 0 0.5rem;
}
.service-header .date {
  font-size: 1.1rem;
  color: #e60000;
  margin: 0 0 0.5rem;
}
.service-header .status {
  display: inline-block;
  font-size: 1rem;
  background-color: #ffff66;
  color: #e60000;
  font-weight: bold;
  padding: 0.4rem 0.8rem;
  border-radius: 4px;
}

/* 本文：ロゴとイラスト横並び */
.service-body {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -70px;
}
.logo-placeholder img {
  max-width: 400px;
}
.service-image img {
  max-width: 200px;
  height: auto;
}

/* シンプル＆モダンな縦グラデーションセパレーター */
.img-separator {
  flex: 0 0 2px; /* 幅を固定 */
  width: 2px;
  height: 120px; /* 高さはお好みで調整 */
  margin: 0 1.5rem; /* 前後の余白 */
  position: relative;
  /* 上下が透けて中央だけ色が濃いフェードグラデ */
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.3) 20%,
    rgba(0, 0, 0, 0.6) 50%,
    rgba(0, 0, 0, 0.3) 80%,
    rgba(0, 0, 0, 0) 100%
  );
}

/* 中央のアクセント・マーカー */
.img-separator::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  background: #fff; /* マーカーの中身色 */
  border: 2px solid #888; /* マーカーの縁色 */
  border-radius: 50%; /* 丸く */
  transform: translate(-50%, -50%);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
}

/* ────────────────────────────────────────── */
/* プライシングオファー部分 */
.pricing-offer {
  text-align: center;
  margin: 2rem 0;
}

/* 小見出し */
.pricing-line1 {
  font-size: 45px;
  color: #e60000;
  position: relative;
  display: inline-block;
  margin-bottom: 0.5rem;
  text-decoration: underline red;
}

/* メインタイトル */
.pricing-line2 {
  font-size: 60px;
  color: #fff;
  background-color: #e60000;
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
  margin: 0.5rem 0;
}

/* 注釈 */
.pricing-note {
  font-size: 25px;
  color: #333;
  margin-top: 0.5rem;
}

/* ────────────────────────────────────────── */
/* サービス詳細部分 */
.service-detail {
  text-align: center;
  margin: 5px 0;
}

/* サービス見出し */
.service-title {
  font-size: 40px;
  color: #e60000;
  text-decoration: underline;
  text-underline-offset: 6px;
  margin-bottom: 1rem;
}

/* サービス名 */
.service-name span {
  font-size: 2.4rem;
  color: #e60000;
  background-color: #fff2cc;
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
  display: inline-block;
  margin-bottom: 0.5rem;
}

.service-name {
  font-size: 50px;
  font-weight: 800;
}

/* サブタグライン */
.service-tagline {
  font-size: 40px;
  color: #e60000;
  margin-top: 0.5rem;
}

.comment-section {
  display: flex;
  align-items: center; /* 吹き出しはテキスト量に合わせ、高さは自動で */
  gap: 1rem;
  max-width: 800px;
  margin: 0 auto;
  overflow: visible;
}

.comment-image {
  flex: 0 0 30%;
}
.comment-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
}

.speech-bubble {
  flex: 1;
  position: relative;
  display: inline-block; /* テキスト量に応じて幅・高さが変わる */
  background: #f0b5b5;
  border-radius: 8px;
  border-color: #000;
  padding: 1rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  overflow: visible;
  vertical-align: middle;
}

.speech-bubble2 {
  flex: 1;
  position: relative;
  display: inline-block; /* テキスト量に応じて幅・高さが変わる */
  background: #ebebeb;
  border-radius: 8px;
  border-color: #000;
  padding: 1rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  overflow: visible;
  vertical-align: middle;
}
.speech-bubble p {
  margin: 0;
  font-size: 25px;
  line-height: 1.5;
  color: #333;
  font-weight: bold;
}

/*セクション３*/
/*セクション３*/ /*セクション３*/ /*セクション３*/ /*セクション３*/

.service-questions {
  list-style: none;
  padding: 1rem;
  border: 2px solid #e60000; /* 枠線 */
  border-radius: 8px;
  max-width: 600px;
  margin: 0 auto;
}

.service-questions li {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
  font-size: 26px;
}

.service-questions li:last-child {
  margin-bottom: 0;
}

.service-icon {
  width: 100px;
  height: auto;
  margin-right: 0.75rem;
}

/* コメントリスト全体 */
#comment-list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  max-width: 90%;
  margin: 0 auto;
}

/* 各コメント行：横並び */
.comment-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 1rem;
}

/* ユーザー情報（縦並び：画像 → 名前） */
.comment-user {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 80px; /* 固定幅推奨 */
}

/* ユーザーアイコン画像 */
.user-icon {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 0.4rem;
}

/* ユーザー名 */
.username {
  font-weight: bold;
  color: #333;
  font-size: 14px;
  text-align: center;
}

/* 吹き出し */
.comment-bubble {
  display: inline-block;
  width: fit-content;
  max-width: 600px;
  background: #fff370;
  border-radius: 8px;
  padding: 0.8rem 1rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* 吹き出しテキスト */
.comment-bubble p {
  margin: 0;
  line-height: 1.6;
  color: #333;
  white-space: pre-wrap;
  font-size: 18px;
}

/* セクション4 */
/* CSS */
.testimonial {
  background-color: #fff9e5;
  padding: 24px;
  border-radius: 8px;
  max-width: 80%;
  margin: 0 auto;
  text-align: center;
}

.testimonial__heading {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 16px;
}

.testimonial__author {
  display: inline-block;
  margin-left: 8px;
  font-weight: normal;
  font-size: 22px;
}

.testimonial__figure {
  margin: 0 auto 8px;
  width: 250px;
  height: 250px;
  overflow: hidden;
}

.testimonial__figure img {
  width: 100%;
  height: 100%;
}

.testimonial__caption {
  font-size: 0.875rem;
  color: #666;
  margin-top: 4px;
}

.testimonial__body p {
  font-size: 24px;
  color: #333;
  line-height: 1.6;
  margin-bottom: 16px;
}

.victory-box {
  border: 2px solid #333;
  border-radius: 12px;
  padding: 24px;
  background-color: #f9f9f9;
  font-family: "游ゴシック体", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo,
    sans-serif;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
  max-width: 600px;
  margin: 24px auto;
}

.victory-title {
  font-size: 35px;
  font-weight: bold;
  color: #d62828; /* 強めの赤でアクセント */
  margin-bottom: 16px;
  text-align: center;
  border-bottom: 2px solid #d62828;
  padding-bottom: 6px;
  margin-top: -15px;
}

.victory-box p {
  margin: 0;
  font-size: 28px;
  color: #333;
}

.criteria-box {
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: #fdfdfd;
  padding: 20px;
  margin: 20px 0;
  font-family: "游ゴシック体", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo,
    sans-serif;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
  width: 80%;
  margin-left: 70px;
}

.criteria-box p {
  font-size: 30px;
  margin-bottom: 12px;
  color: #444;
}

.sirushi-detail {
  padding-left: 20px;
  margin: 0;
  list-style: none;
}

.sirushi-detail li {
  font-size: 30px;
  margin-bottom: 6px;
  color: #000000;
}

.use-method {
  text-align: center;
  list-style: none;
  font-size: 25px;
  margin: 20px;
  padding: 20px;
  border: 2px solid #000000;
  background-color: #fff9d5;
}

.arrow-down {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 50px solid #000; /* 矢印の色 */
  margin: 20px auto;
}

/***要綱***/
/* 外枠ボックス */
.vg-box {
  background-color: #2a2a40;
  border: 4px solid #5555aa;
  box-shadow: 0 0 15px #000000aa;
  padding: 20px;
  max-width: 800px;
  margin: 0 auto 50px auto;
  border-radius: 8px;
}

/* テーブル */
.vg-table {
  width: 100%;
  border-collapse: collapse;
  background-color: #2a2a40;
  border: 3px solid #444477;
}

.vg-table th,
.vg-table td {
  padding: 16px;
  border: 2px solid #444477;
}

/* 見出し行（ヘッダー） */
.vg-table th {
  background-color: #4444aa;
  color: #fce303;
  font-size: 18px;
  text-align: center;
  border-bottom: 3px double #fce303;
}

/* 通常セル */
.vg-table td {
  color: #ffffff;
}

/* 強調色 */
.vg-highlight-red {
  color: #ff4444;
  font-weight: bold;
}

.vg-highlight-blue {
  color: #44ccff;
  font-weight: bold;
}

.vg-highlight-yellow {
  color: #ffff66;
  font-weight: bold;
}

/* リンク装飾 */
.vg-table a {
  color: #44ccff;
  text-decoration: underline;
}

.vg-table tr td:first-child {
  width: 100px;
  background-color: #333366;
  color: #fce303;
  font-weight: bold;
  text-align: left;
  white-space: nowrap;
  text-align: center;
}

.race-box {
  border: 2px solid #333; /* 線の太さ・色はお好みで */
  padding: 15px;
  display: inline-block;
  border-radius: 8px;
  background-color: #f9f9f9; /* 任意 */
  text-align: center;
}

/* ====== テーマ変数（色味はここで微調整） ====== */
:root {
  --accent: #6fd3ff; /* アクセント（光） */
  --accent-2: #8f7aff; /* アクセント（影） */
  --ink: #1e1e28;
  --paper: #0b0b12; /* セクション内背景 */
  --line: rgba(255, 255, 255, 0.12);
}

/* ====== セクション外枠（動くグラデ） ====== */
#proof {
  padding: 48px 16px;
  background: radial-gradient(
      1200px 300px at 50% -10%,
      rgba(111, 211, 255, 0.12),
      transparent 60%
    ),
    radial-gradient(
      900px 250px at 110% 20%,
      rgba(143, 122, 255, 0.1),
      transparent 60%
    ),
    #050510;
}
.proof-frame {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 28px;
  border-radius: 18px;

  /* 二重枠：内側は細線、外側はアニメするグラデ */
  background: linear-gradient(var(--paper), var(--paper)) padding-box,
    conic-gradient(
        from 0deg,
        var(--accent),
        var(--accent-2),
        var(--accent),
        var(--accent-2),
        var(--accent)
      )
      border-box;
  border: 3px solid transparent;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05) inset,
    0 12px 30px rgba(0, 0, 0, 0.35), 0 0 60px rgba(111, 211, 255, 0.12);
}

/* コーナー飾り */
.proof-frame::before,
.proof-frame::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 20px;
  pointer-events: none;
  background: repeating-linear-gradient(
    90deg,
    transparent 0 12px,
    rgba(255, 255, 255, 0.04) 12px 13px
  );
  mask: radial-gradient(18px at 18px 18px, #0000 98%, #000);
}
.proof-frame::after {
  inset: -2px;
  background: radial-gradient(
    24px 24px at 18px 18px,
    var(--accent) 0 20%,
    transparent 60%
  );
  opacity: 0.35;
  filter: blur(6px);
}

/* ====== ヘッダー ====== */
.proof-head {
  text-align: center;
  color: #e9ecff;
  margin: 6px 0 26px;
}
.proof-head .eyebrow {
  display: inline-block;
  font-size: 40px;
  letter-spacing: 0.2em;
  color: gold;
  border: 5px solid var(--line);
  border-radius: 999px;
  padding: 6px 10px;
  margin-bottom: 12px;
  margin-top: -25px;
  font-weight: 700;
}
.proof-head .catch {
  font-size: clamp(22px, 3.2vw, 34px);
  line-height: 1.35;
  font-weight: 800;
  margin: 0 0 10px;
  color: #fff;
}
.proof-head .catch span {
  display: inline-block;
  background: linear-gradient(90deg, #ffe259, #ffcc00); /* 黄色グラデ */
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 26px rgba(255, 204, 0, 0.25); /* 黄色発光 */
}
.proof-head .sub {
  color: rgba(255, 255, 255, 0.65);
  font-size: 18px;
}

/* PCでは2列、最後のカードを中央寄せ */
@media (min-width: 768px) {
  .proof-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
  }
  .proof-card.center-card {
    grid-column: 1 / span 2; /* 2列分使う */
    max-width: 50%; /* 横幅を半分に制限 */
    justify-self: center; /* 中央寄せ */
  }
}

/* スマホは1列のまま */
@media (max-width: 767px) {
  .proof-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
  }
}
/* ====== グリッド（PC2列 / SP1列） ====== */
.proof-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .proof-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ====== カード ====== */
.proof-card {
  position: relative;
  margin: 0;
  border-radius: 14px;
  overflow: clip;

  /* ガラス調の土台＋内枠 */
  background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.06),
        rgba(255, 255, 255, 0.02)
      )
      padding-box,
    linear-gradient(90deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.02))
      border-box;
  border: 1px solid transparent;

  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  transform: translateZ(0);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

/* 角の差し色 */
.proof-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
  border: 2px solid transparent;
  background: linear-gradient(var(--paper), var(--paper)) padding-box,
    linear-gradient(135deg, rgba(111, 211, 255, 0.6), rgba(143, 122, 255, 0.35))
      border-box;
  mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.55;
}

/* 見せ場：ホバーでふわっと＆ハイライトが流れる */
.proof-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.06) inset;
}
.proof-card::after {
  content: "";
  position: absolute;
  inset: -20% -60%;
  transform: rotate(12deg);
  background: linear-gradient(
    90deg,
    transparent 0 35%,
    rgba(255, 255, 255, 0.35) 50%,
    transparent 65% 100%
  );
  filter: blur(10px);
  opacity: 0;
  transition: opacity 0.35s ease, transform 0.6s ease;
}
.proof-card:hover::after {
  opacity: 0.9;
  transform: translateX(40%) rotate(12deg);
}

/* 画像 */
.proof-card img {
  display: block;
  width: 100%;
  height: auto;
}

/* キャプション */
.proof-card figcaption {
  position: absolute;
  left: 12px;
  bottom: 10px;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.85);
  padding: 6px 10px;
  backdrop-filter: blur(6px);
  background: rgba(10, 12, 20, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
}

/* ====== アニメーション・アクセシビリティ ====== */

.proof-frame {
  transform-origin: 50% 50%;
}
@media (prefers-reduced-motion: reduce) {
  .proof-frame,
  .proof-card,
  .proof-card::after {
    animation: none !important;
    transition: none !important;
  }
}