@charset "utf-8";
/* =============================================================
   自社ポータル用の上書き（テンプレ13からの差分だけをここに書く）
   - サービスを2枠 → 4枠（2行）／段違いをやめて高さを揃える
   - 目的別メニュー・ギャラリー・特集Bは廃止
   - ロゴはcraftのPNG（白地用は反転フィルタ）
   ============================================================= */

/* ---- ロゴ（白版はフィルタで反転して使う） ---- */
img.is-white { filter: brightness(0) invert(1); }

/* ---- サービス見出し（WORKS & CASE と同じ大きさ） ---- */
.service-head { width: var(--container); margin: 0 auto; text-align: center; padding: 110px 0 60px; }
.service-head .ttl-en {
  text-align: center; font-size: 40px; font-size: 4rem; line-height: 1.0;
  position: relative; top: -16px;
}
.service-head .ttl-en span { font-weight: 400 !important; }
.service-head-txt { line-height: 2.0; margin-top: 24px; }

/* ---- サービス4枠（2行・段違いなし／高さ揃え） ---- */
#service { padding-bottom: 140px; }
.service-inner { align-items: stretch; }
.service-box { display: flex; flex-direction: column; }
.service-box.is-second { margin-top: 0; margin-left: 0; }   /* ★段違いを解除 */
.service-txt { flex: 1; display: flex; flex-direction: column; }
.service-txt .txt { flex: 0 0 auto; }
.service-txt .btn,
.service-box.is-second .service-txt .btn { margin-top: auto; padding-top: 70px; }
.service-txt .note { font-size: 13px; font-size: 1.3rem; color: var(--c-sub); }

/* 淡い色面は行ごとに1本ずつ敷く（位置はブラウザで実測して調整） */
#service::before {
  content: ""; position: absolute; left: 0;
  width: 100%; height: 440px; background: var(--c-tint); display: block; z-index: -1;
  top: 542px;
}
#service::after { top: 1272px; height: 440px; }

.service-inner + .service-inner { margin-top: 150px; }

/* 通し番号を 01→04 に振り直す */
.service-inner:nth-child(2) .service-box           { background-image: url(../images/num-01.svg); }
.service-inner:nth-child(2) .service-box.is-second { background-image: url(../images/num-02.svg); }
.service-inner:nth-child(3) .service-box           { background-image: url(../images/num-03.svg); }
.service-inner:nth-child(3) .service-box.is-second { background-image: url(../images/num-04.svg); }

@media screen and (max-width: 767px) {
  .service-head { width: 100%; padding: 60px 4% 40px; }
  .service-head .ttl-en { font-size: 30px; font-size: 3rem; top: 0; }
  .service-head-txt { text-align: left; line-height: 1.9; }
  #service { padding-bottom: 60px; }
  #service::before, #service::after { display: none; }
  .service-inner + .service-inner { margin-top: 0; }
  .service-box { display: block; }
  .service-txt { display: block; }
  .service-txt .btn,
  .service-box.is-second .service-txt .btn { margin: 40px auto 0; padding-top: 0; }
}

/* ---- 特集（FOR PARTNERS）：背景の大きな番号は使わない ---- */
#feature-a { background-image: none; }

/* ---- CONTACT：チャットワークもボタンにする（主色＝メール／副色＝チャットワーク） ---- */
.chat-box .btn { width: 410px; margin: 0 auto; }
.chat-box .btn a {
  background: var(--c-sub); color: #fff;
  font-size: 20px; font-size: 2rem;
  line-height: 80px; text-align: center; display: block;
}
.chat-box .btn a::before { position: inherit; }
.chat-box .btn a:hover { background: var(--c-tint); color: var(--c-main); }
.chat-box .time { margin-top: 20px; text-align: center; line-height: 1.6; }
.chat-box .time span { font-size: 12px; font-size: 1.2rem; }

@media screen and (max-width: 767px) {
  .chat-box .btn { width: 100%; }
  .chat-box .btn a { font-size: 16px; font-size: 1.6rem; line-height: 64px; }
}

/* ---- お知らせ：FVへの食い込みをやめて、直下の普通のセクションにする ---- */
.news {
  top: 0; z-index: auto;
  padding: 90px 0 100px;
  align-items: flex-start;
}
.news .news-ttl {
  width: 260px; background: none; text-align: left; padding: 8px 0 0;
}
.news .news-ttl h2 {
  color: var(--c-heading);
  font-size: 28px; font-size: 2.8rem;
  letter-spacing: 0.08em;
}
.news .news-ttl .more { margin-top: 20px; }
.news .news-ttl .more a,
.news .more.sp a {
  /* 元テンプレの枠デザインのまま、文字だけ枠の天地中央に
     （line-height:28px＋padding-top:3px の決め打ちで下に落ちていた）
     ※base.css の .news .news-ttl .more a（緑ベタ）より強い並びにすること */
  background: none; color: var(--c-main);
  display: flex; align-items: center; justify-content: center;
  height: 30px; padding: 0; line-height: 1;
}
.news .news-ttl .more a:hover,
.news .more.sp a:hover { background: var(--c-main); color: #fff; text-decoration: none; }
.news .news-list { width: 940px; background: none; padding: 0; }
.news .news-list li {
  padding: 1.2em 0; border-bottom: 1px solid var(--c-rule);
  display: flex; align-items: baseline;
}
.news .news-list li:first-child { border-top: 1px solid var(--c-rule); }
.news .news-list li span { color: var(--c-sub); width: 8.5em; flex: 0 0 auto; padding-right: 0; }

@media screen and (max-width: 767px) {
  .news { top: 0; padding: 48px 0 40px; }
  .news .news-ttl { width: 90%; padding: 0; }
  .news .news-ttl h2 { font-size: 22px; font-size: 2.2rem; }
  .news .news-ttl .more { margin: 12px 0 0; }
  .news .news-list { width: 90%; margin: 24px auto 0; padding: 0; }
  .news .news-list li { display: block; padding: 1em 0; }
  .news .news-list li span { width: auto; display: block; margin-bottom: 4px; }
}

/* ---- サービス：本文が写真の上に乗らないようにする ----
   元テンプレは淡いイラストの上に文字を100px重ねる設計だった。
   実写に差し替えると本文が読めないので、写真を細くして重なりを解消する。 */
.service-img { width: 260px; }
.service-txt { padding-left: 300px; }

@media screen and (max-width: 767px) {
  .service-img { width: 60%; }
  .service-txt { padding-left: 4%; }
}

/* =============================================================
   FV：白ベース＋グリッドSVG（案C）
   元テンプレの非対称スプリット（右72%が写真／継ぎ目で文字色が変わる）を全面的に置き換える。
   ============================================================= */
#mv {
  width: 100%; height: auto; float: none;
  position: relative; z-index: 1; background: #fff;
}
.mv-inner {
  width: var(--container); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  min-height: 720px; padding-top: 60px;
}
#mv .mv-copy { position: static; top: auto; left: auto; width: 54%; }
#mv .mv-lead {
  position: static;
  font-size: 24px; font-size: 2.4rem;
  font-weight: 700; letter-spacing: 0.1em;
  color: var(--c-heading); line-height: 1.6;
}
#mv .mv-display {
  position: static; margin-top: 28px;
  color: var(--c-heading);
  font-family: var(--font-en); font-weight: 700;
  font-size: 85px; font-size: 8.5rem;
  line-height: 1.14; letter-spacing: 0.05em;
}
#mv .mv-display .regu { font-weight: 400; }
#mv .mv-sub {
  padding-top: 36px;
  font-size: 18px; font-size: 1.8rem;
  font-weight: 700; letter-spacing: 0.1em; line-height: 2.0;
  color: var(--c-text);
}
.mv-art { width: 42%; }
.mv-art svg { width: 100%; height: auto; display: block; }

@media screen and (max-width: 767px) {
  #mv { width: 100%; height: auto; }
  .mv-inner {
    width: 100%; display: block; min-height: 0;
    padding: 40px 4% 48px;
  }
  #mv .mv-copy { width: 100%; }
  #mv .mv-lead { font-size: 16px; font-size: 1.6rem; }
  #mv .mv-display {
    font-size: 44px; font-size: 4.4rem;
    margin-top: 16px; letter-spacing: 0.03em;
  }
  #mv .mv-sub { padding: 20px 0 0; font-size: 14px; font-size: 1.4rem; line-height: 1.9; }
  .mv-art { width: 100%; margin-top: 32px; }
}

/* ---- ヘッダー右上のCTA：白FVでは白文字・白枠だと消えるので色を付ける ---- */
#sub-nav .head-cta a { background-color: var(--c-main); border-color: var(--c-main); color: #fff; }
#sub-nav .head-cta.is-second a { background-color: var(--c-sub); border-color: var(--c-sub); }
#sub-nav .head-cta a:hover {
  background-color: #fff; border-color: var(--c-main); color: var(--c-main);
}

/* ---- ナビ：白FVでは白文字が消えるので濃色に ---- */
#global-nav .menu > li a { color: var(--c-heading); }
#global-nav .menu > li a::after { background: var(--c-heading); }

/* ---- お知らせ：全幅グレー地にする ---- */
.news {
  width: 100%;
  background: #f4f6f7;
  padding-top: 80px; padding-bottom: 88px;
  padding-left: max(4%, calc((100% - 1200px) / 2));
  padding-right: max(4%, calc((100% - 1200px) / 2));
}
.news .news-list li { border-bottom-color: #dfe4e6; }
.news .news-list li:first-child { border-top-color: #dfe4e6; }

@media screen and (max-width: 767px) {
  .news { padding: 48px 4% 40px; }
}

/* ---- FV：SVGを実機モックアップ画像に差し替え ---- */
#mv .mv-copy { width: 44%; }
.mv-art { width: 54%; }
.mv-art img { width: 100%; height: auto; display: block; }

@media screen and (max-width: 767px) {
  #mv .mv-copy { width: 100%; }
  .mv-art { width: 100%; margin-top: 28px; }
}

/* ---- FV：モックアップ差し替えに伴う調整 ----
   ・欧文が3行に折り返してナビと衝突していたので、折り返し禁止＋サイズを76pxに
   ・コピーの開始位置をナビ（下端129px）より下げる */
.mv-inner { padding-top: 140px; }
#mv .mv-copy { width: 48%; }
.mv-art { width: 50%; }
#mv .mv-display { font-size: 76px; font-size: 7.6rem; white-space: nowrap; }

@media screen and (max-width: 767px) {
  .mv-inner { padding-top: 40px; }
  #mv .mv-copy { width: 100%; }
  .mv-art { width: 100%; }
  #mv .mv-display { font-size: 40px; font-size: 4.0rem; white-space: normal; }
}

/* ---- FV：モックアップ画像は一旦取り下げ、SVGに戻す ---- */
#mv .mv-copy { width: 50%; }
.mv-art { width: 42%; }
.mv-art svg { width: 100%; height: auto; display: block; }

/* ---- FV：PSDテンプレで作ったモックアップを設置 ---- */
#mv .mv-copy { width: 42%; }
.mv-art { width: 56%; margin-right: -60px; }   /* 少しコンテナ外へ出して大きく見せる */
.mv-art img { width: 100%; height: auto; display: block; }

@media screen and (max-width: 767px) {
  #mv .mv-copy { width: 100%; }
  .mv-art { width: 100%; margin-right: 0; }
}

/* ---- FV：欧文を「WEB MARKETING & DESIGN」に変更（1行目が長くなるので幅と級数を調整）---- */
#mv .mv-copy { width: 46%; }
.mv-art { width: 52%; }
#mv .mv-display { font-size: 52px; font-size: 5.2rem; white-space: nowrap; }

@media screen and (max-width: 767px) {
  #mv .mv-copy { width: 100%; }
  .mv-art { width: 100%; }
  #mv .mv-display { font-size: 32px; font-size: 3.2rem; white-space: normal; }
}

/* =============================================================
   FV：案B（リード文だけ黒帯）＋ 欧文03（WEB DESIGN & MARKETING）
   ============================================================= */
#mv .mv-lead {
  display: inline-block;
  background: #0f1417; color: #fff;
  padding: 0.5em 1.1em;
  letter-spacing: 0.12em;
  font-size: 20px; font-size: 2.0rem;
}
#mv .mv-display {
  font-size: 60px; font-size: 6.0rem;   /* 10字/11字なので52pxより上げられる */
  margin-top: 30px;
  white-space: nowrap;
}
#mv .mv-display .accent { color: var(--c-sub); }
#mv .mv-sub { font-weight: 400; color: #4a5257; }

@media screen and (max-width: 767px) {
  #mv .mv-lead { font-size: 15px; font-size: 1.5rem; padding: 0.5em 0.9em; }
  #mv .mv-display { font-size: 34px; font-size: 3.4rem; margin-top: 20px; white-space: normal; }
}

/* ---- FV：色の切り替えを「5文字目」で縦に通す（DESIGN の D／MARKETING の R）---- */
#mv .mv-display { color: #0f1417; }
#mv .mv-display .accent { color: var(--c-sub); }
#mv .mv-lead { border-radius: 0; }   /* 楕円は却下・元の角のままに戻す */

/* ---- FV：欧文は2行とも同じ太さ（細くしない）---- */
#mv .mv-display .regu { font-weight: 700; }

/* ---- FV：緑が細く見えるのはコントラスト差。濃い方の緑にして黒と見え方を揃える ---- */
/* 濃い緑は却下。元の #2da8b5 のまま */

/* ---- FV：reset.css が span に font-weight:normal を当てていて、
        色だけ指定した .accent が400に落ちていた。span側で継承を戻す ---- */
#mv .mv-display span { font-weight: inherit; }

/* =============================================================
   FV：元テンプレの配分（リード24px / 欧文85px / リード文18px）に戻す
   欧文が長いぶんコピー欄を広げる
   ============================================================= */
#mv .mv-copy { width: 64%; }
.mv-art { width: 34%; margin-right: -40px; }
#mv .mv-lead { font-size: 24px; font-size: 2.4rem; }
#mv .mv-display { font-size: 85px; font-size: 8.5rem; margin-top: 34px; }
#mv .mv-sub { padding-top: 40px; font-size: 18px; font-size: 1.8rem; }

/* ---- ABOUT：色面が青すぎるので彩度を落とした深緑にする ---- */
#about .about-txt,
#about::before,
#about .about-inner::before { }
:root { --c-panel: #14383c; }

@media screen and (max-width: 767px) {
  #mv .mv-copy { width: 100%; }
  .mv-art { width: 100%; margin-right: 0; }
  #mv .mv-lead { font-size: 15px; font-size: 1.5rem; }
  #mv .mv-display { font-size: 34px; font-size: 3.4rem; margin-top: 20px; }
  #mv .mv-sub { padding-top: 20px; font-size: 14px; font-size: 1.4rem; }
}

/* =============================================================
   FV：縦積みに変更（欧文はフル幅で大きく／モックアップも大きく）
   黒ベタはやめて、リード文はアンダーラインに
   ============================================================= */
.mv-inner { display: block; min-height: 0; padding: 130px 0 90px; }
.mv-head { width: 100%; }
#mv .mv-lead {
  display: inline-block;
  background: none; color: var(--c-heading);
  padding: 0 0 0.5em;
  border-bottom: 2px solid var(--c-heading);
  letter-spacing: 0.12em;
  font-size: 22px; font-size: 2.2rem;
}
#mv .mv-display { font-size: 92px; font-size: 9.2rem; margin-top: 40px; }

.mv-body {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-top: 44px;
}
#mv .mv-sub { width: 33%; padding-top: 0; padding-bottom: 10px; line-height: 2.2; }
.mv-art { width: 62%; margin-right: 0; }

@media screen and (max-width: 767px) {
  .mv-inner { padding: 40px 4% 48px; }
  #mv .mv-lead { font-size: 15px; font-size: 1.5rem; padding-bottom: 0.4em; }
  #mv .mv-display { font-size: 34px; font-size: 3.4rem; margin-top: 20px; }
  .mv-body { display: block; margin-top: 24px; }
  #mv .mv-sub { width: 100%; padding-bottom: 0; }
  .mv-art { width: 100%; margin-top: 26px; }
}

/* =============================================================
   FV：2カラムに戻す（左コピー／右モックアップ）
   欧文は全部黒。級数は2カラムに収まるところまで下げる
   ============================================================= */
.mv-inner {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 720px; padding: 150px 0 80px;
}
#mv .mv-copy { width: 51%; }
.mv-art { width: 46%; margin-right: -30px; }
#mv .mv-display {
  font-size: 68px; font-size: 6.8rem;
  margin-top: 34px;
  color: var(--c-heading);
}
#mv .mv-display .accent { color: inherit; }   /* 緑をやめて全部黒 */
#mv .mv-sub { width: 100%; padding-top: 36px; padding-bottom: 0; line-height: 2.1; }

@media screen and (max-width: 767px) {
  .mv-inner { display: block; padding: 40px 4% 48px; min-height: 0; }
  #mv .mv-copy { width: 100%; }
  .mv-art { width: 100%; margin: 26px 0 0; }
  #mv .mv-display { font-size: 34px; font-size: 3.4rem; margin-top: 20px; }
}

/* ---- FV：モックアップを優先して大きく。欧文はその幅に収まる級数に落とす ---- */
#mv .mv-copy { width: 43%; }
.mv-art { width: 55%; margin-right: -40px; }
#mv .mv-display { font-size: 58px; font-size: 5.8rem; margin-top: 30px; }
#mv .mv-lead { font-size: 19px; font-size: 1.9rem; }
#mv .mv-sub { font-size: 16px; font-size: 1.6rem; padding-top: 30px; line-height: 2.0; }

@media screen and (max-width: 767px) {
  #mv .mv-copy { width: 100%; }
  .mv-art { width: 100%; margin: 26px 0 0; }
  #mv .mv-display { font-size: 34px; font-size: 3.4rem; }
  #mv .mv-lead { font-size: 15px; font-size: 1.5rem; }
  #mv .mv-sub { font-size: 14px; font-size: 1.4rem; }
}

/* ---- FV：モックを少し小さくして、欧文を少し戻す ---- */
#mv .mv-copy { width: 47%; }
.mv-art { width: 50%; margin-right: -20px; }
#mv .mv-display { font-size: 63px; font-size: 6.3rem; }

/* =============================================================
   ABOUT：案1（色面をやめて白地／左に緑の縦線）
   暗い面を前提にした文字色（白・濃緑）も戻す
   ============================================================= */
#about::before {
  width: 5px;                     /* 65%の色面 → 左端の細い線に */
  background: var(--c-sub);
  z-index: 0;
}
#about::after { background: var(--c-tint); }   /* 右の淡い四角はそのまま */
.about-txt { padding-left: 34px; }
.about-txt .ttl-en { color: var(--c-heading); }
.about-txt .ttl-ja { color: var(--c-main); }
.about-txt .lead-ja { color: var(--c-heading); }
.about-txt .txt { color: var(--c-text); }

@media screen and (max-width: 767px) {
  #about::before { width: 4px; }
  .about-txt { padding-left: 18px; }
}

/* ---- サービス：淡い色帯の位置がレイアウト変更で合わなくなっていたので撤去 ---- */
#service::before, #service::after { display: none; }

/* =============================================================
   サービス：数字は案A（英字タイトルの左にインライン）
   背景の巨大な袋文字は撤去
   ============================================================= */
.service-box,
.service-inner:nth-child(2) .service-box,
.service-inner:nth-child(2) .service-box.is-second,
.service-inner:nth-child(3) .service-box,
.service-inner:nth-child(3) .service-box.is-second { background-image: none; }

.service-txt .ttl-en { display: flex; align-items: baseline; gap: 14px; }
.service-txt .ttl-en span { font-weight: inherit; }   /* reset.css が span を400にするため */
.service-txt .sv-num {
  font-size: 16px; font-size: 1.6rem;
  letter-spacing: 0.1em;
  color: var(--c-sub);
  flex: 0 0 auto;
}

@media screen and (max-width: 767px) {
  .service-txt .ttl-en { gap: 10px; }
  .service-txt .sv-num { font-size: 13px; font-size: 1.3rem; }
}

/* =============================================================
   サービス：案Yで作り直し（全幅・左右交互／袋数字150pxを背後に）
   旧 .service-box / .service-img / .service-txt 系は未使用
   ============================================================= */
#service { width: 100%; padding: 110px 0 120px; background: #fff; }
.sv-head { width: var(--container); margin: 0 auto 56px; text-align: center; }
.sv-head-en {
  font-family: var(--font-en); font-weight: 700;
  font-size: 40px; font-size: 4rem; letter-spacing: 0.06em; color: var(--c-heading);
}
.sv-head-ja { font-size: 14px; font-size: 1.4rem; letter-spacing: 0.12em; margin-top: 10px; }
.sv-head-txt { margin-top: 22px; line-height: 2.0; }

.sv-list { width: var(--container); margin: 0 auto; }
.sv-item { display: flex; align-items: center; gap: 60px; padding: 56px 0; }
.sv-item + .sv-item { border-top: 1px solid #e6eaeb; }
.sv-item:nth-child(even) { flex-direction: row-reverse; }
.sv-ph { width: 54%; aspect-ratio: 16 / 9; overflow: hidden; flex: 0 0 auto; }
.sv-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }

.sv-t { flex: 1; position: relative; }
.sv-no {
  position: absolute; right: 0; top: -74px;
  font-family: var(--font-en); font-weight: 700;   /* reset.css がspanを400にするので明示 */
  font-size: 150px; font-size: 15rem; line-height: 1;
  color: transparent; -webkit-text-stroke: 1.5px #dfe7e8;
  z-index: 0;
}
.sv-t > *:not(.sv-no) { position: relative; z-index: 1; }
.sv-en {
  font-family: var(--font-en); font-weight: 700;
  font-size: 38px; font-size: 3.8rem; letter-spacing: 0.03em;
  color: var(--c-heading); line-height: 1.15;
}
.sv-ja { margin-top: 12px; padding-left: 34px; position: relative; font-size: 14px; font-size: 1.4rem; letter-spacing: 0.06em; }
.sv-ja::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 24px; height: 1px; background: var(--c-main); }
.sv-body { margin-top: 20px; line-height: 2.1; font-size: 15px; font-size: 1.5rem; color: #4a5257; }
.sv-more { margin-top: 26px; }
.sv-more a {
  font-family: var(--font-en); font-weight: 700;
  font-size: 14px; font-size: 1.4rem; letter-spacing: 0.14em;
  color: var(--c-main); display: inline-flex; align-items: center; gap: 10px;
  border-bottom: 1px solid var(--c-sub); padding-bottom: 6px;
}
.sv-more a::after { content: "→"; }
.sv-more a:hover { color: var(--c-sub); text-decoration: none; }

@media screen and (max-width: 767px) {
  #service { padding: 60px 0 70px; }
  .sv-head, .sv-list { width: 100%; padding: 0 4%; }
  .sv-head-en { font-size: 30px; font-size: 3rem; }
  .sv-item, .sv-item:nth-child(even) { display: block; padding: 36px 0; }
  .sv-ph { width: 100%; }
  .sv-t { margin-top: 22px; }
  .sv-no { position: static; display: block; font-size: 56px; font-size: 5.6rem; margin-bottom: 8px; }
  .sv-en { font-size: 26px; font-size: 2.6rem; }
  .sv-body { font-size: 14px; font-size: 1.4rem; }
}

/* =============================================================
   FV：MARKETING に手書き風の黄色マーカー
   ============================================================= */
#mv .mv-display .mk { position: relative; display: inline-block; }
#mv .mv-display .mk::before {
  content: "";
  position: absolute; left: -1.5%; right: -3%; bottom: 0.02em;
  height: 0.40em;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 44' preserveAspectRatio='none'><path d='M6 30 C 52 18, 104 27, 158 21 C 214 15, 266 24, 314 15 L 316 33 C 268 42, 212 33, 158 38 C 106 43, 54 36, 4 41 Z' fill='%23ffd84d'/></svg>") no-repeat center / 100% 100%;
  transform: rotate(-0.8deg);
  z-index: -1;
  mix-blend-mode: multiply;
}

/* =============================================================
   ABOUT：作り直し（ごく薄い水色の斜め地／写真を右に大きく）
   旧 .about-inner / .about-txt / .about-img と装飾は未使用
   ============================================================= */
#about {
  width: 100%; margin: 0; padding: 130px 0 140px;
  background: #f1fafb;
  clip-path: polygon(0 48px, 100% 0, 100% 100%, 0 calc(100% - 48px));
  position: relative;
}
#about::before, #about::after { display: none; }   /* 旧：65%の色面・水色の四角 */
.ab-inner { width: var(--container); margin: 0 auto; display: flex; align-items: center; gap: 56px; }
.ab-txt { width: 40%; }
.ab-en {
  font-family: var(--font-en); font-weight: 700;
  font-size: 44px; font-size: 4.4rem; line-height: 1.0; letter-spacing: 0.05em;
  color: var(--c-heading);
}
.ab-ja { font-size: 14px; font-size: 1.4rem; letter-spacing: 0.1em; margin-top: 14px; padding-left: 34px; position: relative; color: var(--c-main); }
.ab-ja::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 24px; height: 1px; background: var(--c-main); }
.ab-lead {
  font-size: 26px; font-size: 2.6rem; font-weight: 700; line-height: 1.8;
  margin-top: 34px; color: var(--c-heading);
}
.ab-body { margin-top: 26px; line-height: 2.2; font-size: 15px; font-size: 1.5rem; color: #3d474b; }
.ab-ph { width: 56%; flex: 0 0 auto; }
.ab-ph img { width: 100%; height: auto; display: block; }

/* =============================================================
   VOICE：お客様の声（新設）
   ============================================================= */
#voice { width: 100%; padding: 110px 0 120px; background: #fff; }
.vo-head { width: var(--container); margin: 0 auto 50px; text-align: center; }
.vo-en { font-family: var(--font-en); font-weight: 700; font-size: 40px; font-size: 4rem; letter-spacing: 0.06em; color: var(--c-heading); }
.vo-ja { font-size: 14px; font-size: 1.4rem; letter-spacing: 0.12em; margin-top: 10px; }
.vo-list { width: var(--container); margin: 0 auto; display: flex; justify-content: space-between; gap: 32px; }
.vo-list li {
  flex: 1; background: #f7fbfc; border-top: 3px solid var(--c-sub);
  padding: 42px 34px 34px; position: relative;
}
.vo-list li::before {
  content: "“"; position: absolute; left: 26px; top: 6px;
  font-family: var(--font-en); font-weight: 700; font-size: 64px; line-height: 1; color: var(--c-sub); opacity: .35;
}
.vo-txt { font-size: 15px; font-size: 1.5rem; line-height: 2.1; color: #3d474b; position: relative; }
.vo-who { margin-top: 24px; font-size: 13px; font-size: 1.3rem; font-weight: 700; color: var(--c-heading); }
.vo-who span { display: block; font-weight: 400; font-size: 12px; font-size: 1.2rem; color: #7b8488; margin-top: 5px; }

@media screen and (max-width: 767px) {
  #about { padding: 60px 0 70px; clip-path: polygon(0 24px, 100% 0, 100% 100%, 0 calc(100% - 24px)); }
  .ab-inner { display: block; width: 100%; padding: 0 4%; }
  .ab-txt, .ab-ph { width: 100%; }
  .ab-ph { margin-top: 28px; }
  .ab-en { font-size: 32px; font-size: 3.2rem; }
  .ab-lead { font-size: 20px; font-size: 2rem; margin-top: 24px; }
  #voice { padding: 60px 0 66px; }
  .vo-head, .vo-list { width: 100%; padding: 0 4%; }
  .vo-list { display: block; }
  .vo-list li + li { margin-top: 20px; }
}

/* ---- マーカー：下線に見えていたので、文字の下半分に食い込ませる ---- */
#mv .mv-display .mk::before { height: 0.56em; bottom: 0.04em; }

/* ---- ABOUT：WORKSの帯（左上・右下を三角で落とす）の“反対”＝右上・左下を落とす ---- */
#about {
  width: 95%; margin: 0 auto;
  padding: 120px 0 130px;
  background: #f1fafb;
  clip-path: polygon(0 0, calc(100% - 150px) 0, 100% 148px,
                     100% 100%, 150px 100%, 0 calc(100% - 148px));
}

/* ---- VOICE：カードをやめて罫線主体に。ひと言はマーカーで拾う ---- */
.vo-list li {
  background: #fff; border: 1px solid #e3ebec; border-top: 3px solid var(--c-sub);
  padding: 46px 34px 34px;
}
.vo-list li::before { font-size: 72px; opacity: .28; top: 10px; }
.vo-txt .mk { position: relative; display: inline; background: linear-gradient(transparent 58%, rgba(255,216,77,.85) 58%); }

@media screen and (max-width: 767px) {
  #about { width: 100%; clip-path: polygon(0 0, calc(100% - 70px) 0, 100% 68px, 100% 100%, 70px 100%, 0 calc(100% - 68px)); }
}

/* ---- FV：マーカーは不採用。念のため無効化 ---- */
#mv .mv-display .mk::before { display: none; }

/* =============================================================
   VOICE：案D（縦積み・左に袋数字／引用は明朝）
   ============================================================= */
.vo-list { width: var(--container); margin: 0 auto; display: block; }
.vo-item { display: flex; gap: 40px; padding: 38px 0; align-items: flex-start; }
.vo-item + .vo-item { border-top: 1px solid #e6eaeb; }
.vo-no {
  font-family: var(--font-en); font-weight: 700;   /* reset.css がspanを400にするので明示 */
  font-size: 48px; font-size: 4.8rem; line-height: 1;
  color: transparent; -webkit-text-stroke: 1.2px #cfe0e2;
  flex: 0 0 84px;
}
.vo-t { flex: 1; }
.vo-q {
  font-family: 'Noto Serif JP', serif; font-weight: 500;
  font-size: 17px; font-size: 1.7rem; line-height: 2.1; color: var(--c-heading);
}
.vo-who { margin-top: 16px; font-size: 13px; font-size: 1.3rem; font-weight: 700; color: var(--c-heading); }
.vo-who span { display: block; font-weight: 400; font-size: 12px; font-size: 1.2rem; color: #7b8488; margin-top: 5px; }

/* ---- WORKS：VIEW MOREをサービスと同じテキストリンクに ---- */
.wk-more { text-align: center; margin-top: 10px; }

@media screen and (max-width: 767px) {
  .vo-list { width: 100%; padding: 0 4%; }
  .vo-item { display: block; padding: 26px 0; }
  .vo-no { display: block; font-size: 34px; font-size: 3.4rem; margin-bottom: 10px; }
  .vo-q { font-size: 15px; font-size: 1.5rem; }
}

/* ---- NEWS と ABOUT の間に白の余白を入れる（帯が接していて窮屈だった）---- */
#about { margin-top: 80px; margin-bottom: 20px; }

/* ---- 特集（制作会社・広告代理店の方へ）：背景をグレーに ---- */
#feature-a { background-color: #f4f6f7; padding: 120px 0 110px; }
#feature-a::after { background: #e7edee; }   /* 右の淡い四角はグレー地に合わせる */

@media screen and (max-width: 767px) {
  #about { margin-top: 40px; margin-bottom: 10px; }
  #feature-a { padding: 60px 0 60px; }
}

/* =============================================================
   CONTACT：背景写真をやめて、締めのCTAゾーンに作り直し
   ============================================================= */
#contact {
  width: 100%; height: auto; padding: 110px 0 120px;
  background: var(--c-main); background-image: none;
  text-align: center; opacity: 1; transform: none;
}
#contact::before, #contact::after { display: none; }
.ct-inner { width: var(--container); margin: 0 auto; }
.ct-en {
  font-family: var(--font-en); font-weight: 700;
  font-size: 40px; font-size: 4rem; letter-spacing: 0.06em; color: #fff;
}
.ct-ja { font-size: 14px; font-size: 1.4rem; letter-spacing: 0.12em; margin-top: 10px; color: #cfe9ec; }
.ct-lead { margin-top: 28px; line-height: 2.1; font-size: 16px; font-size: 1.6rem; color: #eaf8fa; }
.ct-lead strong { color: #fff; }
.ct-btns { margin-top: 40px; display: flex; justify-content: center; gap: 24px; }
.ct-btn a {
  display: block; width: 340px; line-height: 76px;
  font-size: 17px; font-size: 1.7rem; font-weight: 700; letter-spacing: 0.06em;
  transition: all var(--dur-hover);
}
.ct-btn.is-mail a { background: #fff; color: var(--c-main); }
.ct-btn.is-mail a:hover { background: var(--c-heading); color: #fff; text-decoration: none; }
.ct-btn.is-chat a { border: 2px solid #fff; color: #fff; line-height: 72px; }
.ct-btn.is-chat a:hover { background: #fff; color: var(--c-main); text-decoration: none; }
.ct-note { margin-top: 26px; font-size: 13px; font-size: 1.3rem; color: #b6dce1; }

@media screen and (max-width: 767px) {
  #contact { padding: 60px 0 66px; }
  .ct-inner { width: 100%; padding: 0 4%; }
  .ct-en { font-size: 30px; font-size: 3rem; }
  .ct-lead { font-size: 14px; font-size: 1.4rem; margin-top: 20px; }
  .ct-btns { display: block; margin-top: 28px; }
  .ct-btn a { width: 100%; line-height: 64px; font-size: 15px; font-size: 1.5rem; }
  .ct-btn.is-chat { margin-top: 14px; }
  .ct-btn.is-chat a { line-height: 60px; }
}

/* ---- 帯写真：CONTACTの下（フッターの上）へ移動 ---- */
.band { height: 300px; }

/* ---- フッター：CONTACTと同じ主色で境目が消えていたので、濃紺に変える ---- */
footer { background: #142d3c; }
footer::before { background: #0d1f2a; }   /* 左24%の濃い帯 */

@media screen and (max-width: 767px) {
  .band { height: 180px; }
}

/* ---- フッター：SERVICE欄をリンクに／バナーを画像からテキストへ ---- */
.f-info.f-b p a { color: #dfe6e8; line-height: 2.2; display: inline-block; }
.f-info.f-b p a:hover { color: var(--c-sub); text-decoration: none; }
.f-bnr .f-banner {
  display: block; width: 270px; padding: 18px 22px;
  border: 1px solid rgba(255,255,255,.35);
  transition: all var(--dur-hover);
}
.f-bnr .f-banner:hover { background: rgba(255,255,255,.08); text-decoration: none; }
.f-banner-en {
  display: block; font-family: var(--font-en); font-weight: 700;
  font-size: 11px; font-size: 1.1rem; letter-spacing: 0.2em; color: var(--c-sub);
}
.f-banner-ja { display: block; margin-top: 8px; font-size: 14px; font-size: 1.4rem; font-weight: 700; color: #fff; line-height: 1.7; }
.f-bnr li + li { margin-top: 14px; }

/* =============================================================
   下層ページ（サービス詳細・制作実績）の枠組み
   ============================================================= */
.pg-head { width: 100%; background: #f1fafb; padding: 190px 0 90px; }
.pg-inner { width: var(--container); margin: 0 auto; }
.pg-crumb { font-size: 12px; font-size: 1.2rem; color: #7b8488; letter-spacing: 0.06em; }
.pg-crumb a { color: var(--c-main); }
.pg-crumb span { margin: 0 0.8em; color: #b9c4c8; }
.pg-no {
  font-family: var(--font-en); font-weight: 700;
  font-size: 60px; font-size: 6rem; line-height: 1; margin-top: 26px;
  color: transparent; -webkit-text-stroke: 1.2px #b9dde1;
}
.pg-en {
  font-family: var(--font-en); font-weight: 700;
  font-size: 54px; font-size: 5.4rem; letter-spacing: 0.04em; line-height: 1.1;
  color: var(--c-heading); margin-top: 10px;
}
.pg-ja { margin-top: 14px; padding-left: 34px; position: relative; font-size: 15px; font-size: 1.5rem; letter-spacing: 0.08em; color: var(--c-main); }
.pg-ja::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 24px; height: 1px; background: var(--c-main); }
.pg-lead { margin-top: 28px; max-width: 760px; line-height: 2.1; font-size: 16px; font-size: 1.6rem; color: #3d474b; }

.pg-body { width: 100%; background: #fff; padding: 100px 0 110px; }
.pg-sec { width: var(--container); margin: 0 auto; }
.pg-sec + .pg-sec { margin-top: 86px; }
.pg-h2 {
  font-size: 24px; font-size: 2.4rem; font-weight: 700; color: var(--c-heading);
  padding-bottom: 16px; border-bottom: 1px solid #e6eaeb; margin-bottom: 34px;
}
.pg-todo {
  background: #fffaf0; border: 1px dashed #e0c48a; color: #8a6d32;
  padding: 18px 22px; font-size: 14px; font-size: 1.4rem; line-height: 1.9;
}
.pg-cards { display: flex; gap: 28px; }
.pg-cards li { flex: 1; border: 1px solid #e3ebec; padding: 28px 26px; }
.pg-cards h2, .pg-cards h3 { font-size: 17px; font-size: 1.7rem; font-weight: 700; color: var(--c-heading); }
.pg-cards p { margin-top: 12px; font-size: 14px; font-size: 1.4rem; line-height: 2.0; color: #4a5257; }
.pg-steps { display: block; }
.pg-steps li { display: flex; gap: 24px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid #eef1f2; }
.pg-steps li span { font-family: var(--font-en); font-weight: 700; font-size: 20px; font-size: 2rem; color: var(--c-sub); flex: 0 0 56px; }
.pg-steps li p { font-size: 15px; font-size: 1.5rem; }

@media screen and (max-width: 767px) {
  .pg-head { padding: 110px 0 50px; }
  .pg-inner, .pg-sec { width: 100%; padding: 0 4%; }
  .pg-en { font-size: 32px; font-size: 3.2rem; }
  .pg-no { font-size: 40px; font-size: 4rem; }
  .pg-body { padding: 50px 0 60px; }
  .pg-sec + .pg-sec { margin-top: 50px; }
  .pg-cards { display: block; }
  .pg-cards li + li { margin-top: 16px; }
  .pg-steps li { display: block; }
  .pg-steps li span { display: block; margin-bottom: 6px; }
}

/* =============================================================
   制作実績ページ（works.html）
   ============================================================= */
.pg-count { margin-top: 22px; font-size: 13px; font-size: 1.3rem; color: #7b8488; letter-spacing: 0.06em; }
.pg-count strong { font-family: var(--font-en); font-size: 20px; font-size: 2rem; color: var(--c-main); margin: 0 0.2em; }

.wk-grid { width: var(--container); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px 32px; }
.wk-card { border: 1px solid #e6eaeb; background: #fff; display: flex; flex-direction: column; }
.wk-ph { aspect-ratio: 16 / 10; overflow: hidden; background: #eef2f3; }
.wk-ph img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.wk-ph.is-empty { display: flex; align-items: center; justify-content: center; }
.wk-ph.is-empty span { font-size: 12px; font-size: 1.2rem; color: #9aa5a8; letter-spacing: 0.08em; }
.wk-in { padding: 24px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.wk-cat {
  display: inline-block; align-self: flex-start;
  font-size: 11px; font-size: 1.1rem; letter-spacing: 0.08em;
  color: var(--c-main); border: 1px solid var(--c-sub); padding: 3px 10px;
}
.wk-client { margin-top: 14px; font-size: 12px; font-size: 1.2rem; color: #7b8488; }
.wk-title { margin-top: 6px; font-size: 16px; font-size: 1.6rem; font-weight: 700; line-height: 1.7; color: var(--c-heading); }
.wk-point { margin-top: 12px; font-size: 13px; font-size: 1.3rem; line-height: 1.95; color: #4a5257; flex: 1; }
.wk-meta { margin-top: 18px; padding-top: 16px; border-top: 1px solid #eef1f2; font-size: 12px; font-size: 1.2rem; line-height: 1.9; }
.wk-meta dt { float: left; clear: left; width: 5.5em; color: #8b979a; }
.wk-meta dd { padding-left: 5.5em; color: #3d474b; }

@media screen and (max-width: 767px) {
  .wk-grid { width: 100%; padding: 0 4%; grid-template-columns: 1fr; gap: 24px; }
}

/* =============================================================
   実績カード：craft の works に合わせて作り直し
   （トップの4件・実績ページの12件で同じ部品を使う）
   ============================================================= */
.wk-grid { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 46px 32px; }
.wk-grid.is-top { grid-template-columns: repeat(4, 1fr); gap: 30px 24px; margin: 44px 0 70px; text-align: left; }
.wk-card { background: none; border: 0; display: block; }
.wk-card a { display: block; color: inherit; }
.wk-card a:hover { text-decoration: none; }
.wk-card a:hover .wk-ph img { opacity: .82; }
.wk-ph { aspect-ratio: 16 / 10; overflow: hidden; background: #eef2f3; }
.wk-ph img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; transition: opacity var(--dur-hover); }
.wk-in { padding: 0; }
.wk-title { margin-top: 18px; font-size: 16px; font-size: 1.6rem; font-weight: 700; line-height: 1.7; color: var(--c-heading); }
.wk-desc { margin-top: 10px; font-size: 13px; font-size: 1.3rem; line-height: 1.95; color: #4a5257; }
.wk-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.wk-tags li {
  font-family: var(--font-en); font-weight: 700;
  font-size: 11px; font-size: 1.1rem; letter-spacing: 0.08em;
  color: var(--c-main); border: 1px solid #bfe0e4; padding: 3px 10px;
}

@media screen and (max-width: 767px) {
  .wk-grid, .wk-grid.is-top { grid-template-columns: 1fr; gap: 26px; }
}

/* =============================================================
   実績カード：craft と同じ「縦長のページプレビュー」に作り直し
   16:10で切り抜くとLPの上しか見えず汚かったため
   ============================================================= */
.wk-grid { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 24px; }
.wk-grid.is-top { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 24px; margin: 44px 0 64px; }
.wk-card {
  background: #fff; border: 1px solid #e6eaeb; border-radius: 12px; overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.wk-card:hover { border-color: var(--c-sub); transform: translateY(-3px); box-shadow: 0 8px 24px rgba(18,106,116,.10); }
.wk-card > a { display: flex; flex-direction: column; height: 100%; }
.wk-ph { height: 520px; aspect-ratio: auto; background: #f5f8f9; overflow: hidden; flex: 0 0 auto; }
.wk-ph img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.wk-in { padding: 20px 20px 22px; display: flex; flex-direction: column; flex: 1; }
.wk-card > a > .wk-cat,
.wk-card > a > .wk-title { padding: 0 20px; }
.wk-card > a > .wk-cat { padding-top: 20px; }
.wk-card > a > .wk-title { padding-bottom: 22px; }
.wk-cat {
  font-family: var(--font-en); font-weight: 700;
  font-size: 11px; font-size: 1.1rem; letter-spacing: 0.06em; color: var(--c-sub);
  margin-bottom: 10px;
}
.wk-title { margin-top: 0; font-size: 15px; font-size: 1.5rem; font-weight: 700; line-height: 1.7; color: var(--c-heading); }
.wk-desc { margin-top: 10px; font-size: 13px; font-size: 1.3rem; line-height: 1.85; color: #4a5257; }

@media screen and (max-width: 1100px) {
  .wk-grid, .wk-grid.is-top { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media screen and (max-width: 767px) {
  .wk-grid, .wk-grid.is-top { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
  .wk-ph { height: 300px; }
  .wk-in { padding: 14px 14px 16px; }
  .wk-card > a > .wk-cat { padding: 14px 14px 0; }
  .wk-card > a > .wk-title { padding: 0 14px 16px; }
  .wk-title { font-size: 13px; font-size: 1.3rem; }
}

/* =============================================================
   FV下の SCROLL インジケーター
   ============================================================= */
#mv { padding-bottom: 70px; }
.scroll-ind {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  z-index: 5;
}
.scroll-ind:hover { text-decoration: none; }
.scroll-ind-txt {
  font-family: var(--font-en); font-weight: 700;
  font-size: 11px; font-size: 1.1rem; letter-spacing: 0.28em;
  color: var(--c-main); padding-left: 0.28em;
}
.scroll-ind-line { position: relative; display: block; width: 1px; height: 54px; background: #cfe0e2; overflow: hidden; }
.scroll-ind-line::after {
  content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 22px;
  background: var(--c-sub); animation: scroll-run 1.9s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes scroll-run {
  0%   { transform: translateY(-24px); opacity: 0; }
  25%  { opacity: 1; }
  75%  { opacity: 1; }
  100% { transform: translateY(56px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-ind-line::after { animation: none; transform: none; height: 54px; opacity: .6; }
}

/* =============================================================
   SP（767px以下）まとめ直し
   ※これまでの上書きが積み重なって、後ろのPC用ルールがSPを打ち消していた。
     このブロックを最後に置いて確実に効かせる
   ============================================================= */
@media screen and (max-width: 767px) {
  /* --- FV --- */
  #mv { padding-bottom: 54px; }
  .mv-inner { display: block; width: 100%; padding: 72px 5% 30px; min-height: 0; }
  #mv .mv-copy { width: 100%; }
  #mv .mv-lead { font-size: 14px; font-size: 1.4rem; letter-spacing: 0.1em; padding-bottom: 0.45em; }
  #mv .mv-display {
    width: 100%; white-space: normal; word-break: keep-all;
    font-size: 37px; font-size: 3.7rem; line-height: 1.22; letter-spacing: 0.01em;
    margin-top: 16px;
  }
  #mv .mv-sub { width: 100%; padding-top: 18px; font-size: 13px; font-size: 1.3rem; line-height: 1.95; letter-spacing: 0.02em; }
  .mv-art { width: 88%; margin: 24px auto 0; }
  .mv-art img { width: 100%; height: auto; }
  .scroll-ind { bottom: 14px; }
  .scroll-ind-line { height: 38px; }

  /* --- ヘッダー：PCナビ／小ナビは隠す（ドロワーに任せる） --- */
  #global-nav.pc, #sub-nav.pc { display: none !important; }
  #top-head .logo img { width: 150px; height: auto; }

  /* --- ABOUT／サービス／VOICE／CONTACT の幅 --- */
  .ab-inner, .sv-head, .sv-list, .vo-head, .vo-list, .ct-inner, .wk-grid, .works-inner { width: 100%; }
}

/* ---- 旧FVの写真レイヤーは廃止済み。CSSの参照も切る（mv.png / mv-sp.png を未使用にする）---- */
#mv .mv-photo, #mv .mv-photo-wrap { display: none; background-image: none; }

/* =============================================================
   2026-08-12 修正
   (1) SCROLL：FVの白地からNEWSのグレー地へ半分食い込ませる／色を変えながら流す
   (2) ヘッダーCTA：ご相談＝オレンジ＋吹き出し／代理店＝会社アイコン（カート廃止）
   (3) SNSアイコン：白ストロークで白地に消えていたので濃色版に
   ============================================================= */

/* ---- (1) SCROLL インジケーター ----
   .news は元テンプレの「FVに50px食い込む」設定（top:-50px / z-index:999）が
   残っていた。食い込みは廃止した仕様なので top を戻し、
   代わりに z-index を下げて、線だけがグレー地に重なるようにする。 */
.news { top: 0; z-index: 0; }

#mv { padding-bottom: 34px; }
.scroll-ind { bottom: -27px; gap: 10px; z-index: 5; }
.scroll-ind-txt {
  font-size: 10px; font-size: 1.0rem; letter-spacing: 0.34em;
  color: #8b9aa2; padding-left: 0.34em;
}
.scroll-ind-line {
  height: 54px;
  background: linear-gradient(180deg,
              #dbe7e9 0%, #cfe0e2 46%,
              #a3c8cd 58%, #6fb0b8 100%);
}
.scroll-ind-line::after { height: 14px; animation-duration: 2.2s; }
@keyframes scroll-run {
  0%   { transform: translateY(-16px); opacity: 0; background: var(--c-sub); }
  18%  { opacity: 1; }
  50%  { background: var(--c-sub); }
  80%  { opacity: 1; }
  100% { transform: translateY(58px); opacity: 0; background: var(--c-main); }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-ind-line::after { animation: none; transform: none; height: 54px; opacity: .55; }
}

/* ---- (2) ヘッダー右上のCTA ---- */
:root { --c-cta: #dd5f22; }

#sub-nav .head-cta a {
  background-color: var(--c-cta); border-color: var(--c-cta); color: #fff;
  background-image: url(../images/icon-chat.svg);
  background-repeat: no-repeat; background-position: 11% 50%;
}
#sub-nav .head-cta a:hover {
  background-color: #fff; border-color: var(--c-cta); color: var(--c-cta);
  background-image: url(../images/icon-chat-o.svg);
}
#sub-nav .head-cta.is-second a {
  background-color: var(--c-sub); border-color: var(--c-sub); color: #fff;
  background-image: url(../images/icon-building.svg);
}
#sub-nav .head-cta.is-second a:hover {
  background-color: #fff; border-color: var(--c-sub); color: var(--c-sub);
  background-image: url(../images/icon-building-g.svg);
}

/* ---- (3) SNSアイコン（PC小ナビ）----
   HTML側で icon-sns-*-d.svg（濃色版）に差し替え済み。
   SPドロワーは緑地なので白いまま。 */
#sub-nav li:not(.head-cta) a { opacity: .8; transition: opacity var(--dur-hover); }
#sub-nav li:not(.head-cta) a:hover { opacity: 1; }

/* ---- SP ---- */
@media screen and (max-width: 767px) {
  /* SPはモックアップ画像とSCROLLの文字が近いので、下の余白を確保する */
  #mv { padding-bottom: 74px; }
  .scroll-ind { bottom: -22px; gap: 8px; }
  .scroll-ind-line { height: 44px; }
  @keyframes scroll-run {
    0%   { transform: translateY(-14px); opacity: 0; background: var(--c-sub); }
    18%  { opacity: 1; }
    50%  { background: var(--c-sub); }
    80%  { opacity: 1; }
    100% { transform: translateY(48px); opacity: 0; background: var(--c-main); }
  }

  /* ドロワーのCTAもカート廃止。地は緑のままなのでアイコンは白 */
  #sp-global-nav .head-cta a {
    background-image: url(../images/icon-chat.svg);
    background-repeat: no-repeat; background-position: 8% 50%;
  }
  #sp-global-nav .head-cta.is-second a {
    background-image: url(../images/icon-building.svg);
  }
}

/* =============================================================
   2026-08-12 修正 その2
   (4) スクロール追従ヘッダー：白 → 黒地。お問い合わせはオレンジのボタン
   (5) 実績カード：カテゴリの枠が旧定義の残りで囲われていたので外す
   (6) トップの実績プレビューが縦に大きすぎたので詰める
   ============================================================= */

/* ---- (4) 固定ヘッダー ---- */
@media screen and (min-width: 769px) {
  #global-nav.fixed {
    background: #0f1417;
    border-bottom: 0;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.18);
  }
  #global-nav.fixed .menu {
    background: none;                 /* 白地の指定を打ち消す */
    align-items: center;
    padding: 0 40px 0 190px;
  }
  #global-nav.fixed .home img {
    filter: brightness(0) invert(1);  /* ロゴを白に */
    top: 17px;
  }
  #global-nav.fixed .menu > li a { color: #fff; padding: 20px 0; }
  #global-nav.fixed .menu > li a::after { background: #fff; }

  /* お問い合わせ＝オレンジのボタン */
  #global-nav.fixed .menu > li:last-child { margin-left: 34px; }
  #global-nav.fixed .menu > li:last-child a {
    background: var(--c-cta);
    padding: 0.72em 1.5em 0.78em;
    transition: background-color var(--dur-hover), color var(--dur-hover);
  }
  #global-nav.fixed .menu > li:last-child a::after { display: none; }
  #global-nav.fixed .menu > li:last-child a:hover { background: #fff; color: var(--c-cta); }
}

/* ---- (5) 実績カードのカテゴリ ----
   旧 .wk-cat（枠つきタグ）の border / padding / display が残っていて、
   作り直した後のカードでも文字が四角で囲われていた。ここで打ち消す。 */
.wk-cat {
  display: block;
  border: 0;
  padding: 0;
  align-self: auto;
}
.wk-card > a > .wk-cat { padding: 20px 20px 0; }

/* ---- (6) トップの実績プレビュー ---- */
.wk-grid.is-top .wk-ph { height: 400px; }

@media screen and (max-width: 767px) {
  .wk-card > a > .wk-cat { padding: 14px 14px 0; }
  .wk-grid.is-top .wk-ph { height: 260px; }
}

/* =============================================================
   FVの動く背景（2026-08-12 採用：グリッド＋光の帯）
   A（グリッド）/ B（波紋）/ C（にじみ）を実機で見比べてAに決定。
   B・Cのコードと ?bg= の切り替えは削除済み。

   ★等間隔の格子は「1マス分ずらす」と動く前と同じ絵になるので、
     平行移動ではどれだけ速くしても動いて見えない（実測でも差分ゼロだった）。
     そこで格子はほぼ止めて、光の帯を横切らせ、線を順に光らせている。
     ・.fv-bg         = 地の格子（薄い）
     ・.fv-bg::before = 動く光の帯。格子の形でマスクしているので線の上だけが光る
     ・.fv-bg::after  = 上端の白フェード（ナビが乗るため）。帯より手前に置く

   ★模様はコピー側だけ。fv-mock.webp は中身が不透明な白い長方形なので、
     全面に敷くとモックの下だけ四角く抜けて見える。マスクで手前に消している。
     全面に敷きたくなったら、先にモックを背景透過で書き出し直すこと。

   調整するのはこの3つ
     ・線の濃さ    …… 下の .10
     ・帯の強さ    …… ::before の .20
     ・周期        …… fvSheen の 8s
   ============================================================= */
.fv-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  background-image:
    linear-gradient(to right,  rgba(45,168,181,.10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(45,168,181,.10) 1px, transparent 1px);
  background-size: 66px 66px;
  animation: fvGrid 40s linear infinite;   /* ごく僅かな流れ。端でだけ効く */
  -webkit-mask-image: linear-gradient(90deg, #000 0 30%, rgba(0,0,0,.6) 44%, transparent 56%);
          mask-image: linear-gradient(90deg, #000 0 30%, rgba(0,0,0,.6) 44%, transparent 56%);
}
@keyframes fvGrid { to { background-position: 66px 66px, 66px 66px; } }

.fv-bg::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  /* 帯1本ぶんをタイルにして、ちょうど1タイル分ずらす＝継ぎ目なしで無限に流れる。
     両端を透明にしてあるのでタイルの境界は出ない。
     斜めにするとループの瞬間に線がズレるので、帯は垂直。 */
  background-image: linear-gradient(to right,
              rgba(45,168,181,0)   0%,
              rgba(45,168,181,0)   32%,
              rgba(45,168,181,.20) 50%,
              rgba(45,168,181,0)   68%,
              rgba(45,168,181,0)   100%);
  background-size: 58vw 100%;
  background-repeat: repeat-x;
  -webkit-mask-image:
    linear-gradient(to right,  #000 1px, transparent 1px),
    linear-gradient(to bottom, #000 1px, transparent 1px);
          mask-image:
    linear-gradient(to right,  #000 1px, transparent 1px),
    linear-gradient(to bottom, #000 1px, transparent 1px);
  -webkit-mask-size: 66px 66px;
          mask-size: 66px 66px;
  animation: fvSheen 8s linear infinite;
}
@keyframes fvSheen {
  from { background-position: -58vw 0; }
  to   { background-position: 0 0; }
}

/* 上端はナビが乗るので白に沈める（光の帯より手前） */
.fv-bg::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(180deg, #fff 0, rgba(255,255,255,.72) 10%, rgba(255,255,255,0) 30%);
}
.mv-inner { position: relative; z-index: 1; }

@media screen and (max-width: 767px) {
  /* SPは縦積み。モックは下に来るので、横ではなく縦にフェードさせる */
  .fv-bg {
    background-size: 46px 46px;
    -webkit-mask-image: linear-gradient(180deg, #000 0 34%, rgba(0,0,0,.5) 46%, transparent 58%);
            mask-image: linear-gradient(180deg, #000 0 34%, rgba(0,0,0,.5) 46%, transparent 58%);
  }
  @keyframes fvGrid { to { background-position: 46px 46px, 46px 46px; } }
  .fv-bg::before { -webkit-mask-size: 46px 46px; mask-size: 46px 46px; }
  .fv-bg::after { background: linear-gradient(180deg, #fff 0, rgba(255,255,255,0) 22%); }
}

@media (prefers-reduced-motion: reduce) {
  .fv-bg { animation: none !important; }
  .fv-bg::before { display: none; }
}

/* ---- ABOUT：本文を3段落にしたので段落間を詰める（2026-08-12）---- */
.ab-body + .ab-body { margin-top: 17px; }

/* =============================================================
   2026-08-12 その3
   ============================================================= */

/* ---- 実績カードの余白バグ ----
   元テンプレの .works-inner h3（margin-top:32px ＋ 左の短い横棒）が
   .wk-title に効いてしまっていた。詳細度が .works-inner h3 (0,1,1) >
   .wk-title (0,1,0) なので、こちらで明示的に打ち消す。 */
.works-inner .wk-title { margin-top: 0; font-weight: 700; }
.works-inner .wk-title::before { display: none; }
.works-inner .wk-cat { margin-bottom: 6px; }

/* ---- 固定ヘッダーのロゴを天地中央に ----
   top:15px の決め打ちだと、メニューの行の高さと合わず上が開いて見えた。
   バーの高さがどう変わっても中央に来るようにする。 */
@media screen and (min-width: 769px) {
  #global-nav.fixed .home img {
    top: 50%; transform: translateY(-50%);
  }
}

/* ---- サービス／ABOUTの写真も幕アニメーション（.mov）で出す ---- */
.sv-ph.mov, .ab-ph.mov { overflow: hidden; }
.sv-ph.mov::before, .ab-ph.mov::before { z-index: 2; }

/* ---- お客様の声：長文の推薦文に対応（見出し＋段落） ---- */
.vo-ttl {
  font-size: 19px; font-size: 1.9rem; font-weight: 700; line-height: 1.7;
  color: var(--c-heading); margin-bottom: 16px;
}
.vo-q + .vo-q { margin-top: 1.1em; }
.vo-item { padding: 44px 0; }

@media screen and (max-width: 767px) {
  .vo-ttl { font-size: 16px; font-size: 1.6rem; margin-bottom: 12px; }
  .vo-item { padding: 30px 0; }
}

/* =============================================================
   お知らせ一覧（news.html）
   ============================================================= */
.nw-list { border-top: 1px solid var(--c-rule); }
.nw-item { border-bottom: 1px solid var(--c-rule); }
.nw-item > a { display: block; padding: 32px 4px; color: inherit; transition: background-color var(--dur-hover); }
.nw-item > a:hover { text-decoration: none; background: #f6fbfc; }
.nw-meta { display: flex; align-items: center; gap: 16px; }
.nw-date { font-family: var(--font-en); font-size: 14px; font-size: 1.4rem; color: var(--c-sub); letter-spacing: 0.06em; }
.nw-tag {
  font-size: 11px; font-size: 1.1rem; letter-spacing: 0.08em;
  color: var(--c-main); border: 1px solid var(--c-sub);
  padding: 3px 12px; border-radius: 2px;
}
.nw-ttl { margin-top: 12px; font-size: 18px; font-size: 1.8rem; font-weight: 700; line-height: 1.7; color: var(--c-heading); }
.nw-item > a:hover .nw-ttl { color: var(--c-main); }
.nw-ex { margin-top: 10px; font-size: 14px; font-size: 1.4rem; line-height: 2.0; color: #4a5257; }

/* =============================================================
   お問い合わせ（contact.html）
   ============================================================= */
.ct-ways { display: flex; gap: 32px; }
.ct-ways li { flex: 1; border: 1px solid #e3ebec; padding: 34px 32px 36px; }
.ct-way-en { font-family: var(--font-en); font-weight: 700; font-size: 13px; font-size: 1.3rem; letter-spacing: 0.16em; color: var(--c-sub); }
.ct-way-ja { margin-top: 8px; font-size: 20px; font-size: 2rem; font-weight: 700; color: var(--c-heading); }
.ct-way-txt { margin-top: 14px; font-size: 14px; font-size: 1.4rem; line-height: 2.0; color: #4a5257; }
.ct-way-btn { margin-top: 22px; }
.ct-way-btn a {
  display: inline-block; background: var(--c-sub); color: #fff;
  font-size: 14px; font-size: 1.4rem; font-weight: 700;
  padding: 0.9em 1.8em; transition: all var(--dur-hover);
}
.ct-way-btn a:hover { background: var(--c-main); text-decoration: none; }

.cf { max-width: 780px; margin-top: 36px; }
.cf-row + .cf-row { margin-top: 26px; }
.cf-label { display: block; font-size: 14px; font-size: 1.4rem; font-weight: 700; color: var(--c-heading); margin-bottom: 10px; }
.cf-req {
  margin-left: 10px; font-size: 11px; font-size: 1.1rem; font-weight: 400;
  background: var(--c-cta); color: #fff; padding: 3px 8px; border-radius: 2px; vertical-align: 2px;
}
.cf-input {
  width: 100%; border: 1px solid #d5e0e2; background: #fff;
  padding: 0.9em 1em; font-size: 15px; font-size: 1.5rem;
  font-family: inherit; color: var(--c-text);
  transition: border-color var(--dur-hover);
}
.cf-input:focus { outline: none; border-color: var(--c-sub); }
.cf-area { line-height: 1.9; resize: vertical; }
.cf-note { margin-top: 24px; font-size: 13px; font-size: 1.3rem; line-height: 1.9; color: #6b7478; }
.cf-note a { color: var(--c-main); border-bottom: 1px solid var(--c-sub); }
.cf-submit { margin-top: 34px; text-align: center; }
.cf-submit button {
  border: 0; cursor: pointer; font-family: inherit;
  background: var(--c-cta); color: #fff;
  font-size: 17px; font-size: 1.7rem; font-weight: 700; letter-spacing: 0.08em;
  padding: 1.1em 4em; transition: all var(--dur-hover);
}
.cf-submit button:hover { background: #c6511a; }

@media screen and (max-width: 767px) {
  .nw-item > a { padding: 22px 2px; }
  .nw-ttl { font-size: 16px; font-size: 1.6rem; }
  .ct-ways { display: block; }
  .ct-ways li + li { margin-top: 18px; }
  .ct-ways li { padding: 26px 22px 28px; }
  .cf-submit button { width: 100%; padding: 1.1em 0; }
}

/* ---- お知らせ：記事ページ ---- */
.pg-sec.is-narrow { max-width: 800px; }
.nw-meta.is-detail { margin-top: 20px; }
.nw-h1 { margin-top: 14px; font-size: 32px; font-size: 3.2rem; font-weight: 700; line-height: 1.6; color: var(--c-heading); }
.nw-body { font-size: 16px; font-size: 1.6rem; line-height: 2.15; color: #3d474b; }
.nw-body > * + * { margin-top: 1.6em; }   /* 段落・箇条書き・見出しの前後を一律で確保 */
.nw-body h2 {
  margin: 2.4em 0 1em; padding-left: 16px; position: relative;
  font-size: 21px; font-size: 2.1rem; font-weight: 700; line-height: 1.6; color: var(--c-heading);
}
.nw-body h2::before {
  content: ""; position: absolute; left: 0; top: .35em; bottom: .35em;
  width: 3px; background: var(--c-sub);
}
.nw-body ul { margin-top: 1.2em; }
.nw-body li::marker { content: none; }
.nw-body li { padding-left: 1.3em; position: relative; margin-top: .5em; }
.nw-body li::before {
  content: ""; position: absolute; left: 0; top: .95em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--c-sub);
}
.nw-body a { color: var(--c-main); border-bottom: 1px solid var(--c-sub); }
.nw-body strong { font-weight: 700; color: var(--c-heading); }
.nw-nav {
  margin-top: 70px; padding-top: 28px; border-top: 1px solid var(--c-rule);
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
}
.nw-nav a { font-size: 14px; font-size: 1.4rem; color: var(--c-main); }
.nw-nav .nw-nav-index { font-weight: 700; }
.nw-nav a:only-child { margin: 0 auto; }

@media screen and (max-width: 767px) {
  .nw-h1 { font-size: 22px; font-size: 2.2rem; }
  .nw-body { font-size: 15px; font-size: 1.5rem; }
  .nw-nav { flex-wrap: wrap; gap: 12px; justify-content: center; }
}

/* =============================================================
   下層ページの中身（料金・FAQ・箇条書き）2026-08-12
   ============================================================= */

/* ---- 料金：メインの1枚 ---- */
.pr-main { border: 1px solid #dbe8ea; background: #fff; padding: 40px 44px 44px; max-width: 860px; }
.pr-main-ttl { font-size: 17px; font-size: 1.7rem; font-weight: 700; color: var(--c-heading); }
.pr-price { margin-top: 12px; font-family: var(--font-en); font-weight: 700; color: var(--c-main); line-height: 1; }
.pr-price em { font-style: normal; font-size: 54px; font-size: 5.4rem; }
.pr-price small { font-family: var(--ja, inherit); font-size: 15px; font-size: 1.5rem; font-weight: 700; margin-left: .4em; letter-spacing: .04em; }
.pr-note { margin-top: 16px; font-size: 14px; font-size: 1.4rem; line-height: 2.0; color: #4a5257; }

/* ---- 料金：3プラン横並び ---- */
.pr-plans { display: flex; gap: 24px; align-items: stretch; }
.pr-plans > li { flex: 1; border: 1px solid #dbe8ea; background: #fff; padding: 30px 26px 32px; display: flex; flex-direction: column; position: relative; }
.pr-plans > li.is-reco { border-color: var(--c-sub); box-shadow: 0 6px 22px rgba(45,168,181,.10); }
.pr-reco-tag {
  position: absolute; top: -12px; left: 26px; background: var(--c-sub); color: #fff;
  font-size: 11px; font-size: 1.1rem; font-weight: 700; letter-spacing: .1em; padding: 4px 12px;
}
.pr-plan-en { font-family: var(--font-en); font-weight: 700; font-size: 13px; font-size: 1.3rem; letter-spacing: .14em; color: var(--c-sub); }
.pr-plan-ja { margin-top: 6px; font-size: 16px; font-size: 1.6rem; font-weight: 700; color: var(--c-heading); line-height: 1.6; }
.pr-plan-yen { margin-top: 14px; font-family: var(--font-en); font-weight: 700; font-size: 30px; font-size: 3rem; color: var(--c-main); line-height: 1; }
.pr-plan-yen small { font-family: inherit; font-size: 13px; font-size: 1.3rem; margin-left: .3em; }
.pr-plan-txt { margin-top: 14px; font-size: 13px; font-size: 1.3rem; line-height: 1.95; color: #4a5257; }
.pr-plan-list { margin-top: 18px; padding-top: 16px; border-top: 1px solid #eef3f4; }
.pr-plan-list li { position: relative; padding-left: 20px; font-size: 13px; font-size: 1.3rem; line-height: 1.9; color: #3d474b; margin-top: 6px; }
.pr-plan-list li::before {
  content: ""; position: absolute; left: 2px; top: .72em;
  width: 9px; height: 5px; border-left: 2px solid var(--c-sub); border-bottom: 2px solid var(--c-sub);
  transform: rotate(-45deg);
}

/* ---- 表（含まれるもの・オプション） ---- */
.pr-table { width: 100%; max-width: 860px; border-collapse: collapse; margin-top: 22px; }
.pr-table th, .pr-table td { border-bottom: 1px solid #e6eef0; padding: 15px 4px; font-size: 14px; font-size: 1.4rem; line-height: 1.9; text-align: left; vertical-align: top; }
.pr-table th { width: 42%; font-weight: 700; color: var(--c-heading); }
.pr-table td { color: #4a5257; }
.pr-table tr:first-child th, .pr-table tr:first-child td { border-top: 1px solid #e6eef0; }

/* ---- 箇条書き（チェック） ---- */
.pg-checks { max-width: 860px; }
.pg-checks li { position: relative; padding-left: 26px; font-size: 15px; font-size: 1.5rem; line-height: 2.0; color: #3d474b; margin-top: 10px; }
.pg-checks li::before {
  content: ""; position: absolute; left: 2px; top: .78em;
  width: 11px; height: 6px; border-left: 2px solid var(--c-sub); border-bottom: 2px solid var(--c-sub);
  transform: rotate(-45deg);
}

/* ---- よくある質問 ---- */
.fq { max-width: 860px; border-top: 1px solid var(--c-rule); }
.fq > li { border-bottom: 1px solid var(--c-rule); }
.fq dt {
  position: relative; padding: 22px 0 22px 42px;
  font-size: 16px; font-size: 1.6rem; font-weight: 700; line-height: 1.75; color: var(--c-heading);
}
.fq dd {
  position: relative; padding: 0 0 24px 42px;
  font-size: 14px; font-size: 1.4rem; line-height: 2.1; color: #4a5257;
}
.fq dt::before, .fq dd::before {
  position: absolute; left: 0; font-family: var(--font-en); font-weight: 700;
  font-size: 19px; font-size: 1.9rem; line-height: 1;
}
.fq dt::before { content: "Q"; top: 24px; color: var(--c-sub); }
.fq dd::before { content: "A"; top: 2px; color: #b9c4c8; }

/* ---- 補足の注記 ---- */
.pg-fine { margin-top: 20px; max-width: 860px; font-size: 13px; font-size: 1.3rem; line-height: 1.95; color: #7b8488; }
.pg-txt { max-width: 820px; font-size: 15px; font-size: 1.5rem; line-height: 2.15; color: #3d474b; }
.pg-txt + .pg-txt { margin-top: 1.4em; }
.pg-h3 { margin-top: 0; margin-bottom: 14px; font-size: 18px; font-size: 1.8rem; font-weight: 700; color: var(--c-heading); }

@media screen and (max-width: 767px) {
  .pg-sec { width: 100%; padding: 0 4%; }
  .pg-cards { display: block; }
  .pg-cards li + li { margin-top: 14px; }
  .pr-plans { display: block; }
  .pr-plans > li + li { margin-top: 26px; }
  .pr-main { padding: 26px 22px 28px; }
  .pr-price em { font-size: 40px; font-size: 4rem; }
  .pr-table th, .pr-table td { display: block; width: 100%; border: 0; padding: 4px 0; }
  .pr-table th { padding-top: 14px; }
  .pr-table td { padding-bottom: 14px; border-bottom: 1px solid #e6eef0; }
  .pr-table tr:first-child th { border-top: 0; }
  .fq dt { padding: 18px 0 16px 34px; font-size: 15px; font-size: 1.5rem; }
  .fq dd { padding: 0 0 20px 34px; }
  .fq dt::before { top: 20px; }
}

/* ---- 外部サイト（旧サイトの詳細ページ）へのリンク ---- */
.pg-more-out { margin-top: 30px; }
.pg-more-out a {
  display: inline-block; position: relative;
  font-size: 14px; font-size: 1.4rem; font-weight: 700; letter-spacing: 0.06em;
  color: var(--c-main); padding: 0 26px 6px 0;
  border-bottom: 1px solid var(--c-sub);
}
.pg-more-out a::after {
  content: ""; position: absolute; right: 4px; top: .28em;
  width: 9px; height: 9px;
  border-top: 1px solid var(--c-main); border-right: 1px solid var(--c-main);
}
.pg-more-out a::before {
  content: ""; position: absolute; right: 0; top: .62em;
  width: 9px; height: 9px;
  border-bottom: 1px solid var(--c-main); border-left: 1px solid var(--c-main);
}
.pg-more-out a:hover { text-decoration: none; color: var(--c-sub); }

.pr-plan-more { margin-top: 16px; padding-top: 14px; border-top: 1px solid #eef3f4; }
.pr-plan-more a { font-size: 12px; font-size: 1.2rem; font-weight: 700; color: var(--c-main); border-bottom: 1px solid var(--c-sub); }

/* ---- チャットワークのボタン（公式シンボル使用・2026-08-19）----
   kubell公式のロゴキット（chatwork_logo_guidelines.pdf ver1.3.1 同梱）に準拠：
   ・SVGは無加工。色つき背景＝単色白版／白背景（hover時）＝メインカラー版に切り替え
   ・シンボル単体の最小サイズ Web16px → 22pxで使用
   ・保護エリア0.2x（22pxなら約4.4px）→ gap10px・パディングで確保済み */
.ct-btn.is-chat a, .ct-way-btn a {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
}
.ct-btn.is-chat a { display: flex; }
.ct-cw {
  width: 22px; height: 22px; flex: 0 0 auto;
  background: url(../images/logo-chatwork-white.svg) no-repeat center / contain;
}
.ct-btn.is-chat a:hover .ct-cw { background-image: url(../images/logo-chatwork-color.svg); }
/* contact.html のボタンはhover後も色地（主色）なので白のまま */

/* ---- 特商法の表（項目名を広めに）---- */
.pr-table.is-law th { width: 30%; }
.pr-table.is-law { max-width: 900px; }

/* ---- フッターの法務リンク ---- */
.f-legal { text-align: center; padding: 0 0 8px; }
.f-legal li { display: inline-block; margin: 0 14px; }
.f-legal a { font-size: 12px; font-size: 1.2rem; color: rgba(255,255,255,.72); }
.f-legal a:hover { color: #fff; }
@media screen and (max-width: 767px) {
  .f-legal li { display: block; margin: 0 0 8px; }
}

/* ---- 下層ページの縦リズムを揃える（2026-08-12）----
   .pg-h2 に margin-top が無く、直前の段落と間隔0pxでくっついていた。
   さらに .pg-h3 の前だけ44pxあって、階層が逆転していた。
   セクション内の親子関係が見た目で分かるように、上の余白を段階にする。 */
.pg-sec > * + .pg-h2 { margin-top: 76px; }
.pg-sec > * + .pg-h3 { margin-top: 40px; }
.pg-sec > * + .pg-checks,
.pg-sec > * + .pr-table,
.pg-sec > * + .pr-main,
.pg-sec > * + .pr-plans { margin-top: 24px; }
.pg-sec > .pg-h2 + .pg-checks,
.pg-sec > .pg-h2 + .pr-table,
.pg-sec > .pg-h2 + .pr-main,
.pg-sec > .pg-h2 + .pr-plans,
.pg-sec > .pg-h3 + .pg-checks,
.pg-sec > .pg-h3 + .pr-table { margin-top: 0; }
.pg-sec > * + .pg-fine { margin-top: 16px; }

/* ---- NEWS：MOREをリストの下端に揃える（2026-08-19）----
   見出しの直下に浮いていて、リストと上下が揃っていなかった。
   左列を縦flexにして、MOREを列の下端＝リストの最終行に合わせる。 */
.news { align-items: stretch; }
.news .news-ttl { display: flex; flex-direction: column; align-items: flex-start; }
/* PC：枠デザインのまま、リストの下端に揃える（横は元どおり中央） */
.news .news-ttl .more { margin: auto auto 0; }
/* SP：MOREは見出しの下ではなくリストの下（HTML側に .pc / .sp の2個持ち）
   ※.sp ユーティリティはPCで効いていないので、ここで明示的に出し分ける */
.news .more.sp { display: none; }
@media screen and (max-width: 767px) {
  .news .news-ttl .more.pc { display: none; }
  .news .more.sp { display: block; margin: 26px auto 0; }
}

/* ---- お問い合わせフォーム：送信中・失敗・完了 ---- */
.cf-submit button[disabled] { opacity: 0.5; cursor: default; }
.cf-submit button[disabled]:hover { background: var(--c-cta); }

.cf-err {
  display: none; margin-top: 24px; padding: 18px 22px 20px;
  background: #fbeee9; border-left: 3px solid var(--c-attention);
  font-size: 13.5px; font-size: 1.35rem; line-height: 1.95; color: #6b4a3f;
}
.cf-err.is-on { display: block; }
.cf-err a { color: var(--c-main); border-bottom: 1px solid var(--c-sub); }

.cf.is-hide { display: none; }
.cf-done { display: none; max-width: 780px; margin-top: 36px; padding: 54px 40px 50px;
           background: var(--c-tint); text-align: center; }
.cf-done.is-on { display: block; }
.cf-done-ttl { font-size: 21px; font-size: 2.1rem; font-weight: 700;
               letter-spacing: 0.04em; color: var(--c-heading); }
.cf-done-txt { margin-top: 20px; font-size: 14.5px; font-size: 1.45rem; line-height: 2.1; color: #4a5257; }
.cf-done-back { margin-top: 30px; }
.cf-done-back a {
  display: inline-block; background: var(--c-main); color: #fff;
  font-size: 14px; font-size: 1.4rem; font-weight: 700; letter-spacing: 0.06em;
  padding: 0.95em 3em; transition: background var(--dur-hover);
}
.cf-done-back a:hover { background: var(--c-sub); text-decoration: none; }

@media screen and (max-width: 767px) {
  .cf-done { padding: 40px 24px 38px; }
  .cf-done-ttl { font-size: 18px; font-size: 1.8rem; line-height: 1.6; }
  .cf-done-back a { display: block; padding: 1.05em 0; }
}

/* ---- お問い合わせ：冒頭の振り分け（お客様／営業・協業） ---- */
.ct-split { display: flex; gap: 0; border: 1px solid var(--c-hairline); }
.ct-split li { flex: 1; padding: 24px 28px 26px; }
.ct-split li + li { border-left: 1px solid var(--c-hairline); }
.ct-split .is-here { background: var(--c-tint); }
.ct-split-ttl { font-size: 15px; font-size: 1.5rem; font-weight: 700; color: var(--c-heading); }
.ct-split-txt { margin-top: 8px; font-size: 13.5px; font-size: 1.35rem; line-height: 1.95; color: #4a5257; }
.ct-split-txt a { color: var(--c-main); font-weight: 700; border-bottom: 1px solid var(--c-sub); }

/* ---- 営業・協業ページ ---- */
.of-note {
  border-left: 3px solid var(--c-cta); background: #fbf4f0;
  padding: 22px 26px 24px; font-size: 14px; font-size: 1.4rem; line-height: 2.05; color: #5a4136;
}
.of-note strong { color: #8a3f1c; }
.of-back { margin-top: 22px; font-size: 13.5px; font-size: 1.35rem; line-height: 1.95; color: #6b7478; }
.of-back a { color: var(--c-main); font-weight: 700; border-bottom: 1px solid var(--c-sub); }
.cf-hint { margin-top: 10px; font-size: 12.5px; font-size: 1.25rem; line-height: 1.85; color: #7b848a; }

@media screen and (max-width: 767px) {
  .ct-split { display: block; }
  .ct-split li + li { border-left: 0; border-top: 1px solid var(--c-hairline); }
  .ct-split li { padding: 20px 22px 22px; }
  .of-note { padding: 18px 20px 20px; }
}

/* ---- フッター：SNSアイコンと法務リンクが近すぎたので離す（2026-08-19） ---- */
.f-legal { margin-top: 30px; }
@media screen and (max-width: 767px) {
  .f-legal { margin-top: 24px; }
}
/* OFFICE欄を外したので、SERVICEの縦罫が下まで伸びないよう上端揃えにする */
.f-inner { align-items: flex-start; }

/* ---- 見出しのSEO対応（2026-08-19）。見た目は変えず、タグの意味だけ直す ---- */
/* 下層ページ：英字と日本語をまとめて1つのh1にした。span化したので block に戻す */
.pg-ttl { display: block; }
.pg-ttl .pg-en, .pg-ttl .pg-ja { display: block; }
/* ★reset.css の p{line-height:2.2} が効かなくなるので、その分を明示して戻す
   （これが無いと「ホームページ制作」の行が18pxほど上にずれる。実測して判明） */
.pg-ttl .pg-ja { line-height: 2.2; }
/* フッターのロゴは h1 をやめて p にした（1ページにh1は1つ） */
.f-inner .f-logo { width: 320px; }
@media screen and (max-width: 767px) {
  .f-inner .f-logo { width: 100%; text-align: center; margin-bottom: 48px; }
  .f-inner .f-logo img { width: 50%; }
}
/* 社内メモは本番で見えてしまうので、残っていても出さない */
.pg-todo { display: none; }

/* ---- 代表プロフィールページ（about.html）／2026-08-20 ---- */
.ab-more { margin-top: 30px; }
.ab-more a {
  display: inline-block; font-size: 14px; font-size: 1.4rem; font-weight: 700;
  letter-spacing: 0.08em; color: var(--c-main);
  border-bottom: 1px solid var(--c-sub); padding-bottom: 6px;
  transition: opacity var(--dur-hover);
}
.ab-more a span { margin-left: 0.7em; }
.ab-more a:hover { opacity: 0.6; text-decoration: none; }

.pf-head { display: flex; align-items: center; gap: 46px; }
.pf-ph { width: 260px; flex: 0 0 auto; background: var(--c-tint); padding: 44px 30px; text-align: center; }
.pf-ph img { width: 100%; height: auto; display: block; }
.pf-en { font-family: var(--font-en); font-weight: 400; font-size: 15px; font-size: 1.5rem;
         letter-spacing: 0.14em; color: var(--c-sub); }
.pf-ja { margin-top: 8px; font-size: 30px; font-size: 3rem; font-weight: 700;
         letter-spacing: 0.08em; color: var(--c-heading); }
.pf-role { margin-top: 16px; font-size: 15px; font-size: 1.5rem; font-weight: 700; color: var(--c-main); }
.pf-place { margin-top: 6px; font-size: 13.5px; font-size: 1.35rem; color: #6b7478; }

@media screen and (max-width: 767px) {
  .pf-head { display: block; }
  .pf-ph { width: 100%; padding: 34px 24px; }
  .pf-name { margin-top: 24px; }
  .pf-ja { font-size: 24px; font-size: 2.4rem; }
}

/* ---- お知らせ記事：h3 / h4（2026-08-20 追加。### が本文に出ていた不具合の対応） ---- */
/* ★h2 と同じ「青緑の縦線」にすると見分けがつかない（2026-08-20 指摘）。
   h2＝縦線／h3＝下線、と別の見せ方にして階層が分かるようにする。 */
.nw-body h3 {
  margin-top: 44px; margin-bottom: 14px;
  font-size: 17px; font-size: 1.7rem; font-weight: 700;
  line-height: 1.7; color: var(--c-heading);
  padding: 0 0 10px; border-bottom: 1px solid var(--c-hairline);
}
.nw-body h4 {
  margin-top: 32px; margin-bottom: 10px;
  font-size: 16px; font-size: 1.6rem; font-weight: 700; color: var(--c-heading);
}
.nw-body h2 + h3 { margin-top: 30px; }
.nw-body h3 + p { margin-top: 1.1em; }
.nw-body ol { margin-top: 18px; padding-left: 0; counter-reset: nw-ol; }
.nw-body ol li {
  position: relative; padding-left: 38px; margin-top: 12px;
  font-size: 15px; font-size: 1.5rem; line-height: 2.1; color: #3d474b;
}
.nw-body ol li::before {
  counter-increment: nw-ol; content: counter(nw-ol);
  position: absolute; left: 0; top: 0.35em;
  width: 24px; height: 24px; line-height: 24px; text-align: center;
  background: var(--c-main); color: #fff; border-radius: 50%;
  font-family: var(--font-num); font-size: 12px; font-size: 1.2rem;
}