@charset "UTF-8";

/***********************************************
	初期設定
************************************************/


@font-face{
	font-family:MazdaTypeRegular;
	src:url("https://www2.mazda.co.jp/common/fonts/MazdaTypeTT-Regular.woff2") format("woff2"),
		url("https://www2.mazda.co.jp/common/fonts/MazdaTypeTT-Regular.woff") format("woff"),
		url("https://www2.mazda.co.jp/common/assets/fonts/MazdaTypeTT-Regular.ttf") format("truetype");
		size-adjust: 110%;
}
@font-face{
	font-family:MazdaTypeMedium;
	src:url("https://www2.mazda.co.jp/common/fonts/MazdaTypeTT-Medium.woff2") format("woff2"),
		url("https://www2.mazda.co.jp/common/fonts/MazdaTypeTT-Medium.woff") format("woff"),
		url("https://www2.mazda.co.jp/common/fonts/MazdaTypeTT-Medium.ttf") format("truetype");
		size-adjust: 110%;
}


* {
  box-sizing: border-box;
}


html {
  font-size: 16px;
}
@media screen and (min-width: 769px) {
  html { font-size:16px; }
}

/*2408追加*/
@media screen and (max-width: 768px) {
  html { font-size: 14px; }
}
/*2506変更*/
@media screen and (max-width: 480px) {
  html { font-size: 12px; }
}


body {
   font-family: MazdaTypeRegular,MazdaTypeMedium,Noto Sans JP,Hiragino Kaku Gothic ProN,HiraKakuProN-W3,Meiryo,Yu Gothic Medium,sans-serif;
  
   width:100%;
   margin: 0;
   padding: 0;
   background-color:#000;
   display: flex;
   flex-flow: column;
   min-height: 100vh;
   line-height: 1.5;
   text-align: center;
   font-feature-settings: "palt"; 
   -webkit-font-feature-settings: "palt"; 
}

img {
  /*display: block;*/
   vertical-align: top;
   max-width: 100%;
   height: auto;
}

#wrap {
   margin:0 auto;
}

blockquote, dd, div, dl, dt, h1, h2, h3, h4, h5, h6, li, ol, p, pre, span, td, th, ul {
  margin: 0;
  padding: 0;
}

.main{
   flex: 1 0 auto;
   background-color:#fff;
   min-height: 1px;/*IE11 img resizing bug*/
}

.footer{
   background-color:#000;
   position: fixed; 
}

a {
   text-decoration: none;
}


/***********************************************	
	breakpoint
************************************************/


@media screen and (min-width:641px) {
.pc { display: inline; }
.sp { display: none; }
}

@media screen and (max-width: 640px) {
.pc { display: none; }
.sp { display: inline; }
}

@media screen and (max-width:768px) {
.pd { display: none; }
}


img {
  image-rendering: -webkit-optimize-contrast;
}

/***********************************************
	focus / blueline none（chrome）
************************************************/


*:focus {
  outline: none;
}

a {
  -webkit-tap-highlight-color:rgba(0,0,0,0);
  cursor:pointer;
}


/***********************************************
    text
************************************************/


h1, h2, h3, h4, h5, h6 {
line-height: 1.6em;
font-weight:500;
letter-spacing: 0.04em;
font-family:MazdaTypeMedium,Noto Sans JP,Hiragino Kaku Gothic ProN,HiraKakuProN-W3,Meiryo,Yu Gothic Medium,sans-serif;
}

h1 { font-size:2.2em; }
h2 { font-size:1.8em; } 
h3 { font-size:1.4em; }
h4 { font-size:1.2em; }
h5 { font-size:0.9em; }
h6 { font-size:0.7em; }


/***********************************************
    fadein
************************************************/


.fade{
  opacity:0;
  animation-name: fade01; 
  animation-delay: 0;
  animation-duration: 2s; 
  animation-iteration-count:1;
  animation-fill-mode: forwards;
}

@keyframes fade01 {
0% {
  opacity: 0;
}
100% {
  opacity: 1;
}
}


.fade_l_r{
  opacity:0;
  animation-name: fade02; 
  animation-delay: 0;
  animation-duration: 2s; 
  animation-iteration-count:1;
  animation-fill-mode: forwards;
}

@keyframes fade02 {
0% {
 transform: translate(-10%, 0);
  opacity: 0;
}
100% {
  opacity: 1;
}
}

.fade_r_l{
  opacity:0;
  animation-name: fade03; 
  animation-delay: 0;
  animation-duration: 2s; 
  animation-iteration-count:1;
  animation-fill-mode: forwards;
}

@keyframes fade03 {
0% {
 transform: translate(10%, 0);
  opacity: 0;
}
100% {
  opacity: 1;
}
}

.fade_t_b{
  opacity:0;
  animation-name: fade04; 
  animation-delay: 0;
  animation-duration: 2s; 
  animation-iteration-count:1;
  animation-fill-mode: forwards;
}

@keyframes fade04 {
0% {
 transform: translate(0, -10%);
  opacity: 0;
}
100% {
  opacity: 1;
}
}

.fade_b_t{
  opacity:0;
  animation-name: fade05; 
  animation-delay: 0;
  animation-duration: 2s; 
  animation-iteration-count:1;
  animation-fill-mode: forwards;
}

@keyframes fade05 {
0% {
 transform: translate(0, 10%);
  opacity: 0;
}
100% {
  opacity: 1;
}
}




.scrollanime02 {
  opacity: 0;
}

.fadeInDown02 {
  animation-name: fadeInDown02;
  animation-duration: 2.5s;
  animation-fill-mode: forwards;
}

@keyframes fadeInDown02 {
	0% {
		opacity: 1;			
	}
	100% {
	opacity: 0;
	transform: translate(0);
	}
}

.scrollanime01 {
  opacity: 0;
}

.fadeInDown01 {
	animation-name: fadeInDown01;
	animation-duration: 2.5s;
	animation-fill-mode: forwards;
}
@keyframes fadeInDown01 {
	0% {
		opacity: 0;			
	}
	100% {
	opacity: 1;
	transform: translate(0);
	}
}



/***********************************************
	fadein / downup
************************************************/

.fadein_downup {
  width:100%;
  height: 100%;
  opacity: 0;
  animation-delay: 0;
  animation-name: fadein;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

@keyframes fadein {
from {
    opacity: 0;
    transform: translateY(40px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}


/***********************************************
	scrollanime
************************************************/

/* スクロールアニメ改訂 */

.scra {
    opacity: 0;
    transition: all 1.0s ease; /* 20250607 0.6-1.0 */
    overflow: hidden;
}
.scra.show {
    opacity: 1;
    transform: none;
}
.sa_up1 { transform: translate(0, 15%); }
.sa_up2 { transform: translate(0, 20%); }
.sa_up3 { transform: translate(0, 30%); }
.sa_up4 { transform: translate(0, 40%); }
.sa_up5 { transform: translate(0, 50%); }
.sa_up6 { transform: translate(0, 60%); }
.sa_slide1 { transform: translate(-50%, 0) }
.sa_slide2 { transform: translate(-100%, 0) }
.sa_slide1r { transform: translate(50%, 0) }

.sa_slide_1 { transform: translate(-30%, 0) }

.sa_slide_1r { transform: translate(30%, 0) }

.sa_slide_lead { transform: translate(-10%, 0) }

.sa_tr1{transition: all 1.0s ease;}
.sa_tr2{transition: all 2.0s ease;}
.sa_tr3{transition: all 3.0s ease;}
.sa_tr4{transition: all 4.0s ease;}
.sa_tr5{transition: all 5.0s ease;}
.sa_tr6{transition: all 6.0s ease;}
.sa_tr7{transition: all 7.0s ease;}
.sa_tr8{transition: all 8.0s ease;}
.sa_tr9{transition: all 9.0s ease;}

/***********************************************
	mouseover_botton
************************************************/


.btn  { max-width:100%; }
.btn img { max-width: 100%; }
.btn a:hover { opacity: 0.6; }


/***********************************************
    scrolltop
************************************************/


#page_top{
  width: 70px;
  height: 70px;
  position: fixed;
  right: 10px;
  bottom: 10px;
  opacity: 0.6;
  z-index:9999;
}
 
#page_top a{
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  text-decoration: none;
}

#page_top a::before{
  position: absolute;
  width: 70px;
  height: 70px;
  top: -50px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}


/***********************************************	
    QM event background & inner
************************************************/


/*   inner base */

.inner_base{
max-width:1340px;
margin:0 auto;
}

@media screen and (min-width: 641px) {
.inner_base{ padding:60px 20px; }
}
@media screen and (max-width: 640px) {
.inner_base{ padding:40px 20px; }
}


/*   2025 inner */

.inner_spev_b{
max-width:1340px;
margin:0 auto;
}

@media screen and (min-width: 641px) {
.inner_spev_b{ padding:0 20px 60px; }
}
@media screen and (max-width: 640px) {
.inner_spev_b{ padding:0 20px 40px; }
}


.inner_spev_t{
max-width:1340px;
margin:0 auto;
}

@media screen and (min-width: 641px) {
.inner_spev_t{ padding:60px 20px 0; }
}
@media screen and (max-width: 640px) {
.inner_spev_t{ padding:40px 20px 0; }
}


/*   x_axis_0 inner 202506 調整1080-1320 */

.inner_spev_x0{
max-width:1340px;
margin:0 auto;
}

@media screen and (min-width: 641px) {
.inner_spev_x0{ padding:80px 0; }
}
@media screen and (max-width: 640px) {
.inner_spev_x0{ padding:60px 0; }
}

/*   x_axis_0 inner bottomあき */

.inner_spev_x0b{
max-width:1340px;
margin:0 auto;
}

@media screen and (min-width: 641px) {
.inner_spev_x0b{ padding-bottom:60px; }
}
@media screen and (max-width: 640px) {
.inner_spev_x0b{ padding-bottom:40px; }
}



/*   y_axis_0 inner */

.inner_spev_y0{
max-width:1340px;
padding:0 20px;
margin:0 auto;
}


.inner_spev_xy0{
max-width:1080px;
margin:0 auto;
}

/*  inner footer bk */

.inner_sum_x0{
width:100%;
margin:0 auto;
background-color:#000;
}

@media screen and (min-width: 641px) {
.inner_sum_x0{ padding:60px 0; }
}
@media screen and (max-width: 640px) {
.inner_sum_x0{ padding:40px 0; }
}




/***********************************************	
    QM event header
************************************************/


.qm_hd_box {
background-color:#000;
 }
 
.qm_hd_b {
max-width:1160px;
height:100px;
position:relative;
margin:0 auto;
background-color:#000;
}
 
.qm_hd_t .title_center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%); 
}

@media screen and (min-width: 641px) {
.qm_hd_b {
max-width:1160px;
height:100px;
position: relative;
margin:0 auto;
background-color:#000;
}
.qm_hd_t .logo_left {
width:117px;
position: absolute;
left: 0;
}
}

@media screen and (max-width: 640px) {
.qm_hd_b {
width:100%;
height:60px;
position: relative;
margin:0 auto;
background-color:#000;
}
.qm_hd_t .logo_left {
width:70px;
position: absolute;
left:0;
}
}


/***********************************************	
    QM title layer
************************************************/

.spev_title_box{
width:100%;
}/*IE*/

.spev_title_b {
position: relative;
width:100%;
height:100%;
margin:0 auto;
overflow: hidden;
}

.spev_title_t {
width:100%;
position:absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}

.spev_title_t2_pc {
width:100%;
margin:0 auto;
position:absolute;
top: 80%;
bottom: 0;
left: 0;
right: 0;
}

.spev_title_t2_sp {
width:100%;
margin:0 auto;
position:absolute;
top: 86%;
bottom: 0;
left: 0;
right: 0;
}

.spev_title_box a:hover {
opacity: 0.6;
display: block;
}









/***********************************************	
    2box contents title
************************************************/


@media screen and (min-width: 641px) {
.ct_title_2b {
margin:0 auto;
width:100%;
background-color:#000;
}

.ct_title_2b ul { }
.ct_title_2b li {
vertical-align:middle;
width:50%;
height:100%;
display: inline-block;
}
.ct_title_2b img {
width:100%;
height:400px;
object-fit:cover;
}
}




@media screen and (max-width: 640px) {
.ct_title_2b {
max-width:100%;
margin:0 auto;
background-color:#000;
}
.ct_title_2b ul { }
.ct_title_2b li {
max-width:100%;
margin:0;
}
}


@media screen and (min-width: 641px) {
.ct_event_2b {
margin:0 auto;
width:100%;
background-color:#000;
}

.ct_event_2b ul { }
.ct_event_2b li {
vertical-align:middle;
width:50%;
height:100%;
display: inline-block;
}
}


@media screen and (max-width: 640px) {
.ct_event_2b {
max-width:100%;
margin:0 auto;
background-color:#000;
}
.ct_event_2b ul { }
.ct_event_2b li {
max-width:100%;
margin:0;
}
}








/***********************************************	
    2box EVENT
************************************************/


@media screen and (min-width: 641px) {
.sp_ev_2b {
margin:0 auto;
max-width:1380px;
}
.sp_ev_2b ul { }
.sp_ev_2b li {
vertical-align:top;
margin:20px 2% 0;/* 2505調整 30px 2%から */
width:46%;
display: inline-block;
}
}


@media screen and (max-width: 640px) {
.sp_ev_2b {
max-width:100%;
margin:0 auto;
}
.sp_ev_2b ul { }
.sp_ev_2b li {
max-width:100%;
margin-top:40px;
}
}



/***********************************************	
    sns
************************************************/


.qm_sns{
max-width:800px;
display: inline-block;
}


@media screen and (min-width: 641px) {
.qm_sns{
max-width:530px; /* 2505 800_530 */
display:flex;
margin:0 auto;
}
.qm_sns_b{
margin:0 10px;
}
}

@media screen and (max-width: 640px) {
.qm_sns{
width:100%;
}
.qm_sns_b{
margin:15px 22% 0;
}
}


/***********************************************	
    空き設定 / PC SP 切り替え
************************************************/


/*上下に空き*/

@media screen and (min-width: 641px) {
.qm_mg_h1{
margin:80px 0;
}
}
@media screen and (max-width: 640px) {
.qm_mg_h1{
margin:40px 0;
}
}


/*上に空き*/

@media screen and (min-width: 641px) {
.qm_mg_t1{
margin-top:60px; /*80から調整*/
}
}
@media screen and (max-width: 640px) {
.qm_mg_t1{
margin-top:40px;
}
}

/*下に空き*/

@media screen and (min-width: 641px) {
.ks_mg_b1{
margin-bottom:40px;
}
}
@media screen and (max-width: 640px) {
.ks_mg_b1{
margin-bottom:20px;
}
}

/*下に空き*/

@media screen and (min-width: 641px) {
.qm_mg_b1{
margin-bottom:80px;
}
}
@media screen and (max-width: 640px) {
.qm_mg_b1{
margin-bottom:40px;
}
}

/*下に空き*/

@media screen and (min-width: 641px) {
.spw_mg_b1{
margin-bottom:60px;
}
}
@media screen and (max-width: 640px) {
.spw_mg_b1{
margin-bottom:40px;
}
}

/*LPボタン上微調整*/

@media screen and (min-width: 641px) {
.mg_lp_btn{
margin-top:40px;
}
}
@media screen and (max-width: 640px) {
.mg_lp_btn{
margin-top:20px;
}
}



/*タイトル上微調整*/

@media screen and (min-width: 641px) {
.qm_mg_title{
margin-top:50px;
}
}
@media screen and (max-width: 640px) {
.qm_mg_title{
margin-top:25px;
}
}


/***********************************************	
    透過BG（20%）
************************************************/


.bgtp_w2 {
background:rgba(255,255,255,0.2);
}

@media screen and (min-width: 641px) {
.bgtp_w2{
padding:0 0 80px;
}
}
@media screen and (max-width: 640px) {
.bgtp_w2{
padding:0 0 40px;
}
}


/***********************************************	
    透過BG（黒10%）
************************************************/


.bgtp_bk1 {
background:rgba(0,128,0,0.2);
}

@media screen and (min-width: 641px) {
.bgtp_bk1{
padding:60px 0;
}
}
@media screen and (max-width: 640px) {
.bgtp_bk1{
padding:40px 0;
}
}


/***********************************************	
    白BG
************************************************/


.bgtp_w {
background:rgba(255,255,255,1.0);
}

@media screen and (min-width: 641px) {
.bgtp_w{
padding:0 0 80px;
}
}
@media screen and (max-width: 640px) {
.bgtp_w{
padding:0 0 40px;
}
}


/***********************************************
    hr
************************************************/


hr.QM_wh {
padding:0;
 height: 1px;
 background-color: #fff;
 border: 0;
 margin:0;
}


hr.map_wh {
padding:0;
 height: 1px;
 background-color: #fff;
 border: 0;
 margin-bottom:10px;
}



/***********************************************
    logo  pc/sp 202506調整
************************************************/


@media screen and (min-width: 641px) {
.btn_res{ width:180px; }
}

@media screen and (max-width: 640px) {
.btn_res{ width:150px; }
}


 


/***********************************************
    new model TAB
************************************************/


.tab-wrap {
    max-width:1280px;
    background: #fff;
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    margin:0 auto;
}

.tab-label {
    width:calc(33.33% + 2px);
    font-size:0.9em;
    line-height:1.4em;
	color: #b3b3b3;
	background: #666;
	 border: solid 1px #fff;
	cursor: pointer;
	margin:-1px;
	order: -1;
	padding: 10px 10px;
	position: relative;
	user-select: none;
	white-space: nowrap;
	-webkit-tap-highlight-color: transparent;
}


.tab-label:hover {
color: #fff;
background-color:#888888;
}

.tab-switch:checked + .tab-label {
color: #fff;
background-color: #000;
}


.tab-switch:checked ~ .tab-label::after {
	transform: translateX(-100%);
}

.tab-switch:checked + .tab-label::after {
	opacity: 1;
	transform: translateX(0);
}

.tab-content {
	height:0;
	opacity:0;
	padding: 0 0;
	pointer-events:none;
	transform: translateX(-30%);
	transition: transform .3s 80ms, opacity .3s 80ms;
	width: 100%;
}

.tab-switch:checked ~ .tab-content {
	transform: translateX(30%);
}

.tab-switch:checked + .tab-label + .tab-content {
	height: auto;
	opacity: 1;
	order: 1;
	pointer-events:auto;
	transform: translateX(0);
}

.tab-wrap::after {
	content: '';
	height: 1px;
	order: -1;
	width: 100%;
}

.tab-switch {
	display: none;
}


/* tab new model  pc/sp */


@media screen and (min-width: 641px) {
.new_model {
width:100%;
margin:0 auto;
}
.new_model ul { }
.new_model li {
background: #fff;
width:50%;
display:inline-block;
}
}

@media screen and (max-width: 640px) {
.new_model {
max-width:100%;
margin:0 auto;
}
.new_model ul { }
.new_model li {
width:100%;
background: #fff;
}
}

.new_model a:hover {
opacity: 0.6;
display: block;
}


@media screen and (min-width: 641px) {
.tab_pd01{ padding:0 4.545%; }
}
@media screen and (max-width: 640px) {
.tab_pd01{ padding:0; }
}





/***********************************************
	2025 summer / 下段概要
************************************************/


hr.ov_bg {
 height: 1px;
 background-color: #d5d5d5;
 border:0;
 max-width:1260px;
}

@media screen and (min-width: 641px) {
hr.ov_bg {
margin:0 20px;
}
}

@media screen and (max-width: 640px) {
hr.ov_bg {
margin:0;
}
}


table.ev_ov {
vertical-align: top;
border-collapse:  collapse;
padding:0 20px;
}

table.ev_ov th {
font-size: 0.9em;
vertical-align: top;
height: 100%;
width: 1px;
white-space: nowrap;
text-align: left;
padding:15px 0 15px 0;
border-bottom:1px solid #d5d5d5;
}

table.ev_ov td {
vertical-align: top;
width: 100%;
height: 100%;
border-bottom:1px solid #d5d5d5;
text-align: left;
padding:15px 0 15px 15px;
}



/*MAP BTN*/

a.link_bl{
display:inline-block;
border-radius:3px;
color:#fff;
background-color:#000;
border: solid 0;
padding:0 5px;
margin-left:10px;
text-decoration: none;
}

a.link_bl:link {
text-decoration: none;
}

a.link_bl:visited {/*訪問後のリンク*/
text-decoration: none;
}

a.link_bl:hover {/*マウスをのせたとき*/
opacity: 0.6;
text-decoration: none;
}

a.link_bl:active {/*クリック中*/
text-decoration: none;
outline:none
}




 /***********************************************************
予約ボタン
************************************************************/


/* ボタン共通 */

.res_btn {
  display:inline-block;
  overflow: hidden;   
  border-radius: 5px;
  max-width:1340px;
  position: relative;
  z-index:1;
}

@media screen and (min-width: 641px) {
.res_btn {
  max-width:1340px;
}
}

@media screen and (max-width: 640px) {
.res_btn {
width:100%;
}
}






.res_btn p{
  margin:0 25px;
  font-size:1.2em;
  line-height:1.5em;
}

.res_btn a {
display: block;
  z-index: 100;
text-align:center;
background: #00ada9;
font-size:1.1em;
color: #fff;
padding:10px 10px;
}

.res_btn a:hover {
color: #fff;
background: #00d4cf; 
}

#trg_wh a:before {       
display: block;
content: "";
position: absolute;
  -webkit-transform: rotate(45deg);
transform: rotate(45deg);
top: 50%;
right: 16px;
width: 16px;
height:16px;
margin-top: -8px;
background: #fff;
}

#trg_wh a:hover:before { 
background: ##00d4cf;
}

#trg_wh a:after {       
display: block;
position: absolute;
content: "";
  -webkit-transform: rotate(45deg);
transform: rotate(45deg);
top: 50%;
right: 19px;
width: 16px;
height: 16px;
margin-top: -8px;
background: #00ada9;
}

#trg_wh a:hover:after {        
background: #00d4cf;
}