/*
Theme Name: セトナミ V6
Theme URI: https://setonami.com/
Author: 株式会社セトナミ
Author URI: https://setonami.com/
Description: 株式会社セトナミ 公式テーマ。地域フリーマガジン・コーポレートサイト用。
Version: 1.0.6
License: Private
Text Domain: setonami-v6
*/

/* ============================================================
   RESET & BASE
============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  line-height: 1.8;
  color: #1a1a2e;
  background: #ffffff;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; transition: opacity .2s; }
a:hover { opacity: .75; }
img { max-width: 100%; height: auto; display: block; }
ul { list-style: none; }

/* ============================================================
   VARIABLES
============================================================ */
:root {
  --yellow: #F5C800;
  --yellow-dark: #d4a800;
  --blue-deep: #003F8A;
  --blue-mid: #0057C0;
  --blue-light: #e8f3ff;
  --blue-pale: #f0f7ff;
  --white: #ffffff;
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-400: #9ca3af;
  --gray-600: #4b5563;
  --gray-800: #1f2937;
  --text: #1a1a2e;
  --radius: 12px;
  --radius-sm: 6px;
  --shadow: 0 4px 24px rgba(0,63,138,.08);
  --shadow-md: 0 8px 40px rgba(0,63,138,.12);
  --transition: .3s ease;
  --container: 1140px;
}

/* ============================================================
   UTILITIES
============================================================ */
.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }

.section { padding: 96px 0; }
.section-light  { background: var(--white); }
.section-blue-light { background: var(--blue-pale); }
.section-blue-dark  { background: var(--blue-deep); }

.section-header { text-align: center; margin-bottom: 56px; }
.section-eyebrow {
  display: inline-block;
  font-family: 'Montserrat', sans-serif;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--blue-mid);
  background: var(--blue-light);
  padding: 4px 16px;
  border-radius: 99px;
  margin-bottom: 12px;
}
.section-title {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 900;
  line-height: 1.35;
  color: var(--text);
}
.section-desc {
  margin-top: 16px;
  color: var(--gray-600);
  font-size: .95rem;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.section-header-light .section-eyebrow { color: var(--yellow); background: rgba(245,200,0,.15); }
.title-light  { color: var(--white); }
.desc-light   { color: rgba(255,255,255,.8); }
.eyebrow-light { color: var(--yellow) !important; }

/* BUTTONS */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  border-radius: 99px;
  font-weight: 700;
  font-size: .95rem;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition), opacity var(--transition);
}
.btn-primary {
  background: var(--yellow);
  color: var(--blue-deep);
  box-shadow: 0 4px 20px rgba(245,200,0,.35);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(245,200,0,.45); opacity: 1; }
.btn-ghost {
  background: transparent;
  color: var(--blue-deep);
  border: 2px solid var(--blue-mid);
}
.btn-ghost:hover { background: var(--blue-light); opacity: 1; }
.btn-sm { padding: 10px 24px; font-size: .875rem; }

/* ============================================================
   HEADER
============================================================ */
#site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--gray-200);
  transition: box-shadow var(--transition);
}
#site-header.scrolled { box-shadow: var(--shadow-md); }
.header-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  height: 68px;
  gap: 32px;
}
.logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.logo-corp { font-weight: 900; font-size: 1rem; color: var(--blue-deep); letter-spacing: .04em; }
.logo img { height: 32px; width: auto; }

#global-nav { margin-left: auto; }
#global-nav ul { display: flex; align-items: center; gap: 4px; }
#global-nav ul li a {
  display: block;
  padding: 8px 14px;
  font-size: .875rem;
  font-weight: 600;
  color: var(--gray-800);
  border-radius: var(--radius-sm);
  transition: background var(--transition), color var(--transition);
}
#global-nav ul li a:hover { background: transparent; color: var(--blue-mid); opacity: 1; }
.nav-cta {
  background: var(--yellow) !important;
  color: var(--blue-deep) !important;
  border-radius: 99px !important;
  font-weight: 700 !important;
  margin-left: 8px;
}
.nav-cta:hover { opacity: .85 !important; }

#hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  margin-left: auto;
}
#hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--blue-deep);
  border-radius: 2px;
  transition: transform .3s, opacity .3s;
}

/* ============================================================
   HERO
============================================================ */
#hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  position: relative;
  overflow: hidden;
  padding-top: 68px;
}

/* Canvasをヒーロー全体に広げる */
#hero-canvas {
  position: absolute;
  top: 0; left: 0;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none;
  z-index: 0;
}
.waves-wrap {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 120px;
  pointer-events: none;
}
.wave { position: absolute; bottom: 0; left: 0; width: 100%; opacity: .18; z-index: 1; }
.wave path { fill: inherit !important; }
.wave1 { fill: #0057C0 !important; animation: waveMove 8s ease-in-out infinite alternate; }
.wave2 { fill: #003F8A !important; animation: waveMove 11s ease-in-out infinite alternate-reverse; opacity: .12; }
.wave3 { fill: #003F8A !important; animation: waveMove 9s ease-in-out infinite alternate; opacity: .10; }
.wave4 { fill: #0057C0 !important; animation: waveMove 13s ease-in-out infinite alternate-reverse; opacity: .08; }
.wave5 { fill: #003F8A !important; animation: waveMove 7s ease-in-out infinite alternate; opacity: .10; }
@keyframes waveMove {
  from { transform: translateX(0); }
  to   { transform: translateX(-30px); }
}
.hero-scanline {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(to bottom, transparent 0, transparent 3px, rgba(0,63,138,.018) 3px, rgba(0,63,138,.018) 4px);
  pointer-events: none; z-index: 1;
}
.hero-content {
  position: relative; z-index: 2;
  text-align: center;
  padding: 48px 32px 180px;
  max-width: 820px;
  border: 1px solid rgba(0,87,192,.12);
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 4px;
}
.hero-corner { position: absolute; width: 18px; height: 18px; border-color: var(--blue-mid); border-style: solid; }
.hero-corner-tl { top: -1px; left: -1px;  border-width: 2px 0 0 2px; }
.hero-corner-tr { top: -1px; right: -1px; border-width: 2px 2px 0 0; }
.hero-corner-bl { bottom: -1px; left: -1px;  border-width: 0 0 2px 2px; }
.hero-corner-br { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }
.hero-label {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Montserrat', sans-serif;
  font-size: .68rem; font-weight: 700; letter-spacing: .2em;
  color: var(--blue-mid); margin-bottom: 20px; opacity: .7;
}
.hero-label-dot {
  display: inline-block; width: 6px; height: 6px;
  border-radius: 50%; background: var(--blue-mid);
  animation: dotPulse 2s ease-in-out infinite;
}
@keyframes dotPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .4; transform: scale(.6); }
}
.hero-heading {
  font-size: clamp(2.4rem, 6vw, 3.6rem);
  font-weight: 900; line-height: 1.15;
  color: var(--blue-deep); margin-bottom: 20px;
  opacity: 0; transform: translateY(16px);
  transition: opacity .8s ease, transform .8s ease;
}
.hero-heading.glitch-in { opacity: 1; transform: translateY(0); }
.hero-sub {
  font-size: 1rem; color: var(--gray-600);
  max-width: 640px; margin: 0 auto 32px;
  min-height: 3.6em; display: block;
}
.hero-cta { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ============================================================
   NEWS / 新着一覧
============================================================ */
#news { }

.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 48px;
}

.news-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform var(--transition), box-shadow var(--transition);
  display: flex;
  flex-direction: column;
}
.news-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); opacity: 1; }

.news-card-thumb {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--blue-light);
}
.news-card-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.news-card:hover .news-card-thumb img { transform: scale(1.04); }

/* サムネなし時のプレースホルダ */
.news-card-thumb-placeholder {
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--blue-light) 0%, var(--blue-pale) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue-mid);
  font-size: 2rem;
  opacity: .5;
}

.news-card-body {
  padding: 20px 20px 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.news-card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.news-card-cat {
  font-family: 'Montserrat', sans-serif;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--blue-mid);
  background: var(--blue-light);
  padding: 3px 10px;
  border-radius: 99px;
}

/* カテゴリ別カラー */
.news-card-cat[data-cat="magazine"] { background: #fff8e1; color: #b7791f; }
.news-card-cat[data-cat="web"]      { background: var(--blue-light); color: var(--blue-mid); }
.news-card-cat[data-cat="sns"]      { background: #fce7f3; color: #9d174d; }
.news-card-cat[data-cat="event"]    { background: #d1fae5; color: #065f46; }
.news-card-cat[data-cat="news"]     { background: var(--gray-100); color: var(--gray-600); }

.news-card-date {
  font-family: 'Montserrat', sans-serif;
  font-size: .72rem;
  font-weight: 600;
  color: var(--gray-400);
  letter-spacing: .04em;
}

.news-card-title {
  font-size: .95rem;
  font-weight: 700;
  color: var(--blue-deep);
  line-height: 1.5;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-card-excerpt {
  font-size: .82rem;
  color: var(--gray-600);
  line-height: 1.7;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-card-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .8rem;
  font-weight: 700;
  color: var(--blue-mid);
  margin-top: 4px;
  transition: gap .2s;
}
.news-card:hover .news-card-more { gap: 8px; }

.news-cta { text-align: center; }

/* ============================================================
   SINGLE POST
============================================================ */
.single-wrap {
  max-width: 800px;
  margin: 0 auto;
  padding: 120px 24px 96px;
}
.single-header { margin-bottom: 40px; }
.single-meta {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 16px;
}
.single-cat {
  font-family: 'Montserrat', sans-serif;
  font-size: .72rem; font-weight: 700; letter-spacing: .1em;
  color: var(--blue-mid); background: var(--blue-light);
  padding: 4px 14px; border-radius: 99px;
}
.single-date {
  font-family: 'Montserrat', sans-serif;
  font-size: .8rem; font-weight: 600; color: var(--gray-400);
}
.single-title {
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 900; line-height: 1.4; color: var(--blue-deep);
  margin-bottom: 24px;
}
.single-thumb {
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 40px;
  box-shadow: var(--shadow-md);
}
.single-thumb img { width: 100%; }
.single-content {
  font-size: .95rem; line-height: 2; color: var(--gray-800);
}
.single-content h2 {
  font-size: 1.25rem; font-weight: 800; color: var(--blue-deep);
  margin: 40px 0 16px;
  padding-left: 12px;
  border-left: 4px solid var(--yellow);
}
.single-content h3 {
  font-size: 1.05rem; font-weight: 700; color: var(--blue-deep);
  margin: 32px 0 12px;
}
.single-content p { margin-bottom: 20px; }
.single-content img { border-radius: var(--radius-sm); margin: 24px 0; }
.single-content a { color: var(--blue-mid); text-decoration: underline; }
.single-nav {
  margin-top: 56px; padding-top: 32px;
  border-top: 1px solid var(--gray-200);
  display: flex; gap: 16px; justify-content: space-between; flex-wrap: wrap;
}
.single-nav a {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .88rem; font-weight: 700; color: var(--blue-mid);
  padding: 10px 20px; border: 1px solid var(--gray-200);
  border-radius: 99px; transition: background var(--transition);
}
.single-nav a:hover { background: var(--blue-light); opacity: 1; }

/* ============================================================
   ARCHIVE / NEWS一覧ページ
============================================================ */
.archive-wrap { padding: 120px 0 96px; }
.archive-header { text-align: center; margin-bottom: 56px; }
.archive-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-bottom: 56px;
}

/* ページネーション */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  font-family: 'Montserrat', sans-serif;
  font-size: .88rem;
  font-weight: 700;
  color: var(--blue-deep);
  border: 1px solid var(--gray-200);
  background: var(--white);
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.pagination .page-numbers:hover { background: var(--blue-light); border-color: var(--blue-mid); opacity: 1; }
.pagination .page-numbers.current {
  background: var(--blue-mid);
  color: var(--white);
  border-color: var(--blue-mid);
}
.pagination .prev, .pagination .next { width: auto; padding: 0 16px; border-radius: 99px; }

/* ============================================================
   PROBLEM / ABOUT / SERVICE / ACHIEVEMENTS / MEDIA / FAQ / COMPANY / CONTACT
   (静的サイトから移植 – 変更なし)
============================================================ */
.problem-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
  margin-bottom: 48px;
}
.problem-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 28px 24px;
  box-shadow: var(--shadow);
  transition: transform var(--transition), box-shadow var(--transition);
}
.problem-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.problem-badge, .answer-badge {
  display: inline-block;
  font-family: 'Montserrat', sans-serif;
  font-size: .7rem; font-weight: 800; letter-spacing: .12em;
  border-radius: 4px; padding: 3px 10px; margin-bottom: 8px;
}
.problem-badge { background: #1a1a2e; color: #fff; }
.answer-badge  { background: var(--blue-mid); color: #fff; margin-top: 16px; }
.problem-text  { font-size: .9rem; color: var(--gray-800); font-weight: 500; }
.answer-text   { font-size: .875rem; color: var(--gray-600); }
.problem-cta { text-align: center; }

.timeline { position: relative; max-width: 720px; margin: 0 auto 64px; }
.timeline::before {
  content: ''; position: absolute; left: 72px; top: 0; bottom: 0;
  width: 2px; background: linear-gradient(to bottom, var(--blue-mid), rgba(0,87,192,.1));
}
.timeline-item { display: flex; gap: 24px; margin-bottom: 40px; position: relative; }
.timeline-year {
  width: 72px; flex-shrink: 0;
  font-family: 'Montserrat', sans-serif; font-size: 1.15rem; font-weight: 800;
  color: var(--blue-mid); padding-top: 2px; text-align: right;
  position: relative; letter-spacing: .02em;
}
.timeline-year::after {
  content: ''; position: absolute; right: -15px; top: 8px;
  width: 12px; height: 12px; background: var(--yellow);
  border: 2px solid var(--blue-mid); border-radius: 50%;
}
.timeline-content {
  background: var(--white); border: 1px solid var(--gray-200);
  border-radius: var(--radius); padding: 20px 24px; flex: 1; box-shadow: var(--shadow);
}
.timeline-content h3 { font-size: 1rem; font-weight: 700; margin-bottom: 6px; color: var(--blue-deep); }
.timeline-content p  { font-size: .875rem; color: var(--gray-600); }
.timeline-badges { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.timeline-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .8rem; font-weight: 600; padding: 5px 12px;
  border-radius: 6px; text-decoration: none; transition: opacity .2s;
}
.timeline-badge:hover { opacity: .8; }
.badge-award    { background: #fff8e1; color: #b7791f; border: 1px solid #f6d860; }
.badge-official { background: #e8f3ff; color: var(--blue-deep); border: 1px solid #bee3f8; }

.flow-wrap { text-align: center; }
.flow-title { font-size: 1.2rem; font-weight: 800; color: var(--blue-deep); margin-bottom: 32px; }
.flow-steps { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 16px; }
.flow-step {
  background: var(--white); border: 1px solid var(--gray-200);
  border-radius: var(--radius); padding: 28px 20px; width: 180px;
  text-align: center; box-shadow: var(--shadow); transition: transform var(--transition);
}
.flow-step:hover { transform: translateY(-3px); }
.flow-icon {
  width: 52px; height: 52px; border-radius: 50%; background: var(--blue-light);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 10px; color: var(--blue-mid); font-size: 1.2rem;
}
.flow-num { font-family: 'Montserrat', sans-serif; font-size: .7rem; font-weight: 800; color: var(--yellow-dark); letter-spacing: .08em; margin-bottom: 6px; }
.flow-step h4 { font-size: .9rem; font-weight: 700; margin-bottom: 6px; color: var(--blue-deep); }
.flow-step p  { font-size: .8rem; color: var(--gray-600); }
.flow-arrow   { color: var(--blue-mid); font-size: 1rem; opacity: .5; }

.service-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; margin-bottom: 48px; }
.service-card {
  background: var(--white); border: 1px solid var(--gray-200);
  border-radius: var(--radius); padding: 32px 28px; box-shadow: var(--shadow);
  transition: transform var(--transition), box-shadow var(--transition);
}
.service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.service-icon {
  width: 56px; height: 56px; border-radius: 14px; background: var(--blue-light);
  display: flex; align-items: center; justify-content: center;
  color: var(--blue-mid); font-size: 1.4rem; margin-bottom: 16px;
}
.service-card h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 10px; color: var(--blue-deep); }
.service-card p  { font-size: .875rem; color: var(--gray-600); margin-bottom: 16px; }
.service-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.service-tags li { font-size: .75rem; font-weight: 600; color: var(--blue-mid); background: var(--blue-light); padding: 3px 10px; border-radius: 99px; }
.service-cta { text-align: center; }

.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }
.ach-card {
  background: var(--white); border-radius: var(--radius); padding: 32px 28px;
  box-shadow: var(--shadow); border: 1px solid var(--gray-200);
  display: flex; gap: 20px;
  transition: transform var(--transition), box-shadow var(--transition);
}
.ach-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.ach-icon { width: 56px; height: 56px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; flex-shrink: 0; }
.ach-award   .ach-icon { background: #fff8e1; color: #b7791f; }
.ach-official .ach-icon { background: var(--blue-light); color: var(--blue-mid); }
.ach-media   .ach-icon { background: #e0ffe4; color: #276749; }
.ach-year { display: inline-block; font-family: 'Montserrat', sans-serif; font-size: .7rem; font-weight: 700; color: var(--gray-400); letter-spacing: .08em; margin-bottom: 6px; }
.ach-content h3 { font-size: .95rem; font-weight: 700; color: var(--blue-deep); margin-bottom: 4px; }
.ach-category   { font-size: .78rem; font-weight: 600; color: var(--blue-mid); margin-bottom: 10px; }
.ach-desc       { font-size: .83rem; color: var(--gray-600); line-height: 1.7; margin-bottom: 12px; }
.ach-link { display: inline-flex; align-items: center; gap: 5px; font-size: .8rem; font-weight: 600; color: var(--blue-mid); text-decoration: underline; }

.media-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
.media-mag, .media-web { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius); padding: 36px 32px; box-shadow: var(--shadow); }
.media-mag-badge, .media-web-badge { display: inline-block; font-family: 'Montserrat', sans-serif; font-size: .7rem; font-weight: 800; letter-spacing: .12em; padding: 4px 14px; border-radius: 99px; margin-bottom: 14px; }
.media-mag-badge { background: var(--yellow); color: var(--blue-deep); }
.media-web-badge { background: var(--blue-light); color: var(--blue-mid); }
.media-mag h3, .media-web h3 { font-size: 1.1rem; font-weight: 700; color: var(--blue-deep); margin-bottom: 16px; }
.media-spec { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.media-spec li { display: flex; gap: 8px; font-size: .875rem; color: var(--gray-600); border-bottom: 1px dashed var(--gray-200); padding-bottom: 8px; }
.media-spec li span { font-weight: 600; color: var(--blue-deep); min-width: 120px; }
.media-note { font-size: .83rem; color: var(--gray-600); margin-bottom: 16px; }
.media-web p { font-size: .875rem; color: var(--gray-600); margin-bottom: 20px; }
.media-web-links { display: flex; flex-direction: column; gap: 10px; }
.media-web-links li a { display: flex; align-items: center; gap: 10px; font-size: .875rem; font-weight: 600; color: var(--blue-mid); padding: 10px 16px; background: var(--blue-light); border-radius: var(--radius-sm); transition: background var(--transition); }
.media-web-links li a:hover { background: #d0e8ff; opacity: 1; }
.media-web-links li a i { width: 18px; text-align: center; }

.faq-list { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq-item { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.faq-item summary { padding: 20px 24px; font-weight: 600; font-size: .95rem; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; color: var(--gray-700); user-select: none; transition: background var(--transition); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '\f107'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: .9rem; color: var(--gray-400); transition: transform .3s; flex-shrink: 0; }
.faq-item[open] summary { background: #f5f5f0; }
.faq-item[open] summary::after { transform: rotate(180deg); }
.faq-body { padding: 0 24px 20px; font-size: .9rem; color: var(--gray-600); line-height: 1.8; }

.company-wrap-full { max-width: 860px; margin: 0 auto; }
.company-table-full { width: 100%; border-collapse: collapse; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-md); }
.company-table-full th, .company-table-full td { padding: 20px 28px; border-bottom: 1px solid var(--gray-200); font-size: .95rem; vertical-align: top; line-height: 1.75; }
.company-table-full th { width: 26%; font-size: 1rem; font-weight: 700; color: var(--blue-deep); background: var(--blue-pale); white-space: nowrap; letter-spacing: .03em; }
.company-table-full td { color: var(--gray-600); background: #fff; }
.company-table-full td a { color: var(--blue-mid); text-decoration: underline; }
.company-table-full tr:last-child th, .company-table-full tr:last-child td { border-bottom: none; }
.company-sns { display: flex; flex-direction: column; gap: 6px; }
.company-contact-link { display: inline-flex; align-items: center; gap: 6px; color: var(--blue-mid); text-decoration: underline; }

.contact-hero-wrap { display: flex; flex-direction: column; align-items: center; gap: 28px; }
.contact-hero-btn { display: flex; align-items: center; gap: 24px; background: var(--yellow); color: var(--blue-deep); border-radius: 16px; padding: 28px 40px; max-width: 540px; width: 100%; text-decoration: none; box-shadow: 0 8px 40px rgba(245,200,0,.4), 0 2px 8px rgba(0,63,138,.1); transition: transform .25s, box-shadow .25s; position: relative; overflow: hidden; }
.contact-hero-btn::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,.25) 0%, transparent 60%); pointer-events: none; }
.contact-hero-btn:hover { transform: translateY(-4px); box-shadow: 0 16px 56px rgba(245,200,0,.5), 0 4px 12px rgba(0,63,138,.12); opacity: 1; }
.chb-icon { width: 56px; height: 56px; border-radius: 50%; background: rgba(0,63,138,.12); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: var(--blue-deep); flex-shrink: 0; }
.chb-text { display: flex; flex-direction: column; gap: 4px; flex: 1; text-align: left; }
.chb-main { font-size: 1.2rem; font-weight: 900; color: var(--blue-deep); letter-spacing: .02em; }
.chb-sub { font-size: .82rem; color: rgba(0,63,138,.75); font-weight: 500; }
.chb-arrow { font-size: 1.1rem; color: var(--blue-deep); opacity: .7; flex-shrink: 0; }
.contact-info-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 24px; }
.contact-info-item { display: inline-flex; align-items: center; gap: 7px; font-size: .88rem; font-weight: 600; color: rgba(255,255,255,.75); border: 1px solid rgba(255,255,255,.2); padding: 8px 18px; border-radius: 99px; transition: background .2s, color .2s; }
.contact-info-item:hover { background: rgba(255,255,255,.12); color: #fff; opacity: 1; }
.contact-info-item i { color: var(--yellow); }

/* ============================================================
   FOOTER
============================================================ */
#site-footer { background: #0a1628; color: rgba(255,255,255,.7); padding: 56px 0 32px; }
.footer-inner { max-width: var(--container); margin: 0 auto; padding: 0 24px; display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; }
.footer-tagline { font-size: .85rem; color: rgba(255,255,255,.5); margin-top: 6px; }
.footer-nav ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 20px; }
.footer-nav ul li a { font-size: .85rem; color: rgba(255,255,255,.6); transition: color .2s; }
.footer-nav ul li a:hover { color: var(--yellow); opacity: 1; }
.footer-social { display: flex; gap: 16px; }
.footer-social a { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.7); font-size: 1rem; transition: background .2s, color .2s; }
.footer-social a:hover { background: var(--yellow); color: var(--blue-deep); opacity: 1; }
.footer-address { font-size: .83rem; color: rgba(255,255,255,.5); display: flex; align-items: center; gap: 6px; }
.footer-address i { color: var(--yellow); }
.footer-copy { font-size: .78rem; color: rgba(255,255,255,.35); }

/* ============================================================
   SCROLL REVEAL
============================================================ */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .6s ease, transform .6s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 1024px) {
  .news-grid { grid-template-columns: repeat(2, 1fr); }
  .archive-grid { grid-template-columns: repeat(2, 1fr); }
  .media-wrap { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .section { padding: 72px 0; }
  /* モバイルナビ: display:noneではなくopacity+clip-pathで制御（V4） */
  #global-nav {
    position: fixed;
    top: 68px; left: 0; right: 0;
    background: rgba(255,255,255,.97);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--gray-200);
    padding: 16px 24px 24px;
    box-shadow: 0 8px 32px rgba(0,0,0,.1);
    /* ふわっと表示: opacity + clip-path */
    opacity: 0;
    pointer-events: none;
    clip-path: inset(0 0 100% 0);
    transition:
      opacity .35s cubic-bezier(0.19, 1, 0.22, 1),
      clip-path .4s cubic-bezier(0.19, 1, 0.22, 1);
  }
  #global-nav.open {
    opacity: 1;
    pointer-events: auto;
    clip-path: inset(0 0 0% 0);
  }
  #global-nav ul { flex-direction: column; gap: 4px; }
  #global-nav ul li a { display: block; padding: 12px 16px; border-radius: var(--radius-sm); font-size: 1rem; }
  #hamburger { display: flex; }
  .hero-heading { font-size: clamp(2rem, 8vw, 2.8rem); }
  .hero-cta { flex-direction: column; align-items: center; }
  .ach-card { flex-direction: column; }
  .timeline::before { left: 44px; }
  .timeline-year { width: 56px; font-size: .9rem; }
  .company-table-full th, .company-table-full td { padding: 14px 16px; font-size: .88rem; }
  .contact-hero-btn { padding: 22px 24px; gap: 16px; }
  .chb-main { font-size: 1rem; }
}
@media (max-width: 480px) {
  .news-grid { grid-template-columns: 1fr; }
  .archive-grid { grid-template-columns: 1fr; }
  .problem-grid { grid-template-columns: 1fr; }
  .service-grid { grid-template-columns: 1fr; }
  .ach-grid { grid-template-columns: 1fr; }
  .flow-steps { flex-direction: column; align-items: stretch; }
  .flow-step { width: 100%; }
  .header-inner { padding: 0 16px; }
  .container { padding: 0 16px; }
  .hero-content { padding: 28px 16px 120px; }
  .contact-hero-btn { flex-direction: column; text-align: center; padding: 24px 20px; }
  .chb-text { text-align: center; }
  .company-table-full th { width: 36%; white-space: normal; }
}

/* ============================================================
   HERO HEADING — 改行・黄色アンダーライン
============================================================ */
.hero-line1,
.hero-line2 {
  display: block;
}
.hero-line2 {
  position: relative;
  display: inline-block;
  padding-bottom: 6px;
}
.hero-line2::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 4px;
  background: var(--yellow);
  border-radius: 2px;
}

/* ============================================================
   WAVE — 確実に青色・アニメーション動作保証
============================================================ */
#hero .waves-wrap {
  z-index: 2;
}
#hero .wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}
#hero .wave1 { opacity: .55; }
#hero .wave2 { opacity: .40; }
#hero .wave3 { opacity: .30; }
#hero .wave4 { opacity: .22; }
#hero .wave5 { opacity: .18; }

#hero .wave1 path,
#hero .wave1 polygon,
#hero .wave1 rect { fill: #5BA4E8 !important; }

#hero .wave2 path,
#hero .wave2 polygon,
#hero .wave2 rect { fill: #4A90C8 !important; }

#hero .wave3 path,
#hero .wave3 polygon,
#hero .wave3 rect { fill: #7BBAEA !important; }

#hero .wave4 path,
#hero .wave4 polygon,
#hero .wave4 rect { fill: #9DCBF0 !important; }

#hero .wave5 path,
#hero .wave5 polygon,
#hero .wave5 rect { fill: #B8D9F5 !important; }

/* ============================================================
   HERO LINE2 — 「デザイン」色変更・黄色下線をデザインまで
============================================================ */
/* line2全体の色を青に */
.hero-line2 {
  color: #0057C0;
}

/* 黄色下線の幅を「デザイン」部分のみに（約62%） */
.hero-line2::after {
  width: 62%;
  left: 0;
}

/* ============================================================
   WAVE — アニメーション高速化
============================================================ */
#hero .wave1 { animation: waveMove 3s ease-in-out infinite alternate !important; }
#hero .wave2 { animation: waveMove 4s ease-in-out infinite alternate-reverse !important; }
#hero .wave3 { animation: waveMove 3.5s ease-in-out infinite alternate !important; }
#hero .wave4 { animation: waveMove 5s ease-in-out infinite alternate-reverse !important; }
#hero .wave5 { animation: waveMove 2.8s ease-in-out infinite alternate !important; }

/* 「デザイン」spanに黄色下線・色を適用（::afterを無効化して置き換え） */
.hero-line2::after { display: none; }

.hero-design {
  position: relative;
  color: #0057C0;
  display: inline;
}
.hero-design::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 4px;
  background: var(--yellow);
  border-radius: 2px;
}
/* する。は白系（親のblue-deepを継承） */
.hero-line2 {
  color: var(--blue-deep);
}

/* ============================================================
   WAVE — 高さ拡大・右端切れ修正・上下動追加
============================================================ */
.waves-wrap {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 180px !important;
  pointer-events: none;
  overflow: visible;
}
#hero .wave {
  width: 200% !important;
  left: -50% !important;
}
@keyframes waveSlide {
  0%   { transform: translateX(0)    translateY(0); }
  25%  { transform: translateX(5%)   translateY(-8px); }
  50%  { transform: translateX(10%)  translateY(0); }
  75%  { transform: translateX(5%)   translateY(8px); }
  100% { transform: translateX(0)    translateY(0); }
}
#hero .wave1 { animation: waveSlide 4s ease-in-out infinite !important; opacity: .55; }
#hero .wave2 { animation: waveSlide 5s ease-in-out infinite reverse !important; opacity: .40; }
#hero .wave3 { animation: waveSlide 4.5s ease-in-out infinite !important; animation-delay: -.5s !important; opacity: .30; }
#hero .wave4 { animation: waveSlide 6s ease-in-out infinite reverse !important; animation-delay: -1s !important; opacity: .22; }
#hero .wave5 { animation: waveSlide 3.5s ease-in-out infinite !important; animation-delay: -.8s !important; opacity: .18; }

/* ============================================================
   TIMELINE — スマホで年号被り修正
============================================================ */
@media (max-width: 600px) {
  .timeline::before { display: none; }
  .timeline-item { flex-direction: column; gap: 8px; }
  .timeline-year {
    width: auto;
    text-align: left;
    font-size: 1rem;
    padding-left: 0;
    padding-top: 0;
  }
  .timeline-year::after { display: none; }
  .timeline-content { padding: 16px; }
}

/* ============================================================
   CONTACT — シンプル版（背景なし）
============================================================ */
#contact.section-light .section-eyebrow { color: var(--blue-mid); background: var(--blue-light); }
#contact.section-light .section-title   { color: var(--text); }
#contact.section-light .section-desc    { color: var(--gray-600); }

.contact-info-item-light {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .88rem;
  font-weight: 600;
  color: var(--gray-600);
  border: 1px solid var(--gray-200);
  padding: 8px 18px;
  border-radius: 99px;
  transition: background .2s, color .2s;
}
.contact-info-item-light:hover { background: var(--blue-light); color: var(--blue-mid); opacity: 1; }
.contact-info-item-light i { color: var(--blue-mid); }

/* ============================================================
   SCROLL TOP ボタン
============================================================ */
#scroll-top {
  position: fixed;
  bottom: 32px;
  right: 32px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--blue-mid);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  box-shadow: 0 4px 16px rgba(0,63,138,.25);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .3s, transform .3s, background .2s;
  z-index: 999;
}
#scroll-top.visible { opacity: 1; transform: translateY(0); }
#scroll-top:hover { background: var(--blue-deep); }

@media (max-width: 480px) {
  #scroll-top { bottom: 20px; right: 20px; width: 40px; height: 40px; font-size: .9rem; }
}

/* ============================================================
   EYEBROW — スタイリッシュ版（カプセル背景なし・左線アクセント）
============================================================ */
.section-eyebrow {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  font-family: 'Montserrat', sans-serif !important;
  font-size: .7rem !important;
  font-weight: 700 !important;
  letter-spacing: .3em !important;
  text-transform: uppercase !important;
  color: var(--blue-mid) !important;
  background: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  margin-bottom: 14px !important;
  position: relative;
}
.section-eyebrow::before {
  content: '';
  display: inline-block;
  width: 28px;
  height: 2px;
  background: var(--yellow);
  border-radius: 2px;
  flex-shrink: 0;
}
.section-eyebrow::after {
  content: '';
  display: inline-block;
  width: 28px;
  height: 2px;
  background: var(--yellow);
  border-radius: 2px;
  flex-shrink: 0;
}
/* ダークセクション用 */
.section-header-light .section-eyebrow,
.eyebrow-light {
  color: var(--yellow) !important;
}
.section-header-light .section-eyebrow::before,
.section-header-light .section-eyebrow::after,
.eyebrow-light::before,
.eyebrow-light::after {
  background: rgba(255,255,255,.4) !important;
}
#contact.section-light .section-eyebrow {
  color: var(--blue-mid) !important;
}

/* ============================================================
   WAVE — 高さを半分に
============================================================ */
.waves-wrap {
  height: 90px !important;
}

/* ============================================================
   ACHIEVEMENTS — アイコンなし時のレイアウト調整
============================================================ */
.ach-card {
  gap: 0 !important;
}
.ach-card .ach-content {
  width: 100%;
}
/* アイコン色の名残りをborder-leftに変換してアクセント維持 */
.ach-award  { border-left: 4px solid #f6d860; }
.ach-official { border-left: 4px solid var(--blue-mid); }
.ach-media  { border-left: 4px solid #48bb78; }

/* ============================================================
   HERO LABEL — 削除済みにつきスペース調整
============================================================ */
.hero-heading {
  margin-top: 0;
}

/* ============================================================
   HERO — コンテンツを上下中央に
============================================================ */
#hero {
  align-items: center !important;
  justify-content: center !important;
  min-height: 100vh !important;
}

.hero-content {
  margin: auto !important;
  position: relative !important;
  top: auto !important;
  transform: none !important;
  padding: 56px 48px !important;
}

/* ============================================================
   HERO — 上下中央配置（波の高さ90pxを考慮）
============================================================ */
#hero {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding-top: 68px !important;   /* ヘッダー分 */
  padding-bottom: 90px !important; /* 波の高さ分 */
}

.hero-content {
  padding: 56px 48px !important;  /* 上下均等に */
  margin: 0 24px !important;
}

@media (max-width: 768px) {
  .hero-content {
    padding: 40px 28px !important;
    margin: 0 16px !important;
  }
}

@media (max-width: 480px) {
  .hero-content {
    padding: 32px 20px !important;
    margin: 0 12px !important;
  }
}

/* ============================================================
   HERO — 余白を前回同様に戻す・波を下に
============================================================ */
#hero {
  padding-top: 68px !important;
  padding-bottom: 0 !important;
}

.hero-content {
  padding: 48px 32px !important;
  margin: 48px 24px !important;
}

/* 波を下にずらす */
.waves-wrap {
  bottom: -40px !important;
  height: 90px !important;
}

@media (max-width: 768px) {
  .hero-content { padding: 36px 20px !important; margin: 32px 16px !important; }
}
@media (max-width: 480px) {
  .hero-content { padding: 28px 16px !important; margin: 24px 12px !important; }
}

/* ============================================================
   HERO — hero-content padding・波リセット
============================================================ */
.hero-content {
  padding: 100px 32px !important;
  margin: 0 24px !important;
}

.waves-wrap {
  bottom: 0 !important;
  height: 120px !important;
}

#hero .wave1 { opacity: .55; }
#hero .wave2 { opacity: .40; }
#hero .wave3 { opacity: .30; }
#hero .wave4 { opacity: .22; }
#hero .wave5 { opacity: .18; }

@media (max-width: 768px) {
  .hero-content { padding: 80px 20px !important; }
}
@media (max-width: 480px) {
  .hero-content { padding: 60px 16px !important; }
}

/* ============================================================
   WAVE — viewBox高さ変更の影響をリセット・初期サイズに
============================================================ */
.waves-wrap {
  height: 120px !important;
  bottom: 0 !important;
  overflow: hidden !important;
}
#hero .wave {
  width: 100% !important;
  left: 0 !important;
  height: 120px !important;
}

/* ============================================================
   FLOW ICON — 背景色削除
============================================================ */
.flow-icon {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* ============================================================
   WAVE — 左端切れ修正（幅を画面より大きく・左にはみ出させる）
============================================================ */
.waves-wrap {
  overflow: visible !important;
}
#hero .wave {
  width: 110% !important;
  left: -5% !important;
  height: 120px !important;
}

/* ============================================================
   WAVE — 左端切れ完全修正
============================================================ */
#hero {
  overflow: hidden !important;
}
.waves-wrap {
  overflow: visible !important;
  left: -10% !important;
  right: -10% !important;
  width: 120% !important;
}
#hero .wave {
  width: 100% !important;
  left: 0 !important;
}

/* ============================================================
   SERVICE ICON — 背景削除
============================================================ */
.service-icon {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* ============================================================
   BORDER-RADIUS — スタイリッシュ（直角寄り）
============================================================ */
:root {
  --radius: 4px !important;
  --radius-sm: 2px !important;
}
.btn { border-radius: 4px !important; }
.btn-primary { border-radius: 4px !important; }
.btn-ghost { border-radius: 4px !important; }
.nav-cta { border-radius: 4px !important; }
.problem-card,
.service-card,
.ach-card,
.faq-item,
.timeline-content,
.media-mag,
.media-web,
.news-card { border-radius: 4px !important; }
.service-icon,
.flow-icon,
.ach-icon { border-radius: 4px !important; }
.section-eyebrow { border-radius: 0 !important; }
.service-tags li { border-radius: 2px !important; }
.news-card-cat { border-radius: 2px !important; }
.contact-hero-btn { border-radius: 4px !important; }
.contact-info-item,
.contact-info-item-light { border-radius: 4px !important; }
.footer-social a { border-radius: 4px !important; }
.pagination .page-numbers { border-radius: 2px !important; }
.hero-content { border-radius: 0 !important; }

/* ============================================================
   WAVE — overflow hidden を解除して左端切れを完全修正
============================================================ */
#hero {
  overflow: visible !important;
}
#hero .waves-wrap {
  position: absolute !important;
  bottom: 0 !important;
  left: -5vw !important;
  right: -5vw !important;
  width: calc(100% + 10vw) !important;
  overflow: visible !important;
}
#hero .wave {
  width: 100% !important;
  left: 0 !important;
}

/* ============================================================
   PROCESS FLOW — 横並びステップ（mitonedesign風）
============================================================ */
.process-wrap {
  margin-top: 64px;
}
.process-title {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--blue-deep);
  text-align: center;
  margin-bottom: 48px;
  letter-spacing: .04em;
}

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

.process-step {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0 16px;
  position: relative;
}

/* 番号 + 横線 */
.process-num-wrap {
  display: flex;
  align-items: center;
  width: 100%;
  margin-bottom: 20px;
}
.process-num {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--blue-mid);
  flex-shrink: 0;
  line-height: 1;
  min-width: 40px;
}
.process-line {
  flex: 1;
  height: 2px;
  background: var(--gray-200);
  margin-left: 12px;
  position: relative;
}
.process-line::after {
  content: '';
  position: absolute;
  right: -6px;
  top: -4px;
  width: 10px;
  height: 10px;
  border-top: 2px solid var(--gray-200);
  border-right: 2px solid var(--gray-200);
  transform: rotate(45deg);
}
/* 最後のステップは線なし */
.process-step:last-child .process-line {
  display: none;
}

.process-body {
  padding-right: 8px;
}
.process-step-title {
  font-size: .95rem;
  font-weight: 800;
  color: var(--blue-deep);
  margin-bottom: 10px;
  line-height: 1.4;
}
.process-step-desc {
  font-size: .82rem;
  color: var(--gray-600);
  line-height: 1.8;
  margin-bottom: 12px;
}
.process-tag {
  display: inline-block;
  font-size: .7rem;
  font-weight: 700;
  color: var(--blue-mid);
  background: var(--blue-light);
  padding: 3px 10px;
  border-radius: 2px;
  letter-spacing: .04em;
}

/* スマホ：縦並び */
@media (max-width: 1024px) {
  .process-steps { grid-template-columns: repeat(3, 1fr); gap: 32px 0; }
}
@media (max-width: 640px) {
  .process-steps { grid-template-columns: 1fr; gap: 0; }
  .process-step { flex-direction: row; gap: 20px; align-items: flex-start; padding: 0 0 32px; }
  .process-num-wrap { flex-direction: column; align-items: center; width: auto; flex-shrink: 0; margin-bottom: 0; }
  .process-num { font-size: 1.2rem; margin-bottom: 8px; min-width: auto; }
  .process-line { width: 2px; height: 100%; flex: 1; margin-left: 0; min-height: 40px; }
  .process-line::after { display: none; }
  .process-step:last-child { padding-bottom: 0; }
  .process-step:last-child .process-line { display: none; }
  .process-body { padding-right: 0; }
}

/* ============================================================
   WAVE — 左端切れ完全修正（overflowをbodyで吸収）
============================================================ */
body { overflow-x: hidden; }
#hero { overflow: visible !important; }
#hero .waves-wrap {
  left: -20px !important;
  right: -20px !important;
  width: calc(100% + 40px) !important;
  overflow: visible !important;
}

/* ============================================================
   MODERN BACKGROUND — 2024-25トレンド
   ベタ青背景を廃止 → ニュートラルなオフホワイト系に統一
   差異はごく薄いトーン差と左ボーダーラインで表現
============================================================ */

/* 旧: #f0f7ff（青白） → 新: #f7f7f6（ウォームグレー） */
.section-blue-light {
  background: #f7f7f6 !important;
}

/* 旧: #003F8A（濃紺） → 廃止。白背景に変更 */
.section-blue-dark {
  background: #ffffff !important;
}

/* section-blue-dark内のテキスト色を黒系に戻す */
.section-blue-dark .section-title,
.section-blue-dark .title-light {
  color: var(--text) !important;
}
.section-blue-dark .section-desc,
.section-blue-dark .desc-light {
  color: var(--gray-600) !important;
}
.section-blue-dark .section-eyebrow,
.section-blue-dark .eyebrow-light {
  color: var(--blue-mid) !important;
}
.section-blue-dark .section-eyebrow::before,
.section-blue-dark .section-eyebrow::after {
  background: var(--yellow) !important;
}

/* contact-info-itemを暗色用から明色用に統一 */
.contact-info-item {
  color: var(--gray-600) !important;
  border-color: var(--gray-200) !important;
}
.contact-info-item i { color: var(--blue-mid) !important; }
.contact-info-item:hover {
  background: var(--blue-light) !important;
  color: var(--blue-mid) !important;
  opacity: 1 !important;
}

/* ============================================================
   CSS変数も更新
============================================================ */
:root {
  --blue-pale: #f7f7f6;
}

/* ============================================================
   WAVE — 根本修正
   横移動(translateX)を完全廃止 → 上下のみ
   幅・位置も元に戻す
============================================================ */
@keyframes waveFloat {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}

#hero .waves-wrap {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: 120px !important;
  overflow: hidden !important;
  z-index: 2 !important;
}

#hero .wave {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 120px !important;
}

#hero .wave1 { animation: waveFloat 4s ease-in-out infinite !important; opacity: .55 !important; }
#hero .wave2 { animation: waveFloat 5s ease-in-out infinite !important; animation-delay: -.8s !important; opacity: .40 !important; }
#hero .wave3 { animation: waveFloat 4.5s ease-in-out infinite !important; animation-delay: -.5s !important; opacity: .30 !important; }
#hero .wave4 { animation: waveFloat 6s ease-in-out infinite !important; animation-delay: -1.2s !important; opacity: .22 !important; }
#hero .wave5 { animation: waveFloat 3.5s ease-in-out infinite !important; animation-delay: -.3s !important; opacity: .18 !important; }

/* ============================================================
   PROCESS — タイトル折り返し整理・締まり改善
============================================================ */
.process-title {
  font-size: 1rem !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: .2em !important;
  text-transform: uppercase !important;
  color: var(--gray-400) !important;
  text-align: center !important;
  margin-bottom: 40px !important;
}

.process-num {
  font-size: 2rem !important;
  color: var(--blue-deep) !important;
  min-width: 48px !important;
}

.process-step-title {
  font-size: 1rem !important;
  font-weight: 800 !important;
  color: var(--blue-deep) !important;
  margin-bottom: 12px !important;
  line-height: 1.5 !important;
  white-space: nowrap;
}

.process-step-desc {
  font-size: .82rem !important;
  line-height: 1.75 !important;
  color: var(--gray-600) !important;
}

/* タグ非表示（念のため） */
.process-tag { display: none !important; }

/* 矢印線を細く・シャープに */
.process-line {
  height: 1px !important;
  background: var(--gray-200) !important;
  margin-left: 14px !important;
}
.process-line::after {
  width: 6px !important;
  height: 6px !important;
  right: -4px !important;
  top: -3px !important;
}

@media (max-width: 1024px) {
  .process-step-title { white-space: normal !important; }
}

/* ============================================================
   PROCESS — 見出し元に戻す・背景追加
============================================================ */
.process-title {
  font-size: 1.2rem !important;
  font-weight: 800 !important;
  color: var(--blue-deep) !important;
  text-align: center !important;
  margin-bottom: 40px !important;
  font-family: 'Noto Sans JP', sans-serif !important;
  letter-spacing: .04em !important;
  text-transform: none !important;
}

.process-wrap {
  background: linear-gradient(135deg, #f0f7ff 0%, #e8f3ff 100%) !important;
  border-radius: 4px !important;
  padding: 56px 48px !important;
  margin-top: 48px !important;
}

@media (max-width: 768px) {
  .process-wrap { padding: 40px 24px !important; }
}
@media (max-width: 480px) {
  .process-wrap { padding: 32px 16px !important; }
}

/* ============================================================
   Q&A LIST — モダンな課題解決リスト
============================================================ */
.qa-list {
  max-width: 860px;
  margin: 0 auto 48px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.qa-item {
  border-bottom: 1px solid var(--gray-200);
  border-radius: 0;
  overflow: visible;
  padding: 32px 0;
  margin-bottom: 0;
  box-shadow: none;
}
.qa-item:first-child { border-top: 1px solid var(--gray-200); }

.qa-q,
.qa-a {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}
.qa-q {
  margin-bottom: 16px;
  background: none;
  padding: 0;
  border-bottom: none;
}
.qa-a {
  background: none;
  padding: 0;
}

.qa-icon {
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  background: var(--blue-deep);
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 2px;
  line-height: 1;
  letter-spacing: 0;
  margin-top: 2px;
}
.qa-icon-a {
  color: #fff;
  background: var(--yellow);
  border-color: var(--yellow);
}

.qa-q p {
  font-size: 1rem;
  font-weight: 700;
  color: var(--blue-deep);
  line-height: 1.6;
  padding-top: 4px;
}
.qa-a p {
  font-size: .9rem;
  color: var(--gray-600);
  line-height: 1.85;
  padding-top: 4px;
}

@media (max-width: 480px) {
  .qa-q p { font-size: .92rem; }
  .qa-a p { font-size: .85rem; }
  .qa-icon { width: 28px; height: 28px; font-size: .95rem; }
}

/* ============================================================
   HERO SUB — タイピング前のテキストも表示
============================================================ */
.hero-sub {
  opacity: 1 !important;
  min-height: auto !important;
}

/* ============================================================
   QA LIST — CSSリセット・完全作り直し
============================================================ */
.qa-list {
  max-width: 800px !important;
  margin: 0 auto 56px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}
.qa-item {
  border-bottom: 1px solid var(--gray-200) !important;
  border-radius: 0 !important;
  overflow: visible !important;
  padding: 28px 0 !important;
  margin-bottom: 0 !important;
  box-shadow: none !important;
}
.qa-item:first-child { border-top: 1px solid var(--gray-200) !important; }
.qa-q,
.qa-a {
  display: flex !important;
  align-items: flex-start !important;
  gap: 20px !important;
}
.qa-q {
  margin-bottom: 14px !important;
  background: none !important;
  padding: 0 !important;
  border-bottom: none !important;
}
.qa-a {
  background: none !important;
  padding: 0 !important;
}
.qa-icon {
  font-family: 'Montserrat', sans-serif !important;
  font-size: .95rem !important;
  font-weight: 800 !important;
  color: #fff !important;
  background: var(--blue-deep) !important;
  flex-shrink: 0 !important;
  width: 30px !important;
  height: 30px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: none !important;
  border-radius: 2px !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  margin-top: 2px !important;
}
.qa-icon-a {
  color: #fff !important;
  background: var(--yellow) !important;
  border-color: var(--yellow) !important;
}
.qa-q p {
  font-size: .98rem !important;
  font-weight: 700 !important;
  color: var(--blue-deep) !important;
  line-height: 1.65 !important;
  padding-top: 4px !important;
  margin: 0 !important;
}
.qa-a p {
  font-size: .88rem !important;
  color: var(--gray-600) !important;
  line-height: 1.9 !important;
  padding-top: 4px !important;
  margin: 0 !important;
}

/* ============================================================
   PROCESS — 背景を完全削除・ステップをオープンに
============================================================ */
.process-wrap {
  background: none !important;
  border-radius: 0 !important;
  padding: 48px 0 0 !important;
  margin-top: 0 !important;
  border: none !important;
  box-shadow: none !important;
}
.process-title {
  font-size: 1.2rem !important;
  font-weight: 800 !important;
  color: var(--blue-deep) !important;
  text-align: center !important;
  margin-bottom: 48px !important;
  font-family: 'Noto Sans JP', sans-serif !important;
  letter-spacing: .04em !important;
  text-transform: none !important;
}
.process-steps {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 0 !important;
  position: relative !important;
}
/* ステップ間の区切り線 */
.process-steps::before {
  content: '' !important;
  position: absolute !important;
  top: 20px !important;
  left: 10% !important;
  right: 10% !important;
  height: 1px !important;
  background: var(--gray-200) !important;
  z-index: 0 !important;
}
.process-step {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  padding: 0 20px 0 0 !important;
  position: relative !important;
  z-index: 1 !important;
}
.process-num-wrap {
  display: flex !important;
  align-items: center !important;
  margin-bottom: 20px !important;
  width: 100% !important;
}
.process-num {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 1.4rem !important;
  font-weight: 800 !important;
  color: var(--blue-deep) !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
  min-width: auto !important;
  background: #fff !important;
  padding-right: 12px !important;
  position: relative !important;
  z-index: 1 !important;
}
.process-line {
  display: none !important;
}
.process-step-title {
  font-size: .95rem !important;
  font-weight: 800 !important;
  color: var(--blue-deep) !important;
  margin-bottom: 10px !important;
  line-height: 1.5 !important;
  white-space: normal !important;
}
.process-step-desc {
  font-size: .82rem !important;
  line-height: 1.8 !important;
  color: var(--gray-600) !important;
}

/* ============================================================
   SERVICE DESC — 左揃えに
============================================================ */
#service .section-desc {
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
#service .section-header {
  text-align: left !important;
}
#service .section-eyebrow {
  justify-content: flex-start !important;
}

/* ============================================================
   TYPOGRAPHY 統一
============================================================ */
.section-title {
  font-size: clamp(1.6rem, 3.2vw, 2.4rem) !important;
}

@media (max-width: 1024px) {
  .process-steps { grid-template-columns: repeat(3, 1fr) !important; gap: 40px 0 !important; }
  .process-steps::before { display: none !important; }
}
@media (max-width: 640px) {
  .process-steps { grid-template-columns: 1fr !important; gap: 32px !important; }
  .process-step { flex-direction: row !important; gap: 20px !important; padding: 0 !important; }
  .process-num-wrap { margin-bottom: 0 !important; flex-shrink: 0 !important; width: auto !important; }
  .process-num { padding-right: 0 !important; }
  .process-body { flex: 1 !important; }
}

/* ============================================================
   SERVICE — 中央揃えに戻す（強制上書き）
============================================================ */
#service .section-header {
  text-align: center !important;
}
#service .section-eyebrow {
  justify-content: center !important;
}
#service .section-desc {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ============================================================
   MEDIA BADGES — スタイリッシュに刷新
   カプセル型バッジを廃止 → 細い上ボーダー＋英字ラベルに
============================================================ */
.media-mag-badge,
.media-web-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: .65rem !important;
  font-weight: 700 !important;
  letter-spacing: .3em !important;
  text-transform: uppercase !important;
  background: none !important;
  border-radius: 0 !important;
  padding: 0 0 12px 0 !important;
  margin-bottom: 16px !important;
  border-bottom: none !important;
  position: relative !important;
}
.media-mag-badge::before,
.media-web-badge::before {
  content: '' !important;
  display: inline-block !important;
  width: 20px !important;
  height: 2px !important;
  flex-shrink: 0 !important;
}
.media-mag-badge {
  color: #92710a !important;
}
.media-mag-badge::before {
  background: var(--yellow) !important;
}
.media-web-badge {
  color: var(--blue-mid) !important;
}
.media-web-badge::before {
  background: var(--blue-mid) !important;
}

/* メディアカードの上部にアクセントボーダー追加 */
.media-mag {
  border-top: 2px solid var(--yellow) !important;
}
.media-web {
  border-top: 2px solid var(--blue-mid) !important;
}

/* ============================================================
   PAGE — 固定ページ（プライバシーポリシー等）
============================================================ */
.page-wrap {
  padding: 120px 0 96px;
}
.page-content-wrap {
  max-width: 800px;
  margin: 0 auto;
}
.page-header {
  margin-bottom: 48px;
  padding-bottom: 24px;
  border-bottom: 2px solid var(--gray-200);
}
.page-title {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 900;
  color: var(--blue-deep);
  letter-spacing: -.01em;
}
.page-content {
  font-size: .95rem;
  line-height: 2;
  color: var(--gray-800);
}
.page-content h2 {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--blue-deep);
  margin: 40px 0 16px;
  padding-left: 12px;
  border-left: 3px solid var(--yellow);
}
.page-content h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--blue-deep);
  margin: 28px 0 10px;
}
.page-content p {
  margin-bottom: 20px;
}
.page-content ul, .page-content ol {
  padding-left: 1.5em;
  margin-bottom: 20px;
}
.page-content li {
  margin-bottom: 6px;
  list-style: disc;
}
.page-content a {
  color: var(--blue-mid);
  text-decoration: underline;
}

/* ============================================================
   SINGLE POST — 2カラムレイアウト（本文 + サイドバー）
============================================================ */
.single-outer {
  padding: 96px 0 80px;
  background: var(--white);
}

.single-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 56px;
  align-items: flex-start;
}

/* ---- パンくずリスト ---- */
.single-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: .78rem;
  color: var(--gray-400);
  margin-bottom: 28px;
}
.single-breadcrumb a {
  color: var(--blue-mid);
  text-decoration: none;
  transition: opacity .2s;
}
.single-breadcrumb a:hover { opacity: .7; }
.bc-sep { font-size: .6rem; color: var(--gray-200); }
.bc-current { color: var(--gray-400); }

/* ---- 記事ヘッダー ---- */
.single-header { margin-bottom: 28px; }
.single-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.single-cat {
  font-family: 'Montserrat', sans-serif;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--blue-mid);
  background: var(--blue-light);
  padding: 4px 14px;
  border-radius: 2px;
  text-decoration: none;
}
.single-cat[data-cat="magazine"] { background: #fff8e1; color: #b7791f; }
.single-cat[data-cat="web"]      { background: var(--blue-light); color: var(--blue-mid); }
.single-cat[data-cat="sns"]      { background: #fce7f3; color: #9d174d; }
.single-cat[data-cat="event"]    { background: #d1fae5; color: #065f46; }

.single-date {
  font-family: 'Montserrat', sans-serif;
  font-size: .8rem;
  font-weight: 600;
  color: var(--gray-400);
  display: flex;
  align-items: center;
  gap: 5px;
}
.single-title {
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 900;
  color: var(--blue-deep);
  line-height: 1.4;
  letter-spacing: -.01em;
}

/* ---- アイキャッチ ---- */
.single-thumb {
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 40px;
}
.single-thumb img { width: 100%; height: auto; display: block; }

/* ---- 本文 ---- */
.single-content {
  font-size: .95rem;
  line-height: 2;
  color: var(--gray-800);
}
.single-content h2 {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--blue-deep);
  margin: 48px 0 20px;
  padding-left: 14px;
  border-left: 3px solid var(--yellow);
  line-height: 1.4;
}
.single-content h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--blue-deep);
  margin: 36px 0 14px;
}
.single-content p { margin-bottom: 24px; }
.single-content ul, .single-content ol {
  padding-left: 1.6em;
  margin-bottom: 24px;
}
.single-content li { margin-bottom: 8px; list-style: disc; }
.single-content a { color: var(--blue-mid); text-decoration: underline; }
.single-content img { border-radius: 4px; margin: 24px 0; max-width: 100%; }
.single-content strong { font-weight: 700; color: var(--blue-deep); }

/* ---- タグ ---- */
.single-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 32px 0;
  padding-top: 24px;
  border-top: 1px solid var(--gray-200);
}
.single-tag {
  font-size: .75rem;
  font-weight: 600;
  color: var(--gray-600);
  background: var(--gray-100);
  padding: 4px 12px;
  border-radius: 2px;
  text-decoration: none;
  transition: background .2s;
}
.single-tag:hover { background: var(--blue-light); color: var(--blue-mid); opacity: 1; }

/* ---- 前後ナビ ---- */
.single-nav {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin: 40px 0 32px;
  padding-top: 32px;
  border-top: 1px solid var(--gray-200);
}
.single-nav-prev,
.single-nav-next {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .85rem;
  font-weight: 700;
  color: var(--blue-mid);
  padding: 10px 16px;
  border: 1px solid var(--gray-200);
  border-radius: 2px;
  transition: background .2s;
  text-decoration: none;
  max-width: 48%;
  line-height: 1.5;
}
.single-nav-prev:hover,
.single-nav-next:hover { background: var(--blue-light); opacity: 1; }
.single-nav-next { margin-left: auto; }

.single-back { text-align: center; margin-top: 8px; }

/* ============================================================
   SIDEBAR
============================================================ */
.single-sidebar {
  position: sticky;
  top: 88px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.sidebar-widget {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 4px;
  overflow: hidden;
}

.sidebar-widget-title {
  font-size: .8rem;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--blue-deep);
  padding: 12px 20px;
}

/* カテゴリー */
.sidebar-cat-list { padding: 8px 0; }
.sidebar-cat-list li a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  font-size: .88rem;
  color: var(--gray-800);
  text-decoration: none;
  border-bottom: 1px solid var(--gray-100);
  transition: background .2s, color .2s;
}
.sidebar-cat-list li:last-child a { border-bottom: none; }
.sidebar-cat-list li a:hover { background: var(--blue-light); color: var(--blue-mid); opacity: 1; }
.cat-count {
  font-family: 'Montserrat', sans-serif;
  font-size: .72rem;
  font-weight: 700;
  color: var(--gray-400);
  background: var(--gray-100);
  padding: 2px 8px;
  border-radius: 99px;
}

/* 月別アーカイブ */
.sidebar-archive-list { padding: 8px 0; }
.sidebar-archive-list li { border-bottom: 1px solid var(--gray-100); }
.sidebar-archive-list li:last-child { border-bottom: none; }
.sidebar-archive-list li a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  font-size: .88rem;
  color: var(--gray-800);
  text-decoration: none;
  transition: background .2s, color .2s;
}
.sidebar-archive-list li a:hover { background: var(--blue-light); color: var(--blue-mid); opacity: 1; }

/* 新着記事 */
.sidebar-recent-list { padding: 8px 0; }
.sidebar-recent-list li { border-bottom: 1px solid var(--gray-100); }
.sidebar-recent-list li:last-child { border-bottom: none; }
.sidebar-recent-list li a {
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  text-decoration: none;
  transition: background .2s;
}
.sidebar-recent-list li a:hover { background: var(--blue-light); opacity: 1; }
.sidebar-recent-thumb {
  width: 64px;
  height: 48px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 2px;
}
.sidebar-recent-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sidebar-recent-body { display: flex; flex-direction: column; gap: 4px; }
.sidebar-recent-date { font-family: 'Montserrat', sans-serif; font-size: .7rem; font-weight: 600; color: var(--gray-400); }
.sidebar-recent-title { font-size: .82rem; font-weight: 600; color: var(--blue-deep); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 1024px) {
  .single-layout { grid-template-columns: 1fr 260px; gap: 40px; }
}
@media (max-width: 768px) {
  .single-layout { grid-template-columns: 1fr; gap: 48px; }
  .single-sidebar { position: static; }
  .single-outer { padding: 96px 0 64px; }
}

/* ============================================================
   SIDEBAR ARCHIVE — 年月左・投稿数右
============================================================ */
.sidebar-archive-list li a {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}
.archive-label {
  color: var(--gray-800);
  font-size: .88rem;
}
.archive-count {
  font-family: 'Montserrat', sans-serif;
  font-size: .72rem;
  font-weight: 700;
  color: var(--gray-400);
  background: var(--gray-100);
  padding: 2px 8px;
  border-radius: 99px;
  flex-shrink: 0;
}

/* ============================================================
   パフォーマンス — モバイルでCanvasを非表示
============================================================ */
@media (max-width: 768px) {
  #hero-canvas {
    display: none !important;
  }
}

/* ============================================================
   HERO — 背景写真フェードイン
============================================================ */

/* 背景写真レイヤー（初期は非表示） */
#hero-bg-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* background-image: set by JS */
  background-size: cover;
  background-position: center 40%;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 2s ease;
}

/* WebP非対応ブラウザ向けフォールバック */
.no-webp #hero-bg-photo {
  /* background-image: fallback set by JS */
}

/* フェードイン発動クラス */
#hero-bg-photo.visible {
  opacity: 1;
}

/* 写真上のオーバーレイ（文字視認性確保） */
#hero-bg-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.15) 0%,
    rgba(255,255,255,0.08) 100%
  );
  opacity: 0;
  transition: opacity 2s ease;
  pointer-events: none;
}
#hero-bg-overlay.visible {
  opacity: 1;
}

/* 写真表示時はcanvasを透過に */
#hero.photo-active #hero-canvas {
  opacity: 0;
  transition: opacity 1.5s ease;
}

/* hero-contentは写真時も視認性UP */
#hero.photo-active .hero-content {
  background: rgba(255,255,255,0.82) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  box-shadow: 0 8px 48px rgba(0,0,0,0.12) !important;
}

/* ============================================================
   HEADER LOGO — SVGロゴ
============================================================ */
.logo-svg {
  height: 36px;
  width: auto;
  display: block;
  object-fit: contain;
}

@media (max-width: 768px) {
  .logo-svg {
    height: 28px;
  }
}

/* ============================================================
   FOOTER — 明るいトーンに変更
============================================================ */
#site-footer {
  background: #f7f7f6 !important;
  color: var(--gray-600) !important;
  border-top: 1px solid var(--gray-200) !important;
}
.footer-tagline {
  color: var(--gray-400) !important;
}
.footer-nav ul li a {
  color: var(--gray-600) !important;
}
.footer-nav ul li a:hover {
  color: var(--blue-mid) !important;
  opacity: 1 !important;
}
.footer-address {
  color: var(--gray-400) !important;
}
.footer-address i {
  color: var(--blue-mid) !important;
}
.footer-copy {
  color: var(--gray-400) !important;
}

/* ============================================================
   MAGAZINE GALLERY SECTION — V3
============================================================ */

/* セクション背景 */
.magazine-section {
  overflow: hidden;
  padding: 96px 0 !important;
}
.magazine-section .section-desc {
  max-width: 560px;
  margin: 16px auto 0;
  text-align: center;
}

/* ---- キャルーセルトラック ---- */
.magazine-track-wrap {
  overflow: hidden;
  padding: 40px 0 32px;
  cursor: grab;
  user-select: none;
}
.magazine-track-wrap:active { cursor: grabbing; }
.magazine-track {
  display: flex;
  gap: 20px;
  width: max-content;
  animation: mag-scroll 28s linear infinite;
  padding: 16px 0;
}
.magazine-track:hover { animation-play-state: paused; }

@keyframes mag-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ---- 表紙カード ---- */
.cover-item {
  flex-shrink: 0;
  width: 170px;
  cursor: pointer;
  perspective: 900px;
}
.cover-inner {
  position: relative;
  width: 100%;
  transform-style: preserve-3d;
  transform: rotateY(-6deg) rotateX(1deg);
  transition: transform .5s cubic-bezier(0.19, 1, 0.22, 1), box-shadow .5s;
  box-shadow:
    8px 14px 36px rgba(0,0,0,.22),
    inset -4px 0 10px rgba(0,0,0,.12);
  border-radius: 2px;
  overflow: hidden;
}
.cover-item:hover .cover-inner {
  transform: rotateY(0deg) rotateX(0deg) translateY(-10px) scale(1.05);
  box-shadow:
    0 28px 56px rgba(0,0,0,.28),
    inset 0 0 0 rgba(0,0,0,0);
}
.cover-inner img {
  width: 100%;
  display: block;
  border-radius: 2px;
  pointer-events: none;
}
/* 背表紙シャドウ */
.cover-inner::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 8px;
  background: linear-gradient(to right, rgba(0,0,0,.3), rgba(0,0,0,.04));
  z-index: 1;
}
/* 光沢 */
.cover-inner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,.2) 0%,
    rgba(255,255,255,.04) 40%,
    transparent 60%
  );
  pointer-events: none;
  z-index: 2;
}
.cover-vol {
  text-align: center;
  margin-top: 10px;
  font-family: 'Montserrat', sans-serif;
  font-size: .68rem;
  font-weight: 600;
  color: var(--gray-400);
  letter-spacing: .08em;
}

/* ---- カウントアップバッジ ---- */
.magazine-badge-wrap {
  display: flex;
  justify-content: center;
  margin-top: 8px;
}
.magazine-badge {
  display: inline-flex;
  align-items: center;
  gap: 0;
  background: var(--white);
  border-radius: 48px;
  padding: 20px 40px;
  box-shadow:
    0 4px 32px rgba(0,63,138,.08),
    0 1px 0 rgba(255,255,255,.8) inset;
  flex-wrap: wrap;
  justify-content: center;
}
.mag-stat {
  display: flex;
  align-items: baseline;
  gap: 4px;
  padding: 0 32px;
}
.mag-stat-divider {
  width: 1px;
  height: 48px;
  background: var(--gray-200);
  flex-shrink: 0;
}
.mag-stat-num {
  font-family: 'Montserrat', sans-serif;
  font-size: 2.6rem;
  font-weight: 900;
  color: var(--blue-deep);
  line-height: 1;
  letter-spacing: -.03em;
  display: inline-block;
  /* ロールアップアニメーション用 */
  overflow: hidden;
  vertical-align: bottom;
}
.mag-stat-prefix {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--blue-deep);
  line-height: 1;
}
.mag-stat-label {
  font-size: .78rem;
  color: var(--gray-600);
  line-height: 1.5;
  font-weight: 600;
  margin-left: 6px;
}
.mag-stat-label small {
  font-size: .7rem;
  font-weight: 400;
  color: var(--gray-400);
  display: block;
}

/* ローリングアニメーション */
@keyframes roll-up {
  0%   { transform: translateY(100%); opacity: 0; }
  15%  { transform: translateY(0);    opacity: 1; }
  85%  { transform: translateY(0);    opacity: 1; }
  100% { transform: translateY(-100%);opacity: 0; }
}

@media (max-width: 768px) {
  .cover-item { width: 130px; }
  .magazine-badge { padding: 16px 20px; gap: 0; }
  .mag-stat { padding: 0 16px; }
  .mag-stat-num { font-size: 2rem; }
  .mag-stat-divider { height: 36px; }
}
@media (max-width: 480px) {
  .magazine-badge { border-radius: 16px; }
  .mag-stat-divider { display: none; }
  .mag-stat { padding: 8px 12px; }
}

/* ============================================================
   V3 UPDATES — バッジ・ボタン・フォント修正
============================================================ */

/* Outfitフォント追加（cyph-design参考） */
/* functions.phpでenqueueする */

/* ---- バッジ レイアウト修正（small削除後） ---- */
.mag-stat {
  flex-direction: column;
  align-items: center;
  padding: 0 36px;
  gap: 2px;
}
.mag-stat-num-row {
  display: flex;
  align-items: baseline;
  gap: 0;
}
.mag-stat-label {
  font-size: .72rem;
  color: var(--gray-600);
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  margin-left: 0;
}
.mag-stat-sub {
  font-size: .68rem;
  font-weight: 400;
  color: var(--gray-400);
  display: block;
  text-align: center;
  margin-top: 2px;
}
.mag-stat-divider {
  height: 56px;
}

/* ---- 余白削減 ---- */
.magazine-badge {
  padding: 24px 16px;
  gap: 0;
}
.magazine-badge-wrap {
  margin-top: 0;
}

/* ---- cyph-designスタイルのボタン ---- */
.btn-cyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--gray-800, #333);
  color: #fff;
  font-family: 'Outfit', 'Montserrat', sans-serif;
  font-size: .85rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 14px 56px;
  border-radius: 0;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background .3s, color .3s;
  position: relative;
  overflow: hidden;
}
.btn-cyph::before {
  content: '';
  position: absolute;
  inset: 0;
  left: -2%;
  width: 104%;
  background: var(--blue-deep);
  transform: skewX(-18deg) scaleX(0);
  transform-origin: right center;
  transition: transform .4s cubic-bezier(0.21, 0.61, 0.36, 1);
  z-index: 0;
}
.btn-cyph:hover::before {
  transform: skewX(-18deg) scaleX(1);
  transform-origin: left center;
}
.btn-cyph span {
  position: relative;
  z-index: 1;
}

/* ghost版 */
.btn-cyph-outline {
  background: transparent;
  color: var(--blue-deep);
  border: 1.5px solid var(--blue-deep);
  font-family: 'Outfit', 'Montserrat', sans-serif;
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 14px 52px;
  border-radius: 0;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
  overflow: hidden;
  transition: color .4s, border-color .4s;
}
.btn-cyph-outline::before {
  content: '';
  position: absolute;
  inset: 0;
  left: -2%;
  width: 104%;
  background: var(--blue-mid);
  transform: skewX(-18deg) scaleX(0);
  transform-origin: right center;
  transition: transform .4s cubic-bezier(0.21, 0.61, 0.36, 1);
  z-index: 0;
}
.btn-cyph-outline:hover::before {
  transform: skewX(-18deg) scaleX(1);
  transform-origin: left center;
}
.btn-cyph-outline:hover {
  color: #fff;
  border-color: var(--blue-mid);
}
.btn-cyph-outline span,
.btn-cyph-outline i {
  position: relative;
  z-index: 1;
}

/* マガジンCTAのボタンをcyph-outline適用 */
.magazine-cta .btn-ghost {
  border-radius: 0 !important;
  font-family: 'Outfit', 'Montserrat', sans-serif !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  padding: 14px 52px !important;
}

/* ---- マガジンセクション余白 ---- */
.magazine-section {
  padding: 80px 0 80px !important;
}
.magazine-section .section-header {
  margin-bottom: 48px;
}
.magazine-cta {
  margin-top: 32px !important;
}

/* ============================================================
   V4 UPDATES
============================================================ */

/* ---- 1. 波の底切れ修正 ---- */
#hero {
  overflow: hidden !important;
  padding-bottom: 130px !important;
}
/* waves-wrap: bottom:-4px + margin-bottom:-1px で完全密着 */
#hero .waves-wrap {
  position: absolute !important;
  bottom: -4px !important;      /* サブピクセルの隙間を塞ぐ */
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: 128px !important;     /* 120px + 余裕8px */
  overflow: hidden !important;
  z-index: 2 !important;
  pointer-events: none;
  margin-bottom: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;    /* インライン隙間をゼロに */
  font-size: 0 !important;
}
/* SVGを100%×100%で完全に埋める */
#hero .waves-wrap svg {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;    /* inline隙間を排除 */
  margin: 0 !important;
  padding: 0 !important;
}

/* ---- 2. 制作の流れ — カード形式セクション ---- */
.process-section {
  background: var(--gray-bg);
  padding: 80px 0;
  position: relative;
  overflow: hidden;
}
.process-section .section-header {
  margin-bottom: 56px;
}
.process-cards {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 40px;
  position: relative;
  z-index: 1;
}
/* カード間の矢印 */
.process-cards::before {
  display: none;
}
.process-card {
  background: var(--white);
  border-top: 3px solid var(--yellow);
  padding: 32px 24px 36px;
  position: relative;
  transition: transform .3s, box-shadow .3s, border-top-color .3s;
}
.process-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 48px rgba(0,63,138,.1);
  border-top-color: var(--blue-mid);
  z-index: 2;
}
/* カード間の矢印（::after） */
.process-card:not(:last-child)::after {
  content: '';
  position: absolute;
  right: -16px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 14px solid var(--yellow);
  z-index: 3;
}
.process-step-num {
  font-family: 'Montserrat', sans-serif;
  font-size: 2.8rem;
  font-weight: 900;
  color: rgba(0,63,138,.08);
  line-height: 1;
  margin-bottom: 12px;
  letter-spacing: -.04em;
}
.process-card h3 {
  font-size: .95rem;
  font-weight: 800;
  color: var(--blue-deep);
  margin-bottom: 10px;
  line-height: 1.4;
}
.process-card p {
  font-size: .82rem;
  color: var(--gray-600);
  line-height: 1.85;
}
/* スマホ: 1列縦並び、テキスト1行 */
@media (max-width: 900px) {
  .process-cards {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    padding: 0 20px;
  }
  .process-card:not(:last-child)::after { display: none; }
}
@media (max-width: 540px) {
  .process-cards {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .process-card {
    display: grid;
    grid-template-columns: 56px 1fr;
    align-items: center;
    gap: 16px;
    padding: 20px 20px;
    border-top: none;
    border-left: 3px solid var(--yellow);
    border-bottom: 1px solid var(--gray-100);
    transition: border-left-color .3s;
  }
  .process-card:hover {
    transform: none;
    border-left-color: var(--blue-mid);
  }
  .process-step-num {
    font-size: 2rem;
    margin-bottom: 0;
  }
  /* スマホ時: 見出し1行 */
  .process-card h3 {
    font-size: .88rem;
    margin-bottom: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .process-card p { display: none; } /* スマホでは詳細テキスト非表示 */
  .process-card .process-body { display: flex; align-items: center; }
}
/* STEP1のスマホ1行タイトル対応 */
.process-card-title-mobile {
  display: none;
}
@media (max-width: 540px) {
  .process-card-title-mobile { display: inline; }
  .process-card-title-desktop { display: none; }
}

/* ---- 3. ボタンアニメーション（全ボタンに適用） ---- */
/* 既存の .btn-primary / .btn-ghost / .btn-dark に加え
   クラスなしの <a> ボタンにも基本スタイル */
.btn,
.btn-primary,
.btn-ghost,
.btn-dark {
  position: relative;
  overflow: hidden;
}
.btn span, .btn-primary span, .btn-ghost span, .btn-dark span,
.btn i, .btn-primary i, .btn-ghost i, .btn-dark i {
  position: relative;
  z-index: 2;
}
/* マガジンCTAの .btn-ghost も同様 */
.magazine-cta a {
  position: relative;
  overflow: hidden;
}
.magazine-cta a span,
.magazine-cta a i {
  position: relative;
  z-index: 2;
}

/* ---- 4. スマホメニュー — ふわっと表示 ---- */



/* ============================================================
   V5 UPDATES
============================================================ */

/* ---- section-eyebrow 削除に伴う余白調整 ---- */
.section-header {
  margin-bottom: 48px;
}
/* section-titleの上マージンをリセット */
.section-title {
  margin-top: 0 !important;
}
/* section-descの上マージン縮小 */
.section-desc {
  margin-top: 12px;
}

/* ---- NEWS — PC時の透かし文字 ---- */
#news {
  position: relative;
  overflow: hidden;
}
.news-watermark {
  display: none; /* デフォルト非表示 */
}
@media (min-width: 769px) {
  .news-watermark {
    display: block;
    position: absolute;
    top: 50%;
    right: -2%;
    transform: translateY(-50%);
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(7rem, 15vw, 16rem);
    font-weight: 900;
    letter-spacing: -.04em;
    color: rgba(0, 63, 138, .04);
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
    z-index: 0;
    line-height: 1;
  }
}
/* NEWSコンテンツを透かしより前面に */
#news .container {
  position: relative;
  z-index: 1;
}

/* ---- ページトップボタン — スタイリッシュ ---- */
#scroll-top {
  position: fixed;
  bottom: 32px;
  right: 32px;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1.5px solid rgba(0, 63, 138, .3);
  border-radius: 0;                         /* 角丸なし → スクエア */
  color: var(--blue-deep);
  font-size: .75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
  z-index: 900;
  transition: background .3s, border-color .3s, color .3s, opacity .3s, transform .3s;
  box-shadow: none;
  overflow: hidden;
}
/* スライドイン背景 */
#scroll-top::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--blue-deep);
  transform: scaleY(0);
  transform-origin: bottom center;
  transition: transform .35s cubic-bezier(0.19, 1, 0.22, 1);
  z-index: 0;
}
#scroll-top:hover::before {
  transform: scaleY(1);
}
#scroll-top:hover {
  color: #fff;
  border-color: var(--blue-deep);
}
#scroll-top i,
#scroll-top .scroll-top-label {
  position: relative;
  z-index: 1;
}
/* TOPテキストを追加 */
#scroll-top .scroll-top-label {
  font-family: 'Montserrat', sans-serif;
  font-size: .52rem;
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1;
}
#scroll-top.visible {
  opacity: 1;
  pointer-events: auto;
}
#scroll-top:hover {
  transform: translateY(-2px);
}

@media (max-width: 768px) {
  #scroll-top {
    bottom: 20px;
    right: 16px;
    width: 40px;
    height: 40px;
  }
}


/* ============================================================
   V5 SECTION WATERMARK — 左上・PC時のみ
============================================================ */

/* デフォルト非表示 */
.section-watermark {
  display: none;
}

@media (min-width: 769px) {
  /* 各セクションをrelativeに */
  section {
    position: relative;
  }

  .section-watermark {
    display: block;
    position: absolute;
    top: 16px;
    left: 20px;
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(3rem, 6.5vw, 7.5rem);
    font-weight: 900;
    font-style: italic;
    letter-spacing: -.02em;
    color: rgba(0, 63, 138, .05);
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
    z-index: 0;
    line-height: 1;
  }

  /* コンテンツが透かしより前面に */
  .section-watermark ~ .container,
  .section-watermark ~ div {
    position: relative;
    z-index: 1;
  }
}

/* NEWS透かしも左上に統一 */
@media (min-width: 769px) {
  .news-watermark {
    top: 16px !important;
    right: auto !important;
    left: 20px !important;
    transform: none !important;
    font-size: clamp(3rem, 6.5vw, 7.5rem) !important;
    font-style: italic !important;
    letter-spacing: -.02em !important;
  }
}

/* section-eyebrow — problemセクションのみ再表示 */
#problem .section-eyebrow {
  display: flex;
}


/* ============================================================
   V5 UPDATES — nav hover / magazine swipe / service-tags / problem-cta
============================================================ */

/* ---- 1. NAV ホバー — crowd.co.jp風 アンダーライン伸長 ---- */
#global-nav ul li a {
  position: relative;
}
#global-nav ul li a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--blue-mid);
  transition: width .4s cubic-bezier(0.19, 1, 0.22, 1);
}
#global-nav ul li a:hover::after {
  width: 100%;
}
/* CTAボタン（無料相談）はアンダーライン不要 */
#global-nav ul li a.nav-cta::after { display: none; }

/* モバイルではアンダーラインなし */
@media (max-width: 1024px) {
  #global-nav ul li a::after { display: none; }
}

/* ---- 2. マガジンスライド — スワイプ対応 ---- */
.magazine-track-wrap {
  cursor: grab;
  -webkit-overflow-scrolling: touch;
}
.magazine-track-wrap.is-dragging {
  cursor: grabbing;
}
.magazine-track-wrap.is-dragging .magazine-track {
  animation-play-state: paused !important;
}

/* ---- 3. service-tags — アウトラインのみ（塗りつぶしなし） ---- */
.service-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.service-tag {
  font-family: 'Montserrat', 'Noto Sans JP', sans-serif;
  font-size: .68rem;
  font-weight: 600;
  color: var(--blue-mid);
  background: transparent !important;
  border: 1.5px solid var(--blue-mid);
  padding: 3px 10px;
  border-radius: 0;
  letter-spacing: .04em;
  transition: background .25s, color .25s;
}
.service-card:hover .service-tag {
  background: transparent !important;
  color: var(--blue-deep);
  border-color: var(--blue-deep);
}

/* ---- 4. problem-cta — スタイリッシュボタン（影なし） ---- */
.problem-cta {
  text-align: center;
  margin-top: 48px;
}
.btn-stylish {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Montserrat', sans-serif;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--blue-deep);
  text-decoration: none;
  padding: 0;
  position: relative;
  border: none;
  background: transparent;
  cursor: pointer;
  box-shadow: none;
}
/* テキスト下のライン */
.btn-stylish span {
  position: relative;
  padding-bottom: 6px;
}
.btn-stylish span::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: var(--blue-deep);
  transform: scaleX(1);
  transform-origin: left center;
  transition: transform .4s cubic-bezier(0.19, 1, 0.22, 1);
}
.btn-stylish:hover span::after {
  transform: scaleX(0);
  transform-origin: right center;
}
/* 矢印アニメーション */
.btn-stylish i {
  transition: transform .35s cubic-bezier(0.19, 1, 0.22, 1);
}
.btn-stylish:hover i {
  transform: translateX(6px);
}
.btn-stylish:hover {
  color: var(--blue-mid);
}


/* magazine-track-wrap スクロールバー非表示 */
.magazine-track-wrap::-webkit-scrollbar { display: none; }
.magazine-track-wrap {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* ---- service-tag 最終スタイル: 枠線のみ・ホバーで文字色変化のみ ---- */
.service-tag {
  background: transparent !important;
  border: 1.5px solid rgba(0, 87, 192, .4) !important;
  color: var(--blue-mid) !important;
  transition: border-color .25s, color .25s !important;
}
.service-card:hover .service-tag,
.service-tag:hover {
  background: transparent !important;
  border-color: var(--blue-deep) !important;
  color: var(--blue-deep) !important;
}

/* ============================================================
   V5 FINAL UPDATES
============================================================ */

/* ---- 制作の流れ: 中央揃え + 下余白 ---- */
.process-wrap {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
  padding-bottom: 48px;
}
.process-steps {
  text-align: left; /* ステップ本文は左揃えを維持 */
}
.process-wrap .section-title {
  text-align: center;
  margin-bottom: 40px;
}

/* ---- process-num: 背景なし・文字大・イタリック ---- */
.process-num {
  background: none !important;
  color: var(--blue-mid) !important;
  font-size: 1.6rem !important;
  font-style: italic !important;
  font-weight: 900 !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  display: inline !important;
  line-height: 1 !important;
  padding: 0 !important;
}
/* タイムライン縦線の位置調整（num幅変化に対応） */
.process-steps::before {
  left: 32px;
}
.timeline-year::after {
  display: none; /* process-num-wrap内のドット不要 */
}
.process-num-wrap::after {
  display: none;
}

/* ---- バッジの単位テキスト（号・世帯・回）---- */
.mag-stat-unit {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: .85rem;
  font-weight: 700;
  color: var(--blue-deep);
  margin-left: 3px;
  align-self: flex-end;
  padding-bottom: 6px;
  line-height: 1;
}

/* ---- contact-form-link: 紙飛行機なし版 ---- */
.contact-form-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--yellow);
  border-radius: 4px;
  padding: 28px 40px;
  margin-bottom: 24px;
  transition: background .2s, transform .2s, box-shadow .2s;
  text-decoration: none;
}
.contact-form-link:hover {
  background: #e6b800;
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(245,200,0,.3);
}
.contact-form-text { flex: 1; text-align: left; }
.contact-form-title { font-size: 1.05rem; font-weight: 800; color: var(--blue-deep); margin-bottom: 4px; }
.contact-form-sub { font-size: .8rem; color: rgba(0,63,138,.7); }
.contact-form-arrow { font-size: 1.2rem; color: var(--blue-deep); flex-shrink: 0; }


/* ---- contact-form-link 崩れ修正 ---- */
a.contact-form-link {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: var(--yellow) !important;
  border-radius: 4px !important;
  padding: 28px 40px !important;
  margin-bottom: 24px !important;
  text-decoration: none !important;
  transition: background .2s, transform .2s, box-shadow .2s !important;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
a.contact-form-link:hover {
  background: #e6b800 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 32px rgba(245,200,0,.3) !important;
}
a.contact-form-link .contact-form-text {
  flex: 1 !important;
  text-align: left !important;
}
a.contact-form-link .contact-form-title {
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  color: var(--blue-deep) !important;
  margin-bottom: 4px !important;
}
a.contact-form-link .contact-form-sub {
  font-size: .8rem !important;
  color: rgba(0,63,138,.7) !important;
  margin: 0 !important;
}
a.contact-form-link .contact-form-arrow {
  font-size: 1.2rem !important;
  color: var(--blue-deep) !important;
  flex-shrink: 0 !important;
  margin-left: 16px !important;
}

/* contact-card 全体の幅制限・中央寄せ */
.contact-card {
  max-width: 720px;
  margin: 0 auto;
}
.contact-sub-links {
  display: flex !important;
  justify-content: center !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
}
.contact-sub-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 12px 24px !important;
  border: 1.5px solid var(--gray-200) !important;
  border-radius: 28px !important;
  font-size: .85rem !important;
  font-weight: 600 !important;
  color: var(--gray-800) !important;
  text-decoration: none !important;
  transition: border-color .2s, color .2s !important;
}
.contact-sub-link:hover {
  border-color: var(--blue-mid) !important;
  color: var(--blue-mid) !important;
}

/* ---- btn-primary: オレンジ枠・透明背景 → btn-ghost同方式アニメーション ---- */
.btn-primary {
  background: transparent !important;
  color: var(--yellow-dark) !important;
  border: 1.5px solid var(--yellow) !important;
  box-shadow: none !important;
}
/* スライドイン背景をオレンジに */
.btn-primary::before {
  background: var(--yellow) !important;
}
/* ホバー時: 文字色を濃紺に（背景が黄になるので） */
.btn-primary:hover {
  color: var(--blue-deep) !important;
  box-shadow: none !important;
  transform: none !important;
}

/* ---- btn-primary: オレンジ塗りつぶし → ホバーで白スライドイン ---- */
.btn-primary {
  background: var(--yellow) !important;
  color: var(--blue-deep) !important;
  border: 1.5px solid var(--yellow) !important;
  box-shadow: none !important;
}
.btn-primary::before {
  background: #fff !important;
}
.btn-primary:hover {
  color: var(--blue-deep) !important;
  box-shadow: none !important;
  transform: none !important;
}

/* ============================================================
   BUTTON — 左から勢いよくスライドイン（両ボタン共通）
============================================================ */

/* ::before を左起点に変更 */
.btn::before,
.btn-primary::before,
.btn-ghost::before,
.btn-dark::before {
  transform-origin: left center !important;
  transform: skewX(-18deg) scaleX(0) !important;
  transition: transform .45s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.btn:hover::before,
.btn-primary:hover::before,
.btn-ghost:hover::before,
.btn-dark:hover::before {
  transform: skewX(-18deg) scaleX(1) !important;
  transform-origin: left center !important;
}

/* btn-primary: オレンジ塗りつぶし・ホバーで白スライド */
.btn-primary {
  background: var(--yellow) !important;
  color: var(--blue-deep) !important;
  border: 1.5px solid var(--yellow) !important;
  box-shadow: none !important;
  font-weight: 800 !important;
}
.btn-primary::before { background: #fff !important; }
.btn-primary:hover { color: var(--blue-deep) !important; transform: none !important; box-shadow: none !important; }

/* btn-ghost: 透明・青枠・ホバーで青スライド */
.btn-ghost {
  background: transparent !important;
  color: var(--blue-deep) !important;
  border: 1.5px solid var(--blue-mid) !important;
  box-shadow: none !important;
}
.btn-ghost::before { background: var(--blue-mid) !important; }
.btn-ghost:hover { color: #fff !important; border-color: var(--blue-mid) !important; box-shadow: none !important; transform: none !important; }


/* ============================================================
   BUTTON SLIDE — b-risk.jp スライド方式
   ::after で左から背景が流れ込む・離すと右へ戻る
============================================================ */

/* 既存の::before アニメーションをリセット */
.btn-primary::before,
.btn-ghost::before {
  display: none !important;
}

/* ::after で背景スライド */
.btn-primary,
.btn-ghost {
  position: relative !important;
  overflow: hidden !important;
  z-index: 1 !important;
}
.btn-primary span,
.btn-primary i,
.btn-ghost span,
.btn-ghost i {
  position: relative !important;
  z-index: 2 !important;
}

/* ---- btn-primary (オレンジ) ---- */
.btn-primary {
  background: var(--yellow) !important;
  color: var(--blue-deep) !important;
  border: 2px solid var(--yellow) !important;
  box-shadow: none !important;
  font-weight: 800 !important;
  transition: color .3s !important;
}
.btn-primary::after {
  content: '';
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  width: 100% !important; height: 100% !important;
  background: var(--blue-deep) !important;
  transform: scale(0, 1) !important;
  transform-origin: left top !important;
  transition: transform .3s cubic-bezier(0.45, 0, 0.55, 1) !important;
  z-index: 0 !important;
}
.btn-primary:hover::after {
  transform: scale(1, 1) !important;
  transform-origin: left top !important;
}
.btn-primary:not(:hover)::after {
  transform: scale(0, 1) !important;
  transform-origin: right top !important;
}
.btn-primary:hover {
  color: var(--yellow) !important;
  box-shadow: none !important;
  transform: none !important;
}

/* ---- btn-ghost (ブルー) ---- */
.btn-ghost {
  background: transparent !important;
  color: var(--blue-deep) !important;
  border: 2px solid var(--blue-mid) !important;
  box-shadow: none !important;
  transition: color .3s !important;
}
.btn-ghost::after {
  content: '';
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  width: 100% !important; height: 100% !important;
  background: var(--blue-mid) !important;
  transform: scale(0, 1) !important;
  transform-origin: left top !important;
  transition: transform .3s cubic-bezier(0.45, 0, 0.55, 1) !important;
  z-index: 0 !important;
}
.btn-ghost:hover::after {
  transform: scale(1, 1) !important;
  transform-origin: left top !important;
}
.btn-ghost:not(:hover)::after {
  transform: scale(0, 1) !important;
  transform-origin: right top !important;
}
.btn-ghost:hover {
  color: #fff !important;
  border-color: var(--blue-mid) !important;
  box-shadow: none !important;
  transform: none !important;
}


/* ============================================================
   BUTTON FINAL — b-risk スライド完全実装
   ::after scale(0,1)→scale(1,1) 左から流れ込む
   離すと transform-origin: right top で右へ戻る
============================================================ */

/* リセット：既存の::before/::afterをすべて無効化 */
.btn-primary::before,
.btn-ghost::before { display: none !important; }

/* 共通ベース */
.btn-primary,
.btn-ghost {
  position: relative !important;
  overflow: hidden !important;
  transition: color .3s !important;
  box-shadow: none !important;
  transform: none !important;
}
/* テキスト・アイコンを前面に */
.btn-primary > *,
.btn-ghost > * {
  position: relative !important;
  z-index: 2 !important;
}

/* ---- btn-primary: 黄色塗りつぶし → ホバーで濃紺スライドイン ---- */
.btn-primary {
  background: var(--yellow) !important;
  color: var(--blue-deep) !important;
  border: 2px solid var(--yellow) !important;
  font-weight: 800 !important;
}
.btn-primary::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: var(--blue-deep) !important;
  transform: scale(0, 1) !important;
  transform-origin: left top !important;
  transition: transform .3s cubic-bezier(0.45, 0, 0.55, 1) !important;
  z-index: 1 !important;
}
.btn-primary:hover {
  color: var(--yellow) !important;
}
.btn-primary:hover::after {
  transform: scale(1, 1) !important;
  transform-origin: left top !important;
}
.btn-primary:not(:hover)::after {
  transform: scale(0, 1) !important;
  transform-origin: right top !important;
}

/* ---- btn-ghost: 透明・青枠 → ホバーで青スライドイン ---- */
.btn-ghost {
  background: transparent !important;
  color: var(--blue-deep) !important;
  border: 2px solid var(--blue-mid) !important;
}
.btn-ghost::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: var(--blue-mid) !important;
  transform: scale(0, 1) !important;
  transform-origin: left top !important;
  transition: transform .3s cubic-bezier(0.45, 0, 0.55, 1) !important;
  z-index: 1 !important;
}
.btn-ghost:hover {
  color: #fff !important;
  border-color: var(--blue-mid) !important;
}
.btn-ghost:hover::after {
  transform: scale(1, 1) !important;
  transform-origin: left top !important;
}
.btn-ghost:not(:hover)::after {
  transform: scale(0, 1) !important;
  transform-origin: right top !important;
}


/* ---- ボタン最終調整 ---- */
/* オレンジ: 流れ込む背景を白に・文字は濃紺のまま */
.btn-primary::after { background: #fff !important; }
.btn-primary:hover  { color: var(--blue-deep) !important; }

/* 青: ホバー時の文字を白に */
.btn-ghost:hover { color: #fff !important; }

/* ============================================================
   BUTTON SLIDE 確定版 — テキストspanをz-index:2で前面に
============================================================ */

/* テキストspanとアイコンを確実に前面へ */
.btn-primary span,
.btn-primary i,
.btn-ghost span,
.btn-ghost i {
  position: relative !important;
  z-index: 3 !important;
}

/* ::after を z-index:1 に（テキストの下） */
.btn-primary::after,
.btn-ghost::after {
  z-index: 1 !important;
}

/* ホバー時の文字色を明示 */
.btn-primary:hover span,
.btn-primary:hover i {
  color: var(--blue-deep) !important;
}
.btn-ghost:hover span,
.btn-ghost:hover i {
  color: #fff !important;
}

/* ============================================================
   CONTACT-FORM-LINK — b-risk スライドアニメーション
============================================================ */
a.contact-form-link {
  position: relative !important;
  overflow: hidden !important;
  transition: color .3s !important;
  background: var(--yellow) !important;
}
/* テキスト・矢印を前面に */
a.contact-form-link .contact-form-text,
a.contact-form-link .contact-form-title,
a.contact-form-link .contact-form-sub,
a.contact-form-link .contact-form-arrow,
a.contact-form-link .contact-form-arrow i {
  position: relative !important;
  z-index: 2 !important;
}
/* ::after でスライドイン背景 */
a.contact-form-link::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: var(--blue-deep) !important;
  transform: scale(0, 1) !important;
  transform-origin: left top !important;
  transition: transform .3s cubic-bezier(0.45, 0, 0.55, 1) !important;
  z-index: 1 !important;
}
a.contact-form-link:hover::after {
  transform: scale(1, 1) !important;
  transform-origin: left top !important;
}
a.contact-form-link:not(:hover)::after {
  transform: scale(0, 1) !important;
  transform-origin: right top !important;
}
/* ホバー時: 文字を白・黄色に */
a.contact-form-link:hover .contact-form-title {
  color: var(--yellow) !important;
}
a.contact-form-link:hover .contact-form-sub,
a.contact-form-link:hover .contact-form-arrow i {
  color: rgba(255,255,255,.8) !important;
}
a.contact-form-link:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* ---- contact-form-link サイズを少し小さく ---- */
a.contact-form-link {
  padding: 20px 32px !important;
  border-radius: 2px !important;
}
.contact-form-title {
  font-size: .95rem !important;
}
.contact-form-sub {
  font-size: .75rem !important;
}
.contact-form-arrow {
  font-size: 1rem !important;
}


/* ---- process-wrap max-width拡大 ---- */
.process-wrap {
  max-width: 1060px !important;
}


/* ============================================================
   V5 FINAL — rgb(232,243,255) 全置換 / ach-card整理 / QA間隔
============================================================ */

/* ---- rgb(232,243,255) を使っている箇所をすべて透明・白系に変更 ---- */

/* service-tags の li */
.service-tags li,
.service-tag {
  background: transparent !important;
}

/* timeline-badge badge-official */
.timeline-badge.badge-official {
  background: transparent !important;
  border: 1.5px solid var(--blue-mid) !important;
  color: var(--blue-deep) !important;
}

/* news-card-cat (blog等カテゴリラベル) */
.news-card-cat {
  background: transparent !important;
  border: 1px solid var(--blue-mid) !important;
  color: var(--blue-mid) !important;
}
.news-card-cat[data-cat="web"] {
  background: transparent !important;
}
.news-card-cat[data-cat="info"] {
  background: transparent !important;
}

/* news-card-thumb（サムネなし時のフォールバック） */
.news-card-thumb {
  background: var(--gray-bg) !important;
}

/* ---- 実績・認定 ach-card — 左ボーダーを統一スタイルに ---- */
.ach-card {
  background: #fff !important;
  border: 1px solid var(--gray-200) !important;
  border-left: 3px solid var(--blue-mid) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.ach-card.ach-award   { border-left-color: var(--yellow) !important; }
.ach-card.ach-official { border-left-color: var(--blue-mid) !important; }
.ach-card.ach-media   { border-left-color: #48bb78 !important; }

/* ---- 404ページ ---- */
.error404 .site-main {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 24px;
}
.error-404-wrap {
  max-width: 560px;
  margin: 0 auto;
}
.error-404-code {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(5rem, 15vw, 10rem);
  font-weight: 900;
  font-style: italic;
  color: rgba(0,63,138,.06);
  line-height: 1;
  margin-bottom: 8px;
}
.error-404-title {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--blue-deep);
  margin-bottom: 16px;
}
.error-404-desc {
  font-size: .9rem;
  color: var(--gray-600);
  line-height: 1.8;
  margin-bottom: 40px;
}
.error-404-links {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ---- QA（こんなお悩みセクション）スマホ時 Q と A の間隔 ---- */
@media (max-width: 768px) {
  .qa-q {
    margin-bottom: 10px !important;
  }
}


/* ---- service-tag: timeline-badge同様に枠線スタイルで囲む ---- */
.service-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
  list-style: none;
  padding: 0;
}
.service-tag {
  display: inline-block !important;
  font-size: .72rem !important;
  font-weight: 600 !important;
  color: var(--blue-mid) !important;
  background: transparent !important;
  border: 1.5px solid rgba(0, 87, 192, .35) !important;
  border-radius: 2px !important;
  padding: 3px 10px !important;
  letter-spacing: .03em !important;
  line-height: 1.5 !important;
  white-space: nowrap;
  transition: border-color .2s, color .2s !important;
}
.service-card:hover .service-tag {
  border-color: var(--blue-mid) !important;
  color: var(--blue-deep) !important;
}


/* ---- service-tags li (クラスなしも対象) ---- */
.service-tags li,
.service-tags .service-tag {
  display: inline-block !important;
  font-size: .72rem !important;
  font-weight: 600 !important;
  color: var(--blue-mid) !important;
  background: transparent !important;
  border: 1.5px solid rgba(0, 87, 192, .35) !important;
  border-radius: 2px !important;
  padding: 3px 10px !important;
  letter-spacing: .03em !important;
  line-height: 1.5 !important;
  white-space: nowrap;
  transition: border-color .2s, color .2s !important;
}
.service-card:hover .service-tags li,
.service-card:hover .service-tag {
  border-color: var(--blue-mid) !important;
  color: var(--blue-deep) !important;
}

/* ---- service-card をリンク化（aタグ対応） ---- */
a.service-card {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
a.service-card h3,
a.service-card p {
  color: inherit;
}
a.service-card:hover h3 {
  color: var(--blue-mid);
}

/* ============================================================
   NAV DROPDOWN — サービスドロップダウン
============================================================ */
.nav-has-dropdown {
  position: relative;
}
/* ドロップダウン本体 */
.nav-dropdown {
  display: block;
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 200px;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-top: 2px solid var(--blue-mid);
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  border-radius: 0 0 4px 4px;
  padding: 8px 0;
  list-style: none;
  z-index: 999;
  /* 非表示状態 */
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(-6px);
  transition: opacity .2s, transform .2s;
}
/* ホバーで表示 */
.nav-has-dropdown:hover .nav-dropdown,
.nav-has-dropdown:focus-within .nav-dropdown {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
/* 三角矢印 */
.nav-dropdown::before {
  content: '';
  position: absolute;
  top: -7px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid var(--blue-mid);
}
/* ドロップダウン各項目 */
.nav-dropdown li {
  margin: 0;
  padding: 0;
}
.nav-dropdown li a {
  display: block;
  padding: 10px 20px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--blue-deep);
  white-space: nowrap;
  transition: background .15s, color .15s, padding-left .15s;
  border-radius: 0;
}
.nav-dropdown li a:hover {
  background: var(--blue-light);
  color: var(--blue-mid);
  padding-left: 26px;
}
/* 親リンクに矢印アイコン */
.nav-has-dropdown > a::after {
  content: ' ▾';
  font-size: .65em;
  opacity: .6;
  margin-left: 2px;
}
/* スマホ：ドロップダウンは縦展開 */
@media (max-width: 1024px) {
  .nav-dropdown {
    position: static;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    box-shadow: none;
    border: none;
    border-left: 2px solid var(--blue-light);
    border-top: none;
    background: transparent;
    padding: 0 0 0 16px;
    margin-top: 4px;
  }
  .nav-dropdown::before { display: none; }
  .nav-dropdown li a {
    padding: 8px 12px;
    font-size: .8rem;
  }
  .nav-dropdown li a:hover {
    padding-left: 18px;
    background: transparent;
  }
}


/* ============================================================
   MEDIA-WEB-LINKS — アイコンなし・スタイリッシュリンク
============================================================ */
.media-web-links {
  list-style: none;
  padding: 0;
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.media-web-links li a {
  display: inline-flex;
  align-items: center;
  font-size: .85rem;
  font-weight: 600;
  color: var(--blue-deep);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 1px solid rgba(0,63,138,.15);
  transition: color .2s, border-color .2s, padding-left .2s;
  width: 100%;
}
.media-web-links li a::after {
  content: '→';
  margin-left: auto;
  font-size: .75rem;
  opacity: .5;
  transition: opacity .2s, transform .2s;
}
.media-web-links li a:hover {
  color: var(--blue-mid);
  border-color: var(--blue-mid);
  padding-left: 6px;
}
.media-web-links li a:hover::after {
  opacity: 1;
  transform: translateX(4px);
}

/* ============================================================
   BREADCRUMB — パンくずリスト
============================================================ */
.breadcrumb {
  padding: 12px 0;
  margin-bottom: 0;
  font-size: .78rem;
  color: var(--gray-600);
  border-bottom: 1px solid var(--gray-100);
  background: var(--gray-bg);
}
.breadcrumb-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.breadcrumb a {
  color: var(--blue-mid);
  text-decoration: none;
  transition: color .2s;
}
.breadcrumb a:hover {
  color: var(--blue-deep);
  text-decoration: underline;
}
.breadcrumb-sep {
  color: var(--gray-400);
  font-size: .7rem;
}
.breadcrumb-current {
  color: var(--gray-600);
  font-weight: 600;
}
@media (max-width: 768px) {
  .breadcrumb-inner {
    padding: 0 16px;
  }
  .breadcrumb {
    font-size: .72rem;
  }
}


/* ---- media-web-links: 左余白追加・幅調整 ---- */
.media-web-links li a {
  width: auto !important;
  padding: 6px 12px 6px 0 !important;
  border-bottom: none !important;
  border-left: 2px solid rgba(0, 63, 138, .2) !important;
  padding-left: 12px !important;
  transition: border-color .2s, color .2s, padding-left .2s !important;
}
.media-web-links li a:hover {
  border-left-color: var(--blue-mid) !important;
  color: var(--blue-mid) !important;
  padding-left: 16px !important;
}
.media-web-links li a:hover {
  padding-left: 16px !important;
}


/* ============================================================
   実績・認定 / メディア情報 — 色修正
============================================================ */

/* ach-card: 左ボーダーカラーをすべて削除（グレーに統一） */
.ach-card,
.ach-card.ach-award,
.ach-card.ach-official,
.ach-card.ach-media {
  border-left-color: var(--gray-200) !important;
}

/* ach-year: 大きく・黒に */
.ach-year {
  font-size: 1rem !important;
  font-weight: 800 !important;
  color: var(--gray-900, #111) !important;
  letter-spacing: .01em !important;
}

/* media-mag / media-web: 上部のボーダーカラーを削除 */
.media-mag,
.media-web {
  border-top-color: var(--gray-200) !important;
}


/* ---- パンくずリスト 修正 ---- */
.breadcrumb {
  background: #f8f9fa !important;
  border-bottom: 1px solid #e9ecef !important;
  padding: 10px 0 !important;
  margin-top: 0 !important;
}
.breadcrumb-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
}
@media (max-width: 768px) {
  .breadcrumb-inner { padding: 0 16px; }
}


/* ============================================================
   スマホメニュー修正 — 全項目表示 + スクロール対応
============================================================ */
@media (max-width: 1024px) {
  /* fixed → スクロール追従に変更、max-heightで全項目表示 */
  #global-nav {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    max-height: calc(100svh - 70px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    /* スクロールバー非表示 */
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  #global-nav::-webkit-scrollbar { display: none; }
  /* ヘッダーをrelativeに（absoluteの基準点） */
  #site-header,
  header.site-header,
  .site-header {
    position: relative !important;
  }
  /* サービスのドロップダウンはスマホでは常時展開 */
  .nav-dropdown {
    display: block !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
  }
}

/* ============================================================
   新着情報カテゴリラベル — スクロール追従（fixed解除）
============================================================ */
.news-card-cat {
  position: static !important;
}


/* ============================================================
   スマホ：サービスドロップダウン — タップで展開
============================================================ */
@media (max-width: 1024px) {
  /* デフォルトは非表示 */
  .nav-dropdown {
    display: none !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
  }
  /* openクラスがついたら展開 */
  .nav-has-dropdown.open .nav-dropdown {
    display: block !important;
  }
  /* 展開ボタン（▾矢印）のスタイル */
  .nav-dropdown-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--blue-mid);
    font-size: .75rem;
    transition: transform .25s;
    margin-left: auto;
    flex-shrink: 0;
  }
  .nav-has-dropdown.open .nav-dropdown-toggle {
    transform: rotate(180deg);
  }
  /* 親リンクと矢印ボタンを横並び */
  .nav-has-dropdown > .nav-item-row {
    display: flex;
    align-items: center;
  }
  .nav-has-dropdown > .nav-item-row > a {
    flex: 1;
  }
  /* PC時の::afterの▾は非表示 */
  .nav-has-dropdown > a::after {
    display: none !important;
  }
}


/* ============================================================
   PC: nav-item-row非表示・サービスリンク正常化
============================================================ */
@media (min-width: 1025px) {
  /* nav-item-rowはスマホ専用 → PCでは透過的に */
  .nav-has-dropdown > .nav-item-row {
    display: contents;
  }
  /* トグルボタンはPCで非表示 */
  .nav-dropdown-toggle {
    display: none !important;
  }
  /* PCのサービスリンクに▾を復活 */
  .nav-has-dropdown > .nav-item-row > a::after {
    content: ' ▾';
    font-size: .65em;
    opacity: .6;
    margin-left: 2px;
    display: inline !important;
  }
}

/* ============================================================
   スマホ: ▾ボタンを大きく
============================================================ */
@media (max-width: 1024px) {
  .nav-dropdown-toggle {
    width: 44px !important;
    height: 44px !important;
    font-size: 1.2rem !important;
    color: var(--blue-mid) !important;
    background: rgba(0,87,192,.07) !important;
    border-radius: 6px !important;
    margin-left: 8px !important;
  }
}


/* ---- ▾ボタン 薄青背景を削除 ---- */
@media (max-width: 1024px) {
  .nav-dropdown-toggle {
    background: none !important;
    border-radius: 0 !important;
  }
}

/* ============================================================
   v1.0.4 — media-web-links背景削除 / QAアイコン色変更
============================================================ */

/* media-web-links: 青背景を削除 */
.media-web-links li a {
  background: transparent !important;
}

/* QA: アイコン色は上部の .qa-icon / .qa-icon-a で定義済み */


/* ============================================================
   実績・認定 — 上余白を縮小
============================================================ */
#achievements { padding-top: 56px !important; }