@charset "UTF-8";

#contents {
  background-color: #fff;
  color: #000;
  min-width: 1200px;
}
#contents *,
#contents *::after,
#contents *::before {
  box-sizing: border-box;
  font-family:"ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
}
#contents img {
  display: block;
  max-width: 100%;
  height: auto;
}
.effect {
  transform: translateY(60px);
  opacity: 0;
  transition: 1.2s;
}
.effect.play {
  transform: translateY(0);
  opacity: 1;
}
#safety .main h2.effect {
  transition: 1.2s 0.4s;
}

#kv {
  position: relative;
  margin: 0 auto;
  max-width:1920px;
  width:100%;
}
#kv .img {
  position: relative;
  text-align: center;
}
#kv .img video{ width:100%; height:auto; display:block; }
#kv h1 {
  position: absolute;
  top: 2%;
  left: 6%;
  max-width: 680px;
  width: 38%;
  z-index: 1;
}
#kv #ncount{ position: absolute;width:34%; bottom: -12%; left:2%; z-index: 1; display:flex; align-items:flex-end; color:#fff; gap:8px; transform:scale(.75); }
#kv #ncount .tit{ width:75%; position:absolute; left:-3%; bottom:63%; z-index:10; }
#kv #ncount .fuki{ width:33%; position:absolute; right:-5%; bottom:100%; z-index:10; animation: poyooon 2s linear infinite; }
@keyframes poyooon {
  0%,60%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
  5%  { transform: scale(1.1, 0.9) translate(0%, 5%); }
  20%  { transform: scale(1.2, 0.8) translate(0%, 15%); }
  25%  { transform: scale(1.0, 1.0) translate(0%, 0%); }
  30%  { transform: scale(0.9, 1.1) translate(0%, -35%); }
  37%  { transform: scale(0.9, 1.1) translate(0%, -15%); }
  43%  { transform: scale(1.2, 0.8) translate(0%, 15%); }
  50%  { transform: scale(1.0, 1.1) translate(0%, -10%); }
}

#ncount .odometer{  }
#contents .odometer-value{ font-family: 'Lato', sans-serif !important; transform:scaleX(.92); line-height:1.2; }
.odometer-formatting-mark{ position:absolute; color:#fff; z-index:10; bottom:.06em; left: 51.5%; font-size:60%; line-height:1.2; }
.odometer.odometer-auto-theme .odometer-digit{ margin-left: 0.06em !important; padding: 0 0.1em; line-height:1.2; vertical-align: top;
  background-image: linear-gradient(to bottom, #19b6a6 0%, #30bead 35%, #5fcdc0 55%, #1ab8a5 55%, #19b6a6 100%); text-shadow:4px 4px 0 rgba(0, 0, 0, .1);  }
.odometer.odometer-auto-theme .odometer-digit:nth-of-type(2){
  background-image: linear-gradient(to bottom, #14aaa7 0%, #2fb4b1 35%, #59c3c1 55%, #0f9ea9 55%, #14aaa7 100%);  }
.odometer.odometer-auto-theme .odometer-digit:nth-of-type(3){
  background-image: linear-gradient(to bottom, #10a2a9 0%, #25a9b1 35%, #57bcc3 55%, #11a4a8 55%, #10a2a9 100%);  }
.odometer.odometer-auto-theme .odometer-digit:nth-of-type(4){
  background-image: linear-gradient(to bottom, #0c93aa 0%, #259db3 35%, #53b1c3 55%, #0c91aa 55%, #0c93aa 100%);  }
.odometer.odometer-auto-theme .odometer-digit:nth-of-type(5){
  background-image: linear-gradient(to bottom, #0b88aa 0%, #2c96b6 35%, #54a9c4 55%, #0b85aa 55%, #0b88aa 100%);  }
.odometer.odometer-auto-theme .odometer-digit:nth-of-type(6){
  background-image: linear-gradient(to bottom, #0c7eaa 0%, #3597b9 35%, #54a2c4 55%, #0c7bab 55%, #0c7eaa 100%);  }
  .odometer.odometer-auto-theme .odometer-digit:nth-of-type(7){
  background-image: linear-gradient(to bottom, #0c7eaa 0%, #3597b9 35%, #54a2c4 55%, #0c7bab 55%, #0c7eaa 100%);  }

.odometer.odometer-auto-theme .odometer-digit .odometer-digit-spacer{  line-height:1.2; }
.odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner{  line-height:1.2; left: 0.1em; }

#odometer{ display:flex; width:auto !important; font-size:6vw; background-color:#fff; padding: .05em .05em .05em 0; border-radius:.1em;  }
#odometer .odometer-inside{ display:flex; align-items:center; }
.odometer.odometer-auto-theme .odometer-digit.text{ vertical-align:middle; padding: .04em .1em;  }
.odometer.odometer-auto-theme .odometer-digit.text.end{ background-image: linear-gradient(to bottom, #0d77ab 0%, #2384b3 35%, #55a0c4 55%, #0c78ab 55%, #0d77ab 100%);  }
.odometer.odometer-auto-theme .odometer-digit.text span{ font-size:35%; font-weight:bold; display:inline-block; vertical-align:middle; }

#kv #ncount #note{ position:absolute; right:0; bottom:-2em; color:#555; font-size:150%; }
#kv #ncount #help{ width:1.5em; height:1.5em; text-align:center; background-image: linear-gradient(to bottom, #42b6f3 0%, #1386c5 100%); color:#fff; font-weight:bold; font-size:1.3vw; border-radius:.2em; padding-top:.1em; cursor:pointer;  }
#kv #ncount #help-text{ position:absolute; right:0; top:128%; background-image: linear-gradient(45deg, #16baa1 0%, #0d83c2 100%); border-radius:.6em; padding:.4em; color:#333; font-size:15px; opacity:0; pointer-events:none; transition:.3s; z-index:10; }
#kv #ncount #help:hover + #help-text,
#kv #ncount #help.open + #help-text{ opacity:1; }

#kv #ncount #help-text > div{ background-color:#fff; border-radius:.5em; padding:1em; }
#kv #ncount #help-text h3{ font-size:120%; font-weight:bold; color:#11a8b2; margin-bottom:3px; }

@media screen and (min-width: 1921px) {
  #odometer{ font-size:106px; }
}
@media screen and (max-width: 1440px) {
  #kv #ncount #help-text{ font-size: 13px; }
}
@media screen and (max-width: 1200px) {
  #odometer{ font-size:545%; }
}

#count-msg{ background-image: linear-gradient(45deg, #d0f1ec 0%, #cfe6f3 100%); text-align:center; font-size:32px; padding:.3em 1.2em 1.5em; color:#0076b6; font-weight:bold; margin-bottom:1.5em; }
/* #count-msg p.note{ margin-bottom:2.2em; font-size:12px; color: #555; text-align:right; } */
.note-list {
  list-style: none;
  margin: 1em 1em 2.2em 0;
  font-size: 1.2rem;
  font-weight: 400;
  color: #555;
  line-height: 1.6;
}
.note-list li {
  position: relative;
  padding-left: 1.5em;
}
/* ※マークの装飾 */
.note-list li::before {
  content: "※";
  position: absolute;
  left: 0;
  top: 0;
}

#count-msg span{ font-size:150%; }

#count .tit{  padding: 7em 0 2em; }
#count .tit img{ text-align:center; margin:0 auto;  }
#count .num  { max-width:623px; margin:0 auto; }
#count .num img{ text-align:center; margin:0 auto; }
#count .num .note{ margin-top:1em; font-size:13px; }
#count .text {
  padding:1em 0 1em;
  font-size: 24px;
  line-height: 1.8;
  text-align: left;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row-reverse;
  gap: 1em;
}
#count .text p {
  margin: auto;
  font-weight: bold;
}
#count .text p + p {
  margin-top: .6em;
}
#count .text p.note{ font-size:60%; }
#count .text p sup{ font-size:50%; }

#experience { background-color:#f2f2f2; padding:5em 0; font-size:160%; line-height:1.8; }
#experience .inner{ max-width:1000px; width: 90%; margin:0 auto;  }
#experience .inner h2{ margin-bottom:1.5em; }
#experience .inner h2 + p{ text-align:center; }
#experience .inner p.note{ margin-top:.5em; text-align:center; }
#experience .step{ margin:2em auto 0; display:flex; flex-wrap:wrap; }
#experience .step li{ width: 48.5%; margin:0 auto 4%; padding-right: 45px; position:relative;  }
#experience .step li:last-child{  padding-bottom: 20px; }
#experience .step li > div{ position:relative; z-index: 1; padding: 1em 0 1em; background:#fff; box-shadow:0 0 20px rgba(0, 0, 0, .2); border-radius:10px; }
#experience .step li:not(:last-child):before{ content:""; background:url(/campaign/precrash/assets/img/step_arr.webp) no-repeat center center; background-size:contain; width:200px; height:70px; position:absolute; right: -70px; top:50%; transform:translateY(-50%) rotate(-90deg); }
#experience .step li h4{ max-width:600px;transform:translateX(-2.7%); }
#experience .step li .step_fl p{ text-align: center; line-height:1.5; margin-bottom:1em; font-size:80%; }
#experience .step li p.time{ position:absolute; right:0; bottom:0; background-color:#555; border-radius:10px 0 10px 0; color:#fff; font-weight:bold; padding:.3em 1em; font-size:95%; }
#experience .step li:nth-child(3),#experience .step li:nth-child(4){ transform:translateX(70px); }
#experience .cv_btn_area{ max-width:950px; margin:0 auto; }
#experience .cv_btn{ max-width:450px; }

/*.step-area{ position:relative; }
.step-area a.more{ display:none; }*/

#event .cv_btn_area{ max-width:900px; margin:0 auto; }
#event .cv_btn{ max-width:430px; }


@media screen and (max-width: 768px) {
 #experience { padding:10% 0; font-size:130%; margin-bottom:0; }
 #experience .inner{ width: 100%; margin:0 auto;  }
 #experience .inner h2 + p{ text-align:left; width:90%; margin:0 auto; }
 #experience .step{ width:90%; display:block; margin-bottom:2em; }
 #experience .step li{ padding: 0 0 8%; width:100%;  }
 #experience .step li:last-child{  padding-bottom: 0; }
 #experience .step li:nth-child(3),#experience .step li:nth-child(4){ transform:translateX(0); }
 #experience .step li > div{ border-radius:10px; }
 #experience .step li:not(:last-child):before{ width:40%; height:30%; right:auto; left:50%; top:auto; bottom:-10%; transform:translateX(-50%) rotate(0); }
 #experience .step li h4{ transform:translateX(-2.7%); }
 #experience .step li h4 + p{ padding-left:0; transform:translateY(0); text-align:center; }
 #experience .step li .step_fl p{ font-size:3vw; }

/* .step-area{ padding-bottom: 1em; margin-bottom: 2em; overflow:hidden; transition:.5s; }*/

 .step-area .more{ display:block; position:absolute; bottom:0; left:0%; width:100%; background: linear-gradient(rgba(242, 242, 242, 0) 0%, rgba(242, 242, 242, 1) 80%); text-align:center; padding:6em 0 1em; z-index:2; font-size:110%; }
  .step-area .more a{  display:block; background-color:#fff; text-decoration:none; color:#00205b; width:70%; margin:0 auto; padding: .5em; border-radius:.2em; position:relative; border:1px solid #00205b; position:relative;  }
  .step-area .more a:before{ content:""; position:absolute; right:.8em; width:.6em; height:.6em;  border:1px solid #00205b; border-width:1px 1px 0 0; transform:rotate(135deg); top:calc(50% - .5em); }
  .step-area.open .more a:before{ transform:rotate(-45deg); top:calc(50% - .2em); }
  .step-area.open{ height:auto; padding-bottom:0; }
  .step-area.open .more{ display:none; }

}



.cv_btn_area{ display:flex; justify-content: space-between; max-width:1100px; margin:0 auto 6em; }
.cv_btn{ margin:0 auto; max-width:500px; width:100%; }
.cv_btn h3{  margin:1.5em auto .8em; }
a.linkbtn{ background:#00205b; color:#fff; text-align:center; width:100%; max-width:500px; display:block; text-decoration:none; font-weight:bold; box-sizing:border-box; border-radius:100px; padding:.6em; font-size:28px; position:relative; position:relative; transition:.3s; }
a.linkbtn.newwin:before{ content:""; position:absolute; right:.7em; top:50%; transform:translateY(-50%); width:20px; height:16px; background:url(/campaign/precrash/assets/img/new_win.svg) no-repeat center center; background-size:contain; }
a.linkbtn.anker:before{ content:""; position:absolute; right:1em; top:calc(50% - .1em); transform:translateY(-50%) rotate(135deg); width:.5em; height:.5em; border:2px solid #fff; border-width:3px 3px 0 0; }
a.linkbtn:hover{ background:#0d83c2; }
a.linkbtn.col1{ background-color:#01A35A; }
a.linkbtn.col2{ background-color:#009FB9; }
a.linkbtn.col3{ background: linear-gradient(270deg, rgba(22, 186, 161, 1), rgba(13, 131, 194, 1)); }
a.linkbtn.col1:hover,a.linkbtn.col2:hover,a.linkbtn.col3:hover{ filter:brightness(1.15) saturate(140%); }

.camp_link{ background:repeating-linear-gradient( -45deg,#e1f5f9,#e1f5f9 5px,#f3fafb 0,#f3fafb 10px); padding:4em 0; }
.camp_link a.linkbtn{ max-width:800px; margin:0 auto; width:90%; }


#voice .inner{ max-width:1000px; width: 90%; margin:0 auto; padding-top:8em; }
#voice .inner h2{ margin-bottom:1em; }
#voice .inner .sub img{  margin:40px auto; }
#voice-tit{ font-size:160%; font-weight:bold; color:#555; text-align:center; letter-spacing:.05em; max-width:700px; margin: 0 auto; position: relative;}
#voice-tit:before{ content:""; position:absolute; width:100%; height:1px; top:50%; left:0; background-color:#555; }
#voice-tit span{ background-color:#fff; display:inline-block; padding:0 1em; position:relative; z-index:2; }
#voice-car{ display:flex; justify-content:center; flex-wrap: wrap; gap:2%; margin:2em auto; }
#voice-car li{ max-width:240px; position:relative; width:49%; position:relative; border:4px solid #fff; transition:.3s; cursor:pointer;  }
#voice-car li img{ transition:.3s; }
#voice-car li:hover img{ opacity:0.7; }
#voice-car li.act{ border-color:#26c7bf; }

.voice-video{
position: relative; display: block; max-width: 720px; margin: 3em auto 0;
}
.voice-video > div{ padding-top: 100%; }
.voice-video video{ width:100%; height:auto; }


.voice-list{ margin-bottom:8em; }
.voice-list.layback .crosstrek,
.voice-list.layback .impreza,
.voice-list.crosstrek .layback,
.voice-list.crosstrek .impreza,
.voice-list.impreza .layback,
.voice-list.impreza .crosstrek{ display:none; }
.slick-list { padding:10px 0 !important; }
.slick-track { display: flex;}
.slick-slide { height: auto !important;}
.slide-arrow {
  background: none;
  bottom: 2px;
  height: 0;
  margin: auto;
  position: absolute;
  width: 20px;
  height: 20px;
  transform: rotate(45deg);
  border: 2px solid #13859e;
}
.prev-arrow {
  border-width: 0 0 4px 4px;
  left: calc(50% - 7em);
}
.next-arrow {
  border-width: 4px 4px 0 0;
  right: calc(50% - 7em);
}
button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  padding: 0;
  cursor: pointer;
}
.slider-num{ margin:10px auto; display:block; font-weight: bold; text-align:center; font-size:130%; color:#555; }

.voice-list .voice-list-box{ margin: 0 20px; box-shadow:0 0 10px rgba(0, 0, 0, .1); padding:2em; box-sizing:border-box; }
.voice-list .voice-list-box-sp .voice-list-box:first-child{ margin-bottom:1.5em !important; }
.voice-list .vname{ background:url(/campaign/precrash/assets/img/user.webp) no-repeat left center; background-size:60px 60px; padding:10px 0 10px 75px;  }
#voice-list-sp .slick-list { padding:10px 10% !important; }
#voice-list-sp.voice-list .voice-list-box{ margin: 0 10px; padding:1.3em; }
#voice-list-sp.voice-list p.vcomment { font-size:130%; line-height:1.6; }


.voice-list .vname .name{ font-size:180%; font-weight:bold; margin-bottom:.3em; }
.voice-list .vname .tag{ font-size:110%; color:#555555; border:1px solid #555555; display:inline-block; padding:.1em .6em; }
.voice-list .vcar a{ transition:.3s; }
.voice-list .vcar a:hover{ opacity:.7; }
.voice-list p.vcomment{ font-size:140%; margin-top:1em; }

#event{ background:repeating-linear-gradient( -45deg,#e1f5f9,#e1f5f9 5px,#f3fafb 0,#f3fafb 10px); padding:6em 0 8em; }
#event .inner{ max-width:1000px; width: 90%; margin:0 auto; padding-bottom:1em; }
#event .inner h2{ margin:3em auto; }
#event .ev_flex{ display: flex;
  justify-content: space-between; margin: 5em 0;
  align-items: center; text-align:center; }
#event .ev_flex.end{ margin-top:0; }
#event .ev_flex .text{ font-size:20px; font-weight:600; line-height:1.7; }
#event .ev_flex .text p{ margin-top:1em; }
#event .ph{ margin-bottom:4em; }
#event .ph img{ overflow:hidden; border-radius:20px; margin:0 auto; }

.ev_item{ text-align:center;  }
.ev_item p{ font-size:20px; line-height:1.6; margin-bottom:2em; }
#event .ev_item .ph{ margin-bottom:2em; }
.ev_item .tit{ margin-bottom:2em; }
.ev_item .tit img{ margin:0 auto; }

.ev_item.end .ph{ position:relative; }
.ev_item.end .ph:before{ position: absolute; left: 50%; top: 50%; white-space: pre; content:"本キャンペーンは終了いたしました。\Aたくさんのご試乗ありがとうございました。"; background-color:rgba(230, 0, 0, .8);  display:block; width:90%; height:auto; padding: 2em 0; color:#fff; border-radius:.3em; font-size:22px; transform:translate(-50%,-50%); max-width:680px; }
.ev_item.end.txt2 .ph:before{ content:"本キャンペーンは終了いたしました。\Aたくさんのご試乗・ご査定ありがとうございました。";  }

#event .btn{ margin:0 auto; text-align:center; }
#event .btn a{ max-width:700px;  margin:0 auto; }

a.btn-img{ position:relative; display:block; }
a.btn-img img{ display:inline-block !important; }
a.btn-img img + img:not(.sp){ position:absolute; z-index:1; left:0; top:0; opacity:0; transition:.5s; }
a.btn-img img + img.sp{ display:none !important; }
a.btn-img:hover img + img{ opacity:1; }

.ev_flex  .text .end,.ev_flex.end{ position:relative; }
.ev_flex  .text .end:before,.ev_flex.end:before{ position: absolute; left: -2%; top: -.5em; white-space: pre; content:"本イベントは終了いたしました。\Aたくさんのご来場ありがとうございました。"; background-color:rgba(230, 0, 0, .8);  display:block; width:104%; height:auto; padding: 1.6em 0; color:#fff; border-radius:.3em; font-size:105%; }

.ev_flex.end:before{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); font-size:22px; max-width:680px; width:90% }






.m-place-list__wrap{ margin:3em auto; }
.m-place-list__wrap .m-place-list__item {
  background: #fff; box-shadow: 0 0 15px rgba(0, 0, 0, .1);
}

.m-place-list__wrap .m-place-list__item:first-child {

}

.m-place-list__wrap .m-place-list__item.end {
  position: relative;
}

.m-place-list__wrap .m-place-list__item.end .m-place-box::after {
  position: absolute;
  top: 50%;
  left: calc(50% + 80px);
  transform: translate(-50%, -50%);
  white-space: pre;
  content: "本イベントは終了いたしました。\Aたくさんのご来場ありがとうございました。";
  font-weight: bold;
  color: #ffffff;
  padding: 1.5em 0;
  border-radius:.3em;
  font-size:190%;
  line-height: 1.8;
  display:block;
  width:calc(100% - 300px);
  background-color:rgba(230, 0, 0, .8);
  height:auto;
  text-align: center;
}


.m-place-list__wrap .m-place-list__ac_parent p {
  display: block;
  text-align: center;
  font-size: 24px;
  color: #13859e;
  letter-spacing: 0.05em;
  line-height: 1.8;
  border-top: 1px solid #13859e;
  border-bottom: 1px solid #13859e;
  padding-top: 33px;
  padding-bottom: 35px;
  position: relative;
  cursor: pointer;
}

.m-place-list__wrap .m-place-list__ac_parent p::before {
  position: absolute;
  content: "";
  width: 24px;
  height: 2px;
  top: 50%;
  right: 25px;
  transform: translateY(-50%);
  background-color: #13859e;
}

.m-place-list__wrap .m-place-list__ac_parent p::after {
  position: absolute;
  content: "";
  width: 24px;
  height: 2px;
  top: 50%;
  right: 25px;
  transform: translateY(-50%) rotate(90deg);
  background-color: #13859e;
}

.m-place-list__wrap .m-place-list__ac_parent.open p::after {
  display: none;
}

.m-place-list__wrap .m-place-list__ac_child {
  display: none;
}

.m-place-list__wrap .m-place-list__item .m-place-list__img img {
  width: 100%;
  display: block;
}

.m-place-list__wrap .m-place-list__item .m-place-list__img img:nth-child(2) {
  margin-top: 10px;
}

.m-place-list__wrap .m-place-list__item.end > a { pointer-events: none; }
.m-place-list__wrap .m-place-list__item > a {
  position: relative;
  display: block;
  letter-spacing: 0.05em;
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
  padding: 35px 0 25px 25px;
  text-decoration: none;
  color: #13859e;
  transition: .3s;
}
.m-place-list__wrap .m-place-list__item .m-place-box{
  display: flex;
  position: relative;
}
.m-place-list__wrap .m-place-list__item:not(.coming-soon) a:hover {
  opacity: 0.7;
}

.m-place-list__wrap .m-place-list__item > a::before {
  content: "";
  position: absolute;
  top: 30px;
  right: 30px;
  width: 15px;
  height: 11px;
  background: url(/campaign/precrash/assets/img/icon_blank-gr.webp) no-repeat;
}

.m-place-list__wrap .m-place-list__item > a::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 30px;
  width: 15px;
  height: 30px;
  margin: auto;
  background: url(/campaign/precrash/assets/img/icon_arrow-right.webp) no-repeat;
  background-size: 100%;
}

.m-place-list__wrap .m-place-list__item a .m-place-list__txt {
  position: relative;
  top: -5px;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  padding-left: 50px;
  padding-right: 150px;
}

.m-place-list__wrap .m-place-list__item a .m-place-list__txt h4 {
  font-size: 26px;
  font-weight: bold;
  line-height: 1.384;
}

.m-place-list__wrap .m-place-list__item a .m-place-list__txt h5 {
  font-size: 14px;
  font-weight: bold;
  line-height: 1.571;
  margin-top: 4px;
}

.m-place-list__wrap .m-place-list__item a .m-place-list__txt p {
  font-size: 14px;
  line-height: 1.571;
}

.m-place-list__wrap .m-place-list__item a .m-place-list__txt p.date {
  font-size: 21px;
  line-height: 1.714;
}

.m-place-list__wrap .m-place-list__item a .m-place-list__txt p.date span {
    display: block;
}

.m-place-list__wrap .m-place-list__item a .m-place-list__txt p.date span.uniq {
  font-size: 14px;
}

.m-place-list__wrap .m-place-list__item.coming-soon a {
  cursor: unset;
}

.m-place-list__wrap .m-place-list__item.coming-soon a::before {
  display: none;
}
.m-place-list__wrap .m-place-list__item.coming-soon .label {
  text-align: center;
  padding-top: 20px;
}

.m-place-list__wrap .m-place-list__note {
  margin-top: 16px;
}
.m-place-list__wrap .m-place-list__note small {
  display: block;
  font-size: 14px;
  line-height: 1.571;
  color: #13859e;
}
.carlist{ display:flex; flex-wrap:wrap; border-top: 1px dashed; #aaa; gap:1%; padding:5px 0 30px; margin:-10px 30px 0 235px; }
.carlist li{ width:19.2%; }
.carlist li a{transition: .3s;}

.end_btn {
  display: block;
  text-align: center;
  font-size: 24px;
  color: #13859e;
  letter-spacing: 0.05em;
  line-height: 1.8;
  border-top: 1px solid #13859e;
  border-bottom: 1px solid #13859e;
  padding-top: 23px;
  padding-bottom: 25px;
  position: relative;
  cursor: pointer;
  margin: 3em auto 2em;
}

.end_btn::before {
  position: absolute;
  content: "";
  width: 24px;
  height: 2px;
  top: 50%;
  right: 25px;
  transform: translateY(-50%);
  background-color: #13859e;
}

.end_btn::after {
  position: absolute;
  content: "";
  width: 24px;
  height: 2px;
  top: 50%;
  right: 25px;
  transform: translateY(-50%) rotate(90deg);
  background-color: #13859e;
}

.end_btn.open::after {
  display: none;
}

.end_event{ display:none; }



#eyesight{ background-color:#efefef; text-align:center; padding:4em 0; }
#eyesight a{ margin: 0 auto; display:block; max-width:1000px; width:90%; }

#bnr_area{ text-align:center; padding:8em 0; }
#bnr_area > div{ text-align:center; }
#bnr_area a{ display:inline-block; }

.dealer a{ color:#005497; text-decoration:underline; font-size:20px; margin-bottom:4em; }
.dealer a p{ margin-top:1em; }

.alpha {
  transition: .3s;
}
.alpha:hover {
  opacity: 0.7;
}

.note {
  color: #666;
  font-size: 70%;
  font-weight: normal !important;
  line-height: 1.7;
}


#app-btn{ position:fixed; left:0; bottom:0; background: linear-gradient(90deg, #51f1ba, #4fbef2); width:100%; height:110px; z-index:5; display:flex; align-items:center; justify-content:center; gap:2em; min-width:1000px; box-shadow:0 0 10px rgba(0, 0, 0, .2); }
#app-btn h3{ width:50%; max-width:450px; }
#app-btn h3 img{ display:inline-block; margin:5px auto; }
#app-btn .app-b{ display:flex; align-items:center; justify-content:space-between; width:30%; max-width:400px;  }
#app-btn .app-b a{ color:#fff; font-weight:bold; font-size:16px; text-align:center; background: linear-gradient(90deg, #51f1ba, #4fbef2); padding:1em; width:100%; text-decoration:none; border-radius:1em 0 1em 0; transition:.3s; position:relative; text-shadow:1px 1px 2px rgba(0, 0, 0, .3); }
#app-btn .app-b a:first-child{ background:#0e87c0; }
#app-btn .app-b a b{ font-size:120%; }
#app-btn .app-b a:hover{ filter:brightness(1.2) saturate(120%); }
#app-btn .app-b a.newwin:before{ content:""; position:absolute; right:.4em; top:.4em; width:14px; height:10px; background:url(/campaign/precrash/assets/img/new_win.svg) no-repeat center center; background-size:contain; }

#app-btn.t-bnr{ display: block; background: none; height:auto; padding:0; transition:.5s; bottom: 2.5rem;
    right: 4rem;
    left: auto;
    width: 40%;
    max-width: 50rem;
    min-width: 37.5rem; }
#app-btn.t-bnr #app-close{ position: absolute;
  top: 0;
  right: 0;
  width: 2.5rem;
  z-index: 10;
  aspect-ratio: 1/1;
  background: #fff;
  border-radius: 50%;
  border: solid 1px #000;
  overflow: hidden;
  font-size: 0;
  transform: translate(50%, -50%); }
#app-btn.t-bnr #app-close::before, #app-btn.t-bnr #app-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50%;
  height: 2px;
  background: #000;
}
#app-btn.t-bnr #app-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
#app-btn.t-bnr #app-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
#app-btn.t-bnr a{ overflow:hidden; display: block; }
#app-btn.t-bnr a img{  }
#app-btn.t-bnr #app-close:hover,#app-btn.t-bnr a:hover{ cursor:pointer; filter:saturate(120%) brightness(1.2); }
#app-btn.t-bnr a{ transition:.3s; }



.trac_menu{ display:none !important; }

@media screen and (min-width: 1280px) {
  .voice-list .vname .name{ font-size:200%; }
  .voice-list .vname .tag{ font-size:120%; }
  .voice-list p.vcomment{ font-size:160%; }

}
@media screen and (min-width: 769px) {
  .sp {
    display: none !important;
  }
  #container{ padding-bottom:100px !important; }
  .note-list.pc {
    list-style: none;
    margin: 1em 1em 2em auto; /* autoで右寄せ */
    font-size: 0.75rem;
    color: #555;
    line-height: 1.6;
    width: fit-content;
  }

  .note-list.pc li {
    position: relative;
    padding-left: 1.5em;
    margin-top: .1em;
    text-align: left;
  }

  .note-list.pc li::before {
    content: "※";
    position: absolute;
    left: 0;
  }

}
@media screen and (max-width: 768px) {
  .pc {
    display: none !important;
  }
  #contents { min-width: 100%; }
  #app-btn{ display:block; min-width:300px; padding:15px 0; height:auto; z-index:10000; }
  #app-btn h3{ margin:0 auto; max-width:380px; width: 94%; margin-bottom:10px; }
  #app-btn .app-b{ width:80%; max-width:380px; margin: auto;  }
  #app-btn .app-b a{ padding: 1em .5em; }

  #app-btn.t-bnr { width:90%; left:5%; right:auto; bottom: 1.5rem; min-width:300px; }
  #app-btn.t-bnr #app-close { width:9em; height:9em; font-size:1vw; }
  #app-btn.t-bnr a img{ width:100%; }


  #kv h1 {
    top: 50%;
    left: 32%;
    width: 65%;
  }
  /* #kv .kvimg + p.note{ text-align:right; margin:1em 1em 0 0; font-size:90%; } */
  .note-list {
    padding-left: 1em;
    margin: 1em;
    font-size: 1rem;
  }
  .note-list.sp {
    text-align: left;
  }


  #kv .kvimg{ position:relative; }

  #kv #ncount {
  position: relative;
  width: 85%;
  transform: scale(1.0);
  margin: 25% 0 10% 8%;
  bottom: auto;
  left: auto;
  gap: 1%;
}
  #odometer {font-size: 13.7vw; padding: 0;}
  #kv #ncount #help { font-size:4.5vw; }
  #kv #ncount #note { color:#555; }

  #count-msg { font-size: 4.5vw; padding: 1.2em .5em; border-radius:.5em; margin: 3em 0 0; }

  #count{ width:90%; margin:0 auto; }
  #count .tit{  width:90%; margin:0 auto; }
  #count .num .note{ font-size:3vw; }
  #count .text {
    padding:1em 0 3em;
    font-size: 4vw;
    text-align: center;
    display: block;
  }
  #count .text p.note{ font-size:75%; }

  #count .tit{  padding: 5em 0 1em; }
  #count .text .img{ width:70%; margin:0 auto; }

  .camp_link{ padding:2.5em 0; margin:3em auto; }

  #voice .inner{ width: 100%; margin:0 auto; padding-top:0; }
  #voice .inner h2 {margin-bottom: 0;}
  .voice-video { margin:0; }
  #voice .sub{ width:70%; margin:0 auto; }
  #voice .inner .sub img { margin:20px auto; }
  .voice-list{ font-size:2.8vw; margin-bottom: 4em; }
  .voice-list .vname .tag{ font-size:100%; }
  .voice-list-box { height:19em; }


  #event{ padding:4em 0; text-align:center; }
  #event .inner { width:100%; }
  #event .ev_flex{ display: block; margin: 2em auto; width:90%; }
  #event .ev_flex img{ display:inline; }
  #event .ev_flex .img{ width:80%; margin:2em auto 4em; }
  #event .ev_flex .text{ font-size:3.6vw; }
  #event .inner > .ph{ width:90%; margin:0 auto 2em; }
  #event .ph img{ border-radius:10px; }
  #event .btn { width:90%; }

  .ev_item.end .ph:before{ padding: 2em 0;font-size:3.2vw; }
  .ev_flex.end:before{ padding: 2em 0; font-size:3.2vw; }

  .ev_item{ text-align:center; width:90%; margin:0 auto; }
  .ev_item p{ font-size:130%; text-align:left; }

  .m-place-list__wrap .m-place-list__item > a { padding: calc(30 / 640 * 100vw) 0 calc(25 / 640 * 100vw) calc(25 / 640 * 100vw); }
  .m-place-list__wrap .m-place-list__item a .m-place-list__img {
  width: calc(100 / 640 * 100vw);
}
.m-place-list__wrap .m-place-list__item a .m-place-list__img img {
  display: block;
  width: 100%;
  margin-bottom: calc(10 / 640 * 100vw);
}
  .m-place-list__wrap .m-place-list__item a .m-place-list__txt {
  position: relative;
  top: -5px;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  padding-left: calc(38 / 640 * 100vw);
  padding-right: calc(50 / 640 * 100vw);
  text-align: left;
}

.m-place-list__wrap .m-place-list__item a::before {
  content: "";
  position: absolute;
  top: calc(19 / 640 * 100vw);
  right: calc(18 / 640 * 100vw);
  width: calc(21 / 640 * 100vw);
  height: calc(15 / 640 * 100vw);
  background: url(/campaign/precrash/assets/img/icon_blank-gr.webp) no-repeat;
    background-size: auto;
  background-size: 100%;
}
.m-place-list__wrap .m-place-list__item a .m-place-list__txt h4 {
  font-size: calc(28 / 640 * 100vw);
  font-weight: bold;
  letter-spacing: 0.025em;
  line-height: 1.322;
  margin-bottom: calc(5 / 640 * 100vw);
  padding-top: calc(10 / 640 * 100vw);
}
.m-place-list__wrap .m-place-list__item a .m-place-list__txt p.date {
  font-size: calc(24 / 640 * 100vw);
  letter-spacing: 0.02em;
  line-height: 1.384;
  margin-bottom: calc(5 / 640 * 100vw);
}
.m-place-list__wrap .m-place-list__item a::after {
  right: 2%;
  width: 4%;
  height: 10%;
}
.m-place-list__wrap .m-place-list__item.end .m-place-box::after {
  left: 48%;
  padding: 1.5em 0;
  font-size:110%;
  line-height: 1.8;
  width:94%;
}

.carlist{ width:70%; padding: calc(25 / 640 * 50vw) 0; margin:0 0 calc(25 / 640 * 100vw) 26%; }
.carlist li {
  width: 47%;
  margin: 0 1% 3%;
}



  .end_btn { width:90%; margin: 2em auto 1em; padding:.8em 0; font-size:5vw; }
  .dealer a { font-size: 4vw; margin-bottom: 3em;}

  .m-place-list__wrap{ width:90%; margin:2em auto; }

  a.btn-img img.pc{ display:none !important; }
  a.btn-img img + img.sp{ display:inline-block !important; }

  #bnr_area{ padding:4em 0; text-align:center; }
  #bnr_area a{ max-width:90%; }

  .note { font-size: 80%; }

  .cv_btn_area{ display:block; margin:2.5em auto 0; }
  .cv_btn{ width:90%; margin:.5em auto 2em; }
  .cv_btn h3{ width:90%; margin:1em auto; }
  a.linkbtn{ padding:.7em; font-size:5vw;  }


}

@media screen and (max-width: 500px) {
  #app-btn .app-b a{ font-size:3.5vw; }
}