@charset "UTF-8";

#calculation {display: block;width: 100%;}
#calculation h2 {display: block;font-size: 28px;text-align: center;color: #333;padding-top: 10px;padding-bottom: 20px;}
#calculation h2 span {display: block;font-size: 16px;font-weight: normal;text-align: center;padding-top: 10px;}
#calculation div {display: flex;width: 100%;box-sizing: border-box;padding: 30px 0px;position: relative;}
#calculation p {display: block;width: 25%;box-sizing: border-box;text-align: center;}
#calculation p:nth-child(2) {width: 50%;}
#calculation input {text-align: right;padding-right: 1em;}
#calculation .titlearea {font-size: 18px;font-weight: bold;display: block;justify-content: center;align-items: center;color: #2B6791;}
#calculation .titlearea img {padding-bottom: 10px;}
#calculation .pricearea {display: flex;justify-content: center;align-items: center;font-size: 20px;font-weight: bold;}
#calculation .pricearea span {display: block;width: 120px;padding: 10px 0;background: #fff;}

#calculation div.first {border-top: 2px solid #999;border-left: 2px solid #999;border-right: 2px solid #999;border-bottom: 1px solid #bbb;padding: 40px 0;background: #f6f6f6;}
#calculation div.first .first_circle {display: block;text-align: center;font-size: 10px;color: #fff;background: rgba(44,0,172,1.00);border-radius: 100px;padding: 18px 0;line-height: 12px;position: absolute;top:46px;left: 147px;width: 84px;}
#calculation div.first .inputarea {padding-top: 40px;}

#calculation div.second {border-left: 2px solid #999;border-right: 2px solid #999;border-bottom: 1px solid #bbb;background: #f6f6f6;}
#calculation div.second .inputarea span {display: block;text-align: left;font-size: 13px;padding-left: 95px;padding-top: 10px;}
#calculation div.second small {display: block;text-align: left;font-size: 10px;padding-left: 95px;}

#calculation div.third {border-left: 2px solid #999;border-right: 2px solid #999;background: #f6f6f6;}
#calculation div.third .titlearea img {padding-top: 60px;}
#calculation div.third .titlearea span {font-size: 18px;font-weight: bold;}
#calculation div.third .titlearea small {display: block;font-size: 10px;font-weight: normal;}
#calculation div.third dl {display: flex;background: #fff;padding: 10px;}
#calculation div.third dl dt {padding: 0 20px;display: flex;justify-content: center;align-items: center;}
#calculation div.third dl dd {margin: 0;}
#calculation div.third ul {display: flex;border-bottom: 1px solid #bbb;}
#calculation div.third ul:nth-child(3) {border-bottom: none;}
#calculation div.third ul li {padding: 5px 15px;}

#calculation div.third2 {padding-top: 0;}
#calculation div.third2 .pricearea {padding-left: 35px;}

#calculation div.fourth {border-left: 2px solid #999;border-right: 2px solid #999;border-bottom: 1px solid #bbb;padding-top: 0;background: #f6f6f6;}
#calculation div.fourth .titlearea span {font-size: 18px;font-weight: bold;}
#calculation div.fourth .titlearea small {display: block;font-size: 10px;font-weight: normal;}
#calculation div.fourth dl {display: flex;background: #fff;padding: 10px;}
#calculation div.fourth dl dt {padding: 0 20px;display: flex;justify-content: center;align-items: center;}
#calculation div.fourth dl dd {margin: 0;}
#calculation div.fourth ul {display: flex;border-bottom: 1px solid #bbb;}
#calculation div.fourth ul:nth-child(3) {border-bottom: none;}
#calculation div.fourth ul li {padding: 5px 15px;}

#calculation div.fifth {border-left: 2px solid #999;border-right: 2px solid #999;border-bottom: 1px solid #bbb;background: #f6f6f6;}
#calculation div.fifth ul {display: flex;}
#calculation div.fifth ul li {padding: 0 25px;text-align: center;}
#calculation div.fifth ul li span {line-height: 40px;}

#calculation div.sixth {border-left: 2px solid #999;border-right: 1px solid #bbb;border-bottom: 2px solid #999;width: 55%;float: left;flex-wrap: wrap;height: 185px;padding-bottom: 0;background: #f6f6f6;}
#calculation div.sixth .titlearea {width: 100%;text-align: center;}
#calculation div.sixth .inputarea {width: 85%;margin: 20px auto 0;text-align: left;}

#calculation div.seventh {border-right: 2px solid #999;border-bottom: 2px solid #999;width: 45%;float: left;height: 185px;background: #f6f6f6;}
#calculation div.seventh .titlearea {width: 40%;padding: 20px 0 0 10px;}
#calculation div.seventh .pricearea {width: 60%;}
#calculation div.seventh .pricearea span {width: 150px;margin-top: -30px;}
#calculation div.seventh .commentarea {display: block;position: absolute;top:105px;right: 0px;width: 60%;text-align: center;}
#calculation div.seventh .commentarea span {display: block;width: 150px;padding: 10px 0;background: #fff;margin: -20px auto 0;}

#calculation div.eighth {clear: both;display: block;margin-top: 200px;}
#calculation div.eighth p {width: 100%;}
#calculation div.eighth p.titlearea {display: block;font-size: 24px;color: #2B6791;padding-bottom: 20px;}
#calculation div.eighth p.titlearea img {transform: translateY(26px);padding-right: 15px;padding-bottom: 0;}
#calculation div.eighth .eighth02 {margin-top: -30px;}
#calculation div.eighth .eighth02 img {padding-left: 20px;}

#calculation .plus {position: absolute;top:-22px;right: -2px;}
#calculation .plus2 {position: absolute;top:-22px;right: -2px;}
#calculation .plus3 {position: absolute;top:-22px;right: -2px;}
#calculation .equal {position: absolute;top:-22px;right: 48px;}

#calculation .plate {width: 12px;transform: translateY(-4px);padding-right: 5px;margin-left: -17px;}
#calculation .print {width: 10px;transform: translateY(-2px);padding-right: 5px;margin-left: -15px;}