/* =========================================================
   moraeru.css（完成版・丸ごと差し替え）
   - .moraeru-page 配下のみ
   - LINEなど他ブロックを巻き込まない
========================================================= */

/* -----------------------
  ベース
------------------------ */
.moraeru-page{
  background:#FFF6CC;
  color:#333;
  font-family:"M PLUS 1p", sans-serif !important;
}
.moraeru-page *, .moraeru-page *::before, .moraeru-page *::after{
  box-sizing:border-box;
}
.moraeru-page .moraeru-container{
  max-width:1100px;
  margin:0 auto;
  padding:0 20px;
}

/* Twenty Seventeen の幅制限を解除（このページだけ） */
.page .moraeru-page,
.page .moraeru-page .site-content,
.page .moraeru-page .content-area,
.page .moraeru-page .wrap{
  max-width:none !important;
  width:100% !important;
}

/* -----------------------
  HERO
------------------------ */
.moraeru-page .moraeru-hero{
  background:#FFF6CC;
  padding:12px 0 10px;
}
.moraeru-page .moraeru-hero__img{
  width:100%;
  height:auto;
  display:block;
}

/* -----------------------
  帯
------------------------ */
.moraeru-page .moraeru-band{
  background:#FFF6CC;
  padding:0px 0 40px;
}
.moraeru-page .moraeru-section{ padding:22px 0; }
.moraeru-page .moraeru-section--tight{ padding:14px 0; }
.moraeru-page .moraeru-section--maint{ background:#F7D84B; }

/* -----------------------
  枠
------------------------ */
.moraeru-page .moraeru-box{
  background:#fff;
  border:5px solid #ED6D0D;
  border-radius:18px;
  padding:22px;
}
.moraeru-page .moraeru-box--xl{ padding:26px 24px; }

.moraeru-page .moraeru-title{
  text-align:center;
  font-size:30px;
  font-weight:900;
  color:#ED6D0D;
  margin:0 0 14px;
  letter-spacing:.02em;
}

.moraeru-page .moraeru-lead{
  max-width:720px;
  margin:0 auto 14px;
  line-height:1.9;
  font-weight:700;
  font-size:14px;
}
.moraeru-page .moraeru-lead--center{ text-align:center; }

.moraeru-page .moraeru-lead .moraeru-highlight{
  font-weight:900 !important;
  background:linear-gradient(transparent 60%, #ffec97 60%);
  padding:0 .2em;
}

/* -----------------------
  steps
------------------------ */
.moraeru-page .moraeru-steps{
  margin-top:18px;
  display:grid;
  grid-template-columns:auto 60px auto;
  column-gap:20px;
  justify-content:center;
  align-items:center;
  position:relative;
}
.moraeru-page .moraeru-step{ margin:0; text-align:center; }
.moraeru-page .moraeru-step img{
  width:100%;
  max-width:240px;
  height:auto;
  display:block;
  margin:0 auto;
}
.moraeru-page .moraeru-step figcaption{
  margin-top:10px;
  font-weight:900;
  line-height:1.4;
  font-size:14px;
}
.moraeru-page .moraeru-arrow{
  width:40px; height:40px;
  border-radius:999px;
  background:#ED6D0D;
  position:relative;
}
.moraeru-page .moraeru-arrow::after{
  content:"";
  position:absolute;
  left:50%; top:50%;
  transform:translate(-35%,-50%);
  border-style:solid;
  border-width:11px 0 11px 18px;
  border-color:transparent transparent transparent #fff;
}

@media (max-width:900px){
  .moraeru-page .moraeru-title{ font-size:20px; }
  .moraeru-page .moraeru-box{ padding:18px 20px; }
  .moraeru-page .moraeru-box--xl{ padding:18px 20px; }

  .moraeru-page .moraeru-steps{
    grid-template-columns:1fr 1fr;
    column-gap:12px;
    align-items:start;
  }
  .moraeru-page .moraeru-steps .moraeru-arrow{
    position:absolute;
    left:50%; top:40%;
    transform:translate(-50%,-50%);
    z-index:2;
  }
  .moraeru-page .moraeru-step img{ max-width:100%; }
}
/* steps：SPだけ説明文を12pxに */
@media (max-width:900px){
  .moraeru-page .moraeru-step figcaption{
    font-size:12px;
  }
}


/* =========================================================
  ✅おすすめ（moraeru-reco）
  - SP: gap 8 / PC: gap 20
  - SPで“空きすぎに見える”のを防ぐため
    画像の max-width 制限を撤廃し、幅いっぱいで見せる
========================================================= */
.moraeru-page .moraeru-reco{
  margin:18px auto 0;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:20px;               /* PC gap */
  padding:0;
  justify-items:center;
  align-items:start;
}

/* 余白の原因になりやすい margin を reco 内だけ殺す */
.moraeru-page .moraeru-reco,
.moraeru-page .moraeru-reco *{
  margin:0 !important;
  padding:0;
}

/* 画像の下の謎余白対策 */
.moraeru-page .moraeru-reco__card,
.moraeru-page .moraeru-reco__card picture,
.moraeru-page .moraeru-reco__card img{
  display:block;
  width:100%;
  height:auto;
  line-height:0;
}

@media (max-width:900px){
  .moraeru-page .moraeru-reco{
    grid-template-columns:1fr;  /* 縦積み */
    gap:8px;                   /* SP gap */
    justify-items:stretch;      /* ここ重要：横幅いっぱいに */
  }

  .moraeru-page .moraeru-reco__card{
    width:100%;
    max-width:none;            /* 340px制限を廃止 */
  }
  .moraeru-page .moraeru-reco__card img{
    width:100%;
    max-width:none;            /* 340px制限を廃止 */
  }
}

/* =========================================================
  ✅人気車種（moraeru-cars）並び崩れ解決版（修正版）
========================================================= */

/* carsセクションだけコンテナ幅を1200に拡張（PC要件） */
.moraeru-page .moraeru-section--cars .moraeru-container{
  max-width:1200px;
}

/* グリッドを強制 */
.moraeru-page .moraeru-section--cars .moraeru-cars{
  margin:16px auto 0;
  width:100%;

  display:grid !important;
  grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
  gap:10px !important;

  /* テーマ由来の段組み系を遮断 */
  column-count:unset !important;
  column-gap:unset !important;
  columns:unset !important;

  /* flexの影響を完全に遮断（親がflex扱いになるのを防ぐ） */
  flex-direction:initial !important;
  flex-wrap:initial !important;
}

/* SP 2列 */
@media (max-width:900px){
  .moraeru-page .moraeru-section--cars .moraeru-cars{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }
}

/* 子要素（a.moraeru-car）を grid item として固定 */
.moraeru-page .moraeru-section--cars .moraeru-cars > a.moraeru-car{
  float:none !important;
  clear:none !important;

  width:auto !important;
  max-width:none !important;

  display:block !important;
  margin:0 !important;
  padding:0 !important;

  line-height:0 !important; /* 画像下余白で段ズレ防止 */
  text-decoration:none !important;
}

/* 画像フィット */
.moraeru-page .moraeru-section--cars .moraeru-cars > a.moraeru-car > img{
  display:block !important;
  width:100% !important;
  height:auto !important;

  margin:0 !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  background:transparent !important;
}
/* =========================================================
  ✅人気車種：WPの自動<p>ラップ対策（最重要）
  - .moraeru-cars 直下が a じゃないケースを吸収
========================================================= */

/* WPが入れるラッパー（p/div/figure等）を“中身だけにする” */
.moraeru-page .moraeru-section--cars .moraeru-cars > p,
.moraeru-page .moraeru-section--cars .moraeru-cars > div,
.moraeru-page .moraeru-section--cars .moraeru-cars > figure{
  margin:0 !important;
  padding:0 !important;
  display:contents !important; /* ←これでgridアイテムがaになる */
}

/* 念のため：grid配置を強制リセット（1枚目だけ全幅にする指定を潰す） */
.moraeru-page .moraeru-section--cars .moraeru-cars > *,
.moraeru-page .moraeru-section--cars .moraeru-cars a.moraeru-car{
  grid-column:auto !important;
  grid-row:auto !important;
  place-self:stretch !important;

  float:none !important;
  clear:none !important;
  width:auto !important;
  max-width:none !important;
}
/* =========================================================
  ✅人気車種：1枚目と2-4枚目の“位置ズレ”修正
  - gridアイテムの開始位置を強制的に揃える
========================================================= */

/* グリッドの“上揃え”を強制 */
.moraeru-page .moraeru-section--cars .moraeru-cars{
  align-items:start !important;          /* 行内のアイテムを上揃え */
}

/* カード自体を同条件に（基準線/余白/整列をリセット） */
.moraeru-page .moraeru-section--cars .moraeru-cars a.moraeru-car{
  align-self:start !important;
  vertical-align:top !important;         /* inline扱いの名残を潰す */
  line-height:0 !important;              /* 画像下の余白を確実に消す */
  font-size:0 !important;                /* 画像下の謎の隙間対策（保険） */
}

/* 画像を確実に上から始める */
.moraeru-page .moraeru-section--cars .moraeru-cars a.moraeru-car > img{
  display:block !important;
  vertical-align:top !important;
  margin-top:0 !important;
}

/* WPがp等を挟んでいる場合も同じく上揃えにする */
.moraeru-page .moraeru-section--cars .moraeru-cars > p,
.moraeru-page .moraeru-section--cars .moraeru-cars > div,
.moraeru-page .moraeru-section--cars .moraeru-cars > figure{
  align-self:start !important;
}

/* =========================================================
  ✅人気車種：横並び画像の“間に10pxの余白”を作る
  - カード同士はgrid gap
  - 画像同士はカード内paddingで調整
========================================================= */

/* カードに内側余白を作る */
.moraeru-page .moraeru-section--cars .moraeru-cars a.moraeru-car{
  padding:5px !important;   /* ←これが効く */
  box-sizing:border-box;
}

/* 画像はカード内いっぱいでOK */
.moraeru-page .moraeru-section--cars .moraeru-cars a.moraeru-car > img{
  width:100% !important;
  height:auto !important;
}

/* =========================================================
  メンテへ飛ぶ赤いピルボタン（調整版）
  - PC: 1行表示（改行させない）
  - PC/SP: 右端に下向き矢印
  - サイズ: font 14 / padding 15
========================================================= */
.moraeru-page .moraeru-centerbtn{
  margin:18px auto 10px;
  display:flex;
  justify-content:center;
}

/* ボタン本体 */
.moraeru-page .moraeru-centerbtn .moraeru-pill{
  position:relative;
  display:flex;                 /* 中央揃えしつつ右端に矢印置ける */
  align-items:center;
  justify-content:center;

  color:#fff;
  background:#E60012;
  text-decoration:none;

  border-radius:999px;
  font-weight:900;
  text-align:center;

  font-size:14px;
  line-height:1.4;

  padding:15px 44px 15px 15px;  /* 右は矢印分だけ多め */
  min-width:0;                  /* でかくなりすぎ抑制 */
  width:auto;

  box-shadow:0 10px 18px rgba(0,0,0,.10);
  white-space:nowrap;           /* ✅PCは改行させない */
}

/* 右端の下向き矢印（CSSだけで描画） */
.moraeru-page .moraeru-centerbtn .moraeru-pill::after{
  content:"";
  position:absolute;
  right:16px;
  top:50%;
  width:10px;
  height:10px;
  border-right:3px solid #fff;
  border-bottom:3px solid #fff;
  transform:translateY(-60%) rotate(45deg); /* 下向き矢印 */
  opacity:.95;
}

.moraeru-page .moraeru-centerbtn .moraeru-pill:hover{ opacity:.92; }

/* SP */
@media (max-width:900px){
  .moraeru-page .moraeru-centerbtn .moraeru-pill{
    width:100%;
    white-space:normal;        /* ✅SPは2行表示OK（<br>を活かす） */
    padding:15px 44px 15px 15px;
  }
}

@media (min-width:901px){
  .moraeru-page .moraeru-centerbtn .moraeru-pill br{
    display:none;
  }
}
/* ✅注意書きが消える対策（表示を強制復帰） */
.moraeru-page .moraeru-notes,
.moraeru-page .moraeru-notes li{
  font-size:12px !important;
  line-height:1.7 !important;
  color:#333 !important;
}


/* =========================================================
  FAQ
========================================================= */
.moraeru-page .moraeru-faq{
  margin-top:8px;
  display:grid;
  gap:10px;
}
.moraeru-page .moraeru-faq__item{
  background:#fff;
  border:5px solid #ED6D0D;
  border-radius:14px;
  overflow:hidden;
}
/* FAQ：文字サイズ調整 */
.moraeru-page .moraeru-faq__item{
  font-size:16px;   /* PC */
}

@media (max-width:900px){
  .moraeru-page .moraeru-faq__item{
    font-size:14px; /* SP */
  }
}

.moraeru-page .moraeru-faq__item summary{
  cursor:pointer;
  padding:14px;
  font-weight:900;
  color:#ED6D0D;
  list-style:none;
  position:relative;
  padding-right:50px;
}
.moraeru-page .moraeru-faq__item summary::-webkit-details-marker{ display:none; }
.moraeru-page .moraeru-faq__item summary::after{
  content:"+";
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  width:26px;
  height:26px;
  border-radius:999px;
  border:2px solid #ED6D0D;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  color:#ED6D0D;
  line-height:1;
}
.moraeru-page .moraeru-faq__item[open] summary::after{ content:"−"; }
.moraeru-page .moraeru-faq__body{
  padding:14px;
  border-top:1px solid rgba(0,0,0,.10);
  font-weight:700;
  line-height:1.9;
  font-size:13px;
}
/* =========================================================
  FAQ：外枠のオレンジ線を消す
  （中の質問カードはそのまま）
========================================================= */
.moraeru-page .moraeru-section .moraeru-box:has(.moraeru-faq){
  border:none !important;
  background:transparent !important;
  padding:0 !important;
}

/* メンテ画像：PCだけ90%＆確実に中央寄せ */
@media (min-width:901px){
  .moraeru-page .moraeru-maint{
    text-align:center;          /* 中央寄せの基準を文字揃えに */
  }

  .moraeru-page .moraeru-maint img{
    display:inline-block;       /* ←これが決定打 */
    width:90%;
    max-width:860px;
    margin:0;
  }
}