@charset "utf-8";


/*全端末（PC・タブレット・スマホ）共通設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/

/*全体の設定
---------------------------------------------------------------------------*/

h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd,form,figure,form {margin: 0px;padding: 0px;}
ul {list-style-type: none;}
ol {padding-left: 40px;padding-bottom: 15px;}
img {border: none;max-width: 100%;height: auto;vertical-align: middle;}
table {border-collapse:collapse;font-size: 100%;border-spacing: 0;}
video {max-width: 100%;}
iframe {width: 100%;}

/*リンク（全般）設定
---------------------------------------------------------------------------*/
a {
	color: #666;	/*リンクテキストの色*/
	transition: 0.2s;	/*マウスオン時の移り変わるまでの時間設定。0.2秒。*/
}
a:hover {
	color: #4896a8;			/*マウスオン時の文字色*/
	text-decoration: none;	/*マウスオン時に下線を消す設定。残したいならこの１行削除。*/
}

/*inner共通（header内と、contents内で使っています）
---------------------------------------------------------------------------*/
.inner {
	max-width: 1300px;	/*最大幅*/
	margin: 0 auto;
	/* padding-top: 50px; */
	text-align: center;
}

/*ヘッダー（サイト名が入ったブロック）
---------------------------------------------------------------------------*/
/*ヘッダーブロック*/
header {
	/*background-color: #353d56;	背景画像の読み込み*/
}
/*ヘッダーのinnerへの追加設定*/
header .inner {
	position: relative;
	height: 100px;	/*高さ*/
	display: flex;
	align-items: center;
	justify-content: center;
}


/*コンテンツ（mapcontainerとsubを囲むブロック）
---------------------------------------------------------------------------*/
#contents {
	clear: both;
	overflow: hidden;
		/*背景色*/
	padding: 20px 0px 0;		/*ボックス内の余白*/
	margin: 0 3% 0;	/*ボックスの外への余白。上、左右、下。*/
}



/*contents_imageコンテンツの設定*/
#contents_image {
    position: relative; /* このdivを相対位置指定のコンテナにする */
    display: block;
    max-width: 100%;
    /* margin-top: 40px; */
}

.wrap-flex{
	display:flex;
	flex-wrap:wrap;
	justify-content: space-between;
	gap:20px;
	background: #FFF;
	padding:40px;
	margin-top:40px;
}


#contents_image,#facility_deatail_wrapper{
	width:56%
}

@media (max-width: 800px){
	.wrap-flex{flex-direction: column;
	    padding: 20px;}
	#contents_image,#facility_deatail_wrapper{
	width:100%;
}
}

#facility_deatail li:nth-child(even) {
 background:#E9EBF2;
}

#mainImage{
    width: 100%;
    height: auto;
    display: block;
}

#smallImage1, #smallImage2 {
    position: absolute;
    /* width: 50px; ここで小さな画像の幅を設定 */
    /* height: auto; 高さは自動で調整して縦横比を保持 */
    max-width: 10%; /* 最大幅を設定しても良い */
	/* min-width: 10px; 最大幅を設定しても良い */
}

#contents_image span {
    color: #353d56;
    font-size: 10px;
    text-align: right;
    display: block;
}

.areainfo {
	margin-top:40px;
	color:#333;
	font-size:20px;
  display: flex;
  align-items: center; /* 垂直中心 */
  justify-content: center; /* 水平中心 */
}
.areainfo:before, .areainfo:after {
  border-top: 2px solid #333;
  content: "";
  width: 8em; /* 線の長さ */
}
.areainfo:before {
  margin-right: 1em; /* 文字の右隣 */
}
.areainfo:after {
  margin-left: 1em; /* 文字の左隣 */
}

#contents h1{

	color: #000000;
}


@media (max-width: 769px){
.areainfo:before, .areainfo:after {
    width: 2em;
}
}
/*メインコンテンツ
---------------------------------------------------------------------------*/


#main{
	padding-bottom: 30px;
	background-color: #353d56;
	height:470px;
}

#mapcontainer, #sub {
    flex: 1;  /* 子要素のフレックス比率を1に設定 */
    padding-bottom: 30px; /* 下部の余白 */
}

#list_mapcontainer {
	margin:40px 0;
	width: 100%;		/*ボックスの幅*/
	height: 400px;
	background-color: antiquewhite;
}

.facilities_table td {
    vertical-align: top; /* セル内の内容を上端に揃える */
}

/*１カラム時のmapcontainerコンテンツ*/
.c1 #mapcontainer {
	float: none;
	width: auto;
}


/*サブコンテンツ
---------------------------------------------------------------------------*/
#sub  {
	width: 25%;		/*ボックスの幅*/
	float: right;	/*右に回り込み*/
	height: 100%;
}

/*h2タグ*/
#sub h2 {
	background: #4a66ad;	/*背景色*/
	color: #fff;		/*文字色*/
	text-align: left;	/*文字をセンタリング*/
	padding: 4px 10px;		/*上下、左右へのh2内の余白*/
	font-size: 18px;
}

#search_area {
	background: #353d56;
	color: #fff;
	text-align: left;
	padding: 4px 10px;		/*上下、左右へのh2内の余白*/
}

#search_area .search_menu {
	padding:10px 0;
	border-bottom: solid 1px #ffffff;
}


#search_area .search_menu h3 {
	font-size: 14px;
	font-weight: 600;
}

#search_area .search_menu p {
	font-size: 14px;
	font-weight: 400;
	line-height:18px;
}

#search_area .search_button{
	text-align: center;
	margin: 30px 0 10px;
}

/*テーブル１
---------------------------------------------------------------------------*/

/*テーブル設定*/
.facilities_table {
	width: 100%;
	margin: 50px auto 0;
	border-collapse: collapse; /* セルの境界線を重ねる */
	text-align: left;
	clear: both; /* フロートされた要素の影響を回避 */
}

.facilities_table tr td {
    width: 25%;
	padding: 10px 0;
}

/* 最初のセルと最後のセルのパディングを調整 */
.facilities_table tr td:first-child {
    padding-right: 10px; /* 最初のセルの右の余白 */
}

.facilities_table tr td:last-child {
    padding-left: 10px; /* 最後のセルの左の余白 */
}

/* 中間のセルには左右の余白を追加 */
.facilities_table tr td:not(:first-child):not(:last-child) {
    padding-left: 10px;
    padding-right: 10px;
}

.facilities_table tr td h2 {
    color: #353d56;
	font-size:16px;
	line-height: 18px;
	margin-top: 5px;
	margin-bottom:5px;
}

.facilities_table tr td span {
    color: #353d56;
	font-size:14px;
	line-height: 1.2;
	display: block; /* ブロック要素として扱う */
}

/*テーブル１
---------------------------------------------------------------------------*/

/*テーブル設定*/
.facilities_table_list {
	width: 100%;
	margin: 50px auto 0;
	border-collapse: collapse; /* セルの境界線を重ねる */
	text-align: left;
	clear: both; /* フロートされた要素の影響を回避 */
}

.facilities_table_list tr th {
	box-sizing: border-box; /* パディングと境界線を幅に含める */
    width: 33%;
	padding: 10px;
	background-color: #808fa8;
    color: #ffffff;
	text-align: left;
	font-size:16px;
	line-height: 18px;
	border-left:#d8dce7 solid 30px;
	border-right:#d8dce7 solid 30px;
}

.facilities_table_list tr td {
	box-sizing: border-box; /* パディングと境界線を幅に含める */
    width: 33%;
	padding: 10px;
	text-align: left;
	border-left:#d8dce7 solid 30px;
	border-right:#d8dce7 solid 30px;
	vertical-align: top;
}

/* 最初のセルと最後のセルのパディングを調整 */
.facilities_table_list tr th:first-child {
    border-left:none; 最初のセルの右の余白 */
}

.facilities_table_list tr td:first-child {
    border-left:none; 最初のセルの右の余白 */
}

.facilities_table_list tr th:last-child {
    border-right:none; /* 最後のセルの左の余白 */
}

.facilities_table_list tr td:last-child {
    border-right:none; /* 最後のセルの左の余白 */
}
/* 中間のセルには左右の余白を追加 */
.facilities_table_list tr td:not(:first-child):not(:last-child) {
    border-left:none;
}


.facilities_table_list tr td ul {
    color: #353d56;
	font-size:14px;
	line-height: 18px;
	margin: 5px 5px 20px 5px;
}


.facilities_table_list li {
    position: relative; /* 疑似要素の配置の基点 */
    padding-left: 20px; /* テキストとマーカーの間にスペースを設ける */
	padding-bottom:5px;
}

.facilities_table_list li::before {
    content: '●'; /* 黒丸を表示 */
    position: absolute; /* 絶対位置 */
    left: 0; /* リストアイテムの左端に配置 */
    color: #353d56; /* 文字色を黒に指定 */
    font-size: 20px; /* マーカーのサイズを設定 */
    top: 0; /* 親要素の中央に配置 */
    line-height: 1; /* テキストの行高と疑似要素の行高を揃える */
	padding-left: 0;
}


/*物件リスト
---------------------------------------------------------------------------*/
/*メニュー全体の設定*/

#facility_deatail_wrapper {
    display: flex; /* リストと画像を横並びにする */
    align-items: flex-start; /* 上端に揃える */
    /* margin-top: 20px; */
}

#facility_deatail {
    list-style: none;
    padding: 0;
    width: 100%; /* リストの幅の75%を占める */
    /*margin-right: 20px;*/
}

#facility_deatail li {
    display: flex;
    padding: 20px 10px 20px;
    /* border-bottom: solid 1px #808fa8; */
    margin: 0px;
    /* width: 100%; */
}

#facility_deatail li:first-child p{
	font-size:20px;
	font-weight:bold;
}


#facility_deatail h2 {
	margin-left: 10px;
    color: #353d56;
	font-size:16px;
	line-height: 1.7;
	font-weight: 600;
	text-align: left;
	width: 30%; /* h2の幅をリスト項目の何%かに設定 */
}

#facility_deatail p {
	margin-left: 20px;
    color: #353d56;
	font-size:16px;
	line-height: 1.7;
	font-weight: 400;
	text-align: left;
	width: 80%; /* pの幅をリスト項目の残り90%に設定 */
	word-break: break-all;
}

#penguin_tukkomi {
    width: 20%; /* 画像の幅の25%を占める */
    text-align: center; /* 画像を中央に配置する */
}

#penguin_tukkomi img {
    max-width: 100%; /* 画像の幅をリスト領域に合わせる */
    height: auto; /* 高さを自動調整して画像の縦横比を保持する */
    display: block; /* 画像をブロック要素として扱う */
    margin: 0 auto; /* 左右に余白を設定して中央に配置する */
}

#main_button{
	margin: 40px 0 40px;
}

#main_button img{
	padding: 0 20px 0;
}

/*サブコンテンツ内のlistボックス
---------------------------------------------------------------------------*/
/*ボックス１個あたりの設定*/
#sub .list {
	position: relative;overflow: hidden;
	font-size: 11px;	/*文字サイズを少し小さくする（デフォルトは最上段のbody内にあります）*/
	line-height: 1.3;	/*行間を少し狭くする（デフォルトは最上段のbody内にあります）*/
}
#sub .list a {
	display: block;text-decoration: none;overflow: hidden;
	padding: 8px 0;	/*上下、左右へのメニュー内の余白*/
	border-bottom: 1px solid #ccc;	/*下線の幅、線種、色	*/
}
/*写真*/
#sub .list figure img {
	width: 25%;		/*写真の幅*/
	float: left;	/*左に回り込み*/
	margin-right: 5px;	/*写真の右に空けるスペース*/
}


/*coming-soon
---------------------------------------------------------------------------*/

#contents_image {
	position: relative; /* この要素内の絶対位置指定要素の基準点 */
	overflow: hidden; /* はみ出た内容を隠す */
}

#penguin_fly {
	position: absolute; /* 絶対位置指定 */
	width: 80px; /* 画像の幅 */
	height: auto; /* 高さは自動で調整 */
}

#penguin_walk {
	position: absolute; /* 絶対位置指定 */
	height: auto; /* 高さは自動で調整 */
}

#contents_notice{
	font-size: 12px;
	text-align: right;
}

#space_colmun,#space_colmun2{
	padding: 30px;
	background-color: #ffffff;
	color: #32373c;
	margin: 30px 0;
}

#space_colmun h2,#space_colmun2 h2{
	font-size: 16px;
	font-weigt: 600;
	margin-bottom: 20px;
}

#space_colmun h2{
	text-align: left;
}

#space_colmun p{
	font-size: 14px; 
	font-weigt: 400;
	text-align:left;
}

.facilities_list {
	display: flex;
	flex-wrap: wrap;
	list-style-type: none;
	padding: 0;
	margin: 0;
	gap: 10px;
}

.category_item {
	flex: 0 0 calc(33% - 6px); /* 余白を考慮した幅の設定 */
	box-sizing: border-box;
	text-align: left;
	/* padding: 5px; */ /* 内部の余白 */
	/* gap: 10px; */
}

.category_title {
	background-color: #808fa8;
	color: #ffffff;
	padding:3px 10px;
}



/*フッター設定
---------------------------------------------------------------------------*/


/*inputボタン
---------------------------------------------------------------------------*/
#contents input[type="submit"].btn,
#contents input[type="button"].btn,
#contents input[type="reset"].btn {
	padding: 5px 20px;		/*上下、左右へのボックス内の余白*/
	border: 1px solid #ccc;	/*枠線の幅、線種、色*/
	font-size: 20px;		/*文字サイズ*/
	border-radius: 3px;		/*角丸のサイズ*/
	background: #eee;		/*背景色*/
}
/*マウスオン時の設定*/
#contents input[type="submit"].btn:hover,
#contents input[type="button"].btn:hover,
#contents input[type="reset"].btn:hover {
	border: 1px solid #999;	/*枠線の幅、線種、色*/
	background: #fff;		/*背景色*/
}

/*ページの上部に戻る「↑」ボタン
---------------------------------------------------------------------------*/
@keyframes scroll {
0% {opacity: 0;}
100% {opacity: 1;}
}
/*通常時のボタンは非表示*/
body .nav-fix-pos-pagetop a {
	display: none;
}
/*fixmenu_pagetop.jsで設定している設定値になったら出現するボタンスタイル*/
body.is-fixed-pagetop .nav-fix-pos-pagetop a {
	display: block;
	text-decoration: none;
	text-align: center;
	width: 50px;	/*ボタンの幅*/
	line-height: 50px;	/*ボタンの高さ*/
	z-index: 900;
	position: fixed;
	bottom: 50px;	/*ウィンドウの下から50pxの場所に配置*/
	right: 5%;		/*ウィンドウの右から5%の場所に配置*/
	background: #000;	/*背景色（古いブラウザ用）*/
	background: rgba(0,0,0,0.6);	/*背景色。0,0,0は黒の事で0.6は60%色がついた状態。*/
	color: #fff;	/*文字色*/
	border-radius: 50%;	/*角丸指定。50%にすると円形になる。四角形がいいならこの１行削除。*/
	animation-name: scroll;	/*上のアニメーションで指定しているkeyframesの名前（scroll）*/
	animation-duration: 1S;	/*アニメーションの実行時間*/
	animation-fill-mode: forwards;	/*アニメーションの完了後、最後のキーフレームを維持する*/
}
/*マウスオン時の背景色*/
body.is-fixed-pagetop .nav-fix-pos-pagetop a:hover {
	background: #999;
}




/*その他
---------------------------------------------------------------------------*/
.look {background: #ccc;padding: 5px 10px;border-radius: 4px;}
.mb15,.mb1em {margin-bottom: 15px !important;}
.mb20 {margin-bottom: 20px !important;}
.clear {clear: both;}
ul.disc {padding: 0em 25px 15px;list-style: disc;}
.color1, .color1 a {color: #f95f9c !important;}
.pr {font-size: 10px;}
.wl {width: 96%;}
.ws {width: 50%;}
.c {text-align: center !important;}
.r {text-align: right !important;}
.l {text-align: left !important;}
.fl {float: left;}
img.fl {float: left;width:30%;margin-right: 20px;margin-bottom: 20px;}
.fr {float: right;}
img.fr {float: right;width:30%;margin-left: 20px;margin-bottom: 20px;}
.mini1 {font-size: 11px;display: inline-block;line-height: 1.5;}
.sh {display: none;}



/*画面幅800px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:769px){
	
	.inner #contents {
	padding: 0 0px;		/*ボックス内の余白*/
}

    #main {
        flex-direction: column; /* Flexboxの方向をカラムに変更 */
    }
    #mapcontainer, #sub {
        width: 100%; /* 幅を100%に設定し、各要素がフル幅になるように調整 */
    }

/*ヘッダー（サイト名が入ったブロック）
---------------------------------------------------------------------------*/
	/*ヘッダーのinnerへの追加設定*/
	/*header .inner {
		height: 60px;	/*高さ*/
	}*/
	/*ヘッダーのinnerへの追加設定（トップページへの追加設定）*/
	.top header .inner {
		height: 250px;	/*高さの再指定*/
	}
	/*ロゴ画像の設定*/
	header #logo {
		/*width: 300px;	画像の幅*/
	}

	
	/*mapcontainer,sub,side,contents-in
	---------------------------------------------------------------------------*/
	#mapcontainer, #sub, .inner {
		float: none;
		width: auto;
	}

	/*sub,sideコンテンツ内のおすすめ一覧ブロック
	---------------------------------------------------------------------------*/
/*ボックス内の写真設定*/
	#sub .list figure img, #side .list figure img {
		width: 20%;		/*写真の幅*/
	}

	/*その他
	---------------------------------------------------------------------------*/
	body.s-n #sub,body.s-n #side,body.s-n #footermenu {
		display: none;
	}
	.sh {
		display:block;
	}
	.pc {
		display:none;
	}
}




/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){

/*全体の設定
---------------------------------------------------------------------------*/
	body {
		font-size: 12px;	/*文字サイズ*/
		line-height: 1.5;	/*行間*/
	}

	/*ヘッダー（サイト名が入ったブロック）
---------------------------------------------------------------------------*/
/*ヘッダーのinnerへの追加設定（トップページへの追加設定）*/
	.top header .inner {
		height: 200px;	/*高さの再指定*/
	}


/*コンテンツ（mapcontainerとsubを囲むブロック）
---------------------------------------------------------------------------*/
	#contents {
		padding: 15px;		/*ボックス内の余白*/
		margin: 20px 3% 0;	/*ボックスの外への余白。上、左右、下。*/
	}


/*mapcontainerコンテンツ（中央のブロック）
---------------------------------------------------------------------------*/
/*mapcontainerコンテンツのh2,h3タグ設定*/
	#mapcontainer h2, #mapcontainer h3 {
		font-size: 14px;	/*文字サイズ*/
		padding-left: 10px;
	}
/*mapcontainerコンテンツの段落タグ設定*/
	#mapcontainer p {
		padding: 0 10px 20px;	/*上、左右、下への余白*/
}

/*メインコンテンツ内の「list」ボックス
---------------------------------------------------------------------------*/
	#mapcontainer .list a {
		padding: 10px;	/*ボックス内の余白*/
	}

	/*h4タグ*/
	#mapcontainer .list h4 {
		font-size: 12px;	/*文字サイズ*/
	}

/*メインコンテンツ内の「list2」ボックス
---------------------------------------------------------------------------*/
/*ボックス１個あたりの設定*/
	#mapcontainer .list2 {
		width: 45%;			/*幅*/
		margin-left: 3%;	/*ボックス同士に空ける左右間のスペース*/
	}


/*その他
---------------------------------------------------------------------------*/
	.ws,.wl {
		width: 94%;
	}
	
	img.fr,img.fl {
		float: none;
		margin: 0;
		width: 100%;
	}
	.category_item {
	flex: 0 0 calc(50% - 5px);
	}

}



/*画面幅400px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:400px){

/*ヘッダー（サイト名が入ったブロック）
---------------------------------------------------------------------------*/
/*ヘッダーのinnerへの追加設定*/
	header .inner {
		height: 60px;
	}
	/*ロゴ画像の設定*/
	header #logo {
		/*width: 200px;	画像の幅*/
	}
}




/************************************
** 物件表示の注意書き
************************************/
.note {
    font-size: 0.9em; /* 通常のフォントサイズより少し小さく */
    color: #000000;       /* 赤字 */
    text-align: left; /* 左寄せ */
    margin: 10px 0 40px;   /* 上下に余白を追加（必要に応じて） */
}
@media (max-width: 769px){
.note {
    font-size: 11px;
	}
}