/* ==============================================
    全体設定
  =============================================== */
body {
  font-family: "Helvetica Neue", Arial, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
  font-size: 18px;
  line-height: 1.8em;
  letter-spacing: 0.1em;
  color: #333333;
  overflow-x: hidden;
}

.pc-br {
  display: none;
}

.sp-br {
  display: inline;
}

/* =========================================
   注釈
========================================= */
.annotation-area {
  width: 100%;
  max-width: 800px;
  margin: 0 auto 30px;
  padding: 10px 15px;
  box-sizing: border-box;
}

/* リスト */
.annotation-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* 各注釈の隙間 */
.annotation-list li {
  margin-bottom: 8px;
}
.annotation-list li:last-child {
  margin-bottom: 0;
}

.annotation-list small {
  display: block;
  font-size: 12px;
  color: #666666;
  line-height: 1.6;
  text-align: left;
}

/* ==============================================
    ファーストビュー
  =============================================== */
/* ファーストビュー外枠 */
.fv-section {
  position: relative;
  width: 100%;
}

/* ファーストビュー画像（自動切り替え） */
.fv-picture {
  display: block;
  width: 100%;
}

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

/* ==============================================
    お悩みセクション
  =============================================== */
/* お悩みセクション全体 */
.sp-only { display: block; }
.pc-only { display: none; }

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

/* 課題セクション（グレー背景部分） */
.problem-section {
  position: relative;
  background-color: #787878;
  text-align: center;
  z-index: 1;
  color: #ffffff;
  overflow-x: hidden;
}

.problem-container {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px;
}

/* タイトル */
.problem-title {
  font-size: 25px;
  font-weight: 900;
  margin-top: 10px;
  margin-bottom: 30px;
  line-height: 1.4;
}

/* 現場 */
.problem-title .txt-yellow {
  color: #ffea00;
  font-size: 32px;
}

/* 白いチェックリスト */
.problem-list {
  list-style: none;
  padding: 0;
  margin: 0 auto 30px auto;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.problem-list li {
  background-color: #ffffff;
  border-radius: 12px;
  padding: 15px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  color: #000000;
}

.list-left {
  display: flex;
  align-items: center;
}

/* チェック画像 */
.check-icon {
  width: 50px;
  height: auto;
  margin-right: 10px;
  flex-shrink: 0;
}

/* リストのテキスト */
.list-text {
  font-size: 22px;
  font-weight: 900;
  line-height: 1.3;
  text-align: left;
}

/* リスト内の強調カラー */
.list-text .txt-orange {
  color: #e65a00;
  font-size: 30px;
}

/* 下部の矢印デザイン */
.bottom-arrow {
  width: 100%;
  height: 30px;
  background-color: #d6edff;
  clip-path: polygon(0% 0%, 38% 0%, 50% 100%, 62% 0%, 100% 0%, 100% 100%, 0% 100%);
  position: relative;
  z-index: 2;
}


/* ==============================================
   解決策セクション（水色背景部分）
   =============================================== */
.solution-section {
  position: relative;
  background: linear-gradient(180deg, #d6edff 0%, #ebf6ff 100%);
  padding: 40px 0 60px 0;
  margin-top: -1px;
  z-index: 1;
  overflow-x: hidden;
}

.solution-container {
  width: 100%;
  /* max-width: 800px; */
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
}

.reason-block {
  margin-bottom: 0;
}

/* オレンジ三本線とテキストの枠 */
.sub-intro-wrapper {
  position: relative;
  display: inline-block;
  margin-bottom: 25px;
}

.sub-intro {
  font-size: 18px;
  font-weight: bold;
  color: #000000;
  line-height: 1.5;
  margin: 0;
}

/* 左右のオレンジ三本線画像 */
.spark-icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 24px; 
  height: auto;
}

/* 左の画像 */
.spark-icon.left {
  right: 100%;
  margin-right: 15px; 
}

/* 右の画像 */
.spark-icon.right {
  left: 100%;
  margin-left: 15px; 
}


/* 「原因は〜」メインテキストブロック */
.main-intro {
  font-size: 34px;
  font-weight: 900;
  line-height: 1.5;
  margin: 0;
}

/* 黄色マーカー & 白い枠線 */
.marker-bg {
  display: inline-block;
  background-image: linear-gradient(to bottom, transparent 70%, #fff100 50%);
  padding: 2px 10px;
  margin-bottom: 5px;
  color: #000000;
  /* 文字の淵 */
  text-shadow:
    -3px -3px 0 #ffffff,
     3px -3px 0 #ffffff,
    -3px  3px 0 #ffffff,
     3px  3px 0 #ffffff,
    -4px  0   0 #ffffff,
     4px  0   0 #ffffff,
     0   -4px 0 #ffffff,
     0    4px 0 #ffffff;
}

/* 設置環境の赤文字 */
.marker-bg.txt-red {
  color: #ff0000;
  font-size: 45px;
}

/* 無限ループスライダー（追加部分） */
.infinite-slider-wrapper {
  width: 100%;
  overflow: hidden;
  padding: 10px 0;
  margin-bottom: 50px;
  transform: translateY(-40px);
  position: relative;
  z-index: 10;
}

.infinite-slider {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  width: max-content;
  animation: infinity-scroll 50s linear infinite;
}

.infinite-slider li {
  width: 200px;
  margin: 0 5px;
}

.infinite-slider li img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  display: block;
}

/* アニメーションの動き */
@keyframes infinity-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* イラスト画像 */
.img-over-wave {
  transform: translateY(-80px);
  position: relative;
  z-index: 10;
}

.desc-text {
  text-align: left;
  display: inline-block;
  margin-top: -110px; 
  position: relative;
  z-index: 10;
}

/* 「45℃以上」と「ピークカット」 */
.txt-accent-red {
  color: #e60012;
  font-weight: 900;
  font-size: 20px;
}

/* 矢印 */
.floating-arrow-wrap {
  text-align: center;
  margin: 40px 0;
  margin-top: 20px;
}

.floating-arrow {
  width: 80px;
  height: auto;
  animation: floatArrow 1.5s infinite ease-in-out alternate;
}

@keyframes floatArrow {
  0% { transform: translateY(0); }
  100% { transform: translateY(15px); }
}

/* シャネットで解決!! */
.catchphrase-solution {
  text-align: center;
  font-weight: 900;
  margin-bottom: 60px;
  margin-top: -20px;
}

.heavy-red {
  color: #e60012;
  font-size: 32px;
}
.heavy-orange {
  color: #e87f23;
  font-size: 26px;
}

/* 写真背景 */
.wave-bg-wrap {
  position: absolute;
  top: 55%;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('img/bg_photo.webp'); 
  background-size: cover;
  background-position: center;
  z-index: 1;
}

/* 写真背景の透明度 */
.wave-bg-wrap::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.85);
}

/* 上の区切りを波線に */
.wave-bg-wrap::after {
  content: "";
  position: absolute;
  top: -40px;
  left: -10%;
  width: 120%;
  height: 80px;
  background: #ffffff;
  border-radius: 0 0 50% 50%;
}

/* 商品紹介ブロック */
.product-block {
  text-align: center;
  position: relative;
  z-index: 6;
  margin-top: 80px;
}

/* シャネットのイラストを波線に被せる調整 */
.shanet-illust-wrap {
  transform: translateY(-8px);
  margin-bottom: -20px;
  position: relative;
  z-index: 10;
}

.product-title {
  font-size: 20px;
  font-weight: bold;
  text-align: left;
  color: #000;
  margin-bottom: 30px;
  margin-top: -30px;
}

.marker-orange {
  background-color: #e87f23;
  color: #fff;
  padding: 2px 6px;
  display: inline-block;
  font-weight: 900;
  line-height: 1.1;
}

/* 角丸メッセージボックス */
.msg-box {
  background-color: #fffde7;
  border-radius: 30px;
  padding: 30px 20px;
  text-align: left;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.desc-text-box {
  margin: 0;
}

.txt-box-red {
  color: #e60012;
  font-weight: 900;
}

/* 画像の共通設定 */
.img-wrap {
  width: 100%;
  margin: 30px 0;
  text-align: center;
}

.full-img {
  width: 100%;
  /* max-width: 340px; */
  height: auto;
}

/* --- シャネット紹介セクション全体 --- */
.about-shanet-section {
  position: relative;
  padding-bottom: 60px; 
}

/* --- 波線＆半透明の背景画像エリア --- */
.shanet-bg-area {
  position: absolute;
  top: 0;
  bottom: -20px; 
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  background-image: url('img/bg_photo.webp');
  background-size: cover;
  background-position: center top;
  opacity: 0.3;
  z-index: 1;
  clip-path: polygon(
    0% 10%, 10% 8%, 20% 7%, 30% 7%, 40% 8%, 50% 10%, 
    60% 12%, 70% 13%, 80% 13%, 90% 12%, 100% 10%, 
    100% 100%, 0% 100%
  );
}

.shanet-container {
  position: relative;
  width: 100%;
  max-width: 450px;
  margin: 0 auto;
  padding: 0 24px;
  z-index: 5; 
}

/* 高圧カット対策 */
.high-pressure-cut-wrapper {
  max-width: 1000px;
  margin: 40px 20px;
  position: relative;
  z-index: 10;
}

.hpc-main-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 30px;
  line-height: 1.4;
}

.hpc-title-black {
  font-size: 20px;
  font-weight: bold;
}

.hpc-title-orange {
  color: #ffffff;
  background-color: #e87f23; 
  font-size: 26px;
  font-weight: bold;
  padding: 0 5px;
}

/* 画像と矢印 */
.hpc-image-flow {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-bottom: 30px;
}

.hpc-img-box {
  width: 50%; 
  max-width: 400px;
}

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

/* 真ん中の横矢印 */
.hpc-arrow {
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-left: 18px solid #e87f23;
}

/* テキストエリア */
.hpc-text-area {
  text-align: left;
  max-width: 800px;
  margin: 0 auto;
}

.hpc-subtitle {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 10px;
}

.hpc-description {
  font-size: 0.95rem;
  line-height: 1.8;
}

/* ==============================================
    エビデンスセクション
  =============================================== */
/* --- 実証データ セクション全体 --- */
.evidence-section {
  background-color: #d6e6f2; 
  padding: 60px 0;
  text-align: center;
  border-radius: 40px;   
  margin-top: -60px;
  position: relative;
  z-index: 10; 
}

.evidence-container {
  width: 100%;
  max-width: 450px;
  margin: 0 auto;
  padding: 0 16px;
}

/* 吹き出しタイトル */
.speech-bubble-title {
  display: inline-block;
  background-color: #72a3c9;
  color: #fff;
  font-size: 22px;
  font-weight: bold;
  line-height: 1.6;
  padding: 10px 24px;
  border-radius: 40px;
  position: relative;
  margin-top: 10px;
  transform: translateY(0px);
  margin-bottom: 30px;
  z-index: 15; 
}

/* =========================================
   基本スタイル
========================================= */

/* 表面・天板の大枠 */
.compare-part-box {
  background-color: #ffffff;
  border: 3px solid #72a3c9;
  border-radius: 16px;
  padding: 20px 10px 15px;
  position: relative;
}

.first-box {
  margin-bottom: 50px;
}

/* 室外機表面 */
.target-part-label {
  background-color: #0056b3;
  color: #ffffff;
  font-size: 16px;
  font-weight: bold;
  padding: 6px 24px;
  border-radius: 20px;
  display: inline-block;
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

/* 未設置/設置の横並びコンテナ */
.thermo-compare-area {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  width: 100%;
  margin: 25px auto 15px;
}

/* 未設置/設置の各アイテム */
.compare-item {
  flex: 1;
  width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 5px;
  border-radius: 8px;
}
.box-before {
  background-color: #e3e8eb;
  border: 2px solid #b8c1c8;
}
.box-after {
  background-color: #e8dccb;
  border: 2px solid #f39800;
}

/* 未設置・設置のタイトル */
.status-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-top: 0;
  margin-bottom: 10px;
  text-align: center;
  line-height: 1.2;
}
.pc-text {
  display: none;
}

/* 画像 */
.img-large, .img-large-two {
  width: 100%;
  max-width: 250px;
  height: auto;
}

/* 矢印 */
.center-arrows-row {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  flex-shrink: 0;
}
.arrow-right {
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid #8ba4ba;
}

/* 結果ボックス */
.result-highlight-box {
  background-color: #fffcf0;
  border: 3px dashed #e60000;
  border-radius: 12px;
  padding: 15px;
  margin: 0 5px;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}
.hl-black {
  font-size: 1.4rem;
  font-weight: bold;
}
.hl-red-xl {
  font-size: 2.2rem;
  font-weight: bold;
  color: #e60000;
}
.hl-red-l {
  font-size: 1.5rem;
  font-weight: bold;
  color: #e60000;
}

/* 「検証データ」を囲う四角 */
.verification-header-box {
  background-color: #72a3c9;
  border-radius: 60px;
  padding: 12px 50px;
  width: fit-content;
  margin: 80px auto 30px;
  text-align: center;
}

/* 「検証データ」の文字 */
.verification-header-box .verification-title-large {
  font-size: 25px;
  font-weight: bold;
  color: #ffffff;
}

/* 日付、場所 */
.verification-header-box .verification-date-small {
  font-size: 16px;
  font-weight: bold;
  color: #ffffff;
  margin: 0;
  line-height: 1.6;
}

/* サブタイトル */
.detail-subtitle {
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 10px;
}

/* 青い四角 */
.verification-label {
  background-color: #0056b3;
  color: #ffffff;
  font-size: 18px;
  font-weight: bold;
  display: inline-block;
  padding: 0 10px;
  margin-bottom: 15px;
}

.image-box {
  text-align: center;
  margin: 0 auto;
  width: 100%;
}

/* 画像 */
.verification-grid-container {
  width: 100%;
  max-width: 800px;
  margin: 0 auto 30px;
  padding: 0 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* 各検証ブロック */
.verification-each-block {
  width: 100%;
}

.content-flex-box {
  display: block; 
}

.content-flex-box .img-side {
  width: 100%;
  text-align: center;
  margin-bottom: 15px;
}

.content-flex-box .img-side img {
  width: 100%;
  max-width: 350px;
  height: auto;
  vertical-align: bottom; 
}

/* 白い実績ボックス */
.white-rounded-box {
  background-color: #ffffff;
  border-radius: 12px;
  padding: 25px 20px;
  margin-top: 0;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.conclusion-text-highlight {
  font-weight: bold;
}

.verification-label-highlight {
  font-weight: 900;
}

/* 「3〜15℃低下!!」 */
.white-rounded-box .txt-red-large {
  color: #e60000;
  font-size: 2.2rem; 
  font-weight: bold;
  display: inline-block;
  margin-top: 10px;
}

.verification-each-block {
  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
  padding-bottom: 30px;
}

/* ==============================================
    日経トレンディセクション
  =============================================== */
.full-width-bg {
  transform: translateY(-50px);
  padding: 50px 0 0 0;
  width: 100%;
  background-color: #f9b637;
}

/* セクション全体の外余白 */
.media-publication-section {
  padding: 40px 3%; 
  max-width: 1000px;
  margin: 0 auto 0 auto; 
  box-sizing: border-box;
}

/* 角丸・背景・枠線コンテナ */
.media-publication-container {
  background-color: #ffffff;
  border: 4px solid #fb6c00;
  border-radius: 20px;
  padding: 40px 20px;
  
  /* スマホ版レイアウト */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-sizing: border-box;
}

/* --------------------
   タイトル部分
-------------------- */
.media-title {
  order: 1;
  font-size: 30px;
  font-weight: 900;
  color: #333;
  line-height: 1.3;
  margin: 0 0 20px 0;
}

.media-title .orange-text {
  color: #e73f1e;
}

/* 「月号に掲載！」のサイズ */
.media-title .large-text {
  font-size: 40px;
  display: block; 
  margin-top: 5px;
}

/* 「8」のサイズ */
.media-title .huge-number {
  font-size: 60px;
  line-height: 1;
}

/* --------------------
   雑誌画像エリア
-------------------- */
.media-image-wrapper {
  order: 2;
  position: relative;
  width: 75%;
  max-width: 320px;
  margin: 30px auto 40px auto;

  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s ease-out, transform 1s ease-out;
}

/* --- スクロールして画面に入った時の動き --- */
.media-image-wrapper.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- 2. 三本線の点滅アニメーション --- */
@keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}

.magazine-img {
  width: 100%;
  height: auto;
  display: block;
  transform: rotate(-6deg);
  border-radius: 2px;
  box-shadow: 0 0 25px 12px #fff6e5;
}

/* 三本線の装飾 */
.deco-line {
  position: absolute;
  width: 50px;
  z-index: 2;

  animation: blink 1.2s infinite ease-in-out;
}

.line-left {
  top: -40px;
  left: -55px;

  animation-delay: 0s;
}
.line-right {
  top: -35px;
  right: -45px;

  animation-delay: 0s;
}

/* --------------------
   説明テキスト部分
-------------------- */
.media-description {
  order: 3;
  text-align: left;
  font-size: 18px;
  line-height: 1.8;
  color: #333;
  width: 100%;
}

.media-description p {
  margin: 0 0 10px 0;
}
.media-description p:last-child {
  margin: 0;
}

/* 「シャネットが掲載されました！」 */
.highlight-orange-bold {
  color: #e73f1e;
  font-weight: bold;
}

/* スマホ用改行 */
.sp-only {
  display: block;
}

/* ==============================================
    施工事例セクション
  =============================================== */
/* --- 施工事例セクション全体 --- */
.case-section {
  background-color: #fff;
  padding: 60px 0;
  text-align: center;
}

.case-container {
  width: 100%;
  max-width: 450px;
  margin: 0 auto;
  padding: 0 24px;
}

.case-main-title {
  font-size: 28px;
  color: #e87f23;
  font-weight: 900;
  margin: 0 0 10px 0;
}

.case-sub-title {
  text-align: left;
}

/* 事例ごとのブロック */
.case-item {
  margin-bottom: 80px;
  position: relative;
}

.case-item:last-child {
  margin-bottom: 0;
}

.facility-label-new {
  background-color: #e87f23;
  color: #fff;
  font-weight: bold;
  display: inline-block;
  padding: 8px 30px;
  border-radius: 30px;
  position: relative;
  z-index: 10;
  margin-bottom: -10px;
  transform: translateY(15px);
}

.yellow-wrapper {
  background-color: #fef8cc;
  border-radius: 40px;
  padding: 40px 20px 30px;
  margin: 0 auto;
}

/* 画像のラップ設定 */
.case-img-wrap {
  width: 100%;
  margin: 15px 0;
}

/* テキスト周りの設定 */
.status-text-area {
  margin: 30px 0;
}

.status-text {
  margin: 0 0 10px 0;
}

.txt-bold {
  font-weight: 900;
}

.txt-large-red {
  color: #e60012;
  font-size: 28px;
  font-weight: 900;
  display: inline-block;
  margin: 10px 0;
}

.txt-normal {
  font-weight: normal; 
}

.factory-breakdown-normal {
  display: block;
  font-weight: normal; 
  margin-top: 15px;
}

/* 注釈 */
.status-note {
  font-size: 16px;
  margin: 0;
}

/* 170%UPなど */
.status-text-extra {
  margin: 20px 0 0 0;
}

.txt-xlarge-red {
  color: #e60012;
  font-size: 22px;
  font-weight: 900;
}

/* グラフ周りの設定 */
.chart-title {
  color: #e87f23;
  font-size: 20px;
  font-weight: 900;
  margin: 40px 0 10px 0;
}

.case-note-text {
  font-size: 16px;
  line-height: 1.6;
  text-align: left;
  margin-top: 8px;
  padding: 0 5px;
}

/* ==============================================
    他対策との比較セクション
  =============================================== */
/* セクション全体 */
.compare-section {
  background-color: #ffffff;
  padding: 20px 0;
}

.compare-container {
  width: 100%;
  max-width: 450px;
  margin: 0 auto;
  padding: 0 16px;
}

/* タイトル見出し */
.compare-main-title {
  font-size: 28px;
  color: #e87f23;
  font-weight: 900;
  margin: 0 0 10px 0;
  text-align: center;
}

.compare-intro-text {
  text-align: left;
  margin-bottom: 30px;
}

/* テーブル */
.compare-modern-wrapper {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  font-size: 18px;
  line-height: 1.5;
}

/* スマホではPC用ヘッダーを隠す */
.compare-header.pc-only {
  display: none;
}

/* 各行を独立したカードにする */
.compare-row {
  display: flex;
  flex-wrap: wrap; /* ここで折り返させる */
  margin-bottom: 20px;
  border: 1px solid #e1e1e1;
  border-radius: 8px;
  background-color: #fff;
  overflow: hidden;
}

/* 項目名（横幅100%で一番上に） */
.col-label {
  width: 100%;
  background-color: #feefac;
  font-weight: bold;
  font-size: 18px;
  text-align: center;
  padding: 10px;
  border-bottom: 1px solid #e1e1e1;
}

/* シャネットと他対策（横幅50%で左右に並べる） */
.col-shanet, .col-other {
  width: 50%;
  display: flex;
  flex-direction: column;
}

.col-shanet {
  position: relative;
  border-right: 1px solid #e1e1e1;
}

/* シャネットの赤い破線（枠の内側に引く） */
.col-shanet.highlight::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  border: 2px dashed #e60012;
  pointer-events: none;
}

/* スマホ用に見せる「シャネット」「他対策」のミニ見出し */
.sp-col-title {
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  padding: 6px 2px;
}
.col-shanet .sp-col-title {
  background-color: #e87f23;
  color: #fff;
}
.col-other .sp-col-title {
  background-color: #e6e6e6;
  color: #333;
}

.col-other {
  background-color: #fafafa;
}

/* 共通装飾クラス */
.txt-bold { font-weight: 900; }
.txt-bold-red { color: #e60012; font-weight: 900; font-size: 20px; }
.text-left { text-align: left; padding-left: 8px; }
.col-content.txt-bold.txt-bold-red { font-size: 20px; }

.compare-modern-wrapper .col-content {
  display: block;
  margin-top: auto;
  margin-bottom: auto;
  text-align: center;
  font-size: 18px;
}

.compare-modern-wrapper sup {
  font-size: 11px;
  vertical-align: super;
  line-height: 1;
  margin-left: 2px;
}

/* ==============================================
    導入対象セクション
  =============================================== */
/* --- セクション全体 --- */
.target-section {
  background-color: #fffde0;
  padding: 60px 0;
}

.target-container {
  width: 100%;
  max-width: 450px;
  margin: 0 auto;
  padding: 0 20px;
}

/* セクションタイトル */
.target-main-title {
  font-size: 28px;
  color: #e87f23;
  font-weight: 900;
  text-align: center;
  margin: 0 0 10px 0;
}

.target-sub-title {
  text-align: left;
  margin-bottom: 30px;
}

/* カードレイアウト */
.target-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 30px;
}

.target-card {
  background-color: #ffffff;
  border-radius: 20px;
  padding: 24px 20px;
  text-align: center;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.04);
  border: 1px solid #f6f6f6;
}

/* アイコン部分 */
.card-icon-wrap {
  width: 70px;
  height: 70px;
  background-color: #feefac;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 15px auto;
}

.card-icon {
  width: 40px;
  height: auto;
}

/* カード内の文字 */
.card-title {
  font-size: 25px;
  font-weight: 900;
  margin: 0 0 10px 0;
}

.card-desc {
  color: #444444;
  margin: 0;
  text-align: left;
}

/* 下部の補足テキスト */
.target-bottom-box {
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 12px;
  padding: 15px;
  text-align: left;
}

.target-bottom-text {
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
  color: #333333;
}

.target-bottom-text strong {
  color: #e87f23;
  font-weight: bold;
}

/* ==============================================
    導入までの流れセクション
  =============================================== */
/* セクション全体--- */
.flow-section {
  background-color: #ffffff;
  padding: 50px 0;
}

.flow-container {
  width: 100%;
  max-width: 450px;
  margin: 0 auto;
  padding: 0 24px;
}

/* セクションタイトル */
.flow-main-title {
  font-size: 24px;
  color: #e87f23;
  font-weight: 900;
  text-align: center;
  margin: 0 0 35px 0;
}

/* 縦並びフロー */
.flow-timeline-simple {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 各ステップのカード */
.flow-step-simple {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  background-color: #fffdec;
  border: 2px solid #e87f23;
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 24px;
}

/* 最後のカード */
.flow-step-simple:last-child {
  margin-bottom: 0;
}

/* ステップカード同士を繋ぐ下向きの矢印 */
.flow-step-simple:not(:last-child)::after {
  content: '▼';
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
  color: #e87f23;
  font-size: 14px;
}

/* 数字バッジ */
.step-num {
  width: 32px;
  height: 32px;
  background-color: #e87f23;
  color: #ffffff;
  font-size: 14px;
  font-weight: 900;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* 工程名テキスト */
.step-name {
  padding-left: 15px;
  font-weight: 900;
  color: #000000;
  text-align: left;
}

/* ==============================================
    FAQセクション
  =============================================== */
/* セクション全体 */
.faq-section {
  background-color: #fffde0;
  padding: 30px 0;
  color: #333;
}

.faq-container {
  width: 100%;
  max-width: 450px;
  margin: 0 auto;
  padding: 0 16px;
}

.faq-main-title {
  font-size: 24px;
  color: #e87f23;
  font-weight: 900;
  text-align: center;
  margin-bottom: 35px;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* アコーディオンの外枠 */
.faq-item {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.03);
  overflow: hidden;
}

/* 質問部分（クリックエリア） */
.faq-q {
  padding: 16px 40px 16px 45px;
  font-weight: bold;
  cursor: pointer;
  position: relative;
  list-style: none;
  text-align: left;
}

.faq-q::-webkit-details-marker {
  display: none;
}

/* Qのアイコン */
.faq-q::before {
  content: 'Q';
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: #e87f23;
  font-weight: 900;
  font-size: 20px;
}

/* 開閉の矢印 */
.faq-q::after {
  content: '▼';
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: #e8c4a5;
  font-size: 20px;
}

/* 開いている時の矢印の向き */
.faq-item[open] .faq-q::after {
  content: '▲';
}

/* 回答部分 */
.faq-a {
  padding: 0 20px 20px 45px;
  border-top: 1px solid #f5f5f5;
  text-align: left;
  position: relative;
}

.faq-a::before {
  content: 'A';
  position: absolute;
  left: 15px;
  top: 15px;
  color: #e60012; /* 赤色のA */
  font-weight: 900;
  font-size: 20px;
}

.faq-a p {
  margin: 15px 0 0 0;
  color: #555;
}

/* ==============================================
    お問い合わせセクション
  =============================================== */
/* セクション全体 */
.contact-section {
  background-color: #ffffff;
  padding: 40px 0;
}

.contact-container {
  width: 100%;
  max-width: 450px;
  margin: 0 auto;
  padding: 0 16px;
}

.contact-box {
  background-color: #ebf5fe;
  border: 2px solid #7bb1d4;
  padding: 30px 20px;
  text-align: center;
}

/* タイトル */
.contact-main-title {
  font-size: 24px;
  font-weight: 900;
  margin: 0 0 15px 0;
}

/* フォームレイアウト */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.form-group {
  display: flex;
  flex-direction: column;
  text-align: left;
}

/* 項目名ラベル */
.form-group label {
  font-weight: 900;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
}

/* 必須バッジ */
.badge-required {
  background-color: #e60012;
  color: #ffffff;
  font-size: 14px;
  line-height: 1.4;
  font-weight: bold;
  padding: 2px 5px;
  margin-left: 6px;
  border-radius: 3px;
}

/* 任意バッジ */
.badge-any {
  background-color: #888888;
  color: #ffffff;
  font-size: 14px;
  line-height: 1.4;
  font-weight: bold;
  padding: 2px 5px;
  margin-left: 6px;
  border-radius: 3px;
}

/* --- 入力欄のデザイン --- */
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  border: 1px solid #7bb1d4;
  border-radius: 4px;
  background-color: #ffffff;
  box-sizing: border-box;
}

/* 入力例（プレースホルダー） */
.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: #b3b3b3;
  font-size: 14px;
}

/* 備考欄（textarea） */
.contact-form textarea {
  line-height: 1.5;
}

/* --- プライバシーポリシー同意文言 --- */
.privacy-consent {
    text-align: center;      /* 中央寄せ（左寄せにしたい場合は left に） */
    font-size: 13px;         /* 少し小さめの文字で控えめに */
    color: #555;             /* 濃いグレーで読みやすく */
    margin-bottom: 20px;     /* 下にある送信ボタンとの余白 */
    line-height: 1.5;
}

.privacy-consent a {
    color: #6da2cb;          /* シャネットオレンジでリンクを目立たせる */
    text-decoration: underline; /* リンクだと分かるように下線 */
    font-weight: bold;
    transition: opacity 0.3s;
}

.privacy-consent a:hover {
    opacity: 0.7;            /* カーソルを合わせた時に少し薄くする */
}

/* 送信ボタン */
.submit-btn {
  background-color: #6da2cb;
  color: #ffffff;
  font-weight: 900;
  border: none;
  border-radius: 4px;
  padding: 10px 0;
  width: 50%;
  margin: 15px auto 0 auto;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.submit-btn:active {
  background-color: #598cb4;
}

/* =========================================
   フッター
   ========================================= */
.footer {
  background-color: #d6e6f2; 
  color: #333333;
  padding: 20px 0;
}

.footer-inner {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px; 
}

.footer-logo img {
  width: 250px;
  height: auto;
  display: block;
}

.footer-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.footer-link {
  color: #333333;
  text-decoration: none;
  font-size: 13px;
  transition: opacity 0.2s ease;
}

/* リンクをホバーした時に少し薄くするエフェクト */
.footer-link:hover {
  opacity: 0.7;
}

.footer-copyright {
  font-size: 11px;
  color: #333333;
}

/* =========================================
   CTAボタン
   ========================================= */
.fixed-cta {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 999;
  width: 120px;
  height: auto;
  transition: transform 0.2s ease, opacity 0.3s ease, visibility 0.3s ease;
}

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

/* タップした時に少し縮むエフェクト */
.fixed-cta:active {
  transform: scale(0.9);
}

/* =========================================
   インラインCTA（スマホ用：基本スタイル）
========================================= */
.inline-cta-container {
  width: 100%;
  text-align: center;
  box-sizing: border-box;
}

.inline-cta-btn {
  display: inline-block;
  width: 100%;
  max-width: 340px; /* スマホで横長に綺麗に見える最大幅（画像の縦横比に合わせて調整してください） */
  height: auto;
  text-decoration: none;
  transition: transform 0.2s ease, filter 0.2s ease;
  /* ほんのり影をつけて、ペタッと感をなくしボタンらしく見せる */
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.15)); 
}

.inline-cta-btn img {
  width: 100%;
  height: auto;
  display: block;
}

/* タップ・クリックした時に少し縮んで押した感を出す */
.inline-cta-btn:active {
  transform: scale(0.96);
}

/* =========================================
   トップへ戻るボタン
   ========================================= */
#scrollToTopBtn {
  display: none;
  position: fixed;
  bottom: 25px;
  left: 20px;
  z-index: 99;
  cursor: pointer;
  transition: all 0.3s ease;

  /* サイズ設定 */
  width: 65px;
  height: 65px;
  border-radius: 50%;

  /* カラー設定：LP基調色 */
  background: radial-gradient(circle, #D6EDFF 0%, #ffffff 100%);
  border: 3px solid #0056b3;
  color: #0056b3;

  /* 配置設定（中央寄せ） */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2px;

  /* フォント設定 */
  font-size: 16px;
  line-height: 1;

  /* アニメーション設定 */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;

  /* その他 */
  outline: none;
  box-shadow: 0 4px 6px rgba(0,0,0,0.2);
}

/* ボタン内の文字「TOP」のスタイル */
#scrollToTopBtn span {
  font-family: sans-serif;
  font-weight: bold;
  font-size: 14px;
  text-transform: uppercase;
}

/* マウスを乗せた時のスタイル */
#scrollToTopBtn:hover {
  background: radial-gradient(circle, #7bb1d4 0%, #ffffff 100%);
  box-shadow: 0 6px 10px rgba(0,0,0,0.3);
  transform: translateY(-3px);
}

/* =========================================
   🖥️ PC版のレイアウト（画面幅768px以上で適用）
   ========================================= */
@media (min-width: 768px) {
  /* === 全体設定 === */
  .pc-br {
    display: inline;
  }
  
  .sp-br {
    display: none;
  }

  /* === お悩みセクション === */
  .sp-only { display: none; }
  .pc-only { display: block; }

  .problem-section {
    padding: 10px 0 0 0;
  }

  .problem-title {
    font-size: 35px;
    margin-bottom: 40px;
    margin-top: 40px;
  }

  /* 現場 */
  .problem-title .txt-yellow {
    font-size: 45px;
  }

  .problem-list {
    gap: 20px;
    margin-bottom: 50px;
  }

  .problem-list li {
    padding: 15px 30px;
    justify-content: space-between; 
  }

  .check-icon {
    width: 70px;
    margin-right: 15px;
  }

  .list-text {
    font-size: 32px;
  }

  /* リスト内の強調カラー */
  .list-text .txt-orange {
    font-size: 40px;
  }

  /* PC版のみ表示される右側のイラスト画像 */
  .illust-icon {
    height: 70px;
    width: auto;
    object-fit: contain;
  }

  .bottom-arrow {
    height: 70px;
    clip-path: polygon(0% 0%, 42% 0%, 50% 100%, 58% 0%, 100% 0%, 100% 100%, 0% 100%);
  }

  .solution-section {
    padding: 60px 0 100px 0;
  }

  .sub-intro {
    font-size: 25px;
  }
  
  /* 左右のオレンジ三本線画像 */
  .spark-icon {
    top: 20%;
  }

  .spark-icon {
    width: 30px;
  }

  .main-intro {
    font-size: 0;
    margin-bottom: 20px;
  }

  /* 文字の白フチ */
  .marker-bg {
    font-size: 45px;
    padding: 5px 4px;
    margin: 0 -4px;
    margin-bottom: 10px;
    text-shadow: 
      -4px -4px 0 #ffffff,  
       4px -4px 0 #ffffff,
      -4px  4px 0 #ffffff,
       4px  4px 0 #ffffff,
      -5px  0   0 #ffffff,
       5px  0   0 #ffffff,
       0   -5px 0 #ffffff,
       0    5px 0 #ffffff;
  }

  /* 設置環境の赤文字 */
  .marker-bg.txt-red {
    font-size: 55px;
  }

  /* === 解決策セクション === */
  .pc-flex-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    margin: 0 auto;
  }

  .pc-flex-row .img-wrap {
    width:90%;
    margin-bottom: 0;
  }

  .pc-flex-row .desc-text {
    width: 50%;
    text-align: left;
    font-size: 18px;
    line-height: 1.8;
  }

  .shanet-bg-area {
    margin-top: -200px;
  }

  .shanet-container {
    max-width: 1000px;
  }

  .high-pressure-cut-wrapper {
    margin: 60px auto;
  }

  .hpc-main-title {
    display: block;
    text-align: center;
    margin-bottom: 40px;
  }

  .hpc-title-black {
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
  }

  .hpc-title-orange {
    display: inline-block;
    vertical-align: middle;
  }

  /* 画像と矢印の隙間を広げる */
  .hpc-image-flow {
    gap: 15px;
    margin-bottom: 40px;
  }

  /* 真ん中の横矢印：PC向けに大きく */
  .hpc-arrow {
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 30px solid #333333;
  }

  /* テキストエリアのフォントサイズを大きく */
  .hpc-subtitle {
    font-size: 1.4rem;
    margin-bottom: 15px;
  }

  .hpc-description {
    font-size: 1rem;
  }

  .pc-flex-row {
    margin-bottom: -20px;
  }

  .floating-arrow-wrap {
    margin-top: -100px;
  }
  
  .catchphrase-solution {
    margin-top: -20px; 
  }

  .product-block {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1000px;
    margin: 0 auto;
    gap: 50px;
    padding-top: 100px;
  }

  .product-left {
    width: 45%;
  }

  .product-right {
    width: 50%;
  }

  .shanet-illust-wrap {
    transform: translateY(-140px);
    margin-bottom: -60px;
  }

  /* 無限ループスライダー */
  .infinite-slider-wrapper {
    margin-bottom: 50px;
    transform: translateY(-40px);
  }

  .infinite-slider li {
    width: 450px;
    margin: 0 10px;
  }

  .infinite-slider li img {
    height: 300px;
  }

  /* アニメーションの動き */
  @keyframes infinity-scroll {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-50%);
    }
  }

  .img-over-wave {
    transform: translateY(-110px);
  }

  .desc-text {
    margin-top: -110px; 
  }

  .floating-arrow {
    width: 100px;
  }

  /* --- シャネットで解決!! --- */
  .catchphrase-solution {
    margin-bottom: 150px;
  }

  .product-title {
    margin-bottom: 20px;
    margin-top: -100px;
  }

  .full-img {
    max-width: none;
    width: 100%;
  }

  .high-pressure-cut-wrapper {
    margin: 60px auto; /* PCは余白を広めに */
  }

  /* タイトル周り：PCの広い画面なら横並び（インライン）に戻す */
  .hpc-main-title {
    display: block; /* flex（縦並び）を解除 */
    text-align: center;
    margin-bottom: 40px;
  }

  .hpc-title-black {
    font-size: 1.6rem;
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
  }

  .hpc-title-orange {
    font-size: 2.2rem;
    display: inline-block;
    vertical-align: middle;
    padding: 8px 20px;
  }

  /* 画像と矢印の隙間を広げる */
  .hpc-image-flow {
    gap: 15px;
    margin-bottom: 40px;
  }

  /* 真ん中の横矢印：PC向けに大きく */
  .hpc-arrow {
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 30px solid #333333;
  }

  /* テキストエリアのフォントサイズを大きく */
  .hpc-subtitle {
    font-size: 1.4rem;
    margin-bottom: 15px;
  }

  .hpc-description {
    font-size: 1rem;
  }

  /* --- 実証データ セクション全体 --- */
  .evidence-container {
    max-width: 900px;
  }
  
  .speech-bubble-title {
    font-size: 28px;
    padding: 20px 50px;
    margin-bottom: 50px;
    margin-top: 50px;
  }
  
  .compare-part-box {
    padding: 40px 30px 30px;
  }

  .first-box {
    margin-bottom: 100px;
  }

  .target-part-label {
    font-size: 22px;
    padding: 8px 40px;
    top: -24px;
  }

  .thermo-compare-area {
    gap: 20px;
    margin-bottom: 25px;
  }
  .compare-item {
    padding: 20px;
  }
  .status-title {
    font-size: 24px; /* PCではさらに大きく */
    margin-bottom: 15px;
  }
  .pc-text {
    display: inline;
  }

  .center-arrows-row {
    width: 30px;
  }
  .arrow-right {
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 30px solid #8ba4ba;
  }

  .result-highlight-box {
    padding: 20px;
  }
  .hl-black {
    font-size: 1.8rem;
    margin-right: 15px;
  }
  .hl-red-xl {
    font-size: 3rem;
  }
  .hl-red-l {
    font-size: 2rem;
  }

  .verification-grid-container {
    display: grid; /* グリッドレイアウトをオン */
    grid-template-columns: 1fr 1fr; /* 左右均等に50%ずつ（2列） */
    gap: 40px; /* 縦横の隙間 */
  }

  /* 「検証データ」を囲う四角 */
  .verification-header-box {
    margin: 150px auto 30px;
  }
  
  .white-rounded-box {
    height: 100%; /* 他の検証ブロックと高さを揃えて美しく見せる */
  }

  .verification-grid-container > .verification-each-block:nth-of-type(3) {
    border-bottom: none;
    padding-bottom: 0;
  }
  
  .verification-grid-container {
    row-gap: 30px;
    column-gap: 40px;
  }

  /* --- 日経トレンディ --- */
  .media-publication-container {
    padding: 50px 60px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 10px 40px;
    align-items: center;
    text-align: left;
  }

  .media-title {
    order: unset;
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    align-self: end;
    margin-bottom: 20px;
  }

  .media-image-wrapper {
    order: unset;
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    width: 100%;
    margin: 0;
  }

  .media-description {
    order: unset;
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    align-self: start;
  }

  /* --- 施工事例 --- */
  .case-container {
    max-width: 1000px;
    padding: 0 40px;
  }

  .case-sub-title {
    margin: 0 0 30px 0;
    text-align: center;
  }

  .yellow-wrapper {
    padding: 50px 40px 40px;
  }

  .yellow-wrapper {
    display: grid;
    grid-template-columns: 50% 45%;
    grid-template-rows: auto auto;
    column-gap: 5%;
    row-gap: 40px;
    align-items: center;
  }

  .yellow-wrapper .case-img-wrap:first-child {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    margin: 0;
  }

  .yellow-wrapper .status-text-area {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    margin: 0;
  }

  .yellow-wrapper .chart-title {
    grid-column: 1 / 3;
    grid-row: 2 / 3;
    margin-top: 0;
    align-self: end;
    text-align: center;
  }

  .yellow-wrapper .chart-title + .case-img-wrap {
    grid-column: 1 / 3;
    grid-row: 3 / 4;
    margin: 0;
  }
  
  .yellow-wrapper .case-note-text {
    grid-column: 1 / 3;
    grid-row: 4 / 5;
    text-align: center;
    margin-top: 10px;
  }

  .status-text, .factory-breakdown-normal {
    font-size: 18px; 
  }
  .txt-large-red {
    font-size: 34px; 
  }
  .status-note {
    font-size: 16px; 
  }

  .compare-section {
    padding: 50px 0;
  }

  .compare-container {
    max-width: 1000px;
    padding: 0 40px;
    margin: 0 auto;
  }

  /* 💡 2. 説明文の調整（少し文字を大きくして読みやすく） */
  .compare-intro-text {
    max-width: 800px; /* 広がりすぎると読みにくいので少し抑えます */
    margin: 0 auto 40px auto; 
    font-size: 16px; 
  }

  /* テーブル全体を大きな枠で囲む */
  .compare-modern-wrapper {
    border: 1px solid #e1e1e1;
    border-radius: 8px;
    overflow: hidden;
  }

  /* 行を横1列のグリッド（3列構成）にする */
  .compare-row, .compare-header {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    margin-bottom: 0;
    border: none;
    border-radius: 0;
    border-bottom: 1px solid #e1e1e1;
  }
  .compare-row:last-child {
    border-bottom: none;
  }

  /* PC用ヘッダーを表示 */
  .compare-header.pc-only {
    display: flex;
  }

  /* 列の横幅の比率を復元（25% : 40% : 35%） */
  .col-label {
    width: 25%;
    border-bottom: none;
    border-right: 1px solid #e1e1e1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .col-shanet {
    width: 40%;
  }
  .col-other {
    width: 35%;
  }

  /* 1. まず、各行の上下の点線を一旦すべて消して「左右の線」だけにする */
  .compare-row .col-shanet.highlight::after {
    border-top: none;
    border-bottom: none;
  }

  /* 2. 一番上のデータ行（削減効果の行）にだけ「上の点線」でフタをする */
  .compare-header + .compare-row .col-shanet.highlight::after {
    border-top: 2px dashed #e60012;
  }

  /* 3. 一番下のデータ行（その他の行）にだけ「下の点線」でフタをする */
  .compare-row:last-child .col-shanet.highlight::after {
    border-bottom: 2px dashed #e60012;
  }

  /* PC用ヘッダーのデザイン */
  .compare-header .col-label { background: transparent; }
  .compare-header .col-shanet {
    background-color: #e87f23;
    color: #fff;
    text-align: center;
    font-weight: bold;
    padding: 15px;
  }
  .compare-header .col-other {
    background-color: #e6e6e6;
    color: #333;
    text-align: center;
    font-weight: bold;
    padding: 15px;
  }

  /* PC画面ではスマホ用のミニ見出しを隠す */
  .sp-col-title {
    display: none;
  }
  .target-container {
    max-width: 1000px; /* 👈 PC用の広い幅に設定 */
    padding: 0 40px;
  }

  /* 💡 2. サブタイトルを中央揃えにしてバランスを整える */
  .target-sub-title {
    text-align: center;
    font-size: 18px; /* 少し大きく */
    margin-bottom: 50px;
  }

  /* 💡 3. カードを横並びにする魔法！ */
  .target-grid {
    flex-direction: row;
    gap: 30px; /* カード同士の隙間を少し広めに */
  }

  /* 💡 4. 3つのカードが均等な幅になるようにする */
  .target-card {
    flex: 1;
  }

  /* 💡 5. 下部の補足テキストボックスの調整 */
  .target-bottom-box {
    padding: 20px 40px; /* 余白を少し広めに */
    text-align: center; /* 広い画面ではテキストを中央に置くと綺麗です */
  }
  .target-bottom-text {
    font-size: 16px; /* 文字を少し大きく */
  }

  /* 💡 1. フローセクションのコンテナ幅を広げる */
  .flow-container {
    max-width: 1000px;
    padding: 0 40px;
  }

  /* 💡 2. 大枠を横並びに変更！ */
  .flow-timeline-simple {
    flex-direction: row; /* 縦(column)から横(row)へ */
    justify-content: space-between;
    align-items: stretch; /* カードの高さを揃える */
    gap: 30px; /* カード間の隙間 */
  }

  /* 💡 3. 各ステップのカードの調整 */
  .flow-step-simple {
    flex: 1; /* 5つが均等な幅になるようにする */
    margin-bottom: 0; /* スマホ用の下余白を消す */
    flex-direction: column; /* 👈 カードの中身を「縦並び」にしてスッキリさせる */
    justify-content: center;
    padding: 30px 10px; /* 上下にゆとりを持たせる */
  }

  /* 💡 4. カード内のテキストの調整 */
  .step-name {
    padding-left: 0; /* スマホ用の左余白を消す */
    margin-top: 15px; /* 数字との間に余白を作る */
    text-align: center; /* 中央揃え */
    font-size: 15px;
    line-height: 1.4;
  }

  /* 💡 5. 【超重要】矢印を下向き(▼)から右向き(▶)に変更して移動！ */
  .flow-step-simple:not(:last-child)::after {
    content: '▶'; /* 👈 右向きの矢印に変更 */
    top: 50%; /* 上から50%（縦の中央） */
    right: -22px; /* 👈 右の外側に配置（gapの隙間に落とし込む） */
    left: auto; /* スマホ用のleftを無効化 */
    bottom: auto; /* スマホ用のbottomを無効化 */
    transform: translateY(-50%); /* 縦方向のズレをピッタリ中央に補正 */
    font-size: 18px; /* 矢印を少し大きく */
  }

  /* 💡 1. FAQセクション全体を包むコンテナの幅を広げる */
  .faq-container {
    max-width: 1000px; /* 👈 PC用の広い幅に設定 */
    padding: 0 40px;
  }

  /* 💡 2. 質問の箱同士の隙間を少し広げる */
  .faq-list {
    gap: 20px; /* 15pxから少し広げてゆとりを持たせます */
  }

  /* 💡 3. 質問テキスト（Q）の調整 */
  .faq-q {
    padding: 20px 40px 20px 60px; /* 上下と左の余白を少し広げる */
    font-size: 16px; /* 14pxから少し大きく */
  }

  /* Qのアイコン（文字）の位置調整（左余白を広げた分、アイコンもずらします） */
  .faq-q::before {
    left: 25px; /* 15pxから少し右へ */
    font-size: 20px; /* アイコンも少し大きく */
  }

  /* 開閉矢印 */
  .faq-q::after {
    right: 25px;
  }

  /* A */
  .faq-a {
    padding: 0 40px 25px 60px;
  }

  .faq-a::before {
    left: 25px;
    top: 20px;
    font-size: 20px;
  }

  /* 回答の本文 */
  .faq-a p {
    font-size: 15px;
    margin: 20px 0 0 0;
  }

  .contact-container {
    max-width: 1000px;
    padding: 0 40px;
  }

  .contact-box {
    padding: 60px 90px; 
  }

  .form-group {
    flex-direction: row;
    align-items: flex-start;
    gap: 20px; 
    margin-bottom: 30px; 
  }

  .form-group label {
    flex: 0 0 150px; 
    margin-bottom: 0; 
    padding-top: 10px; 
    display: flex;
    align-items: center;
    justify-content: flex-start; 
  }

  .contact-form input,
  .contact-form textarea {
    flex: 1; 
  }

  /* 送信ボタン */
  .submit-btn {
    width: 300px; 
    margin: 50px auto 0 auto; 
    font-size: 20px; 
    padding: 15px;
  }

  /* =========================================
   フッター
   ========================================= */
  .footer {
    padding: 15px 0;
  }

  .footer-inner {
    flex-direction: row;
    justify-content: space-between;
    padding: 0 40px;
  }

  .footer-info {
    flex-direction: row;
    gap: 30px;
  }

  /* =========================================
   CTAボタン
   ========================================= */
  .fixed-cta {
    bottom: 40px;
    right: 40px;
    width: 200px; 
  }
  
  .fixed-cta:hover {
    transform: translateY(-5px);
  }

  .inline-cta-btn {
    max-width: 500px;
  }

  /* ホバー時 */
  .inline-cta-btn:hover {
    transform: translateY(-4px);
    filter: drop-shadow(0 6px 12px rgba(0,0,0,0.2));
  }

  /* =========================================
   トップへ戻るボタン
   ========================================= */
  #scrollToTopBtn {
    bottom: 50px;
    left: 35px;

    /* サイズ設定 */
    width: 80px;
    height: 80px;
    border-radius: 50%;

    /* フォント設定 */
    font-size: 20px;
  }

  /* ボタン内の文字「TOP」のスタイル */
  #scrollToTopBtn span {
    font-family: sans-serif;
    font-weight: bold;
    font-size: 14px;
    text-transform: uppercase;
  }

  /* マウスを乗せた時のスタイル */
  #scrollToTopBtn:hover {
    background: radial-gradient(circle, #7bb1d4 0%, #ffffff 100%);
    box-shadow: 0 6px 10px rgba(0,0,0,0.3);
    transform: translateY(-3px);
  }
}