@charset "utf-8";
/* CSS Document */
/*==================================================================================================================================*/
/*全体*/
html {scroll-behavior: smooth;}

.fearure-container{
width: 100%;

overflow: hidden;
}



.fearure-container > *{
box-sizing: border-box;
image-rendering: -webkit-optimize-contrast;
}
.fearure-wrapper{
  background-color: #fcfcfc;
/*background-image: url("/PC/ja/asset/img/nw/feature/sp_contact/bg_s.webp");
  background-size: cover;
  background-position: center;*/
}



.fearure-inner{
width: 100%;
max-width: 960px;
margin: 0 auto;
padding: 0;
background-color:#fcfcfc;
overflow: hidden;
}

.fearure-inner section{
width: 100%;
margin: 0 auto 60px;

}


.p_anchor{
padding-top: 0;
margin-top: 0;

}

/* TOPイメージ */

.only-pc{
display: visible;
}


.pc_only_s{
display: none;
}

.pc_only_t{
display: block;
}


.main_image {
  background-image: url("/PC/ja/asset/img/nw/feature/sp_contact/main_pc_new.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative; 
  overflow: hidden;
  padding: 0;
}

.main_image_inner {
    width: 100%;
   /*max-width: 1100px;*/
    margin: 0 auto;
    position: relative;
    height: 630px;
}


/* SVG文字 */
.main_text {
    position: absolute;
    top: 20%;
    left: 20%;
    transform: translate(0, -30%);
    width: 40%;
    max-width: 540px;
}



.main_sub_text {
    position: absolute;
    display: block;
    top: 60%;
    left: 20%;
    transform: translate(0, -30%);
    font-size: 18px;
    color: #2e2e2e;
    overflow-wrap: break-word;
    margin-top: 20px;
	font-weight: 600;
    font-size: 24px;
}

.main_btn{
    position: absolute;
    display: block;
    bottom: 0;
    left: 20%;
	width: 100%;
	max-width: 400px;
}

@media (max-width: 2150px){
.main_image {
}
.main_image_inner {
 height: 540px;
}
	
	.main_text {
    position: absolute;
    top: 24%;
    left: 5%;
    transform: translate(0, -30%);
    width: 45%;
    max-width: 800px;
	
	}
	
.main_sub_text {
    top: 60%;
    left: 5%;
}

.main_btn{
    bottom: 0;
    left: 5%;
}
	
}

@media (max-width: 1910px){
.main_image {
  background-image: url("/PC/ja/asset/img/nw/feature/sp_contact/main_pc_new_m.webp");
}
.main_image_inner {
 height: 480px;
}
	
	.main_text {
    position: absolute;
    top: 24%;
    left: 5%;
    transform: translate(0, -30%);
    width: 24%;
	min-width: 400px;
	
	}
	
.main_sub_text {
    top: 62%;
    left: 5%;
	font-size: 20px;
}

.main_btn{
    bottom: 0;
    left: 5%;
}
	
	
}	

@media (max-width: 1350px){
.main_image {
  background-image: url("/PC/ja/asset/img/nw/feature/sp_contact/main_pc_new_m.webp");
}
.main_image_inner {
 height: 400px;
}
	
	.main_text {
    position: absolute;
    top: 24%;
    left: 2%;
    transform: translate(0, -30%);
    width: 30%;
	min-width: 360px;
	
	}
	
.main_sub_text {
    top: 62%;
    left: 2%;
	font-size:18px;
}

.main_btn{
    bottom: 0;
    left: 2%;
	max-width: 340px;
}
	
	
}	
@media (max-width: 1145px){

	.main_text {
	min-width: 300px;
	
	}
	
.main_sub_text {
    top: 58%;
    left: 2%;
	font-size:18px;
}

.main_btn{
    bottom: 0;
    left: 2%;
	max-width: 340px;
}
	
.pc_only_s{
display: block!important;
}	
}	
@media (max-width: 1020px){
.main_image {
background-image: url("/PC/ja/asset/img/nw/feature/sp_contact/main_pc_new_s.webp");

}
.main_image_inner {
  width: 100%;
  aspect-ratio: 2000 / 2160; 
 height: auto;
}
	
	.main_text {
    position: absolute;
    top: 8%;
    left: 50%;
    transform: translate(-50%, -30%);
    width:80%;
	}
	
.main_sub_text {
    top: 70%;
    left: 50%;
    transform: translateX(-50%);
	text-align: center;
	font-size:24px;
        width: 100%;
}

.main_btn{
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
	max-width: 460px;
}
.pc_only_s{
display: none!important;
}	
}	

@media (max-width: 768px){
.pc_only_t{
display: none;
}

.main_sub_text {
    top: 68%;
}

.main_btn{
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
	max-width: 460px;
}

}	

@media (max-width: 710px){

.main_btn{
    bottom:0;
}
}	
.content_block {
position: relative;
/*overflow: hidden;*/
margin: 0 auto;
padding: 140px 0;
}

@media (max-width: 600px){
.main_image {
background-image: url("/PC/ja/asset/img/nw/feature/sp_contact/main_pc_new_sss.webp");

}

.main_image_inner {
  aspect-ratio: 2000 / 2800; 
 height: auto;
}
	
	.main_text {
    top: 8%;
	}
	
.main_sub_text {
    top: 70%;
	font-size: 20px;
}

.main_btn{
    bottom: 4%;
	max-width: 360px;
}
}	

@media (max-width: 460px){

.main_sub_text {
	font-size: 16px;
}
.main_btn{
    bottom: 0;
}
}





@media (max-width:768px){
.content_block {
padding: 40px 0;

}
}

@media (max-width: 480px) {
    .content_block {

	
}
}

.block_01 {
background:
url("/PC/ja/asset/img/nw/feature/sp_contact/bg_01.webp") center center / cover no-repeat,
url("/PC/ja/asset/img/nw/feature/sp_contact/bg_02.webp") right center / contain no-repeat;
background-blend-mode:normal, color-burn;
background-color: #d30000;
margin-top: 100px;
}
.block_01_inner {
width: 100%;
max-width: 1400px;
display: -webkit-box;
display: flex;
-webkit-box-align: start;
align-items: flex-start;
margin: 0 auto;
padding-left:   20px;
}

.block_01_inner_item{
width: 50%;
color: #FFFFFF;
}

.block_01_inner_item p{
font-size: 16px;
}

@media (max-width:1360px){
.block_01 {
background:
url("/PC/ja/asset/img/nw/feature/sp_contact/bg_01.webp") center center / cover no-repeat,
url("/PC/ja/asset/img/nw/feature/sp_contact/bg_02.webp") 400px center / contain no-repeat;
background-blend-mode:normal, color-burn;
background-color: #d30000;
 }

.block_01_inner_item{
width: 60%;
color: #FFFFFF;

}
}
	@media (max-width:1200px){
.block_01 {
background:
url("/PC/ja/asset/img/nw/feature/sp_contact/bg_01.webp") center center / cover no-repeat,
url("/PC/ja/asset/img/nw/feature/sp_contact/bg_02.webp") 300px center / contain no-repeat;
background-color: #d30000;
 }
}

@media (max-width:768px){

.block_01 {
padding: 40px 0;
}}

@media (max-width: 600px) {
.block_01 {
    margin-top: 40px;
        background: url(/PC/ja/asset/img/nw/feature/sp_contact/bg_01.webp) center center / cover no-repeat, url(/PC/ja/asset/img/nw/feature/sp_contact/bg_02.webp) center center / contain no-repeat;
        background-color: #d30000;
}
.block_01_inner {
    padding: 20px;
}
    .block_01_inner_item {
        width: 100%;
    }
}
/* 土台 */
.skew_visual{
  grid-column: 1 / -1;
  grid-row: 1;

  /* ★高さ固定をやめて、行の高さ（=skew_content）に追従 */
  min-height: 0;
  height: 100%;

  background: none;
  position: relative;
  z-index: 1;
}

/* 赤帯（PC：左フルブリード） */
.skew_visual::before{
  content:"";
  position:absolute;

  /* ★ここが高さ連動のキモ：帯は行いっぱい＝skew_content高さ */
  inset: 0 auto 0 auto;

width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);

  background:
    url("/PC/ja/asset/img/nw/feature/sp_contact/car_re.webp") right bottom / cover no-repeat,
    #c40000;

  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  z-index: 1;
}



@media (max-width:850px){

  /* ★blockやめて、重ねgridにする（高さ連動のため） */
  .skew_container{
    display: grid;
    grid-template-columns: 1fr; /* 1列 */
    align-items: stretch;
    margin-top: 40px;
    position: relative;
  }

  .skew_visual{
    grid-column: 1;
    grid-row: 1;

    min-height: 0;
    height: 100%;

    width: 100%;
    margin-right: 0;
    /* ここは不要なら消してOK（疑似要素側でクリップするので） */
    clip-path: none;
    background: none;
  }

  /* ★absoluteをやめて同じ行に重ねる（帯高さ＝テキスト高さ） */
  .skew_content{
    grid-column: 1;
    grid-row: 1;
    position: relative;
    top: auto;
    left: auto;
    padding: 20px;   /* SP用の余白はここで調整 */
  }

  /* 赤帯（SP：右フルブリードへ移動） */
  .skew_visual::before{
  background:
    url("/PC/ja/asset/img/nw/feature/sp_contact/car_sp.webp") right bottom / cover no-repeat,
    #c40000;
    /* 高さは inset で維持（=skew_contentに連動） */
    inset: 0 auto 0 auto;

    /* 左フルブリード解除→右フルブリード */
    left: auto;
    right: calc(50% - 50vw);

    width: calc(50% + (var(--overlap-right) * 0.5) + (50vw - 50%));

    /* 右寄せ用の形状（お好みで微調整OK） */
    clip-path: polygon(40% 0, 100% 0, 100% 100%, 0 100%);
  }
}
.js-slide-left,
.js-slide-right {
  opacity: 0;
  transform: translateX(60px);
  transition: 0.8s cubic-bezier(.2,.7,.2,1);
}

.js-slide-left {
  transform: translateX(-60px);
}

.is-inview {
  opacity: 1;
  transform: none;
}

.skew_content h2 {
  color:#fff;
  margin: 0 auto 20px ;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
}
.skew_content p {
line-height: 2.0;
text-shadow:   1px 1px 2px rgba(0,0,0,0.9),
  3px 3px 8px rgba(0,0,0,0.7);
	}
	
.text-emphasis{
font-weight: 600;
	}

.text-emphasis-b{
font-size: 18px;
	}



.line {
  height: 3px;
  background: #fff;
  margin: 0 0 24px;
  display: block;
  width: 100%;
}


.line_b{
  background: #2e2e2e;
}


.sub_text{
width: auto;
height: 30px;
	}

.content_block.block_02{
background:

url("/PC/ja/asset/img/nw/feature/sp_contact/bg_03.webp") center center / cover no-repeat;
 position: relative;
}

.content_block.block_02::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100px;
    bottom: -60px;
    height: 600px;
  background:url("/PC/ja/asset/img/nw/feature/sp_contact/wheel_img.webp") right bottom / contain no-repeat;
  pointer-events: none;
}

@media (max-width: 1680px){
.content_block.block_02::after {
  left: 0;
  right: 0;
    bottom: 0;
    height: 540px;
}
}
@media (max-width: 1550px){
.content_block.block_02::after {
  left: 0;
  right: 0;
    bottom: 0;
    height: 480px;
}
}
/* テキストはいつも通り中央寄せ */
.block_02_inner{
    width: 100%;
    max-width: 1400px;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: start;
    align-items: flex-start;
    margin: 0 auto;
    padding-left: 20px;

}

.block_02_visual {
    position: absolute;
    right: 0;
    top: -30%;
    z-index:-2;
    /* margin-right: -10%; */
    pointer-events: none;
}
.block_02_visual img{
  width: 680px;
  height: auto;
  max-height: 70vh;
  display: block;
  filter: drop-shadow(0 12px 18px rgba(0,0,0,.55));
  opacity: 0.5;
}

/* 左テキスト */
.block_02_text{
  flex: 1 1 520px;
  max-width: 560px;
color: #2e2e2e;
z-index: 2;
position: relative;
background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
padding: 40px;
}

@media (max-width:1020px){
.content_block.block_02::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
    bottom: 0;
    height: 400px;
  background:url("/PC/ja/asset/img/nw/feature/sp_contact/wheel_img.webp") center bottom / contain no-repeat;
  pointer-events: none;
}

.content_block.block_02{
  padding-bottom: 400px;
}
	
	
.block_02_text{
 max-width: 100%;

}
	
.block_02_inner{
padding: 20px;

}
}
@media (max-width:600px){
.block_02_text{
background: transparent; 
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    border-radius: 0; 
  }
    .block_02_inner {
        padding:0;
    }

.block_02_text{
padding: 20px;
}
	
.block_01_inner_item p {
    font-size: 14px;
}
}
@media (max-width:530px){
.content_block.block_02{
  padding-bottom: 300px;
}
}

.block_02_title{
  margin: 0;
  font-weight: 700;
  line-height: 1.25;
  font-size: clamp(22px, 2.6vw, 34px);
}

.block_02_line{
  margin-top: 16px;
  width: min(360px, 85%);
  height: 2px;
  background: rgba(255,255,255,.85);
}

.block_02_desc{
  margin-top: 18px;
  line-height: 2;
  color:#2e2e2e;
}

.text-emphasis{
  font-weight: 700;
}

.contact_note{
  margin-top: 12px;
  font-size: 12px;
  line-height: 1.7;
color: #2e2e2e;
}

.block_02_visual{
  flex: 1 1 420px;
  display: grid;
  place-items: center;
}

.block_02_visual {
    position: absolute;
    right: 0;
    top: -30%;
    z-index: 1;
    /* margin-right: -10%; */
    pointer-events: none;
}

@media (max-width: 1300px){
.block_02_visual {
    top: -10%;
	margin-right: -10%;
}
.block_02_visual img {
    width: 600px;
}
}

@media (max-width: 768px){
.block_02_visual {
    top: -10%;
	margin-right: -10%;
}
.block_02_visual img {
    width: 500px;
}
}

@media (max-width: 600px) {
.block_02_visual {
    top:50%;
	transform: translateY(-50%);
}

.block_02_visual img {
    width: 420px;
}	
	  }
@media (max-width: 540px) {
.block_02_visual {
margin-right: -30%;
}

.block_02_visual img {
    width: 420px;
}	
	  }
@media (max-width: 480px) {
    .block_02_visual img {
        width: 360px;
    }
}

.content_block.block_02{

}


.block_02_container{
width: 100%;
max-width:960px; 
padding: 0 16px;
margin: 0 auto;
display: -webkit-box;
display: flex;
-webkit-box-pack: start;
justify-content: flex-start;

}

.block_02_container_content{
width: 50%;
margin-right: auto;
color: #FFFFFF;
}

.block_02_container_content p{
line-height: 2.0;
position: relative;
text-align: left;
}

.contact_note{
display: block;
position: relative;
margin-top: 1em
}

.contact_note p{
font-size: 13px;
text-indent: -1em;
margin-left: 1em;
line-height: 20px;
}

.block_03 {
padding-bottom: 0!important;
}

.block_03_container {
position: relative;
z-index: 2;
}

.block_03_container h2{
display: -webkit-box;
display: flex;
width: 100%;
-webkit-box-pack: center;
justify-content: center;
}

@media (max-width:840px){
.block_03_container h2{
display: -webkit-box;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
width: 100%;
-webkit-box-pack: center;
justify-content: center;
}
.block_03_container h2 img{
margin-top: 14px;
}

}

@media (max-width:768px){
.block_03_container {
position: relative;
z-index: 2;
margin-top: 0!important;
}
}

.block_03_container > .line {
  height: 3px;
  background:#2e2e2e;;
  margin: 0 auto 24px;
  padding: 0 16px;
  
}

.car_text{
font-size: 16px;
text-align: center;
line-height: 2.0;
color:#2e2e2e;
padding: 0 20px;
  
}

.block_03_container h3 {
  position: relative;
  padding: 0 65px;
  text-align: center;
  display: block;
  margin-top: 40px;
  color: #2e2e2e
}

.block_03_container h3:before {
  position: absolute;
  top: calc(50% - 1px);
  left: 0;
  width: 100%;
  height: 1px;
  content: '';
  color: #2e2e2e;
  background: #2e2e2e;
}

.block_03_container h3 span {
  position: relative;
  padding: 0 1em;
  background: #FFFFFF;
}

.block_03_title{
display: -webkit-box;
display: flex;
flex-wrap: wrap;
-webkit-box-pack: center;
justify-content: center;
width: 100%;
max-width: 960px;
margin: 0 auto;
padding: 0 20px;
}

.loop-gallery{ margin-top:60px; }

.loop-gallery__viewport{ overflow:hidden; position:relative; }

.loop-gallery__track{
  display:flex;
  width:max-content;
  will-change:transform;
  gap:0;
  animation: lg-marquee linear infinite;
  animation-duration: var(--lg-duration, 30s);
}

.loop-gallery__set{
  display:flex;
  align-items:center;
  gap: clamp(12px, 2vw, 28px);
}

.loop-gallery__set[data-set="2"]{
  padding-left: clamp(12px, 2vw, 28px);
}

.loop-gallery__item{ flex:0 0 auto; overflow:hidden; display:block; }
.loop-gallery__item img{
  height: clamp(120px, 18vw, 220px);
  width:auto;
  display:block;
  object-fit:cover;
}

@keyframes lg-marquee{
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-1 * var(--lg-distance, 1000px))); }
}

.loop-gallery__viewport:hover .loop-gallery__track{ animation-play-state:paused; }

@media (prefers-reduced-motion: reduce){
  .loop-gallery__track{ animation:none; }
}
.lg-lightbox[aria-hidden="false"]{ display:flex; }

.lg-lightbox__img{
  max-width: 92vw;
  max-height: 92vh;
}

.lg-lightbox__close{
  position:absolute;
  top: 18px;
  right: 22px;
  font-size: 36px;
  background: transparent;
  border: 0;
  color: #fff;
  cursor: pointer;
}

.loop-gallery__set[data-set="2"]{
  padding-left: clamp(12px, 2vw, 28px);
}
@media (max-width: 768px) {
.car_text {
text-align: left;

}
}

@media (max-width: 600px) {
.skew_content p {
 font-size: 14px;
}
.block_02_desc {
 font-size: 14px;
color:#2e2e2e;
}
.car_text {
    font-size: 14px;

}
}
.block_04_wrapper{
 width: 96%;
max-width: 960px;
margin: 0 auto;
color:  #2e2e2e;
text-align: center;
border: #2e2e2e double 5px;
padding: 40px;
}

@media (max-width:768px){
.block_04_wrapper{
padding: 20px;
}


}
@media (max-width:600px){
.block_04_wrapper{
font-size: 14px;
}
	.block_04_content_title {
    font-size: 14px;
}
.block_04_content p {
font-size: 14px;
}
}

p.block_04_hd{
width: 100%!important;
display: block;
margin-bottom: 20px;

}
.block_04_content p{
width: 100%;
display: block;
padding: 40px 0;

}

.block_04_content_title{
font-size: 16px;
display: block;
margin-bottom: 20px;
width: 100%;
}

.block_04_content p span{
display: inline-block;
}

.block_04_content{
display: -webkit-box;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
flex-wrap: wrap;
margin: 0 auto;
width: 100%;
max-width: 600px;
}


.block_04_content img{
width: 100%
}

.form_btn{
width: 100%;
max-width:400px;
margin: 0 auto;
}

.content_block.block_04{
padding-bottom: 60px;
margin-bottom: 0!important;
}



/*==================================================================================================================================*/
@media screen and (max-width: 1020px) {
.p_anchor{
padding-top: 80px;
margin-top: -80px;
}
}