@charset "UTF-8";

.main .cost-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: .6rem;
	width: 9.6rem;
	padding: .96rem .72rem;
	margin: 0 auto;
	box-sizing: border-box;
}
.main .cost-inner h1 {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: .6rem;
	font-size: .36rem;
	font-weight: 700;
	text-align: center
}
.main .cost-inner h1::before {
	content: "";
	display: block;
	width: .96rem;
	height: .96rem;
	background: url(/wp-content/themes/next-engine/assets/imgs/manageable-systems/rakuten/icon-yen.svg) no-repeat center center/contain
}
.main .cost .initial {
	padding: 0;
	background: 0 0
}
.main .cost .initial .inner {
	width: -moz-fit-content;
	width: fit-content;
	margin: 0 auto;
	display: flex;
	align-items: center
}
.main .cost .initial .inner .detail {
	display: flex;
	align-items: center;
	padding: 0 .32rem;
	font-size: .24rem
}
.main .cost .initial .inner .detail .attPrice {
	margin: 0 .1rem;
	position: relative;
	bottom: .04rem
}
.main .cost .initial .inner .detail .attPrice-m {
	margin: 0 .08rem
}
.main .cost .initial .inner .text-border {
	width: .4rem;
	height: .032rem;
	background-color: #dee6eb;
	border-radius: .1rem;
	transform: rotate(-60deg)
}
.main .cost .simulation {
	padding: .4rem 0 .64rem;
	background: #f1faff
}
.main .cost .simulation h3 {
	font-size: .3rem
}
.main .cost .simulation p {
	text-align: center
}
.main .cost .simulation p+.form {
	margin: .24rem 0 0
}
.main .cost .simulation .form {
	padding: .48rem 0 .48rem .64rem;
	background: #fff;
	border-radius: 0 0 .08rem .08rem;
	box-shadow: inset 0 0 0 1px #f4f9fd, .04rem .08rem .16rem rgba(132, 175, 199, .2)
}
.main .cost .simulation .form.marketoForm {
	padding: 0 0 .48rem
}
.main .cost .simulation .form.marketoForm .block-button {
	padding: .32rem 0 0
}
.main .cost .simulation .form.marketoForm .button {
	margin: auto
}
.main .cost .simulation .form .block {
	display: flex;
	box-sizing: border-box
}
.main .cost .simulation .form .block .label {
	box-sizing: border-box;
	width: 1.36rem;
	border-right: 1px solid #dee6eb;
	font-weight: 700
}
.main .cost .simulation .form .block .input, .main .cost .simulation .form .block .list {
	display: flex;
	flex-wrap: wrap;
	box-sizing: border-box;
	width: calc(100% - 1.36rem)
}
.main .cost .simulation .form .block01 .label {
	line-height: .45rem
}
.main .cost .simulation .form .block01 .input {
	padding: 0 0 0 .24rem;
	line-height: .45rem
}
.main .cost .simulation .form .block01 .input input {
	box-sizing: border-box;
	width: 3.17rem;
	border: none;
	padding: 0 .24rem;
	border-radius: .22rem;
	box-shadow: inset 0 0 0 1px #c3c8cb;
	outline: 0
}
.main .cost .simulation .form .block01 .input input:focus {
	box-shadow: inset 0 0 0 .02rem #09f
}
.main .cost .simulation .form .block01 .input input::-moz-placeholder {
	color: #9fa9ad
}
.main .cost .simulation .form .block01 .input input::placeholder {
	color: #9fa9ad
}
.main .cost .simulation .form .block01 .input .unit {
	display: flex;
	justify-content: space-between;
	width: .64rem;
	margin: 0 0 0 .16rem;
	position: relative;
	font-size: .18rem
}
.main .cost .simulation .form .block01 .input .unit span:first-child::after {
	content: "";
	display: block;
	width: .4rem;
	height: 1px;
	position: absolute;
	top: 50%;
	left: 50%;
	background: currentColor;
	transform: translate(-50%, -50%) rotate(-45deg)
}
.main .cost .simulation .form .block02 {
	margin: .32rem 0 0
}
.main .cost .simulation .form .block02 .label {
	line-height: 1.5
}
.main .cost .simulation .form .block02 .label .note {
	margin: .1rem 0 0;
	color: #7c8386;
	font-size: .14rem;
	font-weight: 400;
	line-height: 1
}
.main .cost .simulation .form .block02 .list {
	padding: 0 0 0 .16rem
}
.main .cost .simulation .form .block02 .list .note {
	box-sizing: border-box;
	width: 100%;
	padding: 0 0 0 .08rem;
	color: #7c8386;
	font-size: .14rem;
	line-height: .24rem
}
.main .cost .simulation .form .block02 .list label {
	display: block;
	margin: .18rem 0 0 .08rem;
	padding: 0 0 0 .28rem;
	position: relative;
	line-height: .18rem;
	cursor: pointer
}
.main .cost .simulation .form .block02 .list label input {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0
}
.main .cost .simulation .form .block02 .list label .marker {
	display: block;
	width: .18rem;
	height: .18rem;
	position: absolute;
	top: 0;
	left: 0;
	border-radius: .02rem;
	background: url(../imgs/common/common-ico-check01_w.svg) 50% 50%/.1rem auto no-repeat;
	box-shadow: inset 0 0 0 1px #c3c8cb
}
.main .cost .simulation .form .block02 .list label input:checked+.marker {
	box-shadow: none;
	background-color: #09f
}
.main .cost .simulation .form .button {
	width: 2.72rem;
	margin: .48rem auto 0;
	transform: translate(-.32rem)
}
.main .cost .simulation .contact, .main .cost .simulation .error, .main .cost .simulation .result {
	margin: 1.32rem 0 0;
	border: .05rem solid #09f;
	position: relative;
	border-radius: .08rem;
	background: #fff
}
.main .cost .simulation .contact::before, .main .cost .simulation .error::before, .main .cost .simulation .result::before {
	content: "";
	display: block;
	width: .85rem;
	height: .36rem;
	position: absolute;
	top: -.84rem;
	left: 50%;
	background: url(../imgs/common/common-arrow11_g.svg) 50% 0/contain no-repeat;
	transform: translate(-50%)
}
.main .cost .simulation .result {
	padding: .52rem .08rem .44rem
}
.main .cost .simulation .result .total {
	padding: 0 0 .48rem;
	font-size: .32rem;
	font-weight: 700;
	line-height: 1;
	text-align: center
}
.main .cost .simulation .result .total .label {
	margin: 0 0 .18rem
}
.main .cost .simulation .result .total strong {
	color: #09f;
	font-family: Roboto, sans-serif!important;
	font-size: .64rem
}
.main .cost .simulation .result .item01, .main .cost .simulation .result .item02 {
	width: 100%
}
.main .cost .simulation .result .item01 td, .main .cost .simulation .result .item01 th, .main .cost .simulation .result .item02 td, .main .cost .simulation .result .item02 th {
	box-sizing: border-box;
	border-top: 1px solid #dee6eb
}
.main .cost .simulation .result .item01 .num, .main .cost .simulation .result .item02 .num {
	font-family: Roboto, "Noto Sans JP", sans-serif!important
}
.main .cost .simulation .result .item01 td, .main .cost .simulation .result .item01 th {
	padding: .2rem 0 .18rem;
	background: #f7fcff;
	font-weight: 700;
	line-height: 1
}
.main .cost .simulation .result .item01 th {
	padding-left: .32rem
}
.main .cost .simulation .result .item01 th .note {
	line-height: 1.5;
	padding: .12rem 0 0;
	color: #7c8386;
	font-size: .12rem;
	font-weight: 400
}
.main .cost .simulation .result .item01 th .note::after, .main .cost .simulation .result .item01 th .note::before {
	content: "";
	display: block;
	height: 0;
	width: 0
}
.main .cost .simulation .result .item01 th .note::before {
	margin-bottom: -.25 em
}
.main .cost .simulation .result .item01 th .note::after {
	margin-top: -.25 em
}
.main .cost .simulation .result .item01 th .note li {
	padding: 0 0 0 1em;
	text-indent: -1em
}
.main .cost .simulation .result .item01 td {
	width: 2.2rem;
	padding-right: .52rem;
	text-align: right
}
.main .cost .simulation .result .item01 td .num {
	margin: 0 .14rem 0 0;
	font-size: .2rem
}
.main .cost .simulation .result .item02 td, .main .cost .simulation .result .item02 th {
	height: .55rem;
	vertical-align: middle
}
.main .cost .simulation .result .item02 th {
	padding: 0 0 0 .72rem
}
.main .cost .simulation .result .item02 th a {
	color: #09f;
	text-decoration: underline;
	transition: opacity
}
html:not(.mobile) .main .cost .simulation .result .item02 th a:hover {
	opacity: .6
}
.main .cost .simulation .result .item02 td {
	width: 2.2rem;
	padding: 0 .52rem 0 0;
	text-align: right
}
.main .cost .simulation .result .item02 td .num {
	margin: 0 .14rem 0 0;
	font-size: .18rem
}
.main .cost .simulation .result .item02 td .note {
	margin: 0 0 0 .04rem;
	font-size: .12rem;
	color: #7c8386
}
.main .cost .simulation .result>.note {
	border-top: 1px solid #dee6eb;
	padding: .2rem .12rem 0;
	color: #7c8386;
	font-size: .14rem;
	line-height: 1;
	text-align: right
}
.main .cost .simulation .contact {
	padding: .44rem .24rem
}
.main .cost .simulation .contact .text {
	font-size: .24rem;
	font-weight: 700;
	line-height: 1.5;
	text-align: center
}
.main .cost .simulation .contact .text.errormessage001 {
	color: #ed4063;
	font-weight: 400
}
.main .cost .simulation .contact .button {
	width: 1.51rem;
	margin: .32rem auto 0
}
.main .cost .simulation .error {
	padding: .44rem .24rem
}
.main .cost .simulation .error .text {
	color: #ed4063;
	font-size: .24rem;
	line-height: 1.5;
	text-align: center
}
.main .cost .postscript {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	gap: .36rem
}
.main .cost .postscript h5 {
	padding: .02rem .4rem 0
}
.main .cost .postscript-detail {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .4rem
}
.main .cost .postscript-detail li {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: .48rem .6rem;
	border-radius: .5rem .5rem .5rem 0;
	background: #f1faff;
	font-size: .24rem;
	line-height: .12rem;
	width: 2.3rem;
}
.main .cost .postscript-detail li h6 {
	font-size: .24rem;
	font-weight: 700
}
.main .cost .postscript-detail li p {
	font-weight: 500
}
.main .cost .postscript-detail li p:nth-last-child(1) {
	font-size: .2rem
}
.main .cost .postscript-detail li span {
	font-weight: 700
}
.main .cost .postscript-detail li span.text-xl12 {
	display: inline-block;
	margin-right: .02rem;
	vertical-align: -.04rem
}

.blue-gradient {
    display: inline-block;
    padding: .02rem .16rem 0;
    color: #fff;
    font-weight: 700;
    border-radius: .08rem;
    background: linear-gradient(90deg, #01b8fa 0, #0196f2 100%);
}

@media screen and (max-width:750px) {
	.main .cost-inner {
		gap: .28rem;
		width: 100%;
		padding: .48rem .2rem 0;
		border: none
	}
	.main .cost-inner h1 {
		gap: .28rem;
		font-size: .24rem
	}
	.main .cost-inner h1::before {
		width: .68rem;
		height: .68rem
	}
	.main .cost .initial .inner {
		flex-wrap: wrap;
		justify-content: center
	}
	.main .cost .initial .inner .detail {
		padding: 0
	}
	.main .cost .initial .inner .detail:nth-last-child(1) {
		padding: .08rem 0 0;
		border-top: 1px solid #dee6eb
	}
	.main .cost .initial .inner .text-border {
		display: none
	}
	.main .cost .simulation {
		padding: .2rem 0
	}
	.main .cost .simulation h3 {
		font-size: .2rem
	}
	.main .cost .simulation .form {
		padding: .36rem .24rem .32rem
	}
	.main .cost .simulation .form.marketoForm .block-button {
		padding: .24rem 0 0
	}
	.main .cost .simulation .form .block {
		display: block
	}
	.main .cost .simulation .form .block .label {
		width: auto;
		border-right: none;
		border-bottom: 1px solid #dee6eb;
		padding: 0 0 .2rem;
		font-size: .18rem;
		text-align: center
	}
	.main .cost .simulation .form .block .input, .main .cost .simulation .form .block .list {
		width: auto
	}
	.main .cost .simulation .form .block01 .label {
		line-height: 1
	}
	.main .cost .simulation .form .block01 .input {
		justify-content: space-between;
		padding: .24rem 0 0;
		line-height: .4rem
	}
	.main .cost .simulation .form .block01 .input input {
		box-sizing: border-box;
		width: 100%;
		padding: .12rem .24rem;
		border-radius: 99rem;
		font-size: .16rem;
		border: 1px solid #c3c8cb;
		box-shadow: none
	}
	.main .cost .simulation .form .block01 .input .unit {
		margin: 0
	}
	.main .cost .simulation .form .block02 {
		margin: .36rem 0 0
	}
	.main .cost .simulation .form .block02 .label {
		line-height: 1
	}
	.main .cost .simulation .form .block02 .list {
		padding: .08rem 0 0
	}
	.main .cost .simulation .form .block02 .list .note {
		padding: 0
	}
	.main .cost .simulation .form .block02 .list label {
		box-sizing: border-box;
		width: 50%;
		margin: .16rem 0 0;
		padding: 0 0 0 .32rem;
		font-size: .14rem;
		line-height: .24rem
	}
	.main .cost .simulation .form .block02 .list label.sizeL {
		width: 100%
	}
	.main .cost .simulation .form .block02 .list label .marker {
		width: .24rem;
		height: .24rem;
		position: absolute;
		top: 0
	}
	.main .cost .simulation .form .button {
		margin: .32rem auto 0;
		transform: none
	}
	.main .cost .simulation .contact, .main .cost .simulation .error, .main .cost .simulation .result {
		margin: .8rem 0 0
	}
	.main .cost .simulation .contact::before, .main .cost .simulation .error::before, .main .cost .simulation .result::before {
		width: .64rem;
		height: .26rem;
		top: -.56rem
	}
	.main .cost .simulation .result {
		padding: .4rem .08rem .28rem
	}
	.main .cost .simulation .result .total {
		padding: 0 0 .28rem;
		font-size: .24rem
	}
	.main .cost .simulation .result .total .label {
		margin: 0 0 .12rem
	}
	.main .cost .simulation .result .total strong {
		font-size: .47rem
	}
	.main .cost .simulation .result .item01 th {
		padding: .16rem 0 .16rem .1rem;
		font-size: .14rem;
		line-height: 1.4285714286
	}
	.main .cost .simulation .result .item01 th .note {
		margin: .04rem 0 0
	}
	.main .cost .simulation .result .item01 th .note li+li {
		margin: .08rem 0 0
	}
	.main .cost .simulation .result .item01 td {
		width: 1.2rem;
		padding: .32rem .1rem 0 0;
		line-height: 1;
		vertical-align: top
	}
	.main .cost .simulation .result .item01 td .num {
		margin: 0 .04rem 0 0;
		font-size: .16rem
	}
	.main .cost .simulation .result .item02 td, .main .cost .simulation .result .item02 th {
		height: auto
	}
	.main .cost .simulation .result .item02 th {
		padding: .16rem 0 .16rem .24rem;
		font-size: .14rem;
		line-height: 1.4285714286
	}
	.main .cost .simulation .result .item02 td {
		padding: 0 .1rem 0 0;
		line-height: 1
	}
	.main .cost .simulation .result .item02 td .num {
		margin: 0 .1rem 0 0;
		font-size: .16rem
	}
	.main .cost .simulation .result .item02 td .note {
		display: block;
		margin: .04rem 0 0
	}
	.main .cost .simulation .result .item02 td .small {
		font-size: .12rem
	}
	.main .cost .simulation .result .nextengine .item02 td {
		width: 1.1rem
	}
	.main .cost .simulation .result .external .item02 td {
		width: 1.5rem
	}
	.main .cost .simulation .result>.note {
		padding: .2rem .1rem 0;
		font-size: .12rem;
		text-align: left
	}
	.main .cost .simulation .contact {
		padding: .24rem
	}
	.main .cost .simulation .contact .text {
		font-size: .16rem
	}
	.main .cost .simulation .error {
		padding: .24rem
	}
	.main .cost .simulation .error .text {
		font-size: .16rem
	}
	.main .cost .postscript {
		gap: .28rem;
		width: 100%;
		padding: 0 0 .48rem;
	}
	.main .cost .postscript-detail {
		flex-direction: column;
		gap: .28rem;
		width: 100%
	}
	.main .cost .postscript-detail li {
		padding: .48rem .2rem;
		width: 100%;
		box-sizing: border-box;
	}
}

@media screen and (-ms-high-contrast:none) {
	.main .cost .simulation .form .block01 .input input {
		box-shadow: inset 0 0 0 1px #c3c8cb
	}
	.main .cost .simulation .form .block02 .list label .marker {
		box-shadow: inset 0 0 0 1px #c3c8cb
	}
}