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

 Component

******************************************************************************/
.c-relative {
 position: relative;
}
.c-inblock {
 display: inline-block;
}
#dev {
 color: #FF0000;
 font-size: 150%;
 z-index: 5;
 position: fixed;
 top:1em;
 left: 1em;
}

/*
 headline
******************************************/
.c-headline_01 {
 font-size: 375%;
 line-height: 1.2em;
}
@media screen and (max-width: 1070px) {
 .c-headline_01 {
  font-size: 280%;
  line-height: 1.2em;
 }
}
.c-headline_02 {
 font-size: 312.5%;
 line-height: 1.2em;
 margin-bottom: 0.3em;
}
@media screen and (max-width: 1070px) {
 .c-headline_02 {
  font-size: 220%;
  line-height: 1.2em;
 }
}
.c-headline_03 {
 font-size: 250%;
 line-height: 1.3em;
 margin-bottom: 0.5em;
}
@media screen and (max-width: 1070px) {
 .c-headline_03 {
  font-size: 225%;
  line-height: 1.2em;
 }
}
.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__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: 175%;
 line-height: 1.5em;
}
.c-text_03 {
 font-size: 150%;
 line-height: 1.75em;
}
.c-text_04 {
 font-size: 125%;
 line-height: 1.75em;
}
.c-text_05 {
 font-size: 112.5%;
 line-height: 1.75em;
}
.c-text_06 {
 font-size: 100%;
 line-height: 1.75em;
}
.c-text_07 {
 font-size: 87.5%;
 line-height: 1.75em;
}


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




/*
 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: "";
 display: block;
 width: 1.5em;
 height: 1.5em;
 background: url('data:image/svg+xml;utf8,<svg  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="9px" height="14px"><path fill-rule="evenodd" fill="rgb(255, 255, 255)" d="M9.009,7.000 L1.952,14.009 L0.541,12.607 L6.186,7.000 L0.541,1.393 L1.952,-0.008 L7.597,5.599 L7.597,5.598 L9.009,7.000 Z"/></svg>') no-repeat center center;
 background-position: 100% auto;
 position: absolute;
 top:50%;
 right: 1em;
 transform: translateY(-50%);
 pointer-events: none;
}
.c-arrowLeft {
 padding-left: 3em !important;
}
.c-arrowLeft:after{
 content: "";
 display: block;
 width: 1.5em;
 height: 1.5em;
 background: url('data:image/svg+xml;utf8,<svg  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="9px" height="14px"><path fill-rule="evenodd" fill="rgb(255, 255, 255)" d="M9.009,7.000 L1.952,14.009 L0.541,12.607 L6.186,7.000 L0.541,1.393 L1.952,-0.008 L7.597,5.599 L7.597,5.598 L9.009,7.000 Z"/></svg>') no-repeat center center;
 background-position: 100% auto;
 position: absolute;
 top:50%;
 left: 1em;
 transform: translateY(-50%);
 pointer-events: none;
}
.c-arrowBack:after{
 content: "";
 display: block;
 width: 1.2em;
 height: 1.2em;
 background: url('data:image/svg+xml;utf8,<svg  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="9px" height="14px"><path fill-rule="evenodd" fill="rgb(255, 255, 255)" d="M2,5.6L2,5.6L7.6,0L9,1.4L3.4,7L9,12.6L7.6,14L0.5,7L2,5.6z"/></svg>') no-repeat center center;
 background-position: 100% auto;
 position: absolute;
 top:50%;
 left: 1em;
 transform: translateY(-50%);
 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);
 }
}


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

 Project

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

/*
 mainview
******************************************/
.p-mainview{
 position: relative;
 min-height: 580px;
}
.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{
  position: static;
  padding: 1em 4%;
  color: #000 !important;
 }
}
.p-mainview__title.right{
 left: auto;
 right: 3%;
 text-align: right;
}
@media screen and (max-width: 1070px) {
 .p-mainview__title.right{
  text-align: left;
 }
}
.p-mainview__video {
 z-index: 1;
 min-height: 400px;
}
.p-mainview__video video{
 display: block;
 width: 110%;
 height: auto;
 position: absolute;
 top:50%;
 left: 50%;
 transform: translate(-50%,-50%);
}
.p-mainview__video.tate video{
 width: auto !important;
 height: 110% !important;
}


/*
 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: 57%;
}
@media screen and (max-width: 1070px) {
 .p-entranceBox__ph {
  width: 100%;
 }
}
.p-entranceBox__content {
 width: 43%;
 box-sizing: border-box;
 padding-left: 4%;
 padding-right: 7%;
}
@media screen and (max-width: 1070px) {
 .p-entranceBox__content {
  width: 100%;
  padding: 1em 4%;
  margin-bottom: 1em;
 }
}

/*
 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 {
 width: 50%;
 box-sizing: border-box;
 padding-top: 1em;
 padding-left: 5%;
 padding-right: 7%;
 margin-bottom: 1em;
}
.reverse .p-articleBox__content {
 padding-left: 7%;
 padding-right: 5%;
}
@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;
}

/*
 bottomBanner
******************************************/
.p-bottomBanner {
 width: 100%;
 position: fixed;
 top:auto;
 bottom: 0;
 background: rgba(0,0,0,0.7);
 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;
}
@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;
 }
}


/*
 floatingBanner
******************************************/
.p-floatingBanner {
 position: fixed;
 right: 1%;
 bottom: 12%;
 width: 100px;
 height: 100px;
 overflow: hidden;
 z-index: 99;
 box-shadow: 0 0 5px rgba(0,0,0,0.3);
 background: #FFF;
}
.fadeIn {
 opacity: 0;
 visibility: hidden;
 -webkit-transition: 0.6s ease-in-out;
 transition: 0.6s ease-in-out;
}
.fadeIn.show{
 opacity:1;
 visibility: visible;
}
@media only screen and (min-width: 1070px) {
 .p-floatingBanner {
  width: 160px;
  height: 160px;
 }
}
.p-floatingBanner a{
 display: block;
 background: #FFF;
 padding: 2px;
 text-decoration: none;
 -webkit-transition: 0.3s ease-in-out;
 transition: 0.3s ease-in-out;
}
.p-floatingBanner a p {
 color: #000 !important;
}
@media only screen and (min-width: 1070px) {
 .p-floatingBanner a{
  padding:  3px;
 }
}
.p-floatingBanner a .text{
 padding: 0.3em;
 margin: 0;
 position: relative;
 text-align: left;
 font-size: 81%;
 line-height: 1.4em;
}
@media screen and (max-width: 1070px) and (min-width: 768px){
 .p-floatingBanner a .text{
  font-size: 9px;
  line-height: 1.4em;
 }
}
@media only screen and (max-width: 767px) {
 .p-floatingBanner a .text{
  font-size: 9px;
  line-height: 1.4em;
 }
}

.p-floatingBanner a .text:before {
 content: "";
 font-family: pag-iconfont;
 -webkit-transform: translateY(-50%);
 transform: translateY(-50%);
 position: absolute;
 top: 50%;
 right: 0;
 color: #d5001c;
}
@media only screen and (min-width: 1070px) {
 .p-floatingBanner a .text:before {
  right: 0.5em
 }
}
/******************************************************************************

 souljourney

******************************************************************************/
.p-headline {
 background: #000;
 color: #FFF;
 position: relative;
}
.p-headline__contents {
 padding: 45% 0 5em;
 position: relative;
 text-align: center;
}
@media screen and (max-width: 1070px) {
 .p-headline__contents {
  padding: 85% 0 5em;
 }
}
.p-headline__bg {
 position: absolute;
 top:0;
 left: 0;
 overflow: hidden;
}
.p-headline__bg.is-fixed {
 position: fixed;
}
.p-headline__bg:after {
 content: "";
 display: block;
 background: rgba(0,0,0,0.7);
 width: 100%;
 height: 100%;
 position: absolute;
 top:100%;
 left: 0;
 z-index: 1;
 transition: all 0.5s cubic-bezier(0.165, 0.840, 0.440, 1.000);
 transition-delay: 0.3s;
}
.p-headline__bg.is-fixed:after {
 top:0;
}



.p-concept {
 color: #FFF;
 position: relative;
 background: url("https://cdn.porsche.co.jp/sp/taycan/popup/images/bg_concept_02.jpg") no-repeat bottom right #112233;
 background-size: 70% auto;
}
@media screen and (max-width: 1070px) {
 .p-concept {
  background: #112233;
  padding-bottom: 0;
 }
}




.p-snsCam {
 padding: 3.75em 0 1.5em;
 position: relative;
 background: url("https://cdn.porsche.co.jp/sp/taycan/popup/images/bg_tweet_02.jpg") no-repeat center center #FFF;
 background-size: cover;
 position: relative;
}
.p-snsCam:before {
 content: "";
 display: block;
 background: rgba(255,255,255,0.7);
 width: 100%;
 height: 100%;
 position: absolute;
 top:0;
 left: 0;
 z-index: 1;
}
.p-snsCam__content {
 position: relative;
 z-index: 2;
}

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

 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;}

.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-pt__5 { padding-top: 5em;}

.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-mb__0 { margin-bottom: 0 !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-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;}