@charset "utf-8";
/* オフィス開業レンタルセット価格例（office/index.php 専用） */

/* セット共通 */
body.home #mainbox .office-set{
	margin-bottom: 60px;
}
body.home #mainbox .office-set .set-img{
	text-align: center;
}
body.home #mainbox .office-set .set-img img{
	max-width: 100%;
	height: auto;
	border: 1px solid #cccccd;
	box-sizing: border-box;
}
/* 縦長画像（5名様・10名様）は幅を抑えて中央配置 */
body.home #mainbox .office-set.set-tall .set-img img{
	width: 420px;
}

/* 情報エリア（左:セット価格 / 右:セット内容・申込・電話） */
body.home #mainbox .office-set .set-info{
	margin-top: 18px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: stretch;
}
body.home #mainbox .office-set .set-info .setprice-box{
	flex: 0 0 55%;
}
body.home #mainbox .office-set .set-info .set-side{
	flex: 0 0 40%;
}

/* セット価格ボックス（価格の赤以外は抑えめの配色） */
body.home #mainbox .office-set .setprice-box{
	border: 1px solid #d5d5d5;
	background-color: #fafafa;
	display: flex;
	flex-direction: column;
}
body.home #mainbox .office-set .setprice-badge{
	background-color: #525251;
	color: #fff;
	font-size: 19px;
	font-weight: bold;
	text-align: center;
	padding: 10px 0;
}
body.home #mainbox .office-set .setprice-box ul{
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	margin: 8px 18px;
}
body.home #mainbox .office-set .setprice-box li{
	list-style: none;
	color: #ca0814;
	font-size: 17px;
	font-weight: bold;
	display: flex;
	justify-content: flex-end;
	align-items: baseline;
	white-space: nowrap;
}
body.home #mainbox .office-set .setprice-box .price-num{
	color: #ca0814;
	font-size: 2.6em;
	font-weight: 900;
	white-space: nowrap;
	margin-left: 14px;
}
body.home #mainbox .office-set .setprice-box .price-num small{
	font-size: 0.42em;
	font-weight: 900;
	margin-left: 2px;
}

/* セット内容（右カラム・サイトの緑で統一） */
body.home #mainbox .office-set .set-side .contents-title{
	color: #6db82b;
	font-size: 23px;
	letter-spacing: 0.04em;
	margin-top: 2px;
}
body.home #mainbox .office-set .set-side .contents-items{
	color: #6db82b;
	font-size: 15px;
	letter-spacing: 0.04em;
	margin-top: 14px;
}
body.home #mainbox .office-set .set-side .btn_red{
	background-color: #ca0814;
	text-align: center;
	margin-top: 20px;
}

/* 電話番号ボックス（申込ボタン下） */
body.home #mainbox .office-set .tel-bar{
	margin-top: 14px;
	border-top: 1px solid #cccccd;
	border-left: 1px solid #cccccd;
	border-right: 1px solid #cccccd;
	border-bottom: 10px solid #525251;
	padding: 12px 0 14px;
}
body.home #mainbox .office-set .tel-bar li{
	list-style: none;
}
body.home #mainbox .office-set .tel-bar .tel1{
	background-image: url(../images/tel_icon1.gif);
	background-repeat: no-repeat;
	background-position: 10px 12px;
	padding: 6px 0 0 130px;
	color: #fd361d;
	font-size: 18px;
	font-weight: bold;
}
body.home #mainbox .office-set .tel-bar .tel2{
	background-image: url(../images/tel_icon2.gif);
	background-repeat: no-repeat;
	background-position: 10px 2px;
	padding: 2px 0 0 130px;
	color: #343434;
	font-size: 18px;
	font-weight: bold;
}

/* 単品レンタル価格表 */
body.home #mainbox .office-set .unit-price{
	margin-top: 22px;
	padding-top: 22px;
	border-top: 2px dotted #c5c5c5;
}
body.home #mainbox .office-set .unit-title{
	color: #343434;
	font-size: 14px;
	font-weight: bold;
}
body.home #mainbox .office-set .unit-tables{
	display: flex;
	gap: 20px;
}
body.home #mainbox .office-set .unit-tables .unit-table{
	flex: 1 1 50%;
}
body.home #mainbox .office-set .unit-table{
	width: 100%;
	border-collapse: collapse;
	margin-top: 6px;
}
body.home #mainbox .office-set .unit-table th,
body.home #mainbox .office-set .unit-table td{
	border: 1px solid #d5d5d5;
	padding: 5px 12px;
	font-size: 14px;
	color: #343434;
}
body.home #mainbox .office-set .unit-table th{
	background-color: #f4f4f4;
	font-weight: normal;
	text-align: left;
	width: 58%;
}
body.home #mainbox .office-set .unit-table td{
	text-align: right;
}

/* スマホレイアウト（サイト共通のブレークポイント789pxに合わせる） */
@media screen and (max-width: 789px){
	/* 画像は幅いっぱい、他の要素は左右に余白を取る */
	body.home #mainbox .office-set .set-info,
	body.home #mainbox .office-set .unit-price{
		margin-left: 16px;
		margin-right: 16px;
	}

	/* 情報エリアは縦積み */
	body.home #mainbox .office-set .set-info .setprice-box,
	body.home #mainbox .office-set .set-info .set-side{
		flex: 1 1 100%;
	}
	body.home #mainbox .office-set .set-info .set-side{
		margin-top: 20px;
	}

	/* 単品価格表は縦積み。境目の枠線が二重(2px)にならないよう1px重ねる */
	body.home #mainbox .office-set .unit-tables{
		display: block;
	}
	body.home #mainbox .office-set .unit-tables .unit-table + .unit-table{
		margin-top: -1px;
	}

	/* 価格行が狭い画面で折り返さないようサイズを調整 */
	body.home #mainbox .office-set .setprice-box li{
		font-size: 14px;
	}
	/* ラベル＋価格のかたまりは右寄せのまま、かたまり自体をボックス中央に配置 */
	body.home #mainbox .office-set .setprice-box ul{
		width: fit-content;
		margin-left: auto;
		margin-right: auto;
	}
	body.home #mainbox .office-set .setprice-box .price-num{
		font-size: 2.2em;
		margin-left: 10px;
	}
}