@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/* ==========================================================================
   SHIEN PROFESSIONAL DESIGN SYSTEM
   経営基盤支援センター株式会社
   ==========================================================================

   ■ファイル構造（編集前に必ず該当セクションを特定すること）
     0.  CSS Custom Properties      — デザイントークン（色・影・最大幅）
     1.  Base / Reset                — body / html / 基本要素
     2.  Cocoon Full-Width Overrides — 親テーマの幅制約解除
     3.  Header (Fixed, Frosted Glass) — PC グローバルヘッダー
     4.  Mobile Header & Menu        — モバイル用ヘッダー
     5.  Typography Utilities        — .sc-heading / .sc-body-text 等
     6.  Section Layout              — 汎用セクションコンテナ
     7.  Hero Sections               — 旧ヒーロー（ページ別に残存）
     7b. Unified Subpage Hero        — ★全サブページ共通ヒーロー（Task①）
     8.  Cards                       — カード UI
     9.  Buttons                     — ボタン
     10. Tables                      — 料金表・比較表
     11. Forms                       — お問合せフォーム
     12. FAQ Accordion
     13. Custom SVG Icon Classes
     13b.Image Utilities              — 画像幅の安全網
     14. Scroll Animations
     15. dc- Section Compat (TOP)
     16. sc- Subpage Layout
     17. Page-specific: Hide Titles
     18. Page-specific: TOP Page
     19. Footer
     20. Responsive Overrides        — 全体寄りのレスポンシブ調整
     22. Minimal Safety Patch        — ★折返し・オーバーフロー防止（根治済）
     21. Print Styles

   ■ブレークポイント規約
     1023px → タブレット以下
     767px  → スマホ以下
     480px  → 旧スマホ（最小限の微調整のみ）
     430px  → iPhone（各ページ個別スタイル側で扱う）

   ■編集ルール（過去のバグ再発防止）
     1. 新しいスタイルを足す前に既存セクションを Grep して競合を必ず確認
     2. !important は極力使わず specificity（body[class*="page-id-NNN"] など）
        で解決する。7b 節のヒーロー統一が成功例
     3. `*` グローバルセレクタ禁止（ページ別スタイルは .sc-pricing-page * の
        ようにページルート配下にスコープすること）
     4. keep-all は採用しない。日本語折返しは `word-break: normal;
        overflow-wrap: break-word;` を基本とする
     5. ページ特有の固定値（max-width: 920px 等）はページ側 inline <style> で
        保持し、共通 style.css に汚染させない
     6. 同一クラス名の重複定義禁止。`.sc-case-card-img` は section 13b で
        コメントのみ残し、実体はページ側に寄せる（過去の競合根本原因）

   ========================================================================== */

/* --------------------------------------------------------------------------
   0. CSS Custom Properties
   -------------------------------------------------------------------------- */
:root {
  --sc-navy: #0c2340;
  --sc-teal: #1a6b5c;
  --sc-copper: #b87333;
  --sc-copper-dark: #9e6029;
  --sc-cream: #f5f0e8;
  --sc-offwhite: #fafaf5;
  --sc-charcoal: #2c2c2c;
  --sc-gray: #5a5a5a;
  --sc-border: #ddd5c8;
  --sc-warm-light: #efe9dd;
  --sc-radius-card: 10px;
  --sc-radius-btn: 6px;
  --sc-shadow: 0 2px 12px rgba(0,0,0,0.06);
  --sc-shadow-hover: 0 4px 20px rgba(0,0,0,0.10);
  --sc-max-w: 1100px;
  --sc-header-h: 70px;
}

/* --------------------------------------------------------------------------
   1. Base / Reset
   -------------------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
}
body {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  font-weight: 400;
  color: var(--sc-charcoal);
  background-color: var(--sc-cream);
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  padding-top: var(--sc-header-h);
  font-size: 17px;
}
h1, h2, h3, h4, h5, h6 {
  font-family: "Noto Serif JP", "Yu Mincho", serif;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.4;
  color: var(--sc-navy);
}
img {
  max-width: 100%;
  height: auto;
}
a {
  color: var(--sc-teal);
  text-decoration: none;
  transition: color 0.25s ease;
}
a:hover {
  color: var(--sc-copper);
}

/* --------------------------------------------------------------------------
   2. Cocoon Full-Width Overrides
   -------------------------------------------------------------------------- */
#container,
#content,
#content-in,
.main,
#main {
  max-width: 100% !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.article,
.entry-content {
  max-width: 100% !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.wrap {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* Remove Cocoon default h2 styling */
.article h2 {
  background: none !important;
  background-color: transparent !important;
  padding: 0 !important;
  border: none !important;
}

/* --------------------------------------------------------------------------
   3. Header (Fixed, Frosted Glass)
   -------------------------------------------------------------------------- */
#header-container {
  background: rgba(12, 35, 64, 0.85) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.3) !important;
  backdrop-filter: blur(16px) saturate(1.3) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9999 !important;
  transition: background 0.35s ease, box-shadow 0.35s ease !important;
  box-shadow: none !important;
}
#header-container.scrolled {
  background: rgba(12, 35, 64, 0.95) !important;
  box-shadow: 0 2px 16px rgba(0,0,0,0.18) !important;
}
#header {
  background: transparent !important;
}
.header-container, .header {
  background: transparent !important;
  box-shadow: none !important;
}
.header-container-in, #navi, .navi-in {
  background: transparent !important;
}
.header .logo-text, .header .site-name-text {
  color: #fff !important;
}
.header .logo-header img {
  filter: brightness(0) invert(1);
}
/* Admin bar fix */
body.admin-bar #header-container {
  top: 32px !important;
}
@media screen and (max-width: 782px) {
  body.admin-bar #header-container {
    top: 46px !important;
  }
}

/* Navigation */
#navi .navi-in a {
  color: rgba(255,255,255,0.85) !important;
  font-weight: 500;
  font-size: 13px;
  padding: 10px 12px;
  transition: color 0.25s ease, background 0.25s ease;
  border-radius: var(--sc-radius-btn);
  margin: 2px 1px;
  white-space: nowrap;
}
.navi-in > ul {
  flex-wrap: nowrap !important;
  justify-content: flex-end !important;
}
.navi-in > ul > li {
  width: auto !important;
  flex-shrink: 1 !important;
}
#navi .navi-in a:hover {
  color: #fff !important;
  background: rgba(255,255,255,0.10) !important;
}
/* Sub-menu */
#navi .sub-menu {
  background: var(--sc-navy) !important;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}
#navi .sub-menu a {
  color: rgba(255,255,255,0.8) !important;
}
#navi .sub-menu a:hover {
  background: rgba(26,107,92,0.3) !important;
  color: #fff !important;
}

/* --------------------------------------------------------------------------
   4. Mobile Header & Menu
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1023px) {
  :root {
    --sc-header-h: 60px;
  }
  #navi {
    display: none !important;
  }
  /* Hamburger button in header */
  .mobile-menu-buttons {
    position: fixed !important;
    top: 10px !important;
    right: 12px !important;
    left: auto !important;
    bottom: auto !important;
    width: auto !important;
    background: none !important;
    box-shadow: none !important;
    border: none !important;
    z-index: 99999 !important;
    display: flex !important;
    gap: 8px !important;
    padding: 0 !important;
  }
  .mobile-menu-buttons .menu-button {
    background: rgba(12, 35, 64, 0.85) !important;
    color: #fff !important;
    border-radius: 50% !important;
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    font-size: 0 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    min-height: auto !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
  }
  .mobile-menu-buttons .menu-button:before {
    font-size: 20px !important;
    margin: 0 !important;
    color: #fff !important;
  }
  .mobile-menu-buttons .menu-button .menu-caption,
  .mobile-menu-buttons .menu-button span:not(:first-child) {
    display: none !important;
  }
  /* Drawer */
  .menu-drawer {
    background: var(--sc-navy) !important;
    top: 0 !important;
    padding-top: 0 !important;
  }
  .menu-drawer a {
    color: rgba(255,255,255,0.85) !important;
    padding: 12px 20px !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    font-size: 14px;
  }
  .menu-drawer a:hover {
    background: rgba(26,107,92,0.2) !important;
  }
  .header-container-in {
    padding: 8px 12px !important;
  }
  .logo-header img {
    max-height: 36px !important;
  }
}

@media screen and (max-width: 480px) {
  .mobile-menu-buttons .menu-button {
    width: 40px !important;
    height: 40px !important;
  }
  .mobile-menu-buttons .menu-button:before {
    font-size: 18px !important;
  }
  .header-container-in {
    padding: 6px 10px !important;
  }
}


/* --------------------------------------------------------------------------
   5. Typography Utilities
   -------------------------------------------------------------------------- */
.sc-heading-serif {
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.sc-text-navy { color: var(--sc-navy); }
.sc-text-teal { color: var(--sc-teal); }
.sc-text-copper { color: var(--sc-copper); }
.sc-text-gray { color: var(--sc-gray); }
.sc-text-white { color: #fff; }
.sc-text-center { text-align: center; }
.sc-text-sm { font-size: 15px; }
.sc-text-lg { font-size: 20px; }


/* --------------------------------------------------------------------------
   6. Section Layout
   -------------------------------------------------------------------------- */
.sc-section {
  padding: 64px 20px;
  position: relative;
}
.sc-section-inner {
  max-width: var(--sc-max-w);
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
.sc-bg-cream { background-color: var(--sc-cream); }
.sc-bg-white { background-color: var(--sc-offwhite); }
.sc-bg-warm { background-color: var(--sc-warm-light); }
.sc-bg-navy {
  background-color: var(--sc-navy);
  color: #fff;
}
.sc-bg-navy h2, .sc-bg-navy h3, .sc-bg-navy p, .sc-bg-navy span, .sc-bg-navy a {
  color: #fff;
}
.sc-bg-teal {
  background-color: var(--sc-teal);
  color: #fff;
}
.sc-bg-teal h2, .sc-bg-teal h3, .sc-bg-teal p {
  color: #fff;
}

/* Section label (English small caps above title) */
.sc-section-label {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--sc-teal);
  margin-bottom: 8px;
  display: block;
}
.sc-bg-navy .sc-section-label,
.sc-bg-teal .sc-section-label {
  color: var(--sc-copper);
}
/* Section title */
.sc-section-title {
  font-size: 34px;
  margin-bottom: 16px;
}
/* Section subtitle */
.sc-section-subtitle {
  font-size: 17px;
  color: var(--sc-gray);
  line-height: 1.9;
  max-width: 720px;
}
/* Section divider (thin copper line) */
.sc-section-divider {
  width: 48px;
  height: 2px;
  background: var(--sc-copper);
  border: none;
  margin: 20px 0 32px;
}
.sc-text-center .sc-section-divider,
.sc-section-divider.sc-center {
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 768px) {
  .sc-section-title {
    font-size: 40px;
  }
}

/* Alternating section backgrounds */
.sc-section:nth-child(even) {
  background-color: var(--sc-warm-light);
}


/* --------------------------------------------------------------------------
   7. Hero Sections
   -------------------------------------------------------------------------- */
/* --- TOP page hero (video) --- */
.dc-hero-video-wrap {
  position: relative !important;
  width: 100% !important;
  min-height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}
.dc-hero-video-wrap video {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  min-width: 100% !important;
  min-height: 100% !important;
  object-fit: cover !important;
}
.dc-hero-video-overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
}

/* --- Subpage hero --- */
.sc-hero {
  background-color: var(--sc-navy);
  /* Subtle geometric pattern overlay */
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0L60 30L30 60L0 30z' fill='none' stroke='rgba(255,255,255,0.035)' stroke-width='0.5'/%3E%3C/svg%3E");
  background-size: 60px 60px;
  color: #fff;
  padding: 80px 20px 48px;
  position: relative;
  border-radius: 0 !important;
}
.sc-hero .sc-hero-inner {
  max-width: var(--sc-max-w);
  margin: 0 auto;
}
.sc-hero h1 {
  color: #fff;
  font-size: 36px;
  margin-bottom: 12px;
}
.sc-hero .sc-hero-sub {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
}
.sc-hero .sc-hero-lead {
  font-size: 16px;
  color: rgba(255,255,255,0.8);
  line-height: 1.9;
  margin-top: 20px;
  max-width: 640px;
}
@media (min-width: 768px) {
  .sc-hero {
    padding: 100px 40px 56px;
  }
  .sc-hero h1 {
    font-size: 44px;
  }
}


/* --------------------------------------------------------------------------
   7b. Unified Subpage Hero
   All subpages (services/pricing/cases/about/news/contact/recruit) share
   identical hero dimensions, colours, and typography.
   Specificity (0,2,2) via body[class*="page-id-NNN"] > hero-class intentionally
   beats each page's inline <style> rule (0,1,1) WITHOUT needing !important.
   -------------------------------------------------------------------------- */
body[class*="page-id-267"] .sc-svc-hero,
body[class*="page-id-484"] .sc-pr-hero,
body[class*="page-id-247"] .sc-cases-hero,
body[class*="page-id-259"] .sc-about-hero,
body[class*="page-id-79"]  .sc-contact-hero,
body[class*="page-id-238"] .sc-hero,
body[class*="page-id-423"] .rc-hero {
  background: #0c2340;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0L60 30L30 60L0 30z' fill='none' stroke='rgba(255,255,255,0.04)' stroke-width='0.5'/%3E%3C/svg%3E");
  background-size: 60px 60px;
  color: #fff;
  padding: 80px 40px 70px;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  text-align: left;
}
/* Hero inner wrapper */
body[class*="page-id-267"] .sc-svc-hero-inner,
body[class*="page-id-484"] .sc-pr-hero-inner,
body[class*="page-id-247"] .sc-cases-hero-inner,
body[class*="page-id-259"] .sc-about-hero-inner,
body[class*="page-id-79"]  .sc-contact-hero-inner,
body[class*="page-id-238"] .sc-hero > *,
body[class*="page-id-423"] .rc-hero > * {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  z-index: 1;
}
/* Hero H1 */
body[class*="page-id-267"] .sc-svc-hero h1,
body[class*="page-id-484"] .sc-pr-hero h1,
body[class*="page-id-247"] .sc-cases-hero h1,
body[class*="page-id-259"] .sc-about-hero h1,
body[class*="page-id-79"]  .sc-contact-hero h1,
body[class*="page-id-238"] .sc-hero .sc-hero-title,
body[class*="page-id-238"] .sc-hero h1,
body[class*="page-id-423"] .rc-hero .rc-hero-title,
body[class*="page-id-423"] .rc-hero h1 {
  font-family: "Noto Serif JP", serif;
  font-size: 42px;
  color: #fff;
  /* Longhand margins so the > * auto-centering (for news/recruit direct
     children) is NOT wiped out. Shorthand "margin: 0 0 10px" would reset
     margin-left/right to 0 and kill centering on .sc-hero/.rc-hero. */
  margin-top: 0;
  margin-bottom: 10px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.02em;
}
/* Hero label (CONTACT / ABOUT US / CASE STUDIES / etc.) */
body[class*="page-id-267"] .sc-svc-hero-label,
body[class*="page-id-267"] .sc-svc-hero .sc-label,
body[class*="page-id-484"] .sc-pr-hero-label,
body[class*="page-id-484"] .sc-pr-hero .sc-label,
body[class*="page-id-247"] .sc-cases-hero .sc-label,
body[class*="page-id-259"] .sc-about-hero .sc-label,
body[class*="page-id-79"]  .sc-contact-hero .sc-label,
body[class*="page-id-423"] .rc-hero .rc-hero-label {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: #b87333;
  /* Longhand — preserves auto-centering on recruit direct-child label */
  margin-top: 0;
  margin-bottom: 16px;
  display: block;
  text-transform: uppercase;
}
/* Hero subtitle */
body[class*="page-id-247"] .sc-cases-hero .sc-subtitle,
body[class*="page-id-259"] .sc-about-hero .sc-subtitle,
body[class*="page-id-79"]  .sc-contact-hero .sc-subtitle,
body[class*="page-id-267"] .sc-svc-hero p,
body[class*="page-id-484"] .sc-pr-hero p,
body[class*="page-id-238"] .sc-hero .sc-hero-subtitle,
body[class*="page-id-423"] .rc-hero .rc-hero-subtitle {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 15px;
  color: rgba(255,255,255,0.65);
  letter-spacing: 0.04em;
  line-height: 1.8;
  /* Longhand — preserves auto-centering on news/recruit direct-child subtitle */
  margin-top: 0;
  margin-bottom: 0;
  max-width: 640px;
}
/* News/recruit: subtitle is a direct child of the hero (no inner wrapper),
   so its 640px max-width would center a narrower block and break visual
   alignment with the 900px-wide h1. Expand to 900px so both share the
   same left edge — equivalent to how services/cases/etc. lay out inside
   their 900px inner wrappers. */
body[class*="page-id-238"] .sc-hero .sc-hero-subtitle,
body[class*="page-id-423"] .rc-hero .rc-hero-subtitle {
  max-width: 900px;
}
/* Tablet */
@media (max-width: 1023px) {
  body[class*="page-id-267"] .sc-svc-hero,
  body[class*="page-id-484"] .sc-pr-hero,
  body[class*="page-id-247"] .sc-cases-hero,
  body[class*="page-id-259"] .sc-about-hero,
  body[class*="page-id-79"]  .sc-contact-hero,
  body[class*="page-id-238"] .sc-hero,
  body[class*="page-id-423"] .rc-hero {
    padding: 64px 28px 54px;
  }
  body[class*="page-id-267"] .sc-svc-hero h1,
  body[class*="page-id-484"] .sc-pr-hero h1,
  body[class*="page-id-247"] .sc-cases-hero h1,
  body[class*="page-id-259"] .sc-about-hero h1,
  body[class*="page-id-79"]  .sc-contact-hero h1,
  body[class*="page-id-238"] .sc-hero h1,
  body[class*="page-id-238"] .sc-hero .sc-hero-title,
  body[class*="page-id-423"] .rc-hero h1,
  body[class*="page-id-423"] .rc-hero .rc-hero-title {
    font-size: 34px;
  }
}
/* Mobile */
@media (max-width: 767px) {
  body[class*="page-id-267"] .sc-svc-hero,
  body[class*="page-id-484"] .sc-pr-hero,
  body[class*="page-id-247"] .sc-cases-hero,
  body[class*="page-id-259"] .sc-about-hero,
  body[class*="page-id-79"]  .sc-contact-hero,
  body[class*="page-id-238"] .sc-hero,
  body[class*="page-id-423"] .rc-hero {
    padding: 50px 20px 44px;
  }
  body[class*="page-id-267"] .sc-svc-hero h1,
  body[class*="page-id-484"] .sc-pr-hero h1,
  body[class*="page-id-247"] .sc-cases-hero h1,
  body[class*="page-id-259"] .sc-about-hero h1,
  body[class*="page-id-79"]  .sc-contact-hero h1,
  body[class*="page-id-238"] .sc-hero h1,
  body[class*="page-id-238"] .sc-hero .sc-hero-title,
  body[class*="page-id-423"] .rc-hero h1,
  body[class*="page-id-423"] .rc-hero .rc-hero-title {
    font-size: 28px;
  }
}


/* --------------------------------------------------------------------------
   8. Cards
   -------------------------------------------------------------------------- */
.sc-card {
  background: var(--sc-offwhite);
  border: 1px solid var(--sc-border);
  border-left: 3px solid var(--sc-teal);
  border-radius: var(--sc-radius-card);
  box-shadow: var(--sc-shadow);
  padding: 1.4em 1.6em;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.sc-card:hover {
  box-shadow: var(--sc-shadow-hover);
  transform: translateY(-2px);
}
.sc-card-copper {
  border-left-color: var(--sc-copper);
}
.sc-card h3 {
  font-size: 22px;
  margin-bottom: 10px;
}
.sc-card p {
  color: var(--sc-gray);
  font-size: 16px;
}

/* Grid layouts */
.sc-grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
.sc-grid-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 768px) {
  .sc-grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .sc-grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --- Existing dc- card classes (TOP page compat) --- */
.dc-service-card {
  background: var(--sc-offwhite);
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius-card);
  box-shadow: var(--sc-shadow);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  overflow: hidden;
}
.dc-service-card:hover {
  box-shadow: var(--sc-shadow-hover);
  transform: translateY(-2px);
}

/* Common card style for subpages */
.sc-common-card,
.sc-summary-card,
.sc-merit-card,
.sc-feature-card,
.sc-job-card {
  background: var(--sc-offwhite);
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius-card);
  box-shadow: var(--sc-shadow);
  padding: 1.4em 1.6em;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.sc-common-card:hover,
.sc-summary-card:hover,
.sc-merit-card:hover,
.sc-feature-card:hover,
.sc-job-card:hover {
  box-shadow: var(--sc-shadow-hover);
  transform: translateY(-2px);
}

.sc-detail-block {
  background: var(--sc-offwhite);
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius-card);
  padding: 1.4em 1.6em;
}
.sc-section-lead {
  background: var(--sc-offwhite);
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius-card);
  padding: 1.3em 1.6em;
  font-size: 17px;
  line-height: 1.9;
}
.sc-mission-card {
  background: var(--sc-offwhite);
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius-card);
  padding: 1.6em 2em;
  box-shadow: var(--sc-shadow);
}


/* --------------------------------------------------------------------------
   9. Buttons
   -------------------------------------------------------------------------- */
.sc-btn {
  display: inline-block;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 15px;
  padding: 0.8em 2em;
  border-radius: var(--sc-radius-btn);
  cursor: pointer;
  transition: background 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
  text-align: center;
  text-decoration: none;
  line-height: 1.5;
  border: none;
}
.sc-btn-primary {
  background: var(--sc-copper);
  color: #fff;
  box-shadow: 0 2px 8px rgba(184,115,51,0.25);
}
.sc-btn-primary:hover {
  background: var(--sc-copper-dark);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(184,115,51,0.35);
}
.sc-btn-secondary {
  background: transparent;
  color: var(--sc-navy);
  border: 2px solid var(--sc-navy);
}
.sc-btn-secondary:hover {
  background: var(--sc-navy);
  color: #fff;
  transform: translateY(-1px);
}
.sc-btn-white {
  background: #fff;
  color: var(--sc-navy);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.sc-btn-white:hover {
  background: var(--sc-cream);
  color: var(--sc-navy);
  transform: translateY(-1px);
}

/* Existing dc- button compat */
.dc-btn-primary {
  background: var(--sc-copper) !important;
  color: #fff !important;
  border-radius: var(--sc-radius-btn) !important;
  box-shadow: 0 2px 8px rgba(184,115,51,0.25) !important;
}
.dc-btn-primary:hover {
  background: var(--sc-copper-dark) !important;
  box-shadow: 0 4px 12px rgba(184,115,51,0.35) !important;
}
.dc-cta-btn {
  border-radius: var(--sc-radius-btn) !important;
}

/* CTA Section */
.sc-cta {
  background-color: var(--sc-navy);
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0L60 30L30 60L0 30z' fill='none' stroke='rgba(255,255,255,0.03)' stroke-width='0.5'/%3E%3C/svg%3E");
  background-size: 60px 60px;
  color: #fff;
  padding: 60px 20px;
  text-align: center;
  border-radius: 0 !important;
}
.sc-cta h2, .sc-cta p, .sc-cta a { color: #fff; }

/* Existing dc- CTA compat */
.dc-cta-section {
  background-color: var(--sc-navy) !important;
  color: #fff !important;
}
.dc-cta-section h2,
.dc-cta-section p,
.dc-cta-section span,
.dc-cta-section a,
.dc-cta-section div {
  color: #fff !important;
}
.dc-cta-overlay {
  background: linear-gradient(135deg, rgba(12,35,64,0.95), rgba(26,107,92,0.85)) !important;
}


/* --------------------------------------------------------------------------
   10. Tables
   -------------------------------------------------------------------------- */
.sc-info-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--sc-offwhite);
  border-radius: var(--sc-radius-card);
  overflow: hidden;
  box-shadow: var(--sc-shadow);
}
.sc-info-table th,
.sc-info-table td {
  padding: 1em 1.4em;
  text-align: left;
  border-bottom: 1px solid var(--sc-border);
  font-size: 15px;
  line-height: 1.8;
}
.sc-info-table th {
  background: var(--sc-warm-light);
  font-weight: 700;
  color: var(--sc-navy);
  width: 30%;
  white-space: nowrap;
}
.sc-info-table tr:last-child th,
.sc-info-table tr:last-child td {
  border-bottom: none;
}

/* dc- company table compat */
.dc-company-table {
  width: 100%;
  border-collapse: collapse;
}
.dc-company-table th,
.dc-company-table td {
  padding: 14px 20px;
  border-bottom: 1px solid var(--sc-border);
  font-size: 15px;
}
.dc-company-table th {
  font-weight: 700;
  color: var(--sc-navy);
}


/* --------------------------------------------------------------------------
   11. Forms
   -------------------------------------------------------------------------- */
.sc-page input[type="text"],
.sc-page input[type="email"],
.sc-page input[type="tel"],
.sc-page input[type="number"],
.sc-page textarea,
.sc-page select {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 15px;
  padding: 0.75em 1em;
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius-btn);
  background: #fff;
  color: var(--sc-charcoal);
  transition: border-color 0.25s ease;
  width: 100%;
}
.sc-page input:focus,
.sc-page textarea:focus,
.sc-page select:focus {
  border-color: var(--sc-teal);
  outline: none;
  box-shadow: 0 0 0 3px rgba(26,107,92,0.1);
}
.wpcf7-form-control-wrap {
  display: block;
  margin-bottom: 16px;
}
.wpcf7 input[type="submit"] {
  background: var(--sc-copper);
  color: #fff;
  border: none;
  border-radius: var(--sc-radius-btn);
  padding: 0.85em 2.5em;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.2s ease;
}
.wpcf7 input[type="submit"]:hover {
  background: var(--sc-copper-dark);
  transform: translateY(-1px);
}


/* --------------------------------------------------------------------------
   12. FAQ Accordion
   -------------------------------------------------------------------------- */
.sc-faq-item {
  border-left: 3px solid #1a6b5c;
  margin-bottom: 16px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 6px rgba(0,0,0,0.04);
  overflow: hidden;
}
.sc-faq-question {
  padding: 1.2em 1.5em;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background 0.2s ease;
}
.sc-faq-question:hover {
  background: var(--sc-warm-light);
}
.sc-faq-question::after {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--sc-gray);
  border-bottom: 2px solid var(--sc-gray);
  transform: rotate(45deg);
  transition: transform 0.3s ease;
  flex-shrink: 0;
  margin-left: 16px;
}
.sc-faq-item.open .sc-faq-question::after {
  transform: rotate(-135deg);
}
.sc-faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.3s ease;
  padding: 0 1.5em;
}
.sc-faq-item.open .sc-faq-answer {
  max-height: 600px;
  padding: 0 1.5em 1.3em;
}
.sc-faq-q-text {
  font-size: 18px;
}
.sc-faq-a-inner {
  font-size: 16px;
}


/* --------------------------------------------------------------------------
   13. Custom SVG Icon Classes
   -------------------------------------------------------------------------- */
[class*="sc-icon-"]::before {
  content: "";
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  vertical-align: -0.2em;
  margin-right: 0.4em;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* --- Redesigned Business SVG Icons --- */
.sc-icon-handshake::before {
  content: '';
  display: inline-block;
  width: 48px;
  height: 48px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 28l6-8 5 2 5-5 4 1 5-4 6 3 5 8'/%3E%3Cpath d='M17 22l3 4 6-2 4 3'/%3E%3Cpath d='M6 28c0 2 3 5 5 5s4-1 5-2l3-3'/%3E%3Cpath d='M42 28c0 2-3 5-5 5s-4-1-5-2l-3-3'/%3E%3Cpath d='M11 20v-6a2 2 0 012-2h5'/%3E%3Cpath d='M37 20v-6a2 2 0 00-2-2h-5'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

.sc-icon-calculator::before {
  content: '';
  display: inline-block;
  width: 48px;
  height: 48px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='10' y='6' width='28' height='36' rx='3'/%3E%3Crect x='14' y='10' width='20' height='8' rx='1'/%3E%3Ccircle cx='18' cy='24' r='1.5'/%3E%3Ccircle cx='24' cy='24' r='1.5'/%3E%3Ccircle cx='30' cy='24' r='1.5'/%3E%3Ccircle cx='18' cy='30' r='1.5'/%3E%3Ccircle cx='24' cy='30' r='1.5'/%3E%3Ccircle cx='30' cy='30' r='1.5'/%3E%3Ccircle cx='18' cy='36' r='1.5'/%3E%3Crect x='22' y='34.5' width='10' height='3' rx='1'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

.sc-icon-building::before {
  content: '';
  display: inline-block;
  width: 48px;
  height: 48px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='14' width='20' height='28' rx='2'/%3E%3Crect x='28' y='22' width='14' height='20' rx='2'/%3E%3Cpath d='M18 6l-10 8'/%3E%3Cpath d='M18 6l10 8'/%3E%3Cpath d='M12 20h4M12 26h4M12 32h4M20 20h4M20 26h4M20 32h4'/%3E%3Cpath d='M32 28h4M32 34h4'/%3E%3Cpath d='M16 38v4h4v-4'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

.sc-icon-chart::before {
  content: '';
  display: inline-block;
  width: 48px;
  height: 48px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 40V12'/%3E%3Cpath d='M8 40h34'/%3E%3Cpath d='M14 32l6-8 6 4 8-14'/%3E%3Ccircle cx='14' cy='32' r='2'/%3E%3Ccircle cx='20' cy='24' r='2'/%3E%3Ccircle cx='26' cy='28' r='2'/%3E%3Ccircle cx='34' cy='14' r='2'/%3E%3Cpath d='M32 12l4 2-2 4'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

.sc-icon-mail::before {
  content: '';
  display: inline-block;
  width: 48px;
  height: 48px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='12' width='36' height='24' rx='3'/%3E%3Cpath d='M6 15l18 11 18-11'/%3E%3Cpath d='M6 33l12-9'/%3E%3Cpath d='M42 33l-12-9'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

.sc-icon-megaphone::before {
  content: '';
  display: inline-block;
  width: 48px;
  height: 48px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M36 10v24c-6-3-12-4-18-4v-16c6 0 12-1 18-4z'/%3E%3Cpath d='M18 30v8a3 3 0 003 3h2a3 3 0 003-3v-6'/%3E%3Cpath d='M14 14v16'/%3E%3Ccircle cx='40' cy='22' r='3'/%3E%3Cpath d='M10 18a4 4 0 00-4 4v0a4 4 0 004 4'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

.sc-icon-ledger::before {
  content: '';
  display: inline-block;
  width: 48px;
  height: 48px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='10' y='6' width='28' height='36' rx='2'/%3E%3Cpath d='M10 14h28'/%3E%3Cpath d='M10 22h28'/%3E%3Cpath d='M10 30h28'/%3E%3Cpath d='M22 14v28'/%3E%3Cpath d='M16 18h2'/%3E%3Cpath d='M16 26h2'/%3E%3Cpath d='M16 34h2'/%3E%3Cpath d='M26 18h8'/%3E%3Cpath d='M26 26h8'/%3E%3Cpath d='M26 34h8'/%3E%3Cpath d='M6 10v28'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

.sc-icon-shield::before {
  content: '';
  display: inline-block;
  width: 48px;
  height: 48px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M24 4L8 12v10c0 12 7 18 16 22 9-4 16-10 16-22V12L24 4z'/%3E%3Cpath d='M17 24l4 4 10-10'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

.sc-icon-clock::before {
  content: '';
  display: inline-block;
  width: 48px;
  height: 48px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='24' cy='24' r='18'/%3E%3Cpath d='M24 12v12l8 6'/%3E%3Cpath d='M36 8l4-2'/%3E%3Cpath d='M12 8l-4-2'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

.sc-icon-team::before {
  content: '';
  display: inline-block;
  width: 48px;
  height: 48px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='24' cy='14' r='5'/%3E%3Cpath d='M14 38v-4a8 8 0 0116 0v4'/%3E%3Ccircle cx='38' cy='16' r='4'/%3E%3Cpath d='M34 38v-2c0-2.5-1.2-4.7-3-6'/%3E%3Ccircle cx='10' cy='16' r='4'/%3E%3Cpath d='M14 38v-2c0-2.5 1.2-4.7 3-6'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

.sc-icon-check::before {
  content: '';
  display: inline-block;
  width: 48px;
  height: 48px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='24' cy='24' r='18'/%3E%3Cpath d='M15 24l6 6 12-12'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

.sc-icon-arrow-right::before {
  content: '';
  display: inline-block;
  width: 48px;
  height: 48px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 24h28'/%3E%3Cpath d='M28 16l8 8-8 8'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}


/* --------------------------------------------------------------------------
   13b. Image Section Utilities
   -------------------------------------------------------------------------- */
/* --- Section with background image --- */
.sc-section-img-bg {
  position: relative;
  overflow: hidden;
}
.sc-section-img-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
}
.sc-section-img-bg .sc-section-inner {
  position: relative;
  z-index: 2;
}
.sc-section-img-bg.sc-overlay-dark::before {
  filter: brightness(0.35);
}
.sc-section-img-bg.sc-overlay-light::before {
  filter: brightness(0.7);
}

/* Image card with photo */
.sc-img-card {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
.sc-img-card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}
.sc-img-card-body {
  padding: 24px;
  background: #fff;
}

/* About section image */
.sc-about-img {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(0,0,0,0.10);
}
.sc-about-img img {
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
  display: block;
}

/* NOTE: .sc-case-card-img is used as a background-image div by the top and
   case-studies pages (per their inline <style> blocks). Do NOT add
   background, border, display, or box-shadow rules here — they will
   clobber the inline background-image on those pages. */


/* --------------------------------------------------------------------------
   14. Scroll Animations
   -------------------------------------------------------------------------- */
@keyframes scFadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes scSlideLeft {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes scFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* sc- classes */
.sc-animate {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.sc-animate.sc-visible {
  opacity: 1;
  transform: translateY(0);
}

/* dc- compat classes */
.dc-anim-wait {
  opacity: 0 !important;
  transform: translateY(25px);
}
.dc-anim-wait-slide {
  opacity: 0 !important;
  transform: translateX(-20px);
}
@keyframes dcFadeIn {
  from { opacity: 0; transform: translateY(25px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes dcSlideIn {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: translateX(0); }
}
.dc-anim-go {
  animation: dcFadeIn 0.7s ease forwards !important;
}
.dc-anim-go-slide {
  animation: dcSlideIn 0.5s ease forwards !important;
}


/* --------------------------------------------------------------------------
   15. dc- Section Compat (TOP page)
   -------------------------------------------------------------------------- */
section.dc-section {
  background-color: var(--sc-offwhite);
  position: relative;
  z-index: 1;
}
.dc-section.dc-bg-light {
  background-color: var(--sc-warm-light);
}
.dc-section-inner {
  position: relative;
  z-index: 2;
}
.dc-section h2 {
  color: var(--sc-navy);
}
.dc-section-label {
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.15em !important;
  color: var(--sc-teal);
}
.dc-section-title {
  font-size: 32px !important;
  font-weight: 700 !important;
  font-family: "Noto Serif JP", serif !important;
}
@media (min-width: 768px) {
  .dc-section-title {
    font-size: 38px !important;
  }
}
.dc-accent {
  color: #fff !important;
}

/* Results section */
.dc-results-bg {
  background-color: var(--sc-navy) !important;
}
.dc-results-bg .dc-section-title,
.dc-results-bg .dc-section-label,
.dc-results-bg h2,
.dc-results-bg p,
.dc-results-bg a,
.dc-results-bg span {
  color: #fff !important;
}

/* Recruit section */
.dc-recruit-section {
  background-color: var(--sc-navy) !important;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0L60 30L30 60L0 30z' fill='none' stroke='rgba(255,255,255,0.03)' stroke-width='0.5'/%3E%3C/svg%3E") !important;
  color: #fff !important;
  padding: 60px 20px !important;
}
.dc-recruit-section h2,
.dc-recruit-section p,
.dc-recruit-section span,
.dc-recruit-section div,
.dc-recruit-section a {
  color: #fff !important;
}

/* dc- flow step compat */
.dc-flow-step {
  background: var(--sc-offwhite);
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius-card);
  box-shadow: var(--sc-shadow);
}


/* --------------------------------------------------------------------------
   16. sc- Subpage Layout
   -------------------------------------------------------------------------- */
/* Header gap fix */
body.page .sc-page {
  margin-top: calc(var(--sc-header-h) * -1);
}

/* Intro text */
.sc-page .sc-intro {
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 32px;
  padding-right: 32px;
}

/* Content sections centered */
.sc-page .sc-section,
.sc-page .sc-summary-grid,
.sc-page .sc-common-grid,
.sc-page .sc-grid,
.sc-page .sc-merit-grid,
.sc-page .sc-job-grid,
.sc-page .sc-features,
.sc-page .sc-mission-card,
.sc-page .sc-info-table,
.sc-page .sc-divider {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

/* Hero / CTA full-bleed */
.sc-hero,
.sc-cta {
  padding-left: 10%;
  padding-right: 10%;
}

/* Tags */
.sc-detail-tags span,
.sc-cat-subtitle {
  display: inline-block;
  padding: 4px 12px;
  font-size: 12px;
  border-radius: var(--sc-radius-btn);
  background: var(--sc-warm-light);
  color: var(--sc-gray);
}

/* News items */
.sc-news-item {
  background: var(--sc-offwhite);
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius-card);
  padding: 1em 1.3em;
  margin-bottom: 12px;
}
.sc-news-date {
  font-size: 13px;
  color: var(--sc-gray);
}
.sc-news-category {
  display: inline-block;
  padding: 2px 8px;
  font-size: 11px;
  border-radius: 4px;
  background: var(--sc-teal);
  color: #fff;
  margin-left: 8px;
}

/* Access section */
.sc-access-section {
  background: var(--sc-offwhite);
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius-card);
  padding: 1.4em 1.6em;
}

@media (max-width: 767px) {
  .sc-hero,
  .sc-cta {
    padding-left: 6%;
    padding-right: 6%;
  }
  .sc-page .sc-section {
    padding-left: 16px;
    padding-right: 16px;
  }
  .sc-page .sc-intro {
    padding-left: 16px;
    padding-right: 16px;
  }
}


/* --------------------------------------------------------------------------
   17. Page-specific: Hide Titles on Custom Pages
   -------------------------------------------------------------------------- */
.page-id-45 .entry-title,
.page-id-267 .entry-title,
.page-id-484 .entry-title,
.page-id-259 .entry-title,
.page-id-247 .entry-title,
.page-id-79 .entry-title,
.page-id-423 .entry-title,
.page-id-238 .entry-title {
  display: none !important;
}


/* --------------------------------------------------------------------------
   18. Page-specific: TOP Page (page-id-45)
   -------------------------------------------------------------------------- */
body.page-id-45 .entry-content > p:empty {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
  font-size: 0 !important;
}
body.page-id-45 .entry-content > * {
  margin-bottom: 0 !important;
}
body.page-id-45 .entry-content > style {
  margin: 0 !important;
}
body.page-id-45 .entry-content > style + p:empty {
  display: none !important;
}
body.page-id-45 .dc-service-card p:empty {
  display: none !important;
}
body.page-id-45 .dc-services-grid > p,
body.page-id-45 .dc-services-grid > br,
body.page-id-45 .dc-img-strip > br,
body.page-id-45 .dc-img-strip > p {
  display: none !important;
}
body.page-id-45 .entry-content {
  max-width: 100% !important;
  width: 100% !important;
}
body.page-id-45 .main {
  padding: 0 !important;
}
body.page-id-45 .content {
  margin-top: 0 !important;
}
body.page-id-45 .article {
  padding: 0 !important;
}
/* TOP page: font size / readability */
body.page-id-45 .entry-content {
  font-size: 18px !important;
  line-height: 2.0 !important;
}
body.page-id-45 .dc-section-inner {
  max-width: 1200px !important;
}
body.page-id-45 .dc-services-grid {
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  gap: 24px !important;
}
body.page-id-45 .dc-service-card {
  padding: 0 !important;
}
body.page-id-45 .dc-service-card h3 {
  font-size: 22px !important;
  padding: 16px 20px 0 !important;
}
body.page-id-45 .dc-service-card .dc-service-desc {
  font-size: 15px !important;
  line-height: 1.85 !important;
  padding: 10px 20px 0 !important;
}
body.page-id-45 .dc-service-card .dc-service-list {
  font-size: 14px !important;
  line-height: 1.8 !important;
  padding: 8px 20px 20px 40px !important;
}
body.page-id-45 .dc-company-table th,
body.page-id-45 .dc-company-table td {
  font-size: 16px !important;
  line-height: 1.9 !important;
}
body.page-id-45 .dc-company-table th {
  font-weight: 700 !important;
}
body.page-id-45 .dc-flow-step p {
  font-size: 16px !important;
  line-height: 1.9 !important;
}
body.page-id-45 .dc-flow-step h3 {
  font-size: 22px !important;
}
body.page-id-45 .dc-section-title {
  font-size: 34px !important;
}
body.page-id-45 .dc-section-subtitle {
  font-size: 18px !important;
  line-height: 2.0 !important;
}
body.page-id-45 .dc-cta-section p {
  font-size: 18px !important;
  line-height: 2.0 !important;
}
body.page-id-45 .dc-cta-section h2 {
  font-size: 30px !important;
}
body.page-id-45 .dc-cta-section .dc-cta-btn {
  font-size: 18px !important;
  padding: 16px 48px !important;
}
body.page-id-45 .dc-hero-title {
  font-size: 44px !important;
}
body.page-id-45 .dc-hero-subtitle {
  font-size: 17px !important;
  line-height: 1.9 !important;
}
/* TOP page: hero/header gap fix */
body.page-id-45 .dc-hero-video-wrap {
  margin-top: calc(var(--sc-header-h) * -1) !important;
}
body.page-id-45 .entry-content {
  margin-top: 0 !important;
}

@media (min-width: 768px) {
  body.page-id-45 .dc-section-title {
    font-size: 42px !important;
  }
  body.page-id-45 .dc-hero-title {
    font-size: 52px !important;
  }
}


/* --------------------------------------------------------------------------
   19. Footer (via functions.php)
   -------------------------------------------------------------------------- */
.sc-footer {
  background: var(--sc-navy);
  color: rgba(255,255,255,0.8);
  padding: 60px 20px 0;
}
.sc-footer-inner {
  max-width: var(--sc-max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
@media (min-width: 768px) {
  .sc-footer-inner {
    grid-template-columns: 2fr 1fr 1fr;
    gap: 48px;
  }
}
.sc-footer h4 {
  font-family: "Noto Serif JP", serif;
  color: #fff;
  font-size: 16px;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.sc-footer p {
  font-size: 14px;
  line-height: 1.8;
  color: rgba(255,255,255,0.7);
  margin-bottom: 6px;
}
.sc-footer a {
  color: rgba(255,255,255,0.7);
  transition: color 0.25s ease;
}
.sc-footer a:hover {
  color: var(--sc-copper);
}
.sc-footer-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.sc-footer-nav li {
  margin-bottom: 8px;
}
.sc-footer-nav a {
  font-size: 14px;
  display: block;
  padding: 3px 0;
}
.sc-footer-contact .sc-btn {
  margin-top: 12px;
}
.sc-footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  margin-top: 40px;
  padding: 20px 0;
  text-align: center;
}
.sc-footer-bottom p {
  font-size: 12px;
  color: rgba(255,255,255,0.4);
}

/* Hide Cocoon default footer if custom one overrides */
#footer {
  background: var(--sc-navy) !important;
  color: rgba(255,255,255,0.6) !important;
}
#footer a {
  color: rgba(255,255,255,0.6) !important;
}


/* --------------------------------------------------------------------------
   20. Responsive Overrides
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1023px) {
  .wp-block-group.wide,
  .entry-content > .wp-block-group,
  .body .wide {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .wp-block-group .wp-block-cover {
    padding: 18px 8px !important;
  }
  .entry-content .wp-block-group .wp-block-group {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .sc-section {
    padding: 60px 16px;
  }
}

@media screen and (max-width: 767px) {
  .sc-section-title {
    font-size: 26px;
  }
  .sc-hero h1 {
    font-size: 28px;
  }
  .sc-grid-3 {
    grid-template-columns: 1fr;
  }
  .sc-footer-inner {
    grid-template-columns: 1fr;
  }
  .sc-card {
    padding: 1.2em 1.2em;
  }
}

@media screen and (max-width: 480px) {
  .sc-section {
    padding: 40px 14px;
  }
  .sc-hero {
    padding: 72px 16px 40px;
  }
}


/* --------------------------------------------------------------------------
   22. Minimal Safety Patch — Text Wrapping & Overflow Prevention
   Note: Most layout (padding, flex, background) is handled by per-page inline
   CSS in wp:html blocks. This section adds only what they can't cover.
   -------------------------------------------------------------------------- */

/* ===== Text & overflow: safe defaults for Japanese content ===== */

/* Body text must be allowed to wrap within its container */
.sc-page p,
.sc-page li,
.sc-page dd,
.sc-page td,
.sc-page th,
.entry-content .sc-section p,
.entry-content .sc-section li {
  overflow-wrap: break-word;
  word-break: normal;
}

/* Prevent children from overflowing flex parents */
.sc-news-item,
.sc-svc-card,
.sc-str-item,
.sc-case-card,
.sc-faq-item,
.sc-step-content,
.sc-contact-card,
.sc-card,
.sc-common-card,
.sc-summary-card,
.sc-merit-card,
.sc-feature-card,
.sc-job-card,
.sc-detail-block {
  min-width: 0;
  overflow-wrap: break-word;
}

/* News list: text container must shrink inside flex row */
.sc-news-item > *,
.sc-news-text,
.sc-news-title,
.sc-news-body {
  min-width: 0;
  overflow-wrap: break-word;
  word-break: normal;
}

/* Headings: balanced wrapping only (no keep-all — it blocks Japanese wrap) */
.sc-heading,
.sc-section-title,
.sc-hero h1,
.sc-cta-navy h2,
.sc-top-hero h1 {
  text-wrap: balance;
  overflow-wrap: break-word;
}

/* Images never overflow their containers */
.sc-page img,
.entry-content .sc-section img {
  max-width: 100%;
  height: auto;
}

/* Case card image containers: preserve intended grid / background layout */
.sc-case-card-img {
  max-width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* ----------------------------------------------------------------
   Case card images: FORCED uniform sizing.
   These !important rules exist because the safety net above
   (.entry-content .sc-section img { height: auto }) has higher
   specificity than page-inline rules and would otherwise win.
   Covers TOP page (page-id-45) 支援実績 section and the
   case-studies page (page-id-247) cards.
   ---------------------------------------------------------------- */
.sc-case-card-img > img,
.sc-page .sc-case-card-img > img,
.entry-content .sc-section .sc-case-card-img > img {
  display: block !important;
  width: 100% !important;
  height: 240px !important;
  max-width: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  flex-shrink: 0 !important;
}
@media (max-width: 767px) {
  .sc-case-card-img > img,
  .sc-page .sc-case-card-img > img,
  .entry-content .sc-section .sc-case-card-img > img {
    height: 220px !important;
  }
}
@media (max-width: 430px) {
  .sc-case-card-img > img,
  .sc-page .sc-case-card-img > img,
  .entry-content .sc-section .sc-case-card-img > img {
    height: 200px !important;
  }
}

/* Tables must not push page width */
.sc-info-table,
.sc-page table {
  max-width: 100%;
  table-layout: auto;
}
.sc-info-table td,
.sc-info-table th {
  overflow-wrap: break-word;
  word-break: normal;
}

/* ===== Responsive adjustments ===== */

/* --- Tablet (768px–1023px) --- */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .sc-info-table th {
    width: 140px;
  }
}

/* --- Mobile (max-width: 767px) --- */
@media screen and (max-width: 767px) {
  body {
    font-size: 16px;
  }

  /* Section titles shrink on mobile */
  .sc-section-title,
  .sc-heading {
    font-size: 24px;
  }
  .sc-hero h1,
  .sc-top-hero h1 {
    font-size: 26px;
  }
  .sc-cta-navy h2 {
    font-size: 22px;
  }

  /* CTA text width */
  .sc-cta-navy p,
  .sc-cta p {
    max-width: 100%;
  }

  /* News items: stack if too narrow */
  .sc-news-item {
    flex-wrap: wrap;
  }
}

/* --- Small mobile (max-width: 480px) --- */
@media screen and (max-width: 480px) {
  body {
    font-size: 15px;
  }
  .sc-section-title,
  .sc-heading {
    font-size: 22px;
  }
  .sc-hero h1,
  .sc-top-hero h1 {
    font-size: 22px;
  }
  .sc-cta-navy h2 {
    font-size: 20px;
  }
}


/* --------------------------------------------------------------------------
   21. Print Styles
   -------------------------------------------------------------------------- */
@media print {
  body {
    background: #fff;
    color: #000;
    padding-top: 0;
    font-size: 12pt;
  }
  #header-container,
  .mobile-menu-buttons,
  .menu-drawer,
  .sc-footer,
  #footer,
  .sc-cta,
  .dc-cta-section,
  .sidebar,
  #navi {
    display: none !important;
  }
  .sc-hero {
    background: #f0f0f0;
    color: #000;
    padding: 20px;
  }
  .sc-hero h1 { color: #000; }
  .sc-card,
  .sc-common-card,
  .sc-merit-card {
    box-shadow: none;
    border: 1px solid #ccc;
    break-inside: avoid;
  }
  a {
    color: #000;
    text-decoration: underline;
  }
  img {
    max-width: 100% !important;
  }
}

/* --------------------------------------------------------------------------
   21. Hide Cocoon default footer (logo + duplicate copyright)
   custom .sc-footer already provides the full footer structure, so the
   default Cocoon <footer id="footer"> is redundant. Hide it entirely.
   -------------------------------------------------------------------------- */
#footer.footer-container,
.footer-bottom.fdt-logo,
.footer-bottom-logo,
.logo.logo-footer.logo-image {
  display: none !important;
}


/* --------------------------------------------------------------------------
   23. Page-specific: Services page (page-id-267) fixes
   - Hide all icon SVGs inside .sc-svc-merit-card (導入のメリット section)
     per design request: no ＋mark / circles / SVG icons on merit cards.
   - Override the page's inline `word-break: keep-all` usage (5 places)
     which prevented Japanese text from wrapping and caused the entire
     right side of the page to overflow horizontally on narrow viewports.
     Editing rule #4 at the top of this file forbids keep-all — the page
     inline style violates it, so this section neutralises it at
     specificity (0,2,0) > the page's (0,1,0) single-class rules.
   - Belt-and-suspenders overflow containment on the services page wrapper.
     `overflow-x: clip` (rather than hidden) preserves the sticky
     `.sc-svc-nav` behaviour since `clip` does not create a containing
     block for position:sticky descendants.
   -------------------------------------------------------------------------- */

/* Hide merit-card icons */
body.page-id-267 .sc-svc-merit-card svg,
body.page-id-267 .sc-svc-merit-card > svg {
  display: none !important;
}

/* Fix horizontal overflow caused by word-break: keep-all on Japanese text */
body.page-id-267 .sc-svc-section-title,
body.page-id-267 .sc-svc-section-lead,
body.page-id-267 .sc-svc-block p,
body.page-id-267 .sc-svc-common-card p,
body.page-id-267 .sc-svc-merit-card p,
body.page-id-267 .sc-svc-page h1,
body.page-id-267 .sc-svc-page h2,
body.page-id-267 .sc-svc-page h3,
body.page-id-267 .sc-svc-page h4,
body.page-id-267 .sc-svc-page p,
body.page-id-267 .sc-svc-page li {
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

/* Safety: contain services page wrapper inside viewport */
body.page-id-267 .sc-svc-page {
  max-width: 100% !important;
  overflow-x: clip;
}
body.page-id-267 .sc-svc-page > div,
body.page-id-267 .sc-svc-hero,
body.page-id-267 .sc-svc-section,
body.page-id-267 .sc-svc-cta {
  max-width: 100% !important;
}

/* Media in the page must never exceed container width */
body.page-id-267 .sc-svc-page img,
body.page-id-267 .sc-svc-page video,
body.page-id-267 .sc-svc-page iframe,
body.page-id-267 .sc-svc-page table {
  max-width: 100% !important;
  height: auto;
}

/* Block header flex row: allow the text column to shrink */
body.page-id-267 .sc-svc-block-header {
  min-width: 0;
  flex-wrap: wrap;
}
body.page-id-267 .sc-svc-block-header > div {
  min-width: 0;
  flex: 1 1 0;
}

/* Mobile tightening: smaller horizontal padding so 40px side padding does
   not push content past the viewport on phones */
@media screen and (max-width: 767px) {
  body.page-id-267 .sc-svc-section {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  body.page-id-267 .sc-svc-hero {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  body.page-id-267 .sc-svc-cta {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}


/* --------------------------------------------------------------------------
   24. Services page (page-id-267): normalize back-office section padding
   The page inline <style> already defines `.sc-svc-section {
     padding: 64px 40px; max-width: 1100px; margin: 0 auto;
   }` for ALL sections (front-office, back-office, common, merit), so
   structurally they should be identical. These explicit overrides pin
   back-office to the exact same values as the other three sections and
   also fix the anchor-jump offset caused by the sticky `.sc-svc-nav`
   (clicking a nav link used to land ~70px below the section title
   because the sticky nav + fixed header covered the top padding,
   which visually *felt* like "missing margin" on back-office).

   Reference values (copied verbatim from the page inline rule so all
   four sections share one source of truth):
     desktop: padding: 64px 40px; max-width: 1100px; margin: 0 auto;
     mobile (≤767px): padding: 40px 16px;
   -------------------------------------------------------------------------- */

/* Explicit padding/max-width on back-office (and siblings for symmetry) */
body.page-id-267 #back-office > .sc-svc-section,
body.page-id-267 #front-office > .sc-svc-section,
body.page-id-267 #common > .sc-svc-section,
body.page-id-267 #merit > .sc-svc-section {
  max-width: 1100px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 64px 40px !important;
  box-sizing: border-box !important;
}

@media screen and (max-width: 767px) {
  body.page-id-267 #back-office > .sc-svc-section,
  body.page-id-267 #front-office > .sc-svc-section,
  body.page-id-267 #common > .sc-svc-section,
  body.page-id-267 #merit > .sc-svc-section {
    padding: 40px 16px !important;
  }
}

/* Fix anchor-jump offset: the sticky .sc-svc-nav (~50px) + fixed
   #header-container (70px) overlap each section's top when the user
   clicks a nav link. scroll-margin-top reserves that space so the
   section label sits visibly below the nav after the jump. */
body.page-id-267 #front-office,
body.page-id-267 #back-office,
body.page-id-267 #common,
body.page-id-267 #merit {
  scroll-margin-top: 130px;
}


/* --------------------------------------------------------------------------
   25. Page-specific: About page (page-id-259) — "私たちの想い" section
   Fixes on the .sc-vision section in /about/:
   ① Hide the decorative circular SVG on the right (.sc-vision-art).
      It's a purely decorative 180×180 concentric-circle+crosshair motif
      that the design review flagged as visual noise.
   ② Fix right-side overflow caused by `word-break: keep-all` on the
      page's inline <style> for .sc-vision-text h2 / p. With keep-all,
      Japanese text (which has no spaces) becomes a single unbreakable
      run and bleeds past the flex column's right edge on narrow widths.
      Replacement: `word-break: normal` + `overflow-wrap: break-word`
      (matches this file's editing rule #4).
   ③ Safety: overflow-x: clip on the section + min-width:0 on flex
      children + let the text column take the full .sc-vision-inner
      width now that the art column is hidden.
   Specificity: body.page-id-259 .sc-vision-xxx = (0,2,1) > the page
   inline single-class rules (0,1,1), so no !important is strictly
   necessary, but we keep !important on the most user-visible rules
   for belt-and-suspenders safety.
   -------------------------------------------------------------------------- */

/* ① Hide decorative circular SVG */
body.page-id-259 .sc-vision-art {
  display: none !important;
}

/* ② Override word-break: keep-all so Japanese text wraps */
body.page-id-259 .sc-vision-text h2,
body.page-id-259 .sc-vision-text p {
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

/* ③ Safety containment + flex sanity */
body.page-id-259 .sc-vision {
  overflow-x: clip;
}
body.page-id-259 .sc-vision-inner {
  flex-wrap: wrap;
  max-width: 900px;
}
body.page-id-259 .sc-vision-text {
  min-width: 0;
  flex: 1 1 100%;
  max-width: 100%;
}

/* Media safety — any image/svg in the section never exceeds container */
body.page-id-259 .sc-vision img,
body.page-id-259 .sc-vision svg {
  max-width: 100%;
  height: auto;
}