/* =============================================
   CSS Design System - 会社HP 雛形
============================================= */

/* --- Google Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700;900&family=Noto+Serif+JP:wght@400;700;900&family=Montserrat:wght@400;600;700;900&display=swap');

/* --- Variables --- */
:root {
  --color-primary: #0000cd;
  --color-primary-light: #0000ff;
  --color-primary-dark: #00008b;
  --color-accent: #ff6b00;
  /* 彩度の高いオレンジへ変更 */
  --color-accent-hover: #e65a00;
  --color-silver: #8e9aad;
  --color-light: #f5f6f8;
  --color-white: #ffffff;
  --color-text: #333333;
  --color-text-light: #666666;
  --color-border: #dde1e9;

  --font-jp: 'Noto Sans JP', sans-serif;
  --font-serif: 'Noto Serif JP', serif;
  --font-en: 'Montserrat', sans-serif;

  --header-h: 80px;
  --transition: 0.3s ease;
  --shadow: 0 3px 12px rgba(0, 0, 205, 0.08);
  --shadow-lg: 0 6px 20px rgba(0, 0, 205, 0.12);
  --radius: 6px;
  --section-py: 100px;
}

/* --- Reset & Base --- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-jp);
  color: var(--color-text);
  background: var(--color-white);
  line-height: 1.7;
  overflow-x: hidden;
}

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

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

ul {
  list-style: none;
}

/* --- UI Frame (Side curves) --- */
.side-curve {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 15vw;
  /* Width of the curve frame from side */
  max-width: 240px;
  min-width: 60px;
  z-index: 100;
  /* Above hero slides (z-index 1-3), under header (1000) */
  pointer-events: none;
  opacity: 0.45;
  /* About Usなどへスクロールしてももう少し青色が残るように透明度を抑制 */
  transition: opacity 0.1s linear;
  /* Smooth fade during scroll */
}

.side-curve svg {
  width: 100%;
  height: 100%;
  display: block;
}

.side-curve-left {
  left: 0;
}

.side-curve-right {
  right: 0;
}

/* --- Helper --- */
.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

.section-label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  /* Signage & Store Decorationの下の余白(16px)に統一 */
  margin-bottom: 48px;
}

.section-label .en {
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .15em;
  color: var(--color-accent);
  text-transform: uppercase;
}

.section-label .ja {
  font-size: 30px;
  font-weight: 700;
  color: #0000cd;
  line-height: 1.2;
}

.section-label.center {
  align-items: center;
  text-align: center;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 32px;
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  transition: var(--transition);
  text-transform: uppercase;
}

.btn-primary {
  background: #0000cd;
  color: var(--color-white);
  min-width: 260px;
  /* 幅を統一 */
  justify-content: center;
  font-size: 15px;
}

.btn-primary:hover {
  background: #0000ff;
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.btn-outline {
  background: transparent;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
}

.btn-outline:hover {
  background: var(--color-primary);
  color: var(--color-white);
}

.btn-outline-white {
  background: transparent;
  color: var(--color-white);
  border: 2px solid rgba(255, 255, 255, 0.6);
}

.btn-outline-white:hover {
  background: var(--color-white);
  color: var(--color-primary);
}

.btn-tel-num {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.btn-tel-time {
  display: inline;
}

.sp-br {
  display: none;
}

.btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* =============================================
   HEADER
============================================= */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-h);
  z-index: 1000;
  border-top: 2px solid rgba(255, 255, 255, 0.4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.7);
  transition: background var(--transition), box-shadow var(--transition), border var(--transition);
}

.header.scrolled {
  background: #0000cd;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

.header-inner {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 32px;
}

.header-logo {
  flex-shrink: 0;
  margin-right: auto;
}

.header-logo a {
  display: flex;
  align-items: center;
}

.header-logo .logo-img {
  height: 47px;
  /* 52pxの約90% */
  width: auto;
  object-fit: contain;
  display: block;
  transition: filter var(--transition);
}

@media (max-width: 1440px) {
  .header-logo .logo-img {
    zoom: 0.9;
    transform: scale(0.9);
    transform-origin: left center;
  }
}

/* 帯なし（スクロール前）: SVGを白抜きに */
.header:not(.scrolled) .logo-img {
  filter: brightness(0) invert(1);
}

/* 帯あり（スクロール後）: 常に白抜きを維持 */
.header.scrolled .logo-img {
  filter: brightness(0) invert(1);
}

.nav-shop-group {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.2);
  /* 半透明白（通常時） */
  margin-left: 20px;
  /* 前の項目（会社概要）との間隔を空ける */
  transition: var(--transition);
  position: relative;
}

/* 帯が出たとき（スクロール後）は半透明白に変更 */
.header.scrolled .nav-shop-group {
  background: rgba(255, 255, 255, 0.2);
}

.nav-shop-label {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: .03em;
  white-space: nowrap;
  margin-right: 4px;
}

.nav-shop-link {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1px 4px;
  /* さらに上下を狭く */
  border-radius: 4px;
  transition: var(--transition);
  background: #ffffff;
}

.nav-shop-link:hover {
  background: rgba(200, 205, 240, 0.4);
  /* 少し濃い紺色（半透明） */
  transform: translateY(-1px);
}

.shop-icon {
  width: 64px;
  height: 36px;
  object-fit: contain;
  display: block;
}

/* 白枠の丸アイコン枠（スマホ用のモバイルメニューで継続使用） */
.shop-icon-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: #ffffff;
  border-radius: 50%; /* 丸い白枠 */
  margin-right: 8px;
  padding: 2px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.18);
  flex-shrink: 0;
}

.shop-icon-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.nav {
  display: flex;
  align-items: center;
  gap: 6px;
}

.nav a {
  font-size: 15px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  padding: 6px 12px;
  border-radius: 3px;
  letter-spacing: .03em;
  transition: var(--transition);
}

.nav a:hover {
  color: var(--color-white);
  background: rgba(255, 255, 255, 0.1);
}

/* 帯なし: #0000cd背景・白文字 */
.nav-contact {
  margin-left: 20px;
  background: #0000cd !important;
  color: var(--color-white) !important;
  border-radius: 3px !important;
  padding: 8px 18px !important;
  position: relative;
}

.nav-contact:hover {
  background: #0000ff !important;
}

/* 帯あり: 白背景・紺色文字 */
.header.scrolled .nav-contact {
  background: var(--color-white) !important;
  color: #0000cd !important;
}

.header.scrolled .nav-contact:hover {
  background: #e8eaf6 !important;
  color: #0000ff !important;
}

.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  height: 100%;
  width: var(--header-h);
  background: #ffffff;
  border: none;
  border-radius: 0;
  margin-right: -32px;
  transition: background var(--transition);
  padding: 0;
}

.hamburger span {
  display: block;
  width: 32px;
  height: 3px;
  background: var(--color-primary);
  border-radius: 2px;
  transition: var(--transition);
}

.hamburger.open span:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}

.hamburger.open span:nth-child(2) {
  opacity: 0;
}

.hamburger.open span:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}

.mobile-menu {
  display: none;
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  background: var(--color-primary-dark);
  padding: 24px;
  z-index: 899;
}

.mobile-menu.open {
  display: block;
}

.mobile-menu a {
  display: flex; /* flexに変更して縦方向の中央寄せを容易に */
  align-items: center;
  padding: 18px 0;
  color: rgba(255, 255, 255, .9);
  font-size: 18px; /* 15pxから18pxへ120%拡大 */
  font-weight: 500;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  transition: var(--transition);
}

.mobile-menu a:hover {
  color: var(--color-white);
  padding-left: 8px;
}

/* =============================================
   HERO
============================================= */
.hero {
  position: relative;
  height: 100vh;
  min-height: 560px;
  overflow: hidden;
}

/* --- 垂直ロゴ (logo_pop_toushin.svg) --- */
.hero-vertical-logo {
  position: absolute;
  left: 0;
  bottom: 0;
  /* 左下にピッタリ */
  transform: scale(0.95) rotate(90deg) translateX(-100%);
  /* 左下基準で95%に縮小しつつ90度回転＋X方向戻しで左下起点の縦書き配置を実現 */
  transform-origin: left bottom;
  /* 回転軸を左下に */
  z-index: 20;
  opacity: 0;
  animation: fadeLeft 0.8s 1.2s forwards;
}

.hero-vertical-logo img {
  height: auto;
  width: 90vh;
  /* さらに縮小（画面高さの90%） */
  filter: brightness(0) invert(1);
  display: block;
  opacity: 0.2;
  /* 半透明に */
}

@media (max-width: 1440px) {
  .hero-vertical-logo img {
    /* 縮小（90vhの98% = 88.2vh）をwidthで直接指定して配置ズレを防ぐ */
    width: 88.2vh;
  }
}

@keyframes fadeLeft {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.hero-slides {
  position: fixed;
  inset: 0;
  z-index: -2;
}

.hero-slide {
  position: absolute;
  inset: 0;
  transform: translateY(-100%);
  opacity: 0;
  z-index: 1;
  transition: transform 1.2s cubic-bezier(0.77, 0, 0.175, 1), opacity 1.2s cubic-bezier(0.77, 0, 0.175, 1);
}

.hero-slide.active {
  transform: translateY(0);
  opacity: 1;
  z-index: 3;
}

.hero-slide.prev {
  transform: translateY(0);
  opacity: 0;
  z-index: 1;
  transition: opacity 1.2s cubic-bezier(0.77, 0, 0.175, 1);
}

.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.05);
  transition: transform 7s ease;
}

.hero-slide.active img {
  transform: scale(1);
}

.hero-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.1);
  z-index: -1;
  pointer-events: none;
}

.hero-center-catch {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateY(clamp(-180px, -20vh, -100px));
  /* さらに上に移動させる（元の120pxから変更） */
  z-index: 10;
  pointer-events: none;
}

.hero-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  padding: 0 32px clamp(60px, 10vh, 100px);
  /* 80px/15vh/160px からさらに小さくし、ブロック全体をドット付近まで下げる */
  padding-top: var(--header-h);
  z-index: 20;
  /* Ensure this is above side-curves (15) */
  pointer-events: none;
}

.hero-content>* {
  pointer-events: auto;
}

.hero-text-block {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  /* 右揃えに戻す */
  text-align: right;
  /* 右揃えに戻す */
  margin-right: clamp(80px, 15vw, 320px);
  /* Macbookでさらに左へ寄るようにvwと最大値を拡大 */

  /* フルHD基準で全体を90%に縮小（右下基準） */
  zoom: 0.9;
  /* Safari等用 */
  transform: scale(0.9);
  transform-origin: right bottom;
}

.hero-tag {
  font-family: var(--font-en);
  font-size: 14.4px;
  /* 12px × 120% */
  font-weight: 700;
  letter-spacing: .3em;
  color: var(--color-accent);
  /* 白からオレンジへ変更 */
  text-transform: uppercase;
  margin-bottom: 16px;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.7));
  /* 影を追加して可読性アップ */
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 1.0s 1.6s forwards;
  /* 塊の出現タイミングを大きく後ろへ（0.8s 0.3s -> 1.0s 1.6s） */
}

.hero-main-catch-img {
  width: 50%;
  /* 全画面の50%の幅 */
  height: auto;
  filter: brightness(0) invert(1) drop-shadow(0 4px 8px rgba(0, 0, 0, 0.7));
  /* SVGを白にし、透明度70%のシャドウでさらに読みやすくする */
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 1.2s 0.6s forwards;
  /* 0.8s 0.4s -> 1.2s 0.6s にゆっくり遅らせる */
}

.hero-title {
  font-size: clamp(24px, 2.5vw, 48px);
  /* 画面幅に応じて可変（スマホからPCまでなめらかに拡大縮小） */
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
  line-height: 1.4;
  letter-spacing: 0.05em;
  /* 文字間を少し空ける */
  margin-bottom: 24px;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.7));
  /* 影を追加して可読性アップ */
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 1.0s 1.8s forwards;
  /* (0.8s 0.5s -> 1.0s 1.8s) */
}

.hero-title span {
  color: #fff;
}

.hero-sub {
  font-size: clamp(14px, 1.25vw, 17px);
  color: rgba(255, 255, 255, 0.95);
  /* 少し白を強調して視認性向上 */
  max-width: 600px;
  line-height: 2.2;
  margin-bottom: 32px;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.7));
  /* 影を追加して可読性アップ */
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 1.0s 2.0s forwards;
  /* (0.8s 0.7s -> 1.0s 2.0s) */
}

.hero-btns {
  display: flex;
  justify-content: flex-end;
  /* 右揃えに戻す */
  gap: 16px;
  flex-wrap: wrap;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 1.0s 2.0s forwards;
}

.hero-btns .btn {
  font-size: 15px;
}

.hero-dots {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 20;
}

.hero-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: var(--transition);
  border: none;
}

.hero-dot.active {
  background: var(--color-accent);
  transform: scale(1.3);
}

.hero-scroll {
  position: absolute;
  bottom: 32px;
  right: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.95);
  font-family: var(--font-en);
  font-size: 10px;
  letter-spacing: .2em;
  z-index: 20;
}

.hero-scroll::after {
  content: '';
  display: block;
  width: 1px;
  height: 60px;
  background: linear-gradient(rgba(255, 255, 255, 0.95), transparent);
  animation: scrollLine 1.8s ease infinite;
}

@keyframes scrollLine {
  0% {
    transform: scaleY(0);
    transform-origin: top;
  }

  50% {
    transform: scaleY(1);
    transform-origin: top;
  }

  51% {
    transform: scaleY(1);
    transform-origin: bottom;
  }

  100% {
    transform: scaleY(0);
    transform-origin: bottom;
  }
}

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =============================================
   Z-index adjustments
============================================= */
.header {
  z-index: 1000;
  left: 0;
  right: 0;
}

.hero-vertical-logo {
  z-index: 20;
}

/* =============================================
   ABOUT セクション
============================================= */
.about {
  position: relative;
  z-index: 20;
  /* Above the hero elements */
  padding: clamp(60px, 10vh, 100px) 0;
  /* 上下余白（var(--section-py)固定値）を可変に縮小 */
  background: transparent;
  color: var(--color-white);
  min-height: 100vh;
  display: flex;
  align-items: center;
}

.about .section-label .ja {
  color: var(--color-white);
  font-size: clamp(20px, 3vw, 38px);
  /* Heroやサービスに合わせてタイトルも縮小 */
}

.about .section-label .en {
  color: var(--color-accent);
  /* 白からオレンジへ変更 */
}

.about-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 1180px;
  margin: 0 auto;
}

.about .section-label {
  align-items: center;
  text-align: center;
}

.about-text {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}



.about-lead {
  font-size: clamp(16px, 2vw, 24px);
  /* リード文の文字サイズ縮小 */
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: clamp(16px, 2.5vw, 24px);
  /* 下の余白を縮小 */
  line-height: 1.6;
}

.about-body {
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(13px, 1.2vw, 15px);
  /* 本文も少し縮小 */
  line-height: 1.8;
  margin-bottom: clamp(20px, 3vw, 32px);
  /* 隙間を縮小 */
}

.about-strengths {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 1.5vw, 16px);
  /* グリッドの間隔を縮小 */
  margin-bottom: clamp(32px, 5vw, 64px);
  /* ボタンとの距離を画面高に合わせて縮小 */
}

.strength-item {
  text-align: center;
  padding: clamp(20px, 3vw, 32px) clamp(16px, 2vw, 24px);
  /* 余白(padding)を可変に縮小 */
  background: rgba(255, 255, 255, 0.5);
  /* 文字が視認できるよう少し白を強める */
  backdrop-filter: blur(4px);
  border-radius: var(--radius);
  border-top: 3px solid #0000cd;
}

.strength-item .num {
  font-size: clamp(18px, 2vw, 24px);
  /* 数字部分の文字サイズ縮小 */
  font-weight: 700;
  color: #0000cd;
  line-height: 1.4;
  margin-bottom: clamp(8px, 1.5vw, 16px);
  /* 下の余白縮小 */
}

.strength-item .desc {
  font-size: clamp(12px, 1.1vw, 14px);
  /* 説明文の文字サイズ縮小 */
  font-weight: 400;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.6;
}

/* =============================================
   SERVICE セクション
============================================= */
.service {
  position: relative;
  z-index: 20;
  padding: clamp(40px, 6vh, 80px) 0;
  /* 上下余白をさらに縮小（80%ほど） */
  background: var(--color-white);
  /* 背景色を枠外・他セクションと同じ純白に統一し、隙間の色ズレを解消 */
  min-height: 100vh;
  display: flex;
  align-items: center;
}

.service .container {
  width: 100%;
  max-width: 1440px;
  /* 大画面でも大きく表示されるようにコンテナ幅を拡張 */
  position: relative;
  /* ボタンの基準位置とするため */
  padding: 0 max(24px, 4vw);
  /* 狭い画面でもカード幅が広がりすぎないように余白を少し取り入れる */
  overflow: hidden;
  /* 確実に4つ目以降を隠す */
}

.service .section-label .ja {
  font-size: clamp(20px, 3vw, 38px);
  /* タイトルサイズを約80%に縮小（48px->38px, 24px->20px） */
}

.service-slider {
  width: min(calc(100% - 130px), 1110px);
  /* 左右矢印ボタン用の空間を確保しつつ、カード3枚(354px×3)＋隙間2つ(24px×2)＝1110px に1pxの狂いもなく完全一致 */
  margin: 0 auto;
  position: relative;
  padding: 24px 0;
}

@media (max-width: 900px) {
  .service-slider {
    width: 100%;
  }
}

/* トラック部分のはみ出しを綺麗に防ぐ設定 */
.service-slider-inner {
  overflow: hidden;
  width: 100%;
}


.service-slider-controls {
  position: absolute;
  top: 50%;
  left: -65px;
  right: -65px;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
  z-index: 30;
  pointer-events: none;
}

@media (max-width: 900px) {

  /* スマホやタブレットなど狭い画面では重なる配置にする */
  .service-slider-controls {
    left: 8px;
    right: 8px;
  }
}


/* 常にボタンが表示されるようオーバーレイ表示も維持 */
.service {
  position: relative;
}

.service-slider-btn {
  pointer-events: auto;
  background: #0000cd;
  color: #fff;
  border: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: var(--shadow);
}

.service-slider-btn:hover {
  background: #0000ff;
  transform: scale(1.05);
}

.service-slider-btn svg {
  width: 28px;
  height: 28px;
}

.service-track {
  display: flex;
  gap: 24px;
  /* カード間の隙間(gap)を24pxに固定 */
  width: max-content;
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.service-card {
  width: 354px;
  /* 354px×3 + 24px×2 = 1110px により3枚目の右端切れと4枚目のはみ出しをダブルで100%防止 */
  flex-shrink: 0;
  background: var(--color-white);
  border-radius: var(--radius);
  border: 1px solid rgba(0, 0, 205, 0.08);
  /* 枠の輪郭を引き締めるスマートな細境界線 */
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 205, 0.06);
  /* ぼかし幅を8pxに抑えた、枠周りにはみ出さないスリムなシャドウ */
  transition: var(--transition);
  display: flex;
  flex-direction: column;
}

/* タブレット表示 (769px〜1024px) での取扱看板スライダーカード枠自体の拡大 (max-width: 440px) */
@media (max-width: 1024px) {
  .service-slider {
    width: calc(100% - 64px) !important;
    max-width: 440px !important; /* タブレット画面でカード枠自体を大きく拡大 */
    margin: 0 auto !important;
  }
  .service-card {
    width: calc(100vw - max(48px, 8vw) - 64px) !important;
    max-width: 440px !important; /* カード自体を迫力あるビッグサイズに拡大 */
  }
  .service-slider-controls {
    left: -80px !important; /* iPad Pro等のタブレット画面で左右ボタンの位置を外側へゆったり大きく広げる */
    right: -80px !important;
  }
  .service-slider-btn {
    width: 46px !important;
    height: 46px !important;
  }
  .service-slider-btn svg {
    width: 22px !important;
    height: 22px !important;
  }
}

/* スマホ表示 (768px以下) でのコンパクトなカード枠＆ボタン配置 */
@media (max-width: 768px) {
  .service-slider {
    max-width: 354px !important;
  }
  .service-card {
    max-width: 354px !important;
  }
  .service-slider-controls {
    left: -28px !important;
    right: -28px !important;
  }
  .service-slider-btn {
    width: 40px !important;
    height: 40px !important;
  }
  .service-slider-btn svg {
    width: 20px !important;
    height: 20px !important;
  }
}

.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 14px rgba(0, 0, 205, 0.12);
  /* ホバー時も幅を14pxに抑えたコンパクトで洗練された影 */
  border-color: rgba(0, 0, 205, 0.2);
}

.service-card-img {
  position: relative;
  overflow: hidden;
}

.service-card-img img {
  width: 100%;
  aspect-ratio: 1/1;
  /* 美しい正方形(1:1)のアスペクト比に設定 */
  object-fit: cover;
  transition: transform 0.5s ease;
}

.service-card:hover .service-card-img img {
  transform: scale(1.05);
}

.service-card-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  background: var(--color-accent);
  color: var(--color-white);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 2px;
  letter-spacing: .05em;
}

.service-card-body {
  padding: clamp(16px, 1.8vw, 24px) clamp(16px, 1.5vw, 22px);
  /* 余白をしっかり拡大 */
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-height: 220px;
}

.service-card-title {
  font-size: clamp(16px, 1.4vw, 21px);
  /* タイトル文字サイズを大きく視認性大幅アップ */
  font-weight: 700;
  color: #0000cd;
  margin-bottom: clamp(6px, 0.8vw, 12px);
  line-height: 1.4;
}

.service-card-desc {
  font-size: clamp(12px, 0.95vw, 15px);
  color: var(--color-text-light);
  line-height: 1.7;
  /* 行間も少し詰める */
  margin-bottom: clamp(10px, 1.2vw, 19px);
  flex-grow: 1;
  /* 余白を埋めて高さを押し下げる */
}

.service-card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--color-accent);
  text-transform: uppercase;
  transition: var(--transition);
  margin-top: auto;
  /* 一番下に揃える */
}

.service-card-link:hover {
  gap: 14px;
}

.service-card-link svg {
  width: 14px;
  height: 14px;
}

/* =============================================
   WORKS セクション
============================================= */
.works {
  position: relative;
  z-index: 20;
  padding: 60px 0;
  background-color: var(--color-primary);
  min-height: auto;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.works-bg {
  display: none;
}

.works .container {
  width: 100%;
  max-width: 100%;
  /* 全画面幅へ */
  padding: 0;
}

.works-header {
  padding: 0 5vw;
  /* ヘッダーには左右余白をつける */
}

.works .section-label {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}

.works .section-label .ja {
  font-size: clamp(20px, 3vw, 38px);
  /* 他のセクション等に合わせてタイトルも縮小 */
  color: var(--color-white);
  display: inline-block;
  box-sizing: border-box;
  text-align: center;
}

.works .section-label .en {
  color: var(--color-accent);
  display: inline-block;
  box-sizing: border-box;
  text-align: center;
}

.works-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1vw, 16px);
  /* 余白縮小 */
  margin-bottom: 0;
  /* タイトルとスライダーの隙間をなくして完全に詰める */
  padding: 0 5vw;
  /* ヘッダーには左右余白をつける */
}

.works-slider {
  width: 100%;
  overflow: hidden;
  padding: 20px 0;
}

.works-track {
  display: grid;
  /* 
    上下2行とし、各アイテムが「左上→左下→右上→右下...」と縦方向に詰まりながら横へ伸びていくよう設定します
  */
  grid-template-rows: repeat(2, auto);
  grid-auto-flow: column;
  grid-auto-columns: clamp(180px, 15vw, 280px);
  /* カラム幅を自動追加分に適用 */
  /* 画像1枚あたりの幅をさらに約80%に縮小（240->180, 320->280） */
  gap: clamp(12px, 1vw, 16px);
  /* 隙間も少し縮小 */
  width: max-content;
  animation: scrollWorks 20s linear infinite;
  /* ゆっくり横スライド（40sから20sに変更してスピードアップ） */
}

.works-track:hover {
  animation-play-state: paused;
}

.works-track.paused {
  animation-play-state: paused !important;
}

@keyframes scrollWorks {
  0% {
    transform: translateX(0);
  }

  100% {
    /* 1セット(18枚=24列分)移動したらループ。全体(48列=100%)の半分 = -50% */
    transform: translateX(calc(-50% - 8px));
    /* gapの半分を微調整(16px/2)等で完全につなぐ */
  }
}

.works-item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--color-primary);
  cursor: pointer;
  display: flex;
  flex-direction: column; /* Flexboxにして高さを画像に追従可能にする */
}

.works-item:nth-child(6n + 1),
.works-item:nth-child(6n + 5) {
  grid-column: span 2;
  /* 2枚分の幅 */
}

.works-item img {
  display: block;
  width: 100%;
  height: clamp(160px, 20vh, 200px); /* 修正前の画像高さに戻す */
  object-fit: cover;
  transition: transform 0.5s ease, opacity 0.3s;
  flex-grow: 1; /* 親枠が引き伸ばされた場合、画像も上下いっぱいに拡大する */
}

.works-item:nth-child(6n + 1) img,
.works-item:nth-child(6n + 5) img {
  height: clamp(220px, 30vh, 260px); /* 修正前の大きい方の画像高さに戻す */
}

.works-item:hover img {
  transform: scale(1.07);
  opacity: 0.6;
}

.works-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 14px 16px 12px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.78));
  transform: translateY(0); /* 写真が流れている時も常にテキストを表示 */
  transition: all 0.3s ease;
  z-index: 2;
  pointer-events: none;
}

.works-item:hover .works-caption {
  background: linear-gradient(transparent, rgba(0, 0, 205, 0.88));
}

.works-caption-cat {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: var(--color-accent) !important; /* スクロール中の写真内テキストをご指定のアクセントオレンジ(#ff6b00)に変更 */
  letter-spacing: .06em;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9); /* 暗い影をつけてスクロール中もオレンジ文字がくっきり立つ */
  margin-bottom: 0;
}

.works-caption-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-white);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}

/* =============================================
   FLOW セクション
============================================= */
.flow {
  padding: var(--section-py) 0;
  background: var(--color-primary);
  position: relative;
  overflow: hidden;
}

.flow::before {
  content: 'FLOW';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-en);
  font-size: 240px;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.03);
  white-space: nowrap;
  pointer-events: none;
}

.flow .section-label .en {
  color: var(--color-accent);
}

.company .section-label .ja {
  font-size: clamp(24px, 3.5vw, 48px);
}

.flow .section-label .ja {
  color: var(--color-white);
}

.flow-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  position: relative;
}

.flow-steps::before {
  content: '';
  position: absolute;
  top: 44px;
  left: 10%;
  right: 10%;
  height: 2px;
  background: rgba(255, 255, 255, 0.12);
}

.flow-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 12px;
  position: relative;
}

.flow-step-num {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  border: 2px solid rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin-bottom: 24px;
  position: relative;
  z-index: 1;
  transition: var(--transition);
}

.flow-step:hover .flow-step-num {
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.flow-step-num .step-en {
  font-family: var(--font-en);
  font-size: 10px;
  font-weight: 700;
  color: var(--color-accent);
  letter-spacing: .1em;
}

.flow-step:hover .flow-step-num .step-en {
  color: var(--color-white);
}

.flow-step-num .step-n {
  font-family: var(--font-en);
  font-size: 26px;
  font-weight: 900;
  color: var(--color-white);
  line-height: 1;
}

.flow-step-icon {
  font-size: 28px;
  margin-bottom: 16px;
}

.flow-step-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: 8px;
}

.flow-step-desc {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.7;
}

/* =============================================
   NEWS セクション
============================================= */
.news {
  padding: var(--section-py) 0;
  background: var(--color-white);
}

.news-inner {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 80px;
  align-items: start;
}



.news-item {
  display: grid;
  grid-template-columns: auto 80px 1fr;
  gap: 16px;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid var(--color-border);
  transition: var(--transition);
}

.news-item:hover {
  padding-left: 8px;
}

.news-date {
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-silver);
  white-space: nowrap;
}

.news-cat {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 2px;
  text-align: center;
}

.news-cat.news-info {
  background: var(--color-primary);
  color: var(--color-white);
}

.news-cat.news-works {
  background: var(--color-accent);
  color: var(--color-white);
}

.news-cat.news-recruit {
  background: #16a085;
  color: var(--color-white);
}

.news-title {
  font-size: 14px;
  color: var(--color-text);
  font-weight: 500;
  transition: var(--transition);
}

.news-item:hover .news-title {
  color: var(--color-accent);
}

/* =============================================
   COMPANY セクション
============================================= */
.company {
  padding: clamp(40px, 8vh, 80px) 0;
  /* 会社概要の上下余白（var(--section-py)固定値）をさらに可変に縮小 */
  background: var(--color-light);
}

.company .section-label .ja {
  font-size: clamp(20px, 3vw, 38px);
  /* Worksや他のセクションのタイトルと等しいサイズに合わせる */
}

.company-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  /* 左右要素の隙間を縮小（80->40） */
  align-items: start;
  margin-bottom: 50px;
}

.company-table {
  width: 100%;
  border-collapse: collapse;
}

.company-table tr {
  border-bottom: 1px solid var(--color-border);
}

.company-table th {
  padding: 16px 20px 16px 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--color-primary);
  white-space: nowrap;
  vertical-align: top;
  width: 120px;
}

.company-table td {
  padding: 16px 0;
  font-size: 14.5px;
  color: var(--color-text-light);
  line-height: 1.7;
}

.company-logos {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 4vw, 40px);
  /* ロゴ同士の間隔を縮小 */
}

.company-logos img {
  width: 80%;
  /* お客様の指定通り80%に縮小（元は最大でレスポンシブ用の幅を取っていたものを固定可変化） */
  max-width: 240px;
  /* 大きくなりすぎないための上限値 */
  height: auto;
  object-fit: contain;
}

/* =============================================
   CTA バナー
============================================= */
.cta {
  padding: 100px 0;
  background: linear-gradient(135deg, #0000cd 0%, #0000ff 100%);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.025'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.cta-inner {
  position: relative;
}

.cta-title {
  font-size: clamp(20px, 3vw, 38px);
  /* 会社概要のタイトルサイズ（20px〜38px）に合わせる */
  font-weight: 900;
  color: var(--color-white);
  margin-bottom: 16px;
}

.cta-sub {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 44px;
}

.cta-btns {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.cta-btns .btn {
  background: var(--color-white) !important;
  color: #0000cd !important;
  border: 2px solid var(--color-white) !important;
  width: 390px;
  max-width: 100%;
  justify-content: center;
}

.cta-btns .btn:hover {
  background: #e8eaf6 !important;
  border-color: #e8eaf6 !important;
  color: #0000ff !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

/* =============================================
   FOOTER
============================================= */
.footer {
  background: var(--color-primary-dark);
  padding: 64px 0 0;
}

.footer-top {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 60px;
  padding-bottom: 64px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-brand .logo-en {
  font-family: var(--font-en);
  font-size: 24px;
  font-weight: 900;
  color: var(--color-white);
  letter-spacing: .05em;
  display: block;
  margin-bottom: 6px;
}

.footer-brand .logo-ja {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: .1em;
  display: block;
  margin-bottom: 20px;
}

.footer-brand p {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.9;
  margin-bottom: 24px;
}

.footer-nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}

.footer-nav-group h4 {
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 700;
  color: var(--color-white);
  letter-spacing: .15em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.footer-nav-group ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-nav-group a {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  transition: var(--transition);
}

.footer-nav-group a:hover {
  color: var(--color-white);
  padding-left: 6px;
}

.footer-instagram {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.footer-instagram:hover {
  padding-left: 0 !important;
}

.footer-instagram svg {
  width: 33px;
  height: 33px;
}

.footer-bottom {
  padding: 24px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-bottom p {
  font-size: 12px;
  color: rgba(255, 255, 255, .35);
  font-family: var(--font-en);
}

.footer-bottom-links {
  display: flex;
  gap: 24px;
}

.footer-bottom-links a {
  font-size: 12px;
  color: rgba(255, 255, 255, .35);
  transition: var(--transition);
}

.footer-bottom-links a:hover {
  color: rgba(255, 255, 255, .7);
}

/* =============================================
   スクロールアニメーション
============================================= */
.reveal {
  opacity: 0;
  transform: translateY(60px);
  /* より深い位置から現れるように変更 */
  transition: opacity 2.5s cubic-bezier(0.165, 0.84, 0.44, 1), transform 2.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 {
  transition-delay: 0.8s;
}

.reveal-delay-2 {
  transition-delay: 1.6s;
}

.reveal-delay-3 {
  transition-delay: 2.4s;
}

.reveal-delay-4 {
  transition-delay: 3.2s;
}

/* =============================================
   ページトップへ
============================================= */
.page-top {
  position: fixed;
  bottom: 32px;
  right: 32px;
  width: 48px;
  height: 48px;
  background: var(--color-accent);
  color: var(--color-white);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: var(--transition);
  z-index: 800;
  box-shadow: var(--shadow);
}

.page-top.show {
  opacity: 1;
  pointer-events: auto;
}

.page-top:hover {
  background: var(--color-accent-hover);
  transform: translateY(-3px);
}

.page-top svg {
  width: 18px;
  height: 18px;
}

/* =============================================
   SUBPAGE: OVERRIDE & HEADER
============================================= */
.page-header {
  position: relative;
  padding: 130px 0 50px;
  background: var(--color-primary);
  text-align: center;
}
.page-header::before {
  display: none;
}

/* パララックス背景用レイヤー */
.page-header-bg {
  display: none;
}
.page-header-inner {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.page-header-title {
  font-size: clamp(28px, 4vw, 42px);
  color: var(--color-white);
  font-weight: 700;
  margin-bottom: 0;
  letter-spacing: 0.05em;
  display: inline-block;
  box-sizing: border-box;
  text-align: center;
}
.page-header-sub {
  font-family: var(--font-en);
  font-size: 14px;
  color: var(--color-accent);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: inline-block;
  box-sizing: border-box;
  text-align: center;
}

.breadcrumb {
  background: var(--color-light);
  padding: 16px 0;
  font-size: 12px;
  color: var(--color-text-light);
  border-bottom: 1px solid var(--color-border);
}
.breadcrumb .container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.breadcrumb a {
  color: var(--color-primary);
  transition: var(--transition);
}
.breadcrumb a:hover {
  color: var(--color-accent);
}
.breadcrumb span.sep {
  margin: 0 8px;
  color: var(--color-silver);
}

/* =============================================
   SUBPAGE: SERVICE DETAILS
============================================= */
.service-details {
  padding: var(--section-py) 0;
  background: var(--color-white);
  position: relative;
  z-index: 20;
}

.service-details .container {
  width: 80% !important; /* service.htmlのメインコンテンツ幅をご指定通りの80%に設定 */
  max-width: 1080px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.service-num-badge {
  display: inline-block;
  background: var(--color-accent);
  color: var(--color-white);
  font-family: var(--font-en);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 2px;
  letter-spacing: .05em;
  vertical-align: middle;
  margin-right: 12px;
  transform: translateY(-3px);
}

.service-detail-item {
  display: flex;
  align-items: center;
  gap: 60px;
  margin-bottom: 100px;
  position: relative;
  z-index: 1;
  scroll-margin-top: calc(var(--header-h, 80px) + 90px); /* 固定ヘッダーと重ならないように位置を調整（PCでの見栄えを考慮し広めに調整） */
}
.service-detail-item:last-child {
  margin-bottom: 0;
}
.service-detail-item:nth-child(even) {
  flex-direction: row-reverse;
  padding: 60px 0;
}
.service-detail-item:nth-child(even)::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  background: #f0f2f5; /* 彩度を落とした上品なクールグレー背景に変更 */
  z-index: -1;
}

.service-detail-text {
  flex: 1;
}
.service-detail-text h3 {
  font-size: 28px;
  color: #0000cd;
  font-weight: 700;
  margin-bottom: 20px;
  line-height: 1.4;
}
.service-detail-text .lead {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 24px;
  color: var(--color-text);
  line-height: 1.6;
}
.service-detail-text .body {
  font-size: 15px;
  color: var(--color-text-light);
  margin-bottom: 32px;
  white-space: pre-wrap;
}
.service-detail-examples {
  background: var(--color-light);
  padding: 24px;
  border-radius: var(--radius);
}
.service-detail-examples h4 {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--color-primary);
}
.service-detail-examples ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}
.service-detail-examples li {
  font-size: 14px;
  display: flex;
  align-items: center;
  color: var(--color-text-light);
}
.service-detail-examples li::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 4px;
  background: var(--color-accent);
  border-radius: 50%;
  margin-right: 8px;
}

.service-detail-gallery {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 16px;
}
.service-detail-gallery .main-img {
  grid-column: 1 / -1;
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: var(--radius);
  background: #eeeeee; /* dummy fallback */
}
.service-detail-gallery .sub-img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: var(--radius);
  background: #eeeeee; /* dummy fallback */
}

/* =============================================
   レスポンシブ・ブレイクポイント設計 (RESPONSIVE BREAKPOINTS)
   1. PC (Desktop): 1025px 以上 (ベースCSSスタイル)
   2. タブレット (Tablet): 769px 〜 1024px (@media (max-width: 1024px))
   3. スマホ (Mobile): 768px 以下 (@media (max-width: 768px))
============================================= */

/* ---------------------------------------------
   2. タブレット表示 (TABLET: max-width: 1024px)
   - iPad Air (820px), iPad Pro (834px/1024px), タブレット横持ち・縦持ち共通
--------------------------------------------- */
@media (max-width: 1024px) {
  .nav {
    display: none !important;
  }

  .hamburger {
    display: flex !important;
  }

  .about-strengths {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    max-width: 680px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .strength-item {
    padding: 32px 28px !important; /* タブレット時、枠自体の内側余白をゆったり大きく拡張 */
    border-top-width: 4px !important;
    border-radius: 12px !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04) !important;
  }

  .strength-item .num {
    font-size: 24px !important; /* タブレット時、見出しタイトル数字テキストをドカンと拡大 */
    margin-bottom: 14px !important;
  }

  .strength-item .desc {
    font-size: 16.5px !important; /* タブレット時、詳細説明文を大きくゆったりと読みやすく拡大 */
    line-height: 1.75 !important;
  }

  .process-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    max-width: 520px !important; /* タブレット画面で枠の幅が広すぎないよう程よい横幅にギュッと引き締める */
    margin: 40px auto !important; /* 左右中央寄せ */
  }

  .process-item {
    padding: 24px 28px !important; /* タブレット時、プロセス枠自体の内側余白をゆったり大きく確保 */
  }

  .process-num {
    font-size: 14.5px !important; /* タブレット時、プロセス番号タグを拡大 */
    padding: 4px 12px !important;
  }

  .process-title {
    font-size: 21px !important; /* タブレット時、プロセスタイトルをドカンと拡大 */
    margin-bottom: 12px !important;
  }

  .process-desc {
    font-size: 16.5px !important; /* タブレット時、プロセス説明文を大きくゆったりと読みやすく拡大 */
    line-height: 1.7 !important;
  }

  /* タブレット・スマホ版：縦並びプロセスの背後を貫く美しい縦方向のグラデーション帯（太さ12px） */
  .process-grid::before {
    display: block !important;
    content: '';
    position: absolute;
    top: 20px;
    bottom: 20px;
    left: 50%;
    right: auto;
    width: 12px;
    height: auto;
    transform: translateX(-50%);
    background: linear-gradient(180deg, rgba(29, 32, 136, 0.03) 0%, rgba(29, 32, 136, 1) 40%, rgba(29, 32, 136, 1) 60%, var(--color-accent) 80%, var(--color-accent) 100%);
    z-index: -1;
    border-radius: 10px;
  }

  .process-grid::after {
    display: block !important;
    content: '';
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 15px solid var(--color-accent);
    border-bottom: none;
    z-index: -1;
  }

  .about-inner {
    gap: 48px;
  }

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

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

  .works-item:first-child,
  .works-item:nth-child(5) {
    grid-column: span 2;
  }

  .flow-steps {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }

  .flow-steps::before {
    display: none;
  }

  /* タブレット時：index.htmlのCompanyコンテンツ幅をcompany.htmlの幅(680px)と100%完全統一 */
  .company .container,
  .company-inner,
  .company-map,
  .contact-section .contact-card {
    max-width: 680px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  .company-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .company-inner>.company-logos {
    order: -1;
  }

  .footer-nav {
    grid-template-columns: repeat(2, 1fr);
  }

  /* タブレット時 service.html：文字が上、写真が下の縦一列レイアウトへ統一 */
  .service-detail-item,
  .service-detail-item:nth-child(even) {
    flex-direction: column !important;
    gap: 36px !important;
    margin-bottom: 80px !important;
  }

  .service-detail-text {
    width: 100% !important;
  }

  .service-detail-gallery {
    width: 100% !important;
  }
}

/* ---------------------------------------------
   3. スマートフォン表示 (MOBILE: max-width: 768px)
   - iPhone / Android 等のスマートフォン全般
--------------------------------------------- */
@media (max-width: 768px) {
  body {
    font-size: 115%; /* スマホ時の全体の基準文字サイズをスケールアップ */
  }

  .side-curve {
    width: 30px;
    min-width: auto;
  }

  .header {
    left: 0;
    right: 0;
    background: var(--color-primary) !important;
    border-top: none !important;
    border-bottom: none !important;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3) !important;
  }

  .hamburger {
    margin-right: -20px;
  }

  :root {
    --section-py: 72px;
  }

  .header-inner {
    padding: 0 20px;
  }

  /* スマホ時：会社概要(company.html)等を開いた瞬間にテキスト・カードをミリ秒の遅延もなく即時表示 */
  .contact-section .contact-card,
  .company-page-intro,
  .page-header-inner {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
  }

  .service-details .container {
    padding-left: 0 !important; /* スマホ時のservice.htmlコンテンツ幅のパディングを完全に0にする */
    padding-right: 0 !important;
  }

  .service-detail-item,
  .service-detail-item:nth-child(even) {
    flex-direction: column;
    gap: 32px;
    margin-bottom: 64px;
  }
  
  .service-detail-text h3 {
    font-size: 24px !important; /* スマホ時の見出しサイズを1.2倍へ拡大 (20px->24px) */
    margin-bottom: 12px !important;
  }

  .service-detail-text .lead {
    font-size: 20px !important; /* スマホ時のリード文を大きく拡大 (18px->20px) */
    margin-bottom: 16px !important;
    line-height: 1.6 !important;
  }

  .service-detail-text .body {
    font-size: 17px !important; /* スマホ時の詳細本文を大きく拡大 (16px->17px) */
    margin-bottom: 24px !important;
    line-height: 1.7 !important;
  }

  .service-detail-examples {
    padding: 16px 20px !important; /* スマホ用に余白を少し引き締める */
  }

  .service-detail-examples h4 {
    font-size: 16px !important; /* 13px -> 16px (1.2倍) */
    margin-bottom: 8px !important;
  }

  .service-detail-examples li {
    font-size: 15px !important; /* 12.5px -> 15px (1.2倍) */
  }
  
  .service-detail-gallery {
    width: 100%;
  }

  .about-strengths {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .about-lead {
    font-size: 19px !important; /* スマホ時のAbout Usリード文を大きく */
  }

  .about-body {
    font-size: 16px !important; /* スマホ時のAbout Us本文「東進では、形やデザインを〜」を大きく拡大 */
    line-height: 1.8 !important;
  }

  .strength-item .num {
    font-size: 21.5px !important; /* スマホ時1.2倍拡大 */
  }

  .strength-item .desc {
    font-size: 14.5px !important; /* スマホ時1.2倍拡大 */
  }

  .page-header {
    padding: 100px 0 30px;
  }

  .page-header-inner {
    gap: 8px;
  }






  .hero-content {
    padding: 0 28px;
    padding-top: var(--header-h);
    justify-content: flex-end !important; /* ボタンが画面の一番下に位置するよう下寄せに配置 */
    align-items: center !important; /* スマホでブロック全体を左右中央寄せ */
    padding-bottom: 130px !important; /* Safariなどのツールバー干渉を防ぐため、下部余白を広げて上へ押し上げる */
  }

  .hero-main-catch-img {
    width: 90% !important; /* スマホでキャッチコピーを画面幅90%に拡大 */
  }

  .hero-text-block {
    width: 100% !important; /* 横幅いっぱいに広げて中央寄せを安定化 */
    align-items: center !important; /* スマホで要素を中央寄せ */
    text-align: center !important; /* スマホでテキストを中央寄せ */
    margin-right: 0 !important;
    transform: none !important;
    zoom: 1 !important;
  }

  .hero-tag {
    font-size: clamp(10px, 3.1vw, 14.5px) !important; /* スマホ端末の文字サイズを1.2倍へ拡大 */
    letter-spacing: .15em !important; /* 文字間を調整して極小画面での収まりを最適化 */
    white-space: nowrap !important; /* 変な位置で自動改行するのを完全に防止 */
    margin-bottom: 12px !important;
  }

  .hero-title {
    text-align: center !important;
    font-size: clamp(19px, 5.8vw, 29px) !important; /* 1.2倍へ拡大 (16-24px -> 19-29px) */
  }

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

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

  .hero-sub {
    font-size: clamp(13px, 3.8vw, 16px) !important; /* 1.2倍へ拡大 (11-13px -> 13-16px) */
    line-height: 1.7 !important; /* スマホで読みやすい最適な行間に調整 */
    max-width: 100% !important;
    text-align: center !important;
  }

  .hero-btns {
    justify-content: center !important; /* スマホでボタンも中央に配置 */
  }

  .hero-dots {
    display: none !important; /* スマホ時はスライド画像のドットインジケーターを非表示にする */
  }

  .hero-scroll {
    display: none;
  }

  .service-slider {
    width: calc(100% - 64px) !important; /* 左右に計64pxのボタン用余白を確保 */
    max-width: 290px !important; /* スマホで一番程よく収まる上品な横幅に制限 */
    margin: 0 auto !important;
  }

  .service-card {
    /* flexコンテナのmax-contentバグによる横はみ出しを防ぎ、スライダー幅と1pxの狂いもなく完全一致させる明確な幅指定 */
    width: calc(100vw - max(48px, 8vw) - 64px) !important;
    max-width: 290px !important;
  }

  .service-card-img img {
    aspect-ratio: 1/1 !important; /* スマホ時も綺麗な正方形(1:1)のアスペクト比に設定 */
  }

  .service-card-body {
    min-height: auto !important; /* 最小高さ(160px〜228px)の縛りを解除し、スマホでの縦への無駄な伸びを完全防止 */
    padding: 14px 16px !important; /* パディングをスマートに最適化 */
  }

  .service-card-title {
    font-size: 17px !important; /* スマホ用カードタイトルを1.2倍へ */
    margin-bottom: 6px !important;
  }

  .service-card-desc {
    font-size: 14.5px !important; /* スマホ時の説明文をより大きく拡大 (13px->14.5px) */
    line-height: 1.55 !important;
    margin-bottom: 12px !important; /* 下部余白を最適化 */
  }

  .service-slider-controls {
    left: -32px !important; /* ボタン(直径32px)をスライダー外側に完全に押し出し、画面端ギリギリへ寄せ配置 */
    right: -32px !important;
  }

  .service-slider-btn {
    width: 32px !important; /* スマホ向けにボタンをもっと小さくし、テキストとの被りを極限まで最小化 */
    height: 32px !important;
  }

  .service-slider-btn svg {
    width: 16px !important; /* 矢印アイコンもボタンに合わせてさらに小さく縮小 */
    height: 16px !important;
  }

  .company .container {
    padding-left: 28px !important; /* スマホ時のindex.html Companyコンテンツ幅を画面端から端へ寄りすぎないよう引き締める */
    padding-right: 28px !important;
  }

  .company-table th {
    font-size: 15.5px !important; /* スマホ時の見出しテキストを大きく拡大 */
    width: 90px !important;
    padding: 12px 10px 12px 0 !important;
  }

  .company-table td {
    font-size: 15px !important; /* スマホ時の会社概要内容テキストを大きく拡大 */
    line-height: 1.75 !important;
    padding: 12px 0 !important;
  }

  .about-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .about-img::after {
    display: none;
  }

  .about-strengths {
    grid-template-columns: repeat(3, 1fr);
  }

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

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

  .works-item:first-child,
  .works-item:nth-child(5) {
    grid-column: span 2;
  }

  .works-caption {
    transform: translateY(0);
  }

  .flow-steps {
    grid-template-columns: 1fr;
  }

  .news-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .news-item {
    grid-template-columns: auto auto 1fr;
  }

  .works-header {
    flex-direction: column;
    align-items: center; /* 他の主要セクションと統一してスマホ時もセンター合わせに変更 */
    gap: 16px;
  }

  .footer-top {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .footer-brand p {
    font-size: 15.5px !important; /* スマホ時のブランド説明文を拡大 (13px->15.5px) */
    line-height: 1.8 !important;
    color: rgba(255, 255, 255, 0.7) !important;
  }

  .footer-nav {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }

  .footer-nav-group h4 {
    font-size: 15px !important; /* スマホ時のナビグループ見出しを拡大 (12px->15px) */
    margin-bottom: 14px !important;
  }

  .footer-nav-group a {
    font-size: 15.5px !important; /* スマホ時のフッターリンクテキストを拡大 (13px->15.5px) */
    color: rgba(255, 255, 255, 0.75) !important;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }

  .footer-bottom p {
    font-size: 13.5px !important; /* スマホ時のコピーライトテキストを拡大 (12px->13.5px) */
    color: rgba(255, 255, 255, 0.5) !important;
  }

  .cta-sub {
    font-weight: 700 !important;
    color: rgba(255, 255, 255, 0.95) !important;
  }

  .cta-btns {
    flex-direction: column;
    align-items: center;
  }

  .cta-btns .btn {
    width: 100% !important;
    max-width: 290px !important;
  }

  .btn-tel {
    flex-direction: column !important;
    gap: 4px !important;
    padding: 12px 24px !important;
    justify-content: center !important;
  }

  .btn-tel-num {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    font-size: 24px !important;
  }

  .btn-tel-num svg {
    width: 22px !important;
    height: 22px !important;
    stroke-width: 2.5 !important;
  }

  .btn-tel-time {
    display: block !important;
    font-size: 13px !important;
    opacity: 0.85 !important;
  }
}

@media (max-width: 480px) {
  .works-grid {
    grid-template-columns: 1fr;
  }

  .works-item:first-child,
  .works-item:nth-child(5) {
    grid-column: span 1;
  }

  .about-strengths {
    grid-template-columns: 1fr;
  }

  .footer-nav {
    grid-template-columns: 1fr;
  }
}

/* --- Scroll Lock --- */
html.no-scroll {
  scroll-behavior: auto !important;
}

body.no-scroll {
  position: fixed !important;
  left: 0 !important;
  width: 100% !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

/* =============================================
   WORKS MODAL (LIGHTBOX)
============================================= */
.works-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(24, 28, 38, 0.88); /* 彩度を落とした上品なダークブルーグレー */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  overscroll-behavior: none;
}

.works-modal.show {
  opacity: 1;
  pointer-events: auto;
}

.works-modal-content-wrap {
  position: relative;
  max-width: 90%;
  max-height: 80%;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: scale(0.95);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.works-modal.show .works-modal-content-wrap {
  transform: scale(1);
}

.works-modal-img {
  max-width: 100%;
  max-height: 75vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.works-modal-caption {
  margin-top: 20px;
  text-align: center;
  color: var(--color-white);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.works-modal-caption-cat {
  display: inline-block;
  font-size: clamp(11px, 1vw, 13px);
  font-weight: 700;
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0;
}

.works-modal-caption-title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  margin: 0;
}

.works-modal-close {
  position: absolute;
  top: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--color-white);
  font-size: 32px;
  font-weight: 300;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: all 0.3s ease;
  z-index: 10000;
}

.works-modal-close:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  transform: rotate(90deg) scale(1.1);
}

@media (max-width: 768px) {
  .works-modal-close {
    top: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    font-size: 28px;
  }
  .works-modal-caption-cat {
    font-size: 15.5px !important; /* スマホ時のモーダルカテゴリテキストを大きく拡大 */
    margin-bottom: 4px !important;
  }
  .works-modal-caption-title {
    font-size: 20px !important; /* スマホ時のモーダル作品タイトルを大きく拡大 (15px->20px) */
    line-height: 1.5 !important;
  }
}
}

/* =============================================
   COMPANY MAP (Google Maps)
============================================= */
.company-map {
  margin-top: 40px;   /* company.htmlの地図上の間隔(40px)と完全統一 */
  width: 100%;        /* テーブルと同じ幅(100%)に統一 */
  margin-left: auto;
  margin-right: auto;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(24, 28, 38, 0.08);
  transition: all 0.4s ease;
  line-height: 0;
}

.company-map:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
}

.company-map iframe {
  width: 100%;
  height: 400px;
  display: block;
}

@media (max-width: 768px) {
  .company-map {
    margin-top: 30px;
    width: 100%;
  }
  .company-map iframe {
    height: 300px;
  }
}

/* =============================================
   CONTACT FORM SECTION & PREMIUM UI
============================================= */
.contact-section {
  padding: 80px 0 120px 0;
  background: var(--color-light);
  min-height: calc(100vh - var(--header-h));
  position: relative;
  z-index: 1;
}

.contact-card {
  max-width: 720px;
  margin: 0 auto;
  background: var(--color-white);
  border-radius: 12px;
  box-shadow: 0 12px 48px rgba(26, 39, 68, 0.08);
  border: 1px solid rgba(26, 39, 68, 0.04);
  padding: 50px 60px;
  position: relative;
  overflow: hidden;
  transition: all 0.5s ease;
}

@media (max-width: 768px) {
  .contact-card {
    padding: 35px 24px;
    margin: 0 16px;
  }
  .contact-intro {
    font-size: 18px !important; /* スマホ時1.2倍拡大 */
  }
  .contact-estimate-note {
    font-size: 17px !important; /* スマホ時1.2倍拡大 */
  }
}

.contact-intro {
  text-align: center;
  margin-bottom: 40px;
  color: var(--color-text-light);
  font-size: 15px;
}

.contact-estimate-note {
  background-color: var(--color-light);
  border-left: 4px solid var(--color-primary);
  padding: 24px;
  margin-bottom: 40px;
  border-radius: 4px;
  font-size: 14px;
  line-height: 1.6;
}

.contact-estimate-note .note-title {
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 10px;
}

.contact-estimate-note p {
  margin-bottom: 12px;
  color: var(--color-text);
}

.contact-estimate-note ul {
  list-style-type: none;
  padding-left: 0;
}

.contact-estimate-note li {
  margin-bottom: 8px;
  position: relative;
  padding-left: 15px;
  color: var(--color-text-light);
}

.contact-estimate-note li::before {
  content: "■";
  position: absolute;
  left: 0;
  color: var(--color-primary);
  font-size: 10px;
  top: 1px;
}


.form-group {
  margin-bottom: 30px;
  position: relative;
}

.form-label-group {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.form-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: 0.05em;
}

.badge-required {
  background: var(--color-accent);
  color: var(--color-white);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
  letter-spacing: 0.05em;
  line-height: 1.2;
}

.badge-optional {
  background: var(--color-silver);
  color: var(--color-white);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
  letter-spacing: 0.05em;
  line-height: 1.2;
}


.form-control {
  width: 100%;
  padding: 14px 18px;
  font-family: var(--font-jp);
  font-size: 16px; /* iOS自動ズーム防止 */
  color: var(--color-text);
  background-color: #fafbfc;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  transition: all 0.3s ease;
  outline: none;
}

.form-control:focus {
  background-color: var(--color-white);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(26, 39, 68, 0.08);
}

.form-control.error {
  border-color: #e74c3c;
  background-color: #fff9f9;
}

.form-control.error:focus {
  box-shadow: 0 0 0 4px rgba(231, 76, 60, 0.1);
}

textarea.form-control {
  resize: vertical;
  min-height: 160px;
  line-height: 1.6;
}

.error-msg {
  color: #e74c3c;
  font-size: 12px;
  font-weight: 500;
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
  animation: slideInDown 0.3s ease forwards;
}

@keyframes slideInDown {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.form-submit-wrap {
  text-align: center;
  margin-top: 40px;
}

.btn-submit {
  width: 100%;
  max-width: 320px;
  padding: 16px 40px;
  font-size: 15px;
  font-weight: 700;
  color: var(--color-white);
  background: var(--color-accent);
  border: none;
  border-radius: 50px;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(255, 107, 0, 0.25);
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  position: relative;
  overflow: hidden;
}

.btn-submit::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: all 0.6s ease;
}

.btn-submit:hover {
  background: var(--color-accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(255, 107, 0, 0.35);
}

.btn-submit:hover::after {
  left: 100%;
}

.btn-submit:active {
  transform: translateY(0);
}

.btn-submit:disabled {
  background: var(--color-silver);
  box-shadow: none;
  cursor: not-allowed;
}

/* --- SPA Thanks Screen --- */
.contact-thanks {
  display: none;
  text-align: center;
  padding: 40px 10px;
  animation: fadeIn 0.6s ease forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.thanks-icon-wrap {
  width: 80px;
  height: 80px;
  margin: 0 auto 30px auto;
  position: relative;
}

.success-checkmark {
  width: 80px;
  height: 80px;
}

.success-checkmark .check-icon {
  width: 80px;
  height: 80px;
  position: relative;
  border-radius: 50%;
  box-sizing: content-box;
  border: 4px solid #4CAF50;
}

.success-checkmark .check-icon::before {
  top: 3px;
  left: -2px;
  width: 30px;
  transform-origin: 100% 50%;
  border-radius: 100px 0 0 100px;
}

.success-checkmark .check-icon::after {
  top: 0;
  left: 30px;
  width: 60px;
  transform-origin: 0 50%;
  border-radius: 0 100px 100px 0;
}

.success-checkmark .check-icon::before, .success-checkmark .check-icon::after {
  content: '';
  height: 100px;
  position: absolute;
  background: #ffffff;
  transform: rotate(-45deg);
}

.success-checkmark .check-icon .icon-line {
  height: 5px;
  background-color: #4CAF50;
  display: block;
  border-radius: 2px;
  position: absolute;
  z-index: 10;
}

.success-checkmark .check-icon .icon-line.line-tip {
  top: 46px;
  left: 14px;
  width: 25px;
  transform: rotate(45deg);
  animation: icon-line-tip 0.75s;
}

.success-checkmark .check-icon .icon-line.line-long {
  top: 38px;
  right: 8px;
  width: 47px;
  transform: rotate(-45deg);
  animation: icon-line-long 0.75s;
}

.success-checkmark .check-icon .icon-circle {
  top: -4px;
  left: -4px;
  position: absolute;
  z-index: 10;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 4px solid rgba(76, 175, 80, 0.5);
  box-sizing: content-box;
}

.success-checkmark .check-icon .icon-fix {
  top: 8px;
  width: 5px;
  left: 26px;
  z-index: 1;
  height: 85px;
  position: absolute;
  transform: rotate(-45deg);
  background-color: #ffffff;
}

@keyframes icon-line-tip {
  0% {
    width: 0;
    left: 1px;
    top: 19px;
  }
  54% {
    width: 0;
    left: 1px;
    top: 19px;
  }
  70% {
    width: 50px;
    left: -8px;
    top: 37px;
  }
  84% {
    width: 17px;
    left: 21px;
    top: 48px;
  }
  100% {
    width: 25px;
    left: 14px;
    top: 46px;
  }
}

@keyframes icon-line-long {
  0% {
    width: 0;
    right: 46px;
    top: 54px;
  }
  65% {
    width: 0;
    right: 46px;
    top: 54px;
  }
  84% {
    width: 55px;
    right: 0px;
    top: 35px;
  }
  100% {
    width: 47px;
    right: 8px;
    top: 38px;
  }
}

.thanks-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 20px;
  letter-spacing: 0.05em;
}

.thanks-text {
  font-size: 15px;
  color: var(--color-text-light);
  line-height: 2;
  margin-bottom: 40px;
}

.btn-thanks-home {
  max-width: 260px;
}

/* --- PRIVACY POLICY STYLES --- */
.policy-intro {
  font-size: 16px;
  line-height: 1.8;
  color: var(--color-text-light);
  margin-bottom: 40px;
  border-left: 3px solid var(--color-accent);
  padding-left: 15px;
}

.policy-block {
  margin-bottom: 45px;
}

.policy-block:last-child {
  margin-bottom: 0;
}

.policy-title-sub {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 18px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-border);
  position: relative;
  letter-spacing: 0.05em;
}

.policy-title-sub::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 40px;
  height: 2px;
  background: var(--color-accent);
}

.policy-text {
  font-size: 15px;
  line-height: 1.8;
  color: var(--color-text);
  margin-bottom: 15px;
}

.policy-list {
  margin: 15px 0 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.policy-list li {
  font-size: 15px;
  line-height: 1.8;
  color: var(--color-text);
  position: relative;
  padding-left: 20px;
}

.policy-list li::before {
  content: '•';
  position: absolute;
  left: 5px;
  color: var(--color-accent);
  font-weight: 700;
}

.policy-list-alpha {
  list-style-type: none;
  margin: 15px 0 20px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.policy-list-alpha li {
  font-size: 15px;
  line-height: 1.8;
  color: var(--color-text);
  background: #fafbfc;
  border: 1px solid rgba(26, 39, 68, 0.04);
  padding: 10px 16px;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.policy-list-alpha li:hover {
  background: var(--color-white);
  border-color: rgba(255, 107, 0, 0.2);
  box-shadow: 0 4px 12px rgba(26, 39, 68, 0.04);
  transform: translateX(3px);
}

.policy-contact-card {
  background: #fafbfc;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 24px;
  margin-top: 15px;
  display: inline-block;
  min-width: 280px;
  box-shadow: 0 4px 12px rgba(26, 39, 68, 0.02);
}

.policy-contact-name {
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 8px;
}

.policy-contact-info {
  font-size: 14px;
  color: var(--color-text-light);
  line-height: 1.6;
}

/* =============================================
   COMPANY PAGE & PROCESS GRID STYLES
============================================= */
.company-page-intro {
  text-align: center;
  margin-bottom: 50px;
}

.company-page-lead {
  font-size: clamp(16px, 1.4vw, 20px);
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.8;
  margin-bottom: 30px;
}

.company-page-body {
  font-size: clamp(14px, 1.1vw, 15px);
  color: var(--color-text);
  line-height: 1.9;
  max-width: 680px;
  margin: 0 auto;
}

/* 一貫対応のプロセスグリッド */
.process-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 15px;
  max-width: 960px; /* 5つの枠の横幅をギュッと引き締めてバランスを最適化 */
  margin: 40px auto 60px auto; /* 左右中央寄せ */
  position: relative; /* 帯の基準位置とするため追加 */
  z-index: 1;
}

/* PC版：横並びプロセスの背後を通る美しいグラデーション帯（太さ12px） */
.process-grid::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 40px;
  right: 40px;
  height: 12px; /* 以前の倍の太さに変更 */
  /* 左側（01側）の透過度を極限まで下げて極めて薄く透けさせ、徐々に不透明になってオレンジへ向かうグラデーション。05側（80%以降）は完全に枠のオレンジと同じ色にする */
  background: linear-gradient(90deg, rgba(29, 32, 136, 0.03) 0%, rgba(29, 32, 136, 1) 40%, rgba(29, 32, 136, 1) 60%, var(--color-accent) 80%, var(--color-accent) 100%);
  transform: translateY(-50%);
  z-index: -1; /* カードの背後に配置 */
  border-radius: 10px;
}

/* PC版：帯の終端（右端）を指し示す美しい右向きの三角矢印（▶） */
.process-grid::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 28px; /* 帯の右端にぴったり合体するように微調整 */
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid var(--color-accent); /* 終点と同じオレンジ */
  z-index: -1;
  transition: all 0.3s ease;
}

@media (max-width: 992px) {
  .process-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  /* 992px〜768pxの間（中画面3カラム時）は、帯と矢印が繋がらなくなるため一時的に非表示 */
  .process-grid::before,
  .process-grid::after {
    display: none;
  }
}

@media (max-width: 576px) {
  .process-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

.process-card {
  background: var(--color-white);
  border-radius: 8px;
  padding: 24px 20px;
  text-align: center;
  border: 1px solid var(--color-accent);
  box-shadow: 0 8px 24px rgba(26, 39, 68, 0.04);
  position: relative; /* 帯より前面に出すために追加 */
  z-index: 2;
}

/* =============================================
   PROCESS SECTION (Dedicated Section)
============================================= */
.process-section {
  padding: 100px 0 80px 0;
  background: #e6ecf2; /* ブルーグレーの系統を維持しつつ、少し明るく透明感のあるアイスブルーグレー背景に変更 */
  position: relative;
  z-index: 1;
}

.process-section .section-label .ja {
  font-size: clamp(20px, 3vw, 38px); /* 会社概要や施工実績の見出しサイズと完全に統一 */
}

.process-section-lead {
  text-align: center;
  color: var(--color-text-light);
  margin-top: -10px;
  margin-bottom: 40px;
  font-size: 15px;
  line-height: 1.7;
}

@media (max-width: 768px) {
  .process-section {
    padding: 70px 0 50px 0;
  }
  .process-section .process-grid {
    margin-left: 40px !important;
    margin-right: 40px !important;
  }
  .process-grid {
    grid-template-columns: 1fr !important; /* 768px以下で縦並びに統一して崩れを防止 */
    gap: 20px !important;
  }
  /* スマホ版：縦並びプロセスの背後を貫く美しい縦方向のグラデーション帯（太さ12px） */
  .process-grid::before {
    display: block !important;
    content: '';
    position: absolute;
    top: 20px;
    bottom: 20px;
    left: 50%;
    right: auto;
    width: 12px; /* 以前の倍の太さに変更 */
    height: auto;
    transform: translateX(-50%);
    /* 上側（01側）の透過度を極限まで下げて極めて薄く透けさせ、徐々に不透明になってオレンジへ向かう縦グラデーション。05側（80%以降）は完全に枠のオレンジと同じ色にする */
    background: linear-gradient(180deg, rgba(29, 32, 136, 0.03) 0%, rgba(29, 32, 136, 1) 40%, rgba(29, 32, 136, 1) 60%, var(--color-accent) 80%, var(--color-accent) 100%);
    z-index: -1;
    border-radius: 10px;
  }
  /* スマホ版：縦帯の最下端を指し示す美しい下向きの三角矢印（▼） */
  .process-grid::after {
    display: block !important;
    content: '';
    position: absolute;
    bottom: 8px; /* 縦帯の最下端にぴったり合体するように微調整 */
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 15px solid var(--color-accent); /* 下向きの三角（▼） */
    border-bottom: none;
    z-index: -1;
  }
  /* スマホ版：プロセステキストの1.2倍拡大 */
  .process-section-lead {
    font-size: 15.5px !important; /* PROCESS 01のリード説明文(15.5px)と完全に同じ大きさに統一 */
    margin-top: 0 !important;
    margin-bottom: 24px !important;
  }
  .process-num {
    font-size: 13.5px !important;
  }
  .process-title {
    font-size: 19.5px !important;
  }
  .process-desc {
    font-size: 15.5px !important;
  }
}

.process-num {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: var(--color-accent);
  background: rgba(255, 107, 0, 0.1); /* 枠のオレンジ（#ff6b00 / rgb(255,107,0)）と完全に同じ色相の透過背景 */
  padding: 2px 8px;
  border-radius: 20px;
  margin-bottom: 12px;
  letter-spacing: 0.05em;
}

.process-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 10px;
}

.process-desc {
  font-size: 13px;
  color: var(--color-text-light);
  line-height: 1.6;
}

/* 追加のメッセージブロック */
.message-block {
  background: linear-gradient(135px, rgba(29, 32, 136, 0.03), rgba(255, 165, 0, 0.02));
  border-radius: 12px;
  padding: 50px 60px;
  margin-bottom: 80px;
  border-left: 5px solid var(--color-primary);
}

@media (max-width: 768px) {
  .message-block {
    padding: 35px 24px;
  }
  .message-title {
    font-size: 22px !important; /* スマホ時1.2倍拡大 */
  }
  .company-page-lead {
    font-size: 22px !important; /* 「ご相談から施工まで、一貫対応」の.message-title(22px)と完全に同じ大きさに統一 */
    line-height: 1.6 !important;
  }
  .message-text {
    font-size: 17px !important; /* スマホ時1.2倍拡大 */
  }
}

.message-title {
  font-size: clamp(18px, 1.5vw, 22px);
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 25px;
}

.message-text {
  font-size: clamp(14px, 1.1vw, 15px);
  color: var(--color-text);
  line-height: 2;
}