/*
Theme Name: Careant GP
Theme URI: https://careant.com/
Description: 株式会社キャリアント用 GeneratePress 子テーマ。Cocoon 版 careant.com の表示を再現しつつ軽量化。
Author: 株式会社キャリアント
Template: generatepress
Version: 1.2.0
Text Domain: careant-gp
*/

/* ============================================
   デザイントークン

   Cocoon 版で実際に効いていた値をそのまま持ち込む。
   ・キーカラー #094BB1 … 子テーマ style.css（テーマ設定の #19448e は未使用）
   ・明朝       … 子テーマが .ff-sawarabi-mincho を端末フォントに上書きしていた
   ・幅 1256px  … 親テーマ .wrap
   ============================================ */
:root {
	--careant-key: #094bb1;
	--careant-key-dark: #073a8a;
	--careant-text: #333;
	--careant-bg: #fff;
	--careant-gray: #f7f7f7;
	--careant-border: #ccc;
	--careant-wrap: 1256px;
	--careant-mincho: "游明朝", "Yu Mincho", "YuMincho", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "Noto Serif JP", serif;

	/* WordPress のブロックレイアウト幅。
	   本番（Cocoon）は content 840px / wide 1200px を指定しており、
	   align 無しの段組みなどがこの幅に収まる。
	   GeneratePress は theme.json で別の値を持つため、本番に合わせる。 */
	--wp--style--global--content-size: 840px;
	--wp--style--global--wide-size: 1200px;
}

/* ============================================
   Cocoon のカラーパレット

   ブロックに has-cocoon-white-color などが付いたまま移行しているため、
   定義が無いと文字色・背景色が効かない（ヒーローの白文字が黒く出る）。
   ============================================ */
body .has-cocoon-white-color            { color: #fff; }
body .has-cocoon-black-color            { color: #333; }
body .has-cocoon-white-background-color { background-color: #fff; }
body .has-cocoon-black-background-color { background-color: #333; }
body .has-cocoon-white-border-color     { border-color: #fff; }
body .has-cocoon-black-border-color     { border-color: #333; }

/* Cocoon 独自ブロック（Q&A・ポイントなど）で使われている派生クラス */
body .has-cocoon-white-question-color,
body .has-cocoon-white-answer-color,
body .has-cocoon-white-icon-color,
body .has-cocoon-white-point-color { color: #fff; }

body .has-cocoon-black-question-color,
body .has-cocoon-black-answer-color,
body .has-cocoon-black-icon-color,
body .has-cocoon-black-point-color { color: #333; }

/* Cocoon のキーカラー（#19448e）と藍色（#1e50a2）。
   ボタンや見出しの背景に使われているため定義が要る。 */
body .has-key-color-color            { color: #19448e; }
body .has-key-color-background-color { background-color: #19448e; }
body .has-key-color-border-color     { border-color: #19448e; }

body .has-indigo-color               { color: #1e50a2; }
body .has-indigo-background-color    { background-color: #1e50a2; }
body .has-indigo-border-color        { border-color: #1e50a2; }

/* ============================================
   Cocoon のボタンブロック

   <div class="... button-block"><a class="btn btn-m ...">…</a></div>
   という構造で 13 箇所使われている。定義が無いと素のリンクになる。
   ============================================ */
.button-block {
	float: none;
	/* 本番は .body .button-block で下マージン 1.8em が入る */
	margin: 0 0 1.8em;
	border: 0;
}

.button-block.aligncenter { text-align: center; }
.button-block.alignleft   { text-align: left; }
.button-block.alignright  { text-align: right; }

.btn {
	display: inline-block;
	border: 2px solid transparent;
	border-radius: 4px;
	color: #fff;
	background-color: #333;
	font-weight: bold;
	font-size: 14px;
	line-height: normal;
	padding: 7px 13px;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: all 0.3s ease-in-out;
	background-clip: padding-box;
}

.btn:hover { color: #fff; opacity: 0.8; }

.btn-m {
	padding: 14px 45px;
	font-size: 16px;
}

/* ============================================
   本文で使われている小さなユーティリティ
   ============================================ */
.topimage-text  { text-shadow: gray 2px 2px; }
.bold           { font-weight: bold; }

/* .line-height-50 は Cocoon のアイコンフォント用ユーティリティで、
   本番では後段の .entry-content>*{line-height:1.8} に負けて効いていない。
   移植すると本文の行間が 50px になってしまうため、あえて定義しない。 */

/* ============================================
   基本タイポグラフィ（18px / モバイル 16px・明朝）
   ============================================ */
body {
	font-family: var(--careant-mincho);
	font-size: 18px;
	font-weight: 400;
	/* 本番の行間は 1.8（32.4px）。GeneratePress 既定の 1.5 だと行が詰まる */
	line-height: 1.8;
	color: var(--careant-text);
	background-color: var(--careant-bg);
	overflow-x: hidden;
}

/* Cocoon は段落・見出しに上下余白を持たせず、スペーサーブロックで間隔を作っている。
   GeneratePress の既定余白（p に 27px、h2 に 20px）が入ると全体が間延びする。 */
.entry-content p,
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
	margin-top: 0;
	margin-bottom: 0;
}

/* 見出しの大きさも本番に合わせる（h2 は 27px = 18px × 1.5） */
.entry-content h2 {
	font-size: 27px;
	line-height: 1.8;
}

@media (max-width: 768px) {
	body { font-size: 16px; }
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--careant-mincho);
}

a { color: var(--careant-key); }
a:hover { color: var(--careant-key-dark); }

/* ============================================
   ヘッダー（センターロゴ・幅 1256px・背景グレー）
   ============================================ */
.site-header {
	background-color: var(--careant-gray);
}

/* 余白は本番のスクリーンショット実測に合わせている
   （ロゴ上 36px / ロゴ下 28px / ナビ下 22px / 紺ライン 10px） */
.site-header .inside-header {
	display: block;
	text-align: center;
	max-width: var(--careant-wrap);
	padding-top: 36px;
	padding-bottom: 28px;
}

.site-header .site-logo {
	display: block;
	margin: 0 auto;
}

.site-header .site-logo img {
	height: auto;
	max-width: 409px;
	width: 100%;
}

/* ============================================
   グローバルナビ

   Cocoon 版は .navi-in > ul li を height:auto / line-height:20px に詰め、
   項目間を 1px の区切り線で分けていた。その寸法をそのまま再現する。
   紺の太いラインはヘッダー全体の下端（＝ナビの下）に入る。
   ============================================ */
.main-navigation {
	background-color: var(--careant-gray);
	border-bottom: 10px solid var(--careant-key);
}

.main-navigation .inside-navigation {
	justify-content: center;
	max-width: var(--careant-wrap);
}

/* GeneratePress が .nav-below-header … .inside-navigation.grid-container で
   padding を指定しているため、同じ形のセレクタでないと上書きできない */
.nav-below-header .main-navigation .inside-navigation.grid-container {
	padding-top: 0;
	padding-bottom: 22px;
}

.main-navigation .main-nav ul {
	justify-content: center;
}

.main-navigation .main-nav ul li {
	border-right: 1px solid #aaa;
}

.main-navigation .main-nav ul li:last-child {
	border-right: none;
}

.main-navigation .main-nav ul li a {
	font-family: var(--careant-mincho);
	font-size: 16px;
	color: var(--careant-text);
	line-height: 20px;
	padding: 0 1.4em;
	height: auto;
}

.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li[class*="current-menu-"] > a {
	color: var(--careant-key);
	background-color: #f5f8fa;
}

/* メニュー項目内の日本語サブ表記 */
.menu_jpn_name { font-size: 12px; }

/* ============================================
   固定ページは本文をビューポート全幅にする

   Cocoon 子テーマの .page .wrap { width:100% } に相当。
   これがないとカバーブロックや画像がコンテンツ幅で頭打ちになる。
   投稿（お知らせ）は通常幅のまま。
   ============================================ */
.page .site.grid-container {
	max-width: 100%;
}

.page .site-content {
	padding: 0;
}

/* 投稿（お知らせ）は本番の .wrap と同じ 1256px 幅にする */
.single .site.grid-container,
.blog .site.grid-container,
.archive .site.grid-container {
	max-width: var(--careant-wrap);
}

/* 本番はタイトルの上に 14px（＋タイトル自身の 16px マージン）しか取らない。
   GeneratePress 既定の 40px だと記事全体が 26px 下がる。 */
.single .site-content,
.blog .site-content,
.archive .site-content {
	padding: 14px 0 40px;
}

/* Cocoon 子テーマの .entry-content { margin-top: 0 } に相当。
   これが無いとタイトル帯と本文の間に 2em（36px）の隙間ができる。
   GeneratePress が :not(:first-child) 付きで指定してくるため、
   こちらも同じ詳細度で書かないと勝てない。 */
.entry-content,
.entry-content:not(:first-child) {
	margin-top: 0;
}

/* Cocoon 子テーマの
   .page .page-contents-bottom / .page-company-cover-bottom { margin-bottom: 0 }
   に相当。後段のブロック共通マージン（1.8em）に負けないよう
   .entry-content を挟んで詳細度を上げている。 */
.page .entry-content,
.page .entry-content .page-company-cover-bottom,
.page .entry-content .page-contents-bottom {
	margin-bottom: 0;
}

/* カバーブロックも他のブロックと同じ下マージンを持つ。
   Cocoon 子テーマの .article .wp-block-cover{margin-bottom:0} は
   .article 配下にしか効かず、本文のカバーには適用されていなかった。 */
.entry-content .wp-block-cover {
	margin-bottom: 1.8em;
}

/* 最後のブロックには余白を付けない。
   本文直下だけでなく、メディア＆テキストの本文側なども同様
   （ここに余白が残ると画像に対して文章側が上にずれる）。 */
.entry-content > *:last-child,
.entry-content > .wp-block-cover:last-child,
.entry-content .wp-block-media-text__content > *:last-child,
.entry-content .wp-block-column > *:last-child,
.entry-content .wp-block-group > *:last-child,
.entry-content .wp-block-cover__inner-container > *:last-child {
	margin-bottom: 0;
}

/* 投稿側で align-full を使ったときの保険 */
.single .entry-content > .alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* ============================================
   固定ページのタイトル（紺帯）

   Cocoon 子テーマの
   .page .entry-title { background:#094BB1; color:#fff; padding:30px 0 }
   を再現する。トップページは functions.php 側で非表示。
   ============================================ */
.page .entry-header {
	margin: 0;
}

.page .entry-title {
	background-color: var(--careant-key);
	color: #fff;
	/* 本番は 26px / 行間 1.3。帯の高さは 94px になる */
	font-size: 26px;
	line-height: 1.3;
	padding: 30px 0;
	margin: 0;
	text-align: center;
}

.entry-title {
	text-align: center;
}

/* ============================================
   投稿（お知らせ記事）

   本番はタイトル 26px・上下 16px の余白で、帯にはしない。
   本文の段落には 1.8em の下マージンが入る。
   ============================================ */
.single .entry-title {
	font-size: 26px;
	line-height: 1.3;
	margin: 16px 0;
	text-align: left;
}

.single .entry-content p {
	margin-bottom: 1.8em;
}

.single .entry-content > *:last-child {
	margin-bottom: 0;
}

/* 本文と下部メタ情報の間隔 */
.single .entry-content {
	margin-bottom: 54px;
}

/* ============================================
   スクロール時のフェードイン（[su_animate] の置き換え）

   animate.css（53.6KB）を読まずに、使っている 2 種類だけを自前で定義する。
   ============================================ */
.careant-animate {
	opacity: 0;
}

.careant-animate.is-visible {
	animation-duration: var(--careant-anim-duration, 1s);
	animation-delay: var(--careant-anim-delay, 0s);
	animation-fill-mode: both;
	animation-timing-function: ease;
}

.careant-animate--fadeIn.is-visible   { animation-name: careantFadeIn; }
.careant-animate--fadeInUp.is-visible { animation-name: careantFadeInUp; }

@keyframes careantFadeIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes careantFadeInUp {
	from { opacity: 0; transform: translate3d(0, 30px, 0); }
	to   { opacity: 1; transform: none; }
}

/* 動きを減らす設定の端末では animation を使わずそのまま表示する */
@media (prefers-reduced-motion: reduce) {
	.careant-animate,
	.careant-animate.is-visible {
		opacity: 1;
		animation: none;
		transform: none;
	}
}

/* JavaScript が動かない場合に中身が消えないようにする */
.no-js .careant-animate {
	opacity: 1;
}

/* ============================================
   パンくずリスト（投稿のみ・本文の下）
   ============================================ */
.careant-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	font-size: 14px;
	line-height: 23px;
	margin-bottom: 9px;
	color: var(--careant-text);
}

.careant-breadcrumb a {
	color: var(--careant-text);
	text-decoration: none;
}

.careant-breadcrumb a:hover {
	color: var(--careant-key);
	text-decoration: underline;
}

/* 先頭にホームアイコン（FontAwesome を読まずに SVG で描く） */
.careant-breadcrumb__item:first-child::before {
	content: "";
	display: inline-block;
	width: 14px;
	height: 14px;
	margin-right: 5px;
	vertical-align: -2px;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23333333"><path d="M12 3 2 12h3v8h5v-5h4v5h5v-8h3z"/></svg>');
	background-repeat: no-repeat;
	background-size: contain;
}

/* 項目の区切り */
.careant-breadcrumb__item + .careant-breadcrumb__item::before {
	content: "›";
	margin: 0 8px;
	color: #999;
}

/* 記事下のメタ情報は本番と同じく 1 行に並べる
   （GeneratePress の既定は縦積みで 3 行になる） */
.single .entry-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 1.2em;
	font-size: 15px;
}

.single .entry-meta .posted-on time + time::before {
	content: " ";
	display: inline-block;
	width: 0.6em;
}

/* ============================================
   ページ共通のレイアウト用クラス
   （各固定ページのブロックに付与されている）
   ============================================ */
.contents-group {
	width: 80%;
	margin-left: auto;
	margin-right: auto;
}

/* GeneratePress は theme.json を持つため、グループブロックに
   .wp-block-group__inner-container というラッパーが増える（本番の Cocoon 版には無い）。
   そこへ padding:40px と max-width:1200px が当たり、中の段組み・地図・画像の
   実寸が本番とずれる。display:contents でラッパーをレイアウト上なかったことにし、
   本番と同じ入れ子にそろえる。 */
.entry-content .wp-block-group__inner-container,
.site-main .wp-block-group__inner-container {
	display: contents;
}

/* 段組みの間隔。本番は 24px、GeneratePress の既定は 36px で、
   そのままだと地図やカラム内の要素が 6px ずつ細くなる。
   下マージン（コア既定の 1.75em＝31.5px）も本番では 0 なので合わせる。 */
.entry-content .wp-block-columns {
	gap: 24px;
	margin-bottom: 1.8em;
}

/* Cocoon は本文中のブロック全般に下マージン 1.8em（32.4px）を与えていた
   （.entry-content>*, .body .wp-block-cover, .body .wp-block-group … など）。
   これが無いとセクションが縦に詰まる。最後のブロックだけは余白なし。 */
.entry-content > * {
	margin-bottom: 1.8em;
}

.entry-content > *:last-child {
	margin-bottom: 0;
}

.entry-content .wp-block-media-text {
	margin-bottom: 1.8em;
}

/* GeneratePress は .alignwide を左右 -40px のネガティブマージンで広げ、
   max-width も calc(100% + 80px) にする（コンテナの余白へ食い込ませる指定）。
   本番はコンテンツ幅のままなので、メディア＆テキストの画像が太ってしまう。
   幅・余白の両方を解除して本番に合わせる。 */
.entry-content .alignwide {
	max-width: none;
	width: auto;
	margin-left: 0;
	margin-right: 0;
}

.contents-group-backcolor { background-color: rgba(255, 255, 255, 0.7); }
.contents-top-text        { padding: 20px; }
.contents-bottom-space    { padding-bottom: 50px; }
.title-img-hr             { padding-top: 30px; }
.costom-fontsize-1_5em    { font-size: 1.5em; }

/* ============================================
   PC / スマホでの画像・表・文章の出し分け
   ※ この指定がないと両方表示されてしまう
   ============================================ */
.pc-title-img, .pc-table, .pc-style-text { display: block !important; }
.sp-title-img, .sp-table, .sp-style-text { display: none !important; }

/* ============================================
   画面右の固定ボタン
   ============================================ */
.topright-button1,
.topright-button2 {
	display: block;
	position: fixed;
	right: 5px;
	z-index: 100;
	width: 30px;
	height: auto;
	padding: 10px 35px 10px 20px;
	border-radius: 5px;
	color: #fff;
	background-color: var(--careant-key);
}

.topright-button1 { top: 200px; }
.topright-button2 { top: 370px; }

.topright-button1 a,
.topright-button2 a {
	color: #fff;
	text-decoration: none;
}

.fa { font-size: 25px; }

/* ============================================
   新着情報（WP Show Posts）
   ============================================ */
.wp-show-posts-inner,
h2.wp-show-posts-entry-title {
	background-color: rgba(255, 255, 255, 0.7);
	color: var(--careant-text);
}

.wp-show-posts-inner { text-align: right; }

.wp-show-posts-entry-summary {
	text-align: left;
	padding: 0 10px;
}

.wp-show-posts-inner .wpsp-read-more { margin: 0 10px 1em; }

h2.wp-show-posts-entry-title {
	text-align: center;
	padding: 10px;
	background-color: transparent;
}

h2.wp-show-posts-entry-title a { color: var(--careant-text); }

.wpsp-load-more { text-align: center; }
.wpsp-load-more .page-numbers { width: 75px; }

/* カードの高さ揃え。
   JavaScript（matchHeight）を使わず flex で揃える。 */
.wp-show-posts-columns {
	display: flex;
	flex-wrap: wrap;
}

.wp-show-posts-columns .wp-show-posts-single {
	display: flex;
}

.wp-show-posts-columns .wp-show-posts-inner {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.wp-show-posts-columns .wp-show-posts-entry-summary {
	flex: 1 0 auto;
}

/* ============================================
   お問い合わせフォーム（Contact Form 7）

   本番は入力欄・送信ボタンとも幅いっぱい（余白 11px / 文字 18px）。
   GeneratePress の既定だと入力欄が 381px、ボタンが 76px と小さくなる。
   ============================================ */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="number"],
.wpcf7 input[type="date"],
.wpcf7 select,
.wpcf7 textarea {
	width: 100%;
	padding: 11px;
	font-size: 18px;
	/* 本番の実測（入力欄 45px＝行 21px、本文欄 10 行で 204px＝行 18px）に合わせる。
	   フォント由来の normal 値は環境で変わるため、行間を数値で固定する。 */
	line-height: 21px;
}

.wpcf7 textarea {
	line-height: 18px;
}

.wpcf7 input[type="submit"] {
	width: 100%;
	padding: 11px;
	font-size: 13.3333px;
}

/* ============================================
   表組み（教室詳細ページなど）
   ============================================ */
table {
	margin: 20px auto;
	width: auto;
	/* 本番（Cocoon）は collapse。GeneratePress 既定の separate だと
	   罫線が重ならず行の高さが増えてしまう。 */
	border-collapse: collapse;
}

/* 教室詳細の表は本番では上下マージンを持たない */
.school-deteil-tbl {
	margin-top: 0;
	margin-bottom: 0;
}

/* 表のセル内のリストも余白を持たない（本番と同じ）。
   GeneratePress 既定の 1.5em が入ると行の高さが変わる。 */
.entry-content table ul,
.entry-content table ol {
	margin-top: 0;
	margin-bottom: 0;
}

table tr:nth-of-type(2n+1) { background-color: transparent; }

.school-deteil-tbl tr { background-color: transparent; }

.school-deteil-tbl th {
	background-color: transparent;
	border: 0;
	border-bottom: 1px solid var(--careant-border);
	padding: 10px 30px 10px 10px;
	text-align: left;
}

.school-deteil-tbl td {
	background-color: transparent;
	border: 0;
	border-bottom: 1px solid var(--careant-border);
	padding: 10px;
}

/* ============================================
   フッター（紺地にロゴと著作権表示）
   ============================================ */
/* 本番は紺地に著作権表示が 1 行だけ（高さ約 50px）。
   GeneratePress は .site-info 自体に背景色を当てるため、
   .site-footer だけ塗っても内側の白で潰されてしまう。 */
.site-footer,
.site-footer .site-info {
	background-color: var(--careant-key);
	color: #fff;
	margin-top: 0;
}

.site-footer .inside-site-info {
	padding-top: 15px;
	padding-bottom: 15px;
	text-align: center;
}

.site-footer .copyright-bar {
	color: #fff;
	font-size: 15px;
	line-height: 21px;
}

.site-footer a { color: #fff; }

/* ============================================
   ボタン
   ============================================ */
.wp-block-button__link,
button, .button, input[type="submit"] {
	background-color: var(--careant-key);
	color: #fff;
	font-family: var(--careant-mincho);
}

.wp-block-button__link:hover,
button:hover, .button:hover, input[type="submit"]:hover {
	background-color: var(--careant-key-dark);
	color: #fff;
}

/* ============================================
   上へ戻るボタン

   GeneratePress は色だけをインライン出力し、位置や大きさの指定を持たない
   （main.min.css に .generate-back-to-top の定義が 1 件も無い）。
   そのまま使うと position:static の 18×23px の素のリンクになり、
   ページ最下部に流れてしまう。
   Cocoon 版（右下 10px・100×100px・薄グレー・角丸 5px）に合わせて自前で指定する。
   GeneratePress 側は a.generate-back-to-top で色を当ててくるため、
   こちらも同じ詳細度（要素＋クラス）で書く。
   ============================================ */
a.generate-back-to-top {
	position: fixed;
	right: 10px;
	bottom: 10px;
	z-index: 999;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100px;
	height: 100px;
	padding: 0;
	border-radius: 5px;
	background-color: #eee;
	color: #333;
	font-size: 22px;
	line-height: 1;
	text-align: center;
	text-decoration: none;
}

a.generate-back-to-top:hover,
a.generate-back-to-top:focus {
	background-color: #e2e2e2;
	color: #333;
}

/* アイコンは本番と同じ二重の山形（FontAwesome の fa-angle-double-up 相当）にする。
   GeneratePress は単一の山形 SVG を出すので隠し、
   FontAwesome を読み込まずに済むよう SVG を背景で描く。 */
a.generate-back-to-top .gp-icon {
	display: none;
}

a.generate-back-to-top::before {
	content: "";
	display: block;
	width: 26px;
	height: 26px;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23333333" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 13.5 12 7.5 18 13.5"/><polyline points="6 18.5 12 12.5 18 18.5"/></svg>');
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

/* ============================================
   レスポンシブ（834px 以下）
   ============================================ */
/* ============================================
   スマホのメニュー（768px 以下＝ハンバーガー表示域）

   PC 版の詰まった寸法（line-height:20px）をそのまま使うと
   展開時の項目が 20px しかなく、指で押しづらい。
   タップ領域の目安（44〜48px）を満たす高さにする。
   ============================================ */
@media screen and (max-width: 768px) {
	.main-navigation .main-nav ul li a {
		line-height: 1.4;
		padding: 14px 20px;
		text-align: left;
		height: auto;
	}

	/* 縦並びになるので区切りは下線に変える */
	.main-navigation .main-nav ul li {
		border-right: none;
		border-bottom: 1px solid rgba(0, 0, 0, 0.12);
	}

	.main-navigation .main-nav ul li:last-child {
		border-bottom: none;
	}

	/* 開閉ボタンも同じ余白感に揃える */
	.main-navigation .menu-toggle {
		line-height: 1.4;
		padding: 16px 20px;
	}

	/* 展開時はナビ下端の余白を詰める */
	.nav-below-header .main-navigation.toggled .inside-navigation.grid-container {
		padding-bottom: 0;
	}
}

@media screen and (max-width: 834px) {
	/* スマホでは sp- 系を表示し、pc- 系を隠す */
	.pc-title-img, .pc-table, .pc-style-text { display: none !important; }
	.sp-title-img, .sp-table, .sp-style-text { display: block !important; }

	.contents-group { width: 100%; }

	.content-sp-media-img img { padding: 0 8%; }
	.content-sp-text-group    { padding: 0 8% 50px 8%; }

	.topright-button1,
	.topright-button2 { display: none; }

	a.generate-back-to-top { width: 70px; height: 70px; }

	.wpsp-load-more .page-numbers { margin: 0 0 10px 0; width: 80%; }

	main ol.has-background,
	main ul.has-background { padding: 0 100px 0 100px; }

	.page .entry-title { padding: 20px 0; }

	/* 教室詳細テーブルは縦積みにする */
	.school-deteil-tbl { width: 95%; }
	.school-deteil-tbl th { border-bottom: none; }
	.school-deteil-tbl td { border-bottom: 1px solid var(--careant-border); }

	.school-deteil-tbl th,
	.school-deteil-tbl td {
		display: block;
		width: 100%;
		font-size: 100%;
	}
}