/*
Theme Name: はこナビ
Theme URI: https://haconavi.jp
Author: はこナビ
Description: 移転・出店サポート はこナビ WordPressテーマ
Version: 2.1.0 (整理・コンポーネント化)
Text Domain: haconavi

--- 整理方針 ---
1. 既存クラス名は一切変更しない（HTMLを触らない）
2. 同一セレクタの重複は1つに統合
3. 似たスタイルはセレクタリスト化して共通ルール化
4. メディアクエリは各ブレークポイントごとに集約
*/

/* =========================================================
   CSS変数 (:root)
========================================================= */
:root {
  --color-red: #DF022A;
  --color-red-dark: #DF022A;
  --color-navy: #3a4752;
  --color-text: #282C32;
  --color-subtext: #282C32;
  --color-border: #cfcfcf;
  --color-bg: #efefef;
  --color-white: #fff;

  --font-base: "Noto Sans JP", sans-serif;

  --container: 1160px;
  --header-h: 64px;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 18px;

  --shadow-sm: 0 10px 24px rgba(0, 0, 0, 0.06);
  --transition: .25s ease;
	/* 見出し専用カラー（ブルー寄りのチャコール：締まった印象になる） */
  --color-heading: #282C32;
  --color-heading-sub: #3d4a60;
 
  /* 強調用マーカー（問題カードで使用されていた色を変数化） */
  --color-marker: #ffbebe;
 
  /* シャドウ階層 */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 14px 40px rgba(0, 0, 0, 0.08);
  --shadow-xl: 0 24px 60px rgba(0, 0, 0, 0.12);
 
  /* イージング（上質な減速カーブ） */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
}
/* =========================================================
   リセット・ベース
========================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-base);
  color: var(--color-text);
  line-height: 1.7;
  background: var(--color-bg);
  -webkit-text-size-adjust: 100%;
}

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

a {
  color: inherit;
  text-decoration: none;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

button,
input,
textarea,
select {
  font: inherit;
}

/* =========================================================
   レイアウト
========================================================= */
.l-container {
  width: min(100% - 80px, var(--container));
  margin-inline: auto;
}

.section-block {
  padding: 76px 0 80px;
}

/* =========================================================
   共通コンポーネント
========================================================= */

.fv__title{
  /* 行頭・行末の禁則を厳格に */
  line-break: strict;
  /* 熟語や句単位で改行させる（Chrome/Edge/Safari 17+） */
  word-break: auto-phrase;
  overflow-wrap: break-word;
  /* 半角詰め（カナや記号の余計な空きを取る） */
  font-feature-settings: "palt";
}

/* .c-section-title,
.problem__title,
.problem-card__title,
.risk-card__title,
.feature-card__title,
.cta-banner__lead,
.fv__title {
  text-wrap: balance;
}
 */
.c-section-title-wrap {
  position: relative;
  text-align: center;
  margin-bottom: 40px;
}

.c-section-subtitle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(56px, 9vw, 110px);
	font-family: 'Helvetica Neue', Arial, sans-serif;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #f2f2f2;
  letter-spacing: 0.1em;
  z-index: 1;
  white-space: nowrap;
  margin: 0;
}

.c-section-title {
  font-size: clamp(24px, 4vw, 40px);
  font-weight: 800;
  line-height: 1.6;
  letter-spacing: 0.05em;
  color: var(--color-heading);
  letter-spacing: 0.04em;
  margin-bottom: 40px;
  text-align: center;
  z-index: 2;
  margin-top: 0px;
  position: relative;
}
/* パターンB: ピンクマーカー+赤文字（汎用） */
.c-section-title span,
.problem__title span,
.problem-card__title span,
.risk-card__title span,
.intro .c-section-title span {
  color: var(--color-red);
/*   background: linear-gradient(transparent 62%, var(--color-marker) 62%);
  padding: 0 3px; */
  /* -webkit-box-decoration-break: clone;
  box-decoration-break: clone; */
}
.c-section-title span {
  color: var(--color-red);
}
/* ==============================================
   レディクル風：洗練されたB2Bボタン
============================================== */

/* ボタン本体の設定 */
.btn-more {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  /* max-width: 360px; */
  margin: 40px auto 0px;
  padding: 20px;
  background-color: #fff;
  border: 1px solid #282C32; /* 上品な薄いグレーの枠線 */
  color: #282c32;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  position: relative;
  transition: all 0.3s ease;
}

/* 右端の「薄いピンクの円」をCSSで作る */
.btn-more::before {
  content: "";
  position: absolute;
  right: 20px; /* 右端からの距離 */
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  background-color: #fff0f0; /* レディクル風の極めて薄いピンク */
  border-radius: 50%;
  transition: all 0.3s ease;
}

/* 円の中の「赤い三角矢印」をCSSで作る */
.btn-more::after {
  content: "";
  position: absolute;
  right: 31px; /* 円のど真ん中にくるようにミリ単位で調整 */
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 6px solid #DF022A; /* ブランドカラーの赤 */
  transition: all 0.3s ease;
}

/* ----------------------------------------------
   ホバー（マウスオーバー）時のプレミアムな動き
---------------------------------------------- */
.btn-more:hover {
  border-color: #DF022A; /* 枠線が赤に変化 */
  color: #DF022A; /* 文字も赤に変化 */
  box-shadow: 0 4px 15px rgba(225, 0, 41, 0.05); /* ふんわりと赤い影を落とす */
}

/* ホバーすると、右の円が赤く塗りつぶされる */
.btn-more:hover::before {
  background-color: #DF022A; 
}

/* ホバーすると、中の三角矢印が白く反転する（プロの小技！） */
.btn-more:hover::after {
  border-left-color: #fff; 
}
/* --- ボタン --- */
.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  padding: 14px 28px;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  transition:
    transform .25s var(--ease-out-quart),
    box-shadow .25s var(--ease-out-quart),
    background-color .25s var(--ease-out-quart),
    opacity .25s var(--ease-out-quart);
        /* width: 100%; */
    max-width: 400px;
}

.c-btn:hover {
  transform: translateY(-2px);
  opacity: 1; /* 既存の.9を打ち消し、影で立体感を出す方針に */
}

.c-btn--sm {
  min-height: 42px;
  padding: 10px 16px;
  font-size: 14px;
}

.c-btn--primary {
  color: #fff;
  background: var(--color-red);
}

.c-btn--navy {
  color: #fff;
  background: var(--color-navy);
}
 
.c-btn--white {
  color: var(--color-red);
  background: #fff;
}

.c-btn--tel {
  color: var(--color-navy);
  background: #fff;
  border-color: var(--color-navy);
}

.c-btn--outline {
  color: #222;
  background: transparent;
  border-color: #6d747b;
  border-radius: 999px;
}

.c-btn--large,
.c-btn--wide {
  min-height: 58px;
  min-width: 240px;
}

.c-btn--wide {
  min-width: 250px;
}

.c-btn--cta {
  min-width: 340px;
  min-height: 64px;
  font-size: 20px;
}
.c-btn:active {
  transform: translateY(0);
  transition-duration: .08s;
}
/* --- タグ --- */
.c-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.c-tag {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #727b82;
  background-color: #f7f8f9;
  padding: 6px 12px;
  border: 1px solid #d3d6d8;
  border-radius: 4px;
  white-space: nowrap;
  transition: 0.3s cubic-bezier(0.26, 0.16, 0.1, 1);
}

/* --- アウトラインリンク / More リンク --- */
.c-outline-link {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 15px;
  font-weight: 900;
  color: #282c32;
  text-decoration: none;
  border: 1px solid #282c32;
  padding: 16px 48px;
  border-radius: 4px;
  display: inline-block;
  transition: 0.3s cubic-bezier(0.26, 0.16, 0.1, 1);
}

.c-outline-link:hover {
  background-color: #DF022A;
  border-color: #DF022A;
  color: #fff;
}

.c-link--more {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14px;
  font-weight: 900;
  color: #282c32;
  text-decoration: none;
  border-bottom: 1px solid #282c32;
  padding-bottom: 2px;
  transition: 0.3s cubic-bezier(0.26, 0.16, 0.1, 1);
}

.c-link--more:hover {
  color: #DF022A;
}

.c-link--more__arrow {
  color: #DF022A;
  margin-left: 4px;
}

/* --- セクションフッター / ユーティリティ --- */
.section-footer {
  margin-top: 42px;
  text-align: center;
}

.u-bg-gray {
  background-color: #f8f8f8;
}

.icon-arrow {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--color-text);
  border-right: 2px solid var(--color-text);
  transform: rotate(45deg);
  transition: transform 0.3s, border-color 0.3s;
}

/* =========================================================
   【コンポーネント統合】赤グラデーションのヒーロー背景
   ※ page-hero / partner-detail-hero / works-single-hero
     / works-archive-hero / useful-hero / p-service-doc__hero
     / fv 全てに共通する赤背景を1ルールに集約
========================================================= */
.fv,
.page-hero,
.partner-detail-hero,
.works-single-hero,
.works-archive-hero,
.useful-hero {
  background: linear-gradient(135deg, #DF022A 0%, #B91633 100%);
  color: #fff;
}

/* ヒーロー共通の中央寄せパターン */
.page-hero__inner,
.partner-detail-hero__inner,
.works-single-hero__inner,
.works-archive-hero__inner {
  text-align: center;
}

/* タイトル共通 */
.page-hero__title,
.partner-detail-hero__title,
.works-single-hero__title,
.works-archive-hero__title {
  margin: 0;
  line-height: 1.22;
  font-weight: 800;
  letter-spacing: 0.03em;
}

/* アクション共通 */
.page-hero__actions,
.partner-detail-hero__actions,
.works-single-hero__actions,
.works-archive-hero__actions {
  display: flex;
  justify-content: center;
  margin-top: 34px;
}

/* =========================================================
   【コンポーネント統合】カードの影＋ホバー共通
   ※ works-main-card / works-card / partner-card__link
========================================================= */
.works-main-card,
.works-card,
.partner-card__link {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  transition: 0.3s cubic-bezier(0.26, 0.16, 0.1, 1);
}

.works-main-card:hover,
.works-card:hover,
.partner-card__link:hover {
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.12);
  transform: translateY(-4px);
}

/* ホバーで画像拡大の共通挙動 */
.works-main-card:hover .works-main-card__image img,
.works-card:hover .works-card__image img,
.partner-card__link:hover .partner-card__image img,
.article-row__link:hover .article-row__thumb img,
.articles .article-row:hover .article-row__thumb img {
  transform: scale(1.03);
}

/* ホバーで.c-tagを赤枠に */
.works-main-card:hover .c-tag,
.works-card:hover .c-tag {
  background-color: #fff;
  border-color: #DF022A;
  color: #DF022A;
}

/* =========================================================
   LP ヘッダー
========================================================= */
.lp-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.98);
  border-bottom: 1px solid #eee;
  backdrop-filter: blur(8px);
}

.lp-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-h);
  gap: 20px;
}

.lp-header__logo img {
  width: 110px;
}

.lp-header__actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* =========================================================
   サイトヘッダー（サブページ用）
========================================================= */
.c-drawer {
    display: none;
  }
.site-header {
  background: #fff;
  border-bottom: 1px solid #ddd;
}

.site-header__inner {
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 0;
}

.site-header__logo img {
  width: 150px;
}

.site-header__logo-text {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--color-red);
  display: flex;
  align-items: center;
  gap: 2px;
}

.site-header__logo-text .ko {
  color: var(--color-text);
}

.site-header__nav {
  margin-left: auto;
}

.site-header__nav-list {
  display: flex;
  align-items: center;
  gap: 28px;
}

.site-header__nav-list a {
  font-size: 15px;
  font-weight: 500;
}
.site-header__nav-list a:hover{
	color: var(--color-red);
}
.site-header__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  width: auto;
}
.site-header__pc-wrap {
    display: flex;
    align-items: center;
    gap: 20px; /* ナビとボタンの間の余白 */
  }

.c-hamburger {
    display: none;
  }
  .site-header__tel {
  display: flex;
  flex-direction: column;
  align-items: flex-end; /* 右揃え */
  line-height: 1.2;
  padding-left: 24px; /* ボタンと電話番号の距離 */
  border-left: 1px solid #e5e7eb; /* ボタンの右側に薄い区切り線を入れる */
}

.site-header__tel-num {
  font-size: 20px;
  font-weight: 800;
  color: #282C32;
      display: flex;
    align-items: center;
  text-decoration: none;
}
.site-header__tel-num:hover {
  opacity: 0.7;
}

.site-header__tel-time {
  font-size: 11px;
  color: #666;
  margin-top: 4px;
}
/* =========================================================
   FV（ファーストビュー）
========================================================= */
.fv {
  overflow: hidden;
}

.fv__inner {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  align-items: end;
  gap: 24px;
  min-height: 560px;
  padding-top: 24px;
}

.fv__content {
  color: #fff;
  padding: 40px 0 68px;
}

.fv__title {
  margin: 0;
  font-size: 40px;
  line-height: 1.82;
  font-weight: 800;
}

.fv__highlight {
  display: inline;
  padding: 2px 8px;
  margin: 5px 0px;
  background: #fff;
  color: var(--color-red);
  /* 折返し時も個別にブロックが付く */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  font-weight: 800;
}

.fv__desc {
  margin: 20px 0 0;
  font-size: 17px;
  line-height: 1.6;
  font-weight: 500;
  color: #fff;
}

.fv__badges {
  display: flex;
  gap: 5px;
  margin-top: 32px;
}

.fv__badge {
  display: flex;
  align-items: center;
  position: relative;
  padding: 0 28px;
}

.fv__badge > * {
  flex-shrink: 0;
  white-space: nowrap;
}

.fv__badge::before,
.fv__badge::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 86px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.fv__badge::before {
  left: 0;
  background-image: url('/wp-content/themes/haconavi/assets/images/left.png');
}

.fv__badge::after {
  right: 0;
  background-image: url('/wp-content/themes/haconavi/assets/images/right.png');
}

.fv__badge-label {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
  margin-right: 3px;
  text-align: left;
}

.fv__badge-value {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 80px;
  font-weight: 900;
  line-height: 1;
  color: #fff;
  letter-spacing: -0.02em;
}

.fv__badge-value--text {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 48px;
  margin-left: 8px;
  margin-bottom: 4px;
}

.fv__badge-unit {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  margin-left: 4px;
  align-self: flex-end;
  margin-bottom: 12px;
}

.fv__badge-value--text + .fv__badge-unit {
  margin-bottom: 8px;
}

.fv__actions {
  display: flex;
  gap: 16px;
  margin-top: 32px;
}

.fv__actions .c-btn {
  min-width: 280px;
  min-height: 58px;
  font-size: 17px;
}

.fv__note {
  margin: 12px 0 0;
  font-size: 12px;
  color: rgba(255, 255, 255, .65);
}

.fv__image {
  align-self: end;
  justify-self: end;
  max-width: 600px;
}
.fv__image.u-pc-only {
  flex: 0 0 800px; 
  max-width: 800px;
  align-self: flex-end; 
  /* ③ 赤いグラデーションエリアへの食い込み具合を微調整（必要に応じて変更） */
  margin-top: -180px; 
  margin-right: -80px;
  
  position: relative;
  z-index: 2;
}
.fv__image.u-pc-only img {
  display: block;
  width: 100%;
  height: auto;
}
@media (min-width: 768px) and (max-width: 1200px) {
  
  .fv__image.u-pc-only {
    /* 画像が小さくなりすぎないよう、最低でも450pxはキープしつつ画面の50%を使う設定 */
    flex: 0 0 clamp(450px, 50vw, 650px); 
    max-width: clamp(450px, 50vw, 650px);
    
    /* ★重要：マイナスの数値で、赤いグラデーションエリアにしっかり引っ張り上げる！ */
    margin-top: -140px; 
    
    /* ★重要：マイナスの数値で、右端に少しだけはみ出させる（プラスだと内側に潰れます） */
    margin-right: -120px; 
  }

  /* もしこのサイズでバッジも窮屈そうなら、バッジを少し小さくする保護設定 */
  .fv__badges {
    transform: scale(0.9);
    transform-origin: left center; /* 左側を基準に縮小 */
  }
}

.fv__image img {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: -1px;
}

/* =========================================================
   Intro セクション（はこナビとは）
========================================================= */
.intro {
  position: relative;
  padding: 80px 0px;
  background: #fff;
  overflow: hidden;
}
.intro__inner {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
}
.intro__head {
  position: relative;
  text-align: center;
}
.intro__head-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 110px;
  font-weight: 900;
  color: #f1f5f9; /* 背景の薄いグレーの透かし文字 */
  z-index: -1;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.intro__head-title {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 45px;
  font-weight: 800;
}
.intro__head-title img {
  height: 86px;
  width: auto;
}

/* ==============================================
   背景装飾のふわふわ浮遊アニメーション定義（究極ランダム版）
============================================== */
/* 動きA：右へ左へ、大きくふらつく軌道 */
@keyframes floating-a {
  0%   { transform: translate(0px, 0px) rotate(0deg); }
  25%  { transform: translate(40px, -30px) rotate(15deg); }
  50%  { transform: translate(70px, 10px) rotate(35deg); }
  75%  { transform: translate(20px, 50px) rotate(10deg); }
  100% { transform: translate(0px, 0px) rotate(0deg); }
}

/* 動きB：左斜め上へ深く沈み込み、右下へ抜ける軌道 */
@keyframes floating-b {
  0%   { transform: translate(0px, 0px) rotate(0deg); }
  20%  { transform: translate(-50px, -20px) rotate(-20deg); }
  50%  { transform: translate(-20px, -60px) rotate(-45deg); }
  80%  { transform: translate(30px, -10px) rotate(-10deg); }
  100% { transform: translate(0px, 0px) rotate(0deg); }
}

/* 動きC：その場でぐるりと円を描くような軌道 */
@keyframes floating-c {
  0%   { transform: translate(0px, 0px) rotate(0deg); }
  30%  { transform: translate(30px, 40px) rotate(20deg); }
  60%  { transform: translate(-30px, 50px) rotate(-15deg); }
  85%  { transform: translate(-40px, 0px) rotate(-30deg); }
  100% { transform: translate(0px, 0px) rotate(0deg); }
}

/* --- 装飾の共通設定 --- */
.intro__deco {
  position: absolute;
  opacity: 1;
  pointer-events: none;
  will-change: transform;
}

/* --- それぞれのサイズと配置 ＋ アニメーションの割り振り --- */
/* ★ A・B・Cの動きを散りばめ、秒数も素数や不規則な数字にして完全に同期をズラす */
.intro__deco--1 { width: 140px; height: 140px; top: 10%; left: -2%;   animation: floating-a 13s ease-in-out infinite 0.0s; }
.intro__deco--2 { width: 80px;  height: 80px;  top: 5%;  left: 42%;   animation: floating-b 11s ease-in-out infinite 1.2s; }
.intro__deco--3 { width: 160px; height: 160px; top: 15%; right: -3%;  animation: floating-c 14s ease-in-out infinite 2.5s; }
.intro__deco--4 { width: 120px; height: 120px; bottom: 25%; left: 1%; animation: floating-b 15s ease-in-out infinite 0.8s; }
.intro__deco--5 { width: 150px; height: 150px; bottom: -5%; left: 55%; animation: floating-a 12s ease-in-out infinite 3.5s; }
.intro__deco--6 { width: 180px; height: 180px; bottom: 10%; right: -4%; animation: floating-c 17s ease-in-out infinite 1.0s; }
.intro__deco--7 { width: 90px;  height: 90px;  top: 45%; left: 15%;   animation: floating-a 11s ease-in-out infinite 0.5s; }
.intro__deco--8 { width: 110px; height: 110px; top: 35%; right: 12%;  animation: floating-c 16s ease-in-out infinite 4.1s; }
.intro__deco--9 { width: 70px;  height: 70px;  bottom: 15%; left: 32%; animation: floating-b 13s ease-in-out infinite 2.8s; }
/* --- パターンA：実線の四角形 --- */
.intro__deco--solid {
  border: 4px solid #fce0e0;
  border-radius: 4px;
}

/* --- パターンB：ストライプ柄の四角枠 --- */
.intro__deco--stripe {
  padding: 10px;
  background: repeating-linear-gradient(
    -45deg,
    #fce0e0,
    #fce0e0 4px,
    transparent 4px,
    transparent 10px
  );
  border-radius: 4px;
}
.intro__deco--stripe::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: #fff; 
  border-radius: 2px;
}
/* --- 左右のカラム構成 --- */
.intro__body {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 50px;
}
.intro__left {
  flex: 1;
  max-width: 540px;
}
.intro__right {
  flex: 1;
}
.intro__right img {
  width: 100%;
  height: auto;
  display: block;
}

/* --- 左側：メインコピー --- */
.intro__copy {
  text-align: left;
  font-size: 40px;
  font-weight: 800;
  margin-top: 10px;
  margin-bottom: 40px;
      color: #282C32;
}
.intro__copy-red {
  color: var(--color-red, #DF022A);
}

/* --- 左側：フロー画像 --- */
.intro__flow {
  margin-bottom: 30px;
}
.intro__flow img {
  width: 100%;
  height: auto;
  display: block;
}

/* --- 左側：サポート枠（チェックマーク部分） --- */
.intro__point {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 2px solid var(--color-red, #DF022A);
  border-radius: 8px;
  padding: 16px;
  background: #fff;
}
.intro__point-icon {
  width: 28px;
  height: 28px;
  color: var(--color-red, #DF022A);
  flex-shrink: 0;
}
.intro__point p {
  margin: 0;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
}
/* ==============================================
   スマホ表示時の装飾調整（CSSの末尾などに追記してください）
============================================== */
@media (max-width: 767px) {
  .intro__deco {
    /* スマホでは装飾がテキストの邪魔になりやすいので、少し小さく・薄くします */
    scale: 0.6;
    opacity: 0.3;
  }
}
@media (max-width: 767px) {
  .intro__inner,
  .intro__inner .c-section-title{
    text-align:left;
  }
}

@media (max-width: 767px) {
  .intro__head-bg {
    font-size: 50px;
  }
  .intro__head-title {
    font-size: 22px;
  }
  .intro__head-title img {
    height: 28px;
  }
  
  /* スマホでは縦並びに変更 */
  .intro__body {
    flex-direction: column;
    gap: 40px;
  }
  
  .intro__copy {
    font-size: 20px;
  }
  .intro__copy-red {
    font-size: 24px;
  }
  .intro__point {
    padding: 12px 16px;
  }
  .intro__point p {
    font-size: 14px;
  }
}

.intro__desc {
  max-width: 860px;
  margin: 0 auto 60px;
  font-size: 16px;
  line-height: 2.2;
  color: #282C32;
  text-align: left;
  display: inline-block;
}

.intro__desc p { margin: 0; }
.intro__desc p + p { margin-top: 4px; }

.intro__steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  align-items: start;
}

.intro__steps .step-card:nth-child(2) {
  margin-top: 40px;
}

.step-card {
  position: relative;
  padding: 40px 22px 28px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  text-align: center;
}

.step-card__num {
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  font-weight: 800;
  color: #fff;
  background: #222;
  border-radius: 50%;
}

.step-card__image {
  margin: 8px auto 0;
  max-width: 220px;
}

.step-card__image img {
  width: 100%;
  height: auto;
}
/* .step-card__title,
.problem-card__title,
.risk-card__title,
.feature-card__title,
.works-main-card__title,
.works-card__title,
.flow-item__title,
.faq-item-static__q-text {
  color: var(--color-heading);
} */

.step-card__title {
  margin: 20px 0 10px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.5;
}

.step-card__text {
  margin: 0;
  color: #282C32;
  font-size: 14px;
  text-align: left;
}

/* =========================================================
   Problem セクション（お悩み）
========================================================= */
.problem {
  background-color: #f8f8f8;
  padding: 80px 0;
  position: relative;
}

.problem::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  
  /* ① border-topに変更し、色をグレー背景色（例:#f8f8f8）と同じにする */
  border-top: 40px solid #f8f8f8; /* ※実際のグレー背景のカラーコードにしてください */
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: none; /* 念のため不要な線を消す */
  
  /* ② 矢印の高さ（40px）と同じ分だけ、下にマイナスで突き出させる */
  bottom: -40px; 
  z-index: 2;
}

.problem__title {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 32px;
  font-weight: 900;
  color: #282c32;
  text-align: center;
  margin-bottom: 20px;
  letter-spacing: 0.05em;
  font-feature-settings: "palt";
  margin-top: 0px;
}

.problem__title span {
  color: #DF022A;
}

.problem__lead {
  text-align: center;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  line-height: 1.8;
  color: #374149;
  margin-bottom: 60px;
}

.problem__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  max-width: 1000px;
  margin: 0 auto;
}

/* ==============================================
   吹き出し風の赤枠カード
============================================== */
.problem-card {
  background-color: #fff;
  border-radius: 8px;
  padding: 32px; 
  position: relative;
  border: 2px solid #DF022A; /* ★ 赤枠を追加 */
  overflow: visible !important; /* ★ しっぽが途中で切れないようにする */
  z-index: 1;
}

/* ★ 古い影のしっぽは不要なので消去 */
.problem-card::before {
  display: none; 
}

/* ★ 赤枠のしっぽを新設 */
.problem-card::after {
  content: "";
  display: block; /* （元のCSSでnoneになっていたのを解除） */
  position: absolute;
  bottom: -12px; /* はみ出し具合（枠線の太さに合わせて微調整） */
  left: 40px;
  width: 20px;
  height: 20px;
  background-color: #fff; /* 背景を白にして、カード本体の赤い下線を「上書きして隠す」 */
  border-bottom: 2px solid #DF022A; /* 右下だけ赤線 */
  border-right: 2px solid #DF022A; /* 右下だけ赤線 */
  transform: rotate(45deg); /* 正方形を45度回転させて、下向きの三角を作る */
  z-index: 2;
}

.problem-card__title {
  margin-top: 0px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 24px; 
  font-weight: 900;
  line-height: 1.6; 
  margin-bottom: 16px;
  color: #282c32;
  font-feature-settings: "palt";
}

.problem-card__title span {
  color: #DF022A;
}

.problem-card__text {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  line-height: 1.8;
  margin: 0;
}

/* =========================================================
   Risk セクション
========================================================= */
.risk {
  background-color: #fff;
  padding: 100px 0;
}

.risk .c-section-title {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 32px;
  font-weight: 900;
  text-align: center;
  color: #282c32;
  margin-bottom: 60px;
  line-height: 1.5;
  letter-spacing: 0.05em;
  font-feature-settings: "palt";
  margin-top: 0px;
}

.risk__title-large {
  color: var(--color-red);
  font-size: 130%;
  padding: 0 4px;
/*   background: linear-gradient(transparent 62%, var(--color-marker) 62%); */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.risk__content {
  display: flex;
  gap: 60px;
  align-items: center;
  margin-bottom: 80px;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

.risk__image {
  flex: 0 0 45%;
}

/* .risk__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
} */

.risk__desc {
  flex: 1;
}

.risk__desc p {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 2.2;
  margin: 0;
  color: #282C32;
}

.risk__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  max-width: 1000px;
  margin: 0 auto;
}

.risk-card {
  background-color: #fcf8f7;
/*   border: 1px solid #d3d6d8; */
  border-radius: 8px;
  padding: 35px 30px;
  position: relative;
  transition: 0.3s cubic-bezier(0.26, 0.16, 0.1, 1);
}

/* .risk-card::before {
  content: '';
  position: absolute;
  top: 35px;
  bottom: 35px;
  left: -1px;
  width: 4px;
  background-color: #DF022A;
  border-radius: 0 4px 4px 0;
} */

.risk-card__title {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 18px;
  font-weight: 900;
  margin-bottom: 16px;
  color: #282c32;
  line-height: 1.5;
  font-feature-settings: "palt";
}

.risk-card__title span {
  color: #DF022A;
}

.risk-card__text {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.8;
  color: #374149;
  margin: 0;
}

/* =========================================================
   Solution セクション
========================================================= */
.solution {
  padding: 88px 0;
  background: #fff;
}

.solution__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 40px;
  align-items: start;
}

.solution__image {
  border-radius: 16px;
  overflow: hidden;
  background: #ddd;
  min-height: 280px;
}

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

.solution__lead {
  grid-column: 2 / 3;
}

.solution__lead p {
  margin: 0;
  font-size: 15px;
  color: var(--color-subtext);
}

.solution__points {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px 30px;
}

.solution-point h3 {
  margin: 0 0 8px;
  color: var(--color-red);
  font-size: 19px;
  line-height: 1.5;
  font-weight: 800;
}

.solution-point p {
  margin: 0;
  color: var(--color-subtext);
  font-size: 14px;
}

/* =========================================================
   Feature セクション
========================================================= */
.feature {
  background-color: #fcf8f7;
  padding: 80px 0;
}

.feature__list {
  display: flex;
  flex-direction: column;
  gap: 60px;
}

.feature-card {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 40px;
  align-items: center;
}

.feature-card:nth-child(even) {
  grid-template-columns: 0.9fr 1.1fr;
}

.feature-card:nth-child(even) .feature-card__content {
  grid-column: 2;
  grid-row: 1;
}

.feature-card:nth-child(even) .feature-card__image {
  grid-column: 1;
  grid-row: 1;
}

.feature-card__title {
      color: #282C32;
  font-size: 28px; /* ★24pxから28pxにアップ（イラストとのバランスが取れます） */
  font-weight: 900; /* ★700から900にすると、より力強く頼もしい印象になります（フォントが対応していれば） */
  line-height: 1.4; /* ★文字が大きくなった分、行間は1.5から少し詰めた方が引き締まります */
  margin: 0 0 20px; /* ★見出しが大きくなった分、下の本文との余白も16pxから少し広げて呼吸させます */
  color: var(--color-text);
  letter-spacing: 0.05em; /* ★文字同士の隙間をほんの少し開けて品を出す */
  font-feature-settings: "palt";
}

.feature-card__title span {
  color: var(--color-red);
  background: none;
  padding: 0;
}

.feature-card__text {
  font-size: 15px;
  line-height: 1.8;
  color: var(--color-subtext);
  margin: 0;
}

.feature-card__image {
  background-color: #fff;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.feature-card__image img {
  max-width: 100%;
  height: auto;
	border-radius: 12px;
}

/* =========================================================
   Reason セクション
========================================================= */
.reason {
  padding: 88px 0 80px;
  background: #faf7f6;
}

.reason__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}

.reason-card {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: 28px;
  padding: 36px 34px;
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
}

.reason-card--highlight {
  background: linear-gradient(135deg, #fff 0%, #fff8f9 100%);
}

.reason-card__title {
  margin: 0 0 12px;
  font-size: 32px;
  line-height: 1.45;
  font-weight: 800;
}

.reason-card__title span {
  color: var(--color-red);
}

.reason-card__num {
  display: inline-block;
  font-size: 120px;
  line-height: .9;
  font-weight: 800;
  color: var(--color-red);
}

.reason-card__text {
  margin: 0;
  color: var(--color-subtext);
  font-size: 15px;
}

.reason-card__image {
  justify-self: center;
  max-width: 340px;
}

/* =========================================================
   WORKS セクション（認定パートナーの施工事例）
========================================================= */
.works {
  padding: 80px 0 0px;
  background-color: #fff;
}

.works .c-section-title-wrap {
  margin-bottom: 80px;
}
/* 
.works .c-section-title {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 32px;
  font-weight: 900;
  text-align: center;
  color: #282c32;
  margin-bottom: 0;
  line-height: 1.5;
  letter-spacing: 0.05em;
  font-feature-settings: "palt";
  position: relative;
  z-index: 2;
}
 */
.works .c-section-subtitle {
  color: rgba(55, 65, 73, 0.04);
}

/* --- 大カード --- */
.works__featured {
  margin-bottom: 60px;
}

/* 親要素（枠と背景色のみ担当） */
.works-main-card {
  background-color: #fff;
  border-radius: 12px;
  overflow: hidden;
}

/* ★新設：リンク要素（ここで横並びを担当） */
.works-main-card__link {
  display: flex;
  gap: 60px;
  align-items: center;
  color: inherit;
  text-decoration: none;
}

.works-main-card__image {
  flex: 0 0 55%;
  overflow: hidden;
  aspect-ratio: 16 / 10;
}

.works-main-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s ease;
}

.works-main-card__content {
  flex: 1;
  padding: 40px;
}

.works-main-card__company {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #374149;
  margin: 0 0 12px;
  line-height: 1.6;
}

.works-main-card__title {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 32px;
  font-weight: 900;
  color: #282c32;
  margin: 0 0 20px;
  line-height: 1.5;
  font-feature-settings: "palt";
}

.works-main-card__tags {
  margin-bottom: 24px;
}

.works-main-card__text {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #374149;
  margin: 0 0 30px;
  line-height: 1.6;
}

/* --- 小カードグリッド --- */
.works__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 60px 30px;
}

.works-card {
  border-radius: 12px;
  overflow: hidden;
  background-color: #fff;
}

.works-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.works-card__image {
  overflow: hidden;
  aspect-ratio: 16 / 10;
}

.works-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s ease;
}

.works-card__body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.works-card__text {
      color: #282C32;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
}

.works-card__company {
  margin: 0 0 8px;
}

.works-card__title {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 18px;
  font-weight: 900;
  color: #282c32;
  margin: 0 0 16px;
  line-height: 1.6;
  font-feature-settings: "palt";
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.works-card__tags {
  margin-bottom: 16px;
}

.works-card__partner {
  margin: 14px 0 0;
}

.works__footer {
  margin-top: 60px;
  padding-bottom: 100px;
  text-align: center;
}

/* =========================================================
   Flow セクション
========================================================= */
.flow {
      padding: 88px 20px;
      background-color: #FCF8F7;
    }
.flow .c-section-subtitle{
	color:#fff;
}
    .flow__inner {
      width: min(1120px, 100%);
      margin: 0 auto;
    }

    .flow__list {
      display: grid;
      gap: 18px;
    }

    .flow-item {
  position: relative;
  display: grid;
  grid-template-columns: 88px 1fr 280px;
  gap: 28px;
  align-items: center;
  padding: 28px 30px;
  background: #fff;
  border-radius: 20px;
  box-shadow: none;
}

    .flow-item:not(:last-child)::after {
      content: "";
      position: absolute;
      left: 74px;
      bottom: -18px;
      width: 2px;
      height: 18px;
      background: var(--color-step);
      opacity: 0.7;
    }

    .flow-item__num {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

    .flow-item__num span {
  margin-bottom: 3px; /* 8px → 3px */
  font-size: 12px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--color-red);
}

    .flow-item__num strong {
  display: block;
  font-size: 44px;
  line-height: 0.9; /* 1 → 0.9 */
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--color-red);
  opacity: 0.32;
}

    .flow-item__title {
      margin: 0 0 12px;
      line-height: 1.45;
      font-weight: 700;
          color: #282C32;
    }

    .flow-item__label {
      display: block;
      margin-bottom: 8px;
      font-size: 30px;
      line-height: 1.3;
      font-weight: 800;
    }

    .flow-item__catch {
      display: block;
      font-size: 24px;
      line-height: 1.5;
      font-weight: 800;
    }

    .flow-item__catch em {
      color: var(--color-red);
      font-style: normal;
    }

    .flow-item__text {
      margin: 0;
      font-size: 16px;
      line-height: 1.9;
      color: var(--color-subtext);
    }

    .flow-item__note {
      display: inline-block;
      margin-top: 10px;
      font-size: 12px;
      line-height: 1.7;
      color: #666;
    }

    .flow-item__image {
      display: flex;
      align-items: center;
      justify-self: end;
      aspect-ratio: 4 / 3;
      padding: 16px;
      background-color: var(--color-bg);
      border-radius: 14px;
      overflow: hidden;
    }

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

    @media (max-width: 900px) {
      .flow-item {
        grid-template-columns: 72px 1fr;
      }

      .flow-item__image {
        grid-column: 2;
        width: min(320px, 100%);
      }
    }

    @media (max-width: 767px) {
      .flow {
        padding: 56px 16px;
      }

      .flow__list {
        gap: 16px;
      }

      .flow-item {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 24px 20px;
        border-radius: 18px;
      }

      .flow-item:not(:last-child)::after {
        left: 50%;
        bottom: -16px;
        height: 16px;
        transform: translateX(-50%);
      }

      .flow-item__num {
        align-items: center;
      }

      .flow-item__num span {
        margin-bottom: 6px;
      }

      .flow-item__num strong {
        font-size: 42px;
      }

      .flow-item__body {
        text-align: center;
      }

      .flow-item__label {
        font-size: 26px;
      }

      .flow-item__catch {
        font-size: 19px;
      }

      .flow-item__text {
        font-size: 14px;
        line-height: 1.8;
        text-align: left;
      }

      .flow-item__image {
        grid-column: auto;
        width: 100%;
        max-width: 320px;
        margin: 0 auto;
      }

      .flow-item__text br {
        display: none;
      }
    }

/* =========================================================
   CTA 群
========================================================= */

/* --- 無料相談 CTA（画像バナー） --- */
.cta-contact-image {
  padding: 60px 0 80px;
  background-color: #fff;
}

.cta-contact-image__link {
  display: block;
  margin: 0 auto;
  text-align: center;
  max-width: 960px;
  transition: 0.3s cubic-bezier(0.26, 0.16, 0.1, 1);
}

.cta-contact-image__link img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

.cta-contact-image__link:hover {
  transform: translateY(-4px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
  opacity: 1;
}

/* --- CTAバナー --- */
.cta-banner {
  padding: 0 0 82px;
  background: #faf7f6;
}

.cta-banner__body {
  padding: 34px 28px;
  background: var(--color-red);
  color: #fff;
  border-radius: 16px;
  text-align: center;
}

.cta-banner__lead {
  margin: 0 0 20px;
  font-size: 24px;
  line-height: 1.6;
  font-weight: 700;
}

.cta-banner__text {
  margin: 0 0 40px;
  font-size: 16px;
  line-height: 1.8;
  font-weight: 500;
}

.cta-banner__actions {
  display: flex;
  justify-content: center;
  gap: 16px;
}

.cta-banner__actions .c-btn {
  width: 380px;
  max-width: 100%;
}

/* --- CTAミニ --- */
.cta-mini {
  padding: 54px 0;
  background: #fff;
}

.cta-mini__body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 28px;
  border: 2px solid #f0afb8;
  border-radius: 16px;
  background: linear-gradient(135deg, #fff 0%, #fff7f8 100%);
}

.cta-mini__text {
  margin: 0;
  color: var(--color-red);
  font-size: 28px;
  line-height: 1.5;
  font-weight: 800;
}

/* =========================================================
   FAQ セクション
========================================================= */
.faq {
  padding: 0 0 80px;
  background-color: #fff;
}

.faq__inner {
  background-color: #fcf8f7;
  border-radius: 24px;
  padding: 80px 80px 80px;
  margin: 0 auto;
}

.c-section-subtitle--faq {
  color: rgba(40, 44, 50, 0.04);
  font-size: 100px;
  font-family: "Helvetica Neue", Arial, sans-serif;
}

.faq__list {
  display: flex;
  flex-direction: column;
}

.faq-item-static {
  padding-bottom: 40px;
  margin-bottom: 40px;
  border-bottom: 2px dotted #d3d6d8;
}

.faq-item-static:last-child {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

.faq-item-static__q {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin: 0 0 24px 0;
}

.faq-item-static__num {
  color: #DF022A;
  font-size: 36px;
  font-weight: 900;
  font-family: "Helvetica Neue", Arial, sans-serif;
  line-height: 1.2;
  flex-shrink: 0;
}

.faq-item-static__q-text {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.6;
  color: #282c32;
  margin-top: 4px;
  font-feature-settings: "palt";
}

.faq-item-static__a {
  background-color: #fff;
  padding: 32px 40px;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
}

.faq-item-static__a p {
  margin: 0;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.8;
}

/* =========================================================
   ボトム CTA（Ready Crew 仕様）
========================================================= */
.bottom-cta {
  background-color: #DF022A;
  position: relative;
}

.bottom-cta__inner {
  display: grid;
  grid-template-columns: 45% 1fr;
  align-items: center;
  padding: 0 8% 0 0;
}

.bottom-cta__image {
  align-self: flex-end;
  margin-top: -60px;
}

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

.bottom-cta__content {
  padding: 60px 0 50px;
}

.bottom-cta__title {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 48px;
  font-weight: 900;
  color: #fff;
  line-height: 1.3;
  margin: 0 0 16px;
  font-feature-settings: "palt";
  letter-spacing: 0.02em;
}

.bottom-cta__sub {
  display: block;
  font-size: 24px;
  margin-bottom: 8px;
}

.bottom-cta__text {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  line-height: 1.8;
  margin: 0 0 30px;
}

.bottom-cta__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.bottom-cta__btn {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  font-weight: 900;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 64px;
  border-radius: 4px;
  text-decoration: none;
  transition: 0.3s cubic-bezier(0.26, 0.16, 0.1, 1);
}

.bottom-cta__btn--dark {
  background-color: #374149;
  color: #fff;
}

.bottom-cta__btn--dark:hover {
  background-color: #282c32;
}

.bottom-cta__btn--white {
  background-color: #fff;
  color: #DF022A;
}

.bottom-cta__btn--white:hover {
  opacity: 0.9;
}

.bottom-cta__tel-box {
  border: 2px solid #fff;
  border-radius: 4px;
  margin-top: 12px;
}

.bottom-cta__tel-link {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 64px;
  text-decoration: none;
  color: #fff;
  transition: opacity 0.3s;
}

.bottom-cta__tel-link:hover {
  opacity: 0.8;
}

.bottom-cta__tel-num {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 28px;
  font-weight: 700;
  margin: 0 16px 0 10px;
  padding-right: 16px;
  border-right: 2px solid rgba(255, 255, 255, 0.3);
  line-height: 1;
}

.bottom-cta__tel-time {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 13px;
  font-weight: 700;
}

.bottom-cta__sub-link {
  margin-top: 16px;
}

.bottom-cta__sub-link a {
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  text-decoration: underline;
}

.bottom-cta__sub-link a:hover {
  text-decoration: none;
}

/* =========================================================
   お問い合わせフォーム (Contact Form)
========================================================= */
.contact-page {
  padding-top: 0px;
  padding-bottom: 80px;
  background-color: var(--color-bg);
}

.contact-lead {
  text-align: center;
  margin-bottom: 50px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--color-subtext);
}

.c-form-wrapper {
  background: var(--color-white);
  padding: 60px 80px;
  border-radius: var(--radius-md);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
}

.c-form__row {
  display: flex;
  margin: 0;
  padding: 30px 0;
  border-bottom: 1px solid var(--color-border);
}

.c-form__row:first-child {
  padding-top: 0;
}

.c-form__label {
  width: 240px;
  font-weight: 700;
  font-size: 16px;
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: 12px;
}

.c-form__required {
  background: var(--color-red);
  color: var(--color-white);
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 4px;
  font-weight: 700;
  line-height: 1;
}

.c-form__input {
  flex: 1;
  margin: 0;
}

.c-form__input input[type="text"],
.c-form__input input[type="email"],
.c-form__input input[type="tel"],
.c-form__input textarea {
  width: 100%;
  padding: 16px;
  border: 1px solid #dcdcdc;
  border-radius: var(--radius-sm);
  background: #fafafa;
  font-size: 16px;
  color: var(--color-text);
  font-family: inherit;
  transition: border-color var(--transition), background var(--transition);
}

.c-form__input input:focus,
.c-form__input textarea:focus {
  outline: none;
  border-color: var(--color-navy);
  background: var(--color-white);
}

.c-form__input textarea {
  resize: vertical;
}

.c-form__input input::placeholder,
.c-form__input textarea::placeholder {
  color: #bbbbbb;
}

.c-form__privacy {
  text-align: center;
  margin: 50px 0 40px;
  font-size: 16px;
  font-weight: 700;
}

.c-form__privacy label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.c-form__privacy input[type="checkbox"] {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.c-form__privacy a {
  color: var(--color-red);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.c-form__privacy a:hover {
  text-decoration: none;
}

.c-form__submit {
  text-align: center;
}

.c-form__name-inputs {
  display: flex;
  gap: 10px;
}

/* --- フォームのバリエーション（DL版 / サービス資料版） --- */
.c-form-wrapper--dl {
  padding: 30px;
  box-shadow: none;
  border-radius: 0;
}

.c-form-wrapper--dl .c-form__row,
.c-form-wrapper--service-doc .c-form__row {
  border: none;
}

.c-form-wrapper--dl .c-form__row {
  flex-direction: column;
  gap: 10px;
  padding: 16px 0;
}

.c-form-wrapper--dl .c-form__row:first-child {
  padding-top: 0;
}

.c-form-wrapper--service-doc .c-form__row {
  display: block;
  margin-bottom: 24px;
  padding: 0;
}

.c-form-wrapper--dl .c-form__label,
.c-form-wrapper--service-doc .c-form__label {
  width: 100%;
  font-size: 14px;
}

.c-form-wrapper--service-doc .c-form__label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  margin-bottom: 8px;
}

.c-form-wrapper--dl .c-form__input input {
  padding: 12px 14px;
  font-size: 15px;
}

.c-form-wrapper--service-doc .c-form__input input {
  padding: 14px;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  background: #fff;
  width: 100%;
}

.c-form-wrapper--service-doc .c-form__required {
  background: #ff8b94;
  padding: 2px 8px;
  font-size: 11px;
  border-radius: 2px;
}

.c-form-wrapper--dl .c-form__privacy {
  margin: 20px 0 24px;
  font-size: 13px;
}

.c-form-wrapper--dl .c-btn {
  width: 100%;
  font-size: 16px;
  padding: 18px;
}

/* =========================================================
   ページヒーロー（PC時サイズ・余白）
   ※ 赤背景・中央寄せ・タイトル共通スタイルは上部の統合ルール参照
========================================================= */
.page-hero {
  background-color: var(--color-red, #DF022A);
  color: #fff;
  margin-bottom: 60px; /* 下部コンテンツとの余白 */
}

.page-hero__inner {
  padding: 60px 0; /* ★ 110px から 60px にスッキリさせました */
  text-align: center;
}

.page-hero__title {
  font-size: 42px; /* ★ 72px から理想の 32px に変更！ */
  font-weight: 800;
  line-height: 1.4;
  margin: 0 0 20px;

}

.page-hero__text {
  width: min(100%, 800px);
  margin: 0 auto;
  font-size: 15px; /* ★ 資料ページと同じサイズに統一 */
  line-height: 1.8;
  font-weight: 400;
}

.page-hero__actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 24px;
}
.page-hero__actions .c-btn{
  width: 100%;
}
/* =========================================================
   パートナー一覧 (Partner List)
========================================================= */
.partner-list {
  padding: 20px 0 80px;
  background: var(--color-bg);
}

.partner-list__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px 32px;
}

.partner-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
}

.partner-card__image {
  overflow: hidden;
  aspect-ratio: 380 / 280;
  background: #eee;
}

.partner-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}

.partner-card__body {
  padding: 20px 24px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
@media (max-width: 767px) {
  .partner-card__body {
  padding: 20px 16px 24px;
}
}
.partner-card__name {
  margin: 0;
  font-size: 20px;
  line-height: 1.4;
  font-weight: 700;
      color: #282C32;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ★追加：キャッチコピーの行間と余白を美しく整える */
.partner-card__catch {
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-subtext, #374149);
  margin: 12px 0 0; /* 名前との間に余白を設ける */
}

.partner-card__position {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.6;
  font-weight: 500;
  color: var(--color-subtext);
}

.partner-card__more {
  margin-top: auto; /* カード内のコンテンツが少なくても一番下に固定される */
  padding-top: 24px; /* 上のキャッチコピーとしっかり距離を取る */
}

.c-link--more {
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  font-weight: 700;
      color: #282C32;
  transition: color 0.3s ease;
}

/* CSSで作るシャープな赤い矢印（＞） */
.c-link--more::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-top: 2px solid var(--color-red, #DF022A); /* ブランドカラーの赤 */
  border-right: 2px solid var(--color-red, #DF022A);
  transform: rotate(45deg);
  margin-left: 8px; /* 文字との隙間 */
  margin-top: -2px; /* 矢印を文字の縦中央にピタッと合わせる微調整 */
  transition: transform 0.3s ease;
}

/* ★ホバー（マウスオーバー）時の洗練されたアニメーション */
.partner-card__link:hover .c-link--more {
  color: var(--color-red, #DF022A); /* 文字色がスッと赤に変わる */
}

/* 矢印だけが右斜め上にスッと動く（プロの小技） */
.partner-card__link:hover .c-link--more::after {
  transform: rotate(45deg) translate(2px, -2px);
}

/* =========================================================
   パートナー詳細 (Partner Detail)
========================================================= */
.partner-detail-page {
  background: #efefef;
}

.partner-detail-hero {
  border-bottom: 2px solid #2b7cff;
}

.partner-detail-hero__inner {
  padding: 96px 0 82px;
}

.partner-detail-hero__title {
  font-size: 58px;
  line-height: 1.25;
}

.partner-detail-hero__text {
  margin: 22px auto 0;
  max-width: 700px;
  font-size: 16px;
  line-height: 1.9;
  font-weight: 500;
}

.partner-detail-hero__actions {
  gap: 24px;
  margin-top: 52px;
}

/* --- パートナープロフィール --- */
.partner-profile {
  padding-top: 80px;
  padding-bottom: 60px;
  background-color: var(--color-white);
}

.partner-profile__grid {
  display: grid;
  grid-template-columns: 1fr 460px;
  gap: 64px;
  align-items: center;
}

.partner-profile__name {
  margin: 0;
  color: var(--color-text);
  font-size: 40px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.partner-profile__kana {
  margin: 8px 0 0;
  color: var(--color-subtext);
  font-size: 15px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0.1em;
}

.partner-profile__area {
  margin: 32px 0 0;
  color: var(--color-text);
  font-size: 16px;
  line-height: 1.5;
  font-weight: 700;
}

.partner-profile__catch {
  margin: 24px 0 0;
  color: var(--color-text);
  font-size: 24px;
  line-height: 1.5;
  font-weight: 800;
  letter-spacing: 0.03em;
}

.partner-profile__lead {
  margin-top: 20px;
}

.partner-profile__lead p {
  margin: 0;
  color: var(--color-subtext);
  font-size: 15px;
  line-height: 1.8;
}

.partner-profile__lead p + p {
  margin-top: 12px;
}

.partner-profile__image {
  background: var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.partner-profile__image img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
}

.partner-detail-works,
.partner-detail-movie {
  padding-top: 80px;
  padding-bottom: 80px;
}

.partner-detail-movie {
  background-color: var(--color-bg);
}

.partner-detail-works .c-section-title,
.partner-detail-movie .c-section-title {
  margin-bottom: 48px;
}

/* --- パートナー詳細 別レイアウト (p-partner-profile) --- */
.p-partner-profile__grid {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 60px;
  align-items: start;
}

.p-partner-profile__kana {
  font-size: 14px;
  font-weight: 700;
  margin: 0;
}

.p-partner-profile__name {
  font-size: 40px;
  font-weight: bold;
  margin: 0;
}

.p-partner-profile__area {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 16px;
}

.p-partner-profile__catch {
  font-size: 20px;
  font-weight: 900;
  line-height: 1.4;
  margin-bottom: 24px;
  color: var(--RC-DARK-GRAY);
}

.p-partner-profile__desc {
  font-size: 16px;
  line-height: 2;
  color: var(--RC-DARK-GRAY);
}

.p-partner-profile__image img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* =========================================================
   記事一覧 (Articles)
========================================================= */
.articles {
  padding-top: 80px;
  padding-bottom: 80px;
  background-color: var(--color-white);
}
.p-partner-articles{
  padding-bottom: 0px;
}
.other-partners{
  padding-top:0px;
}
.articles.section-block {
  padding: 80px 0 0;
}

.articles .c-section-title {
  margin-bottom: 48px;
}

.articles .article-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.04);
}

.articles .article-row {
  padding: 0;
  margin: 0;
  border-bottom: 1px solid #ebebeb;
  background: #fff;
  transition: background .25s ease;
}

.articles .article-row:last-child {
  border-bottom: none;
}

.articles .article-row:hover {
  background: #fafafa;
}

.articles .article-row__link {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 36px;
  align-items: start;
  padding: 28px 32px;
  color: inherit;
  text-decoration: none;
}

.articles .article-row__thumb {
  overflow: hidden;
  border-radius: 8px;
  aspect-ratio: 300 / 190;
  background: #eee;
}

.articles .article-row__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}

.articles .article-row__content {
  display: flex;
  flex-direction: column;
  padding: 2px 0;
  min-height: 100%;
}

.articles .article-row__title {
  margin: 0;
  font-size: 19px;
  line-height: 1.55;
  font-weight: 700;
  color: var(--color-text);
  transition: color .25s ease;
}

.articles .article-row:hover .article-row__title {
  color: var(--color-red);
}

.articles .article-row__excerpt {
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.85;
  color: var(--color-subtext);
  max-width: none;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.articles .article-row__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  margin-top: auto;
  padding-top: 18px;
  font-size: 14px;
  font-weight: 600;
  color: #999;
  align-self: flex-end;
  transition: color .25s ease;
}

.articles .article-row:hover .article-row__more {
  color: var(--color-red);
}

.articles .article-row__more svg,
.article-row__link:hover .article-row__more svg {
  transition: transform .25s ease;
}

.articles .article-row:hover .article-row__more svg {
  transform: translateX(4px);
}

/* --- 汎用記事リスト --- */
.article-list {
  display: grid;
  gap: 40px;
}

.article-row {
  border-bottom: 1px solid #ebebeb;
  padding-bottom: 40px;
}

.article-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.article-row__link {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 48px;
  align-items: stretch;
  text-decoration: none;
  color: inherit;
}

.article-row__link:hover .article-row__thumb img {
  transform: scale(1.05);
}

.article-row__link:hover .article-row__more {
  color: var(--color-red);
}

.article-row__link:hover .article-row__more .icon-arrow {
  transform: translateX(4px) rotate(45deg);
  border-color: var(--color-red);
}

.article-row__thumb {
  background-color: var(--color-border);
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.article-row__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.article-row__placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #f0f0f0, #e0e0e0);
}

.article-row__content {
  display: flex;
  flex-direction: column;
  padding-top: 8px;
}

.article-row__title {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.5;
  color: var(--color-text);
  margin: 0 0 16px;
  letter-spacing: 0.03em;
}

.article-row__excerpt {
  color: var(--color-subtext);
  font-size: 15px;
  line-height: 1.8;
  margin: 0 0 24px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  flex-grow: 1;
}

.article-row__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 14px;
  color: var(--color-text);
  align-self: flex-end;
  transition: color 0.3s;
}

/* =========================================================
   動画セクション (Movie)
========================================================= */
.movie-section {
  padding: 76px 0;
  background: #fff;
}

.movie-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 48px 32px;
}

.movie-card__link {
  display: block;
  text-decoration: none;
  transition: opacity var(--transition);
}

.movie-card__link:hover {
  opacity: 0.8;
}

.movie-card__thumb {
  overflow: hidden;
  background: var(--color-border);
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-sm);
  border: 1px solid #ebebeb;
}

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

.movie-card__text {
  margin: 16px 0 0;
  color: var(--color-text);
  font-size: 15px;
  line-height: 1.6;
  font-weight: 700;
}

/* =========================================================
   資料ダウンロード (Download)
========================================================= */
.download-section {
  padding: 76px 0;
  background: #fff;
}

.download-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 50px 32px;
}

.download-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  transition: opacity var(--transition);
}

.download-card__link:hover {
  opacity: 0.8;
}

.download-card__image {
  background: var(--color-border);
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

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

.download-card__body {
  padding: 16px 0 0;
}

.download-card__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.6;
  margin: 0 0 20px;
  flex-grow: 1;
}

.download-card__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 240px;
  min-height: 48px;
  background: var(--color-navy);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  border-radius: 6px;
  transition: opacity var(--transition);
  pointer-events: none;
}

.download-card__btn:hover {
  opacity: .85;
}

/* =========================================================
   お役立ちコンテンツ ポータル (Useful Contents)
========================================================= */
.useful-hero {
  padding: 100px 0 80px;
  text-align: center;
}

.useful-hero__title {
  font-size: 44px;
  font-weight: 800;
  margin: 0 0 24px;
  letter-spacing: 0.05em;
}

.useful-hero__text {
  max-width: 800px;
  margin: 0 auto 40px;
  font-size: 15px;
  line-height: 1.8;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.95);
}

.useful-hero__actions {
  display: flex;
  justify-content: center;
  gap: 24px;
}

.useful-hero__actions .c-btn {
  min-width: 260px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.useful-section {
  padding: 80px 0;
}

.article-section {
  padding: 76px 0;
  background: #fff;
}

/* =========================================================
   施工事例一覧ページ (Works Archive)
========================================================= */
.works-archive-page {
  background: var(--color-bg);
}

.works-archive-hero__inner {
  padding: 86px 0 72px;
}

.works-archive-hero__title {
  font-size: 58px;
}

.works-archive-hero__text {
  max-width: 690px;
  margin: 20px auto 0;
  font-size: 14px;
  line-height: 1.65;
  font-weight: 500;
  text-align: left;
}

.works-archive-hero__actions {
  gap: 22px;
}

/* --- チラ見せスライダー (Swiper.js) --- */
.works-featured {
  padding-top: 20px;
  padding-bottom: 60px;
  overflow: hidden;
}

.works-slider {
  padding-bottom: 70px !important;
  width: 100%;
  position: relative;
}

/* .works-slider .swiper-slide {
  transition: transform 0.5s ease, opacity 0.5s ease;
  opacity: 0.35;
  transform: scale(0.92);
}

.works-slider .swiper-slide-active {
  opacity: 1;
  transform: scale(1);
} */

.works-featured-card__link {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 40px;
  align-items: center;
  padding: 24px;
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
  text-decoration: none;
  transition: transform 0.3s ease;
}

.works-featured-card__link:hover {
  transform: translateY(-4px);
}

.works-featured-card__image {
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: #ddd;
  aspect-ratio: 16 / 10;
}

.works-featured-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.works-featured-card__content {
  padding-right: 20px;
}

.works-featured-card__company {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 700;
  color: var(--color-text);
}

.works-featured-card__title {
  margin: 0 0 20px;
  color: var(--color-text);
  font-size: 26px;
  line-height: 1.45;
  font-weight: 800;
  max-width: 90%;
}

.works-featured-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

.works-featured-card__partner {
  margin: 0;
  color: var(--color-subtext);
  font-size: 14px;
  line-height: 1.6;
  font-weight: 500;
}

.works-slider-next,
.works-slider-prev {
  color: var(--color-subtext) !important;
  transform: scale(0.7);
  transition: opacity 0.3s;
}

.works-slider-next:hover,
.works-slider-prev:hover {
  opacity: 0.6;
}

.works-slider .swiper-pagination {
  bottom: 10px !important;
  left: 0;
  width: 100%;
}

.works-slider-pagination .swiper-pagination-bullet {
  background: #d0d0d0;
  opacity: 1;
}

.works-slider-pagination .swiper-pagination-bullet-active {
  background: var(--color-red) !important;
}

.works-archive-list {
  padding-top: 20px;
  padding-bottom: 80px;
}

.works-archive-list__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 52px 30px;
}

/* --- ページネーション --- */
.works-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 60px;
  padding-top: 40px;
  border-top: 1px solid var(--color-border);
}

.works-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #e0e0e0;
  color: #fff;
  font-size: 15px;
  line-height: 1;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.3s ease;
}

.works-pagination .page-numbers:hover {
  background: #c0c0c0;
}

.works-pagination .page-numbers.current {
  background: var(--color-red);
}

.works-pagination .dots {
  background: transparent;
  color: #aaa;
  font-size: 18px;
}

/* =========================================================
   施工事例詳細ページ (Works Single)
========================================================= */
.works-single-page {
  background: #efefef;
}

.works-single-hero__inner {
  padding: 86px 0 72px;
}

.works-single-hero__title {
  font-size: 58px;
}

.works-single-hero__text {
  max-width: 690px;
  margin: 20px auto 0;
  font-size: 14px;
  line-height: 1.65;
  font-weight: 500;
  text-align: left;
}

.works-single-hero__actions {
  gap: 22px;
}

/* --- ギャラリー --- */
.works-single-gallery {
      padding-top: 16px;
    padding-bottom: 4px;
}

.works-single-gallery__company {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 32px;
  font-weight: 900;
  color: #282c32;
  margin: 0 0 40px;
  border-bottom: 2px solid #282c32;
  padding-bottom: 16px;
}

/* .works-gallery-wrapper {
  max-width: 1000px;
} */

.works-gallery__main {
  position: relative;
}

.works-gallery__main-image {
  overflow: hidden;
  background: #ddd;
}

.works-gallery__main-image img {
  display: block;
  width: 100%;
  aspect-ratio: 1190 / 650;
  object-fit: cover;
}

.works-gallery__arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 94px;
  height: 94px;
  border: 0;
  background: rgba(58, 58, 58, 0.55);
  transform: translateY(-50%);
  cursor: pointer;
  transition: background .2s ease;
}

.works-gallery__arrow:hover {
  background: rgba(58, 58, 58, 0.72);
}

.works-gallery__arrow span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 28px;
  height: 28px;
  border-top: 4px solid #fff;
  border-right: 4px solid #fff;
}

.works-gallery__arrow--prev { left: 0; }
.works-gallery__arrow--prev span { transform: translate(-35%, -50%) rotate(-135deg); }
.works-gallery__arrow--next { right: 0; }
.works-gallery__arrow--next span { transform: translate(-65%, -50%) rotate(45deg); }

.works-gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 12px;
  margin-top: 22px;
}

.works-gallery__thumb {
  padding: 0;
  border: 0;
  background: #d9d9d9;
  cursor: pointer;
  opacity: .75;
  transition: opacity .2s ease, outline-color .2s ease;
  outline: 2px solid transparent;
  outline-offset: -2px;
}

.works-gallery__thumb:hover {
  opacity: .9;
}

.works-gallery__thumb.is-active {
  opacity: 1;
  outline-color: #e5002d;
}

.works-gallery__thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 0.58;
  object-fit: cover;
}
/* =========================================================
   施工事例詳細ページ (single-works)
========================================================= */

/* --- Swiper版ギャラリー（メイン） --- */
.works-gallery-main {
  width: 100%;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background-color: var(--color-border);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
  margin-bottom: 16px;
}

.works-gallery-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* スライダー矢印（スタイリッシュな四角に統一） */
.works-gallery-main .swiper-button-prev,
.works-gallery-main .swiper-button-next {
  background-color: rgba(40, 44, 50, 0.6);
  width: 48px;
  height: 48px;
  border-radius: 4px;
  transition: 0.3s;
}

.works-gallery-main .swiper-button-prev:hover,
.works-gallery-main .swiper-button-next:hover {
  background-color: rgba(225, 0, 41, 0.9); /* または var(--color-red) */
}

.works-gallery-main .swiper-button-prev::after,
.works-gallery-main .swiper-button-next::after {
  color: var(--color-red);
  font-size: 24px;
  font-weight: bold;
}
/* ==============================================
   Swiper 矢印ボタンの視認性アップ調整（完全正円版）
============================================== */

/* ボタン本体を絶対に潰させない強力な設定 */
.swiper-button-next, 
.swiper-button-prev {
  width: 70px !important;      /* !importantでSwiperのデフォルト幅を無効化 */
  height: 70px !important;     /* !importantでSwiperのデフォルト高さを無効化 */
  background-color: #fff !important;
  border-radius: 50% !important; /* 確実に丸にする */
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  color: var(--color-red)!important;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  /* ★ここが重要：楕円になるのを防ぎ、矢印をど真ん中に配置する */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;   /* 親要素の都合で潰されるのを防ぐ */
  margin-top: -35px !important; /* 高さ(56px)の半分のマイナス値を入れて縦ズレを防止 */
  font-weight: bold;
}

@media screen and (min-width:560px){
  .swiper-button-next, 
.swiper-button-prev {
top: var(--swiper-navigation-top-offset, 43%)!important;
}
}
/* ホバーした時の動き */
.swiper-button-next:hover, 
.swiper-button-prev:hover {
  transform: scale(1.02);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

/* 中の矢印アイコンのズレをなくす */
.swiper-button-next::after, 
.swiper-button-prev::after {
  font-size: 20px !important; 
  font-weight: 800 !important;
  margin: 0 !important; /* 余計な余白を消去 */
  line-height: 1 !important;
  display: block;
}
/* --- Swiper版ギャラリー（サムネイル） --- */
.works-gallery-thumbs {
  box-sizing: border-box;
  padding: 4px; /* 枠線や影が切れないように余白確保 */
}

.works-gallery-thumbs .swiper-slide {
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-sm);
  overflow: hidden;
  opacity: 0.4;
  cursor: pointer;
  box-sizing: border-box;
  border: 2px solid transparent; /* ガタつき防止の透明枠線 */
  transition: opacity 0.3s, transform 0.3s, border-color 0.3s;
}

.works-gallery-thumbs .swiper-slide:hover {
  opacity: 0.8;
}

.works-gallery-thumbs .swiper-slide-thumb-active {
  opacity: 1;
  border-color: var(--color-red);
  transform: translateY(-2px); /* アクティブなものを少し浮かせる */
  box-shadow: 0 4px 10px rgba(225, 0, 41, 0.2);
}

.works-gallery-thumbs img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- コンセプト --- */

.works-single-concept__grid {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 60px;
  align-items: start;
  margin-bottom: 60px;
}

.works-single-concept__title {
  font-size: 24px;
  font-weight: 900;
  margin: 0 0 24px;
  color: #282c32;
  letter-spacing: 0.05em;
}

.works-single-concept__text {
  font-size: 15px;
  line-height: 1.9;
  color: var(--color-subtext);
}

.works-single-concept__text p {
  margin: 0;
  color: #222;
  font-size: 17px;
  line-height: 1.85;
  font-weight: 500;
}

.works-single-concept__text p + p {
  margin-top: 10px;
}

.works-single-concept__image {
  background: #ddd;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.works-single-concept__image img,
.placeholder-box {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

/* --- スペック表 --- */
.works-spec-table {
  width: 100%;
  border-collapse: collapse;
  background-color: #fff;
}

.works-spec-table th,
.works-spec-table td {
  border: 1px solid #e2e8f0;
  padding: 24px;
  font-size: 15px;
  line-height: 1.6;
}

.works-spec-table th {
  background-color: #f8f9fa;
  font-weight: 700;
  width: 25%;
  text-align: center;
}

.works-spec-table td {
  font-weight: 500;
}

/* --- 関連施工事例 --- */
.works-single-related {
  padding-top: 0px;
}

.works-single-related__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 52px 30px;
}
/* ==============================================
   記事一覧（アーカイブ）のグリッド
============================================== */
.p-article-archive {
  padding: 80px 0 120px;
}

.p-article-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* PCは3列 */
  gap: 40px 32px; /* 縦の余白を横より少し広くとって窮屈さをなくす */
}

/* ==============================================
   記事カード本体
============================================== */
.c-article-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04); /* 極めて薄い上品な影 */
  transition: all 0.3s ease;
}

.c-article-card__link:hover {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08); /* ホバーで少し影が濃く、浮き上がる */
}

/* --- サムネイル画像 --- */
.c-article-card__thumb {
  width: 100%;
  aspect-ratio: 16 / 10; /* 画像の高さを美しく統一 */
  overflow: hidden;
  background-color: #f8f8f8;
}

.c-article-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease; /* ホバー時のアニメーション準備 */
}

/* ホバーすると画像がゆっくり少しだけ拡大（プロの定番テクニック） */
.c-article-card__link:hover .c-article-card__thumb img {
  transform: scale(1.05);
}

/* --- カードのテキスト部分 --- */
.c-article-card__body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.c-article-card__meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
}

/* ★レディクル風：ソリッドな赤い日付 */
.c-article-card__date {
  font-family: "Helvetica Neue", Arial, sans-serif; /* 数字が綺麗に見えるフォント */
  font-size: 15px;
  font-weight: 700;
  color: #DF022A; /* ブランドカラー */
  letter-spacing: 0.05em;
}

/* ★レディクル風：ダークグレーのピルシェイプタグ */
.c-article-card__cat {
  display: inline-block;
  background-color: #282c32; /* 黒に近いダークグレー */
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 20px; /* 完全に丸める（ピルシェイプ） */
  line-height: 1;
}

/* --- タイトル --- */
.c-article-card__title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  color: #282c32;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 3行以上は「...」で省略 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.3s ease;
}

/* ホバー時にタイトルが赤くなる */
.c-article-card__link:hover .c-article-card__title {
  color: #DF022A;
}


/* ==============================================
   ページネーション（1, 2, 3... のページ送り）
============================================== */
.p-pagination {
  margin-top: 64px;
}

.p-pagination .nav-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.p-pagination .page-numbers {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  background-color: #fff;
  border: 1px solid #e2e8f0;
  color: #282c32;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 4px;
  transition: all 0.3s ease;
}

/* 現在いるページと、ホバー時のスタイル */
.p-pagination .page-numbers.current,
.p-pagination .page-numbers:not(.dots):hover {
  background-color: #DF022A;
  border-color: #DF022A;
  color: #fff;
}

.p-pagination .dots {
  border: none;
  background: transparent;
}

/* スマホ対応（1列にする） */
@media (max-width: 767px) {
  .p-article-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}
/* =========================================================
   記事詳細ページ (Article Detail)
========================================================= */
.p-article {
  background-color: #fff;
  padding-bottom: 100px;
}

.p-article__header {
  background-color: #f8fafc;
  padding: 80px 0 60px;
  text-align: center;
}

.p-article__meta {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 20px;
}

.p-article__date {
  color: #64748b;
  font-weight: 700;
  font-family: 'Inter', sans-serif;
}

.p-article__category {
  color: var(--color-red);
  font-weight: 700;
  font-size: 14px;
}

.p-article__title {
  font-size: 36px;
  font-weight: 800;
  line-height: 1.4;
  color: var(--color-text);
  max-width: 900px;
  margin: 0 auto;
}

.p-article__breadcrumb {
  padding: 20px 0;
  border-bottom: 1px solid #f1f5f9;
  font-size: 13px;
  color: #94a3b8;
}

.p-article__breadcrumb a {
  color: #64748b;
  text-decoration: none;
}

.p-article__breadcrumb a:hover {
  text-decoration: underline;
}

.p-article__container {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 60px;
  padding-top: 60px;
}

.p-article__main {
  min-width: 0;
}

.p-article__eyecatch {
  margin-bottom: 40px;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.p-article__eyecatch img {
  width: 100%;
  height: auto;
}

.p-article__content {
  font-size: 18px;
  line-height: 1.85;
}

.p-article__content h2 {
  font-size: 28px;
  margin: 60px 0 30px;
  padding-bottom: 15px;
  border-bottom: 3px solid var(--color-red);
  color: var(--color-text);
}

.p-article__content h3 {
  font-size: 22px;
  margin: 40px 0 20px;
  padding-left: 15px;
  border-left: 5px solid var(--color-navy);
}
/* --- 見出し4 (h4) --- */
.p-article__content h4 {
  font-size: 20px;
  font-weight: 800;
  margin: 40px 0 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #cbd5e1; /* h2の赤線より控えめな、細いグレーの線 */
  color: var(--color-text);
}

/* --- 見出し5 (h5) --- */
.p-article__content h5 {
  font-size: 18px; /* 本文のサイズと同じですが、太字にして独立させます */
  font-weight: 800;
  margin: 30px 0 15px;
  color: var(--color-text);
}

/* ==============================================
   スマホ表示時の h4・h5 サイズ調整
============================================== */
@media (max-width: 767px) {
  .p-article__content h4 {
    font-size: 18px;
    margin: 30px 0 15px;
  }
  
  .p-article__content h5 {
    font-size: 16px;
    margin: 24px 0 12px;
  }
}
.p-article__content p {
  margin-bottom: 30px;
}

.p-article__content blockquote {
  background: #f8fafc;
  padding: 30px;
  border-left: 5px solid #cbd5e1;
  font-style: italic;
  margin: 40px 0;
}
/* ==============================================
   サイドバー全体の追従設定
============================================== */
.p-article__sidebar {
  position: sticky;
  top: 100px;
  /* 画面が小さい時に下が切れないよう、サイドバー内でスクロール可能にする */
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}
/* ★ Chrome / Safari / Edge用のスクロールバーデザイン */
.p-article__sidebar::-webkit-scrollbar {
  width: 6px; /* スクロールバーの幅（細めでスタイリッシュに） */
}

.p-article__sidebar::-webkit-scrollbar-track {
  background: transparent; /* スクロールバーの背景は透明 */
}

.p-article__sidebar::-webkit-scrollbar-thumb {
  background: #cbd5e1; /* つまみの色（薄いグレー） */
  border-radius: 10px; /* つまみの角を丸くする */
}

.p-article__sidebar::-webkit-scrollbar-thumb:hover {
  background: #94a3b8; /* マウスオーバーした時は少し濃くする */
}

.p-article__sidebar-box {
  background: #f8fafc;
  padding: 24px;
  border-radius: var(--radius-sm);
  /* position: sticky; は削除（親要素で追従させるため） */
}

.p-article__sidebar-title {
  font-size: 18px;
  margin-bottom: 20px;
  font-weight: 800;
}

/* ==============================================
   サイドバー：CTA（無料相談）のデザイン
============================================== */
.p-article__sidebar-cta {
  margin-top: 30px;
  margin-bottom: 30px; /* スクロールした時に一番下に余白を持たせる */
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  padding: 40px 24px;
  text-align: center;
  border-radius: 12px;
  color: #fff;
  /* position: sticky; は削除（親要素で追従させるため） */
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* 目を惹くバッジ */
.p-article__sidebar-cta-badge {
  display: inline-block;
  background-color: var(--color-red, #DF022A);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  padding: 4px 16px;
  border-radius: 20px;
  margin-bottom: 16px;
  letter-spacing: 0.05em;
}

/* メインコピー */
.p-article__sidebar-cta-title {
  font-weight: 800;
  font-size: 22px;
  line-height: 1.4;
  margin-bottom: 12px;
  color: #fff;
}

/* サブコピー */
.p-article__sidebar-cta-desc {
  font-size: 13px;
  line-height: 1.6;
  color: #94a3b8;
  margin-bottom: 24px;
}

/* ボタンの微調整 */
.p-article__sidebar-cta .c-btn {
  width: 100%;
  background: linear-gradient(180deg, #ff4d6d 0%, #DF022A 100%); /* 上から下へのツヤ感グラデーション */
  color: #fff;
  border: none;
  transition: all 0.3s ease;
  font-weight: 800;
}

.p-article__sidebar-cta .c-btn:hover {
  transform: translateY(-2px); /* ホバーで少しフワッと浮く */
  background: linear-gradient(180deg, #ff6682 0%, #ed1c40 100%); /* 色を少し明るく */
}

.p-article__sidebar-cta p {
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 20px;
}

/* ==============================================
   サイドバー：目次（TOC）のデザイン
============================================== */
.p-article__toc ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
}

.p-article__toc li {
  margin-bottom: 12px !important;
  line-height: 1.5;
}

/* h2見出しのスタイル（太字） */
.p-article__toc li.toc-h2 {
  font-weight: 700;
  font-size: 14px;
  border-bottom: 1px dashed #e2e8f0;
  padding-bottom: 8px;
}

/* h3見出しのスタイル（一段下げる） */
.p-article__toc li.toc-h3 {
  padding-left: 16px;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 8px !important;
  position: relative;
}

/* h3の左に付く小さなアイコン（ハイフン） */
.p-article__toc li.toc-h3::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 8px;
  width: 4px;
  height: 4px;
  background-color: #cbd5e1;
  border-radius: 50%;
}

.p-article__toc a {
  color: #475569;
  text-decoration: none;
  display: block;
  transition: color 0.3s ease;
}

.p-article__toc a:hover {
  color: var(--color-red, #DF022A);
}

/* --- リンク --- */
.p-article__content a {
  color: var(--color-navy); /* ブランドカラーのネイビー */
  text-decoration: underline;
  text-underline-offset: 2px; /* 下線を少し離して読みやすく */
  transition: opacity 0.3s ease;
}

.p-article__content a:hover {
  text-decoration: none;
  opacity: 0.7;
}

/* --- リスト (箇条書き・番号付き) --- */
.p-article__content ul,
.p-article__content ol {
  background-color: #f8fafc; /* 薄いグレーの背景 */
  border: 1px solid #e2e8f0; /* うっすら枠線をつけるとさらに綺麗にまとまります */
  padding: 24px 24px 24px 40px; /* 上・右・下は24px、左は黒ポチのスペース分広めに40px */
  margin: 0 0 30px;
}

.p-article__content ul li,
.p-article__content ol li {
  margin-bottom: 10px;
  line-height: 1.8;
}

/* 最後の項目の下の余白を消す（箱の下部を綺麗に揃えるため） */
.p-article__content ul li:last-child,
.p-article__content ol li:last-child {
  margin-bottom: 0;
}

/* 箇条書きリストの黒ポチ */
.p-article__content ul {
  list-style-type: disc;
}

/* 番号付きリスト */
.p-article__content ol {
  list-style-type: decimal;
}

/* ネスト（入れ子）されたリストの調整 */
.p-article__content ul ul,
.p-article__content ol ol,
.p-article__content ul ol,
.p-article__content ol ul {
  background-color: transparent; /* 入れ子になったリストは背景色を透明に */
  border: none; /* 枠線も消す */
  padding: 0 0 0 1.5em; /* 左のインデントだけ残す */
  margin-top: 10px;
  margin-bottom: 0;
}

/* --- 画像・キャプション --- */
.p-article__content img,
.p-article__content figure {
  max-width: 100%;
  height: auto;
  margin: 0 0 30px;
  border-radius: 4px;
}

/* 画像の下につく説明文 */
.p-article__content figcaption {
  font-size: 14px;
  color: #64748b;
  text-align: center;
  margin-top: 8px;
}

/* --- テーブル (表) --- */
.p-article__content table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 30px;
  font-size: 15px;
  line-height: 1.6;
}

.p-article__content th,
.p-article__content td {
  border: 1px solid #cbd5e1;
  padding: 14px 16px;
}

.p-article__content th {
  background-color: #f8fafc;
  font-weight: 700;
  text-align: left;
  color: var(--color-text);
  white-space: nowrap; /* PCでは見出しを改行させない */
}

/* --- 水平線 --- */
.p-article__content hr {
  border: none;
  border-top: 1px dashed #cbd5e1; /* 主張しすぎない破線に */
  margin: 50px 0;
}

/* --- 強調 (太字) --- */
.p-article__content strong,
.p-article__content b {
  font-weight: 800;
  /* ※もし「太字は赤色にしたい」などのルールがあればここに color: var(--color-red); を追加します */
}

/* --- 定義リスト (dl, dt, dd) --- */
.p-article__content dl {
  margin: 0 0 30px;
}

.p-article__content dt {
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--color-text);
}

.p-article__content dd {
  margin: 0 0 20px;
  padding-left: 1em;
  color: #475569;
}

/* --- 埋め込み要素 (YouTubeやGoogleマップなど) --- */
.p-article__content iframe {
  max-width: 100%;
  margin: 0 0 30px;
}

/* ==============================================
   スマホ表示時の記事内スタイル調整
============================================== */
@media (max-width: 767px) {
  
  /* スマホでは文字サイズを少し小さくし、読みやすく */
  .p-article__content {
    font-size: 15px; 
    line-height: 1.8;
  }

  /* テーブルがスマホ画面からはみ出さないように横スクロールさせる（CSSハック） */
  .p-article__content table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch; /* iOSでの滑らかなスクロール */
  }

  /* スマホでは表の余白を少し詰める */
  .p-article__content th,
  .p-article__content td {
    padding: 10px 12px;
  }
}

/* ==============================================
   前後記事ナビゲーション（レディクル風）
============================================== */

/* 全体のコンテナ：左右に振り分ける */
.p-article__nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px; /* 左右のボタンの隙間 */
  margin-top: 80px; /* 記事本文との間にたっぷり余白をとる */
  padding-top: 40px;
  border-top: 1px solid #e2e8f0; /* 上に薄いグレーの区切り線を引く */
}

/* 前・次の枠をピッタリ50%ずつに分割 */
.p-article__nav-prev,
.p-article__nav-next {
  flex: 1; 
}

/* リンクを「クリックしやすい四角いボタン」にする */
.p-article__nav a {
  display: flex;
  align-items: center;
  padding: 24px;
  background-color: #fff;
  border: 1px solid #e2e8f0; /* 薄いグレー枠 */
  border-radius: 4px; /* 微角丸 */
  color: #282c32;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s ease;
}

/* 「次の記事」は中の文字を右寄せにする */
.p-article__nav-next a {
  justify-content: flex-end;
}

/* ----------------------------------------------
   CSSで作るシャープな矢印（＜ と ＞）
---------------------------------------------- */
/* 「前の記事」の左矢印（＜） */
.p-article__nav-prev a::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-top: 2px solid #282c32;
  border-left: 2px solid #282c32;
  transform: rotate(-45deg);
  margin-right: 16px;
  transition: all 0.3s ease;
}

/* 「次の記事」の右矢印（＞） */
.p-article__nav-next a::after {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-top: 2px solid #282c32;
  border-right: 2px solid #282c32;
  transform: rotate(45deg);
  margin-left: 16px;
  transition: all 0.3s ease;
}

/* ----------------------------------------------
   ホバー（マウスオーバー）時のアクション
---------------------------------------------- */
.p-article__nav a:hover {
  border-color: #DF022A; /* 枠線が赤に */
  color: #DF022A; /* 文字が赤に */
  box-shadow: 0 4px 15px rgba(225, 0, 41, 0.05);
}

/* ホバーで矢印も赤くなり、スッと動く */
.p-article__nav-prev a:hover::before {
  border-color: #DF022A;
  transform: rotate(-45deg) translate(2px, 2px); /* 左へスッ */
}

.p-article__nav-next a:hover::after {
  border-color: #DF022A;
  transform: rotate(45deg) translate(2px, -2px); /* 右へスッ */
}

/* --- スマホ表示の調整 --- */
@media (max-width: 767px) {
  .p-article__nav {
    gap: 12px;
  }
  .p-article__nav a {
    padding: 16px 12px;
    font-size: 13px; /* スマホでは文字を少し小さく */
  }
}
/* =========================================================
   資料ダウンロード詳細ページ (Single Download)
========================================================= */
.dl-single-page {
  background-color: #f9f9f9;
  padding-bottom: 100px;
}

.dl-breadcrumb {
  padding: 24px 0;
  font-size: 13px;
  color: #888;
}

.dl-breadcrumb a {
  color: #555;
  text-decoration: none;
}

.dl-breadcrumb a:hover {
  text-decoration: underline;
}

.dl-single-grid {
  display: grid;
  grid-template-columns: 1fr 440px;
  gap: 60px;
  align-items: start;
}

.dl-single-main {
  background: var(--color-white);
  padding: 50px;
  border-radius: var(--radius-md);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

.dl-single-tag {
  background-color: var(--color-navy);
  color: #fff;
  border: none;
  font-size: 13px;
  padding: 6px 16px;
  border-radius: 4px;
  margin-bottom: 20px;
  display: inline-block;
  font-weight: 700;
}

.dl-single-title {
  font-size: 32px;
  font-weight: 800;
  line-height: 1.5;
  color: var(--color-text);
  margin: 0 0 40px;
  letter-spacing: 0.03em;
}

.dl-single-eyecatch {
  margin-bottom: 40px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background-color: #f0f0f0;
}

.dl-single-eyecatch img {
  width: 100%;
  height: auto;
  display: block;
}

.dl-single-body {
  font-size: 16px;
  line-height: 1.9;
  color: var(--color-text);
}

.dl-single-body h2 {
  font-size: 24px;
  font-weight: 700;
  margin: 50px 0 24px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--color-red);
}

.dl-single-body h3 {
  font-size: 20px;
  font-weight: 700;
  margin: 36px 0 16px;
  padding-left: 14px;
  border-left: 4px solid var(--color-navy);
}

.dl-single-body p {
  margin-bottom: 24px;
}

.dl-single-body ul {
  background: #f8f8f8;
  padding: 24px 24px 24px 40px;
  border-radius: 8px;
  margin-bottom: 30px;
}

.dl-single-body li {
  margin-bottom: 12px;
}

.dl-single-sidebar {
  position: sticky;
  top: 40px;
}

.dl-form-box {
  background: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  border-top: 6px solid var(--color-navy);
}

.dl-form-box__header {
  background: #f4f6f9;
  padding: 30px;
  text-align: center;
  border-bottom: 1px solid var(--color-border);
}

.dl-form-box__header h3 {
  font-size: 22px;
  font-weight: 800;
  color: var(--color-text);
  margin: 0 0 16px;
}

.dl-form-box__header p {
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-subtext);
  margin: 0;
  text-align: left;
}

/* =========================================================
   サービス資料請求ページ (Service Document LP)
========================================================= */
.p-service-doc {
  background-color: #fff;
  padding-bottom: 100px;
}

.p-service-doc__hero {
  background: linear-gradient(135deg, #DF022A 0%, #B91633 100%);
  color: #fff;
  padding: 80px 0;
  text-align: center;
  margin-bottom: 60px;
}

.p-service-doc__hero-title {
  font-size: 32px;
  font-weight: 800;
  margin: 0 0 16px;
  letter-spacing: 0.05em;
}

.p-service-doc__hero-text {
  font-size: 15px;
  opacity: 0.9;
  max-width: 800px;
  margin: 0 auto;
}

.p-service-doc__grid {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 80px;
  align-items: start;
}

.p-service-doc__image {
  margin-bottom: 40px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid #eaeaea;
}

.p-service-doc__image img {
  width: 100%;
  height: auto;
  display: block;
}

.p-service-doc__desc-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--color-text);
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid #eaeaea;
}

.p-service-doc__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.p-service-doc__list li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 12px;
  font-size: 15px;
  color: var(--color-subtext);
}

.p-service-doc__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  background-color: var(--color-red);
  border-radius: 50%;
}

.p-service-doc__form-box {
  background: #fff;
}

.p-service-doc__form-header {
  margin-bottom: 30px;
}

.p-service-doc__form-header h3 {
  font-size: 24px;
  font-weight: 800;
  color: var(--color-text);
  margin: 0 0 12px;
}

.p-service-doc__form-header p {
  font-size: 13px;
  color: var(--color-subtext);
  line-height: 1.6;
}

.p-service-doc__form-header a {
  color: var(--color-red);
  text-decoration: underline;
}

/* =========================================================
   フッター — LP用
========================================================= */
.lp-footer {
  padding: 52px 0 34px;
  background: #f2efed;
}

.lp-footer__logo img {
  width: 110px;
}

.lp-footer__nav {
  margin-top: 20px;
}

.lp-footer__nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 28px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.lp-footer__nav a {
  font-size: 14px;
  color: #444;
}

.lp-footer__copyright {
  margin: 26px 0 0;
  padding-top: 20px;
  border-top: 1px solid #ddd;
  color: #777;
  font-size: 12px;
}
/* =========================================================
   スマホ用 追従CTAボタン
========================================================= */
/* PCの時は非表示にする */
@media (min-width: 768px) {
  .c-mobile-cta {
    display: none;
  }
}

/* スマホの時のスタイル */
@media (max-width: 767px) {
  .c-mobile-cta {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    z-index: 5;
    background-color: #fff;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    /* 消える時のフワッとしたアニメーション */
    transition: transform 0.3s ease-in-out; 
  }
  
  /* ★JSでこのクラスが付与されると、画面下にスライドして隠れる */
  .c-mobile-cta.is-hidden {
    transform: translateY(100%);
  }

  .c-mobile-cta__btn {
    flex: 1; /* 2つのボタンをぴったり50%ずつ分割 */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 0;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    letter-spacing: 0.05em;
  }

  /* ボタンの色（サイトのトンマナに合わせて変更してください） */
  .c-mobile-cta__btn--doc {
    background-color: #282C32; /* グレー系 */
  }

  .c-mobile-cta__btn--contact {
    background-color: #DF022A; /* レッド系 */
  }
  
  /* ボタンの高さ分、サイトの最下部に余白を空ける（フッターが隠れないように） */
  body {
    padding-bottom: 54px; 
  }
}
/* =========================================================
   フッター — サイト共通
========================================================= */
.site-footer {
  background-color: #ffffff;
  color: #282c32;
}

.site-footer__topic-path {
  background-color: #f8f9fa;
  padding: 20px 0;
  border-top: 1px solid #ebebeb;
  border-bottom: 1px solid #ebebeb;
}

.site-footer__topic-list {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
  align-items: center;
}

.site-footer__topic-list li {
  font-size: 12px;
  font-weight: 700;
  color: #a0aac0;
  display: flex;
  align-items: center;
  margin-right: 15px;
  padding-right: 15px;
  border-right: 1px solid #e2e8f0;
  line-height: 1;
}

.site-footer__topic-list li:last-child {
  border-right: none;
}

.site-footer__topic-list a {
  color: #64748b;
  text-decoration: none;
  transition: color 0.3s;
}

.site-footer__topic-list a:hover {
  color: #DF022A;
}
.site-footer__tel {
  margin-top: 24px;
}

.site-footer__tel-num {
  display: inline-block;
  font-size: 26px;
  font-weight: 800;
  color: #282C32;
  text-decoration: none;
  letter-spacing: 0.05em;
  line-height: 1;
  margin-bottom: 6px;
}
.site-footer__tel-num:hover {
  opacity: 0.7;
}

.site-footer__tel-time {
  font-size: 13px;
  color: #666;
  margin: 0;
}

/* スマホではヘッダーの電話番号を隠す（下部固定CTAがあるため） */
@media (max-width: 1024px) {
  .u-pc-only {
    display: none !important;
  }
}
.topic-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background-color: #DF022A;
  border-radius: 50%;
  margin-right: 8px;
}

.site-footer__main {
  padding: 50px 0;
}

.site-footer__inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.site-footer__logo {
  width: 160px;
  margin-bottom: 16px;
}

.site-footer__desc {
  font-size: 13px;
  font-weight: 500;
  margin: 0;
}

.site-footer__nav {
  display: flex;
  gap: 80px;
}

.site-footer__col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.site-footer__col li {
  margin-bottom: 20px;
}

.site-footer__col a {
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: color 0.3s;
}

.site-footer__col a:hover {
  color: #DF022A;
}

.site-footer__bottom {
  padding: 30px 0 40px;
  border-top: 1px solid #c8c8c8;
  text-align: center;
}

.site-footer__legal {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
}

.site-footer__legal li {
  display: flex;
  align-items: center;
}

.site-footer__legal li:not(:last-child)::after {
  content: "|";
  color: #e2e8f0;
  margin: 0 16px;
  font-size: 12px;
}

.site-footer__legal a {
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.3s;
}

.site-footer__legal a:hover {
  color: #334155;
}

.site-footer__copyright {
  font-size: 12px;
  color: #cbd5e1;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  letter-spacing: 0.05em;
}

/* =========================================================
   レスポンシブ — 1280px以下
========================================================= */
@media (max-width: 1280px) {
  .l-container {
    width: min(100% - 48px, var(--container));
  }

  .page-hero__title { font-size: 58px; }
  .c-section-title { font-size: 42px; }
  .bottom-cta__title { font-size: 52px; }
  .partner-card__name { font-size: 20px; }

  .partner-profile__grid {
    grid-template-columns: 1fr 400px;
    gap: 48px;
  }

  .works-archive-hero__title,
  .works-single-hero__title { font-size: 48px; }

  .works-featured-card__title { font-size: 22px; }
  .works-single-gallery__company { font-size: 34px; }

  .fv__title { font-size: 36px; }
  .fv__badge-value { font-size: 44px; }
  .fv__badge-value--text { font-size: 28px; }
}

/* =========================================================
   レスポンシブ — 1024px以下
========================================================= */
@media (max-width: 1024px) {
  /* ヘッダー */
  .site-header__inner {
    flex-wrap: wrap;
    justify-content: center;
    padding: 12px 0;
  }

  .site-header__nav {
    margin-left: 0;
    order: 3;
    width: 100%;
  }

  .site-header__nav-list {
    justify-content: center;
  }

  /* グリッドを2列に縮小 */
  .intro__steps,
  .partner-list__grid,
  .works__grid,
  .works-archive-list__grid,
  .download-grid {
    grid-template-columns: repeat(1, 1fr);
    gap: 15px 15px;
  }

  .intro__steps .step-card:nth-child(2) {
    margin-top: 0;
  }

  /* 2カラムを1カラムに */
  .reason-card,
  .solution__body,
  .partner-profile__grid,
  .works-featured-card__link,
  .works-single-concept__grid,
  .p-article__container,
  .dl-single-grid,
  .p-service-doc__grid,
  .p-partner-profile__grid,
  .bottom-cta__inner {
    grid-template-columns: 1fr;
  }

  .partner-profile__image {
    max-width: 460px;
    margin: 0 auto;
  }

  .works-featured-card__link {
    gap: 24px;
    padding: 20px;
  }

  .works-featured-card__content {
    padding-right: 0;
  }

  .works-single-concept__grid,
  .p-partner-profile__grid {
    gap: 40px;
  }

  .p-partner-profile__image {
    order: -1;
    max-width: 300px;
    margin: 0 auto;
  }

  .works-single-concept__image img,
  .placeholder-box {
    aspect-ratio: 16 / 9;
    max-width: 600px;
  }

  .works-single-related__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .works-gallery__thumbs {
    grid-template-columns: repeat(4, 1fr);
  }

  .flow-item {
    grid-template-columns: 84px 1fr 220px;
  }

  .bottom-cta__image {
    max-width: 360px;
    margin: -40px auto 0;
  }

  .bottom-cta__content {
    padding: 0 0 48px;
    text-align: center;
  }

  .bottom-cta__text {
    margin-inline: auto;
  }

  /* 記事 */
  .articles .article-row__link {
    grid-template-columns: 240px 1fr;
    gap: 24px;
    padding: 24px;
  }

  .articles .article-row__title {
    font-size: 17px;
  }

  .article-row__link {
    grid-template-columns: 260px 1fr;
    gap: 28px;
  }

  .article-row__title {
    font-size: 18px;
  }

  .p-article__sidebar {
    display: none;
  }

  .p-article__title {
    font-size: 28px;
  }

  .dl-single-grid,
  .p-service-doc__grid {
    gap: 40px;
  }

  .p-service-doc__grid {
    gap: 60px;
  }

  .dl-single-sidebar {
    position: static;
  }

  .movie-grid {
    gap: 32px 24px;
  }
}

/* =========================================================
   レスポンシブ — 767px以下（スマホ）
========================================================= */
@media (max-width: 767px) {
  :root {
    --header-h: 56px;
  }

  .l-container {
    width: min(100% - 24px, var(--container));
  }

  .section-block {
    padding-top: 48px;
  }

  .c-section-title {
    margin-bottom: 28px;
    font-size: 24px;
    line-height: 1.55;
    text-align: center;
  }

  /* ボタン系 */
  .c-btn {
    min-height: 46px;
    padding: 16px 18px;
        font-size: 16px;
  }

  .c-btn--sm {
    min-height: 38px;
    font-size: 12px;
  }

  .c-btn--wide,
  .c-btn--cta,
  .c-btn--outline {
    min-width: 100%;
  }

  .c-btn--outline {
    min-height: 50px;
    font-size: 14px;
  }

  .c-outline-link {
    font-size: 13px;
    padding: 12px 30px;
  }

  /* --- ヘッダー --- */
  .lp-header__inner {
    min-height: var(--header-h);
  }

  .lp-header__logo img {
    width: 82px;
  }

  .lp-header__actions {
    gap: 8px;
  }

  .lp-header__actions .c-btn {
    min-height: 38px;
    padding: 8px 12px;
    font-size: 11px;
  }
.site-header {
    /* 常に画面上部に固定する設定（※すでに指定されている場合は不要です） */
    position: sticky; 
    top: 0;
    z-index: 10;
    
    /* 0.3秒かけてスムーズに動かす */
    transition: transform 0.3s ease; 
  }

  /* JavaScriptからこのクラスが付与されると、上に隠れる */
  .site-header.is-hidden {
    transform: translateY(-100%); /* ヘッダーの高さ分だけ上にスライド */
  }

  .site-header__inner {
    display: flex;
    justify-content: space-between; /* ロゴを左、ボタンを右に配置 */
    align-items: center;
    padding: 12px 16px;
  }
.site-header__pc-wrap {
    display: none;
  }
	.c-hamburger {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 24px;
    height: 16px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    margin-left: auto;
  }

  /* 3本線 */
  .c-hamburger span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: #DF022A;
  }
  .site-header__logo img {
    width: 110px;
  }

  .site-header__logo-text {
    font-size: 1.2rem;
  }

  .site-header__nav-list {
    gap: 16px;
    flex-wrap: wrap;
  }

  .site-header__nav-list a {
    font-size: 12px;
  }

  .site-header__actions {
    width: 100%;
    justify-content: center;
  }

  /* --- ドロワー本体（初期状態は画面外か非表示） --- */
  .c-drawer {
    display: block;
    position: fixed;
    top: var(--header-h, 60px); /* ヘッダーの高さ分だけ下げる */
    left: 0;
    width: 100%;
    height: calc(100vh - var(--header-h, 60px));
    background-color: #fff;
    z-index: 900;
    /* フワッと表示させるための設定 */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    overflow-y: auto; /* 縦スクロール可能に */
  }

  /* 「is-open」クラスがついたら表示する */
  .c-drawer.is-open {
    opacity: 1;
    visibility: visible;
  }

  /* ドロワーの中身の余白 */
  .c-drawer__inner {
    padding: 40px 20px;
  }

  .c-drawer__list {
    list-style: none;
    padding: 0;
    margin: 0 0 40px;
  }

  .c-drawer__list li {
    border-bottom: 1px solid #DF022A;
  }

  .c-drawer__list a {
    display: block;
    padding: 20px 0;
    font-size: 18px;
    font-weight: 700;
    color: #282c32;
    text-decoration: none;
  }

  .c-drawer__actions {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  /* --- ハンバーガーボタンが「×」になるアニメーション --- */
  .c-hamburger {
    z-index: 999; /* 常に一番上 */
    transition: all 0.3s ease;
  }

  .c-hamburger span {
    transition: all 0.3s ease;
  }

  /* 「is-open」クラスがついた時の3本線の動き */
  .c-hamburger.is-open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .c-hamburger.is-open span:nth-child(2) {
    opacity: 0; /* 真ん中の線は消す */
  }
  .c-hamburger.is-open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .site-footer__logo{
    margin: 0 auto 16px;
  }

  /* --- FV --- */
  .fv__inner {
    display: block; /* HTMLの順番通りに綺麗に縦に並べます */
    padding-top: 24px;
    padding-bottom: 0px;
  }

  .fv__content {
    padding: 0;
  }

  .fv__title {
    font-size: 6.25vw;
    line-height: 1.75;
  }

  .fv__title small {
    font-size: 15px;
    margin-top: 8px;
  }

  .fv__desc {
    font-size: 14px;
    margin-top: 12px;
  }

  .fv__desc br {
    display: none;
  }

  /* CTAボタン */
  .fv__actions {
    display: flex;
    flex-direction: row; /* ★ここを縦(column)から横(row)に変更 */
    align-items: stretch; /* 両方のボタンの高さをピタッと揃える */
    gap: 12px; /* ボタン同士の隙間 */
    margin-top: 24px;
  }

  /* 注釈テキスト */
  .fv__note {
    font-size: 10px;
    text-align: center;
    margin-top: 12px;
    color: rgba(255, 255, 255, .65);
  }


  .fv__image img {
    width: 100%;
    height: auto;
    vertical-align: bottom;
  }

  /* バッジ（一番下） */
  .fv__badges {
    display: flex;
    gap: 0px;
    align-items: center;
    justify-content: space-between;
    padding:20px 15px;
            margin-top: 0px;
  }

  .fv__badge {
    padding: 0 18px;
  }

  .fv__badge::before,
  .fv__badge::after {
    width: 14px;
    height: 48px;
  }

  .fv__badge-label {
    font-size: 15px;
    margin-right: 3px;
  }

  .fv__badge-value {
    font-size: 42px;
  }
.u-sp-only .fv__badge-label,
.u-sp-only .fv__badge-value,
.u-sp-only .fv__badge-unit{
  color:#282C32;
}
  .fv__badge-value--text {
    font-size: 27px;
    margin-left: 0px;
  }

  .fv__badge-unit {
    font-size: 16px;
    margin-bottom: 8px;
  }

  .fv__badge-value--text + .fv__badge-unit {
    margin-bottom: 4px;
  }

  /* ★ 4番目：モデルの画像をここに引っ張ってきます！ (CTAの上に配置) */
  .fv__image {
            width: 125vw;
        max-width: 125vw;
        margin-left: -12.5vw;
        justify-self: center;
                margin-top: 30px;
  }

  /* ★ 5番目：CTAボタン (モデルの下、注釈の上に配置) */
  /* .fv__actions {
    order: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding-bottom: 0px;
  } */

  .fv__actions .c-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    line-height: 1.3;

    flex: 1;
    width: 100%;
    min-width: auto;
    min-height: 44px;
    padding: 10px 12px;
    font-size: 14px;
  }

  /* ★ 6番目（一番下）：安心させる注釈テキスト (ボタンの下に配置) */
  .fv__note {
    order: 6;
    font-size: 10px;
    text-align: center;
    margin-top: 16px; /* ボタンとの間の余白を調整 */
    margin-bottom: 0;
    padding-bottom: 20px; /* FVエリア全体の下部余白として設定 */
  }

  /* ★ 6番目（一番下）：CTAボタン */
  /* .fv__actions {
    order: 6;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding-bottom: 0px;
  } */

  /* .fv__actions .c-btn {
    flex: 1;
    width: 100%;
    min-width: auto;
    min-height: 44px;
    padding: 10px 12px;
    font-size: 15px;
  } */

  .fv__note {
    text-align: center;
  }

  /* --- セクション共通余白 --- */
  .intro,
  .solution,
  .reason,
  .flow,
  .cta-mini {
    padding: 56px 0;
  }

  .cta-banner {
    padding-bottom: 56px;
  }

  .cta-contact-image {
    padding: 40px 0 60px;
  }

  /* --- Intro --- */
  .intro__desc {
    font-size: 13px;
    margin-bottom: 36px;
  }

  .intro__steps {
    grid-template-columns: 1fr;
    max-width: 360px;
    margin-inline: auto;
  }

  .step-card {
    padding: 18px 16px 20px;
  }

  .step-card__title {
    font-size: 20px;
  }

  /* --- Problem --- */
  .problem {
    padding: 60px 0;
  }

  .problem__title {
    margin-bottom: 16px;
    text-align: center;
  }

  .problem__lead {
    font-size: 13px;
    text-align: left;
    margin-bottom: 40px;
  }

  .problem__list {
    grid-template-columns: 1fr;
    gap: 25px;
  }

  .problem-card {
    padding: 25px 20px;
  }

  .problem-card__title {
    font-size: 20px;
  }

  .problem-card__text {
    font-size: 12px;
  }

  .problem-card::before {
    left: 30px;
  }

  /* --- Risk --- */
  .risk {
    padding: 60px 0;
  }

  .risk .c-section-title {
    line-height: 1.6;
    margin-bottom: 40px;
    font-size: 24px;
  }

  .risk__title-large {
    margin: 8px 0;
    font-size: 120%;
  }

  .risk__content {
    flex-direction: column;
    gap: 30px;
    margin-bottom: 50px;
  }

  .risk__image {
    flex: auto;
    width: 100%;
    aspect-ratio: 16 / 9;
  }

  .risk__desc p {
    font-size: 14px;
    line-height: 1.8;
  }

  .risk__list {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .risk-card {
    padding: 25px 20px;
  }

  /* .risk-card::before {
    top: 25px;
    bottom: 25px;
  } */

  .risk-card__title {
    font-size: 16px;
  }

  .risk-card__text {
    font-size: 13px;
  }

  /* --- Feature --- */
  .feature {
    padding: 56px 0;
  }

  .feature .c-section-title-wrap {
    margin-bottom: 40px;
  }

  .feature .c-section-subtitle,
  .c-section-subtitle {
    font-size: 50px;
  }

  .feature__list {
    gap: 40px;
  }

  .feature-card {
    grid-template-columns: 1fr;
    gap: 20px;
    text-align: center;
  }

  .feature-card:nth-child(even) {
    grid-template-columns: 1fr;
  }

  .feature-card:nth-child(even) .feature-card__content,
  .feature-card:nth-child(even) .feature-card__image {
    grid-column: auto;
    grid-row: auto;
  }
.feature__inner .c-section-title{
  text-align: center;
}
  .feature-card__title {
    font-size: 20px;
    text-align: left;
  }

  .feature-card__title br {
    display: none;
  }

  .feature-card__text {
    font-size: 14px;
    text-align: left;
  }

  /* --- Solution --- */
  .solution__body {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .solution__lead {
    grid-column: auto;
  }

  .solution__image {
    min-height: 180px;
  }

  .solution__points {
    grid-template-columns: 1fr;
  }

  .solution-point h3 {
    font-size: 16px;
  }

  /* --- Reason --- */
  .reason__grid {
    gap: 20px;
  }

  .reason-card {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 22px 18px;
  }

  .reason-card__title {
    font-size: 22px;
  }

  .reason-card__num {
    font-size: 74px;
  }

  .reason-card__image {
    max-width: 220px;
  }

  /* --- Works --- */
  /* --- Works --- */
  .works {
    padding: 60px 0 0px;
  }

  .works .c-section-title-wrap {
    margin-bottom: 50px;
  }

  .works .c-section-subtitle {
    font-size: 50px;
  }

  /* ★ 大カードと小カードの間の余白を調整 */
  .works__featured {
    margin-bottom: 20px; 
  }

  /* ★ 大カードを小カードと同じ「縦積み」に */
  .works-main-card__link {
    flex-direction: column;
    gap: 0;
  }

  .works-main-card__image {
    flex: none;
    width: 100%;
    aspect-ratio: 16 / 10;
  }

  /* ★ 大カードのテキストサイズ・余白を小カードと完全に一致させる */
  .works-main-card__content {
    padding: 20px;
    width: 100%;
  }

  .works-main-card__company {
    font-size: 13px;
    margin: 0 0 6px;
  }

  .works-main-card__title {
    font-size: 16px;
    margin: 0 0 14px;
  }

  .works-main-card__tags {
    margin-bottom: 14px;
  }

  .works-main-card__text {
    font-size: 13px;
    margin: 14px 0 0; /* パートナー名として下マージンなしに合わせる */
  }

  /* --- 以下、小カードのスマホ設定（そのまま） --- */
  .c-link--more {
    font-size: 13px;
  }

  .works__grid {
    grid-template-columns: 1fr;
    gap: 20px;
    max-width: 440px;
    margin-inline: auto;
  }

  .works-card__body {
    padding: 20px;
  }

  .works-card__text {
    font-size: 13px;
  }

  .works-card__company {
    margin: 0 0 6px;
  }

  .works-card__title {
    font-size: 16px;
    margin: 0 0 14px;
  }

  .works-card__tags {
    margin-bottom: 14px;
  }

  .c-tags {
    gap: 8px;
  }

  .c-tag {
    font-size: 10px;
    padding: 5px 10px;
  }

  .works__footer {
    margin-top: 40px;
  }

  /* --- Flow --- */
  .flow-item {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 18px 16px;
  }

  .flow-item__num {
    font-size: 36px;
  }

  .flow-item__title {
    font-size: 18px;
  }

  /* .flow-item__image {
    max-width: 180px;
  } */

  /* --- FAQ --- */
  .faq {
    padding: 0 0vw 80px;
  }

  .faq__inner {
    padding: 50px 20px;
    border-radius: 16px;
  }

  .c-section-subtitle--faq {
    font-size: 60px;
  }

  .faq-item-static {
    padding-bottom: 30px;
    margin-bottom: 30px;
  }

  .faq-item-static__q {
    gap: 12px;
    margin-bottom: 16px;
  }

  .faq-item-static__num {
    font-size: 24px;
  }

  .faq-item-static__q-text {
    font-size: 16px;
    margin-top: 2px;
  }

  .faq-item-static__a {
    padding: 24px 20px;
  }

  .faq-item-static__a p {
    font-size: 14px;
  }

  /* --- CTA群 --- */
  .cta-banner__body {
    padding: 24px 16px;
  }

  .cta-banner__lead {
    font-size: 18px;
    line-height: 1.7;
  }

  .cta-banner__text {
    font-size: 14px;
    margin-bottom: 30px;
  }

  .cta-banner__text br {
    display: none;
  }

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

  .cta-banner__actions .c-btn {
    width: 100%;
  }

  .cta-mini__body {
    flex-direction: column;
    align-items: stretch;
    padding: 18px 16px;
  }

  .cta-mini__text {
    font-size: 22px;
    text-align: center;
  }

  /* --- ボトムCTA --- */
  .bottom-cta {
    border-radius: 8px 8px 0 0;
    margin-top: 60px;
  }

  .bottom-cta__inner {
    grid-template-columns: 1fr;
    padding: 0 5%;
  }

  .bottom-cta__image {
    width: 60%;
    margin: -40px auto 0;
  }

  .bottom-cta__content {
    padding: 30px 0 50px;
  }

  .bottom-cta__title {
    font-size: 28px;
    text-align: center;
  }

  .bottom-cta__sub {
    font-size: 16px;
  }

  .bottom-cta__text {
    font-size: 13px;
    text-align: center;
  }

  .bottom-cta__actions {
    grid-template-columns: 1fr;
  }

  .bottom-cta__btn,
  .bottom-cta__tel-link {
    height: 54px;
    font-size: 14px;
  }

  .bottom-cta__tel-num {
    font-size: 20px;
    margin: 0 10px 0 6px;
    padding-right: 10px;
  }

  .bottom-cta__tel-time {
    font-size: 11px;
  }

  .bottom-cta__sub-link {
    text-align: center;
  }

  /* --- Contact Form --- */
  .contact-page {
    padding-bottom: 60px;
  }

  .contact-lead {
    font-size: 14px;
    margin-bottom: 30px;
    text-align: left;
  }

  .c-form-wrapper {
    padding: 30px 20px;
  }

  .c-form__row {
    flex-direction: column;
    padding: 24px 0;
    gap: 12px;
  }

  .c-form__label {
    width: 100%;
    font-size: 15px;
  }

  .c-form__input input[type="text"],
  .c-form__input input[type="email"],
  .c-form__input input[type="tel"],
  .c-form__input textarea {
    padding: 14px;
    font-size: 16px;
  }

  .c-form__privacy {
    font-size: 14px;
    margin: 40px 0 30px;
  }

  .c-form__submit .c-btn {
    width: 100%;
  }

  /* --- Page Hero --- */
  .page-hero {
    margin-bottom: 40px;
  }
  .page-hero__inner {
    padding: 40px 16px;
  }
  .page-hero__title {
    font-size: 32px; /* スマホでは24pxくらいが綺麗に収まります */
  }
  .page-hero__text {
    font-size: 14px;
    text-align: left; /* スマホ時は長文が読みやすいように左揃えに */
  }
  .page-hero__actions {
    flex-direction: column; /* スマホではボタンを縦並びに */
    gap: 12px;
  }

  /* --- Partner --- */
  .partner-profile {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .partner-profile__grid {
    gap: 32px;
  }

  .partner-profile__name {
    font-size: 28px;
  }
  .p-partner-profile__name {
    font-size:28px;
  }
  .partner-profile__kana {
    font-size: 13px;
  }

  .partner-profile__area {
    margin-top: 24px;
    font-size: 14px;
  }

  .partner-profile__catch {
    margin-top: 16px;
    font-size: 18px;
  }

  .partner-profile__lead p {
    font-size: 14px;
  }

  .partner-profile__image {
    max-width: 100%;
  }

  .partner-detail-works,
  .partner-detail-movie {
    padding-top: 56px;
    padding-bottom: 56px;
  }

  /* --- Articles --- */
  .articles.section-block {
    padding: 48px 0 0;
  }

  .articles .article-list {
    border-radius: 8px;
  }

  .articles .article-row__link {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 20px 16px;
  }

  .articles .article-row__thumb {
    aspect-ratio: 16 / 9;
  }

  .articles .article-row__title {
    font-size: 16px;
    line-height: 1.5;
  }

  .articles .article-row__excerpt {
    margin-top: 8px;
    font-size: 13px;
    -webkit-line-clamp: 2;
  }

  .articles .article-row__more {
    padding-top: 12px;
    font-size: 13px;
  }

  .article-list {
    gap: 32px;
  }

  .article-row {
    padding-bottom: 32px;
  }

  .article-row__link {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .article-row__title {
    font-size: 18px;
  }

  .article-row__excerpt {
    font-size: 14px;
    -webkit-line-clamp: 2;
  }

  /* --- Works Archive --- */
  .works-archive-hero__inner {
    padding: 56px 0 50px;
  }

  .works-archive-hero__title {
    font-size: 34px;
    line-height: 1.35;
  }

  .works-archive-hero__text {
    margin-top: 16px;
    font-size: 13px;
    line-height: 1.8;
  }

  .works-archive-hero__actions {
    flex-direction: column;
    gap: 12px;
    margin-top: 24px;
  }

  .works-featured {
    padding-top: 34px;
    padding-bottom: 40px;
  }

  .works-slider {
    padding-bottom: 40px;
  }

  .works-slider-next,
  .works-slider-prev {
    display: none !important;
  }

  .works-featured-card__link {
    padding: 16px;
    gap: 16px;
  }

  .works-featured-card__title {
    font-size: 18px;
    line-height: 1.5;
    margin-bottom: 12px;
  }

  .works-featured-card__company,
  .works-featured-card__partner {
    font-size: 12px;
  }

  .works-featured-card__tags {
    margin-bottom: 16px;
  }

  .works-archive-list {
    padding-top: 20px;
    padding-bottom: 60px;
  }

  .works-archive-list__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .works-pagination {
    gap: 12px;
    margin-top: 40px;
    padding-top: 30px;
  }

  .works-pagination .page-numbers {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }

  /* --- Works Single --- */
  .works-single-hero__inner {
    padding: 56px 0 50px;
  }

  .works-single-hero__title {
    font-size: 34px;
    line-height: 1.35;
  }

  .works-single-hero__text {
    margin-top: 16px;
    font-size: 13px;
    line-height: 1.8;
  }

  .works-single-hero__actions {
    flex-direction: column;
    gap: 12px;
    margin-top: 24px;
  }

  .works-single-gallery {
    padding-top: 40px;
  }

  .works-single-gallery__company {
    font-size: 24px;
    margin-bottom: 24px;
  }

  .works-gallery__arrow {
    width: 54px;
    height: 54px;
  }

  .works-gallery__arrow span {
    width: 18px;
    height: 18px;
    border-top-width: 3px;
    border-right-width: 3px;
  }

  .works-gallery__thumbs {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 12px;
  }

  .works-gallery-main .swiper-button-prev,
  .works-gallery-main .swiper-button-next {
    display: none;
  }

  .works-single-concept {
    padding-bottom: 60px;
  }

  .works-single-concept__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .works-single-concept__title {
    margin-bottom: 18px;
    font-size: 20px;
  }

  .works-single-concept__text {
    font-size: 14px;
  }

  .works-single-concept__text p {
    font-size: 14px;
    line-height: 1.8;
  }

  .works-spec-table th,
  .works-spec-table td {
    padding: 16px;
    font-size: 13px;
  }

  .works-spec-table th {
    width: 35%;
  }

  .works-single-info {
    margin-top: 28px;
  }

  .works-single-info__table th,
  .works-single-info__table td {
    padding: 12px 14px;
    font-size: 13px;
  }

  .works-single-related {
    padding-top: 48px;
  }

  .works-single-related__grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  /* --- Movie --- */
  .movie-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .movie-card__text {
    font-size: 14px;
  }

  /* --- Download --- */
  .download-section,
  .movie-section,
  .article-section {
    padding: 48px 0;
  }

  .download-grid {
    grid-template-columns: 1fr;
    max-width: 400px;
    margin-inline: auto;
  }

  /* --- Useful Contents --- */
  .useful-hero {
    padding: 60px 0;
  }

  .useful-hero__title {
    font-size: 32px;
  }

  .useful-hero__text {
    font-size: 14px;
    text-align: left;
  }

  .useful-hero__text br {
    display: none;
  }

  .useful-hero__actions {
    flex-direction: column;
    gap: 16px;
  }

  .useful-hero__actions .c-btn {
    width: 100%;
  }

  .useful-section {
    padding: 56px 0;
  }

  /* --- DL Single --- */
  .dl-single-main {
    padding: 30px 20px;
  }

  .dl-single-title {
    font-size: 24px;
    margin-bottom: 24px;
  }

  .dl-single-body h2 {
    font-size: 20px;
    margin: 40px 0 20px;
  }

  .c-form-wrapper--dl {
    padding: 24px 20px;
  }

  /* --- Service Doc --- */
  .p-service-doc__hero {
    padding: 40px 20px;
    margin-bottom: 40px;
  }

  .p-service-doc__hero-title {
    font-size: 24px;
  }

  /* --- Footer LP --- */
  .lp-footer {
    padding: 38px 0 24px;
  }

  .lp-footer__nav ul {
    flex-direction: column;
    gap: 10px;
  }

  /* --- Footer Site --- */
  .site-footer__main {
    padding: 35px 0;
}
  .site-footer__topic-path {
    padding: 16px 5%;
  }

  .site-footer__topic-list li {
    font-size: 11px;
    margin-right: 12px;
    padding-right: 12px;
    margin-bottom: 8px;
  }

  .site-footer__inner {
    flex-direction: column;
  }

  .site-footer__brand {
    margin-bottom: 40px;
    text-align: center;
    width: 100%;
  }

  .site-footer__nav {
    flex-direction: column;
    gap: 20px;
    width: 100%;
  }

  .site-footer__col {
    text-align: center;
  }
.site-footer__col li{
  margin-bottom: 5px;
}
.site-footer__col a{
  font-size: 16px;
}
  .site-footer__legal li:not(:last-child)::after {
    display: none;
  }

  .site-footer__legal li {
    width: 100%;
    justify-content: center;
    margin-bottom: 6px;
  }
}
/* ==============================================
   プライバシーポリシー（規約系ページ）
============================================== */
.p-privacy {
  padding: 80px 0 120px;
  background-color: #fff;
}

.p-privacy__section {
  margin-bottom: 64px;
}

.p-privacy__section:last-child {
  margin-bottom: 0;
}

/* 見出し（レディクル風のソリッドな下線デザイン） */
.p-privacy__heading {
  font-size: 20px;
  font-weight: 700;
  color: #282c32;
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 2px solid #e2e8f0;
  letter-spacing: 0.05em;
}

.p-privacy__section p {
  font-size: 15px;
  line-height: 1.8;
  color: #374149;
  margin-bottom: 16px;
}

.p-privacy__section p:last-child {
  margin-bottom: 0;
}

/* 箇条書きリストのスタイル */
.p-privacy__section ol,
.p-privacy__section ul {
  margin: 0 0 16px 0;
  padding-left: 24px;
}

.p-privacy__section ol li,
.p-privacy__section ul li {
  font-size: 15px;
  line-height: 1.8;
  color: #374149;
  margin-bottom: 8px;
}

.p-privacy__section ol li:last-child,
.p-privacy__section ul li:last-child {
  margin-bottom: 0;
}

/* お問い合わせ窓口のボックス（視認性を高める） */
.p-privacy__contact-info {
  background-color: #f8f9fa;
  padding: 24px 32px;
  border-radius: 4px;
  border: 1px solid #e2e8f0;
  margin-top: 24px;
}

.p-privacy__contact-info p {
  margin-bottom: 8px;
}

/* スマホ表示の調整 */
@media (max-width: 767px) {
  .p-privacy {
    padding: 56px 0 80px;
  }
  .p-privacy__section {
    margin-bottom: 48px;
  }
  .p-privacy__heading {
    font-size: 18px;
  }
  .p-privacy__section p,
  .p-privacy__section ol li,
  .p-privacy__section ul li {
    font-size: 14px;
  }
  .p-privacy__contact-info {
    padding: 20px;
  }
}
@media (min-width: 768px) {
  .u-sp-only { display: none; }
}
@media (max-width: 767px) {
  .u-pc-only { display: none; }
}

/* ==============================================
   404エラーページのデザイン
============================================== */
.p-404 {
  position: relative;
  padding: 120px 0 160px;
  text-align: center;
  background-color: #f8fafc; /* 薄いグレー背景でクリーンな印象に */
  overflow: hidden;
  min-height: 60vh; /* 画面が縦に短い場合でも最低限の高さを確保 */
  display: flex;
  align-items: center;
}

.p-404__inner {
  position: relative;
  z-index: 1;
  width: 100%;
}

/* 背景の透かし「404」文字（プロの小技） */
.p-404__bg-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 280px;
  font-weight: 900;
  color: #e2e8f0; /* 背景に溶け込む薄い色 */
  z-index: -1;
  letter-spacing: 0.05em;
  line-height: 1;
  user-select: none; /* テキスト選択できないようにする */
}

/* メインタイトル */
.p-404__title {
  font-size: 32px;
  font-weight: 800;
  color: #1e293b;
  margin-bottom: 30px;
  letter-spacing: 0.05em;
}

/* 説明文 */
.p-404__desc {
  font-size: 16px;
  line-height: 1.8;
  color: #475569;
  margin-bottom: 50px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.p-404__desc p {
  margin-bottom: 12px;
}
.p-404__desc p:last-child {
  margin-bottom: 0;
}

/* 戻るボタンの配置 */
.p-404__actions {
  display: flex;
  justify-content: center;
}

/* 404専用のボタン微調整（少し横幅を広くとって押しやすく） */
.p-404__actions .c-btn {
  min-width: 320px;
}

/* ==============================================
   スマホ表示時の調整
============================================== */
@media (max-width: 767px) {
  .p-404 {
    padding: 80px 0 100px;
  }
  
  .p-404__bg-text {
    font-size: 140px; /* スマホ画面に合わせて透かし文字を縮小 */
  }

  .p-404__title {
    font-size: 22px;
    line-height: 1.6;
    margin-bottom: 24px;
  }

  .p-404__desc {
    font-size: 14px;
    margin-bottom: 40px;
    text-align: left; /* スマホでは左揃えの方が文章が読みやすい */
  }
  
  .p-404__actions .c-btn {
    width: 100%; /* スマホではボタンを横幅いっぱいに */
  }
}
.wpcf7-spinner{
      display: block;
      text-align: center;
      
    margin: 10px auto;
}