@charset "UTF-8";
/*
Theme Name:  Lightning Child
Theme URI:   https://www.vektor-inc.co.jp/service/wordpress-theme/lightning/
Description: Lightning の子テーマ。カスタマイズはすべてこちらに書きます。親テーマを直接編集しないこと。
Author:      e-education
Template:    lightning
Version:     1.0.0
License:     GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lightning-child
*/

/* ==========================================================================
   カスタムCSSはこの下に書いてください
   親テーマ（lightning）の CSS はすべて自動で読み込まれています。
   ここに書いたものが最後に読み込まれ、親テーマの指定を上書きします。
   ========================================================================== */

/* --------------------------------------------------------------------------
   トップページのページタイトル（「ホーム」）を隠す

   Lightning は固定ページの上に .page-header でタイトルを出す。
   トップページはファーストビューが主役なので、ここだけ非表示にする。
   `.home` はトップページにだけ付くクラスなので、他のページのタイトルは残る。
   -------------------------------------------------------------------------- */
.home .page-header {
	display: none;
}

/* --------------------------------------------------------------------------
   カバーブロック内の見出しから、テーマの飾り線を外す

   Lightning は h2 の上に横線、h3 の下に下線を自動で付ける。
   白い背景では自然だが、濃い色を敷いたカバーブロックの上では浮いて見える。
   カバーの中の見出しだけ、線を消して余白も詰める。
   -------------------------------------------------------------------------- */
.wp-block-cover h2,
.wp-block-cover h3 {
	border: none;
	padding-top: 0;
	padding-bottom: 0;
}

.wp-block-cover h2::before,
.wp-block-cover h2::after,
.wp-block-cover h3::before,
.wp-block-cover h3::after {
	content: none;
}

/* --------------------------------------------------------------------------
   日本語の見出しを、意味の切れ目で折り返す

   ブラウザ既定では「自分ででき／るようになりたい」のように語の途中で切れる。
   auto-phrase は文節単位で折り返してくれる（Chrome / Edge が対応）。
   未対応のブラウザでは従来どおりの折り返しになるだけで、崩れはしない。
   -------------------------------------------------------------------------- */
h1, h2, h3, h4,
.wp-block-heading {
	word-break: auto-phrase;
}

/* --------------------------------------------------------------------------
   スマホで表を縦に積む

   2列の表は、スマホ幅だと1列目が押しつぶされて
   「サ／ー／ビ／ス」のように1文字ずつ折り返されてしまう。
   768px 未満では、セルを縦に並べる形に切り替える。
   3列以上の表（比較表など）は横スクロールのほうが読みやすいので、
   .is-scrollable クラスを付けた表は対象外にしている。
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {

	.wp-block-table:not(.is-scrollable) table,
	.wp-block-table:not(.is-scrollable) tbody,
	.wp-block-table:not(.is-scrollable) tr,
	.wp-block-table:not(.is-scrollable) th,
	.wp-block-table:not(.is-scrollable) td {
		display: block;
		width: auto;
	}

	/* 見出し行はスマホでは不要（各行に項目名が入るため） */
	.wp-block-table:not(.is-scrollable) thead {
		display: none;
	}

	.wp-block-table:not(.is-scrollable) tr {
		border-bottom: 1px solid #d6dbe1;
		padding: 0.5em 0;
	}

	/* 1列目（項目名）を見出しらしく */
	.wp-block-table:not(.is-scrollable) td:first-child {
		font-weight: 700;
		border: none;
		padding-bottom: 0.2em;
	}

	.wp-block-table:not(.is-scrollable) td {
		border: none;
		padding-top: 0;
	}
}