/* ----------------------------------------
all
----------------------------------------*/
/*main * {
	background: aliceblue;}
main *:nth-child(2n) {
	background: mistyrose;}*/

/* ----------------------------------------
main
----------------------------------------*/
/* TOP
------------------------------*/
main {
	margin: 80px 0 0 0;}
main h2 {
	display: block;
	width: 1180px;
	height: 350px;
	margin: 0 auto 80px auto;
	border: 1px solid #f3f5f7;
	background:no-repeat url(/app/drapp/images/img_main_pc.jpg);
		text-indent: 100%;
		white-space: nowrap;
		overflow: hidden;}

/* -- startCarLife ---------- */
.startCarLife > h3 {
	width: 980px;
	margin: 0 auto 40px auto;
	color: #00adba;
	font-size: 4.6rem;
	font-weight: normal;
	text-align: center;
	line-height: 100%;}
.startCarLife > p {
	width: 980px;
	margin: 0 auto 40px auto;
	color: #545454;
	font-size: 1.6rem;
	text-align: center;
	line-height: 1.5;}

.stepWrap {
	width: 980px;
	height: 311px;
	margin: 0 auto 40px auto;
	background: url(/app/drapp/images/img_stepWrap_pc.jpg);
		text-indent: 100%;
		white-space: nowrap;
		overflow: hidden;}

/*downloadNow*/
.downloadNow {
	display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: flex-end;
	width: 980px;
	margin: 0 auto 80px auto;
	padding: 30px;
	background: #f3f5f7;}
.logoImg {
	width: 201px;
	height: 54px;
	margin: 0 0 24px 0;
	background: url(/app/drapp/images/img_logoDrapp.png);
		text-indent: 100%;
		white-space: nowrap;
		overflow: hidden;}

.copyArea {
	margin: 0 10px 0 0;}
.copyArea > p {
	color: #00adba;
	font-size: 3.8rem;
	line-height: 100%;}

.dlLinkArea > ul {
	display: flex;
		align-items: flex-end;}
.dlLinkArea > ul li {
	display: flex;
		align-items: flex-end;
	margin: 0 30px 0 0;}
	.dlLinkArea > ul li:last-child {
		margin-right: 0;}
.dlLinkArea .LINK {
	margin: 0 10px 0 0;}
.dlLinkArea .LINK > p {
	margin: 0 0 2px 0;
	color: #333;
	font-size: 1rem;
	line-height: 100%;}
.dlLinkArea .LINK > a {
	display: block;
	width: 172px;
	height: 57px;
	background-repeat: no-repeat;
	background-size: contain;
	transition: opacity 0.12s;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
		text-indent: 100%;
		white-space: nowrap;
		overflow: hidden;}
	.dlLinkArea .AppStore .LINK > a {
		background-image: url(/app/drapp/images/bnr_AppStore.png);}
	.dlLinkArea .GooglePlay .LINK > a {
		background-image: url(/app/drapp/images/bnr_Googleplay.png);}
	.dlLinkArea .LINK > a.hover {
		opacity: 0.8;}
.dlLinkArea .QR {
	margin: 0 0 -2px 0;
	width: 60px;
	height: 60px;}

.rightsNote {
	margin: 20px 0 0 0;
	color: #545454;
	font-size: 1rem;
	line-height: 100%;}

/* -- updateHistory ---------- */
.updateHistory {
	width: 980px;
	margin: 0 auto 80px auto;}
.updateHistory > h3 {
	margin: 0 0 40px 0;
	font-size: 2.8rem;
	font-weight: normal;
	line-height: 100%;}

.updateListArea {
	height: 167px;
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
	overflow-scrolling: touch;}
.updateListArea > li {
	display: flex;
		align-items: center;
	min-height: calc(167px / 3);
	margin: 0 20px 0 0;
	padding: 20px 24px;
	border-bottom: 1px solid #d0d5da;}
	.updateListArea > li:last-child {
		border-bottom: 0;}
.updateListArea time {
	min-width: 128px;
	margin: 0 10px 0 0;
	color: #555;
	font-size: 1.4rem;}
.updateListArea a {
	color: #333;
	font-size: 1.4rem;}
	.updateListArea a.hover {
		color: #e60012;}
.updateListArea p {
	color: #333;
	font-size: 1.4rem;}


/* ecoDrive
------------------------------*/
.ecoDrive {
	margin: 0 0 80px 0;
	padding: 100px 0 calc(100px - 65px) 0;
	background: #fbfbef;}
.ecoDrive > h3 {
	margin: 0 0 70px 0;
	color: #0093eb;
	font-size: 4rem;
	font-weight: normal;
	line-height: 100%;
	text-align: center;}

[class*="ecoStep"] {
	position: relative;
	width: 980px;
	margin: 0 auto 65px auto;}
[class*="ecoStep"] > img {
	position: absolute;
		top: 120px;
		left: 0;
	width: 510px;
	height: auto;}
[class*="ecoStep"] > h4,
[class*="ecoStep"] > p,
[class*="ecoStep"] > .list {
	width: 440px;
	margin: 0 0 0 auto;}
[class*="ecoStep"] > h4 {
	margin-bottom: 34px;
	color: #0093eb;
	font-size: 3.1rem;
	font-weight: normal;
	line-height: 3.6rem;}
[class*="ecoStep"] > p {
	margin-bottom: 30px;
	color: #333;
	font-size: 1.4rem;
	line-height: 2.6rem;}
		[class*="ecoStep"] > p > sup {font-size:0.9rem;}
[class*="ecoStep"] > p.notes {
	margin-bottom: 25px;
	color: #545454;
	font-size: 1rem;
	line-height: 1.8rem;}
[class*="ecoStep"] > p + p.notes {
	margin-top: -25px;}
	[class*="ecoStep"]:before {
		content: "";
		display: block;
		height: 120px;
		margin: 0 0 20px 0;
		background: no-repeat left;}
		.ecoStep1:before {background-image: url(/app/drapp/images/ecoStep_01_pc.gif);}
		.ecoStep2:before {background-image: url(/app/drapp/images/ecoStep_02_pc.gif);}
		.ecoStep3:before {background-image: url(/app/drapp/images/ecoStep_03_pc.gif);}
		.ecoStep4:before {background-image: url(/app/drapp/images/ecoStep_04_pc.gif);}
[class*="ecoStep"] > a.btn {
	position: relative;
	display: inline-block;
	min-width: 250px;
	padding: 21px 30px 19px 30px;
	color: #fff;
	font-size: 1.4rem;
	line-height: 100%;
	background: #00b5f9;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
	[class*="ecoStep"] > a.btn.hover {
		background: #005589;}
[class*="ecoStep"] > a.btn .redArrowS {
		right: 20px;
	border-color: #fff;}
[class*="ecoStep"] .list {
	display: flex;
		flex-wrap: wrap;
	margin-top: -20px;}
[class*="ecoStep"] .list li {
	width: 210px;
	margin: 0 18px 30px 0;}
	[class*="ecoStep"] .list li:nth-child(2n) {
		margin-right: 0;}
	[class*="ecoStep"] .list li:nth-last-child(-n+2) {
		margin-bottom: 0;}
[class*="ecoStep"] .list li h5 {
	margin: 0 0 20px 0;
	padding: 11px 10px 9px 10px;
	color: #0093eb;
	font-size: 1.4rem;
	text-align: center;
	line-height: 100%;
	border: 1px solid #0093eb;
	background: #fff;}
[class*="ecoStep"] .list li p {
	color: #545454;
	font-size: 1.2rem;}

/*even*/
[class*="ecoStep"]:nth-of-type(2n) > img {
		right: 0;
		left: auto;}
[class*="ecoStep"]:nth-of-type(2n) > h4,
[class*="ecoStep"]:nth-of-type(2n) > p,
[class*="ecoStep"]:nth-of-type(2n) > .list {
	margin-right: auto;
	margin-left: 0;}
	[class*="ecoStep"]:nth-of-type(2n):before {
		background-position: right;}


/* howToUse
------------------------------*/
.howToUse {
	width: 980px;
	margin: 0 auto 80px auto;}
.howToUse > h3 {
	margin: 0 0 65px 0;
	font-size: 2.8rem;
	font-weight: normal;
	line-height: 100%;}
/* -- TAB ---------- */
.hTUTab {
	display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
	width: 587px;
	margin: 0 auto 30px auto;
	text-align: center;}
.hTUTab > li {
	width: calc(100% / 3);
	border: 1px solid #0093eb;
	border-top: 0;
	border-left: 0;}
	.hTUTab > li:nth-child(3n) {
		border-right: 0;}
	.hTUTab > li:nth-last-child(-n+3) {
		border-bottom: 0;}
.hTUTab > li > a {
	position: relative;
	display: flex;
		justify-content: center;
		align-items: center;
	height: 100%;
	min-height: 64px;
	padding: 11px 30px 9px 30px;
	color: #fff;
	font-size: 1.4rem;
	font-weight: bold;
	background: #00b5f9;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
	.hTUTab > li > a.active,
	.hTUTab > li > a.hover {
		background: #0093eb;}
.hTUTab > li > a .redArrowS {
	left: 20px;
	border-color: #0093eb;}
	.hTUTab > li > a.active .redArrowS,
	.hTUTab > li > a.hover .redArrowS {
		border-color: #fff;}
	.hTUTab > li > a.active .redArrowS {
		transform: rotate(45deg);}
/*content*/
.hTUTab-content {
	width: 587px;
	margin: 0 auto 80px auto;}
.hTUTab-content > section {
	position: relative;
	height: 0;
	padding-bottom: 56.25%;
	overflow: hidden;}
.hTUTab-content > section iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;}

/* -- ACCORDION ---------- */
.hTUDetail {}
.howToUse .hTUDetail:nth-last-child(2) .accordion-btn {
	margin-bottom: 30px;
	border-bottom: 1px solid #d0d5da;
transition: margin 0.4s, border 0.4s}
	.howToUse .hTUDetail:nth-last-child(2) .accordion-btn.open {
		margin-bottom: 0;
		border-bottom: 0;}


.hTUDetail .accordion-btn:before,
.hTUDetail .accordion-btn:after {
		right: 30px;
	width: 21px;
	height: 3px;
	background: #d0d5da;}
.hTUDetail .accordion-btn > button {
	display: block;
	width: 100%;
	padding: 28px 100px 25px 30px;
	color: #333;
	font-size: 2.4rem;
	text-align: left;
	line-height: 100%;
	border-top: 1px solid #d0d5da;
	background: #fff;
	transition: background 0.12s;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
	.hTUDetail .accordion-btn.open > button,
	.hTUDetail .accordion-btn > button.hover {
		background: #f3f5f7;}
.hTUDetail .accordion-btn > button:after {
	position: absolute;
		top: 1px;
		right: 80px;
	content: "";
	display: block;
	width: 1px;
	height: calc(100% - 1px);
	background: #fff;}
.hTUDetail .accordion-btn > button > span {
	display: block;
	width: 100%;
	height: auto;
	margin: auto;
	background: none;}
.accordion-hTUDetail {
	margin: 0 0 calc(80px - 30px) 0;
	padding: 46px 0 0 0;
	overflow: hidden;}
	.accordion-hTUDetail.CPNONE {
		margin-bottom: calc(80px - 60px);}
.accordion-hTUDetail > img {
	width: 470px;
	height: 304px;
	border: 1px solid #f3f5f7;}
.accordion-hTUDetail img.float {
	float: right;
	margin: -16px 0 60px 40px;}
/*.accordion-hTUDetail p.float,
.accordion-hTUDetail strong.float {
	float: left;}*/
.accordion-hTUDetail p {
	margin: 0 0 6px 0;
	color: #333;
	font-size: 1.4rem;
	line-height: 2.6rem;}
.accordion-hTUDetail p.read {
	margin: 0 0 50px 0;
	color: #333;
	font-size: 1.4rem;
	line-height: 2.6rem;}
.accordion-hTUDetail strong.important {
	display: block;
	margin: 0 0 14px 0;
	color: #0093eb;
	font-size: 1.4rem;
	line-height: 2.5rem;}
.accordion-hTUDetail p.notes {
	margin: 0 0 40px 0;
	color: #545454;
	font-size: 1rem;
	line-height: 1.8;}
.accordion-hTUDetail > a.btn {
	position: relative;
	display: inline-block;
	min-width: 250px;
	margin: 34px 0 0 0;
	padding: 21px 30px 19px 30px;
	color: #fff;
	font-size: 1.4rem;
	line-height: 100%;
	background: #00b5f9;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
	.accordion-hTUDetail > a.btn.hover {
		background: #005589;}
	.accordion-hTUDetail > a.btn .redArrowS {
			right: 20px;
		border-color: #fff;}
.accordion-hTUDetail > div.twoCol {
	display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	margin: -15px 0 15px 0;}
.accordion-hTUDetail > div.twoCol > figure {
	width: calc((100% - 40px) / 2);
	margin: 0 0 40px 0;}
	.accordion-hTUDetail > div.twoCol > figure:nth-last-child(-n+2) {
		margin-bottom: 0;}
.accordion-hTUDetail > div.twoCol > figure > img {
	width: 470px;
	height: 307px;
	margin: 0 0 15px 0;
	border: 1px solid #f3f5f7;}
.accordion-hTUDetail > .checkPoint {
	width: 100%;
	overflow: hidden;}
.accordion-hTUDetail > .checkPoint > figure {
	display: flex;
	margin: 0 0 30px 0;
	padding: 0 60px 0 96px;
	background: #fbfbef;}
.accordion-hTUDetail > .checkPoint > figure > img {
		flex-shrink: 0;
	width: 160px;
	height: 214px;
	margin: 10px 75px 0 0;}
.accordion-hTUDetail > .checkPoint > figure > figcaption > strong.important {
	display: inline-block;
	margin-top: 28px;
	margin-bottom: 14px;
	padding: 11px 10px 9px 10px;
	line-height: 100%;
	background: #f3f5f7;}
.accordion-hTUDetail > .checkPoint > figure > figcaption > p.notes {
	margin-bottom: 14px;}

/* -- Option ---------- */
.howToUse .downloadNow {
	margin-bottom: 0;
	background: #fff;
	border: 1px solid #e7eaec;}
/* -- startCarLife ---------- */


/* modal
------------------------------*/



/* .hTU_aboutNenpi_CP3
------------------------------*/
.accordion-hTUDetail > .checkPoint > figure.hTU_aboutNenpi_CP3{
	padding: 0 60px 28px 96px;
}

.hTU_aboutNenpi_CP3 .graph{
	max-width: 589px;
	height: auto;
	border: 1px solid #f3f5f7;
	vertical-align: top;}


/* .inputNenpi
------------------------------*/
.inputNenpi{
	clear: both;
	margin: 0 0 40px 0;
}

.inputNenpi .twoCol {
	display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	margin: -15px 0 15px 0;}

.inputNenpi .twoCol > figure {
	width: calc((100% - 40px) / 2);
	margin: 0 0 40px 0;}

.inputNenpi .twoCol > figure > img {
	width: 470px;
	height: 307px;
	margin: 0 0 15px 0;
	border: 1px solid #f3f5f7;}

.inputNenpi .twoCol .s-title{
	font-size: 1.6rem;
	color: #333;
	margin: 0 0 10px 0;
}


/* ----------------------------------------
FloatingBnrArea
----------------------------------------*/
.businessFloatingBnrArea {
	position: absolute;
		/*right: calc(50% - 1180px / 2);
		top: 260px;*/
    top: 80px;
		right: 15px;}
.businessFloatingBnrWrap {
	display: flex;
		justify-content: space-between;
		align-items: center;
	/*width: 1180px;*/
	margin: 0 auto;
	/*padding: 20px 40px 20px 20px;*/
	font-size: 1.8rem;
	/*background: #f3f5f7;*/
	/*opacity: 0;*/
	transition: opacity 0.12s;}
	.businessFloatingBnrWrap.fix {
		/*position: absolute;*/
			/*top: 210px;*/
			/*bottom: -100%;*/
			/*left: calc(50% - 1180px / 2);*/
			/*top: 50px;*/
			z-index: 1;}
	.businessFloatingBnrWrap.active {
		position: fixed;
			top: 60px;
			right: 15px;
			z-index: 2;}
.businessFloatingBnrWrap > p {
	width: calc(100% - 400px);
	color: #333;
	text-align: center;}
.businessFloatingBnrWrap > .businessFloatingBnrBtn {
	position: relative;
	display: inline-block;
	/*width: 400px;*/
	/*padding: 32px 40px;*/
	padding: 0;
	color: #fff;
	line-height: 0%;
	text-align: center;
	box-shadow: 0 3px 7px rgba(0,0,0,0.25);
	transition: box-shadow 0.12s, opacity 0.12s;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
	.businessFloatingBnrWrap > .businessFloatingBnrBtn.hover {
		box-shadow: 0 3px 7px rgba(0,0,0,0.0);
		/*opacity: 0.95;*/
	}
.businessFloatingBnrWrap > .businessFloatingBnrBtn .redArrowS {
	right: 35px;
	margin: 0 0 0 10px;
	transition: border 0.12s;}
	.businessFloatingBnrWrap > .businessFloatingBnrBtn.hover .redArrowS {
		border-color: #fff;}


/* ----------------------------------------
.pdfDownloadBtn
----------------------------------------*/
.btn-pdf-inner{
  display: flex;
  gap:2rem;
  justify-content: center;
  margin: 0 0 12rem 0;
}

.pdfDownloadBtn{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 6rem auto 0;
  font-size: 1.4rem;
  box-sizing: border-box;
  height: 6.4rem;
  color: #e60012;
  border: 1px solid #e60012;
  width: 43.4rem;
  padding-right: 1.5rem;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.pdfDownloadBtn:visited{
  color: #e60012;
}
.pdfDownloadBtn .icon-pdf{ 
  margin-right: 1rem;
}
.pdfDownloadBtn.hover{
  color: #fff;
  background-color: #e60012;
}