@charset "Shift_JIS";

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');
/************************************************************
 * UTF-8
 ************************************************************/
* {
  margin: 0;
  padding: 0;
}

html { font-size: 62.5%; scroll-behavior: smooth; background: #000; }
img { vertical-align: bottom; width: 100%; }
a:hover { opacity: 0.8; transition: .3s; }

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

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


.top-middle-bg { background: #181112; padding: 0%; }

.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: 14%; filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.4)); }
.title-wrap-gnav .nav-btn .layout-wrap .item.s-nav:nth-child(-n+3) { width: 31%; margin-bottom: 43%; }

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

.sp-event-bg { background: url("../images/sp-event-bg.webp"); background-size: contain; padding-bottom: 1%; }

@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: 15%; filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.4)); }

.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: 3; }


.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; }



@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;}
}


@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%; }


.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;
}





@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; }
}


.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;
}


.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 {
  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; }
}


/*-----------------------------
    fixed btn
------------------------------*/
.fixed-btn { width: 100%; position: fixed; bottom: 0px; padding: 5px 0; background: rgba(255, 255, 255, .8); z-index: 9; }
.fixed-btn .inner { max-width: 700px; margin: 0 auto; list-style: none; }
.fixed-btn ul { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; }
.fixed-btn ul li:first-child { width: 100%; }
.fixed-btn ul li { padding: 5px 1%; width: 31.3%; }
.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 a { display: block; }
.fixed-btn .inner a:hover { transform: scale(1.05); }


/*-----------------------------
    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% 18% 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;
  }
  
.fixed-btn ul li { padding: 5px 1%; width: 31.3%; }

  
}


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

header and nav

****************/
header { background: #000; width: 100%; /*box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.1) ;*/}
header .header-wrap { max-width: 980px; width: 100%; text-align: center; margin: auto; }

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


.swiper-container { width: 100%; }

.swiper {
  width: 100%;
  height: 100%;
}
.swiper-slide {
  height: auto;
}

.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: 35% !important; }
.swiper-button-prev, .swiper-container-rtl .swiper-button-next { left: 35% !important; }
.swiper-button-prev,
.swiper-button-next { width: 50px !important; height: 50px !important; background-size: 50px 50px !important; top: 90% !important; }
.swiper-pagination-bullet { margin: 1% !important; border: solid 2px #003894 !important; width: 15px !important; height: 15px !important; background: transparent !important; opacity: 1 !important; }
.swiper-pagination-bullet-active { background: #003894 !important; }
.swiper-pagination { bottom: 8% !important; font-family: "Oswald", sans-serif; font-size: 20px;
  font-weight: 300;
  font-style: normal; }


.swiper-button-prev.s2 { left: 14% !important; }
.swiper-button-next.s2 { right: 14% !important; }

.swiper-button-prev.s2,
.swiper-button-next.s2 { top: 92% !important; 
}

.swiper-button-prev.s4 { left: 15% !important; }
.swiper-button-next.s4 { right: 15% !important; }

.swiper-pagination.s2 { bottom: 4% !important; }
.swiper-pagination.s3 { bottom: 4% !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: 96% !important; 
	}
	.swiper-pagination-bullet { width: 5px !important; height: 5px !important; }
	.swiper-pagination { bottom: 2% !important; }
	
}


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

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); }
}



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

バナースライド

****************/
.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; }
.swiper-button-prev.sb2, .swiper-button-next.sb2 { width: 40px !important; height: 40px !important; background-size: 40px 40px !important; top: 50% !important; }
.swiper-button-next.sb2 { background-image: url("../images/s-next-b2.png"); }
.swiper-button-prev.sb2 { background-image: url("../images/s-next-b2.png"); transform: scale(-1, 1); }
.swiper-button-next.sb2, .swiper-container-rtl .swiper-button-prev { right: 1% !important; }
.swiper-button-prev.sb2, .swiper-container-rtl .swiper-button-next { left: 1% !important; }

.swiper-button-next svg,
.swiper-button-prev svg {
  display: none;
}

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

.bg-set1 { background: url("../images/bg1.webp"); background-size: contain; padding: 4% 0 3.5% 0; margin-bottom: 7%; }
.hsd-bg { background: #000; } 
.hsd-title { padding: 5% 0 1% 0;}


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

layout setting

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

.main-wrap { position: relative; background: url("../images/main-bg.webp"); padding-bottom: 1px; }
.top-copy { padding: 3% 0 1.5% 0; }
.title-wrap { display: flex; padding: 0 10%; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.title-wrap .main-title { width: 49.5%; }
.title-wrap .scroll-motion { width: 49.5%; }
.banner1-wrap { margin-bottom: 7%; }
.banner2-wrap { margin-bottom: 10%; }
.lineup-wrap { background: #e8e8e8; }
.slide-box { padding: 3% 0; }
.slide-carLineup { position: relative; }
.slide-carLineup .car-page-link { position: absolute; bottom: 17.3%; padding: 0 17.4%; }
.slide-carLineup .car-page-link2 { position: absolute; bottom: 14.4%; padding: 0 17.4%; }

.bottom-wrap { background: #e8e8e8; padding: 3% 1%; }

.car-btn { position: relative; overflow: hidden; margin: 7% 33%; text-align: center; }
.car-btn::before { content: ""; position: absolute; top: -30%; left: -120%; width: 40%; height: 160%; background: linear-gradient(115deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.05) 35%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.05) 65%, rgba(255,255,255,0) 100% ); transform: rotate(20deg); filter: blur(10px); opacity: 0.9; mix-blend-mode: screen; animation: shine 1s ease-in-out infinite; }

@keyframes shine {
  0% {
    left: -120%;
  }

  100% {
    left: 160%;
  }
}

@media screen and (max-width: 979px) {
	.title-wrap { display: flex; padding: 1% 0%; }
	.title-wrap .main-title { width: 80%; padding: 0 10% 2% 10%; }
	.title-wrap .scroll-motion { width: 100%; }
	.car-btn { margin: 7% 20%; text-align: center; }
	.banner1-wrap { margin: 0 5% 7% 5%; }
	.banner2-wrap {  margin: 0 5% 10% 5%; }
}

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

scroll slider

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

.slider-set { width: 100%; overflow: hidden; margin-bottom: 5px; line-height: 0; }
.slide-track { display: flex; width: max-content; animation: scroll 30s linear infinite; }
.slide-track.sl2 { animation: scroll2 30s linear infinite; }
.slide-track img { width: 190px; aspect-ratio: 400 / 268; object-fit: cover; display: block; }

@media screen and (max-width: 979px) {
	.slide-track img { width: 160px !important; }
}

@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@keyframes scroll2 {
  from {
    transform: translateX(-50%);
  }
  to {
    transform: translateX(0);
  }
}


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

Sticky Nav

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

nav { position: sticky; top: 0; z-index: 8; background: rgba(232, 232, 232, 0.8); }
nav ul { display: flex; justify-content: space-between; list-style: none; margin: 0; padding: 2% 10%; }
nav li { cursor: pointer; position: relative; width: 22%; height: 40px; }
nav li .on-active,
nav li .no-active { position: absolute; transition: opacity 0.3s ease; }
nav li .on-active { opacity: 0; }
nav li .no-active { opacity: 1; }
nav li.active .on-active { opacity: 1; }
nav li.active .no-active { opacity: 0; }
.menu-slide { display: flex; justify-content: center; padding: 2%; margin-bottom: 3%; }
.menu-slide a { color: #999; text-decoration: none; transition: .3s; white-space: nowrap; text-align: center; font-size: clamp(12px, 1.8vw, 18px); margin: 0 10px; font-family: "Oswald", sans-serif; }
.menu-slide a.active { color: #000; }

@media screen and (max-width: 979px) {
	nav ul { padding: 2% 2%; }
	nav li { width: 24%; height: 25px; }
}