/* =====================================================================
   ed-page.css — 下層ページの枠（2026-09-30）
   参考：eightdesign.co.jp の下層（/about・/about/group-companies・/eight-journal・/contact）
     ・明るい見出しブロック：パンくず → 巨大な英字（Unbounded 600・行間.92）＋ステッカー → 和文の見出し → リード
       下の角だけ角丸32px。その下は暗い地（#1f1f1f 前後）
     ・中身は暗い地の上に、角丸32px の明るい台紙として積む（記事ページの本文と同じ）
   ed.css（書体・色・ヘッダー・メニュー・フッター）の後に読む。
   style.css / case.css / recruit.css / media.css は部品の骨組みとして残し、色と書体だけここで上書きする。
   ===================================================================== */

/* 旧デザインの色の変数を、新デザインの色に置き換える（インラインの var() もこれで揃う） */
:root{
  --color-primary:var(--ink);
  --color-primary-light:#3b4048;
  --color-accent:#b53d15;   /* 小さな文字のオレンジ。薄い灰の地でも 4.5 を超える濃さ */
  --color-accent-hover:#a53a14;
  --color-bg:var(--paper);
  --color-surface:#ecebe6;
  --color-text:var(--ink);
  --color-text-muted:var(--ink-2);
  --color-border:#dcdbd5;
  --radius-sm:8px;
  --radius-md:8px;
  --radius-lg:24px;
}
body.pg{background:var(--dark);color:var(--ink);font-family:var(--f-jp);font-feature-settings:"palt";letter-spacing:.04em}
.pg-main{display:block}

/* ---------------------------------------------------------------------
   見出しブロック
   --------------------------------------------------------------------- */
.pg-head{
  position:relative;z-index:2;background:var(--paper);border-radius:0 0 32px 32px;
  padding:calc(var(--hd) + 10px) var(--gut) clamp(44px,5.4vw,72px);
}
.pg-crumb{
  display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:0 0 clamp(30px,5vw,70px);
  font-family:var(--f-lab);font-weight:500;font-size:12px;letter-spacing:.02em;color:var(--ink-3);
}
.pg-crumb a{color:var(--ink-3);text-decoration:none;transition:color .2s}
.pg-crumb a:hover{color:var(--ink);opacity:1}
.pg-crumb span{color:var(--ink);max-width:36em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pg-crumb i{font-style:normal;color:var(--ink-3)}
.pg-title{
  position:relative;display:inline-block;margin:0;max-width:100%;
  font-family:var(--f-disp);font-weight:600;font-size:clamp(44px,7.3vw,106px);line-height:.92;letter-spacing:-.02em;
  text-transform:uppercase;color:var(--ink);
}
.pg-title .ln{display:block;overflow:hidden;padding:.07em .05em .04em;margin:-.07em -.05em -.04em;white-space:nowrap}
.pg-title .ln__in{display:block}
.js .pg-title .ln__in{transform:translateY(108%) rotate(4deg);transform-origin:0 100%;transition:transform 1.05s cubic-bezier(.2,.9,.2,1)}
.js .pg-title .ln:nth-child(2) .ln__in{transition-delay:.09s}
.js .pg-title.is-in .ln__in{transform:none}
.pg-stk{position:absolute;left:100%;top:-.3em;margin-left:.04em;width:clamp(54px,5.6vw,88px);line-height:0}
.pg-stk .hero__sticker{position:static;display:block;width:100%;height:auto}
.js .pg-stk{transform:scale(0) rotate(-40deg);transition:transform .7s .45s cubic-bezier(.3,1.6,.5,1)}
.js .pg-title.is-in .pg-stk{transform:none}
.pg-head .pg-jp{
  margin:clamp(18px,2vw,26px) 0 0;font-family:var(--f-jp);font-weight:700;font-size:15px;line-height:1.7;letter-spacing:.12em;color:var(--ink);
}
.pg-head .pg-jp--big{font-weight:900;font-size:clamp(24px,3.1vw,42px);line-height:1.45;letter-spacing:.06em;max-width:24em}
.pg-head .pg-jp em{font-style:normal;color:var(--orange)}
.pg-lead{margin:clamp(16px,1.8vw,22px) 0 0;max-width:46em;font-size:15px;font-weight:500;line-height:2;letter-spacing:.06em;color:var(--ink)}
.pg-lead strong{font-weight:900;background:linear-gradient(transparent 64%,var(--yellow) 64%)}
.pg-lead br{display:inline}
.pg-extra{margin-top:clamp(18px,2vw,26px);display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px}
.pg-extra > div,.pg-extra > p:not(.cs-loc):not(.cs-cat){flex:1 0 100%;display:flex;flex-wrap:wrap;gap:10px 12px;margin:0}
.pg-extra .kg-hero-note,.pg-extra p{font-size:12.5px;color:var(--ink-2);letter-spacing:.06em}
/* 事例ページの業種・地域、採用の雇用形態などの札 */
.pg-extra .cs-cat,.pg-extra .cs-loc,.pg-extra .rc-job-tags span{
  display:inline-flex;align-items:center;height:32px;padding:0 16px;border-radius:var(--r-pill);
  font-family:var(--f-jp);font-size:13px;font-weight:700;letter-spacing:.08em;background:var(--ink);color:#fff;margin:0
}
.pg-extra .cs-loc{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.pg-extra .rc-job-tags{display:flex;flex-wrap:wrap;gap:8px}
/* 見出しブロックのボタン（攻略本・削減ラボ） */
.pg-extra a[class*="btn"]{
  display:inline-flex;align-items:center;gap:10px;height:54px;padding:0 26px;border-radius:var(--r-btn);border:0;
  font-family:var(--f-jp);font-weight:700;font-size:15px;letter-spacing:.08em;text-decoration:none;
  background:var(--orange);color:#fff!important;box-shadow:0 3px 0 rgba(0,0,0,.2);transform:rotate(-1.5deg);transition:transform .25s
}
.pg-extra a[class*="btn"]:hover{transform:rotate(0) translateY(-2px);opacity:1}
.pg-extra a[class*="ghost"],.pg-extra a[class*="secondary"]{background:#fff;color:var(--ink)!important;transform:rotate(1.5deg);box-shadow:inset 0 0 0 1.5px var(--ink),0 3px 0 rgba(0,0,0,.14)}
.pg-extra a[class*="btn"] svg{width:14px;height:14px}

/* ---------------------------------------------------------------------
   本文：暗い地に明るい台紙を積む
   --------------------------------------------------------------------- */
.pg-body{
  position:relative;display:flex;flex-direction:column;gap:clamp(14px,1.8vw,24px);
  padding:clamp(28px,4vw,64px) var(--gut) clamp(56px,7vw,110px);
}
.pg-body > *{width:100%;max-width:1240px;margin-left:auto!important;margin-right:auto!important}
.pg-body > section,.pg-body > article,.pg-body > div,.pg-body > aside{
  background:var(--paper);border-radius:32px;overflow:hidden;position:relative
}
.pg-body > .bg-surface,.pg-body > section.kg-surface{background:#fff}
.pg-body > script,.pg-body > style{display:none}
.pg-body .section{padding:clamp(52px,6.4vw,96px) 0}
.pg-body .container{max-width:1080px;padding:0 clamp(20px,4vw,56px)}
.pg-body .fade-in{transition:opacity .8s ease,transform .8s cubic-bezier(.2,.9,.2,1)}
/* 台紙が下から立ち上がる */
.js .pg-body > [data-rv]{opacity:0;transform:translateY(46px) scale(.985);transition:opacity .8s ease,transform 1s cubic-bezier(.2,.9,.2,1)}
.js .pg-body > [data-rv].on{opacity:1;transform:none}

/* 書体：明朝をやめて Zen Kaku Gothic New、英字は Unbounded／Syne */
.pg-body h1,.pg-body h2,.pg-body h3,.pg-body h4,.pg-body h5,
.pg-body .display,.pg-body .page-title,.pg-body .section-title,
.pg-body [style*="Noto Serif"],.pg-body [style*="serif"]{font-family:var(--f-jp)!important}
.pg-body h2,.pg-body h3{font-weight:900;letter-spacing:.05em}
.pg-body p,.pg-body li,.pg-body td,.pg-body th,.pg-body dd,.pg-body dt{letter-spacing:.05em}
.pg-body [style*="#0a2540"]{color:var(--ink)!important}
.pg-body [style*="#d97843"]{color:var(--orange)!important}
.pg-body [style*="background:#d97843"],.pg-body [style*="background: #d97843"]{background:var(--orange)!important;color:#fff!important;box-shadow:none!important}
.pg-body a{text-underline-offset:4px}

/* 章の見出し：英字の小見出しを巨大な英字に、和文の見出しをその下の小さな行に（参考サイトの下層と同じ順） */
.pg-body .text-center{text-align:left!important;margin-left:0!important;margin-right:auto!important}
.pg-body .section-subtitle{
  display:block;margin:0 0 14px;font-family:var(--f-disp);font-weight:600;font-size:clamp(30px,4.4vw,60px);line-height:.95;
  letter-spacing:-.02em;text-transform:uppercase;color:var(--ink)
}
.pg-body .section-title{margin:0 0 18px;font-weight:900;font-size:clamp(22px,2.6vw,32px);line-height:1.5;letter-spacing:.05em;color:var(--ink)}
.pg-body .section-subtitle + .section-title{font-size:15px;font-weight:700;letter-spacing:.14em;color:var(--ink-2);padding-bottom:22px;border-bottom:1.5px solid var(--ink);margin-bottom:26px}
.pg-body .section-title::after,.pg-body .section-title::before{display:none!important}
.pg-body .lead{font-size:15px;line-height:2.05;color:var(--ink)}

/* CTA：オレンジの台紙 */
.pg-body > .cta,.pg-body > .kg-cta{background:var(--orange);color:#fff;padding:clamp(56px,7vw,100px) 0;text-align:left}
.pg-body > .cta::before{display:none}
.pg-body .cta-title{font-family:var(--f-jp)!important;font-weight:900;font-size:clamp(24px,3vw,40px);line-height:1.45;color:#fff;margin-bottom:14px}
.pg-body .cta-sub{color:#fff;font-weight:500;opacity:.92}
.pg-body .cta-button{
  background:#fff;color:var(--ink)!important;border-radius:var(--r-btn);padding:0 28px;height:58px;font-weight:700;letter-spacing:.08em;
  box-shadow:0 3px 0 rgba(0,0,0,.22);transform:rotate(-1.5deg)
}
.pg-body .cta-button:hover{background:#fff;transform:rotate(0) translateY(-2px)}

/* 表（会社概要・採用・事例の概要）：参考サイトの行罫の表 */
.pg-body table{border-collapse:collapse;width:100%}
.pg-body .company-table th,.pg-body .company-table td{border:0;border-bottom:1px solid #cfcec8;padding:22px 8px;background:transparent;vertical-align:top}
.pg-body .company-table th{width:9.5em;font-weight:700;font-size:13.5px;color:var(--ink-2);letter-spacing:.12em}
.pg-body .company-table tr:first-child th,.pg-body .company-table tr:first-child td{border-top:1.5px solid var(--ink)}

/* ボタン類の角と色を揃える */
.pg-body .btn,.pg-body .service-link,.pg-body .form-submit,.pg-body button[type="submit"]{border-radius:var(--r-btn)}
.pg-body .form-submit,.pg-body button[type="submit"]{background:var(--ink);color:#fff;font-weight:700;letter-spacing:.1em;height:58px;border:0}
.pg-body .form-submit:hover,.pg-body button[type="submit"]:hover{background:var(--orange);opacity:1}
/* フォーム：下線だけの入力欄（参考サイトの CONTACT FORM） */
.pg-body .form-input,.pg-body .form-select,.pg-body .form-textarea,
.pg-body .rc-field input,.pg-body .rc-field select,.pg-body .rc-field textarea{
  background:transparent;border:0;border-bottom:1.5px solid #bdbcb6;border-radius:0;padding:14px 10px;font-family:var(--f-jp);font-size:15px;color:var(--ink)
}
.pg-body .form-input:focus,.pg-body .form-select:focus,.pg-body .form-textarea:focus,
.pg-body .rc-field input:focus,.pg-body .rc-field select:focus,.pg-body .rc-field textarea:focus{outline:0;border-bottom-color:var(--ink);box-shadow:none;background:#fff}
.pg-body .form-textarea,.pg-body .rc-field textarea{border:1.5px solid #bdbcb6;border-radius:8px;background:#fff}
.pg-body .form-label,.pg-body .rc-field label{font-weight:700;font-size:13.5px;letter-spacing:.1em}
.pg-body .required,.pg-body .req{color:var(--orange)}

/* ---------------------------------------------------------------------
   ページごとの調整
   --------------------------------------------------------------------- */
/* 会社概要：MVV のラベルを札に、四方良し・行動指針を罫線の段に */
.pg-body .mvv-label{display:inline-flex;align-items:center;height:30px;padding:0 14px;border-radius:var(--r-pill);background:var(--ink);color:#fff;font-family:var(--f-lab)!important;font-weight:600;letter-spacing:.1em;font-size:12px!important}
.pg-body .stakeholder-item,.pg-body .value-item{background:transparent!important;box-shadow:none!important;border:0;border-top:1.5px solid var(--ink);border-radius:0!important;padding:22px 4px 8px}
.pg-body .stakeholder-num,.pg-body .value-number,.pg-body .service-detail-num{font-family:var(--f-disp)!important;font-weight:500;color:var(--orange);letter-spacing:0}
.pg-body .value-title{font-family:var(--f-disp)!important;font-weight:600;letter-spacing:-.01em;text-transform:uppercase}
.pg-body .value-title small{display:block;font-family:var(--f-jp);font-weight:700;font-size:12px;letter-spacing:.12em;color:var(--ink-2);text-transform:none;margin-top:6px}
/* 事業内容 */
.pg-body .service-detail{padding:clamp(52px,6.4vw,96px) 0}
.pg-body .service-detail-label{font-family:var(--f-lab)!important;font-weight:600;letter-spacing:.12em;color:var(--ink-2)}
.pg-body .service-features li{border-bottom:1px solid #d9d8d2}
/* 代表挨拶 */
.pg-body .message-quote{font-family:var(--f-jp)!important;font-weight:900}
.pg-body .message-sign-name{font-family:var(--f-jp)!important;font-weight:900}
.pg-body .message-card{background:#fff;border-radius:24px;box-shadow:none;border:0}
/* 404 */
.pg--404 .pg-body > section{text-align:center}
/* 制作実績 */
.pg--case .pg-body .cs-card{border-radius:24px;overflow:hidden;background:#fff;box-shadow:none;border:0}
.pg--case .pg-body .cs-card img{border-radius:0}
.pg--case .pg-body .cs-fig img,.pg--case .pg-body .cs-shot img{border-radius:18px}
/* 採用 */
.pg--rc .pg-body .rc-h2{font-family:var(--f-jp)!important;font-weight:900}
.pg--rc .pg-body .rc-h2 .n{font-family:var(--f-disp)!important;color:var(--orange)}

/* ---------------------------------------------------------------------
   スマホ
   --------------------------------------------------------------------- */
@media (max-width:760px){
  .pg-head{border-radius:0 0 24px 24px;padding-bottom:40px}
  .pg-crumb{margin-bottom:26px}
  .pg-crumb span{max-width:16em}
  .pg-title{font-size:clamp(38px,11.4vw,64px)}
  .pg-stk{width:44px;top:-.36em;left:auto;right:-6px;margin:0}
  .pg-title .ln:first-child .ln__in{padding-right:40px}
  .pg-body{padding-left:10px;padding-right:10px;gap:12px}
  .pg-body > section,.pg-body > article,.pg-body > div,.pg-body > aside{border-radius:22px}
  .pg-body .container{padding:0 18px}
  .pg-body .company-table th,.pg-body .company-table td{display:block;width:auto;padding:12px 4px}
  .pg-body .company-table th{border-bottom:0;padding-bottom:0}
  .pg-body .company-table tr:first-child td{border-top:0}
}

/* style.css の scroll-behavior:smooth と慣性スクロール（Lenis）が二重にならないように */
html.lenis{scroll-behavior:auto!important}

/* ---------------------------------------------------------------------
   メディア（/media/）：参考サイトの EIGHT JOURNAL と同じ組み方
     一覧＝見出しブロック → 青い帯にカテゴリの札 → 明るい台紙に記事の3列
     記事＝パンくずだけの見出しブロック → 暗い地に白い題名 → 本文は明るい台紙
   --------------------------------------------------------------------- */
.pg-body > .pg-band{
  display:flex;flex-wrap:wrap;gap:10px;background:var(--blue);border-radius:32px;padding:clamp(22px,2.6vw,36px) clamp(20px,4vw,56px)
}
.pg-band .media-category{
  display:inline-flex;align-items:center;height:48px;padding:0 24px;border-radius:var(--r-pill);border:0;margin:0;
  background:#fff;color:var(--blue);font-family:var(--f-jp);font-weight:900;font-size:15px;letter-spacing:.08em;text-decoration:none;transition:transform .2s
}
.pg-band .media-category:hover{transform:translateY(-2px);opacity:1}
.pg-band .media-category.is-active{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px #fff}
.pg--media .articles-grid{gap:clamp(28px,3vw,44px) clamp(20px,2.6vw,40px)}
.pg--media .article-card{background:transparent;border:0;box-shadow:none;border-radius:0;transform:none!important}
.pg--media .article-card-thumb{border-radius:14px;overflow:hidden}
.pg--media .article-card-thumb img{transition:transform .6s cubic-bezier(.2,.9,.2,1)}
.pg--media .article-card:hover .article-card-thumb img{transform:scale(1.04)}
.pg--media .article-card-meta,.pg--media .article-card-title,.pg--media .article-card-subtitle,
.pg--media .article-card-desc,.pg--media .article-card-footer{margin-left:0;margin-right:0}
.pg--media .article-card-category,.pg--media .article-card-new{border-radius:6px;font-family:var(--f-jp);font-weight:700}
.pg--media .article-card-title{font-weight:900;line-height:1.6;letter-spacing:.05em}
.pg--media .article-card-footer{font-family:var(--f-lab);border-top:0}
/* 記事 */
.pg-head--short{padding-bottom:clamp(56px,7vw,120px)}
.pg-head--short .pg-crumb{margin-bottom:0}
.pg-body > .article{background:transparent;border-radius:0;overflow:visible}
.pg--media .article-header{background:transparent;border:0;padding:clamp(28px,4vw,56px) 0 0;color:#fff}
.pg--media .article-header-inner{max-width:980px}
.pg--media .article-title{color:#fff;font-weight:900;font-size:clamp(24px,3vw,38px);line-height:1.5;letter-spacing:.05em}
.pg--media .article-subtitle{color:rgba(255,255,255,.72)}
.pg--media .article-meta{color:rgba(255,255,255,.72);font-family:var(--f-jp);padding-bottom:22px;border-bottom:1px solid rgba(255,255,255,.35)}
.pg--media .article-tag{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.5);border-radius:var(--r-pill)}
.pg--media .article-category{border-radius:var(--r-pill)}
.pg--media .article-body{background:var(--paper);border-radius:32px;margin-top:clamp(24px,3vw,40px);padding:clamp(40px,5vw,80px) 0}
.pg--media .article-body-inner{max-width:860px}
.pg--media .article-body-inner h2{font-weight:900;border-left:0;padding-left:0;border-bottom:1.5px solid var(--ink);padding-bottom:14px}
.pg--media .article-body-inner blockquote{border-left-color:var(--orange);background:#fff;border-radius:0 12px 12px 0}
.pg--media .author-profile,.pg--media .related-articles{padding:clamp(44px,5vw,72px) 0}
.pg--media .author-profile-inner{background:transparent;border:0;box-shadow:none}
.pg--media .author-profile-label{font-family:var(--f-disp)!important;font-weight:600;font-size:clamp(28px,3.4vw,44px);letter-spacing:-.02em;color:var(--ink)}
.pg--media .related-title{font-weight:900}
@media (max-width:760px){
  .pg-body > .pg-band{border-radius:22px;padding:18px}
  .pg-band .media-category{height:40px;padding:0 16px;font-size:13.5px}
  .pg--media .article-body{border-radius:22px}
}
.pg--media .article-category{background:#fff!important;color:var(--ink)!important;border:0}

/* 旧 style.css は部品ごとに明朝（Noto Serif JP・Yuji Syuku・EB Garamond）を指定している。
   新デザインでは明朝を読み込まないので、iPhone では端末の明朝に落ちる → 本文の中は一律に和文ゴシックへ戻す。
   英字の見出し・番号は、この後ろ（詳細度が上）で Unbounded / Syne を当て直している */
.pg-body *:not(code):not(pre):not(kbd):not(samp){font-family:inherit!important}
.pg-body .section-subtitle,.pg-body .value-title,.pg-body .stakeholder-num,.pg-body .value-number,.pg-body .service-detail-num,
.pg-body .rc-h2 .n,.pg--media .author-profile-label,.pg-body .n,.pg-body .amt{font-family:var(--f-disp)!important}
.pg-body .mvv-label,.pg-body .service-detail-label,.pg--media .article-card-footer,.pg--media .article-meta time{font-family:var(--f-lab)!important}
/* 会社概要の表：スマホで1行ずつの箱にしない（罫線だけの行） */
@media (max-width:760px){
  .pg-body .company-table,.pg-body .company-table tbody,.pg-body .company-table tr{display:block;width:100%}
  .pg-body .company-table tr{border:0;border-bottom:1px solid #cfcec8;background:transparent;border-radius:0;box-shadow:none;padding:14px 2px;margin:0}
  .pg-body .company-table tr:first-child{border-top:1.5px solid var(--ink)}
  .pg-body .company-table th,.pg-body .company-table td{border:0!important;padding:0 !important;background:transparent}
  .pg-body .company-table th{margin-bottom:4px}
}

/* 元が濃い地だった区画は、濃い地のまま残す（明るい台紙にすると白い文字が消える＝5-35） */
.pg-body > .sakugen-pricing{background:var(--ink);color:#fff}
/* 採用ページ（recruit.css）の薄い灰とオレンジを、明るい地で読める濃さに */
body.pg.rc{--rc-orange:#a53a14}
.pg-body .rc-note,.pg-body .rc-pay-name span,.pg-body .rc-pay-amt small,.pg-body .rc-field .hint,.pg-body .rc-field .opt,
.pg-body .rc-form .form-note{color:#5f6570}
/* メディアのカテゴリ札 */
.pg--media .article-card-category-sales{color:#b03d12}
.pg--media .article-card-category-operations{color:#4b6a31}
.pg--media .article-card-category-webdesign{color:var(--ink)}
/* パンくずの薄い文字 */
.pg-crumb,.pg-crumb a,.pg-crumb i{color:var(--ink-2)}
.pg-body .rc-dl dt{color:#5f6570}
/* 削減ラボ：明るい地に乗る琥珀色だけ濃くする（濃い地の上は元の琥珀のまま） */
.pg--sakugen-lab .sakugen-section:not(.sakugen-pricing) .sakugen-section-eyebrow,.pg--sakugen-lab .sakugen-prob-icon,
.pg--sakugen-lab .sakugen-case-stat-value.price,.pg--sakugen-lab .sakugen-faq-toggle{color:#b53d15}