@charset "UTF-8";
/*
OverWrite */
@media screen and (max-width: 767px) {
	.v3_fullColumnA01, .v3_fullColumnB01 {
		margin-left: 0;
		margin-right: 0;
	}
	#wrap #mainArea main {
		padding: 0;
	}
}


/*
Util */
@media screen and (min-width: 768px) {
	.u-mt90 {
		margin-top: 90px !important;
	}
	.u-mt100 {
		margin-top: 100px !important;
	}
}

.uBtn01,
.uBtn02 {
	border-radius: 9999px;
	font-size: 2rem;
	border: none;
	box-shadow: 0 4px 3px rgb(0 0 0 / 16%);
}

.uBtn01 {
	background: #ee5550;
}

.uBtn02{
	background: #0c3bbc;
}

.uBtn01>span,
.uBtn02>span {
	color: #fff;
}
.uBtn01:hover>span,
.uBtn02:hover>span {
	color: #fff;
}

.uBtn01 span:after,
.uBtn02 span:after {
	content: "";
	width: 1em;
	height: 1em;
	background: url(/kojin/mycar/landing/images/btn_ico_001.svg) no-repeat;
	background-size: contain;
}

.uBtn01:hover,
.uBtn02:hover {
	border: none;
	opacity: .7;
}

@media screen and (max-width: 767px) {
	.uBtn01,
	.uBtn02 {
		font-size: 1.6rem;
	}
}


/*
MV area */
.mvArea .v3_fullColumnB01 {
	background: url(/kojin/mycar/landing/images/mv_bg_001.png) no-repeat top center;
	background-size: cover;
}

.mvArea figure {
	padding: 23px 0 0;
}

@media screen and (max-width: 767px) {
	.mvArea .v3_fullColumnB01 {
		background-image: none;
	}

	.mvArea figure {
		padding: 0;
	}
}


/*
Tab */
.tabWrap {}

.tabWrap .v4-tabList {
	background: #0c3bbc;
	color: #fff;
	font-size: 3.4rem;
}

.tabTitle {
	padding: 29px 0 26px;
}

.tabSTitle {
	font-size: 3rem;
}
.tabSTitle>strong {
	font-size: 1.26667em;
	color: #0c3bbc;
}

@media screen and (max-width: 767px) {
	.tabTitle {
		font-size: 1.9rem;
		padding: 17px 0 11px;
	}

	.tabSTitle {
		font-size: 2rem;
		line-height: 1.45;
	}
}


/*
Tab -overwrite */
.tabWrap .v4-tabList .v4-tabTop,
.tabWrap .v4-tabList .v4-tabBottom,
.tabWrap .v4-tabContent {
	width: 1200px;
	margin: 0 auto;
}

.tabWrap .v4-tabPinch01 {
	background: url(/kojin/mycar/landing/images/tab_bg_003.png) no-repeat top 48.5vh left -40px /15.5vw auto,url(/kojin/mycar/landing/images/tab_bg_004.png) no-repeat top 41.5vh right -40px /16.85vw auto;
}

@media screen and (min-width: 1560px) {
	.tabWrap .v4-tabPinch01 {
		background: url(/kojin/mycar/landing/images/tab_bg_001.png) no-repeat top 48.5vh left -40px /15.5vw auto,url(/kojin/mycar/landing/images/tab_bg_002.png) no-repeat top 41.5vh right -40px /16.85vw auto;
	}
}

.tabWrap .v4-tabContent {
	padding: 45px 30px 53px;
}

.tabWrap .v4-tabList ul {
	align-items: flex-end;
}

.tabWrap .v4-tabList ul.v4-tabTop,
.tabWrap .v4-tabList ul.v4-tabBottom {
	box-shadow: none;
}
.tabWrap .v4-tabList ul.v4-tabBottom {
	padding-bottom: 20px;
	align-items: flex-start;
}

.v4-tabList ul li div,
.v4-tabList ul li div a {
	width: calc(100% - 5px);
}

.tabWrap .v4-tabList ul li div a {
	background: #fff;
	color: #0c3bbc;
	border-radius: 20px 20px 0 0;
	padding: 10px 10px;
}
.tabWrap .v4-tabList .v4-tabBottom li div a {
	border-radius: 0 0 20px 20px;
}

.tabWrap .v4-tabList ul li div[aria-selected="false"] {
	height: calc(100% - 10px);
}

.tabWrap .v4-tabList ul li div[aria-selected="false"] .v4-tabIcon {
	height: 46px;
}

.tabWrap .v4-tabList ul li div[aria-selected="true"] a {
	background: #fff;
	color: #0c3bbc;
}
.tabWrap .v4-tabList ul li div[aria-selected="false"] a {
	background: #d8e2ee;
}

.tabWrap .v4-tabList ul.v4-tabTop li div[aria-selected="true"] a:before,
.v4-tabList ul.v4-tabBottom li div[aria-selected="true"] a:before {
	display: none;
}

.tabWrap .v4-tabPattern02 .v4-tabTitleText {
	font-size: 0.64em;
}

@media screen and (max-width: 767px) {
	.tabWrap .v4-tabList .v4-tabTop,
	.tabWrap .v4-tabList .v4-tabBottom,
	.tabWrap .v4-tabContent {
		width: 100%;
	}

	.tabWrap .v4-tabPinch01 {
		background-image: none;
	}

	.tabWrap .v4-tabContent {
		padding: 31px 10px 20px;
		box-sizing: border-box;
	}

	.tabWrap .v4-tabPattern02 .v4-tabTitleText {
		font-size: 1.6rem;
		line-height: 1.4;
	}
	.tabWrap .v4-tabPattern02 [aria-controls="tabA02"] .v4-tabTitleText {
		margin-top: -4px;
	}

	.tabWrap .v4-tabPattern02 .v4-tabIcon {
		display: inline-block;
		line-height: 1;
		width: 47px;
		height: 35px;
		margin-right: 5px;
	}

	.tabWrap .v4-tabPattern02 [aria-controls="tabA02"][aria-selected="false"] .v4-tabIcon {
		height: 34px;
	}

	.tabWrap .v4-tabPattern02 [aria-controls="tabA01"] .v4-tabIcon>img {
		width: 80%;
	}
	.tabWrap .v4-tabPattern02 [aria-controls="tabA02"] .v4-tabIcon>img {
		width: 87%;
	}

	.tabWrap .v4-tabList ul li div a {
		border-radius: 10px 10px 0 0;
		padding: 10px 10px;
		width: 100%;
	}
	.tabWrap .v4-tabList .v4-tabBottom li div a {
		border-radius: 0 0 10px 10px;
	}

	.tabWrap .v4-tabList ul li div[aria-controls="tabA01"][aria-selected="true"] a {
		padding: 20px 10px 11px;
	}
	.tabWrap .v4-tabList ul li div[aria-controls="tabA01"][aria-selected="false"] a {
		padding: 13px 10px 2px;
	}

	.tabWrap .v4-tabList ul li div[aria-controls="tabA02"][aria-selected="false"] a {
		padding: 13px 10px 2px;
	}
	.tabWrap .v4-tabList ul li div[aria-controls="tabA02"][aria-selected="true"] a {
		padding: 20px 10px 11px;
	}

	.tabWrap .v4-tabList ul.v4-tabTop,
	.tabWrap .v4-tabList ul.v4-tabBottom {
		padding-left: 10px;
		padding-right: 10px;
		box-sizing: border-box;
	}

	.v4-tabList ul li div,
	.v4-tabList ul li div a {
		width: calc(100% - 4px);
	}

	.v4-tabSwitch[aria-controls="tabA02"] {
		margin-left: auto;
	}

	.tabWrap .v4-tabTitleText .spContent {
		display: block !important;
	}
}


/*
BeforeAfter Box */
.baBox {
	display: flex;
	justify-content: space-between;
}
.baBox:nth-of-type(2) {
	margin-top: 16px;
}
.baBox:nth-of-type(3) {
	margin-top: 9px;
}

.baBox .boxItem {
	width: calc(100% / 2);
}

@media screen and (max-width: 767px) {
	.baBox {
		flex-direction: column;
	}

	.baBox:nth-of-type(2),
	.baBox:nth-of-type(3) {
		margin-top: 10px;
	}

	.baBox .boxItem {
		width: 100%;
	}
}


/*
Carousel */
.carouselTitle {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	font-size: 2.2rem;
	gap: 8px;
}
.carouselTitle>span {
	text-align: center;
}
.carouselTitle>span>img {
	width: 75%;
}

.carouseLead {
	line-height: 1.7;
}

.carouselList>li>figure {
	width: 72%;
	margin: 5px auto 22px;
}

.v4-carousel01 .bx-default-pager a.active {
	background: #0c3bbc;
}


@media screen and (max-width: 767px) {
	.carouselTitle {
		font-size: 1.6rem;
		gap: 6px;
	}

	.carouselTitle>span>img {
		width: 50%;
	}

	.carouseLead {
		width: 93%;
		margin: 0 auto;
		line-height: 1.65;
	}

	.carouselList>li>figure {
		width: 72%;
		margin: 5px auto 22px;
	}
}


/*
Carousel -overwrite */
.tabWrap .v4-carousel01 > .carouselList > li {
	width: 58%;
}

.tabWrap .v4-carousel01 .bx-wrapper {
	margin: 0 auto;
}

.tabWrap .v4-carousel01 .bx-prev,
.tabWrap .v4-carousel01 .bx-next {
	background: transparent;
	box-shadow: none;
	margin: -65px 0 0;
}

.tabWrap .v4-carousel01 .bx-prev:before,
.tabWrap .v4-carousel01 .bx-next:before {
	color: #0c3bbc;
	font-size: 30px;
}

.tabWrap .v4-carousel01 .bx-controls {
	padding: 26px 60px;
}

@media screen and (max-width: 767px) {
	.tabWrap .v4-carousel01 .bx-prev,
	.tabWrap .v4-carousel01 .bx-next {
		margin: -32% 0 0;
	}
	.tabWrap .v4-carousel01 .bx-prev {
		left: 0 !important;
	}
	.tabWrap .v4-carousel01 .bx-next {
		right: 0 !important;
	}

	.tabWrap .v4-carousel01 .bx-prev:before,
	.tabWrap .v4-carousel01 .bx-next:before {
		font-size: 23px;
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
		margin: 0 auto;
	}

	.tabWrap .v4-carousel01 .bx-prev:before {
		text-align: left;
	}

	.tabWrap .v4-carousel01 .bx-next:before {
		text-align: right;
	}

	.tabWrap .v4-carousel01 .bx-controls {
		padding: 18px 30px 11px;
	}

	.tabWrap .v4-carousel01 .bx-default-pager {
		top: 0
	}
}


/*
Case Box */
.caseBox {
	/* display: block; */
	position: relative;
	width: 100%;
	margin: 0 auto;
	margin-top: 62px;
}

.caseBox .boxTitle {
	position: absolute;
	top: -38px;
	left: 0;
	right: 0;
	margin: 0 auto;
	text-align: center;
	z-index: 10;
}

.caseBox .boxInner {
	background: #fef7de;
	padding: 5% 9% 0.8%;
	clip-path: polygon(4% 0, 95.4% 0, 100% 19%, 100% 87%, 96% 100%, 9% 100%, 2% 96%, 0% 84%, 0 21%);
}

.caseBox .column01 {
	background: url(/kojin/mycar/landing/images/case_bg_01.png) no-repeat right 35px bottom;
	line-height: 1.2;
	padding-bottom: 18px;
}
.caseBox .column01.-type02 {
	background: url(/kojin/mycar/landing/images/case_bg_02.png) no-repeat right 35px bottom;
}

.caseBox .column02 {
	padding: 17px 0 0 16px;
}

.caseBox .listCircle02 {
	margin-top: 12px;
	margin-bottom: 15px;
}

.caseBox .listCircle02 > li {
	margin-bottom: 12px;
}
.caseBox .listCircle02 > li:last-child {
  margin-bottom: 0;
}

.caseBox *[class*="v4-detailArrowBlockA"] > *, *[class*="v4-detailArrowBlockB"] > * {
	padding: 0;
	background: none;
}

.caseBox *[class*="v4-detailArrowBlockA"] > *:not(:last-child):before, *[class*="v4-detailArrowBlockB"] > *:not(:last-child):before {
	display: none;
}

.caseBox .color01 {
	background: #d4ebea;
	color: #0c3bbc;
}

.caseBox .color02 {
	background: #0c3bbc;
	color: #fff;
}

@media screen and (max-width: 767px) {
	.caseBox {
		margin-top: 31px;
	}

	.caseBox .boxInner {
		padding: 10.8% 5% 0.8%;
		clip-path: polygon(7% 0, 89.4% 0, 100% 10%, 100% 90%, 90% 100%, 20% 100%, 3% 96%, 0% 90%, 0 10%)
	}

	.caseBox .boxTitle {
		width: 66%;
		margin: 0 auto;
		top: -26px;
	}

	.caseBox *[class*="v4-detailArrowBlockA"], *[class*="v4-detailArrowBlockB"] {
		flex-direction: column;
	}

	.caseBox .listCircle02 {
		margin-top: 2px;
		margin-bottom: 4px;
	}

	.caseBox .listCircle02 > li {
		margin-bottom: 3px;
	}

	.caseBox .column01,
	.caseBox .column01.-type02 {
		background-size: 50%;
		background-position-x: right;
		background-position-y: 86%;
	}

	.caseBox .column02 {
		padding: 0;
	}

	.graphColumn {
		font-size: 1.45rem;
	}
}




/*
graphColumn */
.graphColumn {
	display: flex;
}


/*
balloon */
.balloonWrap01 {
	filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.16));
}

.balloonWrap02 {
	filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.16));
}

.balloon01 {
	box-sizing: border-box;
	width: 92%;
	margin: 0 auto 0 34px;
	background: #fff;
	padding: 7.7% 7% 4% 4%;
	font-size: 2.2rem;
	line-height: 1.55;
	font-weight: bold;
	text-align: center;
	clip-path: polygon(0% 60%, 8% 16%, 71% 16%, 72% 0%, 75% 16%, 87% 16%, 97% 34%, 94% 87%, 88% 100%, 8% 100%);
}

.balloon02 {
	box-sizing: border-box;
	width: 40.7%;
	margin: -15px auto 0 74px;
	background: #f98958;
	color: #fff;
	padding: 3.6% 1% 0.7% 1%;
	font-size: 2.4rem;
	font-weight: bold;
	text-align: center;
	clip-path: polygon(0% 66%, 8% 34%, 48% 34%, 49% 0%, 52% 34%, 90% 34%, 100% 46%, 97% 91%, 89% 100%, 8% 100%);
}

.balloon02 strong {
	font-size: 1.25em;
}

@media screen and (max-width: 767px) {
	.balloon01 {
		width: 100%;
		font-size: 1.6rem;
		margin: -5px auto 10px;
		clip-path: polygon(0% 61%, 8% 16%, 72% 16%, 74% 0%, 76% 16%, 90% 16%, 100% 33%, 97% 90%, 91% 100%, 7% 100%);
		padding: 7.3% 7% 4% 4%;
	}

	.balloon02 {
		width: 90%;
		margin: -12px auto 0;
		font-size: 1.6rem;
		padding: 9% 1% 1.5% 1%;
		clip-path: polygon(0% 66%, 7% 35%, 18% 36%, 19% 0%, 22% 34%, 90% 34%, 100% 46%, 97% 91%, 89% 100%, 8% 100%);
	}
}


/*
Sim */
.mycarSimSection, .mycarSim01Block01 {
	background: #fef7de;
}

.mycarSim01Block01.v3_fullColumnA01 > .columnInner {
	padding: 60px 0 40px;
}

@media screen and (max-width: 767px) {
	.mycarSim01Block01.v3_fullColumnA01 > .columnInner {
		padding: 30px 0 40px;
	}

	.simArea .mycarSimSection, .mycarSim01Block01 {
		padding: 0 10px;
	}
}


/*
Comparison Area */
.comparisonArea {
	padding-bottom: 137px;
}

.comparisonArea .areaTitle {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-size: 3rem;
	font-weight: bold;
}

.u-medal > span:before {
	content: url(/kojin/mycar/landing/images/medal_ico_001.svg);
	margin-top: -1.1em;
  width: 1.8em;
}

.comparisonArea table[class*="v4-tableLayoutA"] .separatorLine > th > * > span {
	min-width: 34%;
}

.comparisonArea table[class*="v4-tableLayoutA"] .separatorLine + tr.cellNarrow > td {
	padding-top: 76px;
  padding-bottom: 35px;
}

.comparisonArea .fColor01 {
	color: #ffef69;
}

.comparisonArea .afterArw {
	position: relative;
  box-sizing: border-box;
}
.comparisonArea .afterArw::after {
	content: "";
	position: absolute;
	width: 0;
	height: 0;
	border-style: solid;
	bottom: -64px;
	left: 50%;
	margin-left: -35px;
	border-width: 25px 35px 0 35px;
	border-color: #e6e6e6 transparent transparent transparent;
}

@media screen and (max-width: 767px) {
	.comparisonArea {
		padding: 0 10px 88px;
	}

	.comparisonArea .areaTitle {
		font-size: 2rem;
	}

	.comparisonArea .areaTitle span {
		width: 27%;
		margin: 0 auto;
	}

	.comparisonArea .v4-tableLayoutA01 thead {
		font-size: 1.4rem;
	}

	.comparisonArea .v4-tableLayoutA01 thead .v4-tableBg01 {
		font-size: 1.3rem;
	}

	.comparisonArea .v4-tableLayoutA01 thead span {
		font-size: 1.3rem;
	}

	.comparisonArea table[class*="v4-tableLayoutA"] .separatorLine > th > * > span {
		min-width: 50%;
	}

	.comparisonArea table[class*="v4-tableLayoutA"] .separatorLine + tr.cellNarrow > td {
		padding-top: 50px;
		padding-bottom: 18px;
	}

	table[class*="v4-tableLayoutA"] .glyphMedal01 > span:before,
	table[class*="v4-tableLayoutA"] .glyphMedal02 > span:before,
	table[class*="v4-tableLayoutA"] .glyphMedal01.medalTop > span:before,
	table[class*="v4-tableLayoutA"] .glyphMedal02.medalTop > span:before {
		top: 0;
		left: 0;
		margin-top: 0;
		margin-left: -24px;
	}

	table[class*="v4-tableLayoutA"] .glyphMedal01 > span,
	table[class*="v4-tableLayoutA"] .glyphMedal02 > span,
	table[class*="v4-tableLayoutA"] .glyphMedal01.medalTop > span,
	table[class*="v4-tableLayoutA"] .glyphMedal02.medalTop > span {
		padding-top: 0;
	}

	.comparisonArea .afterArw::after {
		bottom: -41px;
		border-width: 20px 32px 0 35px;
	}
}


/*
CTA Area */
.ctaArea {
	background: #0c3bbc;
	padding: 25px 0;
}

.ctaBlock {
	box-sizing: border-box;
	width: 658px;
	margin: -7.9% auto 0;
	background: #fff;
	padding: 9.7% 9% 1.5%;
	clip-path: polygon(9% 0, 88% 0, 97% 11%, 100% 23%, 100% 85%, 91% 100%, 12% 100%, 3% 96%, 0% 79%, 0 15%);
}

.ctaArea .blockTitle {
	text-align: center;
	margin-top: -7.7%;
	position: relative;
	z-index: 10;
}

.ctaArea .v3-decorationTextA01 > span:before, .v3-decorationTextA01 > span:after, .v3-decorationTextB01 > span:before, .v3-decorationTextB01 > span:after {
	background: #000;
}

@media screen and (max-width: 767px) {
	.ctaArea {
		padding-left: 10px;
		padding-right: 10px;
	}

	.ctaArea .blockTitle {
		width: 85%;
		margin: -19.6% auto 0;
	}

	.ctaBlock {
		width: 100%;
		padding: 23.7% 8% 3%;
		margin: -19.8% auto 0;
		clip-path: polygon(15% 0, 80% 0, 94% 8%, 100% 21%, 100% 82%, 84% 100%, 20% 100%, 5% 95%, 0% 75%, 0 17%);
	}
}

/*
Footer Area */
.footerArea {
	background: #fef7de;
	padding: 28px 0;
}

.footerCta {
	width: 800px;
	margin: 0 auto;
}

.column2wrap {
	display: flex;
}

.column2wrap .wrapItem {
	width: calc(100% / 2);
	line-height: 1.6667;
	box-sizing: border-box;
	padding: 15px 30px;
}

.column2wrap .wrapItem a {
	color: #000;
}

.column2wrap .wrapItem a:hover {
	opacity: .7;
}

.column2wrap .wrapItem:last-child {
	border-left: 1px solid #000;
}

@media screen and (max-width: 767px) {
	.footerArea {
		padding: 13px 0;
	}

	.footerCta {
		width: 100%;
		padding-bottom: 4px;
	}

	.column2wrap .wrapItem {
		padding: 4px 10px;
	}

	.imgBlockF02 > .img {
		width: 78%;
		margin: 0 auto;
	}
}


/*
Tab CTA */
.tabCta {
	margin: 50px auto 0;
  width: 34%;
}

.tabCta .v3-decorationTextB01 {
	font-size: 2rem;
}

@media screen and (max-width: 767px) {
	.tabCta {
		margin: 26px auto 0;
		width: 85%;
	}

	.tabCta .v3-decorationTextB01 {
		font-size: 1.6rem;
	}
}