@charset "utf-8";



/*リセットCSS（ress.css）の読み込み
---------------------------------------------------------------------------*/
@import url("https://unpkg.com/ress/dist/ress.min.css");

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

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

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

/*section全般の設定*/
section + section {
	padding-top: 30px;	/*sectionの間に空けるスペース*/
}

/*フォームタグ全般の設定*/
input, textarea, select {
	border: 1px solid #999;	/*枠線の幅、線種、色*/
	padding: 0 10px;
}

/*ress.cssでselectで矢印が消えてしまうのを戻す*/
select {
	-moz-appearance: menulist;
	-webkit-appearance: menulist;
	appearance: menulist;
}
select::-ms-expand {
    display: block;	/*IE用*/
}

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

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

/*ulタグ、olタグ*/
ul,ol {
	margin: 0 5px 30px 25px;	/*上、右、下、左へ空けるスペース*/
}

/*opa1（透明から着色状態に）
---------------------------------------------------------------------------*/
@keyframes opa1 {
	0% {opacity: 0;}
	100% {opacity: 1;}
}

/*リンクテキスト全般の設定
---------------------------------------------------------------------------*/
a {
	color: #333;	/*文字色*/
}

a:hover {
	color: #957e63;	/*マウスオン時の文字色*/
}

/*listボックスを囲むボックス*/
.list-container {
	display: flex;		/*flexボックスを使う指定*/
	flex-wrap: wrap;	/*折り返す指定*/
	/*justify-content: space-between;	（削除またはコメントアウトする。2022/09/22更新）*/
	padding: 0 5px;		/*上下、左右へのボックス内の余白*/
}



/*偶数のボックスの右側マージンをなくす（2022/09/22更新）*/
.list:nth-of-type(even) {
	margin-right: 0;
}

/*マウスオン時にボックスの影を少し濃くする
.list:hover {
	box-shadow: 0px 0px 15px rgba(0,0,0,0.5);
}*/

/*NEW,UPアイコン
---------------------------------------------------------------------------*/
/*NEW,UPアイコン 共通*/
.newicon, .upicon {
	display: inline-block;
	text-align: center;
	padding: 0 5px;
	border-radius: 3px;
	transform: scale(0.7);
}

/*newiconへの追加指定。*/
.newicon {
	background: #f00;		/*背景色*/
	color: #fff;			/*文字色*/
}

/*upiconへの追加指定。*/
.upicon {
	background: #257dce;	/*背景色*/
	color: #fff;			/*文字色*/
}

/*テーブル
---------------------------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※caption）*/
.ta1 caption {
	border-top: 1px solid #ccc;	/*上の枠線の幅、線種、色*/
	font-weight: bold;			/*太字に*/
	padding: 10px 5px;			/*上下、左右へのボックス内の余白。基本的に数行下の「.ta1 th, .ta1 td」のpaddingと揃えておけばOKです。*/
	background: #fafafa;		/*背景色*/
}

/*ta1テーブルブロック設定*/
.ta1 {
	border-top: 1px solid #ccc;	/*テーブルの一番上の線。幅、線種、色*/
	table-layout: fixed;
	width: calc(100% - 10px);	/*テーブルの両サイドに合計10px（左右各5pxずつ）の余白を作った残りを幅にします*/
	margin: 0 auto 30px;		/*最後の「30px」がテーブルの下に空けるスペースです*/
}

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

/*th（左側）、td（右側）の共通設定*/
.ta1 th, .ta1 td {
	padding: 10px 5px;		/*上下、左右へのボックス内の余白*。基本的に数行上の「.ta1 caption」のpaddingと揃えておけばOKです。*/
	word-break: break-all;	/*英語などのテキストを改行で自動的に折り返す設定。これがないと、テーブルを突き抜けて表示される場合があります。*/
}

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

/*よく頂く質問
---------------------------------------------------------------------------*/
.faq {
	padding: 0 5px;	/*上下、左右へのボックス内の余白*/
}
/*質問*/
.faq dt {
	border-radius: 10px;	/*枠を角丸にする指定*/
	margin-bottom: 20px;	/*下に空けるスペース*/
	background: linear-gradient(#fff, #f7f7f7);	/*背景グラデーション*/
	box-shadow: 0px 0px 5px rgba(0,0,0,0.2);	/*ボックスの影。右へ、下へ、ぼかし幅、0,0,0は黒の事で0.2は色が20%出た状態の事。*/
	text-indent: -54px;				/*テキストのインデント。Qアイコンだけ左に飛び出るようにする指定。下のpaddingの一番最後の数字と合わせて下さい。※マイナスは取らないで。*/
	padding: 20px 20px 20px 54px;	/*上、右、下、左への余白。最後の数字と上のtext-indentの数字と揃えておく。text-indentは必ずマイナスをつけた状態で。*/
}
/*アイコン（Font Awesome）*/
.faq dt::before {
	font-family: "Font Awesome 5 Free";	/*Font Awesomeを使う指定*/
	content: "\f059";	/*使いたいアイコン名をここで指定。Font Awesomeに記載されています。詳しくは当テンプレートのマニュアルを読んで下さい。*/
	color: #957e63;		/*アイコンの色*/
	padding: 0 20px;	/*上下、左右への余白*/
}

/*回答*/
.faq dd {
	padding: 0 40px 30px;	/*上、左右、下への余白*/
}

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



/*btnの設定
---------------------------------------------------------------------------*/
/*ボタンを囲むブロック*/
.btn {
	text-align: center;	/*内容をセンタリング*/
	font-size: 1.2rem;	/*文字サイズ。remの単位についてはテンプレート内の解説をお読み下さい。*/
}


/*右側の矢印アイコン（アイコンにはFont Awesomeを使用）*/
.btn i {
	padding-left: 10px;		/*アイコンとテキストの間に空ける余白*/
	transform: scale(1.5);	/*アイコン画像を1.5倍にする*/
}

/*ボタンのマウスオン時*/
.btn a:hover,
.btn input:hover {
	opacity: 0.9;	/*透明度。0.9は色が90%ついた状態のこと。*/
}

/*詳細ページの画像切り替え（imgchg_pack.js）※一般のhtmlテンプレートで利用。
---------------------------------------------------------------------------*/
/*大きな画像のボックスと説明文を入れるボックス*/
#item-image {
	position: relative;
	margin: 0 auto 20px;
	text-align: center;
	width: 100%;
}

/*大きな画像の１行目*/
#item-image #item_image1 {
	z-index: 2;
	position: relative;
	overflow: hidden;
}

/*大きな画像の２行目*/
#item-image #item_image2 {
	z-index: 1;
	position: absolute;
	left: 0px;
	top: 0px;
	overflow: hidden;
}

/*大きな画像のボックスの中の画像*/
#item-image img {
	width: 100%;
}

/*サムネイル画像*/
.thumbnail {
	width: 80px;	/*画像の幅*/
	border: 1px solid #dcdcdc;	/*枠線の幅、線種、色*/
	margin-bottom: 5px;
}

.thumbnail:hover {
	border: 1px solid #999;	/*マウスオン時の枠線の幅、線種、色*/
}

/*こだわりアイコンブロックの設定（※CMS用）
---------------------------------------------------------------------------*/
.specialbox {
	display: inline-block;
}
.specialbox img {
	padding: 2px 0;;
}

/*パノラマ画像のサイズ設定（※CMS用）
---------------------------------------------------------------------------*/
.panorama-img {
	width: 100% !important;
	height: 200px !important;
}

/*テーマカラーの背景色の「注目物件」ボックス
---------------------------------------------------------------------------*/
/*ボックスの設定*/
.bg1 {
	background: #957e63;	/*ボックスの背景色*/
	padding: 12px;			/*ボックス内の余白*/
	border-radius: 5px;		/*ほんの少し角を丸くする指定*/
	color: #fff;			/*文字色*/
}

/*ボックス内のリンクテキスト*/
.bg1 > a {
	color: #fff;			/*文字色*/
}

/*ボックス内のh2タグ*/
.bg1 h2 {
	text-align: center;		/*テキストをセンタリング*/
	margin: 0 !important;
}

/*ボックス内のh2タグのbefor（下線のデフォルトの状態の設定）*/
.bg1 h2::before {
	background: transparent;		/*線となる背景の色。transparentは透明の事。*/
}

/*ボックス内のh2タグのafter（アニメーションの初期設定）*/
.bg1 h2::after {
	background: #fff;				/*線となる背景の色*/
	transform-origin: center top;	/*線の出現起点が中央からになるように。*/
}


/*スライドショー（slickを使用）
---------------------------------------------------------------------------*/
.mainimg {
	position: relative;
	padding: 0 !important;
}

/*マウスオン時の設定。
マウスオンでスライドがストップしてしまうので、それがわかりやすいようにopacityを設定しました。
もしマウスオンでストップさせたくない場合は、slick.cssの「//pauseOnHover: false,」の行の冒頭の「//」を外して適用して下さい。*/
.mainimg:hover {
	opacity: 0.8;	/*透明度。色が80%出た状態。*/
}

/*丸いページナビボタン全体を囲むブロック*/
.slick-dots {
	text-align: center;
	width: 100%;
	margin:0;
	line-height: 1;
	position: absolute;
	bottom: 10px;	/*下からの配置場所指定*/
}

/*丸いページナビボタン１個あたりの設定*/
.slick-dots li {
	display: inline-block;
	margin: 0 10px;
	cursor: pointer;
}

/*buttonタグ*/
.slick-dots li button {
	display: block;
	text-indent: -9999px;	/*デフォルトで文字が出るので画面の外に追い出す指定*/
	width: 12px;			/*ボタンの幅*/
	height: 12px;			/*ボタンの高さ*/
	border-radius: 50%;		/*丸くする指定*/
	cursor: pointer;		/*クリックで画像へジャンプするので、わかりやすいようhover時にpointerになるように。*/
	background: #fff;		/*背景色。白。*/
}

/*buttonのアクティブ時（現在表示されている画像を示すボタン）*/
.slick-dots li.slick-active button {
	background: #957e63;	/*色*/
}

/*日付の横のマーク（共通設定）*/
#new dt span {
	display: none;	/*小さな端末では非表示にしておく。*/
}

/*bg1設定。サンプルテンプレートでは「賃貸物件」と書いてあるマーク*/
#new dt span.icon-bg1 {
	background: #386091;	/*背景色*/
}

/*bg2設定。サンプルテンプレートでは「売買物件」と書いてあるマーク*/
#new dt span.icon-bg2 {
	background: #91384d;	/*背景色*/
}

/*記事(dd)設定*/

/*その他
---------------------------------------------------------------------------*/
.clearfix::after {content: "";display: block;clear: both;}
.color-theme, .color-theme a {color: #957e63 !important;}
.color-check, .color-check a {color: #f00 !important;}
.c {text-align: center !important;}
.ws {width: 95%;display: block;}
.wl {width: 95%;display: block;}
.large {font-size: 2rem;}
.mb30 {margin-bottom: 30px !important;}
.look {display: inline-block;border: 1px solid #ccc;padding: 5px 20px;background: rgba(0,0,0,0.03);border-radius: 5px;margin: 5px 0;}
.ofx {overflow-x: hidden;}



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

/*section全般の設定*/
section + section {
	padding-top: 50px;	/*sectionの間に空けるスペース*/
}

/*テーブル
---------------------------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※caption）*/
.ta1 caption {
	padding: 20px 15px;		/*上下、左右へのボックス内の余白*/
}

/*th（左側）、td（右側）の共通設定*/
.ta1 th, .ta1 td {
	padding: 20px 15px;		/*上下、左右へのボックス内の余白*/
}

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

/*よく頂く質問
---------------------------------------------------------------------------*/
/*質問*/
.faq dt {
	text-indent: -58px;				/*テキストのインデントの調整*/
	padding: 20px 20px 20px 58px;	/*余白の調整*/
}


/*詳細ページの画像切り替え（imgchg_pack.js）※一般のhtmlテンプレートで利用。
---------------------------------------------------------------------------*/
/*大きな画像のボックスと説明文を入れるボックス*/
#item-image {
	width: 80%;
}

/*パノラマ画像のサイズ設定（※CMS用）
---------------------------------------------------------------------------*/
.panorama-img {
	height: 500px !important;
}


/*その他
---------------------------------------------------------------------------*/
.ws {width: 45%;display: inline-block;}

/*　※注意！　下の閉じカッコ　}　は800px以上の設定に必要なので、うっかり削除しないように。　*/

}



/*---------------------------------------------------------------------------
ここから下は画面幅1000px以上の追加指定
---------------------------------------------------------------------------*/
@media screen and (min-width:1000px) {
/*ボックス内の画像*/
.pickup.poco .list img {
	height: 200px;		/*画像の高さ*/
}

/*　※注意！　下の閉じカッコ　}　は1000px以上の設定に必要なので、うっかり削除しないように。　*/

}