:root {
  --ef-ink: #111826;
  --ef-navy: #101a30;
  --ef-blue: #255fc4;
  --ef-cyan: #33c6e0;
  --ef-paper: #ffffff;
  --ef-mist: #f3f6fa;
  --ef-line: rgba(22, 35, 63, .16);
  --ef-display: "Shippori Mincho B1", "Hiragino Mincho ProN", serif;
  --ef-heading: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  --ef-body: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", sans-serif;
  --ef-label: "Space Grotesk", sans-serif;
  --ef-serif: var(--ef-display);
  --ef-sans: var(--ef-body);

  /* 文字の色の役割（デザイン Loop 1）。地の明暗ごとに WCAG AA を満たす値。
     明るい地＝白・#f2f6fd〜#f8fafc、暗い地＝#0d1526・#101a30・#16233f・#1a2740 */
  --ef-text-sub: #5f6b84;          /* 明るい地の補助の文字（4.94〜5.35） */
  --ef-text-sub-dark: #8590a8;     /* 暗い地の補助の文字（4.65〜5.69） */
  --ef-text-accent: #255fc4;       /* 明るい地の小さな青い文字（5.52〜5.98） */
  --ef-text-accent-dark: #33c6e0;  /* 暗い地の小さな色の文字（7.31〜8.93） */
  --ef-text-alert: #d42a4a;        /* 必須の印（4.58〜4.97） */
  --ef-num-faint: rgba(43, 111, 227, .8);
  /* 文字の大きさの段階（デザイン Loop 6）。読む文字はこの6段だけを使う。
     ロゴ・記号・番号・大きな英字の透かし・数字の見せ場・引用の大きな一文は「見せる文字」で、段階の外。 */
  --ef-fs-h1: clamp(28px, 4.8vw, 56px);    /* ページの大見出し・締めの一文 */
  --ef-fs-h2: clamp(24px, 3.2vw, 38px);    /* 章の見出し */
  --ef-fs-h3: clamp(17px, 1.4vw, 19px);    /* カードの題・質問・小見出し */
  --ef-fs-body: clamp(15px, 1.25vw, 16px); /* 本文・ボタン・入力欄 */
  --ef-fs-small: 13px;                     /* 注記・ナビ・パンくず・表の見出し */
  --ef-fs-label: 11px;                     /* 英字のラベル・小さな印 */
  /* 見せる文字の段階（デザイン Loop 14）。役割ごとに1つ。ロゴ・記号・トップと理念の最初の画面・帯の文字は段階の外 */
  --ef-fs-ghost: clamp(56px, 10vw, 140px); /* 大きな英字の透かし */
  --ef-fs-num: clamp(28px, 2.4vw, 32px);   /* 手順・項目の番号 01 02 */
  --ef-fs-stat: clamp(38px, 5vw, 64px);    /* 数字の見せ場（月給・勤務時間） */
  --ef-fs-quote: clamp(17px, 1.9vw, 22px); /* 本文より大きく置く一文 */
  /* 余白の格子（デザイン Loop 7）。32px 未満は4の倍数、96px までは8の倍数、それより上は16の倍数。
     章の上下と左右の余白は、この2つだけを使う。 */
  --ef-space-section: clamp(80px, 10vw, 128px);
  --ef-gutter: clamp(20px, 5vw, 80px); /* 大きな薄い番号（白の上で 3.33） */
}

html { scroll-behavior: smooth; }
body { text-rendering: optimizeLegibility; }
#ec-intro { display: none !important; }

section[data-screen-label] h1 {
  font-family: var(--ef-display) !important;
  font-weight: 700 !important;
  letter-spacing: .015em !important;
  text-wrap: balance;
}

section[data-screen-label$="Hero"] h1 > span {
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
}

section[data-screen-label$="Hero"]:not(#ec-hero-root) h1::before {
  content: "";
  display: block;
  width: 42px;
  height: 1px;
  margin: 0 0 24px;
  background: currentColor;
  opacity: .42;
}

section[data-screen-label] h2 {
  font-family: var(--ef-heading) !important;
  font-weight: 900 !important;
  text-wrap: balance;
}
section[data-screen-label] p { text-wrap: pretty; }

/* 大きな英字の透かしは飾り。文字は ::before で描き、読み上げとコントラストの点検の対象にしない（デザイン Loop 13） */
[data-ec-ghost-word]::before { content: attr(data-ec-ghost-word); }

/* 本文の中のリンクは、色だけでなく下線でも区別する（WCAG 1.4.1。デザイン Loop 13）。
   ボタンと単独のリンク（data-tap）は形で分かるので対象外。 */
section p a[href]:not([data-ef-button]):not([data-tap]) {
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: .28em !important;
}

/* 見出しとボタンの文字は、語の途中で折り返さない（デザイン Loop 5）。
   auto-phrase は文節の切れ目でだけ折り返す（Chrome・Edge）。対応していない環境では今までどおり。
   1つの文節が行より長いときだけ、文節の中で折る（はみ出さない）。 */
h1, h2, h3,
[data-tap],
button,
a[style*="padding"]:not(:has(p, h2, h3, div)) {
  word-break: auto-phrase;
  overflow-wrap: break-word;
  line-break: strict;
}

a[style*="border-radius:999"],
button[style*="border-radius:999"] {
  border-radius: 2px !important;
}

a[style*="box-shadow"] { box-shadow: none !important; }

a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid rgba(51, 198, 224, .75) !important;
  outline-offset: 4px !important;
}

/* 押せる部分を44px四方以上に（デザイン Loop 3）。
   字面・位置・余白は変えず、透明の ::after で当たり判定だけ広げる（中心をそろえ、最低44px）。
   本文の中の単独のリンク（「詳しく見る →」など）は、各ページで data-tap を付けている。 */
header[id$="-header"] a,
header[id$="-header"] button,
footer a,
[data-tap] {
  position: relative;
}
header[id$="-header"] a::after,
header[id$="-header"] button::after,
footer a::after,
[data-tap]::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100%, 44px);
  height: max(100%, 44px);
  transform: translate(-50%, -50%);
}
/* フッターのリンクは行の間隔が31pxで、広げた当たり判定が隣と重なる。指で押す幅では行そのものを44pxにする */
@media (max-width: 768px) {
  footer li > a {
    display: block;
    padding: 6.4px 0;
  }
}

header[id] {
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

a[style*="position:fixed"][style*="bottom:"] {
  display: none !important;
}

.sg-drop {
  border-radius: var(--ef-radius-control) !important;
  box-shadow: none !important;            /* 影で浮かせず、ヘアラインの枠で区切る（デザイン Loop 12） */
  border-color: var(--ef-line) !important;
}

#ec-discipline h2,
#ec-core h2,
#ec-manifesto h2 {
  font-family: var(--ef-display) !important;
  font-weight: 700 !important;
}

#ec-discipline,
#ec-core,
#ec-manifesto,
section[data-screen-label="COMPANY 会社概要"] {
  padding-top: clamp(112px, 13vw, 184px) !important;
  padding-bottom: clamp(112px, 13vw, 184px) !important;
}

#ph-top {
  min-height: 88svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #fff !important;
  padding-top: clamp(144px, 19vh, 224px) !important;
  padding-bottom: clamp(100px, 12vw, 164px) !important;
}

#ph-top > div[data-reveal]:first-of-type {
  width: 100%;
  max-width: 1180px !important;
}

#ph-top h1 {
  max-width: 1120px !important;
  margin-bottom: clamp(44px, 6vw, 76px) !important;
  font-size: clamp(48px, 7.6vw, 104px) !important;
  line-height: 1.22 !important;
}

#ph-top h1 span {
  display: inline-block;
  white-space: nowrap;
}

#ph-top > div[data-reveal]:first-of-type > p {
  max-width: 540px !important;
  margin-left: auto !important;
  padding-left: 28px;
  border-left: 1px solid rgba(37, 95, 196, .38);
  font-family: var(--ef-sans) !important;
  font-size: clamp(16px, 1.6vw, 19px) !important;
  line-height: 2.15 !important;
}

#ph-top > div[data-reveal]:last-of-type {
  width: 100%;
  max-width: 1180px !important;
  margin-top: clamp(72px, 9vw, 112px) !important;
}

#ph-top > div[data-reveal]:last-of-type > div {
  border-color: var(--ef-line) !important;
}

#ph-top > div[data-reveal]:last-of-type a,
#ph-top > div[data-reveal]:last-of-type > div > div {
  padding-top: 24px !important;
  padding-bottom: 24px !important;
  border-radius: 0 !important;
}

#ph-vision,
#ph-mission,
#ph-value,
#ph-circle {
  min-height: 78svh;
  display: flex;
  align-items: center;
  padding-top: clamp(128px, 14vw, 192px) !important;
  padding-bottom: clamp(128px, 14vw, 192px) !important;
}

#ph-code,
#ph-profile {
  padding-top: clamp(128px, 14vw, 192px) !important;
  padding-bottom: clamp(128px, 14vw, 192px) !important;
}

#ph-vision h2,
#ph-mission h2,
#ph-value h2,
#ph-circle h2,
#ph-code h2,
#ph-profile h2 {
  font-family: var(--ef-display) !important;
  font-weight: 700 !important;
  font-size: clamp(38px, 5.6vw, 72px) !important;
  line-height: 1.42 !important;
  letter-spacing: .02em !important;
}

#ph-vision > div,
#ph-mission > div,
#ph-value > div,
#ph-circle > div,
#ph-code > div,
#ph-profile > div {
  width: 100%;
  max-width: 1120px !important;
}

section[data-screen-label$="Hero"]:not(#ec-hero-root):not(#ph-top) {
  min-height: min(76svh, 760px);
  display: flex;
  align-items: center;
  padding-top: clamp(144px, 17vh, 192px) !important;
  padding-bottom: clamp(92px, 10vw, 132px) !important;
}

section[data-screen-label$="Hero"]:not(#ec-hero-root):not(#ph-top) h1 {
  font-size: clamp(40px, 5.8vw, 76px) !important;
  line-height: 1.38 !important;
}

section[data-screen-label$="CTA"] {
  padding-top: clamp(104px, 12vw, 156px) !important;
  padding-bottom: clamp(104px, 12vw, 156px) !important;
}

input,
textarea,
select {
  border-radius: 2px !important;
  font-family: var(--ef-sans) !important;
}

@media (max-width: 720px) {
  section[data-screen-label$="Hero"]:not(#ec-hero-root) h1::before {
    width: 30px;
    margin-bottom: 20px;
  }

  #ph-top {
    min-height: auto;
    padding-top: 132px !important;
    padding-bottom: 92px !important;
  }

  #ph-top h1 {
    font-size: clamp(38px, 12.3vw, 58px) !important;
    margin-bottom: 36px !important;
  }

  #ph-top > div[data-reveal]:first-of-type > p {
    margin-left: 0 !important;
    padding-left: 20px;
  }

  #ph-top > div[data-reveal]:last-of-type {
    margin-top: 64px !important;
  }

  #ph-vision,
  #ph-mission,
  #ph-value,
  #ph-circle,
  #ph-code,
  #ph-profile {
    min-height: auto;
    padding-top: 96px !important;
    padding-bottom: 96px !important;
  }

  #ph-vision h2,
  #ph-mission h2,
  #ph-value h2,
  #ph-circle h2,
  #ph-code h2,
  #ph-profile h2 {
    font-size: clamp(32px, 9vw, 46px) !important;
  }

  section[data-screen-label$="Hero"]:not(#ec-hero-root):not(#ph-top) {
    min-height: auto;
    padding-top: 128px !important;
    padding-bottom: 88px !important;
  }

  section[data-screen-label$="Hero"]:not(#ec-hero-root):not(#ph-top) h1 {
    /* 340px 未満だけ下限を下げる（320px で「取り扱いについて」が1行に入る。Loop 5） */
    font-size: clamp(30px, 10vw, 50px) !important;
  }
}

/* トップの価値ワードの帯は、流さずに置く（デザイン Loop 9）。
   止めても伝わる言葉は同じなので、常時の動きにしない（ノウハウ「止めたら伝わる内容が減るか」）。 */
.ec-mq {
  animation: none !important;
  will-change: auto !important;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* World Class batch1 / Loop 2: semantic hooks survive DC style serialization. */
:root { --ef-radius-control: 2px; --ef-control-height: 48px; }
[data-ef-button] {
  border-radius: var(--ef-radius-control) !important;
  box-shadow: none !important;
  min-height: var(--ef-control-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.5;
  transition: border-color .2s ease, background-color .2s ease;
}

/* World Class batch1 / Loop 3: display scale follows the available reading measure. */
:root {
  --ef-fs-hero: clamp(34px, 4.15vw, 60px);
  --ef-hero-leading: 1.42;
}
section[data-screen-label$="Hero"]:not(#ec-hero-root):not(#ph-top) h1 {
  font-size: var(--ef-fs-hero) !important;
  line-height: var(--ef-hero-leading) !important;
  letter-spacing: .025em !important;
}
section[data-screen-label$="Hero"]:not(#ec-hero-root):not(#ph-top) {
  padding-top: clamp(128px, 16vh, 176px) !important;
  padding-bottom: clamp(72px, 8vw, 112px) !important;
}
#ec-hero-root .ef-hero-stage {
  height: auto !important;
  min-height: 100svh;
  padding: 112px 24px 80px !important;
}
#ec-hero-root .ef-hero-stage h1 {
  font-size: clamp(40px, 7.5vw, 104px) !important;
  line-height: 1.24 !important;
}
#ec-hero-root .ef-hero-stage > p:first-of-type {
  max-width: 38em !important;
  font-size: var(--ef-fs-body) !important;
}
@media (max-width: 768px) {
  section[data-screen-label$="Hero"]:not(#ec-hero-root):not(#ph-top) h1 {
    font-size: clamp(30px, 9.6vw, 46px) !important;
  }
  section[data-screen-label$="Hero"]:not(#ec-hero-root):not(#ph-top) {
    padding-top: 112px !important;
    padding-bottom: 72px !important;
  }
  #ec-hero-root .ef-hero-stage { padding: 104px 24px 64px !important; }
  #ec-hero-root .ef-hero-stage h1 { font-size: clamp(32px, 10vw, 54px) !important; }
}

/* Responsive phrase boundaries keep words together without changing copy. */
.ef-phrase { display:inline-block; }
@media (max-width:768px) {
  #ph-top > div[data-reveal] { width:100%; min-width:0; }
  #ph-top h1 { font-size:clamp(32px,10.5vw,58px) !important; }
  #ph-top > div[data-reveal] > p { max-width:100% !important; }
}

/* World Class batch1 / Loop 5: one precise field for three comparable services. */
#ec-core .ef-service-grid {
  gap:0 !important;
  background:var(--ef-paper);
  border-top:1px solid var(--ef-line);
  border-bottom:1px solid var(--ef-line);
}
#ec-core .ef-service-card {
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  padding:36px 28px !important;
}
#ec-core .ef-service-card + .ef-service-card { border-left:1px solid var(--ef-line) !important; }
#ec-core .ef-service-card > svg { height:96px !important; margin-bottom:28px !important; }
#ec-core .ef-service-card > h3 { line-height:1.7 !important; }
#ec-core .ef-service-card > div:last-child { gap:16px !important; align-items:flex-start !important; flex-direction:column; }
@media (min-width:769px) { #ec-core .ef-service-grid {grid-template-columns:repeat(3,minmax(0,1fr)) !important;} }
/* 769〜1024px の3列では、題「セールスプロモーション事業」の語が列に入らず途中で折れた（デザイン Loop 11） */
@media (min-width:769px) and (max-width:1024px) { #ec-core .ef-service-card { padding:36px 20px !important; } }
@media (max-width:768px) {
  #ec-core .ef-service-card { padding:32px 0 !important; }
  #ec-core .ef-service-card + .ef-service-card { border-left:0 !important; border-top:1px solid var(--ef-line) !important; }
  #ec-core .ef-service-card > div:last-child { flex-direction:row; align-items:center !important; justify-content:space-between; }
}

/* World Class batch1 / Loop 7: disclosure state and visible keyboard location. */
.sg-wrap[data-ef-disclosure][data-open="false"] .sg-drop {
  opacity:0 !important; visibility:hidden !important; pointer-events:none !important;
  transform:translateX(-50%) translateY(6px) !important;
}
.sg-wrap[data-ef-disclosure][data-open="true"] .sg-drop {
  opacity:1 !important; visibility:visible !important; pointer-events:auto !important;
  transform:translateX(-50%) translateY(0) !important;
}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, a[data-ef-button]:focus-visible {
  outline:3px solid var(--ef-blue) !important; outline-offset:3px !important;
  box-shadow:0 0 0 3px var(--ef-paper) !important;
}

/* World Class batch1 / Loop 8: existing palette, unchanged values; W1 remains open. */
:root {
  --ef-action: #2b6fe3;
  --ef-ink-strong: #16233f;
  --ef-text-body: #4a5470;
  --ef-text-body-strong: #2b3550;
  --ef-text-light: #eef1f7;
  --ef-text-note: #44506a;
  --ef-surface-deep: #0d1526;
  --ef-text-muted-dark: #b8c1d6;
  --ef-text-caption: #5c6b85;
  --ef-text-secondary: #6b7590;
  --ef-text-neutral: #333;
  --ef-text-cool: #9fb0d6;
  --ef-surface-panel: #1a2740;
  --ef-text-menu: #c3cbdd;
  --ef-action-accent: #c637b0;
  --ef-text-neutral-strong: #222;
  --ef-surface-soft: #f4f7fa;
  --ef-surface-elevated: #22314e;
  --ef-surface-faint: #f8fafc;
  --ef-alert-decorative: #e23b5a;
  --ef-surface-blue: #f3f8ff;
}