@charset "utf-8";

.top-title{
  margin-bottom:2.5rem;
      width: fit-content;
}

.top-title h2{
  font-size:clamp(0.875rem, 0.784rem + 0.3vw, 1.125rem);
}

.top-title img{
  height:130px;
  display: inline-block;
  width: auto;
}

.btn.small{
  min-width: 220px;
  padding: 1rem 3rem 1rem 1.5rem;
  font-size:20px;
  display: block;
  width: fit-content;
}

.btn.small::before {
  width: 18px;
  height: 18px;
  right:1rem;
}

.fv{
  position:relative;
  padding:10rem 0 0 5%;
  background:url(https://kmotors.jp/system_panel/uploads/images/20251003084633487367.png) no-repeat top center/cover;
}

.fv-txt{
  width:56.4%;
  overflow:hidden;
}

.fv-txt img:last-child{
  width: 97.8%;
  margin:2rem 0 0 ;
  animation-delay:0.8s;
}

.fv-car{
  width:82%;
  margin: -4% 0 0rem auto;
  transform: translateX(150%) translateY(10%);
  opacity:0;
  transition:1.5s ease-in-out 1.5s;
}

.fv-car.fadeUp{
  transform: translateX(0) translateY(10%);
  opacity:1;
}

.fv h1{
  font-size:30px;
  letter-spacing:8px;
  line-height:2;
  position: absolute;
  left: 5%;
  top: 57%;
}

.fv h1 strong{
  color:#FF8238;
  background-image: radial-gradient(circle at center, #FF8238 16%, transparent 20%);
  background-position: top left;
  background-repeat: repeat-x;
  background-size: 2.3rem 0.2em;
  padding-top: 0; 
}

.fv h1 strong:last-child{
  margin-top:0.8rem;
}

.top-anker{
  background:#FF8238;
  padding:7.5rem 0 20rem;
}

.top-anker .container{
  max-width:1345px;
}

.top-anker-wrap{
  padding:1rem 5%;
  background:#F7F6F2;
  border-radius:5rem;
  box-shadow:0 3px 6px rgba(0,0,0,0.16);
  display:flex;
  justify-content: space-between;
}

.top-anker-wrap > a:first-child{
  width: 25%;
  text-align: left;
}

.top-anker-wrap > a,
.top-anker-wrap > div{
  width:calc(75% / 5);
  text-align: center;
  border-right: 1px solid;
  font-size: clamp(0.875rem, 0.739rem + 0.45vw, 1.25rem);
}

.top-anker-wrap > div{
  display:flex;
  align-items:center;
  gap:0.5rem;
  justify-content: center;
  position:relative;
}

.top-anker-wrap > div img{
  width:1rem;
  height:1rem;
}

.top-anker-wrap > div img.active{
  transform:rotate(180deg);
}

.top-anker-wrap > div .sub-menu{
  position:absolute;
  display:none;
}

.top-anker-wrap > div .sub-menu.active{
  position:absolute;
  display: flex;
  top: 180%;
  width: 90%;
  left: 5%;
  flex-direction: column;
  gap: 4px;
}

.top-anker-wrap > div .sub-menu a{
  width:100%;
  display:block;
  padding: 0.5rem 5%;
  background: #F7F6F2;
  border-radius: 1.5rem;
  font-size:14px;
}

.top-anker-wrap > a:last-child{
  border: none;
  text-align: right;
}

.top-about{
  padding:2.5rem 0 7.5rem;
  border-radius: 250px 250px 0 0;
  margin-top: -15rem;
  background: #E5E3DF;
}

.top-about .container{
  max-width:1345px;
  display:flex;
  justify-content: space-between;
  position:relative;
}

.top-about-img{
  width:68%;
}

.top-about-img .top-title{
  margin-bottom: -5%;
  position: relative;
      z-index: 10;
}

.top-about-txt{
  max-width: 520px;
  position: absolute;
  right: -5%;
  bottom: 0;
  width: 45%;
  font-size:14px;
}

.top-about-txt h3{
  font-size:clamp(1.25rem, 0.977rem + 0.91vw, 2rem);
  margin-bottom:1.5rem;
}

.top-feature{
  padding:2.5rem 0 10rem;
  position:relative;
  overflow: hidden;
}

.top-feature::before{
  content:"";
  position:absolute;
  width:110%;
  aspect-ratio:2048/748;
  background:url(https://kmotors.jp/system_panel/uploads/images/20251002181112165867.png) no-repeat center/contain;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  z-index:-1;
}

.top-feature h2{
  text-align:center;
  margin:0 auto 5rem;
  background:#fff;
  width:fit-content;
  padding:12px 2rem;
  min-width:450px;
  font-size:clamp(0.75rem, 0.568rem + 0.61vw, 1.25rem);
  letter-spacing:8px;
  border-radius:3rem;
  line-height:1.2;
}

.top-feature h2 strong{
  font-size:clamp(1.5rem, 1.136rem + 1.21vw, 2.5rem);
  display:block;
}

.top-feature-wrap{
  display:flex;
  justify-content: space-between;
  align-items:center;
}

.top-feature-item{
  width:30%;
}

.top-feature-item h3{
  font-size:20px;
  text-align:center;
  padding-bottom:8px;
  border-bottom:1px solid #000;
  margin-bottom:12px;
}

.top-feature-item h3 strong,
.top-feature-item p strong{
  color:#FF8238;
  display:inline;
}

.top-feature-item img{
  border-radius:1rem;
  object-fit:cover;
  aspect-ratio:410/190;
  margin-bottom:20px;
}

.top-feature-item p{
  font-size:14px;
}

.top-feature .btn{
  display:block;
  margin:20px auto 0;
}

.top-service{
  margin:3.5rem 0 0;
}

.top-service .top-title{
  margin:0 auto 2.5rem;
  text-align: center;
}

.top-service .top-title img{
  margin:0 auto;
}

.top-service-wrap{
  display:flex;
  justify-content: space-between;
  align-items:center;
  padding:5rem 15% 3.5rem;
  position:relative;
}

.top-service-wrap:not(:last-child){
  margin-bottom:5rem;
}

.top-service-wrap:last-child {
  justify-content: end;
  gap:5%;
}

.top-service-wrap:last-child .top-service-txt h4{
  color:#2FC7A0;
}

.top-service-wrap:last-child .top-service-img h3,
.top-service-wrap:last-child .btn{
  background:#2FC7A0;
}

.top-service-wrap:last-child .btn::before{
  background: url(https://kmotors.jp/system_panel/uploads/images/20251001100758218476.png) no-repeat center / contain;
}

.top-service-wrap:last-child .top-service-img h3::before{
  background: url(https://kmotors.jp/system_panel/uploads/images/20251002175827541231.png) no-repeat center / contain;
}

.top-service-wrap:last-child .top-service-txt{
  max-width: 550px;
}

.top-service-wrap::before{
  content:"";
  position:absolute;
  width:100%;
  height:100%;
  background:#F2F1ED;
  border-radius:0 500px 30px 0;
  top:0;
  left:-10%;
  z-index:-1;
}

.top-service-btn{
  display:flex;
  gap:2.5rem;
  align-items:center;
  margin-top:2.5rem;
}

.top-service-img{
  width:40%;
  position:relative;
}

.top-service-img h3{
  position:absolute;
  left: 7.5%;
  top: -22%;
  z-index:10;
  color:#fff;
  background:#FF8238;
  border-radius:999vh;
  font-size:clamp(1.5rem, 1.136rem + 1.21vw, 2.5rem);
  aspect-ratio: 1 / 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1.5rem;
  letter-spacing: 4px;
}

.top-service-img h3::before{
  content:"";
  position:absolute;
  width:35px;
  aspect-ratio:35/75;
  background:url(https://kmotors.jp/system_panel/uploads/images/20251002175827121526.png) no-repeat center/contain;
  left: -27px;
  top: 0;
  z-index:-1;
}

.top-service-txt{
  width:55%;
  font-size:14px;
}

.top-service-txt h4{
  font-size:clamp(1.125rem, 1.034rem + 0.3vw, 1.375rem);
  margin-bottom:1.5rem;
  color:#FF8238;
}

.top-news{
  padding:4rem 0 10rem;
  position:relative;
  overflow:hidden;
}

.top-news::before{
  content:"";
  position:absolute;
  width:36%;
  aspect-ratio:1391/1190;
  background:url(https://kmotors.jp/system_panel/uploads/images/20251002173818339233.png) no-repeat center/contain;
  left: -9%;
  top: -25%;
  z-index:-1;
}

.top-news::after{
  content:"";
  position:absolute;
  width:36%;
  aspect-ratio:1779/1692;
  background:url(https://kmotors.jp/system_panel/uploads/images/20251002173818510126.png) no-repeat center/contain;
  right: -11%;
  bottom: -25%;
  z-index:-1;
}

.top-news-title{
  display:flex;
  justify-content: space-between;
  align-items:center;
}

.information{
  padding:4rem 0 5rem;
  background:#F2F1ED;
}

.top-feature .container,
.top-news .container,
.information .container{
  max-width:1345px;
}

.information iframe{
  height:400px;
  border:none;
}

.info-wrap{
  display:flex;
  margin: 2rem 0 0;
  justify-content: space-between;
  align-items: flex-start;
}

.info-left{
  width:50%;
}

.info-list{
  display:flex;
  border-bottom:1px solid #BFBFBF;
}

.info-list p{
  padding:1rem 2rem;
  background:#fff;
}

.info-list p:first-child{
  padding:1rem;
  width:100px;
  background:#FFEB03;
  text-align:center;
}

.info-list p:last-child{
  width:calc(100% - 100px);
}

.info-right{
  width:45%;
}

.info-right .btn{
  margin:3rem 0 0 auto;
}

.info-right-wrap{
  display:flex;
  justify-content: space-between;
  align-items: flex-end;
}

.info-right-wrap > div{
  width:47.5%;
}

.info-right-wrap > div p{
  margin-bottom:6px;
  position:relative;
  width: fit-content;
}

.info-right-wrap > div p::before{
  content:"";
  position:absolute;
  width:1rem;
  height:1rem;
  background:url(https://kmotors.jp/system_panel/uploads/images/20251002172913812865.png) no-repeat center/contain;
  right:-1.5rem;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}

.information .top-title img{
  height:70px;
}

.information .top-title h2{
  font-size:clamp(0.875rem, 0.83rem + 0.15vw, 1rem);
}

.top-news .btn.sp{
  display:none;
}

.top-insta{
  margin-top:5rem;
}

.top-insta-title{
  display:flex;
    align-items: center;
    justify-content: space-between;
}

.top-insta-title h2{
  font-size:clamp(1.25rem, 1.068rem + 0.61vw, 1.75rem);
}

.top-insta-title a{
  width:2.5rem;
}


@media screen and (max-width: 1400px) {
  .top-service-wrap{
    padding: 5rem 10% 3.5rem;
  }
  .top-service-img h3{
    padding:1rem;
  }
  .top-about{
    border-radius: 150px 150px 0 0;
  }
  .top-about .container{
    width:90%;
  }
  .top-anker .container {
    width: 90%;
  }
}

@media screen and (max-width: 1024px) {
  .top-about-txt {
    max-width: 550px;
    position: relative;
    right: auto;
    bottom: auto;
    width: 100%;
  }
  .top-about .container {
    width: 90%;
    flex-direction: column;
    gap: 3rem;
    align-items: center;
  }
  .top-feature-wrap{
    flex-direction: column;
    gap: 3rem;
  }
  .top-feature-item {
    width: 100%;
    max-width: 500px;
  }
  .top-feature::before{
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
  }
  .top-service-wrap,
  .top-service-wrap:last-child{
    flex-direction: column;
    gap: 3rem;
  }
  .top-service-wrap:last-child .top-service-txt{
    max-width:none;
  }
  .top-service-img {
    width: 100%;
    max-width: 700px;
  }
  .top-service-txt {
    width: 100%;
  }
  .top-service-wrap::before {
    border-radius: 0 200px 30px 0;
    left: -5%;
  }
  .top-service-img h3{
    left: 10%;
    top: -10%;
  }
  .info-wrap{
    flex-direction: column;
    gap: 3rem;
  }
  .info-left,
  .info-right{
    width:100%;
  }
  .top-about-img {
    width: 100%;
    max-width: 700px;
  }
  .top-title img {
    height: 100px;
  }
  .fv-car {
    margin: 0 0 0rem auto;
  }
  .fv h1 {
    position:relative;
    left: auto;
    top: auto;
    margin-top: 2rem;
  }
  .top-anker-wrap{
    display:none;
  }
  .top-anker{
    padding: 0rem 0 20rem;
  }
  .information iframe {
    height: 300px;
  }
  .top-news::before{
    left: -5%;
    top: -10%;
  }
  .top-news::after{
    right: -5%;
    bottom: -10%;
  }
  .top-feature h2 {
    margin: 0 auto 2rem;
  }
  .top-about {
    border-radius: 100px 100px 0 0;
  }
  .top-feature .btn {
    margin: 2.5rem auto 0;
  }
}

@media screen and (max-width: 767px) {
  .top-feature h2 {
    min-width: auto;
    padding: 8px 3rem;
  }
  .top-service-btn{
    flex-direction: column;
    gap:20px;
  }
  .top-news .btn.pc{
    display:none;
  }
  .top-news .btn.sp{
    display:flex;
    margin: 2.5rem auto 0;
  }
  .top-title img {
    height: 70px;
  }
  .fv-txt {
    width: 95%;
  }
  .fv-txt img:last-child {
    width: 97%;
    margin-top:1rem;
  }
  .fv {
    padding: 140px 0 0 5%;
    background-color:#E5E3DF;
    background: url(https://kmotors.jp/system_panel/uploads/images/20251003175646942734.png) no-repeat top center / cover;
  }
  .fv-car {
    width: 95%;
  }
  .top-anker {
    padding: 0rem 0 18rem;
  }
  .top-about {
    border-radius: 50px 50px 0 0;
    overflow:hidden;
  }
  .top-about-img > img{
    width:105%;
  }
  .top-about .container{
    gap: 2rem;
  }
  .top-about {
    padding: 2.5rem 0 100px;
  }
  .top-feature {
    padding: 0rem 0 7.5rem;
  }
  .top-feature::before {
    top: 1%;
  }
  .top-feature-wrap{
    gap:2.5rem;
  }
  .top-service {
    margin: 0;
  }
  .top-service-wrap {
    padding: 2rem 5% 0;
  }
  .top-service-wrap::before{
    aspect-ratio: 5 / 3;
    height: auto;
    top: 27%;
  }
  .top-service-img h3 {
    padding: 0.8rem;
  }
  .btn.small {
    min-width: 270px;
  }
  .information .top-title img {
    height: 40px;
  }
  .top-news::before {
    left: -10%;
    top: 0%;
    width: 50%;
  }
  .top-news::after {
    right: -18%;
    bottom: -5%;
    width: 70%;
  }
  .information .container{
    width:100%;
  }
   .information .container .top-title,
  .info-wrap{
    padding:0 5%;
  }
  .info-list p {
    padding: 1rem 1rem;
  }
  .top-insta-title a{
    width:1.5rem;
  }
}


/*インスタ*/
.instaCont section {
	display: flex;
  flex-direction: column;
    gap: 2rem;
  margin: 2rem 0;
  align-items:center;
}

.instaCont article {
	width: 85%;
}

.instaCont .imgBx01 {
	position: relative;
	display: block;
	padding: 0 0 100% 0;
}

.instaCont .imgBx01:hover {
	opacity: 0.7;
}

.instaCont .imgBx01 img,
.instaCont .imgBx01 video {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	max-width: 100%;
	width: 100%;
	max-height: 100%;
	height: auto;
  
}

.instaCont .imgBx01>span {
	position: absolute;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	margin: auto;
}

.instaCont .imgBx01>img+span,
.instaCont .imgBx01>video+span {
	display: none;
}

.instaCont .webgene-item-main-video {
	display: block;
	width: auto;
	max-width: 100%;
}

.instaCont .webgene-item .dayTxt {
	font-size: .85em;
    color: #FF8238;
}

.instaCont .webgene-item .snsTit {
	font-size: 1em;
	font-weight: normal;
}

@media screen and (min-width:768px) {
.instaCont section {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
    gap: 2rem 2.5%;
  margin: 2rem 0;
}
	.instaCont article {
		width: 47.5%;
	}


}

@media screen and (min-width:1200px) {

	.instaCont article {
		  width: calc((100% - 7.5%) / 4);
	}

}

@media screen and (max-width:767px) {
  
  .instaCont article .container{
    width:100%;
  }
}