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

body { background: #0e2a50; }

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:link {
  color: #0099ff;
}
div#proContents a:visited {
  color: #0099ff;
}
div#proContents a:hover {
  color: #ff6600;
}
div#proContents a:active {
  color: #ff6600;
}

/*-----------------------------
    header
------------------------------*/
#header {
  background: #fff;
  margin: 0px 0 0px;
}

#header .headerTop { 
	background: #efefef;
	margin-bottom: 10px;
}

#header .headerTxt { 
	width: 980px;
	margin: 0 auto;
	text-align: right;
}

#header .inner {
  max-width: 980px;
  margin: 0 auto;
}

#header .logo {
  text-align: center;
}
/*
#header .copy {
  float: right;
  margin-top: 28px;
  font-size: 14px;
}
*/
#header .pc_img {
  display: block;
}
#header .sp_img {
  display: none;
}

/*-----------------------------
    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;
}


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


.title-wrap { position: relative; margin: 0; margin-top: -1px; }
.title-wrap .nav-btn { position: absolute; bottom: 15%; left: 0; right: 0;  margin: 0 5% 0 5%; z-index: 10; }
.title-wrap .nav-btn .layout-wrap { display: flex; justify-content: space-between; flex-wrap: wrap; }
.title-wrap .nav-btn .layout-wrap .item { width: 23%; padding: 0.2% 1%; margin-bottom: 27%; }

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


.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 2.5s ease-in-out infinite;}





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

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



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


.chusen-wrap { position: relative; }
.chusen-wrap .rotation-box { position: absolute; top: -3%; width: 140%; left: -20%; }
.chusen-wrap .rotation-box2 { position: absolute; top: 0; }
.chusen-wrap .rotation-box .rotation-item { animation: 20s linear infinite rotation-ani; }

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


.resulr-wrap { position: relative; }

.youtube-layout { width: 100%; aspect-ratio: 16 / 9; filter: drop-shadow(4px 4px 5px rgba(0, 0, 0, 0.8));}
.youtube-layout iframe { width: 100%; height: 100%; }

.resulr-wrap .round .result-btn { position: absolute; bottom: 12%; margin: 0 28.5%; filter: drop-shadow(4px 4px 5px rgba(0, 0, 0, 0.8)); }
.resulr-wrap .round .result-btn2 { position: absolute; bottom: 14%; margin: 0 28.5%; filter: drop-shadow(4px 4px 5px rgba(0, 0, 0, 0.8)); }
.resulr-wrap .round .result-btn3 { position: absolute; bottom: 9%; margin: 0 28.5%; filter: drop-shadow(4px 4px 5px rgba(0, 0, 0, 0.8)); }

.resulr-wrap .round .youtube { position: absolute; bottom: 22%; margin: 0 12%; width: 76%; }
.resulr-wrap .round .youtube2 { position: absolute; bottom: 26%; margin: 0 12%; width: 76%; }
.resulr-wrap .round .youtube3 { position: absolute; bottom: 16%; margin: 0 12%; width: 76%; }

@media screen and (max-width: 979px) {
	.resulr-wrap .round .result-btn { bottom: 12%; margin: 0 25%; filter: drop-shadow(1px 1px 3px rgba(0, 0, 0, 0.8)); }
	.resulr-wrap .round .result-btn2 { bottom: 14%; margin: 0 25%; filter: drop-shadow(1px 1px 3px rgba(0, 0, 0, 0.8)); }
	.resulr-wrap .round .result-btn3 { bottom: 9%; margin: 0 25%; filter: drop-shadow(1px 1px 3px rgba(0, 0, 0, 0.8)); }
}



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


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

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



.mb5 { margin-bottom: 5%; }
.mb10 { margin-bottom: 10%; }

.f-link-wrap { position: relative; }
.f-link-wrap .link-btn1 { position: absolute; top: 16%; margin: 0 14.3%; }
.f-link-wrap .link-btn2 { position: absolute; top: 34.5%; margin: 0 14.3%; }
.f-link-wrap .link-btn3 { position: absolute; bottom: 32%; margin: 0 14.3%; }
.f-link-wrap .link-btn4 { position: absolute; bottom: 13.5%; margin: 0 14.3%; }




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







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


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

.SNS-wrap { background: url("../images/sns-bg2.jpg"); background-size: cover; padding: 2% 0; }
.SNS-wrap .btn-wrap { padding: 1% 5%; }
.SNS-wrap .btn-wrap ul { display: flex; justify-content: space-between; margin-top: 2%; }
.SNS-wrap .btn-wrap ul li { width: 23%; }

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

.sns .contents {
  position: relative;
  margin: 10px 0;
}

.sns .linkBtn {
  position: absolute;
  transition: background-color 0.2s;
  background-color: transparent;
}

.sns .linkBtn:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.sns .linkBtn.line {
  top: 23px;
  left: 16px;
}

.sns .linkBtn.facebook {
  top: 26px;
  left: 634px;
}

.sns .linkBtn.twitter {
  top: 26px;
  left: 804px;
}

.sns .linkBtn.instagram {
  top: 156px;
  left: 631px;
}

.sns .linkBtn.youtube {
  top: 156px;
  left: 804px;
}

.HondaFinance { background: #f5f2ee; }

.HondaFinance p {
  margin: 40px 0;
}

.miniCaption {
  border: #333 1px solid;
  padding: 9px 30px;
  text-align: center;
  font-size: 20px;
  margin-bottom: 15px;
  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 20px; 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; }
	.page-top i { font-size: 2.6rem; display: block; }
}
/*-----------------------------
    footer
------------------------------*/
#follow .pc_img {
  display: block;
}
#follow .sp_img {
  display: none;
}

footer {
  background: #000;
	text-align: center;
}

footer img {
  max-width: 980px;
	width: 100%;
}

#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: 10000; }

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

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

.fixed-btn ul li { padding: 5px 0.5%; width: 15.6%; }

.fixed-btn .inner img {
  transition: 0.2s;
  filter: drop-shadow(2px 5px 5px rgba(0, 0, 0, 0.8));
  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: 1000;}
.acd-content{ height: 0; opacity: 0; padding: 0; transition: .5s; visibility: hidden; margin-top: -24.5%; }
.acd-check:checked + .acd-label + .acd-content{ height: 100%; opacity: 1; visibility: visible; }



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

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

@media screen and (max-width: 979px) {
  #header .headerTxt {
	width: 100%;
  }
  #header .headerTxt img {
	width: 100%;
  }
  #header .inner {
    margin: 0 auto;
    text-align: center;
  }
  #header .logo {
    float: none;
    margin: 0 auto;
  }
  #header .logo img {
    width: 100%;
  }
  #header .copy {
    float: none;
    margin-top: 2.797%;
    text-align: center;
    font-size: 2.536vw;
    padding: 0 1.5% 0 1.5%;
  }
  #header .pc_img {
    display: none;
  }
  #header .sp_img {
    display: block;
  }

  /*-----------------------------
    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
  ------------------------------*/
  #main .spBackground {
    background-image: url(../images/sp/backcolor.png);
    background-repeat: repeat;
    background-position: center;
    padding: 3.282%;
  }
  .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%;
  }

  .sns .contents {
    position: relative;
    margin: 10px 0;
  }

  .sns .linkBtn {
    position: absolute;
    transition: background-color 0.2s;
    background-color: transparent;
  }

  .sns .linkBtn:hover {
    background-color: rgba(255, 255, 255, 0.2);
  }

  .sns .linkBtn.line {
    width: 50.96618%;
    height: 32.6429%;
    top: 3.1558%;
    left: 2%;
    cursor: pointer;
  }

  .sns .linkBtn.facebook {
    width: 43.4782%;
    height: 27.4161%;
    top: 37.8698%;
    left: 3.8%;
    cursor: pointer;
  }

  .sns .linkBtn.twitter {
    width: 43.4782%;
    height: 27.4161%;
    top: 37.8698%;
    left: 52.1739%;
    cursor: pointer;
  }

  .sns .linkBtn.instagram {
    width: 43.4782%;
    height: 27.4161%;
    top: 68.639%;
    left: 3.8%;
    cursor: pointer;
  }

  .sns .linkBtn.youtube {
    width: 43.4782%;
    height: 27.4161%;
    top: 68.639%;
    left: 52.1739%;
    cursor: pointer;
  }

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

  .miniCaption {
    margin: 20px 2% 15px 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;
  }
  #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%;
  }
  .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 .inner img {
    transition: 0.2s;
   
  }

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

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


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

slide

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

.slide-wrap { position: relative; }
.slide-wrap-copy { position: absolute; top: -4%; left: 0; margin-right: 23%; z-index: 1; }

@keyframes zoomUp {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.3);
  }
}
.swiper-slide-active .swiper-img, .swiper-slide-duplicate-active .swiper-img, .swiper-slide-prev .swiper-img { animation: zoomUp 7s linear 0s normal both; }
.swiper-slide img { height: auto; width: 100%; }