@charset "UTF-8";


.lineup_title {
  display: block;
  margin-bottom: 10px;
  text-align: center;
  color: #615b5b;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 18px;
  font-weight: bold;
}

.anchor{

   padding-top: 120px;
    margin-top:-120px;
z-index: -1;
display: block;
position: relative;
}
html {
  scroll-behavior: smooth;
}

.brandnew_g-container {
  width: 100%;
  max-width: 100%;
  padding: 0;
}

.brandnew_g-container h2 {
  background-color: transparent;
}
.main_wrapper  {
  --maincolor: rgb(1, 159, 183);
  --easing: cubic-bezier(0.2, 1, 0.2, 1);
  --transition: 0.8s var(--easing);
  font-family: "Noto Sans JP", serif;
  box-sizing: border-box; /*追加*/
}

.main_wrapper {
  margin: 0 auto;
}

.mk_inner {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0;
}

.mk_block {
  background: #f8faed;
}
.mk_block_01 {
  padding: calc(200px - 10vw) 20px;
}

.mk_block_02 {
  padding: 200px 20px;
  background: #f3f3f3;
  clip-path: polygon(0 10vw, 100% 0, 100% calc(100% - 10vw), 0 100%);
}


.mk_block_03 {
  padding: 150px 20px;
  background: #f8faed;
}

/*ナビ*/
.nav_area {
  width: 100%;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
background: #f3f3f3;
}

.nav_area ul {
  display: -webkit-box;
  display: flex;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  justify-content: space-between;
  list-style: none;
  margin: 0 auto;
  padding: 20px 0;
  width: 100%;
  max-width: 880px;
}
.nav_area ul li {
  width: calc(25% - 10px);
  height: 60px;
  display: block;
  border: var(--maincolor) solid 2px;
  box-sizing: border-box;
  margin: 20px 0;
  display: -webkit-box;
  border-radius: 100vh;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  background-color: #FFFFFF;
}

.nav_area ul li a {
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 20px;
}

.nav_area ul li:hover {
  transform: translateY(-10px);
}

.nav_area ul li img {
  width: 130px;
  height: 34px;
  object-fit: contain;
}

.li_blank {
  border-style: none !important;
  background-color: transparent!important;
  height: 0!important;
}

/*各セクション共通*/
.mk_wrapper {
  width: 100%;
  box-sizing: border-box;
  padding: 50px 0;
}

.mk_content {
  width: 100%;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  box-sizing: border-box;
}

.maker_name {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: start;
  justify-content: flex-start;
  -webkit-box-align: end;
  align-items: flex-end;
  flex-wrap: wrap;
  box-sizing: border-box;
  width: 100%;
  margin: 20px 0;
}
.maker_name h2 {
  display: block;
  margin: 0;
  z-index: 3;
  position: relative;
  font-family: "Noto Sans JP", serif;
  font-weight: 400;
  font-style: normal;
	    background-color: transparent;
}
.logo-sub {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: start;
  justify-content: flex-start;
  -webkit-box-align: center;
  align-items: center;
  background-color: var(--maincolor);
  width: calc(100% - 380px);
  height: 46px;
  flex: 1;
  box-sizing: border-box;
  margin-bottom: 5px;
  position: relative;
  padding: 5px 5px 5px 42px;
  line-height: 1.3;
  z-index: 2;
}

.logo-sub:before {
  position: absolute;
  content: "";
  left: -2px;
  top: -2px;
  border: none;
  border-left: solid 40px #f8faed;
  border-bottom: solid 79px transparent;
  z-index: 1;
}

.mk_block_02 .logo-sub:before {
  border-left: solid 40px #f3f3f3;
}
.text-image {
  height: 36px;
  display: block;
}

/*ピックアップ*/
.pickup {
  display: flex;
  -webkit-box-pack: justify;
  justify-content: space-between;
  flex-wrap: wrap;
  box-sizing: border-box;
  -webkit-box-align: start;
  align-items: flex-start;
  border-bottom: #615b5b solid 1px;
  padding: 40px 0;
}

.pickup_r {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  flex-direction: row-reverse;
}
.pickup_l {
  border-bottom: none !important;
}
/*ピックアップ商品情報*/

.pickup_item_name {
  width: 100%;
  font-size: 32px;
  margin: 0 0 20px;
  text-align: left;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: start;
  justify-content: flex-start;
  flex-wrap: wrap;
  -webkit-box-align: end;
  align-items: flex-end;
}

.pickup_r .pickup_item_name {
  width: 100%;
  font-size: 32px;
  margin: 0 0 20px;
  text-align: left;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: end;
  justify-content: flex-end;
  flex-wrap: wrap;
  -webkit-box-align: end;
  align-items: flex-end;
}

.pickup_item_name h3 {
  font-size: 32px;
  margin: 0;
  display: block;
  font-family: "Noto Sans JP", serif;
  font-weight: 900;
  font-style: normal;
}
.pickup_item_name h3 span {
  font-size: 16px;
}

.item_size {
  display: inline-block;
  font-size: 18px;
  margin: 0 0 0.3em 1em;
  box-sizing: border-box;
  padding: 0.25em 1em;
  background-color: var(--maincolor);
  border-radius: 100vh;
  color: #fff;
  font-family: "din-2014", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.pickup_item_name::after {
  content: "";
  width: 100%;
  height: 15px;
  border-bottom: 2px solid var(--maincolor);
  border-right: 3px solid var(--maincolor);
  transform: skew(45deg);
  margin: -10px 0 0 -10px;
}

.pickup_r .pickup_item_name::after {
  content: "";
  width: 50%;
  height: 15px;
  border-bottom: 2px solid var(--maincolor);
  border-left: 3px solid var(--maincolor);
  border-right: none;
  transform: skew(-45deg);
  margin: -10px -10px 0 0;
}

.item_info_wrapper {
  box-sizing: border-box;
  width: 50%;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
}

.item_info_wrapper h4 {
  margin: 0 0 20px;
  font-size: 20px;
}

.item_info_wrapper p {
  font-size: 16px;
  line-height: 1.5;
  margin: 16px 0;
}

/* .item_info_text h4 {
  margin: 0 0 20px;
  font-size: 20px;
}

.item_info_text p {
  font-size: 16px;
  line-height: 1.5;
} */
/*ピックアップ車両画像*/

.car_img {
  width: 100%;
  box-sizing: border-box;
  /* height: 300px; */
  overflow: hidden;
  margin-top: 20px;
  padding: 10px;
  background-color: #ffffff;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
  position: relative;
}

.car_img img {
  max-width: 100%;
  display: block;
  object-fit: cover;
  margin: 0 auto;
}

.car_img_btn {
  display: inline-block;
  box-sizing: border-box;
  padding: 0.5em 2em;
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  bottom: 20px;
  right: 20px;
  border-radius: 100vh;
  color: #fff !important;
  font-size: 18px;
  text-decoration: none;
}

.car_img_btn:hover,
a.car_img_btn:hover {
  background-color: var(--maincolor);
}

/*ピックアップ商品画像*/
.item-viewer {
  display: block;
  box-sizing: border-box;
  width: calc(50% - 80px);
  text-align: center;
  margin: -60px 0 20px 20px;
}

.pickup_r .item-viewer {
  margin: -60px 20px 20px 0;
}

.main-image {
  width: 100%;
  height: auto;
  border: 2px solid #ccc;
  transition: opacity 0.5s ease-in-out; /* フェード効果の設定 */
  opacity: 1;
  box-sizing: border-box;
}

.main-image.hidden {
  opacity: 0; /* フェードアウト時に透明にする */
  pointer-events: none; /* 操作を無効化（安全策） */
}

.thumbnails {
  display: flex;
  justify-content: space-between;
  list-style: none;
  box-sizing: border-box;
  flex-wrap: wrap;
  list-style: none;
  padding: 0!important;
  margin: 0!important;
}
.thumbnails li {
  width: calc(20% - 10px);
  margin: 0 5px 5px;
  box-sizing: border-box;
  display: block;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
border: #cccccc solid 1px;
}
.thumbnail {
  width: 100%;
  height: auto;
  cursor: pointer;

  transition: opacity 0.3s ease, border 0.3s ease; /* アニメーション効果 */
}

.thumbnail.selected {
  opacity: 1; /* 選択されたサムネイルを目立たせる */
  border: 2px solid #007bff; /* 選択状態の枠線を追加 */
}

.thumbnail:hover {
  border: 2px solid #007bff;
}

.pickupbtn_link,
a.pickupbtn_link {
  color: #fff;
  background-color: var(--maincolor);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: block;
  padding: 1rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  text-decoration: none;
  letter-spacing: 0.1em;
  border-radius: 0.25rem;
  width: 100%;
  max-width: 600px;
  margin: 40px auto 80px;
  box-sizing: border-box;
}
.pickupbtn_link:hover,
a.pickupbtn_link:hover {
  color: #fff;
  background: #27687d;
}

.comingsoon {
  background-color: #b0b0b0;
}
.comingsoon:hover {
  background-color: #b0b0b0;
}

.color {
  display: block;
  text-align: center;
  font-size: 16px !important;
  color: #615b5b;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: bold;
  width: 100%;
  margin: 20px auto !important;
}

.color span {
  display: block;
  text-align: center;
  position: relative;
  padding: 0 55px;
}
.color span:before,
.color span:after {
  content: "";
  position: absolute;
  top: 50%;
  display: block;
  width: 70px;
  height: 1px;
  background-color: #615b5b;
}

.color span:before {
  left: 0;
}
.color span:after {
  right: 0;
}
.item-list-wrapper {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  /* background-color: aqua; */
  /* overflow-x: hidden; */
  padding-bottom: 50px;
}

.btn_link,
a.btn_link {
  color: #fff;
  background-color: var(--maincolor);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: block;
  padding: 1rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  border-radius: 0.25rem;
  width: 100%;
  margin: 10px 0;
  box-sizing: border-box;
}
.btn_link:hover,
a.btn_link:hover {
  color: #fff;
  background: #27687d;
}

.no_link {
  color: #d3d3d3;
  background: #888888 !important;
}

.no_link:hover {
  color: #d3d3d3;
  background: #888888 !important;
}
.item_info {
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  opacity: 0;
  box-sizing: border-box;
  padding: 0 0.5em;
}

.item_info h3 {
  font-size: 0.85em;
  margin: 0;
  padding: 0;
}

.item_info p {
  font-size: 0.65em;
  margin: 1em 0;
  padding: 0;
  display: block;
  text-align: justify;
}

/*新商品紹介 ラインアップ スライダー*/
.slider {
  margin: 0 auto;
  max-width: 960px;
  width: 100%;
  box-sizing: border-box;
  padding: 0 30px 1rem;
  display: -webkit-box;
  display: flex;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  justify-content: space-between;
}
.slider-img {
  margin: 0 5px;
}
.slider-img img {
  height: auto;
  width: 100%;
}

.slide-dots {
  margin: 0 0 30px 0;
  padding: 0!important;
  text-align: center;
}
.slide-dots li {
  display: inline-block;
  margin: 0 10px;
}
.slide-dots li button {
  position: relative;
  text-indent: -9999px;
}
.slide-dots li button::before {
  background-image: url(/PC/ja/asset/img/nw/feature/brandnew/dot.png);
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  cursor: pointer;
  height: 13.5px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 24px;
  width: 13.5px;
}
.slide-dots li.slick-active button::before {
  background-image: url("/PC/ja/asset/img/nw/feature/brandnew/dot_active.png");
}

.slide-dots li button {
  background: none;
  border: none;
  outline: none;
  padding: 0 7px;
}

.slide-arrow {
  position: absolute;
  top: 20%;
  margin-top: -15px;
}
.prev-arrow {
  left: 0;
  cursor: pointer;
}

.next-arrow {
  right: 0;
  cursor: pointer;
}

.prev-arrow:hover,
.next-arrow:hover {
  opacity: 0.8;
}

.lineup_title {
  display: block;
  margin-bottom: 10px;
  text-align: center;
  color: #615b5b;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 18px !important;
  font-weight: bold;
    margin-top: 40px;
}

.slick-list {
  padding: 20px 0 !important;
}
.wheel_lineup {
  background-color: #ffffff;
  box-sizing: border-box;
  border-radius: 5px;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  padding: 16px;
  position: relative;
}

.lineup_num {
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 1;
}

.lineup_name {
  display: -webkit-box;
  display: flex;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  justify-content: space-between;
  -webkit-box-align: end;
  align-items: flex-end;
}

.lineup01,
.lineup02,
.lineup03,
.lineup04,
.lineup05,
.lineup06,
.lineup07,
.lineup08,
.lineup09,
.lineup10 {
  content: "";
  display: inline-block;
  width: 30px;
  height: 30px;
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
}
.lineup01 {
}
.lineup01 {
  background-image: url("/PC/ja/asset/img/nw/feature/brandnew/01.png");
}

.lineup02 {
  background-image: url("/PC/ja/asset/img/nw/feature/brandnew/02.png");
}

.lineup03 {
  background-image: url("/PC/ja/asset/img/nw/feature/brandnew/03.png");
}

.lineup04 {
  background-image: url("/PC/ja/asset/img/nw/feature/brandnew/04.png");
}

.lineup05 {
  background-image: url("/PC/ja/asset/img/nw/feature/brandnew/05.png");
}

.lineup06 {
  background-image: url("/PC/ja/asset/img/nw/feature/brandnew/06.png");
}

.lineup07 {
  background-image: url("/PC/ja/asset/img/nw/feature/brandnew/07.png");
}

.lineup08 {
  background-image: url("/PC/ja/asset/img/nw/feature/brandnew/08.png");
}

.lineup09 {
  background-image: url("/PC/ja/asset/img/nw/feature/brandnew/09.png");
}

.lineup10 {
  background-image: url("/PC/ja/asset/img/nw/feature/brandnew/10.png");
}

.wheel_lineup img {
  width: 90%;
  max-width: 240px;
  display: block;
  margin: 0 auto;
  cursor: pointer;
}
.wheel_lineup h3 {
  color: #615b5b;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 800;
  font-size: 18px;
  margin: 0.5rem 0 0;
  padding: 0;
  width: 100%;
  display: block;
  cursor: pointer;
}

.h_long {
  margin-left: 2.5rem !important;
  width: 80%;
}

.h_long span {
  font-size: 16px;
}

.wheel_lineup p {
  color: #615b5b;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14px;
  text-align: justify;
  cursor: pointer;
  display: block;
height: 140px;
}

.lineup_btn {
  -webkit-box-pack: center;
  justify-content: center;
}
.lineup_btn p {
  margin: 0;
}


.zoom {
  width: 40px !important;
  position: absolute;
  top: 20px;
  left: 20px;
}
/*新商品紹介 ラインアップここまで*/
.next-arrow {
  right: 0;
  cursor: pointer;
}
.slide-arrow {
  position: absolute;
  top: 20%;
  margin-top: -15px;
	width: auto;
}
.prev-arrow {
  left: 0;
  cursor: pointer;
}
.slide-arrow {
  position: absolute;
  top: 20%;
  margin-top: -15px;
  z-index: 1
}



@media screen and (max-width: 959px) {
  .mk_content {
    width: 100%;
    padding: 50px 0;
  }

  .mk_inner {
    padding: 0 20px;
  }

  /*ピックアップ商品情報*/
  .pickup_item_name,
  .pickup_r .pickup_item_name {
    width: 55%;
  }
  .pickup_item_name h3 {
    font-size: 28px;
    margin: 0;
    display: block;
  }

  .item_info_wrapper h4 {
    margin: 0 0 20px;
    font-size: 18px;
  }

  .item_size {
    margin: 0 0 0.4em 1em;
  }

  /*ピックアップ商品画像*/
  .item_info_wrapper,
  .pickup_r .item_info_wrapper {
    width: 55%;
  }
  .item-viewer,
  .pickup_r .item-viewer {
    width: calC(45% - 20px);
  }
}
@media screen and (max-width: 870px) {
  /*ナビ*/
  .nav_area {
    padding: 20px;
  }

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


  .mk_wrapper {
    padding: 0;
  }
  /*ナビ*/

  .nav_area ul li {
    width: calc(100% / 3 - 10px);
  }

  /*各セクション共通*/

  .maker_name h2 {
    display: block;
    width: 100%;
    z-index: 3;
    position: relative;
    margin-bottom: 0;
  }
  .maker_name img {
    display: block;
    margin: 0 auto;
    width: 100%;
  }
  .logo-image_w {
    display: block;
    margin: 0 auto;
    width: 80%;
    max-width: 200px !important;
  }
  .logo-sub {
    display: -webkit-box;
    display: flex;
    width: 100%;
    margin-left: 0;
    padding: 0;
  }
  .logo-sub:before {
    content: none;
  }

  .mk_inner {
    padding: 0 20px;
  }

  /*ピックアップ商品情報*/
  .pickup_item_name,
  .pickup_r .pickup_item_name {
    width: 100%;
    -webkit-box-pack: center;
    justify-content: center;
    border-bottom: 2px solid var(--maincolor);
    position: relative;
    padding: 10px 0;
    margin-bottom: 40px;
  }

  .pickup_item_name h3 {
    font-size: 28px;
    margin: 0;
    display: block;
    width: 100%;
    text-align: center;
  }
  .pickup_item_name::before,
  .pickup_r .pickup_item_name::before {
    content: "";
    position: absolute;
    bottom: -44px;
    margin-left: -2px;
    border: 22px solid transparent;
    z-index: 2;
  }

  .pickup_item_name::after,
  .pickup_r .pickup_item_name::after {
    position: absolute;
    border: 24px solid transparent;
	border-top-color: var(--maincolor);
    border-bottom-width: 0;
    bottom: -25px;
    content: "";
    z-index:1;
    width: 0;
    height: 0;
    margin: 0;
    transform: none;
  }

  .mk_block .pickup_item_name::before,
  .mk_block .pickup_r .pickup_item_name::before,
  .mk_block_01 .pickup_item_name::before,
  .mk_block_01 .pickup_r .pickup_item_name::before,
  .mk_block_03 .pickup_item_name::before,
  .mk_block_03 .pickup_r .pickup_item_name::before {
    border-top: 22px solid #ffffff;
  }

  .mk_block_02 .pickup_item_name::before,
  .mk_block_02.pickup_r .pickup_item_name::before {
    border-top: 22px solid #f3f3f3;
  }

  .item_info_wrapper h4 {
    margin: 0 auto;
    font-size: 18px;
    text-align: center;
	display: block;
	 width: 100%;
  }

  /*ピックアップ商品画像*/
  .item_info_wrapper {
    width: 100%;
    order: 2;
  }
  .item-viewer,
  .pickup_r .item-viewer {
    width: 60%;
    margin: 0 auto 20px;
    order: 1;
  }
.car_slider_container{
    order: 3;
  }
	
	
  .pickupbtn_link,
  a.pickupbtn_link {
    order: 4;
  }
  .main-image {
    width: 80%;
  }
  .nav_area {
    padding: 20px;
    margin: 0;
  }
  .pickup {
    padding: 0;
    margin-bottom: 30px;
  }
  .item_size {
    margin: 0.4em 0;
  }
  .mk_inner {
    padding: 0 10px;
  }
  .item_info_wrapper,
  .pickup_r .item_info_wrapper {
    width: 100%;
  }

  .item_info_wrapper p {
    margin: 16px auto;
    width: 100%;
  }
  .car_img {
    width: 100%;
    max-width: 600px;
    margin: 20px auto 0;
  }

  .mk_block,
  .mk_block_01,
  .mk_block_02 {
    padding: 50px 10px;
  }
  .wheel_lineup p {
    height: 180px;
  }
}


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

	
  /*ナビ*/
  .nav_area {
    padding: 10px;
    margin: 0;
  }
  .nav_area ul li {
       width: calc(50% - 20px);
	 margin: 10px;
  }
	.nav_area ul li a {
    padding: 10px;
}
	
.nav_area ul li img {
    width: 130px;
    height: 34px;
    object-fit: contain;
}
	
  /*ピックアップ商品画像*/
  .item_info_wrapper {
    width: 100%;
  }
  .item-viewer,
  .pickup_r .item-viewer {
    width: 100%;
  }

  .item-viewer,
  .pickup_r .item_info_wrapper {
    width: 100%;
  }
}

@media screen and (max-width: 600px) {
  /*ピックアップ商品画像*/
  .pickupbtn_link,
  a.pickupbtn_link {
    margin: 40px auto 20px;
    box-sizing: border-box;
  }

  .wheel_lineup p {
    height: 110px;
	         margin-bottom: 20px;
  }
}

.slick-track {
  display: flex;
}
.slick-slide {
  height: auto !important;
}

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

  .pickup_item_name h3 {
    font-size: 24px;
    margin: 0;
    display: block;
    width: 100%;
    text-align: center;
  }

  .main-image {
    width: 100%;
  }
  .slider {
    padding: 0 10px 1rem;
  }
  .slide-arrow {
    position: absolute;
    top: 20%;
    right: -10px;
    margin-top: -15px;
    z-index: 1;
  }
  .prev-arrow {
    left: -10px;
    cursor: pointer;
  }
  .next-arrow {
    right: -10px;
    cursor: pointer;
  }
  .item_info_wrapper p {
    font-size: 14px;
  }
  .car_img img {
    max-width: 100%;
    display: block;
    object-fit: cover;
    margin: 0 auto;
    height: 240px;
  }
  .car_img_l img {
    object-position: left top;
  }
  .car_img_r img {
    object-position: right top;
  }
}
.slick-list {
  min-height: 610px !important;
}
.item_info_wrapper h4 span {
  display: inline-block;
}

.feature_main{
  width: 100%;
margin: 0 auto;
	max-width: 100%;
}

/*20250601追記*/
.car_slider_container {
  margin:0 auto;
  max-width: 960px;
  width: 100%;
  display: block;
}
.car_slider_container img {
  height: auto;
  width: 100%;
}
.car_thumbnail .slick-track {
  transform: unset !important;
}
.car_thumbnail-img {
  opacity: 0.3;
transition: opacity .3s linear;
width: calc(100% / 6 - 20px)!important;
margin: 0 10px 20px;
}
.car_thumbnail .slick-current {
  opacity: 1;
}

.car_thumbnail .slick-list{
display: -webkit-box;
display: flex;
flex-wrap: wrap;
 min-height: 0!important;
-webkit-box-pack: start;
justify-content: flex-start;
}

.car_thumbnail .slick-list .slick-track{
width: 100%!important;
max-width: 960px!important;
}
.car_slider .slick-img{
position: relative;
}
.car_slider .slick-list {
padding: 0;
min-height: 0!important;
}

.slick-track{
cursor: pointer;
}



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

.car_thumbnail-img {
    opacity: 0.3;
    transition: opacity .3s linear;
    width: calc(100% / 4 - 20px) !important;
    margin: 0 10px;
}


}

/*タブの切り替え*/
.tabs_01 {
    width: 100%;
 /* max-width: 1000px;*/
 /* margin: 20px auto 10px;*/
    position: relative;
 /* padding: 0 20px 40px;*/
    /* box-sizing: border-box;*/
}
.tab-buttons {
 /*background-color: #ffffff;*/
position: relative; /* 仕切り線の基準 */
  display: flex;
}

.tab-buttons span {
  color: #FFFFFF;
  cursor: pointer;
  display: block;
 float: none;
  width: 50%;
  text-align: center;
  font-weight: 400;
  transform: rotate(0.05deg);
 /*background-color: #ffffff;*/
 /*box-shadow:
    0 -3px 4px rgba(0, 0, 0, 0.12); /* 上だけ */
font-size:16px;
padding: 10px 0;
line-height: 2.5;
}

.tab-buttons span:first-child {
 /*box-shadow:
    0 -3px 4px rgba(0, 0, 0, 0.12),  /* 上 */
 /* 3px 0 4px rgba(0, 0, 0, 0.08);   /* 右のみ */
}

.tab-buttons span:last-child {
  box-shadow:
    0 -3px 4px rgba(0, 0, 0, 0.12),  /* 上 */
   -3px 0 4px rgba(0, 0, 0, 0.08);   /* 左のみ */
}


.w_tab.is-active,.s_tab.is-active {
  /*background-color:#f75204;*/
  color: #ffffff;
  font-size: 20px;
  font-weight: 800;
/*box-shadow:
 0 -3px 4px rgba(0, 0, 0, 0.12),  /* 上 */
 /* 3px 0 4px rgba(0, 0, 0, 0.08);   /* 右のみ */
}

.tab-buttons::after {

}
#content1 { }
#content2 { }

/* ▼外枠：高さアニメのためにheightをtransition */
.tab-content {
  position: relative;
  overflow: hidden;                 /* 高さアニメ時にはみ出さない */
  height: auto;                     /* JSが数値で上書きする */
  transition: height 0.35s ease;    /* 高さのヌルっと伸縮 */
/*padding: 30px;*/
  display: block;
  font-size: 13px;
  color: #333;
  width: 100%;
/*background-color: #FFFFFF;
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;*/
}

/* ▼中身：display切替をやめてフェード＋スライド */
.content.content1,
.content.content2 {
  display: block;
  position: absolute; /* 重ねる */
  top: 0;
  left: 0;
  width: 100%;

  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;

  transition: opacity 0.25s ease, transform 0.25s ease;
}

.content.content1.is-active,
.content.content2.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  position: relative; /* アクティブだけ通常フローに戻す（高さ計測しやすい） */
}

/* アイコン */
.cate_name1::before {
  content: "";
  display: inline-block;
  width: 50px;
  height: 50px;
  margin-right: 5px;
  margin-top: -7px;
  background-image: url("/PC/ja/asset/img/nw/feature/cp_list/web_icon.png");
  background-size: contain;
  vertical-align: middle;
  background-repeat: no-repeat;
}

#content1.select > .cate_name1::before {
  background-image: url("/PC/ja/asset/img/nw/feature/cp_list/web_icon_select.png");
}

.cate_name2::before {
  content: "";
  display: inline-block;
  width: 50px;
  height: 50px;
  margin-right: 5px;
  margin-top: -7px;
  background-image: url("/PC/ja/asset/img/nw/feature/cp_list/shop_icon.png");
  background-size: contain;
  vertical-align: middle;
  background-repeat: no-repeat;
}

#content2.select > .cate_name2::before {
  background-image: url("/PC/ja/asset/img/nw/feature/cp_list/shop_icon_select.png");
}


/*タブの切り替えここまで*/

ul.lineup_items {
list-style: none;
display: -webkit-box;
display: flex;
flex-wrap: wrap;
-webkit-box-pack: justify;
justify-content: space-between;
}



ul.lineup_items li {
display: block;
width: calc(100% / 3 - 20px);
}

/* 下線インジケーター */
.tab-buttons{
  position: relative;
 padding-top: 40px;
background-color:#019fb7;
}

/* 下線（スライド移動） */
.tab-underline{
  position: absolute;
   left: 0;
  top: auto;   
  bottom: 0;              /* タブの下端 */
  height: 5px;            /* 太さ */
  width: 50%;             /* タブ2つなので 50% */
  background: #F3E200;    /* 下線色（好みで） */
  transform: translateX(0);
  transition: transform 0.32s cubic-bezier(.2,.8,.2,1), background-color 0.2s ease;
  z-index: 6;
  pointer-events: none;
}

/* 右タブがアクティブのとき右へ */
.tab-buttons.is-right-active .tab-underline{
  transform: translateX(100%);
}

/* タブごとに色を変える（任意） */
.tab-buttons.is-left-active  .tab-underline{ background:#F3E200; }
.tab-buttons.is-right-active .tab-underline{ background:#F3E200; }


@media screen and (max-width: 640px) {
.tabs_01 {
    margin-top: 0;
}
  .tab-buttons{
    position: sticky;
    top: var(--header-h, 0px);
    z-index: 100;
    background: #fff;
  }
}

@media screen and (max-width: 640px) {
  .tab-buttons span.is-active{

  }

  .tab-buttons.is-right-active span.s_tab.is-active{

  }
}


@media (max-width: 640px){
  .tabs_01 .tab-buttons{
    position: sticky;
    top: var(--header-h, 0px);
    z-index: 900; /* ヘッダーより下 */
    background: #019fb7;
  }
}


/* TOPイメージ */
.main_img {
 background-image: url(/PC/ja/asset/img/nw/feature/brandnew/2026/main_pc.webp);
background-size: cover;
background-position: center;
height:360px;
background-repeat: no-repeat;

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

.main_img {
background-size: cover;
height:340px;
}

}
@media screen and (max-width: 786px) {
.main_img {
height:260px;

}}
@media screen and (max-width: 720px) {
.main_img{

background-position: center;
}

}
@media screen and (max-width: 600px) {
.main_img{
 background-image: url(/PC/ja/asset/img/nw/feature/brandnew/2026/main_sp.webp);
background-position: center;
min-height: 360px;
}

}

@media screen and (max-width: 400px) {
    .main_img {
        min-height: 340px;
    }
}

.pickup_content{
width: 52%;
display: -webkit-box;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;

}

.item_info_wrapper {
    width: 100%; 
}


.item-viewer {
width: calc(48% - 40px);
 margin: 40px 0 20px 40px;
}


.item_info_wrapper p {
line-height: 1.8;
}


.item_size {
  margin: 0;
}

.item_info_wrapper {
-webkit-box-align: start;
align-items: flex-start;
	}


@media screen and (max-width: 959px) {
    .pickup_item_name, .pickup_r .pickup_item_name {
        width: 100%;
    }
}

/* PC */
.pickup{
  display:grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "left  viewer"
    "slider slider"
    "btn    btn";
  gap:20px;
  align-items:start;
}

.pickup_left{ grid-area:left; display:flex; flex-direction:column; gap:12px; }
.item-viewer{ grid-area:viewer;
width: calc(100% - 40px);
margin-left: 40px;}
.car_slider_container{ grid-area:slider; }
.pickupbtn_link{ grid-area:btn; }

/* スマホ：left を“分解”して name → viewer → info を実現 */
@media (max-width: 768px){
  .pickup{
    grid-template-columns: 1fr;
    grid-template-areas:
      "name"
      "viewer"
      "info"
      "slider"
      "btn";
	  width: 100%;
  }


.pickup-text {text-align: center;}
	
  .pickup_left{ display: contents; } /* ← これが決め手 */
  .pickup_item_name{ grid-area:name; }
  .item_info_wrapper{ grid-area:info; }
.item-viewer {
    width: 70%;
 margin: 20px auto;
}
	
	
}
.pickup > *{ min-width:0; }
.car_slider_container{ overflow:hidden; }
.car_slider_container img{ max-width:100%; height:auto; display:block; }


@media (max-width: 600px){
.item-viewer {
    width: 90%;
 margin: 20px auto;
}}


/* fadeup 共通（テキスト） */
.fadeup {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .7s ease, transform .7s ease;
  will-change: opacity, transform;
}
.fadeup.is-animated {
  opacity: 1;
  transform: translateY(0);
}

/* 画像と車はゆっくり */
.pickup-image.fadeup { transform: translateY(40px); transition-duration: .9s; }
.pickup-car.fadeup   { transform: translateY(40px); transition-duration: .9s; }
.pickup-cta.fadeup   { transform: translateY(24px); transition-duration: .6s; }

/* smooth（終点は4値推奨） */
.smooth {
  display: inline-block;
  clip-path: inset(0 100% 0 0);
  -webkit-clip-path: inset(0 100% 0 0);
  transition: clip-path 1.2s cubic-bezier(0.37, 0, 0.63, 1),
              -webkit-clip-path 1.2s cubic-bezier(0.37, 0, 0.63, 1);
  will-change: clip-path;
}
.smooth.is-animated {
  clip-path: inset(0 0 0 0);
  -webkit-clip-path: inset(0 0 0 0);
}

/* 任意：動きOFF設定 */
@media (prefers-reduced-motion: reduce) {
  .fadeup,
  .fadeup.is-animated,
  .smooth,
  .smooth.is-animated {
    transition: none !important;
    transform: none !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
    opacity: 1 !important;
  }
}

.anchor {
  display: block;
  position: relative;
  top: -1px; /* iOS対策 */
}


ul.spec_icons{
display: -webkit-box;
display: flex;
flex-wrap: wrap;
margin: 1em 0;
padding: 0;
list-style: none;
width: 100%;
gap:4px;
}

ul.spec_icons li{
display: block;
width: calc(100% / 5);


}

ul.spec_icons li img{
width: 100%;
border: none;


}
.slick-initialized .slick-slide {
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
}


.p_spec_icons{
display: -webkit-box;
display: flex;
flex-wrap: wrap;
margin: 1em 0;
padding: 0;
list-style: none;
width: 100%;
gap:4px;
-webkit-box-pack: justify;
justify-content: space-between;

}

.p_spec_icons img{
display: block;
width: calc(100% / 3 - 4px);
max-width: 100%;
margin: 0;
border: none;


}

.inch_btn {
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: block;
  padding: 0.2rem 0.5rem;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #615b5b;
  border: solid 1px #615b5b;
  border-radius: 0.5rem;
  border-radius: 100vh;
  font-family: "Noto Sans JP", sans-serif;
  margin: 0 0 0.2rem 0;
  width: auto;
  box-sizing: border-box;
}

.inch_btn span {
  font-size: 1rem;
}



.block_odd{
background: #FFFFFF;
}

.block_even{
background: #f3f3f3;
}

.pickup_tan{
border-bottom: none!important;
}


.pickup-cta-wrap{
  display:flex;
  gap:12px;
  flex-wrap:wrap; /* 画面狭い時は折り返し */
}


/* ===== タイヤコンテンツ全体 ===== */


.tire_pickup{
width: 100%;
max-width: 960px;
margin: 0 auto;
box-sizing: border-box;
    border-bottom: #615b5b solid 1px;
    padding: 40px 0;
}

.pickup_tire{
display:flex;
-webkit-box-pack: justify;
justify-content: space-between;

}
/* ===== タイヤ商品名 ===== */
/*タイヤ商品名 WRAPPER*/
.tire_info_name{
display: -webkit-box;
display: flex;
flex-wrap: wrap;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
width: 94%;
margin: 0 auto 20px;
}
/*メーカーロゴ*/
.mk_logo_info{
display: block;
width: 50%;
max-width: 180px;
height: auto;
margin: 0
}
/*商品名ロゴ*/
.logo_box{
  width: 480px;   /* ロゴ表示幅を統一 */
  height: 60px;   /* 高さも統一 */
  display: flex;
-webkit-box-pack: start;
justify-content: flex-start;
}

.item_logo_info{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/*商品名称*/
.sub_name{
font-size: 13px;
text-align: center;
}	
.sub_name span{
display: inline-block;
}

.pickup_item_tire_name{
  width: 100%;
}

/*リード文*/
.pickup_item_tire_name h4{
font-size: 24px;
width: 100%;
text-align: center;
padding: 0 ;
margin: 20px auto;
display: block;
}

.pickup_item_tire_name h4 span{
display: inline-block;
}
/* ===== タイヤ情報 ===== */
/*タイヤ情報 WRAPPER*/

.pickup_tire_content{
  display:flex;
  flex-direction:column;
  gap:16px;
  width: auto;
　box-sizing: border-box;
 flex: 1 1 0;
  min-width: 0; 
}

.tire_pickup-text {
font-size: 16px;
line-height: 1.8;

}

.tire_pickup-text p {
display: block;
margin-bottom: 20px;
}

.tire_info_spec{
    width: 100%;
    padding: 0 16% 0 0;
    margin-right: 40px;
    box-sizing: border-box;
}

/*タイヤ情報 表*/
.tire_spec_detail{
width: 100%;
}
.tire_spec_detail dl {
display: flex;
flex-flow: row wrap;
width: 100%;
}
.tire_spec_detail dt {
width: 100px;
padding: 10px;
background-color: #f1f1f1;
border-bottom: 1px solid #ccc;
box-sizing: border-box;
font-size: 13px;
font-weight: bold;
display: -webkit-box;
display: flex;
-webkit-box-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
align-items: center;

}
.tire_spec_detail dd {
width: calc(100% - 100px);
padding: 10px;
background-color: #fff;
border-bottom: 1px solid #ccc;
box-sizing: border-box;
margin: 0;

}
.tire_spec_detail dt:first-of-type, .tire_spec_detail dd:first-of-type{
border-top: 1px solid #ccc;
}
.tire_spec_detail dd > ul{
display: -webkit-box;
display: flex;
list-style: none;
margin: 0;
padding: 0;
}

ul.body_type{
flex-wrap: nowrap;
gap:16px;
}

ul.lable_list {
flex-wrap: wrap;
gap:4px;
}


ul.body_type li{
width: calc(100% / 5);
max-width: 60px;
}

ul.lable_list li{
width: auto;
height: 40px;
}


ul.body_type li img{
width: 100%;
}
 

ul.lable_list li img{width: 100%;
    object-fit: contain;
    height: 40px;
}

/*タイヤ情報 ボタン*/

.tire_cta_area{
display: -webkit-box;
display: flex;
flex-wrap: wrap;
-webkit-box-pack: justify;
justify-content: space-between;
width: 100%;
margin-top: 40px;

}

.tire_cta_area_btn {
    color: #fff;
    background-color: var(--maincolor);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5;
    position: relative;
    display: block;
    padding: 1rem;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    text-align: center;
    text-decoration: none;
    letter-spacing: 0.1em;
    border-radius: 0.25rem;
    width: 100%;
	margin-bottom: 20px;
    box-sizing: border-box;
cursor: pointer;

}
.tire_cta_area_btn a {
text-decoration: none!important;
width: 100%;
display: block;

}
.tire_cta_area_btn:hover {
  background: #67c5ff;
  color: white;
}



/* ===== タイヤ画像 ===== */
.pickup-image_tire{
width: auto;
box-sizing: border-box;
}


.tire_img{
  width: 100%;
  height: 400px; /* PC */
  overflow: hidden;
}

.tire_img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center; /* ← 上寄せ */
}




/* ===== SP ===== */
@media (max-width:768px){
/* ===== タイヤ商品名 ===== */
.logo_box{
  width: 100%;   /* ロゴ表示幅を統一 */
  height: 60px;   /* 高さも統一 */
  display: flex;
  align-items: center;
  justify-content: center;
}
.mk_logo_info {
    display: block;
    width: 40%;
    max-width: 200px;
    height: auto;
    margin: 0 0 20px;
}
/* ===== タイヤ情報 ===== */
/*タイヤ情報 WRAPPER*/
	
  /* Aの箱を消して中身を外に出す */
 .pickup_tire_content{
    display:contents;
  }

  /* 並び順を指定 */
  .pickup_item_tire_name{ order:1; }
  .pickup-image_tire{ order:2; }
  .tire_info_spec{ order:3; }

.tire_info_spec{
margin: 0 0 20px;
padding: 20px;
}


  .pickup_tire{
    display:grid;
    grid-template-columns:1fr;
  }

/*タイヤ情報 表*/
.tire_spec_detail dl {
flex-flow: column;
}
.tire_spec_detail dt,.tire_spec_detail dd {
width: 100%;
border: none;
}
.tire_spec_detail dt:first-of-type, .tire_spec_detail dd:first-of-type{
border-top: none;
}	
/*タイヤ情報 ボタン*/

.tire_cta_area{
display: -webkit-box;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
flex-wrap: wrap;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
width: 100%;

}
	
	

.tire_cta_area_btn {
width: 100%;
  padding: 1em;
margin-bottom: 20px;


}
	
/* ===== タイヤ画像 ===== */	
.pickup-image_tire{
width: 100%;
box-sizing: border-box;
}
.tire_img{
  width: 80%;
 max-width: 360px;
  height: auto; /* PC */
  margin: 0 auto;
}
	
}

.tire_info_btn{
  width: 100%;

}

/*
.js-tab-wrap { overflow: visible; }
*/

.pickup-cta-wrap{
  grid-area: btn;
  display:flex;
  gap:12px;
}

.pickup_btns{
margin: 20px auto!important;
}