@charset "UTF-8";
/* ============================================================
   ninoya Blog アーカイブ化 — 案A「現行素材の整理」上書きCSS
   2026-09-01 / プレビュー用に作成（WPテーマ実装にそのまま流用する前提）

   実装時の置き場所: theme/ninoya-new/css/a-case-overlay.css
   読み込み順: 既存CSSの最後（wp_enqueue_style の deps に既存ハンドルを指定）

   このファイルの方針
   - 既存デザインは一切壊さない。足すのは「ヘッダーの整理」と「終了帯」だけ
   - 消す要素は本来テンプレート側（header.php）から削除する。
     ここに残している display:none は保険（テンプレート削除後は不要）
   ============================================================ */

/* ------------------------------------------------------------
   1. グローバルナビ・検索の撤去
   ▼実装時はテンプレート削除（header.php から下記マークアップごと消す）
     - <nav class="header-nav"> … </nav>
     - <a id="header-search-button">
     - <div class="header-search"> … </div>
     - <div id="header-sp-button"> … </div>
   下の display:none は「消し忘れ／他テンプレートからの再出力」への保険
------------------------------------------------------------ */
#header .header-nav,
#header .header-search-button,
#header #header-search-button,
#header .header-search,
#header #header-sp-button {
	display: none !important;
}

/* ナビが無くなった分、ヘッダーの高さと重心を整える */
#header .container {
	display: flex;
	align-items: center;
	min-height: 48px; /* 本家ヘッダー高に合わせる（実測48px） */
}

/* ------------------------------------------------------------
   2. ロゴを「ninoya Blog」テキストに差し替え
   ▼実装時はテンプレート差し替え
     header.php の .header-branding の中身を
     <p class="heading"><a href="/blog/" class="blog-wordmark">…</a></p> に置換
------------------------------------------------------------ */
#header .header-branding .heading {
	margin: 0;
	line-height: 1;
}

#header .header-branding .blog-wordmark {
	display: inline-block;
	padding: 2px 0;
	color: #1a1a1a;
	font-size: 21px;
	line-height: 1.2;
	letter-spacing: .04em;
	text-decoration: none;
	white-space: nowrap;
	transition: opacity .2s ease;
}

#header .header-branding .blog-wordmark:hover {
	opacity: .6;
}

/* 「ninoya」は既存ロゴと同じ低彩度の黒、「Blog」だけ軽くする */
#header .header-branding .blog-wordmark .wm-name {
	font-weight: 600;
}

#header .header-branding .blog-wordmark .wm-sub {
	margin-left: .38em;
	color: #8a8378;
	font-weight: 400;
	letter-spacing: .08em;
}

@media screen and (max-width: 767px) {
	#header .header-branding .blog-wordmark {
		font-size: 17px;
	}
}

/* ------------------------------------------------------------
   3. ヘッダー直下の「更新終了」帯
   ★帯は一覧系ページだけ（ブログトップ・カテゴリ・アーカイブ）。
     記事ページには出さない。
   ▼実装時はテンプレート追加
     header.php の </header> 直後に、is_singular() では出力しない条件で
     .archive-notice のマークアップを出す。例:
       <?php if ( ! is_singular() ) : ?> …帯… <?php endif; ?>
     記事ページ側の導線は §3.5 のヘッダー右端リンクが担う
------------------------------------------------------------ */
.archive-notice {
	background: #faf8f3;
	border-bottom: 1px solid #ece7dc;
}

.archive-notice .inner {
	max-width: 1000px;
	margin: 0 auto;
	padding: 15px 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px 22px;
	flex-wrap: wrap;
	text-align: center;
}

.archive-notice .text {
	margin: 0;
	color: #4a453d;
	font-size: 14px;
	line-height: 1.7;
	letter-spacing: .02em;
}

.archive-notice .link {
	color: #2b2b2b;
	font-size: 14px;
	line-height: 1.7;
	letter-spacing: .02em;
	text-decoration: none;
	border-bottom: 1px solid #c9c0ad;
	padding-bottom: 1px;
	white-space: nowrap;
	transition: opacity .2s ease;
}

.archive-notice .link:hover {
	opacity: .6;
}

.archive-notice .link .arrow {
	margin-left: .4em;
}

@media screen and (max-width: 767px) {
	.archive-notice .inner {
		padding: 13px 18px;
		gap: 6px;
		flex-direction: column;
	}

	.archive-notice .text,
	.archive-notice .link {
		font-size: 13px;
	}
}

/* ------------------------------------------------------------
   3.5. 記事ページのヘッダー右端の導線
   帯を出さない記事ページでは、ヘッダー右端にコーポレートサイトへの
   リンクを1本だけ控えめに置く（旧グローバルナビがあった位置）
   ▼実装時はテンプレート追加
     header.php の .container 内、.header-branding の直後に
     is_singular() のときだけ .header-corp-link を出力する。例:
       <?php if ( is_singular() ) : ?> …リンク… <?php endif; ?>
------------------------------------------------------------ */
.header-corp-link {
	margin: 0 0 0 auto;
	line-height: 1;
	white-space: nowrap;
}

.header-corp-link a {
	color: #6b706f;
	font-size: 12px;
	letter-spacing: .04em;
	text-decoration: none;
	transition: opacity .2s ease;
}

.header-corp-link a:hover {
	opacity: .6;
}

.header-corp-link .arrow {
	margin-left: .4em;
}

/* SPはヘッダーが fixed / 44px。既存テーマは .container を flex にして
   .header-branding に order:2 を振っているため、リンクは order:3 で右端に置く */
@media screen and (max-width: 767px) {
	.header-corp-link {
		order: 3;
		margin: 0 0 0 auto;
	}

	.header-corp-link a {
		font-size: 11px;
	}
}

/* ------------------------------------------------------------
   4. パンくず
   ブログトップ › 記事 の2階層に縮める
   ▼実装時はテンプレート修正
     breadcrumbs の生成側で「TOP（コーポレート）」と
     中間カテゴリを出力しない（ブログ配下のみ2階層）
   アーカイブ一覧（category/ninoya_log）ではパンくず自体を出さない
------------------------------------------------------------ */
body.archive .breadcrumbs {
	display: none;
}

/* ------------------------------------------------------------
   4.4. 「寄稿のお問い合わせはこちら」CTAの撤去
   更新を終了したブログに寄稿募集の導線が残るのは矛盾するため全撤去
   ▼実装時はテンプレート削除
     ブログトップのテンプレートから、下記2箇所の
     <div class="button"><a class="btn btn-link">寄稿のお問い合わせはこちら</a></div>
     を消す（リンク先は「ninoyaブログでは寄稿者を募集しています」記事）:
       - <section class="blog-writer">（ライター一覧）の末尾
       - <section class="common-books">（著者の書籍紹介）の末尾
   下の display:none は消し忘れへの保険
------------------------------------------------------------ */
.blog-writer > .container > .button,
.common-books .button {
	display: none !important;
}

/* ------------------------------------------------------------
   4.5. 本文末尾のSNS・メルマガ3カラムの撤去
   ▼実装時はテンプレート削除
     単記事・アーカイブ共通のテンプレート（#main の末尾）から
     <section class="common-sns"> … </section> をまるごと消す。
     中身は Facebookページ埋め込み / Twitterタイムライン / MailPoet登録フォーム。
     併せて footer.php 側の Facebook SDK 読み込み（#fb-root と
     connect.facebook.net の script）と MailPoet のenqueueも外せる。
   下の display:none は消し忘れへの保険
------------------------------------------------------------ */
.common-sns {
	display: none !important;
}

/* ------------------------------------------------------------
   5. フッターの簡素化
   残すのは「コーポレートサイト →」1本とコピーライトのみ
   ▼実装時はテンプレート削除（footer.php から下記マークアップごと消す）
     - <section class="footer-mail"> …（ninoya post コメント投稿フォーム／
       「※返信の必要なお問い合わせはこちら」）… </section>
     - <div class="footer-company"> …（社名・住所・営業時間・特商法・
       プライバシーポリシー・SNS・reCAPTCHA表記）… </div>
   残すのは <div class="footer-copyright"> と、新設の
   <p class="footer-archive-link">（コーポレートサイト導線）だけ。
   ※コピーライトの見た目は既存 .footer-copyright（10px / #999 / 中央）を継承する
------------------------------------------------------------ */
#footer.footer-archive {
	padding-top: 40px;
	padding-bottom: 32px;
}

.footer-archive-link {
	margin: 0 0 20px;
	line-height: 1;
	text-align: center;
}

.footer-archive-link a {
	display: inline-block;
	padding-bottom: 3px;
	color: #4a5050;
	font-size: 13px;
	letter-spacing: .02em;
	text-decoration: none;
	border-bottom: 1px solid #b6bdbd;
	transition: opacity .2s ease;
}

.footer-archive-link a:hover {
	opacity: .6;
}

.footer-archive-link .arrow {
	margin-left: .4em;
}

@media screen and (max-width: 767px) {
	#footer.footer-archive {
		padding-top: 32px;
		padding-bottom: 28px;
	}

	.footer-archive-link {
		margin-bottom: 18px;
	}

	.footer-archive-link a {
		font-size: 12px;
	}
}

/* ------------------------------------------------------------
   6. 撤去した動線の残り
   ヘッダー検索を消したので、テーマJSのヘッダー開閉に依存する
   余白が残る場合の保険（実装時はJS側の該当処理も削除）
------------------------------------------------------------ */
#header.is-search-open,
#header.is-nav-open {
	height: auto;
}


/* 追補: SPのロゴ位置（元テーマのtext-align:centerが細い箱内で半端に効くため左揃えに固定） */
@media screen and (max-width: 767px) {
	/* #headerは固定44px(内側32px+上下padding6px)。containerは内側に収める */
	#header .container { min-height: 32px; }
	#header .header-branding { text-align: left; width: auto; margin: 0; }
	#header .header-branding .heading { text-align: left; margin: 0; display: flex; align-items: center; line-height: 1; }
	#header .blog-wordmark { display: block; padding: 0; line-height: 1; }
	#header .header-corp-link { display: flex; align-items: center; }
}

/* ------------------------------------------------------------
   4.6. 「ライターへ感想を送る」ボタンの撤去（2026-09-01 古越さん指示）
   リンク先の#footerコメントフォームは撤去済みで行き先も無い
   ▼実装時はテンプレート削除: single用テンプレートの
     .blog-like 内 <p class="button-contact">…</p> を出力しない
------------------------------------------------------------- */
.blog-like .button-contact {
	display: none;
}