@charset "UTF-8";
/* CSS Document */

html, body {
	margin:0;
	padding:0;
}



/*Webフォントの指定///////////////////////////////////*/
/*WebフォントRegular*/
@font-face {
  	font-family: 'MazdaType-Regular';
	src: url("../fonts/mazda/0050_MazdaType-Regular.woff") format('woff');
  	font-weight: normal;
}

/*WebフォントMedium*/
@font-face {
  	font-family: 'MazdaType-Medium';
  	src: url('../fonts/mazda/0030_MazdaType-Medium.woff') format('woff');
  	font-weight: normal;
}

/*WebフォントBold*/
@font-face {
  	font-family: 'MazdaType-Bold';
  	src: url('../fonts/mazda/0010_MazdaType-Bold.woff') format('woff');
  	font-weight: bold;
}





.LP_wrap  {
	overflow: hidden;
	font-family: 'MazdaType-Regular', "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
	color: #1e1e1e;
	font-size: 24px;
	line-height: 1.5;
}
@media screen and (max-width:750px){
	.LP_wrap  {
		font-size: 28px;
	}
}

.LP_wrap div, img, section, h2, h3, h4, p, figure, ul, li {
	margin:0;
	padding:0;
}

.LP_wrap img {
	width: 100%;
	height: auto;
	margin: auto;
	vertical-align: bottom;
}

.LP_wrap .con {
	width: 90%;
	max-width: 940px;
	margin: 120px auto 0;	
	box-sizing: border-box;
}




/*h2//////////////////////////////////////////*/
.LP_wrap .h2_wrap {
	position: relative;
}
.LP_wrap .h2_wrap h2 {
	position: absolute;
	top:0;
	left: 0;
}


/*h2&特典　共通アニメーション ///////////////*/
/*左から表示 */
.LP_wrap .fadeLeft{
	animation:LeftAnime 3s forwards; 
}
@keyframes LeftAnime{
  from {
    opacity: 0;
	transform: translateX(-200px);  
  }
  to {
    opacity: 1;
	transform: translateX(0px);
  }
}

/*右から表示 */
.LP_wrap .fadeRight{
animation:RightAnime 3s forwards;
}
@keyframes RightAnime{
  from {
    opacity: 0;
	transform: translateX(200px);  
  }
  to {
    opacity: 1;
	transform: translateX(0px);
  }
}


/*下から表示 */
.LP_wrap .fadeUp{
animation:UpAnime 3s forwards;
}
@keyframes UpAnime{
  from {
    opacity: 0;
	transform: translateY(200px);  
  }
  to {
    opacity: 1;
	transform: translateY(0px);
  }
}


/*ふわっと表示 */
.LP_wrap .fadeIn{
animation:fadeInAnime 3s forwards;
opacity:0;
}
@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}




/*特典//////////////////////////////////////////*/
.LP_wrap .tokuten  {
	text-align: center;
}

/*テキスト：今なら、CX-30（2023年10月発売モデルの新車）をご成約されたお客様に〜*/
@media screen and (max-width:1024px){
	.LP_wrap .tokuten p br {
		display: none;
	}
	.LP_wrap .tokuten p {
		text-align: left;
	}
}

/*下から表示 */
.LP_wrap .tokuten figure {
animation:fadeUpAnime 2s forwards;
}
@keyframes fadeUpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);  
  }
  to {
    opacity: 1;
	transform: translateY(0px);
  }
}

/*10万円分純正オプション用品*/
.LP_wrap .option_box {
	position: relative;
	margin-bottom: 25%;
}
.LP_wrap .option_box p {
	position: absolute;
	top: 0;
}
/*プレゼントキャンペーン実施中!*/
.LP_wrap .tokuten p.ttl {
	font-size: 62px;
	color: #a00a14;
	font-family: 'MazdaType-Medium';
}
@media screen and (max-width:1024px){
	.LP_wrap .tokuten p.ttl {
		font-size: 42px;
		color: #a00a14;
		font-family: 'MazdaType-Medium';
	}
}
/*CX-30 アクセサリーカタログに掲載されている商品からお好きなオプションを選べます*/
.LP_wrap .tokuten p.sub_txt {
	font-size: 22px;
	color: #a00a14;
	border-top:1px solid #a00a14;
	border-bottom:1px solid #a00a14;
	padding:5px 0;
	margin-bottom: 5%;
}
@media screen and (max-width:1024px){
	.LP_wrap .tokuten p.sub_txt {
		font-size: 17px;
	}
}

/*注意書き*/
.LP_wrap .tokuten ul.note {
	font-size: 16px;
	list-style: none;
	margin-bottom: 8%;
	text-align: left;
}
.LP_wrap .tokuten ul.note li {
	position: relative;
	padding-left: 2%;
	line-height: 1.2;
	margin-bottom: 8px;
}
.LP_wrap .tokuten ul.note li::before {
	content: "※";
	position:absolute;
	left: 0;
}
@media screen and (max-width:1024px){
	.LP_wrap .tokuten ul.note li br {
		display: none;
	}
}



/*オプションプレゼントの一例*/
.LP_wrap .tokuten .present_con p {
	position: relative;
}
/*例えば*/
.LP_wrap .tokuten .present_con p.tatoeba {
	position: relative;
	z-index: 2;
	animation: fuwafuwa 1.0s ease-in-out infinite alternate-reverse;
}
@keyframes fuwafuwa {
  0% {
    transform: translateY(-8%);
  }
  100% {
    transform: translateY(8%);
  }
}
.LP_wrap .tokuten .present_con p.tatoeba+p {
	margin-top: -5%;
	position: relative;
	z-index: 1;
}





/*////////////  各店舗リスト ///////////////*/
.bg_gray {
	background: #ececec;
	padding: 0 0 15%;
	margin-bottom: 15%;
}
@media screen and (max-width:1024px){
	.bg_gray {
		padding: 0 0 25%;
	}
}
.bg_gray img {
	margin: 10% 0 5%;
}
.bg_gray p {
	text-align: center;
	font-family: 'MazdaType-Medium';
	margin-bottom: 5%;
}
@media screen and (max-width:1024px){
	.bg_gray p {
		font-size: 20px;
	}
}
@media screen and (max-width:750px){
	.bg_gray p span {
		display: block;
	}
	.bg_gray p br {
		display: none;
	}
}


/*各店舗リンクボタン*/
ul#shop_list {
	list-style: none;
	box-sizing: border-box;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	column-gap: 3%;
	grid-row-gap: 5%;
}
@media screen and (max-width:1024px){
	ul#shop_list {
		width: 95%;
		margin: auto;
		grid-template-columns: 1fr 1fr 1fr;
		column-gap: 3%;
		grid-row-gap: 3%;
	}
}
@media screen and (max-width:750px){
	ul#shop_list {
		grid-template-columns: 1fr 1fr;
	}
}

ul#shop_list li a {
	position: relative;
	background: #fff;
	text-align: center;
	font-size: 24px;
	color: #656565;
	display: block;
	text-decoration: none;
	padding: 20px 0;
	border: 1px solid #656565;
    transition: all  0.3s ease;
	box-sizing: border-box;
}
ul#shop_list li a:hover {
	background: #000;
	color: #fff;
}
/*矢印のスタイル*/
ul#shop_list li a::after {
  content: '';
  width: 10px;
  height: 10px;
  border: 0px;
  border-top: solid 2px #656565;
  border-right: solid 2px #656565;
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  right: 6%;
  margin-top: -6px;
}
/*矢印のスタイル　hover*/
ul#shop_list li a:hover::after {
  content: '';
  width: 10px;
  height: 10px;
  border: 0px;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  right: 6%;
  margin-top: -6px;
}
@media screen and (max-width:1024px){
	ul#shop_list li a::after {
	  right: 5%;
	  margin-top: -6px;
	}
	ul#shop_list li a:hover::after {
	  right: 5%;
	  margin-top: -6px;
	}
}


ul#shop_list li{
    width: auto !important;
}






/*h3共通 //////////////////////////////////////////*/
.LP_wrap h3 {
	position: relative;
	font-size: 33px;
  	font-family: 'MazdaType-Medium';
	margin-bottom: 13%;
	text-align: center;
}
.LP_wrap h3::after {
	content: "";
	position: absolute;
	bottom: -30px;
	left: 0;
	right: 0;
	margin: auto;
	width: 20%;
	height: 1.7px;
	background: #1e1e1e;
}


/*運転しやすい環境*/
.LP_wrap .about figure {
	margin-bottom: 5%;
}
/*太字テキスト*/
.LP_wrap .about p.h3_B_txt {
	font-size: 26px;
  	font-family: 'MazdaType-Medium';
	font-weight: bold;
	text-align: center;
	margin-bottom: 5%;
}
@media screen and (max-width:1024px){
	.LP_wrap .about p.h3_B_txt {
		font-size: 24px;
	}
}
.LP_wrap .about p.h3_B_txt+p {
	font-size:18px;
	margin-bottom: 10%;
	line-height: 1.7;
}
@media screen and (max-width:1024px){
	.LP_wrap .about p.h3_B_txt+p {
		font-size:24px;
	}
}





/*h4共通 //////////////////////////////////////////*/
.LP_wrap .h4_con {
	border: 1px solid #a9a9a9;
	padding: 7% 4% 3%;
	box-sizing: border-box;
}
@media screen and (max-width:1024px){
	.LP_wrap .h4_con {
		padding: 7% 8% 3%;
	}
}
.LP_wrap .h4_con h4 {
	font-size: 24px;
	text-align: center;
	margin-bottom: 7%;
}
@media screen and (max-width:1024px){
	.LP_wrap .h4_con h4 {
		font-size: 28px;
	}
}

.LP_wrap .h4_con .gridbox {
	display: grid;
	grid-template-columns: 40% 1fr;
	column-gap: 5%;
}
@media screen and (max-width:1024px){
	.LP_wrap .h4_con .gridbox {
		display: grid;
		grid-template-columns: 1fr;
		column-gap: 0;
	}
}
/*太字テキスト*/
.LP_wrap .h4_con p.h4_B_txt {
	font-size: 22px;
  	font-family: 'MazdaType-Medium';
	font-weight: bold;
	margin-bottom: 5%;
}
@media screen and (max-width:1024px){
	.LP_wrap .h4_con p.h4_B_txt {
		font-size: 25px;
		text-align: center;
	}
}

.LP_wrap .about p.h4_B_txt+p {
	font-size:18px;
	margin-bottom: 10%;
	line-height: 1.7;
}
@media screen and (max-width:1024px){
	.LP_wrap .about p.h4_B_txt+p {
		font-size:24px;
	}
}





/*2種類のパワートレイン //////////////////////////////*/
.LP_wrap .power p.ttl {
  	font-family: 'MazdaType-Medium';
	font-weight: bold;
	text-align: center;
	background: #dcdcdc;
	padding: 5px 0;
	margin-bottom: 5%;
}
.LP_wrap .power .gridbox {
	display: grid;
	grid-template-columns: 30% 1fr;
	column-gap: 5%;
	margin-bottom: 120px;
}
@media screen and (max-width:1024px){
	.LP_wrap .power figure {
		width: 50%;
		margin-left: auto;
		margin-right: auto;
	}
	.LP_wrap .power .gridbox {
		display: grid;
		grid-template-columns: 1fr;
		column-gap: 0;
	}
}
@media screen and (max-width:750px){
	.LP_wrap .power figure {
		width: 70%;
	}
}
/*テキストエリア*/
.LP_wrap .power .txt_item p {
	font-size: 18px;
}
/*太字テキスト*/
.LP_wrap .power p.ttl_B_txt {
	font-size: 23px;
  	font-family: 'MazdaType-Medium';
	font-weight: bold;
	margin-bottom: 4%;
}
/*e-SKYACTIV*/
.LP_wrap .power p.ttl_B_txt:first-child {
	font-size: 26px;
  	font-family: 'MazdaType-Medium';
	font-weight: normal;
}
/*M HYBRID*/
.LP_wrap .power p.ttl_B_txt span {
	background: #a00a14;
	color: #fff;
	font-size: 20px;
	padding: 0px 10px;
	border-radius: 5px;
	margin-left: 5%;
}
@media screen and (max-width:1024px){
	.LP_wrap .power .txt_item p {
		font-size: 24px;
	}
	.LP_wrap .power p.ttl_B_txt {
		font-size: 26px;
	}
	.LP_wrap .power p.ttl_B_txt:first-child {
		font-size: 32px;
	}
	.LP_wrap .power p.ttl_B_txt span {
		font-size: 30px;
	}
}




/*ちょうどいいサイズ感 //////////////////////////////*/
.LP_wrap .size p.copy {
	font-size: 26px;
  	font-family: 'MazdaType-Medium';
	font-weight: bold;
	text-align: center;
	margin-bottom: 7%;
}
.LP_wrap .size p.copy+figure {
	margin-bottom: 10%;
}




/*プライスゾーン //////////////////////////////*/
.LP_wrap .pricezone p{
	margin-bottom: 15%;
}
.LP_wrap .pricezone a {
	width: 100%;
	max-width: 521px;
	display: block;
	margin: auto;
	margin-bottom: 200px;
}






/*ボタン//////////////////////////////////////////*/
/*.LP_wrap a.LP_btn {
	display: block;
	width: 90%;
	max-width: 650px;
	margin: 10% auto;
}
*/
/*リンクボタン///////////////*/
.LP_wrap a:hover {
	opacity: 0.8;
}





/*スクロールで表示アニメーション///////////////*/

/*----------------------------
scroll_up ｜下から上へ出現
----------------------------*/
.scroll_up {
  transition: 0.8s ease-in-out;
  transform: translateY(50px);
  opacity: 0;
}
.scroll_up.on {
  transform: translateY(0);
  opacity: 1.0;
}
/*----------------------------
scroll_left ｜左から出現
----------------------------*/
.scroll_left {
    transition: 0.8s ease-in-out;
    transform: translateX(-100px);
    opacity: 0;
}
.scroll_left.on {
    opacity: 1.0;
    transform: translateX(0);
}

/*----------------------------
scroll_right ｜右から出現
----------------------------*/
.scroll_right {
    transition: 0.8s ease-in-out;
    transform: translateX(100px);
    opacity: 0;
}
.scroll_right.on {
    opacity: 1.0;
    transform: translateX(0);
}

/*タイミングをずらす*/
.timing02 {animation-delay: .2s;}
.timing03 {transition-delay: .8s;}
.timing04 {transition-delay: .12s;}
.timing05 {transition-delay: .16s;}