@charset "utf-8";

a.opcolor8:hover{opacity: 0.6;transition-duration: 0.3s;}


@media screen and (min-width: 1921px) {
.w1920{width: 1920px;margin-left: auto;margin-right: auto;}
.w1920 img{width: 100%;}
}

@media screen and (max-width: 1920px) {
.w1920{width: 100%;z-index: 10;position: relative;background-color:#eef2f5 ;}
.w1920 img{width: 100%;}
}

.contbox_over{background-color:#fff;padding: 0 ; color: #333;}



.contbox01_bg{width: 100%;background: url(../images/present_bg.webp) no-repeat right 10px;background-size: cover;padding: 30px 0;}
.contbox01{padding: 0;margin: 0 auto 10px auto ;width: 980px;}
.sec_title{text-align: center;font-size: 2.8rem;font-weight: 700;margin: 15px 0;}
.sec_title span.red{color: #c8102e;}
.contbox01 .flexbox_w{background-color: #fff;padding: 20px 30px;margin: 0 auto;width: 980px;display: -webkit-flex;display: flex;-webkit-justify-content: space-between;justify-content: space-between;}
.contbox01 .flexbox_w .flexbox_left{width: 50%;}
.contbox01 .flexbox_w .flexbox_left .desc_text{font-size: 2.2rem;font-weight: 700;line-height: 1.4;margin-bottom: 10px;}
.contbox01 .flexbox_w .flexbox_left .desc_text span.red{color: #c8102e;}
.contbox01 .flexbox_w .flexbox_left .period_box{width: 100%;margin: 10px 0 0 0; padding: 0;text-align: center;border: 1px solid #333;font-size: 1.6rem;font-weight: 700;letter-spacing: 0.3em;}

.contbox01 .flexbox_w .flexbox_right{width: 50%;text-align: center;}
.contbox01 .flexbox_w .flexbox_right img{width: 100%;}

.contbox01 .note_text{text-align: center;}
.btn_area a {width: 50%;margin: 30px auto 15px auto;display: block;background-color: #c8102e;color: #fff;font-size: 1.6rem;font-weight: 700;text-decoration: none;text-align: center;padding: 2px 0;border-radius: 50px; /* 完全な角丸 */ letter-spacing: 0.3em;}
.btn_area a:hover { opacity: 0.7;}

.contbox01a_bg{width: 100%;background: url(../images/dl_bg.webp) no-repeat right 10px;background-size: cover;padding: 30px 0;margin: 50px 0;}
.contbox01a{padding: 0;margin: 0 auto 10px auto ;width: 980px;}
.contbox01a .flexbox_w{background-color: #fff;padding: 20px 20px;margin: 0 auto;width: 980px;display: -webkit-flex;display: flex;-webkit-justify-content: space-between;justify-content: space-between;}
.contbox01a .flexbox_w .flexbox_left{width: 50%;}
.contbox01a .flexbox_w .flexbox_left .desc_text{font-size: 2.1rem;font-weight: 700;line-height: 1.4;margin-bottom: 10px;}
.contbox01a .flexbox_w .flexbox_left .desc_text span.red{color: #c8102e;}
.contbox01a .flexbox_w .flexbox_left .period_box{width: 100%;margin: 10px 0 0 0; padding: 0;text-align: center;border: 1px solid #333;font-size: 1.6rem;font-weight: 700;letter-spacing: 0.3em;}
.contbox01a .flexbox_w .flexbox_left .info_box{width: 100%;margin: 10px 0 0 0; padding: 5px 10px;text-align: left;border: 1px solid #333;font-size: 1.2rem;font-weight: 400;letter-spacing: 0;line-height: 1.4;}
.contbox01a .flexbox_w .flexbox_left .info_box strong{font-size: 1.6rem;font-weight: 700;}
.contbox01a .flexbox_w .flexbox_right{width: 50%;text-align: right;}
.contbox01a .flexbox_w .flexbox_right img{width: 99%;}
.contbox01a .note_text{text-align: left;line-height: 1.4;width: 96%;margin: 5px auto;font-size: 1.4rem;}

.contbox02_bg{width: 100%;background: url(../images/rs_bg.webp) no-repeat 0 100px;padding:5px 0 60px 0;margin: 10px 0 50px 0;}
.contbox02{padding: 0;margin: 0 auto 10px auto ;width: 980px;}
.contbox02 .rd_tit{text-align: center;font-size: 3.2rem;color: #fff;font-family: MazdaTypeMedium, MazdaTypeRegular, Noto Sans CJK JP, Hiragino Kaku Gothic ProN, HiraKakuProN-W3, Meiryo, Yu Gothic Medium, sans-serif !important;line-height:1.2;font-weight: 700;margin-bottom: 15px;}
.contbox02 .rd_tit span{display: block;font-size: 2.4rem;font-weight: 400;}
.btn_area.gray a {width: 50%;margin: 15px auto 35px auto;display: block;background-color: #616671;color: #fff;font-size: 1.6rem;font-weight: 700;text-decoration: none;text-align: center;padding: 2px 0;border-radius: 50px; /* 完全な角丸 */ letter-spacing: 0.3em;}



.contbox03_bg{width: 100%;background-color:#fff ;padding: 20px 0 20px 0;}
.contbox03{padding: 0;margin: 0 auto 10px auto ;width: 980px;}
.contbox03 .car-name{text-align: center;font-size: 2.8rem;font-family: MazdaTypeMedium, MazdaTypeRegular, Noto Sans CJK JP, Hiragino Kaku Gothic ProN, HiraKakuProN-W3, Meiryo, Yu Gothic Medium, sans-serif !important;line-height:1.2;font-weight: 500;margin-bottom: 5px;}
.contbox03 .car-name span{font-size: 1.8rem;font-family: MazdaTypeMedium, MazdaTypeRegular, Noto Sans CJK JP, Hiragino Kaku Gothic ProN, HiraKakuProN-W3, Meiryo, Yu Gothic Medium, sans-serif !important;line-height:1.2;}
.btn_area.gray_m a {width: 90%;margin: 15px auto 35px auto;display: block;background-color: #616671;color: #fff;font-size: 1.6rem;font-weight: 700;text-decoration: none;text-align: center;padding: 2px 0;border-radius: 50px; /* 完全な角丸 */ letter-spacing: 0.3em;}




.lineup-title {
text-align: center;
margin-bottom: 60px;
font-weight: 700;
font-size: 2.8rem;
line-height: 1.6;
}

/* --- 共通設定（ベース） --- */
.lineup-grid {
  display: grid;
  width: 980px;            /* 幅は常に980px */
  margin: 0 auto 60px auto;     /* 中央寄せ。下の余白は基本60px */
  gap: 10px;               /* 画像の間隔を10pxに統一 */
  
  /* デフォルト（2行目以降）は3列 */
  grid-template-columns: repeat(3, 1fr); 
}

/* --- 1行目（上段）だけの特別設定 --- */
.lineup-grid.top-row {
  /* ここで列数を「2列」に上書き */
  grid-template-columns: repeat(2, 1fr);
  
  margin-bottom: 0px;     /* 上段の下余白だけ変えたい場合はここに記述 */
}
.car-item {
text-align: center;
margin-bottom: 20px;
}
.car-item img{
width: 100%;
}
.car-item .car-name{
margin-top: 10px;
}
.car-item .car-name img{
width: 90%;
}
.car-item .car-name.tbf img{
width: 60%;
}

a.car-link {
font-size: 1.4rem;
font-weight: 700;
color: #333;
display: block;
margin-top: 5px;
text-decoration: none;
letter-spacing: 0.2em;
}
.car-link::after {
content: " >";
}
a.car-link:hover {
	filter:alpha(opacity=50);
	-moz-opacity: 0.5;
	opacity: 0.5;
}  


/* --- フッターバナー --- */
.footer-banner {
    margin-top: 80px;
    margin-bottom: 40px;
}

/* --- アクションボタン --- */
.action-buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 60px;
}
.action-buttons a.btn {
    background-color: #d5d5d5;
    padding: 5px 0;
    text-align: center;
    font-weight: 700;
    font-size: 2.2rem;
    border-radius: 2px;
    color: #333;
    text-decoration: none;
    width: calc(96%/3);
    letter-spacing: 0.2em;
}
.action-buttons a.btn:hover {
	filter:alpha(opacity=50);
	-moz-opacity: 0.5;
	opacity: 0.5;
}
/* --- ソーシャルリンク --- */
.social-links {
width: 98%;
margin: 0 auto;
    display: flex;
        -webkit-justify-content: space-between;
    justify-content: space-between;
    padding-bottom: 10px;
}
.social-links img {
    width: 100%;
}
.social-links a:hover {
	filter:alpha(opacity=50);
	-moz-opacity: 0.5;
	opacity: 0.5;
}
    
@media screen and (max-width: 768px) {
.contbox_over{background-color:#fff ;padding: 0 0 15px 0; color: #333;}
.sec_title{text-align: center;font-size: 2.4rem;font-weight: 700;margin: 15px 0;line-height: 1.6;}

.contbox01_bg{width: 100%;background: url(../images/present_bg.webp) no-repeat right 10px;background-size: cover;padding: 30px 0;}
.contbox01{padding: 0;margin: 0 auto 10px auto ;width: 98%;}

.contbox01 .flexbox_w{background-color: #fff;padding: 15px 15px;margin: 0 auto;width: 98%;display: -webkit-flex;display: flex;-webkit-align-items: flex-start;align-items: flex-start;-webkit-flex-direction: column-reverse;flex-direction: column-reverse;-webkit-flex-wrap: wrap;flex-wrap: wrap;}
.contbox01 .flexbox_w .flexbox_left{width: 98%;margin:0 auto;}
.contbox01 .flexbox_w .flexbox_left .desc_text{font-size: 1.6rem;font-weight: 700;line-height: 1.4;margin-bottom: 10px;margin-top: 5px;}
.contbox01 .flexbox_w .flexbox_left .desc_text span.red{color: #c8102e;}
.contbox01 .flexbox_w .flexbox_left .period_box{width: 100%;margin: 10px 0 0 0; padding: 0;text-align: center;border: 1px solid #333;font-size: 1.4rem;font-weight: 700;letter-spacing: 0;}

.contbox01 .flexbox_w .flexbox_right{width: 100%;margin:0 auto;text-align: center;}
.contbox01 .flexbox_w .flexbox_right img{width: 100%;}

.contbox01 .note_text{text-align: center;}
.btn_area a {width: 98%;margin: 30px auto 15px auto;display: block;background-color: #c8102e;color: #fff;font-size: 1.4rem;font-weight: 700;text-decoration: none;text-align: center;padding: 2px 0;border-radius: 50px; /* 完全な角丸 */ letter-spacing: 0;}
.btn_area a:hover { opacity: 0.7;}

.contbox01a_bg{width: 100%;background: url(../images/dl_bg.webp) no-repeat right 10px;background-size: cover;padding: 30px 0;margin: 50px 0 10px 0;}
.contbox01a{padding: 0;margin: 0 auto 10px auto ;width: 98%;}
.contbox01a .flexbox_w{background-color: #fff;padding: 20px 20px;margin: 0 auto;width: 98%;display: -webkit-flex;display: flex;-webkit-align-items: flex-start;align-items: flex-start;-webkit-flex-direction: column-reverse;flex-direction: column-reverse;-webkit-flex-wrap: wrap;flex-wrap: wrap;}
.contbox01a .flexbox_w .flexbox_left{width: 98%;margin:0 auto;}
.contbox01a .flexbox_w .flexbox_left .desc_text{font-size: 1.6rem;font-weight: 700;line-height: 1.4;margin-bottom: 10px;margin-top: 5px;}
.contbox01a .flexbox_w .flexbox_left .desc_text span.red{color: #c8102e;}
.contbox01a .flexbox_w .flexbox_left .period_box{width: 100%;margin: 10px 0 0 0; padding: 0;text-align: center;border: 1px solid #333;font-size: 1.4rem;font-weight: 700;letter-spacing: 0;}
.contbox01a .flexbox_w .flexbox_left .info_box{width: 100%;margin: 10px 0 0 0; padding: 5px 10px;text-align: left;border: 1px solid #333;font-size: 1.1rem;font-weight: 400;letter-spacing: 0;line-height: 1.4;}
.contbox01a .flexbox_w .flexbox_left .info_box strong{font-size: 1.6rem;font-weight: 700;}
.contbox01a .flexbox_w .flexbox_right{width: 100%;margin:0 auto;text-align: center;}
.contbox01a .flexbox_w .flexbox_right img{width: 100%;}
.contbox01a .note_text{text-align: left;line-height: 1.4;width: 96%;margin: 5px auto;font-size: 1.2rem;}

.contbox02_bg{width: 100%;background: url(../images/rs_bg_sp.webp) no-repeat 0 -20px;padding:20px 0 20px 0;margin: 30px 0 20px 0;}
.contbox02{padding: 20px 0 0 0;margin: 0 auto 10px auto ;width: 98%;}
.contbox02 .rd_tit{text-align: center;font-size: 2.4rem;color: #333;font-family: MazdaTypeMedium, MazdaTypeRegular, Noto Sans CJK JP, Hiragino Kaku Gothic ProN, HiraKakuProN-W3, Meiryo, Yu Gothic Medium, sans-serif !important;line-height:1.2;font-weight: 700;margin-bottom: 15px;}
.contbox02 .rd_tit span{display: block;font-size: 2.0rem;font-weight: 400;}
.btn_area.gray a {width: 90%;margin: 15px auto 15px auto;display: block;background-color: #616671;color: #fff;font-size: 1.6rem;font-weight: 700;text-decoration: none;text-align: center;padding: 2px 0;border-radius: 50px; /* 完全な角丸 */ letter-spacing: 0.3em;}



.contbox03_bg{width: 100%;background-color:#fff ;padding: 50px 0 20px 0;}
.contbox03{padding: 0;margin: 0 auto 10px auto ;width: 98%;}
.contbox03 .car-name{text-align: center;font-size: 2.8rem;font-family: MazdaTypeMedium, MazdaTypeRegular, Noto Sans CJK JP, Hiragino Kaku Gothic ProN, HiraKakuProN-W3, Meiryo, Yu Gothic Medium, sans-serif !important;line-height:1.2;font-weight: 500;margin-bottom: 5px;}
.contbox03 .car-name span{font-size: 1.8rem;font-family: MazdaTypeMedium, MazdaTypeRegular, Noto Sans CJK JP, Hiragino Kaku Gothic ProN, HiraKakuProN-W3, Meiryo, Yu Gothic Medium, sans-serif !important;line-height:1.2;}
.btn_area.gray_m a {width: 90%;margin: 15px auto 35px auto;display: block;background-color: #616671;color: #fff;font-size: 1.6rem;font-weight: 700;text-decoration: none;text-align: center;padding: 2px 0;border-radius: 50px; /* 完全な角丸 */ letter-spacing: 0.3em;}

.lineup-grid {
    display: grid;
    margin: 0 auto 20px auto;
    gap: 5px;
    grid-template-columns: repeat(3, 1fr);
}

/* --- スマホ用設定（2列に変更） --- */

  .grid-item {
    width: 50%; /* 幅を2分割（2-2-2になる） */
    
    /* 重要：PC用の線の設定を一旦リセット（全員に線を復活させる） */
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    justify-content: center;
    align-items: flex-start;
  }

  /* スマホ：2の倍数（2,4,6...）だけ「右線」を消す */
  .grid-item:nth-child(2n) {
    border-right: none;
  }

  /* スマホ：最後の行（後ろの2つ）だけ「下線」を消す */
  .grid-item:nth-last-child(-n+2) {
    border-bottom: none;
}
.gift-name{
  font-size: 1.2rem;
}
.grid-item:nth-child(3n) {
    border-right: 1px solid #ccc;
}
.grid-item:nth-last-child(-n+3) {
    border-bottom: 1px solid #ccc;
}



/* .lineup-grid と .lineup-grid.top-row の両方を上書き */
  .lineup-grid,
  .lineup-grid.top-row {
    width: 100%;                 /* 幅980px固定を解除して画面いっぱいに */
    grid-template-columns: 1fr;  /* 強制的に1列にする */
    padding: 0 5px;             /* 画面端にぴったりくっつかないよう余白を追加 */
    box-sizing: border-box;      /* 余白を含めて幅100%にする設定 */
  }
.lineup-title {
text-align: center;
margin-bottom: 30px;
font-weight: 700;
font-size: 2.0rem;
letter-spacing: -0.05em;
}

.car-item {
text-align: center;
margin-bottom: 30px;
}

.footer-banner {
    width: 98%;
margin: -40px auto 40px auto;
}

.action-buttons {
    display: block;
    width: 98%;
margin: 0 auto;
}
.action-buttons a.btn {
    background-color: #d5d5d5;
    padding: 5px 0;
    text-align: center;
    font-weight: 700;
    font-size: 1.8rem;
    border-radius: 2px;
    color: #333;
    text-decoration: none;
    width: 100%;
    letter-spacing: 0.2em;
    display: block;
    margin-bottom: 15px;
}
.social-links {
width: 98%;
margin: 0 auto;
    display: flex;
        -webkit-justify-content: space-between;
    justify-content: space-between;
    padding-bottom: 10px;
        -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}
.social-links a.ssp2 {
    display: block;
        margin-bottom: 15px;
        width: 49%;
}
.social-links a.ssp1 {
    display: block;
        margin-bottom: 15px;
        width: 100%;
}
}