@charset "utf-8";
@import url("https://fonts.googleapis.com/css2?family=Anton&family=Barlow:wght@500;600;700;800&family=Noto+Sans+JP:wght@400;500;700;900&display=swap");


/* ============================================================
   PAJERO Teaser LP  /  pajero.css
   沼津三菱自動車販売株式会社
   ------------------------------------------------------------
   ※ このCSSは pajero.css を読み込むページ（PAJERO特設）のみに
     効くようスコープしています。他ページには影響しません。

   00. Tokens
   01. CMS枠のリセット（container / freePage / freeParts）
   02. ページ全体の下地（body / opt / pageTop / footer）
   03. Header
   04. 共通パーツ（wrap / 見出し / ボタン / プレースホルダー）
   05. Hero
   06. Emerald（Campaign + Story）
   07. Visit us
   08. FAQ
   09. Display event
   10. Shop
   11. Closing CTA
   12. Footer 内コンテンツ
   13. スクロール演出（CSSのみ・任意）
   14. Responsive
   ============================================================ */


/* ============================================================
   00. Tokens
   ============================================================ */
:root{
  --pj-ink:        #0a0f0c;
  --pj-paper:      #f3f5f3;
  --pj-white:      #ffffff;

  --pj-green-900:  #04241a;
  --pj-green-700:  #0a4c35;
  --pj-green-600:  #0e6644;
  --pj-green-500:  #158a58;
  --pj-green-400:  #22a06b;

  --pj-red:        #e60012;

  --pj-txt:        #1b211d;
  --pj-txt-mute:   #5f6b64;
  --pj-txt-inv:    #ffffff;
  --pj-txt-inv-mute: rgba(255,255,255,.72);

  --pj-line:       rgba(11,25,18,.12);
  --pj-line-inv:   rgba(255,255,255,.16);

  --pj-radius:     14px;
  --pj-radius-sm:  8px;

  --pj-wrap:       1120px;
  --pj-gutter:     24px;
  --pj-hdr-h:      117px;

  --pj-ff-ja: "Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  --pj-ff-en: "Anton","Noto Sans JP",sans-serif;

  --pj-ease: cubic-bezier(.22,.61,.36,1);
  --pj-kv: url("/images/pajero/pajero-mv.webp");
}


/* ============================================================
   01. CMS枠のリセット
   ------------------------------------------------------------
   #main .container は Bootstrap3 の固定幅（最大1170px）なので、
   このページだけ全幅に解除して、内側の .pj-wrap で幅を管理する。
   ============================================================ */
#main.pajero-main,
#upper.pajero-upper,
#bottom.pajero-bottom{
  margin:0;
  padding:0;
  background:transparent;
  border:0;
}
#upper.pajero-upper,
#bottom.pajero-bottom{ display:none; }

#main.pajero-main > .container{
  width:100%;
  max-width:none;
  margin:0;
  padding:0;
}
#main.pajero-main .freePage{
  margin:0;
  padding:0;
}

/* freeParts の入れ子（box / boxTop / boxBottom）を無効化 */
#header.pajero-header .freeParts,
#header.pajero-header .freeParts .box,
#header.pajero-header .freeParts .boxTop,
#header.pajero-header .freeParts .boxBottom,
#wrapper:has(#main.pajero-main) #footer .freeParts,
#wrapper:has(#main.pajero-main) #footer .freeParts .box,
#wrapper:has(#main.pajero-main) #footer .freeParts .boxTop,
#wrapper:has(#main.pajero-main) #footer .freeParts .boxBottom{
  margin:0;
  padding:0;
  border:0;
  background:transparent;
}


/* ============================================================
   02. ページ全体の下地
   ------------------------------------------------------------
   #opt / .pageTop / #footer には固有クラスが付けられないため、
   :has() で「PAJEROページのときだけ」を判定してスコープする。
   ============================================================ */
#wrapper:has(#main.pajero-main){
  background:#050907;
  font-family:var(--pj-ff-ja);
}
#wrapper:has(#main.pajero-main) #opt{
  display:none;
}
#wrapper:has(#main.pajero-main) .pageTop{
  background:#050907;
  border:0;
  padding:0 0 8px;
}
#wrapper:has(#main.pajero-main) .pageTop a{
  color:rgba(255,255,255,.45);
  font-family:var(--pj-ff-en);
  font-size:11px;
  font-weight:600;
  letter-spacing:.2em;
  text-decoration:none;
}
#wrapper:has(#main.pajero-main) .pageTop a:hover{ color:#fff; }

#wrapper:has(#main.pajero-main) #footer{
  background:#050907;
  border-top:1px solid rgba(255,255,255,.08);
  padding:44px 0 36px;
  color:rgba(255,255,255,.55);
  text-align:center;
}
#wrapper:has(#main.pajero-main) #footer address{
  margin:22px 0 0;
  font-style:normal;
  font-size:11px;
  letter-spacing:.06em;
  color:rgba(255,255,255,.4);
}


/* ============================================================
   03. Header
   ------------------------------------------------------------
   #siteTitle（自社ロゴ）と .pajero-header__wrap（ボタン）を
   .container 上で左右に振り分ける。
   ============================================================ */
.pajero_h_btn a {
  color: #fff;
}
.pajero_h_btn ul .pajero-header__li01:before , .pajero_h_btn ul .pajero-header__li02:before{ 
  content: none;
}
.pajero_h_btn ul {
  display:flex;
  align-items:center;
  gap:20px;
}
.pajero-header__li01 {
  background-color: var(--pj-green-700);
  border-radius: 50px;
  padding: 10px 25px;
}
.pajero-header__li02 {
  border-radius: 50px;
  border:1px solid #fff;
  padding: 10px 25px;
}






#header.pajero-header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:1000;
  margin:0;
  padding:0;
  background:rgba(8,13,10,.88);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
#header.pajero-header > .container{
 

  padding:15px 4%;
}
#header.pajero-header .container > div {
  display: block;
}

#header.pajero-header #siteTitle{
  flex:0 0 auto;
  margin:0;
  padding:0;
  float:none;
  line-height:1;
}
#header.pajero-header #siteTitle img{
  width:auto;
  height:60px;
  max-height:60px;

}
/* ロゴが濃色版しかない場合は下の1行を有効化して白抜きにする
#header.pajero-header #siteTitle img{ filter:brightness(0) invert(1); }
*/

#header.pajero-header .pajero-header__wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
#header.pajero-header .pajero-header__btns{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0;
  padding:0;
  list-style:none;
}
#header.pajero-header .pajero-header__btns li{
  margin:0;
  padding:0;
  list-style:none;
  background:none;
}
#header.pajero-header .pj-btn{
  min-height:40px;
  padding:0 20px;
  font-size:12px;

}
/* PCでは非表示 */
.pajero-sp-cta {
  display: none;
}

@media (max-width: 768px) {

  .pajero_h_btn ul{ display:block; }
  #header.pajero-header #siteTitle{ background:#333; height:80px; }
  #header.pajero-header .pajero-header__wrap{ display:none; }

  .pajero-sp-cta {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 999999;

    display: flex;

    width: 100%;
    height: 58px;

    margin: 0;
    padding: 0;
  }

  .pajero-sp-cta a {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 50%;
    height: 100%;

    color: #fff !important;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;

    box-sizing: border-box;
  }

  .pajero-sp-cta__reserve {
    background-color: var(--pj-green-700);
  }

  .pajero-sp-cta__info {
    background-color: #08100c;
    border-left: 1px solid rgba(255,255,255,.3);
  }

  /* 最下部のコンテンツがボタンに隠れないように */
  body {
    padding-bottom: 58px;
  }
}



/* ============================================================
   04. 共通パーツ
   ============================================================ */
.pj{
  font-family:var(--pj-ff-ja);
  font-size:16px;
  line-height:1.9;
  letter-spacing:.02em;
  color:var(--pj-txt);
  background-color: #fff;
  overflow-x:hidden;
}
.pj *,
.pj *::before,
.pj *::after{ box-sizing:border-box; }
.pj h1,.pj h2,.pj h3,.pj h4,.pj p,.pj ul,.pj li,.pj dl,.pj dt,.pj dd,.pj figure{
  margin:0;
  padding:0;
  background:none;
}
.pj ul,.pj li{ list-style:none; }
.pj h1,.pj h2,.pj h3,.pj h4{ font-size:inherit; font-weight:700; line-height:1.6; }
.pj a{ color:inherit; text-decoration:none; }
.pj img{ max-width:100%; height:auto; display:block; }
.pj section{ scroll-margin-top:calc(var(--pj-hdr-h) + 16px); }

.pj-wrap{
  width:100%;
  max-width:var(--pj-wrap);
  margin:0 auto;
  padding:0 var(--pj-gutter);
}
.pj-wrap--narrow{ max-width:880px; }

/* --- 見出し ------------------------------------------------ */
.pj .pj-eyebrow{
  font-family:var(--pj-ff-en);
  font-size:18px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--pj-green-700);

}
.pj .pj-shead{ text-align:center; margin-bottom:56px; }
#main .pj .pj-shead__title{
  font-size: clamp(26px, 3vw, 34px);
  line-height:1.5;
  font-weight:600;
  letter-spacing:.08em;
  color: #333;
}
#main .pj .pj-shead__title--en{
  font-family:var(--pj-ff-en);
  font-size:clamp(30px,5.4vw,52px);
  letter-spacing:.06em;
  line-height:1.1;
  text-align:left;
  font-weight:400;
}
.pj .pj-shead__lead{
  margin-top:20px;
  font-size:14px;
  line-height:2.1;
  color:var(--pj-txt-mute);
}
.pj .pj-dark .pj-eyebrow{ color:var(--pj-green-700) }
#main .pj .pj-dark .pj-shead__title{ color:var(--pj-txt); }
.pj .pj-dark .pj-shead__lead{ color:var(--pj-txt); }

/* --- ボタン ------------------------------------------------ */
.pj .pj-btn,
#header.pajero-header .pj-btn,
#footer .pj-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6em;
  min-height:46px;
  padding:0 26px;
  border-radius:999px;
  border:1px solid transparent;
  font-family:var(--pj-ff-ja);
  font-size:13px;
  font-weight:700;
  letter-spacing:.1em;
  line-height:1;
  text-align:center;
  text-decoration:none;
  cursor:pointer;
  transition:background-color .28s var(--pj-ease),color .28s var(--pj-ease),
             border-color .28s var(--pj-ease),transform .28s var(--pj-ease);
}
.pj .pj-btn--fill,
#header.pajero-header .pj-btn--fill{
  background:linear-gradient(135deg,var(--pj-green-500),var(--pj-green-600));
  color:#fff;
  box-shadow:0 6px 20px rgba(3,50,33,.28);
}
.pj .pj-btn--fill:hover,
#header.pajero-header .pj-btn--fill:hover{
  color:#fff;
  transform:translateY(-2px);
  background:linear-gradient(135deg,var(--pj-green-400),var(--pj-green-500));
}
.pj .pj-btn--ghost,
#header.pajero-header .pj-btn--ghost{
  background:transparent;
  color:#fff;
  border-color:rgba(255,255,255,.45);
}
.pj .pj-btn--ghost:hover,
#header.pajero-header .pj-btn--ghost:hover{
  color:#fff;
  background:rgba(255,255,255,.1);
  border-color:#fff;
  transform:translateY(-2px);
}
.pj .pj-btn--line{
  background:transparent;
  color:var(--pj-green-600);
  border-color:rgba(14,102,68,.4);
}
.pj .pj-btn--line:hover{
  background:var(--pj-green-600);
  border-color:var(--pj-green-600);
  color:#fff;
}
.pj .pj-btn--lg{ min-height:58px; padding:0 42px; font-size:18px; }
.pj .pj-btn--sm{ min-height:38px; padding:0 18px; font-size:12px; }

/* --- 画像プレースホルダー（差し替え用） -------------------- */
.pj .pj-ph{
  position:relative;
  display:grid;
  place-items:center;
  overflow:hidden;
  border-radius:var(--pj-radius-sm);
  background:#0b0f0d;
  background-size:cover;
  background-position:center;
}
.pj .pj-ph--soon::after{
  content:attr(data-label);
  font-family:var(--pj-ff-en);
  font-size:clamp(16px,2.3vw,24px);
  letter-spacing:.34em;
  text-indent:.34em;
  color:rgba(255,255,255,.82);
}
.pj .pj-ph--photo{
  background:
    repeating-linear-gradient(135deg,rgba(0,0,0,.03) 0 10px,transparent 10px 20px),
    linear-gradient(145deg,#dfe4e0,#c9d1cb);
}
.pj .pj-ph--photo::after{
  content:attr(data-label);
  font-family:var(--pj-ff-en);
  font-size:10px;
  font-weight:600;
  letter-spacing:.28em;
  color:rgba(27,33,29,.42);
}
.pj .pj-ph--meter{
  background:
    radial-gradient(60% 90% at 22% 50%,rgba(255,196,84,.55),transparent 60%),
    radial-gradient(60% 90% at 78% 50%,rgba(255,150,40,.42),transparent 62%),
    linear-gradient(120deg,#2a1a08,#77420c 45%,#20140a);
}
.pj .pj-ph--meter::after{
  content:attr(data-label);
  font-family:var(--pj-ff-en);
  font-size:10px;
  font-weight:600;
  letter-spacing:.28em;
  color:rgba(255,255,255,.6);
}
/* 画像が入ったらラベルを消す */
.pj .pj-ph.is-set::after{ content:none; }
.pajero-main .mailForm h1{
   margin-top: 150px;
}
.pajero-main .mailForm {
  @media(max-width: 767px) {
    padding: 0 15px;
  }
}


/* ============================================================
   05. HERO
   ------------------------------------------------------------
   PC：背景動画を100vh表示 / ロゴは左下
   SP：背景動画表示 / ロゴは左上
   ============================================================ */


/* ============================================================
   HERO本体
   ============================================================ */

.pj .pj-hero{
  position:relative;

  width:100%;

  /* 固定ヘッダー分だけ下げる */
  margin-top:var(--pj-hdr-h);

  /* 画面全体 - ヘッダー */
  min-height:calc(100vh - var(--pj-hdr-h));

  overflow:hidden;
  padding:0;

  background:#111;
}


/* ============================================================
   背景動画
   ============================================================ */

.pj .pj-hero__video{
  position:absolute;
  inset:0;
  z-index:0;

  display:block;

  width:100%;
  height:100%;

  object-fit:cover;

  object-position:center;

  pointer-events:none;
}


/* ============================================================
   動画上の暗いレイヤー
   ------------------------------------------------------------
   PCはロゴがある左下を少し暗くする
   ============================================================ */

.pj .pj-hero::before{
  content:"";

  position:absolute;
  inset:0;
  z-index:1;

  pointer-events:none;

  background:
    linear-gradient(
      0deg,
      rgba(5,9,7,.48) 0%,
      rgba(5,9,7,.20) 28%,
      rgba(5,9,7,.05) 48%,
      rgba(5,9,7,0) 62%
    ),
    linear-gradient(
      90deg,
      rgba(5,9,7,.28) 0%,
      rgba(5,9,7,.10) 30%,
      rgba(5,9,7,0) 55%
    );
}


/* ============================================================
   ロゴエリア
   PC：左下
   ============================================================ */

.pj .pj-hero__in{
  position:absolute;

  left:clamp(24px,2.5vw,48px);
  bottom:clamp(28px,5vh,60px);

  z-index:2;

  width:min(36vw,620px);
  max-width:none;

  margin:0;
  padding:0;

  text-align:left;

  transform:none;
}


/* ============================================================
   ALL NEW PAJERO + 10.01 予約注文開始 ロゴ
   ============================================================ */

#main .pj .pj-hero__title{
  display:block;

  margin:0;
  padding:0;

  line-height:1;
  text-align:left;

  background:none;
  background-image:none;

  border:0;
  box-shadow:none;
}


#main .pj .pj-hero__title::before,
#main .pj .pj-hero__title::after{
  content:none !important;
  display:none !important;
}


#main .pj .pj-hero__title img{
  display:block;

  width:100%;
  max-width:100%;
  height:auto;

  margin:0;
}


/* ============================================================
   旧HEROパーツは非表示
   ============================================================ */

.pj .pj-hero__bg,
.pj .pj-hero__vignette,
.pj .pj-hero__ghost,
.pj .pj-hero__scroll,
.pj .pj-hero__eyebrow,
.pj .pj-hero__sub,
.pj .pj-hero__date{
  display:none !important;
}


/* ============================================================
   SP
   ------------------------------------------------------------
   ロゴを左上へ
   ============================================================ */

@media (max-width:767px){

  .pj .pj-hero{
    width:100%;

    /*
      スマホは100vhにせず、
      今まで良かった高さを維持
    */
        margin-top:var(--pj-hdr-h);
    min-height:calc(100svh - var(--pj-hdr-h));

    margin:0;
    padding:0;
  }


  /* ----------------------------
     背景動画
     ---------------------------- */

  .pj .pj-hero__video{
    width:100%;
    height:100%;

    object-fit:cover;

    /*
      スマホで動画のどこを見せるか。
      車の位置に応じてここだけ調整可能。
    */
    object-position:55% center;
  }


  /* ----------------------------
     SPは上側を暗くする
     ---------------------------- */

  .pj .pj-hero::before{
    background:
      linear-gradient(
        180deg,
        rgba(5,9,7,.62) 0%,
        rgba(5,9,7,.40) 18%,
        rgba(5,9,7,.18) 35%,
        rgba(5,9,7,.04) 50%,
        rgba(5,9,7,0) 65%
      );
  }


  /* ----------------------------
     ロゴ：左上
     ---------------------------- */

  .pj .pj-hero__in{
    top:calc(var(--pj-hdr-h) + 20px);
    left:18px;
    right:18px;
    bottom:auto;

    width:auto;
    max-width:none;

    margin:0;
    padding:0;

    text-align:left;

    transform:none;
  }


  #main .pj .pj-hero__title{
    margin:0;
    padding:0;

    text-align:left;
  }


  #main .pj .pj-hero__title img{
    display:block;

    width:min(92vw,360px);
    max-width:100%;
    height:auto;

    margin:0;
  }

}


/* ============================================================
   小さいスマホ
   ============================================================ */

@media (max-width:390px){

  .pj .pj-hero{
    min-height: 80vh;
  }


  .pj .pj-hero__video{
    object-position:center;
  }


  .pj .pj-hero__in{
    top:calc(var(--pj-hdr-h) + 56px);
    left:18px;
    right:18px;
  }


  #main .pj .pj-hero__title img{
    width:100%;
    max-width:340px;
  }

}
/* ============================================================
   06. Emerald（Campaign + Story）
   ============================================================ */
.pj .pj-emerald{
  position:relative;
  overflow:hidden;
  
}
.pj .pj-emerald::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
}
.pj .pj-emerald > *{ position:relative; z-index:1; }

/* ============================================================
   06. Campaign
   ------------------------------------------------------------
   黒背景 + 斜めカードデザイン
   ============================================================ */


/* ------------------------------------------------------------
   セクション全体
   ------------------------------------------------------------ */

/* ============================================================
   Campaign 全体
   前後のStoryセクションと雰囲気をつなげる
   ============================================================ */

.pj .pj-campaign{
  position:relative;

  padding:
    clamp(70px,8vw,100px)
    0
    clamp(90px,10vw,130px);

  overflow:hidden;

  color:#fff;

  background:
    radial-gradient(
      circle at 85% 40%,
      rgba(42,156,110,.24) 0%,
      rgba(12,82,57,.12) 28%,
      transparent 52%
    ),
    linear-gradient(
      180deg,
      #000 0%,
      #000 55%,
      #01130d 76%,
      #063524 100%
    );
}

/* ============================================================
   06. CAMPAIGN
   ============================================================ */


/* ============================================================
   SECTION
   ============================================================ */

.pj .pj-campaign{
  position:relative;

  width:100%;

  padding:
    clamp(70px,8vw,100px)
    0
    clamp(90px,10vw,130px);

  overflow:hidden;

  color:#fff;

  background:
    radial-gradient(
      circle at 85% 40%,
      rgba(42,156,110,.24) 0%,
      rgba(12,82,57,.12) 28%,
      transparent 52%
    ),
    linear-gradient(
      180deg,
      #000 0%,
      #000 52%,
      #01130d 76%,
      #063524 100%
    );
}


/* ============================================================
   SECTION HEAD
   ============================================================ */

.pj .pj-campaign .pj-shead{
  width:100%;
  max-width:900px;

  margin:0 auto 48px;

  text-align:center;
}


/* CAMPAIGN */

.pj .pj-campaign .pj-eyebrow{
  margin:0 0 12px;

  font-family:var(--pj-ff-en);

  font-size:22px;
  font-weight:400;

  line-height:1;
  letter-spacing:.18em;

  text-transform:uppercase;

  color:var(--pj-green-600);
}


/* 新型パジェロ 予約注文特典 */

#main .pj .pj-campaign .pj-shead__title{
  margin:0;
  padding:0;

  font-size:clamp(28px,3vw,36px);
  font-weight:700;

  line-height:1.5;
  letter-spacing:.05em;

  text-align:center;

  color:#fff;

  background:none;
  border:0;
}


/* ============================================================
   PERIOD
   ============================================================ */

.pj .pj-campaign__period{
  display:flex;

  align-items:center;
  justify-content:center;

  gap:16px;

  margin:20px 0 0;

  font-size:28px;
  font-weight:600;

  line-height:1.5;
  letter-spacing:.03em;

  color:#fff;
}


/* 対象期間ラベル */

.pj .pj-campaign__period span{
  display:inline-block;

  flex-shrink:0;

  padding:6px 14px;

  font-size:12px;
  font-weight:700;

  line-height:1.4;
  letter-spacing:.08em;

  color:#fff;

  background:var(--pj-green-600);

  border-radius:999px;
}


/* ============================================================
   CONTENT
   ------------------------------------------------------------
   左：説明文
   右：カード2枚
   ============================================================ */

.pj .pj-campaign__content{
  display:grid;

  grid-template-columns:
    minmax(260px,30%)
    minmax(0,70%);

  align-items:center;

  gap:40px;

  width:100%;
  max-width:1240px;

  margin:0 auto;
}


/* ============================================================
   LEFT COPY
   ============================================================ */

.pj .pj-campaign__copy{
  min-width:0;

  padding-left:10px;
}


.pj .pj-campaign__copy p{
  margin:0;

  font-size:clamp(16px,1.6vw,20px);
  font-weight:400;

  line-height:2.05;
  letter-spacing:.04em;

  color:#fff;
}


/* ============================================================
   CARD GRID
   ============================================================ */

.pj .pj-campaign__grid{
  display:grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  align-items:stretch;

  gap:24px;

  width:100%;

  margin:0;
  padding:0;
}


/* ============================================================
   CARD
   ============================================================ */

.pj .pj-ccard{
  position:relative;

  display:flex;
  flex-direction:column;

  min-width:0;
  width:100%;

  margin:0;

  overflow:hidden;

  background:#04150f;

  border:0;
  border-radius:0;

  box-shadow:none;

  /*
    上左・下右を斜めに
  */
  clip-path:polygon(
    8% 0,
    100% 0,
    92% 100%,
    0 100%
  );
}


/* 以前の重なり指定をリセット */

.pj .pj-ccard + .pj-ccard{
  margin-left:0;
}


/* ============================================================
   CARD IMAGE
   ============================================================ */

.pj .pj-ccard__media{
  position:relative;

  flex:none;

  width:100%;

  /*
    2枚とも必ず同じ高さ
  */
  height:280px;

  overflow:hidden;

  margin:0;

  background:#eee;

  border:0;
  border-radius:0;
}


/* pj-ph由来の装飾を削除 */

.pj .pj-ccard__media::before,
.pj .pj-ccard__media::after{
  content:none !important;
  display:none !important;
}


/* 共通画像 */

.pj .pj-ccard__media img{
  display:block;

  width:100% !important;
  height:100% !important;

  margin:0;

  object-fit:cover !important;
  object-position:center center;

  transform:none !important;

  border:0;
}


/* KeePer */

.pj .pj-ccard:nth-child(1) .pj-ccard__media img{
  object-position:center center !important;
}


/* 神戸牛
   画像内のお肉を少し上へ見せる */

.pj .pj-ccard:nth-child(2) .pj-ccard__media img{
  object-position:center 68% !important;
}


/* ============================================================
   CARD BODY
   ============================================================ */

.pj .pj-ccard__body{
  display:flex;
  flex-direction:column;

  flex:1;

  min-height:190px;

  padding:
    24px
    46px
    28px
    36px;

  background:
    linear-gradient(
      112deg,
      #02100b 0%,
      #042419 56%,
      #075039 100%
    );

  color:#fff;
}


/* ============================================================
   A COURSE / B COURSE
   ============================================================ */

.pj .pj-ccard__no{
  margin:0 0 10px;

  font-family:var(--pj-ff-en);

  font-size:14px;
  font-weight:400;

  line-height:1.2;
  letter-spacing:.18em;

  color:var(--pj-green-500);
}


/* ============================================================
   CARD TITLE
   ============================================================ */

#main .pj .pj-campaign .pj-ccard__title{
  margin:0 0 12px;
  padding:0;

  font-size:clamp(18px,1.7vw,22px);
  font-weight:700;

  line-height:1.5;
  letter-spacing:.02em;

  text-align:left;

  color:#fff;

  background:none;
  border:0;
}


/* ============================================================
   20% OFF / 500g
   ============================================================ */

.pj .pj-campaign .pj-ccard__txt{
  margin:0;

  font-family:var(--pj-ff-ja);

  font-size:clamp(28px,3vw,38px);
  font-weight:700;

  line-height:1.2;
  letter-spacing:.02em;

  color:#fff;
}


/* strongが残っていても同じ表示 */

.pj .pj-ccard__txt strong{
  font-size:inherit;
  font-weight:inherit;

  color:inherit;
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width:1000px){

  .pj .pj-campaign{
    padding:
      64px
      0
      78px;
  }


  .pj .pj-campaign .pj-wrap{
    padding:
      0
      24px;
  }


  .pj .pj-campaign .pj-shead{
    margin-bottom:38px;
  }


  /* 文章をカードの上へ */

  .pj .pj-campaign__content{
    grid-template-columns:1fr;

    gap:30px;

    max-width:800px;
  }


  .pj .pj-campaign__copy{
    padding:0;

    text-align:center;
  }


  .pj .pj-campaign__copy p{
    max-width:640px;

    margin:0 auto;

    font-size:17px;
    line-height:1.9;
  }


  /* PC用のbrを解除 */

  .pj .pj-campaign__copy br{
    display:none;
  }


  /* カードはまだ2列 */

  .pj .pj-campaign__grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));

    gap:20px;
  }


  .pj .pj-ccard__media{
    height:240px;
  }


  .pj .pj-ccard__body{
    min-height:170px;

    padding:
      22px
      36px
      25px
      30px;
  }

}


/* ============================================================
   SP
   ============================================================ */

@media (max-width:767px){

  .pj .pj-campaign{
    padding:
      56px
      0
      68px;
  }


  .pj .pj-campaign .pj-wrap{
    padding:
      0
      18px;
  }


  /* ----------------------------
     HEAD
     ---------------------------- */

  .pj .pj-campaign .pj-shead{
    margin-bottom:30px;
  }


  .pj .pj-campaign .pj-eyebrow{
    margin-bottom:10px;

    font-size:15px;
  }


  #main .pj .pj-campaign .pj-shead__title{
    font-size:24px;

    line-height:1.5;
  }


  /* ----------------------------
     PERIOD
     ---------------------------- */

  .pj .pj-campaign__period{
    flex-direction:column;

    gap:8px;

    margin-top:16px;

    font-size:13px;
  }


  .pj .pj-campaign__period span{
    padding:
      5px
      12px;

    font-size:11px;
  }


  /* ----------------------------
     CONTENT
     ---------------------------- */

  .pj .pj-campaign__content{
    display:block;

    width:100%;
  }


  /* ----------------------------
     COPY
     ---------------------------- */

  .pj .pj-campaign__copy{
    margin-bottom:28px;

    padding:0;

    text-align:left;
  }


  .pj .pj-campaign__copy p{
    font-size:15px;

    line-height:1.9;
  }


  .pj .pj-campaign__copy br{
    display:none;
  }


  /* ----------------------------
     CARDS
     ---------------------------- */

  .pj .pj-campaign__grid{
    grid-template-columns:1fr;

    gap:24px;

    width:100%;
    max-width:520px;

    margin:0 auto;
  }


  .pj .pj-ccard{
    /*
      SPでも少しだけ斜めを残す
    */
    clip-path:polygon(
      4% 0,
      100% 0,
      96% 100%,
      0 100%
    );
  }


  .pj .pj-ccard__media{
    height:220px;
  }


  .pj .pj-ccard__body{
    min-height:auto;

    padding:
      22px
      28px
      26px;
  }


  .pj .pj-ccard__no{
    font-size:13px;
  }


  #main .pj .pj-campaign .pj-ccard__title{
    font-size:18px;
  }


  .pj .pj-campaign .pj-ccard__txt{
    font-size:30px;
  }

}


/* ============================================================
   SECTION
   ============================================================ */

.pj .pj-story{
  position:relative;
  width:100%;

  margin:0;
  padding:70px 0 110px;

  overflow:hidden;

  color:#fff;
  background:#000;
}


/* ============================================================
   背景画像
   ============================================================ */

.pj .pj-story::before{
  content:"";

  position:absolute;
  inset:0;

  z-index:0;

  pointer-events:none;

  background-image:url("/images/pajero/bg-story-pattern.webp");
  background-repeat:no-repeat;
  background-position:center top;
  background-size:cover;
}


/* ============================================================
   Storyだけ .pj-wrap の幅制限を解除
   ============================================================ */

.pj .pj-story > .pj-wrap{
  position:relative;
  z-index:1;

  width:100%;
  max-width:none;

  margin:0;
  padding:0;
}
/* ============================================================
   SECTION HEAD
   ============================================================ */

.pj .pj-story .pj-shead{
  width:100%;

  margin:0 0 55px;

  padding-left:clamp(28px,4vw,70px);
  padding-right:clamp(28px,4vw,70px);

  text-align:left;
}


.pj .pj-story .pj-eyebrow{
  margin:0 0 8px;

  font-family:var(--pj-ff-en);
  font-size:17px;
  font-weight:400;

  line-height:1;
  letter-spacing:.16em;

  text-transform:uppercase;

  color:var(--pj-green-500);
}


#main .pj .pj-story .pj-shead__title--en{
  margin:0;
  padding:0;

  font-family:var(--pj-ff-en);

  font-size:clamp(32px,4vw,52px);
  font-weight:400;

  line-height:1;
  letter-spacing:.02em;

  text-align:left;

  color:#fff;
}


/* ============================================================
   STORY ROW
   ------------------------------------------------------------
   通常：
   TEXT 35%
   IMAGE 65%
   ============================================================ */

.pj .pj-story__row{
  position:relative;

  display:grid;

  grid-template-columns:
    minmax(0,35%)
    minmax(0,65%);

  grid-template-areas:
    "text media";

  align-items:center;

  width:100%;

  margin-top:70px;

  gap:0;
}


/* 最初のブロック */

.pj .pj-story__row:first-of-type{
  margin-top:0;
}


/* ============================================================
   REVERSE
   ------------------------------------------------------------
   IMAGE 65%
   TEXT 35%
   ============================================================ */

.pj .pj-story__row--rev{
  grid-template-columns:
    minmax(0,65%)
    minmax(0,35%);

  grid-template-areas:
    "media text";
}


/* ============================================================
   GRID AREA
   ============================================================ */

.pj .pj-story__lead,
.pj .pj-story__content{
  grid-area:text;
}


.pj .pj-story__media{
  grid-area:media;
}


/* ============================================================
   TEXT AREA
   ============================================================ */

.pj .pj-story__lead,
.pj .pj-story__content{
  position:relative;
  z-index:3;

  min-width:0;
  width:100%;

  padding:
    28px
    clamp(0px,0vw,0px)
    28px
    clamp(28px,4vw,70px);

  color:#fff;
}


/* 右側にあるテキスト */

.pj .pj-story__row--rev .pj-story__content{
  padding:
    28px
    clamp(28px,4vw,70px)
    28px
    clamp(0px,0vw,0px);
}


/* ============================================================
   TITLE
   ============================================================ */

#main .pj .pj-story__lead h3,
#main .pj .pj-story__title{
  margin:0 0 16px;
  padding:0 0 20px 0;

  max-width:100%;

  font-size:clamp(18px,1.65vw,23px);
  font-weight:700;

  line-height:1.5;
  letter-spacing:.02em;

  text-align:left;

  color:#fff;

  background:none;
  border:0;

  white-space:normal;
}


/* タイトル下の白線 */
#main .pj .pj-story__lead h3::after,
#main .pj .pj-story__title::after{
  content:"" !important;

  display:block !important;

  width:110px;
  height:3px;

  margin-top:22px;

  background:#fff !important;
}


/* ============================================================
   TEXT
   ============================================================ */

.pj .pj-story__lead p,
.pj .pj-story__txt{
  margin:0;

  font-size:16px;
  font-weight:400;

  line-height:1.9;
  letter-spacing:.01em;

  color:rgba(255,255,255,.88);
}


.pj .pj-story__txt + .pj-story__txt{
  margin-top:5px;
}


/* いま、伝説がふたたび動き出す。 */

.pj .pj-story__punch{
  margin-top:24px !important;

  font-size:clamp(20px,1.8vw,24px) !important;
  font-weight:700 !important;

  line-height:1.5 !important;
  letter-spacing:.05em;

  color:#fff !important;
}


/* ============================================================
   IMAGE AREA
   ============================================================ */

.pj .pj-story__media{
  position:relative;
  z-index:2;

  width:100%;

  /*
    少し横長
  */
  aspect-ratio:16 / 7.2;

  margin:0;
  padding:0;

  /*
    緑板を外側へ見せるため visible
  */
  overflow:visible;

  background:none !important;

  border:0;
  border-radius:0;
}


/* ============================================================
   GREEN BACK PLATE
   ------------------------------------------------------------
   画像の後ろに少しずらして配置
   ============================================================ */

.pj .pj-story__media::before{
  content:"" !important;

  position:absolute;
  inset:0;

  z-index:0;

  display:block !important;

  /*
    右側画像
    → 上が明るい緑
    → 下へ行くほど暗い
  */
  background:
    linear-gradient(
      180deg,
      #398463 0%,
      #357a5c 20%,
      #265741 44%,
      #075039 68%,
      #02150f 100%
    );

  /*
    画像より
    左へ8px
    下へ12px
  */
  transform:translate(-8px,12px);

  /*
    画像と同じ方向
  */
  clip-path:polygon(
    0 0,
    100% 0,
    100% 100%,
    7% 100%
  );

  pointer-events:none;
}


/* ============================================================
   REVERSE GREEN BACK PLATE
   ------------------------------------------------------------
  左側画像
  → 上側を明るく
   ============================================================ */

.pj .pj-story__row--rev .pj-story__media::before{

  /*
    上は明るい
    下へ行くほど暗い
  */
  background:
    linear-gradient(
      180deg,
      #398463 0%,
      #357a5c 20%,
      #265741 44%,
      #075039 68%,
      #02150f 100%
    );

  /*
    右へ8px
    下へ12px
  */
  transform:translate(8px,12px);

  /*
    reverse画像と同じ方向
  */
  clip-path:polygon(
    0 0,
    100% 0,
    93% 100%,
    0 100%
  );
}


/* pj-phのafter装飾だけ消す */

.pj .pj-story__media::after{
  content:none !important;
  display:none !important;
}


/* ============================================================
   IMAGE
   ------------------------------------------------------------
   右側画像
   ============================================================ */

.pj .pj-story__media img{
  position:relative;
  z-index:1;

  display:block;

  width:100%;
  height:100%;

  margin:0;

  object-fit:cover;
  object-position:center;

  border:0;

  /*
      ＼ IMAGE
       ＼IMAGE
  */
  clip-path:polygon(
    0 0,
    100% 0,
    100% 100%,
    7% 100%
  );
}


/* ============================================================
   REVERSE IMAGE
   ------------------------------------------------------------
   左側画像
   ============================================================ */

.pj .pj-story__row--rev .pj-story__media img{

  /*
    IMAGE／
        ／
  */
  clip-path:polygon(
    0 0,
    100% 0,
    93% 100%,
    0 100%
  );
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width:1000px){

  .pj .pj-story{
    padding:64px 0 90px;
  }


  .pj .pj-story__row{
    grid-template-columns:
      minmax(0,40%)
      minmax(0,60%);

    margin-top:55px;
  }


  .pj .pj-story__row--rev{
    grid-template-columns:
      minmax(0,60%)
      minmax(0,40%);
  }


  .pj .pj-story__lead,
  .pj .pj-story__content{
    padding:24px 26px;
  }


  .pj .pj-story__media{
    aspect-ratio:16 / 8;
  }

}


/* ============================================================
   SP
   ============================================================ */

@media (max-width:767px){

  .pj .pj-story{
    padding:55px 0 70px;

    /*
      SPは少し控えめな背景
    */
    background:
      radial-gradient(
        circle at 90% 5%,
        rgba(72,188,140,.45) 0%,
        rgba(21,121,83,.24) 25%,
        transparent 50%
      ),
      linear-gradient(
        150deg,
        #000 0%,
        #000 42%,
        #03291d 72%,
        #075039 100%
      );
  }


  /* HEAD */

  .pj .pj-story .pj-shead{
    margin-bottom:40px;

    padding-left:18px;
    padding-right:18px;
  }


  .pj .pj-story .pj-eyebrow{
    font-size:14px;
  }


  #main .pj .pj-story .pj-shead__title--en{
    font-size:34px;
  }


  /* ROW */

  .pj .pj-story__row,
  .pj .pj-story__row--rev{
    display:flex;
    flex-direction:column;

    width:100%;

    margin-top:50px;
  }


  .pj .pj-story__row:first-of-type{
    margin-top:0;
  }


  /* TEXT */

  .pj .pj-story__lead,
  .pj .pj-story__content,
  .pj .pj-story__row--rev .pj-story__content{
    order:1;

    width:100%;

    padding:
      0
      18px
      24px;
  }


  /* IMAGE */

  .pj .pj-story__media,
  .pj .pj-story__row--rev .pj-story__media{
    order:0;

    width:100%;

    aspect-ratio:16 / 9;
  }


  /* SPでは斜め方向を統一 */

  .pj .pj-story__media img,
  .pj .pj-story__row--rev .pj-story__media img{
    clip-path:polygon(
      0 0,
      100% 0,
      100% 100%,
      0% 100%
    );
  }


  .pj .pj-story__media::before,
  .pj .pj-story__row--rev .pj-story__media::before{
    background:
      linear-gradient(
        90deg,
        #5acb9a 0%,
        #28a979 24%,
        #117a56 52%,
        #075039 76%,
        #02150f 100%
      );

    transform:translate(-6px,9px);

    clip-path:polygon(
      0 0,
      100% 0,
      100% 100%,
      0% 100%
    );
  }


  #main .pj .pj-story__lead h3,
  #main .pj .pj-story__title{
    margin-bottom:14px;
    margin-top:32px;
    font-size:20px;
  }


  .pj .pj-story__lead p,
  .pj .pj-story__txt{
    font-size:13px;

    line-height:1.9;
  }


  .pj .pj-story__punch{
    margin-top:20px !important;

    font-size:17px !important;
  }

}
/* ============================================================
   07. VISIT US
   ------------------------------------------------------------
   黒背景 / 2列カード
   画像 → 番号・タイトル → 説明文
   ============================================================ */


/* ============================================================
   SECTION
   ============================================================ */

.pj .pj-visit{
  width:100%;

  padding:
    clamp(70px,9vw,110px)
    0
    clamp(80px,10vw,120px);

  background:#000;

  color:#fff;
}


/* ============================================================
   SECTION HEAD
   ============================================================ */

.pj .pj-visit .pj-shead{
  margin:0 auto 42px;

  text-align:center;
}


/* VISIT US */

.pj .pj-visit .pj-eyebrow{
  margin:0 0 8px;

  font-family:var(--pj-ff-en);
  font-size:16px;
  font-weight:400;

  line-height:1;
  letter-spacing:.18em;

  text-transform:uppercase;

  color:var(--pj-green-500);
}


/* ご来店で得られること */

#main .pj .pj-visit .pj-shead__title{
  margin:0;

  font-size: clamp(26px, 3vw, 34px);
  font-weight:700;

  line-height:1.4;
  letter-spacing:.04em;

  text-align:center;

  color:#fff;
}


/* ============================================================
   GRID
   ============================================================ */

.pj .pj-visit__grid{
  display:grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:18px;

  width:100%;
  max-width:1120px;

  margin:0 auto;
}


/* ============================================================
   CARD
   ============================================================ */

.pj .pj-vcard{
  display:flex;
  flex-direction:column;

  min-width:0;

  margin:0;
  padding:0 0 18px;

  overflow:hidden;

  background:#fff;

  border:0;
  border-radius:10px;

  box-shadow:none;

  color:#222;
}


/* ============================================================
   IMAGE
   ------------------------------------------------------------
   HTMLでは最後にあるが、
   orderで一番上へ移動
   ============================================================ */

.pj .pj-vcard__media{
  order:1;

  width:100%;

  aspect-ratio:16 / 7.4;

  margin:0;

  overflow:hidden;

  border:0;
  border-radius:0;

  background:#ddd;
}


.pj .pj-vcard__media img{
  display:block;

  width:100%;
  height:100%;

  margin:0;

  object-fit:cover;
  object-position:center;

  border:0;
}


/* ============================================================
   NUMBER + TITLE
   ============================================================ */

.pj .pj-vcard__head{
  order:2;

  display:flex;
  align-items:baseline;
  justify-content:center;

  gap:9px;

  width:100%;

  margin:0;

  padding:
    12px
    18px
    4px;

  text-align:center;
}


/* 01 */

.pj .pj-vcard__no{
  flex-shrink:0;
  font-family:var(--pj-ff-en);
  font-size:40px;
  line-height:1;
  letter-spacing:.02em;
  color:var(--pj-green-500);

  display:inline-block;   /* transform 対応のため */
  transform:skewX(-10deg);
}


/* 最新情報がわかる */

#main .pj .pj-vcard__title{
  margin:0;
  padding:0;

  font-size:24px;
  font-weight:700;

  line-height:1.4;
  letter-spacing:.02em;

  text-align:left;

  color:#222;

  background:none;
  border:0;
}


/* ============================================================
   DESCRIPTION
   ============================================================ */

.pj .pj-vcard__txt{
  order:3;

  width:100%;
  max-width:430px;

  margin:0 auto;

  padding:
    0
    22px;

  font-size:18px;
  font-weight:400;

  line-height:1.8;
  letter-spacing:.02em;

  text-align:center;

  color:#222;
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width:1000px){

  .pj .pj-visit__grid{
    gap:16px;
  }


  .pj .pj-vcard__no{
    font-size:26px;
  }


  #main .pj .pj-vcard__title{
    font-size:16px;
  }

}


/* ============================================================
   SP
   ============================================================ */

@media (max-width:767px){

  .pj .pj-visit{
    padding:
      58px
      0
      70px;
  }


  .pj .pj-visit .pj-shead{
    margin-bottom:30px;
  }


  .pj .pj-visit .pj-eyebrow{
    font-size:14px;
  }


  #main .pj .pj-visit .pj-shead__title{
    font-size:24px;
  }


  /* 1列 */
  .pj .pj-visit__grid{
    grid-template-columns:1fr;

    gap:18px;

    max-width:520px;
  }


  .pj .pj-vcard{
    padding-bottom:18px;

    border-radius:8px;
  }


  .pj .pj-vcard__media{
    aspect-ratio:16 / 8;
  }


  .pj .pj-vcard__head{
    gap:8px;

    padding:
      12px
      16px
      4px;
  }


  .pj .pj-vcard__no{
    font-size:25px;
  }


  #main .pj .pj-vcard__title{
    font-size:16px;
  }


  .pj .pj-vcard__txt{
    padding:
      0
      18px;

    font-size:12px;
    line-height:1.8;
  }

}
/* ============================================================
   08. FAQ
   ============================================================ */

.pj .pj-faq {
  padding: clamp(80px, 11vw, 130px) 0;
  background: #fff;
}

.pj .pj-faq__list {
  border-top: 1px solid #ddd;
}

.pj .pj-faq__item {
  border-bottom: 1px solid #ddd;
}

/* 質問 */
.pj .pj-faq__q {
  display: flex;
  align-items: center;
  gap: 14px;

  padding: 20px 16px;

  font-size: 16px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.03em;

  cursor: pointer;
  list-style: none;

  color: #222;

  transition:
    color 0.25s var(--pj-ease),
    background-color 0.25s var(--pj-ease);
}

/* details標準の三角を消す */
.pj .pj-faq__q::-webkit-details-marker {
  display: none;
}

.pj .pj-faq__q::marker {
  content: "";
}

.pj .pj-faq__q:hover {
  color: var(--pj-green-600);
}


/* Q. */
.pj .pj-faq__mark {
  flex: none;

  font-family: var(--pj-ff-en);
  font-size: 24px;
  font-weight: 800;
  line-height: 1;

  letter-spacing: 0;

  color: var(--pj-green-500);
}


/* 質問テキスト */
.pj .pj-faq__txt {
  flex: 1 1 auto;
  font-size: 20px;
}


/* ============================================================
   ＋ / − アイコン
   ============================================================ */

.pj .pj-faq__icon {
  position: relative;

  flex: none;

  width: 18px;
  height: 18px;

  margin-left: auto;
}

.pj .pj-faq__icon::before,
.pj .pj-faq__icon::after {
  content: "";

  position: absolute;
  top: 50%;
  left: 50%;

  width: 12px;
  height: 1.5px;

  background: var(--pj-green-500);

  transform: translate(-50%, -50%);

  transition:
    transform 0.3s var(--pj-ease),
    opacity 0.3s var(--pj-ease);
}

/* 縦線 */
.pj .pj-faq__icon::after {
  transform:
    translate(-50%, -50%)
    rotate(90deg);
}


/* 開いた時は「−」にする */
.pj .pj-faq__item[open] .pj-faq__icon::after {
  opacity: 0;
  transform:
    translate(-50%, -50%)
    rotate(0deg);
}


/* ============================================================
   回答
   ============================================================ */

.pj .pj-faq__a {
  margin: 0;

  padding:
    0
    52px
    24px
    46px;

  font-size: 16px;
  line-height: 2;

  color: var(--pj-txt-mute);
}
/* ============================================================
   09. DISPLAY EVENT
   ============================================================ */

.pj .pj-event{
  width:100%;
  padding:0;
  background:#000;
  color:#fff;
}


/* ============================================================
   上部：タイトル
   ============================================================ */

.pj .pj-event__intro{
  padding:
    clamp(60px,7vw,85px)
    0
    32px;

  background:#000;
}


.pj .pj-event__intro .pj-shead{
  margin:0 auto;
  text-align:center;
}


.pj .pj-event__intro .pj-eyebrow{
  margin:0 0 8px;

  font-family:var(--pj-ff-en);
  font-size:16px;
  font-weight:400;

  line-height:1;
  letter-spacing:.18em;

  text-transform:uppercase;

  color:var(--pj-green-500);
}


/* 先行展示会 */

#main .pj .pj-event__intro .pj-shead__title{
  margin:0;

  font-size:clamp(26px,3vw,34px);
  font-weight:700;

  line-height:1.4;
  letter-spacing:.05em;

  text-align:center;

  color:#fff;
}


/* 説明 */

.pj .pj-event__intro .pj-shead__lead{
  margin-top:14px;

  font-size:18px;
  font-weight:400;

  line-height:1.8;
  letter-spacing:.02em;

  color:rgba(255,255,255,.82);
}


/* ============================================================
   下部：試乗車情報
   ============================================================ */

.pj .pj-event__body{
  position:relative;

  padding:
    26px
    0
    34px;

  overflow:hidden;

  background:
    linear-gradient(
      105deg,
      #050b08 0%,
      #071b14 28%,
      #0a3f2c 60%,
      #16805a 82%,
      #4dbd8e 100%
    );
}

/* ============================================================
   Display Event Table
   ============================================================ */

.pj .pj-event__panel{
  display:grid;

  grid-template-columns:
    160px
    140px
    minmax(260px, 1fr);

  grid-template-rows:
    44px
    52px
    52px;

  width:min(90%, 780px);

  margin:0 auto;
  padding:10px 26px;

  overflow:hidden;

  background:#fff;

  border-radius:14px;

  box-shadow:0 8px 24px rgba(0,0,0,.14);
}


/* ============================================================
   見出し行
   ============================================================ */

/* 左2列の空白部分 */
.pj .pj-event__head-spacer{
  grid-column:1 / 3;
  grid-row:1;

  border-bottom:1px solid #ddd;
}


/* グレードカラー */
.pj .pj-event__grade-title{
  grid-column:3;
  grid-row:1;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:15px;
  font-weight:700;

  color:#333;

  border-bottom:1px solid #ddd;
}


/* ============================================================
   共通セル
   ============================================================ */

.pj .pj-event__cell{
  display:flex;
  align-items:center;
  justify-content:center;

  padding:10px 14px;

  font-size:16px;
  line-height:1.5;

  color:#333;
}


/* ============================================================
   店舗名
   ============================================================ */

.pj .pj-event__cell--shop{
  font-weight:700;

  border-right:1px solid #ddd;
}

.pj .pj-event__shop01{
  grid-column:1;
  grid-row:2;

  border-bottom:1px solid #ddd;
}

.pj .pj-event__shop02{
  grid-column:1;
  grid-row:3;
}


/* ============================================================
   日付
   ============================================================ */

.pj .pj-event__cell--date{
  border-right:1px solid #ddd;
}

.pj .pj-event__date01{
  grid-column:2;
  grid-row:2;

  border-bottom:1px solid #ddd;
}

.pj .pj-event__date02{
  grid-column:2;
  grid-row:3;
}


/* ============================================================
   右側共通文章
   ============================================================ */

.pj .pj-event__cell--common{
  grid-column:3;
  grid-row:2 / 4;

  font-size:18px;
  font-weight:500;

  text-align:center;
}
/* ============================================================
   10. SHOP
   ============================================================ */

.pj .pj-shop{
  width:100%;

  padding:
    clamp(65px,8vw,95px)
    0
    clamp(75px,9vw,110px);

  background:#000;

  color:#fff;
}


/* ============================================================
   SHOP HEAD
   ============================================================ */

.pj .pj-shop .pj-shead{
  margin:0 auto 36px;

  text-align:center;
}


.pj .pj-shop .pj-eyebrow{
  margin:0 0 8px;

  font-family:var(--pj-ff-en);
  font-size:16px;
  font-weight:400;

  line-height:1;
  letter-spacing:.18em;

  text-transform:uppercase;

  color:var(--pj-green-500);
}


/* 店舗情報 */

#main .pj .pj-shop .pj-shead__title{
  margin:0;

  font-size:clamp(27px,3vw,34px);
  font-weight:700;

  line-height:1.4;
  letter-spacing:.05em;

  text-align:center;

  color:#fff;
}


/* 説明 */

.pj .pj-shop .pj-shead__lead{
  margin-top:12px;

  font-size:12px;

  line-height:1.8;

  color:rgba(255,255,255,.80);
}


/* ============================================================
   SHOP GRID
   ============================================================ */

.pj .pj-shop__grid{
  display:grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:22px;

  width:100%;
  max-width:920px;

  margin:0 auto;
}


/* ============================================================
   SHOP CARD
   ============================================================ */

.pj .pj-scard{
  overflow:hidden;

  background:#fff;

  border:0;
  border-radius:18px;

  box-shadow:none;

  color:var(--pj-txt);
}


/* ============================================================
   店舗画像
   ============================================================ */

.pj .pj-scard__media{
  width:100%;

  aspect-ratio:16 / 9;

  overflow:hidden;

  margin:0;

  border:0;
  border-radius:0;

  background:#ddd;
}


.pj .pj-scard__media img{
  display:block;

  width:100%;
  height:100%;

  object-fit:cover;
  object-position:center;
}


/* ============================================================
   CARD BODY
   ============================================================ */

.pj .pj-scard__body{
  padding:
    22px
    24px
    26px;
}


/* 店舗名 */

#main .pj .pj-scard__name{
  margin:0 0 16px;
  padding:0 0 13px;

  font-size:22px;
  font-weight:700;

  line-height:1.4;
  letter-spacing:.06em;

  text-align:left;

  color:#222;

  border-bottom:1px solid #ddd;
}


/* ============================================================
   店舗情報
   ============================================================ */

.pj .pj-scard__dl{
  display:grid;

  grid-template-columns:
    72px
    1fr;

  row-gap:6px;

  margin:0;

  font-size:12px;

  line-height:1.7;

  color:#222;
}


.pj .pj-scard__dl dt{
  padding-top:.25em;

  font-size:10px;
  font-weight:400;

  line-height:1.6;
  letter-spacing:.12em;

  color:#777;
}


.pj .pj-scard__dl dd{
  margin:0;
}


/* 電話番号 */

.pj .pj-scard__tel{
  font-family:var(--pj-ff-en);

  font-size:18px;
  font-weight:400;

  line-height:1.2;
  letter-spacing:.03em;

  color:var(--pj-green-600);
}


/* ============================================================
   Google map ボタン
   ============================================================ */

.pj .pj-scard__foot{
  margin-top:18px;
}


.pj .pj-scard__foot .pj-btn{
  min-height:auto;

  padding:
    6px
    15px;

  font-size:14px;
  font-weight:500;

  letter-spacing:.04em;

  color:var(--pj-green-600);

  background:#fff;

  border:
    1px solid
    var(--pj-green-500);

  border-radius:999px;
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width:1000px){

  .pj .pj-shop__grid{
    max-width:820px;

    gap:18px;
  }

}


/* ============================================================
   SP
   ============================================================ */

@media (max-width:767px){

  /* ----------------------------
     EVENT
     ---------------------------- */

  .pj .pj-event__intro{
    padding:
      52px
      0
      28px;
  }


  .pj .pj-event__intro .pj-shead__lead{
    padding:
      0
      18px;

    font-size:12px;
  }


  .pj .pj-event__body{
    padding:
      26px
      18px
      30px;
  }


  .pj .pj-event__panel{
    width:100%;

    padding:
      7px
      14px;

    border-radius:12px;
  }


  .pj .pj-event__row{
    grid-template-columns:
      1fr
      1fr;
  }


  .pj .pj-event__row--head{
    display:none;
  }


  .pj .pj-event__cell{
    padding:
      13px
      8px;

    font-size:12px;
  }


  .pj .pj-event__cell--shop{
    border-right:1px solid #ddd;
  }


  .pj .pj-event__cell--date{
    border-right:0;
  }


  /* 3列目は下へ */

  .pj .pj-event__row .pj-event__cell:nth-child(3){
    grid-column:1 / -1;

    border-top:1px solid #ddd;

    text-align:center;
  }


  /* ----------------------------
     SHOP
     ---------------------------- */

  .pj .pj-shop{
    padding:
      58px
      0
      70px;
  }


  .pj .pj-shop .pj-shead{
    margin-bottom:30px;
  }


  .pj .pj-shop__grid{
    grid-template-columns:1fr;

    gap:20px;

    max-width:520px;
  }


  .pj .pj-scard{
    border-radius:14px;
  }


  .pj .pj-scard__body{
    padding:
      20px
      20px
      23px;
  }


  #main .pj .pj-scard__name{
    font-size:20px;
  }


  .pj .pj-scard__dl{
    grid-template-columns:
      68px
      1fr;
  }

}
/* ============================================================
   11. Closing CTA
   ============================================================ */
.pj .pj-cta{
  position:relative;
  overflow:hidden;
  padding:clamp(90px,13vw,150px) 0;
  text-align:center;
  background:
    radial-gradient(70% 60% at 50% 0%,rgba(21,138,88,.28),transparent 62%),
    #07100c;
}
#main .pj .pj-cta__title{
  font-size:clamp(22px,3.8vw,34px);
  line-height:1.7;
  letter-spacing:.1em;
  color:#fff;
}
.pj .pj-cta__txt{
  margin-top:26px;
  font-size:16px;
  line-height:2.2;
  color:var(--pj-txt-inv-mute);
}
.pj .pj-cta__btns{
  display:grid;
  justify-content:center;
  flex-wrap:wrap;
  gap:16px;
  margin-top:40px;
}


/* ============================================================
   12. Footer 内コンテンツ
   ============================================================ */
#footer .pj-foot{
  display:flex;
  flex-direction:column;
  align-items:center;

}
#footer .pj-foot__logo img{
  width:auto;
  height:40px;
  margin:0 auto;
}
/* ロゴが濃色版しかない場合は下の1行を有効化
#footer .pj-foot__logo img{ filter:brightness(0) invert(1); }
*/
#footer .pj-foot__name{
  font-size:11px;
  letter-spacing:.14em;
  color:rgba(255,255,255,.55);
}
.pjero-footer > .container {
  display:block !important;
  padding-bottom:0 !important;
}


/* ============================================================
   14. Responsive
   ============================================================ */
@media (max-width:1000px){
  .pj .pj-campaign__grid{ grid-template-columns:1fr; max-width:520px; margin:0 auto; }
  .pj .pj-visit__grid{ grid-template-columns:1fr; }
  .pj .pj-shop__grid{ grid-template-columns:1fr; max-width:520px; margin:0 auto; }
}

@media (max-width:860px){
  .pj .pj-story__row{ grid-template-columns:1fr; }
  .pj .pj-story__row--rev .pj-story__media{ order:0; }
  #header.pajero-header #siteTitle img{ height:32px; }
  #header.pajero-header .pj-btn--ghost{ display:none; }
}

@media (max-width:640px){
  :root{ --pj-gutter:18px; --pj-hdr-h:60px; }
  .pj{ font-size:15px; }

  #header.pajero-header > .container{ padding:9px 16px; }
  #header.pajero-header #siteTitle img{ height:60px; }
  #header.pajero-header .pj-btn{ min-height:36px; padding:0 14px; font-size:11px; }


  .pj .pj-vcard{ grid-template-columns:1fr; }
  .pj .pj-vcard__media{
    grid-column:1;
    grid-row:auto;
    order:-1;
    margin-bottom:18px;
    aspect-ratio:16/9;
  }
  .pj .pj-vcard__head{ order:-2; }

  /* Display event：1行=1カード表示に */
  .pj .pj-event__head{ display:none; }
  .pj .pj-event__row{
    display:block;
    padding:18px 20px;
  }
  .pj .pj-event__cell{
    display:flex;
    gap:16px;
    padding:6px 0;
  }
  .pj .pj-event__cell::before{
    content:attr(data-th);
    padding-top:.35em;
    font-family:var(--pj-ff-en);
    font-size:10px;
    font-weight:600;
    letter-spacing:.2em;
    color:rgba(255,255,255,.55);
    white-space:nowrap;
  }

  .pj .pj-cta__btns .pj-btn{ width:100%; max-width:320px; }
}

@media (prefers-reduced-motion: reduce){
  .pj *,
  .pj *::before,
  .pj *::after{
    animation-duration:.001ms !important;
    transition-duration:.001ms !important;
  }
}
.pajero-header a:hover {
  text-decoration: none;
  cursor: pointer;
  transform: translateY(-2px);
}
/* ============================================================
   15. CMS見出し装飾の打ち消し
   ------------------------------------------------------------
   CMS側の #main h1 / h2 ... の帯・余白・疑似要素を解除。
   各コンポーネントの見出し指定は本文側で #main .pj ... として
   1回だけ定義しているため、ここで再定義しない。
   ============================================================ */
#main .pj h1,
#main .pj h2,
#main .pj h3,
#main .pj h4,
#main .pj h5{
  margin:0;
  padding:0;
  border:0;
  background:none;
  background-image:none;
  box-shadow:none;
  font-size:inherit;
  font-weight:inherit;
  line-height:inherit;
  letter-spacing:inherit;
  text-align:inherit;
  color:inherit;
}

#main .pj h1::before,
#main .pj h1::after,
#main .pj h2::before,
#main .pj h2::after,
#main .pj h3::before,
#main .pj h3::after,
#main .pj h4::before,
#main .pj h4::after,
#main .pj h5::before,
#main .pj h5::after{
  content:none !important;
  display:none !important;
}

@media (max-width:767px){
  #main .pj .pj-vcard__title{ font-size:16px; }
}

.pj .pj-event__cell--common{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  text-align:center;
}


/* 沼津店・伊東店共通になります。 */
.pj .pj-event__common-main{
  margin:0 0 8px;

  font-size:18px;
  font-weight:700;

  line-height:1.5;

  color:#333;
}


/* 車両情報の補足 */
.pj .pj-event__common-note{
  margin:0;

  font-size:14px;
  font-weight:400;

  line-height:1.7;

  color:#666;
}
/* ============================================================
   DISPLAY EVENT - SP
   ============================================================ */

@media (max-width:767px){

  /* ------------------------------------------------------------
     セクション全体
     ------------------------------------------------------------ */

  .pj .pj-event__panel{
    display:grid;

    grid-template-columns:
      minmax(0,1fr)
      minmax(0,1fr);

    grid-template-rows:auto;

    width:100%;

    padding:10px 14px 16px;

    border-radius:12px;
  }


  /* PC用の空白セルは非表示 */
  .pj .pj-event__head-spacer{
    display:none;
  }


  /* ============================================================
     先行展示会
     ============================================================ */

  .pj .pj-event__sp-title{
    display:block;

    grid-column:1 / -1;
    grid-row:1;

    padding:14px 8px;

    font-size:16px;
    font-weight:700;

    line-height:1.5;

    text-align:center;

    color:#222;

    border-bottom:1px solid #ddd;
  }


  /* ============================================================
     沼津バイパス店
     ============================================================ */

  .pj .pj-event__shop01{
    grid-column:1;
    grid-row:2;
  }

  .pj .pj-event__date01{
    grid-column:2;
    grid-row:2;
  }


  /* ============================================================
     伊東店
     ============================================================ */

  .pj .pj-event__shop02{
    grid-column:1;
    grid-row:3;
  }

  .pj .pj-event__date02{
    grid-column:2;
    grid-row:3;
  }


  /* ============================================================
     店舗・日付 共通
     ============================================================ */

  .pj .pj-event__cell{
    min-width:0;

    padding:12px 8px;

    font-size:12px;

    text-align:center;
  }


  /* 店舗と日付の縦線 */
  .pj .pj-event__cell--shop{
    border-right:1px solid #ddd;
  }


  .pj .pj-event__cell--date{
    border-right:0;
  }


  /* 伊東店の下に横線 */
  .pj .pj-event__shop02,
  .pj .pj-event__date02{
    border-bottom:1px solid #ddd;
  }


  /* ============================================================
     グレードカラー
     ============================================================ */

  .pj .pj-event__grade-title{
    grid-column:1 / -1;
    grid-row:4;

    padding:
      15px
      8px
      5px;

    font-size:14px;
    font-weight:700;

    line-height:1.5;

    text-align:center;

    color:#222;

    /* グレードカラーの下線はなし */
    border-top:0 !important;
    border-bottom:0 !important;
  }


  /* ============================================================
     共通情報
     ============================================================ */

  .pj .pj-event__cell--common{
    grid-column:1 / -1;
    grid-row:5;

    display:flex;
    flex-direction:column;

    align-items:center;
    justify-content:flex-start;

    gap:8px;

    min-height:0 !important;
    height:auto !important;

    padding:
      5px
      12px
      10px;

    text-align:center;

    border-top:0 !important;
    border-bottom:0 !important;
  }


  /* 沼津店・伊東店共通になります。 */
  .pj .pj-event__common-main{
    margin:0;

    font-size:13px;
    font-weight:700;

    line-height:1.5;

    color:#333;
  }


  /* 車両情報について */
  .pj .pj-event__common-note{
    margin:0;

    max-width:100%;

    font-size:11px;
    font-weight:400;

    line-height:1.7;

    color:#666;

    white-space:normal;
    overflow-wrap:anywhere;
  }


  /* PC用改行はSPでは自然改行に */
  .pj .pj-event__common-note br{
    display:none;
  }

}