/*
Theme Name: Twenty Twenty-Two Child
Theme URI: https://example.com/
Author: YD
Author URI: https://yd-hp-lab.com/
Description: A child theme for TT2.
Requires at least: 5.8
Tested up to: 5.9
Requires PHP: 5.6
Version: 22.8.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentytwo-child
Template: twentytwentytwo
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments

Twenty Twenty-Two Child WordPress Theme, (C) 2021 WordPress.org
Twenty Twenty-Two Child is distributed under the terms of the GNU GPL.
*/

/******************************************************************************/
/* | 備考                                                                     */
/******************************************************************************/
/* twenty twenty-twoのモバイル切り替えのブレイクポイント */
/* max-width: var(--break-point-mobile) */
/******************************************************************************/
/* | reCAPTCHAの表示を非表示にする                                             */
/******************************************************************************/
.grecaptcha-badge {
	/* 表示を消す */
	visibility: hidden !important;
}
/******************************************************************************/
/* | カスタムプロパティ(全体の共通)                                            */
/******************************************************************************/
/* ただ変数はmedia screenでは使えないので直値を入れる必要がある  */
:root {
    --break-point-PC-big:   1200px;     /* PC用のブレイクポイント(最大サイズ) */
    --break-point-PC-small:  782px;     /* PC用のブレイクポイント(最小サイズ) */
    --break-point-mobile:    782px;     /* スマホ用のブレイクポイント(最大サイズ) */
    --padding-default:        10px;     /* 標準パティング量					  */
	--main-color: #243074;            /* 濃い青 							*/
}
/******************************************************************************/
/* | body                                          							  */
/******************************************************************************/
/* 横スクロール（オーバーフロー）を非表示にして、画面最下部の空白（横スクロールバーの領域）をなくす */
body {
    overflow-x: hidden;
}

/******************************************************************************/
/* | Twenty Twenty-Two 特有のcssを調整                                        */
/******************************************************************************/
/* 特定のブロックにmarginが生じるのを消す */
.wp-block-columns {
	margin-bottom: 0px;
}
/* ハンバーガーメニューのサブメニューの空白が空くのを消す */
.wp-block-navigation__submenu-container {
	padding-top: 0px;
}

/******************************************************************************/
/* | フォント指定                                                             */
/******************************************************************************/
/*
body, address, blockquote, button, dl, h1, h2, h3, h4, h5, h6, input, label, li, ol, p, select, td, textarea, th, ul {
	font-family: "Noto Sans JP", sans-serif;
}
  
@font-face {
	src: url("./resource/font/google_Noto_Sans_JP/NotoSansJP-Regular.woff") format("woff");
	font-family: "Noto Sans JP";
	font-style: normal;
	font-display: swap;
}
*/
/*------------------------------------
-- google icon 縦ズレの修正 		  --
-------------------------------------*/ 
.google_icon_set {
	/*display: inline-flex;*/
	vertical-align: middle;
}

/******************************************************************************/
/* | レスポンシブ対応                                                         */
/******************************************************************************/

/* 文字サイズ */
/*
@media screen and (max-width: 782px) {
	p, dt, dd, li {
		font-size: 12px;
	}
}*/


/* トップページの文字サイズ */
.top_text_parent {
	padding-left: 100px;
}
.top_text {
	font-size: 40px !important;
}
@media screen and (max-width: 782px) {
	.top_text_parent {
		padding: 0;
	}
	.top_text {
		font-size: 28px !important;		
	}
}

/* カバー */
.yd_block_cover {
	margin-top: 0px; /* sctikyナビに下線部がおかしくなる対応 */
	min-height: 580px;
}
@media screen and (max-width: 782px) {
	.yd_block_cover {
		min-height: 300px;
	}
}

.full_width {
	left: calc(50% - 50vw);
	width: 100vw;
	max-width: 100vw !important;
	/*padding: 0;*/
	/*margin: 0 0 var(--yd-overlap-margin-bottom) 0;*/
	margin: 0;
  }

.full_width_for_home {  /*ホームのコンテンツ以外はこちらを使用する*/
	position: relative;
	left: calc(50% - 50vw);
	width: 100vw;
	max-width: 100vw !important;
	/*padding: 0;*/
	/*margin: 0 0 var(--yd-overlap-margin-bottom) 0;*/
	margin: 0;
  }

.full_width_2 {
  margin-left: calc(50% - 50vw); /* 左に画面端まで伸ばす */
  margin-right: calc(50% - 50vw); /* 右に画面端まで伸ばす */
  width: auto;             /* 幅を自動調整（画面いっぱいに広げるため） */
  box-sizing: border-box;  /* paddingとborderをwidthとheightに含める */
}
/*------------------------------------------
- 2カラム                                   -
- 文字・写真の順のときに写真・文字の順で縦並び表示する   -
--------------------------------------------*/
@media screen and (max-width: 782px) {
    .reverse_box {
        display: flex;
        flex-direction: column-reverse;
    }
}

/******************************************************************************/
/* | ページ内リンクへの移動をスクロールでスムーズに行う                         */
/******************************************************************************/
html {
	scroll-behavior: smooth;
}

/******************************************************************************/
/* | サイドバー                                                               */
/*  サイドバーの利用時は次のクラスを各要素に付与する							*/
/*  body_column : サイドバーとメインコンテンツを含む親要素						*/
/*  sidebar_frame : サイドバーの外枠										   */
/*  sidebar_inside : サイドバーの中身										   */
/*	main_content : メインコンテンツ											   */
/******************************************************************************/
@media screen and (min-width: 1200px) {
    :root {
        --body-column-width:    calc(var(--break-point-PC-big) - var(--padding-default) * 2);
        --sidebar-width:        300px;
        --sidebar-padding:      var(--padding-default);
    }
	/* メインコンテンツとサイドバーの親クラスに付与するクラス */
	.body_column {
		max-width:      var(--body-column-width); /* 必須 */
		width:          100%;
		margin-right:   auto;
		margin-left:    auto;
	}
	/* メインコンテンツに付与するクラス */
	.main_content {
		max-width:      calc(var(--body-column-width) - var(--sidebar-width));
		width:          100%;
	}
	/* サイドバー(外枠)に付与するクラス */
	.sidebar_frame{
		width:          var(--sidebar-width);
		max-width:      var(--sidebar-width);
		margin-left:    auto;
		margin-right:   auto;
        /* 以下はsticky使用時の上端or下端揃えに必要 */
		display: flex;
  	    align-items: flex-start;
        /*align-items: flex-end;    jsで制御*/ 
	}
	/* サイドバー(中身)に付与するクラス */
	.sidebar_inside{
		width:          calc(var(--sidebar-width) - var(--sidebar-padding) * 2); /* 幅指定しておかないと、fixdにしたときに幅が変わってしまう */
		margin-left:    auto;
		margin-right:   auto;
		padding-left:   var(--sidebar-padding) !important;
		padding-right:  var(--sidebar-padding) !important;
        /* 以下はsticky使用時の上端or下端揃えに必要 */
		position: -webkit-sticky;   /* ブラウザsafari用*/
		position: sticky;
		/* top & bottomはjsで調整 */
	}
}
@media screen and (min-width: 792px) and (max-width: 1200px) {
    :root {
        --body-column-width:    calc(var(--break-point-PC-small) - var(--padding-default) * 2);
        --sidebar-width:        200px;
        --sidebar-padding:      var(--padding-default);
    }
	/* メインコンテンツとサイドバーの親クラスに付与するクラス */
	.body_column {
		max-width:      var(--body-column-width); /* 必須 */
		width:          100%;
		margin-right:   auto;
		margin-left:    auto;
	}
	/* メインコンテンツに付与するクラス */
	.main_content {
		max-width:      calc(var(--body-column-width) - var(--sidebar-width));
		width:          100%;
	}
	/* サイドバー(外枠)に付与するクラス */
	.sidebar_frame{
		width:          var(--sidebar-width);
		max-width:      var(--sidebar-width);
		margin-left:    auto;
		margin-right:   auto;
        /* 以下はsticky使用時の上端or下端揃えに必要 */
		display: flex;
  	    align-items: flex-start;
        /*align-items: flex-end;    jsで制御*/ 
	}
	/* サイドバー(中身)に付与するクラス */
	.sidebar_inside{
		width:          calc(var(--sidebar-width) - var(--sidebar-padding) * 2); /* 幅指定しておかないと、fixdにしたときに幅が変わってしまう */
		margin-left:    auto;
		margin-right:   auto;
		padding-left:   var(--sidebar-padding) !important;
		padding-right:  var(--sidebar-padding) !important;
        /* 以下はsticky使用時の上端or下端揃えに必要 */
		position: -webkit-sticky;   /* ブラウザsafari用*/
		position: sticky;
		/* top & bottomはjsで調整 */
	}
}
/******************************************************************************/
/* | 見出し関係 <h>                                                            */
/******************************************************************************/
/*----------------------------
- 2段構成(2文字目小さい文字)   -
-----------------------------*/
span.main {
    padding: 10px 10px 0;
    line-height: 1.3;
}
    /* span.main::after {
        content: "\A" ;
        white-space: pre ;
    } */

span.sub {
    font-size: 0.875rem;
    vertical-align: 2rem;
}
/******************************************************************************/
/* | table <table / td / th >                                                 */
/******************************************************************************/
/*table 枠線を消す*/
.table_border_none td,
.table_border_none th {
    border: none;
}

/******************************************************************************/
/* | css画像		                                                          */
/******************************************************************************/
/* 矢印 下向き */
.arrow_under {
	width: 15px;
	height: 15px;
  	border: 5px solid;
  	border-color:  transparent transparent #565656 #565656;
	transform: rotate(-45deg);
	margin: 5px auto 0px auto !important;
}
/******************************************************************************/
/* | 汎用 			                                                          */
/******************************************************************************/
/* 水平の中央よせ */
.set_center {
	margin-left: auto;
	margin-right: auto;
}

/* 上の隙間をなくす　埋める */
.no_margin_top {
	margin-top: 0px;
}

/* コンテンツのサイズを親要素に合わせる */
.match_parent_size{
	width: 100%;
	height: auto;
}

/* コンテンツを非表示  → product_only.cssにある
.no_show{
	display: none;
}
*/

@media screen and (max-width: 782px) {
	/* 上下のmarginをなくす */
	.no_margin_top_and_bottom {
		margin-top: 0;
		margin-bottom: 0;
	}
}

/******************************************************************************/
/* | サイト特有                                                               */
/******************************************************************************/
/* グローバルナビゲーションやサイドバーの固定 */
.sticky_navi {
	position:sticky;
	top: 0px;
	z-index: 100;
	box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.3);
}

/* 外枠 */
.box_border_solid {
	border: 1px solid gray;
}

/* ボックス ポイントを記載する 左上にタイトル */
/*
<div class="box_point_leftup">
    <span class="box-title">ここにタイトル</span>
    <p>ここに文章</p>
</div>
*/
.box_point_leftup {
    position: relative;
    margin: 1em 0;
    padding: 0.5em 1em;
    border: solid 3px #62c1ce;
}
.box_point_leftup .box-title {
    position: absolute;
    display: inline-block;
    top: -27px;
    left: -3px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    font-size: 17px;
    background: #62c1ce;
    color: #ffffff;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
}
.box_point_leftup p {
    margin: 0; 
    padding: 0;
}

/* ボックス ポイントを記載する センターにタイトル */
/*
<div class="box_point_center">
    <span class="box-title">ここにタイトル</span>
    <p>ここに文章</p>
</div>
*/
.box_point_center {
    margin: 1em;
    background: #dcefff;
}
.box_point_center .box-title {
    font-size: 28px;
    font-weight: bold;
    color: #FFF;
    text-align: center;
    background: #5fb3f5;
    padding: 4px;
    letter-spacing: 0.05em;
	display: block;
}
.box_point_center p {
    padding: 15px 20px;
    margin: 0;
}

/* タイトル用 上下装飾 */
.border_solid_top_bottom {
	border-top   : 3px solid #000;
	border-bottom: 3px solid #000;
	padding-top:5px;
	padding-bottom:5px;
}

/* LP 見出し2 赤字 */
.lp_h2 {
	font-family: "Oswald";
    font-size: 4rem;
    font-weight: bold;
    color: #B70000;
}

/* LP 見出し3 赤字 */
.lp_h3 {
	font-family: "Noto Sans JP";
    font-size: 2rem;
    font-weight: bold;
    color: #B70000;
	border-radius: 5px;
}


.blog_title {
	font-family: "Oswald";
    font-size: 3rem;
    font-weight: bold !important;
    color: black;
	vertical-align: middle;
	-webkit-border-radius: 5px;
}

/* blog 見出し2 赤字 */
.blog_h2 {
	font-family: "Oswald";
    font-size: 3rem;
    font-weight: bold;
	background-color:  #B70000;
    color: white;
	vertical-align: middle;
	-webkit-border-radius: 5px;
}

/* LP 見出し3 赤字 */
.blog_h3 {
	font-family: "Noto Sans JP";
    font-size: 2rem;
    font-weight: bold;
    color: black;
}
@media screen and (max-width: 782px) {
	.lp_h2 {
		font-size: 2.5rem;
	}
	/* LP 見出し3 赤字 */
	.lp_h3 {
		font-size: 1.5rem;
	}
	.blog_h2 {
		font-size: 2rem;
	}
	.blog_h3 {
		font-size: 1.5rem;
	}
}

.color_while {
    color:white;
}
/* 塗りつぶし 濃い青  */
.box_fill {
	background: #243074;
	border-radius: 5px;
	color:white;
	padding:10px;
}

/* hタグ 下線 濃い青 */
.border_bottom_h  {
	border-bottom: 1px solid var(--main-color);
}

/* 下線 gray */
.border_bottom  {
	border-bottom: 1px solid gray;
}

/* 枠線 gray */
.border_box  {
	border: 1px solid gray;
}

/* 下線 破線 gray */
.border_bottom_dashed  {
	border-bottom: 1px dashed gray;
}

/* 左側　黄色い線 */
.border_left {
  border-left: 8px solid #ffcc00; /* 黄色い縦線 */
}

/* 問い合わせの送信ボタン */
.yd_button_submit {
	min-width: 150px;
}

/*----------------------------------
--  文字列 強調  --
----------------------------------*/ 
.enphasis_text {
	color: var(--main-color);
	font-size: 1.5rem;
}

.inner_p_margin_0 p {
	margin: 0px;
}


.width_100 {
	max-width: 100% !important;
}
.width_90 {
	max-width: 90% !important;
}
.width_80 {
	max-width: 80% !important;
}

/******************************************************************************/
/* | LP用			                                                          */
/******************************************************************************/
/* LPページ */
/* Topの画像重ね */
/* 固定画面トップの重ね合わせ */
@media screen and (min-width: 782px) {
	:root {
		--yd-overlap-parent-height: 1540px;
		--yd-overlap-margin-bottom: 100px;
		--yd-overlap-main-font-size: 5rem;
		--yd-overlap-sub-font-size: 2.5rem;
	}
}
@media screen and (max-width: 782px) {
	:root {
		--yd-overlap-parent-height: 350px;
		--yd-overlap-margin-bottom: 70px;
		--yd-overlap-main-font-size: 3rem;
		--yd-overlap-sub-font-size: 1.5rem;
	}
}
.lp_overlap_parent {
	position: relative;
	display: inline-block; /* コンテンツのサイズにする */
	left: calc(50% - 50vw);
	width: 100vw;
	height: var(--yd-overlap-parent-height);
	max-width: 100vw !important;
	/*padding: 0;*/
	/*margin: 0 0 var(--yd-overlap-margin-bottom) 0;*/
	margin: 0;
}
.lp_overlap_base {
	position: absolute;
	width: 100% !important;
	top: 0%;
	left: 0%;
	margin: 0 0 0 0 !important;
	z-index: 10;
}
.lp_over_lap_base img { /* lp_overlap_base の配下のimgを画面いっぱいに引き伸ばす */ 
	width: 100%;
	height: auto;
}

.lp_overlap_top {
	position: absolute;
	width: 100% !important;
	top: 0%;
	left: 0%;
	margin: 0 0 0 0 !important;
	z-index: 20;
}
.lp_overlap_top_left {
	position: absolute;
	width: 20% !important;
	height: 90px;
	top: 0%;
	left: 0%;
	margin: 0 0 0 10px !important;
	z-index: 30;
}
.lp_overlap_top_right {
	position: absolute;
	width: 60% !important;
	height: 90px;
	top: 0%;
	right: 0%;
	margin: 0 10px 0 0 !important;
	z-index: 40;
}
.overlap_child_img_main {
	position: absolute;
	top: 0;
	right: 0;
	width: 75%;
	text-align: right;
	z-index: 4;
}
	.overlap_child_img_main img {
		object-fit: cover;
		width: 100%;
		height: calc(var(--yd-overlap-parent-height) - var(--yd-overlap-margin-bottom));
	}
.overlap_child_img_sub {
	position: absolute;
	width: 100% !important;
	top: 86%;
	left: 0;
	margin: 0 0 0 0 !important;
	z-index: 0;
}
	.overlap_child_img_sub img {
		object-fit: cover;
		width: 100%;
		height: calc(var(--yd-overlap-parent-height) -  2 * var(--yd-overlap-margin-bottom));
	}


.overlap_parent {
	position: relative;
	display: inline-block; /* コンテンツのサイズにする */
}

.overlap_parent {
	position: relative;
	display: inline-block; /* コンテンツのサイズにする */
	width: 100% !important;
}
.overlap_parent {
  position: relative;
  display: block; /* 親要素はブロック要素にする方が高さの制御がしやすい */
  width: 100% !important;
  /* 必要に応じて明示的な高さを指定するか、
     子要素のサイズに合わせて高さを調整する仕組みを検討 */
}
	.absolute_base {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 10;
	}
		.absolute_base img {
			width: 100%;
			height: 100%;
			object-fit: cover; /* 画像が親要素の領域をどのように満たすかを指定 */
		}
	.absolute_text_0011 {
		position: absolute;
		top: 50%;
		left: 5%;
		transform: rotate(-15deg);
		transform: translate(-50%, -50%); /* 中央揃えの調整 */
		color: #B70000;
		font-size: 36px;
		text-align: center;
		z-index: 20;
	}
	.absolute_text_0012 {
		position: absolute;
		top: 5%;
		left: 50%;
		transform: translate(-50%, -50%); /* 中央揃えの調整 */
		color: #FFD82D;
		font-size: 36px;
		text-align: center;
		z-index: 20;
	}
	.absolute_text_0013 {
		position: absolute;
		bottom: 5%;
		left: 50%;
		transform: translate(-50%, -50%); /* 中央揃えの調整 */
		color: #B70000;
		font-size: 20px;
		text-align: center;
		z-index: 20;
	}

/* テキストのグラデーション */
.gradation_text_anime{
	display: block;
	position: absolute;
	color:black;
	background: -webkit-linear-gradient(60deg, #12d6df, #f70fff, #fd644f, #faea3d);
	background-size:400%;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: textAnime 10s infinite;
}
	.gradation_text_anime span.main {
		padding: 10px 10px 0;
		font-size: var(--yd-overlap-main-font-size);
		font-weight: bold;
		line-height: 1.3;
	}
	.gradation_text_anime span.sub {
    	font-size: var(--yd-overlap-sub-font-size);
		font-weight: bold;
    	vertical-align: 2rem;
	}
	@keyframes textAnime{
		0%{background-position:0% 50%}
	  	50%{background-position:100% 50%}
	  	100%{background-position:0% 50%}
  	}
/******************************************************************************/
/* | Top画面の画像                                                            */
/******************************************************************************/
/******************************************************************************/
/* | テーブル                                                               */
/******************************************************************************/
/* 製品紹介ページ */
:root {
    --yd_table-common-width: 4rem;
}

.yd_table {
	width: 100%;
	display: block;
	font-size: 1rem;
}
	.yd_table dl {
		display: flex;
		padding: 10px;
		margin: 0;
		box-sizing: border-box;
		border-bottom: 1px solid gray;
	}
	.yd_table dt {
		width: var(--yd_table-common-width);
		margin: 0px 15px 0px 0px;
		white-space: nowrap
	}
	.yd_table dd {
		width: calc(100% - var(--yd_table-common-width));
		margin: 0px;
	}
	
:root {
    --yd_table-common-width: 6rem;
}

/* 会社情報 */
.yd_table_c {
	width: 100%;
	display: block;
	font-size: 1rem;
}
	.yd_table_c dl {
		display: flex;
		padding: 10px;
		margin: 0;
		box-sizing: border-box;
		border-bottom: 1px solid gray;
	}
	.yd_table_c dt {
		width: var(--yd_table-common-width);
		margin: 0px 15px 0px 0px;
		white-space: nowrap
	}
	.yd_table_c dd {
		width: calc(100% - var(--yd_table-common-width));
		margin: 0px;
		word-wrap: break-word; /* テキストがコンテナからはみ出す場合に単語の途中で改行を許可する */
		overflow-wrap: break-word; /* word-wrapのより新しい代替プロパティ */
	}
	 .yd_table_c ul
	,.yd_table_c li {
		margin: 0;
		padding: 0;
		list-style-type:none;
	}
/******************************************************************************/
/* | 画像ボタン用			                                                   */
/******************************************************************************/
.image_button {
	transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out; /* 拡大とフィルターの変化を滑らかに */
}
	/* マウスオーバー時のエフェクト */
	.image_button:hover {
		cursor: pointer; /* マウスカーソルを指の形にする（クリックできることを示す） */
		/* filter: brightness(1.2); /* マウスオーバー時に明るさを1.2倍にする */
		/* 他のフィルター効果の例 */
		/* filter: contrast(1.1); コントラストを1.1倍にする */
		filter: grayscale(50%); /* グレースケールにする */
		/* filter: sepia(100%); セピア調にする */
		/* filter: blur(2px); 少しぼかす */
		/* filter: opacity(0.8); 透明度を80%にする*/
		transform: scale(1.05); /* マウスオーバー時に拡大 */
	}


/******************************************************************************/
/* | 重ね合わせ関係			                                                   */
/******************************************************************************/
.overlay-container {
  position: relative;
  display: block;
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}
	.background-lp_ekokyuto_010 {
	display: block;
	width: 100%;
	height: auto;
	}
	.overlay-lp_ekokyuto_011 {
		position: absolute;
		top: 15%;
		right: 10%;
		transform: translate(50%, -50%);
		width: auto;
		height: auto;
		max-width: 50%;
		max-height: 50%;
	}

/******************************************************************************/
/* | コンテンツ本体の幅		                                                   */
/******************************************************************************/
.body_column_single_column {
	max-width:      1360px; /* 必須 */
	width:          100%;
	margin-right:   auto;
	margin-left:    auto;
}

/******************************************************************************/
/* | 乾さん作成のエコキュート用LPのトップの重ね合わせ                             */
/******************************************************************************/
/* カスタムHTMLセクションの全幅設定（画像を含むコンテナ） */
.custom-full-width-section-img {
    width: 100vw; /* ビューポートの幅全体に広げる */
    margin-left: calc(50% - 50vw); /* 左マージンを調整して、中央寄せのズレをなくす */
    margin-right: calc(50% - 50vw); /* 右マージンを調整して、中央寄せのズレをなくす */
    max-width: none; /* 親要素の最大幅制限を解除する */
    box-sizing: border-box; /* paddingやborderを含めて幅を計算する */

    position: relative; /* 子要素の絶対位置指定の基準とする */
    overflow: hidden; /* はみ出すコンテンツを隠す */

    height: 0;
    min-height: 0; /* min-height は不要か0に */
}
	.custom-full-width-section-img_for_pc {
		/* 高さを画像のアスペクト比に合わせて設定 (1920:1538 = 100%:80.1%) */
		/* これにより、画像がコンテナの幅に追従し、高さを自動調整 ただし画像の下部分は一部切れる*/
		padding-bottom: 80.1%;
	}
	.custom-full-width-section-img_for_sp {
		padding-bottom: 434%;
	}

	/* 挿入した画像（<img>タグ）のスタイル */
	.custom-full-width-section-img .background-image-element {
		position: absolute; /* 親要素基準で絶対配置 */
		top: 0;
		left: 0;
		width: 100%; /* コンテナの幅いっぱいに広げる */
		height: 100%; /* コンテナの高さいっぱいに広げる */
		object-fit: cover; /* ★ contain から cover に変更 - 画像は切り抜かれる可能性あり */
		display: block; /* img要素の下に余白ができないように */
		z-index: 1; /* P要素より下に配置 */
	}

	/* カスタムHTMLセクション内のP要素の位置設定 */
	.custom-full-width-section-img .custom-positioned-paragraph {
		position: absolute; /* 親要素（.custom-full-width-section-img）を基準に位置指定 */
		top: 78%; /* 親要素の上端からの位置 */
		left: 21%; /* 親要素の左端からの位置 */
		z-index: 10; /* 他の要素より手前に表示する場合 (画像より上) */
	}
	
	/* カスタムHTMLセクション内のP要素の位置設定 */
	.custom-full-width-section-img .text_sp {
		position: absolute; /* 親要素（.custom-full-width-section-img）を基準に位置指定 */
		top: 56%; /* 親要素の上端からの位置 */
		left: 21%; /* 親要素の左端からの位置 */
		z-index: 10; /* 他の要素より手前に表示する場合 (画像より上) */
	}

/******************************************************************************/
/* | 乾さん作成のエコキュート用LPのトップのナビゲージョンバー PC用                 */
/******************************************************************************/
/* --- ヘッダー帯全体のコンテナ（変更なし） --- */
.header-band-container {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    max-width: none;
    box-sizing: border-box;
    background-color: #B70000;
    padding: 15px 0;
    overflow: hidden;

    position: relative; /* 初期状態は通常フロー内に配置 */
    z-index: 1000; /* 他のコンテンツの上に表示されるようにする */
    transition: all 0.3s ease-out; /* スムーズなアニメーション効果 */
}
    /* ヘッダーとして途中から上端に固定される */
	/* スクロール後にJavaScriptで追加するクラス */
	.header-band-container.is-sticky {
		position: fixed; /* 固定位置に変わる */
		top: 0; /* 画面の上端に配置 */
		left: 0; /* 画面の左端に配置（width: 100vw; と組み合わせる） */
	}

/* --- 内部コンテンツの配置 ★ここを変更します★ --- */
.header-band-inner {
    display: flex; /* Flexboxを有効にして横並びにする */
    align-items: center; /* 垂直方向の中央揃え */
    justify-content: space-between !important; /* ★変更: 要素を左右の端に配置する */
    margin: 0 auto; /* 中央揃え */
    padding: 0 30px; /* 左右の内側余白 */
    flex-wrap: wrap; /* 画面が狭くなったときに折り返す */
}

/* --- ロゴのスタイル（変更なし） --- */
.header-logo img {
    height: 70px;
    width: auto;
    display: block;
}

/* --- ボタンと電話番号のラッパー（変更なし） --- */
.header-buttons-wrapper {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

/* --- 各ボタンのスタイル（変更なし） --- */
.header-button img {
    height: 60px;
    width: auto;
    display: block;
}

/* --- 電話番号とLINEアイコンのエリア（変更なし） --- */
.header-phone-line {
    display: flex;
    align-items: center;
    gap: 10px;
}

.header-phone-line .line-icon-link img {
    height: 45px;
    width: auto;
    display: block;
}

.header-phone-line .phone-number-link img {
    height: 60px;
    width: auto;
    display: block;
}

/******************************************************************************/
/* | 乾さん作成のエコキュート用LPのトップのナビゲージョンバー スマホ用             */
/******************************************************************************/
.text_fit_content {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    padding: 0 10px;
}

/******************************************************************************/
/* | 商品の金額用                                                              */
/******************************************************************************/
.product_group {
	border: 3px solid #B70000; /* 幅1px、実線、赤色の罫線 */
	padding-bottom: 0.5rem;
}

	.product_group .type {
		font-family: "Noto Sans JP";
		font-size: 1.8rem;
		font-weight: bold;
		color: white;
		width: 250px;
		padding-left: 1rem;
		margin-left: 0px !important;
		background-color: #B70000; /* 色名を指定 */
		clip-path: polygon(0 0, 100% 0, calc(100% - 20px) 100%, 0% 100%); /* 右上を斜めにカット */
	}

	.product_group .p_1 {
		font-family: "Noto Sans JP";
		font-size: 1.5rem;
		font-weight: bold;
	}

	.product_group .p_2 {
		font-family: "Noto Sans JP";
		font-size: 1.25rem;
	}

	.product_group .p_value_before { /* 税込xx.x万円 ------> */
		font-family: "Noto Sans JP";
		font-size: 1.25rem;
		font-weight: bold;
		font-variant-ligatures: none; /* 合字を無効にする */
		-webkit-font-feature-settings: "liga" 0; /* WebKit系ブラウザでの合字無効化 */
		font-feature-settings: "liga" 0; /* その他のブラウザでの合字無効化 */
	}
		.product_group .p_value_before .big_text {
			font-size: 2rem;
		}

	.product_group .p_subsidy { /* 補助金xxxを先に還元 */
		font-family: "Noto Sans JP";
		color: #B70000;
		font-size: 1.5rem;
		font-weight: bold;
		margin-top: -0.8rem;
		padding-top: 0px;
		padding-left: 0.5rem;
		background-color: #FFD82D; /* 色名を指定 */
		clip-path: polygon(0 25%, 80% 25%, 80% 0, 100% 100%, 0 100%); /* 矢印 */
	}

		.product_group .p_subsidy .big_text{ /* 補助金xxxを先に還元 */
			font-size: 2rem;
		}
	
	.product_group .p_value_after {
		font-family: "Noto Sans JP";
		color: #B70000;
		font-size: 1.25rem;
		font-weight: bold;
    	line-height: 1; /* 親要素の行間を詰める */
	}
		.product_group .p_value_after .big_text {
			font-family: "Oswald";
			font-size: 4rem;
		}
	
	.product_group .p_value_unit {
		font-family: "Noto Sans JP";
		color: #B70000;
		font-size: 2rem;
		font-weight: bold;
    	line-height: 1; /* 親要素の行間を詰める */
	}
	
		/******************************************************************************/
		/* | レスポンシブ                                                              */
		/******************************************************************************/
		/* 550px以下 */
		@media screen and (max-width: 550px) {
			.product_group .p_2 {font-size: clamp(1rem, 4vw, 1.25rem);}
			.product_group .p_value_before {font-size: 3.2vw;}
			.product_group .p_subsidy  {font-size: 3.2vw;}
			.product_group .p_value_after .big_text {font-size: 11vw;}
			.product_group .p_value_unit {font-size: 6vw;}
		}
		/* Tablet画面の設定 */
		@media screen and (min-width: 782px) and (max-width: 1200px) {
			.product_group .p_2 {font-size: clamp(1rem, 2vw, 1.25rem);}
			.product_group .p_value_before {font-size: 1.6vw;}
			.product_group .p_subsidy  {font-size: 1.6vw;}
			.product_group .p_value_after .big_text {font-size: 5.5vw;}
			.product_group .p_value_unit {font-size: 3vw;}
		}


/***********************************************************
 * ハンバーガーメニュー - アニメーション、固定、オーバーレイ
 **********************************************************/

/* 1. メニュー本体 (#mainMenu .menu-links) のスタイル */
.menu-links {
    position: fixed;     /* 画面に固定 */
    top: 0;
    left: 0;
    width: 280px;        /* メニューの幅 */
    height: 100vh;       /* 画面いっぱいの高さ */
    background-color: #fff; /* メニューの背景色 */
    z-index: 9999;       /* 他の要素より手前に表示 */
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2);

    /* 【アニメーションの初期状態】: 画面外の左側に完全に隠す */
    transform: translateX(-100%); 
    opacity: 0;
    visibility: hidden;  /* 非表示状態ではクリックイベントを無効化 */
    
    /* 【アニメーション設定】: 滑らかにスライドさせる */
    transition: transform 0.3s ease-out, opacity 0.3s ease-out, visibility 0.3s;
}

/* 2. メニューが表示された時のスタイル */
.menu-links.is-open {
    /* 表示状態: 元の位置に戻す（左端に表示） */
    transform: translateX(0); 
    opacity: 1;
    visibility: visible;
}

/* 3. 背景スクロール固定用 */
body.noscroll {
    overflow: hidden; /* スクロールを禁止 */
}

/***********************************************************
 * ★ 4. メニュー領域以外を遮断するオーバーレイ (#menuOverlay) のスタイル ★
 **********************************************************/
#menuOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.4); /* 半透明の黒 */
    z-index: 9998; /* メニュー(#mainMenu: 9999) より下、他のコンテンツより上に配置 */
    
    /* 初期状態は非表示（visibility: hiddenでクリックイベントを遮断しない） */
    visibility: hidden;
    opacity: 0;
    
    /* アニメーションを滑らかにする */
    transition: opacity 0.3s ease, visibility 0.3s;
}

/* 5. オーバーレイが表示された時のスタイル */
#menuOverlay.is-visible {
    visibility: visible; /* クリックイベントを遮断する */
    opacity: 1;
}


/***********************************************************
 * お知らせ用のリストのフォーマット
 **********************************************************/
.column_catlist {
    display: flex;
    flex-flow: column;
    border-top: 2px solid #816c64;
}

.column_catlist li {
    border-bottom: 1px dotted #816c64;

    &:last-child {
        border-bottom: 2px solid #816c64;
    }
}

.column_catlist li a {
    position: relative;
    display: block;
    padding: 5px 15px;
    color: #654c43;
}

.column_catlist li a:after {
    content: "";
    position: absolute;
    top: 50%;
    bottom: 0;
    right: 15px;
    font-size: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: right 0.3s;
    width: 6px;
    height: 6px;
    border-top: solid 2px currentColor;
    border-right: solid 2px currentColor;
    transform: translateY(-50%) rotate(45deg);
}

.column_catlist li a:hover {
    background: #f3f1e0;
}

.column_catlist li a:hover:after {
    right: 25px;
}

/***********************************************************
 * テーブルで1列目の幅を固定する
 **********************************************************/
.fixed-col-table table th:first-child,
.fixed-col-table table td:first-child {
	width: 100px;
	min-width: 100px; 
	max-width: 100px;
}



/* cover-contain クラスが設定されたカバーブロックに適用 */
.wp-block-cover.cover-contain {
    /* 必須: min-heightを解除 */
    min-height: 0 !important;
    height: 0; 
    
    /* 4:3 の比率 (3 ÷ 4 = 0.75) に設定 */
    padding-top: 0;
    padding-bottom: 75% !important; 
    
    /* 内部のコンテンツを絶対配置の基準にする */
    position: relative;
    
    /* 画像が繰り返されないようにする */
    background-repeat: no-repeat !important;
}

/* 画像が設定されている要素（背景）に適用 */
.wp-block-cover.cover-contain .wp-block-cover__background {
    /* 画像をトリミングせず、ブロック内に全体を表示（contain） */
    background-size: contain !important; 
    
    /* 位置を絶対配置にして親全体に広げる */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* 画像を中央に配置する */
    background-position: center center !important;
}

/* テキストコンテンツ（「エアコン」など）を画像の上に重ねる */
.wp-block-cover.cover-contain .wp-block-cover__inner-container {
    position: absolute; /* 絶対配置にして親全体に広げる */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* 中央揃えを維持するためにFlexboxを利用 */
    display: flex;
    justify-content: center; /* 水平中央 */
    align-items: center; /* 垂直中央 */
    
    /* 内部パディングは不要 */
    padding: 0; 
}

/* テキストコンテンツ（「エアコン」など）を画像の上に重ねる */
.text_background_color_in_cover {
    width: 100%;
	background-color: rgba(255, 192, 203, 0.4);
    padding: 0; 
	font-size: 1.75rem;
}

/* ホームのお知らせ  */
.infomation {
	font-weight: bold;		/* 太字 */
}
	.infomation a {
		text-decoration: none; 	/* 下線なし */
	}

.lineup_feature p {
	font-weight: bold;		/* 太字 */
	padding: 2px;
	margin: 0px;
}

/***********************************************************
 * QA表
 **********************************************************/
.qa_q {
	font-weight: bold;		/* 太字 */
	color: white;
	background-color: #009cd0;
	height: 100%;
    padding: 0px !important;
}
.qa_q_detail {
	font-weight: bold;		/* 太字 */
	color: #009cd0;
}

.qa_a {
	font-weight: bold;		/* 太字 */
	color: white;
	background-color: #f78da7;
	height: 100%;
    padding: 0px !important;
}
.qa_a_detail {
	color: black;
}



.top_title {
	font-weight: bold;		/* 太字 */
	font-size: 3rem;
}
.top_subtitle {
	font-weight: bold;		/* 太字 */
	font-size: 1.5rem;
}

/* PC/デフォルト設定: 幅は親要素に任せ、最大幅は指定しない */
.responsive-img {
    width: auto;
    height: auto;
}

@media screen and (max-width: 782px) {
    .responsive-img {
        /* スマートフォン画面では最大幅を親要素の??%に制限 */
        max-width: 50%; 
        
        /* 中央寄せにする場合はこの設定を追加 */
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
}

.navi_group_icons {
	max-width: 200px;
}

.responsive-spacer {
    height: 40px !important;
}

.responsive_space_gp {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
}

.responsive-split {
    margin-top: 40px !important;
    margin-bottom: 40px !important;
}

.responsive-margin {
    margin-top: 80px !important;
    margin-bottom: 80px !important;;
}

@media screen and (max-width: 782px) {
	.responsive-spacer {
		height: 20px !important;
	}
	.responsive_space_gp {
		padding-top: 20px !important;
		padding-bottom: 20px !important;
	}
	.responsive-split {
		margin-top: 20px !important;
		margin-bottom: 20px !important;
		visibility: hidden;   /* スペースは取るが非表示にする */
	}
	.responsive-margin {
		margin-top: 30px !important;
		margin-bottom: 30px !important;
	}
}

/* テーマのナビゲーションメニューのハンバーガーのサイズ調整 */
.wp-block-navigation__responsive-container-open svg {
    /* ハンバーガーアイコン（SVG）のサイズを大きくする */
    width: 35px; 
    height: 35px;
}

.header_sticky {
	position: fixed; /* 固定位置に変わる */
	top: 0; /* 画面の上端に配置 */
	left: 0; /* 画面の左端に配置（width: 100vw; と組み合わせる） */
	z-index: 1000;
}

/*****************/
/* 横スクロール  */
/*****************/
/* 親のGp */
.col_scroll_x {
	overflow-x: scroll;
	overflow-y: hidden !important;
	max-width: 1100px;
	/*以下で真ん中寄せ*/
    margin-left: auto;
    margin-right: auto;
}
/* 親Gp直下のカラム */
.plan_list.wp-block-columns {
	width: max-content;
}
.plan_list .wp-block-column {
	width: 300px;
	height: auto;
}

.plan_list_wide.wp-block-columns {
	width: max-content;
}
.plan_list_wide .wp-block-column {
	width: 500px;
	height: auto;
}
@media (max-width: 782px) {
	.plan_list .wp-block-column {
		width: 250px;
	}
	.plan_list_wide .wp-block-column {
		width: 330px;
	}
	/* 親Gp直下の配下のカラム box*/
	.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column.box {
		flex-basis: auto !important;
	}
}

/*
	商品関係のCSS
*/
.type{
    font-size: 1.5rem;
    font-weight: bold;
}
.price_set {
	justify-content: end;  /* 横並びコンテンツの右寄せ */
}
.price_title{
    font-size: 1.5rem;
    font-weight: bold;
}
.price_value{
    font-size: 1.8rem;
    color: red;
    font-weight: bold;
}
.price_value_in_table{
    font-size: 1rem;
    color: red;
    font-weight: bold;
}
.item_detail{
    font-size: 0.8rem;
	text-align: right;
	margin-top: 0px;
	padding-top: 0px;
}
.item_logo img{
	max-width: 320px;
	padding-left: 40px;
	padding-right: 40px;
}

.navi ul li a {
	padding-left: 8px;
	padding-right: 8px;
}

.blog_title_type_a {
    font-size: 1.5rem;
    font-weight: bold !important;
}

.blog_case_img_detail {
    font-size: 1.5rem;
    font-weight: bold;
}

@media (max-width: 782px) {
	.blog_case_img_detail {
		font-size: 1rem;
	}
}

.eye_catch_no_show {
	/*display: none;  ここはproduct_onlyのCSSで実装 */
    max-width: 300px;
}


.my_items_center {
	/* 子要素の中央よせ */
	display: flex;
	justify-content: center; /* 水平方向の中央寄せ */
	align-items: center;    /* 垂直方向の中央寄せ */
}
	.my_items_center .type_a {
		max-width: 300px;
	}
@media (max-width: 782px) {
	.my_items_center .type_a {
		max-width: 200px;
	}
}

/* 各商品ページのトップの左側の説明の幅 */
.eye_catch_left_width {
	width: 400px !important;
	min-width: 400px !important;
}
@media (max-width: 782px) {
	.eye_catch_left_width {
		width: 400px !important;
		min-width: 0px !important;
	}
}

/* 蓄電池種類 */
.kind_hybrid {
	/* グラデーションカラー */
	background: linear-gradient(135deg, #4158D0, #C850C0 30%, #FFCC70);
	background: -webkit-linear-gradient(315deg, #4158D0, #C850C0 30%, #FFCC70);
	width: 100%;

	font-family: "Oswald";
    font-size: 2rem;
    font-weight: bold;
    color: black;
	text-align: center;
	vertical-align: middle;
	-webkit-border-radius: 5px;
}
.kind_simple {
	/* グラデーションカラー */  
	background: linear-gradient(135deg, rgba(4, 255, 11, 1), rgba(240, 245, 144, 1));
	background: -webkit-linear-gradient(315deg, rgba(4, 255, 11, 1), rgba(240, 245, 144, 1));
	width: 100%;

	font-family: "Oswald";
    font-size: 2rem;
    font-weight: bold;
    color: black;
	text-align: center;
	vertical-align: middle;
	-webkit-border-radius: 5px;
}

.contact_gp {
	max-width: 800px;
	padding-right: 40px !important;
	box-sizing: border-box;
}
.contact_text_mid {
    font-size: 2.5rem;
    font-weight: bold;
    color: #007730;
}
.contact_form_text_mid {
    font-size: 1.5rem;
    font-weight: bold;
    color: #B70000;
}
.contact_form_text_sub {
    font-size: 1.5rem;
    font-weight: bold;
}
@media (max-width: 782px) {
	.contact_gp {
		padding-right: 10px !important;
	}
	.contact_text_mid {
		font-size: 1.4rem;
	}
	.contact_form_text_mid {
		font-size: 1rem;
	}
	.contact_form_text_sub {
		font-size: 1rem;
	}
}


.link_text a{
    font-weight: bold;
    color: red;
}