@charset "utf-8";
.tool-item{
	background: #fff;
	margin-bottom: 2em;
}
.tool-h4{
	font-size: clamp(28px, 5.5vw, 48px);
	margin: 0.5em 0 1em;
	line-height: 0.5;
	position: relative;
}
.tool-h4 b{
	font-size: clamp(24px, 4.9vw, 42px);
	letter-spacing: -0.05em;
	vertical-align: 0.04em;
}
.tool-h4 br{
	display: none;
}
.tool-h4:after{
	content: "...";
	display: block;
	margin-top: 0.3em;
}
.tool-item_p{
	line-height: 1.7;
	margin-bottom: 1.5em !important;
	text-align: center;
}
.tool-terio{
	display: block;
    position: absolute;
    top: 50%;
	transform: translateY(-70%);
    width: clamp(100px, 10vw, 150px);
	z-index: 3;
}
.tool-worksheet .tool-terio,
.tool-toryo .tool-terio{
    left: -1%;
}
.tool-zuan .tool-terio{
    right: -1%;
}
.tool-ol{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1em;
}
.tool-li{
	position: relative;
	border-radius: 0 1em 2em 1em;
}
.tool-li:after,
.tool-li:before{
	content: "";
	display: block;
	width: 2em;
	height: 2em;
	position: absolute;
	right: 0;
	bottom: 0;
}
.tool-li:after{
	clip-path: polygon(0% 0%, 100% 0, 0% 100%);
	z-index: 4;
}
.tool-li:before{
	z-index: 3;
}
.tool-li_inner{
	padding: 1.5em 1em 3em;
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	align-content: space-between;
	height: 100%;
}
.tool-catch{
	display: block;
	text-align: center;
	font-size: clamp(10px, 0.9vw, 13px);
	line-height: 1.2;
	margin-bottom: 0.4em;
}
.tool-h5{
	line-height: 1.2;
	font-size: clamp(14px, 1.2vw, 18px);
	margin-bottom: 0.5em;
    border-radius: 3em;
    padding: 0.5em 0 0.3em;
}
.tool-catch br,
.tool-h5 br{
	display: none;
}
.tool-thumb img {
    object-fit: cover;
    aspect-ratio: 1.4 / 1;
}
.tool-toryo .tool-thumb img{
    object-fit: inherit;
    aspect-ratio: inherit;
}
.tool-p{
	display: block;
	text-align: center;
	line-height: 1;
}
.tool-a{
	display: block;
	width: 100%;
	text-align: center;
	padding: 0.7em 0 0.4em;
	color: #fff;
	margin-top: 1em;
	font-size: clamp(12px, 1.1vw, 16px);
	filter: drop-shadow(0 2px 2px rgba(0,0,0,0.2));
}
.tool-toryo .tool-item_p{
	margin-bottom: 0.5em !important;
}
.tool-list_toryo{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	width: 80%;
	margin: 0 auto;
}
.tool-toryo_a .tool-a{
	display: inline-block;
	width: auto;
	padding: 0.7em 3em 0.4em;
}
@media screen and (max-width: 1280px) {
	.tool-ol{
		grid-template-columns: repeat(2, 1fr);
	}
	.tool-catch{
		font-size: clamp(12px, 2vw, 13px);
	}
	.tool-h5{
		font-size: clamp(16px, 2.2vw, 18px);
	}
	.tool-item_p{
		text-align: left;
	}
	.tool-worksheet .tool-item_p,
	.tool-toryo .tool-item_p{
		padding-left: clamp(100px, 14vw, 140px);
	}
	.tool-zuan .tool-item_p{
		padding-right: clamp(100px, 14vw, 140px);
	}
	.tool-item_p br{
		display: none;
	}
	.tool-terio {
		transform: translateY(-65%);
	}
}
@media screen and (max-width: 580px) {
	.tool-ol{
		gap: 0.5em;
	}
	.tool-item {
		border-radius: 1em;
		padding: 2em 1em;
	}
	.tool-worksheet .tool-terio,
	.tool-zuan .tool-terio{
		transform: translateY(-55%);
	}
}
@media screen and (max-width: 480px) {
	.tool-h4 br,
	.tool-catch br,
	.tool-h5 br{
		display: block;
	}
	.tool-list_toryo{
		width: 100%;
	}
}

/*ZUAN*/
.zuan-item{
	border-radius: 2em;
	margin-bottom: 2em;
	padding-top: 2em;
}
.zuan-h4{
	padding: 0.5em 1em 0.3em;
	font-size: clamp(18px, 2vw, 24px);
}
.zuan-ul{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1em;
	padding: 1em 2em 3em !important;
	margin-bottom: 1em !important;
}
.zuan-li{
	display: flex;
	flex-wrap: wrap;
	align-content: space-between;
	height: 100%;
}
.zuan-p{
	width: 100%;
	text-align: center;
	margin: 0.2em 0;
}
.zuan-p b{
	display: block;
	font-size: 80%;
	margin-bottom: 0.2em;
}
.zuan-li .more small{
	letter-spacing: -0.1em;
}
.zuan-li .more {
    line-height: 1;
    padding: 0.5em 1em 0.3em;
    font-size: clamp(10px, 1vw, 12px);
	margin: 0 auto;
}
@media screen and (max-width: 1280px) {
	.zuan-ul{
		grid-template-columns: repeat(3, 1fr);
	}
}
@media screen and (max-width: 580px) {
	.zuan-ul{
		grid-template-columns: repeat(2, 1fr);
	}
}

/*SIMULATION*/
.simulation-calc{
	padding: 2em 2em 1em 2em;
	border-radius: 0 2em 0 2em;
}
.simulation-styles{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1em;
	margin-bottom: 2em;
	text-align: center;
	cursor: pointer;
}
.simulation-h4{
	font-size: clamp(38px, 3.4vw, 48px);
	text-align: center;
	margin-bottom: 0.5em;
}
.simulation-h4 b{
	font-size: clamp(34px, 3vw, 42px);
	vertical-align: 0.05em;
}
.simulation-calc{
	display: none;
}
.simulation-calc_wrap{
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	margin-bottom: 1em;
	padding-bottom: 1em;
}
.simulation-calc_h5{
	min-width: 27em;
	margin-bottom: 0.5em;
}
.simulation-att{
	font-size: clamp(11px,1.1vw, 12px);
	margin-top: 0.5em;
}
.simulation-select,
.simulation-num{
	flex: 1;
}
.simulation-num{
	text-align: right;
}
.simulation-select,
.simulation-num input{
	padding: 0.5em;
}
.simulation-num input{
	margin: 0 0.2em 0.5em 0;
	width: 10em;
}
.simulation-result{
	text-align: right;
}
.simulation-result span{
	font-size: clamp(38px, 5vw, 58px);
	vertical-align: -0.2em;
	letter-spacing: -0.25em;
	padding-right: 0.2em;
}
.simulation-style .more {
    padding: 0.7em 2em 0.4em;
    line-height: 1;
	cursor: pointer;
	transition: 0.2s all;
}
@media screen and (max-width: 980px) {
	.simulation-select{
		width: 100%;
	}
}
@media screen and (max-width: 780px) {
	.simulation-calc_h5{
		width: 100%;
		min-width: inherit;
	}
}
@media screen and (max-width: 680px) {
	.simulation-p br{
		display: none;
	}
	.simulation-styles{
		grid-template-columns: repeat(2, 1fr);
	}
}