@charset "utf-8";
/* CSS Document */
/*　/sp/配下の各モデルのスペシャルサイトで使用しています*/
/******************************************************************************

 Common

******************************************************************************/
#menu ul.snsLink li a:before{
 color: #000 !important;
}

h2.ttl {
 font-size: 250%;
 line-height: 1.4em;
 /*font-family: 'PorscheNextJPTP-Thin';*/
 font-family: 'PorscheNextJPTP-Regular';
 margin-left: 5%;
 margin-bottom: 0.5em;
}
@media screen and (max-width: 1070px) {
 h2.ttl {
  font-size: 156.25%;
 }
}
.linkBtn {
 display: inline-block;
}
.linkBtn a{
 display: inline-block;
 padding: 1em 2em;
 font-size: 100%;
 line-height: 1.2em;
 text-decoration: none !important;
 background: #323232;
 color: #FFF !important;
 -webkit-transition:background 0.3s ease-in-out;
 transition:background 0.3s ease-in-out;
}
@media screen and (max-width: 1070px) {
 .linkBtn a{
  font-size: 75%;
 }
}
@media screen and (min-width: 1071px) {
 .linkBtn a:hover{
  background: #d5001c;
 }
}
.linkBtn.alpha a{
 background: rgba(37,35,27,0.7);
}
@media screen and (min-width: 1071px) {
 .linkBtn.alpha a:hover{
  background: rgba(213,0,28,0.7);
 }
}
.linkBtn.border a{
 background: none;
 border: 1px solid #FFF;
 -webkit-transition:all 0.3s ease-in-out;
 transition:all 0.3s ease-in-out;
}
@media screen and (min-width: 1071px) {
 .linkBtn.border a:hover{
  background: #d5001c;
  border-color:  #d5001c;
 }
}

.linkBtn.playIcon a:after{
 content: "";
 display: inline-block;
 width: 30px;
 height: 30px;
 background: url(../common_img/icon_play.png) no-repeat center center;
 background-size: cover;
 vertical-align: middle;
 margin-left: 1em;
 font-size: 112.5%;
}
@media screen and (max-width: 1070px) {
 .linkBtn.playIcon a:after{
  width: 20px;
  height: 20px;
 }
}
/*.linkBtn a.arrowLeft:before {
 content:"";
 display: inline-block;
 width: 1em;
 height: 1.2em;
 background: url(../common_img/icon_arrow_wh.png) no-repeat center left;
 background-size: auto auto;
 vertical-align: middle;
 margin-right: 0.5em;
}*/
.linkBtn a.arrowLeft:before {
 content: "";
 font-family: pag-iconfont;
 vertical-align: middle;
 margin-right: 0.5em;
}
/*@media screen and (max-width: 1070px) {
 .linkBtn a.arrowLeft:before {
  background: url(../common_img/icon_arrow_wh.png) no-repeat center left;
  background-size: auto 60%;
 }
}*/
.linkBtn a.arrowBack:before {
 content: "";
 font-family: pag-iconfont;
 vertical-align: middle;
 margin-right: 0.5em;
}
@media screen and (max-width: 1070px) {
 .linkBtn a.arrowBack:before {

 }
}
.linkBtn a.arrowRight:after {
 content: "";
 font-family: pag-iconfont;
 vertical-align: middle;
 margin-left: 0.5em;
}
@media screen and (max-width: 1070px) {
 .linkBtn a.arrowRight:after {

 }
}


.flexWrap {
 display: -webkit-flex;
 display: flex;
 flex-wrap:wrap;
 -webkit-flex-wrap:wrap;
 justify-content:space-between;
 -webkit-box-pack:justify;
 -webkit-justify-content:space-between;
 align-items:center;
 -webkit-box-align:center;
 -webkit-align-items:center;
}
@media screen and (max-width: 1070px) {
 .flexWrap:not(.spFlex) {
  display: block;
 }
}
.flexWrap.half {
 padding: 0 7%;
}
@media screen and (max-width: 1070px) {
 .flexWrap.half {
   padding: 0;
 }
}
.flexWrap.half > * {
 width: 50%;
 box-sizing: border-box;
}
.flexWrap.clm2 > .large {
 width: 57%;
 box-sizing: border-box;
}
.flexWrap.clm2 > .small {
 width: 43%;
 box-sizing: border-box;
}
@media screen and (max-width: 1070px) {
 .flexWrap.half > * ,
 .flexWrap.clm2 > .large,
 .flexWrap.clm2 > .small{
  width: 100%;
 }
}
.js-center{
 justify-content: center;
 -webkit-box-pack:center;
 -webkit-justify-content:center;
}
.js-start{
 justify-content: flex-start;
 -webkit-box-pack:flex-start;
 -webkit-justify-content:flex-start;
}
.js-end{
 justify-content: flex-end;
 -webkit-box-pack:flex-end;
 -webkit-justify-content:flex-end;
}
.al-center {
 align-items:center;
 -webkit-box-align:center;
 -webkit-align-items:center;
}
.al-start {
 align-items:flex-start;
 -webkit-box-align:flex-start;
 -webkit-align-items:flex-start;
}
.al-end {
 align-items:flex-end;
 -webkit-box-align:flex-end;
 -webkit-align-items:flex-end;
}
.al-stretch {
 align-items: stretch;
	-webkit-box-align: stretch;
}
.reverse{
 flex-direction: row-reverse;
 -webkit-flex-direction: row-reverse;
 -webkit-box-direction:reverse;
}
.column{
 flex-direction: column;
 -webkit-box-orient: vertical;
 -webkit-box-direction: normal;
}
@media screen and (max-width: 1000px) {
 .flexWrap:not(.spFlex) {
  display: block;
 }
.flexWrap:not(.spFlex) > * {
  width: 100%;
  position: relative;
 }
}

/*** swiper ***/
.swiper-wrapper {
 padding-bottom: 50px;
}
.swiper-button-next {
 background: url("../common_img/arrow_next_wh_pc.png") no-repeat center center;
 width: 50px;
 height: 50px;
 margin-top: -25px;
 left: auto;
 right: 2.5%;
}
.swiper-button-next:hover {
 background: url("../common_img/arrow_next_rd_pc.png") no-repeat center center;
}
.swiper-button-prev{
 background: url("../common_img/arrow_prev_wh_pc.png") no-repeat center center;
 width: 50px;
 height: 50px;
 margin-top: -25px;
 left: 2.5%;
 right: auto;
}
.swiper-button-prev:hover{
 background: url("../common_img/arrow_prev_rd_pc.png") no-repeat center center;
}
@media screen and (max-width: 1070px) {
 .swiper-button-next {
  background: url("../common_img/arrow_next_wh_sp.png") no-repeat center center;
  background-size: 100% 100%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  left: auto;
  right: 2%;
 }
 .swiper-button-next:hover {
  background: url("../common_img/arrow_next_rd_sp.png") no-repeat center center;
  background-size: 100% 100%;
 }
 .swiper-button-prev{
  background: url("../common_img/arrow_prev_wh_sp.png") no-repeat center center;
  background-size: 100% 100%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  left: 2%;
  right: auto;
 }
 .swiper-button-prev:hover{
   background: url("../common_img/arrow_prev_rd_sp.png") no-repeat center center;
   background-size: 100% 100%;
  }
}
.swiper-container-horizontal > .swiper-pagination-bullets,
.swiper-pagination-custom,
.swiper-pagination-fraction {
 bottom: 0px;
}
.swiper-pagination-bullet {
 width: 10px;
 height: 10px;
 opacity: 1;
 background: #c8c8c8;
 -webkit-transition:background 0.3s ease-in-out;
 transition:background 0.3s ease-in-out;
}
.swiper-pagination-bullet:hover {
 background: #d5001c;
}
.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
 margin: 0 10px;
}
.swiper-pagination-bullet-active {
 opacity: 1;
 background: #000;
}
@media screen and (max-width: 1070px) {
 .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 5px;
 }
}


/*** slick ***/
.slick-dotted.slick-slider {
 margin-bottom: 0;
}
.slick-prev:before,
.slick-next:before {
 content: none;
}
.slick-arrow {
 width: 50px;
 height: 50px;
 z-index: 1;
}
@media screen and (max-width: 1070px) {
 .slick-arrow{
  width: 20px;
  height: 20px;
  z-index: 2;
 }
}
.slick-prev {
 top: 45%;
 left: 2.5%;
}
.slick-next {
 top: 45%;
 right: 2.5%;
}
.slick-prev img,
.slick-next img {
 -webkit-transition:all 0.3s ease-in-out;
 transition:all 0.3s ease-in-out;
}
.slick-prev:hover img,
.slick-next:hover img {
 opacity: 0;
}
.slick-prev:hover {
 background: url(../../assets/common_img/arrow_prev_rd_pc.png) no-repeat center center;
 background-size: 100% 100%;
}
.slick-next:hover {
 background: url(../../assets/common_img/arrow_next_rd_pc.png) no-repeat center center;
 background-size: 100% 100%;
}
@media screen and (max-width: 1070px) {
 .slick-prev {
  top:35%;
  left: 2%;
 }
 .slick-next {
  top:35%;
  right: 2%;
 }
}
section .slide-dots {
 display: none !important;
}
@media screen and (max-width: 1070px) {
 section .slide-dots {
  display: block !important;
  margin-top: 1em;
 }
 .slide-dots{
  text-align: center;
 }
 .slide-dots li{
  display: inline-block;
  margin: 0 5px;
 }
 .slide-dots li button{
  position: relative;
  text-indent: -9999px;
  background: #c8c8c8;
  border: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  padding: 0;
 }
 .slide-dots li button:before{
  content: none;
 }
 .slide-dots li.slick-active button {
  background: #000;
 }
 .slide-dots li.slick-active button:before{
  content: none;
 }
}

.slick-prev.slick-disabled,
.slick-next.slick-disabled{
  opacity: 0;
  cursor:default;
}


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

 fixNav

*********************************************/
#fixNav {
 width: 360px;
 position: fixed;
 z-index: 5;
 top:38%;
 right: 0;
}
@media screen and (max-width: 1070px) {
 #fixNav {
  width: 100%;
  top:auto;
  right: auto;
  bottom: 0;
  left: 0;
 }
 #fixNav ul {
  display: -webkit-flex;
  display: flex;
  flex-wrap:nowrap;
  -webkit-flex-wrap:nowrap;
  justify-content:space-between;
  -webkit-box-pack:justify;
  -webkit-justify-content:space-between;
  align-items:stretch;
  -webkit-box-align:stretch;
  -webkit-align-items:stretch;
 }
}
#fixNav li {
 -webkit-transition:margin 0.5s ease-in-out;
 transition:margin 0.5s ease-in-out;
}
@media screen and (max-width: 1070px) {
 #fixNav li {
  width: 34%;
  box-sizing: border-box;
  border-right: 1px solid #000;
 }
 #fixNav li:last-child {
  border: none;
 }
}
#fixNav li .icon{
 display: inline-block;
 width: 40px;
 height: 40px;
 vertical-align: middle;
 box-sizing: border-box;
 padding: 10px;
}
@media screen and (max-width: 1070px) {
 #fixNav li .icon{
  padding: 10px;
 }
}
#fixNav li a{
 display: block;
 padding: 0;
 color: #FFF;
 line-height: 1em;
 background: #1e1e1e;
 text-decoration: none;
}
@media screen and (max-width: 1070px) {
 #fixNav li a{
  text-align: center;
  font-size: 75%;
 }
}
@media screen and (max-width: 480px) {
 #fixNav li a{
  font-size: 2.8vw;
 }
}
#fixNav li:hover a{
 background: #d5001c;
}
#fixNav li a:hover img{ opacity: 1;}


@media screen and (min-width: 1071px) {
 #fixNav {
  width: 200px;
  right: 0;
  -webkit-transition:margin 0.5s ease-in-out;
  transition:margin 0.5s ease-in-out;
 }
 #fixNav {
  right:-160px;
 }
 #fixNav li {
  transform: translateX(-160px);
  animation: navFM 0.6s ease-out forwards;
 }
 #fixNav li:nth-child(1) {animation-delay: 0.3s;}
 #fixNav li:nth-child(2) {animation-delay: 0.5s;}
 #fixNav li:nth-child(3) {animation-delay: 0.7s;}
 #fixNav li:hover {
  margin-left: -160px;
 }
 #fixNav li a,
 #fixNav li.on a:hover{
  background: #d5001c;
 }
 #fixNav li.on a {
  background: #1e1e1e;
  -webkit-transition:background 0.5s ease-in-out;
  transition:background 0.5s ease-in-out;
 }
}
.navFM.on{
 -webkit-animation-name: navFM;
 animation-name: navFM;
}
@-webkit-keyframes navFM {
 0% { transform: translateX(-160px); }
 100% { transform: translateX(0); }
}
@keyframes navFM {
 0% {  transform: translateX(-160px); }
 100% { transform: translateX(0);}
}


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

 modelSec

************************************************/
.modelSec {
 padding: 2.5em 0;
 background: #000;
}
.modelSec h2.ttl{
 color: #FFF;
}
.modelSec .modelList li{
 width: 33.33333333%;
}
.modelSec .modelList li a {
 display: block;
 position: relative;
 padding: 0 !important;
 color: #FFF;
}
.modelSec .btnInner h3{
 position: absolute;
 left:20px;
 bottom: 20px;
 z-index: 2;
 font-size: 250%;
}
@media screen and (max-width: 1070px) {
 .modelSec .btnInner h3{
  font-size: 93.75%;
  left:10px;
  bottom: 10px;
  line-height: 1.2;
 }
}
.modelSec .btnInner p {
 position: absolute;
 z-index: 2;
 right: 20px;
 bottom: 20px;
 font-size: 112.5%;
}
@media screen and (max-width: 1070px) {
 .modelSec .btnInner p{
  display: none;
 }
}
.modelSec .btnInner p:before {
 content: "";
 font-family: pag-iconfont;
 color: #d5001c;
 margin-right: 0.5em;
 display: inline-block;
 width: 1em;
 height: 1.75em;
 /*background: url(/sp/assets/common_img/icon_arrow.png) no-repeat center left;
 background-size: auto auto;*/
 vertical-align: middle;
}

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

 pj-page-bottom-banner

*********************************************/
.pj-page-bottom-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50 !important;
  background-color: rgba(25, 31, 34, 0.85);
  display: none;
}
.pj-page-bottom-banner-inner {
  width: 1107px;
  max-width: 100%;
  padding: 10px;
  display: block;
  margin: 0 auto 0;
}
.pj-page-bottom-banner-inner {
  font-size: 112.5%;
  line-height: 1.45;
  font-family: 'PorscheNextJPTP-Regular',"PorscheNextWLa","Arial Narrow",sans-serif !important;
  font-weight: normal;
}
.pj-page-bottom-banner-contents {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
@media screen and (max-width: 1070px) {
 .pj-page-bottom-banner-contents {
  display: block;
 }
}
.pj-page-bottom-banner-contents p {
  margin: 0;
  margin-right: 0px;
  margin-right: 2em;
  line-height: 1.5;
  color: #fff;
}
@media screen and (max-width: 1070px) {
 .pj-page-bottom-banner-contents p {
  font-size: 87.5%;
  margin-right: 0;
 }
}
.pj-page-bottom-banner-contents a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  line-height: 1.4;
  color: #fff;
  background: #c00;
  border-radius: 3px;
  padding: .7em 1.2em;
  padding-left: 1.2em;
  text-decoration: none;
  font-family: 'PorscheNextJPTP-Bold','PorscheNextJPTP-Regular',"PorscheNextWLa","Arial Narrow",sans-serif !important;
  font-weight: normal;
}



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

 modal

******************************************************************************/
.blocker {
  z-index: 100;
 background:rgba(0,0,0,0.5);
}
.modal {
  width: 97%;
  background: #000;
  padding:0;
  border-radius: 0;
  max-width: 940px;
  line-height: 0;
}
.modal a.close-modal {
  position: absolute;
  z-index: 120;
  top: -35px;
  right: 0px;
  display: inline-block;
  width: 35px;
  height: 35px;
  overflow: hidden;
  border: none;
  background: transparent;
}
.modal a.close-modal::before {
  content: '';
  position: absolute;
  height: 2px;
  width: 100%;
  top: 50%;
  left: 0;
  background: #fff;
  border-radius: 5px;
  margin-top: -6px;
  transform: rotate(45deg);
}
.modal a.close-modal::after {
  content: '';
  position: absolute;
  height: 2px;
  width: 100%;
  top: 50%;
  left: 0;
  background: #fff;
  border-radius: 5px;
  margin-top: -6px;
  transform: rotate(-45deg);
}
.modal video {
 width: 100%;
 height: auto;
}





/*
 デジタルブック リンク
******************************************/
.digital-catalogue {
  padding-top: 3em;
  padding-bottom: 5em;
  background: #FFF;
  color: #000;
}

.digital-catalogue .dcWrap {
  padding: 0 7%;
}

#digital-catalogue.digital-catalogue .dcWrap ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 30px;
}

#digital-catalogue.digital-catalogue .dcWrap ul li a {
  color: #000;
}

#digital-catalogue.digital-catalogue .dcWrap ul li a:hover {
  color: #d5001c;
}

.digital-catalogue .arrowBlank::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 24 24"><path fill="%23000000" d="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z" /></svg>') no-repeat center center;
  background-size: auto auto;
  vertical-align: middle;
  transition: background 0.3s;
}

#digital-catalogue.digital-catalogue .dcWrap ul li .arrowBlank:hover::before {
  background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 24 24"><path fill="%23d5001c" d="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z" /></svg>') no-repeat center center;
}


@media screen and (max-width: 1070px) {
  #digital-catalogue.digital-catalogue .dcWrap ul {
    flex-direction: column;
  }
}