@charset "EUC-JP";
@import url("https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap");

#contents * {
	box-sizing: border-box;
}

/* contents */
#contents {
	width: auto;
	font-family: Roboto, Helvetica, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Osaka, sans-serif;
}
#main {
	position: relative;
	width: 960px;
	margin: 0 auto;
	padding-top: 0;
	font-size: 14px;
}

/* topicpath */
.topicpathWrap {
	border-bottom: none;
}
#main > section {
	margin-bottom: 80px;
}
#main > section.estimateArea {
	margin-bottom: 60px;
}
#main > section.planArea {
	margin-bottom: 50px;
}

/* module */
.textEmphasis,
.textError {
	color: #e00923;
}

/* 吹き出し会話 */
.BalloonArea {
	width: 660px;
	margin: 0 auto 50px;
}
.balloonOperator {
	position: relative;
	overflow: hidden;
	padding: 10px 0 10px;
	margin-top: -20px;
}
.balloonOperator::before {
	display: block;
	position: absolute;
	top: 0;
	left: 80px;
	z-index: 1;
	width: 20px;
	height: 16px;
	margin: 0;
	border: none;
	border-radius: 0 0 0 100%;
	background: #fdf2f4;
	content: "";
}
.balloonOperator::after {
	display: block;
	visibility: visible;
	position: absolute;
	top: -6px;
	left: 80px;
	width: 24px;
	height: 10px;
	z-index: 2;
	margin: 0;
	border: none;
	border-radius: 0 0 50% 50%;
	background: #fff;
	content: "";
}
.balloonOperator > span {
	display: inline-block;
	position: relative;
	z-index: 3;
	padding: 10px 12px;
	border-radius: 20px;
	background: #fdf2f4;
	font-size: 14px;
	line-height: 1.5;
	word-break: break-all;
}
.balloonOperator.icon::before {
	top: 18px;
}
.balloonOperator.icon::after {
	top: 14px;
}
.balloonOperator.icon > span {
	margin: 10px 0 0 87px;
}
.balloonOperator.icon > span::before {
	display: block;
	position: absolute;
	top: -19px;
	left: -87px;
	width: 84px;
	height: 70px;
	margin: auto;
	background: transparent url("https://img.goo-net.com/cache/newcar/help/simulation/sprite_icon_lp.png") no-repeat 0 -136px;
	background-size: 84px;
	content: "";
}
.balloonUser {
	position: relative;
	overflow: hidden;
	text-align: right;
	padding: 10px 0 10px;
}
.balloonUser::before {
	display: block;
	position: absolute;
	right: 80px;
	bottom: 0;
	z-index: 1;
	width: 20px;
	height: 16px;
	margin: 0;
	border: none;
	border-radius: 0 100% 0 0;
	background: #ef4f63;
	content: "";
}
.balloonUser::after {
	display: block;
	visibility: visible;
	position: absolute;
	right: 79px;
	bottom: -6px;
	width: 24px;
	height: 10px;
	z-index: 2;
	margin: 0;
	border: none;
	border-radius: 0 50% 50% 0;
	background: #fff;
	content: "";
}
.balloonUser > span {
	display: inline-block;
	position: relative;
	z-index: 3;
	padding: 10px 13px;
	border-radius: 20px;
	background: #ef4f63;
	color: #fff;
	font-size: 14px;
	text-align: left;
	line-height: 1.5;
	word-break: break-all;
}
.balloonUser.icon::before {
	bottom: 18px;
}
.balloonUser.icon::after {
	bottom: 14px;
}
.balloonUser.icon > span {
	margin: 10px 88px 10px 0;
}
.balloonUser.icon > span::before {
	display: block;
	position: absolute;
	top: -10px;
	right: -100px;
	width: 84px;
	height: 70px;
	margin: auto;
	background: transparent url("https://img.goo-net.com/cache/newcar/help/simulation/sprite_icon_lp.png") no-repeat 0 -206px;
	background-size: 84px;
	content: "";
}
.balloonUser.myCarUser > span::before {
	margin-top: 20px;
}
.estimateUser {
	margin-top: -30px;
}

/* タイトル */
.titleBox {
	padding-bottom: 84px;
}
.titleLarge {
	font-size: 24px;
	font-weight: bold;
}
.titleUnderline {
	position: relative;
}
.titleUnderline::before {
	content: "";
	position: absolute;
	bottom: -7px;
	display: block;
	width: 30px;
	height: 2px;
	left: 50%;
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
	background-color: #e00923;
}
.titleUnderline.mycar::after,
.titleUnderline.changecar::after,
.titleUnderline.estimate::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 60px;
	display: inline-block;
	margin: auto;
}
.titleUnderline.mycar::after {
	width: 50px;
	height: 39px;
	background: transparent url("https://img.goo-net.com/cache/newcar/help/simulation/sprite_icon_lp.png") no-repeat 0 0;
}
.titleUnderline.changecar::after {
	width: 84px;
	height: 46px;
	margin-top: -7px;
	background: transparent url("https://img.goo-net.com/cache/newcar/help/simulation/sprite_icon_lp.png") no-repeat 0 -39px;
}
.titleUnderline.estimate::after {
	width: 60px;
	height: 51px;
	background: transparent url("https://img.goo-net.com/cache/newcar/help/simulation/sprite_icon_lp.png") no-repeat 0 -85px;
}

/* 注釈 */
.noteArea {
	background: #fafafa;
	padding: 20px;
	line-height: 1.5;
	font-size: 12px;
}
.noteArea .noteIndent {
	padding-left: 2em;
	text-indent: -2em;
}
.asterisk {
	font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Osaka, sans-serif;
}
.subText a {
	font-size: 10px;
	position: relative;
	top: 0;
	color: #4a90e2;
}
.subText a:hover {
	text-decoration: underline;
}

/* sectionAfter */
.sectionAfter,
.simulationHeadingAreaAfter {
	border-radius: 50%;
	height: 8px;
	width: 8px;
	background: #fff;
	border: 2px solid #ef4f63;
	position: relative;
	margin: 0 auto;
}
.sectionAfter::after,
.simulationHeadingAreaAfter::after {
	content: "";
	display: inline-block;
	background: #ef4f63;
	width: 34px;
	height: 2px;
	visibility: visible;
	-webkit-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	transform: rotate(-90deg);
	position: absolute;
	right: -15px;
	bottom: -22px;
}
.sectionAfter {
	margin: 50px auto;
}

/* シミュレーションボタン */
.simulationBtnArea {
	box-sizing: border-box;
	text-align: center;
	position: relative;
	margin-top: 55px;
}
.simulationBtn {
	display: inline-block;
	position: relative;
	width: 340px;
	height: 50px;
	padding: 0 0 0 60px;
	border: none;
	border-radius: 4px;
	box-sizing: border-box;
	background: #e00923;
	color: #fff;
	font-size: 14px;
	font-weight: bold;
	line-height: 50px;
	text-align: center;
	vertical-align: middle;
	transition: none;
}
.simulationBtn span {
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 60px;
	height: 50px;
	padding: 0;
	margin: auto;
	border-radius: 4px 0 0 4px;
	box-sizing: border-box;
	background: #ef4f63;
	color: #fff;
	line-height: 50px;
	text-align: center;
}
.simulationBtn:hover {
	text-decoration: none;
	opacity: 0.7;
	cursor: pointer;
}
.checkText {
	position: absolute;
	top: 14px;
	left: 178px;
}
.checkText p {
	position: relative;
	padding-right: 12px;
	font-weight: bold;
}
.checkText::before {
	background: #ffc0c6;
	content: "";
	position: absolute;
	right: 12px;
	top: -13px;
	display: inline-block;
	width: 65px;
	height: 1px;
	-webkit-transform: rotate(9deg);
	-ms-transform: rotate(9deg);
	transform: rotate(9deg);
}
.checkText::after {
	background: #ffc0c6;
	content: "";
	position: absolute;
	right: 12px;
	top: 35px;
	display: block;
	width: 65px;
	height: 1px;
	-webkit-transform: rotate(-9deg);
	-ms-transform: rotate(-9deg);
	transform: rotate(-9deg);
	visibility: visible
}
.simulationBtnWrap {
	background: #f1f1f1;
	padding: 40px;
	box-sizing: border-box;
	text-align: center;
	margin-bottom: 40px;
	margin-top: 60px;
}
.simulationBtnArea .note,
.simulationBtnWrap .note {
	font-size: 12px;
	font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Osaka, sans-serif;
}

/* ページトップ */
#pagetop a:hover {
	opacity: 0.7;
}


/* シミュレーション
-------------------------------*/
.simulationHeadingArea {
	background: #fdf2f4;
	color: #636363;
	padding: 25px 0 23px 0;
	position: relative;
}
.simulationHeadingText {
	margin-left: 90px;
}
.simulationHeading {
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 20px;
	margin-left: 37px;
}
.simulationHeading span {
	font-size: 24px;
	font-weight: bold;
	color: #fff;
	background: #ef4f63;
	padding: 6px 20px 5px 25px;
	display: block;
	position: relative;
	width: 18.1em;
	margin-left: -37px;
	margin-top: 8px;
}
.simulationHeading span::before {
	position: absolute;
	content: "";
	left: 0;
	top: -2px;
	border: none;
	border-left: solid 16px #fdf2f4;
	border-bottom: solid 47px transparent;
}
.simulationHeading span::after {
	position: absolute;
	content: "";
	right: 0;
	top: -2px;
	border: none;
	border-right : solid 16px #fdf2f4;
	border-top: solid 47px transparent;
}
.simulationHeadingBtn {
	display: inline-block;
	position: relative;
	width: 280px;
	height: 32px;
	padding-left: 40px;
	border: #ef4f63 1px solid;
	border-radius: 4px;
	box-sizing: border-box;
	background: #fff;
	color: #636363;
	font-size: 14px;
	font-weight: bold;
	line-height: 32px;
	text-align: center;
	vertical-align: middle;
	transition: none;
	margin-left: 76px;
}
.simulationHeadingBtn span {
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	padding-right: 10px;
	border-radius: 4px 0 0 4px;
	box-sizing: border-box;
	color: #ef4f63;
	text-align: center;
	border-right: 1px solid #ffc0c6;
	margin: auto 12px;
	height: 22px;
	line-height: 22px;
}
.simulationHeadingBtn::after {
	content: "";
	position: absolute;
	top: 11px;
	right: 10px;
	display: block;
	height: 8px;
	width: 8px;
	border-right: solid 1px #e00923;
	border-bottom: solid 1px #e00923;
	box-sizing: border-box;
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
	margin: 0;
}
.simulationHeadingBtn:hover {
	text-decoration: underline;
}
.simulationHeadingImg {
	position: absolute;
	top: 8px;
	right: 60px;
}
.simulationBalloon {
	margin: 55px auto 40px;
}
.simulationDescription {
	width: 700px;
	height: 180px;
	border: 1px solid #d5d5d5;
	padding: 30px 10px 0 40px;
	margin: auto;
	margin-bottom: 10px;
	display: -ms-flexbox;
	display: flex;
}
.simulationDescription img {
	min-width: 203px;
}
.descriptionText {
	padding-left: 32px;
	line-height: 1.45;
	-ms-flex: 0 1 auto;
}
.descriptionEmphasis {
	font-weight: bold;
	background:linear-gradient(transparent 60%, #fdf2f4 60%);
}
.descriptionText a {
	font-weight: bold;
	text-decoration: underline;
	color: #4a90e2;
}
.descriptionText a:hover {
	text-decoration: none;
}


/* マイカー登録
-------------------------------*/
.priceSimulation {
	display: -ms-flexbox;
	display: flex;
	margin-bottom: 80px;
	margin-top: 45px;
}
.tradePriceWrap {
	width: 720px;
	display: -ms-flexbox;
	display: flex;	
}
.tradePriceTitle .current,
.tradePriceTitle .next {
	font-size: 16px;
	font-weight: bold;
	background: #efefef;
	width: 180px;
	height: 32px;
	text-align: center;
	border-radius: 16px;
	line-height: 32px;
	padding-top: 1px;
	margin-top: 1px;
}
.tradePriceTitle .next {
	margin-top: 72px;
}
.tradePriceGraph {
	margin: 0 12px 0 25px;
}
.tradePriceDesc {
	position: relative;
	margin-top: -11px;
}
.tradePriceDesc .current,
.tradePriceDesc .next {
	font-size: 20px;
	color: #e00923;
	font-weight: bold;
}
.tradePriceDesc .next {
	position: absolute;
	top: 103px;
}
.tradePriceDesc .priceNum {
	font-size: 36px;
}
.nextCarInspection {
	padding: 10px 22px 15px;
	border: 1px solid #e00923;
	border-radius: 8px;
	background: #fff;
	color: #333;
	width: 177px;
	height: 100px;
	font-size: 12px;
	text-align: center;
	position: relative;
	line-height: 1.2;
	margin-top: -10px;
}
.nextCarInspection p{
	text-align: left;
}
.nextCarInspection .price {
	font-size: 20px;
	color: #e00923;
	font-weight: bold;
	border-bottom: 2px solid #e00923;
}
.nextCarInspection .priceNum {
	font-size: 40px;
}
.nextCarInspection img {
	margin-top: -6px;
	margin-left: -40px;
}


/* 乗り換えたいクルマ
-------------------------------*/
.changeCarSimulation {
	margin: 50px auto 30px;
	width: 610px;
	display: -ms-flexbox;
	display: flex;
	padding-left: 25px;
}
.newcarBox {
	width: 300px;
}
.newcarPrice {
	width: 160px;
	height: 100px;
	border: 1px solid #d5d5d5;
	border-radius: 4px;
	font-size: 16px;
	text-align: center;
	padding-top: 15px;
	position: relative;
	display: inline-block;
	margin-left: 56px;
	margin-top: 10px;
}
.newcarPrice::before,
.newcarPrice::after {
	content: "";
	border: 14px solid transparent;
	position: absolute;
	left: 50%;
	margin-left: -14px;
}
.newcarPrice::before {
	border-top-color: #d5d5d5;
	bottom: -28px;
}
.newcarPrice::after {
	border-top-color: #fff;
	bottom: -27px;
}
.newcarPrice dd {
	font-size: 20px;
	font-weight: bold;
	line-height: 0.9;
	margin-left: -7px;
}
.newcarPrice .priceNum {
	font-size: 40px;
}
.newcarImg {
	margin-top: 20px;
}
.priceBox {
	width: 310px;
	padding-left: 22px;
	margin-right: -25px;
	background: transparent url("https://img.goo-net.com/cache/newcar/help/simulation/img_coin.png") no-repeat top right;
}
.tradeinPrice {
	width: 230px;
	height: 40px;
	font-size: 16px;
	background: #f1f1f1;
	display: table;
	border-radius: 4px;
	padding: 0 15px;
	line-height: 40px;
	position: relative;
}
.tradeinPrice::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 100%;
	margin-top: -10px;
	border: 10px solid transparent;
	border-left: 10px solid #f1f1f1;
}
.tradeinPrice {
	margin-top: 55px;
}
.tradeinPrice dd,
.discountPrice dd {
	font-weight: bold;
	display: table-cell;
	text-align: right;
}
.tradeinPrice .priceNum,
.discountPrice .priceNum {
	font-size: 24px;
}
.expectedPrice {
	padding: 20px 5px;
	border: 1px solid #e00923;
	border-radius: 4px;
	background: #fff;
	color: #e00923;
	width: 230px;
	height: 100px;
	text-align: center;
	font-size: 16px;
	font-weight: bold;
	position: relative;
	line-height: 1.2;
	margin-top: 87px;
}
.expectedPrice::before,
.expectedPrice::after {
	content: "";
	position: absolute;
	top: 50%;
	border: 10px solid transparent;
	margin-top: -10px;
}
.expectedPrice::before {
	right: -20px;
	border-left-color: #fff;
	z-index: 2;
}
.expectedPrice::after {
	right: -21px;
	border-left-color: #e00923;
	z-index: 1;
}
.expectedPrice .priceNum {
	font-size: 40px;
}


/* 見積もり依頼
-------------------------------*/
.estimateArea {
	padding-top: 10px;
}
.stepList {
	width: 602px;
	margin: 30px auto 0;
	overflow: hidden;
	zoom: 1;
}
.stepList::after {
	display: block;
	clear: both;
	content: "";
}
.stepList li {
	position: relative;
	float: left;
	width: 170px;
	margin: 0 46px 0 0;
}
.stepList li:last-child {
	margin: 0;
}
.stepList .thumb {
	margin-bottom: 10px;
	padding: 0;
	width: 170px;
	height: 170px;
}
.stepList .thumb img {
	max-width: 100%;
}
.stepList p {
	text-align: center;
}
.estimateBalloon {
	padding-top: 60px;
}