@charset "utf-8";

.container {
	max-width: 1200px;
}

h3 {
	font-size: 21px;
	font-weight: bold;
	letter-spacing: 1px;
}

@media screen and (min-width: 1200px) {
	section.top-section {
		margin-top:100px;
	}
	section.top-section:last-child {
		margin-bottom:100px;
	}
}
@media only screen and (min-width: 768px){
	.container {
		width: auto;
        margin-inline: auto;
    }
	section.top-section {
		margin-top:100px;
	}
}

body.fixed section.wrapper {
	margin-top: 0px;
}

/*car list*/
.top-carmodel__body-pc ul,
.top-carmodel__body-sp ul {
    list-style: none;
    margin-left: inherit;
    margin-bottom: inherit;
    padding: 0;
}
@media screen and (min-width: 581px) {
  ._sp {
    display: none;
  }
}
@media screen and (min-width: 960px) {
  ._underTab {
    display: none;
  }
}
._overTab {
  display: none;
}
@media screen and (min-width: 581px) {
  ._overTab {
    display: block;
  }
}
._pc {
  display: none;
}
@media screen and (min-width: 960px) {
  ._pc {
    display: block;
  }
}
.top-carmodel__body-pc {
  margin-top: 40px;
}

.top-carmodel__tablist {
  text-align: center;
  width: 100%;
  display: table;
  border-collapse: collapse;
  /*隣接する要素のborderを共有*/
}

.top-carmodel__tabitem {
  display: table-cell;
  vertical-align: middle;
  padding: 14px 5px;
  background-color: #f6f6f6;
  border: 1px solid #ccc;
  letter-spacing: 0.1px;
  font-weight: bold;
  font-size: 14px;
  color: #000;
  cursor: pointer;
}

.top-carmodel__tabitem.is-active {
  position: relative;
  background-color: #fff;
  border-bottom: none;
}

.top-carmodel__tabitem.is-active::after {
  content: "";
  display: block;
  width: 70%;
  height: 5px;
  background-color: #c3002f;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.top-carmodel__panel {
  display: none;
  padding-top: 15px;
  padding-bottom: 35px;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}

.top-carmodel__panel.is-show {
  display: block;
}

.top-carmodel__panel-list {
  display: flex;
  justify-content: center;
  align-items: center;
}

.top-carmodel__panel-item {
  width: 16%;
  text-align: center;
  position: relative;
  cursor: pointer;
}

.top-carmodel__panel-item > .vehicle-block {
  display: block;
  padding: 10px;
}

.top-carmodel__panel-item img {
  width: 100%;
}

.top-carmodel__panel-item .carname {
    display: block;
    margin-top: 5px;
    font-size: 14px;
    position: relative;
}
.top-carmodel__panel-item .carname::after {
    content: "\e66c";
    font-family: icon-Nissan-Global;
    speak: none;
    font-weight: 400;
    line-height: 1;
    font-size: 13px;
    color: #c3002f;
    position: absolute;
    right: 0;
    top: 18%;
}
.top-carmodel__panel-item.menu-open .carname::after {
    content: "\e609";
    font-family: icon-Nissan-Global;
    color: #323232;
}


.top-carmodel__body-sp {
  margin-top: 30px;
  font-size: 3.5vw;
  border-bottom: 1px solid #d2d2d2;
}

.top-carmodel__header {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0 0.8em;
  padding: 12px 30px 12px 0;
  border-top: 1px solid #d2d2d2;
}

.top-carmodel__header-mark {
  position: absolute;
  right: 20px;
  width: 13px;
  height: 13px;
}

.top-carmodel__header-lines {
  position: relative;
  width: 100%;
  height: 100%;
}

.top-carmodel__header-lines span {
  position: absolute;
  top: 5px;
  width: 100%;
  height: 2px;
  background-color: #c3002f;
  border-radius: 1px;
}

.top-carmodel__header-lines span:last-child {
  transform: rotate(90deg);
  transition: all 0.3s;
}

.top-carmodel__header-lines.is-active span:last-child {
  transform: rotate(0);
}

.top-carmodel__header img {
  width: 25%;
  max-width: 130px;
}

@media screen and (min-width: 581px) {
  .top-carmodel__header img {
    padding-left: 10px;
  }
}

.top-carmodel__content {
  display: none;
  padding: 15px 0;
}

.top-carmodel__list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 0;
}

@media screen and (min-width: 581px) {
  .top-carmodel__list {
    gap: 0 10px;
  }
}

.top-carmodel__item {
    width: 50%;
    display: block;
    position: relative;
    cursor:pointer;
}
@media screen and (min-width: 581px) {
  .top-carmodel__item {
    width: 150px;
  }
}

.top-carmodel__item a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0 0.3em;
    min-height: 70px;
}

@media screen and (min-width: 581px) {
  .top-carmodel__item a {
    padding: 10px;
    flex-direction: column;
  }
}

.top-carmodel__item img {
  width: 90%;
}

@media screen and (min-width: 581px) {
  .top-carmodel__item img {
    width: 100%;
  }
}

.top-carmodel__item .carname {
    display: block;
    width: 80%;
    text-align: center;
    font-size: 14px;
    line-height: 1.3;
    position: relative;
}
@media screen and (min-width: 581px) {
    .top-carmodel__item .carname {
        width: 60%;
    }
}

.top-carmodel__item .carname::after {
    content: "\e66c";
    font-family: icon-Nissan-Global;
    speak: none;
    font-weight: 400;
    line-height: 1;
    font-size: 13px;
    color: #c3002f;
    position: absolute;
    right: 0;
    top: 18%;
}
.top-carmodel__item.menu-open .carname::after {
    content: "\e609";
    font-family: icon-Nissan-Global;
    color: #323232;
}
@media screen and (min-width: 581px) {
  .top-carmodel__item .carname {
    padding: 3px 0;
    font-size: 14px;
    width: 100%;
  }
}

/*car menu*/
.menu-open .info-links {
    display: block;
}
.info-links {
    display: none;
    background-color: #2a2a2a;
    z-index: 10;
    width: 240px;
    position: absolute;
    top: auto;
    left: 50%;
    transform: translateX(-50%);
}
@media screen and (min-width: 581px) and (max-width: 959px){
    .top-carmodel__item:nth-of-type(4n-3) .info-links {
        left: 0;
        transform: none;
    }
    .top-carmodel__item:nth-of-type(4n) .info-links {
        left: auto;
        right: 0;
        transform: none;
    }
}
@media screen and (max-width: 580px) {
    .top-carmodel__item:nth-of-type(odd) .info-links {
        left: 0;
        transform: none;
    }
    .top-carmodel__item:nth-of-type(even) .info-links {
        left: auto;
        right: 0;
        transform: none;
    }
}
.info-links span {
    display: block;
    position: relative;
    font-size: 12px;
    border-bottom: 1px solid #1a1a1a;
}
.info-links span a {
    color: #fff;
    text-decoration: none;
    display: block;
    padding: 16px 30px 16px 50px;
    font-size: 12px;
    text-align: left;
    min-height: auto;
}
.info-links span:before {
    overflow: hidden;
    left: 15px;
    top: 50%;
    position: absolute;
}
/*before icon*/
.info-links {
    line-height: 1.5;
}
.info-links .icon-first:before {
    font-family: 'icon-Nissan-Global' !important;
    content: "\e667";
    color: #c1c1c1;
    margin-top: -18px;
    left: 13px;
    font-size: 25px;
}
.info-links .icon-second:before {
    font-family: 'icon-Nissan-Global' !important;
    content: "\e64e";
    color: #c1c1c1;
    margin-top: -18px;
    left: 16px;
    font-size: 19px;
}
.info-links span a:after{
    font-family: icon-Nissan-Global;
    speak: none;
    font-style: normal;
    font-weight: 400;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    font-size: 9.42857px;
    content: "";
    color: #c3002f;
    right: 20px;
    top: 50%;
    margin-top: -0.5em;
    position: absolute;
    font-variant: normal;
    overflow: hidden;
}

.carlist-wrap {
	color: #000;
    margin-block: 70px;
}
@media screen and (min-width: 768px) {
    .carlist-wrap {
        margin-block: 120px;
    }
}

.page-title {
	text-align: center;
	line-height: 1.3;
	letter-spacing: .11px;
	font-size: 2em !important;
	font-family: "Nissan Light","Nissan Regular",Verdana,Arial,sans-serif;
}
@media screen and (min-width: 1200px) {
	.page-title {
		font-size: 2.5714285714em !important;
		margin-top: 60px;
	}
}
.page-title-text {
	text-align: center;
	font-size: 1.6em !important;
	letter-spacing: 0.08em;
	margin-top: 30px;
}
@media screen and (min-width: 1200px) {
	.page-title-text {
		text-align: center;
		font-size: 1.715em !important;
		letter-spacing: 0.08em;
		margin-top: 40px;
	}
}

.carlist-bottom-links {
    max-width: 1200px;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 30px;
	display: flex;
	justify-content: center;
	column-gap: 20px;
	margin-bottom: 60px;
}
@media screen and (max-width: 860px) {
	.carlist-bottom-links {
		max-width: 410px;
		flex-direction: column;
		row-gap: 20px;
	}
}
.carlist-bottom-links .link_box {
	background-color: #eeeeee;
	border: none;
	color: #666666;
	text-decoration: none;
}
.carlist-bottom-links .link_box .text-min {
	font-size: 0.8em;
}

.carlist-bottom-links .link_box:nth-child(1) {
/*	flex-grow: 0.14; */
}
.carlist-bottom-links .bigger {
	font-size: 1.2em;
}
.carlist-bottom-links .icon-right-arrow:after {
	color: #c3002f;
}
.carlist-bottom-links .link_box.icon-right-arrow:hover:after {
    transform: translateX(5px);
    transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
}

section.wrapper {
    padding-right: 15px;
    padding-left: 15px;
}
/*1024～1199pxまで*/
@media screen and (min-width: 1024px) and (max-width: 1199px) {
    section.wrapper {
        margin-top: 100px;
    }
}