.wrapper .block #inputBlock .table {
    width: 100%;
    display: table;
	word-break: normal;
}

.wrapper .block #inputBlock .thead {
    display: table-header-group;
}

.wrapper .block #inputBlock .thead .tr {
    display: table-row;
}

.wrapper .block #inputBlock .thead .th {
    display: table-cell;
    color: #fff;
    background-color: #333;
    font-size: 125%;
    font-weight: 700;
    line-height: 1.3;
    padding-left: 6px;
    padding-right: 6px;
    padding-top: 11px;
    padding-bottom: 11px;
    border-left: 2px solid #fff;
    border-bottom: 3px solid #fff;
}

.wrapper .block #inputBlock .tbody .td:first-child {
    border-left: none;
    width:25%;
}

.wrapper .block #inputBlock .tbody {
    display: table-row-group;
}

.wrapper .block #inputBlock .tbody .tr {
    display: table-row;
}

.wrapper .block #inputBlock .tbody .td {
    display: table-cell;
    font-weight: 700;
    line-height: 1.3;
    padding-left: 6px;
    padding-right: 6px;
    padding-top: 16px;
    padding-bottom: 16px;
    border-bottom: 3px solid #fff;
    vertical-align: middle;
}

.wrapper .block #inputBlock .tbody .e {
    background-color: #eee;
    font-size: 125%;
    text-align: center;
}

.wrapper .block #inputBlock .tbody .v {
    background-color: #f9f9f9;
    font-size: 117%;
}




.form_txt{
	width:100px;
}
.form_txt_l{
	width:140px;
}

.size_s {
    min-width: 86px!important;
}


#tatamiSelectArea{
	display:none;
}
#tatamiSelectArea div.check_wrap{
	padding-top:12px!important;
}




#outputBlock {
    background: #eff3f7;
}



.wrapper .block .table_panel {
    width: 100%;
    display: table;
	word-break: normal;
}

.wrapper .block .table_panel .tbody .td:first-child {
    border-left: none;
}

.wrapper .block .table_panel .tbody {
    display: table-row-group;
}

.wrapper .block .table_panel .tbody .tr {
    display: table-row;
}

.wrapper .block .table_panel .tbody .td {
    display: table-cell;
    width:33%;
    font-weight: 700;
    line-height: 1.3;
    padding-left: 6px;
    padding-right: 6px;
    padding-top: 8px;
    padding-bottom: 8px;
    vertical-align: middle;
    text-align: center;
    font-size: 117%;
    border-left: 2px solid #fff;
    border-bottom: 3px solid #fff;
    background-color: #eee;
}

@media screen and (max-width: 480px) {
	.wrapper .block .table_panel .tbody .tr-responsive {
		display: grid!important;
	}
	.wrapper .block .table_panel .tbody .td {
		width:100%;
	}
}

.label1 {
	font-weight: bold;
	font-size: 117%;
}
.label2 {
	font-size: 80%;
}
.value {
	font-weight: bold;
	color: #23ac38;
	font-size: 200%;
}
span.unit {
	font-size: 50%;
}



/* 畳サイズ選択（ドロップダウン） */
.tatami-selector{background:#f0f7f0;border:1px solid #c8e6c9;border-radius:8px;padding:12px 16px;margin-bottom:20px;display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.tatami-selector .selector-label{font-weight:bold;color:#2e7d32;font-size:14px;white-space:nowrap}
.tatami-select{padding:8px 36px 8px 14px;border:2px solid #a5d6a7;border-radius:8px;font-size:14px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234caf50' stroke-width='2' fill='none'/%3E%3C/svg%3E") no-repeat right 12px center;color:#333;cursor:pointer;flex:1;min-width:200px;max-width:400px;-webkit-appearance:none;-moz-appearance:none;appearance:none;transition:border-color .2s}
.tatami-select:hover{border-color:#4caf50}
.tatami-select:focus{border-color:#2e7d32;outline:none;box-shadow:0 0 0 3px rgba(76,175,80,0.15)}

/* 3つの入力欄 */
.input-trio-wrap{margin-bottom:10px}
.input-trio{display:flex;gap:0;align-items:stretch;border:2px solid #e0e0e0;border-radius:10px;overflow:hidden;background:#fff}
.input-trio .input-cell{flex:1;text-align:center;position:relative;border-right:1px solid #e0e0e0}
.input-trio .input-cell:last-child{border-right:none}
.input-trio .input-cell .input-label{background:#f5f5f5;padding:8px 0;font-weight:bold;font-size:14px;color:#555;border-bottom:1px solid #e0e0e0}
.input-trio .input-cell.active .input-label{background:#e8f5e9;color:#2e7d32}
.input-trio .input-cell input[type="text"]{width:100%;border:none;outline:none;text-align:center;font-size:22px;font-weight:bold;padding:14px 8px;color:#333;box-sizing:border-box;background:transparent}
.input-trio .input-cell input[type="text"]:focus{background:#f1faf1}
.input-trio .input-cell input[type="text"]::placeholder{color:#ccc;font-weight:normal;font-size:16px}
.arrow-sep{display:flex;align-items:center;justify-content:center;padding:0 2px;font-size:18px;color:#4caf50;font-weight:bold;background:#f5f5f5;min-width:30px}
.input-trio-note{text-align:center;font-size:12px;color:#999;margin-top:8px}

/* 広さイメージ */
.image-block{background:#fafafa;border:1px solid #e0e0e0;border-radius:10px;padding:20px;margin-top:20px}
.image-block h3{font-size:15px;color:#333;margin:0 0 14px 0;padding-bottom:8px;border-bottom:2px solid #4caf50}
.image-items{display:flex;flex-direction:column;gap:10px}
.image-item{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;background:#fff;border-radius:8px;border:1px solid #eee}
.image-item .item-icon{font-size:22px;min-width:30px;text-align:center}
.image-item .item-content{flex:1}
.image-item .item-label{font-size:12px;color:#888;margin-bottom:2px}
.image-item .item-value{font-size:15px;color:#333;font-weight:bold}
.image-item .item-value .hl{color:#2e7d32}

/* ===== スライダー（クロスブラウザ対応） ===== */
.dimension-sim{margin-top:16px;padding:14px;background:#fff;border-radius:8px;border:1px solid #eee}
.dimension-sim .sim-header{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.dimension-sim .sim-header label{font-size:13px;color:#555;white-space:nowrap}
.dimension-sim .sim-header .range-value{font-size:14px;font-weight:bold;color:#2e7d32;min-width:60px;text-align:right}
.dimension-result{text-align:center;font-size:15px;color:#333;padding:8px;background:#f0f7f0;border-radius:6px}
.dimension-result strong{color:#2e7d32;font-size:18px}

/* スライダー本体 */
#widthSlider{
	-webkit-appearance:none;
	-moz-appearance:none;
	appearance:none;
	flex:1;
	height:8px;
	border-radius:4px;
	background:linear-gradient(to right, #4caf50 0%, #4caf50 8%, #ddd 8%, #ddd 100%);
	outline:none;
	cursor:pointer;
	margin:0;
	padding:0;
}
/* Webkit（Chrome/Safari/Edge）つまみ */
#widthSlider::-webkit-slider-thumb{
	-webkit-appearance:none;
	appearance:none;
	width:24px;
	height:24px;
	border-radius:50%;
	background:#4caf50;
	border:3px solid #fff;
	box-shadow:0 1px 4px rgba(0,0,0,0.3);
	cursor:pointer;
	transition:transform .15s, box-shadow .15s;
}
#widthSlider::-webkit-slider-thumb:hover{
	transform:scale(1.15);
	box-shadow:0 2px 8px rgba(76,175,80,0.4);
}
#widthSlider::-webkit-slider-thumb:active{
	transform:scale(1.25);
	background:#388e3c;
}
/* Firefox つまみ */
#widthSlider::-moz-range-thumb{
	width:22px;
	height:22px;
	border-radius:50%;
	background:#4caf50;
	border:3px solid #fff;
	box-shadow:0 1px 4px rgba(0,0,0,0.3);
	cursor:pointer;
}
#widthSlider::-moz-range-thumb:hover{
	box-shadow:0 2px 8px rgba(76,175,80,0.4);
}
/* Firefox トラック */
#widthSlider::-moz-range-track{
	height:8px;
	border-radius:4px;
	background:#ddd;
}
#widthSlider::-moz-range-progress{
	height:8px;
	border-radius:4px;
	background:#4caf50;
}

/* コピー＆履歴 */
.action-bar{display:flex;gap:10px;margin-top:16px;align-items:center;flex-wrap:wrap}
.btn-copy{display:inline-flex;align-items:center;gap:6px;padding:10px 20px;background:#4caf50;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:bold;cursor:pointer;transition:background 0.2s}
.btn-copy:hover{background:#388e3c}
.btn-copy.copied{background:#2196f3}
.history-section{margin-top:20px}
.history-section h4{font-size:13px;color:#888;margin:0 0 8px 0}
.history-list{display:flex;flex-direction:column;gap:6px}
.history-item{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:#f9f9f9;border:1px solid #eee;border-radius:6px;font-size:13px;color:#555;cursor:pointer;transition:background 0.15s}
.history-item:hover{background:#e8f5e9}
.history-item .hist-text{flex:1}
.history-item .hist-action{color:#4caf50;font-size:12px;white-space:nowrap;margin-left:10px}
.history-empty{font-size:13px;color:#bbb;padding:8px}

/* レスポンシブ */
@media screen and (max-width:600px){
	.input-trio{flex-direction:column}
	.input-trio .input-cell{border-right:none;border-bottom:1px solid #e0e0e0}
	.input-trio .input-cell:last-child{border-bottom:none}
	.arrow-sep{display:none}
	.tatami-selector{flex-direction:column;align-items:flex-start}
	.tatami-select{width:100%;max-width:100%}
}

/* 畳サイズ選択エリア */
.tatami-selector {
	background: #f0f7f0;
	border: 1px solid #c8e6c9;
	border-radius: 8px;
	padding: 14px 16px;
	margin-bottom: 20px;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}

/* ドロップダウン本体 */
.tatami-select {
	padding: 10px 40px 10px 14px;
	border: 2px solid #4caf50;
	border-radius: 8px;
	font-size: 15px;
	font-weight: bold;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23fff' stroke-width='2' fill='none'/%3E%3C/svg%3E") no-repeat right 14px center;
	background-color: #fff;
	color: #333;
	cursor: pointer;
	flex: 1;
	min-width: 200px;
	max-width: 420px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	transition: border-color .2s, box-shadow .2s;
	position: relative;
}

/* 右端の▼ボタン風エリア */
.tatami-select-wrap {
	position: relative;
	flex: 1;
	min-width: 200px;
	max-width: 420px;
}
.tatami-select-wrap::after {
	content: "▼";
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	width: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #4caf50;
	color: #fff;
	font-size: 12px;
	border-radius: 0 6px 6px 0;
	pointer-events: none;
}
.tatami-select-wrap .tatami-select {
	width: 100%;
	min-width: auto;
	max-width: none;
	background-image: none;
}

/* ホバー・フォーカス */
.tatami-select:hover {
	border-color: #388e3c;
}
.tatami-select:focus {
	border-color: #2e7d32;
	outline: none;
	box-shadow: 0 0 0 3px rgba(76,175,80,0.2);
}

/* レスポンシブ */
@media screen and (max-width: 600px) {
	.tatami-selector { flex-direction: column; align-items: flex-start; }
	.tatami-select-wrap { width: 100%; max-width: 100%; }
}