@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  {
	font-family: 'MazdaType-Regular', "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
}

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

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





.LP_wrap .con_840 {
	width: 90%;
	max-width: 840px;
	margin: 0 auto 0;	
	box-sizing: border-box;
}
.LP_wrap .con_940 {
	width: 90%;
	max-width: 940px;
	margin: 0 auto 0;	
	box-sizing: border-box;
}
.LP_wrap .con_1100 {
	width: 100%;
	max-width: 1100px;
	margin: 0 auto 0;	
	box-sizing: border-box;
}
.LP_wrap .con_ucar {
	width: 80%;
	max-width: 940px;
	margin: 0 auto 0;	
	box-sizing: border-box;
}

.LP_wrap .margin-T_5 {
	margin-top: 5%;
}
.LP_wrap .margin-T_10 {
	margin-top: 10%;
}
.LP_wrap .margin-T_15 {
	margin-top: 15%;
}


/* ページロード時にふわっと表示させるアニメーション ////////*/
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.lp-cx5.sub {
	opacity: 0;
	animation: fadeIn 1.5s ease-in-out forwards;
}




/*main_img　スライダー //////////////////////////////*/
.LP_wrap{
  position: relative;
}
.lp-cx5{
  /*height: 100vh;*/
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;

}

/* 背景スライダー（固定） */
.LP_wrap .LP_main_img__slides{
  position: fixed;
  inset: 0;
  z-index: 0;
  margin: 0;
  pointer-events: none;
  transform: translateZ(0);
  backface-visibility: hidden;
height: 100vh;

  
}
.LP_main_img__slides {
  transition: opacity 0.6s ease;
}

.LP_main_img__slides.is-hidden {
  opacity: 0;
  pointer-events: none;
}

/* スライドを全部同じ場所に重ねてフェード */
.LP_slide{
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 3.2s cubic-bezier(.22,.61,.36,1);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.LP_slide.is-active{
  opacity: 1;
}

/* ===== PC画像 ===== */
.slide01{ background-image: url("../img/campaign20260121/2601_slider_pc_01.jpg"); }
.slide02{ background-image: url("../img/campaign20260121/2601_slider_pc_02.jpg"); }
.slide03{ background-image: url("../img/campaign20260121/2601_slider_pc_03.jpg"); }
.slide04{ background-image: url("../img/campaign20260121/2601_slider_pc_04.jpg"); }


/* ===== SP画像（切替） ===== */
@media screen and (max-width: 750px){
  .slide01{ background-image: url("../img/campaign20260121//2601_slider_sp_01.jpg"); }
  .slide02{ background-image: url("../img/campaign20260121//2601_slider_sp_02.jpg"); }
  .slide03{ background-image: url("../img/campaign20260121//2601_slider_sp_03.jpg"); }
  .slide04{ background-image: url("../img/campaign20260121//2601_slider_sp_04.jpg"); }

  /* SP時は上寄せ */
  .LP_slide{
    background-position: 50% 0%;
  }
}




/* 文字画像を載せる（ここはスクロールする） */
.LP_wrap .LP_frontHero{
  position: relative;
  z-index: 3;   
  height: 100vh;
}
.LP_wrap .LP_main_img__txt{
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  animation: txtFadeIn 2.0s ease-in-out forwards;
  animation-delay: 1.5s;
  z-index: 3; 
}
@keyframes txtFadeIn{
  from { opacity: 0; }
  to   { opacity: 1; }
}


.LP_wrap .LP_main_img__txt img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}


/*final chance流れる文字*/
.flowing-letters{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  z-index: 2;
  width: 100%;
  height: 120px;
  overflow: hidden;
}
@media screen and (max-width: 750px) {
	.flowing-letters{
		bottom: 6%;
	}
}
.flowing-finalchance{
  background-image: url("../img/campaign20260121/2601_slider_finalchance.svg"); 
  background-repeat: repeat-x;
  background-position: 0 50%;
  animation: finalchanceFlow 12s linear infinite;
}
@media screen and (max-width: 750px) {
	.flowing-finalchance{
		background-size: auto 70%;
	}
}
@keyframes finalchanceFlow{
  from { background-position: 0 50%; }
  to   { background-position: -1200px 50%; }
}





.LP_wrap .zindex {
	position: relative;
	z-index: 4;
}


/*bg_style //////////////////////////////*/
.LP_wrap .LP_cx5 {
	background: #ebebeb;
	padding: 15% 0 8%;
}
.LP_wrap .LP_ucar {
	background:  #e1ded5;
	padding-bottom: 5%;
}



/*LP_gridbox :２箇所共通//////////////////////////////*/
.LP_wrap ul.LP_gridbox {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 30px 20px;
	list-style: none;
	margin: 5% auto;
}
@media screen and (max-width: 750px) {
	.LP_wrap ul.LP_gridbox {
		grid-template-columns: 1fr;
		gap: 30px 0;
	}
}



/*LP_line-up//////////////////////////////////////////*/
.LP_wrap .LP_line-up {
	background: #ffffff;
	padding: 5% 0 8%;
}
.LP_wrap .LP_line-up .con_940 {
	position: relative;
}
.LP_wrap .LP_line-up a {
	position: absolute;
	bottom: 5%;
	left: 0;
	right: 0;
	margin: auto;
	width: 60%;
	max-width: 320px;
}




/*スカイプランのメリットの一例//////////////////////////////////////////*/
.LP_wrap .LP_skyplan {
	background: #e5e9ec;
	padding-bottom: 10%;
}





/*ボタン//////////////////////////////////////////*/
/*リンクボタン*/
.LP_wrap a:hover {
	opacity: 0.8;
}

/*車ボタン*/
.LP_wrap a.btn_base{
	opacity: 1;
	text-decoration: none;
	display: block;
    background: #ffffff;
	width: 90%;
	max-width: 420px;
	height: 55px;
	line-height: 55px;
	margin: 5% auto 0;
	border-radius: 8px;
    text-align: center;
    transition: ease .4s;
	color: #000000;
	font-size: 22px;
	border: 1px solid #000000;
}
@media screen and (max-width:750px){
	.LP_wrap a.btn_base{
		height: 75px;
		line-height: 75px;
		font-size:30px;
		max-width: 800px;
	}
}
/* PC（hover可能デバイス）のみ hover指定 */
@media (hover: hover) and (pointer: fine) {
    .LP_wrap a.btn_base:hover {
        background: #231815;
        color: #ffffff;
		border: 1px solid #231815;
    }
}





/*スクロールアニメーション//////////////////////////////////////////*/
/* 共通：透明状態 */
.LP_wrap .fade-in {
  opacity: 0;
  transition: opacity 1.6s ease-out, transform 0.6s ease-out;
}
/* 表示時（その場でフェードイン） */
.LP_wrap .fade-in.show {
  opacity: 1;
  transform: translate(0, 0);
}
/* 左からフェードイン */
.LP_wrap .fade-left {
  transform: translateX(-100px);
}
/* 右からフェードイン */
.LP_wrap .fade-right {
  transform: translateX(100px);
}