/* ヘッダー・フッター・ドロワーの共通スタイル。
   下層ページのCSSから切り出したもの。build_all.sh が作り直す。 */

    .scroll-progress{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--royal),var(--cyan));z-index:300;transition:width .12s linear;pointer-events:none;}

  
    /* ===== inline static header (no dc-import — paints with page) ===== */
    .gpnav{position:fixed;top:16px;left:0;right:0;z-index:200;display:flex;justify-content:center;padding:0 16px;font-family:var(--ff);}

    .gpnav .bar{display:flex;align-items:center;gap:clamp(14px,2vw,30px);background:rgba(255,255,255,.97);backdrop-filter:saturate(1.6) blur(12px);-webkit-backdrop-filter:saturate(1.6) blur(12px);border:1px solid rgba(255,255,255,.6);box-shadow:0 14px 38px rgba(15,42,74,.16),inset 0 1px 0 rgba(255,255,255,.7);border-radius:9999px;padding:11px 14px 11px 26px;max-width:1180px;width:100%;}

    .gpnav .lg{display:flex;align-items:center;flex:none;margin-right:auto;}

    .gpnav .lg img{height:60px;width:auto;display:block;}

    .gpnav .menu{display:flex;align-items:center;gap:clamp(14px,2vw,26px);}

    .gpnav .menu>a,.gpnav .dd>a{font-size:14px;font-weight:500;color:#082848;white-space:nowrap;transition:color .2s;display:inline-flex;align-items:center;gap:5px;}

    .gpnav .menu a:hover,.gpnav .dd:hover>a{color:#1848D8;}

    .gpnav a.active{color:#1848D8;font-weight:700;}

    .gpnav .caret{width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-top:-3px;transition:transform .25s;}

    .gpnav .dd{position:relative;display:flex;align-items:center;height:44px;}

    .gpnav .dd::after{content:"";position:absolute;left:0;right:0;top:100%;height:16px;}

    .gpnav .dd .panel{display:flex;flex-direction:column;gap:2px;position:absolute;top:48px;left:50%;transform:translateX(-50%) translateY(8px);min-width:260px;background:#fff;border:1px solid rgba(15,42,74,.1);border-radius:16px;box-shadow:0 18px 44px rgba(15,42,74,.16);padding:10px;opacity:0;visibility:hidden;transition:opacity .2s,transform .2s;}

    .gpnav .dd:hover .panel{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}

    .gpnav .dd:hover .caret{transform:rotate(225deg);}

    .gpnav .panel a{display:flex;flex-direction:column;gap:3px;padding:12px 15px;border-radius:10px;transition:background .2s;}

    .gpnav .panel a:hover{background:#DCEEFE;}

    .gpnav .panel .en{font-size:11px;font-weight:700;letter-spacing:.1em;color:#1848D8;}

    .gpnav .panel .lb{font-size:14.5px;font-weight:600;color:#082848;}

    .gpnav .cta{display:inline-flex;align-items:center;gap:9px;background:#082848;color:#fff;font-size:14px;font-weight:600;padding:9px 10px 9px 18px;border-radius:9999px;white-space:nowrap;flex:none;transition:background .25s;}

    .gpnav .cta:hover{background:#1848D8;}

    .gpnav .cta .c{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:#fff;color:#082848;font-size:13px;}

    .gpnav .menu>a.cta{color:#fff;}

    .gpnav .burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;border:none;background:transparent;cursor:pointer;padding:11px;}

    .gpnav .burger span{display:block;height:2px;width:100%;background:#082848;border-radius:2px;transition:transform .28s,opacity .2s;}

    #gpdrawer{position:absolute;opacity:0;pointer-events:none;}

    .gpdrawer{position:fixed;top:84px;left:12px;right:12px;bottom:12px;z-index:199;background:#fff;border-radius:20px;box-shadow:0 24px 60px rgba(15,42,74,.22);overflow-y:auto;padding:18px clamp(20px,5vw,28px) 28px;display:none;}

    #gpdrawer:checked ~ .gpdrawer{display:block;}

    #gpdrawer:checked ~ .gpnav .burger span:nth-child(1){transform:translateY(7px) rotate(45deg);}

    #gpdrawer:checked ~ .gpnav .burger span:nth-child(2){opacity:0;}

    #gpdrawer:checked ~ .gpnav .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

    .gpdrawer a{display:block;font-size:16px;font-weight:600;color:#082848;text-decoration:none;padding:13px 0;border-bottom:1px solid rgba(15,42,74,.06);}

    .gpdrawer .lbl{font-size:11px;font-weight:700;letter-spacing:.14em;color:#1848D8;margin:18px 0 4px;}

    .gpdrawer .cta{display:flex;align-items:center;justify-content:center;gap:8px;background:#082848;color:#fff;font-size:16px;font-weight:600;text-decoration:none;padding:16px;border-radius:9999px;margin-top:22px;border:none;}
@media(max-width:980px){
.gpnav .menu{display:none;}
.gpnav .burger{display:flex;}
}
@media(min-width:981px){
.gpnav .burger{display:none;}
.gpdrawer{display:none!important;}
}


  
  
    /* breadcrumbs (page end, above footer) */
    .crumbs{background:var(--bg);border-top:1px solid var(--line);}

    .crumbs .cwrap{max-width:1100px;margin:0 auto;padding:20px clamp(20px,4vw,40px);display:flex;flex-wrap:wrap;align-items:center;gap:9px;font-size:12.5px;color:var(--text-mute);}

    .crumbs a{color:var(--text-mute);transition:color .2s;}

    .crumbs a:hover{color:var(--royal);}

    .crumbs .sep{opacity:.45;}

    .crumbs .cur{color:var(--navy);font-weight:600;}

  
    .f-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:clamp(32px,5vw,64px);align-items:start;}

    .f-grid nav a{transition:color .28s cubic-bezier(.22,1,.36,1);}

    .f-grid nav a:hover{color:#fff;}
@media(max-width:860px){
.f-grid{grid-template-columns:1fr 1fr;}
}
@media(max-width:520px){
.f-grid{grid-template-columns:1fr;}
}

/* ===== スマホ調整 2026-07-29 =====
   ヘッダーのロゴが60pxのままで画面を占有していたため縮小。
   front-page.css にあった .gp-pill / .gp-logo 向けの調整は
   実際のマークアップ(.gpnav .bar / .lg)と合っておらず効いていなかった。 */
@media(max-width:720px){
  .gpnav{top:10px;padding:0 12px;}
  .gpnav .bar{padding:8px 12px 8px 16px;}
  .gpnav .lg img{height:40px;}
  .gpnav .burger{width:40px;height:40px;padding:9px;gap:4px;}
}

/* ===== <image-slot> → <img> の取りこぼし補正 2026-07-30 =====
   元モックは画像枠に <image-slot> という独自要素を使っていた。
   WordPress 化で <img> に置き換わったのに CSS 側が image-slot のままで、
   枠に対する寸法指定がまったく効いていなかった(アイキャッチが原寸のまま
   はみ出し、枠から上端だけ見える状態になっていた)。 */
.eyecatch img,
.map img,
.portrait img,
.prose .figure img{width:100%;height:100%;object-fit:cover;display:block;}

/* ===== スマホだけ改行する印 2026-07-30 =====
   元デザインの sp-only。PCでは改行せず、760px以下でだけ改行する。 */
.sp-only{display:none;}
@media(max-width:760px){.sp-only{display:block;}}

/* ===== ページ送り 2026-08-01 =====
   見た目の指定が無く、素のリンクが並んでいたため追加。
   サイト共通の平行四辺形の形に合わせる。 */
.gp-pager,.navigation.pagination{margin:clamp(40px,5vw,64px) auto 0;}
.gp-pager .nav-links,.navigation .nav-links{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;}
.gp-pager .page-numbers,.navigation .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:46px;height:46px;padding:0 14px;font-family:var(--ff-en);font-size:14px;font-weight:700;color:var(--navy);background:#fff;border:1px solid var(--line);transform:skewX(var(--slant));transition:background .3s,color .3s,border-color .3s;text-decoration:none;}
.gp-pager .page-numbers>*,.navigation .page-numbers>*{display:inline-block;transform:skewX(calc(var(--slant) * -1));}
.gp-pager a.page-numbers:hover,.navigation a.page-numbers:hover{background:var(--navy);color:#fff;border-color:var(--navy);}
.gp-pager .page-numbers.current,.navigation .page-numbers.current{background:var(--royal);color:#fff;border-color:var(--royal);}
.gp-pager .page-numbers.dots,.navigation .page-numbers.dots{border-color:transparent;background:transparent;}
.gp-pager .screen-reader-text,.navigation .screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
@media(max-width:520px){
  .gp-pager .page-numbers,.navigation .page-numbers{min-width:40px;height:40px;padding:0 10px;font-size:13px;}
}

/* ===== キーボード操作の目印 2026-08-01 =====
   タブキーで動かしたときに、今どこを選んでいるか分かるようにする。
   マウスでクリックしたときには出ない(:focus-visible)。 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible{
  outline:3px solid #1848D8;
  outline-offset:3px;
  border-radius:2px;
}
.section.dark a:focus-visible,
.section.dark button:focus-visible,
footer a:focus-visible,
.ahero a:focus-visible,
.hero a:focus-visible{
  outline-color:#4FC3F7;
}
/* 入力欄は枠でも分かるようにする */
.form input:focus-visible,
.form textarea:focus-visible,
.form select:focus-visible{
  outline-offset:1px;
}

/* ===== ページごとにヘッダーの大きさが違っていた件 2026-08-03 =====
   各ページのCSSが .gpnav .lg img{height:60px} を持っていて、
   共通CSSより後に読まれるためスマホ用の縮小が効いていなかった。
   指定の強さを上げて、どのページでも同じ大きさになるようにする。 */
@media(max-width:720px){
  html body .gpnav{top:10px;padding:0 12px;}
  html body .gpnav .bar{padding:8px 12px 8px 16px;}
  html body .gpnav .lg img{height:40px;}
  html body .gpnav .burger{width:40px;height:40px;padding:9px;gap:4px;}
}

/* ===== フォームの送信ボタンを中央に 2026-08-03 ===== */
.form .submit-btn{margin-left:auto;margin-right:auto;display:flex;}

/* ===== メンバーカードの紹介文が長すぎて写真を覆っていた 2026-08-03 =====
   3行で切って、続きは個人ページで読んでもらう。 */
.member-card .bio,.mcard .bio{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;
}

/* ===== フォームのはみ出し対策 2026-08-03 =====
   iPhone(Safari)で、入力欄がカードの右端を越えていた。
   入力欄は文字数から最小幅を持つため、縦横の枠の中で縮まないことがある。
   下の3つで、どの端末でも枠の中に収める。
     box-sizing … 余白と枠線を幅に含める
     max-width  … 親より大きくならない
     min-width:0 … 枠の中で縮めることを許す（これが無いと縮まない） */
input, textarea, select, button {
  box-sizing: border-box;
  max-width: 100%;
}
input:not([type=checkbox]):not([type=radio]),
textarea, select {
  width: 100%;
  min-width: 0;
}
.form, .form *, .lpform, .lpform *,
.form .row, .lpform .row, .form .f, .lpform .f {
  min-width: 0;
}
/* iPhoneで入力時に画面が拡大されるのを防ぐ(16px未満だと拡大する) */
@media(max-width:760px){
  input:not([type=checkbox]):not([type=radio]), textarea, select { font-size:16px; }
}

/* ===== 縦の余白を詰める 2026-08-03 =====
   セクションの上下が最大140px（下層は150px）と広く、
   スクロール量が多くなっていたため、およそ25%詰める。 */
html body .section{padding:clamp(60px,7.2vw,100px) 0;}
html body .sec{padding:clamp(48px,5.6vw,72px) 0 clamp(64px,8vw,104px);}
html body .sec-head{margin-bottom:34px;}
html body .sec-head h2{margin-bottom:14px;}
html body .sec-bottom{margin-top:32px;}
html body .article{padding:clamp(44px,5.5vw,68px) 0 clamp(56px,7vw,90px);}
html body .ahero{padding:clamp(112px,12vw,150px) 0 clamp(48px,6vw,72px);}
html body .hero{padding:clamp(120px,12.5vw,170px) 0 clamp(60px,7vw,92px);}
@media(max-width:760px){
  html body .section{padding:46px 0;}
  html body .sec{padding:40px 0 52px;}
  html body .sec-head{margin-bottom:26px;}
}

/* ===== フォーカスの目印を控えめに 2026-08-03 =====
   カード類は外側に枠が出ると浮いて見えるため、内側に描く。
   角の丸めもやめる（四角いカードの角に隙間が見えていた）。 */
.member-card:focus-visible, .mcard:focus-visible, .work-card:focus-visible,
.biz-card:focus-visible, .post:focus-visible, .news-item:focus-visible,
.case:focus-visible, .nitem:focus-visible, .lg:focus-visible{
  outline-offset:-3px;
  border-radius:0;
}

/* ===== 濃い背景の上でボタンが見えなくなる件 2026-08-03 =====
   ネイビーの区画にネイビーのボタンが乗り、背景と同化していた。 */
html body .section.dark .btn-primary,
html body .ctaband .btn-primary,
html body .contact-cta .btn-primary,
html body .cta .btn-primary,
html body footer .btn-primary{
  background:#1848D8;
  color:#fff;
}
html body .section.dark .btn-primary:hover,
html body .ctaband .btn-primary:hover,
html body .contact-cta .btn-primary:hover,
html body footer .btn-primary:hover{
  background:#fff;
  color:#082848;
}

/* =========================================================================
   引き渡し前の手直し 2026-08-03
   ページ個別のCSSが共通指定を上書きするため、html body を付けて強さを上げる
   ====================================================================== */

/* 1) 濃い背景の最後の区画で、ボタンが背景と同じ色で見えない
      (メンバー一覧・導入事例一覧の .final) */
html body .final .btn-primary{
  background:#1848D8;
  color:#fff;
}
html body .final .btn-primary:hover{
  background:#fff;
  color:#082848;
}

/* 2) 浮かせているヘッダーの上の隙間から、本文が透けて見える
      隙間の分だけ、ぼかした帯を敷いて隠す */
html body .gpnav::before{
  content:"";
  position:fixed;
  left:0;
  right:0;
  top:0;
  height:16px;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  z-index:-1;
  pointer-events:none;
}

/* 3) 平行四辺形のボタンの左下の角が、本文の左端より外に出る
      傾きの分(高さの約20%)だけ内側へ寄せる */
html body .hero .cta-row .btn-primary{
  margin-left:12px;
}

/* 4) 写真の上に乗せる文字が、暗くしている範囲からはみ出して読めない
      スマホでは写真を縦長にして、文字の入る場所を確保する */
html body .photoband figcaption{
  background:linear-gradient(0deg,rgba(4,18,38,.92) 0%,rgba(4,18,38,.78) 60%,rgba(4,18,38,.30) 100%);
  padding-top:40px;
}

@media(max-width:680px){
  html body .gpnav::before{height:10px;}
  html body .photoband figure{aspect-ratio:4/3;}
  html body .photoband figcaption h3{font-size:17px;line-height:1.5;}
  html body .photoband figcaption p{font-size:12.5px;}
}

/* =========================================================================
   スマホでの操作しやすさ 2026-08-03
   ====================================================================== */
@media(max-width:680px){
  /* 右に寄せたボタンが画面の端からはみ出す。スマホでは中央に置く */
  html body .sec [style*="justify-content:flex-end"],
  html body .sec .acts,
  html body .final .acts{
    justify-content:center !important;
  }
  /* 平行四辺形のボタンは傾きの分だけ横に張り出す。画面幅からはみ出させない */
  html body .btn-primary,
  html body .btn-ghost{
    max-width:calc(100vw - 56px);
  }
  html body .btn-primary>span{
    white-space:normal;
  }
  /* ヒーローの一行説明が「です」だけ次の行に落ちるのを防ぐ */
  html body .hero .micro{
    display:block;
    text-wrap:balance;
    line-height:1.75;
  }
}

/* =========================================================================
   スマホでの日本語の組み方 2026-08-03
   ・「AI検索」のような語の途中で行が変わる
   ・最後の行に1〜2文字だけ落ちる
   ・見出しが1文字あふれて2行になる
   この3つを減らす。
   ====================================================================== */
@media(max-width:680px){
  /* 中黒や空白で区切った一行説明は、区切りのところだけで折り返す */
  html body .hero .micro,
  html body .trust .row,
  html body .pills{
    word-break:keep-all;
    overflow-wrap:break-word;
  }

  /* 見出しは1文字あふれて2行になりやすい。少し小さくして収める */
  html body .hero h1{font-size:24px;line-height:1.45;}
  html body h2.dh,
  html body .sec h2{font-size:23px;line-height:1.5;}
  html body .final h2{font-size:26px;line-height:1.45;}

  /* 本文は行の終わりに1〜2文字だけ残らないようにする */
  html body .hero .sub,
  html body .lead,
  html body .sec p{
    font-size:15px;
    line-height:1.85;
    text-wrap:pretty;
  }

  /* 句読点が行頭に来ないようにする */
  html body{line-break:strict;}
}

/* 和文の字間を詰める(全角の空きすぎを直す) */
html body h1, html body h2, html body h3,
html body .lead, html body .sub{
  font-feature-settings:"palt" 1;
}

/* =========================================================================
   指で押しやすい大きさにする 2026-08-03
   フッターとパンくずのリンクが高さ20〜30pxで、指で押しにくかった。
   ただし1件ずつ44pxにするとフッターが間延びするので、
   行の間隔を押せる範囲に振り替えて、全体の高さはほぼ変えない。
   ====================================================================== */
@media(max-width:680px){
  html body footer nav{gap:0 !important;}
  html body footer nav a{
    display:flex;
    align-items:center;
    min-height:40px;
    padding:0;
  }
  html body footer .f-grid > div > a,
  html body footer a[style*="border-bottom"]{
    display:inline-flex;
    align-items:center;
    min-height:40px;
  }
  html body .crumbs a,
  html body .crumbs .cur{
    display:inline-flex;
    align-items:center;
    min-height:40px;
  }
}

/* =========================================================================
   メンバーカードの下に白い線がまばらに入る 2026-08-04
   カードが浮き上がるとき、写真の高さと枠の高さの端数がずれて
   1px足りなくなり、下地や写真の明るい部分が線に見えていた。
   ・写真を1pxだけ大きくして、隙間そのものを作らせない
   ・暗くする処理を下端まで完全に届かせる
   ・カードを独立した描画層にして、端数のずれを起こさせない
   ====================================================================== */
html body .member-card,
html body .mcard{
  transform:translateZ(0);
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
}
html body .member-card .photo,
html body .mcard .photo{
  overflow:hidden;
}
html body .member-card .photo .mimg,
html body .mcard .photo .mimg{
  height:100%;
  display:block;
}
html body .member-card .scrim{
  background:linear-gradient(180deg,
    rgba(10,35,66,0) 34%,
    rgba(8,28,52,.5) 60%,
    rgba(5,18,34,1) 94%,
    rgba(5,18,34,1) 100%);
}
html body .mcard .scrim{
  background:linear-gradient(180deg,
    rgba(8,40,72,0) 38%,
    rgba(5,18,34,1) 94%,
    rgba(5,18,34,1) 100%);
}
/* 浮き上がる指定は translateZ(0) を残したまま重ねる */
html body .member-card:hover,
html body .member-card:focus-visible{
  transform:translateY(-6px) translateZ(0);
}

/* =========================================================================
   文字装飾セット ＋ 斜め帯セクション 2026-08-04
   指示書どおりに追記。色は navy と royal のみ。cyan は装飾に使わない。
   傾きは常に var(--slant)、中身は必ず逆向きに戻す。
   ====================================================================== */

/* ========== 本文の強弱 ========== */
.body-lead{ font-size:18px; font-weight:700; line-height:1.85; letter-spacing:.01em; color:var(--navy); }
.body-text{ font-size:15px; font-weight:500; line-height:2.1; color:var(--text-mute); }
@media (max-width:720px){
  .body-lead{ font-size:16px; }
  .body-text{ font-size:14px; }
}

/* ========== 文字装飾 8種 ========== */
/* 01 マーカー */
.em-marker{ background:linear-gradient(transparent 62%, rgba(24,72,216,.22) 62%); font-weight:700; }

/* 02 下線 */
.em-underline{ border-bottom:2px solid var(--royal); padding-bottom:3px; font-weight:700; color:var(--navy); }

/* 03 斜め帯で抜く */
/* backface-visibility:hidden は外しています。
   合成レイヤーに乗って中の文字がぼやけるため。
   サイトの他の平行四辺形（ボタン・タグ）にも付いていません。2026-08-04 */
.em-band{ display:inline-block; background:var(--royal); transform:skewX(var(--slant));
  padding:1px 14px; margin:0 8px; }
.em-band > span{ display:inline-block; transform:skewX(calc(var(--slant) * -1)); color:#fff; font-weight:700; }

/* 04 圏点 */
.em-dot{ font-weight:700; -webkit-text-emphasis:dot var(--royal); text-emphasis:dot var(--royal); }
p:has(.em-dot), li:has(.em-dot){ line-height:2.4; }

/* 05 大小のコントラスト（数値＋単位） */
.em-stat{ font-size:24px; font-weight:800; color:var(--navy); }
.em-stat > span{ font-size:13px; font-weight:500; color:var(--text-mute); margin-left:8px; }

/* 06 縦線で引用 */
.em-quote{ border-left:3px solid var(--royal); padding-left:18px; }
@media (max-width:720px){ .em-quote{ padding-left:16px; } }

/* 07 斜めナンバー */
.em-num{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:32px;
  background:var(--navy); transform:skewX(var(--slant)); }
.em-num > span{ display:inline-block; transform:skewX(calc(var(--slant) * -1));
  color:#fff; font-size:15px; font-weight:800; }

/* 08 括り線 */
.em-outline{ display:inline-block; border:1.5px solid var(--royal); color:var(--royal); font-weight:700;
  padding:4px 16px; margin:0 8px; transform:skewX(var(--slant)); }
.em-outline > span{ display:inline-block; transform:skewX(calc(var(--slant) * -1)); }

/* ========== 斜め帯セクション ========== */
.slant-stack{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; overflow:hidden; }
.slant-row{ display:flex; align-items:center; transform:skewX(var(--slant)); padding-left:120px; }
.slant-row > span{ display:inline-block; transform:skewX(calc(var(--slant) * -1));
  font-size:104px; font-weight:800; letter-spacing:.08em; line-height:1; }
.slant-row--navy{ width:1000px; margin-left:90px;  height:176px; background:var(--navy); }
.slant-row--navy > span{ color:#fff; }
.slant-row--ice{  width:1000px; margin-left:230px; height:176px; background:var(--ice-soft); }
.slant-row--ice > span{ color:var(--navy); }
.slant-row--photo{ width:880px; margin-left:370px; height:110px; padding:0; overflow:hidden; }
.slant-row--photo .pic{ width:140%; margin-left:-20%; height:100%;
  transform:skewX(calc(var(--slant) * -1)); background-position:center 58%; background-size:cover; }
.slant-row--royal{ width:560px; margin-left:510px; height:64px; background:var(--royal); }
.slant-row--royal > span{ color:#fff; font-size:15px; font-weight:700; letter-spacing:.34em; }

@media (max-width:720px){
  .slant-stack{ gap:6px; }
  .slant-row{ padding-left:56px; }
  .slant-row > span{ font-size:46px; letter-spacing:.04em; }
  .slant-row--navy{ width:296px; margin-left:16px;  height:104px; }
  .slant-row--ice{  width:296px; margin-left:52px;  height:104px; }
  .slant-row--photo{ width:268px; margin-left:88px; height:84px; }
  .slant-row--photo .pic{ width:150%; margin-left:-25%; }
  .slant-row--royal{ width:244px; margin-left:116px; height:52px; padding-left:44px; }
  .slant-row--royal > span{ font-size:10px; letter-spacing:.2em; }
}

/* =========================================================================
   日本語の折り返しを文節で切る 2026-08-04
   日本語は文字と文字の間ならどこでも折れるため、
   「技術SEO、構／造化データ」「かもし／れません。」のような割れ方が起きる。
   ・word-break:auto-phrase … 文節を見て折る（対応ブラウザのみ）
   ・text-wrap:pretty      … 最後の行に1〜2文字だけ残さない
   ・装飾を付けた語は、その中では折らない
   ====================================================================== */
html body .lead,
html body .sub,
html body .fv-lead,
html body .fv-mobile-lead,
html body .body-lead,
html body .body-text,
html body .msg-body p,
html body .sec p,
html body figcaption p{
  word-break:auto-phrase;   /* 文節で折る */
  line-break:strict;        /* 句読点を行頭に出さない */
  /* text-wrap:pretty は外しました。
     最後の行を短くしないために手前の行をわざと詰めるので、
     1行目が埋まりきらず、かえって不自然に見えたためです。2026-08-04 */
}

/* 強調した語の途中では折らない（下線やマーカーが2行に割れないようにする） */
html body .em-marker,
html body .em-underline{
  word-break:keep-all;
  overflow-wrap:break-word;
}


/* =========================================================================
   メンバーカード下端の白い線 — 最終対処 2026-08-04
   原因を1つずつ潰しても消えなかったため、
   下端2pxを濃紺で必ず覆う。何が原因でも、そこに光は出ない。
   文字より下、影より上に置くので見た目は変わらない。
   ====================================================================== */
/* 原因が確定しました（2026-08-04・実測）。
   写真の最下段の明るさが人によって違い（諸見里様42／庄司様83／竹垣様153／岸田様205）、
   明るい写真ほど切り抜きの境目でにじんで白い線に見えていました。
   対処: 写真を縁まで届かせず、最後の2pxはカードの地色にする。
        地色は暗くする処理の終わりと同じ色にしてあるので、見た目は変わりません。 */
html body .member-card,
html body .mcard{
  background:#051222;
}
html body .member-card .photo,
html body .mcard .photo{
  inset:0 0 2px 0;
}
html body .member-card::after,
html body .mcard::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:2px;
  background:#051222;
  z-index:3;
  pointer-events:none;
}

/* =========================================================================
   締めのCTAをTOPと同じ作りにそろえる 2026-08-04
   TOPのCONTACTは背景に大きな英字を薄く敷いて面を締めている。
   下層ページの .final は素のままだったので、同じ処理を入れる。
   ::after はページ側で格子模様に使われているので ::before を使う。
   ====================================================================== */
html body .final{ position:relative; overflow:hidden; }
html body .final::before{
  content:'CONTACT';
  position:absolute; left:-2vw; top:8px;
  font-family:var(--ff-en);
  font-size:clamp(84px,13vw,190px);
  font-weight:800; letter-spacing:.02em; line-height:1;
  color:rgba(255,255,255,.05);
  white-space:nowrap; pointer-events:none;
  z-index:0;
}
html body .final .wrap{ position:relative; z-index:2; }

@media(max-width:760px){
  html body .final::before{ top:auto; bottom:10px; left:-4vw; font-size:64px; }
}

/* =========================================================================
   濃い背景の上で装飾が見えない 2026-08-04
   .em-underline は文字色を濃紺で固定しているため、濃紺の面では文字が消える。
   .em-marker の下敷きも、濃紺の上では薄すぎて出ない。
   色は navy と royal のみ、という約束は守ったまま濃さだけ変える。
   ====================================================================== */
html body .section.dark .em-underline,
html body .intro .em-underline,
html body .why .em-underline,
html body .order .em-underline,
html body .works .em-underline,
html body .final .em-underline,
html body .navy .em-underline,
html body .hero.is-dark .em-underline,
html body .aiseo-hero .em-underline{
  color:#fff;
}
html body .section.dark .em-marker,
html body .intro .em-marker,
html body .why .em-marker,
html body .order .em-marker,
html body .works .em-marker,
html body .final .em-marker,
html body .navy .em-marker{
  background:linear-gradient(transparent 62%, rgba(24,72,216,.62) 62%);
}

/* =========================================================================
   一覧のカードに枠がない 2026-08-04
   ブログ・お役立ち資料・セミナー・お知らせの .post は、
   枠も地色も無く、写真と文字が背景の上に置いてあるだけだった。
   サイトの他のカード（課題・ご提供内容）と同じ形にそろえる。
   ====================================================================== */
html body .pgrid .post{
  background:#fff;
  border:1px solid var(--line);
  border-radius:0;          /* サイト全体が角のある形なので丸めない 2026-08-05 */
  overflow:hidden;
  transition:transform .35s var(--ease), box-shadow .35s;
}
html body .pgrid .post:hover{
  box-shadow:0 22px 48px -24px rgba(8,40,72,.28);
}
/* 写真は枠の内側いっぱいに、文字は内側に余白を持たせる */
html body .pgrid .post .thumb{
  border-radius:0;
}
html body .pgrid .post .row{
  margin:16px 20px 8px;
}
html body .pgrid .post h3{
  margin:0 20px 20px;
}
html body .pgrid .post > span{
  margin:0 20px 20px;
}
@media(max-width:600px){
  html body .pgrid .post .row{margin:14px 16px 8px;}
  html body .pgrid .post h3{margin:0 16px 18px;}
  html body .pgrid .post > span{margin:0 16px 18px;}
}

/* =========================================================================
   長い説明文にメリハリをつける 2026-08-04
   線を増やすと濃い背景で消える事故が起きるので、
   線ではなく「1文目を大きく・太く」で差をつける。
   ====================================================================== */
html body .lead-1st{
  font-size:1.16em;
  font-weight:700;
  color:var(--navy);
}
/* 濃い背景の面では白で */
html body .section.dark .lead-1st,
html body .intro .lead-1st,
html body .why .lead-1st,
html body .order .lead-1st,
html body .works .lead-1st,
html body .final .lead-1st,
html body .navy .lead-1st,
html body .hero .lead-1st{
  color:#fff;
}
@media(max-width:720px){
  html body .lead-1st{ font-size:1.1em; }
}


/* 一覧ページのカードにだけ白い1px枠が残っていた（TOP側は外してあった）。
   これが下端でヒビに見えるので外す。2026-08-04 */
html body .mcard{
  border:0;
}
html body .mcard:hover{
  box-shadow:0 32px 60px -34px rgba(0,0,0,.5);
}


/* 一覧ページのカードは写真を包む枠が無く、画像が直接入っている。
   TOPと同じく、写真を下端2px手前で止めて地色を見せる。2026-08-04 */
html body .mcard > .mimg,
html body .mcard > img.mimg{
  position:absolute;
  inset:0 0 2px 0;
  width:100%;
  height:calc(100% - 2px);
  object-fit:cover;
  display:block;
}


/* ===== オープニング（幕）E案に差し替え 2026-08-04 ===== */
/* ============================================================
   オープニング（幕）— opening-logo ／ E案（仕上げ案）
   2026-08-04
   ------------------------------------------------------------
   ・ロゴは下から「見えていく」（ぼかし・跳ね返りは使わない）
   ・ひとことは位置を変えず、明るさだけで出す
   ・0.55秒止めてから、幕が抜ける
   ・抜けるとき、幕より中身が少し速く出ていく
   ・全体で3.3秒
   ・色は変数を見ています。使う側で --navy を決めてください。
     決まっていなければ #082848 が入ります。
   ============================================================ */

.gp-intro{
  position:fixed; inset:0; z-index:9999;
  background:var(--navy,#082848);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  overflow:hidden;
  will-change:transform;
}

.gp-intro img{
  width:min(64vw,460px); max-width:82vw; height:auto; display:block;
  animation:gpIntroReveal 1s cubic-bezier(.16,1,.3,1) .25s both;
}

.gp-intro-tag{
  margin:22px 0 0; color:#fff;
  font-size:clamp(13px,1.9vw,19px); font-weight:600; letter-spacing:.16em; line-height:1.7;
  text-align:center; padding:0 20px;
  opacity:0;
  animation:gpIntroFade .9s ease-out 1.15s both;
}

/* 下から見えていく。動かすのはロゴだけ */
@keyframes gpIntroReveal{
  from{ clip-path:inset(0 0 100% 0); transform:translateY(14px); }
  to  { clip-path:inset(0 0 0 0);    transform:translateY(0);    }
}
/* ひとことは動かさない */
@keyframes gpIntroFade{
  from{ opacity:0; }
  to  { opacity:.72; }
}

/* ------------------------------------------------------------
   抜ける（JavaScript が .gone を付けます）
   幕は0.72秒、中身は −104px。中身のほうが少し速く出ていきます。
   ------------------------------------------------------------ */
.gp-intro.gone{
  pointer-events:none;
  animation:gpIntroExit .72s cubic-bezier(.6,0,.2,1) both;
}
.gp-intro.gone img{
  animation:gpIntroLead .72s cubic-bezier(.5,0,.2,1) both;
}
.gp-intro.gone .gp-intro-tag{
  opacity:.72;
  animation:gpIntroLead .72s cubic-bezier(.5,0,.2,1) both;
}

@keyframes gpIntroExit{
  from{ transform:translateY(0); }
  to  { transform:translateY(-100%); }
}
@keyframes gpIntroLead{
  from{ transform:translateY(0); }
  to  { transform:translateY(-104px); }
}

/* ------------------------------------------------------------
   （任意）幕が抜けたあと、背後のページを 1.035 → 1 で落ち着かせる。
   使うときは、落ち着かせたい要素（メインの囲みなど）に
   class="gp-settle" を付けてください。付けなければ何も起きません。
   ------------------------------------------------------------ */
html.gp-intro-leaving .gp-settle{
  animation:gpSettle .9s cubic-bezier(.16,1,.3,1) both;
}
@keyframes gpSettle{
  from{ transform:scale(1.035); }
  to  { transform:scale(1);     }
}

/* SP */
@media(max-width:720px){
  .gp-intro img{ width:min(72vw,320px); }
  .gp-intro.gone img,
  .gp-intro.gone .gp-intro-tag{ animation-name:gpIntroLeadSp; }
  @keyframes gpIntroLeadSp{
    from{ transform:translateY(0); }
    to  { transform:translateY(-64px); }
  }
}
@media(max-width:520px){
  .gp-intro-tag{ margin-top:16px; font-size:13px; letter-spacing:.08em; }
}
/* iPhone SE など狭い端末。字間を詰めて1行に収める。2行になると据わりが悪い。 */
@media(max-width:400px){
  .gp-intro-tag{ letter-spacing:.02em; padding:0 12px; }
  .gp-intro img{ animation-delay:.2s; }
  .gp-intro-tag{ animation-delay:1.05s; }
}

/* 動きを減らす設定の端末では、そもそも出さない */
@media(prefers-reduced-motion:reduce){
  .gp-intro{ display:none; }
}


/* =========================================================================
   本文中の強調（-22°の下線ハイライト） 2026-08-05
   指示書「作業C」の .mark-royal。
   本文に塗りつぶしの帯（.em-band）を使うと重く、行末で切れると
   助詞だけが次の行に残るため、本文はこちらを使う。
   ====================================================================== */
/* 2行にまたがると、絶対配置の帯は1つの箱としてまとめて描かれてしまい、
   文字と関係のない場所に色が乗る。背景のグラデーションなら行ごとに描かれる。
   傾きは失われるが、折り返しても崩れないほうを取った。2026-08-05 */
.mark-royal{
  font-weight:700;
  color:var(--navy);
  background:linear-gradient(transparent 62%, rgba(24,72,216,.22) 62%);
  padding:0 2px;
}
@media(max-width:760px){
  .mark-royal{ background:linear-gradient(transparent 64%, rgba(24,72,216,.22) 64%); }
}

/* =========================================================================
   丸みのある形を、サイトの平行四辺形に揃える 2026-08-05
   進め方の番号バッジ（角丸16px）と、その下の小タグ（完全な丸）だけ
   他と言語が違っていた。傾きは他の要素と同じ var(--slant)。
   中身は必ず逆向きに戻して、文字は直立させる。
   ====================================================================== */
/* 大きさはページ側の指定に任せる（スマホで小さくしている場合があるため）。
   ここでは角と傾きだけを決める。2026-08-05 */
/* 番号バッジは左辺の帯に作り直したため、ここの指定は撤去しました。2026-08-05 */

/* =========================================================================
   マーカーが行をまたいで割れる 2026-08-05
   下敷きが2行に分かれると、汚れのように見える。
   ひとかたまりで折り返すようにする（入りきらなければ次の行へ丸ごと移る）。
   ※ 下線ハイライト(.mark-royal)は行をまたいでも自然なので、そのまま。
   ====================================================================== */
html body .em-marker{
  display:inline-block;
}

/* =========================================================================
   下層LPの余白を詰める 2026-08-05
   「1pxも無駄なスクロールをさせない」方針。
   区画の上下、見出しと本文の間、カードの間隔をまとめて詰める。
   文字の大きさと行間は変えない（読みやすさは落とさない）。
   ====================================================================== */
html body .hero{
  padding-top:clamp(104px,11vw,150px);
  padding-bottom:clamp(44px,5vw,64px);
}
html body .sec,
html body .section{
  padding-top:clamp(52px,6vw,84px);
  padding-bottom:clamp(52px,6vw,84px);
}
html body .sec .dh,
html body .sec h2{
  margin-bottom:10px;
}
html body .sec .lead{
  margin-top:12px;
}
html body .tl,
html body .grid2,
html body .grid3,
html body .issue-grid,
html body .svc-grid,
html body .steps2,
html body .launch-flow,
html body .faq{
  margin-top:clamp(26px,3vw,36px);
}
html body .final{
  padding-top:clamp(64px,8vw,104px);
  padding-bottom:clamp(64px,8vw,104px);
}
@media(max-width:760px){
  html body .hero{ padding-top:100px; padding-bottom:36px; }
  html body .sec, html body .section{ padding-top:44px; padding-bottom:44px; }
  html body .final{ padding-top:56px; padding-bottom:56px; }
}

/* =========================================================================
   スマホの下に固定するCTA 2026-08-05
   Instagramページで作ったものを共通へ移し、LINE・AI検索SEOにも展開。
   PCでは出さない（PCはヘッダーのCTAと本文中のボタンで足りる）。
   ====================================================================== */
html body .sticky-cta{ display:none; }
@media(max-width:920px){
  html body .sticky-cta{
    position:fixed; left:12px; right:12px; bottom:12px; z-index:190;
    display:flex; align-items:center; justify-content:center; gap:10px;
    background:var(--royal); color:#fff; font-size:15.5px; font-weight:700;
    padding:16px 20px; border-radius:9999px;
    box-shadow:0 14px 34px -10px rgba(4,23,42,.5);
  }
  html body .sticky-cta .arw{ transition:transform .35s var(--ease); }
  html body .sticky-cta:active{ background:#1f57f0; }
  html body footer{ padding-bottom:76px; }
  /* AI検索SEOの追従バーとは併用しない（同じ場所に2つ出る） */
  html body .lpbar{ display:none; }
}


/* =========================================================================
   LPモード 2026-08-05
   もとは page-ai-seo.css にあったものを共通へ移設。
   functions.php の gp_lp_body_class() でスラッグを足したページに効く。
   ヘッダーは追従させず、メニューをCTA1つに畳み、パンくずとフッターの
   リンク列を消す。出口を1つに絞るため。
   ====================================================================== */
body.lp .gpnav .menu{display:flex;}
body.lp .gpnav{position:absolute;top:16px;}
body.lp .gpnav::before{display:none;}
body.lp .gpnav .menu>.dd,
body.lp .gpnav .menu>a:not(.cta){display:none;}
body.lp .gpnav .burger{display:none;}
body.lp .gpdrawer{display:none;}
body.lp .crumbs{display:none;}
/* フッターのリンク列は、スマホだけ畳む。
   PCは面に余裕があるので、そのまま出しておく。2026-08-05 */
@media(max-width:920px){
  body.lp footer .f-grid>div:nth-child(n+2){display:none;}
  body.lp footer .f-grid{grid-template-columns:1fr;}
}

/* =========================================================================
   お知らせ一覧がスマホで変に空く 2026-08-05
   日付(min-width:96px)とタイトル(min-width:220px)を横並びにしているため、
   狭い画面では折り返して日付の右に大きな空きができていた。
   スマホでは日付を上、タイトルを下に積む。
   ====================================================================== */
@media(max-width:680px){
  html body .nitem{
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
    padding:18px 4px;
  }
  html body .nitem .date{ min-width:0; font-size:13px; }
  html body .nitem .title{ min-width:0; width:100%; }
  html body .nitem:hover{ padding-left:4px; }
}

/* =========================================================================
   タップしたあとホバーの見た目が残る 2026-08-05
   スマホには「マウスを外す」動作が無いため、:hover を当てると
   タップ後もその見た目が残り続ける（左の青線・矢印・余白の変化）。
   ポインタのある環境だけに限定する。
   ====================================================================== */
@media (hover:none){
  html body .nitem:hover{
    background:transparent;
    box-shadow:none;
    padding-left:4px;
  }
  html body .nitem:hover::before{ transform:scaleY(0); }
  html body .nitem:hover .arw{ opacity:0; }
  html body .member-card:hover,
  html body .mcard:hover,
  html body .post:hover,
  html body .biz-card:hover,
  html body .icard:hover,
  html body .scard:hover,
  html body .work-card:hover{
    transform:none;
    box-shadow:none;
  }
  html body .member-card:hover .bio{ max-height:0; opacity:0; margin-top:0; }
  html body .member-card:hover .photo .mimg,
  html body .biz-card:hover .biz-photo{ transform:none; opacity:0; }
}

/* =========================================================================
   進め方の4枚を、縦に詰める 2026-08-05
   1枚ずつの余白が積み上がって、画面1つ分よけいに送っていた。
   文字の大きさは変えず、余白と行送りだけを詰める。
   あわせて、傾けたタグ同士が斜めの辺でぶつかっていたので間隔を広げる。
   ====================================================================== */
html body .launch-steps{ gap:10px; }

html body .launch-step .meta{ margin-bottom:3px; }
html body .launch-step h3{ margin-bottom:3px; }
html body .launch-step p{ line-height:1.65; }


/* =========================================================================
   下に追従する細い帯（PC）2026-08-05
   AI検索・SEOだけに置いていたものを、LINE・インスタにも広げました。
   スマホでは丸いボタン(.sticky-cta)が同じ役目をするので、こちらは出しません。
   ====================================================================== */
/* 追従CTA。スマホでは指の届く位置に、PCでは細い帯で。 */
.lpbar{position:fixed;left:0;right:0;bottom:0;z-index:190;background:var(--navy);
  border-top:1px solid var(--line-on-dark);transform:translateY(110%);
  transition:transform .35s var(--ease);pointer-events:none;}
.lpbar.show{transform:translateY(0);pointer-events:auto;}
.lpbar-in{max-width:1100px;margin:0 auto;padding:12px clamp(16px,4vw,40px);
  display:flex;align-items:center;justify-content:space-between;gap:16px;}
.lpbar p{font-size:14px;font-weight:700;color:#fff;}
.lpbar .btn-primary{flex:none;padding:13px 22px;font-size:14px;}
@media(max-width:680px){
  .lpbar-in{padding:10px 16px;gap:10px;}
  .lpbar p{display:none;}
  .lpbar .btn-primary{width:100%;justify-content:center;}
  html body .lpbar .btn-primary{max-width:none;}
}


/* =========================================================================
   進め方のカードで、中身の少ない1枚だけ下にずれる 2026-08-05
   4枚は同じ高さに揃うため、文字数の少ないカードは余った分だけ
   中身が下へ押し下げられていた（04だけ26px下がっていた）。
   中身は上で揃え、余りはカードの下に落とす。
   ====================================================================== */
/* 上の指定は、番号を左辺の帯にしたことで不要になりました。2026-08-05 */

/* =========================================================================
   よくあるご質問の開閉マーク 2026-08-05
   文字の「＋」を丸の中に置いていたため、書体の高さのくせで
   少し下寄りに見え、丸だけがサイトの角ばった形から浮いていた。
   線を2本引いて作り直し、まん中で交差させる。
   ====================================================================== */
html body .q .ic{
  position:relative;
  width:26px; height:26px;
  border-radius:0;
  font-size:0;                 /* もとの「＋」の文字は消す */
  transition:transform .3s var(--ease);
}
html body .q .ic::before,
html body .q .ic::after{
  content:'';
  position:absolute; left:50%; top:50%;
  background:currentColor;
  border-radius:1px;
}
html body .q .ic::before{ width:11px; height:2px; transform:translate(-50%,-50%); }
html body .q .ic::after { width:2px; height:11px; transform:translate(-50%,-50%); }
/* 開いたら×にする */
html body .qitem.open .ic{ transform:rotate(45deg); }
/* 指で押せる高さを確保する */
@media(max-width:920px){
  html body .q{ min-height:56px; align-items:center; }
}


/* =========================================================================
   進め方の番号を、カード左辺の帯にする（LINE・インスタ・AI検索SEO 共通）
   2026-08-05
   番号を独立した図形として置くのをやめ、カードの高さいっぱいに立つ
   帯にしました。4つが縦に連なることで、順に進む感じが出ます。
   これまでの点線の縦ガイドは役目が終わるので消します。
   ※ カードの上下の余白と、帯の上下のはみ出し量は必ず同じ数値にすること。
   ====================================================================== */
html body .launch-steps::before{ display:none; }

html body .launch-step{
  position:relative;
  display:grid;
  grid-template-columns:46px 1fr;
  gap:18px;
  padding:15px 20px 15px 0;   /* 左は0。帯をカードの左端にぴったり付ける */
  overflow:hidden;            /* カードの角丸に帯の角を合わせて切り抜く */
  align-items:stretch;        /* 帯をカードの高さいっぱいに伸ばす */
}

html body .launch-step .badge{
  position:relative; z-index:2;
  width:46px; height:auto;
  padding:0;
  border-radius:0;
  background:var(--navy);
  display:grid;
  justify-items:center;
  align-content:start;        /* 番号は上で揃える。中央に置くとカードが伸びたとき
                                 見出しの行から離れて浮いて見えるため。 */
  align-self:stretch;
  margin:-15px 0;             /* カードの上下余白15pxを打ち消して天地いっぱいに */
  padding-top:16px;           /* 見出し（FREE CONSULTATION）の行に高さを合わせる */
  transform:none;
  transition:background .35s var(--ease);
}
html body .launch-step:hover .badge{ background:var(--royal); }
html body .launch-step .badge > span{
  transform:none;
  display:block;
  color:#fff;
  font-size:15px; font-weight:900; letter-spacing:.04em;
  font-variant-numeric:tabular-nums;   /* 01〜04で数字の幅を揃える */
}

/* 狭い画面でも1列に落とさない。落とすと帯がただの横長の塗りになるため、
   帯を46→40pxに詰めて2列のまま保つ。 */
@media(max-width:560px){
  html body .launch-step{ grid-template-columns:40px 1fr; gap:14px; }
  html body .launch-step .badge{ width:40px; }
  html body .launch-step .badge > span{ font-size:13.5px; }
}


/* =========================================================================
   スマホで押したときに白く抜ける 2026-08-05
   端末が押した場所に白い膜をかけるため、カードの中身が一瞬消えて見えた。
   膜を切って、押した感じは背景のわずかな沈みで出す。
   ====================================================================== */
html body a,
html body button,
html body .q,
html body [role="button"]{
  -webkit-tap-highlight-color:transparent;
}
@media(hover:none){
  html body .bizcard:active,
  html body .biz-card:active,
  html body .scard:active,
  html body .icard:active,
  html body .mcard:active,
  html body .nitem:active{ filter:brightness(.97); }
}

/* =========================================================================
   TOPの相談カード、下の「無料相談 →」を右へ寄せる 2026-08-05
   ====================================================================== */
/* 「無料相談 →」の位置は front-page.css 側にまとめています。2026-08-05 */

/* =========================================================================
   よくあるご質問の「＋」の囲み 2026-08-05
   薄い青の四角が、質問文とは別の部品のように見えていた。
   囲みを外して、線だけにする。
   ====================================================================== */
html body .q .ic{
  background:none;
  border:0;
  color:var(--royal);
}
html body .qitem.open .ic{ color:var(--navy); }

/* =========================================================================
   進め方の写真が、上に少ししか見えず切れて見える 2026-08-05
   スマホでは写真の高さが180pxしかなく、上に重ねた「ロードマップ」の
   白いカードでほとんど隠れていた。写真が写真として読める高さにする。
   ====================================================================== */
@media(max-width:640px){
  html body .launch-visual{ min-height:320px; }
  html body .launch-card{ left:16px; right:16px; bottom:16px; max-width:none; }
}

/* =========================================================================
   LPの間延びを詰める 2026-08-05
   測ったところ、PCで7.3〜8.2画面分、スマホで9.8〜12.8画面分ありました。
   文字の大きさは変えず、余白だけを詰めます。
   ・中身が空なのに上下の余白だけ残っているところを消す
   ・最後のCTAが1画面分あったので詰める
   ・見出しの上下と、節と節のあいだを詰める
   ====================================================================== */

/* 中身が空の節は、余白ごと消す（インスタの trust が上下92px占有していた） */
html body.lp section:empty,
html body.lp section > .wrap:empty{ display:none; }
html body.lp .trust:not(:has(img)):not(:has(p)){ display:none; }

/* 節の上下 */
@media(min-width:921px){
  /* 写真帯など、画面いっぱいに敷くものは対象外。
     ここに余白を足すと、帯の上下が白く空いてしまう。2026-08-05 */
  html body.lp > section:where(:not(.photoband):not(.fullshot):not(.midcta):not(.target):not(.clients):not(.trust):not(.hero)){
    padding-top:58px; padding-bottom:58px;
  }
  html body.lp .hero{ padding-top:136px; }  /* 見出しがヘッダーに近すぎたため戻す 2026-08-05 */
  html body.lp .final{ padding-top:72px; padding-bottom:72px; }
  html body.lp .midcta{ margin-block:0; }
}
@media(max-width:920px){
  /* 節の上下は、ページ側がすでに34〜44pxで組んであり、
     ここで一律にすると逆に広がる箇所が出たのでやめました。2026-08-05 */
  html body.lp .hero{ padding-top:104px; }
  html body.lp .final{ padding-top:48px; padding-bottom:48px; }
}

/* 見出しまわり */
html body.lp .eyebrow{ margin-bottom:10px; }
html body.lp > section > .wrap > h2{ margin-bottom:8px; }
html body.lp > section > .wrap > h2 + p{ margin-bottom:22px; }

/* 最後のCTAの中身 */
html body.lp .final h2{ margin-bottom:10px; }
html body.lp .final p{ margin-bottom:20px; }


/* =========================================================================
   スマホのヒーローが1画面半ある 2026-08-05
   本文の下に置いた飾りの写真コラージュだけで約690pxあり、
   LINE（ヒーロー全体640px）と比べて倍以上でした。
   飾りなので、スマホでは高さを抑えます。
   ====================================================================== */
/* コラージュは下で「スマホでは出さない」に変えたため、
   高さを抑える指定は不要になりました。2026-08-05 */

/* =========================================================================
   TOPのBUSINESS、4枚目だけ見出しの高さが合わない 2026-08-05
   1〜3枚目は番号（高さ36px）を置いているのに、4枚目の相談カードは
   小さな見出し文字（高さ11px）だったため、その下が19px上にずれていた。
   4枚目の頭の高さを番号にそろえる。
   ====================================================================== */
html body .biz-card--consult .consult-eyebrow{
  min-height:36px;
  margin-bottom:24px;
  display:flex;
  align-items:flex-end;
}


/* =========================================================================
   スマホの下の丸ボタンは、ヒーローを過ぎてから出す 2026-08-05
   最初から出ていると、ファーストビューの写真を覆い、
   ヘッダーの「無料相談」・本文の「無料相談に申し込む」と合わせて
   同じ行き先のボタンが1画面に3つ並んでしまう。
   ====================================================================== */
@media(max-width:920px){
  html body .sticky-cta{
    transform:translateY(140%);
    opacity:0;
    pointer-events:none;
    transition:transform .35s var(--ease), opacity .35s var(--ease), background .35s;
  }
  html body .sticky-cta.show{
    transform:translateY(0);
    opacity:1;
    pointer-events:auto;
  }
}


/* =========================================================================
   スマホのファーストビュー 2026-08-05
   ・見出しから下を中央に揃える
   ・Instagram画面の見本（コラージュ）は最初の画面から外す
     飾りだけで690px（0.8画面分）あり、いちばん読ませたい文の
     すぐ下に置くと、そこで一度スクロールが止まって見えるため。
     PCではこれまでどおり出します。
   ====================================================================== */
@media(max-width:640px){
  html body.lp .hero .mosaic,
  html body.lp .hero .composite{ display:none; }

  html body.lp .hero > .wrap{ text-align:center; }
  html body.lp .hero h1,
  html body.lp .hero .sub,
  html body.lp .hero .micro,
  html body.lp .hero p{ text-align:center; }

  /* 中央に置くもの */
  html body.lp .hero .eyebrow,
  html body.lp .hero .cta-row,
  html body.lp .hero .acts,
  html body.lp .hero .trustband{
    justify-content:center;
  }
  html body.lp .hero .btn-primary,
  html body.lp .hero .btn-ghost{ margin-inline:auto; }
}


/* =========================================================================
   写真帯の文字の下敷きが、途中で切れてぶつかって見える 2026-08-05
   左下だけに置いていたため、下敷きの右端が写真の途中で角ばって終わり、
   見出しの背後で線のように見えていた。横いっぱいに伸ばす。
   ====================================================================== */
html body .photoband figcaption{
  right:0;
  background:linear-gradient(0deg, rgba(4,18,38,.88) 0%, rgba(4,18,38,.55) 55%, transparent 100%);
}

/* =========================================================================
   LPのファーストビュー、間の取り方をそろえる 2026-08-05
   見出しからボタンまでの間が 22 / 18 / 16 / 20 / 10px とばらばらで、
   詰まって見えるところと空いて見えるところが混在していた。
   ・ナビと見出しの間をもう少し空ける
   ・見出し→説明→補足→ボタン→実績 の間を、意味の切れ目に合わせてそろえる
   ・ボタンの下に残っていた空きを詰める
   ====================================================================== */
@media(min-width:921px){
  html body.lp .hero{ padding-top:148px; padding-bottom:44px; }
}
@media(max-width:920px){
  html body.lp .hero{ padding-top:112px; padding-bottom:40px; }  /* ボタンの下に余白がなかった 2026-08-05 */
}
html body.lp .hero .sub{ margin-top:20px; }
html body.lp .hero .micro{ margin-top:12px; }
html body.lp .hero .cta-row,
html body.lp .hero .acts{ margin-top:28px; }
html body.lp .hero .trustband{ margin-top:24px; }
html body.lp .hero .trustband + *{ margin-top:12px; }


/* =========================================================================
   LPのファーストビューに背景の映像を敷く 2026-08-05
   文字は濃紺のままなので、映像の上に明るい膜をかけて読めるようにする。
   下端はページの地色へ溶かして、境目の線が出ないようにする。
   「動きを減らす」設定の端末では映像を止める。
   ====================================================================== */
html body .hero--video{ position:relative; overflow:hidden; }
html body .hero--video > .wrap{ position:relative; z-index:5; }

html body .fv-video{
  position:absolute; inset:0; z-index:0;
  overflow:hidden; pointer-events:none;
  background:var(--bg-soft);
}
html body .fv-video video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center 58%;
  opacity:0; transition:opacity .9s ease;
}
html body .fv-video video.ready{ opacity:1; }

/* 文字を読ませるための明るい膜。左（文字側）を濃く、右を薄く。 */
html body .hero--video .fv-video::after{
  content:''; position:absolute; inset:0; z-index:1;
  /* 文字が中央にあるので、左右でなく上下方向でかける。
     濃くしすぎると映像が見えず、敷いた意味がなくなる。 */
  background:linear-gradient(180deg,
    rgba(240,245,252,.86) 0%,
    rgba(240,245,252,.74) 34%,
    rgba(240,245,252,.62) 68%,
    rgba(240,245,252,.70) 100%);
}
/* 下端をページの地色へ溶かす */
html body .hero--video .fv-video::before{
  content:''; position:absolute; left:0; right:0; bottom:0; height:140px; z-index:2;
  background:linear-gradient(180deg, rgba(240,245,252,0), var(--bg-soft));
}

/* スマホは文字が中央なので、上から下へ薄くする */
@media(max-width:920px){
  html body .hero--video .fv-video::after{
    background:linear-gradient(180deg,
      rgba(240,245,252,.90) 0%,
      rgba(240,245,252,.80) 46%,
      rgba(240,245,252,.70) 100%);
  }
}

@media(prefers-reduced-motion:reduce){
  html body .fv-video video{ display:none; }
}

/* =========================================================================
   画面いっぱいの写真帯に、出入りのアニメをかけない 2026-08-05
   ぼかしながら少し動いて現れる演出は、囲みのあるカードだと自然だが、
   横いっぱいの写真だと画面全体が揺れたように見えて落ち着かない。
   ====================================================================== */
html body .photoband figure,
html body .photoband img,
html body .fullshot figure,
html body .fullshot img,
html body .photo-band img{
  opacity:1 !important;
  filter:none !important;
  transform:none !important;
  transition:none !important;
}

/* =========================================================================
   スマホでマーカーが文字からはみ出して見える 2026-08-05
   下敷きの帯を左右6pxずつ広げたうえに傾けていたため、
   画面の幅が狭いと行頭・行末で外へ飛び出して見えていた。
   スマホでは文字の幅ちょうどに収め、傾きも外す。
   ====================================================================== */
@media(max-width:640px){
  html body .mark-cyan::before{
    left:0; right:0;
    transform:none;
  }
  html body .mark-cyan{
    display:inline;               /* 行をまたいでも自然に折り返す */
  }
}

/* =========================================================================
   カードがマウスオーバー・クリックで揺れる 2026-08-05
   カード自体を数px持ち上げていたため、下の縁あたりにポインタがあると
   「浮く→ポインタが外に出る→戻る→また中に入る」を繰り返して震えていた。
   持ち上げをやめ、影と中の写真の寄りだけで反応を出す。
   （中の写真の動きは .mimg 側なので、そのまま残ります）
   ====================================================================== */
html body .mcard:hover,
html body .member-card:hover,
html body .biz-card:hover,
html body .launch-step:hover,
html body .scard:hover,
html body .icard:hover,
html body .acard:hover,
html body .case:hover,
html body .post:hover,
html body .work-card:hover,
html body .check-item:hover,
html body .client-logo:hover,
html body .nitem:hover{
  transform:none;
}

/* =========================================================================
   写真の上の文字が読めない 2026-08-05
   暗くする処理をカードの下側だけにかけていたが、文字は上に置かれるため
   明るい空や外壁に白文字が重なって沈んでいた。
   位置に関係なく読めるよう、全体を少し暗くしたうえで下を濃くする。
   ====================================================================== */
html body .svc-grid > .scard.photo::after,
html body .scard.photo::after{
  background:
    linear-gradient(180deg, rgba(4,23,42,.62) 0%, rgba(4,23,42,.34) 42%, rgba(4,23,42,.86) 100%);
}
/* 文字そのものにも、うっすら影を置いて輪郭を出す */
html body .scard.photo .no,
html body .scard.photo h3,
html body .scard.photo p{
  text-shadow:0 1px 10px rgba(4,23,42,.55);
}

/* =========================================================================
   途中の相談ブロックに左右の余白がない 2026-08-05
   中身が画面の端から端まで（0〜390px）に置かれ、見出しもボタンも
   画面のふちに張り付いていた。ほかの節と同じ余白を入れる。
   ====================================================================== */
html body .midcta > .wrap{
  padding-inline:clamp(20px,4vw,40px);
  box-sizing:border-box;
}
@media(max-width:760px){
  html body .midcta > .wrap{
    flex-direction:column;
    align-items:center;      /* スマホは中央にそろえる 2026-08-05 */
    text-align:center;
    gap:20px;
    padding-block:30px;
  }
  html body .midcta h2,
  html body .midcta p{ text-align:center; }
  html body .midcta .btn-primary{ margin-inline:auto; }
}

/* =========================================================================
   本文の折り返し 2026-08-05
   文節ごとに折る指定（auto-phrase）は、見出しでは読みやすいが、
   長い本文では「ユーザーインサイトに届く」のような長い文節を丸ごと
   次の行へ送るため、11〜12字の短い行が混ざってガタガタになる。
   本文は、日本語の普通の折り返しに戻す。
   ====================================================================== */
html body .msg-lead,
html body .msg-body > p,
html body .msg-quote,
html body .msg-col p,
html body .sec--msg p{
  word-break:normal;
  line-break:strict;
}


/* =========================================================================
   会社概要のヒーロー、飾りの斜め線 2026-08-05
   1本がヘッダーの帯と重なって途中で切れ、もう1本は画面の左外へ出ていた。
   ヘッダーより下に下げ、画面の中に収める。
   ====================================================================== */
html body .hero .draw-line{
  top:auto;
}
html body .hero .draw-line:first-of-type{
  top:38% !important;
  left:auto !important;
  right:6% !important;
}
html body .hero .draw-line:nth-of-type(2){
  top:58% !important;
  left:auto !important;
  right:14% !important;
}
@media(max-width:920px){
  html body .hero .draw-line{ display:none; }  /* 狭い画面では邪魔になるだけ */
}

/* =========================================================================
   ABOUTの見出しが、iPhoneで「ち筋を」だけの行になる 2026-08-05
   「勝ち筋」の途中で折れていました。語の途中で切らないようにしたうえで、
   狭い画面では字の大きさを少し詰めて、行の落ち方を整えます。
   ====================================================================== */
/* 見出しは「住宅・不動産・建築会社の成長に勝ち筋を」の19文字。
   iPhoneの幅（本文350px）で1行に収めるには、1文字あたり18px程度が上限。
   画面幅に合わせて字を縮め、必ず1行で出します。 */
@media(max-width:430px){
  html body #about h2,
  html body .about h2,
  html body #about .sec-head h2,
  html body .sec-head h2.anim-txt{
    font-size:4.55vw;
    line-height:1.5;
    letter-spacing:-.035em;
    white-space:nowrap;
  }
}

/* 導入実績カードのうち、押せないものは指の形を変えない */
html body .work-card--flat{ cursor:default; }
html body .work-card--flat:hover{ box-shadow:none; }

/* =========================================================================
   ファーストビューの見出しが、意味のないところで折れる 2026-08-05
   「住宅・不動産・建築業界に、」が入りきらず、「に、」だけが次の行に
   落ちていた。1行ずつ折らずに出し、幅に合わせて字を縮める。
   ====================================================================== */
html body .fv-title .title-line{
  white-space:nowrap;
}
@media(max-width:1100px){
  html body .fv-title{ font-size:min(6.4vw, 6.6vw); }
}
@media(max-width:760px){
  /* 1行目は13文字。本文幅に収まる大きさまで落とす */
  html body .fv-title{ font-size:6.3vw; letter-spacing:.02em; line-height:1.24; }
  html body .fv-title .title-line+.title-line{ letter-spacing:.03em; }
}

/* =========================================================================
   スマホでサービスのカードを押すと真っ白になる 2026-08-05
   もともとは「マウスを乗せると背景に写真が出て、文字が白に変わる」作り。
   スマホには「マウスを外す」動作がないため、押したあとその見た目が残る。
   さらに写真側は出さないようにしていたので、白いカードに白い文字が残り、
   中身が消えたように見えていた。文字の色も元に戻す。
   ====================================================================== */
@media(hover:none){
  html body .biz-card:hover h3,
  html body .biz-card:hover .num span:last-child{ color:var(--navy); }
  html body .biz-card:hover p{ color:var(--text-mute); }
  html body .biz-card:hover .num{ -webkit-text-stroke-color:var(--line); }
  html body .biz-card:hover::after{ transform:skewX(var(--slant)) scaleX(0); }
  /* 相談カードだけは、もともと濃紺の面に白文字なのでそのまま */
  html body .biz-card--consult:hover h3,
  html body .biz-card--consult:hover .num span:last-child{ color:#fff; }
  html body .biz-card--consult:hover p{ color:rgba(255,255,255,.84); }
  html body .biz-card--consult:hover{ background:var(--navy); border-color:var(--navy); }
}


/* =========================================================================
   ファーストビューの実績バッジ 8a（白地の円）2026-08-07
   Claude Design の指示書 fv-badge-8a-spec.md にもとづく実装。
   王冠・月桂樹・メダル・星・リボンは使いません。
   PC/タブレット … 円の中にサービス名2行と数字、円の下に会社名の帯
   〜480px       … 円を106pxに詰め、サービス名と会社名を円の外へ出す
   ※ 本文ブロックを block に切り替える境目は、このサイトでは1100pxです。
   ====================================================================== */

html body .fv-awards{
  grid-column:2; grid-row:3 / -1;
  align-self:end; justify-self:end;
  display:flex; flex-wrap:wrap;
  column-gap:16px;
  row-gap:0;              /* 行間は .fv-award の margin-bottom で取る */
}

/* 会社名の帯は位置を浮かせていて高さを持たないため、
   行間を row-gap でなく各件の下余白で確保する。
   row-gap にすると帯が次の行の円に食い込む。 */
html body .fv-award{
  position:relative;
  flex:0 0 auto;          /* 1件・2件でも横に伸びない */
  width:168px; height:168px;
  margin-bottom:30px;
  border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  padding:0 19px;
  background:#fff;
  box-shadow:
    inset 0 0 0 1.5px var(--navy),
    inset 0 0 0 4.5px #fff,
    inset 0 0 0 5.5px rgba(8,40,72,.26);
}

html body .award-cat{
  order:-1;               /* HTMLの順に関係なく数字の上へ */
  margin-bottom:4px;      /* 円は丸いので、中心から離れるほど横幅が狭い。
                             見出しと数字を中心へ寄せて、数字の入る幅を稼ぐ。2026-08-10 */
  display:flex; flex-direction:column;
  font-size:13.5px; font-weight:700; line-height:1.3;
  color:var(--navy);
  font-feature-settings:"palt" 1;
}
html body .award-cat br{ display:none; }
html body .award-cat span{ white-space:nowrap; }

html body .award-fig{
  white-space:nowrap;     /* 「5〜10件/月」を割らない */
  color:var(--navy);
  line-height:1; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
}
html body .award-num { font-size:38px; font-weight:800; letter-spacing:-.05em; }
html body .award-unit{ font-size:14px; font-weight:700; margin-left:.12em; color:var(--royal); }

html body .award-co{
  position:absolute; top:100%; left:50%;
  transform:translateX(-50%) skewX(var(--slant));
  margin-top:-6px;        /* 円のふちに少し重ねる */
  display:flex; align-items:center;
  background:var(--navy);
  padding:5px 16px;
}
html body .award-co .rhomb{ display:none; }
html body .award-co span{
  display:inline-block;
  transform:skewX(calc(var(--slant) * -1));   /* 二重に傾けない */
  font-size:11.5px; font-weight:700; letter-spacing:.05em;
  color:#fff; white-space:nowrap;
}

/* 本文の下に回す（このサイトの切替は1100px） */
@media(max-width:1100px){
  html body .fv-awards{
    grid-column:1; grid-row:auto;
    align-self:auto; justify-self:start;
    margin:0 0 14px;
  }
}

/* 480px以下：円を詰め、文字を円の外へ。
   168pxのまま縦に積むと594pxになり、ファーストビューが持たない。 */
@media(max-width:480px){
  html body .fv-awards{ column-gap:12px; row-gap:0; margin:0 0 4px; }

  html body .fv-award{
    flex:1 1 0; min-width:0;
    width:auto; height:auto; margin-bottom:0;
    border-radius:0; background:none; box-shadow:none; padding:0;
    align-items:center;
  }

  html body .award-fig{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    width:106px; height:106px; border-radius:50%;
    background:#fff;
    box-shadow:
      inset 0 0 0 1.5px var(--navy),
      inset 0 0 0 3.5px #fff,
      inset 0 0 0 4.5px rgba(8,40,72,.26);
  }
  html body .award-num { font-size:29px; }
  html body .award-unit{ display:block; margin:2px 0 0; font-size:11.5px; }

  html body .award-cat{ order:1; margin:9px 0 0; align-items:center; font-size:11.5px; line-height:1.45; }

  html body .award-co{
    order:2; position:static; transform:none;
    margin:5px 0 0; padding:0; background:none; justify-content:center;
  }
  html body .award-co .rhomb{ display:inline-block; width:9px; height:5px; background:var(--royal); }
  html body .award-co span{ transform:none; font-size:10.5px; font-weight:600; color:var(--text-mute); }
}


/* =========================================================================
   ファーストビューの詰め方 2026-08-07
   ・バッジを下端に置いていたため、見出しの右下に272pxの空きができていた。
     本文の高さに合わせて上に寄せる。
   ・スマホでは円を中央にそろえる。
   ====================================================================== */
@media(min-width:1101px){
  html body .fv-awards{
    align-self:start;
    /* 上に寄せすぎると見出しに近づきすぎる。
       本文（3行＋4行）の高さの真ん中あたりに置く。2026-08-07 */
    margin-top:88px;
  }
}
@media(max-width:480px){
  /* 本文（一気通貫で設計します。）の下に余白がなく、くっついて見えていた */
  html body .fv-awards{
    width:100%;
    justify-self:stretch;      /* 幅いっぱいにしないと中央寄せが効かない */
    justify-content:center;
    margin:22px 0 4px;
  }
  /* 3等分に戻す。中身の幅に任せると、375pxで会社名のぶん溢れて2行に折れた。
     3等分なら必ず1行に収まり、円は各枠の中央に来る。 */
  html body .fv-award{ flex:1 1 0; min-width:0; }
}

/* =========================================================================
   ファーストビューの本文が場所を取りすぎる 2026-08-07
   行送りが 2.1 と広く、さらに文ごとに区切って途中で折れない指定に
   していたため、1行が埋まらないまま7行に伸びていた。
   行送りを詰め、文は自然に流して行を埋める。
   （下敷きを引いた「成果につながる一本の導線へ。」だけは、
     割れると汚れて見えるので、ひとかたまりのまま残す）
   ====================================================================== */
@media(min-width:1101px){
  html body .fv-lead{
    line-height:1.9;
    margin-bottom:40px;
  }
  html body .fv-lead > span:not(.em-marker){
    display:inline;
  }
  /* 段落のあいだの二重改行を、ほどよい間隔に置き換える */
  html body .fv-lead br + br{
    display:block;
    content:"";
    height:14px;
  }
}

/* =========================================================================
   ファーストビューの下が空きすぎる（PC）2026-08-07
   高さを900pxで固定していたため、ボタンの下に157pxの空きが残り、
   「大手ハウスメーカーをはじめ、多数の支援実績」の帯が下へ押し出されていた。
   中身の高さに合わせ、上下の余白も詰める。
   ====================================================================== */
@media(min-width:1101px){
  html body .fv{
    min-height:0;            /* 900px固定をやめる */
    padding-top:148px;       /* 180px → 見出しとロゴを上へ */
    padding-bottom:36px;     /* 120 → 72 → さらに半分に 2026-08-07 */
  }
}


/* =========================================================================
   「大手ハウスメーカーをはじめ、多数の支援実績」の帯を上へ 2026-08-07
   帯の上の余白が44pxあり、ファーストビューとの間が空いていた。
   上だけ半分にする（下はそのまま）。
   ====================================================================== */
@media(min-width:1101px){
  html body .trust-bar{ padding-top:22px; }
}

/* =========================================================================
   お知らせ一覧の矢印が、スマホで変に出る 2026-08-07
   矢印はマウスを乗せたときだけ出す飾りだが、透明のまま独立した1行
   （高さ28px）を占めていて、押した瞬間だけちらついていた。
   マウスのない端末では、そもそも置かない。
   ====================================================================== */
/* 矢印は markup ごと外したので、この指定は不要になりました。2026-08-07 */

/* =========================================================================
   セミナー・お役立ち資料・ブログのカード、見出しの下が詰まる 2026-08-07
   見出しの下がカードの縁まで11pxしかなく、2行になると縁に貼りついて
   見えていた。上下の余白をそろえる。
   （資料のカードは下に「資料をダウンロード →」があるので、こちらは対象外）
   ====================================================================== */
/* .post の中は「写真 → 日付の行 → 見出し」の3つが直に並ぶ作りで、
   包む箱がない。カード自体の下に余白を持たせる。
   写真は上端いっぱいなので、下だけ足しても写真には影響しない。 */
html body .post{
  padding-bottom:22px;
}


/* =========================================================================
   ブログ・セミナー・資料のカード、見出しだけ縁に貼りついている 2026-08-07
   日付の行は左右17pxの内側に入っているのに、見出しだけ1pxで、
   カードのふちギリギリに出ていた。上下の行と左右をそろえる。
   あわせて、分類が未設定のときに出る空のラベル（灰色の棒）を隠す。
   ====================================================================== */
html body .post h2,
html body .post h3{
  padding-inline:17px;
}
/* 中身が空の分類ラベルは出さない */
html body .post .cat:not(:has(span:not(:empty))){
  display:none;
}
html body .post .cat span:empty{
  display:none;
}

/* =========================================================================
   AI検索・SEOのファーストビューが、実機で右へあふれる 2026-08-07
   見出しの各行に「途中で折らない」指定（white-space:nowrap）が入っていた。
   画面のないブラウザでは収まるが、iPhoneは日本語の字幅が広いため
   1行が画面より長くなり、右へはみ出して切れていた。
   狭い画面では折り返しを許す。文節の切れ目を優先して折るので、
   語の途中で割れることはない。
   ====================================================================== */
@media(max-width:640px){
  html body .hero h1 .ph{
    white-space:normal;
    word-break:auto-phrase;
  }
  /* 中身の箱が画面より2px広くなっていたぶんも直す */
  html body .hero > .wrap{
    width:100%;
    box-sizing:border-box;
  }
}

/* =========================================================================
   ファーストビューの中身が、画面より22px広くなる 2026-08-07
   .wrap は左右に20pxの余白を持つが、中の格子（grid）の列幅が
   余白を差し引かずに決まっていたため、中身が右へ22px出ていた。
   列が中身に押し広げられないようにする。
   ====================================================================== */
html body .hero > .wrap{
  grid-template-columns:minmax(0,1fr);
}
@media(min-width:861px){
  /* PCは元の2列のまま。ただし列が中身で広がらないようにする */
  html body .hero > .wrap{
    grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  }
}
html body .hero > .wrap > *{
  min-width:0;
}

/* =========================================================================
   見出しの最後の「。」だけが次の行に落ちる 2026-08-07
   文節で折る指定（word-break:auto-phrase）は Chrome 119 以降でしか働かず、
   端末によっては効きません。頼らずに防ぎます。
   ・行頭に句読点を置かない（line-break:strict）
   ・句点は行の外へはみ出させて、単独の行を作らせない
   ====================================================================== */
html body .hero h1,
html body .hero h1 .ph,
html body .fv-title,
html body .sec-head h2,
html body h2.dh{
  line-break:strict;
  hanging-punctuation:allow-end;
}

/* =========================================================================
   「反響につながるSEOを設計できる理由」の右半分が空く 2026-08-07
   もとは左に3つのカード、右に写真という2列だったが、
   その写真を外したため、右列が空いたまま残っていた。
   写真がないときは、カードを横いっぱいに使う。
   ====================================================================== */
html body .split:not(:has(.approach-photo)):not(:has(img)){
  grid-template-columns:1fr;
}
@media(min-width:861px){
  /* 写真がない場合、3つのカードは横に並べる */
  html body .split:not(:has(.approach-photo)):not(:has(img)) > .alist{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px;
    align-items:stretch;
  }
  html body .split:not(:has(.approach-photo)):not(:has(img)) > .alist > .aitem{
    flex-direction:column;
    gap:12px;
  }
}

/* =========================================================================
   ヒーローの小見出しと見出しの間を、全ページでそろえる 2026-08-07
   会社概要だけ 小見出し11.5px・間26px、他は 12px・間22px だった。
   ====================================================================== */
html body .hero .eyebrow{
  font-size:12px;
  margin-bottom:22px;
}

/* =========================================================================
   メニューの×印が「顔」に見える 2026-08-07
   ボタンは44pxと40pxの2種類あるのに、線を動かす量は7px固定だった。
   40pxのときは6pxでちょうどなので、2本の線が2pxずれて交差し、
   両端に点が残ったように見えていた。40px用の値を足すだけにする。
   ※一度、線をまん中に置き直す方式にしたところ、×が大きくなり
     真ん中の線も残って壊れたので、その方式はやめた。
   ====================================================================== */
@media(max-width:920px){
  html body #gpdrawer:checked ~ .gpnav .burger span:nth-child(1){
    transform:translateY(6px) rotate(45deg);
  }
  html body #gpdrawer:checked ~ .gpnav .burger span:nth-child(3){
    transform:translateY(-6px) rotate(-45deg);
  }
  html body #gpdrawer:checked ~ .gpnav .burger span:nth-child(2){
    opacity:0;
  }
}

/* 真ん中の線が Safari で消えきらず、×の左右に点が残って
   顔のように見えていた。透明にするだけでなく、幅も0にして
   確実に消す。（Safari は透明度0の細い線を1px残すことがある）2026-08-07 */
html body #gpdrawer:checked ~ .gpnav .burger span:nth-child(2){
  opacity:0;
  transform:scaleX(0);
  visibility:hidden;
}
/* 線の端の丸みも、×にしたときは切る（丸い点に見えるため） */
html body #gpdrawer:checked ~ .gpnav .burger span{
  border-radius:0;
}
/* 数字と助数詞が行をまたいで割れないようにする（「2／つの事業領域」）2026-08-07 */
html body .nb2{ white-space:nowrap; }

/* 文末の3文字を、行をまたいで割らない（1〜2文字の取り残し防止）2026-08-07 */
html body .nbe{ white-space:nowrap; }

/* ------------------------------------------------------------------
 * サービスページ下のご相談フォーム 2026-08-08
 * 送信先の無い見せかけだけの作りだったものを本物につないだときに追加。
 * ------------------------------------------------------------------ */
html body .lpform .gp-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
html body .lpform .agree{ margin-top:4px; }
html body .lpform .agree label{ display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--text-mute); cursor:pointer; }
/* ページ側で .lpform input にまとめて余白と下地が当たっており、
   そのままだとチェック欄が入力欄と同じ大きさに膨らむ。ここで戻す。 */
html body .lpform .agree input[type=checkbox]{
  -webkit-appearance:checkbox; appearance:checkbox;
  width:18px; height:18px; min-height:0; padding:0; margin:0;
  flex:0 0 auto; border:0; border-radius:0; background:none; box-shadow:none;
  accent-color:#1848D8;
}
/* 濃い背景の中に置かれた白い箱なので、文字色は変数に頼らず直に決める。 */
html body .lpform .agree label span{ color:#4A5B70; }
html body .lpform .agree a{ color:#1848D8; text-decoration:underline; text-underline-offset:3px; }
html body .lpform .formnote{ margin-top:14px; font-size:12.5px; line-height:1.85; color:#4A5B70; }

html body .gp-sent,
html body .gp-error{
  margin:0 0 22px; padding:15px 18px; border-radius:2px;
  font-size:14.5px; line-height:1.8; font-weight:600;
}
html body .gp-sent{ background:#EAF3EC; border-left:4px solid #2E7D46; color:#14532B; }
html body .gp-error{ background:#FBE9E9; border-left:4px solid #B3261E; color:#7A1A15; }

/* ------------------------------------------------------------------
 * フォームの送信ボタンの先端を、入力欄の幅にそろえる 2026-08-08
 *
 * 平行四辺形は skewX(-22deg) で作っている。斜めにすると、上辺は右へ、
 * 下辺は左へ、それぞれ「高さ × tan22度 ÷ 2」ぶん飛び出す。
 * 高さ53pxなら片側11pxで、画面幅を変えてもこの値は変わらない。
 * ボタンの箱をその分だけ内側に寄せて、先端が入力欄の端に来るようにする。
 * ------------------------------------------------------------------ */
html body .lpform .sub{
  --tip: calc(53px * 0.404 / 2);   /* 斜めで飛び出す量。片側ぶん */
  padding-inline: var(--tip);
}
/* お問い合わせページのボタンは中央寄せで幅いっぱいではないため、はみ出さない。 */

/* 種別ボタンも斜めなので、並びの左右端が10pxずつ飛び出す。
   高さ48px × tan22度 ÷ 2 = 約10px。入れ物にその分の余白を持たせて先端をそろえる。 */
html body .form .chips{ padding-inline: calc(48px * 0.404 / 2); }

/* 同意のチェックは指で押す。25pxしかなく小さいので、当たり判定を広げる。 */
html body .lpform .agree label,
html body .form label.agree{
  min-height:44px; padding-block:10px;
  display:flex; align-items:flex-start; gap:10px;
}
/* 文字が2行になったとき、チェック欄が上下の真ん中に浮くのを止めて1行目にそろえる。 */
html body .lpform .agree input[type=checkbox],
html body .form label.agree input[type=checkbox]{ margin-top:2px; }