/* NORTHING theme main stylesheet(ブロックテーマ版) — 演出用CSS。
   セクションの余白・色・文字サイズは theme.json / サイトエディターのスタイルで管理するため、
   ここには「ブロック標準機能だけでは作れない演出」だけを最小限まとめている。 */

body{margin:0}
a{color:#141414;text-decoration:none}
a:hover{color:#6f6f6a}

/* WordPress標準の「幅を制限する」レイアウトは、画面がとても広い時にコンテンツの最大幅を
   制限するだけで、左右の余白(パディング)そのものは含まれない。そのため、独自に余白を
   指定していないセクションが、ノートPC・タブレット・スマホを含む多くの画面幅で画面の端に
   張り付いてしまう。ここで全セクション共通の最低限の左右余白を確保する
   (個別にpaddingを指定しているセクションは、後述のより詳細なCSSがそちらを優先する)。 */
.wp-block-post-content > .wp-block-group,
.wp-block-post-content > .wp-block-cover {
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;
}
@media (min-width: 600px) {
  .wp-block-post-content > .wp-block-group,
  .wp-block-post-content > .wp-block-cover {
    padding-left: 48px;
    padding-right: 48px;
  }
}
/* 実績一覧・実績詳細ページは post-content を経由しないテンプレート直書きのため、
   <main>自体に同じ考え方で左右の余白を確保する。 */
.northing-content-main{padding-left:24px;padding-right:24px;box-sizing:border-box}
@media (min-width:600px){
  .northing-content-main{padding-left:48px;padding-right:48px}
}

/* ---------- ロゴ(サイトロゴ画像。外観 > エディター > サイト基本情報 からアップロード) ---------- */
.wp-block-site-logo{display:flex;align-items:center;margin:0}
.northing-site-logo img{display:block !important;width:auto !important;height:40px !important;max-height:40px !important;transition:filter .3s ease}
.northing-site-logo--footer img{height:28px !important;max-height:28px !important}

/* ---------- ヘッダー: 固定表示・Home用の透過/スクロール色替え ---------- */
.northing-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:nowrap;position:sticky;top:0;z-index:50;padding:22px 48px;background:rgba(250,250,248,0.92);backdrop-filter:blur(10px);border-bottom:1px solid rgba(20,20,20,0.08);will-change:background}
.northing-header .northing-nav a,
.northing-header .wp-block-navigation-item__content{font-family:'Inter',sans-serif;font-size:15px;font-weight:600;letter-spacing:.06em;color:#141414 !important;text-decoration:none}
.northing-header .northing-nav a:hover,
.northing-header .wp-block-navigation-item__content:hover{color:#6f6f6a !important}

.northing-header--home{position:fixed;left:0;right:0;top:0;padding:26px 48px;background:transparent;backdrop-filter:none;border-bottom-color:transparent;transition:background .3s ease,border-color .3s ease}
.northing-header--home .northing-site-logo img{filter:brightness(0) invert(1)}
.northing-header--home .northing-nav a,
.northing-header--home .wp-block-navigation-item__content{color:#fff !important}
.northing-header--home.is-scrolled{background:rgba(250,246,240,0.92);backdrop-filter:blur(10px);border-bottom-color:rgba(20,20,20,0.08)}
.northing-header--home.is-scrolled .northing-site-logo img{filter:none}
.northing-header--home.is-scrolled .northing-nav a,
.northing-header--home.is-scrolled .wp-block-navigation-item__content{color:#141414 !important}

/* ---------- モバイル用ハンバーガーメニュー(狭い画面でnorthing-navが自動的に切り替わる) ---------- */
.northing-nav .wp-block-navigation__responsive-container-open{color:#141414;padding:0}
.northing-header--home .wp-block-navigation__responsive-container-open{color:#fff !important}
.northing-header--home.is-scrolled .wp-block-navigation__responsive-container-open{color:#141414 !important}
.northing-nav .wp-block-navigation__responsive-container-open svg{width:26px;height:26px}
.wp-block-navigation__responsive-container.is-menu-open{background:#faf6f0 !important}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content{color:#141414 !important;font-family:'Inter',sans-serif;font-weight:700;font-size:22px;letter-spacing:.04em}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close{color:#141414}

/* フッターは常に暗い背景なのでロゴを常時白に */
.northing-footer .northing-site-logo img{filter:brightness(0) invert(1)}

/* ---------- フッター内の行(ロゴ+ナビ / コピーライト+所在地) ---------- */
.northing-footer-top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:32px}
.northing-footer-bottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}

/* ---------- セクション見出し行(見出し + 「一覧を見る」リンク) ---------- */
.northing-section-heading-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px}

/* ---------- 作品詳細: 日付+カテゴリの行 ---------- */
.northing-meta-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}

/* ---------- ヒーロー(Home冒頭のCoverブロック) ---------- */
/* 透過ヘッダーはposition:fixedで高さ0になるが、WordPress標準のブロック間余白が
   次のブロック(本文の先頭=ヒーロー)に自動で付いてしまい、上部に隙間が見えるため打ち消す */
.wp-site-blocks > .wp-block-post-content{margin-top:0 !important}
.northing-hero{overflow:hidden;padding:0 64px 100px !important}
.northing-hero .wp-block-cover__background,
.northing-hero img.wp-block-cover__image-background{animation:northingHeroIn 1.1s cubic-bezier(.22,1,.36,1) forwards}
@keyframes northingHeroIn{from{transform:scale(1.05);filter:brightness(.75) blur(6px)}to{transform:scale(1);filter:brightness(1) blur(0)}}
@media (prefers-reduced-motion: reduce){
  .northing-hero .wp-block-cover__background,
  .northing-hero img.wp-block-cover__image-background{animation:none}
}
.northing-hero{position:relative}
.northing-hero .wp-block-cover__inner-container{position:static;width:100%;max-width:720px}
.northing-hero-vertical-label{position:absolute;right:56px;top:50%;transform:translateY(-50%);writing-mode:vertical-rl;font-family:'Oswald',sans-serif;font-weight:500;font-size:13px;letter-spacing:.32em;color:rgba(245,245,245,.55);text-transform:uppercase;margin:0;white-space:nowrap;z-index:2}
.northing-hero-heading-row{display:flex;align-items:stretch;gap:24px}
.northing-hero-bar{width:2px;background:rgba(245,245,245,.5);flex-shrink:0;align-self:stretch}
.northing-hero-btn a{transition:background .4s cubic-bezier(.22,1,.36,1),color .4s cubic-bezier(.22,1,.36,1)}
.northing-hero-btn a:hover{background:#f5f5f5 !important;color:#111111 !important}
@media (max-width:900px){
  .northing-hero{padding:0 32px 64px !important}
  .northing-hero-vertical-label{display:none}
}

/* ---------- WORKSグリッド(Home/Works一覧 共通のカードホバー演出) ----------
   カードは独自のGroupブロックで囲わず、Post Templateが自動生成する<li>を
   そのままカードとして扱う(標準ブロックの組み合わせだけで完結させ、
   エディター側の「無効なコンテンツ」誤検知を避けるため)。 */
.northing-works-grid .wp-block-post-template{gap:40px 32px}
.northing-works-grid .wp-block-post-template > *{position:relative;overflow:hidden;cursor:pointer;list-style:none;aspect-ratio:16/9}
.northing-works-grid .wp-block-post-template > * .wp-block-post-featured-image{margin:0;height:100%}
.northing-works-grid .wp-block-post-template > * .wp-block-post-featured-image img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.22,1,.36,1)}
.northing-works-grid .wp-block-post-template > *:hover .wp-block-post-featured-image img{transform:scale(1.03)}
.northing-works-grid .wp-block-post-template > *::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.5) 100%);opacity:0;transition:opacity .38s ease;pointer-events:none}
.northing-work-card-title{position:absolute;left:20px;right:56px;bottom:38px;opacity:0;transform:translateY(10px);transition:opacity .38s cubic-bezier(.22,1,.36,1),transform .38s cubic-bezier(.22,1,.36,1);font-family:'Noto Sans JP',sans-serif !important;font-size:16px !important;font-weight:700 !important;color:#fff !important;margin:0 !important;line-height:1.4;text-shadow:0 1px 6px rgba(0,0,0,.35);z-index:1;text-decoration:none !important}
.northing-work-card-title a{color:#fff !important;text-decoration:none !important}
.northing-work-card-meta{position:absolute;left:20px;right:56px;bottom:18px;opacity:0;transform:translateY(10px);transition:opacity .38s cubic-bezier(.22,1,.36,1) .05s,transform .38s cubic-bezier(.22,1,.36,1) .05s;font-family:'Inter',sans-serif !important;font-size:11px !important;letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.85) !important;margin:0 !important;z-index:1}
.northing-work-card-meta a{color:rgba(255,255,255,.85) !important;text-decoration:none !important}
@media (hover:hover) and (pointer:fine){
  .northing-works-grid .wp-block-post-template > *:hover::before{opacity:1}
  .northing-works-grid .wp-block-post-template > *:hover .northing-work-card-title,
  .northing-works-grid .wp-block-post-template > *:hover .northing-work-card-meta{opacity:1;transform:translateY(0)}
}
@media (hover:none), (pointer:coarse){
  .northing-works-grid .wp-block-post-template > *::before{opacity:1}
  .northing-work-card-title,.northing-work-card-meta{opacity:1;transform:translateY(0)}
}
@media (max-width:900px){
  .northing-works-grid .wp-block-post-template{grid-template-columns:repeat(2,1fr) !important}
}
@media (max-width:560px){
  .northing-works-grid .wp-block-post-template{grid-template-columns:1fr !important}
}

/* ---------- ABOUTティザーセクション(Home、WORKS直下) ---------- */
.northing-about-teaser .wp-block-cover__inner-container{max-width:640px;margin:0 auto;text-align:center}
.northing-about-teaser-badge{display:table;margin:0 auto 22px;background:rgba(20,20,20,.5);border:1px solid rgba(255,255,255,.35);color:#fff !important;font-family:'Inter',sans-serif;font-size:12px;font-weight:600;letter-spacing:.08em;padding:9px 20px}
.northing-about-teaser h2{margin:0 0 18px}
.northing-about-teaser-lead{margin:0 0 16px !important;line-height:1.7}
.northing-about-teaser-body{color:rgba(255,255,255,.78) !important;line-height:1.9;margin:0 0 14px !important}
/* 背景を固定表示(パララックス)にする: Coverブロックの<img>はbackground-attachmentが効かないため、
   JS(initFixedBackgroundCovers)でimgのURLをこの要素自身のbackground-imageへコピーしてから適用する */
.northing-fixed-bg-cover{background-size:cover;background-position:center}
.northing-fixed-bg-cover.has-northing-fixed-bg .wp-block-cover__image-background{opacity:0}
@media (min-width:783px){
  .northing-fixed-bg-cover.has-northing-fixed-bg{background-attachment:fixed}
}

/* ---------- SERVICEセクション(Home) ---------- */
html{scroll-behavior:smooth}
#service{scroll-margin-top:110px}
.northing-service{padding-left:24px !important;padding-right:24px !important;box-sizing:border-box}
.northing-service-label{font-family:'Oswald',sans-serif;font-size:13px;font-weight:500;letter-spacing:.12em;color:#fff;margin:0 auto 10px;max-width:1120px}
.northing-service-label-jp{font-family:'Noto Sans JP',sans-serif;font-size:12px;font-weight:400;letter-spacing:.04em;color:rgba(255,255,255,.6);margin-left:10px}
.northing-service h2{margin:0 auto 10px;line-height:1.3;max-width:1120px}
.northing-service-intro{color:rgba(255,255,255,.75) !important;line-height:1.7;margin:0 auto 28px !important;max-width:1120px}
.northing-service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:stretch;max-width:1120px;margin-left:auto;margin-right:auto}
.northing-service-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:8px;overflow:hidden;display:flex;flex-direction:column;height:100%}
.northing-service-card-cover{margin:0 !important;border-radius:0}
.northing-service-card-number{font-family:'Oswald',sans-serif !important;font-size:20px !important;font-weight:600 !important;color:#fff !important;margin:0 !important}
.northing-service-card-title{font-family:'Inter',sans-serif;font-weight:700;font-size:15px;color:#fff;margin:10px 16px 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.northing-service-card-jp{font-family:'Noto Sans JP',sans-serif;font-size:11px;color:rgba(255,255,255,.55);margin:0 16px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.northing-service-card-desc{font-family:'Noto Sans JP',sans-serif;font-size:12px;line-height:1.5;color:rgba(255,255,255,.7);margin:0 16px 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.northing-service-card-arrow{margin:8px 12px 12px;display:flex;justify-content:flex-end}
.northing-service-card-arrow a{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border:1px solid rgba(255,255,255,.4);border-radius:50%;color:#fff !important;text-decoration:none !important;font-size:12px;transition:background .25s ease,border-color .25s ease}
.northing-service-card-arrow a:hover{background:#fff;color:#141414 !important;border-color:#fff}
@media (max-width:900px){
  .northing-service-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .northing-service-grid{grid-template-columns:1fr}
}

/* ---------- ページネーション(Query Pagination) ---------- */
.northing-pagination{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:var(--wp--preset--spacing--60)}

/* ---------- 関連作品ブロック(northing/related-works) ---------- */
.northing-related-works{padding:var(--wp--preset--spacing--70) 0;max-width:640px;margin:0 auto}
.northing-related-works-label{font-family:'Inter',sans-serif;font-size:12px;letter-spacing:.28em;color:#9a958a;text-transform:uppercase;text-align:center;margin:0 0 32px}
.northing-related-works-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px 20px}
.northing-related-works .northing-work-card{background:#fff;display:flex;flex-direction:column}
.northing-related-works .northing-work-card-media{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden}
.northing-related-works .northing-work-card-media img{transition:transform .6s cubic-bezier(.22,1,.36,1),filter .6s ease}
.northing-related-works .northing-work-card:hover .northing-work-card-media img{transform:scale(1.03);filter:brightness(.88)}
.northing-related-works .northing-work-card-body{padding:14px 16px 18px}
.northing-related-works .northing-work-card-body-title{font-family:'Noto Sans JP',sans-serif;font-size:14px;font-weight:700;line-height:1.5;margin:0 0 10px;transition:transform .4s cubic-bezier(.22,1,.36,1)}
.northing-related-works .northing-work-card:hover .northing-work-card-body-title{transform:translateY(-4px)}
.northing-related-works .northing-work-card-meta-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.northing-related-works .northing-badge{display:inline-block;background:#141414;color:#fff;font-family:'Noto Sans JP',sans-serif;font-size:10px;font-weight:700;padding:5px 10px}
.northing-related-works .northing-date{font-family:'Inter',sans-serif;font-size:11px;color:#9a9a94}
@media (max-width:700px){
  .northing-related-works-grid{grid-template-columns:1fr}
}

/* ---------- セクションのスクロールフェードイン(汎用: className "northing-reveal") ---------- */
.northing-reveal{opacity:0;transform:translateY(24px);transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1)}
.northing-reveal.is-in-view{opacity:1;transform:translateY(0)}
@media (prefers-reduced-motion: reduce){
  .northing-reveal{opacity:1;transform:none;transition:none}
}

/* ---------- Contactページ見出し(見出し+下線+補足文) ---------- */
.northing-contact-separator{margin:20px 0 32px;border-top:1px solid rgba(20,20,20,.15)}

/* ---------- お問い合わせフォーム(northing/contact-form) ---------- */
.northing-contact-form{display:flex;flex-direction:column;gap:26px;max-width:640px}
.northing-honeypot{position:absolute;left:-9999px}
.northing-field label{display:block;font-family:'Noto Sans JP',sans-serif;font-weight:700;font-size:15px;color:#141414;margin-bottom:10px}
.northing-required{color:#d0342c}
.northing-field input,.northing-field textarea{width:100%;box-sizing:border-box;border:1px solid rgba(20,20,20,.18);border-radius:6px;background:#fff;padding:13px 16px;font-family:'Noto Sans JP',sans-serif;font-size:16px;outline:none;transition:border-color .2s ease}
.northing-field input::placeholder,.northing-field textarea::placeholder{color:#a8a29a}
.northing-field input:focus,.northing-field textarea:focus{border-color:#141414}
.northing-field textarea{resize:vertical}
.northing-submit-btn{align-self:flex-start;margin-top:8px;padding:16px 34px;background:#141414;color:#fff;border:none;border-radius:6px;font-family:'Inter',sans-serif;font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:background .25s ease}
.northing-submit-btn:hover{background:#2b2b2b}
.northing-contact-success{padding:48px;border:1px solid rgba(20,20,20,.12);border-radius:6px}
.northing-contact-success h3{font-family:'Noto Sans JP',sans-serif;font-size:20px;font-weight:700;margin:0 0 14px}
.northing-contact-success p{font-family:'Noto Sans JP',sans-serif;font-size:15px;line-height:1.9;color:#4a4a46;margin:0}

/* ---------- ページネーション(archive-work.html の Query Pagination) ---------- */
.wp-block-query-pagination .page-numbers{font-family:'Inter',sans-serif;font-size:13px;font-weight:500;text-decoration:none;width:48px;height:48px;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;color:#141414;background:#fff;border:1px solid rgba(20,20,20,.18);transition:background .25s ease}
.wp-block-query-pagination .page-numbers.current{background:#141414;color:#fff;border-color:#141414}
.wp-block-query-pagination .page-numbers:not(.current):hover{background:#f0ece3}