@charset "utf-8";
/*base     ======================================
フォントや文字色、ベースカラーなど
=================================================*/

body {
  background: #f7d46a;
}
.wrap {
  position: relative;
  z-index: 1;
  overflow: hidden;
  margin: auto;
  max-width: 560px;
  background: #efcd13;
}


/*component =====================================
サイト内で何度も使いまわしたいもの(btnや各ブロックのタイトルなど)
=================================================*/
.btn--img:hover,
a.btn--img:hover{
  opacity: 0.6;
  transition: 0.3s;
}

/*accordion*/
.accordion {
  position: relative;
}
.accordion-content {
  display: none;
  z-index: 1;
}
.accordion-title,.accordion-title2 {
  cursor: pointer;
  position: relative;
  z-index: 3;
}
.accordion-title::after,
.accordion-title2::after {
  content: '';
  width: 5vw;
  height: 4vw;
  background-image: url(../images/icon_arrow_blk.webp);
  background-size: 100% 100%;
  position: absolute;
  top: 50%;
  right: 15%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  margin: auto;
  z-index: 999;
  background-repeat: no-repeat;
}
.accordion-title.open::after,
.accordion-title2.open::after {
  content: '';
 width: 5vw;
  height: 4vw;
  background-image: url(../images/icon_arrow_blk.webp);
  background-size: 100% 100%;
  position: absolute;
  transform: translate(-50%, -50%) rotate(180deg);
  -webkit-transform: translate(-50%, -50%) rotate(180deg);
  -ms-transform: translate(-50%, -50%) rotate(180deg);
  margin: auto;
  z-index: 999;
  background-repeat: no-repeat;
}
.accordion-title::after,.accordion-title.open::after {
  right:15%;
}
@media all and (min-width:570px) {
 .accordion-title2::after,.accordion-title2.open::after {
  width: 30px;
  height: 24px;
   right: 17%;
}
.accordion-title::after,.accordion-title.open::after {
  width: 30px;
  height: 24px;
   right: 14%;
}
}

.accordion-title2::after {
  background-image: url(../images/icon_arrow_blk.webp);
}
.accordion-title2.open::after {
  background-image: url(../images/icon_arrow_blk.webp);
}
.acc_soubi {
  margin-top: 3%;
  margin-bottom: 3%;
  border: 3px solid #000;
  padding: 1% 1.5%;
  box-sizing: border-box;
}
.acc_soubi .btn-acc-more {
  width: 35%;
  max-width: 176px;
  left:35%;
}
.acc_zankure {
  border:3px solid #B39D45;
  background: #fff;
}
.acc_zankure .btn-acc-more {
  width: 45%;
  max-width: 260px;
  left:30%;
}

/*==========================================
 ヘッダー
===========================================*/
.head_logo a:hover {
  opacity: 0.7;
}

/*==========================================
content
===========================================*/
.columns-auto {
  display: flex;
  justify-content: space-between;
}

.column2_big {
  width: 49%;
}


.kirakira1 {
  top: 22.9%;
  left: -0.3%;
  width: 12%;
}
.kirakira2 {
  top: 2.1%;
  left: 8.7%;
  width: 16%;
}
.kirakira3 {
  top: 30.9%;
  left: 51%;
  width: 8%;
}
.kirakira4 {
  top: 12%;
  left: 64.3%;
  width: 10%;
}
.kirakira5 {
  top: 26.3%;
  left: 63.1%;
  width: 9%;
}
.kirakira6 {
  top: 18.3%;
  left: 87%;
  width: 10%;
}

.kirakira7 {
  top: 9.3%;
  left: 32%;
  width: 10%;
}

.kirakira {
	animation: flashing 1.5s infinite;
}
.kirakira_2{
  animation-delay: 1s;
}

.kirakira_3{
  animation-delay: 2s;
}

@keyframes flashing {
	0% {
		opacity: 1;
	}
	50% {
		opacity: 0.4;
	}
	100% {
		opacity: 1;
	}
}

@-webkit-keyframes flashing {
	0% {
		opacity: 1;
	}
	90% {
		opacity: 0.4;
	}
	100% {
		opacity: 1;
	}
}






/*FOOTER*/

.bg--footer{
  background-color: #3E3A39;
  background-size: 100% auto;
  background-repeat: repeat-y;
}

.footer {
  margin: 0px auto 0;
  padding-top: 20px;
  /*border-bottom: solid 7px #ababab;
  background: #efefef;*/
}

.footer .inner {
  margin: 0 auto;
  padding: 0 0 20px;
  max-width: 960px;
}

.footer .copy {
  margin: 0 auto;
  text-align: center;
  line-height: 1.5;
  /*display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap:wrap;*/
  
}

.copy_01 {
  font-weight: 500;
  font-size: 14px;
  width: 100%;
}

.copy_02 {
  font-weight: 500;
  font-size: 12px;
  width: 100%;
  letter-spacing: 0;
}

.copy_03 {
  font-weight: 500;
  text-align: center;
  font-size: 12px;
  width: 100%;
  letter-spacing: 0;
}
.privacypolicy{
  width: 100%;
}

.privacypolicy a {
  text-decoration: none;
  display: inline-block;
  position: relative;
  font-size: 14px;
}

.privacypolicy a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  text-align: center;
  background-color: currentColor;
}

@media all and (min-width:475px) {
  .copy_01 {
    width: auto;
  }
  
  .copy_02 {
    width: auto;
  }
  
  .copy_03 {
    width: 100%;
    font-size: 11px;
  }

  .privacypolicy{
    width: 100%;
  }
}

@media all and (min-width:600px) {
  .footer .inner {
    max-width: 580px;
  }

  .copy_01 {
    width: auto;
  }
  
  .copy_02 {
    width: auto;
  }
  
  .copy_03 {
    width: 100%;

  }
  
  .privacypolicy{
    width: auto;
  }
}

/*余白調整*/
.footer{
  padding-bottom: 29.7vw;
}

@media all and (min-width:425px) {
  .footer{
    padding-bottom: 22vw;
  }
}

@media all and (min-width:630px) {
  .footer{
    padding-bottom: 16vw;
  }
}

@media all and (min-width:560px) {
  .footer{
    padding-bottom: 120px;
  }
}

@media all and (min-width:1025px) {
  .footer {
    padding-bottom: 130px;
  }
}

.floatingMenu {
			  
  position: fixed;
  bottom: -100%;
  z-index: 10;
  width: 100%;
  transition: bottom 0.5s ease; /* アニメーション効果 */
  
}
.floatingMenu .container {
  max-width: 560px;
}

.floatingMenu .nav{
  background: #940000 url(../images/bg_fix-footer.webp) repeat-y;
  background-size: 100% auto;
  padding: 6px 0 0;
}
.floatingMenu .nav .column3 {
  margin-right: 0 !important;
  width: calc(100% / 3) !important;
}


/*animation  ======================================
ボタンきらりやフェードイン
=================================================*/
.mainvisual1.fadein--show{
  animation-delay: 0.8s;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
}


.nav.fadein--show{
  animation-delay: 1.3s;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
}


/*TOP*/
#page_top {
  position: fixed;
  right: 5px;
  bottom: 25vw;
  z-index: 100;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: #888888;
  opacity: 0.6;
  text-align: center;
  font-weight: bold;
}

#page_top a {
  position: relative;
  display: block;
  width: 35px;
  height: 35px;
  text-decoration: none;
  color: #FFF;
  padding: 15px 0px 0 3px;
  font-size: 10px;
}

#page_top a::before {
  position: absolute;
  top: -13px;
  right: -2px;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 35px;
  height: 35px;
  color: #fff;
  content: '\f106';
  text-align: center;
  font-weight: 600;
  font-size: 20px;
  font-family: 'Font Awesome 5 Free';
}



@media all and (min-width:575px) {

  #page_top {
    bottom: 15px;
  }
  
  }

  @media all and (min-width:600px) {

    #page_top {
      position: fixed;
      right: 5px;
      bottom: 5px;
      z-index: 100;
      width: 45px;
      height: 45px;
      border-radius: 50%;
      background: #888888;
      opacity: 0.6;
      text-align: center;
      font-weight: bold;
    }
    
    #page_top a {
      position: relative;
      display: block;
      width: 45px;
      height: 45px;
      text-decoration: none;
      color: #FFF;
      padding: 19px 0px 0 3px;
      font-size: 12px;
    }
    
    #page_top a::before {
      position: absolute;
      top: -13px;
      right: -2px;
      bottom: 0;
      left: 0;
      margin: auto;
      width: 45px;
      height: 45px;
      color: #fff;
      content: '\f106';
      text-align: center;
      font-weight: 600;
      font-size: 25px;
      font-family: 'Font Awesome 5 Free';
    }
    
    
    }




.sensing {
  width: 15%;
  right:5%;
  top: 4%;
}
.sensing.odyssey {
  top:0;
}

.sensing.nbox {
  top:0;
}
.sensing.none {
  top:7%;
  right:2.5%;
}
.sensing.nwgn {
  top:4%;
  right:2.5%;
}
.sensing.nvan {
  top:6%;
  right:2.5%;
}
.sensing.zrv {
  top:3%;
  right:2.5%;
}
.sensing.vezel {
  top:.5%;
  right:2.5%;
}
.sensing.wrv {
  top:0%;
  right:2.5%;
}
.sensing.civic {
  top:0%;
  right:2.5%;
}
.sensing.fit {
  top:0%;
  right:2.5%;
}
.sensing.accord {
  top:0%;
  right:4.5%;
}




/*showroom  ======================================
ショールーム
=================================================*/
@media (min-width: 570px) {
a[href*="tel:"] {
pointer-events: none;
cursor: default;
text-decoration: none;
}
}

.bg_showroom {
  background: #e6d089 url(../images/bg_showroom.webp) top center repeat-y;
}
.showroom_txt {
  width:84%;
  top: 62%;
  left:8%;
}
.showroom_txt span {
  display: block;
  width: fit-content;
  margin: 0 auto;
  text-align: center;
}
.showroom_txt .showroom_add {
  margin-bottom: 2px;
  font-size: min(9px, 2vw);
}
.showroom_txt .showroom_tel {
  padding-left: 10%;
  font-size: min(12px, 8vw);
  font-weight: 700;
  background: url(../images/icn_tel.webp) no-repeat left 75%;
  background-size: auto 70%;
}
@media (min-width: 570px) {
  .showroom_txt .showroom_add {
    margin-bottom: 5px;
  font-size: 12px;
  }
  .showroom_txt .showroom_tel {
    font-size: 18px;
  }
}

.btn_showroom_detail {
  top: 85%;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
}

.btn-acc-more {
  position: relative;
  left: -2.5%;
}

.column2-49p {
  margin-right: 0% !important;
  width: calc(49.5%) !important;
}

.video-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin: 0 auto;
  border-radius: 50px;
  border: 2px solid #000;
}

.video-wrapper video {
  width: 100%;
  height: auto;
  display: block;
}


.video-play-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
  z-index: 2;
}

.btn--stepwgn {
  top: 48.5%;
  left: 6%;
  width: 29%;
}

/*ムービーアニメーション*/
.btn_movie {
  bottom: 33%;
  left: 41.2%;
  z-index: 4;
  width: 20%;
}

.btn_movie:hover{
  cursor: pointer;
}

.keyvisual__scroll--circle {
  width: 100%;
  height: auto;
  animation: rotate 15s linear infinite;
}

.keyvisual__scroll--arrow {
  position: absolute;
  top: 50.3%;
  left: 51.3%;
  width: 68%;
  height: auto;
  transform: translate(-50%, -50%);
}

@keyframes rotate {
0% {
transform: rotate(0);
  }

  100% {
transform: rotate(360deg);
  }
}

/*  ======================================
2025.10　オータム
=================================================*/
.maintl_1 {
width: 100%;
top:0%;
left:0%;
z-index: 2;
opacity: 0;
}
.maintl_2 {
width: 100%;
top:0%;
right:0%;
z-index: 2;
opacity: 0;
}
#mainvisual .btn_nouki {
bottom:1%;
left:5%;
z-index: 2;
}
.fadein--show:nth-child(1) {
  animation-delay: .2s; /* すぐに表示 */
}

.fadein--show:nth-child(2) {
  animation-delay: 0.6s; /* 0.5秒後に表示 */
}
#cyuusen {
  background-color: #f69119;
}
.bg--gold {
  background: #e6d089 url(../images/bg_gold.webp) repeat-y;
  background-size: 100% auto;
}
.bg--momiji {
  background: url(../images/bg_momiji.webp) no-repeat;
  background-size: 100% auto;
}
.demo_btn {
  margin-bottom: 5%;
}
.w82p {
  margin: auto;
  width: 82% !important;
}

.kiran2 {
  height: 100%;
  width: 20px;
  position: absolute;
  top: -84px;
  left: 50%;
  background-color: rgba(255, 255, 255, .3);
  opacity: 0;
  transform: rotate(20deg);
  animation: reflection2 2s ease-in-out infinite;
  -webkit-transform: rotate(45deg);
  -webkit-animation: reflection 1.5s ease-in-out infinite;
  -moz-transform: rotate(45deg);
  -moz-animation: reflection 2s ease-in-out infinite;
  -ms-transform: rotate(45deg);
  -ms-animation: reflection 2s ease-in-out infinite;
  -o-transform: rotate(45deg);
  -o-animation: reflection 2s ease-in-out infinite;
}
@keyframes reflection2 {
  0% {
    transform: scale(0) rotate(45deg);
    opacity: 0;
  }
  30% {
    transform: scale(4) rotate(45deg);
    opacity: .2;
  }
  50% {
    transform: scale(10) rotate(45deg);
    opacity: 0;
  }
  100% {
    transform: scale(30) rotate(45deg);
    opacity: 0;
  }
}

.btn_usedcar {
  width: 90%;
  bottom:7%;
  left:5%;
}
.new_car {
  padding: 5% 0;
}
.new_car.prelude {
  background: #232e39;
}
.new_car.civic {
  background: #5e0e13 url(../images/8_civic_bg.webp) repeat-y;
  background-size: 100% auto;
}
.bg--showroom {
  background: #faf5df url(../images/bg_showroom.png) repeat-y;
  background-size: 100% auto;
}
.showroom_box .column2 {
  padding-bottom: 2%;
  background: #fff;
  border-radius: 24px;
}