@charset "utf-8";
/* CSS Document */

/*==============================*/
/* 設定 */
/*==============================*/
div.taxCalculator div.taxCalculator-setting{
	display: flex;
	gap: 44px;
	margin: 16px 0 24px 0;
}
div.taxCalculator div.taxCalculator-setting > *:nth-child(1){ width: calc((100% - 44px * 2) * 0.4);}
div.taxCalculator div.taxCalculator-setting > *:nth-child(2){ width: calc((100% - 44px * 2) * 0.3);}
div.taxCalculator div.taxCalculator-setting > *:nth-child(3){ width: calc((100% - 44px * 2) * 0.3);}

	/* ======= PC：個別設定 =======*/
	@media screen and (min-width: 1024px) and (max-width: 1100px) {
		div.taxCalculator div.taxCalculator-setting{ gap: 32px;}
		div.taxCalculator div.taxCalculator-setting > *:nth-child(1){ width: calc((100% - 32px * 2) * 0.4);}
		div.taxCalculator div.taxCalculator-setting > *:nth-child(2){ width: calc((100% - 32px * 2) * 0.3);}
		div.taxCalculator div.taxCalculator-setting > *:nth-child(3){ width: calc((100% - 32px * 2) * 0.3);}
	}
	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.taxCalculator div.taxCalculator-setting{
			flex-direction: column;
			gap: 14px;
			margin: 20px 0 20px 0;
		}

		div.taxCalculator div.taxCalculator-setting > *:nth-child(1){ width: 100%;}
		div.taxCalculator div.taxCalculator-setting > *:nth-child(2){ width: 100%;}
		div.taxCalculator div.taxCalculator-setting > *:nth-child(3){ width: 100%;}
	}


/*---------------------------------
   見出し
---------------------------------*/
div.taxCalculator h2{
	font-size: 20px;
}

/*---------------------------------
   List
---------------------------------*/
div.taxCalculator div.taxCalculator-setting ul{
	position: relative;
	display: flex;
	gap: 8px;
}
div.taxCalculator div.taxCalculator-setting ul::after{
	position: absolute; top: 50%; right: -24px;
	content: "/";
	color: #000;
	transform: translateY(-50%);
}
div.taxCalculator div.taxCalculator-setting ul li{
	width: calc(calc(100% - 8px * 1) / 2);
}
div.taxCalculator div.taxCalculator-setting ul li input[type="radio"] { display: none; }
div.taxCalculator div.taxCalculator-setting ul li label {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 48px;
	padding: 5px 10px 6px 10px;
	border-radius: 5px;
	cursor: pointer;
	background: #C9CFD8;
	color: #fff;
	text-align: center;
	line-height: 1.2em;
	font-size: 15px;
}
div.taxCalculator div.taxCalculator-setting ul li input[type="radio"]:checked + label { background: #29AAE3;}

	/* ======= PC：個別設定 =======*/
	@media screen and (min-width: 1024px) and (max-width: 1100px) {
		div.taxCalculator div.taxCalculator-setting ul::after{
			position: absolute; top: 50%; right: -20px;
		}
		div.taxCalculator div.taxCalculator-setting ul li label {
			padding: 5px 8px 6px 8px;
			font-size: 14px;
		}
	}
	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.taxCalculator div.taxCalculator-setting ul{
			gap: 8px;
			padding-bottom: 16px;
			border-bottom: 1px dashed #ccc;
		}
		div.taxCalculator div.taxCalculator-setting ul::after{ display: none;}
		div.taxCalculator div.taxCalculator-setting ul li{ width: calc(calc(100% - 8px * 1) / 2);}
		div.taxCalculator div.taxCalculator-setting ul li label {
			padding: 5px 10px 6px 10px;
			font-size: 15px;
		}
	}


/*---------------------------------
   源泉
---------------------------------*/
div.taxCalculator div.taxCalculator-setting div p input[type="checkbox"] { display: none; }
div.taxCalculator div.taxCalculator-setting div p label {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 48px;
	padding: 5px 10px 6px 10px;
	border-radius: 5px;
	cursor: pointer;
	background: #C9CFD8;
	color: #fff;
	text-align: center;
	font-size: 15px;
}
div.taxCalculator div.taxCalculator-setting div p input[type="checkbox"]:checked + label { background: #29AAE3;}

	/* ======= PC：個別設定 =======*/
	@media screen and (min-width: 1024px) and (max-width: 1100px) {
		div.taxCalculator div.taxCalculator-setting div p label {
			padding: 5px 8px 6px 8px;
			font-size: 14px;
		}
	}



/*==============================*/
/* 金額入力 */
/*==============================*/
div.taxCalculator div.taxCalculator-number{ margin-bottom: 24px;}
div.taxCalculator div.taxCalculator-number input[type="number"]{
	width: 100%;
	padding: 12px 12px 12px 12px;
	border: 2px solid #efefef;
	border-radius: 8px;
	box-sizing: border-box;
	font-size: 22px;
	text-align: right;
	transition: border-color 0.2s; 
}

div.taxCalculator div.taxCalculator-number input:focus { border-color: #29AAE3;  outline: none; background: #fff; }

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button{
	margin-left: 10px;
}

	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.taxCalculator div.taxCalculator-number{ margin-bottom: 20px;}
		div.taxCalculator div.taxCalculator-number input[type="number"]{
			padding: 8px 16px;
			border-radius: 8px;
			font-size: 20px;
		}

	}

/*==============================*/
/* 計算結果 */
/*==============================*/
div.taxCalculator div.taxCalculator-result{
	margin-bottom: 20px;
	padding: 24px;
	background: #F9F9F9 url("/common/img/tool/bg-texture.webp");
	border-radius: 8px;
}
	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.taxCalculator div.taxCalculator-result{
			margin-bottom: 20px;
			padding: 20px;
			border-radius: 8px;
		}
	}



/*-- 共通設定
------------------------- */
div.taxCalculator div.taxCalculator-result dl{
	display: flex;
}
div.taxCalculator div.taxCalculator-result dl:not(:last-child){ margin-bottom: 4px;}
div.taxCalculator div.taxCalculator-result dl dt{
	flex: 0 0 96px;
}
div.taxCalculator div.taxCalculator-result dl dd{
	padding-top: 2px;
	flex: 1;
	min-width: 0;
	text-align: right;
	font-size: 12px;
}
div.taxCalculator div.taxCalculator-result dl dd span{
	position: relative; top: 1px;
	display: inline-block;
	margin-right: 2px;
	vertical-align: baseline;
	font-size: 19px;
	font-weight: 500;
	font-family: "Inter", sans-serif;
	line-height: 1em;
	letter-spacing: 0.01em;
}

	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.taxCalculator div.taxCalculator-result dl dt{
			flex: 0 0 88px;
			font-size: 14px;
		}
		div.taxCalculator div.taxCalculator-result dl dd{
			font-size: 11px;
		}
		div.taxCalculator div.taxCalculator-result dl dd span{
			position: relative; top: 1px;
			margin-right: 2px;
			font-size: 18px;
		}

	}


/*-- 項目
------------------------- */
div.taxCalculator div.taxCalculator-result > div{
	border-bottom: 3px double #ccc;
	padding-bottom: 16px;
	margin-bottom: 16px;
}
div.taxCalculator div.taxCalculator-result > div dl:not(:last-child){ margin-bottom: 5px;}

div.taxCalculator div.taxCalculator-result dl.withholdingTax dd span{
	position: relative;
	padding-left: 22px;
}
div.taxCalculator div.taxCalculator-result dl.withholdingTax dd span::before{
	position: absolute; top: 3px; left: 0;
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 8px 13px 8px;
	border-color: transparent transparent #46403B transparent;
}
	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.taxCalculator div.taxCalculator-result dl.withholdingTax dd span{
			padding-left: 15px;
		}
		div.taxCalculator div.taxCalculator-result dl.withholdingTax dd span::before{
			position: absolute; top: 3px; left: 0;
			border-width: 0 6px 11px 6px;
		}
	}


/*-- 合計
------------------------- */
div.taxCalculator div.taxCalculator-result > dl dt{
	color: #000;
	font-size: 17px;
	font-weight: 600;	
}
div.taxCalculator div.taxCalculator-result > dl dd{
	color: #000;
}
div.taxCalculator div.taxCalculator-result > dl dd span{
	position: relative; top: 1px;
	margin-right: 2px;
	font-size: 22px;
	font-weight: 600;
}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.taxCalculator div.taxCalculator-result > dl dt{
			font-size: 15px;
		}
		div.taxCalculator div.taxCalculator-result > dl dd span{
			position: relative; top: 1px;
			margin-right: 2px;
			font-size: 19px;
		}
	}


/*==============================*/
/* ボタン */
/*==============================*/
div.taxCalculator ul.optionBtn{
	display: flex;
	width: min(260px,100%);
	margin-left: auto;
	gap: 8px;
}
div.taxCalculator ul.optionBtn li{
	width: calc(calc(100% - 8px * 1) / 2);
}
div.taxCalculator ul.optionBtn li button{
	display: block;
	padding: 6px 0 8px 0;
	width: 100%;
	color: #fff;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.3em;
	border-radius: 5px;
}
div.taxCalculator ul.optionBtn li:nth-child(1) button{ background: #999999;}
div.taxCalculator ul.optionBtn li:nth-child(2) button{	background: #29AAE3;}


	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.taxCalculator ul.optionBtn{
			width: min(256px,100%);
			margin: 0 auto;
		}
}