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

 FONT

******************************************************************************/
/** OUTPUT GENERATING IMPORTS **/
@font-face {
  font-family: "pag-iconfont";
  src: url('/sp/assets/fonts/pag-iconfont/pag-iconfont.eot');
  src: url('/sp/assets/fonts/pag-iconfont/pag-iconfont.eot?#iefix') format('eot'), 
       url('/sp/assets/fonts/pag-iconfont/pag-iconfont.woff') format('woff'), 
       url('/sp/assets/fonts/pag-iconfont/pag-iconfont.ttf') format('truetype'), 
       url('/sp/assets/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;
}
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; 
}
/* 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;
}


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

 common

******************************************************************************/
a {
 color: #000;
 outline:none;
 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 -webkit-transition: 0.3s ease-in-out;
 transition: 0.3s ease-in-out;
 text-decoration: none;
}
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: 0.3s ease-in-out;
 transition: 0.3s ease-in-out;
}

/*** font ***/
strong,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;
}

video {
 display: block;
 width: 100%;
 height: auto;
}

/* flexbox ****************************************************/
.flexWrap{
 display: -webkit-flex;
 display: flex;
}
@media screen and (max-width: 1070px) {
 .flexWrap:not(.tabFlex):not(.spFlex) {
  display: block;
 }
}
@media screen and (max-width: 767px) {
 .flexWrap:not(.spFlex) {
  display: block;
 }
}
.wrap{
 flex-wrap:wrap;
 -webkit-flex-wrap:wrap;
}
.nowrap{
 flex-wrap:nowrap;
 -webkit-flex-wrap:nowrap;
}
.reverse{
 flex-direction: row-reverse;
  -webkit-flex-direction: row-reverse; 
}
.column{
 flex-direction: column;
  -webkit-box-orient: vertical;
}
.jc-between {
 justify-content:space-between;
 -webkit-justify-content:space-between;
}
.jc-center {
 justify-content: center;
 -webkit-justify-content:center;
}
.jc-start {
 justify-content: flex-start;
 -webkit-box-pack:start;
 -webkit-justify-content:flex-start;
}
.jc-end {
 justify-content: flex-end;
 -webkit-box-pack:start;
 -webkit-justify-content:flex-end;
}
.al-center {
 align-items:center; 
 -webkit-align-items:center;
}
.al-stretch {
 align-items:stretch;
 -webkit-box-align:stretch;
}
.al-start {
 align-items:flex-start;
 -webkit-box-align: start;
}
.al-end {
 align-items:flex-end;
 -webkit-box-align: end;
}


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

 form pats

******************************************************************************/
button, input, select, textarea {
 font-family : inherit;
}
input[type="text"],input[type="tel"],input[type="url"],input[type="email"],input[type="password"],
input[type="datetime-local"],input[type="date"],input[type="time"],input[type="number"],select{
 display: block;
 width: 100%;
 box-sizing: border-box;
 padding: 0.5em 1em;
 background: #FFF;
 border: 1px solid #000;
 border-radius: 0;
}
input[type="text"]:read-only,input[type="tel"]:read-only,input[type="url"]:read-only,input[type="email"]:read-only,input[type="password"]:read-only,
input[type="datetime"]:read-only,input[type="date"]:read-only,input[type="time"]:read-only,input[type="number"]:read-only {
 display: inline-block;
 width: auto;
 box-sizing: border-box;
 padding: 0;
 background: #FFF;
 border:none;
 border-radius: 0;
 -webkit-appearance: none;
}
textarea {
 display: block;
 width: 100%;
 box-sizing: border-box;
 padding: 0.8em;
 background: #FFF;
 border: 1px solid #000;
 border-radius: 0;
}
label {
 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

input:invalid {
 box-shadow: none;
 border: 1px solid #d5001c;
}
input:invalid:required {
 background: #FFF;
}
input:valid {
 border: 1px solid black;
}

/* listMark ****************************************************/
ul.c-listMark {
 list-style:none;
 padding-left:1em;
 text-indent:-1em;
}
ul.c-listMark.disc {
 list-style: disc inside;
}
ul.c-listMark.deci {
 list-style: decimal inside;
}
ul.c-listMark li {
 line-height: 1.4em;
 margin-bottom: 0.3em;
}




/* table ****************************************************/
.tableWrapper { 
 width: 100%;
}
@media screen and (max-width: 767px) {
 .tableWrapper { 
  white-space: nowrap;
  overflow-x:scroll;
 }
}
table{
 border-collapse: collapse;
 border: 1px solid #000;
}
table tr{ 
 border-bottom: 1px solid #000;
}
table th, table td{
 padding:1em;
 text-align:center;
 border-left: 1px solid #000;
 
}
table th{ background:#eee;}
table td{ }





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

 swiper

******************************************************************************/
.swiper-button-next, .swiper-button-prev {
 position: absolute;
 top: 50%;
 width: 2.5em;
 height: 4em;
 box-sizing: border-box;
 margin-top: 0;
 transform: translateY(-50%);
 z-index: 10;
 cursor: pointer;
 background-position: center;
 background-repeat: no-repeat;
}
.swiper-button-prev:before, 
.swiper-container-rtl .swiper-button-next:before,
.swiper-button-next:before, 
.swiper-container-rtl .swiper-button-prev:before {
 display: block;
 font-family: 'pag-iconfont';
 font-size: 72px;
 line-height: 1em;
 color: #FFF;
 position: absolute;
 top:0;
 left: 50%;
 transform: translateX(-50%);
}
@media screen and (max-width: 1070px) {
 .swiper-button-prev:before, 
 .swiper-container-rtl .swiper-button-next:before,
 .swiper-button-next:before, 
 .swiper-container-rtl .swiper-button-prev:before {
  font-size: 40px;
 }
}
@media screen and (min-width: 1071px) {
 .swiper-button-prev:hover:before, 
 .swiper-container-rtl .swiper-button-next:hover:before,
 .swiper-button-next:hover:before, 
 .swiper-container-rtl .swiper-button-prev:hover:before {
   color: #d5001c;
 }
}
.swiper-button-prev:before, 
.swiper-container-rtl .swiper-button-next:before {
 content: "";
}
.swiper-button-next:before, 
.swiper-container-rtl .swiper-button-prev:before {
 content: "";
}
.swiper-button-prev, 
.swiper-container-rtl .swiper-button-next {
 left: 3%;
 right: auto;
 background: none;
}
.swiper-button-next, 
.swiper-container-rtl .swiper-button-prev {
 right: 3%;
 left: auto;
 background: none;
}

.swiper-pagination.pagination-01 {
 bottom: 2em;
 width: 97%;
 text-align: right;
}
@media screen and (max-width: 1070px) {
 .swiper-pagination.pagination-01 {
  bottom: 1em;
 }
}
.swiper-pagination-bullet {
 background: #c8c8c8;
 opacity: 1;
 margin: 0 10px;
}
@media screen and (max-width: 1070px) {
 .swiper-pagination-bullet {
  margin: 0 5px;
 }
}
.swiper-pagination-bullet-active {
 background: #000;
}
/******************************************************************************

 slick

******************************************************************************/
.slick-dotted.slick-slider {
 margin-bottom: 0;
}
.slick-prev:before,
.slick-next:before {
 display: block;
 font-family: 'pag-iconfont';
 font-size: 72px;
 line-height: 1em;
 color: #323232;
 position: absolute;
 top:0;
 left: 50%;
 transform: translateX(-50%);
}
@media screen and (max-width: 1070px) {
 .slick-prev:before,
 .slick-next:before {
  font-size: 40px;
  color: #FFF;
 }
}
.slick-prev:before {
 content: "";
}
.slick-next:before {
 content: "";
}
.slick-arrow {
 width: 50px;
 height: 72px;
 z-index: 2;
 border: none;
 position: absolute;
 background: none;
 top:10vw;
 -webkit-transition:all 0.3s ease-in-out;
 transition:all 0.3s ease-in-out;
}
@media screen and (max-width: 1070px) {
 .slick-arrow {
  width: 30px;
  height: 40px;
  top:32vw;
 }
}
.slick-prev {
 left: -60px;
}
.slick-next {
 right: -60px;
}
@media screen and (max-width: 1070px) {
 .slick-prev {
  left: 0;
 }
 .slick-next {
  right: 0;
 }
}
@media screen and (min-width: 1071px) {
 .slick-arrow.slick-prev:hover:before,
 .slick-arrow.slick-next:hover:before {
   color: #d5001c;
 }
}

.slick-dots {
 bottom: -40px;
 text-align: center;
}
.slick-dots li {
 position: relative;
 display: inline-block;
 margin: 0 5px;
 padding: 0;
 cursor: pointer;
}
.slick-dots li button {
 width: 10px;
 height: 10px;
 background: #e6e6e6;
 border-radius: 50%;
}
.slick-dots li.slick-active button {
 background: #000;
}
.slick-dots li.slick-active button:before {
 opacity: .75;
}
.slick-dots li button:before {
 content: none;
}



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

 modal-video

******************************************************************************/
@media only screen and (max-width: 940px) {
.modal-video-movie-wrap {
  width: 96%;
  margin: 0 auto;
 }
}
.modal-video-close-btn {
 right: 0px;
}
.modal {
  background: none;
  padding:0;
  border-radius: 0;
  max-width: 940px;
}
.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;
}


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

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

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

 @keyframes

******************************************************************************/
/* move ****************************************************/
.js-scrMove,
.js-mvMove{
 opacity: 0;
 -webkit-transition: 0.5s cubic-bezier(.785, .135, .15, .86) 0s;
 transition:  0.5s 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:0.5s;
 animation-duration:0.5s;
 visibility: visible !important;
}

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


/* ovarlayMove ****************************************************/
.js-ovarlayMove {
 position: relative;
}
.js-ovarlayMove.on {
 -webkit-animation-name: fadeUp;
 animation-name: fadeUp;
 -webkit-animation-duration:1s;
 animation-duration:1s;
}
@-webkit-keyframes fadeUp {
 0% { transform: translateY(80px);}
 100% { transform: translateY(0);}
}
@keyframes fadeUp {
 0% { transform: translateY(80px);}
 100% { transform: translateY(0);}
}

.js-ovarlayMove:after {
 content: "";
 display: block;
 width: 100%;
 height: 100%;
 background: rgba(255,255,255,1);
 position: absolute;
 top:0;
 left: 0;
 opacity: 1;
 transition: .3s cubic-bezier(.785, .135, .15, .86) 0s;
}
.js-ovarlayMove.on:after {
 opacity:1;
 -webkit-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:0.3s;
 animation-duration:0.3s;
 visibility: visible !important;
}
.js-ovarlayMove.left.on:after {
 -webkit-animation-name: ovarlayLeft;
 animation-name: ovarlayLeft;
 animation-delay: 0.3s;
}
@-webkit-keyframes ovarlayLeft {
 0% { transform: scaleX(100%); transform-origin: right top;}
 100% { transform: scaleX(0); transform-origin: right top;}
}
@keyframes ovarlayLeft {
 0% { transform: scaleX(100%); transform-origin: right top;}
 100% { transform: scaleX(0); transform-origin: right top;}
}

.js-ovarlayMove.right.on:after {
 -webkit-animation-name: ovarlayLeft;
 animation-name: ovarlayRight;
}
@-webkit-keyframes ovarlayRight {
 0% { transform: scaleX(100%); transform-origin: left top;}
 100% { transform: scaleX(0); transform-origin: left top;}
}
@keyframes ovarlayRight {
 0% { transform: scaleX(100%); transform-origin: left top;}
 100% { transform: scaleX(0); transform-origin: left top;}
}