.nav a.aiBtn{
  padding: 8px 12px 8px 13px;
}

/* ニュースの×ボタン：hoverしても変化させない */
.newsClose,
.newsClose:hover,
.newsClose:active,
.newsClose:focus{
  background: transparent;
  opacity: 1;
  filter: none;
  box-shadow: none;
  transform: none;
}

/* アイコン画像側も変化させない */
.newsCloseIcon,
.newsClose:hover .newsCloseIcon{
  opacity: 1;
  filter: none;
  transform: none;
}

/* =========================
   Header: keep visible while scrolling
   - sticky が効かない環境向けに fixed を採用
   - 本文は JS で計測した --header-offset 分だけ押し下げる
   ========================= */
.siteHeader{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

body{
  padding-top: var(--header-offset, var(--header-h));
}

/* =========================
   Header actions (SP) — single source of truth
   - Right edge: 20px from viewport
   - Icon gap: 20px between AI and Menu
   - News close (×) aligns with Menu (≡)
   ========================= */
@media (max-width: 980px){
  :root{
    --header-edge: 20px;
    --header-icon-gap: 0px;
    --header-icon-size: 42px;
    --header-icon-img: 24px;
  }

  /* Make header/news containers full width (no 335px clamp under 820px)
     and use padding as the visual edge. */
  .siteHeader > .container,
  .siteHeader .newsBar .container{
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding-inline: var(--header-edge);
  }

  /* Header icon row */
  .headerActions{ gap: var(--header-icon-gap); }
  .iconBtn{ width: var(--header-icon-size); height: var(--header-icon-size); }
  .iconBtn img{ width: var(--header-icon-img); height: var(--header-icon-img); }

  /* Keep the AI glyph visually aligned with the Menu glyph so the perceived gap stays 20px.
     (Menu glyph is right-aligned inside the 48×48 tap target to match the news close button.) */
  .aiIconBtn{
    place-items: center end;
    padding-right: 1px;
    box-sizing: border-box;
  }

  /* Align the visual right edge of the menu icon (≡) to the same line as the news close (×).
     Keep the button box in the normal flow; only shift the glyph inside the 48×48 box. */
  .menuBtn{
    display: inline-grid;          /* ensure place-items works reliably */
    place-items: center end;       /* right-align the glyph */
    padding-right: 1px;            /* match the “slightly inside” feel of the news close */
    box-sizing: border-box;
  }

  /* Mobile menu uses the same edge so the close button aligns (defined below in menu section) */
}

/* =========================
   Mobile menu (screenshot style)
   ========================= */
@media (max-width: 980px){
  /* 背景の黒いオーバーレイは使わない（全画面白） */
  .mobileNavOverlay{ background: transparent; }

  /* 右ドロワー → 全画面パネルに変更 */
  .mobileNavPanel{
    left: 0;
    right: 0;
    width: 100%;
    border-left: 0;

    /* ちょい上からフェードイン */
    transform: translateY(-8px);
    opacity: 0;
    transition: transform .18s ease, opacity .18s ease;
  }
  .mobileNav.isOpen .mobileNavPanel{
    transform: translateY(0);
    opacity: 1;
  }

  /* 上部：右上に×だけ置く（ロゴは隠す） */
  .mobileBrand{ display: none; }

  .mobileNavTop{
    justify-content: flex-end;
    border-bottom: 0;
    height: 64px;
    padding: calc(env(safe-area-inset-top, 0px)) var(--header-edge) 0;
  }

  .mobileClose{
    width: 48px;
    height: 48px;

    /* ← ここがポイント：メニュー（三）と同じ右寄せ */
    display: inline-grid;
    place-items: center end;
    padding-right: 1px;
    padding-top: 9px;
    box-sizing: border-box;
  }

  .mobileClose img{
    width: 24px;
    height: 24px;
  }

  /* リスト：太め・縦に気持ちよく */
  .mobileNavLinks{
    padding: 8px var(--header-edge) 24px;
    gap: 14px;
    font-size: 22px;
    line-height: 32px;
    font-weight: 700;
    color: var(--g800);
  }
  .mobileNavLinks a{
    padding: 0;
    border-radius: 0;
  }
  .mobileNavLinks a:hover{
    background: transparent;
    text-decoration: none;
  }

  /* 仕切り線は使わない */
  .mobileNavDivider{ display: none; }
}


/* =========================
   SP Top: match your w375 image
   ========================= */
.spHome{ display:none; }

@media (max-width: 820px){
  /* スマホはスライダーを使わない（あなたのイメージ通り縦積み） */
  .hero{ display:none; }
  .spHome{ display:block; }

  .spSection{
    /* スクショの見た目に寄せて、文字ブロックの上下に少し余白を足す */
    padding: 32px 0 0;
  }
  .spSection--blue{
    background: var(--hero-blue);
    color: var(--g0);
  }
  .spSection--white{
    background: var(--g0);
    color: var(--g800);
  }

  .spKicker{
    margin: 0 0 14px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
    opacity: .95;
  }
  .spKicker--blue{ color: var(--hero-blue); opacity: 1; }

  .spProduct{
    margin: 0 0 16px;
    font-size: 34px;
    line-height: 40px;
    font-weight: 800;
    letter-spacing: .01em;
  }
  .spProduct--blue{ color: var(--hero-blue); }

  .spHeadline{
    margin: 0 0 20px;
    font-size: 18px;
    line-height: 26px;
    font-weight: 800;
  }
  .spHeadline--dark{ color: var(--g800); }

  .spLead{
    margin: 0 0 32px;
    font-size: 13px;
    line-height: 20px;
    opacity: .95;
  }
  .spLead--dark{ color: var(--g800); opacity: 1; }

  /* 画像はスクショ通り：左右いっぱいに表示（フルブリード） */
  .spShot{
    margin: 0;
    background: transparent;
    margin-bottom: 12px;
  }

  /* 最後の画像だけ余白いらない */
  .spHome .spSection:last-child .spShot{
    margin-bottom: 0;
  }

  .spShot--bleed{
    width: 100vw;
    margin-left: calc(50% - 50vw);
  }

  .spShot img{
    display:block;
    width:100%;
    height:auto;
  }

  /* PriBizだけ、うっすら境界線がある方がスクショに近い */
  .spShot--border{
    border-top: 1px solid var(--g150);
    border-bottom: 1px solid var(--g150);
  }

}

/* (header alignment rules consolidated above) */


/* =========================
   Footer sitemap (SP) — match reference image
   ========================= */
@media (max-width: 820px){
  /* 1カラムで縦に並べる */
  .footerGrid{
    grid-template-columns: 1fr;
    gap: 0;
    padding-top: 40px;
    padding-bottom: 40px;
  }

  /* 3カラム由来の区切りは、同じリズムで縦に繋ぐ */
  .footerCol + .footerCol{
    margin-top: 28px;
  }

  /* 見出し（太め・少し大きめ） */
  .footerCol h4{
    margin: 0 0 10px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
    color: var(--g600);
  }

  /* カテゴリ区切り（スクショの間隔感） */
  .siteFooter .mt{
    margin-top: 26px;
  }

  /* リンク一覧：少しゆったり */
  .footerCol ul{
    gap: 8px;
    font-size: 14px;
    line-height: 22px;
    color: var(--g600);
  }

  /* インデントは指定した下層項目だけ */
  .siteFooter .footerCol ul > li{ padding-left: 0; }

  /* .sitemapIndent だけを全カラムでインデント */
  .siteFooter .footerCol ul > li.sitemapIndent{
    padding-left: 16px;
  }

  /* SP用に付いている“タップ用パディング”は見た目優先で解除 */
  .siteFooter a{
    display: inline;
    padding: 0;
  }
  
}



/* =========================
   グラフィックデザインページ（/graphic-design/）
   - 見本画像の“フル幅2カラム＋交互レイアウト”
   - 文字サイズ：見本に合わせて大きめ
   ========================= */

.graphicDesignPage{
  /* ページ固有の余計な余白が出ないように */
  background: var(--g0);
}

.gdHero{
  background: var(--hero-blue);
  color: var(--g0);
}

.gdHeroGrid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 560px;
}

.gdHeroLeft{ display: grid; }

.gdHeroLeftInner{
  /* PC: 1146px基準で揃える */
  padding: 96px 56px 72px max(66px, calc((100vw - 1146px)/2));
  max-width: 720px;
}

.gdHeroRight{
  position: relative;
  overflow: hidden;
}

.gdMedia--hero{
  position: absolute;
  inset: 0;
}

.gdMedia--hero img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gdKicker{
  margin: 0 0 18px;
  font-size: 18px;
  line-height: 28px;
  font-weight: 700;
  opacity: .95;
}

.gdTitle{
  margin: 0 0 18px;
  font-size: 44px;
  line-height: 76px;
  font-weight: 800;
  letter-spacing: .01em;
}

.gdHeadline{
  margin: 0 0 28px;
  font-size: 30px;
  line-height: 56px;
  font-weight: 800;
}

.gdLead{
  margin: 0;
  font-size: 18px;
  line-height: 30px;
  opacity: .95;
}

.gdSection{
  padding: 0px 0;
}

.gdRow,
.gdLinkRow{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.gdRow{ margin-bottom: 96px; }
.gdSection .gdRow:last-child{ margin-bottom: 0; }

.gdRow--reverse{
  direction: rtl;
}
.gdRow--reverse > *{ direction: ltr; }

/* graphic-design/index.html：イントロ（「ブラウザで、確かな印刷品質を」）だけ
   左のメディアカラムを少し狭くする（見本のバランスに合わせる） */
.gdRow--intro{
  grid-template-columns: 0.9fr 1.1fr;
}

/* 「EditScript がレイアウトを自動化」「全ての情報を一元管理」
   上のイントロ行を左右反転した比率（テキスト広め／右メディア狭め） */
.gdRow--pairMedia.gdRow--reverse{
  grid-template-columns: 0.9fr 1.1fr;
}

/* イントロ：左メディアをビューポート左端まで“はみ出し”させる（広い画面で左にぴったり） */
@media (min-width: 821px){
  .gdRow--intro .gdMedia{
    margin-left: calc(50% - 50vw);
    width: calc(100% + (50vw - 50%));
    max-width: none;
  }
}

.gdMedia{
  min-height: 360px;
}

.gdMedia--small{
  min-height: 300px;
}

.gdMedia--placeholder{
  background: var(--g200);
}

/* イントロ：左画像が枠いっぱいに入るように（ブリード時の見え方を安定） */
.gdRow--intro .gdMedia img{
  width: 100%;
  height: auto;
  display: block;
}

/* イントロ：左メディアに画像を2段で配置（「テンプレートでブランドを守る」用） */
.gdRow--intro .gdMedia{
  display: flex;
  flex-direction: column;
  gap: 56px; /* .gdTextStack の gap と揃える */
}

.gdRow--intro .gdMedia img{
  width: 100%;
  height: auto;
  display: block;
}
/* 2段メディア（「EditScript がレイアウトを自動化」「全ての情報を一元管理」） */
.gdRow--pairMedia .gdMedia{
  display: flex;
  flex-direction: column;
  gap: 56px;
}

.gdRow--pairMedia .gdMedia--placeholder{ background: transparent; }

.gdRow--pairMedia .gdMedia img{
  width: 100%;
  height: auto;
  display: block;
}




.gdTextStack{
  padding: 72px 66px;
  background: var(--g0);
  display: grid;
  gap: 56px;
}

/* イントロ（「ブラウザで、確かな印刷品質を」）背景色 */
.gdRow--intro .gdTextStack{
  background: #f5f5f5;
}

/* イントロ：右側（テキスト側）をビューポート右端まで“はみ出し”させる（広い画面で右にぴったり） */
@media (min-width: 821px){
  .gdRow--introRightBleed .gdTextStack{
    margin-right: calc(50% - 50vw);
    width: calc(100% + (50vw - 50%));
    max-width: none;
  }

  /* Right bleed for pairMedia media column (reverse rows) */
  .gdRow--pairMedia.gdRow--reverse .gdMedia{
    margin-right: calc(50% - 50vw);
    width: calc(100% + (50vw - 50%));
    max-width: none;
  }

  /* Left bleed for pairMedia text stack (mirror of the intro row) */
  .gdRow--pairMedia.gdRow--reverse .gdTextStack{
    margin-left: calc(50% - 50vw);
    width: calc(100% + (50vw - 50%));
    max-width: none;
  }

}

/* イントロ：2つ目ブロック（「テンプレートでブランドを守る」）だけ白背景に戻す */
.gdRow--intro .gdBlock--white{
  background: #ffffff;
  max-width: none;
  margin: 0 -66px;
  padding: 40px 66px;
}

/* テキストの最大幅は既存と揃える */
.gdRow--intro .gdBlock--white > *{
  max-width: 520px;
}

@media (max-width: 820px){
  .gdRow--intro .gdBlock--white{
    margin: 0 -20px;
    padding: 32px 20px;
  }
}

.gdText{
  padding: 72px 66px;
  background: var(--g0);
}

.gdBlock{ max-width: 520px; }

.gdH2{
  margin: 0 0 16px;
  font-size: 30px;
  line-height: 52px;
  font-weight: 800;
  color: var(--g800);
}

.gdP{
  margin: 0;
  font-size: 20px;
  line-height: 30px;
  color: var(--g800);
}

.gdCta{
  padding: 96px 0;
  background: var(--hero-blue);
  margin: 0;
}

.gdCtaTitle{
  margin: 0 0 16px;
  font-size: 32px;
  line-height: 48px;
  font-weight: 800;
  text-align: center;
  color: #ffffff;
}

.gdCtaLead{
  margin: 0 auto;
  max-width: 860px;
  font-size: 20px;
  line-height: 30px;
  text-align: center;
  color: rgba(255,255,255,0.92);
}

@media (max-width: 820px){
  .gdCta{ padding: 64px 0; }
  .gdCtaTitle{ font-size: 24px; line-height: 32px; margin-bottom: 16px; }
  .gdCtaLead{ font-size: 16px; line-height: 24px; padding: 0 20px; }
}

/* ------------------------------------------------------------
   Intro rows 5-8 (quad blocks)
   ------------------------------------------------------------ */
.gdQuadSection{
  padding: 0;
  margin: 0;
}

.gdQuad{
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.gdQuadCol{
  display: grid;
  grid-template-rows: 1fr 1fr;
}

/* Single-row variant (used for intro rows with only 1 item) */
.gdQuadCol--single{
  grid-template-rows: 1fr;
}

.gdQuadMedia{
  min-height: 300px;
  background: #9b9b9b;
  overflow: hidden;
}

.gdQuadMedia img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gdQuadMedia--dark{
  background: #575757;
}

.gdQuadText{
  min-height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 66px;
  background: #ffffff;
}

.gdQuadText--gray{
  background: #f5f5f5;
}

/* Make whole intro cards clickable (rows 9-12) */
.gdQuadLink{
  color: inherit;
  text-decoration: none;
}
.gdQuadLink:focus-visible{
  outline: 2px solid var(--blue);
  outline-offset: -2px;
}

/* Placeholder tones */
.gdQuadMedia--mid{ background: #9b9b9b; }

.gdQuadText .gdH2{ margin-top: 0; }
.gdQuadText .gdP{ margin-bottom: 0; }

/* reverse layout: swap columns only */
.gdQuad--reverse{
  grid-template-columns: 1fr 1fr;
}

@media (max-width: 820px){
  .gdQuad{
    grid-template-columns: 1fr;
  }

  .gdQuadCol{
    grid-template-rows: auto;
  }

  .gdQuadMedia,
  .gdQuadText{
    min-height: 220px;
  }

  .gdQuadText{
    padding: 32px 20px;
  }
}


.gdSection--links{ padding-top: 0; }

.gdLinkList{
  display: grid;
  gap: 96px;
}

.gdLinkRow{
  text-decoration: none;
  color: inherit;
}

.gdLinkRow:hover{ text-decoration: none; }

@media (max-width: 980px){
  .gdHeroLeftInner{
    padding-left: max(20px, calc((100vw - 1146px)/2));
    padding-right: 24px;
  }
}

@media (max-width: 820px){
  .gdHeroGrid{ grid-template-columns: 1fr; min-height: 0; }

  .gdHeroLeftInner{
    padding: 56px 20px 40px;
    max-width: none;
  }

  .gdHeroRight{
    position: static;
    height: auto;
  }
  .gdMedia--hero{ position: static; }
  .gdMedia--hero img{ height: auto; }

  .gdKicker{ font-size: 14px; line-height: 20px; margin-bottom: 14px; }
  .gdTitle{ font-size: 34px; line-height: 40px; }
  .gdHeadline{ font-size: 22px; line-height: 32px; margin-bottom: 18px; }
  .gdLead{ font-size: 15px; line-height: 24px; }

  .gdSection{ padding: 64px 0; }
  .gdRow,
  .gdLinkRow{ grid-template-columns: 1fr; }

  .gdRow{ margin-bottom: 64px; }

  .gdTextStack,
  .gdText{ padding: 40px 20px; }

  .gdH2{ font-size: 24px; line-height: 32px; }
  .gdP{ font-size: 15px; line-height: 24px; }

  .gdMedia{ min-height: 240px; }
  .gdMedia--small{ min-height: 220px; }

  .gdLinkList{ gap: 64px; }
}

/* =========================
   Hero（スライダー無しの固定表示）
   graphic-design/index.html ではトップ（index.html）のヒーローデザインを流用しつつ、
   スクロール式スライダー挙動だけ無効化します。
   ========================= */
.hero--static .heroTrack--static{
  display:block;
  height:var(--hero-h);
  overflow:hidden;
  scroll-snap-type:none;
  scroll-behavior:auto;
}
.hero--static .heroTrack--static::-webkit-scrollbar{ display:none; }
.hero--static .heroTrack--static > .heroSlide{
  flex:none;
}

/* =========================
   graphic-design/index.html
   Intro section tuning (match reference image)
   - Remove horizontal scrollbar caused by 50vw bleed rounding
   - Make the two intro blocks (media/text) the same height
   ========================= */

html, body{ overflow-x:hidden; }

:root{
  --gd-intro-block-h: 360px;
  --gd-intro-gap: 56px;
}

@media (min-width: 821px){
  /* Media: crop to a fixed height like the reference */
  .gdRow--intro .gdMedia{ gap: var(--gd-intro-gap); }
  .gdRow--intro .gdMedia img{
    height: var(--gd-intro-block-h);
    object-fit: cover;
  }
  /* Pair media rows: stack 2 images and match each text block height */
  .gdRow--pairMedia .gdMedia{
    display: flex;
    flex-direction: column;
    gap: var(--gd-intro-gap);
    background: transparent;
  }

  .gdRow--pairMedia .gdMedia img{
    width: 100%;
    height: var(--gd-intro-block-h);
    object-fit: cover;
    display: block;
  }

  .gdRow--pairMedia .gdTextStack{
    padding: 0;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    gap: var(--gd-intro-gap);
  }

  .gdRow--pairMedia .gdTextStack .gdBlock{
    max-width: none;
    padding: 0 66px 72px;
    min-height: var(--gd-intro-block-h);
  }

  .gdRow--pairMedia .gdTextStack .gdBlock > *{
    max-width: 520px;
  }

  /* First block (EditScript) background */
  .gdRow--pairMedia .gdTextStack .gdBlock:first-child{
    background: #f5f5f5;
  }



  /* Text side: gray background spans the whole stack, each block matches the media height */
  .gdRow--intro .gdTextStack{
    padding: 0;
    background: #f5f5f5;
    display: flex;
    flex-direction: column;
    gap: var(--gd-intro-gap);
  }

  .gdRow--intro .gdTextStack .gdBlock{
    max-width: none;
    padding: 72px 66px;
    min-height: var(--gd-intro-block-h);
    background: transparent;
  }

  .gdRow--intro .gdTextStack .gdBlock > *{
    max-width: 520px;
  }

  .gdRow--intro .gdTextStack .gdBlock--white{
    background: #ffffff;
    margin: 0;
  }
}

@media (max-width: 820px){
  /* Keep the existing mobile rhythm but preserve intro background intent */
  .gdRow--intro .gdTextStack{ background:#f5f5f5; }
  .gdRow--intro .gdTextStack .gdBlock--white{ background:#ffffff; }
}

/* ====== Adjust reverse pair rows (EditScript / Centralized info) ====== */
/* Text was bleeding to the viewport-left too much; keep it aligned to the content grid.
   Also remove extra vertical padding and row spacing as requested. */
.gdRow--pairMedia{ margin-bottom: 0; }

.gdRow--pairMedia .gdTextStack{
  padding: 0 66px; /* keep horizontal padding, remove top/bottom */
}

@media (max-width: 820px){
  .gdRow--pairMedia .gdTextStack{
    padding: 0 20px;
  }
}

@media (min-width: 821px){
  /* cancel the left-bleed applied previously */
  .gdRow--pairMedia.gdRow--reverse .gdTextStack{
    margin-left: 0;
    width: auto;
    max-width: none;
  }
}

/* ===== Intro split (row 3 / 4) ===== */
.gdSplit{
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  margin: 0;
  padding: 0;
}

.gdSplit--tight{
  margin-block: 0;
  padding-block: 0;
}

.gdSplit__text{
  /* Intro row 3/4 text left padding (design spec): 66px */
  padding-left: 66px;
  padding-right: 56px;
  padding-top: 0;
  padding-bottom: 0;

  display: flex;
  flex-direction: column;
  justify-content: center;

  min-height: 360px;
  background: #ffffff;
}

.gdSplit--bgGray .gdSplit__text{
  background: #f5f5f5;
}

.gdSplit__text .gdH2{
  margin: 0 0 16px 0;
}

.gdSplit__text .gdP{
  margin: 0;
}

.gdSplit__media{
  margin: 0;
  padding: 0;
  min-height: 360px;
  overflow: hidden;
}

.gdSplit__media img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* SP */
@media (max-width: 820px){
  .gdSplit{
    grid-template-columns: 1fr;
  }
  .gdSplit__text{
    padding-left: 20px;
    padding-right: 20px;
    min-height: auto;
    padding-top: 24px;
    padding-bottom: 24px;
  }
  .gdSplit__media{
    min-height: 220px;
  }
}

/* 横スクロール保険 */
html, body{
  overflow-x: clip;
}

/* =============================================
   Top page: divider line above sitemap footer
   ============================================= */
.siteFooter{
  border-top: 1px solid var(--g150);
}

/* =============================================
   graphic-design/index.html
   SP hero adjustment to match reference image
   - show hero on mobile for this page only
   - stack blue text block over full-width image
   ============================================= */
@media (max-width: 820px){
  .graphicDesignPage .hero{
    display: block;
    border-bottom: 0;
    background: transparent;
    overflow: visible;
  }

  .graphicDesignPage .hero--static .heroTrack--static{
    display: block;
    height: auto;
    overflow: visible;
  }

  .graphicDesignPage .hero--static .heroTrack--static > .heroSlide{
    display: block;
    height: auto;
  }

  .graphicDesignPage .hero .heroLeft{
    display: block;
    background: var(--hero-blue);
    color: var(--g0);
    padding: 32px 20px 32px;
  }

  .graphicDesignPage .hero .kicker{
    margin: 0 0 12px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
  }

  .graphicDesignPage .hero .title{
    margin: 0 0 12px;
    font-size: 34px;
    line-height: 40px;
    font-weight: 800;
  }

  .graphicDesignPage .hero .headline{
    margin: 0 0 14px;
    font-size: 18px;
    line-height: 26px;
    font-weight: 800;
  }

  .graphicDesignPage .hero .lead{
    max-width: none;
    font-size: 13px;
    line-height: 20px;
  }

  .graphicDesignPage .hero .heroRight,
  .graphicDesignPage .hero .heroMock{
    position: static;
    display: block;
    background: transparent;
    height: auto;
  }

  .graphicDesignPage .hero .heroShot{
    display: block;
    width: 100vw;
    max-width: none;
    height: auto;
    margin-left: calc(50% - 50vw);
  }
}


/* ===== Hero / SP section links ===== */
.heroSlide--link,
.spSection--link{
  cursor:pointer;
}
.heroSlide--link:focus-visible,
.spSection--link:focus-visible{
  outline:3px solid rgba(255,255,255,.9);
  outline-offset:-6px;
}


/* CTA帯全体をお問い合わせページへのリンクとして扱う */
.gdCta{
  padding:0;
}
.gdCtaLink{
  display:block;
  padding:96px 0;
  color:inherit;
  text-decoration:none;
  cursor:pointer;
}
.gdCtaLink:hover{
  opacity:0.94;
}
.gdCtaLink:focus-visible{
  outline:3px solid rgba(255,255,255,0.85);
  outline-offset:-8px;
}

@media (max-width: 820px){
  .gdCta{
    padding:0;
  }
  .gdCtaLink{
    padding:64px 0;
  }
}

/* =========================
   Large screen hero width limit
   - Prevent the hero from stretching too wide on large displays
   - Keep the hero block centered like the 1280px reference layout
   ========================= */
@media (min-width: 1280px){
  .heroTrack{
    max-width: var(--content);
    margin-inline: auto;
  }
}

/* =========================
   Top page: stacked service blocks (2026-07-29 16:28 JST)
   - Scoped to .homePage so index_old.html remains comparable.
   ========================= */
.homePage .homeMain{
  background: var(--g0);
}

.homePage .homeShowcase{
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  background: var(--g0);
}

.homePage .homeService{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  width: 100%;
  height: clamp(560px, 54.6875vw, 700px);
  color: var(--g0);
  text-decoration: none;
  background: var(--hero-blue);
  overflow: hidden;
}

.homePage .homeService + .homeService{
  margin-top: 12px;
}

.homePage .homeService,
.homePage .homeService:link,
.homePage .homeService:visited,
.homePage .homeService:hover,
.homePage .homeService:active{
  color: var(--g0);
  text-decoration: none;
  opacity: 1;
  filter: none;
  transform: none;
}

.homePage .homeService:focus-visible{
  outline: 3px solid rgba(255,255,255,.95);
  outline-offset: -6px;
}

.homePage .homeServiceText{
  min-width: 0;
  padding: 72px 56px 72px 66px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  background: var(--hero-blue);
}

.homePage .homeServiceKicker{
  margin: 0;
  font-size: 18px;
  line-height: 27px;
  font-weight: 600;
  letter-spacing: .01em;
}

.homePage .homeServiceTitle{
  margin: 0;
  font-size: 44px;
  line-height: 56px;
  font-weight: 800;
  letter-spacing: .01em;
}

.homePage .homeServiceHeadline{
  margin: 0;
  font-size: 30px;
  line-height: 1.25;
  font-weight: 800;
}

.homePage .homeServiceLead{
  margin: 0;
  max-width: 46ch;
  font-size: 20px;
  line-height: 32px;
  font-weight: 400;
}

.homePage .homeServiceVisual{
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--g80);
}

.homePage .homeServiceVisual img{
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: left top;
}

/* Header edges align to the centered 1280px top-page canvas. */
@media (min-width: 981px){
  .homePage .siteHeader > .container,
  .homePage .siteHeader .newsBar .container{
    width: 100%;
    max-width: 1280px;
    margin-inline: auto;
    padding-inline: 66px;
  }

  /* Align the text edge of the final desktop menu item to the 66px guide. */
  .homePage .nav > a:last-child{
    padding-right: 0;
  }
}

@media (max-width: 980px) and (min-width: 821px){
  .homePage .homeServiceText{
    padding-left: 48px;
    padding-right: 40px;
  }
  .homePage .homeServiceKicker{
    font-size: 16px;
    line-height: 24px;
  }
  .homePage .homeServiceTitle{
    font-size: 38px;
    line-height: 48px;
  }
  .homePage .homeServiceHeadline{
    font-size: 25px;
  }
  .homePage .homeServiceLead{
    font-size: 17px;
    line-height: 28px;
  }
}

@media (max-width: 820px){
  .homePage .homeShowcase{
    display: none;
  }

  /* Keep all linked-section text white in every mobile link state. */
  .homePage .spSection--link,
  .homePage .spSection--link:link,
  .homePage .spSection--link:visited,
  .homePage .spSection--link:hover,
  .homePage .spSection--link:active{
    display: block;
    color: var(--g0);
    -webkit-text-fill-color: var(--g0);
    text-decoration: none;
    opacity: 1;
    filter: none;
    transform: none;
    -webkit-tap-highlight-color: transparent;
  }

  .homePage .spSection--link .spKicker,
  .homePage .spSection--link .spProduct,
  .homePage .spSection--link .spHeadline,
  .homePage .spSection--link .spLead{
    color: inherit;
    -webkit-text-fill-color: inherit;
  }

  .homePage .spSection--link:focus-visible{
    outline: 3px solid rgba(255,255,255,.9);
    outline-offset: -6px;
  }
}

/* =============================================
   Top page: RESOLOGIC message section
   2026-07-30
   ============================================= */
.homeMessage{
  background: var(--g0);
}

.homeMessageInner{
  min-height: 250px;
  padding-top: 60px;
  padding-bottom: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--g600);
}

.homeMessageLabel{
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 22px;
  font-weight: 700;
}

.homeMessageTitle{
  margin: 0 0 14px;
  font-size: 24px;
  line-height: 36px;
  font-weight: 700;
  letter-spacing: .01em;
}

.homeMessageText{
  margin: 0;
  max-width: 760px;
  font-size: 14px;
  line-height: 24px;
  font-weight: 400;
  color: var(--g600);
}

.homeMessageText span{
  display: block;
}

@media (max-width: 820px){
  .homeMessageInner{
    min-height: 0;
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .homeMessageLabel{
    margin-bottom: 12px;
    font-size: 13px;
    line-height: 20px;
  }

  .homeMessageTitle{
    margin-bottom: 16px;
    font-size: 22px;
    line-height: 32px;
  }

  .homeMessageText{
    max-width: 335px;
    font-size: 15px;
    line-height: 24px;
  }

  .homeMessageText span{
    display: inline;
  }
}


/* =============================================
   Top page: mission hero with Canvas orbit
   2026-08-06
   ============================================= */
.visionHero{
  position: relative;
  width: 100%;
  height: 513px;
  overflow: hidden;
  background: #000;
  color: #fff;
  isolation: isolate;
}

.visionHeroCanvas{
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  pointer-events: none;
}

.visionHero::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(0,0,0,.34) 0%, rgba(0,0,0,.12) 48%, rgba(0,0,0,.02) 100%);
  pointer-events: none;
}

.visionHeroInner{
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1280px;
  height: 100%;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 0 66px;
}

.visionHeroTitle{
  margin: 0 0 24px;
  max-width: 1000px;
  color: #fff;
  font-size: clamp(34px, 2.8vw, 42px);
  line-height: 1.35;
  font-weight: 800;
  letter-spacing: .01em;
  text-wrap: balance;
}

.visionHeroTitleAccent{
  color: #0098d8;
}

.visionHeroText{
  margin: 0;
  max-width: 900px;
  color: #fff;
  font-size: 19px;
  line-height: 1.65;
  font-weight: 400;
  letter-spacing: .01em;
}

.visionHeroText span{
  display: block;
}

.visionHeroBreakSp,
.visionHeroTextBreakSp{
  display: none;
}

@media (max-width: 980px){
  .visionHeroTitle{
    font-size: 34px;
  }

  .visionHeroText{
    font-size: 17px;
  }
}

@media (max-width: 820px){
  .visionHero{
    height: 344px;
  }

  .visionHero::after{
    background: linear-gradient(90deg, rgba(0,0,0,.24) 0%, rgba(0,0,0,.08) 100%);
  }

  .visionHeroInner{
    width: 100%;
    max-width: none;
    padding: 0 20px;
    justify-content: center;
  }

  .visionHeroTitle{
    margin-bottom: 18px;
    max-width: 330px;
    font-size: 25px;
    line-height: 1.36;
    letter-spacing: 0;
  }

  .visionHeroText{
    max-width: 335px;
    font-size: 15px;
    line-height: 1.62;
    letter-spacing: 0;
  }

  .visionHeroText span{
    display: block;
  }

  .visionHeroTextBreakSp{
    display: inline;
  }

  .visionHeroBreakSp{
    display: block;
  }
}

@media (max-width: 390px){
  .visionHeroTitle{
    font-size: 24px;
  }

  .visionHeroText{
    font-size: 14px;
    line-height: 1.65;
  }
}

/* =============================================
   Top page: latest news
   2026-08-21
   ============================================= */
.homePage .homeNews{
  background: var(--g0);
}

.homePage .homeNewsInner{
  width: min(calc(100% - 40px), 966px);
  margin-inline: auto;
  padding: 56px 0 64px;
}

.homePage .homeNewsTitle{
  margin: 0 0 16px;
  color: var(--g600);
  font-size: 24px;
  line-height: 36px;
  font-weight: 700;
  letter-spacing: .01em;
}

.homePage .homeNewsList{
  width: 100%;
}

.homePage .homeNewsItem,
.homePage .homeNewsItem:link,
.homePage .homeNewsItem:visited{
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  align-items: center;
  min-height: 52px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--g150);
  color: var(--g600);
  text-decoration: none;
  background: transparent;
}

.homePage .homeNewsItem:first-child{
  border-top: 1px solid var(--g150);
}

.homePage .homeNewsItem:hover,
.homePage .homeNewsItem:focus-visible{
  color: var(--g600);
  text-decoration: none;
  background: #f5f5f5;
}

.homePage .homeNewsItem:focus-visible{
  outline: 2px solid #0098d8;
  outline-offset: -2px;
}

.homePage .homeNewsItem time{
  font-size: 13px;
  line-height: 20px;
  white-space: nowrap;
}

.homePage .homeNewsItem span{
  min-width: 0;
  font-size: 14px;
  line-height: 22px;
}

.homePage .homeNewsMore{
  margin: 18px 0 0;
  text-align: right;
}

.homePage .homeNewsMore a,
.homePage .homeNewsMore a:link,
.homePage .homeNewsMore a:visited{
  display: inline-block;
  padding: 6px 0;
  color: var(--g600);
  font-size: 17px;
  line-height: 26px;
  font-weight: 700;
  text-decoration: none;
}

.homePage .homeNewsMore a:hover,
.homePage .homeNewsMore a:focus-visible{
  color: var(--g600);
  text-decoration: none;
}

@media (max-width: 820px){
  .homePage .homeNewsInner{
    width: calc(100% - 40px);
    padding: 32px 0 28px;
  }

  .homePage .homeNewsTitle{
    margin-bottom: 12px;
    font-size: 24px;
    line-height: 34px;
  }

  .homePage .homeNewsItem,
  .homePage .homeNewsItem:link,
  .homePage .homeNewsItem:visited{
    grid-template-columns: 1fr;
    gap: 2px;
    min-height: 0;
    padding: 10px 8px;
  }

  .homePage .homeNewsItem:hover,
  .homePage .homeNewsItem:focus-visible,
  .homePage .homeNewsItem:active{
    background: #f5f5f5;
  }

  .homePage .homeNewsItem time{
    font-size: 12px;
    line-height: 18px;
  }

  .homePage .homeNewsItem span{
    font-size: 13px;
    line-height: 20px;
  }

  .homePage .homeNewsMore{
    margin-top: 14px;
  }

  .homePage .homeNewsMore a,
  .homePage .homeNewsMore a:link,
  .homePage .homeNewsMore a:visited{
    font-size: 16px;
    line-height: 24px;
  }
}