@charset "utf-8";

@media screen and (min-width: 641px) {
	#calc {
		background: 
		position: relative;
	}

	#calc p {
		margin-bottom: 0;
	}

	#calc .open_new{
		content:".";
		position: relative;
		top: 5px;
		display: inline-block;
		width: 20px;
		height: 20px;
		cursor: help;
		background: url(/img/icon_tip2.png) no-repeat;
		background-size: contain;
	}
	#calc .open_new img{
		display: none;
	}
	#calc .open_new:hover img{
		display: block;
		position:absolute;
		left: 20px;
		border:1px solid #999;
		box-shadow:#999;
		z-index: 2000000000;
	}

	/*--------------------------------------
		calc_initiator
	--------------------------------------*/
	#calc_initiator {
		padding: 0 !important;
	}
	
	#calc_initiator h2 {
		position: relative;
		margin: 0 0 20px 15px;
		font-size: 185%;
		text-align: center;
		background: #b41d23;
	}
	#calc_initiator h2::before {
		display: block;
		content: "";
		position: absolute;
		top: -15px;
		left: -15px;
		width: 74px;
		height: 74px;
		background: url(/img/bg_calc_h2.png) no-repeat;
	}

	#calc_initiator h2 + p {
		font-size: 140%;
		color: #fff;
		text-align: center;;
		background: #a6a6a6;
	}

	#calc_initiator>div {
		padding: 0 0 15px;
		background: #fdeced;
	}

	#calc_initiator>div:after {
		content: ".";
		display: block;
		height: 0;
		clear: both;
		visibility: hidden;
	}

	/*--------------------------------------
		calc_initiator_require
	--------------------------------------*/
	#calc_initiator_require {
		padding: 13px 7px 0;
	}

	#calc_initiator_require > p {
		line-height: 1.2;
		text-align: center;
		font-size: 150%;
	}
	#calc_initiator_require > p b {
		color: #d00;
		font-weight: normal;
	}
		
	#calc_initiator_require ul {
		clear: both;
		list-style: none;
		padding: 15px;
		background: #fff;
	}
	#calc_initiator_require ul:after {
		content: ".";
		display: block;
		height: 0;
		clear: both;
		visibility: hidden;
	}
	#calc_initiator_require ul li {
		float: left;
		width: 50%;
		margin: 0 0 10px;
	}

	#calc_initiator_require ul li span {
		float: left;
		display: block;
		width: 12%;
		color: #e50000;
		font-weight: bold;
		font-size: 18px;
	}
	#calc_initiator_require select {
		box-sizing: border-box;
		width: 78%;
		padding: 8px 0;
		font-size: 100%;
		border-radius: 5px;
	}

	#calc_initiator_require select.decoration1 {
		animation: decoration1 1s ease infinite;
		border: 1px solid #f00;
	}

	/*--------------------------------------
		calc_initiator_result
	--------------------------------------*/
	#calc_initiator_result{
		position: relative;
		clear: both;
		margin: 0 7px;
		padding: 5px 2% 8px;
		background: #fff;
	}

	#attention_before_calc {
		height: 100px;
		line-height: 100px;
		color: #737373;
		font-size: 20px;
		font-weight: bold;
		text-align: center;
		border: 2px solid #dbdbdb;
		border-radius: 8px;;
		background: #ededed;
	}

	#loading {
		position: absolute;
		left: 0;
		top: 50%;
		z-index: 100;
		display: block;
		width: 100%;
		text-align: center;
		font-size: 120%;
		font-weight: bold;
	}

	#calc_initiator_confirm {
		display: none;
		margin-top: 10px;
	}

	#calc_initiator_confirm div {
		margin-top: 10px;
	}

	#calc_initiator_confirm span.car {
		font-weight: bold;
	}

	#initiator_valuation {
		clear: both;
		text-align: center;
	}

	#initiator_valuation ul {
		text-align: center;
		list-style: none;
	}

	#initiator_valuation li {
		position: relative;
		display: inline-block;
		margin-left: 15px;
		font-size: 18px;
		width: 179px;
		padding: 0;
		line-height: 30px;
		border: 5px solid #f7c1bc;
		border-radius: 8px;;
	}
	#initiator_valuation li+li {
		margin-left: 40px;
	}

	#initiator_valuation li p {
		color: #7b555e;
		font-size: 20px;
		font-weight: bold;
		background: #f7c1bc;
	}

	#initiator_valuation li b {
		line-height: 40px;
		font-size: 27px;
		color: #e50000;
	}

	#initiator_valuation li .plus {
		position: absolute;
		top: 19px;
		left: -41px;
		width: 30px;
		height: 30px;
		color: #7b555e;
		line-height: 30px;
		font-size: 20px;
		background: #f7c1bc;
		border-radius: 30px;
	}

	#initiator_valuation li img {
		position: absolute;
		bottom:0;
		right: 0;
	}


	/*--------------------------------------
		attention_after_calc
	--------------------------------------*/
	#attention_after_calc {
		display: none;
		clear: both;
		text-align: center;
		padding: 6px 0;
	}

	#attention_after_calc > p {
		position: relative;
		padding-bottom: 40px;
		font-size: 21px;
		font-weight: bold;
		color: #7b555e;
		text-align :center;
	}

	#attention_after_calc > p:after {
		position: absolute;
		bottom: 10px;
		left: 50%;
		transform: translate(-50%);
		content: "";
		border-top: 30px solid #f7c1bc;
		border-right: 30px solid transparent;
		border-left: 30px solid transparent;
	}

	/* form */
	#attention_after_calc dl {
		position: relative;
		top: -1px;
		text-align: left;
	}

	#attention_after_calc dt {
		position: relative;
		float: left;
		clear: left;
		width: 10em;
		padding-top: 0.8em;
		padding-left: 0.8em;
		border-top: 1px #dedede solid;
		color: #000;
	}

	#attention_after_calc dt.required:after {
		position: absolute;
		right: 0;
		display: inline-block;
		padding: 1px 3px;
		content:"必須";
		color: #fff;
		background-color: #d00;
		border-radius: 5px;;
	}

	#attention_after_calc dd {
		margin-left: 10.2em;
		padding: 0.8em 0 0.8em 0.9em;
		border-top: 1px #dedede solid;
		background-color: #fff;
	}

	.mitsumori input,
	.mitsumori select,
	.mitsumori textarea{
		width: 90%;
		padding: 5px 0;
		font-size: 100%;
		border-radius: 5px;
	}
	#remark {
		width: 90%;
	}
	#address_area , #address_area2 {
		width: 44%;
	}

	#formsubmit {
		clear: both;
		overflow: hidden;
		position: relative;
		top: 8px;
		display: block;
		width: 400px;
		margin: 0 auto 30px;
		line-height: 30px;
		color: #fff;
		font-size: 23px;
		font-weight: normal;
		text-align: center;
		animation: decoration2 2s ease infinite;
		animation-delay: 3s;
		background: linear-gradient(#5ab0ff 2%, #0049aa 98%);
		border-radius: 10px;
	}
	#formsubmit::first-line {
		line-height: 32px;
		font-size: 20px;
	}
	
	#formsubmit::before {
		content: '';
		position: absolute;
		top: 0px;
		left: -200%;
		width: 300%;
		height: 100%;
		background: linear-gradient(120deg, rgba(255, 255, 255, 0) 33.33%, rgba(255, 255, 255, 0) 33.33%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 66.66%, rgba(255, 255, 255, 0) 66.66%);
		animation: decoration3 5s ease infinite;
		animation-delay: 3s;
	}
	#formsubmit::after {
		position: absolute;
		top: 0px;
		right: 0;
		content: "➡";
		width: 53px;
		height: 64px;
		line-height: 64px;
		clip-path: polygon(0% 100%, 21.5% 0%, 100% 0%, 100% 100%);
		background: linear-gradient(#1694ff 2%, #003e80 98%);
		border-radius: 10px 10px 10px 0;
	}
	#formsubmit:hover{
		text-decoration: none;
		background: linear-gradient(#016eae 2%, #2bd4fd 98%);
	}
	#formsubmit:hover::after{
		background: linear-gradient(#00588d 2%, #0897e7 98%);
	}
	#formsubmit b{
		font-size: 28px;
	}


	@keyframes decoration1 {
		0% {box-shadow: 0px 0px 0px 2px rgba(255, 0, 0, 0.5), 0px 0px 0px 0px rgba(255, 0, 0, 0.5);}
		100% {box-shadow: 0px 0px 0px 2px rgba(255, 0, 0, 0.5), 0px 0px 0px 10px rgba(255, 255, 255, 0);}
	}
	@keyframes decoration2 { 10% { transform: scale(1); } 50% { transform: scale(0.96); } 90% { transform: scale(1); } }
	@keyframes decoration3 { 0% { left: -200%; } 20% { left: 0%; } 100% { left: 0%; } }


	/* other */
	.calc_hiddens {
		display: none;
	}

	#example em {
		font-size: 180%;
		color: #d00;
		padding: 0 3px;
	}
}