@charset "utf-8";
/******************************************************************************

 Component

******************************************************************************/
.c-relative {
 position: relative;
}
.c-inlineBlk {
 display: inline-block;
}
.c-red {
 color: #d5001c;
}
/*
 headline
******************************************/
.c-headline_01 {
 font-size: 375%;
 line-height: 1.2em;
}
.c-headline_02 {
 font-size: 312.5%;
 line-height: 1.2em;
 margin-bottom: 0.3em;
}
.c-headline_03 {
 font-size: 250%;
 line-height: 1.3em;
 margin-bottom: 0.5em;
}
.c-headline_04 {
 font-size: 225%;
 line-height: 1.3em;
 margin-bottom: 0.5em;
}
.c-headline_05 {
 font-size: 200%;
 line-height: 1.5em;
 margin-bottom: 0.5em;
}
.c-headline_06 {
 font-size: 175%;
 line-height: 1.6em;
 margin-bottom: 0.5em;
}
.c-headline_07 {
 font-size: 150%;
 line-height: 1.6em;
 margin-bottom: 0.5em;
}
.c-headline_08 {
 font-size: 137.5%;
 line-height: 1.6em;
}
.c-headline_09 {
 font-size: 125%;
 line-height: 1.6em;
 margin-bottom: 0.5em;
}

.c-elem__border {
 position: relative;
 margin-bottom: 1em;
}
.c-elem__border:after{
 content: "";
 display: block;
 width: 1em;
 height: 4px;
 background: #000;
 position: absolute;
 left: 50%;
 bottom: -0.5em;
 transform: translateX(-50%);
}


.c-elem__bb span{
 display: inline-block;
 border-bottom: 1px solid #000;
}
.c-elem__bbb span{
 display: inline-block;
 border-bottom: 4px solid #000;
}


/*
 text
******************************************/
.c-text_01 {
 font-size: 225%;
 line-height: 1.5em;
}
.c-text_02 {
 font-size: 200%;
 line-height: 1.5em;
}
.c-text_03 {
 font-size: 175%;
 line-height: 1.5em;
}
.c-text_04 {
 font-size: 162.5%;
 line-height: 1.5em;
}
.c-text_05 {
 font-size: 150%;
 line-height: 1.75em;
}
.c-text_06 {
 font-size: 137.5%;
 line-height: 1.75em;
}
.c-text_07 {
 font-size: 125%;
 line-height: 1.75em;
}
.c-text_08 {
 font-size: 112.5%;
 line-height: 1.75em;
}
.c-text_09 {
 font-size: 100%;
 line-height: 1.75em;
}
.c-text_10 {
 font-size: 87.5%;
 line-height: 1.75em;
}


.c-notice {
 font-size: 75%;
 line-height: 1.6em;
}
.c-textBlock p {
 margin-bottom: 1.75em;
}




/*
 icon
******************************************/
.c-icon {
 display: inline-block;
 width: 1.2em;
 height: 1.2em;
}
.c-icon {
 display: inline-block;
}
.c-icon img{
 vertical-align: text-top;
}
/*
 linkBtn textLink
******************************************/
.c-textLink a{
 text-decoration: underline;
}
.c-linkBtn {
 display: inline-block;
 position: relative;
 -webkit-transition: 0.3s ease-in-out;
 transition: 0.3s ease-in-out;
}
.c-linkBtn a{
 display: block;
 padding: 0.87em 2em;
 font-size: 100%;
 line-height: 1.5em;
 text-align: center;
 text-decoration: none;
 color: #FFF;
 background: #333;
 min-width: 200px;
 box-sizing: border-box;
}
@media screen and (max-width: 1070px) {
 .c-linkBtn a{
  padding: 0.75em 2em;
  min-width: initial;
 }
}
.c-borderBtn a{
 padding: 0.7em 2em;
 background: none;
 color: #000;
 border:2px solid #000;
}
.c-linkBtn.btn-red a{
 background: #d5001c;
 color: #FFF;
}
@media screen and (min-width: 1071px) {
 .c-linkBtn:hover a {
  color: #FFF !important;
  background: #d5001c;
 }
 .c-linkBtn.effect:before,
 .c-linkBtn.btn-white.effect:before{
  content: "";
  display: block;
  color: #FFF;
  background: #d5001c;
  width: 0%;
  height: 100%;
  position: absolute;
  top:0;
  left: 0;
  z-index: 0;
  -webkit-transition:width 0.3s ease-in-out;
  transition:width 0.3s ease-in-out;
 }
 .c-linkBtn.effect a{
  position: relative;
  z-index: 2;
 }
 .c-linkBtn.effect a:hover,
 .c-linkBtn.btn-white.effect a:hover{
  background: none;
  color: #FFF;
  border-color: #d5001c;
 }
 .c-linkBtn:hover.effect:before{
  width: 100%;
 }
}
/*
 arrow
******************************************/
.c-arrow {
 position: relative;
}
.c-arrowRight:after{
 content: "";
 font-family: 'pag-iconfont';
 display: inline-block;
 vertical-align: middle;
 font-size: 100%;
 pointer-events: none;
 margin-left: 0.5em;
}
.c-arrowLeft:before{
 content: "";
 font-family: 'pag-iconfont';
 display: inline-block;
 vertical-align: middle;
 font-size: 100%;
 pointer-events: none;
 margin-right: 0.5em;
 color: #d5001c;
}
.c-arrowBack:after{
 content: "";
 font-family: 'pag-iconfont';
 display: inline-block;
 vertical-align: middle;
 font-size: 100%;
 pointer-events: none;
}
/*
 playBtn
******************************************/
.c-playBtn {
 display: block;
 position: relative;
}
.c-playBtn:after{
 content: "";
 display: block;
 width: 3.75em;
 height: 3.75em;
 background: url("https://cdn.porsche.co.jp/events/showroom/nov20/images/icon_play.png") no-repeat center center rgba(255,255,255,0.5);
 background-size: 100% 100%;
 border-radius: 50%;
 position: absolute;
 top:50%;
 left: 50%;
 transform: translate(-50%,-50%);
 -webkit-transition:width 0.3s ease-in-out;
 transition:width 0.3s ease-in-out;
}
@media screen and (min-width: 1071px) {
 .c-playBtn:hover:after{
  background-color: rgba(213,0,28,0.5);
 }
}


.c-border-bottom {
 border-bottom: 1px solid #333;
}

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

 Project

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

/*
 mainview
******************************************/
.p-mainview{
 position: relative;
}
.p-mainview__bg {
 min-height: 580px;
 position: relative;
 z-index: 1;
}
.p-mainview__inner {
 position: relative;
}
.p-mainview__title {
 color: #FFF;
 position: absolute;
 top: auto;
 bottom: 1em;
 left: 3%;
 z-index: 3;
}
@media screen and (max-width: 1070px) {
 .p-mainview__title {
  left: 4%;
 }
 .p-mainview__h1{
  font-size: 8vw;
 }
 .p-mainview__h2{
  font-size: 3.4vw;
 }
}
.p-mainview__title.right{
 left: auto;
 right: 3%;
 text-align: right;
}
@media screen and (max-width: 1070px) {
 .p-mainview__title.right{
  text-align: left;
  right: auto;
  left: 4%;
 }
}
.p-mainview__title.add_shadow {
 text-shadow: 0 0 10px rgba(0,0,0,1);
}
@media screen and (max-width: 1070px) {

}

/*
 leadBox
******************************************/
.p-leadBox {
 width: 100%;
 box-sizing: border-box;
}
.p-leadBox__text {
 margin-bottom: 1.5em;
}
.p-leadBox__text p{
 margin-bottom: 1em;
}

/*
 entranceBox
******************************************/
.p-entranceBox {}
.p-entranceBox__ph {
 width: 64%;
}
@media screen and (max-width: 1070px) {
 .p-entranceBox__ph {
  width: 100%;
  margin-bottom: 1.5em;
 }
}
.p-entranceBox__content {
 flex: 1;
 box-sizing: border-box;
 /*padding-left: 4%;*/
 padding: 0 10px;
}
@media screen and (max-width: 1070px) {
 .p-entranceBox__content {
  width: 100%;
  padding: 1em 4% 0;
 }
}
.reverse .p-entranceBox__content {
 padding-right: 4%;
 padding-left: 7%;
}
@media screen and (min-width: 1071px) and (max-width: 1400px) {
 .reverse .p-entranceBox__content {
  padding-left: 10px;
 }
}
@media screen and (max-width: 1070px) {
 .reverse .p-entranceBox__content {
  padding: 1em 4% 0;
 }
}


/*
 articleBox
******************************************/
.p-articleBox {}
.p-articleBox__ph {
 width: 50%;
}
@media screen and (max-width: 1070px) {
 .p-articleBox__ph {
  width: 100%;
  margin-bottom: 1em;
 }
}
.p-articleBox__content {
 flex: 1;
 box-sizing: border-box;
 padding-top: 1em;
 padding-left: 4%;
 margin-bottom: 1em;
}
.reverse .p-articleBox__content {
 padding-right: 4%;
 padding-left: 0;
}
@media screen and (max-width: 1070px) {
 .p-articleBox__content,
 .reverse .p-articleBox__content{
  width: 100%;
  padding: 0;
 }
}
.p-articleBox__text {
 margin-bottom: 1.5em;
}
.p-articleBox__text p{
 margin-bottom: 1em;
}
/*
 singleClmBox
******************************************/
.p-singleClmBox {}

/*
 centerPhBox
******************************************/
.p-centerPhBox {
 max-width: 1000px;
 margin: 0 auto;
}
.p-centerPhBox__ph {
 width: 100%;
 margin-bottom: 1em;
}
.p-relationList {
 padding: 3.75em 0;
}
.p-relationList__inner {
 padding: 0 15px;
}
.p-relationList__ph {
 margin-bottom: 1em;
}

/*
 phBanner
******************************************/
.p-phBanner {
 
}
.p-phBanner__ph {
 width: 100%;
 position: relative;
}
.p-phBanner__ph.is-half {
 width: 50%;
}
@media screen and (max-width: 767px) {
 .p-phBanner__ph.is-half {
   width: 100%;
 }
}
.p-phBanner__content {
 width: 94%;
 position: absolute;
 left: 3%;
 bottom: 1.5em;
 z-index: 2;
}
@media screen and (max-width: 767px) {
 .p-phBanner__content {
  bottom: 0.5em;
 }
 .p-phBanner__content.is-spStack {
  position: static;
  width: 100%;
  font-size: 0.75em;
  padding-top: 0.5em;
 }
 .p-phBanner__content.is-spStack .u-white {
  color: #000 !important;
 }
}

/*
 bottomBanner
******************************************/
.p-bottomBanner {
 width: 100%;
 position: fixed;
 top:auto;
 bottom: 0;
 background: rgba(0,0,0,1);
 z-index: 50;
 text-align: center;
 box-sizing: border-box;
}
.p-bottomBanner.is-static{
 position:static;
}
.p-bottomBanner__home {
 background: #000;
 position: relative;
 height: 90px;
}
.p-bottomBanner__btn a{
 min-width: initial;
 padding-left: 1em;
}
.p-bottomBanner__btn .c-arrowLeft:before{
 margin-right: 1.5em;
}
@media screen and (max-width: 1070px) {
 .p-bottomBanner__home {
  height: 95px;
 }
 .p-bottomBanner__inner {
  padding: 0 4% !important;
 }
 .p-bottomBanner__text {
  font-size: 90%;
  margin-bottom: 5px;
 }
 .p-bottomBanner__btn {
  width: 100%;
  box-sizing: border-box;
  margin: 0 auto !important;
 }
}


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

 

******************************************************************************/
.p-slideWrap {
 position: relative;
}



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

 Utility

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

/*** none ***/
.pcnone { display: none;}
.spnone { display: block;}
@media screen and (max-width: 1070px) {
 .tabnone { display: none;}
 .tabdisp { display: block;}
}
@media screen and (max-width: 767px) {
 .pcnone { display: block;}
 .spnone { display: none;}
}


/*** align ***/
.ar { text-align:right;}
.al { text-align:left;}
.ac { text-align:center;}
@media screen and (max-width: 767px) {
.sp_al { text-align: left !important;}
}
.u-va__top{ vertical-align: top !important;}
.u-va__midd{ vertical-align: middle!important;}

/*** clearfix ***/
.cf:after{
 content: "."; 
 display: block; 
 height: 0; 
 font-size:0; 
 clear: both; 
 visibility:hidden;
}


.u-red { color: #D5001C;}
.u-white { color: #FFF !important;}
.u-black { color: #000 !important;}

.u-bg__black { background: #000;}
.u-bg__black *,
.u-bg__black a{ color: #FFF;}
@media screen and (min-width: 1071px) {
 .u-bg__black a:hover { color: #d5001c;}
}


.u-bg__gray { background: #eeeeee;}


.u-width__2em { width: 2em !important;}
.u-width__3em { width: 3em !important;}
.u-width__4em { width: 4em !important;}

.u-max__1120 { max-width: 1120px;}
.u-max__1070 { max-width: 1070px;}
.u-max__940 { max-width: 940px;}
.u-max__900 { max-width: 900px;}
.u-max__840 { max-width: 840px;}
.u-max__550 { max-width: 550px;}
.u-max__500 { max-width: 500px;}
.u-max__450 { max-width: 450px;}
.u-max__400 { max-width: 400px;}

.u-pd__1 { padding-top: 1em; padding-bottom: 1em;}
.u-pd__15 { padding-top: 1.5em; padding-bottom: 1.5em;}
.u-pd__2  { padding-top: 2em; padding-bottom: 2em;}
.u-pd__3 { padding-top: 3em; padding-bottom: 3em;}
.u-pd__375 { padding-top: 3.75em; padding-bottom: 3.75em;}
.u-pd__5  { padding-top: 5em; padding-bottom: 5em;}

.u-pt__1 { padding-top: 1em;}
.u-pt__2 { padding-top: 2em;}
.u-pt__3 { padding-top: 3em;}
.u-pt__375 { padding-top: 3.75em;}

.u-pb__1 { padding-bottom: 1em;}
.u-pb__2 { padding-bottom: 2em;}
.u-pb__25 { padding-bottom: 2.5em;}
.u-pb__3 { padding-bottom: 3em;}
.u-pb__375 { padding-bottom: 3.75em;}

.u-mt__05 { margin-top: 0.5em;}
.u-mt__1 { margin-top: 1em;}
.u-mt__2 { margin-top: 2em;}
.u-mt__3 { margin-top: 3em;}

.u-mb__0 { margin-bottom: 0 !important;}
.u-mb__02 { margin-bottom: 0.2em !important;}
.u-mb__05 { margin-bottom: 0.5em !important;}
.u-mb__1 { margin-bottom: 1em !important;}
.u-mb__15 { margin-bottom: 1.5em !important;}
.u-mb__2 { margin-bottom: 2em !important;}
.u-mb__25 { margin-bottom: 2.5em !important;}
.u-mb__3 { margin-bottom: 3em !important;}
.u-mb__375 { margin-bottom: 3.75em !important;}
.u-mb__5 { margin-bottom: 5em !important;}
.u-mb__8 { margin-bottom: 8em !important;}

.u-ml__05 { margin-left: 0.5em;}
.u-ml__1 { margin-left: 1em;}
.u-ml__2 { margin-left: 2em;}
.u-ml__3 { margin-left: 3em;}

.u-mr__05 { margin-right: 0.5em;}
.u-mr__1 { margin-right: 1em;}
.u-mr__2 { margin-right: 2em;}
.u-mr__3 { margin-right: 3em;}