/* Yoraku renew ── 自動生成（和集合 + 新トーン上書き） */

/* ==== from about.html ==== */

  :root {
    --sumi:    #1B2436;
    --sumi-2:  #39435A;
    --gray-1:  #6B7484;
    --gray-2:  #9AA1AE;
    --gray-3:  #C7CDD6;
    --line:    #E3E6EB;
    --base:    #ffffff;
    --washi:   #F7F9FB;
    --washi-2: #EEF1F5;
    --bg:      #EAEEF3;
    --shu:     #16213E;
    --hojicha: #6B7484;
    --gold:    #C0972F;
    --gold-deep: #8C6920;
    --gold-faint: #F0E4C2;
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body {
    background: var(--base);
    color: var(--sumi);
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
    font-weight: 400;
    line-height: 1.9;
    -webkit-font-smoothing: antialiased;
  }
  .mincho { font-family: "Noto Serif JP", "Hiragino Mincho ProN", serif; }
  .marcellus { font-family: "Noto Serif JP", serif; font-weight: 700; }
  a { color: inherit; }

  /* ====== ナビ ====== */
  nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 32px;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line);
  }
  nav .brand {
    font-family: "Noto Serif JP", serif;
    font-size: 22px;
    font-weight: 500;
    letter-spacing: 0.16em;
    color: var(--sumi);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  nav .links { display: flex; gap: 24px; }
  nav .links a {
    font-size: 12px;
    letter-spacing: 0.14em;
    color: var(--gray-1);
    text-decoration: none;
    transition: color 0.2s;
  }
  nav .links a:hover, nav .links a.current { color: var(--sumi); }
  nav .links a.current { border-bottom: 1px solid var(--shu); padding-bottom: 2px; }
  nav .cta {
    font-size: 12px;
    letter-spacing: 0.14em;
    padding: 8px 18px;
    background: var(--shu);
    color: #fff ;
    text-decoration: none;
    border-radius: 2px;
  }
  @media (max-width: 860px) {
    nav { padding: 12px 18px; }
    nav .links { display: none; }
  }

  section { padding: 116px 32px; }
  .inner { max-width: 860px; margin: 0 auto; }
  @media (max-width: 860px) { section { padding: 80px 22px; } }

  .sec-kicker {
    font-family: "Noto Serif JP", serif;
    font-size: 13px;
    letter-spacing: 0.3em;
    color: var(--gold-deep);
    margin-bottom: 18px;
    text-align: center;
  }
  .sec-title {
    font-family: "Noto Serif JP", serif;
    font-size: 30px;
    font-weight: 500;
    letter-spacing: 0.12em;
    color: var(--sumi);
    margin-bottom: 44px;
    line-height: 1.7;
    text-align: left;
  }
  @media (max-width: 860px) { .sec-title { font-size: 23px; } }

  /* ====== ページヒーロー ====== */
  .page-hero {
    background: var(--shu);
    color: var(--washi);
    text-align: center;
    padding: 168px 24px 96px;
  }
  .page-hero .crumb {
    font-size: 12px;
    letter-spacing: 0.1em;
    color: rgba(250,250,248,0.6);
    margin-bottom: 28px;
  }
  .page-hero .crumb a { color: rgba(250,250,248,0.8); text-decoration: none; }
  .page-hero .crumb a:hover { color: #fff; }
  .page-hero .eyebrow {
    font-family: "Noto Serif JP", serif;
    font-size: 11px;
    letter-spacing: 0.4em;
    color: var(--gold);
    margin-bottom: 18px;
    text-align: center;
  }
  .page-hero h1 {
    font-family: "Noto Serif JP", serif;
    font-size: 40px;
    font-weight: 600;
    letter-spacing: 0.14em;
    margin-bottom: 26px;
  }
  @media (max-width: 860px) {
    .page-hero { padding: 132px 22px 72px; }
    .page-hero h1 { font-size: 28px; }
  }

  /* ====== Vision / Mission / Values（統一セクション） ====== */
  .mvv-sec .sec-kicker { margin-bottom: 40px; }
  .sec-vision  { background: var(--washi); }
  .sec-mission { background: var(--base); }
  .sec-values  { background: var(--washi-2); }
  .mvv-stmt {
    font-family: "Noto Serif JP", serif;
    font-weight: 500;
    font-size: 26px;
    letter-spacing: 0.12em;
    color: var(--sumi);
    line-height: 2.0;
    text-align: center;
    max-width: 720px;
    margin: 0 auto;
  }
  .value-groups { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 48px; }
  .vgroup { text-align: center; }
  .vgroup .vg-theme { font-family: "Noto Serif JP", serif; font-size: 22px; font-weight: 500; letter-spacing: 0.1em; color: var(--sumi); margin-bottom: 22px; }
  .vgroup .vg-list { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; padding: 0; }
  .vgroup .vg-list li { font-family: "Noto Serif JP", serif; font-size: 15px; letter-spacing: 0.06em; color: var(--sumi-2); background: var(--base); border: 1px solid var(--line); border-radius: 999px; padding: 9px 20px; }
  @media (max-width: 860px) {
    .mvv-sec .sec-kicker { margin-bottom: 28px; }
    .mvv-stmt { font-size: 20px; }
    .value-groups { gap: 36px; }
    .vgroup .vg-theme { font-size: 19px; margin-bottom: 16px; }
    .vgroup .vg-list { gap: 9px; }
    .vgroup .vg-list li { font-size: 13px; padding: 8px 15px; }
  }

  /* ====== 代表プロフィール ====== */
  .profile { background: var(--washi); }
  .profile-inner { display: grid; grid-template-columns: 140px 1fr; gap: 36px; align-items: stretch; max-width: 720px; margin: 0 auto; text-align: left; }
  .profile .profile-aside { display: flex; flex-direction: column; }
  .profile .profile-aside .avatar { flex: 1 1 auto; }
  .profile .avatar { position: relative; width: 140px; min-height: 170px; background: var(--base); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-family: "Noto Serif JP", serif; font-size: 64px; color: var(--sumi); overflow: hidden; }
  .profile .hb-overlay { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 8px 10px; background: linear-gradient(180deg, rgba(22, 33, 62,0), rgba(22, 33, 62,0.55) 40%, rgba(22, 33, 62,0.82)); text-align: center; }
  .profile .hb-overlay .hb-title { display: block; font-family: "Noto Serif JP", serif; font-size: 10px; letter-spacing: 0.3em; color: var(--gold-faint); margin-bottom: 3px; }
  .profile .hb-overlay .hb-list { display: block; font-size: 12px; color: #fff; line-height: 1.5; letter-spacing: 0.04em; }
  .profile .avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .profile .pname { font-family: "Noto Serif JP", serif; font-size: 26px; letter-spacing: 0.12em; color: var(--sumi); margin-bottom: 4px; font-weight: 500; }
  .profile .prole { font-size: 13px; letter-spacing: 0.18em; color: var(--hojicha); margin-bottom: 18px; }
  .profile-body p { font-size: 15px; color: var(--sumi-2); margin-bottom: 12px; letter-spacing: 0.03em; line-height: 2.0; }
  .profile-body .greeting { font-family: "Noto Serif JP", serif; font-size: 18px; color: var(--sumi); letter-spacing: 0.08em; margin-bottom: 24px; line-height: 1.9; }
  @media (max-width: 860px) {
    .profile-inner { grid-template-columns: 1fr; gap: 20px; }
    .profile .profile-aside { align-items: center; }
    .profile .avatar { width: 120px; min-height: 150px; flex: none; font-size: 44px; }
    .profile-body .greeting { font-size: 16px; }
  }

  /* ====== 由来 ====== */
  .origin-sec { background: var(--washi-2); }
  .origin {
    max-width: 720px;
    margin: 0 auto;
    padding: 32px 36px;
    background: var(--base);
    border-left: 3px solid var(--shu);
  }
  .origin p { font-size: 14px; margin-bottom: 8px; color: var(--sumi-2); line-height: 2.0; }
  .origin .glyphs {
    font-family: "Noto Serif JP", serif;
    font-size: 20px;
    letter-spacing: 0.1em;
    color: var(--sumi);
    margin-top: 12px;
  }
  .origin .glyphs .ac { color: var(--shu); }

  /* ====== 物語 ====== */
  .logo-mean { background: var(--shu); color: var(--washi); text-align: center; }
  .logo-mean .sec-title { color: var(--washi); text-align: center; }
  .logo-mean .lm-mark img { height: 132px; width: auto; display: block; margin: 0 auto 40px; }
  .logo-mean p { font-size: 16px; line-height: 2.1; letter-spacing: 0.04em; color: rgba(250,250,248,0.88); max-width: 640px; margin: 0 auto 16px; }
  .logo-mean p strong { color: var(--gold-faint); font-weight: 600; }
  @media (max-width: 860px) {
    .logo-mean .lm-mark img { height: 104px; margin-bottom: 30px; }
    .logo-mean p { font-size: 15px; }
  }
  .story { background: var(--base); }
  .story .inner { max-width: 720px; }
  .story-lead {
    font-family: "Noto Serif JP", serif;
    font-size: 18px;
    line-height: 2.1;
    letter-spacing: 0.06em;
    color: var(--sumi);
    text-align: left;
    margin-bottom: 48px;
  }
  .story h3 {
    font-family: "Noto Serif JP", serif;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.14em;
    color: var(--shu);
    margin: 44px 0 16px;
  }
  .story p {
    font-size: 15px;
    color: var(--sumi-2);
    line-height: 2.1;
    letter-spacing: 0.03em;
    margin-bottom: 18px;
  }
  .story p strong { color: var(--sumi); font-weight: 700; }
  .pullquote {
    font-family: "Noto Serif JP", serif;
    font-size: 22px;
    line-height: 1.95;
    letter-spacing: 0.08em;
    color: var(--shu);
    text-align: center;
    margin: 36px 0;
    padding: 24px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  @media (max-width: 860px) {
    .story-lead { font-size: 16px; }
    .pullquote { font-size: 18px; }
  }

  /* ====== CTA ====== */
  .cta-btn {
    display: inline-block;
    padding: 16px 40px;
    border: 1px solid rgba(255,255,255,0.4);
    color: var(--washi);
    text-decoration: none;
    font-size: 14px;
    letter-spacing: 0.14em;
    transition: background 0.2s, border-color 0.2s;
  }
  .cta-btn:hover { background: rgba(255,255,255,0.08); border-color: var(--washi); }

  /* ====== フッター ====== */
  footer {
    background: var(--bg);
    color: var(--gray-1);
    text-align: center;
    padding: 56px 24px 36px;
    border-top: 1px solid var(--line);
  }
  footer .ftag {
    font-family: "Noto Serif JP", serif;
    font-size: 16px;
    letter-spacing: 0.3em;
    color: var(--shu);
    margin-bottom: 24px;
  }
  footer .fnav { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; margin-bottom: 28px; }
  footer .fnav a { font-size: 11px; letter-spacing: 0.12em; color: var(--gray-1); text-decoration: none; }
  footer .fnav a:hover { color: var(--shu); }
  footer .admin {
    font-size: 10px;
    letter-spacing: 0.1em;
    color: var(--gray-2);
    line-height: 1.9;
    border-top: 1px solid var(--line);
    padding-top: 24px;
    max-width: 540px;
    margin: 0 auto;
  }

  /* ====== 演出・トップへ ====== */
  .fade-up { opacity: 0; transform: translateY(24px); transition: opacity 0.9s ease-out, transform 0.9s ease-out; }
  .fade-up.in { opacity: 1; transform: translateY(0); }
  @media (prefers-reduced-motion: reduce) { .fade-up { opacity: 1; transform: none; transition: none; } }
  ::selection { background: var(--shu); color: #fff; }
  .to-top {
    position: fixed; bottom: 24px; right: 24px;
    width: 44px; height: 44px;
    background: var(--shu); color: var(--washi);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    text-decoration: none; font-size: 18px;
    opacity: 0; transform: translateY(10px);
    transition: opacity 0.3s, transform 0.3s; z-index: 90;
  }
  .to-top.show { opacity: 0.88; transform: translateY(0); }
  .to-top:hover { opacity: 1; }

  /* ===== アニメーション無効化 ===== */
  
  /* ヘッダー読みやすく */
  nav .links a { font-size: 14px ; letter-spacing: 0.06em ; color: var(--sumi-2) ; }
  nav .links a:hover { color: var(--sumi) ; }

  /* 本文サイズ底上げ：読みやすく */
  .svc-card .desc, .strength .sd, .flow-note, .works-note,
  .origin p,
  .plan-card .pconcept, .service-card-body, .single-card-body, .sec-note,
  .process-content-body, .trans-body {
    font-size: 16px ;
    line-height: 2.0 ;
    color: var(--sumi-2) ;
  }

  /* モバイルメニュー */
  .nav-toggle { display: none; background: none; border: none; font-size: 24px; line-height: 1; color: var(--sumi); cursor: pointer; padding: 4px 6px; }
  @media (max-width: 860px) {
    nav { flex-wrap: wrap; }
    .nav-toggle { display: block; position: absolute; top: 14px; right: 16px; }
    nav .links, nav .cta { display: none; }
    nav.open .links { display: flex; flex-direction: column; width: 100%; gap: 16px; padding: 18px 2px 8px; }
    nav.open .links a { font-size: 16px ; padding: 10px 0; }
    nav.open .cta { display: inline-block; width: fit-content; margin: 6px 2px 6px; }
  }

  /* 読みやすさv2：行長(measure)・余白・編集的な間 */
  .intro .lead, .intro p, .sec-note, .doc p, .doc .pintro, .doc ul { max-width: 720px; }
  .story .inner { max-width: 680px; }
  .sec-title { margin-bottom: 56px; }
  @media (min-width: 861px) {
    section { padding-top: 150px; padding-bottom: 150px; }
  }

  /* 日本語の改行を文節単位で自然に（対応ブラウザ） */
  body { word-break: auto-phrase; line-break: strict; }

/* ==== from contact.html ==== */

  :root {
    --sumi:#1B2436; --sumi-2:#39435A; --gray-1:#6B7484; --gray-2:#9AA1AE;
    --line:#E3E6EB; --base:#ffffff; --washi:#F7F9FB; --washi-2:#EEF1F5;
    --bg:#EAEEF3; --shu:#16213E; --hojicha:#6B7484;
    --gold:#C0972F; --gold-deep:#8C6920; --gold-faint:#F0E4C2;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body {
    background: var(--base); color: var(--sumi);
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
    font-weight: 400; line-height: 1.95; -webkit-font-smoothing: antialiased;
    word-break: auto-phrase; line-break: strict;
  }
  .marcellus { font-family: "Noto Serif JP", serif; font-weight: 700; }
  a { color: inherit; }
  ::selection { background: var(--gold); color: #fff; }

  /* ====== ナビ ====== */
  nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 32px; background: rgba(255,255,255,0.92);
    backdrop-filter: blur(8px); border-bottom: 1px solid var(--line);
  }
  nav .brand {
    font-family: "Noto Serif JP", serif; font-size: 22px; font-weight: 500;
    letter-spacing: 0.16em; color: var(--sumi); text-decoration: none;
    display: flex; align-items: center; gap: 10px;
  }
  nav .links { display: flex; gap: 24px; }
  nav .links a {
    font-size: 14px; letter-spacing: 0.06em; color: var(--sumi-2);
    text-decoration: none;
  }
  nav .links a:hover, nav .links a.current { color: var(--sumi); }
  nav .links a.current { border-bottom: 1px solid var(--gold); padding-bottom: 2px; }
  nav .cta {
    font-size: 12px; letter-spacing: 0.14em; padding: 8px 18px;
    background: var(--shu); color: #fff ; text-decoration: none; border-radius: 2px;
  }
  .nav-toggle { display: none; background: none; border: none; font-size: 24px; line-height: 1; color: var(--sumi); cursor: pointer; padding: 4px 6px; }
  @media (max-width: 860px) {
    nav { padding: 12px 18px; flex-wrap: wrap; }
    .nav-toggle { display: block; position: absolute; top: 14px; right: 16px; }
    nav .links, nav .cta { display: none; }
    nav.open .links { display: flex; flex-direction: column; width: 100%; gap: 16px; padding: 18px 2px 8px; }
    nav.open .links a { font-size: 16px ; padding: 10px 0; }
    nav.open .cta { display: inline-block; width: fit-content; margin: 6px 2px 6px; }
  }

  /* ====== ページヒーロー ====== */
  .page-hero {
    background: var(--shu); color: var(--washi); text-align: center;
    padding: 168px 24px 96px;
  }
  .page-hero .eyebrow {
    font-family: "Noto Serif JP", serif;
    font-size: 11px; letter-spacing: 0.4em;
    color: var(--gold); margin-bottom: 18px;
  }
  .page-hero h1 {
    font-family: "Noto Serif JP", serif;
    font-size: 40px; font-weight: 600; letter-spacing: 0.18em;
    margin-bottom: 22px;
  }
  @media (max-width: 860px) {
    .page-hero { padding: 132px 22px 72px; }
    .page-hero h1 { font-size: 28px; }
  }

  /* ====== セクション共通 ====== */
  section { padding: 110px 32px; }
  .inner { max-width: 880px; margin: 0 auto; }
  @media (max-width: 860px) { section { padding: 72px 22px; } }

  .sec-label {
    font-size: 11px; letter-spacing: 0.4em;
    color: var(--gold-deep); margin-bottom: 14px;
    text-align: center;
  }
  .sec-title {
    font-family: "Noto Serif JP", serif;
    font-size: 28px; font-weight: 500;
    letter-spacing: 0.12em; color: var(--sumi);
    line-height: 1.7; margin-bottom: 18px;
    text-align: center;
  }
  .sec-lead {
    text-align: center;
    color: var(--sumi-2);
    line-height: 2.0;
    margin-bottom: 56px;
  }
  @media (max-width: 860px) { .sec-title { font-size: 22px; } }

  /* ====== 連絡先カード ====== */
  .contact-methods { background: var(--washi); }
  .methods-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
  }
  @media (max-width: 720px) { .methods-grid { grid-template-columns: 1fr; } }
  .method-card {
    background: var(--base);
    border: 1px solid var(--line);
    border-top: 3px solid var(--gold);
    padding: 44px 36px 38px;
    text-align: center;
    transition: transform 0.2s, border-color 0.2s;
    display: block;
    text-decoration: none;
    color: inherit;
  }
  .method-card:hover { transform: translateY(-3px); border-color: var(--shu); }
  .method-card .ltl {
    font-family: "Noto Serif JP", serif;
    font-size: 13px;
    letter-spacing: 0.28em;
    color: var(--hojicha);
    margin-bottom: 14px;
  }
  .method-card .value {
    font-family: "Noto Serif JP", serif;
    font-size: 24px;
    letter-spacing: 0.06em;
    color: var(--sumi);
    margin-bottom: 8px;
    font-weight: 500;
    word-break: keep-all;
  }
  .method-card .note {
    font-size: 12.5px;
    color: var(--gray-1);
    letter-spacing: 0.04em;
  }
  @media (max-width: 860px) {
    .method-card { padding: 36px 24px; }
    .method-card .value { font-size: 19px; }
  }

  /* ====== 営業案内 ====== */
  .info-box {
    margin-top: 56px;
    background: #fff;
    border-left: 3px solid var(--gold);
    padding: 28px 32px;
    border-radius: 0 4px 4px 0;
    box-shadow: 0 16px 42px rgba(27,36,54,.06);
  }
  .info-box dl {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 14px 24px;
    align-items: baseline;
  }
  .info-box dt {
    font-family: "Noto Serif JP", serif;
    font-size: 13px;
    letter-spacing: 0.16em;
    color: var(--gold-deep);
    font-weight: 500;
  }
  .info-box dd {
    font-size: 14.5px;
    color: var(--sumi-2);
    line-height: 1.95;
    letter-spacing: 0.03em;
  }
  @media (max-width: 720px) {
    .info-box dl { grid-template-columns: 1fr; gap: 4px; }
    .info-box dt { margin-top: 12px; }
    .info-box dt:first-child { margin-top: 0; }
  }

  /* ====== こんな相談 歓迎 ====== */
  .welcome { background: var(--base); }
  .welcome-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    max-width: 760px;
    margin: 0 auto;
  }
  @media (max-width: 600px) { .welcome-grid { grid-template-columns: 1fr; } }
  .welcome-item {
    background: var(--washi);
    border: 1px solid var(--line);
    padding: 22px 26px;
    font-size: 14.5px;
    color: var(--sumi);
    line-height: 1.9;
    letter-spacing: 0.04em;
  }
  .welcome-item::before {
    content: "◇";
    color: var(--gold-deep);
    margin-right: 10px;
    font-size: 13px;
  }
  .welcome-note {
    margin-top: 36px;
    text-align: center;
    font-family: "Noto Serif JP", serif;
    font-size: 16px;
    letter-spacing: 0.12em;
    color: var(--shu);
    line-height: 2.0;
  }

  /* ====== 流れ ====== */
  .flow { background: var(--washi); }
  .flow-list {
    max-width: 640px;
    margin: 0 auto;
  }
  .flow-item {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 22px;
    padding: 22px 0;
    border-bottom: 1px dashed var(--line);
    align-items: start;
  }
  .flow-item:last-child { border-bottom: none; }
  .flow-item .fn {
    font-family: "Noto Serif JP", serif;
    font-size: 22px; font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--gold-deep);
    line-height: 1;
  }
  .flow-item .ft {
    font-family: "Noto Serif JP", serif;
    font-size: 17px;
    color: var(--sumi);
    margin-bottom: 4px;
    font-weight: 500;
    letter-spacing: 0.06em;
  }
  .flow-item .fd {
    font-size: 13.5px;
    color: var(--gray-1);
    line-height: 1.9;
  }

  /* ====== フッター ====== */
  footer { background: var(--bg); color: var(--gray-1); text-align: center; padding: 56px 24px 36px; border-top: 1px solid var(--line); }
  footer .ftag { font-family: "Noto Serif JP", serif; font-size: 16px; letter-spacing: 0.3em; color: var(--shu); margin-bottom: 24px; }
  footer .fnav { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; margin-bottom: 28px; }
  footer .fnav a { font-size: 11px; letter-spacing: 0.12em; color: var(--gray-1); text-decoration: none; }
  footer .fnav a:hover { color: var(--gold-deep); }
  footer .admin { font-size: 10px; letter-spacing: 0.1em; color: var(--gray-2); line-height: 1.9; border-top: 1px solid var(--line); padding-top: 24px; max-width: 540px; margin: 0 auto; }

/* ==== from privacy.html ==== */

  :root {
    --sumi:#1B2436; --sumi-2:#39435A; --gray-1:#6B7484; --gray-2:#9AA1AE;
    --line:#E3E6EB; --base:#ffffff; --washi:#F7F9FB; --washi-2:#EEF1F5;
    --bg:#EAEEF3; --shu:#16213E; --hojicha:#6B7484;
    --gold:    #C0972F;
    --gold-deep: #8C6920;
    --gold-faint: #F0E4C2;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    background: var(--base); color: var(--sumi);
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
    line-height: 1.95; -webkit-font-smoothing: antialiased;
  }
  .marcellus { font-family: "Noto Serif JP", serif; font-weight: 700; }
  a { color: inherit; }

  nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 32px; background: rgba(255,255,255,0.92);
    backdrop-filter: blur(8px); border-bottom: 1px solid var(--line);
  }
  nav .brand {
    font-family: "Noto Serif JP", serif; font-size: 22px; font-weight: 500;
    letter-spacing: 0.16em; color: var(--sumi); text-decoration: none;
    display: flex; align-items: center; gap: 10px;
  }
  nav .links { display: flex; gap: 24px; }
  nav .links a { font-size: 12px; letter-spacing: 0.14em; color: var(--gray-1); text-decoration: none; }
  nav .links a:hover { color: var(--sumi); }
  nav .cta {
    font-size: 12px; letter-spacing: 0.14em; padding: 8px 18px;
    background: var(--shu); color: #fff ; text-decoration: none; border-radius: 2px;
  }
  @media (max-width: 860px) { nav { padding: 12px 18px; } nav .links { display: none; } }

  .page-hero { background: var(--shu); color: var(--washi); text-align: center; padding: 160px 24px 80px; }
  .page-hero .crumb { font-size: 12px; letter-spacing: 0.12em; color: rgba(250,250,248,0.6); margin-bottom: 24px; }
  .page-hero .crumb a { color: rgba(250,250,248,0.82); text-decoration: none; }
  .page-hero .eyebrow {
    font-family: "Noto Serif JP", serif;
    font-size: 11px;
    letter-spacing: 0.4em;
    color: var(--gold);
    margin-bottom: 18px;
    text-align: center;
  }
  .page-hero h1 { font-family: "Noto Serif JP", serif; font-size: 34px; font-weight: 600; letter-spacing: 0.14em; }
  @media (max-width: 860px) { .page-hero { padding: 128px 22px 64px; } .page-hero h1 { font-size: 25px; } }

  .doc { max-width: 760px; margin: 0 auto; padding: 88px 24px 100px; }
  .doc .updated { font-size: 13px; color: var(--gray-1); margin-bottom: 40px; letter-spacing: 0.04em; }
  .doc .pintro { font-size: 15px; color: var(--sumi-2); line-height: 2.0; margin-bottom: 48px; }
  .doc h2 {
    font-family: "Noto Serif JP", serif; font-size: 19px; font-weight: 600;
    letter-spacing: 0.1em; color: var(--shu); margin: 40px 0 14px;
    padding-bottom: 10px; border-bottom: 1px solid var(--line);
  }
  .doc p { font-size: 14.5px; color: var(--sumi-2); line-height: 2.0; margin-bottom: 12px; letter-spacing: 0.02em; }
  .doc ul { list-style: none; margin: 6px 0 12px; }
  .doc ul li { font-size: 14.5px; color: var(--sumi-2); line-height: 1.95; padding-left: 18px; position: relative; }
  .doc ul li::before { content: "–"; position: absolute; left: 0; color: var(--shu); }
  .doc .contact-box {
    margin-top: 16px; padding: 22px 26px; background: var(--washi);
    border-left: 3px solid var(--shu); font-size: 14px; line-height: 2.0; color: var(--sumi-2);
  }
  .doc .contact-box a { color: var(--shu); text-decoration: none; border-bottom: 1px solid var(--shu); }

  footer { background: var(--bg); color: var(--gray-1); text-align: center; padding: 56px 24px 36px; border-top: 1px solid var(--line); }
  footer .ftag { font-family: "Noto Serif JP", serif; font-size: 16px; letter-spacing: 0.3em; color: var(--shu); margin-bottom: 24px; }
  footer .fnav { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; margin-bottom: 28px; }
  footer .fnav a { font-size: 11px; letter-spacing: 0.12em; color: var(--gray-1); text-decoration: none; }
  footer .fnav a:hover { color: var(--shu); }
  footer .admin { font-size: 10px; letter-spacing: 0.1em; color: var(--gray-2); line-height: 1.9; border-top: 1px solid var(--line); padding-top: 24px; max-width: 540px; margin: 0 auto; }
  ::selection { background: var(--shu); color: #fff; }

  /* ヘッダー読みやすく */
  nav .links a { font-size: 14px ; letter-spacing: 0.06em ; color: var(--sumi-2) ; }
  nav .links a:hover { color: var(--sumi) ; }

  /* 本文サイズ底上げ：読みやすく */
  .svc-card .desc, .value .vdesc, .strength .sd, .flow-note, .works-note,
  .mv-note, .origin p,
  .plan-card .pconcept, .service-card-body, .single-card-body, .sec-note,
  .process-content-body, .trans-body {
    font-size: 16px ;
    line-height: 2.0 ;
    color: var(--sumi-2) ;
  }

  /* モバイルメニュー */
  .nav-toggle { display: none; background: none; border: none; font-size: 24px; line-height: 1; color: var(--sumi); cursor: pointer; padding: 4px 6px; }
  @media (max-width: 860px) {
    nav { flex-wrap: wrap; }
    .nav-toggle { display: block; position: absolute; top: 14px; right: 16px; }
    nav .links, nav .cta { display: none; }
    nav.open .links { display: flex; flex-direction: column; width: 100%; gap: 16px; padding: 18px 2px 8px; }
    nav.open .links a { font-size: 16px ; padding: 10px 0; }
    nav.open .cta { display: inline-block; width: fit-content; margin: 6px 2px 6px; }
  }

  /* 読みやすさv2：行長(measure)・余白・編集的な間 */
  .intro .lead, .intro p, .sec-note, .doc p, .doc .pintro, .doc ul { max-width: 720px; }
  .story .inner { max-width: 680px; }
  .sec-title { margin-bottom: 56px; }
  @media (min-width: 861px) {
    section { padding-top: 150px; padding-bottom: 150px; }
  }

  /* 日本語の改行を文節単位で自然に（対応ブラウザ） */
  body { word-break: auto-phrase; line-break: strict; }

/* ==== from services/ai.html ==== */

  :root {
    --sumi:    #1B2436;
    --sumi-2:  #39435A;
    --gray-1:  #6B7484;
    --gray-2:  #9AA1AE;
    --gray-3:  #C7CDD6;
    --line:    #E3E6EB;
    --base:    #ffffff;
    --washi:   #F7F9FB;
    --washi-2: #EEF1F5;
    --bg:      #EAEEF3;
    --shu:     #16213E;
    --hojicha: #6B7484;
    --gold:    #C0972F;
    --gold-deep: #8C6920;
    --gold-faint: #F0E4C2;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body { background: var(--base); color: var(--sumi); font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif; font-weight: 400; line-height: 1.9; -webkit-font-smoothing: antialiased; }
  .mincho { font-family: "Noto Serif JP", "Hiragino Mincho ProN", serif; }
  .maru { font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif; }
  .marcellus { font-family: "Noto Serif JP", serif; font-weight: 700; }
  a { color: inherit; }
  nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 16px 32px; background: rgba(255,255,255,0.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
  nav .brand { font-family: "Noto Serif JP", serif; font-size: 22px; font-weight: 500; letter-spacing: 0.16em; color: var(--sumi); text-decoration: none; display: flex; align-items: center; gap: 10px; }
  nav .links { display: flex; gap: 24px; }
  nav .links a { font-size: 12px; letter-spacing: 0.14em; color: var(--gray-1); text-decoration: none; transition: color 0.2s; }
  nav .links a:hover { color: var(--sumi); }
  nav .cta { font-size: 12px; letter-spacing: 0.14em; padding: 8px 18px; background: var(--shu); color: #fff ; text-decoration: none; border-radius: 2px; }
  @media (max-width: 860px) { nav { padding: 12px 18px; } nav .links { display: none; } }
  section { padding: 132px 32px; }
  .inner { max-width: 940px; margin: 0 auto; }
  @media (max-width: 860px) { section { padding: 88px 22px; } }
  .sec-title { font-family: "Noto Serif JP", serif; font-size: 31px; font-weight: 500; letter-spacing: 0.12em; color: var(--sumi); margin-bottom: 48px; line-height: 1.7; }
  @media (max-width: 860px) { .sec-title { font-size: 23px; } }
  .page-hero { background: var(--shu); color: var(--washi); padding: 168px 32px 96px; text-align: center; }
  .page-hero .crumb { font-size: 12px; letter-spacing: 0.16em; color: var(--gray-2); margin-bottom: 26px; }
  .page-hero .crumb a { color: var(--gray-2); text-decoration: none; border-bottom: 1px solid rgba(168,168,168,0.4); }
  .page-hero .crumb a:hover { color: var(--washi); }
  .page-hero .eyebrow {
    font-family: "Noto Serif JP", serif;
    font-size: 11px;
    letter-spacing: 0.4em;
    color: var(--gold);
    margin-bottom: 18px;
    text-align: center;
  }
  .page-hero h1 { font-family: "Noto Serif JP", serif; font-size: 40px; font-weight: 600; letter-spacing: 0.1em; color: var(--washi); margin-bottom: 18px; line-height: 1.5; }
  @media (max-width: 860px) { .page-hero { padding: 128px 22px 72px; } .page-hero h1 { font-size: 28px; } }
  .intro { background: var(--base); }
  .intro .lead { font-family: "Noto Serif JP", serif; font-size: 24px; letter-spacing: 0.1em; line-height: 2.05; color: var(--sumi); margin-bottom: 32px; }
  .intro p { font-size: 15px; color: var(--sumi-2); margin-bottom: 20px; letter-spacing: 0.03em; line-height: 2.0; }
  @media (max-width: 860px) { .intro .lead { font-size: 19px; } }
  .pricing { background: var(--washi); }
  .sec-note { font-size: 14px; color: var(--gray-1); letter-spacing: 0.04em; margin-top: -32px; margin-bottom: 40px; line-height: 1.9; }
  /* 統合プラン大カード */
  .flagship { background: var(--base); border: 2px solid var(--shu); border-radius: 14px; overflow: hidden; }
  .flagship-head { background: var(--shu); color: var(--washi); padding: 40px 38px; text-align: center; }
  .flagship-head .fname { font-family: "Noto Serif JP", serif; font-size: 22px; letter-spacing: 0.1em; font-weight: 600; margin-bottom: 12px; }
  .flagship-head .fconcept { font-size: 14px; color: rgba(250,250,248,0.82); line-height: 1.85; margin-bottom: 22px; }
  .flagship-head .fprice { font-family: "Noto Serif JP", serif; font-size: 40px; font-weight: 600; color: var(--washi); line-height: 1.1; }
  .flagship-head .fprice span { font-size: 16px; color: rgba(250,250,248,0.7); }
  .flagship-head .fterm { font-size: 13px; color: rgba(250,250,248,0.7); margin-top: 10px; line-height: 1.7; }
  .flagship-head .fterm small { font-size: 11px; }
  .flagship-body { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
  .phase { padding: 32px 34px; }
  .phase:first-child { border-right: 1px solid var(--line); }
  .phase .ptitle { font-family: "Noto Serif JP", serif; font-size: 17px; color: var(--shu); font-weight: 600; letter-spacing: 0.05em; margin-bottom: 4px; }
  .phase .psub { font-size: 11.5px; color: var(--gray-1); margin-bottom: 18px; }
  .phase ul { list-style: none; display: grid; gap: 13px; }
  .phase li { font-size: 14px; color: var(--sumi); font-weight: 500; line-height: 1.6; padding-left: 18px; position: relative; }
  .phase li::before { content: "・"; color: var(--shu); position: absolute; left: 0; }
  .phase li small { display: block; font-weight: 400; color: var(--gray-1); font-size: 12px; padding-left: 0; }
  @media (max-width: 860px) { .flagship-body { grid-template-columns: 1fr; } .phase:first-child { border-right: none; border-bottom: 1px solid var(--line); } }
  .note-box { margin-top: 22px; padding: 20px 26px; background: var(--washi-2); border-radius: 10px; font-size: 13px; color: var(--gray-1); line-height: 1.95; letter-spacing: 0.02em; }
  .value-box { margin-top: 26px; padding: 28px 30px; background: var(--base); border: 1px solid var(--shu); border-radius: 12px; }
  .value-box .vt { font-family: "Noto Serif JP", serif; font-size: 16px; color: var(--shu); font-weight: 600; letter-spacing: 0.06em; margin-bottom: 14px; }
  .value-box .vlist { font-size: 13.5px; color: var(--sumi-2); line-height: 2.0; }
  .value-box .vtotal { display: block; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--line); font-family: "Noto Serif JP", serif; color: var(--sumi); font-weight: 600; }
  .subhead { font-family: "Noto Serif JP", serif; font-size: 20px; letter-spacing: 0.08em; color: var(--sumi); font-weight: 600; margin: 56px 0 8px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
  .subhead-sub { font-size: 13.5px; color: var(--gray-1); margin-bottom: 24px; letter-spacing: 0.03em; }
  .flowsec { background: var(--base); }
  .process { display: flex; flex-direction: column; gap: 0; }
  .pstep { display: grid; grid-template-columns: 88px 1fr; gap: 24px; padding: 26px 0; border-bottom: 1px solid var(--line); }
  .pstep:last-child { border-bottom: none; }
  .pstep .pnum { font-family: "Noto Serif JP", serif; font-size: 24px; color: var(--hojicha); letter-spacing: 0.05em; }
  .pstep .ptitle { font-family: "Noto Serif JP", serif; font-size: 16px; color: var(--sumi); font-weight: 600; letter-spacing: 0.05em; margin-bottom: 2px; line-height: 1.6; }
  .pstep .ptime { font-size: 12px; color: var(--shu); letter-spacing: 0.06em; margin-bottom: 10px; }
  .pstep .pbody { font-size: 14px; color: var(--sumi-2); line-height: 1.95; letter-spacing: 0.02em; }
  @media (max-width: 860px) { .pstep { grid-template-columns: 50px 1fr; gap: 14px; } .pstep .pnum { font-size: 19px; } }
  .feature-sec { background: var(--washi); }
  .stance { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .stance-item { background: var(--base); border: 1px solid var(--line); border-radius: 10px; padding: 26px 28px; }
  .stance-item h4 { font-family: "Noto Serif JP", serif; font-size: 16px; color: var(--sumi); font-weight: 600; letter-spacing: 0.05em; margin-bottom: 12px; }
  .stance-item p { font-size: 13.5px; color: var(--sumi-2); line-height: 1.95; letter-spacing: 0.02em; }
  .stance-item a { color: var(--shu); text-decoration: none; border-bottom: 1px solid var(--shu); }
  @media (max-width: 860px) { .stance { grid-template-columns: 1fr; } }
  footer { background: var(--bg); color: var(--gray-1); text-align: center; padding: 56px 24px 36px; border-top: 1px solid var(--line); }
  footer .ftag { font-family: "Noto Serif JP", serif; font-size: 16px; letter-spacing: 0.3em; color: var(--shu); margin-bottom: 24px; }
  footer .fnav { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; margin-bottom: 28px; }
  footer .fnav a { font-size: 11px; letter-spacing: 0.12em; color: var(--gray-1); text-decoration: none; }
  footer .fnav a:hover { color: var(--shu); }
  footer .admin { font-size: 10px; letter-spacing: 0.1em; color: var(--gray-2); line-height: 1.9; border-top: 1px solid var(--line); padding-top: 24px; max-width: 540px; margin: 0 auto; }
  ::selection { background: var(--shu); color: #fff; }
  .fade-up { opacity: 0; transform: translateY(24px); transition: opacity 0.9s ease-out, transform 0.9s ease-out; }
  .fade-up.in { opacity: 1; transform: translateY(0); }
  @media (prefers-reduced-motion: reduce) { .fade-up { opacity: 1; transform: none; transition: none; } }

  /* ===== アニメーション無効化 ===== */
  
  /* ヘッダー読みやすく */
  nav .links a { font-size: 14px ; letter-spacing: 0.06em ; color: var(--sumi-2) ; }
  nav .links a:hover { color: var(--sumi) ; }

  /* 本文サイズ底上げ：読みやすく */
  .svc-card .desc, .value .vdesc, .strength .sd, .flow-note, .works-note,
  .mv-note, .origin p,
  .plan-card .pconcept, .service-card-body, .single-card-body, .sec-note,
  .process-content-body, .trans-body {
    font-size: 16px ;
    line-height: 2.0 ;
    color: var(--sumi-2) ;
  }

  /* モバイルメニュー */
  .nav-toggle { display: none; background: none; border: none; font-size: 24px; line-height: 1; color: var(--sumi); cursor: pointer; padding: 4px 6px; }
  @media (max-width: 860px) {
    nav { flex-wrap: wrap; }
    .nav-toggle { display: block; position: absolute; top: 14px; right: 16px; }
    nav .links, nav .cta { display: none; }
    nav.open .links { display: flex; flex-direction: column; width: 100%; gap: 16px; padding: 18px 2px 8px; }
    nav.open .links a { font-size: 16px ; padding: 10px 0; }
    nav.open .cta { display: inline-block; width: fit-content; margin: 6px 2px 6px; }
  }

  /* 読みやすさv2：行長(measure)・余白・編集的な間 */
  .intro .lead, .intro p, .sec-note, .doc p, .doc .pintro, .doc ul { max-width: 720px; }
  .story .inner { max-width: 680px; }
  .sec-title { margin-bottom: 56px; }
  @media (min-width: 861px) {
    section { padding-top: 150px; padding-bottom: 150px; }
  }

  /* 日本語の改行を文節単位で自然に（対応ブラウザ） */
  body { word-break: auto-phrase; line-break: strict; }

/* ==== from services/branding.html ==== */

  :root {
    --sumi:    #1B2436;
    --sumi-2:  #39435A;
    --gray-1:  #6B7484;
    --gray-2:  #9AA1AE;
    --gray-3:  #C7CDD6;
    --line:    #E3E6EB;
    --base:    #ffffff;
    --washi:   #F7F9FB;
    --washi-2: #EEF1F5;
    --bg:      #EAEEF3;
    --shu:     #16213E;
    --hojicha: #6B7484;
    --gold:    #C0972F;
    --gold-deep: #8C6920;
    --gold-faint: #F0E4C2;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body { background: var(--base); color: var(--sumi); font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif; font-weight: 400; line-height: 1.9; -webkit-font-smoothing: antialiased; }
  .mincho { font-family: "Noto Serif JP", "Hiragino Mincho ProN", serif; }
  .maru { font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif; }
  .marcellus { font-family: "Noto Serif JP", serif; font-weight: 700; }
  a { color: inherit; }
  nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 16px 32px; background: rgba(255,255,255,0.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
  nav .brand { font-family: "Noto Serif JP", serif; font-size: 22px; font-weight: 500; letter-spacing: 0.16em; color: var(--sumi); text-decoration: none; display: flex; align-items: center; gap: 10px; }
  nav .links { display: flex; gap: 24px; }
  nav .links a { font-size: 12px; letter-spacing: 0.14em; color: var(--gray-1); text-decoration: none; transition: color 0.2s; }
  nav .links a:hover { color: var(--sumi); }
  nav .cta { font-size: 12px; letter-spacing: 0.14em; padding: 8px 18px; background: var(--shu); color: #fff ; text-decoration: none; border-radius: 2px; }
  @media (max-width: 860px) { nav { padding: 12px 18px; } nav .links { display: none; } }
  section { padding: 132px 32px; }
  .inner { max-width: 940px; margin: 0 auto; }
  @media (max-width: 860px) { section { padding: 88px 22px; } }
  .sec-title { font-family: "Noto Serif JP", serif; font-size: 31px; font-weight: 500; letter-spacing: 0.12em; color: var(--sumi); margin-bottom: 48px; line-height: 1.7; }
  @media (max-width: 860px) { .sec-title { font-size: 23px; } }
  .page-hero { background: var(--shu); color: var(--washi); padding: 168px 32px 96px; text-align: center; }
  .page-hero .crumb { font-size: 12px; letter-spacing: 0.16em; color: var(--gray-2); margin-bottom: 26px; }
  .page-hero .crumb a { color: var(--gray-2); text-decoration: none; border-bottom: 1px solid rgba(168,168,168,0.4); }
  .page-hero .crumb a:hover { color: var(--washi); }
  .page-hero .eyebrow {
    font-family: "Noto Serif JP", serif;
    font-size: 11px;
    letter-spacing: 0.4em;
    color: var(--gold);
    margin-bottom: 18px;
    text-align: center;
  }
  .page-hero h1 { font-family: "Noto Serif JP", serif; font-size: 40px; font-weight: 600; letter-spacing: 0.1em; color: var(--washi); margin-bottom: 18px; line-height: 1.5; }
  @media (max-width: 860px) { .page-hero { padding: 128px 22px 72px; } .page-hero h1 { font-size: 28px; } }
  .intro { background: var(--base); }
  .intro .lead { font-family: "Noto Serif JP", serif; font-size: 24px; letter-spacing: 0.1em; line-height: 2.05; color: var(--sumi); margin-bottom: 32px; }
  .intro p { font-size: 15px; color: var(--sumi-2); margin-bottom: 20px; letter-spacing: 0.03em; line-height: 2.0; }
  @media (max-width: 860px) { .intro .lead { font-size: 19px; } }
  .pricing { background: var(--washi); }
  .sec-note { font-size: 14px; color: var(--gray-1); letter-spacing: 0.04em; margin-top: -32px; margin-bottom: 40px; line-height: 1.9; }
  /* 統合プラン大カード */
  .flagship { background: var(--base); border: 2px solid var(--shu); border-radius: 14px; overflow: hidden; }
  .flagship-head { background: var(--shu); color: var(--washi); padding: 40px 38px; text-align: center; }
  .flagship-head .fname { font-family: "Noto Serif JP", serif; font-size: 22px; letter-spacing: 0.1em; font-weight: 600; margin-bottom: 12px; }
  .flagship-head .fconcept { font-size: 14px; color: rgba(250,250,248,0.82); line-height: 1.85; margin-bottom: 22px; }
  .flagship-head .fprice { font-family: "Noto Serif JP", serif; font-size: 40px; font-weight: 600; color: var(--washi); line-height: 1.1; }
  .flagship-head .fprice span { font-size: 16px; color: rgba(250,250,248,0.7); }
  .flagship-head .fterm { font-size: 13px; color: rgba(250,250,248,0.7); margin-top: 10px; line-height: 1.7; }
  .flagship-head .fterm small { font-size: 11px; }
  .flagship-body { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
  .phase { padding: 32px 34px; }
  .phase:first-child { border-right: 1px solid var(--line); }
  .phase .ptitle { font-family: "Noto Serif JP", serif; font-size: 17px; color: var(--shu); font-weight: 600; letter-spacing: 0.05em; margin-bottom: 4px; }
  .phase .psub { font-size: 11.5px; color: var(--gray-1); margin-bottom: 18px; }
  .phase ul { list-style: none; display: grid; gap: 13px; }
  .phase li { font-size: 14px; color: var(--sumi); font-weight: 500; line-height: 1.6; padding-left: 18px; position: relative; }
  .phase li::before { content: "・"; color: var(--shu); position: absolute; left: 0; }
  .phase li small { display: block; font-weight: 400; color: var(--gray-1); font-size: 12px; padding-left: 0; }
  @media (max-width: 860px) { .flagship-body { grid-template-columns: 1fr; } .phase:first-child { border-right: none; border-bottom: 1px solid var(--line); } }
  .note-box { margin-top: 22px; padding: 20px 26px; background: var(--washi-2); border-radius: 10px; font-size: 13px; color: var(--gray-1); line-height: 1.95; letter-spacing: 0.02em; }
  .value-box { margin-top: 26px; padding: 28px 30px; background: var(--base); border: 1px solid var(--shu); border-radius: 12px; }
  .value-box .vt { font-family: "Noto Serif JP", serif; font-size: 16px; color: var(--shu); font-weight: 600; letter-spacing: 0.06em; margin-bottom: 14px; }
  .value-box .vlist { font-size: 13.5px; color: var(--sumi-2); line-height: 2.0; }
  .value-box .vtotal { display: block; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--line); font-family: "Noto Serif JP", serif; color: var(--sumi); font-weight: 600; }
  .subhead { font-family: "Noto Serif JP", serif; font-size: 20px; letter-spacing: 0.08em; color: var(--sumi); font-weight: 600; margin: 56px 0 8px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
  .subhead-sub { font-size: 13.5px; color: var(--gray-1); margin-bottom: 24px; letter-spacing: 0.03em; }
  .flowsec { background: var(--base); }
  .process { display: flex; flex-direction: column; gap: 0; }
  .pstep { display: grid; grid-template-columns: 88px 1fr; gap: 24px; padding: 26px 0; border-bottom: 1px solid var(--line); }
  .pstep:last-child { border-bottom: none; }
  .pstep .pnum { font-family: "Noto Serif JP", serif; font-size: 24px; color: var(--hojicha); letter-spacing: 0.05em; }
  .pstep .ptitle { font-family: "Noto Serif JP", serif; font-size: 16px; color: var(--sumi); font-weight: 600; letter-spacing: 0.05em; margin-bottom: 2px; line-height: 1.6; }
  .pstep .ptime { font-size: 12px; color: var(--shu); letter-spacing: 0.06em; margin-bottom: 10px; }
  .pstep .pbody { font-size: 14px; color: var(--sumi-2); line-height: 1.95; letter-spacing: 0.02em; }
  @media (max-width: 860px) { .pstep { grid-template-columns: 50px 1fr; gap: 14px; } .pstep .pnum { font-size: 19px; } }
  .feature-sec { background: var(--washi); }
  .stance { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .stance-item { background: var(--base); border: 1px solid var(--line); border-radius: 10px; padding: 26px 28px; }
  .stance-item h4 { font-family: "Noto Serif JP", serif; font-size: 16px; color: var(--sumi); font-weight: 600; letter-spacing: 0.05em; margin-bottom: 12px; }
  .stance-item p { font-size: 13.5px; color: var(--sumi-2); line-height: 1.95; letter-spacing: 0.02em; }
  .stance-item a { color: var(--shu); text-decoration: none; border-bottom: 1px solid var(--shu); }
  @media (max-width: 860px) { .stance { grid-template-columns: 1fr; } }
  footer { background: var(--bg); color: var(--gray-1); text-align: center; padding: 56px 24px 36px; border-top: 1px solid var(--line); }
  footer .ftag { font-family: "Noto Serif JP", serif; font-size: 16px; letter-spacing: 0.3em; color: var(--shu); margin-bottom: 24px; }
  footer .fnav { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; margin-bottom: 28px; }
  footer .fnav a { font-size: 11px; letter-spacing: 0.12em; color: var(--gray-1); text-decoration: none; }
  footer .fnav a:hover { color: var(--shu); }
  footer .admin { font-size: 10px; letter-spacing: 0.1em; color: var(--gray-2); line-height: 1.9; border-top: 1px solid var(--line); padding-top: 24px; max-width: 540px; margin: 0 auto; }
  ::selection { background: var(--shu); color: #fff; }
  .fade-up { opacity: 0; transform: translateY(24px); transition: opacity 0.9s ease-out, transform 0.9s ease-out; }
  .fade-up.in { opacity: 1; transform: translateY(0); }
  @media (prefers-reduced-motion: reduce) { .fade-up { opacity: 1; transform: none; transition: none; } }

  /* ===== アニメーション無効化 ===== */
  
  /* ヘッダー読みやすく */
  nav .links a { font-size: 14px ; letter-spacing: 0.06em ; color: var(--sumi-2) ; }
  nav .links a:hover { color: var(--sumi) ; }

  /* 本文サイズ底上げ：読みやすく */
  .svc-card .desc, .value .vdesc, .strength .sd, .flow-note, .works-note,
  .mv-note, .origin p,
  .plan-card .pconcept, .service-card-body, .single-card-body, .sec-note,
  .process-content-body, .trans-body {
    font-size: 16px ;
    line-height: 2.0 ;
    color: var(--sumi-2) ;
  }

  /* モバイルメニュー */
  .nav-toggle { display: none; background: none; border: none; font-size: 24px; line-height: 1; color: var(--sumi); cursor: pointer; padding: 4px 6px; }
  @media (max-width: 860px) {
    nav { flex-wrap: wrap; }
    .nav-toggle { display: block; position: absolute; top: 14px; right: 16px; }
    nav .links, nav .cta { display: none; }
    nav.open .links { display: flex; flex-direction: column; width: 100%; gap: 16px; padding: 18px 2px 8px; }
    nav.open .links a { font-size: 16px ; padding: 10px 0; }
    nav.open .cta { display: inline-block; width: fit-content; margin: 6px 2px 6px; }
  }

  /* 読みやすさv2：行長(measure)・余白・編集的な間 */
  .intro .lead, .intro p, .sec-note, .doc p, .doc .pintro, .doc ul { max-width: 720px; }
  .story .inner { max-width: 680px; }
  .sec-title { margin-bottom: 56px; }
  @media (min-width: 861px) {
    section { padding-top: 150px; padding-bottom: 150px; }
  }

  /* 日本語の改行を文節単位で自然に（対応ブラウザ） */
  body { word-break: auto-phrase; line-break: strict; }

/* ==== from services/ehon.html ==== */

  :root {
    --sumi:    #1B2436;
    --sumi-2:  #39435A;
    --gray-1:  #6B7484;
    --gray-2:  #9AA1AE;
    --gray-3:  #C7CDD6;
    --line:    #E3E6EB;
    --base:    #ffffff;
    --washi:   #F7F9FB;
    --washi-2: #EEF1F5;
    --bg:      #EAEEF3;
    --shu:     #16213E;
    --hojicha: #6B7484;
    --gold:    #C0972F;
    --gold-deep: #8C6920;
    --gold-faint: #F0E4C2;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body { background: var(--base); color: var(--sumi); font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif; font-weight: 400; line-height: 1.9; -webkit-font-smoothing: antialiased; }
  .mincho { font-family: "Noto Serif JP", "Hiragino Mincho ProN", serif; }
  .maru { font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif; }
  .marcellus { font-family: "Noto Serif JP", serif; font-weight: 700; }
  a { color: inherit; }
  nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 16px 32px; background: rgba(255,255,255,0.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
  nav .brand { font-family: "Noto Serif JP", serif; font-size: 22px; font-weight: 500; letter-spacing: 0.16em; color: var(--sumi); text-decoration: none; display: flex; align-items: center; gap: 10px; }
  nav .links { display: flex; gap: 24px; }
  nav .links a { font-size: 12px; letter-spacing: 0.14em; color: var(--gray-1); text-decoration: none; transition: color 0.2s; }
  nav .links a:hover { color: var(--sumi); }
  nav .cta { font-size: 12px; letter-spacing: 0.14em; padding: 8px 18px; background: var(--shu); color: #fff ; text-decoration: none; border-radius: 2px; }
  @media (max-width: 860px) { nav { padding: 12px 18px; } nav .links { display: none; } }
  section { padding: 132px 32px; }
  .inner { max-width: 940px; margin: 0 auto; }
  @media (max-width: 860px) { section { padding: 88px 22px; } }
  .sec-title { font-family: "Noto Serif JP", serif; font-size: 31px; font-weight: 500; letter-spacing: 0.12em; color: var(--sumi); margin-bottom: 48px; line-height: 1.7; }
  @media (max-width: 860px) { .sec-title { font-size: 23px; } }
  .page-hero { background: var(--shu); color: var(--washi); padding: 168px 32px 96px; text-align: center; }
  .page-hero .crumb { font-size: 12px; letter-spacing: 0.16em; color: var(--gray-2); margin-bottom: 26px; }
  .page-hero .crumb a { color: var(--gray-2); text-decoration: none; border-bottom: 1px solid rgba(168,168,168,0.4); }
  .page-hero .crumb a:hover { color: var(--washi); }
  .page-hero .eyebrow {
    font-family: "Noto Serif JP", serif;
    font-size: 11px;
    letter-spacing: 0.4em;
    color: var(--gold);
    margin-bottom: 18px;
    text-align: center;
  }
  .page-hero h1 { font-family: "Noto Serif JP", serif; font-size: 40px; font-weight: 600; letter-spacing: 0.1em; color: var(--washi); margin-bottom: 18px; line-height: 1.5; }
  @media (max-width: 860px) { .page-hero { padding: 128px 22px 72px; } .page-hero h1 { font-size: 28px; } }
  .intro { background: var(--base); }
  .intro .lead { font-family: "Noto Serif JP", serif; font-size: 24px; letter-spacing: 0.1em; line-height: 2.05; color: var(--sumi); margin-bottom: 32px; }
  .intro p { font-size: 15px; color: var(--sumi-2); margin-bottom: 20px; letter-spacing: 0.03em; line-height: 2.0; }
  @media (max-width: 860px) { .intro .lead { font-size: 19px; } }
  .pricing { background: var(--washi); }
  .sec-note { font-size: 14px; color: var(--gray-1); letter-spacing: 0.04em; margin-top: -32px; margin-bottom: 40px; line-height: 1.9; }
  .plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .plan-card { background: var(--base); border: 1px solid var(--line); border-radius: 12px; padding: 32px 26px; }
  .plan-card.feature { border: 3px solid var(--shu); }
  .plan-card.feature .recommend-label {
    display: inline-block;
    background: var(--shu);
    color: var(--washi);
    font-family: "Noto Serif JP", serif;
    font-size: 11px;
    letter-spacing: 0.24em;
    padding: 5px 16px;
    border-radius: 999px;
    margin-bottom: 14px;
    line-height: 1.5;
  }
  .plan-card .pname { font-family: "Noto Serif JP", serif; font-size: 19px; letter-spacing: 0.08em; color: var(--sumi); font-weight: 600; margin-bottom: 4px; }
  .plan-card .ptag { font-size: 11px; letter-spacing: 0.2em; color: var(--hojicha); margin-bottom: 16px; }
  .plan-card .pconcept { font-size: 13px; color: var(--gray-1); line-height: 1.8; margin-bottom: 18px; min-height: 60px; }
  .plan-card .pprice { font-family: "Noto Serif JP", serif; font-size: 28px; font-weight: 600; color: var(--shu); line-height: 1.1; }
  .plan-card .ptax { font-size: 12px; color: var(--gray-1); margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
  .plan-card dl { display: grid; gap: 11px; }
  .plan-card dl > div { display: grid; grid-template-columns: 84px 1fr; gap: 10px; font-size: 13px; line-height: 1.6; }
  .plan-card dt { color: var(--gray-1); }
  .plan-card dd { color: var(--sumi); font-weight: 500; }
  .plan-card dd small { display: block; font-weight: 400; color: var(--gray-1); font-size: 11.5px; }
  .plan-card dd.accent { color: var(--shu); }
  @media (max-width: 860px) { .plan-grid { grid-template-columns: 1fr; } .plan-card .pconcept { min-height: 0; } }
  .note-box { margin-top: 22px; padding: 20px 26px; background: var(--washi-2); border-radius: 10px; font-size: 13px; color: var(--gray-1); line-height: 1.95; letter-spacing: 0.02em; }
  .upsell { margin-top: 26px; padding: 28px 30px; background: var(--base); border: 1px solid var(--shu); border-radius: 12px; }
  .upsell .ut { font-family: "Noto Serif JP", serif; font-size: 16px; color: var(--shu); font-weight: 600; letter-spacing: 0.06em; margin-bottom: 12px; }
  .upsell p { font-size: 13.5px; color: var(--sumi-2); line-height: 1.95; }
  .upsell a { color: var(--shu); text-decoration: none; border-bottom: 1px solid var(--shu); }
  .spec-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .spec-item { background: var(--base); border: 1px solid var(--line); border-radius: 10px; padding: 22px 24px; }
  .spec-item .sl { font-size: 10.5px; letter-spacing: 0.2em; color: var(--hojicha); margin-bottom: 8px; }
  .spec-item .sv { font-family: "Noto Serif JP", serif; font-size: 16px; color: var(--sumi); font-weight: 600; line-height: 1.6; }
  .spec-item .sv small { display: block; font-family: "Noto Sans JP", sans-serif; font-weight: 400; color: var(--gray-1); font-size: 12px; margin-top: 6px; }
  @media (max-width: 860px) { .spec-grid { grid-template-columns: 1fr; } }
  .subhead { font-family: "Noto Serif JP", serif; font-size: 20px; letter-spacing: 0.08em; color: var(--sumi); font-weight: 600; margin: 56px 0 8px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
  .subhead:first-of-type { margin-top: 0; }
  .subhead-sub { font-size: 13.5px; color: var(--gray-1); margin-bottom: 24px; letter-spacing: 0.03em; }
  .flowsec { background: var(--base); }
  .process { display: flex; flex-direction: column; gap: 0; }
  .pstep { display: grid; grid-template-columns: 70px 1fr; gap: 24px; padding: 26px 0; border-bottom: 1px solid var(--line); }
  .pstep:last-child { border-bottom: none; }
  .pstep .pnum { font-family: "Noto Serif JP", serif; font-size: 24px; color: var(--hojicha); letter-spacing: 0.05em; }
  .pstep .ptitle { font-family: "Noto Serif JP", serif; font-size: 17px; color: var(--sumi); font-weight: 600; letter-spacing: 0.06em; margin-bottom: 8px; }
  .pstep .pbody { font-size: 14px; color: var(--sumi-2); line-height: 1.95; letter-spacing: 0.02em; }
  @media (max-width: 860px) { .pstep { grid-template-columns: 44px 1fr; gap: 16px; } .pstep .pnum { font-size: 19px; } }
  .feature-sec { background: var(--washi); }
  .stance { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .stance-item { background: var(--base); border: 1px solid var(--line); border-radius: 10px; padding: 26px 28px; }
  .stance-item h4 { font-family: "Noto Serif JP", serif; font-size: 16px; color: var(--sumi); font-weight: 600; letter-spacing: 0.05em; margin-bottom: 12px; }
  .stance-item p { font-size: 13.5px; color: var(--sumi-2); line-height: 1.95; letter-spacing: 0.02em; }
  .stance-item .aside { font-size: 12.5px; color: var(--gray-1); margin-top: 10px; display: block; }
  @media (max-width: 860px) { .stance { grid-template-columns: 1fr; } }
  footer { background: var(--bg); color: var(--gray-1); text-align: center; padding: 56px 24px 36px; border-top: 1px solid var(--line); }
  footer .ftag { font-family: "Noto Serif JP", serif; font-size: 16px; letter-spacing: 0.3em; color: var(--shu); margin-bottom: 24px; }
  footer .fnav { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; margin-bottom: 28px; }
  footer .fnav a { font-size: 11px; letter-spacing: 0.12em; color: var(--gray-1); text-decoration: none; }
  footer .fnav a:hover { color: var(--shu); }
  footer .admin { font-size: 10px; letter-spacing: 0.1em; color: var(--gray-2); line-height: 1.9; border-top: 1px solid var(--line); padding-top: 24px; max-width: 540px; margin: 0 auto; }
  ::selection { background: var(--shu); color: #fff; }
  .fade-up { opacity: 0; transform: translateY(24px); transition: opacity 0.9s ease-out, transform 0.9s ease-out; }
  .fade-up.in { opacity: 1; transform: translateY(0); }
  @media (prefers-reduced-motion: reduce) { .fade-up { opacity: 1; transform: none; transition: none; } }

  /* ===== アニメーション無効化 ===== */
  
  /* ヘッダー読みやすく */
  nav .links a { font-size: 14px ; letter-spacing: 0.06em ; color: var(--sumi-2) ; }
  nav .links a:hover { color: var(--sumi) ; }

  /* 本文サイズ底上げ：読みやすく */
  .svc-card .desc, .value .vdesc, .strength .sd, .flow-note, .works-note,
  .mv-note, .origin p,
  .plan-card .pconcept, .service-card-body, .single-card-body, .sec-note,
  .process-content-body, .trans-body {
    font-size: 16px ;
    line-height: 2.0 ;
    color: var(--sumi-2) ;
  }

  /* モバイルメニュー */
  .nav-toggle { display: none; background: none; border: none; font-size: 24px; line-height: 1; color: var(--sumi); cursor: pointer; padding: 4px 6px; }
  @media (max-width: 860px) {
    nav { flex-wrap: wrap; }
    .nav-toggle { display: block; position: absolute; top: 14px; right: 16px; }
    nav .links, nav .cta { display: none; }
    nav.open .links { display: flex; flex-direction: column; width: 100%; gap: 16px; padding: 18px 2px 8px; }
    nav.open .links a { font-size: 16px ; padding: 10px 0; }
    nav.open .cta { display: inline-block; width: fit-content; margin: 6px 2px 6px; }
  }

  /* 読みやすさv2：行長(measure)・余白・編集的な間 */
  .intro .lead, .intro p, .sec-note, .doc p, .doc .pintro, .doc ul { max-width: 720px; }
  .story .inner { max-width: 680px; }
  .sec-title { margin-bottom: 56px; }
  @media (min-width: 861px) {
    section { padding-top: 150px; padding-bottom: 150px; }
  }

  /* 日本語の改行を文節単位で自然に（対応ブラウザ） */
  body { word-break: auto-phrase; line-break: strict; }

/* ==== from services/hp.html ==== */

  :root {
    --sumi:    #1B2436;
    --sumi-2:  #39435A;
    --gray-1:  #6B7484;
    --gray-2:  #9AA1AE;
    --gray-3:  #C7CDD6;
    --line:    #E3E6EB;
    --base:    #ffffff;
    --washi:   #F7F9FB;
    --washi-2: #EEF1F5;
    --bg:      #EAEEF3;
    --shu:     #16213E;
    --hojicha: #6B7484;
    --gold:    #C0972F;
    --gold-deep: #8C6920;
    --gold-faint: #F0E4C2;
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body {
    background: var(--base);
    color: var(--sumi);
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
    font-weight: 400;
    line-height: 1.9;
    -webkit-font-smoothing: antialiased;
  }
  .mincho { font-family: "Noto Serif JP", "Hiragino Mincho ProN", serif; }
  .maru { font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif; }
  .marcellus { font-family: "Noto Serif JP", serif; font-weight: 700; }
  a { color: inherit; }

  /* ====== ナビ ====== */
  nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 32px;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line);
  }
  nav .brand {
    font-family: "Noto Serif JP", serif;
    font-size: 22px;
    font-weight: 500;
    letter-spacing: 0.16em;
    color: var(--sumi);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  nav .links { display: flex; gap: 24px; }
  nav .links a {
    font-size: 12px;
    letter-spacing: 0.14em;
    color: var(--gray-1);
    text-decoration: none;
    transition: color 0.2s;
  }
  nav .links a:hover { color: var(--sumi); }
  nav .cta {
    font-size: 12px;
    letter-spacing: 0.14em;
    padding: 8px 18px;
    background: var(--shu);
    color: #fff ;
    text-decoration: none;
    border-radius: 2px;
  }
  @media (max-width: 860px) {
    nav { padding: 12px 18px; }
    nav .links { display: none; }
  }

  /* ====== セクション共通 ====== */
  section { padding: 132px 32px; }
  .inner { max-width: 940px; margin: 0 auto; }
  @media (max-width: 860px) {
    section { padding: 88px 22px; }
  }
  .sec-title {
    font-family: "Noto Serif JP", serif;
    font-size: 31px;
    font-weight: 500;
    letter-spacing: 0.12em;
    color: var(--sumi);
    margin-bottom: 48px;
    line-height: 1.7;
  }
  @media (max-width: 860px) {
    .sec-title { font-size: 23px; }
  }

  /* ====== ページヘッダー（紺青） ====== */
  .page-hero {
    background: var(--shu);
    color: var(--washi);
    padding: 168px 32px 96px;
    text-align: center;
  }
  .page-hero .crumb {
    font-size: 12px;
    letter-spacing: 0.16em;
    color: var(--gray-2);
    margin-bottom: 26px;
  }
  .page-hero .crumb a { color: var(--gray-2); text-decoration: none; border-bottom: 1px solid rgba(168,168,168,0.4); }
  .page-hero .crumb a:hover { color: var(--washi); }
  .page-hero .eyebrow {
    font-family: "Noto Serif JP", serif;
    font-size: 11px;
    letter-spacing: 0.4em;
    color: var(--gold);
    margin-bottom: 18px;
    text-align: center;
  }
  .page-hero h1 {
    font-family: "Noto Serif JP", serif;
    font-size: 40px;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--washi);
    margin-bottom: 18px;
    line-height: 1.5;
  }
  @media (max-width: 860px) {
    .page-hero { padding: 128px 22px 72px; }
    .page-hero h1 { font-size: 28px; }
  }

  /* ====== 説明文 ====== */
  .intro { background: var(--base); }
  .intro .lead {
    font-family: "Noto Serif JP", serif;
    font-size: 24px;
    letter-spacing: 0.1em;
    line-height: 2.05;
    color: var(--sumi);
    margin-bottom: 32px;
  }
  .intro p {
    font-size: 15px;
    color: var(--sumi-2);
    margin-bottom: 20px;
    letter-spacing: 0.03em;
    line-height: 2.0;
  }
  @media (max-width: 860px) {
    .intro .lead { font-size: 19px; }
  }

  /* ====== 料金・プラン ====== */
  .pricing { background: var(--washi); }
  .sec-note {
    font-size: 14px;
    color: var(--gray-1);
    letter-spacing: 0.04em;
    margin-top: -32px;
    margin-bottom: 40px;
    line-height: 1.9;
  }
  .plan-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
  .plan-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--base);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 32px 26px;
  }
  .plan-card.feature {
    border: 3px solid var(--shu);
    padding-top: 30px;
  }
  .plan-card.feature .recommend-label {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--shu);
    color: var(--washi);
    font-family: "Noto Serif JP", serif;
    font-size: 11px;
    letter-spacing: 0.24em;
    padding: 5px 16px;
    border-radius: 999px;
    line-height: 1.5;
    white-space: nowrap;
  }
  .plan-card .pname {
    font-family: "Noto Serif JP", serif;
    font-size: 19px;
    letter-spacing: 0.08em;
    color: var(--sumi);
    font-weight: 600;
    margin-bottom: 4px;
  }
  .plan-card .ptag {
    font-size: 11px;
    letter-spacing: 0.2em;
    color: var(--hojicha);
    margin-bottom: 16px;
  }
  .plan-card .pprice {
    font-family: "Noto Serif JP", serif;
    font-size: 30px;
    font-weight: 600;
    color: var(--shu);
    line-height: 1.1;
    margin-bottom: 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line);
  }
  .plan-card .pprice span { font-size: 16px; }
  .plan-card .pdesc {
    font-size: 12.5px;
    line-height: 1.75;
    color: var(--sumi-2);
    letter-spacing: 0.03em;
    margin-bottom: 16px;
  }
  .plan-card dl { display: grid; gap: 11px; }
  .plan-card dl > div {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 10px;
    font-size: 13px;
    line-height: 1.6;
  }
  .plan-card dt { color: var(--gray-1); }
  .plan-card dd {
    color: var(--sumi);
    font-weight: 500;
  }
  .plan-card dd small {
    display: block;
    font-weight: 400;
    color: var(--gray-1);
    font-size: 11.5px;
  }
  .plan-card dd.accent { color: var(--shu); }
  @media (max-width: 860px) {
    .plan-grid { grid-template-columns: 1fr; }
  }

  /* 単体料金カード */
  .single-card {
    background: var(--base);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 32px 30px;
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 32px;
    align-items: start;
  }
  .single-card .scl .ptag {
    font-size: 11px; letter-spacing: 0.2em; color: var(--hojicha); margin-bottom: 10px;
  }
  .single-card .scl .scname {
    font-family: "Noto Serif JP", serif;
    font-size: 18px; letter-spacing: 0.08em; color: var(--sumi); font-weight: 600; margin-bottom: 12px;
  }
  .single-card .scl .pprice {
    font-family: "Noto Serif JP", serif; font-size: 30px; font-weight: 600; color: var(--shu); line-height: 1.1;
  }
  .single-card .scl .pprice span { font-size: 16px; }
  .single-card .scl .ptax { font-size: 12px; color: var(--gray-1); margin-top: 4px; }
  .single-card .scbody { font-size: 14px; color: var(--sumi-2); line-height: 1.95; letter-spacing: 0.03em; }
  @media (max-width: 860px) {
    .single-card { grid-template-columns: 1fr; gap: 20px; padding: 26px 22px; }
  }

  /* 維持費 / 表 */
  .op-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
  }
  @media (max-width: 720px){ .op-grid { grid-template-columns: 1fr; } }
  .op-base {
    background: var(--base);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 30px 30px;
    margin-bottom: 0;
  }
  .op-base .ptag { font-size: 11px; letter-spacing: 0.2em; color: var(--hojicha); margin-bottom: 8px; }
  .op-base .opname { font-family: "Noto Serif JP", serif; font-size: 18px; color: var(--sumi); font-weight: 600; margin-bottom: 8px; }
  .op-base .opprice { font-family: "Noto Serif JP", serif; font-size: 28px; color: var(--shu); font-weight: 600; margin-bottom: 14px; }
  .op-base .opprice span { font-size: 14px; color: var(--gray-1); }
  .op-base .opfeat { font-size: 13.5px; color: var(--sumi-2); line-height: 2.0; }
  .op-base .opfeat small { display: block; color: var(--gray-1); font-size: 12px; margin-top: 8px; }

  .price-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--base);
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    margin-top: 8px;
  }
  .price-table caption {
    text-align: left;
    font-family: "Noto Serif JP", serif;
    font-size: 16px;
    color: var(--sumi);
    font-weight: 600;
    margin-bottom: 12px;
  }
  .price-table th, .price-table td {
    padding: 16px 24px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    font-size: 14px;
  }
  .price-table tr:last-child td { border-bottom: none; }
  .price-table td.item { color: var(--sumi-2); }
  .price-table td.price { font-family: "Noto Serif JP", serif; color: var(--shu); font-weight: 600; text-align: right; white-space: nowrap; }
  .price-table .detail { font-size: 12px; color: var(--gray-1); display: block; margin-top: 4px; font-family: "Noto Sans JP", sans-serif; font-weight: 400; }

  .note-box {
    margin-top: 22px;
    padding: 20px 26px;
    background: var(--washi-2);
    border-radius: 10px;
    font-size: 13px;
    color: var(--gray-1);
    line-height: 1.95;
    letter-spacing: 0.02em;
  }

  .plan-included {
    margin-top: 24px;
    padding: 20px 24px;
    background: var(--washi);
    border-left: 3px solid var(--shu);
    border-radius: 0 6px 6px 0;
  }
  .plan-included p { font-size: 13.5px; color: var(--sumi-2); line-height: 1.95; letter-spacing: 0.02em; }
  .plan-included strong { color: var(--shu); font-weight: 600; }

  .upsell {
    margin-top: 26px;
    padding: 28px 30px;
    background: var(--base);
    border: 1px solid var(--shu);
    border-radius: 12px;
  }
  .upsell .ut { font-family: "Noto Serif JP", serif; font-size: 16px; color: var(--shu); font-weight: 600; letter-spacing: 0.06em; margin-bottom: 12px; }
  .upsell p { font-size: 13.5px; color: var(--sumi-2); line-height: 1.95; }
  .upsell a { color: var(--shu); text-decoration: none; border-bottom: 1px solid var(--shu); }

  .subhead {
    font-family: "Noto Serif JP", serif;
    font-size: 20px;
    letter-spacing: 0.08em;
    color: var(--sumi);
    font-weight: 600;
    margin: 56px 0 8px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
  }
  .subhead:first-of-type { margin-top: 0; }
  .subhead-sub { font-size: 13.5px; color: var(--gray-1); margin-bottom: 24px; letter-spacing: 0.03em; }

  /* ====== 進め方 ====== */
  .flowsec { background: var(--base); }
  .process { display: flex; flex-direction: column; gap: 0; }
  .pstep {
    display: grid;
    grid-template-columns: 70px 1fr;
    gap: 24px;
    padding: 26px 0;
    border-bottom: 1px solid var(--line);
  }
  .pstep:last-child { border-bottom: none; }
  .pstep .pnum {
    font-family: "Noto Serif JP", serif;
    font-size: 24px;
    color: var(--hojicha);
    letter-spacing: 0.05em;
  }
  .pstep .ptitle {
    font-family: "Noto Serif JP", serif;
    font-size: 17px;
    color: var(--sumi);
    font-weight: 600;
    letter-spacing: 0.06em;
    margin-bottom: 2px;
  }
  .pstep .ptime { font-size: 12px; color: var(--hojicha); letter-spacing: 0.06em; margin-bottom: 10px; }
  .pstep .pbody { font-size: 14px; color: var(--sumi-2); line-height: 1.95; letter-spacing: 0.02em; }
  @media (max-width: 860px) {
    .pstep { grid-template-columns: 44px 1fr; gap: 16px; }
    .pstep .pnum { font-size: 19px; }
  }

  /* ====== フッター ====== */
  footer {
    background: var(--bg);
    color: var(--gray-1);
    text-align: center;
    padding: 56px 24px 36px;
    border-top: 1px solid var(--line);
  }
  footer .ftag {
    font-family: "Noto Serif JP", serif;
    font-size: 16px;
    letter-spacing: 0.3em;
    color: var(--shu);
    margin-bottom: 24px;
  }
  footer .fnav {
    display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; margin-bottom: 28px;
  }
  footer .fnav a {
    font-size: 11px; letter-spacing: 0.12em; color: var(--gray-1); text-decoration: none;
  }
  footer .fnav a:hover { color: var(--shu); }
  footer .admin {
    font-size: 10px; letter-spacing: 0.1em; color: var(--gray-2);
    line-height: 1.9; border-top: 1px solid var(--line);
    padding-top: 24px; max-width: 540px; margin: 0 auto;
  }

  ::selection { background: var(--shu); color: #fff; }

  .fade-up { opacity: 0; transform: translateY(24px); transition: opacity 0.9s ease-out, transform 0.9s ease-out; }
  .fade-up.in { opacity: 1; transform: translateY(0); }
  @media (prefers-reduced-motion: reduce) { .fade-up { opacity: 1; transform: none; transition: none; } }

  /* ===== アニメーション無効化 ===== */
  
  /* ヘッダー読みやすく */
  nav .links a { font-size: 14px ; letter-spacing: 0.06em ; color: var(--sumi-2) ; }
  nav .links a:hover { color: var(--sumi) ; }

  /* 本文サイズ底上げ：読みやすく */
  .svc-card .desc, .value .vdesc, .strength .sd, .flow-note, .works-note,
  .mv-note, .origin p,
  .service-card-body, .single-card-body, .sec-note,
  .process-content-body, .trans-body {
    font-size: 16px ;
    line-height: 2.0 ;
    color: var(--sumi-2) ;
  }

  /* モバイルメニュー */
  .nav-toggle { display: none; background: none; border: none; font-size: 24px; line-height: 1; color: var(--sumi); cursor: pointer; padding: 4px 6px; }
  @media (max-width: 860px) {
    nav { flex-wrap: wrap; }
    .nav-toggle { display: block; position: absolute; top: 14px; right: 16px; }
    nav .links, nav .cta { display: none; }
    nav.open .links { display: flex; flex-direction: column; width: 100%; gap: 16px; padding: 18px 2px 8px; }
    nav.open .links a { font-size: 16px ; padding: 10px 0; }
    nav.open .cta { display: inline-block; width: fit-content; margin: 6px 2px 6px; }
  }

  /* 読みやすさv2：行長(measure)・余白・編集的な間 */
  .intro .lead, .intro p, .sec-note, .doc p, .doc .pintro, .doc ul { max-width: 720px; }
  .story .inner { max-width: 680px; }
  .sec-title { margin-bottom: 56px; }
  @media (min-width: 861px) {
    section { padding-top: 150px; padding-bottom: 150px; }
  }

  /* 日本語の改行を文節単位で自然に（対応ブラウザ） */
  body { word-break: auto-phrase; line-break: strict; }

/* ==== from services/index.html ==== */

  :root {
    --sumi:#1B2436; --sumi-2:#39435A; --gray-1:#6B7484; --gray-2:#9AA1AE;
    --line:#E3E6EB; --base:#ffffff; --washi:#F7F9FB; --washi-2:#EEF1F5;
    --bg:#EAEEF3; --shu:#16213E; --hojicha:#6B7484;
    --gold:    #C0972F;
    --gold-deep: #8C6920;
    --gold-faint: #F0E4C2;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    background: var(--base); color: var(--sumi);
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
    font-weight: 400; line-height: 1.9; -webkit-font-smoothing: antialiased;
    word-break: auto-phrase; line-break: strict;
  }
  .marcellus { font-family: "Noto Serif JP", serif; font-weight: 700; }
  a { color: inherit; }

  /* ====== ナビ ====== */
  nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 32px; background: rgba(255,255,255,0.92);
    backdrop-filter: blur(8px); border-bottom: 1px solid var(--line);
  }
  nav .brand {
    font-family: "Noto Serif JP", serif; font-size: 22px; font-weight: 500;
    letter-spacing: 0.16em; color: var(--sumi); text-decoration: none;
    display: flex; align-items: center; gap: 10px;
  }
  nav .links { display: flex; gap: 24px; }
  nav .links a {
    font-size: 14px; letter-spacing: 0.06em; color: var(--sumi-2);
    text-decoration: none;
  }
  nav .links a:hover, nav .links a.current { color: var(--sumi); }
  nav .links a.current { border-bottom: 1px solid var(--shu); padding-bottom: 2px; }
  nav .cta {
    font-size: 12px; letter-spacing: 0.14em; padding: 8px 18px;
    background: var(--shu); color: #fff ; text-decoration: none; border-radius: 2px;
  }

  /* ====== ページヒーロー ====== */
  .page-hero {
    background: var(--shu); color: var(--washi); text-align: center;
    padding: 168px 24px 96px;
  }
  .page-hero .eyebrow {
    font-family: "Noto Serif JP", serif;
    font-size: 11px;
    letter-spacing: 0.4em;
    color: var(--gold);
    margin-bottom: 18px;
    text-align: center;
  }
  .page-hero h1 {
    font-family: "Noto Serif JP", serif;
    font-size: 40px; font-weight: 600; letter-spacing: 0.14em;
    margin-bottom: 18px;
  }
  @media (max-width: 860px) {
    .page-hero { padding: 132px 22px 72px; }
    .page-hero h1 { font-size: 28px; }
  }

  /* ====== セクション共通 ====== */
  section { padding: 110px 32px; }
  .inner { max-width: 940px; margin: 0 auto; }
  @media (max-width: 860px) { section { padding: 72px 22px; } }

  /* ====== サービス ====== */
  .services { background: var(--base); }
  .svc-group { margin-bottom: 44px; }
  .svc-group:last-child { margin-bottom: 0; }
  .svc-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  }
  .svc-card {
    background: var(--base); border: 1px solid var(--line);
    padding: 36px 24px 28px;
    text-align: center;
  }
  .svc-card .svic { display: block; width: 36px; height: 36px; margin: 0 auto 18px; color: var(--gold-deep); line-height: 0; }
  .svc-card .svic svg { width: 100%; height: 100%; }
  a.svc-card {
    text-decoration: none; color: inherit;
    display: flex; flex-direction: column;
    transition: border-color 0.2s;
  }
  
  .svc-card .name {
    font-family: "Noto Serif JP", serif;
    font-size: 17px; letter-spacing: 0.08em; color: var(--sumi);
    margin-bottom: 12px; font-weight: 500; line-height: 1.6;
  }
  .svc-card .more {
    display: inline-block; margin-top: 10px;
    font-size: 13px; letter-spacing: 0.08em; color: var(--shu);
  }
  @media (max-width: 860px) {
    .svc-grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 540px) {
    .svc-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .services .svc-card { min-width: 0; padding: 28px 12px 22px; }
    .services .svc-card .name { font-size: 15px; letter-spacing: 0.04em; }
  }

  /* ====== フッター ====== */
  footer { background: var(--bg); color: var(--gray-1); text-align: center; padding: 56px 24px 36px; border-top: 1px solid var(--line); }
  footer .ftag { font-family: "Noto Serif JP", serif; font-size: 16px; letter-spacing: 0.3em; color: var(--shu); margin-bottom: 24px; }
  footer .fnav { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; margin-bottom: 28px; }
  footer .fnav a { font-size: 11px; letter-spacing: 0.12em; color: var(--gray-1); text-decoration: none; }
  footer .fnav a:hover { color: var(--shu); }
  footer .admin { font-size: 10px; letter-spacing: 0.1em; color: var(--gray-2); line-height: 1.9; border-top: 1px solid var(--line); padding-top: 24px; max-width: 540px; margin: 0 auto; }
  ::selection { background: var(--shu); color: #fff; }

  /* モバイルメニュー */
  .nav-toggle { display: none; background: none; border: none; font-size: 24px; line-height: 1; color: var(--sumi); cursor: pointer; padding: 4px 6px; }
  @media (max-width: 860px) {
    nav { padding: 12px 18px; flex-wrap: wrap; }
    .nav-toggle { display: block; position: absolute; top: 14px; right: 16px; }
    nav .links, nav .cta { display: none; }
    nav.open .links { display: flex; flex-direction: column; width: 100%; gap: 16px; padding: 18px 2px 8px; }
    nav.open .links a { font-size: 16px ; padding: 10px 0; }
    nav.open .cta { display: inline-block; width: fit-content; margin: 6px 2px 6px; }
  }

/* ==== from services/logo.html ==== */

  :root {
    --sumi:    #1B2436;
    --sumi-2:  #39435A;
    --gray-1:  #6B7484;
    --gray-2:  #9AA1AE;
    --gray-3:  #C7CDD6;
    --line:    #E3E6EB;
    --base:    #ffffff;
    --washi:   #F7F9FB;
    --washi-2: #EEF1F5;
    --bg:      #EAEEF3;
    --shu:     #16213E;
    --hojicha: #6B7484;
    --gold:    #C0972F;
    --gold-deep: #8C6920;
    --gold-faint: #F0E4C2;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body {
    background: var(--base); color: var(--sumi);
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
    font-weight: 400; line-height: 1.9; -webkit-font-smoothing: antialiased;
  }
  .mincho { font-family: "Noto Serif JP", "Hiragino Mincho ProN", serif; }
  .maru { font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif; }
  .marcellus { font-family: "Noto Serif JP", serif; font-weight: 700; }
  a { color: inherit; }
  nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 32px; background: rgba(255,255,255,0.92);
    backdrop-filter: blur(8px); border-bottom: 1px solid var(--line);
  }
  nav .brand {
    font-family: "Noto Serif JP", serif; font-size: 22px; font-weight: 500;
    letter-spacing: 0.16em; color: var(--sumi); text-decoration: none;
    display: flex; align-items: center; gap: 10px;
  }
  nav .links { display: flex; gap: 24px; }
  nav .links a { font-size: 12px; letter-spacing: 0.14em; color: var(--gray-1); text-decoration: none; transition: color 0.2s; }
  nav .links a:hover { color: var(--sumi); }
  nav .cta { font-size: 12px; letter-spacing: 0.14em; padding: 8px 18px; background: var(--shu); color: #fff ; text-decoration: none; border-radius: 2px; }
  @media (max-width: 860px) { nav { padding: 12px 18px; } nav .links { display: none; } }
  section { padding: 132px 32px; }
  .inner { max-width: 940px; margin: 0 auto; }
  @media (max-width: 860px) { section { padding: 88px 22px; } }
  .sec-title { font-family: "Noto Serif JP", serif; font-size: 31px; font-weight: 500; letter-spacing: 0.12em; color: var(--sumi); margin-bottom: 48px; line-height: 1.7; }
  @media (max-width: 860px) { .sec-title { font-size: 23px; } }
  .page-hero { background: var(--shu); color: var(--washi); padding: 168px 32px 96px; text-align: center; }
  .page-hero .crumb { font-size: 12px; letter-spacing: 0.16em; color: var(--gray-2); margin-bottom: 26px; }
  .page-hero .crumb a { color: var(--gray-2); text-decoration: none; border-bottom: 1px solid rgba(168,168,168,0.4); }
  .page-hero .crumb a:hover { color: var(--washi); }
  .page-hero .eyebrow {
    font-family: "Noto Serif JP", serif;
    font-size: 11px;
    letter-spacing: 0.4em;
    color: var(--gold);
    margin-bottom: 18px;
    text-align: center;
  }
  .page-hero h1 { font-family: "Noto Serif JP", serif; font-size: 40px; font-weight: 600; letter-spacing: 0.1em; color: var(--washi); margin-bottom: 18px; line-height: 1.5; }
  @media (max-width: 860px) { .page-hero { padding: 128px 22px 72px; } .page-hero h1 { font-size: 28px; } }
  .intro { background: var(--base); }
  .intro .lead { font-family: "Noto Serif JP", serif; font-size: 24px; letter-spacing: 0.1em; line-height: 2.05; color: var(--sumi); margin-bottom: 32px; }
  .intro p { font-size: 15px; color: var(--sumi-2); margin-bottom: 20px; letter-spacing: 0.03em; line-height: 2.0; }
  @media (max-width: 860px) { .intro .lead { font-size: 19px; } }
  .pricing { background: var(--washi); }
  .sec-note { font-size: 14px; color: var(--gray-1); letter-spacing: 0.04em; margin-top: -32px; margin-bottom: 40px; line-height: 1.9; }
  .single-card { background: var(--base); border: 1px solid var(--line); border-radius: 12px; padding: 32px 30px; display: grid; grid-template-columns: 260px 1fr; gap: 32px; align-items: start; }
  .single-card .scl .ptag { font-size: 11px; letter-spacing: 0.2em; color: var(--hojicha); margin-bottom: 10px; }
  .single-card .scl .scname { font-family: "Noto Serif JP", serif; font-size: 18px; letter-spacing: 0.08em; color: var(--sumi); font-weight: 600; margin-bottom: 12px; }
  .single-card .scl .pprice { font-family: "Noto Serif JP", serif; font-size: 30px; font-weight: 600; color: var(--shu); line-height: 1.1; }
  .single-card .scl .pprice span { font-size: 16px; }
  .single-card .scl .ptax { font-size: 12px; color: var(--gray-1); margin-top: 4px; }
  .single-card .scbody { font-size: 14px; color: var(--sumi-2); line-height: 1.95; letter-spacing: 0.03em; }
  @media (max-width: 860px) { .single-card { grid-template-columns: 1fr; gap: 20px; padding: 26px 22px; } }
  .note-box { margin-top: 22px; padding: 20px 26px; background: var(--washi-2); border-radius: 10px; font-size: 13px; color: var(--gray-1); line-height: 1.95; letter-spacing: 0.02em; }
  .upsell { margin-top: 26px; padding: 28px 30px; background: var(--base); border: 1px solid var(--shu); border-radius: 12px; }
  .upsell .ut { font-family: "Noto Serif JP", serif; font-size: 16px; color: var(--shu); font-weight: 600; letter-spacing: 0.06em; margin-bottom: 12px; }
  .upsell p { font-size: 13.5px; color: var(--sumi-2); line-height: 1.95; }
  .upsell a { color: var(--shu); text-decoration: none; border-bottom: 1px solid var(--shu); }
  .flowsec { background: var(--base); }
  .process { display: flex; flex-direction: column; gap: 0; }
  .pstep { display: grid; grid-template-columns: 70px 1fr; gap: 24px; padding: 26px 0; border-bottom: 1px solid var(--line); }
  .pstep:last-child { border-bottom: none; }
  .pstep .pnum { font-family: "Noto Serif JP", serif; font-size: 24px; color: var(--hojicha); letter-spacing: 0.05em; }
  .pstep .ptitle { font-family: "Noto Serif JP", serif; font-size: 17px; color: var(--sumi); font-weight: 600; letter-spacing: 0.06em; margin-bottom: 2px; }
  .pstep .ptime { font-size: 12px; color: var(--hojicha); letter-spacing: 0.06em; margin-bottom: 10px; }
  .pstep .pbody { font-size: 14px; color: var(--sumi-2); line-height: 1.95; letter-spacing: 0.02em; }
  @media (max-width: 860px) { .pstep { grid-template-columns: 44px 1fr; gap: 16px; } .pstep .pnum { font-size: 19px; } }
  .feature-sec { background: var(--washi); }
  .stance { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .stance-item { background: var(--base); border: 1px solid var(--line); border-radius: 10px; padding: 26px 28px; }
  .stance-item h4 { font-family: "Noto Serif JP", serif; font-size: 16px; color: var(--sumi); font-weight: 600; letter-spacing: 0.05em; margin-bottom: 12px; }
  .stance-item p { font-size: 13.5px; color: var(--sumi-2); line-height: 1.95; letter-spacing: 0.02em; }
  @media (max-width: 860px) { .stance { grid-template-columns: 1fr; } }
  footer { background: var(--bg); color: var(--gray-1); text-align: center; padding: 56px 24px 36px; border-top: 1px solid var(--line); }
  footer .ftag { font-family: "Noto Serif JP", serif; font-size: 16px; letter-spacing: 0.3em; color: var(--shu); margin-bottom: 24px; }
  footer .fnav { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; margin-bottom: 28px; }
  footer .fnav a { font-size: 11px; letter-spacing: 0.12em; color: var(--gray-1); text-decoration: none; }
  footer .fnav a:hover { color: var(--shu); }
  footer .admin { font-size: 10px; letter-spacing: 0.1em; color: var(--gray-2); line-height: 1.9; border-top: 1px solid var(--line); padding-top: 24px; max-width: 540px; margin: 0 auto; }
  ::selection { background: var(--shu); color: #fff; }
  .fade-up { opacity: 0; transform: translateY(24px); transition: opacity 0.9s ease-out, transform 0.9s ease-out; }
  .fade-up.in { opacity: 1; transform: translateY(0); }
  @media (prefers-reduced-motion: reduce) { .fade-up { opacity: 1; transform: none; transition: none; } }

  /* ===== アニメーション無効化 ===== */
  
  /* ヘッダー読みやすく */
  nav .links a { font-size: 14px ; letter-spacing: 0.06em ; color: var(--sumi-2) ; }
  nav .links a:hover { color: var(--sumi) ; }

  /* 本文サイズ底上げ：読みやすく */
  .svc-card .desc, .value .vdesc, .strength .sd, .flow-note, .works-note,
  .mv-note, .origin p,
  .plan-card .pconcept, .service-card-body, .single-card-body, .sec-note,
  .process-content-body, .trans-body {
    font-size: 16px ;
    line-height: 2.0 ;
    color: var(--sumi-2) ;
  }

  /* モバイルメニュー */
  .nav-toggle { display: none; background: none; border: none; font-size: 24px; line-height: 1; color: var(--sumi); cursor: pointer; padding: 4px 6px; }
  @media (max-width: 860px) {
    nav { flex-wrap: wrap; }
    .nav-toggle { display: block; position: absolute; top: 14px; right: 16px; }
    nav .links, nav .cta { display: none; }
    nav.open .links { display: flex; flex-direction: column; width: 100%; gap: 16px; padding: 18px 2px 8px; }
    nav.open .links a { font-size: 16px ; padding: 10px 0; }
    nav.open .cta { display: inline-block; width: fit-content; margin: 6px 2px 6px; }
  }

  /* 読みやすさv2：行長(measure)・余白・編集的な間 */
  .intro .lead, .intro p, .sec-note, .doc p, .doc .pintro, .doc ul { max-width: 720px; }
  .story .inner { max-width: 680px; }
  .sec-title { margin-bottom: 56px; }
  @media (min-width: 861px) {
    section { padding-top: 150px; padding-bottom: 150px; }
  }

  /* 日本語の改行を文節単位で自然に（対応ブラウザ） */
  body { word-break: auto-phrase; line-break: strict; }

/* ==== from services/movie.html ==== */

  :root {
    --sumi:    #1B2436;
    --sumi-2:  #39435A;
    --gray-1:  #6B7484;
    --gray-2:  #9AA1AE;
    --gray-3:  #C7CDD6;
    --line:    #E3E6EB;
    --base:    #ffffff;
    --washi:   #F7F9FB;
    --washi-2: #EEF1F5;
    --bg:      #EAEEF3;
    --shu:     #16213E;
    --hojicha: #6B7484;
    --gold:    #C0972F;
    --gold-deep: #8C6920;
    --gold-faint: #F0E4C2;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body { background: var(--base); color: var(--sumi); font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif; font-weight: 400; line-height: 1.9; -webkit-font-smoothing: antialiased; }
  .mincho { font-family: "Noto Serif JP", "Hiragino Mincho ProN", serif; }
  .maru { font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif; }
  .marcellus { font-family: "Noto Serif JP", serif; font-weight: 700; }
  a { color: inherit; }
  nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 16px 32px; background: rgba(255,255,255,0.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
  nav .brand { font-family: "Noto Serif JP", serif; font-size: 22px; font-weight: 500; letter-spacing: 0.16em; color: var(--sumi); text-decoration: none; display: flex; align-items: center; gap: 10px; }
  nav .links { display: flex; gap: 24px; }
  nav .links a { font-size: 12px; letter-spacing: 0.14em; color: var(--gray-1); text-decoration: none; transition: color 0.2s; }
  nav .links a:hover { color: var(--sumi); }
  nav .cta { font-size: 12px; letter-spacing: 0.14em; padding: 8px 18px; background: var(--shu); color: #fff ; text-decoration: none; border-radius: 2px; }
  @media (max-width: 860px) { nav { padding: 12px 18px; } nav .links { display: none; } }
  section { padding: 132px 32px; }
  .inner { max-width: 940px; margin: 0 auto; }
  @media (max-width: 860px) { section { padding: 88px 22px; } }
  .sec-title { font-family: "Noto Serif JP", serif; font-size: 31px; font-weight: 500; letter-spacing: 0.12em; color: var(--sumi); margin-bottom: 48px; line-height: 1.7; }
  @media (max-width: 860px) { .sec-title { font-size: 23px; } }
  .page-hero { background: var(--shu); color: var(--washi); padding: 168px 32px 96px; text-align: center; }
  .page-hero .crumb { font-size: 12px; letter-spacing: 0.16em; color: var(--gray-2); margin-bottom: 26px; }
  .page-hero .crumb a { color: var(--gray-2); text-decoration: none; border-bottom: 1px solid rgba(168,168,168,0.4); }
  .page-hero .crumb a:hover { color: var(--washi); }
  .page-hero .eyebrow {
    font-family: "Noto Serif JP", serif;
    font-size: 11px;
    letter-spacing: 0.4em;
    color: var(--gold);
    margin-bottom: 18px;
    text-align: center;
  }
  .page-hero h1 { font-family: "Noto Serif JP", serif; font-size: 40px; font-weight: 600; letter-spacing: 0.1em; color: var(--washi); margin-bottom: 18px; line-height: 1.5; }
  @media (max-width: 860px) { .page-hero { padding: 128px 22px 72px; } .page-hero h1 { font-size: 28px; } }
  .intro { background: var(--base); }
  .intro .lead { font-family: "Noto Serif JP", serif; font-size: 24px; letter-spacing: 0.1em; line-height: 2.05; color: var(--sumi); margin-bottom: 32px; }
  .intro p { font-size: 15px; color: var(--sumi-2); margin-bottom: 20px; letter-spacing: 0.03em; line-height: 2.0; }
  @media (max-width: 860px) { .intro .lead { font-size: 19px; } }
  .pricing { background: var(--washi); }
  .sec-note { font-size: 14px; color: var(--gray-1); letter-spacing: 0.04em; margin-top: -32px; margin-bottom: 40px; line-height: 1.9; }
  .plan-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .plan-card { background: var(--base); border: 1px solid var(--line); border-radius: 12px; padding: 32px 26px; }
  .plan-card.full { grid-column: 1 / -1; }
  .plan-card .pname { font-family: "Noto Serif JP", serif; font-size: 19px; letter-spacing: 0.08em; color: var(--sumi); font-weight: 600; margin-bottom: 4px; }
  .plan-card .ptag { font-size: 11px; letter-spacing: 0.2em; color: var(--hojicha); margin-bottom: 16px; }
  .plan-card .pprice { font-family: "Noto Serif JP", serif; font-size: 30px; font-weight: 600; color: var(--shu); line-height: 1.1; }
  .plan-card .pprice.sm { font-size: 21px; }
  .plan-card .pprice span { font-size: 16px; }
  .plan-card .ptax { font-size: 12px; color: var(--gray-1); margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
  .plan-card .pbody { font-size: 14px; color: var(--sumi-2); line-height: 1.95; letter-spacing: 0.02em; }
  .plan-card .pbody small { color: var(--gray-1); font-size: 12.5px; }
  @media (max-width: 860px) { .plan-grid { grid-template-columns: 1fr; } }
  .note-box { margin-top: 22px; padding: 20px 26px; background: var(--washi-2); border-radius: 10px; font-size: 13px; color: var(--gray-1); line-height: 1.95; letter-spacing: 0.02em; }
  .upsell { margin-top: 26px; padding: 28px 30px; background: var(--base); border: 1px solid var(--shu); border-radius: 12px; }
  .upsell .ut { font-family: "Noto Serif JP", serif; font-size: 16px; color: var(--shu); font-weight: 600; letter-spacing: 0.06em; margin-bottom: 12px; }
  .upsell p { font-size: 13.5px; color: var(--sumi-2); line-height: 1.95; }
  .upsell a { color: var(--shu); text-decoration: none; border-bottom: 1px solid var(--shu); }
  .subhead { font-family: "Noto Serif JP", serif; font-size: 20px; letter-spacing: 0.08em; color: var(--sumi); font-weight: 600; margin: 56px 0 8px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
  .subhead:first-of-type { margin-top: 0; }
  .subhead-sub { font-size: 13.5px; color: var(--gray-1); margin-bottom: 24px; letter-spacing: 0.03em; }
  .flowsec { background: var(--base); }
  .process { display: flex; flex-direction: column; gap: 0; }
  .pstep { display: grid; grid-template-columns: 70px 1fr; gap: 24px; padding: 26px 0; border-bottom: 1px solid var(--line); }
  .pstep:last-child { border-bottom: none; }
  .pstep .pnum { font-family: "Noto Serif JP", serif; font-size: 24px; color: var(--hojicha); letter-spacing: 0.05em; }
  .pstep .ptitle { font-family: "Noto Serif JP", serif; font-size: 17px; color: var(--sumi); font-weight: 600; letter-spacing: 0.06em; margin-bottom: 2px; }
  .pstep .ptime { font-size: 12px; color: var(--hojicha); letter-spacing: 0.06em; margin-bottom: 10px; }
  .pstep .pbody { font-size: 14px; color: var(--sumi-2); line-height: 1.95; letter-spacing: 0.02em; }
  @media (max-width: 860px) { .pstep { grid-template-columns: 44px 1fr; gap: 16px; } .pstep .pnum { font-size: 19px; } }
  .feature-sec { background: var(--washi); }
  .stance { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .stance-item { background: var(--base); border: 1px solid var(--line); border-radius: 10px; padding: 26px 28px; }
  .stance-item h4 { font-family: "Noto Serif JP", serif; font-size: 16px; color: var(--sumi); font-weight: 600; letter-spacing: 0.05em; margin-bottom: 12px; }
  .stance-item p { font-size: 13.5px; color: var(--sumi-2); line-height: 1.95; letter-spacing: 0.02em; }
  .stance-item .aside { font-size: 12.5px; color: var(--gray-1); margin-top: 10px; }
  @media (max-width: 860px) { .stance { grid-template-columns: 1fr; } }
  footer { background: var(--bg); color: var(--gray-1); text-align: center; padding: 56px 24px 36px; border-top: 1px solid var(--line); }
  footer .ftag { font-family: "Noto Serif JP", serif; font-size: 16px; letter-spacing: 0.3em; color: var(--shu); margin-bottom: 24px; }
  footer .fnav { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; margin-bottom: 28px; }
  footer .fnav a { font-size: 11px; letter-spacing: 0.12em; color: var(--gray-1); text-decoration: none; }
  footer .fnav a:hover { color: var(--shu); }
  footer .admin { font-size: 10px; letter-spacing: 0.1em; color: var(--gray-2); line-height: 1.9; border-top: 1px solid var(--line); padding-top: 24px; max-width: 540px; margin: 0 auto; }
  ::selection { background: var(--shu); color: #fff; }
  .fade-up { opacity: 0; transform: translateY(24px); transition: opacity 0.9s ease-out, transform 0.9s ease-out; }
  .fade-up.in { opacity: 1; transform: translateY(0); }
  @media (prefers-reduced-motion: reduce) { .fade-up { opacity: 1; transform: none; transition: none; } }

  /* ===== アニメーション無効化 ===== */
  
  /* ヘッダー読みやすく */
  nav .links a { font-size: 14px ; letter-spacing: 0.06em ; color: var(--sumi-2) ; }
  nav .links a:hover { color: var(--sumi) ; }

  /* 本文サイズ底上げ：読みやすく */
  .svc-card .desc, .value .vdesc, .strength .sd, .flow-note, .works-note,
  .mv-note, .origin p,
  .plan-card .pconcept, .service-card-body, .single-card-body, .sec-note,
  .process-content-body, .trans-body {
    font-size: 16px ;
    line-height: 2.0 ;
    color: var(--sumi-2) ;
  }

  /* モバイルメニュー */
  .nav-toggle { display: none; background: none; border: none; font-size: 24px; line-height: 1; color: var(--sumi); cursor: pointer; padding: 4px 6px; }
  @media (max-width: 860px) {
    nav { flex-wrap: wrap; }
    .nav-toggle { display: block; position: absolute; top: 14px; right: 16px; }
    nav .links, nav .cta { display: none; }
    nav.open .links { display: flex; flex-direction: column; width: 100%; gap: 16px; padding: 18px 2px 8px; }
    nav.open .links a { font-size: 16px ; padding: 10px 0; }
    nav.open .cta { display: inline-block; width: fit-content; margin: 6px 2px 6px; }
  }

  /* 読みやすさv2：行長(measure)・余白・編集的な間 */
  .intro .lead, .intro p, .sec-note, .doc p, .doc .pintro, .doc ul { max-width: 720px; }
  .story .inner { max-width: 680px; }
  .sec-title { margin-bottom: 56px; }
  @media (min-width: 861px) {
    section { padding-top: 150px; padding-bottom: 150px; }
  }

  /* 日本語の改行を文節単位で自然に（対応ブラウザ） */
  body { word-break: auto-phrase; line-break: strict; }

/* ==== from services/photo.html ==== */

  :root {
    --sumi:    #1B2436;
    --sumi-2:  #39435A;
    --gray-1:  #6B7484;
    --gray-2:  #9AA1AE;
    --gray-3:  #C7CDD6;
    --line:    #E3E6EB;
    --base:    #ffffff;
    --washi:   #F7F9FB;
    --washi-2: #EEF1F5;
    --bg:      #EAEEF3;
    --shu:     #16213E;
    --hojicha: #6B7484;
    --gold:    #C0972F;
    --gold-deep: #8C6920;
    --gold-faint: #F0E4C2;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body { background: var(--base); color: var(--sumi); font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif; font-weight: 400; line-height: 1.9; -webkit-font-smoothing: antialiased; }
  .mincho { font-family: "Noto Serif JP", "Hiragino Mincho ProN", serif; }
  .maru { font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif; }
  .marcellus { font-family: "Noto Serif JP", serif; font-weight: 700; }
  a { color: inherit; }
  nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 16px 32px; background: rgba(255,255,255,0.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
  nav .brand { font-family: "Noto Serif JP", serif; font-size: 22px; font-weight: 500; letter-spacing: 0.16em; color: var(--sumi); text-decoration: none; display: flex; align-items: center; gap: 10px; }
  nav .links { display: flex; gap: 24px; }
  nav .links a { font-size: 12px; letter-spacing: 0.14em; color: var(--gray-1); text-decoration: none; transition: color 0.2s; }
  nav .links a:hover { color: var(--sumi); }
  nav .cta { font-size: 12px; letter-spacing: 0.14em; padding: 8px 18px; background: var(--shu); color: #fff ; text-decoration: none; border-radius: 2px; }
  @media (max-width: 860px) { nav { padding: 12px 18px; } nav .links { display: none; } }
  section { padding: 132px 32px; }
  .inner { max-width: 940px; margin: 0 auto; }
  @media (max-width: 860px) { section { padding: 88px 22px; } }
  .sec-title { font-family: "Noto Serif JP", serif; font-size: 31px; font-weight: 500; letter-spacing: 0.12em; color: var(--sumi); margin-bottom: 48px; line-height: 1.7; }
  @media (max-width: 860px) { .sec-title { font-size: 23px; } }
  .page-hero { background: var(--shu); color: var(--washi); padding: 168px 32px 96px; text-align: center; }
  .page-hero .crumb { font-size: 12px; letter-spacing: 0.16em; color: var(--gray-2); margin-bottom: 26px; }
  .page-hero .crumb a { color: var(--gray-2); text-decoration: none; border-bottom: 1px solid rgba(168,168,168,0.4); }
  .page-hero .crumb a:hover { color: var(--washi); }
  .page-hero .eyebrow {
    font-family: "Noto Serif JP", serif;
    font-size: 11px;
    letter-spacing: 0.4em;
    color: var(--gold);
    margin-bottom: 18px;
    text-align: center;
  }
  .page-hero h1 { font-family: "Noto Serif JP", serif; font-size: 40px; font-weight: 600; letter-spacing: 0.1em; color: var(--washi); margin-bottom: 18px; line-height: 1.5; }
  @media (max-width: 860px) { .page-hero { padding: 128px 22px 72px; } .page-hero h1 { font-size: 28px; } }
  .intro { background: var(--base); }
  .intro .lead { font-family: "Noto Serif JP", serif; font-size: 24px; letter-spacing: 0.1em; line-height: 2.05; color: var(--sumi); margin-bottom: 32px; }
  .intro p { font-size: 15px; color: var(--sumi-2); margin-bottom: 20px; letter-spacing: 0.03em; line-height: 2.0; }
  @media (max-width: 860px) { .intro .lead { font-size: 19px; } }
  .pricing { background: var(--washi); }
  .sec-note { font-size: 14px; color: var(--gray-1); letter-spacing: 0.04em; margin-top: -32px; margin-bottom: 40px; line-height: 1.9; }
  .plan-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .plan-card { background: var(--base); border: 1px solid var(--line); border-radius: 12px; padding: 32px 26px; }
  .plan-card .pname { font-family: "Noto Serif JP", serif; font-size: 19px; letter-spacing: 0.08em; color: var(--sumi); font-weight: 600; margin-bottom: 4px; }
  .plan-card .ptag { font-size: 11px; letter-spacing: 0.2em; color: var(--hojicha); margin-bottom: 16px; }
  .plan-card .pprice { font-family: "Noto Serif JP", serif; font-size: 30px; font-weight: 600; color: var(--shu); line-height: 1.1; }
  .plan-card .pprice span { font-size: 16px; }
  .plan-card .ptax { font-size: 12px; color: var(--gray-1); margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
  .plan-card .pbody { font-size: 14px; color: var(--sumi-2); line-height: 1.95; letter-spacing: 0.02em; }
  @media (max-width: 860px) { .plan-grid { grid-template-columns: 1fr; } }
  .note-box { margin-top: 22px; padding: 20px 26px; background: var(--washi-2); border-radius: 10px; font-size: 13px; color: var(--gray-1); line-height: 1.95; letter-spacing: 0.02em; }
  .upsell { margin-top: 26px; padding: 28px 30px; background: var(--base); border: 1px solid var(--shu); border-radius: 12px; }
  .upsell .ut { font-family: "Noto Serif JP", serif; font-size: 16px; color: var(--shu); font-weight: 600; letter-spacing: 0.06em; margin-bottom: 12px; }
  .upsell p { font-size: 13.5px; color: var(--sumi-2); line-height: 1.95; }
  .upsell a { color: var(--shu); text-decoration: none; border-bottom: 1px solid var(--shu); }
  .flowsec { background: var(--base); }
  .process { display: flex; flex-direction: column; gap: 0; }
  .pstep { display: grid; grid-template-columns: 70px 1fr; gap: 24px; padding: 26px 0; border-bottom: 1px solid var(--line); }
  .pstep:last-child { border-bottom: none; }
  .pstep .pnum { font-family: "Noto Serif JP", serif; font-size: 24px; color: var(--hojicha); letter-spacing: 0.05em; }
  .pstep .ptitle { font-family: "Noto Serif JP", serif; font-size: 17px; color: var(--sumi); font-weight: 600; letter-spacing: 0.06em; margin-bottom: 2px; }
  .pstep .ptime { font-size: 12px; color: var(--hojicha); letter-spacing: 0.06em; margin-bottom: 10px; }
  .pstep .pbody { font-size: 14px; color: var(--sumi-2); line-height: 1.95; letter-spacing: 0.02em; }
  @media (max-width: 860px) { .pstep { grid-template-columns: 44px 1fr; gap: 16px; } .pstep .pnum { font-size: 19px; } }
  .feature-sec { background: var(--washi); }
  .stance { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .stance-item { background: var(--base); border: 1px solid var(--line); border-radius: 10px; padding: 26px 28px; }
  .stance-item h4 { font-family: "Noto Serif JP", serif; font-size: 16px; color: var(--sumi); font-weight: 600; letter-spacing: 0.05em; margin-bottom: 12px; }
  .stance-item p { font-size: 13.5px; color: var(--sumi-2); line-height: 1.95; letter-spacing: 0.02em; }
  @media (max-width: 860px) { .stance { grid-template-columns: 1fr; } }
  footer { background: var(--bg); color: var(--gray-1); text-align: center; padding: 56px 24px 36px; border-top: 1px solid var(--line); }
  footer .ftag { font-family: "Noto Serif JP", serif; font-size: 16px; letter-spacing: 0.3em; color: var(--shu); margin-bottom: 24px; }
  footer .fnav { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; margin-bottom: 28px; }
  footer .fnav a { font-size: 11px; letter-spacing: 0.12em; color: var(--gray-1); text-decoration: none; }
  footer .fnav a:hover { color: var(--shu); }
  footer .admin { font-size: 10px; letter-spacing: 0.1em; color: var(--gray-2); line-height: 1.9; border-top: 1px solid var(--line); padding-top: 24px; max-width: 540px; margin: 0 auto; }
  ::selection { background: var(--shu); color: #fff; }
  .fade-up { opacity: 0; transform: translateY(24px); transition: opacity 0.9s ease-out, transform 0.9s ease-out; }
  .fade-up.in { opacity: 1; transform: translateY(0); }
  @media (prefers-reduced-motion: reduce) { .fade-up { opacity: 1; transform: none; transition: none; } }

  /* ===== アニメーション無効化 ===== */
  
  /* ヘッダー読みやすく */
  nav .links a { font-size: 14px ; letter-spacing: 0.06em ; color: var(--sumi-2) ; }
  nav .links a:hover { color: var(--sumi) ; }

  /* 本文サイズ底上げ：読みやすく */
  .svc-card .desc, .value .vdesc, .strength .sd, .flow-note, .works-note,
  .mv-note, .origin p,
  .plan-card .pconcept, .service-card-body, .single-card-body, .sec-note,
  .process-content-body, .trans-body {
    font-size: 16px ;
    line-height: 2.0 ;
    color: var(--sumi-2) ;
  }

  /* モバイルメニュー */
  .nav-toggle { display: none; background: none; border: none; font-size: 24px; line-height: 1; color: var(--sumi); cursor: pointer; padding: 4px 6px; }
  @media (max-width: 860px) {
    nav { flex-wrap: wrap; }
    .nav-toggle { display: block; position: absolute; top: 14px; right: 16px; }
    nav .links, nav .cta { display: none; }
    nav.open .links { display: flex; flex-direction: column; width: 100%; gap: 16px; padding: 18px 2px 8px; }
    nav.open .links a { font-size: 16px ; padding: 10px 0; }
    nav.open .cta { display: inline-block; width: fit-content; margin: 6px 2px 6px; }
  }

  /* 読みやすさv2：行長(measure)・余白・編集的な間 */
  .intro .lead, .intro p, .sec-note, .doc p, .doc .pintro, .doc ul { max-width: 720px; }
  .story .inner { max-width: 680px; }
  .sec-title { margin-bottom: 56px; }
  @media (min-width: 861px) {
    section { padding-top: 150px; padding-bottom: 150px; }
  }

  /* 日本語の改行を文節単位で自然に（対応ブラウザ） */
  body { word-break: auto-phrase; line-break: strict; }

/* ==== from services/print.html ==== */

  :root {
    --sumi:    #1B2436;
    --sumi-2:  #39435A;
    --gray-1:  #6B7484;
    --gray-2:  #9AA1AE;
    --gray-3:  #C7CDD6;
    --line:    #E3E6EB;
    --base:    #ffffff;
    --washi:   #F7F9FB;
    --washi-2: #EEF1F5;
    --bg:      #EAEEF3;
    --shu:     #16213E;
    --hojicha: #6B7484;
    --gold:    #C0972F;
    --gold-deep: #8C6920;
    --gold-faint: #F0E4C2;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body { background: var(--base); color: var(--sumi); font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif; font-weight: 400; line-height: 1.9; -webkit-font-smoothing: antialiased; }
  .mincho { font-family: "Noto Serif JP", "Hiragino Mincho ProN", serif; }
  .maru { font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif; }
  .marcellus { font-family: "Noto Serif JP", serif; font-weight: 700; }
  a { color: inherit; }
  nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 16px 32px; background: rgba(255,255,255,0.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
  nav .brand { font-family: "Noto Serif JP", serif; font-size: 22px; font-weight: 500; letter-spacing: 0.16em; color: var(--sumi); text-decoration: none; display: flex; align-items: center; gap: 10px; }
  nav .links { display: flex; gap: 24px; }
  nav .links a { font-size: 12px; letter-spacing: 0.14em; color: var(--gray-1); text-decoration: none; transition: color 0.2s; }
  nav .links a:hover { color: var(--sumi); }
  nav .cta { font-size: 12px; letter-spacing: 0.14em; padding: 8px 18px; background: var(--shu); color: #fff ; text-decoration: none; border-radius: 2px; }
  @media (max-width: 860px) { nav { padding: 12px 18px; } nav .links { display: none; } }
  section { padding: 132px 32px; }
  .inner { max-width: 940px; margin: 0 auto; }
  @media (max-width: 860px) { section { padding: 88px 22px; } }
  .sec-title { font-family: "Noto Serif JP", serif; font-size: 31px; font-weight: 500; letter-spacing: 0.12em; color: var(--sumi); margin-bottom: 48px; line-height: 1.7; }
  @media (max-width: 860px) { .sec-title { font-size: 23px; } }
  .page-hero { background: var(--shu); color: var(--washi); padding: 168px 32px 96px; text-align: center; }
  .page-hero .crumb { font-size: 12px; letter-spacing: 0.16em; color: var(--gray-2); margin-bottom: 26px; }
  .page-hero .crumb a { color: var(--gray-2); text-decoration: none; border-bottom: 1px solid rgba(168,168,168,0.4); }
  .page-hero .crumb a:hover { color: var(--washi); }
  .page-hero .eyebrow {
    font-family: "Noto Serif JP", serif;
    font-size: 11px;
    letter-spacing: 0.4em;
    color: var(--gold);
    margin-bottom: 18px;
    text-align: center;
  }
  .page-hero h1 { font-family: "Noto Serif JP", serif; font-size: 40px; font-weight: 600; letter-spacing: 0.1em; color: var(--washi); margin-bottom: 18px; line-height: 1.5; }
  @media (max-width: 860px) { .page-hero { padding: 128px 22px 72px; } .page-hero h1 { font-size: 28px; } }
  .intro { background: var(--base); }
  .intro .lead { font-family: "Noto Serif JP", serif; font-size: 24px; letter-spacing: 0.1em; line-height: 2.05; color: var(--sumi); margin-bottom: 32px; }
  .intro p { font-size: 15px; color: var(--sumi-2); margin-bottom: 20px; letter-spacing: 0.03em; line-height: 2.0; }
  @media (max-width: 860px) { .intro .lead { font-size: 19px; } }
  .pricing { background: var(--washi); }
  .sec-note { font-size: 14px; color: var(--gray-1); letter-spacing: 0.04em; margin-top: -32px; margin-bottom: 40px; line-height: 1.9; }
  .plan-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .plan-card { background: var(--base); border: 1px solid var(--line); border-radius: 12px; padding: 32px 26px; }
  .plan-card.full { grid-column: 1 / -1; }
  .plan-card .pname { font-family: "Noto Serif JP", serif; font-size: 19px; letter-spacing: 0.08em; color: var(--sumi); font-weight: 600; margin-bottom: 4px; }
  .plan-card .ptag { font-size: 11px; letter-spacing: 0.2em; color: var(--hojicha); margin-bottom: 16px; }
  .plan-card .pprice { font-family: "Noto Serif JP", serif; font-size: 30px; font-weight: 600; color: var(--shu); line-height: 1.1; }
  .plan-card .pprice span { font-size: 16px; }
  .plan-card .ptax { font-size: 12px; color: var(--gray-1); margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
  .plan-card .pbody { font-size: 14px; color: var(--sumi-2); line-height: 1.95; letter-spacing: 0.02em; }
  @media (max-width: 860px) { .plan-grid { grid-template-columns: 1fr; } }
  .note-box { margin-top: 22px; padding: 20px 26px; background: var(--washi-2); border-radius: 10px; font-size: 13px; color: var(--gray-1); line-height: 1.95; letter-spacing: 0.02em; }
  .upsell { margin-top: 26px; padding: 28px 30px; background: var(--base); border: 1px solid var(--shu); border-radius: 12px; }
  .upsell .ut { font-family: "Noto Serif JP", serif; font-size: 16px; color: var(--shu); font-weight: 600; letter-spacing: 0.06em; margin-bottom: 12px; }
  .upsell p { font-size: 13.5px; color: var(--sumi-2); line-height: 1.95; }
  .upsell a { color: var(--shu); text-decoration: none; border-bottom: 1px solid var(--shu); }
  .subhead { font-family: "Noto Serif JP", serif; font-size: 20px; letter-spacing: 0.08em; color: var(--sumi); font-weight: 600; margin: 56px 0 8px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
  .subhead:first-of-type { margin-top: 0; }
  .subhead-sub { font-size: 13.5px; color: var(--gray-1); margin-bottom: 24px; letter-spacing: 0.03em; }
  .flowsec { background: var(--base); }
  .process { display: flex; flex-direction: column; gap: 0; }
  .pstep { display: grid; grid-template-columns: 70px 1fr; gap: 24px; padding: 26px 0; border-bottom: 1px solid var(--line); }
  .pstep:last-child { border-bottom: none; }
  .pstep .pnum { font-family: "Noto Serif JP", serif; font-size: 24px; color: var(--hojicha); letter-spacing: 0.05em; }
  .pstep .ptitle { font-family: "Noto Serif JP", serif; font-size: 17px; color: var(--sumi); font-weight: 600; letter-spacing: 0.06em; margin-bottom: 2px; }
  .pstep .ptime { font-size: 12px; color: var(--hojicha); letter-spacing: 0.06em; margin-bottom: 10px; }
  .pstep .pbody { font-size: 14px; color: var(--sumi-2); line-height: 1.95; letter-spacing: 0.02em; }
  @media (max-width: 860px) { .pstep { grid-template-columns: 44px 1fr; gap: 16px; } .pstep .pnum { font-size: 19px; } }
  .feature-sec { background: var(--washi); }
  .stance { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .stance-item { background: var(--base); border: 1px solid var(--line); border-radius: 10px; padding: 26px 28px; }
  .stance-item h4 { font-family: "Noto Serif JP", serif; font-size: 16px; color: var(--sumi); font-weight: 600; letter-spacing: 0.05em; margin-bottom: 12px; }
  .stance-item p { font-size: 13.5px; color: var(--sumi-2); line-height: 1.95; letter-spacing: 0.02em; }
  .stance-item .aside { font-size: 12.5px; color: var(--gray-1); margin-top: 10px; }
  @media (max-width: 860px) { .stance { grid-template-columns: 1fr; } }
  footer { background: var(--bg); color: var(--gray-1); text-align: center; padding: 56px 24px 36px; border-top: 1px solid var(--line); }
  footer .ftag { font-family: "Noto Serif JP", serif; font-size: 16px; letter-spacing: 0.3em; color: var(--shu); margin-bottom: 24px; }
  footer .fnav { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; margin-bottom: 28px; }
  footer .fnav a { font-size: 11px; letter-spacing: 0.12em; color: var(--gray-1); text-decoration: none; }
  footer .fnav a:hover { color: var(--shu); }
  footer .admin { font-size: 10px; letter-spacing: 0.1em; color: var(--gray-2); line-height: 1.9; border-top: 1px solid var(--line); padding-top: 24px; max-width: 540px; margin: 0 auto; }
  ::selection { background: var(--shu); color: #fff; }
  .fade-up { opacity: 0; transform: translateY(24px); transition: opacity 0.9s ease-out, transform 0.9s ease-out; }
  .fade-up.in { opacity: 1; transform: translateY(0); }
  @media (prefers-reduced-motion: reduce) { .fade-up { opacity: 1; transform: none; transition: none; } }

  /* ===== アニメーション無効化 ===== */
  
  /* ヘッダー読みやすく */
  nav .links a { font-size: 14px ; letter-spacing: 0.06em ; color: var(--sumi-2) ; }
  nav .links a:hover { color: var(--sumi) ; }

  /* 本文サイズ底上げ：読みやすく */
  .svc-card .desc, .value .vdesc, .strength .sd, .flow-note, .works-note,
  .mv-note, .origin p,
  .plan-card .pconcept, .service-card-body, .single-card-body, .sec-note,
  .process-content-body, .trans-body {
    font-size: 16px ;
    line-height: 2.0 ;
    color: var(--sumi-2) ;
  }

  /* モバイルメニュー */
  .nav-toggle { display: none; background: none; border: none; font-size: 24px; line-height: 1; color: var(--sumi); cursor: pointer; padding: 4px 6px; }
  @media (max-width: 860px) {
    nav { flex-wrap: wrap; }
    .nav-toggle { display: block; position: absolute; top: 14px; right: 16px; }
    nav .links, nav .cta { display: none; }
    nav.open .links { display: flex; flex-direction: column; width: 100%; gap: 16px; padding: 18px 2px 8px; }
    nav.open .links a { font-size: 16px ; padding: 10px 0; }
    nav.open .cta { display: inline-block; width: fit-content; margin: 6px 2px 6px; }
  }

  /* 読みやすさv2：行長(measure)・余白・編集的な間 */
  .intro .lead, .intro p, .sec-note, .doc p, .doc .pintro, .doc ul { max-width: 720px; }
  .story .inner { max-width: 680px; }
  .sec-title { margin-bottom: 56px; }
  @media (min-width: 861px) {
    section { padding-top: 150px; padding-bottom: 150px; }
  }

  /* 日本語の改行を文節単位で自然に（対応ブラウザ） */
  body { word-break: auto-phrase; line-break: strict; }

/* ==== from services/support.html ==== */

  :root {
    --sumi:#1B2436; --sumi-2:#39435A; --gray-1:#6B7484; --gray-2:#9AA1AE;
    --line:#E3E6EB; --base:#ffffff; --washi:#F7F9FB; --washi-2:#EEF1F5;
    --bg:#EAEEF3; --shu:#16213E; --hojicha:#6B7484;
    --gold:    #C0972F;
    --gold-deep: #8C6920;
    --gold-faint: #F0E4C2;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    background: var(--base); color: var(--sumi);
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
    font-weight: 400; line-height: 2.0; -webkit-font-smoothing: antialiased;
    font-size: 16px; word-break: auto-phrase; line-break: strict;
  }
  .marcellus { font-family: "Noto Serif JP", serif; font-weight: 700; }
  a { color: inherit; }

  /* ====== ナビ ====== */
  nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 32px; background: rgba(255,255,255,0.92);
    backdrop-filter: blur(8px); border-bottom: 1px solid var(--line);
  }
  nav .brand {
    font-family: "Noto Serif JP", serif; font-size: 22px; font-weight: 500;
    letter-spacing: 0.16em; color: var(--sumi); text-decoration: none;
    display: flex; align-items: center; gap: 10px;
  }
  nav .links { display: flex; gap: 24px; }
  nav .links a {
    font-size: 14px; letter-spacing: 0.06em; color: var(--sumi-2);
    text-decoration: none;
  }
  nav .links a:hover, nav .links a.current { color: var(--sumi); }
  nav .links a.current { border-bottom: 1px solid var(--shu); padding-bottom: 2px; }
  nav .cta {
    font-size: 12px; letter-spacing: 0.14em; padding: 8px 18px;
    background: var(--shu); color: #fff ; text-decoration: none; border-radius: 2px;
  }

  /* ====== ページヒーロー ====== */
  .page-hero {
    background: var(--shu); color: var(--washi); text-align: center;
    padding: 168px 24px 96px;
  }
  .page-hero .eyebrow {
    font-family: "Noto Serif JP", serif;
    font-size: 11px;
    letter-spacing: 0.4em;
    color: var(--gold);
    margin-bottom: 18px;
    text-align: center;
  }
  .page-hero h1 {
    font-family: "Noto Serif JP", serif;
    font-size: 36px; font-weight: 600; letter-spacing: 0.12em;
    margin-bottom: 18px; line-height: 1.5;
  }
  @media (max-width: 860px) {
    .page-hero { padding: 132px 22px 72px; }
    .page-hero h1 { font-size: 24px; letter-spacing: 0.08em; }
  }

  /* ====== セクション共通 ====== */
  section { padding: 110px 32px; }
  .inner { max-width: 720px; margin: 0 auto; }
  .sec-title {
    font-family: "Noto Serif JP", serif;
    font-size: 26px; font-weight: 600; letter-spacing: 0.12em;
    color: var(--sumi); text-align: center; margin-bottom: 40px;
  }
  .sec-note { text-align: center; color: var(--sumi-2); margin-bottom: 36px; line-height: 2.1; }
  @media (max-width: 860px) {
    section { padding: 72px 22px; }
    .sec-title { font-size: 21px; margin-bottom: 28px; }
  }

  /* ====== 想い ====== */
  .why { background: var(--washi); }
  .why p { color: var(--sumi-2); line-height: 2.1; margin-bottom: 18px; }
  .why p:last-child { margin-bottom: 0; }

  /* ====== プラン詳細 ====== */
  .plan { background: var(--base); }
  .plan-card {
    background: var(--washi);
    border: 1.5px solid var(--shu);
    border-radius: 12px;
    padding: 44px 36px;
    text-align: center;
  }
  .plan-card .ptag {
    font-size: 11px; letter-spacing: 0.24em;
    color: var(--hojicha); margin-bottom: 10px;
  }
  .plan-card .pname {
    font-family: "Noto Serif JP", serif;
    font-size: 22px; letter-spacing: 0.08em; font-weight: 600;
    color: var(--sumi); margin-bottom: 8px;
  }
  .plan-card .pfor {
    font-size: 13px; color: var(--gray-1); margin-bottom: 22px;
  }
  .plan-card .pprice {
    font-family: "Noto Serif JP", serif;
    font-size: 40px; font-weight: 600; color: var(--shu);
    margin-bottom: 6px; letter-spacing: 0.04em;
  }
  .plan-card .ptax {
    font-size: 12px; color: var(--gray-1); margin-bottom: 30px;
  }
  .plan-card dl {
    text-align: left; max-width: 480px; margin: 0 auto;
    border-top: 1px solid var(--line);
  }
  .plan-card dl > div {
    display: grid; grid-template-columns: 130px 1fr;
    padding: 16px 4px; border-bottom: 1px solid var(--line);
    align-items: center;
  }
  .plan-card dt {
    font-family: "Noto Serif JP", serif;
    font-size: 13px; letter-spacing: 0.12em;
    color: var(--hojicha); font-weight: 500;
  }
  .plan-card dd {
    font-size: 14.5px; color: var(--sumi);
  }
  .plan-card dd small {
    display: block; font-size: 11.5px; color: var(--gray-1);
    margin-top: 3px; letter-spacing: 0.04em;
  }
  @media (max-width: 720px){
    .plan-card { padding: 32px 22px; }
    .plan-card .pprice { font-size: 32px; }
    .plan-card dl > div { grid-template-columns: 100px 1fr; padding: 14px 2px; }
    .plan-card dt { font-size: 12px; }
    .plan-card dd { font-size: 14px; }
  }

  /* ====== 流れ ====== */
  .flow { background: var(--washi-2); }
  .step-list { counter-reset: step; }
  .step-list .step {
    background: var(--base);
    border: 1px solid var(--line);
    padding: 22px 26px;
    margin-bottom: 12px;
    border-radius: 6px;
    display: grid; grid-template-columns: 48px 1fr;
    gap: 18px; align-items: start;
  }
  .step .num {
    font-family: "Noto Serif JP", serif;
    font-size: 22px; color: var(--shu); font-weight: 700;
  }
  .step .ttl {
    font-family: "Noto Serif JP", serif;
    font-size: 17px; color: var(--sumi); margin-bottom: 4px; font-weight: 600;
  }
  .step .dsc {
    font-size: 14px; color: var(--sumi-2); line-height: 1.9;
  }

  /* ====== 運用プラン ====== */
  .ops { background: var(--washi); }
  .ops .subhead {
    font-family: "Noto Serif JP", serif;
    font-size: 18px; color: var(--sumi); font-weight: 600;
    text-align: center; margin-bottom: 8px; letter-spacing: 0.06em;
  }
  .ops .subhead-sub {
    text-align: center; color: var(--gray-1); font-size: 14px; margin-bottom: 32px;
  }
  .op-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  }
  @media (max-width: 720px){ .op-grid { grid-template-columns: 1fr; } }
  .op-base {
    background: var(--base);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 30px 30px;
  }
  .op-base .ptag { font-size: 11px; letter-spacing: 0.2em; color: var(--hojicha); margin-bottom: 8px; }
  .op-base .opname { font-family: "Noto Serif JP", serif; font-size: 18px; color: var(--sumi); font-weight: 600; margin-bottom: 8px; }
  .op-base .opprice { font-family: "Noto Serif JP", serif; font-size: 28px; color: var(--shu); font-weight: 600; margin-bottom: 14px; letter-spacing: 0.04em; }
  .op-base .opprice span { font-size: 14px; color: var(--gray-1); }
  .op-base .opfeat { font-size: 13.5px; color: var(--sumi-2); line-height: 2.0; }
  .op-base .opfeat small { display: block; color: var(--gray-1); font-size: 12px; margin-top: 8px; letter-spacing: 0.02em; }

  /* ====== 注意書き ====== */
  .note-box {
    background: var(--washi-2);
    border-left: 3px solid var(--shu);
    padding: 22px 26px;
    font-size: 13.5px; color: var(--sumi-2); line-height: 2.0;
    margin-top: 32px;
  }

  /* ====== フッター ====== */
  footer { background: var(--bg); color: var(--gray-1); text-align: center; padding: 56px 24px 36px; border-top: 1px solid var(--line); }
  footer .ftag { font-family: "Noto Serif JP", serif; font-size: 16px; letter-spacing: 0.3em; color: var(--shu); margin-bottom: 24px; }
  footer .fnav { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; margin-bottom: 28px; }
  footer .fnav a { font-size: 11px; letter-spacing: 0.12em; color: var(--gray-1); text-decoration: none; }
  footer .fnav a:hover { color: var(--shu); }
  footer .admin { font-size: 10px; letter-spacing: 0.1em; color: var(--gray-2); line-height: 1.9; border-top: 1px solid var(--line); padding-top: 24px; max-width: 540px; margin: 0 auto; }
  ::selection { background: var(--shu); color: #fff; }

  /* モバイルメニュー */
  .nav-toggle { display: none; background: none; border: none; font-size: 24px; line-height: 1; color: var(--sumi); cursor: pointer; padding: 4px 6px; }
  @media (max-width: 860px) {
    nav { padding: 12px 18px; flex-wrap: wrap; }
    .nav-toggle { display: block; position: absolute; top: 14px; right: 16px; }
    nav .links, nav .cta { display: none; }
    nav.open .links { display: flex; flex-direction: column; width: 100%; gap: 16px; padding: 18px 2px 8px; }
    nav.open .links a { font-size: 16px ; padding: 10px 0; }
    nav.open .cta { display: inline-block; width: fit-content; margin: 6px 2px 6px; }
  }

/* ==== from services/vision.html ==== */

  :root {
    --sumi:    #1B2436;
    --sumi-2:  #39435A;
    --gray-1:  #6B7484;
    --gray-2:  #9AA1AE;
    --gray-3:  #C7CDD6;
    --line:    #E3E6EB;
    --base:    #ffffff;
    --washi:   #F7F9FB;
    --washi-2: #EEF1F5;
    --bg:      #EAEEF3;
    --shu:     #16213E;
    --hojicha: #6B7484;
    --gold:    #C0972F;
    --gold-deep: #8C6920;
    --gold-faint: #F0E4C2;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body { background: var(--base); color: var(--sumi); font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif; font-weight: 400; line-height: 1.9; -webkit-font-smoothing: antialiased; }
  .mincho { font-family: "Noto Serif JP", "Hiragino Mincho ProN", serif; }
  .maru { font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif; }
  .marcellus { font-family: "Noto Serif JP", serif; font-weight: 700; }
  a { color: inherit; }
  nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 16px 32px; background: rgba(255,255,255,0.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
  nav .brand { font-family: "Noto Serif JP", serif; font-size: 22px; font-weight: 500; letter-spacing: 0.16em; color: var(--sumi); text-decoration: none; display: flex; align-items: center; gap: 10px; }
  nav .links { display: flex; gap: 24px; }
  nav .links a { font-size: 12px; letter-spacing: 0.14em; color: var(--gray-1); text-decoration: none; transition: color 0.2s; }
  nav .links a:hover { color: var(--sumi); }
  nav .cta { font-size: 12px; letter-spacing: 0.14em; padding: 8px 18px; background: var(--shu); color: #fff ; text-decoration: none; border-radius: 2px; }
  @media (max-width: 860px) { nav { padding: 12px 18px; } nav .links { display: none; } }
  section { padding: 132px 32px; }
  .inner { max-width: 940px; margin: 0 auto; }
  @media (max-width: 860px) { section { padding: 88px 22px; } }
  .sec-title { font-family: "Noto Serif JP", serif; font-size: 31px; font-weight: 500; letter-spacing: 0.12em; color: var(--sumi); margin-bottom: 48px; line-height: 1.7; }
  @media (max-width: 860px) { .sec-title { font-size: 23px; } }
  .page-hero { background: var(--shu); color: var(--washi); padding: 168px 32px 96px; text-align: center; }
  .page-hero .crumb { font-size: 12px; letter-spacing: 0.16em; color: var(--gray-2); margin-bottom: 26px; }
  .page-hero .crumb a { color: var(--gray-2); text-decoration: none; border-bottom: 1px solid rgba(168,168,168,0.4); }
  .page-hero .crumb a:hover { color: var(--washi); }
  .page-hero .eyebrow {
    font-family: "Noto Serif JP", serif;
    font-size: 11px;
    letter-spacing: 0.4em;
    color: var(--gold);
    margin-bottom: 18px;
    text-align: center;
  }
  .page-hero h1 { font-family: "Noto Serif JP", serif; font-size: 40px; font-weight: 600; letter-spacing: 0.1em; color: var(--washi); margin-bottom: 18px; line-height: 1.5; }
  @media (max-width: 860px) { .page-hero { padding: 128px 22px 72px; } .page-hero h1 { font-size: 28px; } }
  .intro { background: var(--base); }
  .intro .lead { font-family: "Noto Serif JP", serif; font-size: 24px; letter-spacing: 0.1em; line-height: 2.05; color: var(--sumi); margin-bottom: 32px; }
  .intro p { font-size: 15px; color: var(--sumi-2); margin-bottom: 20px; letter-spacing: 0.03em; line-height: 2.0; }
  @media (max-width: 860px) { .intro .lead { font-size: 19px; } }
  .pricing { background: var(--washi); }
  .sec-note { font-size: 14px; color: var(--gray-1); letter-spacing: 0.04em; margin-top: -32px; margin-bottom: 40px; line-height: 1.9; }
  /* 統合プラン大カード */
  .flagship { background: var(--base); border: 2px solid var(--shu); border-radius: 14px; overflow: hidden; }
  .flagship-head { background: var(--shu); color: var(--washi); padding: 40px 38px; text-align: center; }
  .flagship-head .fname { font-family: "Noto Serif JP", serif; font-size: 22px; letter-spacing: 0.1em; font-weight: 600; margin-bottom: 12px; }
  .flagship-head .fconcept { font-size: 14px; color: rgba(250,250,248,0.82); line-height: 1.85; margin-bottom: 22px; }
  .flagship-head .fprice { font-family: "Noto Serif JP", serif; font-size: 40px; font-weight: 600; color: var(--washi); line-height: 1.1; }
  .flagship-head .fprice span { font-size: 16px; color: rgba(250,250,248,0.7); }
  .flagship-head .fterm { font-size: 13px; color: rgba(250,250,248,0.7); margin-top: 10px; line-height: 1.7; }
  .flagship-head .fterm small { font-size: 11px; }
  .flagship-body { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
  .phase { padding: 32px 34px; }
  .phase:first-child { border-right: 1px solid var(--line); }
  .phase .ptitle { font-family: "Noto Serif JP", serif; font-size: 17px; color: var(--shu); font-weight: 600; letter-spacing: 0.05em; margin-bottom: 4px; }
  .phase .psub { font-size: 11.5px; color: var(--gray-1); margin-bottom: 18px; }
  .phase ul { list-style: none; display: grid; gap: 13px; }
  .phase li { font-size: 14px; color: var(--sumi); font-weight: 500; line-height: 1.6; padding-left: 18px; position: relative; }
  .phase li::before { content: "・"; color: var(--shu); position: absolute; left: 0; }
  .phase li small { display: block; font-weight: 400; color: var(--gray-1); font-size: 12px; padding-left: 0; }
  @media (max-width: 860px) { .flagship-body { grid-template-columns: 1fr; } .phase:first-child { border-right: none; border-bottom: 1px solid var(--line); } }
  .note-box { margin-top: 22px; padding: 20px 26px; background: var(--washi-2); border-radius: 10px; font-size: 13px; color: var(--gray-1); line-height: 1.95; letter-spacing: 0.02em; }
  .value-box { margin-top: 26px; padding: 28px 30px; background: var(--base); border: 1px solid var(--shu); border-radius: 12px; }
  .value-box .vt { font-family: "Noto Serif JP", serif; font-size: 16px; color: var(--shu); font-weight: 600; letter-spacing: 0.06em; margin-bottom: 14px; }
  .value-box .vlist { font-size: 13.5px; color: var(--sumi-2); line-height: 2.0; }
  .value-box .vtotal { display: block; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--line); font-family: "Noto Serif JP", serif; color: var(--sumi); font-weight: 600; }
  .subhead { font-family: "Noto Serif JP", serif; font-size: 20px; letter-spacing: 0.08em; color: var(--sumi); font-weight: 600; margin: 56px 0 8px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
  .subhead-sub { font-size: 13.5px; color: var(--gray-1); margin-bottom: 24px; letter-spacing: 0.03em; }
  .flowsec { background: var(--base); }
  .process { display: flex; flex-direction: column; gap: 0; }
  .pstep { display: grid; grid-template-columns: 88px 1fr; gap: 24px; padding: 26px 0; border-bottom: 1px solid var(--line); }
  .pstep:last-child { border-bottom: none; }
  .pstep .pnum { font-family: "Noto Serif JP", serif; font-size: 24px; color: var(--hojicha); letter-spacing: 0.05em; }
  .pstep .ptitle { font-family: "Noto Serif JP", serif; font-size: 16px; color: var(--sumi); font-weight: 600; letter-spacing: 0.05em; margin-bottom: 2px; line-height: 1.6; }
  .pstep .ptime { font-size: 12px; color: var(--shu); letter-spacing: 0.06em; margin-bottom: 10px; }
  .pstep .pbody { font-size: 14px; color: var(--sumi-2); line-height: 1.95; letter-spacing: 0.02em; }
  @media (max-width: 860px) { .pstep { grid-template-columns: 50px 1fr; gap: 14px; } .pstep .pnum { font-size: 19px; } }
  .feature-sec { background: var(--washi); }
  .stance { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .stance-item { background: var(--base); border: 1px solid var(--line); border-radius: 10px; padding: 26px 28px; }
  .stance-item h4 { font-family: "Noto Serif JP", serif; font-size: 16px; color: var(--sumi); font-weight: 600; letter-spacing: 0.05em; margin-bottom: 12px; }
  .stance-item p { font-size: 13.5px; color: var(--sumi-2); line-height: 1.95; letter-spacing: 0.02em; }
  .stance-item a { color: var(--shu); text-decoration: none; border-bottom: 1px solid var(--shu); }
  @media (max-width: 860px) { .stance { grid-template-columns: 1fr; } }
  footer { background: var(--bg); color: var(--gray-1); text-align: center; padding: 56px 24px 36px; border-top: 1px solid var(--line); }
  footer .ftag { font-family: "Noto Serif JP", serif; font-size: 16px; letter-spacing: 0.3em; color: var(--shu); margin-bottom: 24px; }
  footer .fnav { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; margin-bottom: 28px; }
  footer .fnav a { font-size: 11px; letter-spacing: 0.12em; color: var(--gray-1); text-decoration: none; }
  footer .fnav a:hover { color: var(--shu); }
  footer .admin { font-size: 10px; letter-spacing: 0.1em; color: var(--gray-2); line-height: 1.9; border-top: 1px solid var(--line); padding-top: 24px; max-width: 540px; margin: 0 auto; }
  ::selection { background: var(--shu); color: #fff; }
  .fade-up { opacity: 0; transform: translateY(24px); transition: opacity 0.9s ease-out, transform 0.9s ease-out; }
  .fade-up.in { opacity: 1; transform: translateY(0); }
  @media (prefers-reduced-motion: reduce) { .fade-up { opacity: 1; transform: none; transition: none; } }

  /* ===== アニメーション無効化 ===== */
  
  /* ヘッダー読みやすく */
  nav .links a { font-size: 14px ; letter-spacing: 0.06em ; color: var(--sumi-2) ; }
  nav .links a:hover { color: var(--sumi) ; }

  /* 本文サイズ底上げ：読みやすく */
  .svc-card .desc, .value .vdesc, .strength .sd, .flow-note, .works-note,
  .mv-note, .origin p,
  .plan-card .pconcept, .service-card-body, .single-card-body, .sec-note,
  .process-content-body, .trans-body {
    font-size: 16px ;
    line-height: 2.0 ;
    color: var(--sumi-2) ;
  }

  /* モバイルメニュー */
  .nav-toggle { display: none; background: none; border: none; font-size: 24px; line-height: 1; color: var(--sumi); cursor: pointer; padding: 4px 6px; }
  @media (max-width: 860px) {
    nav { flex-wrap: wrap; }
    .nav-toggle { display: block; position: absolute; top: 14px; right: 16px; }
    nav .links, nav .cta { display: none; }
    nav.open .links { display: flex; flex-direction: column; width: 100%; gap: 16px; padding: 18px 2px 8px; }
    nav.open .links a { font-size: 16px ; padding: 10px 0; }
    nav.open .cta { display: inline-block; width: fit-content; margin: 6px 2px 6px; }
  }

  /* 読みやすさv2：行長(measure)・余白・編集的な間 */
  .intro .lead, .intro p, .sec-note, .doc p, .doc .pintro, .doc ul { max-width: 720px; }
  .story .inner { max-width: 680px; }
  .sec-title { margin-bottom: 56px; }
  @media (min-width: 861px) {
    section { padding-top: 150px; padding-bottom: 150px; }
  }

  /* 日本語の改行を文節単位で自然に（対応ブラウザ） */
  body { word-break: auto-phrase; line-break: strict; }

/* ==== from works/art.html ==== */

  :root {
    --sumi:    #1B2436;
    --sumi-2:  #39435A;
    --gray-1:  #6B7484;
    --gray-2:  #9AA1AE;
    --gray-3:  #C7CDD6;
    --line:    #E3E6EB;
    --base:    #ffffff;
    --washi:   #F7F9FB;
    --washi-2: #EEF1F5;
    --bg:      #EAEEF3;
    --shu:     #16213E;
    --hojicha: #6B7484;
    --gold:    #C0972F;
    --gold-deep: #8C6920;
    --gold-faint: #F0E4C2;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body {
    background: var(--base); color: var(--sumi);
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
    font-weight: 400; line-height: 1.9; -webkit-font-smoothing: antialiased;
  }
  .mincho { font-family: "Noto Serif JP", "Hiragino Mincho ProN", serif; }
  .maru { font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif; }
  .marcellus { font-family: "Noto Serif JP", serif; font-weight: 700; }
  a { color: inherit; }
  nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 32px; background: rgba(255,255,255,0.92);
    backdrop-filter: blur(8px); border-bottom: 1px solid var(--line);
  }
  nav .brand {
    font-family: "Noto Serif JP", serif; font-size: 22px; font-weight: 500;
    letter-spacing: 0.16em; color: var(--sumi); text-decoration: none;
    display: flex; align-items: center; gap: 10px;
  }
  nav .links { display: flex; gap: 24px; }
  nav .links a { font-size: 12px; letter-spacing: 0.14em; color: var(--gray-1); text-decoration: none; transition: color 0.2s; }
  nav .links a:hover { color: var(--sumi); }
  nav .cta { font-size: 12px; letter-spacing: 0.14em; padding: 8px 18px; background: var(--shu); color: #fff ; text-decoration: none; border-radius: 2px; }
  @media (max-width: 860px) { nav { padding: 12px 18px; } nav .links { display: none; } }
  section { padding: 132px 32px; }
  .inner { max-width: 940px; margin: 0 auto; }
  @media (max-width: 860px) { section { padding: 88px 22px; } }
  .sec-title { font-family: "Noto Serif JP", serif; font-size: 31px; font-weight: 500; letter-spacing: 0.12em; color: var(--sumi); margin-bottom: 48px; line-height: 1.7; }
  @media (max-width: 860px) { .sec-title { font-size: 23px; } }
  .page-hero { background: var(--shu); color: var(--washi); padding: 168px 32px 96px; text-align: center; }
  .page-hero .crumb { font-size: 12px; letter-spacing: 0.16em; color: var(--gray-2); margin-bottom: 26px; }
  .page-hero .crumb a { color: var(--gray-2); text-decoration: none; border-bottom: 1px solid rgba(168,168,168,0.4); }
  .page-hero .crumb a:hover { color: var(--washi); }
  .page-hero .eyebrow {
    font-family: "Noto Serif JP", serif;
    font-size: 11px;
    letter-spacing: 0.4em;
    color: var(--gold);
    margin-bottom: 18px;
    text-align: center;
  }
  .page-hero h1 { font-family: "Noto Serif JP", serif; font-size: 40px; font-weight: 600; letter-spacing: 0.1em; color: var(--washi); margin-bottom: 18px; line-height: 1.5; }
  @media (max-width: 860px) { .page-hero { padding: 128px 22px 72px; } .page-hero h1 { font-size: 28px; } }
  .intro { background: var(--base); }
  .intro .lead { font-family: "Noto Serif JP", serif; font-size: 24px; letter-spacing: 0.1em; line-height: 2.05; color: var(--sumi); margin-bottom: 32px; }
  .intro p { font-size: 15px; color: var(--sumi-2); margin-bottom: 20px; letter-spacing: 0.03em; line-height: 2.0; }
  @media (max-width: 860px) { .intro .lead { font-size: 19px; } }
  .sec-note { font-size: 14px; color: var(--gray-1); letter-spacing: 0.04em; margin-top: -32px; margin-bottom: 40px; line-height: 1.9; }

  /* ===== ギャラリー（準備中プレースホルダ） ===== */
  .gallerysec { background: var(--washi); }
  .gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .gallery-tile {
    position: relative; aspect-ratio: 1 / 1; background: var(--washi);
    border: 1px solid var(--line); border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
  }
  .gallery-tile .tlabel { font-size: 12px; letter-spacing: 0.18em; color: var(--gray-2); }
  .gallery-tile { overflow: hidden; }
  .gallery-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
  @media (max-width: 768px) { .gallery { grid-template-columns: 1fr 1fr; } }

  /* ===== Instagram 導線 ===== */
  .ig-box { margin-top: 40px; padding: 28px 30px; background: var(--base); border: 1px solid var(--line); border-radius: 12px; text-align: center; }
  .ig-box .igt { font-family: "Noto Serif JP", serif; font-size: 16px; color: var(--sumi); font-weight: 600; letter-spacing: 0.06em; margin-bottom: 10px; }
  .ig-box p { font-size: 14px; color: var(--sumi-2); line-height: 1.95; letter-spacing: 0.02em; }
  .ig-box a { color: var(--shu); text-decoration: none; border-bottom: 1px solid var(--shu); font-weight: 500; }

  footer { background: var(--bg); color: var(--gray-1); text-align: center; padding: 56px 24px 36px; border-top: 1px solid var(--line); }
  footer .ftag { font-family: "Noto Serif JP", serif; font-size: 16px; letter-spacing: 0.3em; color: var(--shu); margin-bottom: 24px; }
  footer .fnav { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; margin-bottom: 28px; }
  footer .fnav a { font-size: 11px; letter-spacing: 0.12em; color: var(--gray-1); text-decoration: none; }
  footer .fnav a:hover { color: var(--shu); }
  footer .admin { font-size: 10px; letter-spacing: 0.1em; color: var(--gray-2); line-height: 1.9; border-top: 1px solid var(--line); padding-top: 24px; max-width: 540px; margin: 0 auto; }
  ::selection { background: var(--shu); color: #fff; }
  .fade-up { opacity: 0; transform: translateY(24px); transition: opacity 0.9s ease-out, transform 0.9s ease-out; }
  .fade-up.in { opacity: 1; transform: translateY(0); }
  @media (prefers-reduced-motion: reduce) { .fade-up { opacity: 1; transform: none; transition: none; } }

  /* ===== アニメーション無効化 ===== */
  
  /* ヘッダー読みやすく */
  nav .links a { font-size: 14px ; letter-spacing: 0.06em ; color: var(--sumi-2) ; }
  nav .links a:hover { color: var(--sumi) ; }

  /* 本文サイズ底上げ：読みやすく */
  .svc-card .desc, .value .vdesc, .strength .sd, .flow-note, .works-note,
  .mv-note, .origin p,
  .plan-card .pconcept, .service-card-body, .single-card-body, .sec-note,
  .process-content-body, .trans-body, .ig-box p {
    font-size: 16px ;
    line-height: 2.0 ;
    color: var(--sumi-2) ;
  }

  /* モバイルメニュー */
  .nav-toggle { display: none; background: none; border: none; font-size: 24px; line-height: 1; color: var(--sumi); cursor: pointer; padding: 4px 6px; }
  @media (max-width: 860px) {
    nav { flex-wrap: wrap; }
    .nav-toggle { display: block; position: absolute; top: 14px; right: 16px; }
    nav .links, nav .cta { display: none; }
    nav.open .links { display: flex; flex-direction: column; width: 100%; gap: 16px; padding: 18px 2px 8px; }
    nav.open .links a { font-size: 16px ; padding: 10px 0; }
    nav.open .cta { display: inline-block; width: fit-content; margin: 6px 2px 6px; }
  }

  /* 読みやすさv2：行長(measure)・余白・編集的な間 */
  .intro .lead, .intro p, .sec-note, .doc p, .doc .pintro, .doc ul { max-width: 720px; }
  .story .inner { max-width: 680px; }
  .sec-title { margin-bottom: 56px; }
  @media (min-width: 861px) {
    section { padding-top: 150px; padding-bottom: 150px; }
  }

  /* 日本語の改行を文節単位で自然に（対応ブラウザ） */
  body { word-break: auto-phrase; line-break: strict; }

/* ==== from works/index.html ==== */

  :root {
    --sumi:#1B2436; --sumi-2:#39435A; --gray-1:#6B7484; --gray-2:#9AA1AE;
    --line:#E3E6EB; --base:#ffffff; --washi:#F7F9FB; --washi-2:#EEF1F5;
    --bg:#EAEEF3; --shu:#16213E; --hojicha:#6B7484;
    --gold:    #C0972F;
    --gold-deep: #8C6920;
    --gold-faint: #F0E4C2;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    background: var(--base); color: var(--sumi);
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
    font-weight: 400; line-height: 1.9; -webkit-font-smoothing: antialiased;
    word-break: auto-phrase; line-break: strict;
  }
  .marcellus { font-family: "Noto Serif JP", serif; font-weight: 700; }
  a { color: inherit; }

  /* ====== ナビ ====== */
  nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 32px; background: rgba(255,255,255,0.92);
    backdrop-filter: blur(8px); border-bottom: 1px solid var(--line);
  }
  nav .brand {
    font-family: "Noto Serif JP", serif; font-size: 22px; font-weight: 500;
    letter-spacing: 0.16em; color: var(--sumi); text-decoration: none;
    display: flex; align-items: center; gap: 10px;
  }
  nav .links { display: flex; gap: 24px; }
  nav .links a {
    font-size: 14px; letter-spacing: 0.06em; color: var(--sumi-2);
    text-decoration: none;
  }
  nav .links a:hover, nav .links a.current { color: var(--sumi); }
  nav .links a.current { border-bottom: 1px solid var(--shu); padding-bottom: 2px; }
  nav .cta {
    font-size: 12px; letter-spacing: 0.14em; padding: 8px 18px;
    background: var(--shu); color: #fff ; text-decoration: none; border-radius: 2px;
  }

  /* ====== ページヒーロー ====== */
  .page-hero {
    background: var(--shu); color: var(--washi); text-align: center;
    padding: 168px 24px 96px;
  }
  .page-hero .eyebrow {
    font-family: "Noto Serif JP", serif;
    font-size: 11px;
    letter-spacing: 0.4em;
    color: var(--gold);
    margin-bottom: 18px;
    text-align: center;
  }
  .page-hero h1 {
    font-family: "Noto Serif JP", serif;
    font-size: 40px; font-weight: 600; letter-spacing: 0.14em;
    margin-bottom: 18px;
  }
  @media (max-width: 860px) {
    .page-hero { padding: 132px 22px 72px; }
    .page-hero h1 { font-size: 28px; }
  }

  /* ====== セクション共通 ====== */
  section { padding: 110px 32px; }
  .inner { max-width: 1040px; margin: 0 auto; }
  @media (max-width: 860px) { section { padding: 72px 22px; } }

  .sec-title {
    font-family: "Noto Serif JP", serif;
    font-size: 26px; font-weight: 600; letter-spacing: 0.12em;
    color: var(--sumi); text-align: center; margin-bottom: 16px;
  }
  .sec-note { text-align: center; color: var(--sumi-2); margin-bottom: 56px; line-height: 2.1; }
  @media (max-width: 860px) {
    .sec-title { font-size: 21px; }
  }

  /* ====== クライアントワーク ====== */
  .client-works { background: var(--base); }
  .work-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
  @media (max-width: 860px) { .work-grid { grid-template-columns: 1fr; gap: 20px; } }

  a.work-card {
    text-decoration: none;
    color: inherit;
    background: var(--washi);
    border: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    transition: border-color .2s;
  }
  a.work-card:hover { border-color: var(--shu); }
  .work-card .thumb {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--washi-2);
  }
  .work-card .thumb img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .4s ease;
  }
  a.work-card:hover .thumb img { transform: scale(1.04); }
  .work-card .meta {
    padding: 22px 24px 24px;
    display: flex;
    flex-direction: column;
    flex: 1;
  }
  .work-card .cname {
    font-family: "Noto Serif JP", serif;
    font-size: 20px; letter-spacing: 0.08em;
    color: var(--sumi); margin-bottom: 8px; font-weight: 500;
  }
  .work-card .cdesc {
    font-size: 13.5px; color: var(--gray-1);
    line-height: 1.9; flex: 1;
  }
  .work-card .more {
    display: inline-block; margin-top: 14px;
    font-size: 12px; letter-spacing: 0.1em; color: var(--shu);
  }

  /* ====== もうひとつの仕事（アート） ====== */
  .another { background: var(--washi-2); }
  .another-inner { max-width: 760px; margin: 0 auto; text-align: center; }
  .another .label {
    font-family: "Noto Serif JP", serif;
    font-size: 12px; letter-spacing: 0.3em; color: var(--hojicha);
    margin-bottom: 18px;
  }
  .another h2 {
    font-family: "Noto Serif JP", serif;
    font-size: 26px; letter-spacing: 0.12em; color: var(--sumi);
    margin-bottom: 22px; font-weight: 600;
  }
  .another p {
    color: var(--sumi-2); line-height: 2.1; margin-bottom: 28px;
  }
  .another .art-cta {
    display: inline-block;
    padding: 14px 32px;
    border: 1px solid var(--shu);
    color: var(--shu);
    text-decoration: none;
    font-family: "Noto Serif JP", serif;
    font-size: 13px; letter-spacing: 0.14em;
    transition: background .2s, color .2s;
  }
  .another .art-cta:hover { background: var(--shu); color: var(--washi); }

  /* ====== 準備中 ====== */
  .prep { background: var(--washi); text-align: center; }
  .prep .prep-label { font-family: "Noto Serif JP", serif; font-size: 12px; letter-spacing: 0.3em; color: var(--gold-deep); margin-bottom: 20px; }
  .prep .prep-title { font-family: "Noto Serif JP", serif; font-size: 30px; font-weight: 500; letter-spacing: 0.12em; color: var(--shu); margin-bottom: 24px; }
  @media (max-width: 860px) { .prep .prep-title { font-size: 23px; } }

  /* ====== フッター ====== */
  footer { background: var(--bg); color: var(--gray-1); text-align: center; padding: 56px 24px 36px; border-top: 1px solid var(--line); }
  footer .ftag { font-family: "Noto Serif JP", serif; font-size: 16px; letter-spacing: 0.3em; color: var(--shu); margin-bottom: 24px; }
  footer .fnav { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; margin-bottom: 28px; }
  footer .fnav a { font-size: 11px; letter-spacing: 0.12em; color: var(--gray-1); text-decoration: none; }
  footer .fnav a:hover { color: var(--shu); }
  footer .admin { font-size: 10px; letter-spacing: 0.1em; color: var(--gray-2); line-height: 1.9; border-top: 1px solid var(--line); padding-top: 24px; max-width: 540px; margin: 0 auto; }
  ::selection { background: var(--shu); color: #fff; }

  /* モバイルメニュー */
  .nav-toggle { display: none; background: none; border: none; font-size: 24px; line-height: 1; color: var(--sumi); cursor: pointer; padding: 4px 6px; }
  @media (max-width: 860px) {
    nav { padding: 12px 18px; flex-wrap: wrap; }
    .nav-toggle { display: block; position: absolute; top: 14px; right: 16px; }
    nav .links, nav .cta { display: none; }
    nav.open .links { display: flex; flex-direction: column; width: 100%; gap: 16px; padding: 18px 2px 8px; }
    nav.open .links a { font-size: 16px ; padding: 10px 0; }
    nav.open .cta { display: inline-block; width: fit-content; margin: 6px 2px 6px; }
  }

/* ==== from works/logo.html ==== */

  :root {
    --sumi:    #1B2436;
    --sumi-2:  #39435A;
    --gray-1:  #6B7484;
    --gray-2:  #9AA1AE;
    --gray-3:  #C7CDD6;
    --line:    #E3E6EB;
    --base:    #ffffff;
    --washi:   #F7F9FB;
    --washi-2: #EEF1F5;
    --bg:      #EAEEF3;
    --shu:     #16213E;
    --hojicha: #6B7484;
    --gold:    #C0972F;
    --gold-deep: #8C6920;
    --gold-faint: #F0E4C2;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body {
    background: var(--base); color: var(--sumi);
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
    font-weight: 400; line-height: 1.9; -webkit-font-smoothing: antialiased;
  }
  .mincho { font-family: "Noto Serif JP", "Hiragino Mincho ProN", serif; }
  .maru { font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif; }
  .marcellus { font-family: "Noto Serif JP", serif; font-weight: 700; }
  a { color: inherit; }
  nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 32px; background: rgba(255,255,255,0.92);
    backdrop-filter: blur(8px); border-bottom: 1px solid var(--line);
  }
  nav .brand {
    font-family: "Noto Serif JP", serif; font-size: 22px; font-weight: 500;
    letter-spacing: 0.16em; color: var(--sumi); text-decoration: none;
    display: flex; align-items: center; gap: 10px;
  }
  nav .links { display: flex; gap: 24px; }
  nav .links a { font-size: 12px; letter-spacing: 0.14em; color: var(--gray-1); text-decoration: none; transition: color 0.2s; }
  nav .links a:hover { color: var(--sumi); }
  nav .cta { font-size: 12px; letter-spacing: 0.14em; padding: 8px 18px; background: var(--shu); color: #fff ; text-decoration: none; border-radius: 2px; }
  @media (max-width: 860px) { nav { padding: 12px 18px; } nav .links { display: none; } }
  section { padding: 132px 32px; }
  .inner { max-width: 940px; margin: 0 auto; }
  @media (max-width: 860px) { section { padding: 88px 22px; } }
  .sec-title { font-family: "Noto Serif JP", serif; font-size: 31px; font-weight: 500; letter-spacing: 0.12em; color: var(--sumi); margin-bottom: 48px; line-height: 1.7; }
  @media (max-width: 860px) { .sec-title { font-size: 23px; } }
  .page-hero { background: var(--shu); color: var(--washi); padding: 168px 32px 96px; text-align: center; }
  .page-hero .crumb { font-size: 12px; letter-spacing: 0.16em; color: var(--gray-2); margin-bottom: 26px; }
  .page-hero .crumb a { color: var(--gray-2); text-decoration: none; border-bottom: 1px solid rgba(168,168,168,0.4); }
  .page-hero .crumb a:hover { color: var(--washi); }
  .page-hero .eyebrow {
    font-family: "Noto Serif JP", serif;
    font-size: 11px;
    letter-spacing: 0.4em;
    color: var(--gold);
    margin-bottom: 18px;
    text-align: center;
  }
  .page-hero h1 { font-family: "Noto Serif JP", serif; font-size: 40px; font-weight: 600; letter-spacing: 0.1em; color: var(--washi); margin-bottom: 18px; line-height: 1.5; }
  @media (max-width: 860px) { .page-hero { padding: 128px 22px 72px; } .page-hero h1 { font-size: 28px; } }
  .intro { background: var(--base); }
  .intro .lead { font-family: "Noto Serif JP", serif; font-size: 24px; letter-spacing: 0.1em; line-height: 2.05; color: var(--sumi); margin-bottom: 32px; }
  .intro p { font-size: 15px; color: var(--sumi-2); margin-bottom: 20px; letter-spacing: 0.03em; line-height: 2.0; }
  @media (max-width: 860px) { .intro .lead { font-size: 19px; } }
  .sec-note { font-size: 14px; color: var(--gray-1); letter-spacing: 0.04em; margin-top: -32px; margin-bottom: 40px; line-height: 1.9; }

  /* ===== ギャラリー（準備中プレースホルダ） ===== */
  .gallerysec { background: var(--washi); }
  .gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .gallery-tile {
    position: relative; aspect-ratio: 1 / 1; background: var(--washi);
    border: 1px solid var(--line); border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
  }
  .gallery-tile .tlabel { font-size: 12px; letter-spacing: 0.18em; color: var(--gray-2); }
  @media (max-width: 768px) { .gallery { grid-template-columns: 1fr; } }

  /* ===== Instagram 導線 ===== */
  .ig-box { margin-top: 40px; padding: 28px 30px; background: var(--base); border: 1px solid var(--line); border-radius: 12px; text-align: center; }
  .ig-box .igt { font-family: "Noto Serif JP", serif; font-size: 16px; color: var(--sumi); font-weight: 600; letter-spacing: 0.06em; margin-bottom: 10px; }
  .ig-box p { font-size: 14px; color: var(--sumi-2); line-height: 1.95; letter-spacing: 0.02em; }
  .ig-box a { color: var(--shu); text-decoration: none; border-bottom: 1px solid var(--shu); font-weight: 500; }

  footer { background: var(--bg); color: var(--gray-1); text-align: center; padding: 56px 24px 36px; border-top: 1px solid var(--line); }
  footer .ftag { font-family: "Noto Serif JP", serif; font-size: 16px; letter-spacing: 0.3em; color: var(--shu); margin-bottom: 24px; }
  footer .fnav { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; margin-bottom: 28px; }
  footer .fnav a { font-size: 11px; letter-spacing: 0.12em; color: var(--gray-1); text-decoration: none; }
  footer .fnav a:hover { color: var(--shu); }
  footer .admin { font-size: 10px; letter-spacing: 0.1em; color: var(--gray-2); line-height: 1.9; border-top: 1px solid var(--line); padding-top: 24px; max-width: 540px; margin: 0 auto; }
  ::selection { background: var(--shu); color: #fff; }
  .fade-up { opacity: 0; transform: translateY(24px); transition: opacity 0.9s ease-out, transform 0.9s ease-out; }
  .fade-up.in { opacity: 1; transform: translateY(0); }
  @media (prefers-reduced-motion: reduce) { .fade-up { opacity: 1; transform: none; transition: none; } }

  /* ===== アニメーション無効化 ===== */
  
  /* ヘッダー読みやすく */
  nav .links a { font-size: 14px ; letter-spacing: 0.06em ; color: var(--sumi-2) ; }
  nav .links a:hover { color: var(--sumi) ; }

  /* 本文サイズ底上げ：読みやすく */
  .svc-card .desc, .value .vdesc, .strength .sd, .flow-note, .works-note,
  .mv-note, .origin p,
  .plan-card .pconcept, .service-card-body, .single-card-body, .sec-note,
  .process-content-body, .trans-body, .ig-box p {
    font-size: 16px ;
    line-height: 2.0 ;
    color: var(--sumi-2) ;
  }

  /* モバイルメニュー */
  .nav-toggle { display: none; background: none; border: none; font-size: 24px; line-height: 1; color: var(--sumi); cursor: pointer; padding: 4px 6px; }
  @media (max-width: 860px) {
    nav { flex-wrap: wrap; }
    .nav-toggle { display: block; position: absolute; top: 14px; right: 16px; }
    nav .links, nav .cta { display: none; }
    nav.open .links { display: flex; flex-direction: column; width: 100%; gap: 16px; padding: 18px 2px 8px; }
    nav.open .links a { font-size: 16px ; padding: 10px 0; }
    nav.open .cta { display: inline-block; width: fit-content; margin: 6px 2px 6px; }
  }

  /* 読みやすさv2：行長(measure)・余白・編集的な間 */
  .intro .lead, .intro p, .sec-note, .doc p, .doc .pintro, .doc ul { max-width: 720px; }
  .story .inner { max-width: 680px; }
  .sec-title { margin-bottom: 56px; }
  @media (min-width: 861px) {
    section { padding-top: 150px; padding-bottom: 150px; }
  }

  /* 日本語の改行を文節単位で自然に（対応ブラウザ） */
  body { word-break: auto-phrase; line-break: strict; }

/* ==== from works/photo.html ==== */

  :root {
    --sumi:    #1B2436;
    --sumi-2:  #39435A;
    --gray-1:  #6B7484;
    --gray-2:  #9AA1AE;
    --gray-3:  #C7CDD6;
    --line:    #E3E6EB;
    --base:    #ffffff;
    --washi:   #F7F9FB;
    --washi-2: #EEF1F5;
    --bg:      #EAEEF3;
    --shu:     #16213E;
    --hojicha: #6B7484;
    --gold:    #C0972F;
    --gold-deep: #8C6920;
    --gold-faint: #F0E4C2;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body {
    background: var(--base); color: var(--sumi);
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
    font-weight: 400; line-height: 1.9; -webkit-font-smoothing: antialiased;
  }
  .mincho { font-family: "Noto Serif JP", "Hiragino Mincho ProN", serif; }
  .maru { font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif; }
  .marcellus { font-family: "Noto Serif JP", serif; font-weight: 700; }
  a { color: inherit; }
  nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 32px; background: rgba(255,255,255,0.92);
    backdrop-filter: blur(8px); border-bottom: 1px solid var(--line);
  }
  nav .brand {
    font-family: "Noto Serif JP", serif; font-size: 22px; font-weight: 500;
    letter-spacing: 0.16em; color: var(--sumi); text-decoration: none;
    display: flex; align-items: center; gap: 10px;
  }
  nav .links { display: flex; gap: 24px; }
  nav .links a { font-size: 12px; letter-spacing: 0.14em; color: var(--gray-1); text-decoration: none; transition: color 0.2s; }
  nav .links a:hover { color: var(--sumi); }
  nav .cta { font-size: 12px; letter-spacing: 0.14em; padding: 8px 18px; background: var(--shu); color: #fff ; text-decoration: none; border-radius: 2px; }
  @media (max-width: 860px) { nav { padding: 12px 18px; } nav .links { display: none; } }
  section { padding: 132px 32px; }
  .inner { max-width: 940px; margin: 0 auto; }
  @media (max-width: 860px) { section { padding: 88px 22px; } }
  .sec-title { font-family: "Noto Serif JP", serif; font-size: 31px; font-weight: 500; letter-spacing: 0.12em; color: var(--sumi); margin-bottom: 48px; line-height: 1.7; }
  @media (max-width: 860px) { .sec-title { font-size: 23px; } }
  .page-hero { background: var(--shu); color: var(--washi); padding: 168px 32px 96px; text-align: center; }
  .page-hero .crumb { font-size: 12px; letter-spacing: 0.16em; color: var(--gray-2); margin-bottom: 26px; }
  .page-hero .crumb a { color: var(--gray-2); text-decoration: none; border-bottom: 1px solid rgba(168,168,168,0.4); }
  .page-hero .crumb a:hover { color: var(--washi); }
  .page-hero .eyebrow {
    font-family: "Noto Serif JP", serif;
    font-size: 11px;
    letter-spacing: 0.4em;
    color: var(--gold);
    margin-bottom: 18px;
    text-align: center;
  }
  .page-hero h1 { font-family: "Noto Serif JP", serif; font-size: 40px; font-weight: 600; letter-spacing: 0.1em; color: var(--washi); margin-bottom: 18px; line-height: 1.5; }
  @media (max-width: 860px) { .page-hero { padding: 128px 22px 72px; } .page-hero h1 { font-size: 28px; } }
  .intro { background: var(--base); }
  .intro .lead { font-family: "Noto Serif JP", serif; font-size: 24px; letter-spacing: 0.1em; line-height: 2.05; color: var(--sumi); margin-bottom: 32px; }
  .intro p { font-size: 15px; color: var(--sumi-2); margin-bottom: 20px; letter-spacing: 0.03em; line-height: 2.0; }
  @media (max-width: 860px) { .intro .lead { font-size: 19px; } }
  .sec-note { font-size: 14px; color: var(--gray-1); letter-spacing: 0.04em; margin-top: -32px; margin-bottom: 40px; line-height: 1.9; }

  /* ===== ギャラリー（準備中プレースホルダ） ===== */
  .gallerysec { background: var(--washi); }
  .gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .gallery-tile {
    position: relative; aspect-ratio: 1 / 1; background: var(--washi);
    border: 1px solid var(--line); border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
  }
  .gallery-tile .tlabel { font-size: 12px; letter-spacing: 0.18em; color: var(--gray-2); }
  .gallery-tile { overflow: hidden; }
  .gallery-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
  @media (max-width: 768px) { .gallery { grid-template-columns: 1fr 1fr; } }

  /* ===== Instagram 導線 ===== */
  .ig-box { margin-top: 40px; padding: 28px 30px; background: var(--base); border: 1px solid var(--line); border-radius: 12px; text-align: center; }
  .ig-box .igt { font-family: "Noto Serif JP", serif; font-size: 16px; color: var(--sumi); font-weight: 600; letter-spacing: 0.06em; margin-bottom: 10px; }
  .ig-box p { font-size: 14px; color: var(--sumi-2); line-height: 1.95; letter-spacing: 0.02em; }
  .ig-box a { color: var(--shu); text-decoration: none; border-bottom: 1px solid var(--shu); font-weight: 500; }

  footer { background: var(--bg); color: var(--gray-1); text-align: center; padding: 56px 24px 36px; border-top: 1px solid var(--line); }
  footer .ftag { font-family: "Noto Serif JP", serif; font-size: 16px; letter-spacing: 0.3em; color: var(--shu); margin-bottom: 24px; }
  footer .fnav { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; margin-bottom: 28px; }
  footer .fnav a { font-size: 11px; letter-spacing: 0.12em; color: var(--gray-1); text-decoration: none; }
  footer .fnav a:hover { color: var(--shu); }
  footer .admin { font-size: 10px; letter-spacing: 0.1em; color: var(--gray-2); line-height: 1.9; border-top: 1px solid var(--line); padding-top: 24px; max-width: 540px; margin: 0 auto; }
  ::selection { background: var(--shu); color: #fff; }
  .fade-up { opacity: 0; transform: translateY(24px); transition: opacity 0.9s ease-out, transform 0.9s ease-out; }
  .fade-up.in { opacity: 1; transform: translateY(0); }
  @media (prefers-reduced-motion: reduce) { .fade-up { opacity: 1; transform: none; transition: none; } }

  /* ===== アニメーション無効化 ===== */
  
  /* ヘッダー読みやすく */
  nav .links a { font-size: 14px ; letter-spacing: 0.06em ; color: var(--sumi-2) ; }
  nav .links a:hover { color: var(--sumi) ; }

  /* 本文サイズ底上げ：読みやすく */
  .svc-card .desc, .value .vdesc, .strength .sd, .flow-note, .works-note,
  .mv-note, .origin p,
  .plan-card .pconcept, .service-card-body, .single-card-body, .sec-note,
  .process-content-body, .trans-body, .ig-box p {
    font-size: 16px ;
    line-height: 2.0 ;
    color: var(--sumi-2) ;
  }

  /* モバイルメニュー */
  .nav-toggle { display: none; background: none; border: none; font-size: 24px; line-height: 1; color: var(--sumi); cursor: pointer; padding: 4px 6px; }
  @media (max-width: 860px) {
    nav { flex-wrap: wrap; }
    .nav-toggle { display: block; position: absolute; top: 14px; right: 16px; }
    nav .links, nav .cta { display: none; }
    nav.open .links { display: flex; flex-direction: column; width: 100%; gap: 16px; padding: 18px 2px 8px; }
    nav.open .links a { font-size: 16px ; padding: 10px 0; }
    nav.open .cta { display: inline-block; width: fit-content; margin: 6px 2px 6px; }
  }

  /* 読みやすさv2：行長(measure)・余白・編集的な間 */
  .intro .lead, .intro p, .sec-note, .doc p, .doc .pintro, .doc ul { max-width: 720px; }
  .story .inner { max-width: 680px; }
  .sec-title { margin-bottom: 56px; }
  @media (min-width: 861px) {
    section { padding-top: 150px; padding-bottom: 150px; }
  }

  /* 日本語の改行を文節単位で自然に（対応ブラウザ） */
  body { word-break: auto-phrase; line-break: strict; }

/* ==== from works/sns.html ==== */

  :root {
    --sumi:    #1B2436;
    --sumi-2:  #39435A;
    --gray-1:  #6B7484;
    --gray-2:  #9AA1AE;
    --gray-3:  #C7CDD6;
    --line:    #E3E6EB;
    --base:    #ffffff;
    --washi:   #F7F9FB;
    --washi-2: #EEF1F5;
    --bg:      #EAEEF3;
    --shu:     #16213E;
    --hojicha: #6B7484;
    --gold:    #C0972F;
    --gold-deep: #8C6920;
    --gold-faint: #F0E4C2;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body {
    background: var(--base); color: var(--sumi);
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
    font-weight: 400; line-height: 1.9; -webkit-font-smoothing: antialiased;
  }
  .mincho { font-family: "Noto Serif JP", "Hiragino Mincho ProN", serif; }
  .maru { font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif; }
  .marcellus { font-family: "Noto Serif JP", serif; font-weight: 700; }
  a { color: inherit; }
  nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 32px; background: rgba(255,255,255,0.92);
    backdrop-filter: blur(8px); border-bottom: 1px solid var(--line);
  }
  nav .brand {
    font-family: "Noto Serif JP", serif; font-size: 22px; font-weight: 500;
    letter-spacing: 0.16em; color: var(--sumi); text-decoration: none;
    display: flex; align-items: center; gap: 10px;
  }
  nav .links { display: flex; gap: 24px; }
  nav .links a { font-size: 12px; letter-spacing: 0.14em; color: var(--gray-1); text-decoration: none; transition: color 0.2s; }
  nav .links a:hover { color: var(--sumi); }
  nav .cta { font-size: 12px; letter-spacing: 0.14em; padding: 8px 18px; background: var(--shu); color: #fff ; text-decoration: none; border-radius: 2px; }
  @media (max-width: 860px) { nav { padding: 12px 18px; } nav .links { display: none; } }
  section { padding: 132px 32px; }
  .inner { max-width: 940px; margin: 0 auto; }
  @media (max-width: 860px) { section { padding: 88px 22px; } }
  .sec-title { font-family: "Noto Serif JP", serif; font-size: 31px; font-weight: 500; letter-spacing: 0.12em; color: var(--sumi); margin-bottom: 48px; line-height: 1.7; }
  @media (max-width: 860px) { .sec-title { font-size: 23px; } }
  .page-hero { background: var(--shu); color: var(--washi); padding: 168px 32px 96px; text-align: center; }
  .page-hero .crumb { font-size: 12px; letter-spacing: 0.16em; color: var(--gray-2); margin-bottom: 26px; }
  .page-hero .crumb a { color: var(--gray-2); text-decoration: none; border-bottom: 1px solid rgba(168,168,168,0.4); }
  .page-hero .crumb a:hover { color: var(--washi); }
  .page-hero .eyebrow {
    font-family: "Noto Serif JP", serif;
    font-size: 11px;
    letter-spacing: 0.4em;
    color: var(--gold);
    margin-bottom: 18px;
    text-align: center;
  }
  .page-hero h1 { font-family: "Noto Serif JP", serif; font-size: 40px; font-weight: 600; letter-spacing: 0.1em; color: var(--washi); margin-bottom: 18px; line-height: 1.5; }
  @media (max-width: 860px) { .page-hero { padding: 128px 22px 72px; } .page-hero h1 { font-size: 28px; } }
  .intro { background: var(--base); }
  .intro .lead { font-family: "Noto Serif JP", serif; font-size: 24px; letter-spacing: 0.1em; line-height: 2.05; color: var(--sumi); margin-bottom: 32px; }
  .intro p { font-size: 15px; color: var(--sumi-2); margin-bottom: 20px; letter-spacing: 0.03em; line-height: 2.0; }
  @media (max-width: 860px) { .intro .lead { font-size: 19px; } }
  .sec-note { font-size: 14px; color: var(--gray-1); letter-spacing: 0.04em; margin-top: -32px; margin-bottom: 40px; line-height: 1.9; }

  /* ===== ギャラリー（準備中プレースホルダ） ===== */
  .gallerysec { background: var(--washi); }
  .gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .gallery-tile {
    position: relative; aspect-ratio: 1 / 1; background: var(--washi);
    border: 1px solid var(--line); border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
  }
  .gallery-tile .tlabel { font-size: 12px; letter-spacing: 0.18em; color: var(--gray-2); }
  @media (max-width: 768px) { .gallery { grid-template-columns: 1fr; } }

  /* ===== Instagram 導線 ===== */
  .ig-box { margin-top: 40px; padding: 28px 30px; background: var(--base); border: 1px solid var(--line); border-radius: 12px; text-align: center; }
  .ig-box .igt { font-family: "Noto Serif JP", serif; font-size: 16px; color: var(--sumi); font-weight: 600; letter-spacing: 0.06em; margin-bottom: 10px; }
  .ig-box p { font-size: 14px; color: var(--sumi-2); line-height: 1.95; letter-spacing: 0.02em; }
  .ig-box a { color: var(--shu); text-decoration: none; border-bottom: 1px solid var(--shu); font-weight: 500; }

  footer { background: var(--bg); color: var(--gray-1); text-align: center; padding: 56px 24px 36px; border-top: 1px solid var(--line); }
  footer .ftag { font-family: "Noto Serif JP", serif; font-size: 16px; letter-spacing: 0.3em; color: var(--shu); margin-bottom: 24px; }
  footer .fnav { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; margin-bottom: 28px; }
  footer .fnav a { font-size: 11px; letter-spacing: 0.12em; color: var(--gray-1); text-decoration: none; }
  footer .fnav a:hover { color: var(--shu); }
  footer .admin { font-size: 10px; letter-spacing: 0.1em; color: var(--gray-2); line-height: 1.9; border-top: 1px solid var(--line); padding-top: 24px; max-width: 540px; margin: 0 auto; }
  ::selection { background: var(--shu); color: #fff; }
  .fade-up { opacity: 0; transform: translateY(24px); transition: opacity 0.9s ease-out, transform 0.9s ease-out; }
  .fade-up.in { opacity: 1; transform: translateY(0); }
  @media (prefers-reduced-motion: reduce) { .fade-up { opacity: 1; transform: none; transition: none; } }

  /* ===== アニメーション無効化 ===== */
  
  /* ヘッダー読みやすく */
  nav .links a { font-size: 14px ; letter-spacing: 0.06em ; color: var(--sumi-2) ; }
  nav .links a:hover { color: var(--sumi) ; }

  /* 本文サイズ底上げ：読みやすく */
  .svc-card .desc, .value .vdesc, .strength .sd, .flow-note, .works-note,
  .mv-note, .origin p,
  .plan-card .pconcept, .service-card-body, .single-card-body, .sec-note,
  .process-content-body, .trans-body, .ig-box p {
    font-size: 16px ;
    line-height: 2.0 ;
    color: var(--sumi-2) ;
  }

  /* モバイルメニュー */
  .nav-toggle { display: none; background: none; border: none; font-size: 24px; line-height: 1; color: var(--sumi); cursor: pointer; padding: 4px 6px; }
  @media (max-width: 860px) {
    nav { flex-wrap: wrap; }
    .nav-toggle { display: block; position: absolute; top: 14px; right: 16px; }
    nav .links, nav .cta { display: none; }
    nav.open .links { display: flex; flex-direction: column; width: 100%; gap: 16px; padding: 18px 2px 8px; }
    nav.open .links a { font-size: 16px ; padding: 10px 0; }
    nav.open .cta { display: inline-block; width: fit-content; margin: 6px 2px 6px; }
  }

  /* 読みやすさv2：行長(measure)・余白・編集的な間 */
  .intro .lead, .intro p, .sec-note, .doc p, .doc .pintro, .doc ul { max-width: 720px; }
  .story .inner { max-width: 680px; }
  .sec-title { margin-bottom: 56px; }
  @media (min-width: 861px) {
    section { padding-top: 150px; padding-bottom: 150px; }
  }

  /* 日本語の改行を文節単位で自然に（対応ブラウザ） */
  body { word-break: auto-phrase; line-break: strict; }

/* ===================================================================
   ▼▼▼ TONE OVERRIDE ── トップページ index.html の新トーン ▼▼▼
   この下のルールは和集合の後に置かれ、カスケードで優先される。
   クール白銀・金アクセント・Noto Serif JP / Noto Sans JP / Jost。
   濃紺の全面バンド（page-hero / CTA）は廃し、唯一の濃色はフッターのみ（indexと同じ）。
=================================================================== */
:root{
  --paper:#FFFFFF; --mist:#EEF1F5; --mist-2:#DEE4EC; --mist-3:#DBE1EB;
  --ink:#1B2436; --ink-2:#39435A; --ink-soft:#6B7484; --ink-faint:#9AA1AE;
  --line:#E3E6EB; --gold:#C0972F; --gold-deep:#8C6920; --gold-faint:#F0E4C2;
  --radius:18px; --radius-sm:12px; --radius-pill:99px;
  --font-head:'Noto Serif JP',serif; --font-body:'Zen Kaku Gothic New',sans-serif; --font-en:'Jost',sans-serif;
  --motion:.6s cubic-bezier(.22,.61,.36,1);
  /* 旧トークン互換（本文インライン参照用）。濃紺(#16213E)→インク(#1B2436)に寄せる */
  --sumi:#1B2436; --sumi-2:#39435A; --gray-1:#6B7484; --gray-2:#9AA1AE; --gray-3:#C7CDD6;
  --base:#FFFFFF; --washi:#F7F9FB; --washi-2:#EEF1F5; --bg:#EEF1F5; --shu:#1B2436; --hojicha:#6B7484;
}
html{scroll-behavior:smooth;}
body{background:var(--paper);color:var(--ink);font-family:var(--font-body);
  font-weight:400;line-height:1.95;letter-spacing:.02em;-webkit-font-smoothing:antialiased;
  word-break:auto-phrase;line-break:strict;}
::selection{background:var(--gold);color:#fff;}
.marcellus{font-family:var(--font-en);font-weight:500;}
.mincho{font-family:var(--font-head);}

/* ===== fade-up（有効化） ===== */
.fade-up{opacity:0;transform:translateY(18px);transition:opacity var(--motion),transform var(--motion);}
.fade-up.in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){.fade-up{opacity:1!important;transform:none!important;transition:none;}}

/* ===== ナビ（index と同一トーン：YORAKU ワードマーク・フロスト・EN/JP） ===== */
nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;
  padding:20px 40px;background:rgba(238,241,245,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(227,230,235,.7);transition:opacity .4s ease;}
nav .brand{font-family:var(--font-en);font-size:23px;font-weight:600;letter-spacing:.34em;color:var(--ink);display:flex;align-items:center;gap:0;}
nav .nav-r{display:flex;align-items:center;gap:30px;}
nav .links{display:flex;gap:26px;}
nav .links a{display:flex;flex-direction:column;align-items:center;gap:3px;line-height:1.2;transition:opacity .2s;text-decoration:none;border:none;padding:0;}
nav .links a .en{font-family:var(--font-en);font-size:12px;letter-spacing:.18em;color:var(--ink);}
nav .links a .jp{font-size:9.5px;letter-spacing:.1em;color:var(--ink-soft);}
nav .links a:hover{opacity:.55;}
nav .links a.current .en{color:var(--gold);}
nav .links a.current .jp{color:var(--gold-deep);}
.nav-toggle{display:none;background:none;border:none;font-size:24px;color:var(--ink);cursor:pointer;line-height:1;padding:0;}
@media(max-width:980px){
  nav{padding:16px 22px;}
  nav .nav-r .links{display:none;}
  nav.open .nav-r{position:absolute;top:100%;left:0;right:0;background:var(--mist);flex-direction:column;gap:0;padding:8px 22px 18px;border-bottom:1px solid var(--line);}
  nav.open .nav-r .links{display:flex;flex-direction:column;gap:0;width:100%;}
  nav.open .nav-r .links a{flex-direction:row;justify-content:flex-start;gap:10px;padding:13px 0;border-bottom:1px solid var(--line);width:100%;}
  nav.open .nav-r .links a .jp{font-size:11px;}
  .nav-toggle{display:block;margin-left:auto;position:static;}
}

/* ===== ページヒーロー（濃紺→白銀グラデーション・インク文字・金アイブロウ） ===== */
.page-hero{background:linear-gradient(180deg,#F5F7FA 0%,#E7EBF2 60%,#DBE1EB 100%);
  color:var(--ink);text-align:center;padding:188px 24px 104px;}
.page-hero .eyebrow{font-family:var(--font-en);font-size:12px;font-weight:500;letter-spacing:.42em;color:var(--gold);margin-bottom:20px;}
.page-hero h1{font-family:var(--font-head);font-size:42px;font-weight:600;letter-spacing:.12em;color:var(--ink);line-height:1.5;margin-bottom:0;}
.page-hero .crumb{font-size:12px;letter-spacing:.1em;color:var(--ink-soft);margin-bottom:24px;}
.page-hero .crumb a{color:var(--ink-soft);text-decoration:none;border-bottom:1px solid var(--line);}
.page-hero .crumb a:hover{color:var(--ink);}
@media(max-width:860px){.page-hero{padding:140px 22px 76px;}.page-hero h1{font-size:29px;}}

/* ===== セクション見出し（金キッカー・インク見出し） ===== */
.sec-label{font-family:var(--font-en);font-size:12px;font-weight:500;letter-spacing:.4em;color:var(--gold);text-align:center;}
.sec-kicker{font-family:var(--font-head);font-size:13px;font-weight:500;letter-spacing:.24em;color:var(--gold);text-align:center;}
.sec-title{font-family:var(--font-head);color:var(--ink);font-weight:600;letter-spacing:.1em;}
.intro .lead,.lead{color:var(--ink);}
.eyebrow{color:var(--gold);}

/* ===== カード共通の質感（角丸・やわらかい影・金ホバー） ===== */
.svc-card,.method-card,.stance-item,.plan-card,.welcome-item,.spec-item,
.single-card,.value-box,.note-box,.info-box,.flagship,.op-base,.flow-list,.origin,.contact-box,.gallery-tile{
  border-radius:var(--radius-sm);}
.svc-card,.method-card,.stance-item,.plan-card,.single-card,.work-card,.spec-item{
  background:var(--paper);border:1px solid var(--line);box-shadow:0 10px 30px rgba(27,36,54,.05);
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;}
a.svc-card:hover,.method-card:hover,a.work-card:hover,.plan-card:hover{
  border-color:var(--gold);box-shadow:0 18px 44px rgba(27,36,54,.1);transform:translateY(-3px);}
a.svc-card:hover{transform:translateY(-3px);}
.svc-card .svic,.svc-card .more,.work-card .more,.svc-card .name{transition:color .2s;}
a.svc-card:hover .svic,a.svc-card:hover .name,a.svc-card:hover .more{color:var(--gold);}
.work-card{border-radius:var(--radius-sm);overflow:hidden;}
.method-card{border-top:3px solid var(--gold);}

/* ===== ボタン／CTA共通（金ピル・インク枠） ===== */
.cta-btn,.art-cta,.cta{
  border-radius:var(--radius-pill)!important;}
.cta-btn{display:inline-block;padding:15px 38px;background:var(--gold);color:#fff;border:1px solid var(--gold);
  text-decoration:none;font-size:14px;letter-spacing:.12em;transition:background .2s,box-shadow .2s;box-shadow:0 8px 22px rgba(192,151,47,.22);}
.cta-btn:hover{background:var(--gold-deep);border-color:var(--gold-deep);box-shadow:0 12px 30px rgba(192,151,47,.3);}
.art-cta{display:inline-block;padding:14px 32px;border:1px solid var(--ink);color:var(--ink);background:transparent;
  font-family:var(--font-head);font-size:13px;letter-spacing:.14em;text-decoration:none;transition:background .2s,color .2s;}
.art-cta:hover{background:var(--ink);color:#fff;}
/* ナビCTA（旧・濃紺ピル）はナビ刷新で未使用。残存時のため金ピルに */
nav .cta{background:var(--gold);color:#fff!important;padding:9px 20px;font-size:12px;letter-spacing:.12em;}

/* about：ロゴの意味（濃紺→白銀） */
.logo-mean{background:var(--mist);color:var(--ink);}
.logo-mean .sec-title{color:var(--ink);}
.logo-mean p{color:var(--ink-2);}
.logo-mean p strong{color:var(--gold-deep);}

/* 料金フラッグシップのヘッダー（濃紺→淡いインク帯・金プライス） */
.flagship{border:1px solid var(--line)!important;box-shadow:0 18px 50px rgba(27,36,54,.08);border-radius:var(--radius);}
.flagship-head{background:var(--mist-2);color:var(--ink);}
.flagship-head .fname{color:var(--ink);}
.flagship-head .fconcept,.flagship-head .fterm{color:var(--ink-soft);}
.flagship-head .fprice{color:var(--gold-deep);}
.flagship-head .fprice span,.flagship-head .fterm small{color:var(--ink-soft);}
.phase .ptitle,.phase li::before{color:var(--gold-deep);}

/* 各種アクセント線・記号を金に */
.origin{border-left:3px solid var(--gold);}
.origin .glyphs .ac{color:var(--gold);}
.info-box{border-left:3px solid var(--gold);}
.doc .contact-box{border-left:3px solid var(--gold);}
.doc h2{color:var(--ink);border-bottom:1px solid var(--line);}
.doc .contact-box a{color:var(--gold-deep);border-bottom:1px solid var(--gold-faint);}
.pullquote{color:var(--ink);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.story h3{color:var(--gold-deep);}
.story p strong{color:var(--ink);}
.flow-item .fn,.flow-item .ft{color:var(--ink);}
.flow-item .fn{color:var(--gold-deep);}
.welcome-item::before{color:var(--gold);}
.welcome-note{color:var(--ink);}
.pstep .pnum{color:var(--gold-faint);}
.pstep .ptitle{color:var(--ink);}
.pstep .ptime{color:var(--gold-deep);}
.prep .prep-title{color:var(--ink);}
.prep .prep-label{color:var(--gold-deep);}
.recommend-label{background:var(--gold)!important;color:#fff!important;}

/* about MVV：価値のピル */
.vgroup .vg-theme{color:var(--ink);}
.vgroup .vg-list li{background:var(--paper);border:1px solid var(--line);color:var(--ink-2);border-radius:var(--radius-pill);}
.mvv-stmt{color:var(--ink);}
.sec-vision{background:var(--washi);}
.sec-mission{background:var(--paper);}
.sec-values{background:var(--mist);}

/* プロフィール枠 */
.profile{background:var(--washi);}
.profile .avatar{background:var(--paper);border:1px solid var(--line);color:var(--ink);}

/* ===== フッター（index と同一：唯一の濃色・金タグ・最小情報） ===== */
footer{background:var(--ink);color:rgba(255,255,255,.66);text-align:center;padding:54px 24px 46px;border-top:none;}
footer .ftag{font-family:var(--font-head);font-size:15px;letter-spacing:.34em;color:var(--gold);margin-bottom:22px;}
footer .fnav{display:flex;justify-content:center;gap:20px;flex-wrap:wrap;margin-bottom:24px;}
footer .fnav a{font-size:11px;letter-spacing:.12em;color:rgba(255,255,255,.6);text-decoration:none;transition:color .2s;}
footer .fnav a:hover{color:var(--gold);}
footer .admin{font-size:11px;letter-spacing:.06em;color:rgba(255,255,255,.45);line-height:1.95;border-top:none;padding-top:0;max-width:560px;margin:0 auto;}
footer .admin a{color:rgba(255,255,255,.45);transition:color .2s;}
footer .admin a:hover{color:var(--gold);}

/* トップへ戻る */
.to-top{background:var(--ink);color:#fff;}
.to-top.show{opacity:.9;}

/* ▼ 見出し=Noto Serif JP ／ カード内テキスト=Noto Sans JP（ユーザー指定 2026-06-08） */
.svc-card .name,.work-card .cname,.method-card .value,.method-card .ltl,
.plan-card .pname,.stance-item h4,.flagship-head .fname,.scname,
.single-card .scname,.spec-item h4{ font-family:var(--font-body); }

/* ▼ 本文=Zen Kaku Gothic New ／ カード内テキスト=Noto Sans JP（ユーザー指定 2026-06-08） */
.card-in,.svc-card,.work-card,.method-card,.plan-card,.stance-item,.single-card,.spec-item,.welcome-item,.flagship,.gallery-tile{font-family:'Noto Sans JP',sans-serif;}
.svc-card .name,.work-card .cname,.method-card .value,.method-card .ltl,.plan-card .pname,.stance-item h4,.flagship-head .fname,.scname,.single-card .scname,.spec-item h4{font-family:'Noto Sans JP',sans-serif;}

/* 事業内容カード：ホバー前はシンボルもテキストと同じ色（ink）に統一（ユーザー指定 2026-06-08） */
.svc-card .svic{color:var(--ink);}

/* ▼ 事業バー（Mac Dock風）＝トップページから移植（ユーザー指定 2026-06-08）／背景は下部の .svc-bar-flow{washi} に統一 */
.svc-bar-wrap{max-width:1320px;margin:0 auto;padding:54px 40px 100px;position:relative;z-index:5;opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1);}
.svc-bar-wrap.show{opacity:1;transform:none;}
.svc-bar{background:rgba(255,255,255,.62);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.7);border-radius:var(--radius);box-shadow:0 20px 50px rgba(27,36,54,.10);display:grid;grid-template-columns:repeat(8,1fr);}
.svc-bar a{display:flex;align-items:stretch;justify-content:center;border-right:1px solid rgba(27,36,54,.08);position:relative;transition:border-color .25s;text-decoration:none;color:inherit;}
.svc-bar a:last-child{border-right:none;}
.svc-bar.dock-on a{border-right-color:transparent;}
.card-in{display:flex;flex-direction:column;align-items:center;gap:12px;padding:30px 8px 26px;width:100%;transform-origin:center bottom;transition:transform .15s cubic-bezier(.22,.61,.36,1);}
.svc-bar .ic{width:34px;height:34px;color:var(--ink);transition:color .2s;}
.svc-bar a:hover .ic,.svc-bar a:hover .nm{color:var(--gold);}
.svc-bar a:hover .nm{font-weight:500;}
.svc-bar .ic svg{width:100%;height:100%;}
.svc-bar .nm{font-family:'Noto Sans JP',sans-serif;font-size:11.5px;letter-spacing:.04em;color:var(--ink);text-align:center;line-height:1.4;transition:color .2s;}
@media(max-width:980px){.svc-bar-wrap{padding:0 16px 72px;}.card-in{padding:22px 6px 18px;}.svc-bar a{border-bottom:1px solid rgba(27,36,54,.08);}}
@media(min-width:601px) and (max-width:980px){.svc-bar{grid-template-columns:repeat(4,1fr);}.svc-bar a:nth-child(4n){border-right:none;}.svc-bar a:nth-child(n+5){border-bottom:none;}.svc-bar .nm{font-size:10.5px;}}
@media(max-width:600px){.svc-bar{grid-template-columns:repeat(2,1fr);}.svc-bar a:nth-child(2n){border-right:none;}.svc-bar a:nth-child(n+7){border-bottom:none;}.card-in{padding:26px 10px 22px;}.svc-bar .nm{font-size:12px;}.svc-bar-wrap{padding-top:36px;}}

/* 事業バー上のミッション文 */
.svc-lead{max-width:1040px;margin:0 auto;padding:84px 40px 4px;text-align:center;}
@media(max-width:600px){.svc-lead{padding:54px 18px 0;}}

/* ▼ ヘッダー：YORAKUを中央／PCでもハンバーガーメニュー（ユーザー指定 2026-06-08） */
nav{justify-content:center!important;}
nav .nav-r{display:none;}
nav.open .nav-r{display:block;position:absolute;top:100%;left:0;right:0;background:rgba(238,241,245,.96);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:10px 22px 18px;border-bottom:1px solid var(--line);}
nav.open .links{display:flex;flex-direction:column;gap:0;width:100%;max-width:1320px;margin:0 auto;}
nav.open .links a{flex-direction:row;justify-content:flex-start;gap:10px;padding:14px 4px;border-bottom:1px solid var(--line);width:100%;}
nav.open .links a:last-child{border-bottom:none;}
nav.open .links a .jp{font-size:11px;}
.nav-toggle{display:block!important;position:absolute!important;right:40px;top:50%;transform:translateY(-50%);margin:0;background:none;border:none;font-size:24px;color:var(--ink);cursor:pointer;line-height:1;}
@media(max-width:980px){.nav-toggle{right:22px;}}

/* ▼ フッターをヘッダーと同色（mist）＋上に金の細線（ユーザー指定 2026-06-08） */
footer{background:var(--mist)!important;color:var(--ink-soft)!important;border-top:1px solid var(--gold)!important;}
footer .ftag{color:var(--gold);}
footer .fnav a{color:var(--ink-soft);}
footer .fnav a:hover{color:var(--gold-deep);}
footer .admin{color:var(--ink-soft);}
footer .admin a{color:var(--ink-soft);}
footer .admin a:hover{color:var(--gold-deep);}

/* ▼ ハンバーガーメニュー：文字を大きく＋ホバーで拡大＆金色（ユーザー指定 2026-06-08） */
nav.open .nav-r{overflow:hidden;padding:14px 22px 20px;}
nav.open .links a{gap:12px;padding:16px 6px;transform-origin:left center;transition:transform .22s ease,opacity .22s ease;}
nav.open .links a .en{font-size:16px;transition:color .22s ease;}
nav.open .links a .jp{font-size:12px;transition:color .22s ease;}
nav.open .links a:hover{opacity:1;transform:scale(1.07);}
nav.open .links a:hover .en{color:var(--gold);}
nav.open .links a:hover .jp{color:var(--gold-deep);}

/* ▼ フッター更新：お問い合わせと同色(#F4EEE0)・境界線なし・YORAKUワードマーク（ユーザー指定 2026-06-08） */
footer{background:#F4EEE0!important;border-top:none!important;}
footer .ftag{font-family:var(--font-en)!important;font-size:22px;font-weight:500;letter-spacing:.34em;color:var(--gold);}

/* ▼ メニューはセンター揃え／ハンバーガー10%大きく（ユーザー指定 2026-06-08） */
.nav-toggle{font-size:26px!important;}
nav.open .links a{justify-content:center!important;transform-origin:center center;}

/* ▼ ヘッダー背景をHERO上端と同色(#F5F7FA)・不透過に（ユーザー指定 2026-06-08） */
nav{background:#F5F7FA!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;}
nav.open .nav-r{background:#F5F7FA!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;}

/* ▼ ヘッダー境界線なし（ユーザー指定 2026-06-08） */
nav{border-bottom:none!important;}

/* ▼ 事業バー背景：HERO下端(washi)と同色で継ぎ目なし＝他ページと統一（ユーザー指定 2026-06-08） */
.svc-bar-flow{background:var(--washi);}

/* ▼ フッターYORAKU：灰色＋最下段（All rights reservedの下）へ移動・flex order（ユーザー指定 2026-06-08） */
footer{display:flex!important;flex-direction:column;align-items:center;}
footer .fnav{order:1;}
footer .admin{order:2;}
footer .ftag{order:3;color:#8A8F96!important;margin-bottom:0;margin-top:28px;}

/* ▼ ヘッダーメニューは日本語のみ表示（英字非表示）・ホバー金色（ユーザー指定 2026-06-08） */
nav.open .links a .en{display:none!important;}
nav.open .links a .jp{font-family:var(--font-head)!important;font-size:19px!important;font-weight:500;letter-spacing:.1em;}
nav.open .links a:hover .jp{color:var(--gold)!important;}

/* ▼ 代表写真：高さ＝テキスト列・比率は元のまま(600:799)・角丸（テキスト列固定460px→JSで高さに合わせ幅算出・ユーザー指定 2026-06-08） */
.profile-inner{grid-template-columns:auto 460px!important;justify-content:center;align-items:start;max-width:none;}
.profile .profile-aside .avatar{flex:none;}
.profile .avatar{aspect-ratio:auto;min-height:0;border-radius:18px;}
@media(max-width:860px){
  .profile-inner{grid-template-columns:1fr!important;justify-content:stretch;}
  .profile .avatar{height:auto!important;width:200px!important;aspect-ratio:600/799;}
}

/* ▼ 全ページ共通お問い合わせセクション（トップのカード＋金の波を移植・ユーザー指定 2026-06-08） */
.contact-cta{position:relative;overflow:hidden;background:#F4EEE0;padding:104px 40px 104px;text-align:center;}
.contact-cta>*{position:relative;z-index:1;}
.contact-cta #cc-wave{position:absolute;inset:0;z-index:0;pointer-events:none;}
.contact-cta #cc-wave canvas{display:block;width:100%;height:100%;}
.contact-cta .cc-head{font-family:var(--font-head);font-size:29px;font-weight:600;letter-spacing:.1em;line-height:1.95;color:var(--ink);}
.cc-rule{width:64px;height:1px;background:var(--gold);margin:22px auto 30px;}   /* 見出し下の金の棒線（汎用ディバイダー） */
.contact-cta .cc-rule{margin:30px auto 52px;}
.origin-sec .cc-rule{margin:16px auto 46px;}
.story.vmv .cc-rule{margin:18px auto 6px;position:relative;z-index:1;}
.page-hero .cc-rule{margin:22px auto 0;}
.flow .cc-rule,.logo-mean .cc-rule{margin:20px auto 36px;}
.cc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:874px;margin:0 auto;}
.cc-card{display:flex;flex-direction:column;align-items:center;background:#fff;border:1px solid rgba(27,36,54,.06);border-radius:17px;box-shadow:0 14px 36px rgba(120,90,30,.08);padding:42px 24px 35px;text-decoration:none;color:var(--ink);transition:transform .25s ease,box-shadow .25s ease;}
.cc-card:hover{transform:translateY(-5px);box-shadow:0 24px 55px rgba(120,90,30,.16);}
.cc-icon{width:62px;height:62px;border-radius:50%;border:1px solid var(--gold);display:flex;align-items:center;justify-content:center;color:var(--gold);margin-bottom:22px;transition:background .25s,color .25s;}
.cc-icon svg{width:25px;height:25px;}
.cc-card:hover .cc-icon{background:var(--gold);color:#fff;}
.cc-value{font-size:16px;letter-spacing:.03em;color:var(--gold-deep);margin-bottom:6px;word-break:break-all;transition:font-weight .15s;}
.cc-card:hover .cc-value{font-weight:700;}
.cc-note{font-size:13px;letter-spacing:.04em;color:var(--ink-soft);}
@media(max-width:860px){
  .contact-cta{padding:84px 22px 84px;}
  .contact-cta .cc-head{font-size:19px;letter-spacing:.04em;}
  .cc-grid{grid-template-columns:1fr;gap:14px;max-width:370px;}
  .cc-card{padding:34px 22px 29px;}
}
/* ▼ お問い合わせ：対応エリアカード（ユーザー指定 2026-06-09） */
.contact-cta .cc-area{max-width:874px;margin:20px auto 0;background:#fff;border:1px solid rgba(27,36,54,.06);border-radius:17px;box-shadow:0 14px 36px rgba(120,90,30,.08);padding:28px 40px;display:flex;align-items:center;justify-content:center;gap:28px;text-align:left;transition:transform .25s ease,box-shadow .25s ease;}
.contact-cta .cc-area:hover{transform:translateY(-5px);box-shadow:0 24px 55px rgba(120,90,30,.16);}
.contact-cta .cc-area-icon{flex:0 0 auto;width:48px;height:48px;color:var(--gold);display:flex;align-items:center;justify-content:center;}
.contact-cta .cc-area-icon svg{width:30px;height:30px;}
.contact-cta .cc-area-label{flex:0 0 auto;font-family:var(--font-head);font-size:15px;font-weight:500;letter-spacing:.08em;color:var(--ink);padding-right:28px;border-right:1px solid rgba(27,36,54,.12);}
.contact-cta .cc-area-text{flex:0 1 auto;min-width:0;font-size:14px;line-height:1.95;letter-spacing:.03em;color:var(--ink-soft);}
@media(max-width:860px){
  .contact-cta .cc-area{flex-direction:column;align-items:center;text-align:center;gap:12px;padding:24px 22px;max-width:370px;}
  .contact-cta .cc-area-label{border-right:none;padding-right:0;border-bottom:1px solid rgba(27,36,54,.1);padding-bottom:11px;}
  .contact-cta .cc-area-text{text-align:center;}
}

/* ▼ 歩み：本文中の写真枠（左右交互・比率維持・テキスト回り込み・クリックで拡大）（ユーザー指定 2026-06-08） */
.story .story-fig{float:left;width:300px;margin:6px 34px 18px 0;cursor:zoom-in;}
.story .story-fig.right{float:right;margin:6px 0 18px 34px;}
.story .story-fig img{width:100%;height:auto;display:block;border-radius:14px;box-shadow:0 10px 30px rgba(27,36,54,.10);transition:transform .3s ease,box-shadow .3s ease;}
.story .story-fig:not(.is-placeholder):hover img{transform:translateY(-3px);box-shadow:0 18px 46px rgba(27,36,54,.17);}
.story .story-fig figcaption{margin-top:10px;font-size:12px;line-height:1.75;color:var(--ink-soft);letter-spacing:.03em;}
.story h3{clear:both;}   /* 見出しは常に写真の下から */
/* 写真枠プレースホルダ（あとで差し込み） */
.story .story-fig.is-placeholder{cursor:default;}
.story .story-fig.is-placeholder .ph{width:100%;aspect-ratio:4/3;border:1px dashed rgba(140,105,32,.45);border-radius:14px;background:rgba(192,151,47,.06);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;color:var(--gold-deep);}
.story .story-fig.is-placeholder .ph svg{width:34px;height:34px;opacity:.55;}
.story .story-fig.is-placeholder .ph span{font-size:11px;letter-spacing:.26em;opacity:.7;}
@media(max-width:860px){
  .story .story-fig,.story .story-fig.right{float:none;width:100%;max-width:320px;margin:4px auto 22px;}
}

/* ▼ 写真ライトボックス（クリックで拡大＋キャプション）（ユーザー指定 2026-06-08） */
#lightbox{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;flex-direction:column;background:rgba(255,255,255,.96);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);padding:48px 24px;cursor:zoom-out;}
#lightbox.open{display:flex;}
#lightbox figure{margin:0;max-width:min(92vw,920px);display:flex;flex-direction:column;align-items:center;}
#lightbox img{max-width:100%;max-height:78vh;width:auto;height:auto;border-radius:8px;box-shadow:0 24px 64px rgba(27,36,54,.22);}
#lightbox figcaption{margin-top:18px;font-family:var(--font-body);color:#39435A;font-size:15px;line-height:1.95;letter-spacing:.04em;text-align:center;max-width:680px;cursor:auto;}
#lightbox .lb-close{position:absolute;top:22px;right:26px;width:44px;height:44px;border:none;background:rgba(27,36,54,.08);color:var(--ink);border-radius:50%;font-size:20px;line-height:1;cursor:pointer;transition:background .2s;}
#lightbox .lb-close:hover{background:rgba(27,36,54,.16);}
@media(prefers-reduced-motion:reduce){#lightbox{backdrop-filter:none;-webkit-backdrop-filter:none;}}

/* ▼ フッターのプライバシーポリシー等リンクの下線を消す（ユーザー指定 2026-06-08） */
footer .admin a{text-decoration:none;}

/* ▼ 歩み：横スクロール紙芝居（ユーザー指定 2026-06-08） */
.story .kb-guide{text-align:center;font-size:12px;letter-spacing:.14em;color:var(--ink-soft);margin:2px 0 4px;}
.kamishibai{position:relative;margin:16px auto 0;}
.kb-track{display:flex;gap:28px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;padding:12px max(20px,calc((100% - 820px)/2)) 32px;scrollbar-width:none;}
.kb-track::-webkit-scrollbar{display:none;}
.kb-track:focus{outline:none;}
.kp{flex:0 0 min(88vw,820px);scroll-snap-align:center;box-sizing:border-box;background:var(--paper,#fff);border:1px solid var(--line);border-radius:20px;box-shadow:0 20px 54px rgba(27,36,54,.09);padding:40px 46px 44px;display:flex;flex-direction:column;}
.kp .story-fig{float:none!important;margin:0 auto 24px!important;width:auto;max-width:100%;text-align:center;cursor:zoom-in;}
.kp .story-fig img{max-height:40vh;width:auto;max-width:100%;margin:0 auto;border-radius:14px;}
.kp .kp-body{width:100%;}
.kp .kp-no{font-family:var(--font-en);font-size:13px;font-weight:500;letter-spacing:.34em;color:var(--gold);margin-bottom:6px;}
.kp h3{margin-top:0;clear:none;}
.kp p{font-size:15px;}
.kp-cover{justify-content:center;align-items:center;text-align:center;}
.kp-cover .kp-kicker{font-family:var(--font-en);font-size:14px;font-weight:500;letter-spacing:.4em;color:var(--gold);margin-bottom:22px;}
.kp-cover .story-lead{margin:0;}
.kb-nav{position:absolute;top:44%;transform:translateY(-50%);width:50px;height:50px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.92);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);color:var(--ink);font-size:24px;line-height:1;cursor:pointer;z-index:6;display:flex;align-items:center;justify-content:center;transition:background .2s,color .2s,opacity .2s,transform .2s;box-shadow:0 8px 22px rgba(27,36,54,.12);}
.kb-nav:hover{background:#fff;color:var(--gold);transform:translateY(-50%) scale(1.06);}
.kb-prev{left:6px;}
.kb-next{right:6px;}
@media(max-width:860px){
  .kp{flex-basis:88vw;padding:30px 24px 34px;}
  .kp .story-fig img{max-height:34vh;}
  .kb-nav{width:42px;height:42px;font-size:20px;}
  .kb-track{padding:12px 18px 30px;}
}

/* ▼ 写真キャプションはクリック時（ライトボックス）だけ表示（ユーザー指定 2026-06-08） */
.story-fig figcaption{display:none;}

/* ▼ 紙芝居：全画面高さ(100vh・ヘッダー込み)・右→左（和書）・表紙レイアウト（ユーザー指定 2026-06-08） */
.story{padding-top:0!important;padding-bottom:0!important;}
.kamishibai{margin:0;position:relative;--kpw:min(86vw,74vh,680px);}
.kb-track{height:auto;align-items:center;direction:rtl;padding:26px max(16px,calc((100% - 680px)/2));}
.kp{flex:0 0 var(--kpw);aspect-ratio:1;direction:ltr;overflow:hidden;justify-content:center;padding:34px 44px;filter:blur(10px);opacity:.3;transition:filter .4s ease,opacity .4s ease;}   /* 正方形カード・縦スクロールなし・中央寄せ／中央以外は強めにぼかす */
.kp.is-active{filter:none;opacity:1;}   /* 中央のスライドだけ鮮明に */
.kp .story-fig img{max-height:30vh;}   /* 写真（テキスト増量に合わせ微調整） */
.kp p{font-size:15px;line-height:1.78;margin-bottom:6px;}
.kp .pullquote{font-size:17px;margin:14px 0 0;}
.kp h3{font-size:21px;margin:0 0 14px;clear:none;}
.kp-cover{justify-content:center;text-align:center;}
.kp-cover .story-lead{text-align:center;margin:0;}   /* サブタイトル：1行・中央 */
.kp .kp-title{font-family:var(--font-head);font-size:34px;font-weight:600;letter-spacing:.08em;color:var(--ink);margin:0 0 18px;}
.kp .kp-no{margin-bottom:4px;}
.kp .kb-guide{margin:30px 0 0;font-size:13px;letter-spacing:.12em;color:var(--ink-soft);}
/* 矢印：右→左なので 前へ＝右 / 次へ＝左。位置は「画面端とカード外端の中間」へ */
.kb-prev{left:auto;right:calc((100% - var(--kpw)) / 4 - 25px);}
.kb-next{right:auto;left:calc((100% - var(--kpw)) / 4 - 25px);}
.kb-nav{top:50%;}
@media(max-width:860px){
  .kb-track{height:auto;padding:16px 16px;scroll-padding:0 16px;}
  /* カードはスマホ画面に収まる固定高さで全枚統一（中央寄せ・はみ出しは隠す） */
  .kp{flex-basis:86vw;aspect-ratio:auto;height:clamp(500px,80dvh,660px);min-height:0;padding:24px 22px;justify-content:center;overflow:hidden;}
  .story.vmv .kp.vmv-slide{height:auto;}   /* VMVスライドは stage(inset:0) に従う */
  .kp .kp-title{font-size:24px;}
  .kp .story-fig{margin:0 0 11px;}
  .kp .story-fig img{max-height:22vh;}
  .kp h3{font-size:18px;margin:0 0 9px;}
  .kp p{font-size:13.5px;line-height:1.66;margin-bottom:7px;}
  .kp .pullquote{font-size:15px;margin:10px auto 0;}
  .kp .kp-no{margin-bottom:2px;}
  .kp-cover .story-lead{font-size:15px;}
  .kb-nav{display:none;}   /* モバイルはスワイプで操作（矢印がカードに重なるため非表示） */
}

/* ▼ モバイル：下スクロールでヘッダーを隠す・上スクロールで再表示（メニュー展開中は隠さない）（ユーザー指定 2026-06-08） */
@media(max-width:860px){
  nav{transition:transform .35s ease;}
  nav.nav-hide:not(.open){transform:translateY(-100%);}
}

/* ▼ Yorakuについて：背景統一・境界グラデ・カード角丸・リンク下線除去・代表あいさつフェードイン（ユーザー指定 2026-06-08） */
.story{background:var(--washi)!important;}                  /* 紙芝居の背景を上下(代表あいさつ/事業情報)と統一 */
.kp{border-radius:20px;}                                    /* 全カードの角を丸く */
.profile{background:linear-gradient(180deg,#E7EBF2 0,var(--washi) 240px,var(--washi) 100%)!important;}   /* HERO下端→washiで境界を消す */
.contact-cta{background:linear-gradient(180deg,#F7F9FB 0,#F4EEE0 140px,#F4EEE0 100%)!important;}          /* 事業情報(washi)→クリームで境界を消す */
/* お問い合わせページ：直前がヘッダー(nav #F5F7FA)なので、nav色から長く保ちクリームへ緩やかに＝境界線を消す（ユーザー指定 2026-06-09） */
.contact-cta.cta-flush{background:linear-gradient(180deg,#F5F7FA 0,#F5F7FA 150px,#F4EEE0 580px,#F4EEE0 100%)!important;}
.info-box a,.info-box dd a{text-decoration:none;}           /* 電話・メールの下線除去 */
.fade-section{opacity:0;transform:translateY(44px);transition:opacity 1.2s cubic-bezier(.22,.61,.36,1),transform 1.2s cubic-bezier(.22,.61,.36,1);}
.fade-section.in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){.fade-section{opacity:1;transform:none;transition:none;}}

/* ▼ MISSION/VISION/VALUE：3枚ピーク型・無限ループ carousel（哲学ページ・ユーザー指定 2026-06-09） */
.story.vmv{position:relative;overflow:hidden;}
.story.vmv .kb-head{position:relative;z-index:1;padding:28px 24px 10px;}
.story.vmv .vmv-carousel{position:relative;z-index:1;max-width:1180px;margin:0 auto;}
.story.vmv .vmv-viewport{overflow:hidden;outline:none;padding:38px 0 76px;}   /* 影が切れて境界線に見えないよう上下に余白 */
.story.vmv .vmv-track{display:flex;align-items:center;gap:30px;will-change:transform;transition:transform .55s cubic-bezier(.4,0,.2,1);}
.story.vmv .kp.vmv-slide{flex:0 0 auto;width:clamp(300px,34vw,460px);aspect-ratio:1;height:auto;margin:0;filter:none;opacity:.38;transform:scale(.9) translateZ(0);box-shadow:0 14px 38px rgba(27,36,54,.07);will-change:transform,opacity;backface-visibility:hidden;transition:opacity .45s ease,transform .45s cubic-bezier(.34,1.16,.5,1);}
.story.vmv .kp.vmv-slide.is-active{opacity:1;transform:scale(1) translateZ(0);box-shadow:0 22px 52px rgba(27,36,54,.12);}
.story.vmv .vmv-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:6;width:54px;height:54px;border-radius:50%;border:1px solid var(--gold);background:#fff;color:var(--gold);font-size:24px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 26px rgba(120,90,30,.14);transition:background .2s,color .2s,transform .2s;}
.story.vmv .vmv-nav:hover{background:var(--gold);color:#fff;transform:translateY(-50%) scale(1.07);}
.story.vmv .vmv-prev{left:6px;}
.story.vmv .vmv-next{right:6px;}
@media(max-width:860px){
  .story.vmv .kb-head{padding:16px 20px 2px;}
  .story.vmv .vmv-viewport{padding:24px 0 52px;}
  .story.vmv .vmv-track{gap:14px;}
  .story.vmv .kp.vmv-slide{width:78vw;aspect-ratio:auto;height:auto;min-height:360px;padding:32px 28px;}
  .story.vmv .vmv-nav{width:40px;height:40px;font-size:18px;}
  .story.vmv .vmv-prev{left:2px;}
  .story.vmv .vmv-next{right:2px;}
}
@media(max-width:520px){
  .story.vmv .vmv-viewport{padding:18px 0 46px;}
  .story.vmv .vmv-track{gap:10px;}
  .story.vmv .kp.vmv-slide{width:84vw;min-height:330px;padding:30px 22px;}
  .story.vmv .vmv-nav{width:36px;height:36px;font-size:16px;}
  .story.vmv .vmv-prev{left:0;}
  .story.vmv .vmv-next{right:0;}
}
.kp .vmv-body{text-align:center;width:100%;max-width:680px;margin:0 auto;}
.kp .vmv-body .sec-kicker{font-family:var(--font-head);font-size:16px;font-weight:600;letter-spacing:.12em;color:var(--gold-deep);margin-bottom:30px;}
.kp .vmv-body .mvv-stmt{font-family:var(--font-head);font-size:24px;font-weight:500;line-height:1.9;letter-spacing:.06em;color:var(--ink);}
/* 改行制御：文ごとに改行（.ln）＋句読点の単位は語中で切らない（.u）＝編集者視点の折り返し */
.kp .vmv-body .mvv-stmt .ln{display:block;}
.kp .vmv-body .mvv-stmt .u{display:inline-block;}
/* VALUE：8つの価値を2列で読みやすく */
.kp .vmv-body .value-list{list-style:none;padding:0;margin:18px auto 0;display:grid;grid-template-rows:repeat(4,auto);grid-auto-flow:column;justify-content:center;column-gap:44px;row-gap:18px;}
.kp .vmv-body .value-list li{font-family:var(--font-head);font-size:19px;font-weight:500;color:var(--ink);letter-spacing:.1em;line-height:1.4;text-align:left;}
@media(max-width:860px){
  .kp .vmv-body .sec-kicker{margin-bottom:22px;}
  .kp .vmv-body .mvv-stmt{font-size:20px;line-height:1.85;}
  .kp .vmv-body .value-list{column-gap:26px;row-gap:14px;margin-top:12px;}
  .kp .vmv-body .value-list li{font-size:16px;}
}
@media(max-width:520px){
  .kp .vmv-body .sec-kicker{font-size:15px;margin-bottom:18px;}
  .kp .vmv-body .mvv-stmt{font-size:18px;line-height:1.8;}
  .kp .vmv-body .value-list{column-gap:20px;row-gap:12px;}
  .kp .vmv-body .value-list li{font-size:15px;}
}

/* ▼ ロゴにこめた意味：ロゴ＋リードを上に、2つのモチーフをカードで（ユーザー指定 2026-06-09 UI見直し） */
.logo-mean .inner{max-width:880px;}
.logo-mean .lm-hero{text-align:center;margin-bottom:2px;}
.logo-mean .lm-hero .lm-mark{margin:0 0 4px;display:inline-block;}
.logo-mean .lm-hero .lm-mark img{height:150px;width:auto;display:block;margin:0 auto;}
/* 締めの一文（金色・中央） */
.logo-mean .lm-closing{text-align:center;font-family:var(--font-head);font-size:27px;font-weight:600;letter-spacing:.1em;line-height:1.8;color:var(--gold-deep);margin:2px auto 40px;max-width:840px;}
@media(max-width:760px){.logo-mean .lm-closing{font-size:20px;margin:2px auto 30px;letter-spacing:.06em;}}
/* 各モチーフ＝柔らかい白カード（画像＋本文） */
.logo-mean .lm-motif{display:flex;align-items:center;gap:38px;background:#fff;border:1px solid rgba(27,36,54,.05);border-radius:22px;box-shadow:0 18px 48px rgba(27,36,54,.07);padding:32px 40px;max-width:840px;margin:22px auto 0;text-align:left;}
.logo-mean .lm-fig{flex:0 0 auto;width:168px;margin:0;}
.logo-mean .lm-fig img{width:100%;height:auto;display:block;border-radius:14px;background:#fff;border:1px solid rgba(27,36,54,.07);}
.logo-mean .lm-motif-body{flex:1;min-width:0;}
.logo-mean .lm-motif-body .lm-subhead{font-family:var(--font-head);font-size:19px;font-weight:600;letter-spacing:.06em;color:var(--ink);margin:0 0 13px;}
.logo-mean .lm-motif-body p{max-width:none;margin:0 0 13px;text-align:left;font-size:14px;line-height:1.95;}
.logo-mean .lm-motif-body p:last-child{margin-bottom:0;}
@media(max-width:760px){
  .logo-mean .lm-hero{margin-bottom:2px;}
  .logo-mean .lm-hero .lm-mark img{height:124px;}
  .logo-mean .lm-motif{flex-direction:column;align-items:center;gap:20px;padding:28px 24px;margin-top:18px;text-align:center;}
  .logo-mean .lm-fig{width:150px;}
  .logo-mean .lm-motif-body{width:100%;}
  .logo-mean .lm-motif-body .lm-subhead{justify-content:center;}
  .logo-mean .lm-motif-body p{text-align:left;}
  .logo-mean .lm-motif-body br{display:none;}   /* 改行はPCのみ／モバイルは自然な折返し */
}
/* 鈴（ロゴ・宝珠鈴）をクリックで金剛鈴の音：アフォーダンス＋鳴った時の演出（ユーザー指定 2026-06-09） */
.bell-ring{cursor:pointer;outline:none;-webkit-tap-highlight-color:transparent;transition:transform .25s ease;}
.bell-ring img{pointer-events:none;}
.bell-ring:hover{transform:translateY(-3px);}
.bell-ring:focus-visible{outline:2px solid var(--gold);outline-offset:6px;border-radius:10px;}
.bell-ring.ringing{animation:bellRing .55s cubic-bezier(.36,.07,.19,.97);}
@keyframes bellRing{0%{transform:scale(1) rotate(0)}20%{transform:scale(1.07) rotate(-4deg)}40%{transform:scale(1.05) rotate(3deg)}60%{transform:scale(1.03) rotate(-2deg)}100%{transform:scale(1) rotate(0)}}
.logo-mean .bell-hint{font-size:12.5px;letter-spacing:.12em;color:var(--gold-deep);margin:14px 0 0;opacity:.85;}
@media(prefers-reduced-motion:reduce){.bell-ring.ringing{animation:none;}}

/* ▼ 追加調整（ユーザー指定 2026-06-08） */
/* 趣味オーバーレイのテキストを15%大きく */
.profile .hb-overlay .hb-title{font-size:11.5px;}
.profile .hb-overlay .hb-list{font-size:14px;}
/* 引用（pullquote）：上下ラインをやめ、金の明朝で見せる */
.kp .pullquote{border:none;padding:0;margin:18px auto 4px;max-width:90%;color:var(--gold-deep);font-family:var(--font-head);font-size:18px;font-weight:500;line-height:1.95;letter-spacing:.05em;}
/* お問い合わせ：トップページと同じ大きさ感（generousな上余白＋下116px）に揃える */
.contact-cta{min-height:0;display:block;padding:372px 40px 116px;}
@media(max-width:860px){.contact-cta{padding:150px 22px 72px;}}
/* お問い合わせページ専用：HEROを廃しCTAが先頭なので、ナビ下に余白を確保（ユーザー指定 2026-06-09） */
.contact-cta.cta-flush{padding-top:200px;}
@media(max-width:860px){.contact-cta.cta-flush{padding-top:128px;}}
/* 物語ヘッダー（カードの上にタイトル＋ガイド） */
.kb-head{text-align:center;padding:46px 24px 4px;}
.kb-title{font-family:var(--font-head);font-size:30px;font-weight:600;letter-spacing:.1em;color:var(--ink);margin:0 0 14px;}
.kb-head .kb-guide{font-size:14px;letter-spacing:.12em;color:var(--ink-soft);min-height:1.5em;}
/* ガイドのタイプライター用キャレット */
.kb-head .kb-guide.typing::after{content:"▌";margin-left:1px;color:var(--gold);animation:twCaret .7s step-end infinite;}
@keyframes twCaret{50%{opacity:0;}}
@media(max-width:860px){.kb-title{font-size:24px;}.kb-head{padding:36px 20px 2px;}}

/* ▼ HP制作：料金プランを3列で収める（ユーザー指定 2026-06-08） */
.plan-grid-3{grid-template-columns:repeat(3,1fr)!important;gap:14px;}
.plan-grid-3 .plan-card{min-width:0;padding:26px 20px;}
.plan-grid-3 .plan-card dl > div{grid-template-columns:74px 1fr;}
@media(max-width:760px){.plan-grid-3{grid-template-columns:1fr!important;}}

/* ▼ 全ページ：セクション境界をなくす（HERO下端→washi／本文はwashiで統一／お問い合わせはwashi→クリーム）（ユーザー指定 2026-06-08） */
.page-hero{background:linear-gradient(180deg,#F5F7FA 0%,#EEF1F5 55%,var(--washi) 100%)!important;}
.intro,.pricing,.flowsec,.flow,.feature-sec,.contact,.why,.plan,.ops,.gallerysec,.welcome,.doc,.origin-sec,.logo-mean,.prep,.contact-methods,.story,.profile{background:var(--washi)!important;}

/* ▼ 代表あいさつ：フェードインを2倍ゆっくりに（0.9s→1.8s）（ユーザー指定 2026-06-08） */
.profile .fade-up{transition:opacity 1.8s ease-out,transform 1.8s ease-out;}

/* ▼ 仕事の流れ：アイコン付き・横並び4ステップ（ユーザー指定 2026-06-09） */
.flow-steps{max-width:1020px;display:grid;grid-template-columns:repeat(4,1fr);gap:30px;border-radius:0;}
.flow-steps .flow-item{display:flex;flex-direction:column;align-items:center;text-align:center;grid-template-columns:none;gap:0;padding:0;border-bottom:none;position:relative;}
.flow-steps .fi-icon{width:74px;height:74px;border-radius:50%;border:1px solid var(--gold);display:flex;align-items:center;justify-content:center;color:var(--gold);background:#fff;box-shadow:0 12px 30px rgba(120,90,30,.10);margin-bottom:18px;}
.flow-steps .fi-icon svg{width:30px;height:30px;}
.flow-steps .fn{font-family:var(--font-en);font-size:12px;font-weight:600;letter-spacing:.24em;color:var(--gold);line-height:1;margin-bottom:9px;}
.flow-steps .ft{font-family:var(--font-head);font-size:16px;font-weight:600;letter-spacing:.04em;color:var(--ink);margin-bottom:10px;line-height:1.5;}
.flow-steps .fd{font-size:13px;color:var(--ink-soft);line-height:1.85;text-align:center;}
/* ステップ間のつなぎ（金の小さな矢羽根） */
.flow-steps .flow-item:not(:last-child)::after{content:"";position:absolute;top:30px;right:-19px;width:9px;height:9px;border-top:1.6px solid rgba(192,151,47,.55);border-right:1.6px solid rgba(192,151,47,.55);transform:rotate(45deg);}
@media(max-width:860px){
  .flow-steps{grid-template-columns:1fr 1fr;gap:34px 18px;max-width:430px;}
  .flow-steps .flow-item:not(:last-child)::after{display:none;}
  .flow-steps .fi-icon{width:64px;height:64px;}
  .flow-steps .fi-icon svg{width:26px;height:26px;}
  .flow-steps .ft{font-size:15px;}
}
@media(max-width:360px){
  .flow-steps{grid-template-columns:1fr;max-width:280px;gap:28px;}
}

/* ▼ 屋号の由来：3カード（由来／解釈／願い）＋装飾divider（ユーザー指定 2026-06-09） */
.origin-sec .sec-title{margin-bottom:0;}
.origin-sec .inner{max-width:1120px;}   /* 本文15px統一に伴い3枚パネルに余裕を持たせる */
.origin-panel{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:1100px;margin:0 auto;background:linear-gradient(180deg,#ffffff,#FBFCFE);border:1px solid rgba(27,36,54,.05);border-radius:24px;box-shadow:0 24px 60px rgba(27,36,54,.06);padding:40px 38px;}
.origin-card{display:flex;flex-direction:column;align-items:center;text-align:center;padding:30px 20px 26px;border:1px solid rgba(27,36,54,.05);border-radius:16px;background:rgba(255,255,255,.5);}
.origin-card .oc-head{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:26px;}
.origin-card .oc-num{font-family:var(--font-head);font-style:italic;font-weight:600;font-size:25px;color:var(--gold);line-height:1;}
.origin-card .oc-sep{width:1px;height:19px;background:rgba(27,36,54,.18);}
.origin-card .oc-label{font-family:var(--font-head);font-weight:600;font-size:16px;letter-spacing:.05em;color:var(--ink);}
.origin-card .oc-body{flex:1;}
.origin-card .oc-body p{font-size:15px;line-height:1.95;letter-spacing:.02em;color:var(--ink-soft);margin:0 0 18px;}
.origin-card .oc-body p:last-child{margin-bottom:0;}
.origin-card .oc-body .glyphs{font-family:var(--font-head);font-size:16px;letter-spacing:.06em;color:var(--ink);margin:6px 0 18px;line-height:1.8;}
.origin-card .oc-body .glyphs .ac{color:var(--gold-deep);font-weight:600;}
.origin-card .oc-icon{margin-top:28px;color:var(--gold);}
.origin-card .oc-icon svg{width:48px;height:auto;display:block;}
@media(max-width:860px){
  .origin-panel{grid-template-columns:1fr;gap:16px;max-width:460px;padding:24px 20px;}
  .origin-card{padding:26px 22px;}
}

/* ▼ ヘッダーメニュー：開いた状態をフルスクリーン・オーバーレイに（ユーザー指定 2026-06-09・添付参考） */
html:has(nav.open){overflow:hidden;}
nav .brand{position:relative;z-index:3;}
.nav-toggle{position:relative;z-index:3;font-size:0!important;}
.nav-toggle::before{content:"\2630";font-size:25px;line-height:1;color:var(--ink);}
nav.open .nav-toggle::before{content:"\2715";}
nav.open .nav-r{position:fixed!important;inset:0!important;top:0!important;left:0!important;right:0!important;z-index:1;display:flex!important;flex-direction:column;align-items:center;justify-content:center;background:rgba(240,242,246,.97);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding:0!important;border:none!important;gap:0;overflow:hidden;}
nav.open .links{display:flex!important;flex-direction:column;gap:0;width:min(86vw,500px);margin:0;position:relative;z-index:2;}
nav.open .links::before{content:"";position:absolute;top:-36px;left:50%;transform:translateX(-50%);width:30px;height:2px;background:var(--gold);}
nav.open .links a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;padding:30px 0!important;width:100%;text-align:center;border-bottom:1px solid rgba(27,36,54,.1);transform:none!important;transition:opacity .2s ease;}
nav.open .links a:last-child{border-bottom:none;}
nav.open .links a .en{display:none;}
nav.open .links a .jp{font-family:var(--font-head)!important;font-size:clamp(20px,2.4vw,24px)!important;font-weight:500;letter-spacing:.08em;color:var(--ink)!important;}
nav.open .links a:hover{opacity:1;}
nav.open .links a:hover .jp,nav.open .links a.current .jp{color:var(--gold-deep)!important;}

/* ▼ モバイルでは「トップへ戻る」(↑)ボタンを非表示（ユーザー指定 2026-06-09） */
@media(max-width:860px){.to-top{display:none!important;}}

/* ▼ HERO撤去ページ：固定ナビ分の上余白（ユーザー指定 2026-06-09） */
body.no-hero{padding-top:80px;}
@media(max-width:860px){body.no-hero{padding-top:60px;}}
/* ヘッダーと最初の見出しの間隔を about（代表あいさつ）に揃える（ユーザー指定 2026-06-10） */
body.no-hero .svc-lead{padding-top:150px;}
body.no-hero .story.vmv{padding-top:122px!important;}   /* .story{padding:0!important} を上書き */
@media(max-width:860px){
  body.no-hero .svc-lead{padding-top:88px;}
  body.no-hero .story.vmv{padding-top:72px!important;}
}

/* ▼ 事業内容リード文：制作の流れ（sec-title）と同じ大きさ・太さに（ユーザー指定 2026-06-09） */
.svc-lead .mvv-stmt{font-family:var(--font-head);font-size:31px;font-weight:600;letter-spacing:.1em;line-height:1.7;color:var(--ink);}
.svc-lead .mvv-stmt .ln{display:block;}
.svc-lead .mvv-stmt .u{display:inline-block;}
.svc-lead .cc-rule{margin:26px auto 4px;}
@media(max-width:860px){.svc-lead .mvv-stmt{font-size:23px;}}
@media(max-width:520px){.svc-lead .mvv-stmt{font-size:21px;}}

/* ▼ メニュー項目クリック→ページ名が中央に出て消える演出（ユーザー指定 2026-06-09） */
#nav-reveal{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:var(--washi);opacity:0;visibility:hidden;text-align:center;padding:24px;}
#nav-reveal.on{opacity:1;visibility:visible;transition:opacity .3s ease;}
#nav-reveal .nr-text{font-family:var(--font-head);font-size:clamp(28px,5vw,52px);font-weight:500;letter-spacing:.12em;color:var(--ink);opacity:0;transform:translateY(16px);}
#nav-reveal.on .nr-text{opacity:1;transform:translateY(0);transition:opacity .6s ease .05s,transform .7s cubic-bezier(.2,.7,.2,1) .05s;}
#nav-reveal.on.textout .nr-text{opacity:0;transform:translateY(-10px);transition:opacity .45s ease,transform .45s ease;}

/* ▼ MVV見出し「いつも、いま、これから。」はモバイルでも1行に（ユーザー指定 2026-06-10） */
@media(max-width:860px){.story.vmv .kb-title{font-size:clamp(17px,5.4vw,24px);letter-spacing:.05em;white-space:nowrap;}}

/* ▼ 物語「はじめての、カメラ」の写真を大きく（ユーザー指定 2026-06-10） */
.kp-photo-lg .story-fig img{max-height:40vh;}
.kp-photo-lg .story-fig figcaption{font-size:11px;line-height:1.55;}
@media(max-width:860px){.kp-photo-lg .story-fig img{max-height:30vh;}}

/* ▼ Aboutの見出し下にも金の棒（代表あいさつ／Yorakuの物語／事業情報・ユーザー指定 2026-06-10） */
.profile .sec-title,.contact-methods .sec-title{margin-bottom:0;}
.profile .cc-rule,.contact-methods .cc-rule{margin:18px auto 40px;}
.story:not(.vmv) .kb-head .cc-rule{margin:14px auto 4px;}