@charset "utf-8";

/*-----------------------------------------------------------------

TOP CONTENTS

-----------------------------------------------------------------*/
.pageTitleBox .pageTTL span{
	display: block;
	font-size: 18px;
}
.topContentsBg{
	background-repeat: no-repeat;
	background-position:center top -45px;
	background-size: 640px;
	padding-bottom: 30px;
	position: relative;
}
.topContentsBg::after{
	position: absolute;
	content: "";
	border: 15px solid transparent;
	bottom: -34px;
	left: calc(50% - 14px);
}
/* 3年プラン */
#page-3yearsplan .topContentsBg{
	background-color: #1D2732;
	background-image: url(../img/3yearsplan/mv-bg_sp.png);
}
#page-3yearsplan .topContentsBg::after{
	border-top: 20px solid #1D2732;
}
/* 5年プラン */
#page-5yearsplan .topContentsBg{
	background-color: #3282d3;
	background-image: url(../img/5yearsplan/mv-bg_sp.png);
}
#page-5yearsplan .topContentsBg::after{
	border-top: 20px solid #3282D3;
}
/* 7年プラン */
#page-7yearsplan .topContentsBg{
	background-color: #45BC90;
	background-image: url(../img/7yearsplan/mv-bg_sp.png);
}
#page-7yearsplan .topContentsBg::after{
	border-top: 20px solid #45BC90;
}
@media screen and (min-width:768px) {
	.pageTitleBox .pageTTL span{
		font-size: 21px;
	}
	.pageTitleBox .pageTTL span br{
		display: none;
	}
	.topContentsBg{
		background-position:center top -70px;
		background-size: 1280px;
	}
	.topContentsBg::after{
		border: 25px solid transparent;
		bottom: -56px;
		left: calc(50% - 25px);
	}
	/* 3年プラン */
	#page-3yearsplan .topContentsBg{
		background-image: url(../img/3yearsplan/mv-bg_pc.png);
	}
	#page-3yearsplan .topContentsBg::after{
		border-top: 32px solid #1D2732;
	}
	/* 5年プラン */
	#page-5yearsplan .topContentsBg{
		background-image: url(../img/5yearsplan/mv-bg_pc.png);
	}
	#page-5yearsplan .topContentsBg::after{
		border-top: 32px solid #3282D3;
	}
	/* 7年プラン */
	#page-7yearsplan .topContentsBg{
		background-image: url(../img/7yearsplan/mv-bg_pc.png);
	}
	#page-7yearsplan .topContentsBg::after{
		border-top: 32px solid #45BC90;
	}
}
@media screen and (min-width:960px){
	.topContentsBg {
		background-position:center top;
		background-size: cover;
		padding-bottom: 50px;
	}
}

/*-----------------------------------------------------------------
MV (h2のタイトル部分)
-----------------------------------------------------------------*/
.topContentsBg .mv .mv-top{
	text-align: center;
	padding-top: 30px;
}
.topContentsBg .mv .mv-top h2 .mvTxt{
	width: 300px;
}
.topContentsBg .mv .mv-top .mvCar{
	width: 270px;
}
@media screen and (min-width:768px) {
	.topContentsBg .mv .mv-top{
		display: flex;
		flex-direction:row-reverse;
		justify-content: center;
		align-items: center;
		height: 100%;
		padding-bottom: 8px;
	}
	.topContentsBg .mv .mv-top h2 .mvTxt{
		width: 400px;
		/* align-self: flex-start; */
		margin-bottom: 20px;
	}

}
@media screen and (min-width:960px){
	.topContentsBg .mv .mv-top{
		padding-top: 35px;
		padding-bottom: 30px;
	}
	.topContentsBg .mv .mv-top h2 .mvTxt{
		width: 465px;
	}
	.topContentsBg .mv .mv-top .mvCar{
		width: 291px;
		margin-right: 50px;
	}
}

/*-----------------------------------------------------------------
特徴
-----------------------------------------------------------------*/
.mv .tokucyo{
	margin-top: -30px;
}
.mv .tokucyo h2{
	font-weight: bold;
	text-align: center;
	color: #fff;
	font-size: 24px;
}
.mv .tokucyo h2 span{
	font-weight: 700;
  font-family: 'Poppins', sans-serif;
	font-size: 32px;
	margin-top: 10px;
}

#page-3yearsplan .mv .tokucyo h2{
	color: #000;
}
#page-7yearsplan .mv .tokucyo h2{
	color: #45BC90;
	text-shadow: 0 0 4px #fff;
}
.mv .tokucyo ol{
	padding: 10px 20px 20px;
}
.mv .tokucyo ol li{
	margin-bottom: 20px;
}
.mv .tokucyo ol li .num{
	-moz-border-radius: 50%;
  -webkit-border-radius: 50%;
	border-radius: 50%;
	background: #45BC90;
	border: 2px solid #fff;
	font-weight: 700;
  font-family: 'Poppins', sans-serif;
	width: 44px;
	line-height: 44px;
	max-width: 44px;
  max-height: 44px;
	text-align: center;
	color: #fff;
	margin: 0 auto;
	font-size: 24px;
	position: relative;
	z-index: 2;
}
/* 5年プラン */
#page-5yearsplan .mv .tokucyo ol li .num{
	background: #3282D3;
}
.mv .tokucyo ol li .inner{
	border-radius: 10px;
	background: #fff;
	padding: 30px;
	margin-top: -22px;
	width: 100%;
}
.mv .tokucyo ol li .inner h3{
	font-weight: 700;
	text-align: center;
	font-size: 36px;
	line-height: 1.3;
}
.mv .tokucyo ol li .inner h3 span{
	display: block;
	color: #45BC90;
	font-size: 21px;
}
/* 5年プラン */
#page-5yearsplan .mv .tokucyo ol li .inner h3 span{
	color: #3282D3;
}
.mv .tokucyo ol li .inner p{
	padding: 10px 0;
}
.mv .tokucyo ol li .inner div{
	border: 1px solid #45BC90;
	font-weight: 700;
	text-align: center;
	font-size: 21px;
	border-radius: 5px;
}
.mv .tokucyo ol li .inner div .wrap{
	color: #45BC90;
}
.mv .tokucyo ol li .inner div .wrap span{
	font-size: 36px;
}
.mv .tokucyo ol li .inner img{
	max-width: 200px;
	margin: 0 auto;
	display: block;
}
@media screen and (min-width:768px){
	.mv .tokucyo ol{
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
		align-items: stretch;
	}
	.mv .tokucyo ol li{
		width: 50%;
		margin-bottom: 40px;
		padding: 0 5px;
	}
	.mv .tokucyo ol li .inner{
		height: 100%;
		padding-bottom: 0;
	}
	#page-5yearsplan .mv .tokucyo ol li:first-child .inner img,
	#page-7yearsplan .mv .tokucyo ol li:first-child .inner img{
		margin-top: 42px;
	}
}
@media screen and (min-width:960px){
	.mv .tokucyo h2{
		font-size: 38px;
	}
	.mv .tokucyo h2 span{
		font-size: 62px;
	}
	.mv .tokucyo ol{
		max-width: 1100px;
		margin: 0 auto;
		padding: 10px 0 20px;
	}
	.mv .tokucyo ol li{
		width: 25%;
		padding: 0 8px;
	}
	.mv .tokucyo ol li .inner h3{
		font-size: 38px;
	}
	.mv .tokucyo ol li .inner h3 span{
		font-size: 24px;
	}
	.mv .tokucyo ol li.pointnewcar .inner h3{
		font-size: 32px;
	}
	.mv .tokucyo ol li .inner p{
		line-height: 1.6;
		font-size: 14px;
	}
	.mv .tokucyo ol li .inner div{
		margin-top:40px;
	}
	.mv .tokucyo ol li .inner img{
		max-width: 162px;
	}
	#page-5yearsplan .mv .tokucyo ol li:first-child .inner img,
	#page-7yearsplan .mv .tokucyo ol li:first-child .inner img{
		margin-top: 24px;
	}
}






/*-----------------------------------------------------------------
対象車種
-----------------------------------------------------------------*/
.carSelect .headLine span{
	display: block;
	font-size: 18px;
}
.carItem .option{
	display: none;
}
@media screen and (min-width:960px){
	.carSelect .headLine{
		font-size: 36px;
		letter-spacing: 1px;
	}
	.carSelect .headLine span{
		font-size: 21px;
	}
}

/*-----------------------------------------------------------------
about
-----------------------------------------------------------------*/
#about .txtInner{
	padding: 30px;
}
#about .txtInner .headLine{
	margin-bottom: 20px;
}
#about .txtInner .leadTxt{
	text-align: left;
}
@media screen and (min-width:960px){
	#about .txtInner{
		padding: 60px 0;
	}
	#about .txtInner .leadTxt{
		text-align: center;
		letter-spacing: 2px;
		line-height: 2.2;
	}
}

/* たすカッター */
@media screen and (min-width:960px){
	#tascutter.tascutter3  .hoshoBox .hoshoList li .price{
		padding: 4px 5px;
	}
	#tascutter.tascutter3 .hoshoBox .hoshoList li .price img{
		max-width: 146px;
	}
	#tascutter.tascutter3 .hoshoBox .hoshoList li .name,
	#tascutter.tascutter3 .hoshoBox .hoshoList li .name.l2{
		line-height: 2;
	}
	#tascutter.tascutter3 .hoshoBox .hoshoList li .name.l2 br{
		display: none;
	}
}

/*-----------------------------------------------------------------
  3年型プランでハスラー・ジムニー取扱い開始バナー
-----------------------------------------------------------------*/
.jumnyHustler{
	background-color: #F7F7F7;
}
/* .jumnyHustler .bnrImg{
	background-repeat: no-repeat;
	background-position: center;
	background-image: url(../img/BNR-3_jumny_hustler_sp.jpg);
	background-size: 375px auto;
	background-size: cover;
	width: auto;
	height: 246px;
	text-align: center;
	position: relative;
	padding: 0 20px;
} */
.jumnyHustler div{
	padding: 40px 20px 0;
	margin: 0 auto;
}
@media screen and (min-width:960px){
	.jumnyHustler div{
		padding: 90px 0 0;
		max-width: 960px;
	}
}



/*-----------------------------------------------------------------

	一覧背景色   

-----------------------------------------------------------------*/
#page-5yearsplan .bgLightGray{
	background-color: #ebf1f8;
}
#page-7yearsplan .bgLightGray{
	background-color: #EBF8F5;
}


/*-----------------------------------------------------------------

こんな方におすすめ

-----------------------------------------------------------------*/
.recommend{
	padding:20px 10px;
	background: #dedede;
}
.recommend .innerWrap{
	border-radius: 10px;
	background: #fff;
	padding: 20px;
}
.recommend .innerWrap h2{
	letter-spacing: 0;
	margin-bottom: 20px;
}
.recommend .innerWrap ol li{
	width: 100%;
	margin-bottom: 10px;
	padding: 20px ;
	padding-right: 10px;
	background: #ffffff;
	border: 1px solid #45BC90;
	border-radius: 10px;
	display: flex;
	align-items: center;
}
.recommend .innerWrap ol li .icon{
	width: 60px;
	height: 60px;
	padding-top: 12px;
	font-size: 1.2rem;
	line-height: 1.2;
	font-weight: 600;
	color: #ffffff;
	text-align: center;
	font-family: 'Poppins', sans-serif;
	border-radius: 100%;
	background: #171717;
	background: #45BC90;
}
.recommend .innerWrap ol li .icon .number {
	display: block;
	font-size: 2.4rem;
	line-height: 1;
	text-align: center;
}
.recommend .innerWrap ol li .txt{
	width: calc(100% - 60px);
	padding-left: 20px;
	line-height: 1.6;
	font-weight: 700;
}

@media screen and (min-width:768px) {
	.recommend .innerWrap ol{
		display: flex;
		justify-content: space-between;
	}
	.recommend .innerWrap ol li {
		width: 32%;
		display: block;
		padding: 20px 10px;
	}
	.recommend .innerWrap ol li .icon {
		margin: 0 auto 20px;
	}
	.recommend .innerWrap ol li .txt{
		width: 100%;
		padding: 0;
		line-height: 1.9;
	}

}
@media screen and (min-width:960px){
	.recommend {
		padding: 50px 0;
		background: #F7F7F7;
	}
	.recommend .innerWrap{
		width: 960px;
		margin: 0 auto;
		padding: 50px 50px 30px;
		border: 1px solid #dedede;
	}
	.recommend .innerWrap h2{
		margin-bottom: 60px;
		letter-spacing: 0.1em;
	}
	.recommend .innerWrap ol li{
		padding: 30px;
		padding-right: 15px;
	}
	.recommend .innerWrap ol li .icon{
		width: 70px;
		height: 70px;
		padding-top: 15px;
		font-size: 1.2rem;
		margin-bottom: 15px;
		margin-top: -65px;
	}
	.recommend .innerWrap ol li .icon .number {
		font-size: 2.6rem;
		padding-top: 2px;
	}
	.recommend .innerWrap ol li .txt{
		font-size: 18px;
	}
}

/*-----------------------------------------------------------------

契約終了時

-----------------------------------------------------------------*/
#endContract .secBottom{
	text-align: center;
	padding: 0 30px 40px;
	border-bottom: 1px solid #dedede;
}
#endContract .secBottom a{
	width: 100%;
	margin-top: 20px;
	line-height: 1.6;
	padding: 15px 0;
}
@media screen and (min-width:960px){
	#endContract .secBottom{
		padding: 0 0px 70px;
	}
	#endContract .secBottom .txt{
		font-size: 18px;
	}
	#endContract .secBottom a{
		width: 550px;
		margin: 30px auto 0;
		padding: 20px 0;
	}
	#endContract .secBottom a br{
		display: none;
	}
}


/*-----------------------------------------------------------------

セブンマックスとは

-----------------------------------------------------------------*/

#about .bgAbout{
	display: none;
}
.about .btn{
	margin: 0 auto 40px;
	line-height: 1.6;
	padding: 15px 0;
}
@media screen and (min-width:960px){
	.about .btn{
		width: 550px;
		margin: 0px auto 80px;
		padding: 20px 0;
	}
	.about .btn br{
		display: none;
	}
}

/*-----------------------------------------------------------------

プラン

-----------------------------------------------------------------*/
.planChoice{
	border-top: 1px solid #dedede;
	padding-top: 40px;
	padding-bottom: 40px;
}
@media screen and (min-width:960px){
	.planChoice{
		padding-top: 70px;
		padding-bottom: 50px;
	}
	.planArea {
		margin: 0 auto;
	}
}