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

 common

******************************************************************************/
body {
 color: #FFF;
 background: #000;
 position: relative;
}
@media screen and (max-width: 767px) {
 body {
  font-size: 12px;
  line-height: 1.75em;
 }
}
header .crest {
 background: url('https://www.porsche.co.jp/images/porsche-svg.svg') no-repeat center center #FFF;
 display: inline-block;
 outline: none;
 width: 120px;
 height: 120px;
 background-size: 100% auto;
 text-decoration: none;
 position: fixed;
 z-index: 100;
 top:0;
 left: 20px;
}
@media screen and (max-width: 767px) {
 header .crest {
  width: 80px;
  height: 80px;
  left: 3.5%;
 }
}
#container {
 width: 100%;
 padding-top: 0px;
 position: relative;
 background: #000;
}

.section {
 position: relative;
}

.blue {
 color: #00b0f4;
}

h2 {
 font-size: 250%;
 line-height: 1.4em;
}
@media screen and (max-width: 767px) {
 h2 {
  font-size: 200%;
 }
}
@media screen and (max-width: 420px) {
 h2 {
  font-size: 6.5vw;
 }
}

/*************************************************
 mvTitle
**************************************************/
/*mvTitle animation*/
.mvTitle .row{
 opacity: 0;
 -webkit-transition: 0.3s ease-out;
 transition: 0.3s ease-out;
 margin-bottom: 0.5em;
}
.mvTitle.on .row{
 display: inline-block;
  opacity:1;
 -webkit-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:0.3s;
 animation-duration:0.3s;
 visibility: visible !important;
 -webkit-animation-name: mvTitle;
 animation-name: mvTitle;
}
.mvTitle.on .row:nth-of-type(2) { animation-delay: 0.3s; }

@-webkit-keyframes mvTitle {
 0% { transform: translateX(-150%);}
 100% { transform: translateX(0);}
}
@keyframes mvTitle {
 0% { transform: translateX(-150%);}
 100% { transform: translateX(0);}
}

.mvTitle .row:before{
 content: "";
 width: 100%;
 padding: 0 10px;
 height: 1.2em;
 display: block;
 background: #FFF;
 position: absolute;
 top:0;
 left: -10px;
 z-index: 0;
 mix-blend-mode: exclusion;
 -webkit-transition:transform .3s cubic-bezier(.785, .135, .15, .86) 0s;
 transition: transform .3s cubic-bezier(.785, .135, .15, .86) 0s;
}
.mvTitle.on .row:before{
 -webkit-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:0.3s;
 animation-duration:0.3s;
 visibility: visible !important;
 -webkit-animation-name: slideLeft;
 animation-name: slideLeft;
 animation-delay: .5s;
}
.mvTitle.on .row:nth-of-type(2):before{
  animation-delay: 0.8s; 
}
@-webkit-keyframes slideLeft {
 0% { transform: translateX(-150%);}
 100% { transform: translateX(0);}
}
@keyframes slideLeft {
 0% {  transform: translateX(-150%);}
 100% { transform: translateX(0%);}
}
@media all and (-ms-high-contrast: none){
  .mvTitle .row:before{
    z-index: -1;
    background: #000;/* IE */
  }
}
/*************************************************
 under_b
**************************************************/
.under_b .row.pcnone {display: none;}
@media screen and (max-width: 767px) {
 .under_b .row.pcnone {display: inline-block;}
 .under_b .row.spnone {display: none;}
}
.under_b .row {
 display: inline-block;
 position: relative;
 overflow: hidden;
}
.under_b .piece {
 display: inline-block;
 position: relative;
}
.under_b .row:last-child:after{
 content: "";
 display: block;
 width: 0%;
 height: 4px;
 background: #FFF;
 -webkit-transition:width 0.5s ease-out;
 transition:width 0.5s ease-out; 

}
.under_b.on .row:last-child:after{
 width: 100%;
}


/*piece animation*/
.under_b.on .piece{
/* -webkit-transition:transform 0.2s ease-out;
 transition:transform 0.2s ease-out;*/
 -webkit-transition:transform .3s cubic-bezier(.785, .135, .15, .86) 0s;
 transition: transform .3s cubic-bezier(.785, .135, .15, .86) 0s;
 
 opacity:1;
 -webkit-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:0.2s;
 animation-duration:0.2s;
 visibility: visible !important;
 -webkit-animation-name: piece;
 animation-name: piece;
}
@-webkit-keyframes piece {
 0% { transform: translateY(110%);}
 100% { transform: translateY(0);}
}
@keyframes piece {
 0% {  transform: translateY(110%);}
 100% { transform: translateY(0);}
}
.under_b .row:nth-of-type(1) .piece { animation-delay: 0.1s; transition-delay: 0.1s;}
.under_b .row:nth-of-type(2) .piece { animation-delay: 0.2s; transition-delay: 0.2s;}
.under_b .row:nth-of-type(3) .piece { animation-delay: 0.3s; transition-delay: 0.3s;}



.fadeOutUp {
 opacity: 1;
 margin-top: 0;
 -webkit-transition: 0.5s ease-out;
 transition: 0.5s ease-out;
}
.fadeOutUp.fade {
 opacity: 0 !important;
 margin-top: -100px;
}

/*************************************************
 linkBtn
**************************************************/
.linkBtn a {
 background: none;
 border: 2px solid #FFF;
 -webkit-transition:all 0.3s ease-out;
 transition:all 0.3s ease-out;
}
@media screen and (max-width: 1070px) {
 .linkBtn a {
  border-width: 1px;
  font-size: 112.5%;
 }
}
@media screen and (max-width: 420px) {
 .linkBtn a{
  font-size: 3.5vw;
 }
}
.linkBtn a:hover {
 border-color: #d5001c;
}


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

#mainViewInner h1{
 font-size: 375%;
 line-height: 1.2em;
 position: fixed;
 left: 5%;
 top:45%;
}
@media screen and (max-width: 1070px) {
 #mainViewInner h1{
  top:auto;
  bottom: 30px;
  left: 3.5%;
 }
}
/********************************************
 lead_sec
*********************************************/
.lead_sec {
 padding: 5em 0;
}
.lead_sec .lead_text {
 padding: 0 14%;
 margin-bottom: 7em;
}
@media screen and (max-width: 1070px) {
 .lead_sec .lead_text {
  padding: 0 3.5%;
 }
}
.lead_sec .lead_text .block{
 line-height: 2em;
 margin-bottom: 2.5em;
}
@media screen and (max-width: 420px) {
 .lead_sec .lead_text .block{
  font-size: 3.2vw;
 }
}


.lead_sec .lead_text .block p.row {
 opacity: 1 !important;
 visibility: visible;
}
.lead_sec .lead_text .block p.row span.text {
 position: relative;
 z-index: 1;
 color: #000;
}
.lead_sec .lead_text .block p.row span.wh {
 position: relative;
}
.lead_sec .lead_text .block p.row.on span.wh {

}

/*piece animation*/
.lead_sec .lead_text .block p.row span.wh:after{
 content: "";
 display: block;
 background: #FFF;
 width: 100%;
 height: 1.2em;
 position: absolute;
 top:0;
 left: 0;
 z-index:1;
 visibility: hidden;
}
.lead_sec .lead_text .block p.row.on span.wh:after {
 opacity:1;
 -webkit-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:0.3s;
 animation-duration:0.3s;
 visibility: visible !important;
 -webkit-animation-name: gyuin;
 animation-name: gyuin;
}
@keyframes gyuin {
 0% { opacity: 1; transform: scaleX(0); transform-origin: left top;}
 40% { opacity: 1; transform: scaleX(1);transform-origin: left top;}
 70% { opacity: 1; transform: scaleX(1);transform-origin: right top;}
 100% { opacity: 1; transform: scaleX(0);transform-origin: right top;}
}

.lead_sec .lead_text .block p.row span.wh:before{
 content: "";
 display: block;
 background: #FFF;
 width: 100%;
 height: 1.2em;
 position: absolute;
 top:0;
 left: 0;
 z-index:1;
 visibility: hidden;
}
.lead_sec .lead_text .block p.row.on span.wh:before {
 opacity:1;
 -webkit-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:0.3s;
 animation-duration:0.3s;
 visibility: visible !important;
 -webkit-animation-name: gyuin2;
 animation-name: gyuin2;
 animation-delay: 0.5s;
}
@keyframes gyuin2 {
 0% { opacity: 1; transform: scaleX(0); transform-origin: left top;}
 100% { opacity: 1; transform: scaleX(1);transform-origin: left top;}
}

/*@-webkit-keyframes gyuin {
 0% { opacity: 1;width: 2px;}
 40% { opacity: 1;width: 2px;}
 99% { transform: scaleX(1.005); transform-origin: left top; }
 100% { transform: scaleX(1); transform-origin: left top; }
}
@keyframes gyuin {
 0% { opacity: 1;width: 2px;}
 40% { opacity: 1;width: 2px;}
 99% { transform: scaleX(1.005); transform-origin: left top; }
 100% { transform: scaleX(1); transform-origin: left top; }
}
*/


.lead_sec .lead_text span{
 display: inline-block;
}
.lead_sec .lead_text span.wh{
 padding: 0 0.5em;
 font-size: 137.5%;
 line-height: 1.2em;
 margin-bottom: 0.5em;
}
.lead_sec .lead_text span.bold{
 font-size: 250%;
 line-height: 1.4em;
}
.lead_sec .Ferry {
 margin-bottom: 3em;
}
.lead_sec .Ferry .phWrap{
 width: 42%;
}
@media screen and (max-width: 1070px) {
 .lead_sec .Ferry .phWrap{
  width: 97%;
  margin-bottom: 1em;
 }
}
.lead_sec .Ferry .textWrap{
 width: 57%;
 text-align: center;
}
@media screen and (max-width: 1070px) {
 .lead_sec .Ferry .textWrap{
  width: 100%;
 }
}
.lead_sec .Ferry .textWrap h3{
 font-size: 150%;
 line-height: 1.4em;
 margin-bottom: 0.5em;
}
.lead_sec .Ferry .textWrap p{
 font-size: 112.5%;
 line-height: 1.75em;
}
.lead_sec .Ferry .textWrap p.name{
 margin-top: 1.5em;
}
/********************************************
 movie_sec
*********************************************/
.movie_sec .videoWrap {
 position: relative;
}
.movie_sec .videoWrap:after {
 content: "";
 display: block;
 width: 100%;
 height: 100%;
 background: rgba(0,0,0,0.5);
 position: absolute;
 top:0;
 left: 0;
}
.movie_sec a {
 color: #FFF;
}
@media screen and (max-width: 1070px) {
 .movie_sec .videoWrap.ceo {
  background: url(../images/movie_01_sp.jpg) no-repeat center center;
  background-size: cover;
 }
}
@media screen and (max-width: 1070px) {
 .movie_sec .videoWrap {
  position: relative;
  padding-top: 110%;
  overflow: hidden;
 }
}
.movie_sec .videoWrap video{
 display: block;
 width: 100%;
}
@media screen and (max-width: 1070px) {
 .movie_sec .videoWrap video{
  display: none;
 }
}
.movie_sec .content{
 position: absolute;
 top:50%;
 left: 7%;
 transform: translateY(-50%);
}
.movie_sec .content h2{
 margin-bottom: 0.5em;
}
.movie_sec .content .play a{
 display: block;
 width: 70px;
 height: 70px;
 background: url(../images/sankaku.png) no-repeat center center rgba(255,255,255,0.7);
 background-size: 30px auto;
 border-radius: 50%;
}

.movie_sec .comment_link {
 margin-top: 2em;
 padding-right: 1em;
}
.movie_sec .comment_link h3{
 font-size: 250%;
 line-height: 1.4em;
 margin-bottom: 0.3em;
 color: #FFF;
}
@media screen and (max-width: 767px) {
 .movie_sec .comment_link h3{
  font-size: 200%;
 }
}
@media screen and (max-width: 420px) {
 .movie_sec .comment_link h3{
  font-size: 6.5vw;
 }
}
.movie_sec .comment_link h4{
 font-size: 112.5%;
 line-height: 1.8em;
 margin-bottom: 2em;
 color: #FFF;
}
.movie_sec .movie_sec_ceo {
 position: relative;
 padding-bottom: 2em;
}
@media screen and (max-width: 1070px) {
 .movie_sec .movie_sec_ceo {
  padding-bottom: 0;
 }
}
/*.movie_sec .movie_sec_ceo {
 position: relative;
 padding-bottom: 35%;
}
@media screen and (max-width: 1070px) {
 .movie_sec .movie_sec_ceo {
   padding-bottom: 2em;
 }
}
@media screen and (min-width: 1200px) {
 .movie_sec .movie_sec_ceo {
   padding-bottom: 25%;
 }
}
@media screen and (min-width: 1400px) {
 .movie_sec .movie_sec_ceo {
   padding-bottom: 18%;
 }
}*/

.movie_sec .presidentWrap {
 position: relative;
 bottom: 0;
 width: 100%;
}
@media screen and (max-width: 1070px) {
 .movie_sec .presidentWrap {
   position: relative;
  
 }
}
.movie_sec .presidentWrap dl{
  margin: 0 10% 4em;
  width: 80%;
}
@media screen and (max-width: 1070px) {
 .movie_sec .presidentWrap dl{
  margin: 0 3.5% 2em;
  width: 93%;
 }
}
.movie_sec .presidentWrap dt{
  width: 42%;
}
.movie_sec .presidentWrap dd{
  width: 54%;
}
@media screen and (max-width: 1070px) {
 .movie_sec .presidentWrap dt,
 .movie_sec .presidentWrap dd{
  width: 100%;
  margin-bottom: 1.5em;
 }
}
.movie_sec .presidentWrap dt h3{
 font-size: 175%;
 line-height: 1.4em;
 color: #FFF;
}
.movie_sec .presidentWrap dt h4{
  font-size: 112.5%;
 margin-bottom: 1em;
 color: #FFF;
}
.movie_sec .presidentWrap dt p{
  font-size: 100%;
 margin-bottom: 1em;
}
/********************************************
 sh_sec
*********************************************/
.sh_sec {
 padding: 10em 7% 3.57em;
 box-sizing: border-box;
}
@media screen and (max-width: 1070px) {
.sh_sec {
  padding: 5em 3.5%;
 }
}
.sh_sec h2{
 margin-bottom: 1em;
}
@media screen and (max-width: 1070px) {
 .sh_sec h2{
  margin-bottom: 2em;
 }
}
.sh_sec .snsHeader {
 position: relative;
}
.sh_sec .snsHeader p.linkBtn{
 position: absolute;
 top:50%;
 transform: translateY(-50%);
 right: 0;
}
@media screen and (max-width: 1070px) {
 .sh_sec .snsHeader p.linkBtn{
  position: relative;
 }
}
.sh_sec .snsTerms {
 margin-bottom: 2em;
}
.sh_sec .snsTerms h3{
 font-size: 137.5%;
 line-height: 1.4em;
 margin-bottom: 1.5em;
}
.sh_sec .snsTerms dt a{
 font-size: 112.5%;
 line-height: 1.4em;
 color: #FFF;
}
@media screen and (max-width: 1070px) {
 .sh_sec .snsTerms dt a{
  display: block;
  padding-right: 40px;
 }
}
.sh_sec .snsTerms dt {
 margin-bottom: 1.5em;
 position: relative;
}
.sh_sec .snsTerms dt a:after{
 content: "";
 display: inline-block;
 width: 40px;
 height: 40px;
 background: url(../images/arrow.png) no-repeat center center;
 background-size: 30px auto;
 vertical-align: middle;
 margin-left: 1em;
 -webkit-transition:transform 0.2s ease-out;
 transition:transform 0.2s ease-out;
}
@media screen and (max-width: 1070px) {
 .sh_sec .snsTerms dt a:after{
  position: absolute;
  top:50%;
  right: 0;
  transform: translateY(-50%);
 }
}
.sh_sec .snsTerms dl.active dt a:after{
 transform:rotate(-540deg);
}
@media screen and (max-width: 1070px) {
 .sh_sec .snsTerms dl.active dt a:after{
  transform:translateY(-50%) rotate(-540deg);
 }
}
.sh_sec .snsTerms dd {
 display: none;
}
.sh_sec .snsTerms dd p{
 line-height: 1.75em;
 margin-bottom: 1.5em;
}

.sh_sec .celebCommentWrap {
 padding: 3.5em 0;
}
@media screen and (max-width: 1070px) {
.sh_sec .celebCommentWrap .slideWrap{
  padding: 0 5%;
 }
}
.sh_sec .celebCommentWrap .left,
.sh_sec .celebCommentWrap .right{
 width: 48.5%;
}
.sh_sec .celebCommentWrap .comment{
 width: 100%;
 border: 1px solid #FFF;
 padding: 1.5em;
 margin-bottom: 2.5em;
 box-sizing: border-box;
}
@media screen and (max-width: 1070px) {
 .sh_sec .celebCommentWrap .comment{
  margin-bottom: 0;
 }
 .sh_sec .celebCommentWrap .swiper-slide{
  padding: 0 1%;
  box-sizing: border-box;
 }
}
.sh_sec .celebCommentWrap .comment .text{
 font-size: 125%;
 line-height: 1.75em;
 margin-bottom: 1em;
}
.sh_sec .celebCommentWrap .comment .text:first-letter {
 font-size: 200%;
}

.sh_sec .celebCommentWrap .comment .name{
 font-size: 150%;
 line-height: 1.3em;
 text-align: right;
}
.sh_sec .celebCommentWrap .comment .name span{
 display: inline-block;
}
@media screen and (max-width: 320px) {
 .sh_sec .celebCommentWrap .comment .name{
   font-size: 120%;
 }
}
.sh_sec .celebCommentWrap .slideWrap{
 position: relative;
}
.swiper-wrapper {
 padding-bottom: 0px;
}
.swiper-button-next {
 right: 0;
}
.swiper-button-prev {
 left: 0;
}

#shuttlerock .MainPage__main-container___2z70_ {
 overflow: inherit;
}
#shuttlerock .Entry__entry___25Jvq {
 
 border: none;
 border-bottom: 4px solid #FFF;
 border-radius: 0;
 margin-bottom: 30px;
}
@media screen and (max-width: 1070px) {
 #shuttlerock .grid-item.Entry__entry___25Jvq {
  width: 92% !important;
  position:static !important;
  float: none;
  border-width: 2px;
 }
 #shuttlerock .grid-item.Entry__entry___25Jvq:nth-child(even){
  margin-left: 8%;
 }
}
#shuttlerock .Entry__card-caption___AGG2C {
 padding: 10px 10px 30px;
}
#shuttlerock .Entry__comment-title___3QwYj {
 color: #FFF;
 font-size: 100%;
 line-height: 1.85em;
/* font-family: 'PorscheNextJPTP-Regular','Noto Sans JP', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;*/
}
#shuttlerock .LoadMoreButton__load-more-button___3uRPa {
 background: #000;
 width: 60px;
 height: 60px;
 font-size: 0px;
 margin-left: 0px;
 outline: none;
 padding: 0;
 border: 2px solid #FFF;
 border-radius: 50%;
}
@media screen and (max-width: 1070px) {
 #shuttlerock .LoadMoreButton__load-more-button-wrapper___mSAkn {
  margin-bottom: 2em;
 }
}
@media screen and (max-width: 767px) {
 #shuttlerock .LoadMoreButton__load-more-button___3uRPa {
  width: 40px;
  height: 40px;
 }
}
#shuttlerock .LoadMoreButton__load-more-button___3uRPa:after {
 content: "";
 font-family: 'pag-iconfont';
 font-size: 30px;
 line-height: 60px;
}
@media screen and (max-width: 767px) {
 #shuttlerock .LoadMoreButton__load-more-button___3uRPa:after {
  font-size: 20px;
  line-height: 40px;
 }
}
#shuttlerock .MasonryWrapper__tab-content___2-Rpm {
 margin-bottom: 3.75em;
}
@media screen and (max-width: 1070px) {
 #shuttlerock .MasonryWrapper__tab-content___2-Rpm {
  margin-bottom: 1.5em;
  padding: 0;
 }
}
#shuttlerock .Entry__logo___3VVZq {
  width: 30px;
}
.sh_sec .linkBtn .twitter:before {
 font-family: 'pag-iconfont';
 content: "";
 font-size: 40px;
 vertical-align: middle;
 background: none;
}
@media screen and (max-width: 1070px) {
 .sh_sec .linkBtn .twitter:before {
  font-size: 30px;
 }
}
@media screen and (max-width: 1070px) {
 .sh_sec .linkBtn {
  display: block;
  padding: 0 3.5%;
 }
 .sh_sec .linkBtn a{
  display: block;
  padding-left: 0;
  padding-right: 0;
  text-align: center;
 }
}
/**********/
.sh_sec .more_comment .button {
 display: block;
 margin: 0 auto;
 width: 60px;
 height: 60px;
 font-size: 0;
 outline: none;
 text-align: center;
 padding: 0;
 border: 2px solid #FFF;
 border-radius: 50%;
 cursor: pointer;
}
.sh_sec .more_comment .more:after {
 content: "";
 font-family: 'pag-iconfont';
 font-size: 30px;
 line-height: 60px;
}
.sh_sec .more_comment dd {
 display: none;
}
.sh_sec .more_comment.active .more { display: none;}
/**********/
.sh_sec .excellent_comment li{
 width: 46%;
 box-sizing: border-box;
 padding:  1em 0;
 border-bottom: 4px solid #FFF;
 margin-bottom: 1.875em;
}
@media screen and (max-width: 1070px) {
 .sh_sec .excellent_comment li{
  width: 100%;
  border-width: 2px;
 }
}
.sh_sec .excellent_comment li .text{
 font-size: 112.5%;
 line-height: 1.75em;
 margin-bottom: 1em;
}
.sh_sec .excellent_comment li .twitter:before {
 content: "";
 font-family: 'pag-iconfont';
 position: absolute;
 text-align: center;
 font-size: 40px;
}
.sh_sec .excellent_comment li .name {
 font-size: 112.5%;
 line-height: 1.75em;
}
.sh_sec .excellent_comment li .account {
 text-align: right;
}
/********************************************
 imma_sec
*********************************************/
.imma_sec .imma_slider {
 margin-left: 7%;
}
@media screen and (max-width: 1070px) {
 .imma_sec .imma_slider {
  margin-left: 0;
 }
}
.imma_sec .swiper-slide {
 max-width: 500px;
}
.imma_sec .imma_inner {
 position: relative;
}
.imma_sec .imma_inner .content{
 position: absolute;
 width: 90%;
 height: 100%;
 top:0;
 left: 5%;
 z-index: 2;
 padding-top: 2em;
 box-sizing: border-box;
 text-shadow: 0 0 3px rgba(0,0,0,0.7);
}
.imma_sec .imma_inner .content.concept{
  height: auto;
  top:50%;
  transform: translateY(-50%);
 }
@media screen and (max-width: 1070px) and (min-width: 768px){
 .imma_sec .imma_inner .content.concept{
  font-size: 80%;
 }
}
.imma_sec .imma_inner .content .copy{
 line-height: 1.375em;
}
.imma_sec .imma_inner .content p{
 margin-bottom: 1em;
}
.imma_sec .imma_inner .content small{
 display: block;
 font-size: 62.5%;
 line-height: 1.75em;
}
.imma_sec .imma_inner .content h3{
 font-size: 250%;
 margin-bottom: 0.5em;
}
.imma_sec .imma_inner .content .caption{
 position: absolute;
 width: 100%;
 left: 0;
 bottom: 1em;
 z-index: 2;
}
.imma_sec .imma_inner .content h2{
 font-size: 250%;
 margin-bottom: 1em;
 text-align: center;
}
.imma_sec .imma_inner .content .lead{
 font-size: 112.5%;
 line-height: 2em;
 text-align: center;
}
/*.imma_sec .flexWrap {
 padding-top: 3.75em;
 padding-bottom: 3.75em;
}
@media screen and (max-width: 1070px) {
 .imma_sec .flexWrap {
  padding: 2em 0;
 }
}
.imma_sec .flexWrap .phWrap{
 width: 42%;
 box-sizing: border-box;
}
@media screen and (max-width: 1070px) {
 .imma_sec .flexWrap .phWrap{
  width: 96.5%;
  margin-bottom: 2em;
 }
}
.imma_sec .flexWrap .phWrap .ph{
 width: 72%;
 margin: 0 auto;
}
.imma_sec .flexWrap .textWrap{
 width: 54%;
 box-sizing: border-box;
}
@media screen and (max-width: 1070px) {
 .imma_sec .flexWrap .textWrap{
  width: 100%;
  padding: 0 6%;
 }
}
.imma_sec .textWrap a {
 color: #d5001c;
 text-decoration: underline;
}
.imma_sec .catch{
 font-size: 125%;
 margin-bottom: 3em;
}
@media screen and (max-width: 1070px) {
 .imma_sec .catch{
  margin-bottom: 1em;
 }
}
.imma_sec h2 {
 margin-bottom: 0.5em;
}
.imma_sec h2.place {
 margin-bottom: 1em;
}
@media screen and (max-width: 1070px) {
 .imma_sec h2 {
  padding: 0 3.5%;
  margin-bottom: 0.5em;
 }
 .imma_sec h2.place {
  padding: 0;
  margin-bottom: 0.2em;
 }
}
.imma_sec .swiper-button-next {
 right: 5%;
}
@media screen and (max-width: 1070px) {
 .imma_sec .swiper-button-next {
  right: 1%;
 }
}*/
.imma_sec .swiper-button-prev {
 left: 1%;
}
.imma_sec .pagination-2 {
 left: 75%;
 width: auto;
}
@media screen and (max-width: 1070px) {
 .imma_sec .pagination-2 {
  left: auto;
  width: 100%;
 }
}
.swiper-pagination-bullet-active {
  opacity: 1;
  background: #FFF;
}
/********************************************
 sp_sec
*********************************************/
.sp_sec .flexWrap {
 padding: 3.75em 0;
}
@media screen and (max-width: 1070px) {
 .sp_sec .flexWrap {
  padding: 2em 0;
 }
}
.sp_sec .flexWrap .phWrap{
 width: 51%;
 box-sizing: border-box;
}
@media screen and (max-width: 1070px) {
 .sp_sec .flexWrap .phWrap{
  width: 96.5%;
  margin-left: 3.5%;
  margin-bottom: 2em;
 }
}
.sp_sec .flexWrap .textWrap{
 width: 48%;
 padding: 0 0 0 7%;
 box-sizing: border-box;
}
@media screen and (max-width: 1070px) {
 .sp_sec .flexWrap .textWrap{
  width: 100%;
  padding: 0 6%;
 }
}
.sp_sec h2 {
 margin-bottom: 1.5em;
}
@media screen and (max-width: 1070px) {
 .sp_sec h2 {
  padding: 0 3.5%;
  margin-bottom: 0.5em;
 }
}
.sp_sec h2.under_b .row:last-child:after{
 content: none;
}

/********************************************
 pager / next
*********************************************/
#pager {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  padding: 0;
  z-index: 2;
}
@media screen and (max-width: 1070px) {
 #pager {
  display: none;
 }
}
#pager .title {
 padding-left: 10px;
 margin-bottom: 3em;
 writing-mode: vertical-rl;
 -ms-writing-mode: tb-rl;
 -webkit-writing-mode:vertical-rl; 
 text-orientation:upright;
 white-space: normal;
 height: 12em;
 text-align: center;
}
#pager .title span {
 font-family: 'Noto Sans JP', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
#pager  li {
  display: block;
  margin: 20px;
}
#pager  li a{
 display: block;
 width: 10px;
 height: 10px;
 border:2px solid #FFF;
 border-radius: 50%;
 box-sizing: border-box;
 -webkit-transition: 0.3s ease-out;
 transition: 0.3s ease-out;
}
#pager  li.is-current a {
 background: #fff;
}

.modal.textModal {
 background: none;
}
.blocker {
 padding: 40px 20px;
}
.modalTextWrap {
 padding: 3em 3em 1em;
 background: rgba(0,0,0,0.8);
 border: 1px solid #FFF;
 font-size: 112.5%;
 line-height: 1.75em;
 box-sizing: border-box;
}
@media screen and (max-width: 767px) {
 .modalTextWrap {
  padding: 2em 1em 0em;
 }
}
.modalTextWrap > div {
 margin-bottom: 2em;
}

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

 @keyframes

******************************************************************************/
/* move ****************************************************/
.scrMove,
.mvMove{
 opacity: 0;
 -webkit-transition: 0.3s ease-out;
 transition: 0.3s ease-out;
 
}
.scrMove.on,
.mvMove.on{
 opacity:1;
 -webkit-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:0.3s;
 animation-duration:0.3s;
 visibility: visible !important;
}




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


/* fromLeft ****************************************************/
.fromLeft.on{
 -webkit-animation-name: fromLeft;
 animation-name: fromLeft;
}
@-webkit-keyframes fromLeft {
 0% { transform: translateX(-50px);}
 100% { transform: translateX(0);}
}
@keyframes fromLeft {
 0% {  transform: translateX(-50px);}
 100% { transform: translateX(0);}
}

/* fromRight ****************************************************/
.fromRight.on{
 -webkit-animation-name: fromRight;
 animation-name: fromRight;
}
@-webkit-keyframes fromRight {
 0% { transform: translateX(50px);}
 100% { transform: translateX(0);}
}
@keyframes fromRight {
 0% {  transform: translateX(50px);}
 100% { transform: translateX(0);}
}

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

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

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


.gui-btn-sm-facebook,
.gui-btn-sm-twitter,
.gui-btn-sm-instagram {
 font: 0/0 serif;
 margin-right: 4px;
}
.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;
}