@charset "utf-8";

/*
*********************************************************
campaign-contents
*********************************************************
*/
#campaign-contents {
  max-width: 100%;
  margin: 0 auto;
}


/* chrome 画像・グラフィック文字のぼやけ対策 */
@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm) {
  #campaign-contents img {
    image-rendering: -webkit-optimize-contrast;
  }
}

/* safari 画像 デフォルト値 */
@media screen and (-webkit-min-device-pixel-ratio: 0) {

  _::-webkit-full-page-media,
  _:future,
  :root #campaign-contents img {
    image-rendering: auto;
  }
}

#campaign-contents summary {
  display: block;
  list-style: none;
}

#campaign-contents summary::-webkit-details-marker {
  display: none;
}

/*
*********************************************************
#section-kv
*********************************************************
*/
#section-kv {
  position: relative;
}

#section-kv .photo-box {
  width: 100%;
}

#section-kv picture,
#section-kv picture img {
  width: 100%;
  height: auto;
  display: block;
}

/* ---------------- scrollbtn --------------------  */
#section-kv .scrollbtn {
  position: relative;
  width: 100%;
  text-align: center;
}

#section-kv .scrollbtn a {
  position: absolute;
  bottom: -70px;
  left: 0;
  width: 100%;
  margin: 0 auto;
}

#section-kv .scrollbtn .arrows {
  width: 60px;
  height: 72px;
  position: absolute;
  left: 50%;
  margin-left: -30px;
  bottom: 20px;
}

#section-kv .scrollbtn .arrows path {
  stroke: #2994D1;
  fill: transparent;
  stroke-width: 1px;
  animation: arrow 2s infinite;
  -webkit-animation: arrow 2s infinite;
}

@keyframes arrow {
  0% {
    opacity: 0
  }

  40% {
    opacity: 1
  }

  80% {
    opacity: 0
  }

  100% {
    opacity: 0
  }
}

/*Safari and Chrome*/
@-webkit-keyframes arrow {
  0% {
    opacity: 0
  }

  40% {
    opacity: 1
  }

  80% {
    opacity: 0
  }

  100% {
    opacity: 0
  }
}

#section-kv .scrollbtn .arrows path.a1 {
  animation-delay: -1s;
  -webkit-animation-delay: -1s;
}

#section-kv .scrollbtn .arrows path.a2 {
  animation-delay: -0.5s;
  -webkit-animation-delay: -0.5s;
}

#section-kv .scrollbtn .arrows path.a3 {
  animation-delay: 0s;
  -webkit-animation-delay: 0s;
}

/* ---------------------------------------------  */
/* --------------------- SP --------------------  */
/* ---------------------------------------------  */
@media print,
screen and (max-width:768px) {
  #section-kv .scrollbtn .arrows {
    margin-left: -30px;
    bottom: 40px;
  }
}

/*
*********************************************************
強調テキスト
*********************************************************
*/
/* アクセントカラー + ちょい大きめ + 太字 */
.accent-strong {
  color: var(--accentColor, #0070c8);
  /* 予備色付き。common.min.cssのトークンを利用 */
  font-weight: 700;
  /* すこし太く */
  font-size: clamp(1.03em, 1.2vw, 1.08em);
  /* 行間を崩さず “少しだけ” 大きく */
}

/* === Utility: marker-like underline (蛍光ペン風) ===================== */
.u-marker {
  --marker-color: #FFF06A;
  --marker-height: .42em;
  background-image: linear-gradient(transparent calc(100% - var(--marker-height)),
      var(--marker-color) 0);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  box-decoration-break: clone;
  padding-bottom: .06em;
}

/*
*********************************************************
#section-greeting
*********************************************************
*/
#section-greeting p {
  text-align: center;
  font-size: 2.4rem;
  font-weight: bold;
  line-height: 1.8;
  /* padding: 64px 0 48px; */
  padding: 64px 0 0;
}


/* ---------------------------------------------  */
/* --------------------- SP --------------------  */
/* ---------------------------------------------  */
@media screen and (max-width: 768px) {
  #section-greeting {
    background-image: none;
    padding: 0 10px;
  }

  #section-greeting.inner-xs-wrap2 {
    max-width: 100%;
    width: 100%;
  }

  #section-greeting p {
    font-size: clamp(1.1rem, 3.6vw, 1.5rem);
    line-height: 1.75;
    margin: 0;
  }

  .accent-strong {
    font-size: clamp(1.02em, 1.8vw, 1.06em);
    font-weight: 700;
  }
}

@media screen and (min-width: 600px) and (max-width: 698px) {
  #section-greeting {
    padding-bottom: 3vw;
  }

  #section-greeting .greeting-innr {
    padding-bottom: 8vw;
  }

  #section-greeting p {
    font-size: 2rem;
    line-height: 1.8;
    padding: 10vw 0 0;
  }
}

@media screen and (min-width: 699px) and (max-width: 768px) {
  #section-greeting {
    padding-bottom: 0;
  }

  #section-greeting .greeting-innr {
    padding-bottom: 8vw;
  }

  #section-greeting p {
    font-size: 2.6rem;
    line-height: 1.8;
    padding: 10vw 0 0;
  }
}

@media screen and (min-width: 415px) and (max-width: 599px) {
  #section-greeting p {
    font-size: 1.6rem;
    line-height: 1.6;
    padding: 10.5vw 0 0;
    /* padding: 10.5vw 0 10vw; */
  }
}

@media screen and (min-width: 375px) and (max-width: 414px) {
  #section-greeting p {
    font-size: 1.5rem;
    line-height: 1.5;
    padding: 10vw 0 8vw;
  }
}

@media screen and (min-width: 321px) and (max-width: 374px) {
  #section-greeting p {
    font-size: 1.4rem;
    line-height: 1.4;
    padding: 11vw 0 9vw;
  }
}

@media screen and (max-width: 320px) {
  #section-greeting p {
    font-size: 1.2rem;
    line-height: 1.4;
    padding: 11vw 0 12vw;
  }
}

/*
***************************************************************
#credit-section
***************************************************************
*/
#credit-section {
  overflow: hidden;
  position: relative;
  margin: 56px auto 0;
  /* margin: 24px auto; */
}
@media (max-width: 768px) {
  #credit-section {
    margin: 24px auto 0;
  }
}

/* === 全幅背景（100vw）をセクションの背面に敷く === */
#credit-section::before {
  content: "";
  position: absolute;
  inset: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: no-repeat,
    url(/campaign/compactcars/assets/images/credit-contents-innr-bg.webp?date=20250915) center top / cover no-repeat;
    /* background:
    radial-gradient(ellipse 140% 100% at 50% -35%,
      #fff 50%,
      rgba(255, 255, 255, 0) 60%) top / 100% 330px no-repeat,
    url(/campaign/compactcars/assets/images/credit-contents-innr-bg.webp?date=20250915) center top / cover no-repeat; */
  z-index: -2;
  pointer-events: none;
}

/* === 下端を白にフェード（注釈エリアの白と馴染ませる） === */
#credit-section::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  bottom: 0;
  height: clamp(220px, 26vw, 420px);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .6) 55%, #fff 95%, #fff 100%);
  z-index: -1;
  pointer-events: none;
}

/* ---------------------------------------------  */
/* --------------------- SP --------------------  */
/* ---------------------------------------------  */
@media (max-width: 768px) {
  #credit-section::before {
    background:
      radial-gradient(ellipse 180% 100% at 50% -26%,
        #fff 58%,
        rgba(255, 255, 255, 0) 60%) top / 100% 220px no-repeat,
      url(/campaign/compactcars/assets/images/credit-contents-innr-bg-sp.webp?date=20250915) center top / cover no-repeat;
  }

  #credit-section::after {
    height: clamp(180px, 30vw, 280px);
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 1) 50%,
        #fff 90%, #fff 100%);
  }
}

/* ~480px（iPhone SE/8 など） */
@media (max-width: 480px) {
  #credit-section::before {
    background:
      url(/campaign/compactcars/assets/images/credit-contents-innr-bg-sp.webp?date=20250915) center top / cover no-repeat;
  }
  /* #credit-section::before {
    background:
      radial-gradient(ellipse 200% 100% at 50% -53%, #fff 58%, rgba(255, 255, 255, 0) 60%) top / 100% 200px no-repeat,
      url(/campaign/compactcars/assets/images/credit-contents-innr-bg-sp.webp?date=20250915) center top / cover no-repeat;
  } */

  #credit-section::after {
    height: clamp(160px, 28vw, 240px);
  }
}

/* 481–768px（一般的なSP大） */
@media (min-width: 481px) and (max-width: 768px) {
  #credit-section::before {
    background:
      radial-gradient(ellipse 170% 100% at 50% -53%, #fff 58%, rgba(255, 255, 255, 0) 60%) top / 100% 230px no-repeat,
      url(/campaign/compactcars/assets/images/credit-contents-innr-bg-sp.webp?date=20250915) center top / cover no-repeat;
  }

  #credit-section .credit-contents-wrap .credit-contents {
    padding-top: 44px;
  }

  #credit-section::after {
    height: clamp(180px, 28vw, 260px);
  }
}



/*
***************************************************************
credit-contents-wrap
***************************************************************
*/
#credit-section .credit-contents-wrap {
  width: 100%;
  margin: 0 auto;
}

#credit-section .credit-contents-wrap .credit-contents {
  position: relative;
  width: 100%;
  background: none;
  padding: 64px 0 24px;
  /* padding: 160px 0 24px; */
}

#credit-section .inner-s-wrap {
  position: relative;
  z-index: 0;
  background: transparent;
}

#credit-section .inner-s-wrap::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(var(--contentCol10), 100%);
  z-index: -1;
  background: #fff;
}

#credit-section .credit-contents-wrap .credit-contents-innr::before{
  content:"";
  position:absolute;
  inset:0 auto 0 50%;
  width:min(1440px, 100%);
  background-color: #fefbd2;
  transform:translateX(-50%);
  /* background:linear-gradient(180deg, #FFFFFF 0%, #FFFCDB 100%); */
  z-index:-1;
}

/* ---------------------------------------------  */
/* --------------------- SP --------------------  */
/* ---------------------------------------------  */
@media (max-width:768px) {

  #credit-section .inner-wrap::before,
  #credit-section .inner-s-wrap::before {
    left: -16px;
    width: calc(100% + 32px);
    transform: none;
  }

  #credit-section .credit-contents-wrap .credit-contents::before {
    width: calc(100% - 32px);
    height: 220px;
  }
}

/* ~480px（小型） */
@media (max-width:480px) {
  #credit-section .credit-contents-wrap .credit-contents {
    /* padding-top: 32px; */
    padding: 32px 0 0;
  }
}

/* 481–768px（一般SP） */
@media (min-width:481px) and (max-width:768px) {
  #credit-section .credit-contents-wrap .credit-contents {
    /* padding-top: 44px; */
    padding: 44px 0 0;
  }
}

#credit-section .credit-contents-wrap .credit-contents .credit-contents-innr {
  position: relative;
  width: 100%;
  margin: 0 auto;
  /* padding: 0 0 160px 0; */
  padding: 0;
}

@media screen and (min-width: 769px) and (max-width: 1152px) {
  #credit-section .credit-contents-wrap .credit-contents .credit-contents-innr {
    padding: 0 16px 24px 16px;
  }
}

/* ---------------------------------------------  */
/* --------------------- SP --------------------  */
/* ---------------------------------------------  */
@media screen and (max-width: 768px) {
  #credit-section .credit-contents-wrap .credit-contents .credit-contents-innr {
    max-width: inherit;
    /* padding: 0 16px 80px 16px; */
    padding: 0 16px 0 16px;
  }
}


/*
***************************************************************
present-area
***************************************************************
*/
#credit-section .present-area {
  position: relative;
  z-index: 0;
}



@media (max-width: 768px) {
  #credit-section .present-area::before {
    left: 0;
    transform: none;
    width: 100%;
  }
}

/* タイトル画像（present-ttl）を上の帯と同じ幅で中央配置 */
#credit-section .present-area .present-ttl {
  width: 100%;
  margin: 8px auto 16px;
  /* 余白は親の白背景上で確保 */
  padding: 0;
}

#credit-section .present-area .present-ttl picture,
#credit-section .present-area .present-ttl img {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width:768px) {
  #credit-section .present-area .present-ttl {
    margin: 8px auto 12px;
    padding: 8px 0;
  }
}

#credit-section .present-area .credit-contents-bg-bottom img {
  vertical-align: top;
}

#credit-section .present-area .present-area-innr .inner-s-wrap {
  background:transparent !important;
}

#credit-section .present-area .present-area-innr h3 {
  width: 100%;
  text-align: center;
  margin: 0 auto 20px;
}

#credit-section .present-area .present-area-innr .present-detail {
  width: 100%;
  padding: 30px 105px;
}

#credit-section .present-area .present-area-innr .present-detail {
  background-color: #fefbd2;
}

#credit-section .present-area .present-area-innr .present-detail .photo-box {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

/* credit */
#credit-section .present-area .present-area-innr .present-detail .photo-box .basekit {
  max-width: 440px;
}

/* credit */
#credit-section .present-area .present-area-innr .present-detail .photo-box .car {
  max-width: 407px;
  padding-left: var(--size32);
}

#credit-section .present-area .present-area-innr .present-detail .text-box {
  font-size: 1.4rem;
  margin-top: var(--size16);
  text-align: justify;
}

#credit-section .present-area .present-area-innr .present-detail .note {
  font-size: 1.2rem;
  margin-top: var(--size8);
  text-align: justify;
}

/* ---------------------------------------------  */
/* --------------------- SP --------------------  */
/* ---------------------------------------------  */
@media screen and (max-width: 768px) {

  #credit-section .present-area .present-area-innr {
    padding: var(--size16);
  }

  #credit-section .present-area .credit-contents-bg-top,
  #credit-section .present-area .credit-contents-bg-bottom {
    width: 100%;
    max-width: inherit;
    margin: 0;
    padding: 0;
  }

  #credit-section .present-area .present-area-innr .present-detail {
    padding: 0;
  }

  #credit-section .present-area .present-area-innr .present-detail {
    background-color: transparent;
  }

  /* credit */
  #credit-section .present-area .present-area-innr .present-detail .photo-box {
    display: flex;
    flex-flow: column;
  }

  /* credit */
  #credit-section .present-area .present-area-innr .present-detail .photo-box .basekit {
    order: 2;
    max-width: inherit;
  }

  /* credit */
  #credit-section .present-area .present-area-innr .present-detail .photo-box .car {
    order: 1;
    max-width: inherit;
    padding-left: 0;
    padding-bottom: var(--size8);
  }

  #credit-section .present-area .present-area-innr .present-detail .photo-box img {
    width: 100%;
  }
}

@media screen and (max-width: 320px) {
  #credit-section .present-area .present-area-innr .present-detail .text-box {
    font-size: 1.2rem;
  }
}

/* =========================
   REX&JUSTY 限定バッジ＋上ライン
   ========================= */
#credit-section .present-area .credit-contents-bg-top {
  /* 幅レールは既存のまま */
  position: relative;
  height: 64px;
  /* 帯+ラインの全高 */
}

/* オレンジのライン（上辺いっぱい） */
#rexjusty-cap .topline {
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 12px;
  /* ラインの太さ */
  background: #F5AE2C;
  /* オレンジ */
  display: block;
  border-radius: 0;
}

/* 青バッジ本体 */
#rexjusty-cap .badge {
  position: absolute;
  left: 0;
  top: 12px;
  /* ライン直下に配置 */
  background: #1FA7DE;
  /* 青 */
  color: #fff;
  display: inline-block;
  line-height: 1;
  padding: 12px 24px 14px 24px;
  font-weight: 800;
  font-size: clamp(18px, 2.6vw, 28px);
  letter-spacing: .02em;
}

/* 右端を斜めに（三角で延長） */
/* #rexjusty-cap .badge::after {
  content: "";
  position: absolute;
  top: 0;
  right: -36px; */
  /* 三角分だけはみ出させる */
  /* border-left: 36px solid #1FA7DE;
  border-top: 0 solid transparent;
  border-bottom: calc(100%) solid transparent; */
  /* バッジ高に合わせる */
/* } */

#rexjusty-cap .badge::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 140%;
    height: 100%;
    background: #1FA7DE;
    z-index: -1;
    clip-path: polygon(0 0, 100% 0, 90% 100%, 0 100%);

}

/* テキストだけ拾いたい場合の微調整（可読性確保） */
#rexjusty-cap .badge .label {
  display: inline-block;
  transform: translateY(1px);
}


/* SP 調整 */
@media (max-width:768px) {
  #credit-section .present-area .credit-contents-bg-top {
    height: 56px;
  }

  #rexjusty-cap .topline {
    height: 10px;
  }

  #rexjusty-cap .badge {
    top: 10px;
    padding: 10px 18px 12px;
    font-size: clamp(16px, 4.2vw, 20px);
  }

  #rexjusty-cap .badge::after {
    right: -28px;
    border-left-width: 28px;
  }
}

/* ===== コピー（サブ＋メイン） ===== */
.present-copy-wrap {
  text-align: center;
  margin: 32px auto 32px;
  padding: 0 8px;
}

.present-sub {
  color: #0B7FC8;
  font-weight: 700;
  /* font-size: clamp(14px, 4vw, 32px); */
  font-size: clamp(14px, 3.5vw, 32px);
  line-height: 1.35;
  margin: 0 0 8px;
}

/* 見出し */
.present-head {
  color: #0B7FC8;
  font-weight: 900;
  letter-spacing: .02em;
  line-height: 1.1;
  margin: 0;
  display: inline-flex;
  gap: 0;
  align-items: flex-end;
  background: linear-gradient(transparent calc(100% - .8em), #FFF06A 0) left bottom/100% 100% no-repeat;
  padding-bottom: .06em;
}

.present-head .present-line {
  display: block;
  margin: 0;
  padding: 0;
  font-size: clamp(24px, 5vw, 48px);
}
.present-head .present-line-l {
  font-size: clamp(24px, 3.5vw, 48px) !important;
}
/* 黄色バー（1回だけ定義） */
.u-markerbar {
  --bar-h: .42em;
  --bar-color: #FFF06A;
  background: linear-gradient(transparent calc(100% - var(--bar-h)), var(--bar-color) 0) left bottom/100% 100% no-repeat;
  box-decoration-break: clone;
  padding-bottom: .06em;
}

/* PC：1行にして、バーは見出し全体に1本だけ */
@media (min-width:769px) {
  .present-head {
    display: inline-flex;
    flex-wrap: nowrap;
    white-space: nowrap;
    gap: 0;
    align-items: baseline;
  }

  .present-head .present-line {
    padding: 0;
    margin: 0;
  }

  /* 余白ゼロに上書き */
  .present-head .u-markerbar {
    background: none;
  }

  .present-visual {
    aspect-ratio: inherit;

  }
}

@media (max-width:768px) {
  .present-copy-wrap {
    margin: 0;
  }

  .present-head {
    display: block;
    background: none;
  }

  .present-head .present-line {
    display: inline-block;
  }

  .present-visual {
    aspect-ratio: inherit;
  }

  .present-visual picture,
  .present-visual img {
    width: 100%;
    height: auto;
    display: block;
  }

}

/* === 期間バー === */
/* 期間：背景なし・文字だけ */
.present-period-bar {
  background: none;
  border-radius: 0;
  padding: 0;
  text-align: center;
  margin: clamp(12px, 2.4vw, 18px) auto;
}

.present-period-bar .label {
  font-weight: 800;
  font-size: clamp(16px, 2vw, 24px);
  color: #111;
  margin-right: .8em;
}

.present-period-bar .range {
  font-size: clamp(16px, 3vw, 40px);
  color: #111;
}


.offer-period-bar {
  background: none;
  border-radius: 0;
  padding: 0;
  text-align: center;
  margin: clamp(12px, 2.4vw, 18px) auto;
}

.offer-period-bar .label {
  font-weight: 800;
  font-size: clamp(16px, 2vw, 20px);
  color: #111;
  margin-right: .8em;
}

.offer-period-bar .range {
  font-size: clamp(18px, 3vw, 28px);
  color: #111;
}

/* strongは共通スタイルに任せる（追加指定不要） */


/* ── table（コンポーネントに乗せつつ色だけ上書き） ── */


.present-table .table-nml tbody th,
.present-table .table-nml tbody td {
  background-color: transparent;
  text-align: center;
  padding: 8px;
}

/* デザイン色（オレンジ/黄色）を改めて与える */
.present-table .table-nml tbody th {
  background-color: #F29A00;
  /* オレンジ */
  color: #fff;
  font-weight: var(--fwBold);
}

.present-table .table-nml tbody td {
  background-color: #FFE589;
  /* 黄色 */
  color: #111;
  font-weight: var(--fwBold);
}

.present-table .table-nml {
  border: 0 !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  background: transparent;
  outline: none !important;
  box-shadow: none !important;
}

.present-table .table-nml th,
.present-table .table-nml td {
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
}

.present-table .table-nml tr {
  border: 0 !important;
}


/* PCの列バランス最適化（横並びテーブル用） */
@media (min-width: 769px) {
  .present-table {
    --offer-th-w: 160px;
  }

  /* ←必要に応じて 260〜300px で微調整 */

  .present-table .col-th1,
  .present-table .col-th2 {
    width: var(--offer-th-w);
  }

  /* thの文字は折り返さない（幅調整基準にするため） */
  .present-table .table-nml tbody th {
    white-space: nowrap;
  }
  .table-nml.ver-sm tbody th,.table-nml.ver-sm tbody td {
    font-size: 1.6rem
  }
}

/* ───────── SP：表を縦積みに（th → td の順で1ブロック） ───────── */
@media (max-width: 768px) {
  .present-table.sp-only .table-nml {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
  }

  .present-table.sp-only .table-nml tbody tr {
    display: block;
    /* 行ブロック化 → margin使える */
    margin: 10px 0 0;
    /* 行間 */
  }

  .present-table.sp-only .table-nml tbody th,
  .present-table.sp-only .table-nml tbody td {
    display: block;
    /* セルを縦に並べる */
    width: 100%;
    box-sizing: border-box;
  }

  /* 文字の見え方（お好みで） */
  .present-table.sp-only .table-nml tbody th {
    white-space: nowrap;
  }

  /* 見出しは折り返さない */
  .present-table.sp-only .table-nml tbody td {
    white-space: normal;
    line-break: strict;
    word-break: normal;
  }

  .pc-only {
    display: none !important;
  }
}

@media (min-width: 769px) {
  .sp-only {
    display: none !important;
  }
}


/*
***************************************************************
scene-qa-box （たとえば・・）
***************************************************************
*/

/* 見出しの画像化ユーティリティ */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 1px, 1px);
  white-space: nowrap;
  border: 0;
}

/* 画像見出し（対象車） */
#credit-section .cmn-carousel-wrap .h2-eligible {
  width: 100%;
  margin: 0 auto 24px;
  /* 下余白はお好みで */
  text-align: center;
}

#credit-section .cmn-carousel-wrap .h2-eligible picture,
#credit-section .cmn-carousel-wrap .h2-eligible img {
  display: block;
  width: 100%;
  height: auto;
}


/* === キャンペーン対象車の白帯：プレゼント(1126px)と完全一致・余白は維持 === */
#credit-section .credit-contents-innr>section.inner-wrap {
  position: relative;
  z-index: 0;
  /* 疑似要素の重なり制御用の土台 */
  padding-inline: 40px;
  /* 内側ガターは従来どおり */
  background: none;
  /* 本体の背景は塗らない */
}

/* #credit-section .credit-contents-innr>section.inner-wrap::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
  background-color: var(--white);
  background: linear-gradient(180deg, #ffffff 0%, #fffcdb 100%);
} */

/* SPは画面幅ベースでOK（プレゼント側と同じノリ） */
@media (max-width:768px) {
  #credit-section .credit-contents-innr>section.inner-wrap {
    padding-inline: 16px;
  }

  #credit-section .credit-contents-innr>section.inner-wrap::before {
    left: -16px;
    width: calc(100% + 32px);
    transform: none;
  }
}


#credit-section .topic-banner-list .item,
#credit-section .banner-list .item {
  padding: 0;
}

#credit-section .scene-qa-box {
  background-color: transparent;
  border-radius: 0;
  overflow: hidden;
  /* fallback */
  overflow: clip;
}

#credit-section .scene-qa-box .scene-qa-a button {
  width: 92%;
  font-size: 1.6rem;
  font-weight: bold;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-right: 30px;
}

/* ----------------- it-box --------------- */
/* 左の写真枠をテキストの高さから独立させる */
#credit-section .scene-qa-box .it-box .img {
  aspect-ratio: 16 / 9;
  align-self: flex-start;
}


#credit-section .scene-qa-box>.it-box .img img {
  border-radius: 0;
}

#credit-section .scene-qa-box .it-box {
  column-gap: 5px;
}

#credit-section .scene-qa-box .it-box .txt {
  padding: 16px 16px;
}

#credit-section .scene-qa-box .it-box .txt {
  background-color: #fefbd2;
}

#credit-section .scene-qa-box .scene-qa-q .illust img {
  width: 100%;
  height: auto;
  max-height: 60px;
  /* デザインに合わせて 48〜64px くらいで微調整 */
  display: block;
}

@media screen and (min-width: 769px) and (max-width: 1152px) {
  #credit-section .scene-qa-box>.it-box .img img {
    object-fit: contain;
    /* 既定はcover。トリミングが気になるならcontain */
  }

  #credit-section .scene-qa-box .it-box .txt {
    padding: 24px;
  }
}


/* ----------------- scene-qa-q（たとえば） --------------- */
#credit-section .scene-qa-box .scene-qa-q {
  font-size: 1.2rem;
  padding-bottom: var(--size16);
  margin-bottom: var(--size16);
}

/* たとえば */
#credit-section .scene-qa-box .scene-qa-q .example {
  font-size: 1.6rem;
  padding-right: var(--size16);
}

/* illust */
#credit-section .scene-qa-box .scene-qa-q .illust {
  display: block;
  padding-top: var(--size8);
}

/* 車名 */
#credit-section .scene-qa-box .scene-qa-q .car-name {
  font-size: 2.4rem;
  font-weight: bold;
  letter-spacing: -0.02em;
  padding-right: var(--size16);
}

/* ----------------- example-detail-box（たとえばの詳細） --------------- */
#credit-section .scene-qa-box .scene-qa-a-detail {
  padding: 0;
  background-color: #ffffff;
}

#credit-section .scene-qa-box .scene-qa-a-detail .example-detail-box {
  display: flex;
  column-gap: 20px;
  background-color: #fefbd2;
  padding: 16px 32px;
}

#credit-section .scene-qa-box .scene-qa-a-detail .example-detail-box .engine-price {
  width: 29%;
  font-weight: bold;
}

#credit-section .scene-qa-box .scene-qa-a-detail .example-detail-box .detail {
  width: 71%;
  text-align: justify;
}

/* ----------------- detail-box（特徴） --------------- */
#credit-section .scene-qa-box .scene-qa-a-detail .detail-box {
  background-color: #fafafa;
  display: flex;
  align-items: center;
  column-gap: var(--size24);
  padding: 16px 32px;
}

#credit-section .scene-qa-box .scene-qa-a-detail .detail-box.detail02 {
  flex-direction: row-reverse;
  justify-content: flex-end;
  padding: 0 32px 16px;
}

#credit-section .scene-qa-box .scene-qa-a-detail .detail-box .photo {
  width: 100%;
  max-width: 480px;
}

#credit-section .scene-qa-box .scene-qa-a-detail .detail-box .txt {
  display: block;
  width: 100%;
  max-width: 610px;
}

#credit-section .scene-qa-box .scene-qa-a-detail .detail-box .txt .name {
  font-size: 2.4rem;
  font-weight: bold;
  padding: 10px 0;
}

#credit-section .justy .scene-qa-box .scene-qa-a-detail .detail-box .txt .name {
  padding: 10px 0 0;
}

#credit-section .scene-qa-box .scene-qa-a-detail .detail-box .txt .sub-name {
  font-size: 1.2rem;
}

#credit-section .justy .scene-qa-box .scene-qa-a-detail .detail-box .txt .sub-name {
  padding-bottom: 10px;
}

#credit-section .scene-qa-box .scene-qa-a-detail .detail-box .txt .lead {
  font-size: 1.8rem;
  line-height: 1.8em;
}

#credit-section .scene-qa-box .scene-qa-a-detail .detail-box.caption {
  font-size: 1.2rem;
  line-height: 1.8em;
}

#credit-section .cmn-carousel-wrap .splide {
  padding-bottom: 0;
}

/* ---------------------------------------------  */
/* --------------------- SP --------------------  */
/* ---------------------------------------------  */
@media screen and (max-width: 768px) {

  #credit-section .topic-banner-list .item,
  #credit-section .banner-list .item {
    padding: 0 8px;
  }

  #credit-section .scene-qa-box .it-box .txt {
    text-align: center;
    padding: var(--size16);
  }

  #credit-section .scene-qa-box>.it-box .img img {
    border-radius: 0;
    position: unset;
    transform: none;
    object-fit: contain;
  }

  #credit-section .scene-qa-box .scene-qa-q {
    position: relative;
    font-size: 1.2rem;
    color: var(--black);
    background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
    border-bottom: 1px solid #B2B2B2;
    border-radius: 0;
    padding-bottom: var(--size16);
  }

  /* 車名 */
  #credit-section .scene-qa-box .scene-qa-q .car-name {
    font-size: 2rem;
  }

  #credit-section .scene-qa-box .scene-qa-a button {
    width: 100%;
    justify-content: center;
    padding-right: 0;
    padding-bottom: 10px;
  }

  /* ----------------- example-detail-box（たとえばの詳細） --------------- */
  #credit-section .scene-qa-box .scene-qa-a-detail .example-detail-box {
    display: block;
    font-size: 1.4rem;
    text-align: justify;
    padding: var(--size16);
  }

  #credit-section .scene-qa-box .scene-qa-a-detail .example-detail-box .engine-price {
    width: 100%;
    padding-bottom: var(--size16);
  }

  #credit-section .scene-qa-box .scene-qa-a-detail .example-detail-box .detail {
    width: 100%;
  }

  #credit-section .scene-qa-box .scene-qa-a-detail .example-detail-box .engine-price {
    text-align: left;
  }

  /* ----------------- detail-box（特徴） --------------- */
  #credit-section .scene-qa-box .scene-qa-a-detail .detail-box {
    display: block;
    column-gap: var(--size24);
    padding: 16px 0 32px;
  }

  #credit-section .scene-qa-box .scene-qa-a-detail .detail-box.detail02 {
    padding: 0 0 16px;
  }

  #credit-section .scene-qa-box .scene-qa-a-detail .detail-box .photo {
    max-width: inherit;
  }

  #credit-section .scene-qa-box .scene-qa-a-detail .detail-box .photo img {
    max-width: 100%;
  }

  #credit-section .scene-qa-box .scene-qa-a-detail .detail-box .txt {
    max-width: inherit;
    text-align: justify;
    padding: 8px 16px 0 16px;
  }

  #credit-section .cmn-carousel-wrap .splide {
    padding-bottom: 40px;
  }

  #credit-section .scene-qa-box .scene-qa-a-detail .detail-box .txt .name {
    font-size: 1.8rem;
    line-height: 2;
  }

  #credit-section .scene-qa-box .scene-qa-a-detail .detail-box .txt .lead {
    font-size: 1.4rem;
    line-height: 1.6em;
  }

  #credit-section .scene-qa-box .scene-qa-a-detail .detail-box.caption {
    font-size: 1.2rem;
    line-height: 1.8em;
    text-indent: -1.2rem;
    padding-left: calc(1.2rem + 16px);
    padding-right: 16px;
  }
}

/*
***************************************************************
modal
***************************************************************
*/
.modal-win .modal-close-btn {
  position: absolute;
  right: 12px;
  top: max(12px, env(safe-area-inset-top));
  z-index: 1105;
  margin: 0;
  transform: none;
  display: grid;
  place-items: center;
}

.modal-win .modal-close-btn>button {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  background: none;
  border: 0;
}

/*
***************************************************************
.section-banner
***************************************************************
*/

/* 対象車種エリア内に配置した場合は背景を共有（透明化） */
.section-banner.in-target-area {
  background-color: transparent;
}

/* 対象車種エリア内に配置したバナーのレイアウト最適化 */
#credit-section .credit-contents-innr .section-banner.in-target-area {
  width: 100%;
  /* margin: 24px auto; */
  margin: 0 auto;
}

#credit-section .credit-contents-innr .section-banner.in-target-area .banner-inner {
  /* padding: 0 0 16px; */
  padding: 0;
}

/* 区切り線（PC/SP 共通） */
#credit-section .credit-contents-innr .section-divider {
  border-top: 1px solid var(--greyK20);
  height: 0;
  margin: 64px auto 64px;
}

/* バナー画像をコンテナ幅いっぱいに（スライダーと同等の見た目幅） */
#credit-section .credit-contents-innr .section-banner.in-target-area .bnr picture,
#credit-section .credit-contents-innr .section-banner.in-target-area .bnr img {
  width: 100%;
  height: auto;
  display: block;
}

/* PCは参考サイズ（855px）で中央寄せ。画像を少し小さめに */
@media (min-width:769px) {

  #credit-section .credit-contents-innr .section-banner.in-target-area .bnr picture,
  #credit-section .credit-contents-innr .section-banner.in-target-area .bnr img {
    /* width: 855px; */
    width: 100%;
    max-width: 855px;
    margin: 0 auto;
  }
}

/* SP: 区切り線の余白と幅（短め） */
@media (max-width:768px) {
  #credit-section .credit-contents-innr .section-divider {
    margin: 40px auto 40px;
    width: 40%;
  }
}

/* PC: 区切り線も短く（バナー幅に合わせる） */
@media (min-width:769px) {
  #credit-section .credit-contents-innr .section-divider {
    width: 200px;
  }
}


.section-banner .banner-inner {
  text-align: center;
  margin: 0 auto;
  padding: 40px 0;
}

/* --------------- bnr --------------- */
.section-banner .bnr {
  position: relative;
  width: 100%;
  margin: 0 auto;
}

.section-banner a {
  cursor: pointer;
  -webkit-transition: all .7s;
  transition: all .7s;
}

.section-banner a:hover {
  opacity: 0.7;
}

.section-banner .btn-wrap {
  position: absolute;
  width: 280px;
  bottom: 9%;
  left: 50%;
  transform: translateX(-50%);
  margin: 0 auto;
  padding: 0;
  z-index: 10;
}

.section-banner .btn-wrap .btn-nml {
  width: 326px;
  min-height: 48px;
  font-size: 1.8rem;
  padding: 6px;
}

.section-banner .btn-wrap span {
  font-size: 1.0rem;
}

@media screen and (min-width: 769px) and (max-width: 1130px) {
  .section-banner .banner-inner {
    padding: 0 16px 40px;
  }
}

/* -------------------------------------- */
/* ----------------- SP ----------------- */
/* -------------------------------------- */
@media screen and (max-width: 768px) {
  .section-banner {
    max-width: inherit;
    margin: 32px 0 32px;
  }

  .section-banner .banner-inner {
    max-width: inherit;
    padding: 0 16px 40px;
  }

  .section-banner .btn-wrap {
    width: 90%;
    bottom: 4vw;
  }

  .section-banner .btn-wrap .btn-nml {
    width: 100%;
    min-height: 38px;
    font-size: 1.8rem;
    padding: 6px;
  }

  /* 対象車種内のバナー（SP） */
  #credit-section .credit-contents-innr .section-banner.in-target-area {
    max-width: inherit;
    margin: 16px 0 24px;
  }

  #credit-section .credit-contents-innr .section-banner.in-target-area .banner-inner {
    padding: 0 0 12px;
    /* SPの下余白も狭める */
  }


  /* SP時、対象車種内バナーのボタン位置を少し下へ */
  #credit-section .credit-contents-innr .section-banner.in-target-area .btn-wrap {
    bottom: 2.6vw;
    /* 4vw -> 2.6vw に微調整 */
  }

}

/*
***************************************************************
#section-cautions
***************************************************************
*/
#section-cautions {
  overflow: hidden;
  width: 100%;
  max-width: 1130px;
  background-color: #fff;
  margin: 0 auto;
}

#section-cautions .cautions-inner {
  text-align: center;
  margin: 0 auto;
  padding: 80px 0;
}

#section-cautions .acc-wrap.nml-acc-wrap .triggle {
  text-align: center;
  padding: 26px 56px;
}

#section-cautions .acc-wrap.nml-acc-wrap.wrap02 .triggle {
  display: flex;
  justify-content: center;
  align-items: center;
}

#section-cautions .acc-wrap.nml-acc-wrap.wrap02 .triggle img {
  width: 34px;
  padding-right: 10px;
}

#section-cautions .acc-wrap.nml-acc-wrap {
  border-top: 1px solid var(--silver);
}

#section-cautions .acc-wrap.nml-acc-wrap.wrap01,
#section-cautions .acc-wrap.nml-acc-wrap.wrap02 {
  border-bottom: none;
}

#section-cautions .acc-wrap.nml-acc-wrap+.acc-wrap {
  margin-top: 0;
}

#section-cautions .acc-wrap.nml-acc-wrap.wrap02 p:nth-of-type(2) {
  padding-top: 10px;
}

#section-cautions .acc-contents p {
  max-width: 855px;
  text-align: justify;
  font-size: 1.2rem;
  line-height: 1.8;
  margin: 0 auto;
  padding: 0;
}

#section-cautions .wrap01 .acc-contents p {
  text-indent: -1.1em;
  padding-left: 1.1em;
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
  #section-cautions {
    max-width: inherit;
    padding: 0 16px;
  }

  .acc-wrap.nml-acc-wrap .acc-contents-inner {
    padding: 10px 16px 20px;
  }
}

/* -------------------------------------- */
/* ----------------- SP ----------------- */
/* -------------------------------------- */
@media screen and (max-width: 768px) {
  #section-cautions {
    max-width: inherit;
  }

  #section-cautions .cautions-inner {
    margin: 0;
    padding: 32px 16px 80px;
  }

  #section-cautions .acc-wrap.nml-acc-wrap .triggle {
    font-size: 1.6rem;
    padding: 21px 56px 21px 16px;
  }

  #section-cautions .wrap01 .acc-contents p {
    max-width: inherit;
    text-align: justify;
    font-size: 1.2rem;
    line-height: 1.8;
    padding: 2px 0;
  }
}

@media screen and (max-width: 360px) {
  #section-cautions .acc-wrap.nml-acc-wrap .triggle {
    font-size: 1.4rem;
    padding: 21px 32px 21px 16px;
  }
}

/*
***************************************************************
btn-wrap
***************************************************************
*/
#section-challenge .btn-wrap {
  background-color: #dde2e6;
  max-width: var(--contentMaxW);
  margin-top: 0;
  padding-top: var(--size32);
  padding-bottom: var(--size48);
}

#section-challenge .btn-wrap .btn-nml.cv-btn {
  animation: none !important;
}

/* ---------------------------------------------  */
/* --------------------- SP --------------------  */
/* ---------------------------------------------  */
@media screen and (max-width: 768px) {
  #section-challenge .btn-wrap {
    margin-top: var(--size16);
  }

  #section-challenge .btn-wrap .btn-nml {
    width: 90%;
  }
}

/*
***************************************************************
btn-page-top
***************************************************************
*/
.btn-page-top {
  position: fixed;
  right: var(--size48);
  bottom: 80px;
  z-index: 1000;
  width: var(--size48);
  height: var(--size48);
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.btn-page-top.show {
  opacity: 1;
  visibility: visible;
}

.btn-page-top img {
  width: var(--size24);
  height: var(--size24);
}

@media screen and (max-width: 768px) {
  .btn-page-top {
    right: var(--size8);
  }
}

/*
***********************************************************
固定追従しないバージョン（通常ページ内）
***********************************************************
*/
#campaign-contents .btn-section {
  background-color: #dde2e6;
  max-width: var(--contentMaxW);
  margin: 0 auto 80px;
}

#campaign-contents .btn-section .btn-wrap-container {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 40px 16px;
}

#campaign-contents .btn-section .btn-nml.cv-btn {
  animation: none !important;
}

#campaign-contents .btn-section .btn-wrap-container .btn-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 326px;
  margin-top: 0;
}

#campaign-contents .btn-section .btn-wrap-container .btn-wrap .btn-nml {
  width: 100%;
  text-align: center;
}

@media screen and (max-width: 768px) {
  #campaign-contents .btn-section .btn-wrap-container {
    display: block;
    width: 100%;
    padding: 32px 16px;
  }

  #campaign-contents .btn-section .btn-wrap-container .btn-wrap {
    max-width: inherit;
    padding: 8px 0;
  }
}

/*
**************************************************
  fixed-menu
**************************************************
*/
#fixedBottomBtn {
  position: fixed;
  bottom: -56px;
  left: 0;
  width: 100%;
  background: rgb(255, 255, 255, 0.9);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, bottom 0.3s ease, visibility 0.3s ease;
  z-index: 10;
}

#fixedBottomBtn.show {
  bottom: 0px;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

#fixedBottomBtn .btn-wrap-container {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: var(--size8);
}

#fixedBottomBtn .btn-wrap-container .btn-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 326px;
  margin-top: 0 !important;
}

#fixedBottomBtn .btn-wrap-container .btn-nml.fixed-btn {
  width: 100%;
  font-size: 1.8rem;
  min-height: var(--size48);
  color: var(--white);
}

#fixedBottomBtn .btn-wrap-container .btn-wrap .btn-ttl {
  font-size: 1.6rem;
  font-weight: bold;
  text-align: center;
  margin-bottom: 5px;
}

@media screen and (max-width: 768px) {
  #fixedBottomBtn .btn-wrap-container {
    flex-wrap: nowrap;
    gap: 8px;
    padding: 8px 0;
  }

  #fixedBottomBtn .btn-wrap-container .btn-wrap {
    max-width: 375px;
  }

  #fixedBottomBtn .btn-wrap-container .btn-nml.fixed-btn {
    font-size: 1.6rem;
    min-height: var(--size24);
  }

  #fixedBottomBtn .btn-wrap-container .btn-wrap .btn-ttl {
    font-size: 1rem;
    margin-bottom: 5px;
  }
}

@media screen and (max-width: 353px) {
  #fixedBottomBtn .btn-wrap-container .btn-wrap .btn-ttl {
    font-size: 0.8rem;
  }
}

/* --------------------- 共通 -------------------- */
#campaign-contents .btn-nml {
  color: var(--white);
}

#campaign-contents .btn-nml:hover {
  color: #014E98;
  opacity: .7
}

/*
***********************************************************
キャンペーン終了エリア
***********************************************************
*/
/*
  テキストを縦並び＆中央寄せ
  module.css のレイアウトをベースに、余白を最適化
*/
.notice-area-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.notice-area.alert .notice-area-inner {
  padding-top: 10px;
  padding-bottom: 10px;
}

/*
***********************************************************
シンプルフッターマージン調整
***********************************************************
*/
.footer.footer-simple {
  margin-top: 0;
}

/*
***********************************************************
cta
***********************************************************
*/
.cta-following-wrap {
  z-index: 10;
}

/*
***********************************************************
PRINT
***********************************************************
*/
#campaign-contents img.pr-img {
  display: none !important;
}

@media print {
  #fixedBottomBtn {
    display: none;
  }
}

.offer-table .table-nml tbody th,
.offer-table .table-nml tbody td {
  background-color: transparent;
}

/* デザイン色（オレンジ/黄色）を改めて与える */
.offer-table .table-nml tbody th {
  background-color: #F29A00;
  /* オレンジ */
  color: #fff;
  font-weight: 800;
}

.offer-table .table-nml tbody td {
  background-color: #FFE589;
  /* 黄色 */
  color: #111;
  font-weight: 700;
}

/* 余白微調整（任意） */
.offer-table .table-nml tbody th,
.offer-table .table-nml tbody td {
  text-align: center;
  padding: 16px;
}

/* PCの列バランス最適化（横並びテーブル用） */
@media (min-width: 769px) {
  .offer-table {
    --offer-th-w: 160px;
  }

  /* ←必要に応じて 260〜300px で微調整 */

  .offer-table .col-th1,
  .offer-table .col-th2 {
    width: var(--offer-th-w);
  }

  /* thの文字は折り返さない（幅調整基準にするため） */
  .offer-table .table-nml tbody th {
    white-space: nowrap;
  }
}

/* ───────── SP：表を縦積みに（th → td の順で1ブロック） ───────── */
@media (max-width: 768px) {

  /* 対象：sp-only 側の表だけ（PC用は影響なし） */
  .offer-table.sp-only .table-nml {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
  }

  .offer-table.sp-only .table-nml tbody tr {
    display: block;
    /* 行ブロック化 → margin使える */
    margin: 10px 0 0;
    /* 行間 */
  }

  .offer-table.sp-only .table-nml tbody th,
  .offer-table.sp-only .table-nml tbody td {
    display: block;
    /* セルを縦に並べる */
    width: 100%;
    box-sizing: border-box;
  }

  /* 角丸と余白（見出し→内容でカードっぽく） */
  .offer-table.sp-only .table-nml tbody th {
    border-radius: 8px 8px 0 0;
  }

  .offer-table.sp-only .table-nml tbody td {
    border-radius: 0 0 8px 8px;
  }

  /* 文字の見え方（お好みで） */
  .offer-table.sp-only .table-nml tbody th {
    white-space: nowrap;
  }

  /* 見出しは折り返さない */
  .offer-table.sp-only .table-nml tbody td {
    white-space: normal;
    /* 内容は必要なら改行OK */
    /* 日本語の不自然な分割が気になる場合↓ */
    line-break: strict;
    word-break: normal;
  }
}

/* 既に入れているPC/SPの出し分けが無ければ保険で */
@media (max-width: 768px) {
  .pc-only {
    display: none !important;
  }
}

@media (min-width: 769px) {
  .sp-only {
    display: none !important;
  }
}

/* 表の白い枠線・仕切り線を消す（このキャンペーン枠だけ） */
.offer-table .table-nml {
  border: 0 !important;
  border-collapse: collapse !important;
  /* セル間の隙間をなくす */
  border-spacing: 0 !important;
  /* 念のため明示 */
  background: transparent;
  outline: none !important;
  box-shadow: none !important;
}

/* セルのボーダーもカット */
.offer-table .table-nml th,
.offer-table .table-nml td {
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
}

/* もし tr にボーダーが付いているテーマがある場合の保険 */
.offer-table .table-nml tr {
  border: 0 !important;
}

/*20250917追加、修正クラス*/
.topic-banner-list, .banner-list {
    max-width: 1070px !important;
    width: clamp(50vw, 80vw, 1070px) !important;
}
@media (max-width:768px) {
  .pt56{
    padding-top: 24px !important;
  }
  .mt56{
    margin-top: 24px !important;
  }
  .notice-area .notice-area-inner {
        padding: 0 16px 8px !important;
    }
}

/*CTAボタンスタイル追加　20250925*/
.sec_fix_btn {
  /* デスクトップではsticky、スマートフォンではfixedを使用 */
  position: sticky;
  bottom: 0;
  z-index: 100;
  width: 100%;
  background-color: #e3f9ff;
}

/* スマートフォンではfixed positionに変更 */
@media (max-width: 768px) {
  .sec_fix_btn {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
    width: 100% !important;
    background-color: #e3f9ff;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  }

  /* モーダル開閉時も表示を維持 */
  body.modal-open .sec_fix_btn {
    position: fixed !important;
    bottom: 0 !important;
    z-index: 1000 !important;
    display: block !important;
  }

  /* 固定ボタンの高さ分だけ下部にスペースを確保 */
  body {
    padding-bottom: 80px !important;
  }

  /* コンテンツエリアの調整 */
  .main-content .content-inner {
    padding-bottom: 20px;
    overflow: hidden;
  }
}
.sec_container {
    width: min(100% - 1.25rem, 1200px);
    margin-inline: auto;
    padding-bottom: 0;
}
.sec_fix_btn .inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

@media (min-width: 769px) {
  .sec_fix_btn .inner {
    padding-block: 1.0rem;
    gap: clamp(1.5rem, -0.278rem + 3.7vw, 4.0rem);
  }
}

@media (max-width: 768px) {
  .sec_fix_btn .inner {
    padding-block: 3.13%;
    gap: 2.5%;
  }
}

@media (min-width: 769px) {
  .sec_fix_btn .inner .btn_wrap p {
    margin-block-end: 0.25rem;
    font-size: clamp(0.75rem, 0.306rem + 0.93vw, 1rem);
    text-align: center;
  }
}

.sec_fix_btn .inner .btn_wrap .btn {
  border-radius: 8px;
  background-color: #db5d37;
  color: #fff;
  text-align: center;
  display: block;
  transition: all 0.3s 0s ease;
}

.sec_fix_btn .inner .btn_wrap .btn:hover {
  opacity: 0.7;
}

@media (min-width: 769px) {
  .sec_fix_btn .inner .btn_wrap .btn {
    padding: 1.8rem;
    line-height: 1;
    font-size: clamp(1rem, 0.111rem + 1.85vw, 1.5em) !important;
  }
}

@media (max-width: 768px) {
  .sec_fix_btn .inner .btn_wrap .btn {
    padding: 6%;
    line-height: 1.4;
    font-size: clamp(1.347rem, 0.482rem + 1.34vw, 1.125rem) !important;
  }
}

.sec_fix_btn .inner .btn_wrap .btn .btn_text {
  position: relative;
  display: inline-block;
}

@media (min-width: 769px) {
  .sec_fix_btn .inner .btn_wrap .btn .btn_text {
    padding-inline-end: 2.8rem;
    font-feature-settings: "palt";
  }
}

@media (max-width: 768px) {
  .sec_fix_btn .inner .btn_wrap .btn .btn_text {
    padding-inline-end: 2.0rem;
  }
}

.sec_fix_btn .inner .btn_wrap .btn .btn_text::before {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  background: #fff;
  z-index: 1;
}

@media (min-width: 769px) {
  .sec_fix_btn .inner .btn_wrap .btn .btn_text::before {
    width: 2.0rem;
    height: 2px;
  }
}

@media (max-width: 768px) {
  .sec_fix_btn .inner .btn_wrap .btn .btn_text::before {
    width: 1.6rem;
    height: 1px;
  }
}

.sec_fix_btn .inner .btn_wrap .btn .btn_text:after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  right: 0;
}

@media (min-width: 769px) {
  .sec_fix_btn .inner .btn_wrap .btn .btn_text:after {
    width: 1.3rem;
    height: 1.3rem;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
  }
}

@media (max-width: 768px) {
  .sec_fix_btn .inner .btn_wrap .btn .btn_text:after {
    width: 0.8rem;
    height: 0.8rem;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
  }
}

@media (min-width: 510px) {
  .sec_fix_btn .inner .btn_wrap .btn .sp_break {
    display: none;
  }
}

/*モーダル調整20250925*/
/* @media (max-width: 768px) {
  button.modal-close-btn {
    top: 45px !important;
    right: 30px !important;
    opacity: 0.8;
  }
} */