/*
 * 土台：リセット・文字・幅・ボタン・見出しの型・ふわっと出る動き
 * WordPress に移すときは、テーマの style.css の先頭（tokens.css の次）に置く。
 */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--wp--custom--header-height) + 16px);
}
body {
  margin: 0;
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--body);
  line-height: 1.8;
  color: var(--wp--preset--color--body);
  background: var(--wp--preset--color--white);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "palt" 1;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--wp--preset--color--accent-bright); outline-offset: 3px; }
[hidden] { display: none !important; }

.hl-skip {
  position: absolute; left: 1rem; top: -100px; z-index: 200;
  padding: .6rem 1rem; background: var(--wp--preset--color--primary); color: #fff; border-radius: 0;
}
.hl-skip:focus { top: 1rem; }
.hl-sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* 幅 */
.hl-container {
  width: 100%;
  max-width: calc(var(--wp--custom--width--content) + var(--wp--custom--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--wp--custom--gutter);
}
.hl-container--wide { max-width: calc(var(--wp--custom--width--wide) + var(--wp--custom--gutter) * 2); }

/* セクションの上下 */
.hl-section { padding-block: var(--wp--preset--spacing--60); }
.hl-section--tight { padding-block: var(--wp--preset--spacing--50); }
.hl-section--surface { background: var(--wp--preset--color--surface); }
.hl-section--primary { background: var(--wp--preset--color--primary); color: #fff; }

/* 見出しの型：日本語の見出し（青い短い線の下に太字）。英字の見出しは使わない */
.hl-head { margin-bottom: var(--wp--preset--spacing--50); }
.hl-head__title {
  font-size: clamp(1.7rem, 3.3vw, 2.7rem);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .03em;
  color: var(--wp--preset--color--ink);
}
.hl-head__title::before {
  content: ""; display: block; width: 2.6rem; height: 4px; margin-bottom: .9rem;
  border-radius: 0; background: var(--wp--preset--color--primary);
}
.hl-head__lead { margin-top: 1.2rem; max-width: 40em; }
.hl-head--center { text-align: center; }
.hl-head--center .hl-head__title::before { margin-inline: auto; }
.hl-head--center .hl-head__lead { margin-inline: auto; }
.hl-head--invert .hl-head__title { color: #fff; }
.hl-head--invert .hl-head__title::before { background: #fff; }

/* 大きなキャッチ（Apple のような短い言い切り） */
.hl-catch {
  font-size: var(--wp--preset--font-size--catch);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .01em;
  color: var(--wp--preset--color--ink);
}
/* 見出しは文節で折り返す（対応ブラウザのみ） */
.hl-catch, .hl-head__title, .hl-statement__heading, .hl-statement__lead, .hl-page-hero__catch,
.hl-cta-band__heading, .hl-commitments__title, .hl-service-detail__catch, .hl-reasons__title { word-break: auto-phrase; }
.hl-mark { font-style: normal; color: var(--wp--preset--color--primary); }

/* ボタン */
.hl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .7em;
  min-height: 48px; padding: .7em 1.5em .7em 1.1em;
  border-radius: var(--wp--custom--radius--pill);
  font-size: .9375rem; font-weight: 700; line-height: 1.3;
  transition: background-color .2s, color .2s, box-shadow .2s, transform .2s;
}
.hl-btn:hover { transform: translateY(-1px); }
.hl-btn__icon {
  flex: none; display: grid; place-items: center;
  width: 1.6em; height: 1.6em; border-radius: 50%;
}
.hl-btn__icon svg { width: .9em; height: .9em; }
.hl-btn--primary { background: var(--wp--preset--color--primary); color: #fff; }
.hl-btn--primary .hl-btn__icon { background: #fff; color: var(--wp--preset--color--primary); }
.hl-btn--primary:hover { background: var(--wp--preset--color--primary-deep); }
.hl-btn--white { background: #fff; color: var(--wp--preset--color--ink); }
.hl-btn--white .hl-btn__icon { background: var(--wp--preset--color--primary); color: #fff; }
.hl-btn--white:hover { box-shadow: 0 6px 20px rgba(0, 0, 0, .15); }
.hl-btn--ghost { border: 1px solid currentColor; color: var(--wp--preset--color--primary); background: #fff; }
.hl-btn--ghost .hl-btn__icon { background: var(--wp--preset--color--primary); color: #fff; }
.hl-btn--ghost:hover { background: var(--wp--preset--color--tint); }
.hl-btns { display: flex; flex-wrap: wrap; gap: .8rem 1rem; }
.hl-btns--center { justify-content: center; }
.hl-btns--end { justify-content: flex-end; }

/* 文字のリンク（「もっと見る ›」） */
.hl-textlink {
  display: inline-flex; align-items: center; gap: .3em;
  color: var(--wp--preset--color--accent-bright); font-weight: 500;
}
.hl-textlink svg { width: .8em; height: .8em; transition: transform .2s; }
.hl-textlink:hover { text-decoration: underline; text-underline-offset: 3px; }
.hl-textlink:hover svg { transform: translateX(2px); }

/* 札（カテゴリ・エリア） */
.hl-chip {
  display: inline-flex; align-items: center;
  padding: .15em .8em; border-radius: var(--wp--custom--radius--pill);
  background: var(--wp--preset--color--tint); color: var(--wp--preset--color--primary);
  font-size: var(--wp--preset--font-size--tiny); font-weight: 700; line-height: 1.7; white-space: nowrap;
}
.hl-chip--link { text-decoration: none; transition: background-color .2s, color .2s; }
.hl-chip--link:hover { background: var(--wp--preset--color--primary); color: #fff; }
.hl-chip--line { background: none; border: 1px solid var(--wp--preset--color--line); color: var(--wp--preset--color--muted); }

/* 仮の内容の注記 */
.hl-note {
  margin-top: var(--wp--preset--spacing--30);
  font-size: var(--wp--preset--font-size--tiny);
  color: var(--wp--preset--color--muted);
}
.hl-section--primary .hl-note { color: rgba(255, 255, 255, .7); }

/* ふわっと出る（JS が動くときだけ隠す） */
.js .hl-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1);
  transition-delay: var(--hl-delay, 0s);
}
.js .hl-reveal.is-in { opacity: 1; transform: none; }

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