/*
Theme Name: Morita Eiichi Official
Theme URI: https://moritaeiichi.com/
Author: CRLEST
Description: 森田英一（もりっしー）公式サイト／グローバル社長の「志」で自走する組織開発チャンネル 専用テーマ。白 × チャコール(#1C1C1C) × オレンジ(#ED6D00) のブランドカラー。トップページはfront-page.phpで構成し、お知らせは投稿から自動出力されます。
Version: 2026.09.06
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: morita-eiichi
Tags: custom-colors, custom-menu, translation-ready
*/

/* ===== ブランドトークン ===== */
:root {
  --orange: #ED6D00;
  --dark: #1C1C1C;
  --ink: #222222;
}

body {
  font-family: 'Noto Sans JP', sans-serif;
  color: var(--ink);
}

.serif {
  font-family: 'Zen Kaku Gothic Antique', sans-serif;
}

/* 装飾ドット */
.dots {
  background-image: radial-gradient(circle at 1px 1px, var(--orange) 1px, transparent 0);
  background-size: 28px 28px;
}

.dots-w {
  background-image: radial-gradient(circle at 1px 1px, #fff 1px, transparent 0);
  background-size: 28px 28px;
}

/* 行数クランプ */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

html {
  scroll-behavior: smooth;
}

section[id] {
  scroll-margin-top: 5rem;
}

/* ===== 投稿・固定ページ（single.php / page.php）用の記事スタイル ===== */
.entry-content {
  font-size: 1rem;
  line-height: 1.9;
}

.entry-content > * + * {
  margin-top: 1.25em;
}

.entry-content h2 {
  font-family: 'Zen Kaku Gothic Antique', sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  margin-top: 2.5em;
  padding-left: 0.7em;
  border-left: 5px solid var(--orange);
}

.entry-content h3 {
  font-family: 'Zen Kaku Gothic Antique', sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
  margin-top: 2em;
}

.entry-content a {
  color: #B85400;
  text-decoration: underline;
}

.entry-content ul,
.entry-content ol {
  padding-left: 1.5em;
}

.entry-content ul { list-style: disc; }
.entry-content ol { list-style: decimal; }

.entry-content li + li {
  margin-top: 0.4em;
}

.entry-content img {
  max-width: 100%;
  height: auto;
}

.entry-content blockquote {
  border-left: 4px solid #E5E5E5;
  padding: 0.5em 0 0.5em 1.2em;
  color: #555;
}

.entry-content table {
  width: 100%;
  border-collapse: collapse;
}

.entry-content th,
.entry-content td {
  border: 1px solid #E5E5E5;
  padding: 0.6em 0.8em;
  text-align: left;
}

/* WordPress標準クラス */
.alignleft { float: left; margin: 0 1.5em 1em 0; }
.alignright { float: right; margin: 0 0 1em 1.5em; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.wp-caption-text { font-size: 0.85rem; color: #666; }
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

/* ===== 動画解説ページの本文 ===== */
.video-content h2 {
  font-family: 'Zen Kaku Gothic Antique', sans-serif;
  font-size: clamp(1.25rem, 3vw, 1.6rem);
  font-weight: 800;
  margin-top: 3em;
  margin-bottom: 1em;
  padding: 0 0 0.6em 0.8em;
  border-left: 5px solid var(--orange);
  border-bottom: 1px solid rgba(34, 34, 34, .12);
}

.video-content h3 {
  font-family: 'Zen Kaku Gothic Antique', sans-serif;
  font-size: clamp(1.05rem, 2.4vw, 1.25rem);
  font-weight: 800;
  margin-top: 2.2em;
  margin-bottom: 0.8em;
  color: #1C1C1C;
}

/* よくある質問の見出し（テンプレート側でクラスを付与） */
.video-content h3.faq-q::before {
  content: 'Q. ';
  color: var(--orange);
  font-weight: 900;
}

.video-content > p {
  margin-bottom: 1.5em;
}

/* 箇条書き（AIが情報を抽出しやすい形） */
.video-content ul,
.video-content ol {
  background: #F7F7F7;
  border-left: 3px solid rgba(237, 109, 0, .35);
  padding: 1.25em 1.5em 1.25em 2.5em;
  margin: 1.75em 0;
}

.video-content li {
  margin-bottom: 0.6em;
  line-height: 1.85;
}

.video-content li:last-child {
  margin-bottom: 0;
}

/* 表（AIが構造を読み取りやすい形） */
.video-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.75em 0;
  font-size: 0.95rem;
}

.video-content th {
  background: #1C1C1C;
  color: #fff;
  font-weight: 700;
  text-align: left;
  padding: 0.75em 1em;
}

.video-content td {
  border-bottom: 1px solid rgba(34, 34, 34, .12);
  padding: 0.75em 1em;
  vertical-align: top;
}

.video-content tbody tr:nth-child(even) td {
  background: #FAFAFA;
}

/* 引用（動画内での発言など） */
.video-content blockquote {
  background: #FFF7F0;
  border-left: 4px solid var(--orange);
  padding: 1.25em 1.5em;
  margin: 1.75em 0;
  font-weight: 500;
}

.video-content blockquote p:last-child {
  margin-bottom: 0;
}

.video-content strong {
  font-weight: 700;
  background: linear-gradient(transparent 60%, rgba(237, 109, 0, .25) 60%);
}

.video-content a {
  color: #B85400;
  text-decoration: underline;
}

.video-content img {
  max-width: 100%;
  height: auto;
  margin: 1.75em 0;
}

/* ===== お役立ち資料：資料の選択カード ===== */
/* 枠線と配色はTailwindのユーティリティと競合して負けることがあるため、
   このコンポーネントはCSS側で完結させている。
   選択状態は main.js が付ける .is-selected で切り替える。 */

.morita-mat-item {
  border: 1px solid rgba(0, 0, 0, .10);
  transition: border-color .2s, box-shadow .2s;
}

.morita-mat-item:hover {
  border-color: var(--orange);
}

.morita-mat-item.is-selected {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(237, 109, 0, .25);
}

.morita-mat-btn {
  border: 2px solid var(--orange);
  color: var(--orange);
  transition: background-color .2s, color .2s;
}

.morita-mat-item.is-selected .morita-mat-btn {
  background-color: var(--orange);
  color: #fff;
}

.morita-mat-item .morita-mat-on {
  display: none;
}

.morita-mat-item.is-selected .morita-mat-off {
  display: none;
}

.morita-mat-item.is-selected .morita-mat-on {
  display: inline;
}

/* 追従バーが出ている間、フッターが隠れないよう余白を作る */
body.has-mat-bar {
  padding-bottom: 76px;
}