@charset "utf-8";


/*Font Awesomeの読み込み
---------------------------------------------------------------------------*/
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css");

/*Google Fontsの読み込み
---------------------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1:wght@100..900&display=swap');

/*slick.cssの読み込み
---------------------------------------------------------------------------*/
@import url("https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css");

/*テンプレート専用cssファイルの読み込み
---------------------------------------------------------------------------*/
@import url("slide.css");
@import url("inview.css");


/*CSSカスタムプロパティ（サイト全体を一括管理する為の設定）
---------------------------------------------------------------------------*/
:root {

	--primary-color: #007bbb;			/*テンプレートのメインまたはアクセントとなる色#4ba3fc*/
	--primary-inverse-color: #fff;		/*primary-colorの対として使う色*/

	--global-space: 5vw;	/*サイト内の余白の一括管理用。画面幅100%＝100vwです。*/
}


/*animation1のキーフレーム設定（開閉ブロックのアニメーションに使用）
---------------------------------------------------------------------------*/
@keyframes animation1 {
	0% {left: -200px;}
	100% {left: 0px;}
}


/*opa1のキーフレーム設定（汎用的）
---------------------------------------------------------------------------*/
@keyframes opa1 {
	0% {opacity: 0;}
	100% {opacity: 1;}
}


/*全体の設定
---------------------------------------------------------------------------*/
body * {box-sizing: border-box;}

body {
	margin: 0;padding:0;
	font-family: "M PLUS 1", "ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;	/*フォント種類*/
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	-webkit-text-size-adjust: none;
	background: #fff;	/*背景色*/
	color: #333;		/*文字色*/
	line-height: 2;		/*行間*/
	animation: opa1 0.2s 0.5s both;	/*0.5秒待機後、0.2秒かけてフェードイン表示*/
}

/*リセット*/
figure {margin: 0;}
dd {margin: 0;}
nav,ul,li,ol {margin: 0;padding: 0;}
nav ul {list-style: none;}
input {font-size: 1rem;}
section li {margin-left: 1rem;}

/*table全般の設定*/
table {border-collapse:collapse;}

/*画像全般の設定*/
img {border: none;max-width: 100%;height: auto;vertical-align: middle;}

/*videoタグ*/
video {max-width: 100%;}

/*iframeタグ*/
iframe {width: 100%;}

/*sectionが続く場合*/
section + section {
	margin-top: 4vw;	/*sectionの上に空けるスペース*/
}


/*文字サイズの設定。
もしデフォルトを「大」にしたい場合は、js/fontSizeChanger.jsの中のコメント箇所を読んで下さい。
---------------------------------------------------------------------------*/
/*「大」ボタンを押した時の文字サイズ*/
html.f-large {
	font-size: 24px;
}

/*「小」ボタンを押した時の文字サイズ*/
html.f-small {
	font-size: 17px;
}


/*リンク（全般）設定
---------------------------------------------------------------------------*/
a {
	color: #333;		/*リンクテキストの色*/
	transition: 0.3s;	/*マウスオン時の移り変わるまでの時間設定。0.3秒。*/
}
a:hover {
	color: var(--primary-color);	/*文字色。css冒頭で指定しているprimary-colorを読み込みます*/
	filter: brightness(1.2);		/*マウスオン時に少し明るくする*/
}


/*container（フッター以外を囲むブロック）
---------------------------------------------------------------------------*/
#container {
	padding: 0 var(--global-space);	/*上下、左右へのcontainer内の余白。左右の余白はcss冒頭で指定しているglobal-spaceを読み込みます*/
}


/*contents（mainを囲むブロック）
---------------------------------------------------------------------------*/
#contents {
	padding: 3vw 0 5vw;	/*上、左右、下へのcontents内の余白。画面幅100%＝100vwです。*/
}

/*トップページのコンテンツ*/
/*以前はスライドショーの上に重ねて表示していたボタン（電話・メールでのお問い合わせ）が
  画像の下へ移動する際に重ならないよう、ここで余分な上余白を確保していました。
  現在はそのボタンを画面下部固定のグローバルメニューに変更したため、この余白は不要になり、
  スマートフォン表示でメイン画像とお知らせの間に不自然な空白ができる原因になっていたので削除しています。*/

/*ヘッダー（ロゴや電話番号が入っている最上段のブロック）
---------------------------------------------------------------------------*/
/*ヘッダーブロック*/
header {
    display: flex;	/*ヘッダー内にあるボックスを横並びにする*/
    justify-content: space-between;
    align-items: center;
	position: relative;	/*文字サイズブロックを絶対配置する為に必要な指定*/
}

/*ロゴ画像*/
#logo {margin: 0;padding: 0;}
#logo img {
	display: block;
	width: 300px;	/*ロゴ画像の幅*/
}

/*ヘッダーの中央バナー*/
header .banner {
	max-width: 500px;	/*最大幅。これ以上広くならない。*/
	flex: 1;
	margin: 0 3vw;		/*上下、左右へのバナーの外側へとるスペース*/
}

/*電話番号ブロック*/
address {
	font-style: normal;
	line-height: 1.25;	/*行間を狭くする*/
	text-align: right;	/*ヘッダー右側に揃える*/
	padding: 4px 0;	/*ヘッダー上下の空白を縮小*/
	margin-top: 0;
}

/*電話番号*/
address .tel {
	font-size: 1.35rem;
	color: var(--primary-color);
	font-weight: 600;
}
address .tel i {
	font-size: 0.9em;
	margin-right: 0.35em;
}
address .tel a {
	color: inherit;
	text-decoration: none;
}
.header-address {
	font-size: 0.82rem;
	color: #555;
	margin-top: 0.15rem;
	white-space: nowrap;
}
.header-map-link {
	display: inline-block;
	margin-left: 0.35em;
	color: var(--primary-color);
	text-decoration: none;
}
.header-map-link:hover {
	filter: brightness(1.15);
}
address.margin-top-reset {margin-top: 0;}

	/*画面幅900px以下の追加指定*/
	@media screen and (max-width:900px) {
	
	/*ヘッダーブロック*/
	header {
		flex-direction: column;	/*ヘッダー内にあるボックスを縦並びにする*/
	}
	
	/*ロゴ画像*/
	#logo img {
		margin-top: 20px;	/*ロゴの上に空けるスペース*/
	}
	
	/*電話番号ブロック*/
	address {
		margin-top: 0;
		text-align: center;
		padding: 2px 0 8px;
	}
	.header-address {
		white-space: normal;
		font-size: 0.78rem;
	}
	address .tel {
		font-size: 1.2rem;
	}
	
	}/*追加指定ここまで*/


	/*画面幅400px以下の追加指定*/
	@media screen and (max-width:400px) {
	
	/*ロゴ画像*/
	#logo img {
		width: 200px;	/*ロゴ画像の幅*/
	}
	
	}/*追加指定ここまで*/


/*文字サイズ変更ボタン
---------------------------------------------------------------------------*/
/*ボタンブロック全体*/
#f-size {
    background: #fff;	/*背景色*/
    box-shadow: 0px 0px 8px rgba(0,0,0,0.2);	/*影の設定。右へ、下へ、ぼかし幅。rgbaは色設定で0,0,0は黒。0.2は20%色がついた状態の事。*/
    border-radius: 0px 0px 5px 5px;	/*角丸のサイズ。左上、右上、右下、左下への順。*/
    display: flex;			/*flexボックスを使う指定*/
    align-items: center;	/*垂直揃えの指定。天地中央に配置されるように。*/
    padding: 10px 15px;		/*ブロック内の余白。上下、左右へ。*/
    position: absolute;		/*headerに対して絶対配置する為の指定*/
    right: 0px;				/*右からの配置場所*/
    top: 0px;				/*上からの配置場所*/
}

/*「文字サイズ」のテキスト*/
#f-size p {
	margin: 0;
	margin-right: 10px;	/*右側に空けるスペース。ボタンとの間にとるスペースです。*/
	font-size: 17px;	/*文字サイズ*/
}

/*「小」「大」を囲むブロック*/
#f-size ul {
	list-style: none;margin: 0;padding: 0;
	display: flex;			/*flexボックスを使う指定*/
	align-items: center;	/*垂直揃えの指定。天地中央に配置されるように。*/
}

/*「小」ボタン設定*/
#f-size ul li#f-small {
	margin-right: 5px;	/*右側に空けるスペース。「大」との間の隙間です。*/
}
#f-size ul li#f-small::before {
	display: block;
	content: "小";		/*「小」の文字を出力*/
	font-size: 17px;	/*文字サイズ*/
	width: 40px;		/*幅*/
	line-height: 40px;	/*高さ*/
	text-align: center;	/*内容をセンタリング*/
	background: #eee;	/*背景色*/
}

/*「大」ボタン設定*/
#f-size ul li#f-large::before {
	display: block;
	content: "大";		/*「大」の文字を出力*/
	font-size: 30px;	/*文字サイズ*/
	width: 50px;		/*幅*/
	line-height: 50px;	/*高さ*/
	text-align: center;	/*内容をセンタリング*/
	background: #eee;	/*背景色*/
}

/*選択中の設定*/
#f-size li#f-large.current::before,
#f-size li#f-small.current::before {
	background: #ff0000;	/*背景色*/
	color: #fff;			/*文字色*/
}

/*マウスオン時にリンクテキストと同じような手のマークが出るように*/
#f-size li {
	cursor: pointer;
}

	/*画面幅900px以下の追加指定*/
	@media screen and (max-width:900px) {
	
	/*ボタンブロック全体*/
	#f-size {
		right: 60px;	/*右からの配置場所の上書き。３本バー（ハンバーガー）アイコンが出てくるの重ならないようにする。*/
	}
	
	}/*追加指定ここまで*/

	/*画面幅900px以下の追加指定*/
	@media screen and (max-width:900px) {
	
	/*ボタンブロック全体*/
	#f-size {
		display: none;	/*スペースが狭くなるので非表示に*/
	}
	
	}/*追加指定ここまで*/


/*メニューブロック初期設定
---------------------------------------------------------------------------*/
#menubar {opacity: 0;line-height: 1.5;}
#menubar ul {list-style: none;margin: 0;padding: 0;}

.large-screen #menubar {opacity: 1;}

.small-screen #menubar.display-none {display: none;}
.small-screen #menubar.display-block {display: block;opacity: 1;}

/*3本バーをデフォルトで非表示*/
#menubar_hdr.display-none {display: none;}

/*ドロップダウンをデフォルトで非表示*/
.ddmenu_parent ul {display: none;}

/*ddmenuを指定しているメニューに矢印アイコンをつける設定*/
a.ddmenu::before {
	font-family: "Font Awesome 5 Free";
	content: "\f078";		/*使いたいアイコン名（Font Awesome）をここで指定*/
	font-weight: bold;		/*この手の設定がないとアイコンが出ない場合があります*/
	font-size: 0.7rem;		/*文字サイズを70%に*/
	padding-right: 0.5rem;	/*右側に空ける余白。0.5文字分。*/
}


/*大きな端末、小さな端末共通のメニューブロック設定
---------------------------------------------------------------------------*/
/*メニュー１個あたりの設定*/
#menubar a {
	display: block;text-decoration: none;
}

/*小文字の英語部分*/
/* 上段メニューの英語サブタイトルだけに適用。
   以前の「#menubar span」だと、カテゴリ名や件数のspanまで70%表示になってしまうため限定。 */
#menubar > nav > ul > li > a > span {
	display: block;
	font-size: 0.7em;
	letter-spacing: 0.1em;
	opacity: 0.6;
}


/*大きな端末用のメニューブロック設定
---------------------------------------------------------------------------*/
/*メニューブロックを囲むボックス*/
.large-screen #menubar {
    position: sticky;	/*画面の上部にメニューが固定される*/
    top: 0;
    z-index: 2;
    transition: opacity 0.3s;
}

/*メニューブロック全体の設定*/
.large-screen #menubar > nav > ul {
	display: flex;	/*横並びにする*/
	justify-content: space-between;
	align-items: center;
}

/*メニュー１個あたりの設定*/
.large-screen #menubar li {
	flex: 1;			/*個々のメニューを均等にし、幅いっぱいまで使う設定*/
	position: relative;	/*ドロップダウンの幅となる基準を作っておく*/
	text-align: center;	/*テキストをセンタリング*/
}

/*リンク（a要素）の設定*/
.large-screen #menubar li a {
	flex: 1;
	background: var(--primary-color);		/*背景色。css冒頭で指定しているprimary-colorを読み込みます*/
	color: var(--primary-inverse-color);	/*文字色。css冒頭で指定しているprimary-inverse-colorを読み込みます*/
	padding: 0.8rem 0;	/*上下、左右の余白*/
}

/*マウスオン時に明るくする*/
.large-screen #menubar li a:hover {
	filter: brightness(1.2);
}

/*文字サイズ「大」の場合のメニューブロックを囲むボックス*/
html.f-large .large-screen #menubar {
	position: relative;	/*メニューが２段になる為、stickyを外してスクロールさせるようにする。固定させたままがいいならこの１行を削除する。*/
}

/*文字サイズ「大」の場合のメニューブロック全体の設定*/
html.f-large .large-screen #menubar > nav > ul {
	flex-wrap: wrap;	/*メニューを２段にする為、改行を許可する*/
}

/*文字サイズ「大」の場合のメニュー１個あたりの設定*/
html.f-large .large-screen #menubar > nav > ul > li {
	flex: auto;
	width: 33.33%;	/*メニュー幅。３列なので33.33%*/
}


/*大きな端末用のメニューブロックが画面上部に到達した場合（fixed）
---------------------------------------------------------------------------*/
/*文字色*/
.large-screen #menubar.fixed a {
    opacity: 0.8;	/*透明度。色を80%だけ出す。*/
}

/*マウスオン時*/
.large-screen #menubar.fixed a:hover {
	opacity: 1;		/*透明度。色を100%出す。*/
}

/*メニューの上下の余白を狭くする*/
.large-screen #menubar.fixed2 li a {
	padding-top: 0.4rem;	/*上の余白*/
	padding-bottom: 0.4rem;	/*下の余白*/
}


/*大きな端末、小さな端末、共通のドロップダウンメニュー設定
---------------------------------------------------------------------------*/
/*ドロップダウンブロック*/
.large-screen #menubar ul ul,
.small-screen #menubar ul ul {
	animation: opa1 0.5s 0.1s both;	/*0.1秒待機後、0.5秒かけてフェードイン表示*/
}


/*大きな端末用のドロップダウンメニュー
---------------------------------------------------------------------------*/
/*ドロップダウンメニューブロック全体*/
.large-screen #menubar ul ul {
	position: absolute;z-index: 2;
	width: 100%;
	top: 100%;
	left: 0px;
}

/*ドロップダウンメニュー1個あたりの上下、左右への余白。*/
.large-screen #menubar ul ul a {
	padding: 0.6rem 1rem !important;
}


/*小さな端末用の開閉ブロック
---------------------------------------------------------------------------
.small-screen #menubar {height: 0px;}*/

/*メニューブロック設定*/
.small-screen #menubar.display-block {
	position: fixed;overflow: auto;z-index: 100;
	left: 0px;top: 0px;
	width: 100%;
	height: 100%;
	padding-top: 90px;	/*上に空ける余白。ハンバーガーアイコンと重ならない為の指定ですのでお好みで変更OK。*/
	background: var(--primary-color);	/*背景色。css冒頭で指定しているprimary-colorを読み込みます*/
	animation: animation1 0.2s both;	/*animation1を実行する。0.2sは0.2秒の事。*/
	color: var(--primary-inverse-color);	/*文字色。css冒頭で指定しているprimary-inverse-colorを読み込みます*/
}

/*メニュー１個あたりの設定*/
.small-screen #menubar li {
	border: 1px solid #fff;	/*枠線の幅、線種、色*/
	margin: 1rem;			/*メニューの外側に空けるスペース*/
	border-radius: 5px;		/*角を丸くする指定*/
}
.small-screen #menubar a {
	color: inherit;
	padding: 1rem 3rem;		/*メニュー内の余白。上下、左右へ。*/
}
.small-screen #menubar li li a {
	background: var(--primary-inverse-color);	/*背景色。css冒頭で指定しているprimary-inverse-colorを読み込みます*/
	color: var(--primary-color);	/*文字色。css冒頭で指定しているprimary-colorを読み込みます*/
}


/*３本バー（ハンバーガー）アイコン設定
---------------------------------------------------------------------------*/
/*３本バーを囲むブロック*/
#menubar_hdr {
	animation: opa1 0.3s 0.5s both;
	position: fixed;z-index: 101;
	cursor: pointer;
	top: 2vw;		/*上からの配置場所*/
	right: 2vw;		/*右からの配置場所*/
	width: 50px;	/*幅*/
	height: 50px;	/*高さ*/
	padding: 15px;	/*ブロック内の余白*/
	display: flex;
	justify-content: center;
	align-items: center;
	transition: transform 0.5s;
	background: rgba(0,0,0,0.6);	/*背景色*/
}

/*以下は変更不要*/
#menubar_hdr div {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

/*バーの設定*/
#menubar_hdr div span {
	display: block;
	width: 100%;
	height: 2px;			/*線の太さ*/
	background-color: #fff;	/*線の色*/
	border-radius: 2px;		/*コーナーを少しだけ丸く*/
	transition: all 0.5s ease-in-out;
	position: absolute;
}

/*以下変更不要*/
#menubar_hdr div span:nth-child(1) {top: 0;}
#menubar_hdr div span:nth-child(2) {top: 50%;transform: translateY(-50%);}
#menubar_hdr div span:nth-child(3) {bottom: 0;}
#menubar_hdr.ham div span:nth-child(1) {top: 50%;transform: translateY(-50%) rotate(45deg);}
#menubar_hdr.ham div span:nth-child(2) {opacity: 0;}
#menubar_hdr.ham div span:nth-child(3) {top: 50%;transform: translateY(-50%) rotate(-45deg);}


/*mainブロック
---------------------------------------------------------------------------*/
/*h2見出し*/
main h2 {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0 0 2rem;		/*h2の外側にとるスペース。上、左右、下への順番。*/
	font-size: 1.5rem;		/*文字サイズ*/
	position: relative;		/*ulineを配置する為に必要な指定*/
	font-weight: normal;	/*デフォルトの太字を標準に*/
	border-bottom: 3px solid #ddd;	/*薄い色の線の幅、線種、色*/
	letter-spacing: 0.1em;	/*文字間隔を少しだけ広くする*/
}

/*h2のアクセントラインの設定*/
main h2 .uline {
	display: inline-block;position: relative;
	padding: 0.5rem 0;	/*h2内の余白。上下、左右への順番。*/
	bottom: -3px;		/*濃い線を薄い線に重ねる為の指定。枠線の幅と合わせます。*/
	border-bottom: 3px solid var(--primary-color);	/*濃い色の線の幅、線種、varは色の事でcss冒頭で指定しているprimary-colorを読み込みます*/
}

/*右側の装飾文字の設定*/
main h2 .small {
	display: block;
	font-size: 0.6em;	/*文字サイズを親要素の60%に*/
	opacity: 0.5;		/*透明度。色が50%出た状態。*/
}

/*h2のテキストをセンタリングする場合*/
main h2.c {
	display: block;
	border: none;		/*下線を非表示に*/
	text-align: center;	/*テキストをセンタリング*/
	font-size: 2rem;	/*文字サイズを２倍に*/
}

/*h3見出し*/
main h3 {
	font-size: 1.3rem;		/*文字サイズ*/
	letter-spacing: 0.1em;	/*文字間隔を少しだけ広くする*/
	font-weight: normal;	/*デフォルトの太字を標準に*/
}


/*フッター共通
---------------------------------------------------------------------------*/
#footer-contents {
	padding: 3.5rem var(--global-space) 2.5rem;	/*上、左右、下へのボックス内の余白。左右はcss冒頭で指定しているglobal-spaceを読み込みます*/
}


/*フッターのコンテンツ（ロゴ・住所・サイトメニュー・マップ）
  ※スッキリした印象になるよう、白背景・余白多めのシンプルなデザインにしています
---------------------------------------------------------------------------*/
#footer-contents {
	background: #fff;		/*背景色*/
	color: #555;			/*文字色*/
	border-top: 1px solid #eee;
	display: grid;
	gap: 2.5rem;
	grid-template-columns: 1fr;
}
#footer-contents a {
	color: inherit;
}
#footer-contents h3 {
	margin: 0 0 1rem;
	font-size: 0.95rem;
	font-weight: 700;
	color: #333;
	letter-spacing: 0.05em;
}

/*ロゴ・住所ブロック*/
.footer-logo {
	display: block;
	width: 220px;
	max-width: 65%;
	margin-bottom: 1.2rem;
}
.footer-address {
	margin: 0 0 1.2rem;
	font-size: 0.85rem;
	line-height: 1.9;
	color: #666;
}

/*サイトメニュー*/
.footer-nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.footer-nav li {
	border-bottom: 1px solid #eee;
}
.footer-nav a {
	display: block;
	padding: 0.65rem 0.1rem;
	font-size: 0.85rem;
	text-decoration: none;
	transition: color .2s;
}
.footer-nav a:hover {
	color: var(--primary-color);
}

/*アクセス（マップ）*/
.footer-map p {
	margin: 0 0 0.8rem;
	font-size: 0.85rem;
}
.footer-map p a {
	text-decoration: underline;
}

	/*画面幅901px以上の追加指定*/
	@media screen and (min-width:901px) {

	#footer-contents {
		grid-template-columns: 1.3fr 0.8fr 1.3fr;	/*ロゴ／メニュー／マップの3列。お好みで比率変更可*/
		gap: 3rem;
	}

	}/*追加指定ここまで*/



/*footer-contents内のマップ。レスポンシブにする為のものなので、基本は編集不要です。
---------------------------------------------------------------------------*/
.iframe-box {
	width: 100%;
	height: 0;
	padding-top: 56.25%;	/*マップの高さを増やしたい場合は、ここの数値を上げてみて下さい。*/
	position: relative;
	overflow: hidden;
	border-radius: 6px;
}
.iframe-box iframe {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
}


/*フッター設定（コピーライト行）
---------------------------------------------------------------------------*/
small {font-size: 100%;}
footer {
	font-size: 0.7rem;		/*文字サイズ*/
	background: #1d1b1b;	/*背景色*/
	color: #fff;			/*文字色*/
	text-align: center;		/*内容をセンタリング*/
	padding: 1rem;			/*ボックス内の余白*/
}

/*リンクテキスト*/
footer a {color: inherit;text-decoration: none;}

/*著作部分*/
footer .pr {display: block;}


/*フッター内にあるソーシャルメディアのアイコン
  ※丸背景付きのボタン風デザインに変更*/
ul.icons {
	list-style: none;
	margin: 0;padding: 0;
	display: flex;
	align-self: center;
	gap: 0.7rem;	/*アイコン同士のマージン的な要素。*/
}
ul.icons a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #f2f2f2;
	transition: background .2s, transform .2s;
}
ul.icons a:hover {
	background: var(--primary-color);
	transform: translateY(-2px);
}
ul.icons a:hover i {
	color: #fff;
}
.icons i {
	font-size: 18px;	/*アイコンサイズ*/
	color: #666;
	transition: color .2s;
}

/*フッター内の著作表記（以前は別枠の黒いバーでしたが、フッターの左下に統合しました）*/
.footer-copyright {
	display: block;
	margin-top: 1.5rem;
	font-size: 0.72rem;
	color: #999;
}


/*FAQ
---------------------------------------------------------------------------*/
/*質問*/
.faq dt {
	border-radius: 3px;		/*枠を角丸にする指定*/
	margin-bottom: 1rem;	/*下に空けるスペース*/
	background: #fff;		/*背景色*/
	border: 1px solid #ccc;	/*枠線の幅、線種、色*/
	text-indent: -2rem;				/*テキストのインデント。質問が複数行になった際に、テキストの冒頭を揃える為に設定しています。*/
	padding: 0.5rem 1em 0.5rem 3em;		/*ボックス内の余白。ここを変更する場合、上のtext-indentも調整します。*/
}

/*アイコン（Font Awesome）*/
.faq dt::before {
	font-family: "Font Awesome 6 Free";	/*Font Awesomeを使う指定*/
    content: "\f059";		/*アイコンのコード*/
	padding-right: 1rem;	/*アイコンとテキストとの間のスペース*/
	color: var(--primary-color);	/*アイコンの色。css冒頭で指定しているprimary-colorを読み込みます*/
}

/*回答*/
.faq dd {
	padding: 0 1rem 1rem 3rem;	/*ボックス内の余白。上、右、下、左への順番。*/
}

/*opencloseを適用した要素のカーソル*/
.openclose {
	cursor: pointer;	/*カーソルの形状。リンクと同じスタイルにしてクリックできると認識してもらう。*/
}


/*list-half（左右にわかれたボックス）
---------------------------------------------------------------------------*/
/*画像ブロック*/
.list-half .image {
    width: 60vw;	/*幅。60%。*/
	margin: 0 auto;	/*画像を中央に配置*/
	padding: 5vw 0;	/*上下、左右への余白。画像の上下に隙間をあけます。*/
}

	/*画面幅600px以上の追加指定*/
	@media screen and (min-width:600px) {
	
	/*ボックス全体*/
	.list-half {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 5vw;	/*左右の間に空けるマージン的な要素*/
		position: relative;
	}

	/*テキストブロック*/
	.list-half .text {
		flex: 1;
	}

	/*画像ブロック*/
	.list-half .image {
		padding: 0;		/*余白をリセット*/
		width: 40vw;	/*幅。40%。*/
	}

	/*左右を入れ替える場合用*/
	.list-half.reverse {
		flex-direction: row-reverse;
	}

	}/*追加指定ここまで*/


/*画像の影のスタイル*/
.list-half .shadow1 {
	box-shadow: -4vw 4vw 0 rgba(0,0,0,0.05);
}

/*reverseの場合の影*/
.list-half.reverse .shadow1 {
	box-shadow: 4vw 4vw 0 rgba(0,0,0,0.05);
}


/*list-grid1
---------------------------------------------------------------------------*/
.list-grid1 .list * {margin: 0;padding: 0;}

/*ボックス１個あたり*/
.list-grid1 .list {
    display: grid;
	margin-bottom: 1rem;	/*下に空けるスペース*/
}

/*ボックス内のp要素*/
.list-grid1 .list p {
	font-size: 0.85rem;	/*文字サイズを85%に*/
	line-height: 1.5;	/*行間を狭くする*/
}

/*ボックス１個あたり*/
.list-grid1 .list {
	padding: 1rem;			/*ボックス内の余白。１文字分。*/
	background: #fff;		/*背景色*/
    grid-template-rows: auto 1fr auto;	/*１つ目（この場合はfigure要素のサイズ）と「詳しくみる」ボタンの高さは自動に、２つ目（この場合はtextブロック））を残った幅で使う*/
	box-shadow: 5px 5px 20px rgba(0,0,0,0.1);	/*ボックスの影。右へ、下へ、ぼかし幅、0,0,0は黒の事で0.1は色が10%出た状態。*/
}

/*ボックス内のfigure画像*/
.list-grid1 .list figure {
	margin: -1rem;			/*画像を枠いっぱいに表示させる為に上の「.list-grid1 .list」のpadding分をネガティブマーインで指定*/
	margin-bottom: 0.5rem;	/*画像の下に空けるスペース*/
}

	/*画面幅800px以上の追加指定*/
	@media screen and (min-width:800px) {

	/*listブロック全体を囲むブロック*/
	.list-grid1 {
		display: grid;
		grid-template-columns: repeat(3, 1fr);	/*3列にする指定。4列にしたければrepeat(4, 1fr)とする。*/
		gap: 1rem;	/*ブロックの間に空けるマージン的な指定*/
	}

	/*ボックス１個あたり*/
	.list-grid1 .list {
		margin-bottom: 0;	/*下に空けるスペースをなくす*/
	}

	}/*追加指定ここまで*/


/*ボタン（btn）
---------------------------------------------------------------------------*/
.btn a {
	display: block;text-decoration: none;
	font-size: 1rem;
	text-align: center;		/*テキストをセンタリング*/
	background: var(--primary-color) !important;	/*背景色。css冒頭で指定しているprimary-colorを読み込みます*/
	color: var(--primary-inverse-color) !important;	/*文字色。css冒頭で指定しているprimary-inverse-colorを読み込みます*/
	padding: 0.5rem !important;		/*ボタン内の余白*/
	margin-top: 1rem !important;	/*ボタンの外（上）に空けるスペース*/
}


/*bg1背景色がついたブロック
---------------------------------------------------------------------------*/
.bg1 {
	position: relative;
	background: #fcf8ea;	/*背景色*/
	padding-top: 5vw;		/*ボックス内の上に空ける余白。お好みで調整して下さい。*/
	padding-bottom: 5vw;	/*ボックス内の下に空ける余白。お好みで調整して下さい。*/
	/*margin-top: 10vw;		ボックス外の上に空ける余白。お好みで調整して下さい。*/
	/*margin-bottom: 10vw;	ボックス外の下に空ける余白。お好みで調整して下さい。*/
	
	/*以下は変更不要*/
	margin-left: calc(-1 * var(--global-space));
	margin-right: calc(-1 * var(--global-space));
	padding-left: var(--global-space);
	padding-right: var(--global-space);
}
.bg1 a {
	color: inherit;
}


/*お知らせブロック
---------------------------------------------------------------------------*/
/*お知らせブロック：日付と内容を1行に並べて表示する（グリッドレイアウト）*/
.new {
	background: transparent;
	margin-bottom: 4rem;
	border-top: 2px dashed #7a9cc8;	/*タイトル下の青系点線区切り*/
	padding-top: 0.5rem;
	display: grid;
	grid-template-columns: auto 1fr;	/*左：日付／右：内容*/
	column-gap: 1.2rem;
	align-items: baseline;
}

/*日付(dt)設定*/
.new dt {
	margin: 0;
	padding: 0.8rem 0;
	color: #2d4a8a;
	font-weight: bold;
	font-size: 0.9rem;
	white-space: nowrap;		/*日付が折り返さないように*/
	border-top: 1px dotted #b0b8c9;
}

/*最初のdtは上の点線を非表示*/
.new dt:first-of-type {
	border-top: none;
}

/*記事(dd)設定：タイトルと右端の「＞」を横並びに*/
.new dd {
	margin: 0;
	padding: 0.8rem 0;
	font-size: 0.9rem;
	border-top: 1px dotted #b0b8c9;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}
.new dd .new-text {
	min-width: 0;		/*長いタイトルでもレイアウトが崩れないように*/
}
.new dd .new-text a {
	text-decoration: none;
}
.new dd .fa-chevron-right {
	flex-shrink: 0;
	font-size: 0.75rem;
	color: #b0b8c9;
}

/*最初のddも上の点線を非表示（dtと同じ行なので）*/
.new dd:first-of-type {
	border-top: none;
}


/* お知らせ説明文 */
.news-lead {
    color: #2d4a8a;        /* 青系の文字色 */
    font-size: 0.85rem;
    margin: -1.5rem 0 1rem; /* h2との間隔を詰める */
    letter-spacing: 0.05em;
}


/*お知らせ一覧ボタン（NEWSブロックの下に配置）*/
.news-more {
	margin-top: 1.5rem;
	text-align: center;
}
.news-more a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	width: 100%;
	max-width: 320px;		/*横幅を広げつつ、上限を設けてバランスを取る*/
	padding: 1em 2.4em;
	border-radius: 999px;
	background: #222;
	color: #fff;
	font-size: 0.9rem;
	font-weight: 700;
	text-decoration: none;
	transition: opacity .2s, transform .2s;
}
.news-more a:hover {
	opacity: 0.85;
	transform: translateY(-2px);
}

/*ページャー（お知らせ一覧・物件一覧共通）*/
.pager {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	margin: 2rem 0;
}
.pager a, .pager span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.2rem;
	height: 2.2rem;
	padding: 0 0.7rem;
	border-radius: 6px;
	font-size: 0.85rem;
}
.pager a {
	color: #333;
	background: #f2f2f2;
	text-decoration: none;
	transition: background .2s;
}
.pager a:hover {
	background: #e4e4e4;
}
.pager span.current {
	background: var(--primary-color);
	color: #fff;
	font-weight: 700;
}
.pager span:not(.current) {
	color: #bbb;
}












	/*お知らせは.newのグリッドレイアウトにより、PC・スマホ共通で
	  常に「日付＋内容」を1行で表示するため、画面幅による切り替えは不要になりました*/



/*2・3カラム（main-contents、sub-contents設定）
---------------------------------------------------------------------------*/
/*main-contentsブロック*/
.main-contents {
	margin-bottom: 2vw;	/*ボックスの下に空けるスペース*/
}

	/*画面幅901px以上の追加指定*/
	@media screen and (min-width:901px) {

	/*カラムで使う為の指定*/
	main.column {
		display: flex;					/*横並びにする*/
		justify-content: space-between;	/*並びかたの種類の指定*/
		gap: 3vw;						/*main-contentsとsub-contentsの間のマージン的な隙間*/
	}
	
	/*main-contentsブロック*/
	.main-contents {
		margin-bottom: 0;
		order: 2;		/*並び順。数字の小さい順番に表示されます。*/
		flex: 1;
	}
	
	/*sub-contentsブロック共通*/
	.sub-contents {
		width: 210px;	/*幅。お好みで変更して下さい。*/
	}
	
	/*1つ目のsub-contents*/
	.sub-contents:nth-child(2) {
		order: 1;	/*並び順。数字の小さい順番に表示されます。*/
	}
	
	/*2つ目のsub-contents（※３カラムで使いたい場合用）*/
	.sub-contents:nth-child(3) {
		order: 3;	/*並び順。数字の小さい順番に表示されます。３番目という意味なので一番右側に表示されます。*/
	}
	
	}/*追加指定ここまで*/


/*サブコンテンツ内のh3要素(見出し)*/
.sub-contents h3 {
	margin: 0;
	font-size: 1rem;
	margin-bottom: 0.5rem;
}
.sub-contents h3::first-letter {
	border-left: 3px solid var(--primary-color);	/*左側のアクセント用ラインの幅、線種、色*/
	padding-left: 10px;
}


/*サブメニュー設定
---------------------------------------------------------------------------*/
/*サブメニューブロック全体*/
.submenu {
	padding: 0;
	margin: 0 0 1rem;	/*上、左右、下へのマージン*/
	border-top: 1px solid #ccc;	/*上の枠線の幅、線種、色*/
}

/*メニュー１個あたり*/
.submenu a {
	display: block;text-decoration: none;
	padding: 0.2rem 1rem;	/*上下、左右へのメニュー内の余白*/
	background: #fff;	/*背景色*/
}

/*メニュー１個あたり（子メニュー以外）*/
.submenu > li {
	border: 1px solid #ccc;	/*枠線の幅、線種、色*/
	border-top: none;		/*上の線だけなくす*/
}

/*子メニュー*/
.submenu li li a {
	padding-left: 2rem;	/*左に余白を空ける*/
}


/*box1
---------------------------------------------------------------------------*/
.box1 {
	padding: 1rem;			/*ボックス内の余白*/
	margin-bottom: 1rem;	/*ボックスの下に空けるスペース*/
	background: rgba(0,0,0,0.05);	/*背景色*/
	border: solid 1px #ccc;	/*線の線種、幅、色*/
	box-shadow: 0px 0px 1px 1px #fff inset;	/*ボックスの影。右へ、下へ、ぼかし幅、距離。#fffは白のことでinsetは内側へ向けての影の指定。*/
}

/*box1内のsubmenuの下マージンをなくす*/
.box1 .submenu {
	margin-bottom: 0;
}


/*詳細ページのサムネイル切り替えブロック
---------------------------------------------------------------------------*/
/*大きな画像が表示されるブロック*/
.thumbnail-view-parts {
	max-width: 1000px;		/*最大幅*/
	margin: 0 auto 1rem;	/*ブロック要素を中央に配置。下に1文字分のマージンをとる。*/
	text-align: center;		/*画像が小さい場合でもセンタリングされるように*/
}

/*サムネイル全体を囲むブロック*/
.thumbnail-parts {
	display: flex;				/*flexを使う指定*/
	justify-content: center;	/*並びかたの種類の指定。これはセンタリングする指定。*/
	margin-bottom: 2rem;		/*下に空けるスペース。２文字分。*/
}

/*サムネイル画像*/
.thumbnail-parts img {
	width: 100px;		/*サムネイルの幅*/
	margin: 2px;		/*サムネイル間のスペース*/
	cursor: pointer;	/*リンクタグではないが、クリックできる事をわかりやすくする為にリンクと同じポインターにしておきます。*/
	transition: 0.3s;	/*マウスオンまでにかける時間。3秒。*/
}
.thumbnail-parts img:hover {
	opacity: 0.8;	/*マウスオン時に80%だけ色を出す。つまり薄くなります。*/
}


/*テーブル（ta1）
---------------------------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※caption）*/
.ta1 caption {
	font-weight: bold;		/*太字に*/
	padding: 0.5rem 1rem;	/*ボックス内の余白*/
	background: #999;		/*背景色*/
	color: #fff;			/*文字色*/
	margin-bottom: 1rem;	/*下に空けるスペース*/
	border-radius: 5px;		/*角を丸くする指定*/
}

/*ta1テーブルブロック設定*/
.ta1 {
	table-layout: fixed;
	border-top: 1px solid #999;	/*テーブルの一番上の線。幅、線種、色*/
	width: 100%;				/*幅*/
	margin-bottom: 1rem;			/*テーブルの下に空けるスペース*/
}

/*tr（１行分）タグ設定*/
.ta1 tr {
	border-bottom: 1px solid #999;	/*テーブルの下線。幅、線種、色*/
}

/*th（左側）、td（右側）の共通設定*/
.ta1 th, .ta1 td {
	padding: 1rem;		/*ボックス内の余白*/
	word-break: break-all;	/*英語などのテキストを改行で自動的に折り返す設定。これがないと、テーブルを突き抜けて表示される場合があります。*/
}

/*th（左側）のみの設定*/
.ta1 th {
	width: 30%;			/*幅*/
	text-align: left;	/*左よせにする*/
	background: #eee;	/*背景色*/
}

	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {

		/*th（左側）のみの設定*/
		.ta1 th {
			width: 20%;		/*幅*/
		}

	}/*追加指定ここまで*/


/*テーブル（ta2）サブブロックの受付テーブルに使用。
---------------------------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※caption）*/
.ta2 caption {
	text-align: center;
	background: var(--primary-color);
	color: var(--primary-inverse-color);
	font-weight: bold;		/*太字に*/
	padding: 10px;			/*ボックス内の余白*/
}

/*ta2設定*/
.ta2 {
	table-layout: fixed;
	width: 100%;
	margin-bottom: 2rem;	/*テーブルの下に空けるスペース*/
	text-align: center;		/*センタリング*/
	background: #fff;		/*背景色*/
	color: #333;			/*文字色*/
}
.ta2, .ta2 td, .ta2 th {
	word-break: break-all;
	border: 1px solid #ccc;	/*テーブルの枠線の幅、線種、色*/
}

/*曜日と午前午後*/
.ta2 th {
	background: #fffbe3;
}


/*テーブルを小さな端末で横スクロールさせる為の準備
---------------------------------------------------------------------------*/
/*テーブルを囲むブロック*/
.ta-box {
	overflow-x: auto;
	margin-bottom: 1rem;
}

/*ブロック内にあるta2のみ最小幅を設定*/
.ta-box .ta2 {
	min-width: 600px;
}

.ta-box + p,
.ta1 + p,
.ta2 + p {
	margin-top: -2rem;
}

/*PAGE TOP（↑）設定
---------------------------------------------------------------------------*/
.pagetop-show {display: block;}

/*ボタンの設定*/
.pagetop a {
	display: block;text-decoration: none;text-align: center;z-index: 99;
	position: fixed;	/*スクロールに追従しない(固定で表示)為の設定*/
	right: 20px;		/*右からの配置場所指定*/
	bottom: 20px;		/*下からの配置場所指定*/
	color: #fff;		/*文字色*/
	font-size: 1.5rem;	/*文字サイズ*/
	background: rgba(0,0,0,0.2);	/*背景色。0,0,0は黒の事で0.2は色が20%出た状態。*/
	width: 60px;		/*幅*/
	line-height: 60px;	/*高さ*/
	border-radius: 50%;	/*円形にする*/
}


/*その他
---------------------------------------------------------------------------*/
.clearfix::after {content: "";display: block;clear: both;}
.color-check, .color-check a {color: #ff0000 !important;}
.l {text-align: left !important;}
.c {text-align: center !important;}
.r {text-align: right !important;}
.ws {width: 95%;display: block;}
.wl {width: 65%;display: block;}/*デフォルト-95%*/
.mb0 {margin-bottom: 0px !important;}
.mb30 {margin-bottom: 30px !important;}
.look {display: inline-block;padding: 0px 10px;background: #eee;color: #333;border: 1px solid #ccc; border-radius: 3px;margin: 5px 0; word-break: break-all;}
.small {font-size: 0.75em;}
.large {font-size: 2em; letter-spacing: 0.1em;}
.pc {display: none;}
.dn {display: none !important;}
.block {display: block !important;}

	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {

	.ws {width: 48%;display: inline;}
	.sh {display: none;}
	.pc {display: block;}

	}/*追加指定ここまで*/



/*下部固定のグローバルメニュー（会社情報＋電話・メールでのお問い合わせ）
---------------------------------------------------------------------------*/
/*PC・スマートフォン共通で画面最下部に常時固定表示。少し透過させた背景の上に、
  会社名・住所・電話番号（PCのみ）と、丸みのある白いボタン2つを配置。*/
#global-fixed-menu {
	position: fixed;			/*スクロールしても画面下部に固定*/
	left: 0;right: 0;bottom: 0;
	z-index: 200;				/*他の要素より手前に表示*/
	background: rgba(0,123,187,.68);	/*primary-colorを透過させた背景（お好みでさらに数値を下げると薄くなります）*/
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	box-shadow: 0 -2px 10px rgba(0,0,0,.15);
}
.gfm-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	padding: 0.6rem var(--global-space);
}
/*会社名・住所・電話番号（スマホでは場所を取りすぎるので非表示、PCのみ表示）*/
.gfm-info {
	display: none;
}
.gfm-name {
	color: #fff;
	font-size: 0.95rem;
	font-weight: 700;
	margin-right: 0.8rem;
}
.gfm-address, .gfm-tel {
	color: rgba(255,255,255,.9);
	font-size: 0.78rem;
	margin-right: 0.8rem;
}
/*ボタン2つ*/
.gfm-actions {
	display: flex;
	gap: 0.6rem;
	margin: 0;padding: 0;
	list-style: none;
	flex: 1 1 auto;
}
.gfm-actions li {
	flex: 1 1 0;			/*均等幅（中身に合わせて自動で広がる）*/
	min-width: 0;
}
.gfm-actions a {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.4em;
	height: 44px;
	padding: 0 0.8rem;
	border-radius: 999px;		/*丸みのあるピル型ボタン*/
	background: #fff;
	color: var(--primary-color);
	text-decoration: none;
	font-size: 0.78rem;
	font-weight: 700;
	white-space: nowrap;		/*ボタン内の文字が折り返さないようにする*/
	transition: transform .2s, box-shadow .2s;
}
.gfm-actions a:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 10px rgba(0,0,0,.15);
}
.gfm-actions a i {
	font-size: 1.05em;
	flex-shrink: 0;
}
/*狭い画面では文言を短くして、折り返しを確実に防ぐ*/
.gfm-label-short {
	display: none;
}
	@media screen and (max-width:400px) {
	.gfm-label-full  { display: none; }
	.gfm-label-short { display: inline; }
	.gfm-actions a {
		font-size: 0.75rem;
		padding: 0 0.5rem;
		gap: 0.3em;
	}
	}/*追加指定ここまで*/
/*固定バーの高さぶん、本文側に余白を確保（iPhoneなどのホームバー分の余白 env() にも対応）*/
body {
	padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
}
/*固定バーの高さぶんだけ、ページ上部へ戻るボタンの位置を上にずらす*/
.pagetop a {
	bottom: calc(64px + 20px + env(safe-area-inset-bottom, 0px));
}

	/*画面幅900px以上（PC）の追加指定*/
	@media screen and (min-width:900px) {

	.gfm-inner {
		justify-content: center;	/*会社情報とボタンを「ひとまとまり」として中央寄せに*/
		gap: 3rem;					/*会社情報とボタンの間隔*/
		max-width: 1400px;			/*画面が広い時に、両端に離れすぎないよう全体の横幅を制限*/
		margin: 0 auto;
		padding: 0.9rem var(--global-space);
	}
	.gfm-info {
		display: flex;
		align-items: baseline;
		flex-wrap: wrap;
	}
	.gfm-actions {
		flex: 0 0 auto;
		width: 460px;
	}
	.gfm-actions a {
		height: 48px;
		font-size: 0.95rem;
		padding: 0 1.5rem;
	}
	body {
		padding-bottom: 78px;
	}
	.pagetop a {
		bottom: calc(78px + 20px);
	}

	}/*追加指定ここまで*/











/*下層ページ用タイトル画像（会社概要ページなどの見出し画像）
---------------------------------------------------------------------------*/
/*画像を囲むブロック*/
.page-title-hero {
	position: relative;
	width: 100%;
	overflow: hidden;
	margin-bottom: 2vw;
	aspect-ratio: 1500 / 150;
	/* ネガティブマージンを解除して青色メニューと同じ横幅に揃える */
	margin-left: 0;
	margin-right: 0;
}

/*タイトル画像本体*/
.page-title-hero img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* 中央を基準にしてスマホでの切り取り位置を補正 */
	object-position: center center;
}

	/*画面幅900px以下（スマートフォン）の追加指定*/
	@media screen and (max-width:900px) {

	/*画像を囲むブロック*/
	.page-title-hero {
		aspect-ratio: auto;
		height: 140px; /* スマホ時の見易い高さに調整 */
	}

	}/*追加指定ここまで*/
















/*スマートフォンでのメイン画像（スライドショー）を大きく表示
---------------------------------------------------------------------------*/
/*注記：スライドショー自体の高さや背景表示の指定は slide.css 側にありますが、
  slide.css は今回のアップロードに含まれていなかったため、こちらの style.css側で
  上書きする形で対応しています。より正確に調整したい場合は slide.css も共有してください。*/
	@media screen and (max-width:900px) {

	#mainimg,
	#mainimg .slide,
	#mainimg .slick-list,
	#mainimg .slick-track,
	#mainimg .slick-slide {
		height: 78vw !important;		/*画面幅に対する比率で高さを確保（従来より大きく表示）*/
		min-height: 320px !important;
		max-height: 480px !important;
	}
	/*背景画像は左側（文字が写っている側）を基準に表示し、右側は切れてもよい設定に*/
	#mainimg .slide {
		background-position: left center !important;
		background-size: cover !important;
	}

	/*#mainimg自体、および画面幅で切り替わる body.small-screen 時に
	  余分な margin / padding が残っていないか、念のためゼロにリセット
	  （以前はここにボタン用の余白が確保されていた可能性があるため）*/
	#mainimg,
	.small-screen #mainimg,
	.large-screen #mainimg,
	body.home #mainimg {
		margin: 0 !important;
		padding: 0 !important;
	}
	/*#mainimgの直後（#contents）側にも余分な余白が無いように、最小限の隙間だけ残す*/
	#mainimg + #contents,
	.home #mainimg + #contents {
		margin-top: 0 !important;
		padding-top: 1rem !important;
	}

	}/*追加指定ここまで*/


/* =========================================================
   トップページ：お知らせ・Instagram（2026-09-04調整）
   ※旧 max-width:760px 指定を廃止し、ブラウザ幅に対して可変表示
========================================================= */
/* ===== HOME：お知らせ・フッター調整 ===== */
.home .main-contents > .home-news-section{
  position: relative;
  width: 76%;
  max-width: none;
  box-sizing: border-box;
  margin: 72px auto 78px;
  padding: 42px clamp(42px, 4vw, 72px) 38px;
  background:
    linear-gradient(135deg, rgba(34,150,205,.035), rgba(255,255,255,0) 48%),
    #fff;
  border: 1px solid #e2eaf0;
  border-radius: 16px;
  box-shadow: 0 14px 36px rgba(18,58,82,.07);
  overflow: hidden;
}

/* 上部との区切りを明確にする装飾ライン */
.home-news-section::before{
  content: "";
  position: absolute;
  left: clamp(42px, 4vw, 72px);
  right: clamp(42px, 4vw, 72px);
  top: 0;
  height: 4px;
  background: linear-gradient(90deg, #1b94cf 0%, #7ec7e8 48%, rgba(126,199,232,.15) 100%);
  border-radius: 0 0 4px 4px;
}
.home-news-section::after{
  content: "INFORMATION";
  position: absolute;
  top: 15px;
  right: clamp(42px, 4vw, 72px);
  font-size: .68rem;
  letter-spacing: .22em;
  color: #8ba0ad;
  font-weight: 700;
}

.home-news-grid{
  display: grid;
  grid-template-columns: minmax(220px, 28%) minmax(0,1fr);
  gap: clamp(34px, 4vw, 70px);
  align-items: start;
}
.home-news-heading{
  position: relative;
  padding: 14px 0 14px 20px;
  border-left: 4px solid #2296cd;
}
.home-news-heading::after{
  content: "";
  display: block;
  width: 54px;
  height: 2px;
  margin-top: 18px;
  background: #2296cd;
}
.home-news-heading h2{
  margin: 0 0 12px;
  line-height: 1.25;
}
.home-news-heading h2 .uline{
  border-bottom: none;
}
.home-news-heading h2 .small{
  display: block;
  margin-top: 7px;
  letter-spacing: .16em;
  color: #7d8d97;
}
.home-news-heading .news-lead{
  margin: 0;
  line-height: 1.9;
  color: #5e6870;
  font-size: .95rem;
}
.home-news-body{
  padding: 4px 0 0 0;
}
.home-news-body dl.new{
  margin-top: 0;
  border-top: 1px solid #dfe8ee;
}
.home-news-body dl.new > *{
  border-bottom-color: #e7edf1;
}
.home-news-body .news-more{
  margin: 28px 0 0;
  text-align: right;
}
.home-news-body .news-more a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 190px;
  padding-left: 24px;
  padding-right: 24px;
}

/* Instagramだけでも寂しく見えないフッターボタン */
.footer-instagram{
  margin: 18px 0 16px;
}
.footer-instagram a{
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-width: 190px;
  padding: 10px 16px;
  border: 1px solid #d8dde3;
  border-radius: 999px;
  text-decoration: none;
  background: #fff;
  transition: .2s ease;
}
.footer-instagram a:hover{
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(0,0,0,.08);
}
.footer-instagram i{
  font-size: 1.45rem;
}
.footer-instagram-text{
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  text-align: left;
}
.footer-instagram-text strong{
  font-size: .95rem;
  font-weight: 700;
}
.footer-instagram-text span{
  font-size: .72rem;
  opacity: .68;
}


@media (max-width: 1100px) and (min-width: 801px){
  .home .main-contents > .home-news-section{
    width: 86%;
  }
  .home-news-grid{
    grid-template-columns: minmax(200px, 30%) minmax(0,1fr);
  }
}

@media (max-width: 800px){
  .home .main-contents > .home-news-section{
    width: auto;
    max-width: none;
    margin: 45px 15px 50px;
    padding: 32px 22px 26px;
    border-radius: 12px;
  }
  .home-news-section::before{
    left: 22px;
    right: 22px;
  }
  .home-news-section::after{
    top: 13px;
    right: 22px;
    font-size: .6rem;
  }
  .home-news-grid{
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .home-news-heading{
    padding: 6px 0 8px 14px;
  }
  .home-news-heading .news-lead{
    text-align: left;
  }
  .home-news-body .news-more{
    text-align: center;
  }
  .footer-instagram a{
    min-width: 0;
    width: auto;
  }
}



/* ===== 一般お問い合わせフォーム（旧 contact.css 統合） ===== */
/*
  旧 /templates/css/contact.css の内容を style.css に統合。
  今後 contact.css は読み込み不要です。
*/
/* TOMO不動産 一般お問い合わせ */
.contact-wrap{max-width:920px;margin:60px auto 90px;padding:0 24px}.contact-intro{text-align:center;margin-bottom:45px}.contact-intro h2{font-size:1.4rem;letter-spacing:.04em}.contact-intro p{font-size:.92rem}.realtor-contact-form{max-width:760px;margin:0 auto}.form-row{display:grid;grid-template-columns:150px 1fr;gap:22px;align-items:start;margin-bottom:18px}.form-label{font-weight:700;letter-spacing:.18em;color:#173b83;padding-top:12px}.required{display:inline-block;margin-left:8px;padding:2px 5px;background:#173b83;color:#fff;font-size:.68rem;letter-spacing:0;vertical-align:middle}.form-field input[type=text],.form-field input[type=email],.form-field input[type=tel],.form-field textarea{box-sizing:border-box;width:100%;border:1px solid #c9d5eb;background:#fff;padding:12px 14px;font:inherit;outline:none}.form-field input:focus,.form-field textarea:focus{border-color:#173b83;box-shadow:0 0 0 2px rgba(23,59,131,.08)}.radio-line{display:flex;gap:24px;flex-wrap:wrap;padding-top:9px}.radio-line label{white-space:nowrap}.contact-hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden!important}.privacy-check{text-align:center;margin:28px 0}.field-error{margin-top:6px;color:#b00020;font-size:.86rem}.contact-errors{max-width:760px;margin:0 auto 24px;padding:12px 16px;background:#fff1f2;border:1px solid #fecdd3;color:#991b1b}.contact-action{text-align:center;margin-top:36px}.contact-btn{display:inline-flex;align-items:center;justify-content:center;min-width:230px;border:0;border-radius:999px;background:#173b83;color:#fff!important;padding:14px 28px;text-decoration:none;font-weight:700;cursor:pointer}.contact-btn:hover{opacity:.9}.contact-btn-secondary{background:#6b7280}.confirm-table{max-width:760px;margin:0 auto;border-top:1px solid #dbe3f1}.confirm-row{display:grid;grid-template-columns:180px 1fr;border-bottom:1px solid #dbe3f1}.confirm-label{padding:16px;font-weight:700;background:#f7f9fc;color:#173b83}.confirm-value{padding:16px;white-space:normal;overflow-wrap:anywhere}.confirm-actions{display:flex;gap:18px;justify-content:center;margin-top:38px;flex-wrap:wrap}.inline-form{display:inline}.contact-complete{text-align:center}.receipt-no{margin:28px 0;padding:15px;background:#f7f9fc}.receipt-no strong{font-family:monospace}
@media(max-width:700px){.contact-wrap{margin:35px auto 60px;padding:0 16px}.contact-intro h2{font-size:1.15rem}.form-row{grid-template-columns:1fr;gap:7px}.form-label{padding-top:0}.radio-line{padding-top:2px;gap:14px}.confirm-row{grid-template-columns:1fr}.confirm-label{padding:10px 12px}.confirm-value{padding:12px}.contact-btn{width:100%;max-width:330px}.confirm-actions{flex-direction:column;align-items:center}.inline-form{width:100%;text-align:center}}

/* お問い合わせ導入部：テンプレート全体の header のflex指定に影響されないよう固定 */
.contact-intro{display:block!important;width:100%!important;box-sizing:border-box!important;text-align:center!important;margin:0 auto 45px!important;padding:0!important;}
.contact-intro h2{display:block!important;width:100%!important;max-width:none!important;margin:0 auto 18px!important;padding:0 0 18px!important;border-bottom:1px solid #d9d9d9!important;line-height:1.8!important;text-align:center!important;}
.contact-intro p{display:block!important;width:100%!important;max-width:none!important;margin:0 auto!important;padding:0!important;line-height:1.8!important;text-align:center!important;}
.contact-intro a,.privacy-policy-link{color:#173b83;text-decoration:underline;}

@media(max-width:700px){.contact-intro{margin-bottom:32px!important}.contact-intro h2{font-size:1.08rem!important;line-height:1.7!important;padding-bottom:14px!important}.contact-intro p{font-size:.88rem!important;line-height:1.7!important}}


/* ===== 不動産物件ドロップダウン：全ページ共通 =====
   contact.css 側の見やすい表示をサイト全体へ採用
--------------------------------------------------------- */
#menubar nav > ul > li > ul > li > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    /* contactページで見やすかった文字感を共通化 */
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1.55;
    text-align: left;
}

#menubar nav > ul > li > ul > li > a .category-count,
.category-count {
    margin-left: auto;
    padding-left: 14px;
    white-space: nowrap;
    font-size: 0.9em;
    font-weight: 500;
    letter-spacing: 0;
}

/* PCのドロップダウンは文字が窮屈にならないよう余白も共通化 */
.large-screen #menubar nav > ul > li > ul > li > a {
    padding: 0.7rem 1rem !important;
}

/* スマートフォンでもカテゴリ名と件数を左右に分ける */
.small-screen #menubar nav > ul > li > ul > li > a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1rem;
    font-weight: 500;
}



/* ===== 不動産物件カテゴリメニュー：全ページ統一・最終上書き ===== */
/*
  home.html / list.html / detail.html 等の {{CATEGORIES}} は
  <span class="cat-name">カテゴリ名</span>
  <span class="badge">[4件]</span>
  を出力します。
  contact.html は category-count を使用するため、両方を同一デザインに統一します。
*/

/* カテゴリ1行を「カテゴリ名 左 / 件数 右」で表示 */
#menubar nav > ul > li > ul > li > a {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 12px !important;
	text-align: left !important;
	font-size: 1rem !important;
	font-weight: 500 !important;
	letter-spacing: 0.02em !important;
	line-height: 1.55 !important;
}

/* カテゴリ名は上段英語サブタイトル用の span 設定を受けない */
#menubar nav > ul > li > ul > li > a > .cat-name {
	display: inline !important;
	flex: 1 1 auto !important;
	font-size: 1em !important;
	font-weight: 500 !important;
	letter-spacing: 0.02em !important;
	opacity: 1 !important;
	white-space: nowrap;
}

/* 件数：[4件] */
#menubar nav > ul > li > ul > li > a > .badge,
#menubar nav > ul > li > ul > li > a > .category-count {
	display: inline !important;
	flex: 0 0 auto !important;
	margin-left: auto !important;
	padding-left: 14px !important;
	font-size: 0.9em !important;
	font-weight: 500 !important;
	letter-spacing: 0 !important;
	opacity: 0.85 !important;
	white-space: nowrap !important;
}

/* PC */
.large-screen #menubar nav > ul > li > ul > li > a {
	padding: 0.7rem 1rem !important;
}

/* スマートフォン */
.small-screen #menubar nav > ul > li > ul > li > a {
	font-size: 1rem !important;
	font-weight: 500 !important;
}


/* ===== プライバシーポリシーページ（旧 privacy-policy.css 統合） ===== */
/*
  旧 /templates/css/privacy-policy.css の内容を style.css に統合。
  今後 privacy-policy.css は読み込み不要です。
  home.html などと同じ style.css を基準に、privacy-page 固有部分だけを追加管理します。
*/
.privacy-wrap{max-width:1000px;margin:42px auto 68px;padding:0 24px;box-sizing:border-box}.privacy-title{display:block!important;width:100%!important;margin:0 auto 26px!important;padding:0!important;text-align:center!important}.privacy-title h2{display:block!important;margin:0 0 14px!important;padding:0 0 12px!important;border-bottom:1px solid #d9d9d9;font-size:1.7rem;letter-spacing:.06em;line-height:1.6}.privacy-title p{display:block!important;margin:0 auto!important;max-width:820px!important;line-height:1.8}.privacy-panel{max-width:820px;margin:0 auto;padding:10px 46px 20px;background:#f2f5f9;box-sizing:border-box}.privacy-panel section{margin:0!important;padding:14px 0!important;border-bottom:1px solid #cfd8e6}.privacy-panel section:last-child{border-bottom:0}.privacy-panel h3{margin:0 0 7px!important;padding:0!important;color:#173b83;font-size:1.05rem;line-height:1.55}.privacy-panel p,.privacy-panel li{line-height:1.75}.privacy-panel p{margin:0!important}.privacy-panel ul{margin:7px 0 0!important;padding-left:1.4em}.privacy-panel li{margin:2px 0!important}@media(max-width:700px){.privacy-wrap{margin:28px auto 50px;padding:0 15px}.privacy-title{margin-bottom:20px!important}.privacy-title h2{font-size:1.35rem}.privacy-title p{text-align:left!important}.privacy-panel{padding:4px 20px 14px}.privacy-panel section{margin:0!important;padding:12px 0!important}.privacy-panel h3{font-size:1rem;margin-bottom:6px!important}}



/* ===== Instagram：ヘッダーアイコン・フッターQR ===== */

/* ヘッダー：ロゴと電話番号の間にInstagramを配置 */
.header-instagram {
  margin-left: auto;
  margin-right: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.header-instagram a {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border: 1px solid #d8dde3;
  background: #fff;
  color: #555;
  transition: transform .2s ease, box-shadow .2s ease, color .2s ease;
}
.header-instagram a:hover {
  color: #007bbb;
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(0,0,0,.08);
}
.header-instagram i {
  font-size: 1.45rem;
}

/* フッター：InstagramボタンとQRコードをセットで見せる */
.footer-instagram-area {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 18px 0 16px;
}
.footer-instagram-area .footer-instagram {
  margin: 0;
}
.footer-instagram-qr {
  display: block;
  flex: 0 0 auto;
  padding: 5px;
  border: 1px solid #e0e5e9;
  border-radius: 10px;
  background: #fff;
  line-height: 0;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}
.footer-instagram-qr:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(0,0,0,.08);
}
.footer-instagram-qr img {
  display: block;
  width: 110px;
  height: auto;
  max-width: none;
}

/* スクリーンリーダー用 */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media screen and (max-width:900px) {
  .header-instagram {
    margin: 8px 0 2px;
  }
  .header-instagram a {
    width: 40px;
    height: 40px;
  }
}

@media screen and (max-width:600px) {
  .footer-instagram-area {
    gap: 12px;
    align-items: center;
  }
  .footer-instagram-qr img {
    width: 90px;
  }
  .footer-instagram a {
    min-width: 170px;
    padding: 9px 13px;
  }
}
/* 購入・売却・会社概要ページ共通タイトルバー */
.property-page-hero {
  display: grid;
  grid-template-columns: 54% 46%;
  min-height: 270px;
  background: #f0f7fa;
  position: relative;
  overflow: hidden;
}
.property-page-hero__copy {
  position: relative;
  z-index: 1;
  align-self: center;
  padding: 40px clamp(28px, 5vw, 88px);
}
.property-page-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 16px;
  color: #007fb2;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
}
.property-page-hero__eyebrow::before { content: ''; width: 32px; height: 2px; background: #0084b8; }
.property-page-hero .property-page-hero__title {
  margin: 0 0 18px;
  padding: 0;
  color: #174a63;
  font-size: clamp(26px, 2.55vw, 40px);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .045em;
}
.property-page-hero__lead { margin: 0; color: #526d7a; font-size: 15px; line-height: 1.9; }
.property-mobile-break { display: none; }
.property-page-hero__visual { position: relative; min-height: 270px; }
.property-page-hero__visual img { position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: center 56%; }
.property-page-hero__visual::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, #f0f7fa 0%, rgba(240,247,250,.2) 23%, transparent 48%);
}
.property-page-hero__caption {
  position: absolute; right: 24px; bottom: 20px; z-index: 1;
  padding: 4px 12px; background: rgba(255,255,255,.92); color: #174a63;
  font-size: 11px; letter-spacing: .1em;
}
:is(.page-buy, .page-sell, .page-company, .contact-page) #contents { padding-top: 48px; }
/* PCは写真を75%幅へ拡張し、文字領域と柔らかく重ねる。 */
@media (min-width: 901px) {
  .property-page-hero { grid-template-columns: 25% 29% 46%; }
  .property-page-hero__copy { grid-column: 1 / 3; grid-row: 1; }
  .property-page-hero__visual { grid-column: 2 / 4; grid-row: 1; }
  .property-page-hero__visual::after {
    background: linear-gradient(90deg, #f0f7fa 0%, rgba(240,247,250,.94) 22%, rgba(240,247,250,.4) 43%, transparent 62%);
  }
}
@media (max-width: 900px) {
  .property-page-hero { grid-template-columns: 58% 42%; }
  .property-page-hero__copy { padding: 32px 24px; }
  .property-page-hero .property-page-hero__title { font-size: 28px; letter-spacing: .01em; }
}
@media (max-width: 600px) {
  .property-page-hero { grid-template-columns: 1fr; }
  .property-page-hero__copy { padding: 30px 22px 24px; }
  .property-page-hero .property-page-hero__title { font-size: clamp(23px, 6.2vw, 28px); margin-bottom: 12px; }
  .property-page-hero__eyebrow { font-size: 10px; margin-bottom: 14px; }
  .property-page-hero__lead { font-size: 13px; }
  .property-mobile-break { display: inline; }
  .property-page-hero__visual { min-height: 150px; }
  .property-page-hero__visual img { object-position: center 57%; }
  .property-page-hero__visual::after { background: linear-gradient(180deg, #f0f7fa, transparent 40%); }
  .property-page-hero__caption { right: 16px; bottom: 12px; font-size: 10px; }
  :is(.page-buy, .page-sell, .page-company, .contact-page) #contents { padding-top: 28px; }
}

/* 添付写真の上下の白余白を表示枠の外へ出す。元画像は保持。 */
.page-sell .property-page-hero__visual img { height: 200%; top: -50%; object-position: center; }

.page-sell .property-page-hero__visual { overflow: hidden; }

/* 会社写真は看板のロゴが見える高さで配置 */
.page-company .property-page-hero__visual img { object-position: center 26%; }

/* 会社概要：代表挨拶・会社情報・事務所写真 */
.page-company .company-greeting { align-items: flex-start; }
.page-company .company-greeting .image { padding: 0; margin: 0; }
.page-company .company-greeting .image img { display: block; width: 100%; height: auto; }
.page-company .company-greeting .text { min-width: 0; }
.page-company .company-profile-table { width: 100%; max-width: 960px; margin: 0 auto; table-layout: fixed; }
.page-company .company-profile-table th { width: 22%; }
.page-company .company-profile-table th,
.page-company .company-profile-table td { overflow-wrap: anywhere; }
.page-company .company-office-gallery img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (min-width: 901px) {
  /* 代表挨拶の見出し分だけ下げ、写真を挨拶文の冒頭に合わせる。 */
  .page-company .company-greeting .image { width: 43%; flex: 0 0 43%; margin-top: 6rem; }
  .page-company .company-greeting { gap: clamp(28px, 4vw, 64px); }
}
@media (max-width: 900px) {
  .page-company .company-greeting { display: block; }
  .page-company .company-greeting .image { width: 100%; margin-bottom: 28px; }
  .page-company .company-profile-table th { width: 28%; }
}

/* 購入・売却ページ末尾：お問い合わせ枠を中央に配置 */
:is(.page-buy, .page-sell) .cta-grid.property-contact-cta {
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  max-width: 1000px;
  margin-inline: auto;
}
:is(.page-buy, .page-sell) .property-contact-cta .cta-box {
  box-sizing: border-box;
  width: 100%;
}
:is(.page-buy, .page-sell) .property-contact-cta .cta-box:focus-visible {
  outline: 3px solid #007fb2;
  outline-offset: 5px;
}

/* お問い合わせ：家と疑問符が収まるよう写真の構図を保持 */
.contact-page .property-page-hero__visual { background: #f0f3f1; }
.contact-page .property-page-hero__visual img { object-fit: cover; object-position: 75% center; }
@media (min-width: 901px) {
  .contact-page .property-page-hero__visual img { width: 100%; right: 0; }
}