@charset "Shift_JIS";

@import url('https://fonts.googleapis.com/css2?family=Public+Sans:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Allerta+Stencil&display=swap');

/************************************************************
 * UTF-8
 ************************************************************/
* {
  margin: 0;
  padding: 0;
}

html { font-size: 62.5%; scroll-behavior: smooth; }

div#proContents ul,
div#proContents li {
  list-style: none;
  list-style-position: outside;
}

div#proContents a:hover {
  opacity: 0.9;
}

div#proContents a {
  outline: none;
}

div#proContents a:focus {
  outline: none;
}

div#proContents .clearfix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

div#proContents .clearfix {
  min-height: 1px;
}

* html .clearfix {
  height: 1px;
  /*\*/
  /*/
  height: auto;
  overflow: hidden;
  /**/
}

#proContents {
  font-family: -apple-system, Segoe UI, Helvetica Neue,
    Hiragino Kaku Gothic ProN, "メイリオ", meiryo, sans-serif;
  line-height: 1.4;
  color: #222;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  margin: 0 auto;
}

div#proContents a:hover {
  color: #ff6600;
}
div#proContents a:active {
  color: #ff6600;
}

/*-----------------------------
    header
------------------------------*/


/*-----------------------------
    main
------------------------------*/
#main .pc_img {
  display: block;
}
#main .sp_img {
  display: none;
}

#main {
  width: 980px;
  margin: 0 auto;
  font-size: 1.4rem;
  line-height: 1.7;
}

#main img {
  display: block;
  max-width: 100%;
  margin: 0 auto;
}

#main .mvContent .line_link {
  width: 555px;
  height: 481px;
  margin: 0;
  padding: 0;
  position: absolute;
  z-index: 10000;
  top: 780px;
  left: 0;
  text-indent: 150%;
  white-space: nowrap;
  overflow: hidden;
}


.main-bg { background: url("../images/main-bg.webp") ; background-size: cover; }
.top-bottom-bg { background: #ffe6e6; }

.title-wrap-gnav { margin: 0; }
.title-wrap-gnav .nav-btn { margin: 0% 27%; z-index: 10; padding-bottom: 2%; }
.title-wrap-gnav .nav-btn .layout-wrap { display: flex; justify-content: space-between; flex-wrap: wrap; }
.title-wrap-gnav .nav-btn .layout-wrap .item { width: 100%; padding: 1% 0; margin-bottom: 16%; filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.4)); }
.title-wrap-gnav .nav-btn .layout-wrap .item:nth-child(1) { margin-bottom: 25%; filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.4));}
.title-wrap-gnav .nav-btn .layout-wrap .item:nth-child(2) { margin-bottom: 31%; }

.c-txt { font-size: clamp(12px, 1.4vw, 14px); line-height: 1.4; padding: 2% 3% 5% 3%; }

.v-bg { background: #FFF; padding-bottom: 5%; }

@media screen and (max-width: 979px) {
	.title-wrap-gnav .nav-btn { margin: 0% 5%; z-index: 10; padding-bottom: 0%; }
}

.omoide-wrap { position: relative; }
.omoide-wrap .omoide-link-btn { position: absolute; bottom: 5%; margin: 0 10%; animation: scale-ani 1.5s linear infinite; }

.title-wrap { margin: 0; margin-top: 1%; padding-bottom: 0%; }
.title-wrap .nav-btn { margin: 0% 6%; margin-top: 2%; z-index: 10; padding-bottom: 4%; }
.title-wrap .nav-btn .layout-wrap { display: flex; justify-content: space-between; flex-wrap: wrap; }
.title-wrap .nav-btn .layout-wrap .item-def { width: 100%; padding: 1% 0; margin-bottom: 16%; filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.4)); }
.title-wrap .nav-btn .layout-wrap .item-def:nth-child(1) { margin-bottom: 25%; filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.4)); }
.title-wrap .nav-btn .layout-wrap .item-def:nth-child(2) { margin-bottom: 31%; filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, 0.0)); }

.title-wrap .nav-btn .layout-wrap .item-def.s-nav { margin-bottom: 20%; }

.camp-banner { margin: 3% 5% 4% 5%; margin-top: -1%; }

.camp-title { box-shadow: 0px 20px 10px -10px rgba(0, 0, 0, 0.2); position: relative; z-index: 2; }


.line-c-wrap { position: relative; }
.line-c-wrap .l-r-btn { position: absolute; top: 23.6%; margin: 0px 6% 0 70%; z-index: 1; animation: scale-ani 2s linear infinite; }
.line-c-wrap .l-e-btn { position: absolute; top: 23.6%; margin: 0px 32.5% 0 6%; z-index: 1; animation: flash2 1.5s linear infinite; }




.new-freed-wrap { position: relative; }
.new-freed-wrap .btn { position: absolute; bottom: 1.5%; margin: 0% 7%; left: 0; right: 0; z-index: 1000; animation: scale-ani 2s linear infinite; }

.new-freed-youtube { position: relative; }
.new-freed-youtube .btn1 { position: absolute; top: 52%; margin: 0% 12%; left: 0; right: 0; z-index: 1000; animation: scale-ani 2s linear infinite; }
.new-freed-youtube .btn2 { position: absolute; bottom: 5.9%; margin: 0% 12%; left: 0; right: 0; z-index: 1000; animation: scale-ani 2s linear infinite; }

.voice-wrap { margin-bottom: 4%; }
.voice-wrap .btn { margin: 0% 6%; left: 0; right: 0; z-index: 1000; animation: scale-ani 2s linear infinite; filter: drop-shadow(1px 4px 4px rgba(0, 0, 0, 0.3)); }

.title-wrap2 { margin: 0% 0 7.7% 0; }
.title-wrap2 .nav-used { margin: -83% 5% 0 5%; z-index: 10; }
.title-wrap2 .nav-used .layout-wrap { display: flex; justify-content: space-between; flex-wrap: wrap; }
.title-wrap2 .nav-used .layout-wrap .item { width: 49.5%; padding: 0.1% 0%; margin-bottom: 13.5%; filter: drop-shadow(1px 4px 4px rgba(0, 0, 0, 0.3)); }



.customer-wrap { position: relative; }
.customer-wrap .btn { position: absolute; bottom: 10%; margin: 0 5%; left: 0; right: 0; z-index: 1000; animation: scale-ani 2s linear infinite; }
.customer-wrap .btn img { filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.4)); }

.usedcar-btn-wrap { position: relative; }
.usedcar-btn-wrap .btn { position: absolute; bottom: 9.5%; margin: 0% 12%; left: 0; right: 0; z-index: 1000; animation: scale-ani 2s linear infinite; }


.btn-ac { position: relative; }
.btn-ac .svBtn { position: absolute; top: 0%; margin: auto; z-index: 1000; overflow: hidden; }
.btn-ac .svBtn::before {  position: absolute; content: ''; display: inline-block; top: -180px; left: 0; width: 30px; height: 100%; background-color: #fff; animation: kiran 3.5s ease-in-out infinite; }


.p-btn-ac { position: relative; padding-bottom: 19%; }
.p-btn-ac .svBtn2 { position: absolute; top: 0%; margin: auto; z-index: 4; overflow: hidden; border-radius: 5px; }
.p-btn-ac .svBtn2::before { position: absolute; content: ''; display: inline-block; top: -180px; left: 0; width: 100px; height: 100%; background-color: #fff; animation: kiran 1.5s ease-in-out infinite;}

@media screen and (max-width: 979px) {
	.p-btn-ac .svBtn2::before { position: absolute; content: ''; display: inline-block; top: -180px; left: 0; width: 50px; height: 100%; background-color: #fff; animation: kiran 2s ease-in-out infinite;}
}

.youtube-wrap { position: relative; margin-bottom: 5%; }

.ymov1 { position: absolute; top: 13%; margin: 0 5%; width: 90%; }
.ymov2 { position: absolute; bottom: 10.5%;  margin: 0 5%; width: 90%; }
.youtube { width: 100%; aspect-ratio: 16 / 9; }
.youtube iframe { width: 100%; height: 100%; }


@media screen and (max-width: 979px) {
	.main-nav .nav-btn .layout-wrap .item { box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5); border-radius: 10px; }
	.btn-ac .svBtn { border-radius: 3px; }
}

.car-detail-btn { margin: 5% 14%; }




#nav-event, #nav-line, #nav-nycar, #nav-1_9, #nav-other, #nav-lineup, #nav-ev, #nav-used, #mente { scroll-margin-top: 100px; }

@media screen and (max-width: 979px) {
	#nav-event, #nav-line, #nav-nycar, #nav-1_9, #nav-other, #nav-lineup, #nav-ev, #nav-used, #mente { scroll-margin-top: 60px; }
}

.carLineup .carlineupItem { position: relative; }
.carLineup .wr-v-price, .carLineup .vezel-price, .carLineup .zr-v-price, .carLineup .n-box-joy-price, .carLineup .n-box-price, .carLineup .n-wgn-price, .carLineup .n-one-price, .carLineup .stepwgn-price, .carLineup .freed-price, .carLineup .odyssey-price, .carLineup .fit-price, .carLineup .civic-price, .carLineup .accord-price, .carLineup .n-van-e-price { margin: 1% 8%; }

.carLineup .is-backgroundSC .price-positon {margin: -138% 2% 119.5% 2%; }
.carLineup .is-backgroundN19 .price-positon {margin: -333% 7% 316.5% 7%; }
.carLineup .is-backgroundN19 .car-detail-btn { margin: -15% 14% 6% 14%; }

.carLineup .is-background19 .price-positon { margin: -124% 7% 80% 7%; }
.carLineup .is-background19 .car-detail-btn { margin: 3% 14% 13% 14%; }

.carLineup .is-backgroundLINEUP .price-positon { margin: -75% 7% 28% 7%; }
.carLineup .is-backgroundLINEUP .car-detail-btn { margin: 1.5% 14% 11% 14%; }

.carLineup .is-backgroundOther .car-detail-btn { margin: -28% 14% 11% 14%; }

.is-backgroundEV { padding-bottom: 5%; }
.carLineup .is-backgroundEV .car-detail-btn { margin: -27% 14% 10% 14%; }

.is-backgroundCP { padding-bottom: 10%;}
.carLineup .is-backgroundCP .price-positon { margin: -37% 8% 0% 8%; }
.carLineup .is-backgroundCP .car-detail-btn { margin: 3% 14% 0% 14%; }




.carLineup .is-backgroundGV .price-positon { margin: -45% 8% 0% 8%; }
.carLineup .is-backgroundGV .car-detail-btn { margin: 3% 14% 11.5% 14%; }


.carLineup .is-backgroundNS .price-positon {margin: -46% 8% 0% 8%; }
.carLineup .is-backgroundNS .car-detail-btn { margin: 3% 14% 13% 14%; }
.carLineup .is-backgroundNS .price-positon2 { margin: -126% 8% 0% 8%; }
.carLineup .is-backgroundNS .car-detail-btn2 { margin: 2% 14% 0% 14%; }
.carLineup .is-backgroundNS .price-positon3 { margin: 55% 8% 0% 8%; }
.carLineup .is-backgroundNS .car-detail-btn3 { margin: 2% 14% 0% 14%; }





.banner-m6 { margin: 0 6%;}


.banner-m { margin: 0% 6.1% 10% 6.1%; }
.banner-m2 { margin: 0% 6.1% 5% 6.1%; }



.fade {
	opacity: 0;
	transform: translateY(100px);
	transition: opacity 1.5s, transform 3s;
}.fade.active {
	opacity: 1;
	transform: translateY(0px);
}

.fade2 {
	opacity: 0;
	transform: translateY(50px);
	transition: opacity 1.5s, transform 2s;
}.fade2.active2 {
	opacity: 1;
	transform: translateY(0px);
}

.scroll-up {
  opacity: 0; 
  visibility: hidden;
  transform: translateY(50px);
  transition: all 1s;
}
.scroll-up.is-show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
}

.scroll-up {
  opacity: 0; 
  visibility: hidden;
  transform: translateY(50px);
  transition: all 1s;
}
.fade2 {
  opacity: 0; 
  visibility: hidden;
  transform: translateY(100px);
  transition: all 2s;
}




/*厳選中古車*/
.gensen-top-wrap { margin-top: 0%; }
.gensen-top-wrap .head { position: relative; }
.gensen-top-wrap .head .btn { position: absolute; bottom: 2.3%; margin: 0 10%; left: 0; right: 0; z-index: 5; animation: scale-ani 1.5s linear infinite; }






.mt2 { margin-top: 2%; }
.mt5 { margin-top: 5%; }
.mb2 { margin-bottom: 2%; }
.mb5 { margin-bottom: 5%; }
.mb6 { margin-bottom: 6%; }
.mb10 { margin-bottom: 10%; }
.pt2 { padding-top: 2%; }
.pt5 { padding-top: 5%; }
.pb5 { padding-bottom: 5%; }
.pb10 { padding-bottom: 10%; }
.pb8 { padding-bottom: 8%; }
.pb2 { padding-bottom: 2%; }

.line_c_wrap { position: relative; }
.line_c_wrap .line_btn { position: absolute; left: 1%; top: 29.7%; margin-right: 66%; }



.mvContent .presentCotant .big-chance-bg { margin-top: -18.8%; }
.mvContent .presentCotant .presentItem01 { position: absolute; top: 18%; z-index: 10; }
.mvContent .presentCotant .presentItemBtn { position: absolute; bottom: 5%; left: 0; right: 0; margin: 0 10%; z-index: 20; }
.mvContent .presentCotant .presentItem02 { position: absolute; top: 46.5%; z-index: 30; }

.mvContent .presentCotant .tokutenItem01 { position: absolute; top: 6.5%; z-index: 10; }
.mvContent .presentCotant .tokutenItem02 { position: absolute; top: 27.8%; z-index: 10; }
.mvContent .presentCotant .tokutenItem03 { position: absolute; top: 58%; z-index: 10; }




.mvContent .presentCotant .ankeBtn {
  position: absolute;
  top: 95.75%;
  left: 11.6%;
  z-index: 1000;
}

.carOther { background: #6dcff2; }

.recomend { position: relative; margin-bottom: -27%; }

.recomend a { position: absolute; width: 33%; height: 30px; bottom: 7.2%; left: 36%; }



.contact-center { position: relative; }
.contact-center .tel-btn { position: absolute; bottom: 16%; margin: 0 44% 0 9%; }

@media screen and (max-width: 979px) {
	.contact-center .tel-btn { position: absolute; bottom: 10.5%; margin: 0 43% 0 4%; }
}



@keyframes kiran {
  0% { transform: scale(0) rotate(45deg); opacity: 0; }
  80% { transform: scale(0) rotate(45deg); opacity: 0.5; }
  81% { transform: scale(4) rotate(45deg); opacity: 1; }
  100% { transform: scale(50) rotate(45deg); opacity: 0; }
}


.hondaMente { position: relative; }
.hondaMente .svBtn { position: absolute; top: 54%; left: 6%; right: 6%; margin: auto; z-index: 5; overflow: hidden; border-radius: 20px; }
.hondaMente .svBtn::before { position: absolute; content: ''; display: inline-block; top: -180px; left: 0; width: 30px; height: 100%; background-color: #fff; animation: kiran 3s ease-in-out infinite;}
.hondaMente .svBtn2 { position: absolute; bottom: 4%; left: 6%; right: 6%; margin: auto; z-index: 5; overflow: hidden; border-radius: 20px; }
.hondaMente .svBtn2::before { position: absolute; content: ''; display: inline-block; top: -180px; left: 0; width: 30px; height: 100%; background-color: #fff; animation: kiran 3s ease-in-out infinite;}
.hondaMente .svBtn3 { position: absolute; bottom: 3%; left: 14.3%; right: 14.3%; z-index: 5; overflow: hidden; animation-delay: 0.5s; }
.hondaMente .svBtn3::before { position: absolute; content: ''; display: inline-block; top: -180px; left: 0; width: 30px; height: 100%; background-color: #fff; animation: kiran 4s ease-in-out infinite;}

.totalCare { position: relative; }
.totalCare .totalcareBtn { position: absolute; bottom: 3.5%; margin-left: 20%; margin-right: 20%; }

.myHonda { position: relative; }
.myHonda .myHondaBtn { position: absolute; bottom: 5.5%; margin-left: 18%; margin-right: 18%; }

@media screen and (max-width: 979px) {
	.totalCare .totalcareBtn { position: absolute; bottom: 3%; margin-left: 15%; margin-right: 15%; }
	.myHonda .myHondaBtn { position: absolute; bottom: 5%; margin-left: 9%; margin-right: 9%; }
}


.displayFlex { display: flex; flex-wrap: wrap; }
.displayFlex .carBox { width: 490px; }


.allinone { position: relative; margin-top: 4%; }
.allinone-btn { position: absolute; bottom: 2%; left: 6%; width: 88%; }

.newStep { background: #000; padding-bottom: 1px; }

/*-----------------------------
  common place
  ------------------------------*/

.text {
  color: #595757;
  font-size: 16px;
  line-height: 1.5;
  margin: 20px auto;
}

.text span {
  color: #e50012;
  display: inline-block;
  margin-right: 0.2em;
}










.HondaFinance { /*background: #f5f2ee;*/ }

.HondaFinance p {
  margin: 40px 0;
}

.miniCaption {
  border: #333 1px solid;
  padding: 9px 30px;
  text-align: center;
  font-size: 20px;
  margin-bottom: 8%;
  margin-top: 5%;
  letter-spacing: 0.1em;
}

.phtCaption {
  max-width: 960px;
  margin: 0 auto;
  margin-bottom: 40px;
}

.phtCaption p {
  margin: 10px 0 5px;
  line-height: 1.4;
  letter-spacing: 0.01em;
  font-size: 1.4rem;
}

.phtCaption span:not([class]) {
  font-weight: bold;
  /*color: #ea1c24;*/
  font-size: 15px;
}

.phtCaption span.bold {
  font-weight: bold;
}

div.sensingCaption a:visited {
  color: #0099ff;
}

div.sensingCaption a:link {
  color: #0099ff;
}

span.bold {
  font-weight: bold;
}

.btn {
  margin: 0 auto;
  margin-bottom: 50px;
}

.btn a img {
  display: block;
}

.page-top { position: fixed; bottom: 10px; right: 10px; background: #999; color: #FFF; border-radius: 2px; padding: 10px 15px; z-index: 100000; text-decoration: none; }
.page-top i { font-size: 3rem; display: block; text-align: center; }
.page-top p { font-size: 8px; font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif"; text-align: center; }

@media screen and (max-width: 979px) {
	.page-top { position: fixed; bottom: 75px; right: 5px; padding: 5px 10px; z-index: 8; }
	.page-top.uc-top { position: fixed; bottom: 5px; right: 5px; padding: 5px 10px; }
	.page-top i { font-size: 2.6rem; display: block; }
}
/*-----------------------------
    footer
------------------------------*/
#follow .pc_img {
  display: block;
}
#follow .sp_img {
  display: none;
}

#footer {
  border-top: 2px solid #e60020;
  padding: 30px 0 100px 0;
	z-index: 5;
	position: relative;
}

#footer .inner {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
}

#footer .inner .logo {
  text-align: center;
}

#footer .inner .logo img {
  display: block;
  margin: 0 auto;
}

#footer .inner a {
  width: 60px;
  height: 60px;
  position: absolute;
  right: 60px;
  top: -5px;
}

/*-----------------------------
    fixed btn
------------------------------*/
.fixed-btn { width: 100%; position: fixed; bottom: 0px; padding: 5px 0; background: #fff; z-index: 9; }

.fixed-btn h3 {
  width: 960px;
  margin: 0 auto;
  text-align: center;
  margin-bottom: 20px;
}

.fixed-btn .inner {
  max-width: 600px;
  margin: 0 auto;
  list-style: none;
}
.fixed-btn .spWrap { display: flex; align-items: center; justify-content: center;
}
.fixed-btn ul {
  display: flex;
  justify-content: center;
  align-items: center;
}

.fixed-btn ul li { padding: 5px 1%; width: 31.3%; }
/*.fixed-btn ul li:first-child { width: 30.1%; }*/
/*.fixed-btn ul li:first-child img {animation: flash-btn2 2s linear infinite; }*/

.fixed-btn .inner img {
  transition: 0.2s;
  filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.6));
  margin: 0px;
width: 100%;
}

.fixed-btn .inner img:hover {
  transform: scale(1.05);
}

.fixed-btn .inner a {
  display: block;
}


/*------------------------------
アコーディオン
-------------------------------*/

.acd-check{ display: none; }
.acd-label{ background: none; display: block; position: relative; z-index: 5; margin: 0 8%; }
.acd-content{ height: 0; opacity: 0; padding: 0; transition: .5s; visibility: hidden; margin-top: 0%; }
.acd-check:checked + .acd-label + .acd-content{ height: 100%; opacity: 1; visibility: visible; }
/*.acd-btn, .acd-btn2 { width: 92%; }*/
.acd-btn-civic1 img, .acd-btn-civic2 img, .acd-btn-wrv1 img, .acd-btn-wrv2 img, .acd-btn-vezel1 img, .acd-btn-vezel2 img, .acd-btn-zrv1 img, .acd-btn-zrv2 img, .acd-btn-nwgn1 img, .acd-btn-nwgn2 img, .acd-btn-none1 img, .acd-btn-none2 img, .acd-btn-nvan1 img, .acd-btn-nvan2 img, .acd-btn-fit1 img, .acd-btn-fit2 img { cursor: pointer; animation: flash2 2s linear infinite; }

.disp-none { display: none; }

@keyframes flash2 {
	0%,100% { opacity: 1; }
	20% { opacity: 0.2; }
}

/*-----------------------------
    レスポンシブ対応
------------------------------*/

/*-----------------------------
    header
------------------------------*/

@media screen and (max-width: 979px) {

  /*-----------------------------
    main
------------------------------*/
  #main {
    width: 100%;
    margin: 0 auto;
  }

  #main img {
    width: 100%;
    height: auto;
  }

  .mvContent {
    position: relative;
  }
  .mvContent .lineLinkWrap {
    position: relative;
  }

  #main .mvContent .line_link {
    height: 17.899%;
    width: 55.072%;
    position: absolute;
    top: 18%;
  }
  #main .pc_img {
    display: none;
  }
  #main .sp_img {
    display: block;
  }

  /*-----------------------------
  contain
  ------------------------------*/
   .mvContent .decoration {
    margin-top: -9.282%;
  }

  .mvContent .presentCotant .ankeBtn {
    position: absolute;
    top: 95.3%;
    left: 0%;
    z-index: 1000;
  }
	
  

/*.displayFlex { display: inherit; }*/
.displayFlex .carBox { width: 50%; }
	
.displayFlex .carBox .sp_resize { width: 80%; padding: 0 10%; }
	
  /*-----------------------------
  common place
  ------------------------------*/
  .text {
    padding: 0 4%;
  }

  .HondaFinance p {
    margin: 3.6231% 2% 0 2%;
  }

  .miniCaption {
    margin: 20px 2% 10% 2%;
    padding: 9px 30px;
    text-align: center;
    font-size: 2.898vw;
    font-weight: bold;
    letter-spacing: 0.1em;
  }

  .phtCaption {
    padding: 0 3% 0 3%;
    margin: 0 auto;
  }
  .btn {
    margin: 0 auto;
    margin: 20px 2% 15px 2%;
  }

  /*-----------------------------
    footer
------------------------------*/
  #footer {
    padding: 4.83% 0 0 0;
	  margin-bottom: 80px;
  }
  #footer p {
    padding: 2%;
  }

  #footer p img {
    max-width: 70%;
  }

  #footer .inner a {
    width: 60px;
    height: 60px;
    position: absolute;
    right: 60px;
    top: -5px;
  }

  /*-----------------------------
  fixed btn
  ------------------------------*/
  #follow .pc_img {
    display: none;
  }
  #follow .sp_img {
    display: block;
    margin: 0 auto;
  }
  .fixed-btn {
    /*position: sticky;*/
  }
  #follow .sp_img img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto;
  }
  .fixed-btn .inner {
    width: 96.6183%;
    max-width: 380px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
	 
  }
	
	
  .fixed-btn .spWrap {
    display: flex;
    justify-content: flex-start;
    align-items: center;
	 margin: 0 1% 0 1%;
	   flex-wrap: wrap;
  }
  .fixed-btn .spWrap img {
    width: 100%;
    height: auto;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
	   filter: drop-shadow(1px 2px 2px rgba(0, 0, 0, 0.8));
  }
	
	.fixed-btn ul li { padding: 5px 1%; width: 31.3%; }
	/*.fixed-btn ul li:first-child { padding: 5px 2%; width: 96%;  }*/

  .fixed-btn .inner img {
    transition: 0.2s;
   
  }

  .fixed-btn .inner img:hover {
    transform: scale(1.05);
  }

  .fixed-btn .inner a {
    display: block;
  }
}


/****************

header and nav

****************/


header { background: #FFF; height: 100px; width: 100%; position: fixed; top: 0%; left: 0%; right: 0%; z-index: 10; /*box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.1) ;*/}
header .header-wrap { /*width: 980px;*/ }	
header .header-wrap a { padding: 0;}
.logo-wrap { text-align: left; margin: 0%; padding-right: 50%; }
.logo-wrap img { max-width: 500px; width: 100%; }
nav { position: relative; z-index: 10; }

nav ul { display: flex; flex-direction: column; justify-content: center; position: fixed; top: -130%; right: 0%; width: 70%; padding: 10% 15% 20% 15%; height: calc(100vh - 35%); background: rgba(255, 255, 255, 0.85); color: #FFF; z-index: 9; transition: .5s; opacity: 0; }

/*
nav ul li { color: #000; width: 76% !important; padding: 3% !important; margin: 3% 9%; text-align: left; font-size: 1.8rem; border-bottom: solid 1px #000; }*/

button { margin-top: 3px; padding: 5px 7px; border: 0; border-radius: 0; background: transparent; color: inherit; vertical-align: middle; text-align: inherit; font: inherit; -webkit-appearance: none; appearance: none; }
.menu-btn { position: fixed; top: 0px; right: 0px; z-index: 100; width: 100px; height: 100px; display: block; padding: 40px 22px; background: #CC0000; margin: 0; }
.menu-btn.open { position: fixed; top: 0px; right: 0px; z-index: 100; width: 100px; height: 100px; display: block; padding: 34px 16px; background: #FFF; margin: 0; border: 3px solid #CC0000; }
.menu-btn-line { display: block; position: relative; width: 100%; height: 3px; background: #FFF; transition: .2s; background-color: transparent; }
.menu-btn-line::before, .menu-btn-line::after { content: ""; position: absolute; width: 100%; height: 100%; background: #FFF; transition: .5s; left: 0; }
.menu-btn-line::before { transform: translateY(-7px); }
.menu-btn-line::after { transform: translateY(7px); }
.menu-btn-line.open { background-color: transparent; }
.menu-btn-line.open::before , .menu-btn-line.open::after { content: ""; background: #CC0000; transition: .2s; }
.menu-btn-line.open::before { transform: rotate(30deg); }
.menu-btn-line.open::after { transform: rotate(-30deg); }
.menu-btn-txt { font-size: 14px; color: #FFF; padding-top: 15px; text-align: center; font-weight: 600; }
.menu-btn-close { color: #CC0000; }
.menu-btn-txt.open { padding-top: 20px; text-align: center; margin-left: -1px; color: #CC0000; font-weight: 600; }
.menu-btn-txt-on.disp-off { display: none; }
.menu-list.line { border-bottom: solid 1px #CCC; }
.menu.open { top: 0 !important; opacity: 1; }

@media screen and (max-width: 979px) {
	header { background: #FFF; height: 60px; }
	.logo-wrap { padding-right: 0%; }
	.logo-wrap img { height: 60px; width: auto; }
	
	nav ul { width: 100%; padding: 5% 0% 5% 0%; height: 100%; }
	.menu-btn { width: 60px; height: 60px; display: block; padding: 20px 12px; background: #CC0000; margin: 0; }
	.menu-btn.open { width: 60px; height: 60px; padding: 20px 12px; }
	.menu-btn-line::before { transform: translateY(-5px); }
	.menu-btn-line::after { transform: translateY(5px); }
	.menu-btn-txt { font-size: 12px; padding-top: 10px; }
	.menu-btn-txt.open { padding-top: 7px; margin-left: -2px; }
	
}

.top-copy { margin-top: 100px; }
@media screen and (max-width: 979px) {
	.top-copy { margin-top: 60px; }
}


.slide-bg1 { background: url("../images/slide-bg1.webp"); background-size: cover; }
.slide-bg2 { background: #ffdcdc; }
.slide-bg3 { background: url("../images/slide-bg3.webp"); background-size: cover; }
.slide-bg4 { background: url("../images/slide-bg4.webp"); background-size: cover; }
.slideBox1 { }
.slideBox2 { padding-bottom: 1%; }
.slideBox3 { padding-bottom: 1%; }
.slideBox4 { margin-bottom: 5%; }
.swiper-container { width: 100%; }
.swiper-wrapper { margin-top: 0%; margin-bottom: 0%; position: inherit; }
.swiper-slide { margin-bottom: 4%; background: none; }

.swiper-button-next, .swiper-container-rtl .swiper-button-prev { right: 25% !important; }
.swiper-button-prev, .swiper-container-rtl .swiper-button-next { left: 25% !important; }
.swiper-button-prev,
.swiper-button-next { width: 60px !important; height: 60px !important; background-size: 60px 60px !important; top: 93.3% !important; }
.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction { bottom: 5% !important; }
.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet { margin: 1% !important; border: solid 2px #003894 !important; width: 15px; height: 15px; background: none; opacity: 1; }
.swiper-pagination-bullet-active { background: #003894 !important; }


.swiper-button-prev.s2,
.swiper-button-next.s2 { top: 93% !important; 
}
.swiper-button-prev.s3,
.swiper-button-next.s3 { top: 97% !important; 
}
.swiper-pagination.s2 .swiper-pagination-bullet { bottom: 1% !important; }
.swiper-pagination.s2 .swiper-pagination-bullet-active { background: #FFF !important; }


.swiper-pagination.s3 .swiper-pagination-bullet { bottom: 1.5% !important; }
.swiper-pagination.s3 { bottom: 1.5% !important; }

.swiper-button-next {
	background-image: url("../images/s-next.png");
}

.swiper-button-prev {
	background-image:  url("../images/s-next.png");
	transform: scale(-1, 1); 
}
.swiper-button-next:after, .swiper-button-prev:after {
    content: '' !important;
}

@media screen and (max-width: 979px) {
	.swiper-button-prev, .swiper-button-next { width: 30px !important; height: 30px !important; background-size: 30px 30px !important; top: 95% !important; 
	}
	.swiper-button-prev.s2,
	.swiper-button-next.s2 { top: 94.5% !important; }
	.swiper-button-prev.s3,
	.swiper-button-next.s3 { top: 98.5% !important; }
	.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet { width: 5px; height: 5px; }
	
}

/************************
usedcar
**********************/
header.usedcar { position: relative; }
.header-wrap-used { text-align: center; max-width: 980px; margin: 0 auto; }
.header-wrap-used img { max-width: 480px; width: 100%; }

@media screen and (max-width: 979px) {
	header.usedcar { height: auto; }
	.header-wrap-used img { width: 70%; padding: 0 15%; }
}

.uc-wrap { padding-top: 2%; }
.uc-wrap .nav-btn { margin: 0% 4%; z-index: 10; padding-bottom: 2%; }
.uc-wrap .nav-btn .layout-wrap { display: flex; flex-wrap: wrap; gap: 2.5%; }
.uc-wrap .nav-btn .layout-wrap .item { width: 18%; padding: 1% 0; margin-bottom: 8%; }
.uc-wrap .nav-btn .layout-wrap .svBtn { border-radius: 0; }
/*.uc-wrap .nav-btn .layout-wrap .item:first-child { width: 100%; padding: 1% 0; margin-bottom: 14%; }*/

.z-index-1 { position: relative; z-index: 1; }

.usedcar-footer { padding-bottom: 30px !important; margin-bottom: 0px !important; }

/************************

modal window

**********************/

.modal-checkbox { display: none; }
.modal-open-button { cursor: pointer; border: none; }
.modal { position: fixed; top: 4%; left: 0; display: none; align-items: center; justify-content: center; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); }

@media screen and (max-width: 979px) {
	.modal { top: 2%;}
}

.modal-close { position: absolute; top: 20px; right: 20px; font-size: 18px; cursor: pointer; background: rgba(0, 0, 0, 0.6); z-index: 1; color: #FFF; border-radius: 20px; padding: 0px 8px 5px 8px; }

.modal-wrapper { position: relative; width: 80%; max-width: 800px; max-height: calc(100vh - 150px); padding: 10px; margin: auto; }

.modal-content { overflow: scroll; max-width: 800px;  max-height: calc(100vh - 150px); position: relative; }
.modal-content img { transition: 0s !important; filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, 0.8)) !important;
    margin: 0px;
    width: auto; height: auto; }

.modal-content img:hover { transform: scale(1) !important; }
.modal-checkbox:checked + .modal { display: flex; z-index: 1; }


/***************

animation

****************/
@keyframes fluffy {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes flash1 {
	0%,100% { opacity: 1; }
	20% { opacity: 0.5; }
}


.line-to-btn { animation: flash-line 3s linear infinite; }
@keyframes flash-line {
  0%, 50%, 100%{
    opacity: 0;
  }
  25%, 75%{ opacity: 1; }
}

@keyframes flash-btn {
  0%, 50%, 100%{
    opacity: 0.6;
  }
  25%, 75%{ opacity: 1; }
}

@keyframes flash-btn2 {
  0%, 20%, 100%{
    opacity: 0.6;
  }
  50%, 75%{ opacity: 1; }
}

@keyframes scale-ani {
  0%,100% {
    transform: scale(0.95);
  }

  50% {
    transform: scale(1);
  }
}


@keyframes rotation-ani {
	0%{ transform: rotate(0); }
	100%{ transform: rotate(360deg); }
}

/***************

count-down_camp

****************/

.mvContent .countdownBox { position: relative; }
.mvContent .countPosi { position: absolute; top: 33%; left: 0%; right: 0; margin: auto; z-index: 1; }
.mvContent .countPosi .timeContainer { display: flex; justify-content: center; margin-top: 2%; font-size: clamp(16px, 5.6vw, 55px); font-family: 'Public Sans', sans-serif; color: #000; line-height: 0; }
.mvContent .countPosi .timeContainer .daypd { margin-left: 23%; width: 10%; }
.mvContent .countPosi .timeContainer .hourpd { margin-left: 5%; width: 10%; }
.mvContent .countPosi .timeContainer .minpd { margin-left: 9%; width: 10%; }
.mvContent .countPosi .timeContainer .secpd { margin-left: 5.5%; width: 10%; }

.mvContent .camp-quo { position: relative; }
.mvContent .camp-quo .camp-step { position: absolute; top: 60.3%; left: 0; right: 0;  margin: 0 45% 0 45% ; z-index: 1; }
.mvContent .camp-quo .camp-btn { position: absolute; top: 55%; left: 0; right: 0;  margin: 0 51% 0 29% ; z-index: 1; filter: drop-shadow(1px 2px 2px rgba(0, 0, 0, 0.8)); animation: flash-btn 2.5s linear infinite; }
.mvContent .camp-quo .camp-btn2 { position: absolute; bottom: 2.4%; left: 0; right: 0;  margin: 0 13.5% 0 13.5% ; z-index: 1; animation: flash-btn 3s linear infinite; filter: drop-shadow(1px 3px 3px rgba(0, 0, 0, 0.8)); }

.mvContent .camp-quo { position: relative; }
.mvContent .camp-quo .camp-step { position: absolute; top: 63.8%; left: 0; right: 0;  margin: 0 45% 0 45% ; z-index: 1; }
.mvContent .camp-quo .camp-btn { position: absolute; top: 59%; left: 0; right: 0;  margin: 0 51% 0 29% ; z-index: 1; filter: drop-shadow(1px 2px 2px rgba(0, 0, 0, 0.8)); animation: flash-btn 2.5s linear infinite; }
.mvContent .camp-quo .camp-btn2 { position: absolute; bottom: 2.2%; left: 0; right: 0;  margin: 0 13.5% 0 13.5% ; z-index: 1; animation: flash-btn 3s linear infinite; filter: drop-shadow(1px 3px 3px rgba(0, 0, 0, 0.8)); }

/***************

SNS-wrap

****************/

.SNS-title-bg { position: relative; padding-bottom: 1%; }
.SNS-wrap { top: 1%; /*background: url("../images/sns-bg.webp"); background-size: cover;*/ padding: 1% 0% 3% 0%; margin: 4% 3.5% 5% 3.5%; }
.SNS-wrap .btn-wrap { padding: 1% 4%; }
.SNS-wrap .btn-wrap ul { display: flex; justify-content: space-between; margin-top: 2%; }
.SNS-wrap .btn-wrap ul li { width: 23%; }

@media screen and (max-width: 979px) {
	.SNS-wrap { border-radius: 10px; }
}

/***************

抽選販売

****************/
.nycar-slide-bg { background: url("../images/ny-car-bg.webp"); background-size: cover; padding-bottom: 21%; }
.nySlide1 { padding-top: 38%; }
.nySlide2 { padding-top: 17%; }
.nySlide3 { padding-top: 35%; }
.nySlide4 { padding-top: 17%; }

.swiper-button-prev.ny, .swiper-button-next.ny { top: 45% !important; }
.swiper-button-next.ny { right: 1% !important; }
.swiper-button-prev.ny { left: 1% !important; }
.swiper-button-next.ny { background-image: url("../images/s-next2.png"); }
.swiper-button-prev.ny { background-image: url("../images/s-next2.png"); transform: scale(-1, 1); }

@media screen and (max-width: 979px) {
	.swiper-button-prev.ny, .swiper-button-next.ny { width: 25px !important; height: 25px !important; background-size: 25px 25px !important; top: 50% !important; }
}

/***************

バナースライド

****************/
.slideBanner-bg { background: #ffe6e6; }
.swiper-button-prev.sb, .swiper-button-next.sb { width: 40px !important; height: 40px !important; background-size: 40px 40px !important; top: 50% !important; }
.swiper-button-next.sb { background-image: url("../images/s-next-b.png"); }
.swiper-button-prev.sb { background-image: url("../images/s-next-b.png"); transform: scale(-1, 1); }
.swiper-button-next.sb, .swiper-container-rtl .swiper-button-prev { right: 1% !important; }
.swiper-button-prev.sb, .swiper-container-rtl .swiper-button-next { left: 1% !important; }

@media screen and (max-width: 979px) {
	.swiper-button-prev.sb, .swiper-button-next.sb { width: 20px !important; height: 20px !important; background-size: 20px 20px !important; }
}