@charset "utf-8";

@font-face {
  font-family: 'PorscheNextJPTP-Bold';
  src:
   url("../../../assets/fonts/PorscheNextJPTP-Bold.eot?")  format('eot'),
   url("../../../assets/fonts/PorscheNextJPTP-Bold.woff")  format('woff'),
   url("../../../assets/fonts/PorscheNextJPTP-Bold.tff") format('truetype');
}
/* CSS Document */
/******************************************************************************

 layout

******************************************************************************/
body {
 color: #FFF;
 background: #000;
 position: relative;
 font-feature-settings: "palt";
 overflow-x: hidden;
}
@media screen and (max-width: 767px) {
 #wrapper {
  font-size: 14px;
  line-height: 1.75em;
 }
}

#container {
 width: 100%;
 position: relative;
 background: #000;
}


#num {
 position: fixed;
 top:1em;
 left: 1em;
 font-size: 200%;
 z-index: 100;
 color: #FF0000;
}
@media screen and (max-width: 1070px) {
  #num { color: #FF0099;}
}
/******************************************************************************

 common

******************************************************************************/
.section {
 margin-bottom: 5em;
 position: relative;
}
@media screen and (max-width: 1070px) {
 .section {
  margin-bottom: 3em;
 }
}
.contents_header {
 padding: 0 7%;
}
@media screen and (max-width: 1070px) {
 .contents_header {
  padding: 0 4%;
 }
}
.contents_inner {
 padding: 0 7%;
}
@media screen and (max-width: 1070px) {
 .contents_inner {
  padding: 0 4%;
 }
}
h2.tit {
 font-size: 250%;
 line-height: 1.4em;
 margin-bottom: 0.5em;
}
@media screen and (max-width: 767px) {
 h2.tit {
  font-size: 200%;
 }
}


.body_copy {
 font-size: 112.5%;
 line-height: 1.75em;
 margin-bottom: 1.5em;
}
@media screen and (max-width: 1070px) {
 .body_copy {
  font-size: 100%;
  line-height: 1.75em;
 }
}
.body_copy p{
 margin-bottom: 1.75em;
}
.lead {
 font-size: 112.5%;
 line-height: 1.75em;
 margin-bottom: 1.75em;
 max-width: 960px;
}

sup,sub {
 font-size: 60%;
}
small {
 font-size: 87.5%;
}
ul.listMark li {
 margin-left: 1em;
 text-indent: -1em;
 line-height: 1.4em;
 margin-bottom: 0.5em;
}


@media screen and (max-width: 767px) {
 .linkBtn a {
  font-size: 100%;
 }
}
@media screen and (min-width: 1071px) {
 .sponly { display: none;}
}
@media screen and (max-width: 1070px) {
  .pconly { display: none;}
}
/******************************************************************************

 mainView

******************************************************************************/
#mainView {
 position: relative;
 background: url(../images/mv_pc.jpg) no-repeat center center;
 background-size: cover;
 min-height: 500px;
 height: 630px;
 overflow: hidden;
}
@media screen and (max-width: 1070px) {
 #mainView {
  background: url(../images/mv_sp.jpg) no-repeat center center;
  background-size: cover;
  min-height:auto;
 }
}
#mainView .videoWrap {
 line-height: 0;
 font-size: 0;
}
#mainView video{
 width: 100%;
 height: auto;
 position: absolute;
 top:50%;
 left: 50%;
 transform: translate(-50%,-50%);
}
#mainView #videoWrap_pc { display: block;}
#mainView #videoWrap_sp { display: none;}
@media screen and (max-width: 1070px) {
 #mainView #videoWrap_pc { display: none;}
 #mainView #videoWrap_sp { display: block;}
}
#mainView .videoWrap.tate video{
 width: auto !important;
 height: 100% !important;
}

#mainViewInner {
 position: absolute;
 width: 100%;
 top: 50%;
 left: 50%;
 transform: translate(-50%,-50%);
 box-sizing: border-box;
 text-align: center;
}
#mainViewInner h1{
 font-size: 437.5%;
 line-height: 1.75em;
}
@media screen and (max-width: 1070px) {
 #mainViewInner h1{
  font-size: 375%;
 }
}
@media screen and (max-width: 420px) {
 #mainViewInner h1{
  font-size: 10vw;
 }
}
#mainViewInner h2{
 font-size: 225%;
 line-height: 1.2em;
}
@media screen and (max-width: 1070px) {
 #mainViewInner h2{
  font-size: 180%;
 }
}
@media screen and (max-width: 420px) {
 #mainViewInner h2{
  font-size: 5vw;
 }
}
#mainViewInner h1 span {display: inline-block;}
#mainViewInner h2 span {display: inline-block;}
/******************************************************************************

 intoro

******************************************************************************/
.intro_Sec {
 text-align: center;
 padding: 3.5em 0 0;
 color: #FFF;
}
.intro_Sec .introInner {
 font-size: 125%;
 line-height: 1.75em;
}
@media screen and (max-width: 1070px) {
 .intro_Sec .introInner {
  font-size: 112.5%;
 }
}
.introInner p:nth-of-type(1) { animation-delay: 0.1s; transition-delay: 0.1s;}
.introInner p:nth-of-type(2) { animation-delay: 0.2s; transition-delay: 0.2s;}
.introInner p:nth-of-type(3) { animation-delay: 0.3s; transition-delay: 0.3s;}
.introInner p:nth-of-type(4) { animation-delay: 0.4s; transition-delay: 0.4s;}

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

 schedule

******************************************************************************/
.schedule_Sec .contents_inner{
 padding-right: 5%;
}
@media screen and (max-width: 1070px) {
 .schedule_Sec .contents_inner{
  padding-right: 4%;
 }
}
.schedule_Sec .body_copy {
 margin-bottom: 3em;
}

/* map  *******************************/
.schedule_Sec .map_wrap {
 width: 51%;
 background: #000;
 position: relative;
}
@media screen and (max-width: 1070px) {
 .schedule_Sec .map_wrap {
  width: 100%;
  margin-bottom: 2em;
 }
}
.schedule_Sec .map_wrap .marker {
 display: block;
 box-sizing: border-box;
 width: 3.5%;
 height: 0;
 padding-top: 3.5%;
 cursor: pointer;
 position: absolute;
}
.schedule_Sec .map_wrap .marker:nth-of-type(1) { top:65.5%; left: 65%;} /*NOW*/
.schedule_Sec .map_wrap .marker:nth-of-type(2) { top:13.5%; left: 72.5%;} /*札幌*/
.schedule_Sec .map_wrap .marker:nth-of-type(3) { top:70%; left: 32%;} /*姫路*/
.schedule_Sec .map_wrap .marker:nth-of-type(4) { top:64%; left: 63%;} /*浜田山*/
.schedule_Sec .map_wrap .marker:nth-of-type(5) { top:65.5%; left: 61%;} /*横浜青葉*/
.schedule_Sec .map_wrap .marker:nth-of-type(6) { top:62%; left: 64%;} /*浦和*/
.schedule_Sec .map_wrap .marker:nth-of-type(7) { top:77%; left: 3.5%;} /*福岡*/
.schedule_Sec .map_wrap .marker:nth-of-type(8) { top:62%; left: 54%;} /*松本*/
.schedule_Sec .map_wrap .marker:nth-of-type(9) { top:59.5%; left: 44.5%;} /*金沢*/
.schedule_Sec .map_wrap .marker:nth-of-type(10) { top:74%; left: 12%;} /*山口*/

.schedule_Sec .map_wrap .marker:nth-of-type(11) { top:72.5%; left: 18%;} /*広島*/
.schedule_Sec .map_wrap .marker:nth-of-type(12) { top:72%; left: 38%;} /*中大阪*/
.schedule_Sec .map_wrap .marker:nth-of-type(13) { top:58.5%; left: 65%;} /*宇都宮*/
.schedule_Sec .map_wrap .marker:nth-of-type(14) { top:62%; left: 67%;} /*つくば*/

.schedule_Sec .map_wrap .marker:nth-of-type(15) { top:69%; left: 38%;} /*グランフロント大阪*/
.schedule_Sec .map_wrap .marker:nth-of-type(16) { top:64%; left: 63%;} /*Tokyo ミッドタウン日比谷 */
.schedule_Sec .map_wrap .marker:nth-of-type(17) { top:68%; left: 48%;} /*三越LACHIC */

.schedule_Sec .map_wrap .marker:nth-of-type(18) { top:64%; left: 67.5%;} /*柏*/
.schedule_Sec .map_wrap .marker:nth-of-type(19) { top:76%; left: 23.5%;} /*高松*/

.schedule_Sec .map_wrap .marker:nth-of-type(20) { top:67%; left: 61%;} /*みなとみらい*/
.schedule_Sec .map_wrap .marker:nth-of-type(21) { top:66%; left: 45%;} /*尾張岐阜 */
.schedule_Sec .map_wrap .marker:nth-of-type(22) { top:69%; left: 50%;} /*岡崎 */

.schedule_Sec .map_wrap .marker:before {
 content: "";
 display: block;
 width: 100%;
 height: 100%;
 border:2px solid #00b0f4;
 border-radius: 50%;
 position: absolute;
 top:50%;
 left: 50%;
 transform: translate(-50%,-50%);
}
@media screen and (max-width: 767px) {
 .schedule_Sec .map_wrap .marker:before {
  border-width: 1px;
 }
}
.schedule_Sec .map_wrap .marker:after {
 content: "";
 display: block;
 width: 72%;
 height: 72%;
 background: #00b0f4;
 border-radius: 50%;
 position: absolute;
 top:50%;
 left: 50%;
 transform: translate(-50%,-50%);
}
.schedule_Sec .map_wrap .marker.invalid:before { border-color: #646464;}
.schedule_Sec .map_wrap .marker.invalid:after { background: #646464;}
.schedule_Sec .map_wrap .marker.current{
 -webkit-animation-name: scale;
 animation-name: scale;
 animation-duration: 2.4s;
 animation-timing-function: ease-in-out;
 animation-iteration-count: infinite;
}
@-webkit-keyframes scale {
 0% { transform: scale(1); transform-origin:center center;}
 60% { transform: scale(1.5); transform-origin:center center;}
 100% { transform: scale(1); transform-origin:center center;}
}
@keyframes scale {
 0% { transform: scale(1); transform-origin:center center;}
 60% { transform: scale(1.5); transform-origin:center center;}
 100% { transform: scale(1); transform-origin:center center;}
}

/* list  *******************************/
.schedule_Sec .list_wrap {
 width: 48%;
 box-sizing: border-box;
}
@media screen and (max-width: 1070px) {
 .schedule_Sec .list_wrap {
  width: 100%;
 }
}
.schedule_Sec .list_wrap .table_wrap {
 margin-bottom: 1.5em;
}
.schedule_Sec .list_wrap ul.table_list {
 width: 40vw;
 padding-left: 5.5em;
 box-sizing: border-box;
}
@media screen and (max-width: 1070px) {
  .schedule_Sec .list_wrap ul.table_list {
   width: 85vw;
 }
}
@media screen and (max-width: 767px) {
 .schedule_Sec .list_wrap ul.table_list {
  width: 99.1%;
  padding-left: 4em;
  font-size: 87.5%;
 }
 .schedule_Sec .list_wrap .table_head ul.table_list {
  width: 99%;
  width: calc(100% - 4px);
 }
}

.schedule_Sec .list_wrap ul.table_list .row {
 display: table;
 width: 100%;
 border-left: 1px solid #737373;
 border-right: 1px solid #737373;
 border-bottom: 1px solid #737373;
 position: relative;
}
.schedule_Sec .list_wrap ul.table_list .row  > *{
 display: table-cell;
 padding: 1em;
 line-height: 1.4em;
}
.schedule_Sec .list_wrap ul.table_list .row .period {
 width: 12em;
 border-right: 1px dotted #737373;
}
@media screen and (max-width: 1280px) {
 .schedule_Sec .list_wrap ul.table_list .row .period {
  width: 50%;
 }
}
.schedule_Sec .list_wrap ul.table_list .row a {
 color: #FFF;
 text-decoration: underline;
}
.schedule_Sec .list_wrap .table_head ul.table_list .row.thead {
 background: #262626;
 border-top: 1px solid #737373;
}
.schedule_Sec .list_wrap .table_body ul.table_list {
 margin-bottom: 1em;
}
.schedule_Sec .list_wrap .table_body {
 max-height: 450px;
 overflow-y: scroll;
 overflow-x: hidden;
 scrollbar-width: thin;
 position:relative
}
@media only screen and (max-width: 1070px) {
 .scrbar::-webkit-scrollbar{
  width: 3px;
 }
 .schedule_Sec .list_wrap .table_body {
  max-height: 300px;
 }
}
.schedule_Sec .list_wrap ul.table_list .row.next:after {
 content: "NEXT";
 font-family: 'PorscheNextJPTP-Bold',sans-serif;
 font-weight: normal;
 font-size: 125%;
 color: #00b0f4;
 position: absolute;
 top:50%;
 left: -3.8em;
 transform: translateY(-50%);
}
@media screen and (max-width: 767px) {
 .schedule_Sec .list_wrap ul.table_list .row.next:after {
  font-size: 100%;
 }
}
.schedule_Sec .list_wrap ul.table_list .row:before {
 content: "";
 width: 0;
 height: 0;
 border-style: solid;
 border-width: 6.5px 0 6.5px 11.3px;
 border-color: transparent;
 position: absolute;
 top:50%;
 left: -1.5em;
 transform: translateY(-50%);
}
@media screen and (max-width: 767px) {
 .schedule_Sec .list_wrap ul.table_list .row:before {
  border-width: 5px 0 5px 8px;
  left: -1em;
 }
}
.schedule_Sec .list_wrap ul.table_list .row.next:before {
 border-color: transparent transparent transparent #00b0f4;
}

.schedule_Sec .list_wrap ul.table_list .row .period:before {
 content: "";
 width: 5px;
 height: 0%;
 background: #00b0f4;
 position: absolute;
 top:0;
 left: 0;
}
@media screen and (max-width: 767px) {
 .schedule_Sec .list_wrap ul.table_list .row .period:before {
  width: 3px;
 }
}
.schedule_Sec .list_wrap ul.table_list .row.current .period:before {
 height: 100%;
 -webkit-transition:height 0.3s ease-in-out;
 transition:height 0.3s ease-in-out;
 /*transition-delay: 0.3s;*/
}
.schedule_Sec .list_wrap ul.table_list .row.invalid,
.schedule_Sec .list_wrap ul.table_list .row.invalid a{
 color: #646464;
}
.schedule_Sec .list_wrap ul.table_list .row .notice {
 font-size: 75%;
 line-height: 1.3em;
 margin-top: 5px;
}
.schedule_Sec ul.notice{
 padding-left: 5.5em;
}
@media screen and (max-width: 1070px) {
 .schedule_Sec ul.notice{
  padding-left: 0;
  font-size: 87.5%;
 }
}
/******************************************************************************

 live

******************************************************************************/
.live_Sec #StoryStreamWidgetApp {
 margin-bottom: 4.375em;
}
@media screen and (max-width: 1070px) {
 .live_Sec #StoryStreamWidgetApp {
  margin-bottom: 3em;
 }
}
#wrapper .stry-widget .stry-widget-inner .square-pane .no-burns.landscape .main-image {
 height: 100%;
 width: auto;
}
#wrapper .stry-widget .content-item-footer .stry-source .stry-avatar {
 height: 28px;
 width: 28px;
}
/******************************************************************************

 campaign

******************************************************************************/
.campaign_sec {
 padding: 2em 0 5em;
 position: relative;
}
@media screen and (max-width: 1070px) {
 .campaign_sec {
  padding: 2em 0 2em;
 }
}
.campaign_sec .phWrap {
 width: 57%;
}
@media screen and (max-width: 1070px) {
 .campaign_sec .phWrap {
  width: 94%;
  margin-bottom: 1em;
 }
}
.campaign_sec .textWrap {
 width: 40%;
 padding-right: 7%;
 box-sizing: border-box;
}
.campaign_sec .reverse .textWrap {
 padding-right: 0;
 padding-left: 7%;
}
@media screen and (max-width: 1070px) {
 .campaign_sec .textWrap,
 .campaign_sec .reverse .textWrap{
  width: 100%;
  padding: 0 6%;
  margin: 0 auto;
 }
}
.campaign_sec .campaign_detail {
 margin-bottom: 3.5em;
}
.campaign_sec .step_wrap li {
 margin-bottom: 2em;
}
.campaign_sec .step_wrap .num{
 width: 6em;
}
.campaign_sec .step_wrap div{
 width: 80%;
 width: calc(100% - 7em);
}
@media screen and (max-width: 1070px) {
 .campaign_sec .step_wrap div{
  width: 100%;
 }
}
.campaign_sec .terms_wrap dt{
 font-size: 180%;
 line-height: 1.4em;
 padding-right: 1em;
 padding-bottom: 0.5em;
 margin-bottom: 1em;
 border-bottom: 2px solid #FFF;
 position: relative;
 cursor: pointer;
}
@media screen and (max-width: 1070px) {
 .campaign_sec .terms_wrap dt{
  font-size: 130%;
 }
}
.campaign_sec .terms_wrap dt:after{
 content: "";
 font-family: pag-iconfont;
 position: absolute;
 right: 10px;
 top:50%;
 transform: translateY(-50%);
}
.campaign_sec .terms_wrap.active dt:after{
 transform: translateY(-50%) rotate(-180deg);
 transform-origin: center center;
}
.campaign_sec .terms_wrap dt span{
 display: inline-block;
 margin-right: 0.5em;
}
.campaign_sec .terms_wrap dd .block {
 margin-bottom: 1em;
}
.campaign_sec .terms_wrap dd .block h4{
 width: 10em;
}
.campaign_sec .terms_wrap dd .block >*:not(h4){
 width: 85%;
 width: calc(100% - 11em);
}
@media screen and (max-width: 1070px) {
 .campaign_sec .terms_wrap dd .block >*:not(h4){
  width: 100%;
 }
}

.exhibition_list a{
 color: #FFF;
 text-decoration: underline;
}
.exhibition_list h4 {
 font-size: 125%;
}
.exhibition_list li {
  margin-bottom: 1.5em;
}
.textArea p {
 margin-bottom: 1em;
}



.dl-wrap .dl {
 width: 46%;
 margin-bottom: 3em;
}
@media screen and (max-width: 1070px) {
 .dl-wrap .dl {
  width: 100%;
 }
}

.dl-wrap .dl h3{
 font-size: 112.5%;
 margin-bottom: 1em;
}
.dl-wrap .dl figure{
 margin-bottom: 2em;
}
.dl-wrap .dl .linkBtn {
 display: block;
 width: 10em;
 margin: 0 auto;
}
.dl-wrap .dl .linkBtn a{
 display: block;
 text-align: center;
 padding: 1em 0;
}
.dl-wrap .dl .linkBtn a.disabled{
 pointer-events: none;
 color: #666 !important;
}


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

 offer

*********************************************/
.offerBase {
 width: 100%;
 height: 100px;
 background: #000;
 position: relative;
}
@media screen and (max-width: 1070px) and (min-width: 769px){
 .offerBase {
  height: 0;
  padding-top: 86px;
 }
}
@media screen and (max-width: 768px){
 .offerBase {
  height: 0;
  padding-top: 50px;
 }
}
@media screen and (max-width: 430px){
 .offerBase {
  height: 0;
  padding-top: 48px;
 }
}
.offer {
 width: 100%;
 padding: 0.9em 0;
 display: block;
 background: rgba(0,0,0,0.7);
 position: absolute;
 color: #FFF;
 text-align: center;
 top:50%;
 transform: translateY(-50%);
 z-index: 10;
}
.offer .linkBtn a{
 padding: 0.9em 1.5em 0.9em 1em;
 /*background: #d5001c;*/
 background: #323232;
}
.offer .linkBtn a:hover {
 background: #d5001c;
}
.offer.fixed {
 position: fixed;
 top:auto;
 transform: none;
 bottom: 0;
}
@media screen and (max-width: 1070px) {
 .offer {
  padding: 0.5em 0;
 }
 .offer.fixed {
  padding: 0.5em 0 17px;
 }
}
.offer .inner {
 display: -webkit-flex;
 display: flex;
 flex-wrap:nowrap;
 -webkit-flex-wrap:nowrap;
 justify-content:center;
 -webkit-box-pack:center;
 -webkit-justify-content:center;
 align-items:center; 
 -webkit-box-align:center;
 -webkit-align-items:center;
 font-size: 125%;
}
.offer .text {
 line-height: 1.45em;
 padding: 0 0.5em;
}
@media screen and (max-width: 1070px) {
 .offer .inner {
  font-size: 90%;
  justify-content:center;
  -webkit-box-pack:center;
  -webkit-justify-content:center;
 }
}
@media screen and (max-width: 768px) {
 .offer .inner {
  font-size: 90%;
 }
}
.offer .logo img{
 vertical-align: middle !important;
 visibility: hidden;
}
@media screen and (max-width: 1070px) {
 .offer .logo {
  display: none;
 }
}
@media screen and (max-width: 1070px) {
 .offer .linkBtn a{
  font-size: 92%;
 }
}
@media screen and (max-width: 430px) {
 .offer .text {
  font-size: 85%;
 }
 .offer .linkBtn a{
  padding-top: 1em;
  padding-bottom: 1em;
  font-size: 2.5vw;
 }
}

.offer .linkBtn +.linkBtn {
 margin-left: 2em;
}
@media screen and (max-width: 768px){
 .offer .linkBtn +.linkBtn {
  margin-left: 0.5em;
 }
}

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

 @keyframes

******************************************************************************/
/* move ****************************************************/
.js-scrMove,
.js-mvMove{
 opacity: 0;
 -webkit-transition: 1s cubic-bezier(.785, .135, .15, .86) 0s;
 transition:  1s cubic-bezier(.785, .135, .15, .86) 0s;
}
.js-scrMove.on,
.js-mvMove.on{
 opacity:1;
 -webkit-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1s;
 animation-duration:1s;
 visibility: visible !important;
}


.js-piace {
 -webkit-transition: 0.3s cubic-bezier(.785, .135, .15, .86) 0s;
 transition:  0.3s cubic-bezier(.785, .135, .15, .86) 0s;
}
.js-piace.on {
 -webkit-animation-duration:1s;
 animation-duration:1s;
 -webkit-animation-name: piace;
 animation-name: piace;
}
@-webkit-keyframes piace {
 0% { transform: translateX(-50px);}
 100% { transform: translateX(0);}
}
@keyframes piace {
 0% {  transform: translateX(-50px);}
 100% { transform: translateX(0);}
}
.js-piace.on:nth-child(1) { transition-delay: .1s;}
.js-piace.on:nth-child(2) { transition-delay: .112s;}
.js-piace.on:nth-child(3) { transition-delay: .124s;}
.js-piace.on:nth-child(4) { transition-delay: .136s;}
.js-piace.on:nth-child(5) { transition-delay: .148s;}
.js-piace.on:nth-child(6) { transition-delay: .2s;}
.js-piace.on:nth-child(7) { transition-delay: .212s;}
.js-piace.on:nth-child(8) { transition-delay: .224s;}
.js-piace.on:nth-child(9) { transition-delay: .236s;}
.js-piace.on:nth-child(10) { transition-delay: .248s;}
.js-piace.on:nth-child(11) { transition-delay: .3s;}
.js-piace.on:nth-child(12) { transition-delay: .312s;}
.js-piace.on:nth-child(13) { transition-delay: .324s;}
.js-piace.on:nth-child(14) { transition-delay: .336s;}
.js-piace.on:nth-child(15) { transition-delay: .348s;}

.js-fromBottom.on{
 -webkit-animation-name: fromBottom;
 animation-name: fromBottom;
}
@-webkit-keyframes fromBottom {
 0% { transform: translateY(50px);}
 100% { transform: translateY(0);}
}
@keyframes fromBottom {
 0% {  transform: translateY(50px);}
 100% { transform: translateY(0);}
}