/*
Theme Name: Eiko Corporate
Theme URI: 
Author: 
Author URI: 
Description: 株式会社永光 コーポレートサイト用フルサイト編集（FSE）テーマ。支給HTML（eiko-corporate-site.html）をベースに、写真・文言を管理画面から編集可能にしています。図版（SVG）とデザイン設定（配色・フォント・余白）は編集対象外です。
Version: 0.2.2
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 7.4
Text Domain: eiko-corporate
*/

/*
このファイルは WordPress のテーマ識別用メタデータのみを持たせています。
実際のスタイルは theme.json（グローバル設定）と、必要に応じて各パターン内の
インラインスタイル／このファイル下部の最小限の補助CSSで管理します。
*/

/* ロゴSVGは元HTMLでは背景画像（.brand-logoにbackground-image）ですが、
   検索性のためインラインSVGにしています。<svg>自体が持つwidth/height属性を
   .brand-logoの40x40に強制するため、この最小限のルールだけ残します。
   flex方向のレイアウト（gap等）は下記の .brand ルール（reference移植分）が正なので、
   ここでは重複定義しません。 */
.site-header .brand-logo svg {
	display: block;
	height: 40px;
	width: 40px;
}

/* ============================================================
   互換用エイリアス
   支給HTMLのコンポーネントCSS（下記）は --ink や --gold といった
   :root変数を参照しています。theme.json側は
   --wp--preset--color--ink のようなプリセット変数名になるため、
   ここで元の変数名にエイリアスして、下のCSSをそのまま使えるようにします。
   ============================================================ */
:root {
	--ink: var(--wp--preset--color--ink);
	--ink-soft: var(--wp--preset--color--ink-soft);
	--ink-faint: var(--wp--preset--color--ink-faint);
	--paper: var(--wp--preset--color--paper);
	--paper-2: var(--wp--preset--color--paper-2);
	--paper-3: var(--wp--preset--color--paper-3);
	--gold: var(--wp--preset--color--gold);
	--gold-deep: var(--wp--preset--color--gold-deep);
	--line: var(--wp--preset--color--line);
	--maxw: var(--wp--style--global--content-size, 1180px);
}

/* ============================================================
   コンポーネントCSS（支給HTMLの<style>から移植）
   図版のレイアウト、カード、テーブル等、theme.jsonのデザイントークン
   だけでは表現しきれない構造用CSSです。配色・フォント・余白の
   トークン自体はtheme.json側が正となります。
   ============================================================ */

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;overflow-x:hidden;background:var(--paper);color:var(--ink);
  font-family:"Noto Sans JP",sans-serif;font-size:clamp(16px,1.1vw,17.5px);
  line-height:1.95;letter-spacing:.04em;-webkit-font-smoothing:antialiased;
}
/* iOS Safariは実機のラバーバンド（慣性オーバースクロール）時に、html/body
   に伝播したoverflow-x:hiddenだけでは横スクロールを止めきれないことがある
   （.site-headerのposition:fixedや.hero等のwidth:100vwによるfull-bleedとの
   組み合わせで発生。デスクトップ版Safariのレスポンシブデザインモードでは
   再現しない）。WordPressコアがブロックテーマの出力を必ず包む実要素
   .wp-site-blocks（wp-includes/block-template.php）にも同じ指定を掛けて、
   より確実にクリップする。 */
.wp-site-blocks{overflow-x:hidden;}
a{color:inherit;text-decoration:none;}
/* 日本語の改行位置：文節で折り返し、行末の禁則を守る */
body,p,li,h1,h2,h3,h4,h5,td,th,dd,dt,span,a{line-break:strict;word-break:auto-phrase;overflow-wrap:break-word;}
h1,h2,h3,h4,h5,.service-name,.ov-card h4,.svc-card h5,.creed-item h4,.sec-title,.hero-lead,.phil-lead,.contact-lead{text-wrap:balance;}
p,li,.sec-note,.diagram-cap{text-wrap:pretty;}
h1,h2,h3,h4{font-family:"Zen Old Mincho",serif;font-weight:500;line-height:1.5;letter-spacing:.06em;margin:0;}
p{margin:0 0 1.4em;}
p:last-child{margin-bottom:0;}
figure{margin:0;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;}
[id]{scroll-margin-top:79px;}
/* 79px = .header-innerの高さ78px + border-bottom 1px（固定ヘッダーの実高さ）。
   管理バー表示時、固定ヘッダー自体は.admin-bar .site-header{top:...}分
   下にずれるが、ブラウザ側もhtml要素の管理バー用margin-top分を
   アンカー計算に織り込むため、この79pxに管理バーの高さを別途
   足す必要はない（実測で確認済み。足すと逆に隙間ができる）。
   以前はsection[id]だけに絞っていたが、.svc-group（<div>）など
   セクション未満の単位にもアンカーを付けるようになったため、
   idを持つ要素全般に対象を広げている。 */
.sec-en{font-family:"Cormorant Garamond",serif;font-size:13.5px;letter-spacing:.22em;color:var(--gold-deep);display:block;margin-bottom:14px;}
.sec-title{font-size:clamp(24px,2.6vw,32px);}
.sec-note{max-width:34em;color:var(--ink-soft);font-size:15.5px;line-height:2.05;}
.head-row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:40px;}
/* .full-bleedは「constrainedレイアウトの中に入れ子になった画像」を
   画面幅いっぱいにはみ出させるための独自クラス（reference由来）。
   このとき画像にはWordPress側の位置調整用にalignfullも付与しているが、
   is-layout-constrained配下でalignfullが「直接の子」ではなく入れ子に
   なっている場合、core（global-styles-inline-css）が
   ".has-global-padding :where(...) > .alignfull{margin-left:0;margin-right:0}"
   を詳細度(0,2,0)で当ててきて、このルールのmargin-leftを打ち消して
   しまう。かといってalignfullを外すと、今度は逆に
   ".is-layout-constrained > :where(:not(.alignfull)){max-width:...;
   margin-left:auto !important}" が適用されてしまい、!important付きで
   中央寄せの1180px幅に戻ってしまう。どちらの分岐でも通常の詳細度勝負
   では上書きできないため、!importantで確実に画面幅いっぱいに広げる。 */
.full-bleed{width:100vw !important;margin-left:calc(50% - 50vw) !important;}
.todo{color:var(--gold-deep);}

/* 画像枠 */
/* 斜線プレースホルダー柄は.ph自体の背景。画像未アップロード時や、
   後から画像を外した場合のフォールバックとして残している
   （現在17箇所すべて実写真に差し替え済みのため通常は隠れて見えない）。 */
.ph{position:relative;overflow:hidden;background:repeating-linear-gradient(45deg,#f2eee5,#f2eee5 12px,#eae4d6 12px,#eae4d6 24px);}
.ph img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;display:block;}

/* 図解 */
.diagram{margin:40px 0 0;}
.diagram-frame{background:#fff;border:1px solid var(--line);padding:30px 34px 26px;}
.diagram-frame svg{width:100%;height:auto;display:block;}
.diagram-title{font-family:"Zen Old Mincho",serif;font-size:18px;letter-spacing:.1em;margin-bottom:22px;padding-bottom:12px;border-bottom:1px solid var(--line);}
.diagram-cap{margin-top:16px;font-size:13.5px;color:var(--ink-soft);line-height:1.9;letter-spacing:.05em;}

/* header */
.site-header{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(250,248,243,.94);backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:border-color .3s;}
.site-header.scrolled{border-bottom-color:var(--line);}
.header-inner{max-width:1440px;margin:0 auto;padding:0 28px;height:78px;display:flex;align-items:center;justify-content:space-between;gap:32px;}
.brand{display:flex;align-items:center;gap:16px;flex:none;}
.brand-logo{background:var(--logo) no-repeat center/contain;width:40px;height:40px;flex:none;}
.brand-name{font-family:"Zen Old Mincho",serif;font-size:17px;letter-spacing:.14em;white-space:nowrap;}
.gnav{display:flex;align-items:center;gap:28px;}
.gnav a{font-size:14px;letter-spacing:.1em;color:var(--ink-soft);position:relative;padding:6px 0;white-space:nowrap;}
.gnav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--gold);transition:right .35s;}
.gnav a:hover::after,.gnav a:focus-visible::after{right:0;}
.nav-toggle{display:none;background:none;border:0;padding:10px;cursor:pointer;}
.nav-toggle span{display:block;width:22px;height:1px;background:var(--ink);margin:5px 0;}

/* .gnavをcore/navigationブロック化した際の調整。
   block-library側（wp-includes/blocks/navigation/style.css）が
   .wp-block-navigation-item__content の文字色を詳細度を上げてinheritに
   強制しているため、同じ手法で上書きし直す。お問い合わせ(.nav-cta)は
   ブロックエディタの「追加CSSクラス」がリンク<a>ではなく親の<li>
   （.wp-block-navigation-item）に付くため、内側のリンクへ個別に
   スタイルを当て直している（元の.nav-cta単体ルールは<li>側にもクラスが
   付いて二重枠になるため廃止した）。 */
.gnav .wp-block-navigation__container{gap:28px;}
.gnav .wp-block-navigation-item__content.wp-block-navigation-item__content{color:var(--ink-soft);}
.gnav .wp-block-navigation-item.nav-cta>.wp-block-navigation-item__content{border:1px solid var(--gold);color:var(--gold-deep);padding:9px 20px;font-size:13.5px;transition:background .3s,color .3s;}
.gnav .wp-block-navigation-item.nav-cta:hover>.wp-block-navigation-item__content{background:var(--gold);color:#fff;}

/* 管理バー（wp-admin バー）対応：ログイン時、固定ヘッダーが管理バーと
   重ならないようにする。--wp-admin--admin-bar--height はWordPress core
   （admin-bar.css）が.admin-barクラス表示時に自動定義するCSS変数で、
   32px（PC）→46px（782px以下）と自動で切り替わる。600px以下では
   管理バー自体がposition:absoluteになり画面に固定されなくなるため、
   ヘッダー側のオフセットも合わせて解除する。 */
.admin-bar .site-header{top:var(--wp-admin--admin-bar--height,32px);}
.admin-bar .gnav.open{top:calc(78px + var(--wp-admin--admin-bar--height,32px));}
@media screen and (max-width:600px){
	.admin-bar .site-header{top:0;}
	.admin-bar .gnav.open{top:78px;}

	/* スマホ幅では管理バー自体を非表示にする。WordPress coreは
	   #wpadminbarとは別に、html要素へ管理バー分のmargin-topを
	   !important付きインラインCSSで自動追加している（wp-includes/
	   admin-bar.php: wp_enqueue_admin_bar_bump_styles）。管理バーを
	   非表示にするだけだとこの余白が残って上部に空白ができるため、
	   margin-topも同時に打ち消す。この余白はコア側がadmin-barという
	   スタイルハンドルへの追加CSSとして出力しており、テーマの
	   style.cssより先に読み込まれるため、同じ詳細度でも後勝ちで
	   このルールが有効になる。 */
	#wpadminbar{display:none !important;}
	html{margin-top:0 !important;}

	/* admin-bar.cssはhtml要素に無条件で
	   scroll-padding-top:var(--wp-admin--admin-bar--height)を設定しており
	   （.admin-barクラスの有無に関係しない、コア側のグローバルルール）、
	   このスマホ幅では管理バー自体を上で非表示にしているにもかかわらず
	   46px分がアンカースクロール時のオフセットとして残ってしまう。
	   ここで打ち消す。 */
	html{scroll-padding-top:0 !important;}
}

/* hero */
.hero{position:relative;height:100vh;min-height:620px;width:100vw;margin-left:calc(50% - 50vw);}
.hero .ph{position:absolute;inset:0;}
/* 管理バー表示時は、html要素にadmin-bar分のmargin-topが乗る（前述の
   .admin-barブロック参照）ため、単純に100vhのままだと.heroの下端が
   その分だけ実際のファーストビュー（見えている範囲）からはみ出す。
   管理バーの高さ分を差し引いて、下端が画面ぴったりに収まるようにする。
   600px以下は管理バー自体を非表示にしているので100vhのままでよい。 */
.admin-bar .hero{height:calc(100vh - var(--wp-admin--admin-bar--height,32px));min-height:calc(620px - var(--wp-admin--admin-bar--height,32px));}
@media screen and (max-width:600px){
	.admin-bar .hero{height:100vh;min-height:620px;}
}
.hero-inner{position:absolute;inset:0;z-index:3;display:flex;align-items:center;}
.hero-inner .wrap{width:100%;}
/* .hero-cardを3回重ねて詳細度を(0,3,0)まで上げている。.wrap内の最初の
   子要素であるため、WordPress組み込みの
   :root :where(.is-layout-flow) > :first-child{margin-block-start:0}
   （:rootと:first-childで詳細度(0,2,0)）と margin-top が同点になり、
   読み込み順次第で（実サイトでは勝つがサイトエディタのプレビューでは
   負けて）margin-topが消えてしまう現象があったため。 */
.hero-card.hero-card.hero-card{max-width:620px;background:rgba(250,248,243,.94);padding:clamp(36px,4vw,60px);margin-top:60px;}
.hero-sub{font-family:"Zen Old Mincho",serif;font-size:14px;letter-spacing:.24em;color:var(--gold-deep);margin-bottom:26px;}
.hero-lead{font-size:clamp(28px,3.6vw,48px);line-height:1.65;letter-spacing:.05em;}
.hero-rule{width:64px;height:1px;background:var(--gold);margin:32px 0;}
.hero-text{font-size:15.5px;line-height:2.05;color:var(--ink-soft);}
/* エディタ内ではGutenbergの.wp-block{position:relative}と詳細度が同じになり
   position:absoluteが打ち消されるため、.hero配下に限定して詳細度を上げている */
.hero .hero-scroll{position:absolute;left:50%;bottom:30px;z-index:3;transform:translateX(-50%);font-family:"Cormorant Garamond",serif;font-size:11px;letter-spacing:.2em;color:var(--ink-soft);background:rgba(250,248,243,.9);padding:8px 14px;width:max-content;}


/* philosophy */
.philosophy{background:var(--paper-2);padding:84px 0;}

.phil-lead{font-family:"Zen Old Mincho",serif;font-size:clamp(24px,3vw,36px);line-height:1.85;letter-spacing:.08em;margin-bottom:32px;}
.creed{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:8px;}
.creed-item{background:var(--paper-2);padding:30px 28px;}
.creed-icon{display:block;width:46px;height:46px;margin-bottom:18px;}
.creed-item h4{font-family:"Zen Old Mincho",serif;font-size:19px;letter-spacing:.08em;margin-bottom:12px;}
.creed-item p{font-size:15px;color:var(--ink-soft);line-height:2;margin:0;text-wrap:auto;}

/* business */
.business{padding:84px 0 0;}
.svc-head .service-target{margin-bottom:0;}
/* .biz（製造請負・アウトソーシングの内側ラッパー）は、自分が属する
   is-layout-constrained（business-manufacturing.phpの<section>）の
   最後の子要素になるため、WordPress coreの
   ":root :where(.is-layout-constrained) > :last-child{margin-block-end:0px}"
   （詳細度は.bizのmargin-bottomと同じ0,1,0）に打ち消され、ブライダル
   セクションとの間隔が詰まってしまう。!importantで確実に確保する。
   width/margin-leftを.full-bleedと同じ手法（100vw基準）で強制しているのは、
   .bizがalign:full＋is-layout-constrainedのままだと、core側の
   has-global-padding（28px）とalignfullの打ち消しマージン（-28px）の
   正味の効果が「.bizが何階層目にあるか」に依存してしまうため。
   business-manufacturing.php内の.bizは.businessの内側で両者が正味0に
   なっていたが、ルート直下に置かれるbusiness-bridal.php側の.bizは
   正味+28pxが残り、内側の.wrapの28pxと合算されて左右56px（二重パディング）
   になっていた。ビューポート基準の指定にすることで祖先の階層に依存せず
   常に画面幅いっぱい・正味0インセットになり、内側の.wrapが28pxを
   一度だけ効かせる形になる。 */
.biz{width:100vw !important;margin-left:calc(50% - 50vw) !important;margin-bottom:84px !important;padding-top:44px;padding-left:0;padding-right:0;border-top:2px solid var(--ink);}
.biz-head{padding:0;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:70px;align-items:start;}
.biz-num{font-family:"Cormorant Garamond",serif;font-size:15px;letter-spacing:.24em;color:var(--gold-deep);margin-bottom:14px;}
.biz-title{font-size:clamp(26px,3.2vw,40px);line-height:1.5;margin-bottom:16px;}
.biz-for{font-size:14px;letter-spacing:.1em;color:var(--ink-faint);}
.biz-head p{color:var(--ink-soft);font-size:16px;line-height:2.05;}
/* デスクトップ幅では左カラムの上端が.biz-num（「01」等）の高さぶん
   .biz-titleより上にあるため、右カラムの本文をそのまま上揃えにすると
   見出しより数字とラインが揃ってしまう。右カラムにだけ.biz-numの高さ分
   （実測+margin-bottom込みで約47px）のpadding-topを足し、本文の1行目が
   見出しの1行目と視覚的に揃うようにしている。1000px以下は.biz-headが
   1カラムに積み上がるため不要（付けると余計な空白になる）。 */
@media (min-width:1001px){
	.biz-head .fadein-right{padding-top:47px;}
}

/* サービス */
.service-name{font-size:clamp(21px,2.3vw,27px);line-height:1.65;margin-bottom:12px;}
.service-name .lat{font-family:"Cormorant Garamond",serif;letter-spacing:.14em;}
.service-target{font-size:13.5px;letter-spacing:.1em;color:var(--gold-deep);line-height:1.9;margin-bottom:24px;}
.svc-text p{font-size:15.5px;color:var(--ink-soft);line-height:2.05;}
.svc-list{list-style:none;margin:20px 0 0;padding:0;}
.svc-list li{font-size:15px;color:var(--ink-soft);padding-left:20px;position:relative;margin-bottom:9px;line-height:1.9;}
.svc-list li::before{content:"";position:absolute;left:0;top:14px;width:9px;height:1px;background:var(--gold);}
.svc-link{display:inline-block;margin-top:20px;font-size:14px;letter-spacing:.08em;color:var(--gold-deep);border-bottom:1px solid var(--line);padding-bottom:3px;transition:border-color .3s;}
.svc-link:hover{border-bottom-color:var(--gold);}

.svc-process{margin-top:40px;}
.svc-process-title{font-family:"Zen Old Mincho",serif;font-size:18px;letter-spacing:.1em;margin-bottom:22px;padding-bottom:12px;border-bottom:1px solid var(--line);}
.svc-cards{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
.svc-card{background:#fff;padding:26px 20px;}
.svc-card-icon{display:block;width:40px;height:40px;margin-bottom:16px;}
.svc-card h5{font-family:"Zen Old Mincho",serif;font-size:16px;font-weight:500;letter-spacing:.05em;margin:0 0 10px;line-height:1.6;}
.svc-card p{font-size:13.5px;color:var(--ink-soft);line-height:1.85;margin:0;}
.svc-base{background:var(--gold);color:#fff;padding:26px 30px;margin-top:16px;}
.svc-base-title{font-family:"Zen Old Mincho",serif;font-size:17px;letter-spacing:.08em;margin:0 0 10px;}
.svc-base-text{font-size:13.5px;color:#fff5e4;line-height:1.9;margin:0;}

.ov-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);}
.ov-card{background:#fff;padding:28px 20px 30px;}
.ov-badge{display:inline-block;border:1px solid var(--gold);color:var(--gold-deep);font-size:12.5px;letter-spacing:.08em;padding:4px 12px;margin-bottom:20px;}
.ov-chain{display:block;width:100%;max-width:260px;height:auto;margin-bottom:18px;}
.ov-card h4{font-family:"Zen Old Mincho",serif;font-size:16px;font-weight:500;letter-spacing:.02em;line-height:1.65;margin:0 0 10px;}
.ov-card h4 .lat{font-family:"Cormorant Garamond",serif;letter-spacing:.14em;font-size:19px;}
.ov-card p{font-size:13.5px;color:var(--ink-soft);line-height:1.9;margin:0;}
.ov-note{font-size:13.5px;color:var(--ink-soft);margin:18px 0 0;line-height:1.9;}

/* .svc-block.svc-blockと二重にしているのは詳細度を(0,2,0)まで上げるため。
   WordPress組み込みの:root :where(.is-layout-flex){gap:0}（詳細度(0,1,0)、
   :root分）とgapが同点になり、読み込み順次第で（実サイトでは勝つが
   サイトエディタのプレビューでは負けて）gapが0になり画像とテキストの
   間隔が消えてしまう現象があったため。 */
.svc-block.svc-block{padding:0;margin-bottom:0;display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:48px;align-items:start;}
/* .svc-blockはcore/columnsブロックなので、block-library側の
   ".wp-block-columns.is-layout-flex{display:flex}" に詳細度で勝たれて
   実際はflexとして描画され、grid-template-columnsのfr比率（.82:1.18）が
   効かず、両カラムが".wp-block-column{flex-grow:1}"により均等（1:1）に
   なってしまう（結果としてsvc-photoが意図より大きく表示される）。
   flex-basis:0の状態でflex-growだけをfr比率と同じ値に上書きすることで、
   grid版と同じ配分になるようにしている。 */
.svc-side{flex-grow:.82 !important;}
.svc-text{flex-grow:1.18 !important;}
.svc-side-icon{display:block;width:46px;height:46px;margin-bottom:20px;}
.svc-tags{margin:14px 0 0;}
.svc-tag{display:inline-block;border:1px solid var(--line);font-size:12.5px;letter-spacing:.05em;padding:5px 11px;margin:0 6px 6px 0;color:var(--ink-soft);}
.svc-nums{display:flex;gap:34px;margin-top:26px;}
/* .svc-numはcore/paragraphブロック（<p>）で実装しているため、汎用の
   p{margin:0 0 1.4em}が効き、2つ並んだうち最初の要素だけ下マージンが
   残ってしまう（2つ目はp:last-child{margin-bottom:0}でリセットされる）。
   これにより数字・キャプションの行が左右で揃わなくなるため、0にする。 */
.svc-num{display:flex;flex-direction:column;margin:0;}
.svc-num .n{font-family:"Cormorant Garamond",serif;font-size:36px;line-height:1.1;color:var(--ink);}
.svc-num .n small{font-size:14px;margin-left:3px;}
.svc-num .c{font-size:12.5px;color:var(--ink-soft);margin-top:6px;line-height:1.7;}
.svc-msg{font-family:"Cormorant Garamond",serif;font-size:23px;letter-spacing:.08em;color:var(--gold-deep);margin:24px 0 0;}

.svc-group{border-left:2px solid var(--gold);padding:6px 0 6px 34px;margin-top:60px;}
.svc-group-label{font-family:"Cormorant Garamond",serif;font-size:12.5px;letter-spacing:.24em;color:var(--gold-deep);margin:0 0 22px;}
.svc-group .diagram{margin-top:32px;}
.svc-group .svc-process{margin-top:32px;}

/* .biz-photo.biz-photoと二重にしているのは詳細度を(0,2,0)まで上げるため。
   .biz（is-layout-constrained）の直接の子要素であるため、WordPress組み込みの
   :root :where(.is-layout-constrained) > *{margin-block:0}（詳細度(0,1,0)、
   :root分）とmargin-bottomが同点になり、読み込み順次第で（実サイトでは勝つが
   サイトエディタのプレビューでは負けて）直後の見出しとの間隔が消えてしまう
   現象があったため。business-manufacturing.php/business-bridal.php共通。 */
.biz-photo.biz-photo{margin-bottom:44px;}
/* .ph imgは高さ固定＋object-fit:coverでトリミング表示する前提だが、
   .biz-photoは高さを固定せず画像の縦横比のまま「成り行き」で表示したい
   ため、幅100%はそのまま・高さだけautoに戻す。 */
.biz-photo img{height:auto;}
.sub-block{margin-top:44px;}
.sub-title{font-family:"Zen Old Mincho",serif;font-size:18px;letter-spacing:.1em;margin-bottom:22px;padding-bottom:12px;border-bottom:1px solid var(--line);}
.sub-note{font-size:13.5px;color:var(--ink-soft);margin:16px 0 0;}
.work-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
.work-grid-3{grid-template-columns:repeat(3,1fr);}
.work-card{background:#fff;padding:0 0 24px;}
.work-card .ph{aspect-ratio:4/3;margin-bottom:18px;}
.work-card h5{font-family:"Zen Old Mincho",serif;font-size:17px;font-weight:500;letter-spacing:.05em;margin:0 22px 8px;}
.work-card p{font-size:13.5px;color:var(--ink-soft);line-height:1.85;margin:0 22px;}
.ben-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
.ben-card{background:#fff;padding:28px 24px 30px;}
.ben-card h5{font-family:"Zen Old Mincho",serif;font-size:16.5px;font-weight:500;letter-spacing:.04em;line-height:1.7;margin:0 0 10px;}
.ben-card p{font-size:13.5px;color:var(--ink-soft);line-height:1.9;margin:0;}
.svc-photo{aspect-ratio:4/3;margin-bottom:24px;}
.phil-head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:60px;align-items:end;margin-bottom:44px;}
/* .phil-headはcore/columnsブロック（className付与）なので、block-library側の
   ".wp-block-columns.is-layout-flex{display:flex}" がここの display:grid より
   詳細度で勝ち、実際にはflexとして描画される（align-items:endも効かず
   デフォルトのstretchで両カラムが同じ高さになる）。テキスト側のカラムだけ
   写真の下端に揃うよう、align-selfで個別に指定する。 */
.phil-text{align-self:flex-end;flex-grow:1.15 !important;}
.phil-photo-col{flex-grow:.85 !important;}
.phil-photo{aspect-ratio:3/4;max-height:420px;}

/* strengths */
/* トップページの News Teaser（patterns/news-teaser.php）
   前後の事業紹介セクション（無地の.biz）・実績セクション（.strengths、
   paper-2背景）と見分けがつくよう、あえてpaper-3（ワントーン濃いめの
   アイボリー）を背景にしている。 */
.news-teaser{background:var(--paper-3);padding:84px 0;}
.strengths{background:var(--paper-2);padding:84px 0;}
.fig-group{margin-top:44px;}
.fig-group h3{font-size:18px;color:var(--gold-deep);margin-bottom:26px;letter-spacing:.12em;}
.figs{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;}
.fig{border-top:1px solid var(--line);padding-top:20px;}
.fig .num{font-family:"Cormorant Garamond",serif;font-size:46px;line-height:1.2;color:var(--ink);margin:0;}
.fig .num small{font-size:15px;letter-spacing:.06em;margin-left:4px;}
.fig .cap{font-size:13.5px;color:var(--ink-soft);margin:8px 0 0;line-height:1.85;}

/* gallery */

/* recruit */
.recruit{padding:84px 0;}
.rec-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:46px;}
.rec{background:#fff;padding:32px 28px 34px;display:flex;flex-direction:column;}
.rec h3{font-size:19px;margin-bottom:14px;line-height:1.7;}
.rec p{font-size:15px;color:var(--ink-soft);line-height:2;}
.rec p{flex:1;}
.rec a{display:inline-block;margin-top:22px;align-self:flex-start;font-size:14px;letter-spacing:.08em;color:var(--gold-deep);border-bottom:1px solid var(--line);padding-bottom:3px;transition:border-color .3s;}
.rec a:hover{border-bottom-color:var(--gold);}
/* referenceでは.recの直下に<a>を裸で置いてalign-self:flex-startで
   カード下端に固定しているが、リンク文言を管理画面で編集可能にするため
   <p>で包んでいる。.rec p{flex:1}がこの<p>にも効いて他の本文段落と
   伸び幅を取り合ってしまうため、専用クラスで打ち消してリンク側の
   位置指定を効かせる。 */
.rec p.rec-link{flex:none;align-self:flex-start;margin-top:22px;}
.rec p.rec-link a{margin-top:0;}

/* company */
.company{background:var(--paper-2);padding:84px 0;}
.comp-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:70px;align-items:start;}
/* .comp-gridはcore/columnsブロックなので、block-library側の
   ".wp-block-columns.is-layout-flex{display:flex}"（クラス2つ＝詳細度で
   上回る）がここのdisplay:gridより優先されて実際はflexとして描画され、
   grid-template-columnsの.85fr:1.15fr比率が効かず均等幅になってしまう
   （svc-block/phil-headと同様の理由）。flex-basis:0の状態でflex-growだけ
   fr比率と同じ値に上書きすることで、grid版と同じ配分になるようにしている。 */
.comp-head{flex-grow:.85 !important;}
.comp-body{flex-grow:1.15 !important;}
.comp-table{width:100%;border-collapse:collapse;}
/* core/tableブロックの既定スタイル（wp-includes/blocks/table/style.css）
   ".wp-block-table td,th{border:1px solid}" が四辺すべてに線を引くため、
   border-bottomだけの指定では左右（縦の罫線）と上（1行目以外）が
   消えずに残ってしまう。明示的にleft/right/topを打ち消す。 */
.comp-table th,.comp-table td{border:0;border-bottom:1px solid var(--line);padding:18px 0;text-align:left;vertical-align:top;font-weight:400;}
.comp-table th{width:9em;font-family:"Zen Old Mincho",serif;font-size:15.5px;letter-spacing:.08em;}
.comp-table td{font-size:15.5px;color:var(--ink-soft);line-height:1.95;}
.comp-table tr:first-child th,.comp-table tr:first-child td{border-top:1px solid var(--line);}

/* contact */
.contact{padding:84px 0;}
.contact-lead{font-family:"Zen Old Mincho",serif;font-size:clamp(20px,2.4vw,28px);line-height:1.9;letter-spacing:.07em;margin-bottom:20px;}
.cta-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:46px;}
.cta{position:relative;background:#fff;padding:32px 28px 34px;transition:background .3s;display:block;}
.cta:hover{background:var(--paper-2);}
.cta:hover .cta-go{border-bottom-color:var(--gold);}
.cta h3{font-size:18px;margin-bottom:10px;}
.cta p{font-size:14.5px;color:var(--ink-soft);line-height:1.95;}
/* referenceでは.cta自体が<a>だったが、core/groupブロックはリンク（href）を
   サポートしないため、カード全体をクリック可能にする「ストレッチリンク」
   パターンに変更した。見えない<a>をカード全体に重ねて配置し、hrefは
   wp:html（コンテンツ検証の対象外）側に持たせている。 */
.cta-overlay-link{position:absolute;inset:0;z-index:1;}

.card-icon{display:block;width:42px;height:42px;margin-bottom:18px;}
/* .cta-goは.cta内の<p>なので、詳細度の高い".cta p{color:var(--ink-soft)}"
   （0,1,1）に負けて茶色にならない。".cta p.cta-go"で詳細度を上げて上書き。 */
.cta-go,.cta p.cta-go{display:inline-block;margin-top:20px;font-size:13.5px;letter-spacing:.08em;color:var(--gold-deep);border-bottom:1px solid var(--line);padding-bottom:3px;transition:border-color .3s;}

/* contact pages (page-contact.html: 固定ヘッダー78px分をpadding-topで避け、
   フォーム末尾とフッターの間はpadding-bottomで確保する。blockGap:0とWPの
   :last-child{margin-block-end:0}の組み合わせでは、内部ブロックのmarginに
   頼っても最後の要素で無効化されてしまうため、外側の<main>にpaddingとして
   持たせる。） */
.contact-page-main{padding-top:150px;padding-bottom:120px;}

/* privacy-policyページ（page-contact.htmlのwp:post-content。他の3つの
   お問い合わせページと同じテンプレートを流用しているため、影響範囲を
   body.privacy-policyに絞っている）。theme.jsonのcore/post-contentの
   blockGap（1.5em、全ブロック間で一律）だと見出しと本文の対応関係が
   分かりにくいため、見出しの前は広く・見出し直後の本文は詰めて上書きする。
   WordPressが出力するデフォルトの余白ルールは:where()で書かれ詳細度0
   なので、この程度の詳細度でも上書きできる。 */
body.privacy-policy .wp-block-post-content > :is(h2,h3,h4){margin-top:2.6em;}
body.privacy-policy .wp-block-post-content > :is(h2,h3,h4):first-child{margin-top:0;}
body.privacy-policy .wp-block-post-content > :is(h2,h3,h4) + :is(p,ul,ol){margin-top:.6em;}

/* Snow Monkey Forms: 項目（.smf-item）同士の間隔。
   .smf-formには（formStyle未指定のため）プラグイン側の余白が一切当たらず
   詰まって見えるので、項目ごとにmargin-bottomを入れる。最後の項目だけ
   ボタンとの間隔（.smf-actionのmargin-top）と二重にならないよう0にする。 */
.smf-item+.smf-item{margin-top:36px;}

/* Snow Monkey Forms: input/textareはブラウザ既定のフォーム用フォントの
   ままでラベルより小さく見えるため、周囲のテキストと同じフォントに揃える。
   また.smf-text-control__control（text/email/tel）は既定で
   width指定がなくブラウザ既定サイズ（size=20相当）の細い入力欄になって
   しまうため、textareaと同じく幅いっぱいに広げる。 */
.smf-text-control__control,
.smf-textarea-control__control,
.smf-button-control__control{font:inherit;}
.smf-text-control__control{display:block;width:100%;}

/* Snow Monkey Forms: 「同意する」チェックボックスとラベルの縦位置を揃える。
   プラグイン側のcheckboxesブロック専用CSS（style-index.css）に
   ".smf-form .smf-checkbox-control{align-items:flex-start}"という
   詳細度(0,2,0)のルールがあり、こちらの(0,1,0)では負けて上書きできない
   ため、!importantで確実に上書きする。 */
.smf-checkbox-control{display:inline-flex;align-items:center !important;gap:8px;}

/* 送信完了後は、フォーム手前のリード文（.contact-form-intro）は不要なので
   隠す（.snow-monkey-formは兄弟要素のため、:has()で後方から検知する）。 */
.contact-form-intro:has(~ .snow-monkey-form[data-screen="complete"]){display:none;}
.smf-checkbox-control__control{margin:0;}

/* Snow Monkey Forms: 確認する／戻る／送信するボタン。
   プラグイン側は--_padding-1等の未定義CSS変数に依存していて素の見た目に
   なるため、サイトのトーン（var(--ink)/var(--gold-deep)）に合わせて
   ボタンらしい大きさ・余白で上書きする。 */
.smf-action{margin-top:56px;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:20px;}
.smf-action .smf-button-control+.smf-button-control{margin-left:0;}
.smf-action .smf-button-control__control{font-size:16px;letter-spacing:.1em;padding:18px 56px;background:var(--ink);background-image:none;border:1px solid var(--ink);border-radius:0;color:var(--paper);transition:background .3s,border-color .3s,color .3s;}
.smf-action .smf-button-control__control:hover{background:var(--gold-deep);border-color:var(--gold-deep);color:#fff;}
.smf-action [data-action="back"].smf-button-control__control{background:transparent;background-image:none;border-color:var(--line);color:var(--ink-soft);}
.smf-action [data-action="back"].smf-button-control__control:hover{background:var(--paper-2);border-color:var(--ink-soft);color:var(--ink);}

/* reCAPTCHA表記。バッジ自体は.grecaptcha-badgeで非表示にしている分、
   Googleの利用規約で必須の文言をフォーム送信ボタンの下に代わりに表示する。 */
.grecaptcha-badge{visibility:hidden;}
.recaptcha-notice{margin-top:20px;text-align:center;font-size:12.5px;color:var(--ink-faint);}
.recaptcha-notice a{text-decoration:underline;}
/* 「同意する」が未チェックの間、assets/js/smf-agreement.jsが
   確認するボタンにdisabledを付与する。 */
.smf-action .smf-button-control__control:disabled{background:var(--paper-3);border-color:var(--line);color:var(--ink-faint);cursor:not-allowed;}
.smf-action .smf-button-control__control:disabled:hover{background:var(--paper-3);border-color:var(--line);color:var(--ink-faint);}
/* 確認画面では「同意する」の項目そのものを表示しない
   （入力画面に戻ればチェックボックスとして再表示される）。 */
.snow-monkey-form[data-screen="confirm"] .smf-item:has([data-name="agreement"]){display:none;}
@media screen and (max-width:600px){
  .smf-action{gap:14px;}
  .smf-action .smf-button-control{width:100%;}
  .smf-action .smf-button-control__control{width:100%;padding:16px 24px;}
}

/* footer */
.site-footer{background:var(--paper-3);color:var(--ink-soft);padding:60px 0 30px;font-size:14px;border-top:1px solid var(--line);}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-bottom:48px;border-bottom:1px solid var(--line);}
/* .foot-gridはcore/columnsブロックのためflexで描画され（他の
   svc-block/phil-headと同様の理由）、grid-template-columnsの1.4fr:1:1:1
   比率が効かず4等分になってしまう。flex-growで同じ比率を再現する。 */
.foot-brand{flex-grow:1.4 !important;}
.foot-col{flex-grow:1 !important;}
.foot-brand .brand-logo{width:56px;height:56px;}
.foot-brand p{margin-top:18px;font-size:13.5px;line-height:1.95;}
.foot-col h4{font-family:"Cormorant Garamond",serif;font-size:12px;letter-spacing:.2em;color:var(--gold-deep);margin-bottom:16px;}
.foot-col ul{list-style:none;margin:0;padding:0;}
.foot-col li{margin-bottom:10px;}
.foot-col a{font-size:13.5px;}
.foot-col a:hover{color:var(--gold-deep);}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;padding-top:26px;color:var(--ink-faint);font-size:11.5px;letter-spacing:.06em;}
.foot-bottom .links{display:flex;gap:22px;flex-wrap:wrap;}

/* ページトップへ戻るボタン。assets/js/back-to-top.jsが400pxスクロール後に
   .-onを付与してフェードイン表示する（JSが動かない環境ではhref="#"の
   通常のページ内リンクとして機能するので、常時表示のフォールバックは
   不要）。非表示のあいだはpointer-eventsを切って、後ろのコンテンツの
   クリックを邪魔しないようにしている。 */
.back-to-top{position:fixed;left:50%;bottom:28px;z-index:90;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:999px;border:1px solid var(--line);background:var(--paper);color:var(--ink-soft);box-shadow:0 4px 14px rgba(34,32,29,.1);opacity:0;pointer-events:none;transition:opacity .4s,border-color .3s,color .3s;}
.back-to-top.-on{opacity:1;pointer-events:auto;}
.back-to-top:hover,.back-to-top:focus-visible{border-color:var(--gold);color:var(--gold-deep);}
@media (prefers-reduced-motion:reduce){
	.back-to-top{transition:none;}
}

/* News & Blog（templates/home.html: アーカイブ、templates/single.html: 個別記事）
   固定ヘッダー78px分をpadding-topで避けるのは.contact-page-mainと同じ手法。
   カード自体はサイト全体のフラットな罫線基調（.ov-card等）とは変え、
   永光様からの「もう少しモダンな見た目にしたい」というご要望を受けて、
   白背景＋薄い影＋ホバーで浮き上がるカードUIにしている。 */
.news-hero{padding:126px 0 8px;}
.news-hero .sec-note{margin-top:18px;max-width:none;}
.news-body{padding:40px 0 100px;}

.news-grid .wp-block-post-template{display:grid;grid-template-columns:repeat(3,1fr);gap:44px 32px;list-style:none;margin:0;padding:0;}
.news-grid .wp-block-post-template>li{list-style:none;margin:0;padding:0;}
.news-grid .wp-block-query-no-results{margin:20px 0;color:var(--ink-soft);}

.news-card{position:relative;background:#fff;border:1px solid var(--line);height:100%;display:flex;flex-direction:column;transition:box-shadow .35s,transform .35s,border-color .35s;}
.news-card:hover{box-shadow:0 20px 44px rgba(34,32,29,.12);transform:translateY(-4px);}

.news-card-thumb{aspect-ratio:3/2;margin:0;}
.news-card-thumb a{display:block;height:100%;}
.news-card-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
/* ホバー時、アイキャッチに斜めの光沢が左から右へ一度だけ流れる演出。
   .news-card-thumbは.ph由来でoverflow:hidden・position:relativeなので、
   ::beforeを箱いっぱいに重ね、通常時は左側に隠しておいてtranslateXで流す。 */
/* ホバーが外れたときは戻りのスライドを見せず、次回のために瞬時に初期位置へ
   リセットしたいので、transitionは:hover側にだけ持たせる（外れる側の
   状態にはtransitionが無いため、そちらは即座にジャンプする）。 */
.news-card-thumb::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.5) 48%,rgba(255,255,255,.5) 52%,transparent 70%);transform:translateX(-120%);}
.news-card:hover .news-card-thumb::before{transform:translateX(120%);transition:transform .5s cubic-bezier(.25,.46,.45,.94);}

.news-card-body{padding:26px 26px 28px;flex-grow:1;display:flex;flex-direction:column;}
.news-card-meta{gap:12px;margin-bottom:14px;}
/* カテゴリーバッジだけは個別のリンク先を保ちたいので、下の.news-card-title a::after
   （カード全体を覆うstretched link）より手前に来るようposition+z-indexを与える。 */
.news-card-cat{position:relative;z-index:2;}
.news-card-cat a{display:inline-block;font-size:11px;letter-spacing:.08em;color:var(--gold-deep);border:1px solid var(--gold);padding:4px 12px;transition:background .3s,color .3s;}
.news-card-cat a:hover{background:var(--gold);color:#fff;}
.news-card-date{font-family:"Cormorant Garamond",serif;font-size:13px;letter-spacing:.06em;color:var(--ink-faint);align-self:center;}
.news-card-title{margin:0 0 10px;font-size:17px;line-height:1.7;}
.news-card-title a{color:var(--ink);transition:color .3s;}
.news-card-title a:hover{color:var(--gold-deep);}
/* stretched link: タイトルの<a>本体はテキストの範囲のままだが、::afterを
   .news-card（position:relativeな直近の祖先）いっぱいに広げることで、
   カード全体のクリック領域をこのリンク1つにまとめる。カテゴリーバッジ
   （z-index:2）はこれより手前にあるため、そこだけ別リンクとして機能する。 */
.news-card-title a::after{content:"";position:absolute;inset:0;z-index:1;}
.news-card-excerpt{margin-top:auto;}
.news-card-excerpt .wp-block-post-excerpt__excerpt{margin:0;font-size:14px;line-height:1.9;color:var(--ink-soft);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}

.news-pagination{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin-top:64px;}
.news-pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 4px;border-radius:999px;font-size:13.5px;color:var(--ink-soft);border:1px solid var(--line);transition:background .3s,color .3s,border-color .3s;}
.news-pagination a.page-numbers:hover{border-color:var(--gold);color:var(--gold-deep);}
.news-pagination .page-numbers.current{background:var(--gold);border-color:var(--gold);color:#fff;}
.news-pagination .page-numbers.dots{border:0;border-radius:0;}
/* 「前へ」「次へ」は文字ラベルではなく矢印1文字（home.htmlのlabel属性で
   ←/→に変更済み）にして、番号ボタンと同じ丸ボタンの見た目で揃える。 */
.news-pagination .wp-block-query-pagination-previous,
.news-pagination .wp-block-query-pagination-next{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:999px;border:1px solid var(--line);font-size:15px;color:var(--ink-soft);transition:background .3s,color .3s,border-color .3s;}
.news-pagination .wp-block-query-pagination-previous:hover,
.news-pagination .wp-block-query-pagination-next:hover{border-color:var(--gold);color:var(--gold-deep);}

.news-single-main{padding-top:170px;padding-bottom:110px;}
.news-single-meta{gap:14px;margin-bottom:22px;}
.news-single-title{font-size:clamp(26px,3.4vw,38px);line-height:1.6;margin-bottom:32px;}
.news-single-thumb{aspect-ratio:16/9;margin:0 0 44px;overflow:hidden;}
.news-single-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.news-single-content{font-size:16px;line-height:2.1;color:var(--ink-soft);}
.news-single-content h2{font-size:22px;color:var(--ink);margin:48px 0 20px;}
.news-single-content h3{font-size:18px;color:var(--ink);margin:36px 0 16px;}
/* .gnav a（ヘッダーナビ）と同じ、下線が左から右へスライドインするホバー。
   本文リンクはもともとゴールドの文字色なので、ホバー時に文字色を変える
   だけだと変化が分かりにくかったため、この動きの方が伝わりやすい。 */
.news-single-content a{position:relative;color:var(--gold-deep);border-bottom:1px solid var(--line);}
.news-single-content a::after{content:"";position:absolute;left:0;right:100%;bottom:-1px;height:1px;background:var(--gold);transition:right .35s;}
.news-single-content a:hover::after,.news-single-content a:focus-visible::after{right:0;}
.news-single-content ul li::marker{color:var(--gold);}
/* core/tableブロックの既定スタイル（wp-includes/blocks/table/style.css）は
   theadに3px（濃色）のborder-bottomを引くため、他の罫線と揃うよう1pxに
   細くし、theadだけ背景色を付けてヘッダー行と分かるようにする。td/thの
   罫線も既定は濃色（--ink-soft）なので、サイト標準の薄い罫線色
   （--line）に統一して軽い印象にする。 */
.news-single-content .wp-block-table td,
.news-single-content .wp-block-table th{border-color:var(--line);}
.news-single-content .wp-block-table thead{background:var(--paper-2);border-bottom:1px solid var(--line);}
.news-single-content .wp-block-table thead th{border-bottom:1px solid var(--line);}
/* core/quoteブロックの既定スタイル（太い左罫線＋イタリック）は他のセクションの
   トーンと合わないため上書きする。左罫線1本ではなく、左上・右下の対角2箇所に
   細いゴールドのコーナー（額縁の角のような「L字」）を疑似要素で置く。 */
.news-single-content .wp-block-quote{position:relative;margin:56px 0;padding:36px 40px;border:0;text-align:left;font-style:normal;}
.news-single-content .wp-block-quote::before,
.news-single-content .wp-block-quote::after{content:"";position:absolute;width:26px;height:26px;}
.news-single-content .wp-block-quote::before{top:0;left:0;border-top:1px solid var(--gold);border-left:1px solid var(--gold);}
.news-single-content .wp-block-quote::after{bottom:0;right:0;border-bottom:1px solid var(--gold);border-right:1px solid var(--gold);}
.news-single-content .wp-block-quote p{margin:0;font-family:"Zen Old Mincho",serif;font-size:19px;line-height:1.95;color:var(--ink);letter-spacing:.05em;}
.news-single-content .wp-block-quote cite{display:block;margin-top:20px;font-style:normal;font-size:13px;letter-spacing:.08em;color:var(--ink-faint);}
.news-single-back{margin-top:56px;padding-top:28px;border-top:1px solid var(--line);}
.news-single-back a{font-size:14px;letter-spacing:.06em;color:var(--gold-deep);}
.news-single-back a:hover{color:var(--ink);}

/* index.html（テンプレート未指定の固定ページ・404・検索結果などの汎用
   フォールバック）。固定ヘッダー分の余白とタイポグラフィだけ、
   page-contact.html/single.htmlと同じトーンに揃える。 */
.page-main{padding-top:150px;padding-bottom:120px;}
/* .page-main .page-title と子孫セレクタにして詳細度(0,2,0)を確保し、WordPress
   組み込みの:root :where(.is-layout-constrained) > *{margin-block:0}
   （詳細度(0,1,0)、:root分）に読み込み順に関係なく勝てるようにしている。
   .page-title単体（詳細度同点）だと、サイトエディタのプレビューでだけ
   負けてmargin-bottomが0になる現象が起きたため。 */
.page-main .page-title{font-family:"Zen Old Mincho",serif;font-size:clamp(26px,3.4vw,38px);line-height:1.6;letter-spacing:.05em;margin-bottom:32px;}
.page-content{font-size:16px;line-height:2.1;color:var(--ink-soft);}
.page-content h2{font-size:22px;color:var(--ink);margin:48px 0 20px;}
.page-content h3{font-size:18px;color:var(--ink);margin:36px 0 16px;}
.page-content a{position:relative;color:var(--gold-deep);border-bottom:1px solid var(--line);}
.page-content a::after{content:"";position:absolute;left:0;right:100%;bottom:-1px;height:1px;background:var(--gold);transition:right .35s;}
.page-content a:hover::after,.page-content a:focus-visible::after{right:0;}
.page-content ul li::marker{color:var(--gold);}

:focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px;}

@media (max-width:1000px){
  .hero{height:92vh;min-height:560px;}
  .hero-card.hero-card.hero-card{max-width:none;margin-top:40px;}
  .biz-head,.comp-grid,.phil-head{grid-template-columns:1fr;gap:30px;}
  .svc-block.svc-block{grid-template-columns:1fr;gap:30px;}
  .work-grid,.work-grid-3,.ben-grid{grid-template-columns:1fr 1fr;}
  .svc-group{padding-left:20px;}
  .creed{grid-template-columns:1fr 1fr;}
  .rec-grid,.cta-grid,.figs,.ov-grid{grid-template-columns:1fr 1fr;}
  .svc-cards{grid-template-columns:1fr 1fr 1fr;}
  .foot-grid{grid-template-columns:1fr 1fr;}
  .diagram-frame{padding:26px 20px 22px;}
  .news-grid .wp-block-post-template{grid-template-columns:1fr 1fr;}
}
@media (max-width:720px){
  /* .gnavはcore/groupブロック（layout:flex）なので、theme.json由来の
     global-styles-inline-cssが "body .is-layout-flex{display:flex}" を
     詳細度(0,1,1)で当ててくる。単なる.gnav{display:none}(0,1,0)では
     負けて常時表示のままになるため、.header-inner を挟んで詳細度を
     (0,2,0)に上げて確実に上書きする。 */
  .header-inner .gnav{display:none;}
  .nav-toggle{display:block;}
  .header-inner .gnav.open{display:flex;justify-content:flex-start;position:absolute;top:78px;left:0;right:0;background:var(--paper);border-bottom:1px solid var(--line);padding:26px 28px 32px;}
  /* .gnav（core/groupブロック、PC時はjustifyContent:rightで右寄せ）の
     直下の子（core/navigationブロック本体）は、開いたときは幅いっぱいに
     広げないと右寄せのまま残ってしまうため100%幅にする。 */
  .gnav.open>*{width:100%;}
  /* .gnav（core/groupブロック）の中に、さらにcore/navigationブロックの
     <nav><ul class="wp-block-navigation__container">という2階層が
     ネストしているため、開いたときの縦積みレイアウト
     （flex-direction:column、gap:18px）はその<ul>に対して指定する。 */
  .gnav.open .wp-block-navigation__container{flex-direction:column;align-items:flex-start;gap:18px;}
  .brand-name{font-size:15px;}
  .rec-grid,.cta-grid,.figs,.ov-grid{grid-template-columns:1fr;}
  .svc-cards{grid-template-columns:1fr;}
  .creed{grid-template-columns:1fr;}
  .work-grid,.work-grid-3,.ben-grid{grid-template-columns:1fr;}
  .foot-grid{grid-template-columns:1fr;}
  .contact-page-main{padding-top:110px;padding-bottom:80px;}
  .news-grid .wp-block-post-template{grid-template-columns:1fr;}
  .news-hero{padding-top:104px;padding-bottom:4px;}
  .news-body{padding-top:32px;}
  .news-single-main{padding-top:130px;padding-bottom:80px;}
  .page-main{padding-top:110px;padding-bottom:80px;}
}

/* inviewフェードイン
   対象要素に fadein-bottom / fadein-left / fadein-right / fadein-fade の
   いずれかを付けておくと、画面内に入ったタイミングで assets/js/fadein.js が
   .-on を付与し、下記のtransitionでフワッと表示される。
   delay1 / delay2 を併用すると、同じタイミングで複数並ぶ要素を
   少しずつ時間差で見せられる（例：カードが並ぶグリッドの2枚目・3枚目）。
   一度ついた.-onはJS側で外さないため、下にスクロールして戻っても
   再度フェードアウトはしない。
   非表示化・アニメーション一式は body:not(.editor-styles-wrapper) に
   限定している。assets/js/fadein.jsは投稿/サイトエディタのプレビュー
   iframe（WordPressが自動でbody.editor-styles-wrapperを付与）では読み込まれず
   .-onが一生付かないため、限定しないとエディタ内で永久にopacity:0のまま
   になってしまう。非表示側（opacity:0）だけをbody:not(...)で囲んで表示側
   （.-on）を素のままにすると、詳細度がopacity:0側の方が高くなり実サイトで
   .-onを付けても表示されなくなるため、対になる宣言は必ずセットでbody:not(...)
   を付けること。position:relativeだけは他要素の相対配置に影響しないので
   エディタでも無条件で付けている。 */
[class*="fadein-"]{position:relative;}
body:not(.editor-styles-wrapper) [class*="fadein-"]{opacity:0;}
body:not(.editor-styles-wrapper) [class*="fadein-"].-on{transition:opacity 2s cubic-bezier(.215,.61,.355,1),top 2s cubic-bezier(.215,.61,.355,1),left 2s cubic-bezier(.215,.61,.355,1),right 2s cubic-bezier(.215,.61,.355,1);opacity:1;}
body:not(.editor-styles-wrapper) [class*="fadein-"].-on.delay1{transition-delay:.4s;}
body:not(.editor-styles-wrapper) [class*="fadein-"].-on.delay2{transition-delay:.8s;}
body:not(.editor-styles-wrapper) .fadein-bottom{top:100px;}
body:not(.editor-styles-wrapper) .fadein-bottom.-on{top:0;}
body:not(.editor-styles-wrapper) .fadein-left{right:100px;}
body:not(.editor-styles-wrapper) .fadein-left.-on{right:0;}
body:not(.editor-styles-wrapper) .fadein-right{left:100px;}
body:not(.editor-styles-wrapper) .fadein-right.-on{left:0;}
/* fadein-fadeはtop/left/rightを一切指定しないぶん、スライドなし・
   フェードのみになる（上のベースルールはクラス名に「fadein-」を含む
   要素全般にかかるため、これだけで足りる）。 */
/* OSやブラウザ側で「視差効果を減らす」設定が有効な場合は、移動・
   フェードなしで最初から表示する。 */
@media (prefers-reduced-motion:reduce){
	[class*="fadein-"]{opacity:1;top:0;left:0;right:0;transition:none;}
	.news-card-thumb::before{display:none;}
}