@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:#eef2f5 ;padding: 0 15px 15px 15px; color: #333;}
.contbox01{padding: 0;margin: 0px auto 0 auto;width: 980px;}
.contbox01_sw{box-shadow: 4px 4px 2px #c3c3c3;margin:-80px 0 10px 0;}
.contbox01_inn{width: 100%;padding: 80px 0 15px 0;border: 3px solid #55adb0;}
.contbox01_inn .m_tit_s img{width: 100%;}

/* 全体の大枠 */
/* --- 共通＆PC用設定（3列） --- */
.grid-container {
  display: flex;
  flex-wrap: wrap; /* 折り返しを有効にする（必須） */
  width: 100%;
  border-top: 2px solid #ccc;  /* 外枠（上）が必要な場合 */
  /* border-left: 2px solid #ccc;  外枠（左）が必要な場合 */
  padding-top: 15px;
  margin: 5px auto 0 auto;
  width: 98%;
}

.grid-item {
  width: 33.33%; /* PCは3分割 */
  box-sizing: border-box;
  
  /* 基本的に全員に「右」と「下」の線を引く */
  border-right: 2px solid #ccc;
  border-bottom: 2px solid #ccc;
  
  /* 配置用（任意） */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

/* PC：3の倍数（3,6...）だけ「右線」を消す */
.grid-item:nth-child(3n) {
  border-right: none;
}
/* PC：最後の行（もし6個なら後ろの3個）だけ「下線」を消す */
/* ※個数が可変でも対応できるよう「最後の3つ」を指定 */
.grid-item:nth-last-child(-n+3) {
  border-bottom: none;
}

/* （参考）中身の文字などを整える用 */
.content {
  text-align: center; /* テキストを中央揃え */
}
.grid-item .content img {
  width: 100%;
}  
.gift-number{
display: block;
            background-color: #6cc1d6;
            color: #fff;
            border-radius: 50%;
            width: 25px;
            height: 25px;
            line-height: 25px;
            font-size: 1.4rem;
            margin-bottom: 5px;
  margin: 10px auto 0 auto;
}
.gift-name{
  display: block;
  margin: 0 0 0 0;
  line-height: 1.6;
  font-weight: 700;
  font-size: 1.7rem;
  font-family: MazdaTypeMedium, MazdaTypeRegular, Noto Sans CJK JP, Hiragino Kaku Gothic ProN, HiraKakuProN-W3, Meiryo, Yu Gothic Medium, sans-serif !important;}
.memo_s{
  line-height: 1.6;
  font-size: 1.4rem;
}    
.contbox02_bg{width: 100%;background: url(../images/present_bg.webp) no-repeat 0 10px;padding: 0 0 80px 0;}
.contbox02{padding: 0;margin: 80px auto ;width: 980px;}
.contbox02_sw{box-shadow: 4px 4px 2px #c3c3c3;margin:-80px 0 10px 0;background-color: #fff;}
.contbox02_inn{width: 100%;padding: 80px 0 15px 0;border: 3px solid #9d2227;}
.contbox02_inn .presentbox{ display: -webkit-flex;display: flex;}
.contbox02_inn .presentbox .ph{ width: 50%;text-align: center;}
.contbox02_inn .presentbox .ph img{ width: 78%;margin-top:-10px ;}     
.contbox02_inn .presentbox .txt{width: 50%;text-align: left;font-size: 3.0rem;font-weight: 700;padding-top: 25px;line-height: 1.4;font-family: MazdaTypeMedium, MazdaTypeRegular, Noto Sans CJK JP, Hiragino Kaku Gothic ProN, HiraKakuProN-W3, Meiryo, Yu Gothic Medium, sans-serif !important;}  
.contbox02_inn .presentbox .txt small{font-size: 2.0rem;font-weight: 700;display: block;margin-bottom: 15px;}     
.contbox03_bg{width: 100%;background: url(../images/lineup_bg.webp) no-repeat 0 780px;padding: 0 0 10px 0;}
.contbox03{padding: 0;margin: 0 auto 10px auto ;width: 980px;}
.lineup-title {
text-align: center;
margin-bottom: 60px;
font-weight: 700;
font-size: 2.8rem;
text-shadow: 2px 3px 12px rgba(0, 0, 0, 0.5);
letter-spacing: 0.6em;
}

/* --- 共通設定（ベース） --- */
.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-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:#eef2f5 ;padding: 0 0 15px 0; color: #333;}
.contbox01{width: 98%;margin: 0 auto;}
.contbox01_sw{box-shadow: 4px 4px 2px #c3c3c3;margin:-10px 0 10px 0;}
.contbox01_inn{width: 100%;padding: 10px 0 15px 0;border: 3px solid #55adb0;}
/* --- スマホ用設定（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;
}
.contbox02_sw{box-shadow: 4px 4px 2px #c3c3c3;margin:-20px 0 10px 0;background-color: #fff;}
.contbox02{margin: 50px auto;width: 98%;}
.contbox02_inn{width: 100%;padding: 20px 0 15px 0;border: 3px solid #9d2227;}
.contbox02_inn .presentbox{ display: block;}
.contbox02_inn .presentbox .ph{ width: 100%;}
.contbox02_inn .presentbox .ph img{ width: 70%;margin-top:0px ;}     
.contbox02_inn .presentbox .txt{text-align: center;font-size: 2.0rem;width: 100%;}  
.contbox02_inn .presentbox .txt small{font-size: 1.4rem;} 

.contbox03{width: 100%;}
/* .lineup-grid と .lineup-grid.top-row の両方を上書き */
  .lineup-grid,
  .lineup-grid.top-row {
    width: 100%;                 /* 幅980px固定を解除して画面いっぱいに */
    grid-template-columns: 1fr;  /* 強制的に1列にする */
    padding: 0 15px;             /* 画面端にぴったりくっつかないよう余白を追加 */
    box-sizing: border-box;      /* 余白を含めて幅100%にする設定 */
  }
.lineup-title {
text-align: center;
margin-bottom: 30px;
font-weight: 700;
font-size: 1.8rem;
text-shadow: 2px 3px 12px rgba(0, 0, 0, 0.5);
letter-spacing: 0.6em;
}
.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%;
}
}