/*
 Theme Name: NJC
 Template:   blocksy
 Version:    1.0.0
 Text Domain: njc
*/

/* =========================================================
   NJC 追加CSS（これ1つで全ページ分／トップページ対応版）
   貼り付け先：外観 ＞ カスタマイズ ＞ 追加CSS
   ※子テーマ style.css に書く場合はどちらか一方だけに
   ========================================================= */

/* ---------- 0. 共通の値 ---------- */
:root{
  --njc-navy:#1f2a3a;  --njc-navy-deep:#18212e;
  --njc-pink:#b04f78;  --njc-pink-dark:#963f65;
  --njc-pink-light:#f8eef2;  --njc-pink-on-navy:#e6a3bf;
  --njc-gray-bg:#f3f1ee;  --njc-line:#d6d2cc;  --njc-sub:#4a5566;
  --njc-section-y:clamp(64px,9vw,128px);
}

/* ---------- 1. ヘッダー（無料版の追従表示） ---------- */
#header{ position:sticky; top:var(--wp-admin--admin-bar--height,0px); z-index:50;
  background:#fbfaf8; border-bottom:1px solid #e3e0db; }
/* ヘッダーHTML要素に置く「資料請求」ボタン */
.njc-btn-outline{ display:inline-block; padding:9px 16px; font-size:13px; border-radius:2px;
  border:1px solid var(--njc-navy); color:var(--njc-navy); text-decoration:none; }
.njc-btn-outline:hover{ background:var(--njc-navy); color:#fff; }

/* ---------- 2. セクションの基本 ---------- */
.njc-section{ padding-block:var(--njc-section-y); }
.njc-section > *{ margin-block-start:0; }
.njc-gray{ background:var(--njc-gray-bg); }
.njc-navy{ background:var(--njc-navy); color:#fff; }
.njc-navy :is(h1,h2,h3,h4){ color:#fff; }
.njc-navy p{ color:#c9cfd8; }
.njc-navy a{ color:#fff; }

/* ---------- 3. 英字ラベル・見出し行・テキストリンク ---------- */
.njc-eyebrow{ margin:0; font-size:12px; letter-spacing:.22em; font-weight:500;
  text-transform:uppercase; color:var(--njc-pink); }
.njc-navy .njc-eyebrow{ color:var(--njc-pink-on-navy); }
.njc-sechead{ margin-bottom:48px; gap:24px; }
.njc-textlink a{ font-size:14px; color:inherit; text-decoration:none;
  border-bottom:1px solid currentColor; padding-bottom:4px; }
.njc-textlink a:hover{ color:var(--njc-pink); }
.njc-navy .njc-textlink a:hover{ color:var(--njc-pink-on-navy); }

/* ---------- 4. 番号リスト（Solutions） ---------- */
.njc-numlist{ border-top:1px solid var(--njc-navy); }
.njc-numrow{ position:relative; display:grid;
  grid-template-columns:72px minmax(0,1.1fr) minmax(0,1.4fr) 40px;
  gap:20px; align-items:center; padding:28px 12px;
  border-bottom:1px solid var(--njc-line); transition:background .2s; }
.njc-numrow:hover{ background:var(--njc-pink-light); }
.njc-numrow > *{ margin:0 !important; }
.njc-numrow__no{ font-family:"Shippori Mincho",serif; font-size:26px; color:var(--njc-pink); }
.njc-numrow__title{ font-family:"Shippori Mincho",serif; font-weight:600; font-size:clamp(18px,2vw,24px); }
.njc-numrow__title a{ color:inherit; text-decoration:none; }
.njc-numrow__title a::after{ content:""; position:absolute; inset:0; }
.njc-numrow__desc{ font-size:13.5px; line-height:1.8; color:var(--njc-sub); }
.njc-numrow__arrow{ width:36px; height:36px; border-radius:50%; border:1px solid var(--njc-navy);
  display:flex; align-items:center; justify-content:center; font-size:14px; }

/* ---------- 5. 下層ページのヒーロー ---------- */
.njc-hero{ background:var(--njc-gray-bg); padding-block:clamp(48px,7vw,96px) clamp(40px,5vw,72px); }
.njc-hero .njc-breadcrumb{ font-size:12px; color:#6a7382; margin-bottom:24px; }
.njc-hero .njc-lead{ max-width:40em; color:#3d4757; }

/* ---------- 6. カード（事例・リンクカード） ---------- */
.njc-card .wp-block-post-featured-image img{ aspect-ratio:3/2; object-fit:cover; border-radius:4px; }
.njc-card .wp-block-post-title{ font-family:"Shippori Mincho",serif; font-size:18px; line-height:1.6; margin-top:14px; }
.njc-card .wp-block-post-title a{ text-decoration:none; }
.njc-card .wp-block-post-terms a{ display:inline-block; font-size:11.5px; padding:3px 10px;
  background:var(--njc-pink-light); color:var(--njc-pink-dark); border-radius:20px; text-decoration:none; }
.njc-linkcard{ border:1px solid #e3e0db; background:#fff; padding:28px 32px; transition:border-color .2s; }
.njc-linkcard:hover{ border-color:var(--njc-pink); }

/* ---------- 7. お知らせリスト ---------- */
.njc-newslist li{ display:grid; grid-template-columns:96px 104px minmax(0,1fr); gap:12px;
  align-items:center; padding:18px 4px; border-bottom:1px solid var(--njc-line); }
.njc-newslist .wp-block-post-date{ font-size:13px; color:#6a7382; }
.njc-newslist .wp-block-post-terms a{ display:block; font-size:11.5px; border:1px solid #c9ced6;
  padding:3px 8px; text-align:center; color:#3d4757; text-decoration:none; }
.njc-newslist .wp-block-post-title{ font-size:14px; font-family:inherit; font-weight:400; margin:0; }

/* ---------- 8. 導入事例の詳細 ---------- */
.njc-spec td{ border:0; border-bottom:1px solid var(--njc-line); padding:14px 8px; }
.njc-spec td:first-child{ width:9em; font-weight:500; color:var(--njc-navy); }
.njc-case-section{ padding-top:48px; }
.njc-quote{ border-left:3px solid var(--njc-pink); padding-left:20px; font-family:"Shippori Mincho",serif; }
.njc-quote cite{ font-family:"Zen Kaku Gothic New",sans-serif; font-size:13px; color:#6a7382; font-style:normal; }

/* ---------- 10. トップページ ---------- */
.njc-white{ background:#fff; }
.njc-bordertop{ border-top:1px solid #e3e0db; }
.njc-vcenter{ align-items:center !important; gap:clamp(32px,5vw,80px) !important; }
.njc-section h2{ margin-top:0; }
.njc-h2-sm{ font-size:28px !important; }

/* ヒーロー */
.njc-hero-top{ padding-block:clamp(40px,6vw,80px) clamp(48px,6vw,88px); }
.njc-hero-top .njc-eyebrow{ margin-bottom:28px; }
.njc-h1-hero{ font-size:clamp(44px,6vw,76px) !important; line-height:1.25; letter-spacing:.06em; margin:0 0 28px; }
.njc-tagline img{ height:30px; width:auto; }
.njc-tagline{ margin:0 0 28px !important; }
.njc-lead{ font-size:16px; line-height:2; color:#3d4757; max-width:30em; margin-bottom:28px; }
.njc-hero-visual{ position:relative; }
.njc-hero-visual > *{ margin:0 !important; }
.njc-hero-photo img{ width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:4px 120px 4px 4px; }
.njc-hero-mark{ position:absolute !important; left:-28px; bottom:-28px; width:96px; }

/* Top Message */
.njc-body p{ font-size:16px; line-height:2.1; color:#3d4757; }
.njc-body .njc-message-key{ padding-top:20px; border-top:1px solid #e3e0db; color:var(--njc-navy); font-weight:500; }

/* Philosophy */
.njc-steps4{ border-top:1px solid #3a475c; gap:0 !important; margin-top:8px; }
.njc-steps4 > .wp-block-column{ padding:32px 28px 8px 0; }
.njc-steps4 > .wp-block-column > *{ margin:0 0 14px; }
.njc-bignum{ font-family:"Shippori Mincho",serif; font-size:40px; line-height:1; color:var(--njc-pink-on-navy) !important; }
.njc-steps4 h3{ font-size:22px; }
.njc-steps4 p:not(.njc-bignum){ font-size:14px; line-height:1.9; }

/* Hospitality */
.njc-definition{ font-family:"Shippori Mincho",serif; font-weight:600; font-size:clamp(22px,2.4vw,30px); line-height:1.7; color:var(--njc-navy); }
.njc-steplist{ background:#fff; border:1px solid #e3e0db; }
.njc-steplist > *{ margin:0 !important; }
.njc-steprow{ display:grid; grid-template-columns:56px 110px minmax(0,1fr); align-items:center; gap:12px; padding:18px 24px; border-bottom:1px solid #eeebe7; }
.njc-steprow:last-child{ border-bottom:0; }
.njc-steprow > *{ margin:0 !important; }
.njc-steprow__n{ width:32px; height:32px; border-radius:50%; border:1px solid var(--njc-pink); color:var(--njc-pink); display:flex; align-items:center; justify-content:center; font-size:13px; }
.njc-steprow__t{ font-family:"Shippori Mincho",serif; font-weight:600; font-size:19px; color:var(--njc-navy); }
.njc-steprow__d{ font-size:13.5px; color:var(--njc-sub); }

/* Why NJC */
.njc-photo img{ width:100%; aspect-ratio:5/4; object-fit:cover; border-radius:4px; }
.njc-deflist{ border-bottom:1px solid var(--njc-line); margin-top:28px; }
.njc-deflist > *{ margin:0 !important; }
.njc-defrow{ display:grid; grid-template-columns:140px minmax(0,1fr); gap:16px; padding:18px 0; border-top:1px solid var(--njc-line); }
.njc-defrow > *{ margin:0 !important; }
.njc-defrow__t{ font-family:"Shippori Mincho",serif; font-weight:700; font-size:18px; color:var(--njc-navy); }
.njc-defrow__d{ font-size:14px; line-height:1.85; color:var(--njc-sub); }

/* Case Study */
.njc-card .wp-block-post-template{ gap:32px; }
.njc-card .wp-block-post-excerpt{ font-size:13px; color:#6a7382; }
.njc-card .wp-block-post-excerpt__more-link{ display:none; }

/* News ＋ 採用バナー */
.njc-newslist{ border-top:1px solid var(--njc-navy); }
.njc-recruit{ position:relative; background:var(--njc-pink-light); border-radius:4px; overflow:hidden; }
.njc-recruit > *{ margin:0 !important; }
.njc-recruit__img img{ width:100%; height:220px; object-fit:cover; display:block; }
.njc-recruit__body{ padding:28px 32px; }
.njc-recruit__body > *{ margin:0 0 10px !important; }
.njc-recruit .njc-eyebrow{ color:var(--njc-pink-dark); }
.njc-recruit__title{ font-family:"Shippori Mincho",serif; font-weight:600; font-size:22px; line-height:1.6; color:var(--njc-navy); }
.njc-recruit .njc-textlink a::after{ content:""; position:absolute; inset:0; }

/* フッター前CTA */
.njc-cta{ padding-block:clamp(56px,8vw,96px); }
.njc-cta h2{ margin-bottom:36px; font-size:clamp(24px,2.8vw,34px); }
.njc-ctacard{ position:relative; border:1px solid #56637a; padding:32px 64px 32px 32px; transition:background .2s; }
.njc-ctacard:hover{ background:#2a3749; }
.njc-ctacard--pink{ background:var(--njc-pink); border-color:var(--njc-pink); }
.njc-ctacard--pink:hover{ background:var(--njc-pink-dark); }
.njc-ctacard > *{ margin:0 !important; }
.njc-navy .njc-ctacard__label{ font-size:12px; letter-spacing:.2em; color:#c9cfd8; }
.njc-navy .njc-ctacard--pink .njc-ctacard__label{ color:#fbe6ee; }
.njc-ctacard__title{ font-size:20px; font-weight:500; margin-top:8px !important; }
.njc-ctacard__title a{ color:#fff; text-decoration:none; }
.njc-ctacard__title a::after{ content:"→"; position:absolute; inset:0; display:flex; align-items:center; justify-content:flex-end; padding-right:32px; font-size:20px; }

/* ---------- 11. スマートフォン ---------- */
@media (max-width:768px){
  .njc-sechead{ margin-bottom:32px; }
  .njc-numrow{ grid-template-columns:48px minmax(0,1fr); gap:6px 12px; padding:22px 4px; }
  .njc-numrow__desc{ grid-column:2; }
  .njc-numrow__arrow{ display:none; }
  .njc-newslist li{ grid-template-columns:auto 1fr; }
  .njc-newslist .wp-block-post-title{ grid-column:1 / -1; }
  .njc-hero-mark{ left:-12px; bottom:-16px; width:64px; }
  .njc-steps4 > .wp-block-column{ padding:24px 0 8px; }
  .njc-steprow{ grid-template-columns:40px minmax(0,1fr); padding:16px; }
  .njc-steprow__d{ grid-column:2; }
  .njc-defrow{ grid-template-columns:1fr; gap:6px; }
}