/* =========================================================
 * FUNCTION ROOM（ブロックエディタ版）専用
 * inc/function-block.php により、対象ページとその編集画面でのみ読み込む。
 * 既存の style.css は「元の HTML 構造」向けのため、
 * ブロック化で変わった構造の差分だけをここで補正する。
 * ======================================================= */

/* 元ページで div 直下の文字だった部分（段落ブロック化したもの）は余白なし・親の文字設定を継承 */
.page-function p.fb-t,
.page-function .fb-t {
	margin: 0;
	font: inherit;
	letter-spacing: inherit;
	color: inherit;
}

/* タブ：押せることがわかるようにする（カーソル・マウスを乗せたときの背景） */
.page-function .function-tab-group > li {
	cursor: pointer;
	transition: background-color .2s;
	display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.page-function .function-tab-group > li:not(.active):hover {
	background-color: #f7f9fa;
}
/* 選択中のタブは押しても変わらないので通常の矢印 */
.page-function .function-tab-group > li.active {
	cursor: default;
}

/* ---------------------------------------------------------
 * 1. 宴会プラン：開閉（詳細ブロック）の見出し部分
 *    元は summary 内の div.eplan_box に当たっていた指定
 * ------------------------------------------------------- */
.page-function .eplan-details > summary {
	background-color: #1D1F3F;
	color: white;
	text-align: center;
	padding: 30px;
	cursor: pointer;
}

/* 区切り線ブロック（元は <hr>：Bootstrap の線の色に合わせる） */
.page-function hr.fb-hr {
	border: 0;
	border-top: 1px solid rgba(0, 0, 0, .1);
	opacity: 1;
}

/* ---------------------------------------------------------
 * 2. 表（表ブロック）
 *    元は <table border="1" class="…"> 直書き。表ブロックは figure で包まれ、
 *    class も figure に付くため、元の見た目（ブラウザ標準の罫線・余白）に合わせる
 * ------------------------------------------------------- */
.page-function figure.fb-table {
	margin: 0;
	overflow: visible;
}
.page-function .fb-table > table {
	width: auto;
	border-collapse: collapse;
}
.page-function .fb-table td,
.page-function .fb-table th {
	border: 0;
	padding: 1px;
}
/* border="1" があった表 */
.page-function .fb-border > table {
	border: 1px outset;
}
.page-function .fb-border td,
.page-function .fb-border th {
	border: 1px inset;
}

/* 定員表 */
.page-function .function_tein > table {
	font-size: small;
	text-align: center;
}
/* 定員表 JOIN「1/2スパン・立食」：元はセル内が <p>70名</p> で下余白が付いていたため同じ高さにする */
.page-function .join .function_tein tr:nth-child(4) td:nth-child(3) {
	padding-bottom: calc(1rem + 1px);
}

/* 料金表 */
.page-function .function-price01 > table {
	margin: 20px 0 10px 0; /* 元は 40px 0 20px 0。上下の余白を詰める */
	text-align: center;
}
/* PRICE 直下の料金表：表の罫線ぶん（2px）縦にはみ出して縦スクロールバーが出ていたため、縦方向は隠す（横スクロールはそのまま） */
/* （overflow はスクロールヒントのJSがインラインで付けるため !important） */
.page-function .fanction-price .scroll-hint {
	overflow-y: hidden !important;
}
.page-function .function-price02 > table {
	margin: 20px 0 20px 0;
	text-align: center;
}

/* キャンセル規定（元は 1 行目が .text-center、3 行目の 1・2 列目が .pr-3） */
.page-function .fb-cancel tr:first-child td {
	text-align: center;
}
.page-function .fb-cancel tr:nth-child(3) td:nth-child(-n+2) {
	padding-right: 1rem;
}

/* キャッチコピー：スマホでは行間・上の余白を詰める（PCはそのまま） */
@media (max-width: 767px) {
	.page-function .concept-box {
		line-height: 2; /* 元は 3rem（42px） */
	}
	.page-function .concept-box-section {
		padding-top: 40px; /* 元は 60px */
	}
}

@media (min-width: 768px) {
	.page-function .function_tein > table {
		width: 960px;
		height: 200px;
	}
	/* 元の td.td90（定員表 2 行目。COZY・RISE は 1 行目の左 3 列も） */
	.page-function .function_tein tr:nth-child(2) td,
	.page-function .cozy .function_tein tr:first-child td:nth-child(-n+3),
	.page-function .rise .function_tein tr:first-child td:nth-child(-n+3) {
		width: 90px;
	}
	.page-function .function-price01 > table,
	.page-function .function-price02 > table {
		border-collapse: collapse;
		width: 800px;
	}
}
@media screen and (max-width: 768px) {
	.page-function .function_tein > table {
		width: 600px;
		font-size: x-small;
	}
	.page-function .function-price01 > table {
		width: 250px;
		font-size: x-small;
	}
	.page-function .function-price02 > table {
		width: 400px;
		font-size: x-small;
	}
	/* 元は表そのものが横並び（.row）の要素で、画面幅に合わせて縮んでいた */
	.page-function figure.function-price02,
	.page-function .function-price02 > table {
		max-width: 100%;
	}
}