@charset "UTF-8";
/* CSS Document */
	/*
font-family: 'Lato', sans-serif;
	*/
/*************************************************************************************************************************
* reset
*************************************************************************************************************************/
html{ height: 100%; overflow-y: scroll; font-size: 62.5%;}
body{ height: 100%; margin: 0; padding: 0; font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo, Osaka,"ＭＳ Ｐゴシック","MS PGothic","sans-serif"; text-align: justify; text-justify: inter-ideograph; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img{ width: 100%; max-width: 100%; height: auto; border: 0; vertical-align: bottom;}
svg{ vertical-align: bottom;}
form{ margin: 0; padding: 0;}
p{ margin: 0; padding: 0;}
a, a:hover{ text-decoration: none; outline: none;}
h1, h2, h3, h4, h5, h6{ margin: 0; padding: 0; font-size: 0; line-height: 0;}
ul, dl, dt, dd{ margin: 0; padding: 0;}
li, ol{ margin: 0; padding: 0; list-style: none;}
table{ border: 0; border-collapse: collapse; border-spacing: 0;}
caption, th{ text-align: left;}
header, nav, main, article, aside, section, footer{ display: block;}
figure { margin: 0; }
*{ box-sizing: border-box;}

/**********************************************************
*　追加ベース
**********************************************************/
body.is-fixed {
	/*position: fixed;*/
}

button{
	cursor: pointer;
}

.l-wrapper {
	width: calc(100% - 40px);
	margin-left: auto;
	margin-right: auto;
}

@media screen and (min-width: 681px) {
	.l-wrapper { /* pc */
		width: 1000px;
	}
}

.sp-only {
	display: none !important;
}

.sp-only-2 {
	display: none !important;
}

.pc-only {
	display: block !important;
}

.pc-only-2 {
	display: inline-block !important;
}


@media screen and (max-width: 680px) {

	.sp-only { /* sp */
		display: block !important;
	}

	.sp-only-2 { /* sp */
		display: inline-block !important;
	}

	.pc-only { /* sp */
		display: none !important;
	}

	.pc-only-2 { /* sp */
		display: none !important;
	}

}


body{ height: 100%; font-family: YakuHanJP_Noto, "Noto Sans JP", sans-serif; font-weight: 300; }
@media print, screen and (min-width:681px) {
	body{ min-width: 1200px;}
}

/*	iOS Sarafi Hack	*/
_::-webkit-full-page-media,
_:future,
:root .something {  }



.aos__overflow--hidden{ overflow: hidden; }
.caption { font: 500 12px/16px 'YakuHanJP_Noto', 'Noto Sans JP', sans-serif; margin-top: 10px; }



.ktkn { font-size: inherit; letter-spacing: -0.05em; }

.cont-wrap { width: calc(100% - 64px); margin-left: auto; margin-right: auto; }

.main-ttl { margin-bottom: 94px; text-align: center; }

.main-ttl__txt { margin-top: 20px; font-size: 1.6rem; line-height: 1.5; text-align: center; color: #fff; }

.sec { padding-top: 80px; padding-bottom: 100px; }
.sub-ttl-wrap { position: relative; display: flex; justify-content: center; align-items: center; height: 71px; margin-bottom: 70px; }
.sub-ttl-wrap:before { position: absolute; display: block; top: 50%; left: 50%; width: 100%; height: 71px; transform: translate(-50%, -50%); background: no-repeat 0 0/auto 100%; content: ""; z-index: 0; }
.sub-ttl-wrap--ext:before { background-image: url("../img/bg_txt_exterior.png"); }
.sub-ttl-wrap--int:before { background-image: url("../img/bg_txt_interior.png"); }
.sub-ttl { position: relative; }
.sub-ttl:before { position: absolute; left: 0; top: -51px; width: 100%; height: 28px; background: no-repeat 0 0/auto 100%; content: ""; }
.sub-ttl-wrap--ext .sub-ttl:before { background-image: url("../img/tc_ttl_2_ext.png"); }
.sub-ttl-wrap--int .sub-ttl:before { background-image: url("../img/tc_ttl_2_int.png"); }
.sub-ttl-wrap--single .sub-ttl:before { top: -67px; }
.sub-ttl__img { width: auto; height: 28px; margin-bottom: 20px; }
.sub-ttl__txt img { width: auto; }
.sub-ttl__txt--1 img { height: 56px; }
.sub-ttl-wrap--single .sub-ttl__txt--2 img { height: 21px; }
.sub-ttl__txt--center { text-align: center; }
.sub-ttl__txt--single { padding-top: 16px; padding-bottom: 16px; }


.exp-wrap-outer:not(:last-of-type) { margin-bottom: 120px; }
.exp:not(:last-of-type) { margin-bottom: 60px; }
.exp:nth-of-type(2) { margin-left: 54px; }
.exp:nth-of-type(3) { margin-right: 54px; }
.exp__img-wrap {  }
.exp__img {  }
.exp__img--cent { text-align: center; }
.exp__img-wrap .exp__img:nth-child(2) { margin: 40px 54px 0 0; padding-bottom: 45px; }
.exp__txt { margin-top: 15px; font-size: 1.0rem; line-height: 1.2; color: #9d9d9d; }



/**********************************************************
*　Tanto Custom
**********************************************************/
#tc { background: #130022; }
#tc .main-ttl { padding-left: 30px; padding-right: 30px; }


@media screen and (min-width: 681px) {
	.cont-wrap { max-width: 964px; }
	.main-ttl img { width: auto; height: 170px; }
	.main-ttl__txt { margin-top: 24px; font-size: 2.4rem; }
	.sub-ttl-wrap { height: 210px; margin-bottom: 40px; }
	.sub-ttl-wrap:before { top: 50%; left: 50%; width: 100%; height: 210px; transform: translate(-50%, -50%); background-position:50% 50%; }
	.sub-ttl { position: relative; }
	.sub-ttl:before { height: 35px; }
	.sub-ttl__img { position: absolute; top: 0; left: 50%; transform: translateY(-100%); height: 34px; }
	
	.sub-ttl__txt--1 img { height: 115px; }
	.sub-ttl-wrap--single .sub-ttl__txt--2 img { height: 45px; }
	
	#tc .sub-ttl__img { margin-bottom: 5px; }
	#tc .sub-ttl .sub-ttl__txt { margin-left: 196px; }
	#tc .sub-ttl .sub-ttl__txt--right { margin-top: 23px; margin-right: 120px; }
	
	.exp-wrap-outer:not(:last-of-type) { margin-bottom: 130px; }
	.exp-wrap--1 { display: flex; justify-content: space-between; flex-wrap: wrap; }
	.exp-wrap--1 .exp { width: 474px; margin-left: 0; margin-right: 0; }
	.exp-wrap--1 .exp:nth-child(1) { order: 1; width: 100%; }
	.exp-wrap--1 .exp:nth-child(2) { order: 3; }
	.exp-wrap--1 .exp:nth-child(3) { order: 2; margin-top: 130px; }
	
	.exp__img-wrap { display: flex; justify-content: space-between; }
	#tc .exp__img-wrap .exp__img:nth-child(1) { order: 2; width: 572px; }
	#tc .exp__img-wrap .exp__img:nth-child(2) { order: 1; width: 376px; margin: 275px 0 0 0; padding: 0; }
	
}


/**********************************************************
*　Tanto Custom
**********************************************************/
#tf { background: #ccc; /* delete after*/ background: #111906; }
#tf .main-ttl { padding-left: 30px; padding-right: 30px; }

@media screen and (min-width: 681px) {
	#tf .sub-ttl__txt { text-align: center; }
}


/**********************************************************
*　Usability
**********************************************************/
#usability { background: #9d9d9d; }
.main-ttl2 { display: flex; flex-direction: column; justify-content: center; align-items: center; background: no-repeat 50% 50%/auto 71px; text-align: center; color: #fff; }
.main-ttl2--usability { background-image: url("../img/bg_txt_usability.png"); background-position: 20% 50%; }
.main-ttl2--variations { background-image: url("../img/bg_txt_variations.png"); }
.main-ttl2--bodycolor { background-image: url("../img/bg_txt_bodycolor.png"); }
.main-ttl2__jp { font-size: 1.6rem; font-weight: 700; line-height: 1; }
.main-ttl2__en { margin-top: 8px; margin-bottom: 8px; font-size: 4.4rem; font-weight: 700; line-height: 1.1; }
.main-ttl2__txt { font-size: 1.6rem; line-height: 1.4; }
.main-ttl2__txt--en { font-weight: 700; letter-spacing: 0.05em; text-indent: 0.05em; }



@media screen and (min-width: 681px) {
	.main-ttl2 { min-height: 208px; background-size: auto 208px; }
	.main-ttl2--usability { background-position: 50% 50%; }
	.main-ttl2__jp { font-size: 2.4rem; }
	.main-ttl2__en { margin-top: 8px; margin-bottom: 8px; font-size: 8.0rem; }
	.main-ttl2__txt { font-size: 2.4rem; }
}



/**********************************************************
*　Usability for FUNCROSS
**********************************************************/
#usability_for_funcross { background: #111906; }
.usability-wrap { margin-top: 46px; }
.usability:not(:last-of-type) { margin-bottom: 80px; }
.usability__ttl { margin-bottom: 25px; }
.usability__ttl:before { display: block; width: 61px; height: 30px; background: no-repeat center/100% auto; margin-bottom: 8px; content: ""; }
.usability:nth-child(1) .usability__ttl:before { background-image: url("../img/icon_car_list_1.png"); }
.usability:nth-child(2) .usability__ttl:before { background-image: url("../img/icon_car_list_2.png"); }
.usability:nth-child(3) .usability__ttl:before { background-image: url("../img/icon_car_list_3.png"); }
.usability__ttl__sub,
.usability__ttl__main { display: block; color: #fff; }
.usability__ttl__sub { margin-bottom: 5px; font-size: 1.2rem; font-weight: 300; line-height: 1.4; }
.usability__ttl__main { font-size: 2.4rem; font-weight: 700; line-height: 1.2; }
.usability__img-list__item:not(:last-child) { margin-bottom: 10px; }
.usability__txt { margin-top: 15px; font-size: 1.0rem; line-height: 1.2; color: #fff; }

@media screen and (min-width: 681px) {
	
	.usability-wrap { margin-top: 46px; }
	.usability:not(:last-of-type) { margin-bottom: 70px; }
	.usability__ttl { position: relative; margin-bottom: 25px; padding-left: 140px; }
	.usability__ttl:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 120px; height: 60px; margin-bottom: 0; }
	.usability__ttl__sub { margin-bottom: 0; font-size: 1.6rem; font-weight: 400; }
	.usability__ttl__main { font-size: 4.0rem; font-weight: 700; }
	.usability__img-list { display: flex; justify-content: space-between; }
	.usability__img-list__item { width: calc(50% - 8px); }
	.usability__img-list__item:not(:last-child) { margin-bottom: 0; }
	.usability__txt { margin-top: 30px; }
	
}


/**********************************************************
*　Variations Tanto Custom
**********************************************************/
#va_tc { background: #130022; }
.usab-fc-wrap { margin-top: 22px; }
.usab-fc { color: #fff; }
.usab-fc__cont { margin-top: 22px; }
.usab-fc__cont__ttl { position: relative; margin-bottom: 25px; font-size: 2.0rem; font-weight: 700; line-height: 1.5; }
.usab-fc__cont__ttl:after { position: absolute; left: 0; bottom: -12px; width: 30px; height: 2px; background: #2f3b1e; content: ""; }
.usab-fc__cont__txt { font-size: 1.2rem; font-weight: 300; line-height: 1.3; }

@media screen and (min-width: 681px) {
	
	.usab-fc { display: flex; justify-content: space-between; }
	.usab-fc:nth-child(odd) { flex-direction: row-reverse; }
	.usab-fc:nth-child(even) .usab-fc__img { margin-right: 16px; }
	.usab-fc:not(:last-child) { margin-bottom: 60px; }
	.usab-fc__img { width: 474px; }
	.usab-fc__cont { flex: 1; margin-top: -10px; }
	.usab-fc__cont__ttl { margin-bottom: 35px; font-size: 3.2rem; }
	.usab-fc__cont__ttl:after { bottom: -17px; }
	.usab-fc__cont__txt { font-size: 1.6rem; }
	
	
}

/**********************************************************
*　Variations Tanto
**********************************************************/
#va_t { background: #430308; }
.sec--va { padding-bottom: 70px; }
.va-list { margin-top: 45px; }
.va-list__item__cont { text-align: center; }
.va-list__item__cont__img { width: 204px; height: auto; }
.va-list__item__cont__txt { margin-top: 5px; font-size: 1.2rem; font-weight: 400; line-height: 1.666; color: #fff; }
.main-ttl2__txt--img { line-height: 1; }
.main-ttl2__txt--img img { width: auto; height: 14px; }

@media screen and (max-width: 680px) {
	
.va-list__item:not(:last-of-type) { margin-bottom: 25px; }
	
}
@media screen and (min-width: 681px) {
	
	.sec--va { padding-bottom: 90px; }
	.va-list { display: flex; justify-content: center; align-items: flex-end; margin-top: 55px; }
	.va-list--tc .va-list__item:not(:last-of-type),
	.va-list--tf .va-list__item:not(:last-of-type) { margin-right: 200px; }
	.va-list--t .va-list__item:not(:last-of-type) { margin-right: 70px; }
	.va-list__item__cont__img { width: 288px; }
	.va-list__item__cont__txt { margin-top: 5px; font-size: 2.4rem; line-height: 1.25; }
	
}

/**********************************************************
*　Variations Tanto Funcross
**********************************************************/
#va_tf { background: #111906; }



/**********************************************************
*　Body color Tanto Custom
**********************************************************/
#bc_tc { background: #130022; }

.bc-list-wrap-outer { margin-top: 60px; }
.bc-list-wrap:not(:last-child) { margin-bottom: 35px; }
.bc-list__ttl { display: flex; align-items: center; height: 40px; margin-bottom: 35px; padding-left: 10px; font-size: 1.6rem; font-weight: 400; line-height: 1; letter-spacing: 0.05em; color: #fff; }

.bc-list { display: flex; flex-wrap: wrap; justify-content: space-between; }
.bc-list__item__cont__img { display: block; margin-left: auto; margin-right: auto; }
.bc-list__item__cont__txt,
.bc-notice { font-size: 1.2rem; font-weight: 300; line-height: 1.666; }
.bc-list__item__cont__txt { margin-top: 6px;  color: #fff; }
.bc-notice { margin-top: 40px; color: #9d9d9d; }

#bc_tc .bc-list__ttl { background-color: #340060; }
#bc_t .bc-list__ttl { background-color: #7c2731; }
#bc_tf .bc-list__ttl { background-color: #2f3b1e; }

@media screen and (max-width: 680px) {
	
	.bc-list__item { width: calc(50% - 8px); }
	.bc-list__item:nth-of-type(n+3) { margin-top: 25px; }
	
}

@media screen and (min-width: 681px) {
	
	.bc-list-wrap-outer { margin-top: 70px; }
	.bc-list-wrap:not(:last-child) { margin-bottom: 35px; }
	.bc-list__ttl { height: 50px; margin-bottom: 35px; padding-left: 20px; font-size: 2.0rem; }

	.bc-list { justify-content: flex-start; }
	.bc-list__item { width: calc(844px / 4); margin-right: 40px; }
	.bc-list__item:nth-of-type(4n) { margin-right: 0; }
	.bc-list__item:nth-of-type(n+5) { margin-top: 25px; }
	.bc-list__item__cont__img { width: 161px; }
	.bc-list__item__cont__txt,
	.bc-notice { font-size: 1.4rem; font-weight: 400; line-height: 1.428; }
	.bc-list__item__cont__txt { margin-top: 12px; }
	
}



/**********************************************************
*　Body color Tanto
**********************************************************/
#bc_t { background: #430308; }


/**********************************************************
*　Body color Tanto Funcross
**********************************************************/
#bc_tf { background: #111906; }


/**********************************************************
*　Woncre
**********************************************************/
#woncre { background: #B71649; padding-top: 80px; padding-bottom: 40px;  overflow: hidden; }
.norikae { background: #fff; border: 2px solid #3E3834; }
.norikae__ttl { background: #FFF784; padding-top: 15px; padding-bottom: 15px; text-align: center; }
.norikae__ttl img { width: calc(100% - 40px); }
.norikae__cont { padding: 20px; }
.norikae__cont__subttl { margin-bottom: 15px; }
.norikae__cont__txt { position: relative; font-size: 1.4rem; font-weight: 700; line-height: 1.4; }
.norikae__cont__txt:before { display: flex; justify-content: center; align-items: center; background: #B71649; height: 30px; border-radius: 4px; margin-bottom: 6px; color: #fff; text-align: center; content: "適用条件"; }
@media screen and (min-width: 681px) {
	.norikae { border-width: 8px; }
	.norikae__ttl { padding-top: 20px; padding-bottom: 20px; }
	.norikae__ttl img { max-width: 804px; }
	.norikae__cont { padding: 30px 80px; }
	.norikae__cont__subttl { margin-bottom: 30px; }
	.norikae__cont__txt { display: flex; justify-content: space-between; font-size: 2.4rem; }
	.norikae__cont__txt:before { display: flex; justify-content: center; align-items: center; width: 162px; height: 40px; border-radius: 20px; margin-right: 20px; font-size: 80%; }
	.norikae__cont__txt span { flex: 1; }
}

.woncre-wrap { padding-top: 50px; }
.woncre-ttl { margin-bottom: 40px; text-align: center; }
.woncre-ttl img { width: calc(100% - 40px); }

.woncre-list { margin-bottom: 30px; }
.woncre-list__item { text-align: center; }
.woncre-list__item:nth-child(1) { position: relative; padding-bottom: 48px; }
.woncre-list__item:nth-child(1) span { position: absolute; bottom: 0; right: -20px; display: flex; justify-content: flex-end; align-items: center; width: 100vw; height: 38px; background: #EFC11B; overflow: hidden; }
.woncre-list__item:nth-child(1) span:before { position: absolute; right: -37px; width: 0; height: 0; border-style: solid; border-width: 0 100px 150px 0; border-color: transparent #B71649 transparent; content: ""; z-index: 0; }
.woncre-list__item:nth-child(1) span img { position: absolute; z-index: 5; }

.woncre-txt { font-size: 1.2rem; font-weight: 400; line-height: 1.4; color: #fff; }
@media screen and (max-width: 680px) {
	.woncre-list__item:not(:last-of-type) { margin-bottom: 30px; }
	.woncre-list__item:nth-child(1) > .woncre-list__item__img { width: calc(100% - 20px); }
	.woncre-list__item:nth-child(1) span img { left: 50%; transform: translateX(-46%); width: calc(100% - 80px); }
}
@media screen and (min-width: 681px) {
	#woncre { padding-top: 100px; padding-bottom: 80px; }
	.woncre-list { display: flex; justify-content: space-between; }
	.woncre-list__item:nth-child(1) { width: 211px; padding-bottom: 38px; }
	.woncre-list__item:nth-child(2) { width: 292px; }
	.woncre-list__item:nth-child(3) { width: 371px; }
	.woncre-list__item:nth-child(1) span { height: 31px; }
	.woncre-list__item:nth-child(1) span img { width: auto; height: 15px; margin-right: 24px; }
}

/**********************************************************
*　Footer
**********************************************************/
.footer { background: #fff; padding-top: 50px; padding-bottom: 10px; overflow: hidden; }
.footer-btns { margin-bottom: 50px; }
.footer-btns__item { text-align: center; }
.footer-btns__item:not(:last-of-type) { margin-bottom: 20px; }
.footer-btns__item a { transition: .3s; }
.footer-btns__item a:hover { opacity: 0.8; }
.footer-bottom { display: flex; align-items: center; }
.footer-bottom__img { width: 248px; margin-right: 12px; }
.footer-bottom:after { position: relative; flex: 1; height: 10px; background: #E50012; margin-right: -100vw; content: ""; }

@media screen and (min-width: 681px) {
	.footer { padding-top: 80px; padding-bottom: 96px; }
	.footer-btns { margin-bottom: 90px; }
	.footer-btns__item:not(:last-of-type) { margin-bottom: 44px; }
	.footer-btns__item img { max-width: 792px; }
	.footer-bottom__img { width: 534px; margin-right: 20px; }
}