@charset "UTF-8";
/*
 * ブログ記事本文の装飾フォーマット
 *
 * ツクガクの全146記事に手打ちされていたインラインCSSを集計し、
 * 繰り返し使われていたパターンをクラス化したもの。
 * エディタの「フォーマット」→「ホクガク装飾」から挿入できる（functions.php で登録）。
 *
 * このファイルはフロント（wp_enqueue_style）と
 * ビジュアルエディタ（add_editor_style）の両方で読み込まれる。
 * エディタ内には .entry-content が存在しないため、セレクタは .hg- 始まりの
 * クラス単体で完結させ、祖先セレクタに依存させないこと。
 */

/* ===== 見出しボックス（左ライン＋背景） ===== */
.hg-lead,
.hg-lead-strong {
	padding: 12px 18px;
	margin: 28px 0 14px;
}
/* 見出しの帯（hokugaku.css）と同じ緑系で揃えている */
.hg-lead {
	background: #f3faf6;
	border-left: 6px solid #2e8e56;
}
.hg-lead-strong {
	background: #d9f2e3;
	border-left: 6px solid #1e6b40;
}

/* ===== 囲みボックス ===== */
.hg-box-blue,
.hg-box-line,
.hg-box-soft,
.hg-box-cream,
.hg-box-dotted,
.hg-box-alert,
.hg-box-ok {
	margin: 28px 0;
}
.hg-box-blue {
	background: #f4f8ff;
	border: 3px solid #1e73be;
	border-radius: 12px;
	padding: 24px;
}
.hg-box-line {
	background: #f2fff7;
	border: 3px solid #06c755;
	border-radius: 12px;
	padding: 24px;
}
.hg-box-soft {
	background: #f3faf6;
	border: 2px solid #cfe9da;
	border-radius: 10px;
	padding: 18px;
}
.hg-box-cream {
	background: #fffaf2;
	border: 2px solid #ffe2b8;
	border-radius: 10px;
	padding: 18px;
}
.hg-box-dotted {
	background: #f0f8f3;
	border: 3px dotted #8fcfa8;
	border-radius: 10px;
	padding: 15px;
	word-break: break-all;
}
.hg-box-alert {
	background: #fffafa;
	border: 2px solid #e53935;
	padding: 20px;
}
.hg-box-ok {
	background: #f8fff8;
	border: 2px solid #00a65a;
	padding: 20px;
}

/*
 * ボックス内の最初/最後の要素の余白を殺す。
 * 手打ち時代は中の見出しに毎回 margin-top:0 を書いていた（8記事で確認）が、
 * これで不要になる。
 */
.hg-lead > *:first-child,
.hg-lead-strong > *:first-child,
.hg-box-blue > *:first-child,
.hg-box-line > *:first-child,
.hg-box-soft > *:first-child,
.hg-box-cream > *:first-child,
.hg-box-dotted > *:first-child,
.hg-box-alert > *:first-child,
.hg-box-ok > *:first-child {
	margin-top: 0;
}
.hg-lead > *:last-child,
.hg-lead-strong > *:last-child,
.hg-box-blue > *:last-child,
.hg-box-line > *:last-child,
.hg-box-soft > *:last-child,
.hg-box-cream > *:last-child,
.hg-box-dotted > *:last-child,
.hg-box-alert > *:last-child,
.hg-box-ok > *:last-child {
	margin-bottom: 0;
}

/*
 * ボックス内の見出しはボックス側の装飾に任せ、テーマの h2/h3 装飾を打ち消す。
 * .single-blog .entry-content h2 の詳細度(0,2,1)に勝つ必要があるため
 * クラスを二重に書いて詳細度を上げている（本ファイルは hokugaku.css より後に読み込む）。
 */
.hg-lead.hg-lead h2,
.hg-lead.hg-lead h3,
.hg-lead-strong.hg-lead-strong h2,
.hg-lead-strong.hg-lead-strong h3,
.hg-box-blue.hg-box-blue h2,
.hg-box-blue.hg-box-blue h3,
.hg-box-line.hg-box-line h2,
.hg-box-line.hg-box-line h3,
.hg-box-soft.hg-box-soft h2,
.hg-box-soft.hg-box-soft h3,
.hg-box-cream.hg-box-cream h2,
.hg-box-cream.hg-box-cream h3,
.hg-box-dotted.hg-box-dotted h2,
.hg-box-dotted.hg-box-dotted h3,
.hg-box-alert.hg-box-alert h2,
.hg-box-alert.hg-box-alert h3,
.hg-box-ok.hg-box-ok h2,
.hg-box-ok.hg-box-ok h3 {
	background: none;
	border: none;
	border-radius: 0;
	padding: 0;
	margin-bottom: .5em;
	text-align: left;
}
.hg-box-blue.hg-box-blue h2,
.hg-box-blue.hg-box-blue h3 {
	color: #1e73be;
}
.hg-box-line.hg-box-line h2,
.hg-box-line.hg-box-line h3 {
	color: #06c755;
}
.hg-box-alert.hg-box-alert h2,
.hg-box-alert.hg-box-alert h3 {
	color: #e53935;
}
.hg-box-ok.hg-box-ok h2,
.hg-box-ok.hg-box-ok h3 {
	color: #00a65a;
}

/* ===== ラベル（インライン） ===== */
.hg-label {
	background: #3399ff;
	color: #fff;
	display: inline-block;
	padding: 5px 10px;
}

/* ===== CTAボタン ===== */
.hg-btn,
.hg-btn:link,
.hg-btn:visited {
	background: #1e73be;
	color: #fff;
	display: inline-block;
	padding: 14px 28px;
	border-radius: 8px;
	font-weight: bold;
	text-decoration: none;
}
.hg-btn:hover {
	background: #155a94;
	color: #fff;
	text-decoration: none;
}

/* ===== 表 ===== */
/*
 * TinyMCE の「表の挿入」は全セルを <td> で作るため、見出しセル(<th>)を
 * 前提にすると見出し行に色が付かない（ツクガク146記事でも <th> は71個に対し
 * <td> は4053個で、ほぼ使われていない）。
 * そこで1行目は <td> のままでも見出しとして表示する。
 *
 * 同146記事の表159個を調べたところ、1行目がデータ行の表は1つも無く
 * すべて項目名の行だったため、見出し行なしの派生クラスは用意しない。
 */
.hg-table {
	border-collapse: collapse;
	width: 100%;
	margin: 20px 0;
}
.hg-table th,
.hg-table td {
	border: 1px solid #ccc;
	padding: 10px;
}

/* thead があればそこを見出しにする */
.hg-table > thead > tr > th,
.hg-table > thead > tr > td,
/*
 * thead が無い表は tbody の1行目を見出しにする。
 * thead があると thead が最初の子になるため tbody:first-child は一致せず、
 * 見出しが二重に付くことはない。
 */
.hg-table > tbody:first-child > tr:first-child > th,
.hg-table > tbody:first-child > tr:first-child > td {
	background: #f5f5f5;
	font-weight: bold;
	text-align: center;
}

/*
 * ===== レスポンシブ動画（YouTube等のiframeを囲む） =====
 *
 * これは「スタイル」メニューには載せていない。事前に iframe を
 * 貼っておく必要があり、文章を選ぶだけの他の項目と操作が異なるため。
 * 使う場合はコードタブで下記のように書く。
 *
 *   <div class="hg-embed"><iframe src="https://www.youtube.com/embed/..."></iframe></div>
 *
 * padding-top:56.25% は 9÷16。幅がいくつでも16:9を保つ。
 */
.hg-embed {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
}
.hg-embed iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* スマホ */
@media screen and (max-width: 767px) {
	.hg-box-blue,
	.hg-box-line {
		padding: 16px;
	}
	.hg-box-alert,
	.hg-box-ok {
		padding: 14px;
	}
}