@charset "UTF-8";

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
}
body{
    width: 100%;
    min-width: auto!important;
    height: auto;
    overflow-x:hidden;
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
                "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
    line-height: 1.7;
    color: #333;
    background: #fff;
    font-weight: 400;
}
img {
  width: 100%;
  height: auto;
  display: block;
}

/* ヒーロー部分動画 */
.hero-box {
  width: 100%;
  background:linear-gradient(to bottom,  #54c3f1, #54c3f1, #eeee8c,#fff);
}
.hero {
  position: relative;
  overflow: hidden;
  background: none;
  aspect-ratio: 1 / 1; /* SP */
}
/* 動画の器 */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
/* 動画本体 */
.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* PC：16:9 ＋ 高さは90vh上限 */
@media (min-width: 768px) {
  .hero {
    aspect-ratio: 16 / 9;
    max-height: 90vh;
    height: auto;
    margin-inline: auto;
  }
}

/* コンテンツスペース */
#proContents {
    width: 100%!important;
    max-width: 100%!important;
    margin: 0 auto!important;
    padding:0!important;
}
#proContents img{
    max-width: 100%;
    height: auto;
}

.InnerContents {
    width: 100%;
    text-align: left !important;
    margin: 0 auto !important;

}

/* フェードインアニメ */
@keyframes fadeIn {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}

.bline {
	background-image: url(../img/line01.png);
	background-repeat: repeat-x;
    background-size: auto 32px;
    background-position: -8px 0%;
    width: 100%;
    height: 32px;
    margin-top: 16px;
    margin-bottom: 24px;
}
.con {
    width: 100%;
    max-width: 700px;
    margin: 24px auto 0px;
    padding-inline: 16px;
    text-align: center;
}
.datebox{
    width: 100%;
    height: auto;
    margin: 0 0 16px 0;
    padding: 0;
}
.mkr {
  display: flex;
}
.mkr p {
  flex: 0 0 25%;
  margin: 0;
}
.botton_orange{
  padding: 16px 0;  
  margin: 0;
  text-align: center;
}
.botton_orange img {
  filter: drop-shadow(0 4px 4px rgba(0,0,0,.5));
}

/*プレゼント*/
.cc2 {
  width: 100%;
  height: auto;
  background-color: #eeee8c;
  background-image:
    url(../img/presents_circle.png),
    url(../img/presents_back02.png),
    url(../img/presents_back.png);

  background-repeat:
    no-repeat,
    no-repeat,
    no-repeat;

  background-size:
    auto,
    100% auto,
    200% auto;

  background-position:
    center center,
    bottom center,
    center -1px;

  padding: 0;
  margin: 0 auto;
}
.present_box{
    width: 100%;
    margin: 0 auto;
    padding: 0 16px 40px;
    text-align: center;
    max-width: 700px;
}
.presents_cats {
    width: 100%;
    height: auto;
    margin: 16px auto 0;
}
.presents_img {
    width: 100%;
    height: auto;
}
.cc5 {
    width: 100%;
    margin: 0 auto 24px;
    padding: 0 16px;
    text-align: center;
    max-width: 700px;
}
.cc5 .cc5_img{
    margin:0 0 8px 0;
    filter: drop-shadow(0 4px 4px rgba(0,0,0,.5));
}
.cc5 p.cc5_txt {
    width: 100%;
    margin: 0 auto;
    display: block;
    text-align: right;
    font-size: 14px;
}


/* ボディタイプ・価格別 */
.cl2 {
  display: flex;
  column-gap: 16px;
  margin:16px 0 0 0;
  max-width: 700px;
}
.cl2 p {
  flex: 1 1 0;
  margin: 0;
  min-width: 0;
}
.cc5 .zenzaiko{
    margin : 8px 0;
    filter: drop-shadow(0 4px 4px rgba(0,0,0,.5));
}

/* お近くのフェア会場 */
.cc4 {
    width: 100%;
    margin: 0 auto 24px;
    padding: 0 16px;
    text-align: center;
    max-width: 700px;
}

/* 会場リンクバナー */
.up_h {
    width: 100%;
    height: 50px;
    padding: 16px 0;
    text-align: center;  
}
.up_h > img {
    max-width: 100%!important;
    height: 18px!important;
}
.upc_h {
    width: 100%;
    text-align: center;
    padding: 8px 16px 40px;
}
.upshopheader{
    width: 100%;
    height: auto;
    max-width: 115px;
    margin: 0 auto 16px;
}
.upc_h a {
    display: block;
    max-width: 700px;
    width: 100%;
    height: auto;
}
.otsu_h {
    background-color: #0D67A5;
}
.otsu_h_co {
    background-color:#E6F0F6;
}
.kosei_h {
    background-color: #ED6C00;
}

.kosei_h_co {
    background-color:#FDF0E5;
}
.rit_h {
    background-color: #9DC92A;
}
.rit_h_co {
    background-color:#F5F9E9;
}
.omi_h {
    background-color: #00AFE5;
}
.omi_h_co {
    background-color:#E5F7FC ;
}
.konan_h {
    background-color: #fecc17;
}
.konan_h_co {
    background-color:#fffae7;
}
.hikone_h {
    background-color: #EB6D9A;
}
.hikone_h_co {
    background-color:#FDF0F5;
}
.upshop + .upshop{
    padding-top: 8px;
}


/* 保証～総額 共通 */
.hosyou_back,
.melit_back,
.sougaku_back {
  position: relative;
  margin-bottom: 0 !important;
}

/* 疑似要素 共通 */
.hosyou_back::before,
.hosyou_back::after,
.melit_back::after,
.sougaku_back::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;

  pointer-events: none;
  z-index: 0; /* 背面 */
}

/* 中身は前面へ */
.hosyou_back > *,
.melit_back > *,
.sougaku_back > * {
  position: relative;
  z-index: 1;
}

/* 1. 安心のディーラー保証付き */
.hosyou_back {
  background-color: #f4ffda;
  background-image: url(../img/presents_back02.png);
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: bottom center;
  padding: 0 16px 40px;
}

/* 2. ディーラー中古車5つのメリット */
.melit_back {
  background: linear-gradient(to bottom, #004f8e, #0086d1, #004f8e,#004f8e);
  padding-bottom: 40px;
}

/* 3. 全車総額表示 */
.sougaku_back {
  background-color: #fff799;
  background-image: url(../img/presents_back02.png);
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: bottom center;
  padding: 0 16px 40px;
}

/* 曲線 */
/* ① 1の上：白波（前セクション側へ食い込ませる） */
.hosyou_back::before {
  top: 0;
  height: 40px;
  background-image: url("../img/back_white.svg");
  background-position: top center;
}
/* ② 1と2の間：白→青 */
.hosyou_back::after {
  bottom: 0;
  height: 40px;
  background-image: url("../img/back_white-blue.svg");
  background-position: bottom center;
}
/* ③ 2と3の間：青→黄 */
.melit_back::after {
  bottom: 0;
  height: 40px;
  background-image: url("../img/back_blue-yellow.svg");
  background-position: bottom center;
}
/* ④ 3の下：黄→白 */
.sougaku_back::after {
  bottom: 0;
  height: 40px;
  background-image: url("../img/back_yellow-white.svg");
  background-position: bottom center;
}

/* 画像余白 */
.cc9_im {
  margin-bottom: 16px;
}
.cc5-2 {
  margin-top: 24px;
}

/* メリット */
.cc9_1_im {
  padding: 32px 0 0;
  margin: 0 auto 16px;
}
.pc { display: none; }
.sm { display: block; }
.melit_img { padding: 0 24px; }
.sensei_check {
  width: 100%;
  height: auto;
  margin-bottom: 24px;
}


/* 参画ディーラーリンク */
.sankaku {
    width: 100%;
    margin:50px auto 16px;
}
.cl3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.cl3 p {
  margin: 0;
}
.cl3 +.cl3 {
    margin-top: 16px;
}
.cl4 {
    width: 100%;
    height: auto;
    margin: 16px auto 24px;
}
.cl4 img{
    filter: drop-shadow(0 4px 4px rgba(0,0,0,.5));
}


/* キャラクター紹介 */
.nyabi {
    border-top: 10px solid #f79d07;
    background-image: url(../img/back_star.png);
    background-repeat: repeat;
    text-align: center;
    background-color: #ffe7b3;
}
.chara {
    margin-top: 16px;
    max-width: 700px!important;
    margin-inline: auto;
}

/* フッター */
#footer {
    background: #00A7EB;
    color: #fff;
    padding: 24px 0 ;
}
.container{
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
}

/* フッターリンク */
#footer{
    padding: 0 0 76px 0;
}
#footer .container ul.footer_link {
  list-style: none;
  margin: 0 0 16px 0;
  padding:24px 0 8px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 14px;
}
.footer_link li + li::before {
  content: "｜";
  margin-right: 8px;
}
#footer .container ul.footer_link li a {
  color: #fff!important;
  text-decoration: underline!important;
}
#footer .container ul.footer_link li a:hover {
    color: #fff!important;
    text-decoration: none!important;
}
#footer .container p {
  margin: 0;
  padding: 0px;
  font-size: 12px;
}
#footer .container p a {
  color: #fff!important;
  text-decoration: underline!important;
}
#footer .container p a:hover {
    color: #fff!important;
    text-decoration: none!important;
}

/* 下部追従エリア */
.fixed-cta {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  z-index: 1000;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(236, 255, 192, 0.8),  /* #ecffc0 */
    rgba(244, 255, 218, 0.8)   /* #f4ffda */
  );
}
/* ボタン本体 */
.fixed-cta__btn {
  max-width: 1000px;
  width: 100%;
  height: 40px;
  margin: 0 auto;
  background-color: #ffa400;
  border-radius: 9999px;

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

  position: relative;
  padding: 0 56px;
  text-decoration: none;
  pointer-events: auto;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
/* 中央のボタン画像 */
.fixed-cta__btn > img {
  height: 30px!important;
  width: auto;
  display: block;
}
/* 右端の矢印（画像） */
.fixed-cta__arrow {
  position: absolute;
  right: 16px;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
}
.fixed-cta__arrow img {
  height: 20px!important;
  width: auto;
  display: block;
}


/* フェードイン */
.fadein {
    opacity: 0;
    transform: translate(0, 50px);
    transition: all 0.5s;
}

.fadein.scrollin {
    opacity: 1;
    transform: translate(0, 0);
}


/* デフォルトのスタイル（すべての画面サイズ） */
.sp_none{
    display: block!important;
}
.pc_none{
    display: none!important;
}


/* PC */
@media screen and (min-width: 768px) {
    .sp_none{
        display: none!important;
    }
    .pc_none{
        display: block!important;
    }
    .con {
        margin: 24px auto 32px;
    }
    /*プレゼント*/
    .cc2 {
    width: 100%;
    height: auto;
    background-color: #eeee8c;
    background-image:
        url(../img/presents_circle.png),
        url(../img/presents_back02.png),
        url(../img/presents_back.png);

    background-repeat:
        no-repeat,
        no-repeat,
        no-repeat;

    background-size:
        auto,
        100% auto,
        100% auto;

    background-position:
        center center,
        bottom center,
        center -1px;

    padding: 0;
    margin: 0 auto;
    }
    .cc5 {
        width: 100%;
        margin: 0 auto 48px;
        padding: 0 32px;
        text-align: center;
        max-width: 700px;
    }
    
    /* ボディタイプ・価格別 */
    .cl2 {
        max-width: 600px;
        margin-inline: auto;
    }
    /* お近くのフェア会場 */
    .cc4 {
        width: 100%;
        margin: 0 auto 48px;
        padding: 0 32px;
        text-align: center;
        max-width: 700px;
    }
    /* 会場リンクバナー */
    .up_h {
        width: 100%;
        height: 50px;
        padding: 10px 0;
        text-align: center;  
    }
    .up_h > img {
        max-width: 100%!important;
        height: 30px!important;
    }
    .upc_h {
        width: 100%;
        text-align: center;
        padding: 8px 16px 64px;
        margin-inline: auto;
    }
    .upshopheader{
        width: 100%;
        height: auto;
        max-width: 115px;
        margin: 0 auto 16px;
    }
    .upc_h a {
        display: block;
        max-width: 600px;
        width: 100%;
        height: auto;
        margin-inline: auto;
    }
    .upshop + .upshop{
        padding-top: 16px;
    }
    .cc5-2{
        margin-top: 32px;
    }
    .cc9_im{
        margin-bottom: 16px;
    }

    /* 波（疑似要素）だけ画面幅いっぱいにする */
    .hosyou_back::before,
    .hosyou_back::after,
    .melit_back::after,
    .sougaku_back::after {
        left: 50%;
        right: auto;
        width: 100vw;
        transform: translateX(-50%);
        background-size: 100% 100%;
    }

    /* 1. 安心のディーラー保証付き */
    .hosyou_back {
    background-color: #f4ffda;
    background-image: url(../img/presents_back02.png);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: bottom center;
    padding: 0 16px 80px;
    }

    /* 2. ディーラー中古車5つのメリット */
    .melit_back {
    background: linear-gradient(to bottom, #004f8e, #0086d1, #004f8e,#004f8e);
    padding-bottom: 80px;
    }

    /* 3. 全車総額表示 */
    .sougaku_back {
    background-color: #fff799;
    background-image: url(../img/presents_back02.png);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: bottom center;
    padding: 0 16px 80px;
    }

    /* 曲線 */
    /* ① 1の上：白波（前セクション側へ食い込ませる） */
    .hosyou_back::before {
    top: 0;
    height: 80px;
    background-image: url("../img/back_white.svg");
    background-position: top center;
    }
    /* ② 1と2の間：白→青 */
    .hosyou_back::after {
    bottom: 0;
    height: 80px;
    background-image: url("../img/back_white-blue.svg");
    background-position: bottom center;
    }
    /* ③ 2と3の間：青→黄 */
    .melit_back::after {
    bottom: 0;
    height: 80px;
    background-image: url("../img/back_blue-yellow.svg");
    background-position: bottom center;
    }
    /* ④ 3の下：黄→白 */
    .sougaku_back::after {
    bottom: 0;
    height: 80px;
    background-image: url("../img/back_yellow-white.svg");
    background-position: bottom center;
    }


    /* 5つのメリット */
    .melit_back {
        padding-bottom: 56px;
    }
    .melit_back > .cc5 {
        max-width: 1200px!important;
    }
    .cc9_1_im{
        padding: 56px 0 0;
        max-width: 700px;
    }
    .pc {
        display: block;
    }
    .sm{
        display: none;
    }
    .melit_img{
        padding: 0 24px;
    }
    .sensei_check{
        width: 30%;
        height: auto;
        margin-top: -24px;
        margin-bottom: 24px;
        margin-left: auto;
    }

    /* 全車総額表示 */


    /* 参画ディーラーリンク */
    .cl4 {
        width: 100%;
        height: auto;
        margin: 32px auto 48px;
    }

    /* キャラクター紹介 */
    .chara {
        margin-top: 16px;
        max-width: 700px!important;
        margin-inline: auto;
    }

    /* フッター */
    #footer {
        background: #00A7EB;
        color: #fff;
        padding: 24px 0 ;
    }
    /* フッターリンク */
    #footer{
        padding: 0 0 88px 0;
    }

    /* 下部追従エリア（全体60px） */
    .fixed-cta {
        height: 80px;
    }


    /* ボタン本体（高さ40px） */
    .fixed-cta__btn {
        height: 60px;
    }

    /* 中央のボタン画像 */
    .fixed-cta__btn > img {
        height: 50px!important;
    }

}