@charset "UTF-8";
/*
Theme Name: GeneratePress Child - ポリコートジャパン
Theme URI: https://policoat-japan.com/
Description: 株式会社ポリコートジャパン用の GeneratePress 子テーマ。Cocoon 版のデザインをそのまま維持しつつ、表示速度・構造化データ・セキュリティを改善したもの。
Author: 株式会社ポリコートジャパン
Template: generatepress
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: generatepress-child-policoat
*/

/* =========================================================================
 * デザイントークン
 * Cocoon 版から実測した値。色を変えるときはここだけ触れば全体に伝播する。
 * ========================================================================= */

:root {
	--pj-black: #000000;
	--pj-white: #ffffff;
	--pj-blue: #094bb1;          /* ブランド青（フッター・見出し帯・ヘッダー下線） */
	--pj-line-green: #06c755;    /* LINE ボタン（LINE 現行のブランド色） */
	--pj-line-green-hover: #05a948;
	--pj-blue-hover: #0d5fd6;    /* もともと青い部品のホバー（明るい青） */
	--pj-pink: #e9727e;          /* スマホ表示時の価格表見出し */
	--pj-border-grey: #cccccc;

	--pj-font-serif: "游明朝", "ヒラギノ明朝 ProN", "Noto Serif JP", serif;
	--pj-header-border: 10px;    /* ヘッダー下の青い帯 */
	--pj-mobile-bar-height: 50px;
	--pj-nav-drop: 1296px;       /* この幅以下でモバイル表示に切り替わる */
}

/* =========================================================================
 * ベース
 * ========================================================================= */

/*
 * 旧子テーマにあったリセット。これが無いと、幅 100% を指定したセルに
 * 余白と罫線が外側へ足され、表が親要素からはみ出す。
 */
* {
	box-sizing: border-box;
}

/* body を下げたときに隙間から白地が覗かないよう、土台も黒にしておく。 */
html {
	background-color: var(--pj-black);
}

body {
	background-color: var(--pj-black);
	color: var(--pj-white);
	font-family: var(--pj-font-serif);
	font-size: 18px;
}

/*
 * 区切り線は Cocoon 版ではブラウザ既定の見た目のままだった
 * （枠線 1px の inset、上下マージンはリセットで 0、色は薄いグレー）。
 * GeneratePress は高さ 1px の背景色ブロックに置き換えて上下 40px を空けるので戻す。
 */
hr {
	height: auto;
	margin: 0;
	background-color: transparent;
	border-style: inset;
	border-width: 1px;
	color: #eee;
	border-color: #eee;
}

/*
 * フォーム部品は Cocoon 版では装飾されておらず、ほぼブラウザ既定の見た目だった。
 * GeneratePress は背景・文字色・枠線・行間を独自に指定するので既定へ戻す。
 * GeneratePress 側が属性セレクタを使っているため、こちらも同じ強さで書く。
 */
button,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="date"],
input[type="submit"],
input[type="button"],
input[type="reset"],
select,
textarea {
	font-family: revert;
	font-size: revert;
	color: revert;
	background-color: revert;
	border: revert;
	border-radius: revert;
	padding: revert;
	line-height: revert;
}

/*
 * 入力欄そのものは Cocoon が指定していた見た目を引き継ぐ。
 * 文字色・背景・書体はブラウザ既定のまま（上の revert）で、
 * 余白・枠線・文字サイズ・幅だけを指定していた。
 */
input[type="text"],
input[type="password"],
input[type="date"],
input[type="datetime"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="time"],
input[type="url"],
select,
textarea {
	padding: 11px;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-size: inherit;
	width: 100%;
}

/* 送信ボタンも同じ余白で横幅いっぱい。 */
input[type="submit"] {
	padding: 11px;
	width: 100%;
	margin: 0;
	cursor: pointer;
}

/*
 * 箇条書きの字下げ。Cocoon 版は padding で 40px、外側マージンは 0 だった。
 * GeneratePress は逆に margin-left: 3em を使うのでどちらも指定し直す。
 */
ol,
ul {
	padding-left: 40px;
	margin-left: 0;
}

/* 入れ子の箇条書きも同様（GeneratePress は入れ子に別途マージンを足す）。 */
ul ul,
ul ol,
ol ul,
ol ol {
	margin-left: 0;
}

a {
	color: var(--pj-white);
}

/* GeneratePress のコンテナ背景・余白を Cocoon 版に合わせて無効化する。 */
.site-content,
.content-area,
.site-main,
.inside-article {
	background-color: transparent;
	padding: 0;
	margin: 0;
	border: none;
	box-shadow: none;
}

.site.grid-container,
.site-content .content-area {
	max-width: none;
	width: 100%;
	padding: 0;
	margin: 0;
}

.separate-containers .site-main,
.separate-containers .inside-article,
.one-container .site-content {
	padding: 0;
	margin: 0;
}

/*
 * 本文の外側の余白。Cocoon は下に 3em（基準 18px で 54px）空けていた。
 * この余白の分だけ、本文と「本文下ウィジェット」の間が空く。
 */
.entry-content {
	margin-top: 0;
	margin-bottom: 3em;
}

/*
 * GeneratePress は .entry-content::after にクリアフィックスを置いており、
 * それがあると最後の要素の下マージンが親の外へ相殺されず、本文が 1 行分高くなる。
 * 本文中に回り込み（float）は無いのでクリアフィックスを外し、
 * Cocoon と同じ「最後の余白は外に逃がす」挙動に戻す。
 */
.entry-content::after {
	content: none;
}

/* -------------------------------------------------------------------------
 * 本文の行間・ブロック間隔
 *
 * Cocoon は本文直下の要素に line-height:1.8 と margin-bottom:1.8em を与え、
 * 上マージンは持たせていなかった。GeneratePress は 1.5 行・上下両方に
 * マージンを置くため、そのままだと全ページで行間と間隔がずれる。
 * ---------------------------------------------------------------------- */

/*
 * 本文直下の要素だけが下マージン 1.8em を持ち、入れ子の要素は 0。
 * 実測した Cocoon 版の本文はこの 1 パターンだけで説明できる
 * （直下 48 要素すべてが 32.4px＝1.8em、入れ子はすべて 0）。
 */
.entry-content > * {
	line-height: 1.8;
	margin-top: 0;
	margin-bottom: 1.8em;
}

/*
 * 入れ子要素のマージンは 0。直下の要素にだけ余白を持たせたいので、
 * 「直下の要素の子孫」を対象にして打ち消す（直下の要素自身には当たらない）。
 * 表だけは対象から外し、下の table { margin: 20px auto } を活かす。
 */
.entry-content > * :where(p, ul, ol, dl, figure, blockquote, pre, h1, h2, h3, h4, h5, h6, div, section) {
	margin-top: 0;
	margin-bottom: 0;
}

/*
 * 表の上下余白は現行サイトの実測に合わせる。
 * 素の表と .tbl-kakaku2 は 20px、会社概要と料金表（.tbl-kakaku）は 0 だった。
 */
.company-deteil-tbl,
.tbl-kakaku {
	margin-top: 0;
	margin-bottom: 0;
}

/*
 * 入れ子でも下マージンを持つのは画像ブロックと段組みブロックだけ。
 * 全ページの実測で、他のブロック（グループ・カラム・スペーサー・ボタン）は
 * 入れ子だと 0 になっていた。
 */
.entry-content .wp-block-image,
.entry-content .wp-block-columns {
	margin-bottom: 1.8em;
}

/*
 * ただし親の最後の要素なら余白を付けない（下端に余分な空きを作らない）。
 * 対象は上で余白を与えたブロックだけに絞る。全要素に広げると、
 * ページ独自 CSS が付けている余白まで消えてしまう。
 */
.entry-content .wp-block-image:last-child,
.entry-content .wp-block-columns:last-child {
	margin-bottom: 0;
}

/*
 * 中身が空になったグループは、余白ごと詰める。
 * 記事が 0 件の一覧を省いたあとに、空の枠だけが残らないようにする。
 */
.entry-content .wp-block-group:not(:has(> *)) {
	display: none;
}

/* 画像ブロックの中の画像はブロック表示（下にすき間を作らない）。 */
.wp-block-image img {
	display: block;
}

/*
 * WebP 配信のために <img> を <picture> で包んでいるが、
 * picture 自体はレイアウトに関与させない。こうすると画像の配置が
 * 包む前とまったく同じになる。
 */
picture {
	display: contents;
}

/* -------------------------------------------------------------------------
 * 見出し
 *
 * Cocoon 版の見出しは装飾が無効化されており、実測すると
 * ブラウザ既定の相対サイズ（h2=1.5em、h3=1.17em …）に太字、
 * 行間は本文からの継承（1.8）だった。px ではなく em で指定することで、
 * 480px 以下で基準が 18px→16px に変わっても比率が保たれる。
 * ---------------------------------------------------------------------- */

/*
 * セレクタは要素名だけにとどめる。Cocoon 版ではこれらの値がブラウザ既定
 * （＝最弱）だったため、ページ個別 CSS の .changing-text { font-size: 36px } などが
 * そのまま勝っていた。.entry-content を前置すると個別指定を潰してしまう。
 * GeneratePress の h1〜h6 指定とは同じ強さだが、子テーマの方が後に読まれるので勝つ。
 */
h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: bold;
	line-height: inherit;
	padding: 0;
	background: none;
	border: none;
	border-radius: 0;
}

h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.17em; }
h4 { font-size: 1em; }
h5 { font-size: 0.83em; }
h6 { font-size: 0.67em; }

/* 見出し内の強調は、ブラウザ既定どおり親より一段太くする（700 → 900）。 */
strong,
b {
	font-weight: bolder;
}

/*
 * Cocoon が提供していた本文用のユーティリティクラス。
 * 記事本文に直接書かれているので、テーマを替えても必要。
 * 本サイトで実際に使われているのは .bold だけだが、
 * 今後の編集で使えるよう主要なものを揃えておく。
 */
.bold {
	font-weight: bold;
}

.red {
	color: #e60033;
}

.bold-red {
	font-weight: bold;
	color: #e60033;
}

.blue {
	color: #0095d9;
}

.bold-blue {
	font-weight: bold;
	color: #0095d9;
}

.green {
	color: #3eb370;
}

.bold-green {
	font-weight: bold;
	color: #3eb370;
}

.red-under {
	border-bottom: 2px solid red;
}

.marker {
	background-color: #ff9;
}

.marker-red {
	background-color: #ffd0d1;
}

.marker-blue {
	background-color: #a8dafb;
}

.marker-under {
	background: linear-gradient(transparent 60%, #ff9 60%);
}

/* -------------------------------------------------------------------------
 * 表組み（Cocoon 版の実装をそのまま移植）
 *
 * セルは 0.5em（基準 18px なら 9px）の余白と #eee の 1px 罫線。
 * 見出しセルは中央寄せ。背景色は子テーマ側で透明にしていた。
 * ---------------------------------------------------------------------- */

table {
	max-width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
	border: 0;
}

table th,
table td {
	position: relative;
	padding: 0.5em;
	border: 1px solid #eee;
	/* GeneratePress は left を明示するが、Cocoon 版は初期値のままだった。 */
	text-align: start;
}

table th {
	text-align: center;
	background-color: transparent;
	font-weight: bold;
}

/*
 * GeneratePress は td に font-weight: 400 を直接指定するため、
 * 親から太さを継承させているページ（フィルム施工・コーティング診断）で
 * 文字の太さが変わってしまう。継承に戻す。
 */
caption,
td {
	font-weight: inherit;
}

/* 固定ページでは記事フッター（投稿日・カテゴリ等）を出さない。 */
.page .entry-footer,
.page .entry-meta {
	display: none;
}

/* =========================================================================
 * ヘッダー
 * ロゴ左 / 連絡先・LINE ボタン右。黒地に 10px の青いボーダー。
 * ========================================================================= */

/*
 * Cocoon 版はヘッダーとナビをひとつの箱に入れ、その一番下に青い帯を引いていた。
 * GeneratePress では両者が兄弟要素になるため、帯はナビの下に付ける。
 */
/*
 * ヘッダーは 1 行構成。
 *
 * 以前はロゴ行 178px ＋ ナビ 106px ＋ 青帯 10px の計 294px あり、
 * 画面の高さの 3 分の 1 を占めていた。メニューが 4 項目になったので、
 * 「ロゴ｜ナビ｜連絡先」を横一列に並べて高さを詰める。
 * 青い帯はヘッダーの一番下に置く。
 */
.site-header {
	background-color: var(--pj-black);
	border-bottom: var(--pj-header-border) solid var(--pj-blue);
	padding: 0;
	/*
	 * ドロップダウンは開くとヘッダーの下へはみ出す。重なり順を指定しないと
	 * DOM で後ろにある本文（ヒーロー画像）が上に描かれ、はみ出した部分が
	 * 隠れてしまうため、ヘッダーごと本文より前に出す。
	 */
	position: relative;
	z-index: 50;
}

.site-header .inside-header {
	display: flex;
	align-items: center;
	flex-direction: row;
	/* ロゴと連絡先を両端に寄せ、ナビを中間に置く */
	justify-content: space-between;
	gap: 24px;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 12px 5%;
	box-sizing: border-box;
}

/* ロゴ。幅は中身に合わせ、縮まないようにする。 */
.site-header .site-logo {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
}

.site-header .site-logo img,
.site-header .header-image {
	display: block;
	width: auto;
	height: auto;
	/* 1 行にまとめたぶんロゴは控えめに。96px → 58px。 */
	max-height: 58px;
	margin: 0;
}

/* 連絡先ブロック。電話番号を主役にして横に並べる。 */
.header-right {
	flex: 0 0 auto;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 14px;
	margin: 0;
	padding: 0;
	text-align: right;
}

/*
 * 電話番号を主役にする。
 * 「TEL:」の接頭辞は小さく添え、番号自体を大きく見せて
 * 電話での問い合わせを拾いやすくする。
 */
.header-contact-info {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	color: var(--pj-white);
	line-height: 1.25;
	text-align: right;
	white-space: nowrap;
}

.header-contact-info .phone {
	font-weight: bold;
	font-size: 22px;
	letter-spacing: 0.02em;
}

/* 「TEL:」の文字だけ小さくする */
.header-contact-info .phone::first-line {
	font-size: 22px;
}

.header-contact-info .phone a {
	color: inherit;
	text-decoration: none;
}

.header-contact-info .phone a:hover {
	text-decoration: underline;
}

.header-contact-info .hours {
	font-size: 12px;
	font-weight: normal;
	margin-top: 2px;
	color: rgba(255, 255, 255, 0.85);
}

.line-contact-btn {
	background-color: var(--pj-line-green);
	color: var(--pj-white);
	padding: 9px 16px;
	border-radius: 4px;
	text-decoration: none;
	font-size: 13px;
	font-weight: bold;
	line-height: 1.3;
	transition: background-color 0.25s;
	white-space: nowrap;
}

.line-contact-btn:hover,
.line-contact-btn:focus-visible {
	background-color: var(--pj-line-green-hover);
	color: var(--pj-white);
	text-decoration: none;
}

/* =========================================================================
 * グローバルナビゲーション
 * ========================================================================= */

/*
 * ナビはヘッダーの中に置くので、背景・帯・余白はヘッダー側に任せる。
 */
.main-navigation {
	background-color: transparent;
	border-bottom: none;
	padding: 0;
	width: auto;
	flex: 1 1 auto;
	margin: 0;
}

.main-navigation .inside-navigation {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	max-width: none;
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

.main-navigation .main-nav > ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: center;
}

.main-navigation .main-nav > ul > li {
	display: block;
	width: auto;
	height: auto;
	margin: 0;
	position: relative;
}

.main-navigation .main-nav > ul > li > a {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	align-content: center;
	height: 34px;
	line-height: 34px;
	color: var(--pj-white);
	/* 1 行にまとめたので 20px → 17px に。ロゴと連絡先と釣り合う大きさ。 */
	font-size: 17px;
	/* 縦罫線をやめたぶん、間隔で区切りを示すので広めに取る。 */
	padding: 0 22px;
	text-decoration: none;
	white-space: nowrap;
	box-sizing: border-box;
	position: relative;
	transition: opacity 0.2s;
}

/*
 * いま見ているページと、カーソルを乗せた項目に青い下線を引く。
 *
 * 移行前は項目のあいだに白い縦線が入っていたが、ヘッダーを 1 行にまとめると
 * ロゴと連絡先のあいだで縦線だけが宙に浮いて見えるうえ、「サービス」の
 * 三角と縦線がくっついてしまう。区切りは間隔に任せ、線は
 * 「どれを見ているか」を示す役割に回す（本文のセクション見出しと同じ青）。
 */
.main-navigation .main-nav > ul > li > a::before {
	content: "";
	position: absolute;
	left: 22px;
	right: 22px;
	bottom: 2px;
	height: 2px;
	background-color: var(--pj-blue);
	opacity: 0;
	transition: opacity 0.2s;
}

.main-navigation .main-nav > ul > li:hover > a::before,
.main-navigation .main-nav > ul > li.current-menu-item > a::before,
.main-navigation .main-nav > ul > li.current-menu-ancestor > a::before,
.main-navigation .main-nav > ul > li.current-menu-parent > a::before {
	opacity: 1;
}

.main-navigation .main-nav > ul > li > a:hover {
	color: var(--pj-white);
}

/* -------------------------------------------------------------------------
 * ドロップダウン（サービスの下層）
 *
 * 項目を横一列に並べると 2,100px 必要で必ず 2 段になっていたため、
 * サービス 6 ページを「サービス」の下にまとめている。
 * 見た目は上段と揃えて黒地に白文字とする。
 * ---------------------------------------------------------------------- */

/*
 * GeneratePress は親項目の中に開閉アイコン用の span を差し込む。
 * 下の自前の三角と二重に矢印が出てしまうので、span 側を消す。
 * この span はモバイル時の開閉ボタンも兼ねるが、1296px 以下では
 * PC 用メニューごと隠して自前のドロワーに切り替えているため影響しない。
 */
.main-navigation .main-nav .dropdown-menu-toggle {
	display: none;
}

/* 親項目に開閉を示す小さな三角を付ける。 */
.main-navigation .main-nav > ul > li.menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: 0;
	height: 0;
	margin-left: 8px;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid currentColor;
	vertical-align: middle;
}

.main-navigation .main-nav ul ul {
	background-color: var(--pj-black);
	border: 1px solid rgba(255, 255, 255, 0.25);
	list-style: none;
	margin: 0;
	padding: 0;
	/* 一番長い「全バラシルームクリーニング」が折り返さない幅 */
	width: 300px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.main-navigation .main-nav ul ul li {
	width: 100%;
	margin: 0;
	/* 上段の縦罫線は下層では使わず、項目どうしの横罫線にする。 */
	border-right: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

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

.main-navigation .main-nav ul ul li a {
	display: block;
	width: 100%;
	height: auto;
	/* 上段より一段小さくして、下層であることが分かるようにする。 */
	font-size: 17px;
	line-height: 1.5;
	color: var(--pj-white);
	padding: 12px 20px;
	text-align: left;
	white-space: normal;
	text-decoration: none;
}

.main-navigation .main-nav ul ul li a:hover,
.main-navigation .main-nav ul ul li a:focus-visible,
.main-navigation .main-nav ul ul li.current-menu-item a {
	/* 本文中のボタンと同じ「青で塗る」に揃える。 */
	background-color: var(--pj-blue);
	color: var(--pj-white);
}

/* メニュー項目に添える日本語キャプション（Cocoon 版から継承）。 */
.menu_jpn_name {
	font-size: 12px;
	display: block;
	width: 100%;
}

/* =========================================================================
 * モバイルヘッダーバー
 * 画面上部に固定される Home / ロゴ / メニュー の 3 分割バー。
 * 開閉は checkbox + CSS のみ。JavaScript は使わない。
 * ========================================================================= */

.mobile-header-menu-buttons {
	display: none;
	position: fixed;
	top: var(--wp-admin--admin-bar--height, 0px);
	left: 0;
	right: 0;
	z-index: 100;
	min-height: var(--pj-mobile-bar-height);
	margin: 0;
	padding: 0;
	list-style: none;
	background-color: var(--pj-black);
	color: var(--pj-white);
	box-shadow: 0 0 5px darkgrey;
	justify-content: space-between;
	align-items: stretch;
}

.mobile-header-menu-buttons .menu-button {
	position: relative;
	width: 70px;
	min-width: 46px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.mobile-header-menu-buttons .logo-menu-button {
	flex: 1 1 auto;
	width: auto;
}

.mobile-header-menu-buttons .menu-button-in {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 4px 0;
	color: var(--pj-white);
	text-decoration: none;
	box-sizing: border-box;
}

.mobile-header-menu-buttons .menu-icon {
	display: block;
	line-height: 1;
}

.mobile-header-menu-buttons .menu-caption {
	display: block;
	font-size: 10px;
	line-height: 1.2;
	margin-top: 2px;
}

.mobile-header-menu-buttons .logo-menu-button img {
	max-height: 38px;
	width: auto;
	height: auto;
	display: block;
}

.mobile-header-menu-buttons .display-none {
	display: none;
}

/* ドロワー本体 */
.mobile-header-menu-buttons .menu-content {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 9999;
	width: 100%;
	max-width: 84%;
	height: 100%;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	background: var(--pj-black);
	color: var(--pj-white);
	transform: translateX(100%);
	transition: transform 0.3s ease-in-out;
	cursor: default;
}

/* 背景を覆う透明レイヤー。ドロワーを開いている間だけ出す。 */
.mobile-header-menu-buttons .menu-overlay {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 9998;
	background: rgba(0, 0, 0, 0.5);
}

#navi-menu-input:checked ~ .menu-content {
	transform: translateX(0);
}

#navi-menu-input:checked ~ .menu-overlay {
	display: block;
}

.mobile-header-menu-buttons .menu-close-button {
	display: block;
	text-align: right;
	padding: 12px 16px;
	font-size: 28px;
	line-height: 1;
	color: var(--pj-white);
	cursor: pointer;
}

.mobile-header-menu-buttons .menu-drawer {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mobile-header-menu-buttons .menu-drawer li {
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.mobile-header-menu-buttons .menu-drawer a {
	display: block;
	padding: 16px 20px;
	color: var(--pj-white);
	text-decoration: none;
	font-size: 16px;
}

/*
 * ドロワーの下層項目（サービスの中身）。
 * 一段下げて、親との関係が分かるようにする。
 */
.mobile-header-menu-buttons .menu-drawer ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mobile-header-menu-buttons .menu-drawer ul a {
	padding-left: 40px;
	font-size: 15px;
	background-color: rgba(255, 255, 255, 0.06);
}

/*
 * ドロワー下部の連絡先。
 * PC ではヘッダー右側に出しているものを、スマホではここに置く
 * （固定バーは横幅が足りず、電話だけをアイコンで出している）。
 */
.mobile-header-menu-buttons .drawer-contact {
	padding: 20px;
	border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.mobile-header-menu-buttons .drawer-tel {
	display: block;
	color: var(--pj-white);
	text-decoration: none;
	margin-bottom: 14px;
}

.mobile-header-menu-buttons .drawer-tel-number {
	display: block;
	font-size: 22px;
	font-weight: bold;
	letter-spacing: 0.02em;
}

.mobile-header-menu-buttons .drawer-tel-hours {
	display: block;
	font-size: 12px;
	margin-top: 2px;
	color: rgba(255, 255, 255, 0.85);
}

.mobile-header-menu-buttons .drawer-line {
	display: block;
	text-align: center;
}

/* =========================================================================
 * ページタイトル帯
 * ========================================================================= */

.page-title-bar {
	background-color: var(--pj-blue);
	width: 100%;
	margin: 0;
}

.page-title-bar .entry-title {
	text-align: center;
	color: var(--pj-white);
	background-color: var(--pj-blue);
	font-size: 26px;
	/* 帯の高さが Cocoon 版と揃う比率（PC 74px / SP 66px）。 */
	line-height: 1.3;
	font-weight: bold;
	margin: 0;
	padding: 20px 0;
}

/* =========================================================================
 * 本文下ウィジェット（トップのお問い合わせセクションが入る領域）
 * Cocoon の #content-bottom と同じ余白・幅にする。
 * ========================================================================= */

/*
 * Cocoon では本文の下マージン（3em）と本文下ウィジェットの上マージン（1em）が
 * 相殺されて 3em ぶんだけ空いていた。GeneratePress は途中の入れ物に
 * クリアフィックスがあり相殺されないため、上マージンは持たせない。
 * 下側はウィジェット自身の 1.8em が外へ抜けるのでそのままで揃う。
 */
#content-bottom {
	margin: 0;
}

#content-bottom .widget-content-bottom {
	margin-bottom: 1.8em;
}

/*
 * 固定ページでは全幅、投稿ページでは 1256px（Cocoon の .wrap の幅）。
 * Cocoon 子テーマが .page .wrap だけ 100% に広げていたため、
 * 投稿ページだけ本文まわりが狭いという違いがそのまま残っている。
 */
#content-bottom .content-bottom-in {
	width: 100%;
}

.single #content-bottom .content-bottom-in {
	width: 1256px;
	max-width: 100%;
}

/* =========================================================================
 * フッター
 * ========================================================================= */

.site-footer {
	background-color: var(--pj-blue);
	background-size: cover;
	margin-top: 0;
	padding: 0;
}

/*
 * Cocoon 版のフッターは高さ 82px、青地に 14px のコピーライト 1 行だけ。
 * 上 16px / 下 41px の非対称な余白まで含めて再現する。
 */
.site-footer .inside-site-info,
.site-footer .site-info {
	margin: 0;
	padding: 0;
	max-width: none;
	width: 100%;
	box-sizing: border-box;
}

.site-footer .footer-bottom {
	display: block;
	margin: 0;
	padding: 16px 8px 41px;
	font-size: 14px;
	/* コピーライト 1 行の高さを Cocoon 版の 25px に揃える。 */
	line-height: 25px;
	text-align: center;
	width: 100%;
	box-sizing: border-box;
}

/* -------------------------------------------------------------------------
 * フッターのリンク一覧
 *
 * 移行前はリンクが 1 つも無く、プライバシーポリシーへは
 * お問い合わせページからしか辿れなかった。
 * サービス／サイト情報／会社情報の 3 列にまとめる。
 * ---------------------------------------------------------------------- */

.site-footer .footer-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 40px 64px;
	max-width: var(--pj-wide-width);
	margin: 0 auto;
	padding: 24px 20px 32px;
	text-align: left;
}

.site-footer .footer-links-group {
	min-width: 200px;
}

.site-footer .footer-links-heading {
	font-size: 16px;
	font-weight: bold;
	line-height: 1.5;
	margin: 0 0 12px;
	padding: 0 0 8px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.35);
	color: var(--pj-white);
}

.site-footer .footer-links-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-footer .footer-links-list li {
	margin: 0 0 6px;
}

.site-footer .footer-links-list a {
	display: inline-block;
	font-size: 14px;
	line-height: 1.6;
	text-decoration: none;
	color: var(--pj-white);
}

.site-footer .footer-links-list a:hover,
.site-footer .footer-legal a:hover,
.site-footer .footer-company a:hover {
	text-decoration: underline;
}

.site-footer .footer-company p {
	font-size: 14px;
	line-height: 1.7;
	margin: 0 0 10px;
	color: var(--pj-white);
}

.site-footer .footer-company a {
	text-decoration: none;
}

/* 区切りとコピーライト */
.site-footer .footer-bottom-content {
	border-top: 1px solid rgba(255, 255, 255, 0.35);
	max-width: var(--pj-wide-width);
	margin: 0 auto;
	padding-top: 16px;
}

.site-footer .footer-legal {
	margin: 0 0 6px;
	line-height: 1.6;
}

.site-footer .footer-legal a {
	text-decoration: none;
	font-size: 14px;
}

/* 狭い画面では 1 列に積む。 */
@media screen and (max-width: 767px) {
	.site-footer .footer-links {
		gap: 28px;
		padding: 24px 20px;
	}

	.site-footer .footer-links-group {
		width: 100%;
		min-width: 0;
	}
}

.site-footer .copyright,
.site-footer .site-info,
.site-footer a {
	color: var(--pj-white);
}

/* GeneratePress のフッターウィジェット領域は使わない。 */
.site-footer .footer-widgets {
	display: none;
}

/* トップへ戻るボタン */
.generate-back-to-top {
	width: 100px;
	height: 100px;
	background-color: var(--pj-blue);
	color: var(--pj-white);
	border-radius: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.25s;
}

/*
 * ホバー時の色は GeneratePress の設定（back_to_top_background_color_hover）で
 * #0d5fd6 を指定している。テーマ側の指定の方が詳細度が高く、
 * ここに書いても打ち消されるため設定側に置いている。
 */

/* =========================================================================
 * su_animate 代替（スクロール連動フェードイン）
 * animate.css の fadeInUp と同じ見え方を CSS だけで再現する。
 * ========================================================================= */

.pj-animate {
	opacity: 0;
}

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

@keyframes pjFadeInUp {
	from {
		opacity: 0;
		transform: translate3d(0, 100%, 0);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pj-animate,
	.pj-animate.is-visible {
		opacity: 1;
		animation: none;
	}
}

/* =========================================================================
 * Google マップ埋め込み（遅延読み込み）
 * ========================================================================= */

.pj-map-embed {
	position: relative;
	width: 100%;
}

.pj-map-embed iframe {
	display: block;
	max-width: 100%;
	border: 0;
}

/* 読み込み前に高さが潰れてレイアウトがずれないようにする。 */
.pj-map-embed iframe[data-src] {
	background-color: #222;
}

/* =========================================================================
 * Cocoon ボタンブロック（cocoon-blocks/button-1）の再現
 * 本文中に 3 箇所あるため、見た目だけを子テーマ側で持つ。
 * ========================================================================= */

.wp-block-cocoon-blocks-button-1 {
	margin: 0 0 1.5em;
}

.wp-block-cocoon-blocks-button-1.aligncenter {
	text-align: center;
}

/*
 * Cocoon の実装をそのまま移植。
 * 既定は黒地に白文字、枠線 2px。本文中では has-*-color / has-*-border-color の
 * クラスで色が上書きされるため、変数で受けられるようにしておく。
 */
/*
 * コアのボタンブロックは WordPress 既定の寸法のままだった。
 * GeneratePress は独自の文字サイズ・余白で上書きするので戻す。
 */
.wp-block-button .wp-block-button__link {
	font-size: 1.125em;
	line-height: inherit;
	padding: calc(0.667em + 2px) calc(1.333em + 2px);
}

/* 枠線色を指定したボタンは線種を実線にする（指定が無いと線が描かれない）。 */
.wp-block-button .wp-block-button__link.has-border-color {
	border-style: solid;
}

.button-block .btn {
	display: inline-block;
	padding: 7px 13px;
	font-size: 14px;
	font-weight: bold;
	line-height: normal;
	text-align: center;
	text-decoration: none;
	border-width: 2px;
	border-style: solid;
	border-radius: 4px;
	border-color: var(--pj-btn-border, transparent);
	color: var(--pj-btn-text, #fff);
	background-color: var(--pj-btn-bg, #333);
	background-clip: padding-box;
	cursor: pointer;
	position: relative;
	margin: 0;
}

/* サイズ違い（本文では btn-m を使っている）。 */
.button-block .btn-m {
	padding: 14px 45px;
	font-size: 16px;
}

/* ブロックエディタの色指定を枠線と文字色に反映する。 */
.button-block .btn.has-cocoon-white-border-color {
	border-color: var(--pj-white);
}

.button-block .btn.has-ex-a-border-color {
	border-color: var(--wp--preset--color--ex-a, var(--pj-white));
}

/* =========================================================================
 * 本文下「お問い合わせ」欄のボタン
 *
 * この欄は content-bottom ウィジェットにあり .entry-content の外なので、
 * 本文中のボタンとは別に指定する必要がある。
 * 元は色を直書きしていてホバーが効かず、さらに緑が 3 種類
 *（#06C755 / #7bb13c、ヘッダーは #00b900）混在していた。
 * ========================================================================= */

.content-bottom .pj-contact-btn {
	display: inline-block;
	background-color: var(--pj-black);
	color: var(--pj-white);
	font-weight: bold;
	font-size: 1.1em;
	line-height: 1.4;
	padding: 14px 32px;
	border: 1px solid var(--pj-black);
	border-radius: 8px;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.25s, border-color 0.25s, color 0.25s;
}

.content-bottom .pj-contact-btn:hover,
.content-bottom .pj-contact-btn:focus-visible {
	background-color: var(--pj-blue);
	border-color: var(--pj-blue);
	color: var(--pj-white);
}

/* LINE への導線だけは LINE の緑を保つ（別サービスに見えないようにするため）。 */
.content-bottom .pj-contact-btn-line {
	background-color: var(--pj-line-green);
	border-color: var(--pj-line-green);
}

.content-bottom .pj-contact-btn-line:hover,
.content-bottom .pj-contact-btn-line:focus-visible {
	background-color: var(--pj-line-green-hover);
	border-color: var(--pj-line-green-hover);
}

/*
 * 電話番号。
 * 元は #7bb13c という、LINE でもブランドでもない緑だった。
 * この欄で色を持つのは LINE への導線だけにしたいので、
 * カード内の見出しと同じ黒にする。数字は大きく太いので、
 * 色を付けなくても十分に目立つ。
 */
.content-bottom .pj-contact-tel-wrap {
	color: #333333;
}

.content-bottom .pj-contact-tel {
	color: #333333;
	text-decoration: none;
	transition: color 0.25s;
}

.content-bottom .pj-contact-tel:hover,
.content-bottom .pj-contact-tel:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* =========================================================================
 * ホバー・フォーカスの共通ルール
 *
 * 移行前は部品ごとに反応がばらばらだった。色が変わるもの、枠線だけ
 * 変わるもの、まったく変わらないもの（モバイルバー・ドロワー・送信ボタン）が
 * 混在し、どこが押せるのか予測できなかったため、次の 3 つに揃える。
 *
 *   1. 押せるものにカーソルを乗せると、ブランド青で塗られる
 *   2. もともと色が付いているもの（青のトップへ戻る・緑の LINE・
 *      コーディング診断ページの金）は、その色のまま一段濃く／明るくする
 *   3. 文中の文字リンクは下線が太くなる
 *
 * 時間はすべて 0.25 秒。キーボード操作でも同じ見た目になるよう、
 * :hover と :focus-visible を必ず対にする。
 * ========================================================================= */

/* --- モバイル固定バーの 3 ボタンとドロワー --- */

.mobile-header-menu-buttons .menu-button-in,
.mobile-header-menu-buttons .menu-close-button,
.mobile-header-menu-buttons .drawer-tel {
	transition: background-color 0.25s, color 0.25s;
}

.mobile-header-menu-buttons .menu-button-in:hover,
.mobile-header-menu-buttons .menu-button-in:focus-visible,
.mobile-header-menu-buttons .menu-close-button:hover,
.mobile-header-menu-buttons .menu-close-button:focus-visible,
.mobile-header-menu-buttons .drawer-tel:hover,
.mobile-header-menu-buttons .drawer-tel:focus-visible,
.mobile-header-menu-buttons .menu-drawer a:hover,
.mobile-header-menu-buttons .menu-drawer a:focus-visible {
	background-color: var(--pj-blue);
	color: var(--pj-white);
}

/* --- お問い合わせフォームの送信ボタン --- */

/*
 * 移行前はブラウザ既定の灰色ボタンのままで、本文中のボタンと
 * まったく違う見た目だった。本文のボタンと同じ作りに揃える。
 */
.wpcf7-form input[type="submit"],
.wpcf7-form button[type="submit"] {
	background-color: var(--pj-black);
	color: var(--pj-white);
	border: 1px solid var(--pj-white);
	border-radius: 6px;
	padding: 16px 32px;
	font-size: 16px;
	font-weight: bold;
	line-height: 1.4;
	width: 100%;
	cursor: pointer;
	transition: background-color 0.25s, border-color 0.25s, color 0.25s;
}

.wpcf7-form input[type="submit"]:hover,
.wpcf7-form input[type="submit"]:focus-visible,
.wpcf7-form button[type="submit"]:hover,
.wpcf7-form button[type="submit"]:focus-visible {
	background-color: var(--pj-blue);
	border-color: var(--pj-blue);
	color: var(--pj-white);
}

/* --- 記事一覧の見出しリンク --- */

.wp-show-posts-entry-title a {
	transition: color 0.25s;
}

.wp-show-posts-entry-title a:hover,
.wp-show-posts-entry-title a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* --- キーボード操作の目印 --- */

/*
 * 青で塗る部品はフォーカス時も同じ見た目になるが、
 * 塗りが変わらない文字リンクにはブラウザ既定の枠を残しておく。
 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: 2px solid var(--pj-white);
	outline-offset: 2px;
}

/* =========================================================================
 * 本文中のボタン
 *
 * 移行前は 3 系統のボタンが混在し、見た目がばらばらだった。
 *
 *   .btn.btn-m                 … Cocoon のボタンブロック。#333 地・枠線 2px
 *   .wp-block-button__link     … コアのボタンブロック。枠線の有無がまちまちで、
 *                                枠線が無いものは黒地に黒背景となり、
 *                                本文と見分けが付かなかった
 *   .wp-show-posts-read-more   … 記事一覧の「続きを読む」。枠線 2px
 *
 * 押せる場所だと一目で分かるよう、全て同じ「黒地＋白い枠線」に揃え、
 * カーソルを乗せるとブランド青で塗りつぶす。青はナビの現在位置や
 * セクション見出しの下線と同じ色で、サイト全体で「操作できる／いまここ」
 * を表す色として使っている。
 * ========================================================================= */

.entry-content .wp-block-button__link,
.entry-content .button-block .btn,
.entry-content .wp-show-posts-read-more {
	display: inline-block;
	background-color: var(--pj-black);
	color: var(--pj-white);
	border: 1px solid var(--pj-white);
	border-radius: 6px;
	text-decoration: none;
	font-weight: bold;
	line-height: 1.4;
	cursor: pointer;
	transition: background-color 0.25s, border-color 0.25s, color 0.25s;
}

/* 本文中の主要な導線。指で押せる大きさ（高さ 56px 前後）を確保する。 */
.entry-content .wp-block-button__link,
.entry-content .button-block .btn {
	padding: 16px 32px;
	font-size: 16px;
	min-width: 220px;
	text-align: center;
}

/* 記事一覧の中に置かれるものは、カードを圧迫しないよう一回り小さく。 */
.entry-content .wp-show-posts-read-more {
	padding: 9px 20px;
	font-size: 14px;
}

.entry-content .wp-block-button__link:hover,
.entry-content .wp-block-button__link:focus-visible,
.entry-content .button-block .btn:hover,
.entry-content .button-block .btn:focus-visible,
.entry-content .wp-show-posts-read-more:hover,
.entry-content .wp-show-posts-read-more:focus-visible {
	background-color: var(--pj-blue);
	border-color: var(--pj-blue);
	color: var(--pj-white);
}

/*
 * 独自デザインのページ（フィルム施工・コーディング診断）は
 * 金色のボタンで独立して組まれているため、上の統一から外す。
 */
.entry-content a[class*="pcj-"] {
	min-width: 0;
}

/* -------------------------------------------------------------------------
 * 本文中の文中リンク
 *
 * 文字色が本文と同じ白で下線も無く、リンクだと気付けなかった。
 * ボタンや独自クラスを持つリンクは対象外にして、
 * 段落・箇条書き・表の中の素のリンクにだけ下線を引く。
 * ---------------------------------------------------------------------- */

.entry-content :is(p, li, td, dd) a:not([class]) {
	text-decoration: underline;
	text-underline-offset: 0.2em;
	text-decoration-thickness: 1px;
}

.entry-content :is(p, li, td, dd) a:not([class]):hover {
	text-decoration-thickness: 2px;
}

/* =========================================================================
 * 本文内のユーティリティクラス
 * 記事本文に直接書かれているクラス。Cocoon 子テーマから移設。
 * ========================================================================= */

/*
 * 本文の入れ物の幅。
 *
 * Cocoon 時代はページごとに 80% / 90% / 65% と割合でばらついていたうえ、
 * 独自 CSS のページだけ 860px 固定という別系統が混ざっていた。
 * その結果、本文 1 行の幅が 840 / 860 / 1152 / 1440px の 4 種類に分かれていた。
 *
 * ここで「最大 900px・中央寄せ」に一本化する。
 * 割合ではなく上限で止めるので、大きなモニターでも 1 行が長くなりすぎない
 * （日本語は 1 行 40〜45 文字が読みやすく、900px がその範囲）。
 */
:root {
	--pj-content-width: 900px;
	/* 画像や段組みなど、本文より少し広げてよい要素の上限 */
	--pj-wide-width: 1100px;
}

/*
 * 入れ物は「広い方」の幅で用意し、その中で文章だけを 900px に絞る。
 * こうすると、読みやすさが要る文章は 900px、
 * 列の多い価格表や写真の並びは 1100px まで使えて、両立できる。
 */
.entry-content .contents-group,
.entry-content .cost-group-style,
.entry-content .company-photo-space,
.entry-content .pcj-section-inner,
.entry-content .pcj-benefits-inner,
.entry-content .pcj-sd-inner {
	width: 100%;
	max-width: var(--pj-wide-width);
	margin-left: auto;
	margin-right: auto;
	/* 狭い画面で端に貼り付かないよう左右に余白を持たせる */
	padding-left: 20px;
	padding-right: 20px;
}

/*
 * 文章そのものの幅。1 行が長すぎると読みづらいので 900px で止める。
 * 段組みや表の中に入った文章は、その枠の幅に従うため影響を受けない。
 */
.entry-content p,
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6,
.entry-content ul,
.entry-content ol,
.entry-content dl,
.entry-content blockquote {
	max-width: var(--pj-content-width);
	margin-left: auto;
	margin-right: auto;
}

/*
 * 段組み・ギャラリー・表は本文より少し広げる。
 *
 * WordPress 標準の「コンテンツ幅 840px」がブロックの入れ子の仕方によって
 * 効いたり効かなかったりしていたため、同じ 3 枚並びでも画像の大きさが
 * ページごとに違っていた。ここで上限を揃え、列数が同じなら同じ幅にする。
 */
.entry-content .wp-block-columns,
.entry-content .wp-block-gallery,
.entry-content .wp-block-table,
.entry-content > table,
.entry-content .contents-group > table {
	max-width: var(--pj-wide-width);
	margin-left: auto;
	margin-right: auto;
}

/* 入れ子の段組みは、親の幅いっぱいに広がってよい。 */
.entry-content .wp-block-column .wp-block-columns,
.entry-content .wp-block-column .wp-block-gallery {
	max-width: none;
}

/*
 * 本文を包むグループが無い場所（投稿ページや、固定ページで
 * .contents-group の外に置かれた段落）にも同じ上限を効かせる。
 * カバー画像や背景色を敷いたグループは画面いっぱいのままにしたいので、
 * それらは対象から外す。
 */
.entry-content > p,
.entry-content > h1,
.entry-content > h2,
.entry-content > h3,
.entry-content > h4,
.entry-content > h5,
.entry-content > h6,
.entry-content > ul,
.entry-content > ol,
.entry-content > dl,
.entry-content > blockquote,
.entry-content > figure,
.entry-content > table {
	max-width: var(--pj-content-width);
	margin-left: auto;
	margin-right: auto;
}

.contents-group-backcolor {
	background-color: rgba(255, 255, 255, 0.7);
}

.contents-top-text {
	padding: 20px;
}

.contents-bottom-space {
	padding-bottom: 50px;
}

/* -------------------------------------------------------------------------
 * セクションの区切り
 *
 * 移行前は一部のセクションだけが灰色（#949495）や濃灰（#666）の背景を持ち、
 * 残りは黒だった。規則性が無く、白文字とのコントラストも 2.5:1 しか無かった
 * ため、背景は全て黒に統一し、区切りは細い線と見出しの下線で示す。
 *
 * セクション見出しの見分け方は「中央寄せの h2」。このサイトでは
 * Service・お知らせ・価格表・沿革などのまとまりの見出しが中央寄せで、
 * よくある質問の各問のような本文中の見出しは左寄せになっている。
 * ---------------------------------------------------------------------- */

/*
 * セクション見出しの下に短い青の下線を置く。
 * 「ここから別のまとまり」だと分かるようにするためのもの。
 */
.entry-content h2.has-text-align-center::after {
	content: "";
	display: block;
	width: 56px;
	height: 3px;
	margin: 16px auto 0;
	background-color: var(--pj-blue);
}

/*
 * セクションの上に細い線を引く。
 * 最初のセクションには引かない（~ で「前に別のセクションがあるもの」に絞る）。
 *
 * 1・2 行目: 本文直下に並ぶセクション（グループ）同士のあいだ。
 * 3 行目  : [su_animate] に包まれた最後のセクション（トップのお問い合わせ欄）。
 * 4 行目  : グループに包まれず本文直下に置かれた見出し。
 * 5 行目  : 1 つのグループの中に複数のまとまりがある場合の 2 つめ以降。
 */
.entry-content > .wp-block-group:has(h2.has-text-align-center) ~ .wp-block-group:has(h2.has-text-align-center),
.entry-content > .pj-animate:has(h2.has-text-align-center) ~ .wp-block-group:has(h2.has-text-align-center),
.entry-content > :is(.wp-block-group, .pj-animate):has(h2.has-text-align-center) ~ .pj-animate > .wp-block-group,
.entry-content > :is(.wp-block-group, .pj-animate):has(h2.has-text-align-center) ~ h2.has-text-align-center,
.entry-content .wp-block-group > h2.has-text-align-center ~ h2.has-text-align-center,
/* 6 行目  : 見出しを持たない中身（表・画像など）の後に始まるまとまり。 */
.entry-content .wp-block-group > :is(table, .wp-block-html, .wp-block-image, .wp-block-columns) ~ h2.has-text-align-center {
	border-top: 1px solid rgba(255, 255, 255, 0.16);
	padding-top: 50px;
}
.title-img-hr {
	padding-top: 30px;
}

.cover-text-shadow {
	text-shadow: black 1px 1px;
}

.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;
}

/*
 * Cocoon 子テーマには .article .wp-block-cover { margin-bottom: 0 } があったが、
 * 実測するとテーマ本体の指定が勝っており 32.4px（1.8em）になっていた。
 * 見た目を変えないため、ここでは打ち消さず .entry-content > * の余白に任せる。
 */
.footer-cover .wp-block-cover {
	margin-bottom: 0;
}

/* =========================================================================
 * お知らせ・施工事例一覧（WP Show Posts）
 * ========================================================================= */

.wp-show-posts-inner,
h2.wp-show-posts-entry-title {
	background-color: rgba(255, 255, 255, 0.7);
	color: #333;
}

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

.wp-show-posts-entry-summary {
	text-align: left;
	padding: 0 10px;
	/* プラグイン既定の下余白。本文の入れ子リセットで消えないよう明示する。 */
	margin-bottom: 1em;
}

.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: #333;
}

.wpsp-load-more {
	text-align: center;
}

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

/* =========================================================================
 * テーブル（会社概要・価格表）
 * ========================================================================= */

table {
	margin: 20px auto;
	width: auto;
}

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

table th,
.tbl-kakaku td:first-child {
	background: transparent;
}

/* 会社概要の定義テーブル */
.company-deteil-tbl tr {
	background-color: transparent;
}

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

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

/* 価格表 */
table.tbl-kakaku2 {
	margin: 20px auto;
	width: 100%;
}

.tbl-kakaku2 th {
	padding: 10px;
}

/*
 * 注意: 現行サイトの子テーマ 521 行目は border 宣言の行頭に全角スペースが入っており、
 * 宣言そのものが無効になっている。そのため罫線は意図された #ccc ではなく、
 * テーマ既定の #eee で表示されていた。見た目を変えないためここでも罫線を指定しない。
 * #ccc に直したい場合は border: 1px solid var(--pj-border-grey); を足すこと。
 */
.tbl-kakaku2 td {
	padding: 10px;
	text-align: center;
}

.tbl-kakaku2 td::before {
	content: attr(data-label);
	font-weight: bold;
	margin-right: 10px;
}

/* =========================================================================
 * レスポンシブ
 * ブレークポイントは Cocoon 版と同じ 1296 / 1260 / 1023 / 834 / 768 / 480px。
 * ========================================================================= */

/* --- 1296px 以下：PC メニューを隠しモバイルバーに切り替える --- */
@media screen and (max-width: 1296px) {
	/*
	 * ヘッダーは丸ごと隠し、上部固定バーに役割を委ねる。
	 * 移行前は中身の無い黒帯が 50px 残っていたが（Cocoon 版の作りをそのまま
	 * 引き継いだもの）、意味が無いので詰める。青い帯だけは目印として残す。
	 */
	.site-header {
		border-bottom-width: 4px;
	}

	.site-header .inside-header {
		display: none;
	}

	.mobile-header-menu-buttons {
		display: flex;
	}

	/*
	 * 固定バーの分だけページ全体を押し下げる。
	 * 押し下げた隙間は固定バーが覆う。
	 */
	body {
		margin-top: var(--pj-mobile-bar-height);
	}

	/* GeneratePress 標準のモバイルメニューは使わない。 */
	.main-navigation .menu-toggle,
	.main-navigation .mobile-menu-control-wrapper {
		display: none;
	}
}

/* --- 1260px 以下 --- */
@media screen and (max-width: 1260px) {
	.site-header,
	.main-navigation {
		width: 100%;
	}
}

/* --- 1023px 以下 --- */
@media screen and (max-width: 1023px) {
	.tagline {
		display: none;
	}
}

/* --- 834px 以下：スマホ向けレイアウト --- */
@media screen and (max-width: 834px) {
	.site-main {
		padding: 0;
	}

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

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

	.contents-group {
		width: 100%;
		margin-left: auto;
		margin-right: auto;
	}

	/* PC / スマホの出し分けを反転する */
	.pc-title-img,
	.pc-table,
	.pc-style-text {
		display: none !important;
	}

	.sp-title-img,
	.sp-table,
	.sp-style-text {
		display: block !important;
	}

	.content-sp-media-img img {
		padding: 0 8%;
	}

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

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

	/* 狭い画面では表のセルを詰め、文字も一段小さくする（Cocoon 版と同じ）。 */
	table th,
	table td {
		padding: 3px;
		font-size: 0.8em;
	}

	/* 会社概要テーブルを縦積みにする */
	.company-deteil-tbl {
		width: 95%;
	}

	.company-deteil-tbl td {
		border-bottom: 1px solid var(--pj-border-grey);
	}

	.company-deteil-tbl th {
		border-bottom: none;
	}

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

	/* 価格表を縦積みにする */
	.tbl-kakaku {
		width: 100%;
	}

	.tbl-kakaku .thead {
		display: none;
	}

	.tbl-kakaku tr {
		width: 100%;
	}

	.tbl-kakaku td {
		display: block;
		text-align: right;
		width: 100%;
	}

	.tbl-kakaku td:first-child {
		background: var(--pj-pink);
		color: var(--pj-white);
		font-weight: bold;
		text-align: center;
	}

	.tbl-kakaku td::before {
		content: attr(data-label);
		float: left;
		font-weight: bold;
		margin-right: 10px;
	}

	.tbl-kakaku2 {
		width: 80%;
	}

	.tbl-kakaku2 .last td:last-child {
		border-bottom: 1px solid var(--pj-border-grey);
		width: 100%;
	}

	.tbl-kakaku2 th {
		display: block;
		width: 100%;
		background: var(--pj-pink);
		color: var(--pj-white);
		font-weight: bold;
		text-align: center;
	}

	.tbl-kakaku2 td {
		border-bottom: none;
		display: block;
		text-align: right;
		width: 100%;
	}

	.tbl-kakaku2 td::before {
		content: attr(data-label);
		float: left;
		font-weight: bold;
		margin-right: 10px;
	}
}

/* --- 480px 以下 --- */
@media screen and (max-width: 480px) {
	body {
		font-size: 16px;
	}

	.page-title-bar .entry-title {
		font-size: 20px;
	}

	/* Cocoon 版は狭い画面で h2・h3 を 20px 固定にしていた。 */
	h2,
	h3 {
		font-size: 20px;
	}
}