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

 FONT

******************************************************************************/
/** OUTPUT GENERATING IMPORTS **/
/*@font-face {
  font-family: 'PorscheNextJPTP-Regular';
  src:
   url("../fonts/PorscheNextJPTP-Regular.eot?")  format('eot'),
   url("../fonts/PorscheNextJPTP-Regular.woff")  format('woff'),
   url("../fonts/PorscheNextJPTP-Regular.tff") format('truetype');
}
@font-face {
  font-family: 'PorscheNextJPTP-Thin';
  src:
   url("../fonts/PorscheNextJPTP-Thin.eot?")  format('eot'),
   url("../fonts/PorscheNextJPTP-Thin.woff")  format('woff'),
   url("../fonts/PorscheNextJPTP-Thin.tff") format('truetype');
}
@font-face {
  font-family: 'PorscheNextJPTP-Bold';
  src:
   url("../fonts/PorscheNextJPTP-Bold.eot?")  format('eot'),
   url("../fonts/PorscheNextJPTP-Bold.woff")  format('woff'),
   url("../fonts/PorscheNextJPTP-Bold.tff") format('truetype');
}*/

@font-face {
font-family: "pag-iconfont";
src: url('../fonts/pag-iconfont/pag-iconfont.eot');
src: url('../fonts/pag-iconfont/pag-iconfont.eot?#iefix') format('eot'), url('../fonts/pag-iconfont/pag-iconfont.woff') format('woff'), url('../fonts/pag-iconfont/pag-iconfont.ttf') format('truetype'), url('../fonts/pag-iconfont/pag-iconfont.svg') format('svg');
}
/******************************************************************************

 Default CSS Reset

******************************************************************************/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td,figure{
 margin:0;
 padding:0;
}
table{
 border-collapse:collapse;
 table-layout:fixed;
}
fieldset,img{
 border:0;
}
address,caption,cite,code,dfn,em,th,var{
 font-style:normal;
 font-weight:normal;
}
ol,ul{
 list-style:none;
 margin: 0;
 padding: 0;
}
caption{
 text-align:left;
}
h1,h2,h3,h4,h5,h6{
 font-size:100%;
 font-weight:normal;
}
img {
 vertical-align: bottom;
 /* chormeで画像のぼやけ回避 */
 -webkit-backface-visibility: hidden;
 image-rendering: -webkit-optimize-contrast;
}
/* iOSでのデフォルトスタイルをリセット */
input[type="submit"],
input[type="button"] {
 border-radius: 0;
 -webkit-box-sizing: content-box;
 -webkit-appearance: button;
 appearance: button;
 border: none;
 box-sizing: border-box;
}
input[type="submit"]:-webkit-search-decoration,
input[type="button"]:-webkit-search-decoration {
 display: none;
}
input[type="submit"]:focus,
input[type="button"]:focus {
 outline-offset: -2px;
}
/******************************************************************************

 General Setting

******************************************************************************/
body {
 margin:0;
 padding:0;
 font-family: 'PorscheNextJPTP-Regular','Noto Sans JP','游ゴシック体', YuGothic, '游ゴシック', 'Yu Gothic', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
 font-weight: 400;
 color: #000;
 word-wrap : break-word;
 -webkit-font-smoothing: antialiased;
 background: #FFF;
}
@media screen and (max-width: 1070px) and (min-width: 768px){
 body {
  font-size: 24px;
  line-height: 1.75em;
 }
}
a {
 color: #000;
 outline:none;
 text-decoration: none;
 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 -webkit-transition:color 0.3s ease-in-out;
 transition:color 0.3s ease-in-out;
}
a:focus, *:focus { outline:none; }
a:hover,
a.hover {
 color: #d5001c;;
 text-decoration: none;
}
a:hover img {
 opacity: 0.8;
 filter: alpha(opacity=80);
 -webkit-transition:opacity 0.3s ease-in-out;
 transition:opacity 0.3s ease-in-out;
}

/*** align ***/
.ar { text-align:right;}
.al { text-align:left;}
.ac { text-align:center;}

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

/*** img ***/
.imgLeft {
 float: left;
 margin-right: 1em;
}
.imgRight {
 float: right;
 margin-left: 1em;
}

/*** font ***/
string,b,.bold{
 font-family: 'PorscheNextJPTP-Bold',sans-serif;
 font-weight: normal;
}
.thin {
 font-family: 'PorscheNextJPTP-Thin',sans-serif;
 font-weight: normal;
 line-height: 1.2em;
}
.red { color: #D5001C;}

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



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

 modal-video

******************************************************************************/
@media only screen and (max-width: 940px) {
.modal-video-movie-wrap {
  width: 90%;
  margin: 0 auto;
 }
}
.modal-video-close-btn {
 right: 0px;
}
.modal {
  background: none;
  padding:0;
  border-radius: 0;
  max-width: 940px;
}

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

 Layout

******************************************************************************/
#wrapper {
 position: relative;
 overflow: hidden;
 line-height: 1.75em;
}
#wrapper img{
 width: 100%;
 height: auto;
}
#container {
 padding-top: 40px;
}
@media screen and (max-width: 1070px) {
 #container {
  padding-top: 0px;
 }
}
/******************************************************************************

 header

******************************************************************************/
header {
 position: relative;
 z-index: 100;
}
.m-00-crest-svg {
  background-image: url("https://files.porsche.com/filestore/image/multimedia/none/875d5e3d-6763-47fe-bc52-809142d53274/svg/d4c766d7-7761-11e7-99c7-0019999cd470/porsche-svg.svg") !important;
  display: inline-block;
  outline: none;
  background-color: #fff;
  background-repeat: no-repeat;
  width: 129px;
  background-size: 128px auto;
  -webkit-transform: translate3d(0, 10px, 0);
  transform: translate3d(0, 10px, 0);
}
@media only screen and (max-width: 992px) {
 .m-00-crest-svg {
   width: 100px;
   height: 56px;
   background-size: 100% auto;
   -webkit-transform: translate3d(0, 5px, 0);
   transform: translate3d(0, 5px, 0); }
}

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

 footer

******************************************************************************/
footer {
 padding: 2.5em 0 4em;
 background: #323232;
}
@media screen and (max-width: 1070px) {
 footer {
  font-size: 14px;
  padding: 2.5em 0 5em;
 }
}
footer,
footer a{
 color: #FFF !important;
}
footer .inner{
 padding: 0 7%;
 margin: 0 auto;
 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) {
 footer .inner{
  display: block;
 }
}
footer .inner p{
 margin: 0;
}
footer .snsLink {
 margin: 0;
 padding: 0;
}
@media screen and (max-width: 1070px) {
 footer .snsLink {
  margin: 1em 0;
 }
}
footer .snsLink li {
 margin-left: 1em;
}
footer .snsLink li a{
 padding: 0 !important;
 display: block;
}
footer .snsLink span {
 display: block !important;
 background: #FFF;
 border-radius: 50%;
 cursor: pointer;
 width: 50px;
 height: 50px;
 line-height: 50px;
}
footer .snsLink span:before {
 color: #000;
 width: 50px;
 height: 50px;
 line-height: 50px;
}
footer .snsLink li.iconimg span {
 font-size: 0;
 transition: background-color 0.24s;
}
footer .snsLink li.iconimg span:hover{
 background: #d5001c;
}
footer .snsLink li.iconimg span:before{
 content: "";
 display: block;
}
footer .snsLink li.iconimg span.mail:before{
 background: url(../common_img/icon_mail_bk.png) no-repeat center center;
 background-size: 45% auto;
}

.gui-btn-sm-facebook,
.gui-btn-sm-twitter,
.gui-btn-sm-instagram {
 font: 0/0 serif;
 margin-right: 4px;
 width: 40px;
 height: 40px;
}
.gui-btn-sm-facebook::before {
 content: "";
 font-family: 'pag-iconfont';
 position: absolute;
 text-align: center;
 font-size: 28px;

}
.gui-btn-sm-twitter::before {
 content: "";
 font-family: 'pag-iconfont';
 position: absolute;
 text-align: center;
 font-size: 28px;
}
.gui-btn-sm-instagram::before {
 content: "";
 font-family: 'pag-iconfont';
 position: absolute;
 text-align: center;
 font-size: 28px;
}
/******************************************************************************

 floatingBanner

******************************************************************************/
#floatingBanner {
 position: fixed;
 right: 1%;
 bottom: 8%;
 width: 100px;
 height: auto;
 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) {
 #floatingBanner {
  width: 160px;
  height: auto;
 }
}
#floatingBanner a{
 display: block;
 background: #FFF;
 padding: 2px;
 text-decoration: none;
 -webkit-transition: 0.3s ease-in-out;
 transition: 0.3s ease-in-out;
}
#floatingBanner a p {
 color: #000 !important;
}
@media only screen and (min-width: 1070px) {
 #floatingBanner a{
  padding:  3px;
 }
}
#floatingBanner a .text{
 padding: 0.3em;
 margin: 0;
 position: relative;
 text-align: left;
 font-size: 50%;
 line-height: 1.2em;
}
@media only screen and (min-width: 1070px) {
 #floatingBanner a .text{
  padding: 0.5em;
  line-height: 1.2em;
  font-size: 81%;
 }
 #floatingBanner a .text span {
  font-size: 107%;
 }
}
#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) {
 #floatingBanner a .text:before {
  right: 0.5em
 }
}










/* scrollbar - chrome safari */
.scrbar::-webkit-scrollbar{
 overflow:hidden;
 width:6px;
 background:#999;
 -webkit-border-radius:4px;
 border-radius:4px;
}
.scrbar::-webkit-scrollbar:horizontal{
 height:5px;
}
.scrbar::-webkit-scrollbar-button{
 display:none;
}
.scrbar::-webkit-scrollbar-piece{
 background:#000;
}
.scrbar::-webkit-scrollbar-piece:start{
 background:#000;
}
.scrbar::-webkit-scrollbar-thumb{
 overflow:hidden;
 -webkit-border-radius:4px;
 border-radius:4px;
 background:#626262;
}
.scrbar::-webkit-scrollbar-corner{
 overflow:hidden;
 -webkit-border-radius:4px;
 border-radius:3px;
 background:#626262;
}

/* scrollbar - IE */
html,body {
scrollbar-arrow-color:#999;
scrollbar-face-color:#999;
scrollbar-3dlight-color:#333;
scrollbar-darkshadow-color:#333;
scrollbar-highlight-color:#333;
scrollbar-shadow-color:#333;
scrollbar-track-color:#333;
scrollbar-base-color:#333;
}