/*
Theme Name: cycnus2026
Theme URI: https://cycnus.co.jp/
Author: 株式会社キュクノス
Author URI: https://cycnus.co.jp/
Description: 株式会社キュクノス コーポレートサイト用テーマ。「AIで武装したPMO・PM人材を育てる会社」のブランディングを伝えるコーポレートサイト。
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: cycnus2026
*/

/* ==========================================================================
   Design tokens
   ========================================================================== */
:root {
  --c-navy: #16395C;
  --c-navy-hover: #1F4E79;
  --c-ice: #CADCFC;
  --c-ice-bg: #EEF3FA;
  --c-accent: #E8833A;
  --c-accent-hover: #D0722F;
  --c-body: #2A455F;
  --c-body-2: #3A5573;
  --c-rule: #E3EAF3;
  --c-rule-2: #DCE7F5;
  --c-footer-bg: #0F2A44;
  --c-footer-text: #8FA9C6;
  --c-white: #FFFFFF;
  --c-muted: #6B84A0;

  --font-jp: 'Noto Sans JP', "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;

  --content-width: 1120px;
  --content-width-narrow: 960px;
  --content-width-form: 760px;

  --section-y: 120px;
  --section-y-sub: 104px;
  --gutter: 64px;
}

@media (max-width: 900px) {
  :root {
    --section-y: 72px;
    --section-y-sub: 64px;
    --gutter: 24px;
  }
}

@media (max-width: 560px) {
  :root {
    --section-y: 56px;
    --section-y-sub: 48px;
    --gutter: 20px;
  }
}

/* 見出しフォントサイズの段階縮小(モバイル優先) */
@media (max-width: 900px) {
  .section-title { font-size: 26px; margin-bottom: 40px; }
  .section-title--sub { font-size: 24px; }
  .page-hero h1 { font-size: 30px; }
  .eyebrow-heading { margin-bottom: 32px; }
}
@media (max-width: 560px) {
  .section-title { font-size: 22px; margin-bottom: 32px; }
  .section-title--sub { font-size: 20px; }
  .page-hero h1 { font-size: 26px; }
}

/* ==========================================================================
   Reset / base
   ========================================================================== */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-jp);
  background: #fff;
  color: var(--c-navy);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--c-navy-hover); text-decoration: none; }
a:hover, a:focus { color: var(--c-accent); }
button { font-family: var(--font-jp); }
h1, h2, h3, p, figure { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(1px,1px,1px,1px);
  white-space: nowrap;
}

/*
 * 横方向の余白(gutter)は常に親の .section 側で付与する(仕様どおり
 * 「コンテンツ幅1120px + セクション左右余白」の1階層のみ)。.container 自体には
 * 重ねてpaddingを付けない — 付けると入れ子になった際に余白が二重にかかり、
 * 1120px基準で設計した図版(AI検収フロー等)の内側幅が不足して折り返してしまう。
 */
.container { max-width: var(--content-width); margin: 0 auto; }
.container--narrow { max-width: var(--content-width-narrow); margin: 0 auto; }
.container--form { max-width: var(--content-width-form); margin: 0 auto; }

.section { padding: var(--section-y) var(--gutter); }
.section--sub { padding: var(--section-y-sub) var(--gutter); }
.section--white { background: #fff; }
.section--ice { background: var(--c-ice-bg); }
.section--navy { background: var(--c-navy); color: #fff; }

.heading-bar {
  width: 40px; height: 4px; background: var(--c-accent);
  margin: 0 auto 28px;
}
.heading-bar--left { margin: 0 0 24px; }

.section-title {
  margin: 0 0 64px;
  font-size: 34px;
  font-weight: 900;
  text-align: center;
  letter-spacing: .02em;
}
.section-title--sub { font-size: 30px; margin-bottom: 0; }
.section-title--tight { margin-bottom: 32px; }

.eyebrow-heading {
  display: flex;
  align-items: baseline;
  gap: 20px;
  margin-bottom: 48px;
  flex-wrap: wrap;
}
.eyebrow {
  font-size: 12px;
  font-weight: 900;
  color: var(--c-accent);
  letter-spacing: .16em;
  white-space: nowrap;
}

.page-hero {
  background: var(--c-ice-bg);
  padding: 88px var(--gutter) 72px;
  text-align: center;
  /*
   * display:flow-root で新しいブロック整形コンテキストを作る。これが無いと、
   * padding-bottom:0 にした際に子(h1)のmargin-bottomがpage-heroの外側へ
   * 「突き抜けて」(margin collapse)、次の兄弟要素との間に意図しない
   * 隙間ができてしまう(採用ページで実際に発生した不具合)。
   */
  display: flow-root;
}
/* 採用ページはH1の直後にリード文のアイス帯(is-style-cycnus-lead-band)が続くため、
   ここで下余白を持たせると二重になる。採用ページに限り0にする。 */
body.is-recruit-page .page-hero { padding-bottom: 0; }
.page-hero h1 {
  font-size: 40px;
  font-weight: 900;
  letter-spacing: .02em;
  margin: 0 0 28px;
}
.page-hero p {
  max-width: 44em;
  margin: 0 auto;
  font-size: 15px;
  line-height: 2.2;
  color: var(--c-body-2);
}
.page-hero p + p { margin-top: 16px; }
.page-hero .page-hero__lead-strong {
  font-size: 16px;
  font-weight: 700;
  color: var(--c-navy);
  line-height: 2.1;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-block;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 18px 48px;
  border: 1px solid transparent;
  cursor: pointer;
  text-align: center;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn--navy { background: var(--c-navy); color: #fff; }
.btn--navy:hover { background: var(--c-navy-hover); color: #fff; }
.btn--outline-navy { border-color: var(--c-navy); color: var(--c-navy); background: transparent; }
.btn--outline-navy:hover { border-color: var(--c-accent); color: var(--c-accent); }
.btn--accent { background: var(--c-accent); color: #fff; font-weight: 900; }
.btn--accent:hover { background: var(--c-accent-hover); color: #fff; }
.btn--outline-ice { border-color: rgba(202,220,252,.5); color: var(--c-ice-bg); background: transparent; }
.btn--outline-ice:hover { border-color: var(--c-accent); color: var(--c-accent); }
.btn--sm { padding: 13px 28px; font-size: 13.5px; }
.btn--block-cta { padding: 19px 72px; letter-spacing: .08em; border: none; }

.link-arrow {
  font-size: 16px;
  font-weight: 700;
  color: var(--c-navy-hover);
  border-bottom: 2px solid var(--c-ice);
  padding-bottom: 4px;
  display: inline-block;
}
.link-arrow:hover { color: var(--c-accent); border-color: var(--c-accent); }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 var(--gutter);
  height: 76px;
  background: #fff;
  border-bottom: 1px solid var(--c-rule);
  position: sticky;
  top: 0;
  z-index: 100;
}
.site-logo img { height: 26px; }
.site-nav,
.site-nav .nav-menu {
  display: flex; gap: 36px; align-items: center; font-size: 14px; font-weight: 700;
  list-style: none; margin: 0; padding: 0;
}
.site-nav .nav-menu li { margin: 0; padding: 0; }
.site-nav a.is-current,
.site-nav .current-menu-item > a { color: var(--c-accent); }
.site-nav .btn--navy { padding: 12px 28px; font-size: 14px; }
.nav-toggle {
  display: none;
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
}
.nav-toggle span, .nav-toggle::before, .nav-toggle::after {
  content: "";
  display: block;
  width: 24px;
  height: 2px;
  background: var(--c-navy);
  margin: 5px 0;
}

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .site-nav {
    position: fixed;
    top: 76px; left: 0; right: 0;
    background: #fff;
    border-bottom: 1px solid var(--c-rule);
    max-height: 0;
    overflow: hidden;
    transition: max-height .2s ease;
  }
  .site-nav,
  .site-nav .nav-menu {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .site-nav.is-open { max-height: 480px; overflow-y: auto; }
  .site-nav a { padding: 18px var(--gutter); border-bottom: 1px solid var(--c-rule); display: block; }
  .site-nav .btn--navy { text-align: center; margin: 16px var(--gutter); padding: 16px 28px; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  background: #fff;
  padding: 112px var(--gutter) 64px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 180px;
  background: linear-gradient(#fff, var(--c-ice-bg));
  z-index: 0;
}
.hero__inner { position: relative; z-index: 1; }
.hero__badge {
  display: inline-block;
  border: 1px solid var(--c-ice);
  color: var(--c-navy-hover);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  padding: 9px 24px;
  margin-bottom: 36px;
}
.hero__title {
  margin: 0 auto 28px;
  font-size: 58px;
  line-height: 1.32;
  font-weight: 900;
  letter-spacing: .015em;
}
.hero__title em {
  font-style: normal;
  background: linear-gradient(transparent 66%, var(--c-accent) 66%);
}
.hero__lead {
  margin: 0 auto 48px;
  font-size: 17px;
  line-height: 2.1;
  color: var(--c-body-2);
  max-width: 36em;
}
.hero__ctas {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-bottom: 88px;
  flex-wrap: wrap;
}
.hero__ctas .btn--navy { padding: 19px 56px; }
.hero__ctas .btn--outline-navy { padding: 18px 48px; }
.hero__photo {
  max-width: var(--content-width);
  margin: 0 auto;
  aspect-ratio: 16 / 5;
  border: 1px solid var(--c-ice);
  position: relative;
  overflow: hidden;
  background: var(--c-ice-bg) center / cover no-repeat;
}
.hero__photo img { width: 100%; height: 100%; object-fit: cover; }
.hero__photo-placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  padding: 24px;
  font-size: 13px;
  color: var(--c-body-2);
  background: var(--c-ice-bg);
}

@media (max-width: 900px) {
  .hero { padding: 72px var(--gutter) 48px; }
  .hero__title { font-size: 38px; }
  .hero__lead { font-size: 15px; }
  .hero__ctas { margin-bottom: 48px; }
}
@media (max-width: 560px) {
  .hero__title { font-size: 30px; }
  .hero__ctas { flex-direction: column; align-items: stretch; }
}
/*
 * デザイン更新(260818_2): Heroオフィス写真は16:5のままモバイル幅で表示すると
 * 帯状に潰れて不自然に見えるため、768px以下では同じ画像を4:3・中央coverに
 * 切り替える(デザインファイルの #hero-photo-frame と同じ挙動)。
 */
@media (max-width: 768px) {
  .hero__photo { aspect-ratio: 4 / 3; }
}

/* ==========================================================================
   課題 (Problem cards)
   ========================================================================== */
.problem-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--c-ice);
  border: 1px solid var(--c-ice);
  margin-bottom: 48px;
}
.problem-card { background: #fff; padding: 44px 36px; }
.problem-card__num {
  font-size: 34px; font-weight: 900; color: var(--c-ice);
  line-height: 1; margin-bottom: 20px;
}
.problem-card p { font-size: 15px; line-height: 2; color: var(--c-body); }
.problem-closing {
  margin: 0 auto;
  font-size: 17px;
  line-height: 2.1;
  font-weight: 500;
  text-align: center;
  max-width: 42em;
}

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

/* ==========================================================================
   解決アプローチ
   ========================================================================== */
.solution-lead {
  margin: 0 auto 72px;
  font-size: 15px;
  line-height: 2.2;
  color: var(--c-body-2);
  max-width: 46em;
  text-align: center;
}

.ai-flow {
  background: var(--c-ice-bg);
  padding: 64px 48px;
  margin-bottom: 72px;
}
.ai-flow__row {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0;
}
.ai-flow__step { flex-shrink: 1; min-width: 0; }
.ai-flow__step--main { flex-shrink: 1; min-width: 0; }
.ai-flow__arrow { flex-shrink: 0; }
.ai-flow__step {
  width: 300px;
  background: #fff;
  border: 1px solid var(--c-ice);
  padding: 32px 28px;
  align-self: center;
}
.ai-flow__step-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.ai-flow__num {
  width: 30px; height: 30px; background: var(--c-ice); color: var(--c-navy);
  font-size: 14px; font-weight: 900; display: flex; align-items: center; justify-content: center;
  flex: none;
}
.ai-flow__step-title { font-size: 16px; font-weight: 900; color: var(--c-navy); }
.ai-flow__step-body { font-size: 13px; line-height: 1.9; color: var(--c-body-2); }
.ai-flow__arrow { align-self: center; padding: 0 20px; color: var(--c-navy-hover); font-size: 26px; font-weight: 900; }

.ai-flow__step--main {
  width: 340px;
  background: var(--c-navy);
  padding: 42px 34px;
  box-shadow: 0 16px 40px rgba(22,57,92,.28);
  position: relative;
}
.ai-flow__badge {
  position: absolute; top: -15px; left: 50%; transform: translateX(-50%);
  background: var(--c-accent); color: #fff;
  font-size: 12px; font-weight: 900; letter-spacing: .08em;
  padding: 6px 18px; white-space: nowrap;
}
.ai-flow__step--main .ai-flow__num { width: 34px; height: 34px; background: var(--c-accent); color: #fff; font-size: 15px; }
.ai-flow__step--main .ai-flow__step-title { font-size: 19px; color: #fff; }
.ai-flow__step--main .ai-flow__step-body { font-size: 13.5px; color: var(--c-ice); }

@media (max-width: 900px) {
  .ai-flow { padding: 40px 20px; }
  .ai-flow__row { flex-direction: column; align-items: center; }
  .ai-flow__step, .ai-flow__step--main { width: 100%; max-width: 340px; }
  .ai-flow__arrow { transform: rotate(90deg); padding: 12px 0; }
}

.principles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.principle { border-top: 3px solid var(--c-navy); padding-top: 28px; }
.principle h3 { margin: 0 0 14px; font-size: 18px; font-weight: 900; }
.principle p { margin: 0; font-size: 14px; line-height: 2; color: var(--c-body-2); }

@media (max-width: 900px) {
  .principles-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* ==========================================================================
   証拠
   ========================================================================== */
.evidence-profile {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 48px;
  background: #fff;
  border: 1px solid var(--c-rule-2);
  padding: 48px;
  margin-bottom: 32px;
  align-items: center;
}
.evidence-photo {
  aspect-ratio: 3 / 4;
  border: 1px solid var(--c-ice);
  position: relative;
  overflow: hidden;
  background: var(--c-ice-bg);
}
.evidence-photo img { width: 100%; height: 100%; object-fit: cover; }
.evidence-label {
  font-size: 13px; font-weight: 900; color: var(--c-accent);
  letter-spacing: .14em; margin-bottom: 16px;
}
.evidence-bio { margin: 0; font-size: 15px; line-height: 2.15; color: var(--c-body); }

.evidence-system {
  background: #fff;
  border: 1px solid var(--c-rule-2);
  padding: 48px;
  margin-bottom: 32px;
}
.evidence-system p {
  margin: 0 0 40px;
  font-size: 15.5px;
  line-height: 2.2;
  color: var(--c-body);
  max-width: 50em;
}

.ladder { background: var(--c-ice-bg); padding: 44px 40px; }
.ladder__badge-row { text-align: center; margin-bottom: 32px; }
.ladder__badge {
  background: var(--c-navy); color: #fff;
  font-size: 13px; font-weight: 700; letter-spacing: .08em;
  padding: 8px 24px;
  display: inline-block;
}
.ladder__row {
  display: flex; align-items: flex-end; gap: 10px;
  border-bottom: 2px solid var(--c-navy);
  padding-bottom: 0;
}
.ladder__col { flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ladder__col-label { font-size: 12px; line-height: 1.7; color: var(--c-body); text-align: center; }
.ladder__col-label b { font-size: 13px; display: block; }
.ladder__bar { background: var(--c-ice); }
.ladder__note {
  margin-top: 24px; font-size: 16px; font-weight: 700; color: var(--c-navy); text-align: center;
}

@media (max-width: 900px) {
  .evidence-profile { grid-template-columns: 1fr; }
  .evidence-photo { max-width: 240px; margin: 0 auto; }
  .ladder { padding: 28px 16px; }
  .ladder__row { gap: 4px; }
  .ladder__col-label { font-size: 10px; }
  .ladder__col-label b { font-size: 11px; }
}

.evidence-results {
  background: #fff;
  border: 1px solid var(--c-rule-2);
  padding: 20px 48px 28px;
}
.evidence-results .evidence-label { margin: 28px 0 8px; }
.result-row {
  padding: 24px 0;
  border-bottom: 1px solid var(--c-rule);
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 32px;
  align-items: baseline;
}
.result-row:last-of-type { border-bottom: none; }
.result-row b { font-size: 15px; color: var(--c-navy); line-height: 1.8; }
.result-row span { font-size: 14.5px; line-height: 2; color: var(--c-body); }
.result-note { font-size: 12px; color: var(--c-muted); }

@media (max-width: 700px) {
  .result-row { grid-template-columns: 1fr; gap: 8px; }
}

/* ==========================================================================
   サービス3本柱
   ========================================================================== */
.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.service-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--c-ice-bg);
  padding: 44px 36px;
  color: inherit;
  border: 1px solid transparent;
}
.service-card:hover { border-color: var(--c-navy); color: inherit; }
.service-card__tag { font-size: 12px; font-weight: 900; color: var(--c-accent); letter-spacing: .16em; }
.service-card h3 { margin: 0; font-size: 21px; font-weight: 900; color: var(--c-navy); }
.service-card p { margin: 0; font-size: 14px; line-height: 2; color: var(--c-body-2); flex: 1; }
.service-card__more { font-size: 13px; font-weight: 900; color: var(--c-navy-hover); letter-spacing: .06em; }

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

/* ==========================================================================
   セミナー
   ========================================================================== */
.seminar-band { text-align: center; }
.seminar-band .container { max-width: var(--content-width); }
.seminar-band p { margin: 0 auto 40px; font-size: 15px; line-height: 2.1; color: var(--c-ice); max-width: 40em; }
.seminar-datetime {
  display: inline-block;
  border: 1px solid rgba(202,220,252,.4);
  padding: 20px 40px;
  font-size: 16px; font-weight: 700;
  margin-bottom: 36px;
  line-height: 1.9;
}
.seminar-datetime small { font-weight: 400; font-size: 13px; color: var(--c-ice); display: block; }

/* ==========================================================================
   問い合わせ導線
   ========================================================================== */
.contact-teaser {
  background: #fff;
  padding: 72px var(--gutter);
  text-align: center;
  border-bottom: 1px solid var(--c-rule);
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background: var(--c-footer-bg);
  color: var(--c-footer-text);
  padding: 56px var(--gutter) 44px;
}
.footer-inner {
  max-width: var(--content-width);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  flex-wrap: wrap;
}
.footer-brand { color: #fff; font-weight: 700; font-size: 16px; letter-spacing: .04em; margin-bottom: 10px; }
.footer-address { font-size: 13px; line-height: 1.9; }
.footer-nav,
.footer-nav .footer-menu {
  display: flex; gap: 32px; font-size: 13px; font-weight: 500; flex-wrap: wrap;
  list-style: none; margin: 0; padding: 0;
}
.footer-nav .footer-menu li { margin: 0; padding: 0; }
.footer-nav a { color: var(--c-ice); }
.footer-bottom {
  max-width: var(--content-width);
  margin: 36px auto 0;
  padding-top: 24px;
  border-top: 1px solid rgba(202,220,252,.15);
  font-size: 12px;
}

@media (max-width: 700px) {
  .footer-inner { flex-direction: column; gap: 24px; }
}

/* ==========================================================================
   サービス詳細ページ
   ========================================================================== */
.service-lead { margin: 0 0 48px; font-size: 16px; font-weight: 500; line-height: 2.1; color: var(--c-body); }
.service-lead--tight { margin-bottom: 32px; }

.service-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--c-ice);
  border: 1px solid var(--c-ice);
  margin-bottom: 48px;
}
.service-detail-grid .problem-card { background: var(--c-ice-bg); padding: 36px 30px; }
.service-detail-grid .problem-card__num { color: var(--c-navy-hover); font-size: 26px; margin-bottom: 18px; }
.service-detail-grid .problem-card p { font-size: 14.5px; }

.svc-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-bottom: 40px;
}
.svc-info-box { border: 1px solid var(--c-rule-2); padding: 36px 40px; display: flex; flex-direction: column; }
.svc-info-box .evidence-label { margin-bottom: 18px; }
.format-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; flex: 1; }
.format-tile {
  background: var(--c-ice-bg); color: var(--c-navy); font-size: 15px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; text-align: center; padding: 18px 12px;
}
.price-figure { font-size: 26px; font-weight: 900; line-height: 1.4; }
.price-figure span { font-size: 15px; font-weight: 700; }
.price-note { margin-top: 10px; font-size: 13px; line-height: 1.9; color: var(--c-body-2); }

.svc-closing {
  background: var(--c-ice-bg);
  padding: 32px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.svc-closing p { margin: 0; font-size: 15px; line-height: 2; color: var(--c-body); flex: 1; min-width: 240px; }
.svc-closing-ctas { display: flex; gap: 12px; flex: none; flex-wrap: wrap; }

.svc-support-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.svc-support-box { background: #fff; border: 1px solid var(--c-rule-2); padding: 36px 40px; }
.svc-support-box .evidence-label { margin-bottom: 18px; }
.bullet-list { display: flex; flex-direction: column; gap: 14px; font-size: 14.5px; line-height: 1.9; color: var(--c-body); }
.bullet-list div { display: grid; grid-template-columns: 14px 1fr; gap: 12px; }
.bullet-list span { color: var(--c-navy-hover); font-weight: 900; }

.svc-execution-box { border: 1px solid var(--c-rule-2); padding: 28px 40px; font-size: 14px; line-height: 2; color: var(--c-body-2); }

.tail-cta { text-align: center; }
.tail-cta p { margin: 0 auto 40px; font-size: 16px; line-height: 2.1; color: var(--c-ice); max-width: 40em; }
.tail-cta-row { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

@media (max-width: 900px) {
  .service-detail-grid, .svc-info-grid, .svc-support-grid { grid-template-columns: 1fr; }
  .svc-closing { flex-direction: column; align-items: stretch; text-align: center; }
  .svc-closing-ctas { justify-content: center; }
}

/* ==========================================================================
   会社概要ページ
   ========================================================================== */
.message-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 56px;
  align-items: start;
}
.message-photo-col { text-align: center; }
.message-photo {
  aspect-ratio: 3 / 4;
  border: 1px solid var(--c-ice);
  position: relative;
  overflow: hidden;
  background: var(--c-ice-bg);
}
.message-photo img { width: 100%; height: 100%; object-fit: cover; }
.message-name { margin-top: 16px; text-align: center; font-size: 14px; color: var(--c-body-2); }
.message-name b { font-size: 16px; color: var(--c-navy); }
.message-body { display: flex; flex-direction: column; gap: 28px; font-size: 15.5px; line-height: 2.3; color: var(--c-body); }
.message-body p { margin: 0; }

@media (max-width: 900px) {
  .message-grid { grid-template-columns: 1fr; }
  .message-photo { max-width: 240px; margin: 0 auto; }
}

.vision-band { text-align: center; }
.vision-eyebrow { font-size: 12px; font-weight: 900; color: var(--c-ice); letter-spacing: .24em; margin-bottom: 24px; }
.vision-text { font-size: 30px; font-weight: 900; line-height: 1.8; letter-spacing: .04em; }

@media (max-width: 560px) {
  .vision-text { font-size: 22px; }
}

.info-table { background: #fff; border: 1px solid var(--c-rule-2); padding: 16px 48px; }
.info-row {
  display: grid; grid-template-columns: 200px 1fr; gap: 24px;
  padding: 24px 0; border-bottom: 1px solid var(--c-rule);
  font-size: 14.5px; line-height: 1.9;
}
.info-row:last-child { border-bottom: none; }
.info-row b { color: var(--c-navy); }
.info-row span { color: var(--c-body); }

@media (max-width: 560px) {
  .info-table { padding: 8px 20px; }
  .info-row { grid-template-columns: 1fr; gap: 6px; }
}

.access-block { margin-top: 72px; }
.map-embed { border: 1px solid var(--c-rule-2); background: #fff; }
.map-embed iframe { border: 0; display: block; width: 100%; height: 400px; }
.map-address { padding: 20px 32px; font-size: 14px; color: var(--c-body); border-top: 1px solid var(--c-rule); }

/* ==========================================================================
   採用情報ページ
   ========================================================================== */
.experience-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.experience-card { background: var(--c-ice-bg); padding: 32px 28px; }
.experience-card__num { font-size: 26px; font-weight: 900; color: var(--c-ice); line-height: 1; margin-bottom: 16px; }
.experience-card p { margin: 0; font-size: 14.5px; line-height: 2; color: var(--c-body); }

@media (max-width: 900px) {
  .experience-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .experience-grid { grid-template-columns: 1fr; }
}

.match-list { background: #fff; border: 1px solid var(--c-rule-2); padding: 16px 48px; }
.match-row {
  display: grid; grid-template-columns: 24px 1fr; gap: 20px;
  padding: 22px 0; border-bottom: 1px solid var(--c-rule);
  font-size: 15px; line-height: 1.9; color: var(--c-body);
  align-items: baseline;
}
.match-row:last-child { border-bottom: none; }
.match-row span { color: var(--c-accent); font-weight: 900; }

@media (max-width: 560px) {
  .match-list { padding: 8px 20px; }
}

.job-list { display: flex; flex-direction: column; gap: 40px; }
.job-card { border: 1px solid var(--c-rule-2); }
.job-card__head {
  background: var(--c-navy); color: #fff; padding: 24px 40px;
  display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap;
}
.job-card__num { font-size: 12px; font-weight: 900; color: var(--c-ice); letter-spacing: .12em; }
.job-card__head h3 { margin: 0; font-size: 20px; font-weight: 900; }
.job-card__body { padding: 36px 40px; }
.job-card__intro { margin: 0 0 28px; font-size: 15px; line-height: 2; color: var(--c-body); font-weight: 500; }
.job-card__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.job-card__col-label {
  font-size: 12.5px; font-weight: 900; color: var(--c-accent); letter-spacing: .12em;
  border-bottom: 2px solid var(--c-ice-bg); padding-bottom: 10px; margin-bottom: 14px;
}
.job-card__col-body { font-size: 13.5px; line-height: 2.1; color: var(--c-body-2); }

@media (max-width: 900px) {
  .job-card__cols { grid-template-columns: 1fr; gap: 24px; }
  .job-card__head, .job-card__body { padding: 24px 24px; }
}

.recruit-conditions { background: #fff; border: 1px solid var(--c-rule-2); padding: 16px 48px; }

/* Block-editor styling for the recruit page content (core blocks) */
.entry-content .wp-block-group.is-style-cycnus-navy-band {
  background: var(--c-navy);
  color: #fff;
  padding: 24px 40px;
}
.entry-content .wp-block-group.is-style-cycnus-navy-band h3 { color: #fff; margin: 0; font-size: 20px; font-weight: 900; }
.entry-content .wp-block-group.is-style-cycnus-navy-band h3 span {
  color: var(--c-ice); font-size: 12px; font-weight: 900; letter-spacing: .12em; margin-right: 20px;
}
.entry-content .is-style-cycnus-job-card { border: 1px solid var(--c-rule-2); margin-bottom: 40px; }
/*
 * Gutenberg は layout:"constrained" のグループブロックを保存すると、子要素を
 * 直接ではなく <div class="wp-block-group__inner-container"> でもう1階層包んで
 * 出力する(WP 6.1以降の標準挙動)。そのため子孫セレクタは ">" (直下)を前提にせず、
 * 中間コンテナの有無どちらでも一致するよう空白(子孫)結合子で指定する。
 */
.entry-content .is-style-cycnus-job-card .wp-block-group.is-style-cycnus-navy-band { margin: 0; }
.entry-content .job-card-body { padding: 36px 40px; margin: 0; }
.entry-content .job-card-body > p,
.entry-content .job-card-body > .wp-block-group__inner-container > p {
  font-size: 15px; line-height: 2; color: var(--c-body); font-weight: 500; margin-bottom: 28px;
}
.entry-content .job-card-body .wp-block-columns { margin-bottom: 0; gap: 32px; }
@media (max-width: 900px) {
  .entry-content .job-card-body { padding: 24px; }
}
.entry-content .is-style-cycnus-col-label {
  font-size: 12.5px; font-weight: 900; color: var(--c-accent); letter-spacing: .12em;
  text-transform: none;
  border-bottom: 2px solid var(--c-ice-bg); padding-bottom: 10px; margin-bottom: 14px;
}
.entry-content .is-style-cycnus-col-body { font-size: 13.5px; line-height: 2.1; color: var(--c-body-2); }
.entry-content .is-style-cycnus-eyebrow { font-size: 12px; font-weight: 900; color: var(--c-accent); letter-spacing: .16em; display: block; margin-bottom: 8px; }

/*
 * 元デザインでは「英字ラベル + 見出し」は横並び(baseline揃え・gap 20px)。
 * 採用ページはこの2要素をflexレイアウトのグループブロックにまとめて再現する。
 * 上下の余白はこのグループ自体には持たせない(常に is-style-cycnus-content-band /
 * is-style-cycnus-ice-band の中に置き、そちらのpaddingで上下の間隔を作る)。
 */
.entry-content .wp-block-group.is-style-cycnus-eyebrow-heading {
  align-items: baseline;
  gap: 20px;
  margin: 0 0 48px;
  flex-wrap: wrap;
}
.entry-content .wp-block-group.is-style-cycnus-eyebrow-heading .is-style-cycnus-eyebrow {
  margin-bottom: 0;
  white-space: nowrap;
}
.entry-content .wp-block-group.is-style-cycnus-eyebrow-heading h2 { margin: 0; }
.entry-content .is-style-cycnus-lead-strong { font-size: 16px; font-weight: 700; color: var(--c-navy); line-height: 2.1; }

/*
 * 採用ページ冒頭のリード文2段落: 元デザインでは見出し「採用情報」と同じ
 * アイスブルー帯の中に中央揃えで入っている。編集可能な構造(entry-content)を
 * 保ったまま、この帯だけ.page-heroに続けてビューポート全幅で表示させる。
 * entry-content自体の上下paddingは採用ページでは0にしてあるので、
 * ここでは相殺用のマイナスマージンは不要(上余白は.page-hero側のH1の
 * margin-bottomのみで作る)。
 */
.entry-content .wp-block-group.is-style-cycnus-lead-band {
  background: var(--c-ice-bg);
  text-align: center;
  padding: 0 var(--gutter) 72px;
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  margin-bottom: 40px;
}
/*
 * 文言(リード文2段落)は44em幅・中央寄せ、直後に続く写真エリアは1120px幅で
 * それぞれ別の最大幅を持つ(元デザインどおり)。inner-containerには共通の
 * 幅を持たせず、pタグと写真グリッドそれぞれに個別に指定する。
 */
.entry-content .wp-block-group.is-style-cycnus-lead-band p {
  max-width: 44em;
  margin: 0 auto 16px;
  font-size: 15px;
  line-height: 2.2;
  color: var(--c-body-2);
}
.entry-content .wp-block-group.is-style-cycnus-lead-band p.is-style-cycnus-lead-strong {
  font-size: 16px; font-weight: 700; color: var(--c-navy); line-height: 2.1;
}

/* リード文直下の写真3枚(main 16:7 + sub1/sub2を縦2分割) */
.entry-content .wp-block-group.is-style-cycnus-lead-band .cycnus-lead-photos {
  max-width: 1120px;
  margin: 56px auto 0;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 16px;
  text-align: left;
}
.entry-content .wp-block-group.is-style-cycnus-lead-band .cycnus-lead-photo-main {
  aspect-ratio: 16 / 7;
  border: 1px solid var(--c-ice);
  margin: 0;
  overflow: hidden;
}
/*
 * 右側2枚(sub1/sub2)は「height:100%」でグリッド行の高さに追従させようとしたが、
 * ネストしたグリッドでは親の高さが不定(auto)のままだと%指定の高さが解決されず、
 * 画像本来の縦横比で伸びてしまう不具合が発生した(実機で確認済み)。
 * 高さをグリッドに委ねず、各画像に直接 aspect-ratio を指定する確実な方式に変更。
 * 2.4:1 は支給素材の実寸(1200×500)と合わせた値。
 */
.entry-content .wp-block-group.is-style-cycnus-lead-band .cycnus-lead-photo-subs {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.entry-content .wp-block-group.is-style-cycnus-lead-band .cycnus-lead-photo-subs .wp-block-image {
  aspect-ratio: 2.4 / 1;
  border: 1px solid var(--c-ice);
  margin: 0;
  overflow: hidden;
}
.entry-content .wp-block-group.is-style-cycnus-lead-band .cycnus-lead-photos img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
@media (max-width: 900px) {
  .entry-content .wp-block-group.is-style-cycnus-lead-band .cycnus-lead-photos {
    grid-template-columns: 1fr;
    margin-top: 40px;
  }
  .entry-content .wp-block-group.is-style-cycnus-lead-band .cycnus-lead-photo-main { aspect-ratio: 16 / 9; }
  .entry-content .wp-block-group.is-style-cycnus-lead-band .cycnus-lead-photo-subs {
    flex-direction: row;
  }
  .entry-content .wp-block-group.is-style-cycnus-lead-band .cycnus-lead-photo-subs .wp-block-image { aspect-ratio: 4/3; flex: 1; }
}

/* マッチする人材リスト直下の写真3枚(4:3) */
.entry-content .wp-block-group.is-style-cycnus-ice-band .cycnus-match-photos {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.entry-content .wp-block-group.is-style-cycnus-ice-band .cycnus-match-photos .wp-block-image {
  aspect-ratio: 4 / 3;
  border: 1px solid var(--c-ice);
  margin: 0;
  overflow: hidden;
}
.entry-content .wp-block-group.is-style-cycnus-ice-band .cycnus-match-photos img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
@media (max-width: 900px) {
  .entry-content .wp-block-group.is-style-cycnus-ice-band .cycnus-match-photos { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .entry-content .wp-block-group.is-style-cycnus-ice-band .cycnus-match-photos { grid-template-columns: 1fr; }
}

/* 募集要項の直後・応募方法の直前: 全幅2分割のチーム写真帯 */
.entry-content .wp-block-group.is-style-cycnus-photo-strip {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 360px;
}
.entry-content .wp-block-group.is-style-cycnus-photo-strip .wp-block-image {
  margin: 0;
  height: 360px;
  overflow: hidden;
}
.entry-content .wp-block-group.is-style-cycnus-photo-strip img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
@media (max-width: 900px) {
  .entry-content .wp-block-group.is-style-cycnus-photo-strip { grid-template-columns: 1fr; height: auto; }
  .entry-content .wp-block-group.is-style-cycnus-photo-strip .wp-block-image { height: 240px; }
}

/*
 * 元デザインの採用ページは「独立した帯(padding上下104px)が単純に連続する」構成。
 * 各帯は自分の上下paddingだけを持ち、隣同士で足し算になるのが元デザインどおりの
 * 正しい挙動(相殺・キャンセルは行わない)。中身の幅は元HTMLの数値をそのまま使う:
 * 得られる経験/マッチする人材/募集職種 = 1120px、募集要項 = 960px。
 *
 * is-style-cycnus-content-band: 白背景セクション用(色を付けない帯)
 * is-style-cycnus-ice-band: アイスブルー背景セクション用(ビューポート全幅)
 * どちらも直下の .wp-block-group__inner-container の幅を1120pxに中央寄せする。
 * 募集要項だけ .cycnus-narrow を追加して960pxにする。
 */
.entry-content .wp-block-group.is-style-cycnus-content-band {
  padding: var(--section-y-sub) var(--gutter);
}
.entry-content .wp-block-group.is-style-cycnus-content-band > .wp-block-group__inner-container {
  max-width: 1120px;
  margin: 0 auto;
}

.entry-content .wp-block-group.is-style-cycnus-ice-band {
  background: var(--c-ice-bg);
  padding: var(--section-y-sub) var(--gutter);
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}
.entry-content .wp-block-group.is-style-cycnus-ice-band > .wp-block-group__inner-container {
  max-width: 1120px;
  margin: 0 auto;
}
.entry-content .wp-block-group.is-style-cycnus-ice-band.cycnus-narrow > .wp-block-group__inner-container {
  max-width: 960px;
}

.entry-content .wp-block-group.is-style-cycnus-cta-band {
  background: var(--c-navy);
  color: #fff;
  padding: 88px var(--gutter);
  text-align: center;
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  margin-top: 0;
}
.entry-content .wp-block-group.is-style-cycnus-cta-band p { color: var(--c-ice); font-size: 15px; line-height: 2.1; max-width: 42em; margin: 0 auto 32px; }
.entry-content .wp-block-group.is-style-cycnus-cta-band .wp-block-button__link {
  background: var(--c-accent); color: #fff; font-weight: 900; padding: 18px 52px; letter-spacing: .04em;
  border-radius: 0;
}
.entry-content .wp-block-group.is-style-cycnus-cta-band .wp-block-button__link:hover { background: var(--c-accent-hover); }

/*
 * layout:"constrained" のグループブロックは子要素を .wp-block-group__inner-container で
 * もう1階層包んで出力する(実機で検証済み)。グリッド化は実際にカードを直接内包している
 * inner-container 側だけに適用すること。外側の .is-style-cycnus-grid-3 自体にも
 * display:grid を当てると、inner-container(=外側グリッドの唯一の子)の内部で
 * さらに3分割が起きて二重にネストしてしまう(3×3の入れ子グリッドになり文字が
 * 1文字ずつ縦積みになる不具合が発生した)ため、絶対に両方へ同時適用しないこと。
 */
.entry-content .wp-block-group.is-style-cycnus-grid-3 > .wp-block-group__inner-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.entry-content .wp-block-group.is-style-cycnus-grid-3 .wp-block-group__inner-container > .wp-block-group {
  background: var(--c-ice-bg);
  padding: 32px 28px;
}
.entry-content .wp-block-group.is-style-cycnus-grid-3 .wp-block-group p { margin: 0; font-size: 14.5px; line-height: 2; color: var(--c-body); }
/*
 * 前段の「.wp-block-group p」ルールは詳細度(0,4,1)で、同じクラス数の
 * 「.cycnus-card-num」だけの指定(0,4,0)より強いため上書きされてしまう。
 * pタグを明示して詳細度を揃え、CSSソース順(こちらが後)で確実に勝たせる。
 */
.entry-content .wp-block-group.is-style-cycnus-grid-3 p.cycnus-card-num {
  font-size: 26px; font-weight: 900; color: var(--c-ice); line-height: 1; margin: 0 0 16px;
}

@media (max-width: 900px) {
  .entry-content .wp-block-group.is-style-cycnus-grid-3 > .wp-block-group__inner-container {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 560px) {
  .entry-content .wp-block-group.is-style-cycnus-grid-3 > .wp-block-group__inner-container {
    grid-template-columns: 1fr;
  }
}

/* Generic typography for editable page content (採用情報 等) */
.entry-content {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: var(--section-y-sub) var(--gutter);
  font-size: 15px;
  line-height: 2;
  color: var(--c-body);
}
.entry-content > *:first-child { margin-top: 0; }
/*
 * 採用ページは、各セクション(is-style-cycnus-content-band / is-style-cycnus-ice-band /
 * is-style-cycnus-lead-band / is-style-cycnus-cta-band)がそれぞれ元デザインの
 * 帯そのものとして独立して余白・幅・背景色を持つ構成。entry-content自体は
 * 何も持たない素のラッパーにする(padding・max-widthを両方外す)。
 */
body.is-recruit-page .entry-content { padding: 0; max-width: none; }
.entry-content h2 {
  font-size: 30px; font-weight: 900; letter-spacing: .02em; color: var(--c-navy);
  margin: 72px 0 32px;
}
.entry-content h2:first-child { margin-top: 0; }
.entry-content h3 { font-size: 19px; font-weight: 900; color: var(--c-navy); margin: 0; }
.entry-content p { margin: 0 0 1.6em; }
.entry-content ul {
  list-style: none;
  padding: 0;
  margin: 0 0 1.6em;
  background: #fff;
  border: 1px solid var(--c-rule-2);
}
.entry-content ul li {
  position: relative;
  padding: 22px 24px 22px 44px;
  border-bottom: 1px solid var(--c-rule);
  font-size: 15px; line-height: 1.9; color: var(--c-body);
}
.entry-content ul li:last-child { border-bottom: none; }
.entry-content ul li::before { content: "—"; position: absolute; left: 20px; color: var(--c-accent); font-weight: 900; }

.entry-content table { width: 100%; border-collapse: collapse; margin: 0 0 1.6em; }
.entry-content table td, .entry-content table th {
  border: 1px solid var(--c-rule); padding: 20px 24px; font-size: 14.5px; line-height: 1.9;
  text-align: left; vertical-align: top; color: var(--c-body);
}
.entry-content table td:first-child, .entry-content table th {
  background: var(--c-ice-bg); font-weight: 700; color: var(--c-navy); width: 200px;
}

@media (max-width: 700px) {
  .entry-content table, .entry-content table tbody, .entry-content table tr, .entry-content table td {
    display: block; width: auto;
  }
  .entry-content table td { border-bottom: none; }
  .entry-content table tr { border: 1px solid var(--c-rule); margin-bottom: 12px; }
  .entry-content table td:first-child { width: auto; }
}

/* ==========================================================================
   お問い合わせページ / フォーム
   ========================================================================== */
.contact-form { display: flex; flex-direction: column; gap: 36px; }
.form-field { display: flex; flex-direction: column; gap: 12px; }
.form-field label { font-size: 14px; font-weight: 700; }
.required-badge { color: var(--c-accent); font-size: 12px; font-weight: 900; }
.form-field input,
.form-field select,
.form-field textarea {
  border: 1px solid var(--c-ice);
  padding: 16px 18px;
  font-size: 15px;
  font-family: var(--font-jp);
  color: var(--c-navy);
  background: #fff;
  width: 100%;
}
.form-field textarea { line-height: 1.9; resize: vertical; }
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.form-submit { text-align: center; margin-top: 12px; }
.form-honeypot { position: absolute; left: -9999px; top: -9999px; }

.form-notice {
  padding: 20px 24px;
  margin-bottom: 36px;
  font-size: 14.5px;
  line-height: 1.9;
}
.form-notice--success { background: var(--c-ice-bg); color: var(--c-navy); border: 1px solid var(--c-ice); }
.form-notice--error { background: #FBEAE5; color: #8A3B1F; border: 1px solid #E8833A; }
.form-notice--error ul { margin: 8px 0 0; padding-left: 1.2em; list-style: disc; }

@media (max-width: 700px) {
  .form-row-2 { grid-template-columns: 1fr; gap: 20px; }
}

/* ==========================================================================
   News (index / single)
   ========================================================================== */
.news-list { display: flex; flex-direction: column; gap: 0; max-width: var(--content-width-narrow); margin: 0 auto; }
.news-item { padding: 32px 0; border-bottom: 1px solid var(--c-rule); }
.news-item__date { font-size: 13px; color: var(--c-muted); margin-bottom: 8px; }
.news-item__title { font-size: 19px; font-weight: 900; margin-bottom: 12px; }
.news-item__title a { color: var(--c-navy); }
.news-item__title a:hover { color: var(--c-accent); }
.news-item__excerpt { font-size: 14.5px; line-height: 2; color: var(--c-body); }
.news-empty { text-align: center; font-size: 15px; color: var(--c-body-2); padding: 48px 0; }

.pagination { display: flex; gap: 12px; justify-content: center; margin-top: 48px; max-width: var(--content-width-narrow); }
.pagination a, .pagination span {
  border: 1px solid var(--c-ice); padding: 10px 18px; font-size: 14px; font-weight: 700; color: var(--c-navy);
}
.pagination .current { background: var(--c-navy); color: #fff; border-color: var(--c-navy); }

.single-article { max-width: var(--content-width-form); margin: 0 auto; }
.single-article__meta { font-size: 13px; color: var(--c-muted); margin-bottom: 16px; }
.single-article__title { font-size: 34px; font-weight: 900; line-height: 1.4; margin-bottom: 40px; }
.single-article__body { font-size: 15.5px; line-height: 2.2; color: var(--c-body); }
.single-article__body p { margin: 0 0 1.6em; }
.single-article__body img { margin: 1.6em 0; }
.single-article__body h2 { font-size: 24px; font-weight: 900; margin: 2em 0 0.8em; }
.single-article__body h3 { font-size: 19px; font-weight: 900; margin: 1.8em 0 0.7em; }
.single-article__body a { color: var(--c-navy-hover); text-decoration: underline; }
.single-back { display: block; margin-top: 56px; }

.not-found { text-align: center; padding: 40px 0; }
.not-found h1 { font-size: 34px; font-weight: 900; margin-bottom: 24px; }
.not-found p { font-size: 15px; color: var(--c-body-2); margin-bottom: 32px; }