@charset "utf-8";


/*---------------------------------------------------------------------------
CMS用に追加
---------------------------------------------------------------------------*/


/*NEW,UPマークなどのアイコン
---------------------------------------------------------------------------*/
/*NEW,UPoption1-icon,option2-icon共通*/
.newicon, .upicon, .option1-icon, .option2-icon {
	display: inline-block;
	padding: 0.3rem 0.5rem;	/*上下、左右への余白*/
	border-radius: 3px;		/*角を少しだけ丸くする指定*/
	font-size: 0.7rem;		/*文字サイズを70%に*/
	line-height: 1;			/*行間*/
	margin-right: 2px;		/*右側に空けるスペース。アイコンが並んだ場合の隙間になります。*/
}

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

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

/*option1-iconへの追加指定。*/
.option1-icon {
	background: #fff;
	color: #777;
	border-radius: 3px;
	border: 1px solid #999;
}

/*option2-iconへの追加指定。*/
.option2-icon {
	background: #ccc;
	color: #555;
}


/*option帯
---------------------------------------------------------------------------*/
/*option1,option2 共通*/
.option1, .option2 {
	font-size: 0.7rem;	/*文字サイズを70%に*/
	display: inline-block;
	width: 200px;		/*幅*/
	text-align: center;	/*テキストをセンタリング*/
	position: absolute;	/*絶対配置する指定*/
	top: 0px;	/*上からの配置場所。*/
	left: 0px;	/*左からの配置場所。*/
	transform: translate(-60px, 20px) rotate(-30deg);	/*translateは移動する距離(X軸, Y軸)でrotateは回転*/
	box-shadow: 0px 3px 2px rgba(0,0,0,0.2);	/*影*/
}

/*h2タグ内で使った場合のoption1,option2 共通*/
h2 .option1, h2 .option2 {
	width: auto;box-shadow: none;
	position: relative;
	transform: translate(0px, -4px) rotate(0deg);
	padding: 5px 20px;
	margin-left: 5px;
	border-radius: 3px;
}

/*option1への追加指定。*/
.option1 {
	background: #ff0000;
	color: #fff;
}

/*option2への追加指定。*/
.option2 {
	background: #ccc;
	color: #777;
}


/*ページャー
---------------------------------------------------------------------------*/
/*ブロック全体*/
.pager {
	margin-top: 3rem;		/*上に空けるスペース*/
	margin-bottom: 3rem;	/*下に空けるスペース*/
	text-align: center;		/*テキストをセンタリング*/
	color: #999;			/*文字色*/
}

/*ボタン一個あたり*/
.pager a {
	display: inline-block;text-decoration: none;
	margin-bottom: 5px;		/*下に空けるスペース。ボタンが２段になった場合用。*/
	padding: 0.5rem 1rem;	/*ボタン内の余白。上下、左右への順番。*/
	border: 1px solid #999;	/*枠線の幅、線種、色*/
	background: #fff;		/*背景色*/
	color: #555;			/*文字色*/
}

/*マウスオン時*/
.pager a:hover {
	background: #fff;	/*背景色*/
	color: #999;		/*文字色*/
	border: 1px solid #333;	/*枠線の幅、線種、色*/
}

/*リンクのないボタン*/
.pager span {
	display: inline-block;
	margin-bottom: 5px;		/*下に空けるスペース。ボタンが２段になった場合用。*/
	padding: 0.5rem 1rem;	/*ボタン内の余白。上下、左右への順番。*/
	border: 1px solid #ccc;	/*枠線の幅、線種、色*/
	background: rgba(0,0,0,0.1);	/*背景色。0,0,0は黒、0.1は色が10%出た状態*/
}


/*list
---------------------------------------------------------------------------*/
.list {
	position: relative;
	overflow: hidden;
}

.list.sumi figure img {
	opacity: 0.4;	/*ご契約済み、SOLDOUT系の画像の透明度を下げる。そのままの色にしたいならこの行削除。*/
}


/*詳細ページで使っている「ご契約済み」の大きなボタン
---------------------------------------------------------------------------*/
.sumi-btn {
	display: inline-block;
	font-size: 1.8rem;		/*文字サイズを1.8倍*/
	letter-spacing: 0.1em;	/*文字間隔を少しだけ広く*/
	background: #eee;		/*背景色*/
	color: #999;			/*文字色*/
	padding: 0 1.5rem;		/*上下、左右へのボタン内の余白*/
	border-radius: 5px;		/*角を少し丸くする*/
	border: 1px solid #ccc;	/*枠線の幅、線種、色*/
}


/*サブコンテンツで使用する横長タイプのボックス
---------------------------------------------------------------------------*/
/*ボックス１個あたり*/
.list-normal-sub .list {
	display: flex;	/*flexボックスを使う指定*/
	padding: 0.3rem 0;	/*上下、左右へのボックス内の余白*/
}

.list-normal-sub .list div {
	flex: 1;
}

/*ボックス内のfigure画像*/
.list-normal-sub .list figure {
	width: 30%;				/*画像の幅*/
	margin-right: 0.5rem;	/*画像の右側に空けるスペース*/
}

/*ボックス内のh4タグ*/
.list-normal-sub .list h4 {
	margin: 0;				/*デフォルトマージンを一旦リセット*/
	line-height: 1;
}
.list-normal-sub .list h4 a  {
	color: inherit;
}

/*ボックス内のpタグ*/
.list-normal-sub .list p {
	margin: 0 !important;
	font-size: 0.7em;		/*文字サイズを親要素の70%に。*/
}


/*list内のtableっぽく見える所
---------------------------------------------------------------------------*/
/*ボックス全体*/
dl.line2 {
	margin: 0;
	display: grid;		/*gridボックスを使う指定*/
	grid-template-columns: auto 1fr;	/*２列のうち、左は内容に応じて自動、残りを右側に割り当て*/
	font-size: 0.7em;	/*文字サイズを親要素の70%に。*/
	border-top: 1px solid #ccc;
}
.list-normal dl.line2 {
	grid-template-columns: repeat(2, auto 1fr);	/*上の「auto 1fr」を２回続ける。つまり「auto 1fr auto 1fr」と同じ意味。*/
}

dl.line2 dt, dl.line2 dd {
	border-bottom: 1px solid #ccc;	/*枠線の幅、線種、色*/
	padding: 0 0.5rem;				/*上、左右への余白*/
}
dl.line2 dt {
	background: #eee;	/*背景色*/
}


/*パノラマ画像
---------------------------------------------------------------------------*/
.ofx {overflow-x: hidden;}

.panorama-img {width: 600px !important;height: 400px !important;}

	/*画面幅600px以下の設定*/
	@media screen and (max-width:600px){
	
	.panorama-img {width: 450px !important;height: 300px !important;}
	
	}/*追加指定ここまで*/

/*ta1
---------------------------------------------------------------------------*/
.ta1 {
	table-layout: fixed;
}

/*「こだわり」向けの設定*/
.ta1 td .specialbox label {
	float: left;
	display: inline-block;
	margin-right: 5px;
}
.ta1 td .specialbox img {
	vertical-align: middle;
}


/*その他
---------------------------------------------------------------------------*/
.mb10 {margin-bottom: 10px !important;}


