@charset "UTF-8";
/* common
-----------------------------------------------*/
:root{
	--calcTableColor: #525252; /* 右側計算部分背景色 */
	--bar-color: rgb(var(--main-color-rgb)/ .4);  /* バーの左側部分 */
	--sim-maincolor: var(--main-color); /* メインカラー */
	--sim-maincolor-light: var(--main-color-light);  /* メインカラー（薄） */
}

/* シミュレーション
-----------------------------------------------*/
.simulation{
	padding-top: 58px;
}
.input-wrap{
	font-weight: 600;
	font-size: 2rem;
	line-height: 1.3;
	letter-spacing: .05em;
	display: flex;
	justify-content: flex-end;
	align-items: flex-end;
	gap: 10px;
	width: 100%;
	text-align: right;
}
.input-number{
	border: 1px solid var(--sim-maincolor);
	border-radius: 10px;
	background: #feffdd;
	padding: 6px 0 6px 18px;
	width: 130px;
	color: var(--sim-maincolor);
	font-size: 2.8rem;
	letter-spacing: .02em;
	text-align: center;
	font-weight: 900;
}
.input-wrap .right-space {
	margin-right: 1em;
}

.table-simulation p.text-small {
	font-size: clamp(1.1rem, 0.494rem + 2.26vw, 1.4rem);
}



@media screen and (max-width: 767px) {
	.simulation{
		padding-top: 11.2vw;
	}
	.input-wrap{
		font-size: 1.6rem;
	}
	.input-number{
		padding: 6px;
		width: 120px;
	}
	.input-range input{
		--thumb-height: 44px;
	}
	.input-wrap {
		padding-top: 10px;
	}
	.table-simulation tr {
		display: block;
		position: relative;
	}
	.table-simulation th {
		display: inline-block;
		position: absolute;
		left: 0;
		top: 0;
		> span {
			line-height: 1.1rem;
		}
	}
}


/* =========================================
	 # range wrapper
========================================= */
.range-wrap{
	display: flex;
	align-items: center;
	margin-top: 15px;
}
.simulation__range-btn{
	display: block;
	position: relative;
	flex-shrink: 0;
	z-index: 1;
	transition: opacity .4s;
	cursor: pointer;
	border: 2px solid var(--sim-maincolor);
	border-radius: 50%;
	background-color: #fff;
	padding: 0;
	width: 34px;
	height: 34px;
}
.simulation__range-btn::after,.simulation__range-btn::before{
	position: absolute;
	margin: auto;
	inset: 0;
	border-radius: 9999px;
	background-color: var(--sim-maincolor);
	width: 14px;
	height: 4px;
	content: "";
}
.simulation__range-btn::after{
	transform: rotate(90deg);
}
.simulation__range-btn.minus::after{
	content: none;
}

.input-range{
	position: relative;
	margin-right: -5px;
	margin-left: -5px;
	padding: 0 5px;
	width: calc(100% + 10px);
	overflow: hidden;

	--thumb-height: 50px;      /* つまみの高さ */
	--track-height: 12px;      /* バーの太さ */
	--track-left:  var(--bar-color);    /* 左側カラー */
	--track-right: #e0e0e0;    /* 右側グレー */
	--thumb-color: var(--sim-maincolor);			/* つまみの色 */
	--thumb-border: #ffffff;
}

.input-range input{
	position: relative;
	vertical-align: bottom;
	width: 100%;
	color: var(--track-left);
	--track-color: var(--track-right);
}

/* 共通設定 */
.input-range input[type=range],
.input-range input[type=range]::-webkit-slider-runnable-track,
.input-range input[type=range]::-webkit-slider-thumb{
	-webkit-appearance: none;
	appearance: none;
	-webkit-transition: all ease .1s;
	transition: all ease .1s;
	height: var(--thumb-height);
}

.input-range input[type=range]::-webkit-slider-runnable-track{
	position: relative;
	background: linear-gradient(
		var(--track-color) 0 0
	) no-repeat center/100% calc(var(--track-height) + 1px);
}

.input-range input[type=range]::-webkit-slider-thumb{
	--clip-edges: 10px;
	--clip-top: calc((var(--thumb-height) - var(--track-height)) * 0.5 - 0.5px);
	--clip-bottom: calc(var(--thumb-height) - var(--clip-top));
	--clip-further: calc(100% + 1px);
	--box-fill: calc(-100vmax - var(--thumb-width, var(--thumb-height)))
							0 0 100vmax currentColor;

	position: relative;
	width: var(--thumb-width, var(--thumb-height));
	height: var(--thumb-height);
	border-radius: 50%;
	filter: drop-shadow(2px 1px 3px rgba(0,0,0,.16));
	box-shadow: var(--box-fill);

	-webkit-clip-path: polygon(
		120% -5px,
		var(--clip-edges) -1px,
		0 var(--clip-top),
		-100vmax var(--clip-top),
		-100vmax var(--clip-bottom),
		0 var(--clip-bottom),
		var(--clip-edges) 100%,
		var(--clip-further) var(--clip-further)
	);
	clip-path: polygon(
		120% -5px,
		var(--clip-edges) -1px,
		0 var(--clip-top),
		-100vmax var(--clip-top),
		-100vmax var(--clip-bottom),
		0 var(--clip-bottom),
		var(--clip-edges) 100%,
		var(--clip-further) var(--clip-further)
	);

	/* つまみの見た目 */
	background: var(--thumb-color);
	border: 3px solid var(--thumb-border);
	cursor: grab;
}

.input-range input[type=range]:active::-webkit-slider-thumb{
	cursor: grabbing;
	filter: brightness(80%);
}

@media screen and (max-width: 428px) {
	.table-simulation th .text-big {
	font-size: clamp(1.6rem, -1.4rem + 9.6vw, 2.2rem);
	}
	.range-wrap.top-space {
		margin-top: 4em;
	}
	.simulation__range-btn:hover{
		opacity: 70%;
	}
}


/* エラーメッセージ
-----------------------------------------------*/
.table-simulation td {
	position: relative;
}

/* version_a */
.error-tooltip {
	display: inline-block;
	background: var(--sim-maincolor-light);
	color: #333;
	padding: 10px 20px;
	border-radius: 20px;
	position: absolute;
	font-size: clamp(0.8rem, -0.411rem + 4.53vw, 1.4rem);
	left: 0;
	top: 1.5rem;
	width: 60%;
	text-align: left;
	box-shadow: 0 3px 6px rgba(0,0,0,0.15);　１
}
.error-tooltip::before, .error-tooltip::after {
	content: "";
	position:absolute;
	right: -16px;
	width: calc(20px / 2 * tan(60deg));
	height: 10px;
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.error-tooltip:before{
		top: 46%;
		background-color: #CCC;
}
.error-tooltip:after{
		top: calc(46% - 1px);
		background-color: var(--sim-maincolor-light);
}
.top-space-sim .error-tooltip {
	top: 2.7rem;
}


/* version_b */

.fade-out {
	display: none;
}

.balloon.fade-in {
	display: inline-block;
	background: var(--sim-maincolor-light);
	color: #333;
	padding: 10px 20px;
	border-radius: 20px;
	position: absolute;
	font-size: clamp(0.8rem, -0.411rem + 4.53vw, 1.4rem);
	left: 0;
	top: 1.5rem;
	width: 60%;
	text-align: left;
	box-shadow: 0 3px 6px rgba(0,0,0,0.15);　１
}

.balloon.fade-in::before, .balloon.fade-in::after{
		content: "";
		position:absolute;
		right: -16px;
		width: calc(20px / 2 * tan(60deg));
		height: 10px;
		clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.balloon.fade-in:before{
		top: 46%;
		background-color: #CCC;
}
.balloon.fade-in:after{
		top: calc(46% - 1px);
		background-color: var(--sim-maincolor-light);
}
.balloon.fade-in.top-space {
	top: 2.7rem;
}

@media screen and (max-width: 767px) {
	/* version_a */
	.error-tooltip {
		padding: 3px 10px;
		top: -20px;
		left: auto;
		right: 0;
		width: auto;
	}
	.top-space-sim .error-tooltip {
		top: -20px;
	}
	.error-tooltip::before, .error-tooltip::after{
		clip-path: polygon(0 0, 100% 0, 50% 100%);
		height: calc(20px / 2 * tan(60deg));
		width: 16px;
		top: 10px;
		left: auto;
		right: 70px;
	}
	.error-tooltip:before{
			top: 100%;
			background-color: #CCC;
	}
	.error-tooltip:after{
			top: calc(100% - 1px);
			background-color: var(--sim-maincolor-light);
	}
	
	/* version_b */
	.balloon.fade-in,
	.balloon.fade-in.top-space {
		padding: 3px 10px;
		top: -20px;
		left: auto;
		right: 0;
		width: auto;
	}
	.balloon.fade-in::before, .balloon.fade-in::after{
		clip-path: polygon(0 0, 100% 0, 50% 100%);
		height: calc(20px / 2 * tan(60deg));
		width: 16px;

		top: 10px;
		left: auto;
		right: 70px;
	}
	.balloon.fade-in:before{
			top: 100%;
			background-color: #CCC;
	}
	.balloon.fade-in:after{
			top: calc(100% - 1px);
			background-color: var(--sim-maincolor-light);
	}
}


	
/* 計算結果
-----------------------------------------------*/
.simulation__calculate{
	border-radius: 20px;
	background: var(--calcTableColor);
	padding: 22px 22px 33px;
	color: #fff;
	text-align: left;
}
.simulation__calculate-header{
	color: #fff;
}
.simulation__calculate-border {
	border-bottom: 1px solid var(--sim-maincolor-light);
	padding-bottom: 17px;
}
.simulation__calculate-table{
	margin-bottom: 32px;
	width: 100%;
	font-weight: 600;
}
.simulation__calculate-table-wrap{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.simulation__calculate-table-heading{
	padding: 12px 0 12px 9px;
	font-size: 1.8rem;
	letter-spacing: .05em;
}
.simulation__calculate-table-item{
	font-weight: 400;
	font-size: 2rem;
	text-align: right;
}
.simulation__calculate-table-item span{
	color: var(--sim-maincolor-light);
	font-size: 3rem;
	letter-spacing: .02em;
}
.table-simulation br:not(.pc-only),
.simulation__calculate-table-wrap--large br{
	display: none;
}
.simulation__calculate-table-wrap--large p{
	font-size: 2rem;
}
.simulation__calculate-table-wrap--large .simulation__calculate-table-heading{
	align-self: flex-start;
	padding: 18px 0 0 14px;
	font-size: 2.4rem;
	line-height: 1.0833333333;
}
.simulation__calculate-table-wrap--large .simulation__calculate-table-item{
	align-self: flex-end;
	padding: 0 3px 10px 0;
	font-size: 2.8rem;
}
.simulation__calculate-table-wrap--large .simulation__calculate-table-item span{
	font-size: 4.8rem;
}

@media screen and (max-width: 428px) {
	.simulation__calculate-table-wrap--large{
		align-self: center;
		display: flex;
		justify-content: space-between;
		line-height: 1.2;
	}
	.table-simulation br,
	.simulation__calculate-table-wrap--large br{
		display: inline;
	}
	.simulation__calculate-table-wrap--large p{
		font-size: 1.3rem;
	}
	.simulation__calculate-table-wrap--large .simulation__calculate-table-item span{
		font-size: 2.6rem;
	}
	.simulation__calculate-table-wrap--large .simulation__calculate-table-item{
		align-self: center;
		padding: 0;
		font-size: 2.2rem;
	}
	.simulation__calculate-table-heading{
		align-self: center;
		padding: 0;
		font-size: 1.3rem;
	}
	.simulation__calculate-table-item{
		align-self: center;
		padding: 0;
		font-size: 1.6rem;
	}
	.simulation__calculate-table-item span {
		font-size: 2rem;
	}
}