/* ==========================================================================
   livecall.jp テーマ「OOPS!」1.3.1 の style.css に直接書き込まれていた独自CSS（抽出）
   抽出日: 2026-10-22 / 抽出元: https://livecall.jp/wp-content/themes/oops_tcd048/style.css
   比較先: https://liveec.net（OOPS! 3.2.2）の style.css / responsive.min.css / design-plus.css
   使い方: wp-content/livecall-custom/livecall-custom.css として置く。mu-plugins/livecall-custom-css.php が読み込む（テーマ更新で消えない）。
   注意: [A] は確実に独自追加。[B] は既存ルールの書き換えと推定（新テーマで不要な場合あり、表示を見て判断）。
   ========================================================================== */

/* ---------- [B] 既存ルールへの書き換え・追加（推定） ---------- */
.bt_red_r { background: #fff; color:#c01f0e!important; border: 1px solid #c01f0e; }
.bt_red_r:hover, .bt_red_r:focus { background-color: #d33929!important; color: #fff; }
.wpcf7 h2 {text-align: center; font-weight: 600;}
.wpcf7 form { width: 80%; margin: 0 auto; padding: 50px 0 20px 0; }
/* 元テーマとの違いは太字だけなので、それだけ上書きする（背景色まで書くと bt_red / bt_blue の色が消える） */
.q_button { font-weight: 600; }
.style3a, .style3b, .style4a, .style4b, .style5a, .style5b, .style6 { line-height: 1.6; font-weight:bold; }
.style3a { border-top: 1px solid #222; border-bottom: 1px solid #222; font-size: 22px; font-weight: 700; margin: 3em 0 1.5em; padding: 1.1em .2em 1em; }
.style3b { background: #fafafa; border-top: 2px solid #222; border-bottom: 1px solid #ddd; box-shadow: 0px 1px 2px #f7f7f7; font-size: 22px; font-weight: bold; margin: 3em 0 1.5em; padding: 1.1em .9em 1em; }
.style4a { border-bottom: none; border-left: 2px solid #222; font-size: 18px; font-weight: 700; margin: 2.5em 2px 1.2em; padding: .3em 0 .3em .8em; }
.style4b { border-bottom: 1px dotted #aaa; font-size: 18px; font-weight: 700; margin: 2.5em 0 1.2em; padding: .9em 0 .8em; }
@media screen and (min-width: 1201px) { .p-page-header__inner { margin-top: 40px;} }

/* ---------- [A] LP用 flexbox / grid / 料金表（元ファイル1864行目〜末尾） ---------- */

/**LP用 flexbox ここから */
.flexbox-4 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 0 auto;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  width: 80%;
}

.flexbox2{
	  display: flex;
  margin: 0 auto;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-pack: distribute;
      justify-content: center;
}

.flex-item {
  text-align: center;
  margin: 1%;
  width: 23%;
}

.flexbox-3 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 0 auto;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-pack: distribute;
      justify-content: space-around;
}
.flex-item3{
  text-align: center;
  margin: 1%;
  width: 30%;
}
.flex-item31{
  text-align: center;
  width: 28%;
}

.flex-img {
  width: 100%;
}

.flex-item img:hover {
  opacity: 0.7;
}

.img-r{
	border-radius: 10px;
}

.benefit{
	color: #fff;
	background-color: #1b224c;
	border-radius: 10px;
	padding:10px;
	margin-bottom:0;
}

.gradient{
	background: -moz-linear-gradient(top left, #6ECEE0, #0099C7); 
   background: -webkit-linear-gradient(top left, #6ECEE0, #0099C7); 
  background: linear-gradient(to bottom right, #6ECEE0, #0099C7); 
}
@media screen and (max-width: 850px) {
  .flex-box {
    width: 95%;
  }
  .flex-item {
    margin: 1%;
    width: 30%;
  }
	.flex-item31{
		margin: 1%;
		width: 100%;
	}
}

@media screen and (max-width: 550px) {
  .flexbox-4 .flexbox-3{
    width: 100%;
  }
  .flex-item{
    margin: 2%;
    width: 45%;
  }
	.flex-item31{
		margin: 1%;
		width: 100%;
	}
}

.grid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 0 auto;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  justify-content: space-around;
 padding-top: 40px;
 padding-bottom: 0;
}

.grid-item {
  width: 135px;
  margin-right: 3%;
  margin-bottom: 3%;
  text-align: center;
}
.grid-item img{
 width: 100%;
}

@media screen and (max-width: 1050px) {
  .grid-item {
  width: 110px;
  }
}

@media screen and (max-width: 850px) {
  .grid-item {
  width: 20%;
  }
}

@media screen and (max-width: 550px) {
  .grid-item {
  width: 30%;
  }
}
/**LP用 flexbox ここまで */


/*------------------------------------------------------------------------------------------------
     料金プランテーブル
--------------------------------------------------------------------------------------------------*/

.bg-w{
	background: rgb(246, 242, 242)
}
.plan table{
	margin: 0;
	line-height: 1.5;
}

.plan-tbl{
	border-collapse: separate;
	border-spacing: 4px;
	/*width:75%;*/
	width: 90%;
	margin: 0 auto;!important
}
.plan-tbl th,
.plan-tbl td{font-weight: 600;
	padding: 4px;
  font-size:1.0rem;
	border: 0px solid #fff;!important
	background: none;!important
}
.plan .plan-tbl .head-th{
	width:12.8%;
	background-color: #369EDB;!important
	color: #fff;!important
	line-height: 1.5;
}
.head-th.top{
	vertical-align:middle;
}
.under .head-th{
    font-size:1.0rem;
}
.under td{
	text-align: center;
	vertical-align:middle;
    background: #AED6F0;
}
th.plan-th,
td.plan-td{
	width:calc((100% - 12.8%) / 4);
}

th.plan-th{
	background: #262C54;
	color:#fff;
    font-size:1.0rem;
	line-height: 1.2;
	font-weight: 300
}
th.plan-th span{
	font-size:1.5rem;
	font-weight: 600

}

td.plan-td{
	padding: 8px;
	font-size:0.9rem;
    background: rgb(246, 242, 242)
}


.inner-tbl{
	width:100%;
	border-collapse: separate;
	border-spacing: 4px;
}
.inner-tbl td {
	background:#AED6F0;
	padding:6px;
}
.inner-tbl td.null{
	width:25%;
	background: rgb(246, 242, 242)
}
.inner-tbl td p{
	padding: 0 1.3em;
}

.inner-tbl td.other{
    font-size:1.0rem;
}
.inner-tbl td.other ul li{
    font-size:0.9rem;
	   font-weight:300;
	 line-height: 1.5;
}
.inner-tbl td.other span{
	font-weight: 300
}


td.plus{
	text-align: center;
	font-size:2.0rem
}


.option-tbl{
	width:100%;
	border-collapse:collapse;
	padding: 0;
	border-spacing: 0px;
	background: #fff;
}
.option-tbl th{
	background: #369EDB;
	color:#fff;
	padding: 4px;
}
.option-tbl td{
	padding: 8px;
    font-size:1.0rem;
    background: rgb(246, 242, 242)
}

.note-txt{
	font-size:0.8rem;
	font-weight: 300
}

@media screen and (max-width: 768px) {
	.plan-tbl{
		border-spacing: 0.5vw;
		border-right:#F4F6F8 2vw solid;
		/*font-size:1.5rem;*/
		font-size:3.4vw;
		width: 100%;
		margin: 0 auto;

	}
	.plan-tbl th,
	.plan-tbl td{
		padding: 0.5vw;

	}

	.under .head-th{
		/*font-size:1.4rem;*/
		font-size:3.0vw;
		line-height: 1.2
	}
	th.plan-th{
		/*font-size:1.2rem;*/
		font-size:2.6vw;
	}
	th.plan-th span{
		/*font-size:2rem;*/
		font-size:4vw;
	}

	td.plan-td{
		text-align: left;
		padding:0 2vw;
		/*font-size:1.4rem;*/
		font-size:3.2vw;
	}

	.inner-tbl{
		border-spacing: 1vw;
	}
	.inner-tbl td {
		padding:0.5vw;
	}
	.inner-tbl td p{
		padding: 0 1.5em;
		text-align: left;
		/*font-size:1.6rem;*/
		font-size:3.4vw;
	}

	.inner-tbl td.other{
		text-align: left;
		padding: 0 1.5em;
			/*font-size:1.4rem;*/
			font-size:3.2vw;
	}
	.inner-tbl td.other span{
		font-size:3.0vw;
		text-align: left
	}

	td.plus{
		text-align: center;
		/*font-size:2.0rem;*/
		font-size:5vw;
	}

	.option-tbl th{
		background: #369EDB;
		color:#fff;
		padding: 0.5vw;
	}
	.option-tbl td{
		padding: 0.5vw;
			/*font-size:1.4rem;*/
			font-size:3.2vw;
	}
	
	.note-txt{
		/*font-size:1.2rem;*/
		text-align: left;
		font-size:2.8vw;
	}
	
}

/* ---------- 旧テーマの読み込み順の再現 ----------
   旧テーマでは、この独自CSSのあとに responsive.min.css が読まれ、スマホでは表のセルの文字が 12px に戻っていた。
   いまはこのファイルが最後に読まれるので、同じ指定をファイルの最後に置いて同じ結果にする。 */
@media only screen and (max-width: 767px) {
	.p-entry__body td,
	.p-entry__body th { font-size: 12px; }
}

/* ==========================================================================
   2026-10-23 追加：新旧比較テスト（薫さん）の指摘対応
   旧テーマは style.css / responsive.min.css / page.php を直接書き換えていた。テーマ更新で消えた分をここで戻す。
   ========================================================================== */

/* 太字が消える問題：新テーマのリセットCSSが全要素を font-weight: normal にしている（旧テーマには無い指定）。
   <strong> の中のリンク、見出し（h2〜h4）が細くなるので、ブラウザ標準の太さに戻す。 */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, audio, video { font-weight: revert; }

/* 本文の文字色：旧テーマは濃紺 */
body { color: #1b224c; }

/* ---------- ヘッダー：ロゴの大きさ・メニューの太字（旧 style.css の値） ---------- */
.l-header__inner { width: 95%; max-width: 1280px; }
.l-header__logo { flex: 0 0 auto; }
.l-header__logo a { width: auto; }
.l-header__logo img { max-width: none; }
.p-global-nav > li > a { padding-left: 10px; padding-right: 10px; font-size: 14px; font-weight: 600; }

/* ---------- ボタン（スライダーのCTA・トップの「主なユーザー画面をチェック」等。旧 style.css の値） ---------- */
.p-button { border-radius: 10px; font-size: 22px; line-height: 60px; height: 60px; width: 80%; max-width: 450px; font-weight: 600; }
@media only screen and (max-width: 767px) {
	.p-button { font-size: 16px; line-height: 45px; height: 45px; width: 85%; }
}
.p-index-slider__item.is-active .p-index-slider__item-catch { font-weight: 600; line-height: 1.8; }

/* ---------- トップページ ---------- */
/* 中央寄せの画像が左に寄る／画像の直後の文が右に寄る：新テーマの .aligncenter に display: block が無い */
.p-entry__body img.aligncenter { display: block; }
.p-index-content01 { padding-top: 40px; padding-bottom: 40px; }
.p-index-content01__catch { font-weight: 600; }
/* 「選ばれる理由」「主な機能」：新テーマは 見出し→本文→画像 の順で出力し、画像を横長に切り抜く。旧サイトと同じ 見出し→画像→本文、元の比率に戻す */
.p-index-content02 { padding-top: 30px; margin-bottom: 40px; }
.p-index-content02__item { display: flex; flex-direction: column; }
.p-index-content02__item-catch { order: 1; }
.p-index-content02__item-image { order: 2; }
.p-index-content02__item-desc { order: 3; margin-top: 10px; margin-bottom: 10px; }
.p-index-content02__item-image img { aspect-ratio: auto; object-fit: fill; }
.p-index-content04__carousel img, .p-index-content06__item-image img { height: auto; }

/* ---------- 固定ページのヒーロー（ページ見出し画像） ----------
   旧サイトは page.php でヒーローをコメントアウトしていた（全固定ページで非表示）。お役立ち記事などの一覧ページには出す。 */
body.page:not(.home) .p-page-header,
body.page:not(.home) .parallax-mirror { display: none !important; }
.p-page-header { height: 300px; }
.p-breadcrumb { margin-bottom: 55.8px; }

/* ---------- ブロック（カラム）の上下の間隔：WordPress 6.2 の標準値 ---------- */
.p-entry__body .wp-block-columns { margin-bottom: 1.75em; }

/* ---------- スマホ：お役立ち記事を1行2記事に（旧 responsive.min.css の値） ---------- */
@media only screen and (max-width: 767px) {
	.p-blog-list__item { width: 46.875%; }
}

/* ---------- スマホの文字サイズ（旧 responsive.min.css の値）：スライダーの画像・ボタンが切れる対策 ----------
   スライダーの文字サイズはテーマオプションの値（43px / 24px）がスマホにもそのまま出るため、旧サイトと同じく小さくする。 */
@media only screen and (max-width: 991px) {
	.p-index-content07__catch { font-size: 30px !important; }
}
@media only screen and (max-width: 767px) {
	.p-index-content01__catch { font-size: 18px !important; }
	.p-index-content02__item-desc { font-size: 14px !important; }
	.p-index-content04__catch { font-size: 18px !important; }
	.p-index-content04__desc p { font-size: 14px !important; }
	.p-showcase__catch { font-size: 20px !important; }
	.p-showcase__desc { font-size: 12px !important; }
}
@media only screen and (max-width: 500px) {
	.p-index-slider__item-catch { font-size: 20px !important; }
	.p-index-slider__item-desc { font-size: 12px !important; }
}

/* ---------- 右下の「資料請求・お問合せ」ポップアップ：スマホでは出さない ----------
   ポップアップ本体は GTM（GTM-K5KBTKK）のカスタムHTMLタグが入れる #iframe1。GTMを入れたあとに効く。 */
@media only screen and (max-width: 767px) {
	#iframe1 { display: none !important; }
}

/* ---------- スマホ：料金プランの表がはみ出す（旧サイトでも同じ崩れ） ----------
   表の中のボタン（q_button）に最小幅200pxが付いていて、4列ぶん（約900px）に表が押し広げられていた。
   スマホでは列の幅に合わせ、右端の列の箇条書きの字下げも詰める。 */
@media only screen and (max-width: 767px) {
	.plan-tbl .q_button { min-width: 0; width: 100%; padding: 6px 2px; font-size: 11px; line-height: 1.4; }
	.inner-tbl td.other { padding: 4px; }
	.inner-tbl td.other ul { margin: 4px 0 4px 1.2em; }
	.inner-tbl td.other ul li { font-size: 11px; line-height: 1.5; }
}

/* ---------- 士業ページ上部のボタンが大きく崩れる（旧サイトでも同じ崩れ） ----------
   ページ本文で見出し（h1）が閉じられておらず、ボタンが見出しの文字サイズと行の高さを引き継いでいた。
   見出しの中に入ったボタンは、通常の大ボタン（sz_l）と同じ大きさにする。 */
.p-entry__body h1 .q_button { font-size: 17.6px; line-height: 1.6; font-weight: 600; }