/* ----------------------------------------
main
----------------------------------------*/
/* TOP
------------------------------*/
main {
	margin-top: 40px;}
main h2 {
	width: calc(100% - 15px * 2);
	height: 0;
	margin: 0 auto;
	margin-bottom: 60px;
	padding-top: calc(532 / 690 * (100% - 15px * 2));
	background-image: url(/app/drapp/images/img_main_sp.jpg);
	background-size: contain;}

/* -- startCarLife ---------- */
.startCarLife > h3 {
	width: auto;
	font-size: 2.8rem;
	font-weight: bold;
	line-height: 3.8rem;}
.startCarLife > p {
	margin-bottom: 20px;
	width: calc(100% - 15px * 2);
	font-size: 1.4rem;
	text-align: left;
	line-height: 2;}

.stepWrap {
	width: calc(100% - 15px * 2);
	height: 0;
	margin-bottom: 20px;
	padding-top: calc(310 / 690 * (100% - 15px * 2));
	background-image: url(/app/drapp/images/img_stepWrap_sp.jpg);
	background-size: contain;}

/*downloadNow*/
.downloadNow {
	width: calc(100% - 15px * 2);
	margin-bottom: 60px;
	padding: 28px 15px;}

.copyArea {
	margin-bottom: 16px;}
.copyArea > p {
	font-size: 2.4rem;}

.dlLinkArea {
	width: 100%;}
.dlLinkArea > ul li {
	width: calc((100% - 10px) / 2);
	margin-right: 10px;}
.dlLinkArea .LINK {
	width: 100%;
	margin-right: 0;}
.dlLinkArea .LINK > a {
	width: 100%;
	height: 0;
	padding-top: calc(102 / 306 * 100%)}

.rightsNote {
	font-size: 0.9rem;
	line-height: 1.4rem;}

/* -- updateHistory ---------- */
.updateHistory {
	width: calc(100% - 15px * 2);
	margin: 0 auto 60px auto;}
.updateHistory h3 {
	margin-bottom: 20px;
	font-size: 2rem;}

.updateListArea {
	height: 237px;}
.updateListArea > li {
	display: block;
	padding-right: 0;
	padding-left: 0;}
.updateListArea time {
	display: block;
	min-width: auto;
	margin-bottom: 6px;
	font-size: 1.2rem;}


/* ecoDrive
------------------------------*/
.ecoDrive {
	margin-bottom: 60px;
	padding-top: 60px;
	padding-bottom: 1px;
	padding-right: 15px;
	padding-left: 15px;}
.ecoDrive > h3 {
	margin-bottom: 36px;
	font-size: 2.8rem;
	font-weight: bold;
	line-height: 3.6rem;}
[class*="ecoStep"] {
	width: auto;
	margin-bottom: 60px;}
[class*="ecoStep"] > img {
	position: static;
	width: 100%;
	margin-bottom: 10px;}
[class*="ecoStep"] > h4,
[class*="ecoStep"] > p,
[class*="ecoStep"] > .list {
	width: auto;}
[class*="ecoStep"] > h4 {
	margin-bottom: 20px;
	font-size: 2.1rem;
	font-weight: bold;
	line-height: 2.8rem;
	text-align: center;}
[class*="ecoStep"] > p {
	line-height: 2;}
[class*="ecoStep"] > p.notes {
	margin-bottom: 10px;}
[class*="ecoStep"] > p + p.notes {
	margin-top: -25px;}
	[class*="ecoStep"]:before {
		height: 127px;
		background-position: center top;
		background-size: contain;}
		.ecoStep1:before {background-image: url(/app/drapp/images/ecoStep_01_sp.gif);}
		.ecoStep2:before {background-image: url(/app/drapp/images/ecoStep_02_sp.gif);}
		.ecoStep3:before {background-image: url(/app/drapp/images/ecoStep_03_sp.gif);}
		.ecoStep4:before {background-image: url(/app/drapp/images/ecoStep_04_sp.gif);}
[class*="ecoStep"] > a.btn {
	display: block;
	width: calc(100% - 45px * 2);
	margin: 0 auto;
	text-align: center;}
[class*="ecoStep"] .list li {
	width: calc((100% - 20px) / 2);
	margin-right: 20px;}
[class*="ecoStep"] .list li h5 {
	font-size: 1.2rem;}
[class*="ecoStep"] .list li p {
	font-size: 1.1rem;
	line-height: 1.6rem;}

/*even*/
	[class*="ecoStep"]:nth-of-type(2n):before {
		background-position: center top;}


/* howToUse
------------------------------*/
.howToUse {
	width: auto;
	padding: 0 15px;}
.howToUse > h3 {
	margin-bottom: 25px;
	font-weight: bold;
	text-align: center;}
/* -- TAB ---------- */
.hTUTab {
	width: 100%;}
.hTUTab > li > a {
	padding: 2px 10px 0px 20px;
	font-size: 1.3rem;
	font-weight: normal;}

.hTUTab > li > a .redArrowS {
		left: 10px;}
/*content*/
.hTUTab-content {
	width: 100%;}


/* -- ACCORDION ---------- */
.hTUDetail .accordion-btn:before,
.hTUDetail .accordion-btn:after {
		right: 17px;
	width: 15px;
	height: 1px;}
.hTUDetail .accordion-btn > button {
	display: flex;
	padding: 0;
	font-size: 0;
	line-height: 1.2;}
		.hTUDetail .accordion-btn > button > span {
			width: 100%;
			height: auto;
			background: none;
			padding: 20px 60px 18px 10px;
			font-size: 1.9rem;}
.hTUDetail .accordion-btn > button:after {
		right: 50px;}
.accordion-hTUDetail {
	margin-bottom: 30px;
	padding-top: 36px;}
.accordion-hTUDetail p {
	font-size: 1.2rem;}
.accordion-hTUDetail p.read {
	margin-bottom: 28px;}
.accordion-hTUDetail > img {
	width: 100%;
	height: auto;}
.accordion-hTUDetail img.float {
	float: none;
	margin-bottom: 14px;
	margin-left: 0;}
.accordion-hTUDetail p.notes {
	margin-bottom: 26px;}
.accordion-hTUDetail > a.btn {
	/*margin: 20px 0 40px 0;*/
    margin: 20px auto 40px;
    width: calc(100% - 45px * 2);
    text-align: center;
    display: block;}
.accordion-hTUDetail > div.twoCol {
	display: block;}
.accordion-hTUDetail > div.twoCol > figure {
	width: auto;}
.accordion-hTUDetail > div.twoCol > figure > img {
	width: 100%;
	height: auto;}
.accordion-hTUDetail > .checkPoint > figure {
		flex-direction: column;
	margin-bottom: 10px;
	padding: 0 15px;}
	.accordion-hTUDetail > .checkPoint > figure:last-child {
		margin-bottom: 0;}
.accordion-hTUDetail > .checkPoint > figure > img {
	order: 2;
	width: 127px;
	height: auto;
	margin: 20px auto;}
.accordion-hTUDetail > .checkPoint > figure > figcaption > strong.important {
	display: block;
	margin-top: 15px;}

/* -- Option ---------- */
.howToUse .downloadNow {
	width: 100%;
	/*margin-bottom: 100px;*/
	background: #f3f5f7;}


/* .hTU_aboutNenpi_CP3
------------------------------*/
.accordion-hTUDetail > .checkPoint > figure.hTU_aboutNenpi_CP3{
	padding: 0 15px;
	text-align: center;
}
.accordion-hTUDetail > .checkPoint > figure.hTU_aboutNenpi_CP3 strong,
.accordion-hTUDetail > .checkPoint > figure.hTU_aboutNenpi_CP3 p{
	text-align: left;
}

.accordion-hTUDetail > .checkPoint > figure.hTU_aboutNenpi_CP3 p + img{
	width: 127px;
	height: auto;
	margin: 20px auto 0;
}

.hTU_aboutNenpi_CP3 .graph{
	width: 100%;
	height: auto;
	margin: 20px auto;
	}


/* .inputNenpi
------------------------------*/
.inputNenpi .twoCol {
	display: block;
	margin: 40px 0 0 0;}
.inputNenpi .twoCol > figure {
	width: auto;
	}
.inputNenpi .twoCol > figure > img {
	width: 100%;
	height: auto;}


/* ----------------------------------------
FloatingBnrArea
----------------------------------------*/
.businessFloatingBnrArea {
	/*top: 130px;*/
  top: 60px;
	right: 5px;
}
.businessFloatingBnrWrap.active {
		right: 5px;
}

.businessFloatingBnrWrap > .businessFloatingBnrBtn > img {
	width: 130px;
}


/* ----------------------------------------
.pdfDownloadBtn
----------------------------------------*/
.btn-pdf-inner{
  display: block;
  justify-content: center;
  margin: 0 0 8rem 0;
}

.pdfDownloadBtn{
  line-height: 2rem;
  width: calc(100% - 30px);
  padding-right: 2.5rem;
  margin: 4rem auto 0;
}
li:not(:first-child) .pdfDownloadBtn{
  margin: 2rem auto 0;
}