@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@700;800&family=Noto+Sans+JP:wght@400;500;700;900&family=Roboto:wght@400;500;700;900&family=Shippori+Mincho+B1:wght@600;700;800&family=Zen+Kaku+Gothic+New:wght@500;700;900&display=swap");

/* =========================================================
   合同会社もちもつ — writeup.jp のレイアウト構造を忠実に再現
   （構造・寸法・余白は同一。色味とフォントのみ自社仕様に置換）
   配色: ネイビー #1a2332 / オレンジ #0f8a55 / 温かみのある白
   html font-size: 62.5% → 1rem = 10px（ライトアップと同じ採寸基準）
   ========================================================= */

/* ---- カラートークン ---- */
:root {
  --c-base: #ffffff;      /* ページ背景（リコー系クリーンな白） */
  --c-gray: #f3f3f3;      /* グレーセクション（リコー系 #f3f3f3/#f6f6f6） */
  --c-white: #ffffff;     /* カード地 */
  --c-text: #222222;      /* 本文（黒寄り） */
  --c-navy: #1a2332;      /* ネイビー */
  --c-accent: #0f8a55;    /* リコー系コーポレートレッド */
  --c-accent-dark: #0a6b41;
  --c-border: #d9d9d9;    /* 罫線（グレー） */
  /* 代表プロフィール(creds)用エイリアス：未定義だった変数を既存トークンに割当て */
  --c-green: #0f8a55;
  --c-green-d: #0a6b41;
  --c-line: #d9d9d9;
  --c-muted: #515151;
}

/* ---- リセット ---- */
* { box-sizing: border-box; }
html {
  height: 100%;
  font-size: 62.5%;
  -webkit-text-size-adjust: 100%;
  /* 横スクロール（謎の空きスペース）対策。
     body だけの overflow-x:hidden はビューポートへ伝播せず、
     1024px以上（タブレット横など）で transform でずらした空箱が横パンできてしまう。
     ルートの html でクリップして全幅で止める。
     clip は scroll-container を作らないため sticky ヘッダーに影響しない。
     旧ブラウザ用に hidden をフォールバック併記。 */
  overflow-x: hidden;
  overflow-x: clip;
}
body {
  margin: 0;
  overflow-x: hidden;
  font-family: "Roboto", "Noto Sans JP", Verdana, Meiryo, sans-serif;
  font-size: 1.6rem;
  line-height: 1.7;
  color: var(--c-text);
  background: var(--c-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, p, ul, ol, figure, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { max-width: 100%; height: auto; vertical-align: bottom; border: 0; }
a { color: inherit; text-decoration: none; transition: all 0.25s ease; }
button { font-family: inherit; }

/* ---- スクロール出現アニメ（ライトアップ .scroll と同一） ---- */
.scroll { opacity: 0; }
.scroll.is-scroll { animation: fadein 0.8s ease forwards; }
@keyframes fadein {
  0%   { transform: translateY(30px); }
  100% { opacity: 1; transform: translateY(0); }
}
.scroll + .scroll { animation-delay: 0.15s; }

/* =========================================================
   HEADER（リコー/キヤノン型：ロゴ＋ナビ左／電話＋赤CTA右・1本バー）
   ========================================================= */
.header {
  position: sticky;
  top: 0;
  z-index: 9999;
  background: #fff;
  border-bottom: 1px solid var(--c-border);
}
.header-main {
  max-width: 1320px;
  margin: 0 auto;
  padding: 1.3rem 2.4rem;
  display: flex;
  align-items: center;
}
.header-logo { line-height: 0; flex: none; }
.header-logo a { display: inline-flex; align-items: center; gap: 11px; }
.logo-mark { width: auto; height: 42px; flex: none; }
.logo-text-img { height: 30px; width: auto; display: block; flex: none; }
.logo-text { line-height: 1; }
.logo-text__name { display:block; font-family:"Zen Kaku Gothic New","Noto Sans JP",sans-serif; font-weight:700; font-size:1.9rem; letter-spacing:0.04em; color:var(--c-navy); }

/* ハンバーガー */
.header-trigger {
  position: relative; width: 30px; height: 22px; margin-left: auto;
  border: none; background: transparent; cursor: pointer; outline: 0; z-index: 10000;
}
.header-trigger span {
  width: 100%; height: 2px; background: var(--c-navy);
  display: inline-block; transition: 0.3s ease-in-out; position: absolute; left: 0;
}
.header-trigger span:nth-of-type(1) { top: 0; }
.header-trigger span:nth-of-type(2) { top: 10px; }
.header-trigger span:nth-of-type(3) { bottom: 0; }
.header-trigger.is-active span:nth-of-type(1) { transform: translateY(10px) rotate(-45deg); }
.header-trigger.is-active span:nth-of-type(2) { opacity: 0; }
.header-trigger.is-active span:nth-of-type(3) { transform: translateY(-10px) rotate(45deg); }

/* 電話ブロック */
.header-tel { display: flex; align-items: center; gap: 9px; color: var(--c-navy); }
.header-tel__icon { width: 19px; height: 19px; color: var(--c-accent); flex: none; }
.header-tel__body strong { display: block; font-family: "Archivo", sans-serif; font-size: 1.85rem; font-weight: 700; letter-spacing: 0.01em; line-height: 1.05; }
.header-tel__body small { display: block; font-family: "Noto Sans JP", sans-serif; font-size: 1rem; color: #888; margin-top: 2px; }

/* CTA（赤・角丸） */
.header-cta {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--c-accent); color: #fff;
  font-family: "Noto Sans JP", sans-serif; font-size: 1.4rem; font-weight: 700; letter-spacing: 0.04em;
  padding: 1.3rem 2.4rem; border-radius: 4px;
  transition: background 0.25s ease;
}
.header-cta:hover { background: var(--c-accent-dark); }
.header-cta__arrow { transition: transform 0.25s ease; }
.header-cta:hover .header-cta__arrow { transform: translateX(3px); }

/* SP ドロワー（〜1023px） */
@media screen and (max-width: 1023px) {
  .header-nav {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    padding: 70px 0 0; background: #fff; z-index: 9998;
    opacity: 0; visibility: hidden; transition: 0.3s ease-in-out; overflow-y: auto;
  }
  .header-inner__nav { padding: 1rem 0; }
  .header-inner__nav > li { border-bottom: 1px solid var(--c-border); }
  .header-inner__nav > li > a {
    padding: 1.6rem 2.4rem; display: block; position: relative;
    font-size: 1.6rem; font-weight: 700; color: var(--c-navy);
  }
  .header-inner__nav > li > a:after {
    content: ""; width: 6px; height: 6px; margin-top: -3px;
    border-top: 1px solid var(--c-navy); border-right: 1px solid var(--c-navy);
    transform: rotate(45deg); position: absolute; top: 50%; right: 2.4rem;
  }
  .header-actions { padding: 2.4rem; display: flex; flex-direction: column; align-items: flex-start; gap: 1.8rem; }
  .header-cta { display: flex; justify-content: center; width: 100%; padding: 1.6rem; font-size: 1.5rem; }
  body.js-nav-open .header-nav { opacity: 1; visibility: visible; }
  body.js-nav-open { overflow: hidden; }
}

/* PC ヘッダー（1024px〜） */
@media (min-width: 1024px) {
  .header-main { padding: 1.5rem 3rem; }
  .header-trigger { display: none; }
  .header-logo { margin-right: 4.5rem; }
  .header-nav { display: flex; align-items: center; flex: 1; }
  .header-inner__nav { display: flex; gap: 3.2rem; }
  .header-inner__nav > li > a {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1.5rem; font-weight: 700; color: var(--c-navy);
    position: relative; padding: 0.6rem 0; display: inline-block;
  }
  .header-inner__nav > li > a:after {
    content: ""; height: 2px; background: var(--c-accent);
    position: absolute; left: 0; right: 0; bottom: -2px;
    transform: scaleX(0); transform-origin: right; transition: transform 0.3s ease;
  }
  .header-inner__nav > li > a:hover:after { transform: scaleX(1); transform-origin: left; }
  .header-actions { margin-left: auto; display: flex; align-items: center; gap: 2.6rem; }
}

/* ヒーロー下層共通 */

/* =========================================================
   見出し共通（home-heading = 大きな英字見出し）
   ========================================================= */
main { display: block; }
main .home-heading {
  font-family: "Roboto", sans-serif;
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.25rem;
  color: var(--c-navy);
}
main .home-heading span {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.5;
  margin-top: 0.6rem;
  display: block;
  letter-spacing: 0.05em;
  color: var(--c-accent);
}
main .home-txt {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  line-height: 1.8;
  margin-top: 1.5rem;
}

/* =========================================================
   MV（メインビジュアル）— 東芝風：明るい写真＋対角ジオメトリック＋左タイトル
   ========================================================= */
.mv { width: 100%; background: var(--c-navy); }
.mv__media { position: relative; overflow: hidden; min-height: 440px; }
.mv__bg {
  position: absolute; inset: 0;
  background: var(--c-navy) url(assets/kv-ai-illust.png?v=1780404565) center center / cover no-repeat;
  overflow: hidden;
}
/* イラスト導入につき幾何学図形は不使用 */
.sh, .mv__wave { display: none; }
.sh { position: absolute; animation: mvfloat 6s ease-in-out infinite; }
@keyframes mvfloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }
.sh1  { top:15%; left:24%; width:15px; height:15px; background:#0f8a55; border-radius:3px; animation-delay:0s; }
.sh2  { top:40%; left:33%; width:18px; height:18px; background:#f2c14e; clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); animation-delay:.6s; }
.sh3  { top:23%; left:52%; width:11px; height:11px; background:#4cc3d9; border-radius:50%; animation-delay:1.2s; }
.sh4  { top:57%; left:60%; width:13px; height:13px; border:2px solid #1a2332; animation-delay:.3s; }
.sh5  { top:13%; left:70%; width:9px;  height:9px;  background:#1a2332; border-radius:50%; animation-delay:1.5s; }
.sh6  { top:68%; left:45%; width:16px; height:16px; background:#4cc3d9; border-radius:3px; animation-delay:.9s; }
.sh7  { top:33%; left:78%; width:15px; height:15px; background:#0f8a55; clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); animation-delay:.4s; }
.sh8  { top:78%; left:68%; width:11px; height:11px; background:#f2c14e; border-radius:50%; animation-delay:1.1s; }
.sh9  { top:48%; left:86%; width:13px; height:13px; border:2px solid #4cc3d9; animation-delay:.7s; }
.sh10 { top:86%; left:52%; width:10px; height:10px; background:#1a2332; border-radius:2px; animation-delay:1.4s; }
.sh11 { top:29%; left:42%; width:8px;  height:8px;  background:#0f8a55; border-radius:50%; animation-delay:.2s; }
.sh12 { top:62%; left:28%; width:12px; height:12px; background:#f2c14e; clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); animation-delay:1s; }
.sh13 { top:18%; left:88%; width:14px; height:14px; background:#4cc3d9; border-radius:3px; animation-delay:.5s; }
.sh14 { top:82%; left:82%; width:9px;  height:9px;  background:#0f8a55; border-radius:50%; animation-delay:1.3s; }
.mv__wave { position:absolute; top:36%; right:5%; width:32%; opacity:.7; animation: mvfloat 8s ease-in-out infinite; }
/* 背景クロスフェード・スライダー（avaxia流：数秒ごとに切り替え） */
.mv__slide {
  position: absolute; inset: 0;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 0;
  opacity: 0;
  transition: opacity 1.6s ease;
}
.mv__slide.is-active { opacity: 1; }
.mv__slide { display: none; }
.mv__slide:nth-child(1) { background-image: url(assets/kv-hero.jpg?v=1780380855); }
.mv__slide:nth-child(2) { background-image: url(assets/kv-hero2.jpg?v=1780380855); }
.mv__slide:nth-child(3) { background-image: url(assets/kv-hero3.jpg?v=1780380855); }
.mv__bg::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(20,28,42,0.78);
}
/* 対角は画像側に作り込み済み → CSSの対角は不使用 */
.mv__diag, .mv__accent { display: none; }
.mv__inner {
  position: relative;
  z-index: 3;
  max-width: 1440px; margin: 0 auto;
  padding: 4rem 2.4rem 5rem;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-height: 440px;
}
/* テキスト全体を左の赤い縦ライン1本で束ね、左端を揃える */
.mv__text { color: #fff; position: relative; padding-left: 2rem; }
.mv__text::before {
  content: ""; position: absolute; left: 0; top: 0.4rem; bottom: 0.4rem;
  width: 3px; background: var(--c-accent);
}
.mv__cat {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.3rem; font-weight: 700; letter-spacing: 0.12em;
  color: #fff; border-left: 3px solid var(--c-accent); padding-left: 1.2rem;
  margin-bottom: 1.8rem;
}
/* 見出しは全文 同書体・同サイズ・同ウェイトで統一（階層は要素間でつける） */
.mv__title {
  font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  font-size: 2.8rem; font-weight: 900; line-height: 1.5; letter-spacing: 0.02em;
  color: #fff;
}
.mv__title-1, .mv__title-2 { display: block; }
.mv__sub { margin-top: 2.6rem; color: #fff; }
.mv__lead {
  font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  font-size: 1.5rem; font-weight: 700; line-height: 1.9; letter-spacing: 0.03em;
  margin-top: 2rem; color: rgba(255,255,255,0.9);
}
.mv__btn {
  display: inline-flex; align-items: center; gap: 12px; margin-top: 2.6rem;
  padding: 1.5rem 2.8rem;
  font-family: "Noto Sans JP", sans-serif; font-size: 1.5rem; font-weight: 700;
  color: #fff; background: var(--c-accent); border-radius: 4px; letter-spacing: 0.04em;
  transition: background 0.25s ease;
}
.mv__btn:hover { background: var(--c-accent-dark); }
.mv__arrow { transition: transform 0.25s ease; }
.mv__btn:hover .mv__arrow { transform: translateX(4px); }
/* 見出しのアクセント語（赤） */
.mv__hl { color: var(--c-accent); }
/* 左下のネットワーク装飾（PCのみ） */
.mv__deco { display: none; }

/* =========================================================
   リコー流 画像リンクカード・セクション（lsec / lcard）
   ========================================================= */
.lsec { max-width: 1200px; margin: 0 auto; padding: 7rem 2.4rem; }
.lsec__head { text-align: center; margin-top: 9rem; margin-bottom: 4rem; }
.lsec__en {
  font-family: "Roboto", sans-serif; font-size: 3.4rem; font-weight: 700;
  letter-spacing: 0.25rem; color: var(--c-navy); line-height: 1;
}
.lsec__jp {
  font-family: "Noto Sans JP", sans-serif; font-size: 1.5rem; font-weight: 700;
  color: var(--c-accent); letter-spacing: 0.08em; margin-top: 1.2rem;
}
.lsec__lead {
  font-family: "Noto Sans JP", sans-serif; font-size: 1.5rem; line-height: 1.9;
  color: #515151; max-width: 720px; margin: 1.8rem auto 0;
}
.lcard-grid { display: grid; grid-template-columns: 1fr; gap: 2.4rem; }
.lcard {
  display: block; background: #fff; border: 1px solid var(--c-border);
  border-radius: 6px; overflow: hidden;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.lcard:hover { box-shadow: 0 14px 34px rgba(26,35,50,0.12); transform: translateY(-3px); }
.lcard__img { aspect-ratio: 3/2; overflow: hidden; line-height: 0; }
.lcard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.lcard:hover .lcard__img img { transform: scale(1.05); }
.lcard__body { padding: 2.6rem 2.4rem 2.8rem; }
.lcard__num { font-family: "Archivo", sans-serif; font-size: 1.4rem; font-weight: 700; color: var(--c-accent); letter-spacing: 0.1em; }
.lcard__ttl { font-family: "Noto Sans JP", sans-serif; font-size: 1.9rem; font-weight: 700; color: var(--c-navy); margin: 0.6rem 0 1rem; line-height: 1.5; }
.lcard__txt { font-family: "Noto Sans JP", sans-serif; font-size: 1.4rem; line-height: 1.85; color: #515151; }
.lcard__more { display: inline-flex; align-items: center; gap: 10px; margin-top: 1.6rem; font-family: "Noto Sans JP", sans-serif; font-size: 1.4rem; font-weight: 700; color: var(--c-accent); letter-spacing: 0.04em; }
.lcard__more svg { transition: transform 0.25s ease; }
.lcard:hover .lcard__more svg { transform: translateX(4px); }
@media (min-width: 768px) {
  .lcard-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .lsec { padding: 9rem 2.4rem 3rem; }
  .lsec__en { font-size: 4rem; }
  .lsec__head { margin-bottom: 5rem; }
}

/* バナー型おすすめカード（リコーのピックアップ相当） */
.bcard-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
.bcard {
  position: relative; display: block;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--c-border); border-radius: 6px; overflow: hidden;
  background: #ececec;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.bcard:hover { box-shadow: 0 14px 32px rgba(26,35,50,0.14); transform: translateY(-3px); }
.bcard__img { position: absolute; inset: 0; }
.bcard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.bcard:hover .bcard__img img { transform: scale(1.05); }
.bcard__panel {
  position: absolute; top: 0; left: 0; bottom: 0; width: 54%;
  background: #fff;
  display: flex; flex-direction: column; justify-content: center;
  padding: 2rem 2.2rem;
}
.bcard__panel::after {
  content: ""; position: absolute; top: 0; right: -18px; bottom: 0; width: 18px;
  background: linear-gradient(90deg, #fff, rgba(255,255,255,0));
}
.bcard__sub { font-family: "Noto Sans JP", sans-serif; font-size: 1.25rem; font-weight: 500; color: #515151; letter-spacing: 0.03em; line-height: 1.5; }
.bcard__ttl { font-family: "Noto Sans JP", sans-serif; font-size: 2rem; font-weight: 700; color: var(--c-navy); line-height: 1.45; letter-spacing: 0.03em; margin: 0.5rem 0 1rem; }
.bcard__badge {
  display: inline-block; align-self: flex-start;
  font-family: "Noto Sans JP", sans-serif; font-size: 1.05rem; font-weight: 700;
  color: var(--c-accent); border: 1px solid var(--c-accent); border-radius: 3px; padding: 0.4rem 0.9rem;
}
.bcard__badge--solid { background: var(--c-accent); color: #fff; margin-bottom: 1.2rem; }
.bcard__sub--btm { color: var(--c-accent); font-weight: 700; margin-top: 1rem; }
.bcard__arrow {
  position: absolute; right: 1.3rem; bottom: 1.2rem; z-index: 2;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--c-accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.7rem; line-height: 1; font-weight: 700; padding-bottom: 2px;
  transition: transform 0.25s ease;
}
.bcard:hover .bcard__arrow { transform: translateX(3px); }
@media (min-width: 1024px) {
  .bcard-grid { grid-template-columns: repeat(3, 1fr); }
  .bcard__ttl { font-size: 1.85rem; }
}
/* スマホ・タブレット（〜1023px）はカードを縦構成（画像上・テキスト下）に固定 */
@media (max-width: 1023px) {
  .bcard { aspect-ratio: auto; }
  .bcard__img { position: relative; inset: auto; height: 180px; }
  .bcard__panel { position: relative; width: 100%; padding: 2rem 2.2rem 3rem; }
  .bcard__panel::after { display: none; }
}
@media (min-width: 600px) and (max-width: 1023px) {
  .bcard-grid { grid-template-columns: repeat(2, 1fr); }
}

/* =========================================================
   セクションナビ（A案 長方形リンクカード）
   ========================================================= */
.snav { max-width: 1200px; margin: 0 auto; padding: 5.5rem 2.4rem; position: relative; overflow: visible; }
/* ヒーローの斜めカットに平行な極太の紺帯（画面の端から端まで貫く装飾） */
.snav::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  left: 50%; top: 88%; width: 200vw; height: 360px;
  background: var(--c-navy);
  transform: translate(-50%, -50%) rotate(-9deg);
}
.snav__grid { display: grid; grid-template-columns: 1fr; gap: 1.4rem; position: relative; z-index: 1; }
.snav__item {
  position: relative; display: block;
  border: 1px solid var(--c-border); border-radius: 6px;
  padding: 2.6rem 2rem 4.4rem; background: #fff; overflow: hidden;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.snav__item::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--c-accent); transform: scaleY(0); transform-origin: top;
  transition: transform 0.3s ease;
}
.snav__item:hover { box-shadow: 0 12px 28px rgba(26,35,50,0.12); transform: translateY(-3px); }
.snav__item:hover::before { transform: scaleY(1); }
.snav__ic { display: block; color: var(--c-navy); line-height: 0; }
.snav__ic svg { width: 34px; height: 34px; }
.snav__en {
  display: block; font-family: "Archivo", sans-serif; font-weight: 800;
  font-size: 1.9rem; letter-spacing: 0.04em; color: var(--c-navy); margin: 1.4rem 0 0.3rem;
}
.snav__jp { display: block; font-family: "Noto Sans JP", sans-serif; font-size: 1.2rem; color: #888; }
.snav__arw {
  position: absolute; right: 1.6rem; bottom: 1.4rem;
  width: 24px; height: 24px; border-radius: 50%; background: var(--c-accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; line-height: 1; padding-bottom: 2px;
}
@media (min-width: 600px) { .snav__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .snav__grid { grid-template-columns: repeat(5, 1fr); gap: 1.6rem; } }

/* =========================================================
   MENU NAV（旧・ライトアップ式 横並びアイコンナビ・未使用）
   ========================================================= */
.menu-nav { margin-top: 3vh; padding: 3vh 1.5rem; background: var(--c-gray); }
.menu-nav__list {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
}
.menu-nav__list li { width: 33.3333%; text-align: center; }
.menu-nav__list li a { padding: 5vw; display: block; color: var(--c-navy); }
.menu-nav__icon {
  width: 78px;
  height: 78px;
  margin: 0 auto;
  border-radius: 50%;
  background: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(26, 35, 50, 0.07);
  color: var(--c-navy);
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.menu-nav__icon svg { width: 38px; height: 38px; display: block; }
.menu-nav__list li a:hover .menu-nav__icon {
  background: var(--c-navy);
  color: #ffffff;
  transform: translateY(-3px);
}
.menu-nav__list li a > span:not(.menu-nav__icon) {
  font-family: "Roboto", sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-top: 1.4rem;
  display: block;
  color: var(--c-navy);
}

/* =========================================================
   VALUES（ライトアップ home-news スロットを流用：2カラム）
   ========================================================= */
.home-news { max-width: 1280px; margin: 10vh auto 0; padding: 0 1.5rem; }
.home-news .value-list { margin-top: 1rem; }
.home-news .value-list li {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  line-height: 1.95;
  color: #5b626b;
  margin-top: 3rem;
  padding-top: 3rem;
  border-top: 1px solid var(--c-border);
}
.home-news .value-list li:first-child { border-top: 0; padding-top: 0; }
.home-news .value-list li .vnum {
  font-family: "Roboto", sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--c-accent);
  letter-spacing: 0.35rem;
  display: block;
  margin-bottom: 0.7rem;
}
.home-news .value-list li .vttl {
  display: block;
  font-weight: 500;
  font-size: 1.9rem;
  line-height: 1.5;
  color: var(--c-navy);
  margin-bottom: 0.6rem;
}

/* =========================================================
   SERVICE LINEUP（ライトアップ home-service と同一構造）
   5枚のカードグリッド = AI導入伴走パックの5ステップ
   ========================================================= */
.home-service { margin-top: 4vh; }
.home-service__heading { max-width: 1280px; margin: 0 auto; padding: 0 1.5rem; }
.home-service__wrap { margin-top: 2rem; margin-left: 8%; padding: 4rem 2rem; background: radial-gradient(rgba(255,255,255,0.1) 1.5px, transparent 1.5px) 0 0 / 22px 22px, var(--c-navy); border-radius: 20px 0 0 20px; }
.home-service__inner { max-width: 1280px; margin: 0 auto; }
.service-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2%;
  row-gap: 1.5rem;
}
.service-card {
  position: relative;
  background: var(--c-white);
  padding: 3rem 2rem;
  text-align: center;
}
.service-card__step {
  font-family: "Roboto", sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--c-accent);
  display: block;
  margin-bottom: 0.6rem;
}
.service-card__ttl {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.9rem;
  font-weight: 600;
  color: var(--c-navy);
  margin-bottom: 0.6rem;
}
.service-card__lead {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.6;
  color: var(--c-accent);
}
.service-card__photo { margin-top: 2.4rem; line-height: 0; }
.service-card__photo img { aspect-ratio: 4/3; object-fit: cover; width: 100%; }
/* サービスカード：イラスト枠（写真の代わりに flat イラスト） */
.service-card__illust { margin-top: 2.2rem; line-height: 0; }
.service-card__illust svg { width: 100%; height: auto; display: block; }
.service-btn { width: 100%; text-align: right; margin-top: 2rem; }
.service-btn a {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  display: inline-block;
  position: relative;
  padding-right: 30px;
  color: var(--c-navy);
}
.service-btn a:after {
  content: "";
  width: 25px; height: 6px;
  margin-top: -6px;
  border-bottom: 1px solid var(--c-navy);
  border-right: 1px solid var(--c-navy);
  transform: skew(45deg);
  position: absolute;
  top: 50%; right: 0;
  transition: all 0.35s ease-out;
}
.service-btn a:hover:after { right: -0.5rem; }

/* =========================================================
   FOOTER
   ========================================================= */
.footer { margin-top: 3.5vh; }
.footer-contact a {
  text-align: center;
  padding: 10rem 1.5rem;
  display: block;
  position: relative;
  overflow: hidden;
}
.footer-contact a:before {
  content: "";
  background: var(--c-accent);
  position: absolute;
  inset: 0;
  z-index: -1;
}
.footer-contact a:after {
  content: "";
  background: var(--c-accent-dark);
  position: absolute;
  inset: 0;
  z-index: -2;
}
.footer-contact .f-contact { margin: 0 auto; display: table; text-align: center; }
.footer-contact .f-contact > div { display: table-cell; vertical-align: middle; }
.footer-contact .f-contact-mail { width: 70px; padding-right: 2rem; }
.footer-contact .f-contact-mail svg { width: 100%; height: auto; }
.footer-contact .f-contact-sub { color: #fff; font-family: "Noto Sans JP", sans-serif; }
.footer-contact .f-contact-heading {
  font-family: "Roboto", sans-serif;
  font-size: 3.5rem;
  font-weight: 900;
  line-height: 1;
  color: #fff;
  letter-spacing: 0.04em;
}
.footer-contact .f-contact-icon {
  width: 8rem; height: 8rem;
  margin: 1.5rem auto 0;
  border: 1px solid #fff;
  border-radius: 50px;
  position: relative;
}
.footer-contact .f-contact-icon:after {
  content: "";
  width: 30px; height: 8px;
  margin: -7px 0 0 -17px;
  border-bottom: 1px solid #fff;
  border-right: 1px solid #fff;
  transform: skew(45deg);
  position: absolute;
  top: 50%; left: 50%;
  transition: all 0.35s ease-out;
}

.footer-wrap {
  padding: 5.5vh 1.5rem;
  background-image: linear-gradient(rgba(20,28,42,0.78), rgba(20,28,42,0.82)), url(assets/footer-bg.jpg);
  background-position: center center;
  background-size: cover;
  position: relative;
}
.footer-inner { max-width: 1280px; margin: 0 auto; position: relative; z-index: 1; }
.footer-inner + .footer-inner {
  margin-top: 3rem;
  padding-top: 3rem;
  border-top: 1px solid rgba(255,255,255,0.4);
}
.footer-inner .f-logo { width: auto; margin: 0 auto 0.5rem; text-align: center; }
.footer-inner .f-logo .logo-lockup { display: inline-flex; align-items: center; gap: 11px; }
.footer-inner .f-logo .logo-mark { width: auto; height: 46px; }
.footer-inner .f-logo .logo-text-img { height: 34px; width: auto; }
.footer-inner .f-logo .logo-text { text-align: left; }
.footer-inner .f-logo .logo-text__name { color: #fff; }
.footer-inner .f-logo .logo-text__en { color: rgba(255,255,255,0.6); }
.footer-inner .f-nav-list { margin-top: 3.5rem; }
.footer-inner .f-nav-heading { font-size: 1.7rem; font-weight: 700; color: #fff; }
.footer-inner .f-nav-heading a { color: #fff; }
.footer-inner .f-nav-child li {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  display: inline-block;
  margin: 0.5rem 2rem 0 0;
}
.footer-inner .f-nav-child li a { color: #fff; padding-left: 1.2rem; display: inline-block; position: relative; }
.footer-inner .f-nav-child li a:before {
  content: "";
  width: 4px; height: 4px;
  margin-top: -3px;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  transform: rotate(45deg);
  position: absolute;
  top: 50%; left: 0;
}
.footer-inner .f-addr {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.3rem;
  line-height: 1.9;
  color: rgba(255,255,255,0.85);
  margin-top: 2rem;
}
.footer-inner .f-copy-nav { text-align: center; }
.footer-inner .f-copy-nav li { font-size: 1.2rem; display: inline-block; margin: 0 1rem; }
.footer-inner .f-copy-nav a { color: #fff; }
.footer-inner .f-copy {
  font-family: "Roboto", sans-serif;
  font-size: 1.1rem;
  color: #fff;
  text-align: center;
  margin-top: 2rem;
  letter-spacing: 0.25rem;
}

/* =========================================================
   下層ページ共通（page-head / 本文）
   ========================================================= */
.page-head {
  position: relative;
  overflow: hidden;
  padding: 5.5rem 1.5rem;
  background: var(--c-navy);
  text-align: center;
}
.page-head::after {
  content: "";
  position: absolute; top: 0; right: 0; height: 100%; width: 220px;
  background: var(--c-accent);
  clip-path: polygon(62% 0, 100% 0, 100% 100%, 38% 100%);
  opacity: 0.85;
}
.page-head .ph-en {
  position: relative; z-index: 1;
  font-family: "Archivo", sans-serif;
  font-size: 3.4rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #fff;
}
.page-head .ph-jp {
  position: relative; z-index: 1;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.3rem;
  font-weight: 500;
  color: rgba(255,255,255,0.72);
  margin-top: 1.4rem;
  padding-top: 1.4rem;
  letter-spacing: 0.08em;
}
.page-head .ph-jp::before {
  content: "";
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 34px; height: 3px; background: var(--c-accent);
}
.section { max-width: 1080px; margin: 0 auto; padding: 6rem 1.5rem; }
.section--narrow { max-width: 820px; }
.section h2 {
  position: relative;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--c-navy);
  line-height: 1.45;
  letter-spacing: 0.04em;
  margin-bottom: 1.8rem;
  padding-left: 1.7rem;
}
.section h2::before {
  content: "";
  position: absolute; left: 0; top: 0.55rem; bottom: 0.55rem;
  width: 4px; background: var(--c-accent); border-radius: 2px;
}
/* 中央寄せ見出し（PROCESS タイトル等）は赤い下線アクセントに */
.section h2[style*="center"] {
  padding-left: 0;
  padding-bottom: 1.9rem;
  margin-bottom: 2.6rem;
}
.section h2[style*="center"]::before {
  left: 50%; top: auto; bottom: 0; transform: translateX(-50%);
  width: 42px; height: 3px;
}
.section h3 {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--c-navy);
  letter-spacing: 0.02em;
  margin: 2.5rem 0 0.8rem;
}
.section p {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.55rem;
  line-height: 1.95;
  margin-bottom: 1.2rem;
}
.section ul.dot li {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.5rem;
  line-height: 1.8;
  padding-left: 1.6rem;
  position: relative;
  margin-bottom: 0.5rem;
}
.section ul.dot li:before {
  content: "";
  width: 7px; height: 7px;
  background: var(--c-accent);
  border-radius: 50%;
  position: absolute;
  left: 0; top: 0.85rem;
}

/* 実績カード（works） */
.works-grid {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}
.work-card {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  overflow: hidden;
  transition: box-shadow .3s ease, transform .3s ease;
}
.work-card:hover { box-shadow: 0 1.4rem 3rem rgba(26,35,50,0.12); transform: translateY(-4px); }
.work-card__img { line-height: 0; overflow: hidden; }
.work-card__img img { aspect-ratio: 16/9; object-fit: cover; width: 100%; transition: transform .5s ease; }
.work-card:hover .work-card__img img { transform: scale(1.05); }
.work-card__body { padding: 2.6rem 2.2rem; border-top: 3px solid var(--c-accent); }
.work-card__cat {
  font-family: "Roboto", sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--c-accent);
}
.work-card__ttl {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--c-navy);
  margin: 0.6rem 0 0.8rem;
  line-height: 1.5;
}
.work-card__txt { font-family: "Noto Sans JP", sans-serif; font-size: 1.4rem; line-height: 1.8; }

/* PROCESS（service ページ：2カラム交互） */
.proc { max-width: 1000px; margin: 0 auto; padding: 0 1.5rem; }
.proc-item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  padding: 3.5rem 0;
  border-top: 1px solid var(--c-border);
}
.proc-item__body .proc-step {
  font-family: "Roboto", sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--c-accent);
}
.proc-item__body h3 {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2rem;
  font-weight: 700;
  color: var(--c-navy);
  margin: 0.5rem 0 0.4rem;
}
.proc-item__lead {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--c-accent);
  margin-bottom: 0.8rem;
}
.proc-item__body p { font-family: "Noto Sans JP", sans-serif; font-size: 1.45rem; line-height: 1.85; }
.proc-item__illust { line-height: 0; }
.proc-item__illust img { aspect-ratio: 4/3; object-fit: cover; width: 100%; }

/* お問い合わせ表 */
.contact-table { width: 100%; max-width: 760px; margin: 0 auto; border-collapse: collapse; border-top: 2px solid var(--c-navy); }
.contact-table th, .contact-table td {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.45rem;
  line-height: 1.7;
  text-align: left;
  padding: 1.5rem 1.6rem;
  border-bottom: 1px solid var(--c-border);
  vertical-align: top;
}
.contact-table th {
  width: 30%;
  color: var(--c-navy);
  font-weight: 700;
  letter-spacing: 0.03em;
  background: rgba(26,35,50,0.04);
}

/* お問い合わせフォーム埋め込み（Googleフォーム） */
.form-embed {
  margin: 2rem 0 0.5rem;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 6px 24px rgba(26,35,50,0.06);
}
.form-embed iframe {
  display: block;
  width: 100%;
  height: 1180px;
  border: 0;
}
@media (max-width: 600px) {
  .form-embed iframe { height: 1360px; }
}

/* =========================================================
   タブレット〜PC（768px / 1024px）
   ========================================================= */
@media (min-width: 768px) {
  .home-news .value-list li { font-size: 1.6rem; }
  .service-grid { grid-template-columns: repeat(2, 1fr); }
  .works-grid { grid-template-columns: repeat(2, 1fr); }
  .proc-item { grid-template-columns: 1.4fr 1fr; gap: 4rem; align-items: center; }
  .proc-item--rev .proc-item__body { order: 2; }
}

@media (min-width: 1024px) {
  main .home-heading { font-size: 4.4rem; letter-spacing: 0.35rem; }
  main .home-heading span { font-size: 1.3rem; margin-top: 1.2rem; }

  /* MV（東芝風・PC：デザイン合成KV＋左タイトル） */
  .mv__media { min-height: clamp(540px, 84vh, 780px); }
  /* 白の垂直テキスト域。内側に太いネイビーの斜めラインを収める（はみ出しはクリップ） */
  .mv__panel {
    display: block;
    position: absolute; inset: 0 auto 0 0; width: 40%; z-index: 1;
    background: #fff; overflow: hidden;
  }
  .mv__line {
    position: absolute; top: -40%; bottom: -40%; left: -4%; width: 702px;
    background: var(--c-navy);
    transform: rotate(-45deg); transform-origin: center;
  }
  /* テキストを上（ラベル）・中（見出し＋リード）・下（ボタン）に分散して縦を使い切る */
  .mv__inner { min-height: clamp(540px, 84vh, 780px); padding: 6.5rem 3rem; align-items: stretch; }
  .mv__deco { display: none; }
  .mv__text { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; }
  .mv__main { display: flex; flex-direction: column; justify-content: center; flex: 1; }
  .mv__text { max-width: 56%; padding-left: 2.8rem; }
  /* ラベル＝見出しに密着させ、字間を最大限広げて英字ラベルの緊張感 */
  .mv__cat { font-size: 1.3rem; letter-spacing: 0.2em; margin-bottom: 0; color: #fff; }
  /* 見出し＝主役。さらに大きく・行間と字間を詰めて密度の高い塊に */
  .mv__title { font-size: clamp(3.8rem, 3.6vw, 5.2rem); line-height: 1.45; letter-spacing: 0.02em; white-space: nowrap; color: #fff; }
  .mv__title-1, .mv__title-2 { display: block; color: #fff; }
  .mv__title-2 { margin-top: 0.4rem; }
  /* リード＝見出し直下に引き締めて配置・行長は短め */
  .mv__lead { font-size: 1.5rem; margin-top: 2.4rem; line-height: 1.9; max-width: 84%; color: rgba(255,255,255,0.88); }
  /* ボタン＝間を締めつつ字間を効かせて独立 */
  .mv__btn { margin-top: 0; font-size: 1.6rem; padding: 1.8rem 3.4rem; letter-spacing: 0.08em; }

  /* MENU NAV */
  .menu-nav { margin-top: 0; padding: 0; }
  .menu-nav__list { border-left: 1px solid #fff; border-right: 1px solid #fff; }
  .menu-nav__list li { width: 20%; }
  .menu-nav__list li + li { border-left: 1px solid #fff; }
  .menu-nav__list li a { padding: 5rem 2vw; }
  .menu-nav__list li a:hover { background: rgba(26,35,50,0.04); }
  .menu-nav__list li a > span:not(.menu-nav__icon) { font-size: 1.8rem; margin-top: 2rem; }

  /* VALUES（2カラム） */
  .home-news { margin-top: 10rem; display: flex; position: relative; }
  .home-news__heading {
    width: 42%;
    margin-right: 5rem;
    padding-right: 5rem;
    border-right: 1px solid var(--c-border);
  }
  .home-news__post { width: 58%; }
  .home-news .value-list li { margin-top: 0; }
  .home-news .value-list li + li { margin-top: 3.5rem; }

  /* SERVICE */
  .home-service { margin-top: 2rem; }
  .home-service__wrap { padding: 6rem 2rem; }
  .service-grid { grid-template-columns: repeat(5, 1fr); gap: 2%; }
  .service-card { padding: 3rem 1.4rem; }
  .service-card__ttl { font-size: 1.7rem; }
  .service-card__lead { font-size: 1.3rem; }

  /* FOOTER */
  .footer { margin-top: 10rem; }
  .footer-contact a { padding: 11rem 1.5rem; }
  .footer-contact a:before {
    transform-origin: left top;
    transition: transform 0.35s cubic-bezier(0.96, 0.07, 0.28, 0.78);
  }
  .footer-contact a:hover:before { transform-origin: right top; transform: scale(0, 1); }
  .footer-contact a:hover .f-contact-icon { background: #fff; }
  .footer-contact a:hover .f-contact-icon:after {
    border-bottom: 1px solid var(--c-accent-dark);
    border-right: 1px solid var(--c-accent-dark);
  }
  .footer-contact .f-contact-mail { width: 90px; }
  .footer-contact .f-contact-sub { font-size: 2rem; }
  .footer-contact .f-contact-heading { font-size: 4.4rem; letter-spacing: 0.55rem; }
  .footer-wrap { padding: 8rem 1.5rem; }
  .footer-inner { display: flex; align-items: flex-start; }
  .footer-inner + .footer-inner { display: block; text-align: center; margin-top: 4rem; padding-top: 4rem; }
  .footer-inner .f-logo { width: auto; margin: 0 9rem 0 0; text-align: left; }
  .footer-inner .f-logo .logo-text__name { font-size: 2.1rem; }
  .footer-inner .f-nav { display: flex; flex: 1; gap: 4%; }
  .footer-inner .f-nav-list { width: 33%; margin-top: 0; }

  /* 下層 */
  .page-head { padding: 7.5rem 1.5rem; }
  .page-head::after { width: 300px; }
  .page-head .ph-en { font-size: 4.6rem; }
  .page-head .ph-jp { font-size: 1.4rem; }
  .works-grid { grid-template-columns: repeat(3, 1fr); }
  .section h2 { font-size: 2.9rem; }
}

/* =========================================================
   ページトップへ戻るボタン（右下固定・スクロールで出現）
   ========================================================= */
.pagetop {
  position: fixed; right: 2.4rem; bottom: 2.4rem; z-index: 9000;
  width: 5.4rem; height: 5.4rem;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  border: none; cursor: pointer;
  background: var(--c-navy); color: #fff; border-radius: 6px;
  box-shadow: 0 0.6rem 1.6rem rgba(26,35,50,0.25);
  opacity: 0; visibility: hidden; transform: translateY(1rem);
  transition: opacity .3s ease, transform .3s ease, background .25s ease;
}
.pagetop.is-show { opacity: 1; visibility: visible; transform: translateY(0); }
.pagetop:hover { background: var(--c-accent); }
.pagetop span { font-family: "Archivo", sans-serif; font-size: 1rem; font-weight: 700; letter-spacing: 0.08em; margin-top: 1px; }

/* =========================================================
   縦書きヒーロー（PC）— 上に写真ブロック／左に縦書き見出し／右下にリード・ボタン／左下に紺ラインのアクセント
   ========================================================= */
@media (min-width: 1024px) {
  .mv__media { min-height: clamp(580px, 88vh, 860px); background: #fff; }
  .mv__bg { background: #fff; overflow: hidden; }
  .mv__panel { display: none; }
  /* 右上の写真ブロック */
  .mv__bg::before {
    content: ""; position: absolute; top: 0; left: 0;
    width: 100%; height: 82%;
    background: url(assets/kv-ai-illust.png?v=1780404565) center center / cover no-repeat;
    clip-path: polygon(0 0, 100% 0, 100% 50%, 0 100%);
  }
  .mv__diag, .mv__accent { display: none; }
  /* 写真の左上に濃いネイビーのグラデを重ね、白い見出しを読めるようにする */
  .mv__bg::after {
    content: ""; position: absolute; top: 0; left: 0;
    width: 100%; height: 82%; z-index: 1;
    background: linear-gradient(112deg, rgba(20,28,42,0.9) 0%, rgba(20,28,42,0.78) 26%, rgba(20,28,42,0.45) 46%, rgba(20,28,42,0.12) 62%, rgba(20,28,42,0) 75%);
    clip-path: polygon(0 0, 100% 0, 100% 50%, 0 100%);
  }
  .mv__deco { display: block; position: absolute; right: 6%; bottom: 7%; left: auto; top: auto; width: 15rem; color: var(--c-navy); opacity: 0.16; z-index: 1; }

  .mv__inner {
    position: relative; z-index: 3;
    max-width: 1280px; margin: 0 auto; padding: 0;
    display: block; min-height: clamp(580px, 88vh, 860px);
  }
  /* 横書き見出し（左上・写真の上に白文字） */
  .mv__title {
    position: absolute; left: 5%; top: 11%;
    font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif; font-weight: 900;
    font-size: clamp(4rem, 4.6vw, 6.2rem); line-height: 1.3; letter-spacing: 0.01em;
    color: #fff; white-space: nowrap;
    text-shadow: 0 2px 20px rgba(0,0,0,0.55), 0 1px 3px rgba(0,0,0,0.4);
  }
  .mv__title-1, .mv__title-2 { display: block; color: #fff; }
  .mv__title-2 { margin-top: 0.4rem; }
  .mv__hl { color: var(--c-accent); }
  /* 右下グループ（ラベル・リード・ボタン） */
  .mv__sub { position: absolute; right: 4%; bottom: 9%; max-width: 46%; text-align: left; }
  .mv__cat {
    display: inline-block; color: var(--c-navy); border-left: 3px solid var(--c-accent);
    /* 画面が低い比率のとき写真の斜め境界に重なっても読めるよう白背景チップにする
       （白地の上では背景が見えず、従来のプレーンなラベルと同じ見た目） */
    background: rgba(255,255,255,0.92);
    padding: 0.45rem 1rem 0.45rem 1.2rem; border-radius: 0 5px 5px 0;
    letter-spacing: 0.16em; font-size: 1.55rem; font-weight: 700; margin-bottom: 1.8rem;
  }
  .mv__lead { color: #333; margin-top: 0; line-height: 1.9; font-size: 1.85rem; max-width: 100%; }
  .mv__btn { margin-top: 2.8rem; }
}

/* =========================================================
   スマホ・タブレット（〜1023px）専用の調整
   - SERVICE は横スクロール（スワイプ）にして縦長を解消
   - PICK UP〜SERVICE の余白を詰める
   ========================================================= */
@media (max-width: 1023px) {
  /* ヒーロー: 画像は拡大せず実寸／足りない部分を画像色(#18283c)で埋めて一体化／正方形寄りに文字を組込み・リード右寄せ */
  .mv { background: #18283c; }
  .mv__media { min-height: 0; }
  .mv__bg { background: #18283c url(assets/kv-ai-illust.png?v=1780404565) center bottom / min(100%, 600px) auto no-repeat; }
  .mv__bg::after { background: linear-gradient(180deg, rgba(24,40,60,0) 28%, rgba(26,35,50,0.5) 58%, rgba(26,35,50,0.82) 100%); }
  .mv__inner { display: block; position: relative; min-height: 348px; max-width: 600px; margin: 0 auto; padding: 2.6rem 6%; }
  .mv__title { color: #fff; font-size: clamp(2.1rem, 6vw, 2.9rem); line-height: 1.5; letter-spacing: 0.01em; white-space: normal; text-shadow: 0 2px 12px rgba(0,0,0,0.45); margin: 0; max-width: 100%; }
  .mv__title-1, .mv__title-2 { display: block; }
  .mv__sub { position: absolute; right: 6%; bottom: 2.4rem; left: auto; text-align: right; max-width: 80%; }
  .mv__cat { color: #fff; display: inline-block; border-left: none; border-right: 3px solid var(--c-accent); padding-left: 0; padding-right: 1.2rem; margin-bottom: 1.2rem; }
  .mv__lead { color: #fff; font-size: 1.35rem; line-height: 1.8; }
  .mv__btn { margin-top: 1.6rem; }
  .lsec { padding: 4rem 1.8rem 1.5rem; }
  .lsec__head { margin-top: 4rem; margin-bottom: 3rem; }
  /* PICK UP カードを圧縮 */
  .bcard-grid { gap: 1.1rem; }
  .bcard__img { height: 92px; }
  .bcard__panel { padding: 1.2rem 1.6rem 1.5rem; }
  .bcard__ttl { font-size: 1.55rem; margin: 0.2rem 0 0.7rem; }
  .bcard__sub { font-size: 1.15rem; }
  .bcard__badge { font-size: 1rem; padding: 0.3rem 0.7rem; }
  .bcard__sub--btm { margin-top: 0.7rem; }
  .home-service { margin-top: 2rem; }
  .home-service__heading { padding: 0 1.8rem; }
  .home-service__wrap { margin-left: 0; border-radius: 0; padding: 3rem 0; overflow: hidden; }
  .home-service__inner { max-width: none; }
  /* SERVICE: マーキーのレイアウトは .is-marquee（JS複製時付与）で制御。ここでは角丸のみ */
  .service-card { border-radius: 8px; }
}
@keyframes svc-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - 0.7rem)); }
}
/* SERVICE 横マーキー：JSがカードを複製したときだけ横1列で流す。
   メディアクエリではなくクラスで制御することで、幅判定のズレ（スクロールバー差・
   読み込み後リサイズ）で複製カードが5列グリッドに漏れて2行になるのを防ぐ。 */
.service-grid.is-marquee {
  display: flex; gap: 1.4rem; width: max-content;
  grid-template-columns: none;
  padding: 0 0 0 1.6rem;
  animation: svc-marquee 34s linear infinite;
}
.service-grid.is-marquee:hover, .service-grid.is-marquee:active { animation-play-state: paused; }
.service-grid.is-marquee .service-card { flex: 0 0 auto; width: 256px; }


/* === mvfix-2026: モバイル実寸（縮小なし）・タイトル帯/斜め写真/右下に大きめ小文字 === */
@media (max-width: 1023px) {
  html, body { overflow-x: hidden; }
  .mv { background: #fff; width: auto; transform: none; margin-bottom: 0; }
  .mv__media { position: relative; aspect-ratio: auto; min-height: 0; height: 530px; overflow: hidden; display: block; background: #fff; }
  .mv__bg { position: absolute; inset: 0; width: auto; height: auto; padding-bottom: 0; background: #fff; overflow: hidden; }
  .mv__panel { display: none; }
  .mv__bg::before { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 410px; background: url(assets/kv-ai-illust.png?v=1780404565) center center / cover no-repeat; -webkit-clip-path: polygon(0 0, 100% 0, 100% 72%, 0 88%); clip-path: polygon(0 0, 100% 0, 100% 72%, 0 88%); }
  .mv__bg::after { display: none; }
  .mv__deco { display: none; }
  .mv__inner { position: absolute; inset: 0; z-index: 3; max-width: none; margin: 0; padding: 0; min-height: 0; }
  .mv__title { position: absolute; top: 0; left: 0; right: 0; width: auto; max-width: none; background: #18283c; color: #fff; font-family: "Zen Kaku Gothic New","Noto Sans JP",sans-serif; font-weight: 900; font-size: 1.9rem; line-height: 1.4; letter-spacing: 0.01em; white-space: normal; text-shadow: none; padding: 1.1rem 6% 1.2rem; margin: 0; }
  .mv__title-1, .mv__title-2 { display: block; color: #fff; }
  .mv__title-2 { margin-top: 0.2rem; }
  .mv__sub { position: absolute; right: 6%; left: auto; bottom: auto; top: 365px; max-width: 74%; width: auto; text-align: right; margin: 0; padding: 0; background: none; -webkit-clip-path: none; clip-path: none; }
  .mv__cat { display: inline-block; color: var(--c-navy); border-left: none; border-right: 3px solid var(--c-accent); padding: 0 0.9rem 0 0; letter-spacing: 0.08em; font-size: 1.3rem; font-weight: 700; margin: 0 0 0.7rem; }
  .mv__lead { color: #333; margin-top: 0; line-height: 1.7; font-size: 1.02rem; max-width: 100%; }
  .mv__btn { margin-top: 1.1rem; font-size: 1.25rem; padding: 0.95rem 1.7rem; }
}

/* === CF7 お問い合わせフォーム（mm-form） === */
.mm-cf7 { margin: 1.6rem 0 0; }
.mm-form p { margin: 0 0 1.3rem; }
.mm-form label { display: block; font-weight: 700; color: var(--c-navy); font-size: 1.45rem; line-height: 1.6; }
.mm-form input[type="text"],
.mm-form input[type="email"],
.mm-form select,
.mm-form textarea {
  width: 100%; box-sizing: border-box; margin-top: 0.5rem;
  padding: 0.75rem 0.9rem; border: 1px solid var(--c-border); border-radius: 6px;
  font-size: 1.5rem; font-family: inherit; color: var(--c-text); background: #fff;
}
.mm-form input:focus, .mm-form select:focus, .mm-form textarea:focus {
  outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 2px rgba(15,138,85,0.15);
}
.mm-form textarea { min-height: 120px; resize: vertical; }
.mm-form small { display: block; color: #8a8275; font-size: 1.25rem; margin-top: 0.45rem; font-weight: 400; }
.mm-form input[type="submit"] {
  appearance: none; -webkit-appearance: none; cursor: pointer; border: none;
  background: var(--c-accent); color: #fff; font-weight: 700; font-size: 1.55rem;
  padding: 0.95rem 2.6rem; border-radius: 999px; margin-top: 0.5rem; transition: opacity .2s;
}
.mm-form input[type="submit"]:hover { opacity: 0.88; }
.mm-form .wpcf7-spinner { margin-left: 0.8rem; }
.wpcf7-not-valid-tip { color: #c0392b; font-size: 1.25rem; margin-top: 0.3rem; }
.wpcf7 form .wpcf7-response-output { border-radius: 6px; padding: 0.8rem 1rem; font-size: 1.4rem; margin: 1rem 0 0; }

/* ===== 代表プロフィール・資格バッジ ===== */
.creds-name { font-size: 1.35rem; font-weight: 700; color: var(--c-navy); margin-bottom: .4rem; }
.creds-role { font-size: .85rem; font-weight: 600; color: var(--c-green); margin-left: .6rem; }
.creds { display: grid; gap: 1.4rem; margin-top: 2rem; }
@media (min-width: 700px) { .creds { grid-template-columns: 1fr 1fr; } }
.cred {
  display: flex; align-items: flex-start; gap: 1.1rem;
  background: #fff; border: 1px solid var(--c-line);
  border-radius: 16px; padding: 1.7rem 1.6rem;
  box-shadow: 0 10px 30px rgba(26,35,50,.08);
}
.cred__icon {
  flex: 0 0 auto; width: 50px; height: 50px; border-radius: 50%;
  background: var(--c-green); display: flex; align-items: center; justify-content: center;
}
.cred__icon svg { width: 26px; height: 26px; }
.cred__badge {
  display: inline-block; font-size: .82rem; font-weight: 700; letter-spacing: .03em;
  color: var(--c-green-d); background: rgba(15,138,85,.1);
  border-radius: 999px; padding: .3rem .85rem; margin-bottom: .6rem;
}
.cred__ttl { font-size: 1.3rem; font-weight: 800; color: var(--c-navy); line-height: 1.4; }
.cred__sub { font-size: .95rem; color: var(--c-muted); margin-top: .5rem; line-height: 1.75; }

/* ===== 静的(styles.css)からの新デザイン移植 2026/06/11 ===== */
/* === 実績ページ刷新：取引数値＋事例カード（2026/06） === */
.works-stats{display:grid;grid-template-columns:1fr;gap:1.4rem;max-width:1000px;margin:0 auto;padding:0 2.4rem;}
.works-stat{background:var(--c-gray);border-radius:10px;padding:2.4rem 1.5rem;text-align:center;}
.works-stat__num{display:block;font-family:"Archivo","Noto Sans JP",sans-serif;font-weight:800;font-size:3.4rem;line-height:1.1;color:var(--c-navy);}
.works-stat__num small{font-size:1.5rem;font-weight:700;margin-left:.3rem;}
.works-stat__lbl{display:block;margin-top:.9rem;font-size:1.35rem;font-weight:700;color:var(--c-accent);letter-spacing:.04em;}
@media(min-width:768px){.works-stats{grid-template-columns:repeat(3,1fr);}}
.works-note{max-width:1000px;margin:1.6rem auto 0;padding:0 2.4rem;font-size:1.3rem;color:#8a8275;line-height:1.8;}
.case-list{max-width:1000px;margin:0 auto;padding:0 2.4rem;display:flex;flex-direction:column;gap:3rem;}
.case{border:1px solid var(--c-border);border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 6px 24px rgba(26,35,50,.05);}
.case__metric{background:var(--c-navy);color:#fff;padding:2.6rem 2rem;text-align:center;}
.case__ba{display:flex;align-items:center;justify-content:center;gap:1.4rem;flex-wrap:wrap;}
.case__before{font-size:1.9rem;font-weight:700;color:rgba(255,255,255,.55);}
.case__arrow{width:34px;height:14px;color:var(--c-accent);flex:none;}
.case__after{font-family:"Archivo","Noto Sans JP",sans-serif;font-size:3rem;font-weight:800;color:#4fd18b;line-height:1.15;}
.case__metric-label{margin-top:1rem;font-size:1.3rem;color:rgba(255,255,255,.75);letter-spacing:.03em;line-height:1.6;}
.case__body{padding:2.6rem 2.4rem 2.8rem;}
.case__cat{display:inline-block;font-family:"Noto Sans JP",sans-serif;font-size:1.25rem;font-weight:700;letter-spacing:.06em;color:var(--c-accent);}
.case__ttl{font-size:2.1rem;font-weight:700;color:var(--c-navy);line-height:1.55;margin:.7rem 0 1.8rem;}
.case__detail{display:flex;flex-direction:column;gap:1.3rem;}
.case__row{display:grid;grid-template-columns:5.4rem 1fr;gap:1.1rem;align-items:start;}
.case__label{font-size:1.2rem;font-weight:700;color:#fff;border-radius:4px;padding:.4rem 0;text-align:center;line-height:1.4;}
.case__label--issue{background:#8a8275;}
.case__label--do{background:var(--c-navy);}
.case__label--res{background:var(--c-accent);}
.case__text{font-size:1.45rem;line-height:1.8;color:var(--c-text);}
@media(min-width:768px){
  .case{display:grid;grid-template-columns:310px 1fr;}
  .case__metric{display:flex;flex-direction:column;justify-content:center;}
}

/* === 実績ページ：写真ありに刷新・上書き（2026/06 rev2） === */
.works-stats{display:flex;max-width:880px;margin:0 auto;border:1px solid var(--c-border);border-radius:12px;overflow:hidden;background:#fff;padding:0;grid-template-columns:none;gap:0;}
.works-stat{flex:1;padding:2.6rem 1rem;text-align:center;border-right:1px solid var(--c-border);background:#fff;border-radius:0;}
.works-stat:last-child{border-right:none;}
.works-stat__num{font-family:"Zen Kaku Gothic New","Noto Sans JP",sans-serif;font-weight:900;font-size:2.9rem;line-height:1.15;color:var(--c-navy);letter-spacing:.01em;}
.works-stat__num small{font-size:1.4rem;font-weight:700;margin-left:.2rem;}
.works-stat__lbl{display:block;margin-top:.7rem;font-size:1.25rem;font-weight:700;color:var(--c-accent);letter-spacing:.03em;}
.works-note{max-width:880px;margin:1.4rem auto 0;padding:0 .5rem;font-size:1.25rem;color:#8a8275;line-height:1.8;}
@media(max-width:600px){.works-stats{flex-direction:column;}.works-stat{border-right:none;border-bottom:1px solid var(--c-border);}.works-stat:last-child{border-bottom:none;}}

.case{border:1px solid var(--c-border);border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 6px 24px rgba(26,35,50,.05);display:block;grid-template-columns:none;}
.case__img{line-height:0;background:#eceff2;}
.case__img img{width:100%;height:100%;object-fit:cover;display:block;}
.case__body{padding:2.6rem 2.4rem 2.8rem;}
.case__cat{display:inline-block;font-family:"Noto Sans JP",sans-serif;font-size:1.25rem;font-weight:700;letter-spacing:.06em;color:var(--c-accent);}
.case__ttl{font-size:2.1rem;font-weight:700;color:var(--c-navy);line-height:1.55;margin:.6rem 0 1.4rem;}
.case__result{display:inline-flex;align-items:center;gap:1rem;background:var(--c-navy);border-radius:999px;padding:.7rem 1.7rem;margin-bottom:1.8rem;}
.case__result .b{color:rgba(255,255,255,.6);font-size:1.45rem;font-weight:700;}
.case__result .a{color:#4fd18b;font-size:1.8rem;font-family:"Zen Kaku Gothic New","Noto Sans JP",sans-serif;font-weight:900;}
.case__result svg{width:26px;height:11px;color:var(--c-accent);flex:none;}
.case__detail{display:flex;flex-direction:column;gap:1.1rem;}
.case__row{display:grid;grid-template-columns:4.6rem 1fr;gap:1.1rem;align-items:start;}
.case__label{font-size:1.2rem;font-weight:700;color:#fff;border-radius:4px;padding:.35rem 0;text-align:center;line-height:1.4;}
.case__label--issue{background:#8a8275;}
.case__label--do{background:var(--c-navy);}
.case__label--res{background:var(--c-accent);}
.case__text{font-size:1.45rem;line-height:1.8;color:var(--c-text);}
@media(min-width:768px){
  .case{display:grid;grid-template-columns:300px 1fr;align-items:stretch;}
  /* 縦長写真でも行の高さを画像に支配させず、テキストの高さに枠を合わせて切り抜く
     （写真セルを基準にして画像を絶対配置でカバー）→ 文字下の余白を防止 */
  .case__img{height:auto;position:relative;overflow:hidden;}
  .case__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
}

/* === サービス：開発領域＋体制（2026/06） === */
.dev-grid{display:grid;grid-template-columns:1fr;gap:1.6rem;max-width:980px;margin:2.6rem auto 0;}
@media(min-width:768px){.dev-grid{grid-template-columns:1fr 1fr;}}
.dev-item{background:#fff;border:1px solid var(--c-border);border-radius:10px;padding:2.2rem 2rem;}
.dev-item__ttl{font-size:1.7rem;font-weight:700;color:var(--c-navy);line-height:1.55;margin-bottom:.9rem;}
.dev-item__ttl::before{content:"";display:inline-block;width:.9rem;height:.9rem;border-radius:50%;background:var(--c-accent);margin-right:.8rem;vertical-align:middle;}
.dev-item__txt{font-size:1.4rem;line-height:1.85;color:#515151;}
.cap-callout{max-width:760px;margin:2rem auto 0;background:var(--c-navy);color:#fff;border-radius:12px;padding:2.8rem 2.4rem;text-align:center;}
.cap-callout strong{display:block;font-family:"Zen Kaku Gothic New","Noto Sans JP",sans-serif;font-weight:900;font-size:2rem;line-height:1.6;color:#fff;}
.cap-callout strong .hl{color:#4fd18b;}
.cap-callout span{display:block;margin-top:1rem;font-size:1.35rem;color:rgba(255,255,255,.8);line-height:1.7;}

/* === homepage寄せ＆画像ポリッシュ（2026/06） === */
.proc-item__illust img{border-radius:12px;box-shadow:0 12px 32px rgba(26,35,50,.12);aspect-ratio:4/3;object-fit:cover;width:100%;display:block;}
.dev-item{box-shadow:0 6px 20px rgba(26,35,50,.05);transition:box-shadow .3s ease,transform .3s ease;}
.dev-item:hover{box-shadow:0 14px 32px rgba(26,35,50,.12);transform:translateY(-3px);}
.case{transition:box-shadow .3s ease,transform .3s ease;}
.case:hover{box-shadow:0 14px 34px rgba(26,35,50,.12);transform:translateY(-3px);}
.case__img img{transition:transform .5s ease;}
.case:hover .case__img img{transform:scale(1.04);}

/* === callout 再デザイン：紺ベタ塗り→白＋緑アクセント（2026/06） === */
.cap-callout{background:#fff;color:var(--c-text);border:1px solid var(--c-border);border-left:5px solid var(--c-accent);box-shadow:0 8px 28px rgba(26,35,50,.06);text-align:left;border-radius:12px;padding:2.6rem 2.6rem;}
.cap-callout strong{color:var(--c-navy);font-size:2rem;line-height:1.6;}
.cap-callout strong em{font-style:normal;color:var(--c-accent);}
.cap-callout span{color:#515151;}

/* ===== 代表プロフィール・資格バッジ ===== */
.creds-name { font-size: 1.35rem; font-weight: 700; color: var(--c-navy); margin-bottom: .4rem; }
.creds-role { font-size: .85rem; font-weight: 600; color: var(--c-green); margin-left: .6rem; }
.creds { display: grid; gap: 1rem; margin-top: 1.6rem; }
@media (min-width: 700px) { .creds { grid-template-columns: 1fr 1fr; } }
.cred {
  display: flex; align-items: flex-start; gap: 1rem;
  background: #fff; border: 1px solid var(--c-line); border-left: 4px solid var(--c-green);
  border-radius: 12px; padding: 1.2rem 1.3rem;
  box-shadow: 0 6px 20px rgba(26,35,50,.06);
}
.cred__tag {
  flex: 0 0 auto; font-size: .72rem; font-weight: 700; letter-spacing: .04em;
  color: #fff; background: var(--c-green); border-radius: 999px; padding: .3rem .7rem; margin-top: .15rem;
}
.cred__ttl { font-size: 1.02rem; font-weight: 700; color: var(--c-navy); line-height: 1.4; }
.cred__sub { font-size: .86rem; color: var(--c-muted); margin-top: .35rem; line-height: 1.6; }

/* 代表プロフィール：写真＋情報の2カラム（about / モバイルは縦積み） */
.profile { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-top: 1.8rem; }
.profile__photo img {
  width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block;
  border-radius: 14px; background: #f3f3f3; box-shadow: 0 10px 30px rgba(26,35,50,.10);
}
.profile__photo-ph {
  width: 100%; aspect-ratio: 3/4; border-radius: 14px;
  background: var(--c-gray); border: 1px dashed #cfc9bd;
  display: flex; align-items: center; justify-content: center; text-align: center;
  color: #a59f92; font-size: 1.3rem; font-weight: 700; line-height: 1.7;
}
.profile__body > p:first-child { margin-top: 0; }
@media (min-width: 768px) {
  .profile { grid-template-columns: 230px 1fr; gap: 3rem; align-items: start; }
}

/* 代表の経歴・資格：読みやすいリスト型（四角いカードをやめる） */
.bio { list-style: none; margin: 1.8rem 0 0; padding: 0; border-top: 1px solid var(--c-border); }
.bio__item { display: grid; grid-template-columns: 3.6rem 1fr; gap: 1.2rem; padding: 1.4rem 0; border-bottom: 1px solid var(--c-border); }
.bio__tag { font-size: 1.15rem; font-weight: 700; color: var(--c-accent); letter-spacing: .04em; padding-top: .3rem; }
.bio__ttl { font-size: 1.55rem; font-weight: 700; color: var(--c-navy); line-height: 1.5; }
.bio__sub { font-size: 1.3rem; color: #666; line-height: 1.75; margin-top: .4rem; }