@charset "utf-8";

/* CSS Document */

@media screen and (max-width:764px) {
.wrap {
width: 100%;
margin: 0 auto;
padding: 0;
overflow: hidden;
}
.pconly {
display: none;
}
/* -----------　common　------------ */
* {
margin: 0;
padding: 0;
border: 0;
font-size: 14px;
}
body {
font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
font-size: 18px;
}
.ct {
}
.fuchi {
text-shadow: white 2px 0px, white -2px 0px, white 0px -2px, white 0px 2px, white 2px 2px, white -2px 2px, white 2px -2px, white -2px -2px, white 1px 2px, white -1px 2px, white 1px -2px, white -1px -2px, white 2px 1px, white -2px 1px, white 2px -1px, white -2px -1px;
}
/* -----------　/common　------------ */

/* -----------　ScrollAnimation　------------
.sa {opacity: 0;transition: all .5s ease;}
.sa.show {opacity: 1;transform: none;}
.sa--lr {  transform: translate(-100px, 0);}
.sa--rl {  transform: translate(100px, 0);}
.sa--up {  transform: translate(0, 100px);}
.sa--down {  transform: translate(0, -100px);}
.sa--scaleUp {  transform: scale(.5);}
.sa--scaleDown {  transform: scale(1.5);}
.sa--rotateL { transform: rotate(180deg);}
.sa--rotateR { transform: rotate(-180deg);}
------------　/ScrollAnimation　------------ */

/* -----------　LOADING ----------- */
.loading {
position: fixed;
width: 100%;
height: 100vh;
top: 0px;
left: 0px;
background: #000;
z-index: 9999;
}
.loader {
margin: 100px auto;
font-size: 25px;
width: 1em;
height: 1em;
border-radius: 50%;
position: absolute;
top: 15%;
right: 0;
bottom: 0;
left: 0;
text-indent: -9999em;
-webkit-animation: load5 1.1s infinite ease;
animation: load5 1.1s infinite ease;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
}
@-webkit-keyframes load5 {
 0%, 100% {
box-shadow: 0em -2.6em 0em 0em #ffffff, 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.5), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
}
12.5% {
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7), 1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
}
 25% {
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #ffffff, 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
}
 37.5% {
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5), 2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em #ffffff, 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
}
 50% {
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.5), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #ffffff, -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
}
 62.5% {
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5), 0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #ffffff, -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
}
 75% {
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.5), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #ffffff, -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
}
 87.5% {
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5), -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #ffffff;
}
}
@keyframes load5 {
 0%, 100% {
box-shadow: 0em -2.6em 0em 0em #ffffff, 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.5), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
}
 12.5% {
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7), 1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
}
 25% {
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #ffffff, 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
}
 37.5% {
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5), 2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em #ffffff, 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
}
 50% {
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.5), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #ffffff, -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
}
 62.5% {
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5), 0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #ffffff, -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
}
 75% {
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.5), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #ffffff, -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
}
 87.5% {
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5), -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #ffffff;
}
}
/* -----------　/LOADING -----------　*/

.pcwrap {
width: 100%;
margin: 0 auto;
padding: 0;
overflow: hidden;
}
.spwrap {
display: none;
}
/* menu */
.fixAlpha {
background: #000000;
width: 100%;
}
.fixAlpha ul {
top: -40px;
width: 100%;
text-align: center;
}
.fixAlpha li {
float: left;
box-sizing: border-box;
display: block;
color: #aaaaaa;
*display: inline;
*zoom: 1;
width: 20%;
border-right: 1px solid #ffffff;
}
.fixAlpha li:last-of-type {
border-right: 0;
}
.fixAlpha a {
display: block;
background: #000000;
padding: 1em 0;
text-decoration: none;
text-align: center;
color: #ffffff;
font-size: 12px;
}
.fixed ul {
position: fixed;
top: 0;
left: 0;
z-index: 90;
width: 100%;
background: rgba(0,0,0,1);
transition-duration: 0.5s;
}
.fixed a {
padding: 1em 0;
}
/* top */
.bgCrossFade {
position: relative;
width: 100%;
height: 250px;
}
.bgCrossFade .slides {
position: absolute;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.bgCrossFade .slides:not(:first-child) {
display: none;
}
.bgCrossFade .logodate {
position: absolute;
width: 50%;
 padding-top: calc(311 / 449 * 50%);
background: url(../img/sp/top_logodate.png) no-repeat center center;
top: 0;
left: -2%;
right: 0;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
bottom: 0;
background-size: contain;
}
/* navigator */
#navigator {
width: 100%;
position: relative;
margin: 15% auto 00;
}
#navigator .ttl { /* 画像高さ ÷ 横幅 × 100% */
width: 100%;
max-width: 380px;
margin: 0 auto 3%;
padding-top: calc(380 / 750 * 100%);
background: url(../img/sp/matsumoto_bg01.png) no-repeat top center;
background-size: contain;
font-size: 0;
}
#navigator .txt01 {
width: 100%;
max-width: 696px;
margin: 0 auto;
padding-top: calc(663 / 750 * 100%);
background: url(../img/sp/matsumoto_txt01.png) no-repeat top center;
background-size: contain;
font-size: 0;
}
/* about */
#about {
width: 100%;
position: relative;
margin: -50% auto 10%;
}
#about .ttl {
width: 90%;
height: 0;
margin: 10% auto;
padding-top: calc(198 / 683 * 90%);
background: url("../img/sp/about_ttl.png") no-repeat center center;
background-size: cover;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
#about .txt01 {
width: 90%;
height: 0;
margin: 20px auto 40px;
padding-top: calc(628 / 624 * 90%);
background: url("../img/sp/about_txt01.png") no-repeat center center;
background-size: contain;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
#about .txt02 {
width: 90%;
height: 0;
padding-top: calc(392 / 625 * 90%);
/* calc(画像高さ ÷ 画像横幅 × 100%) */background: url("../img/sp/about_txt02.png") no-repeat center center;
background-size: cover;
margin: 20px auto;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
/*   Photo PopUp   */
#photo {
width: 100%;
background-color: #FFFFFF;
position: relative;
margin: 0px auto;
}
#photo ul {
margin: 0 auto 20%;
padding: 0 1%;
list-style: none;
overflow: hidden;
}
#photo ul li {
width: 50%;
padding: 1% 1% 0;
float: left;
box-sizing: border-box;
display: table;
}
#photo ul li img {
width: 100%;
height: auto;
}
.lum-lightbox-inner img {
width: 100%;
margin-top: 0;
}
.lum-gallery-button:after {
width: 20px!important;
height: 20px!important;
}
/*  / Photo PopUp   */

#beig01 {
background: #fff url("../img/sp/beig_bg01.jpg") no-repeat center center;
background-size: cover;
width: 100%;
height: 325px;
text-indent: 100%;
white-space: nowrap;
overflow: hidden; /* calc(画像高さ ÷ 画像横幅 × 100%) */
}
#beig01 .beig_inner {
width: 100%;
height: 325px;
margin: 0 auto;
position: relative;
}
#beig01 .beig_inner .name {
/* calc(画像高さ ÷ 画像横幅 × 100%) */width: 100%;
max-width: 250px;
padding-top: calc(172 / 581 * 100%);
background: url("../img/sp/beig_name.png") no-repeat top right;
background-size: contain;
position: absolute;
top: 10px;
right: 10px;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
#beig01 .beig_inner .profile {
/* calc(画像高さ ÷ 画像横幅 × 100%) */width: 100%;
max-width: 300px;
padding-top: calc(253 / 713 * 100%);
background: url("../img/sp/beig_profile.png") no-repeat center bottom;
background-size: contain;
position: absolute;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
bottom: 10px;
right: 10px;
}
#beig02 {
background: #fff url("../img/sp/beig_bg02.jpg") no-repeat top center;
background-size: cover;
width: 100%;
height: 170vw; /* calc(画像高さ ÷ 画像横幅 × 100%) */
}
#beig02 .beig_inner {
width: 100%;
margin: 0 auto;
position: relative;
}
#beig02 .beig_inner .txt01 {
width: 100%;
height: 0;
margin: 0px auto 10%;
padding-top: calc(405 / 707 * 120%);
background: url("../img/sp/beig_txt01.png") no-repeat center center;
background-size: contain;
overflow: hidden;
}
#beig02 .beig_inner .txt02 {
width: 100%;
height: 0;
margin: 0px auto 15%;
padding-top: calc(199 / 569 * 75%);
background: url("../img/sp/beig_txt02.png") no-repeat center center;
background-size: contain;
overflow: hidden;
}
#beig02 .beig_inner .txt03 {
width: 100%;
height: 0;
margin: 0px auto;
padding-top: calc(179 / 335 * 50%);
background: url("../img/sp/beig_txt03.png") no-repeat center right;
background-size: contain;
overflow: hidden;
}
#matuda01 {
background: #fff url("../img/sp/matuda_bg01.jpg") no-repeat center center;
background-size: cover;
width: 100%;
height: 325px;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
#matuda01 .matuda_inner {
width: 100%;
height: 325px;
margin: 0 auto;
position: relative;
}
#matuda01 .matuda_inner .name {
width: 100%;
max-width: 250px;
 padding-top: calc(172 / 581 * 100%);
background: url("../img/sp/matuda_name.png") no-repeat top left;
background-size: contain;
position: absolute;
top: 10px;
left: 10px;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
#matuda01 .matuda_inner .profile {
width: 100%;
max-width: 300px;
 padding-top: calc(253 / 713 * 100%);
background: url("../img/sp/matuda_profile.png") no-repeat center bottom;
background-size: contain;
position: absolute;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
bottom: 10px;
left: 10px;
}
#matuda02 {
background: #fff url("../img/sp/matuda_bg02.jpg") no-repeat center center;
background-size: cover;
width: 100%;
height: 150vw; /* calc(画像高さ ÷ 画像横幅 × 100%) */
}
#matuda02 .matuda_inner {
width: 100%;
margin: 0 auto;
position: relative;
padding-top: 12%;
}
#matuda02 .matuda_inner .txt01 {
width: 100%;
height: 0;
margin: 0px auto 15%;
 padding-top: calc(211 / 359 * 50%);
background: url("../img/sp/matuda_txt01.png") no-repeat center right;
background-size: contain;
overflow: hidden;
}
#matuda02 .matuda_inner .txt02 {
width: 100%;
height: 0;
margin: 0px auto 20%;
padding-top: calc(53 / 676 * 100%);
background: url("../img/sp/matuda_txt02.png") no-repeat center center;
background-size: contain;
overflow: hidden;
}
#matuda02 .matuda_inner .txt03 {
width: 100%;
height: 0;
margin: 0px auto;
padding-top: calc(368 / 550 * 75%);
background: url("../img/sp/matuda_txt03.png") no-repeat center left;
background-size: contain;
overflow: hidden;
}
#mv_contents {
margin: -1px auto 10px;
width: 100%;
background: #fff url("../img/sp/movie_bg.jpg") no-repeat top center;
background-size: cover;
white-space: nowrap;
margin: 0px auto 10px;
margin: 0 auto 10px;
padding: 5% 0 50%;
}
#mv_contents .mv_ttl {
margin: 0 auto;
width: 100%;
height: 0;
padding-top: calc(71 / 291 * 50%);
/* calc(画像高さ ÷ 画像横幅 × 100%) */background: url("../img/sp/movie_ttl.png") no-repeat center center;
background-size: contain;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
/* MOVIE */
#movie {
width: 100%;
}
#movie #in-movie {
width: 100%;
max-width: 1100px;
margin: 0 auto;
position: relative;
}
/*#movie #in-movie p {
    width: 100%;
    text-align: center;
}
*/

#movie #in-movie p#coment {
position: absolute;
bottom: 25%;
right: 0;
margin: 0 auto;
width: 18.728%;
height: 38.838%;
background: url("../img/coment2.png") no-repeat;
padding-top: 0;
background-size: contain;
font-size: 0px;
}
#movie #in-movie p#coment a.pc {
position: absolute;
width: 100%;
height: 100%;
display: block;
border-radius: 50%;
top: 0;
cursor: pointer;
}
#movie #in-movie p#coment a.pc:hover {
background: rgba(200, 200, 200, 0.2);
border: 1px solid rgba(33, 33, 33, 0.2);
}
#movie #in-movie p#coment a.sp {
display: none;
}
#movie #in-movie .movie_area {
width: 80%;
margin: 0 auto;
padding: 1em 0 0.5em;
text-align: left;
}
#movie #in-movie .movie_area .video #vjs_video_540, #movie #in-movie .movie_area .video #vjs_video_3, #movie #in-movie .movie_area .video .video-js {
padding-top: 56.3%;
}
#footer {
width: 100%;
margin: -10% auto -2px;
padding-top: calc(319 / 765 * 120%);
/* calc(画像高さ ÷ 画像横幅 × 100%) */background: #fff url("../img/sp/footer_bg.jpg") no-repeat center bottom;
background-size: cover;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
#footer .footer_inner {
width: 100%;
margin: -35% auto 0;
}
#footer .footer_inner p {
width: 100%;
padding-top: calc(206 / 511 * 50%);
/* calc(画像高さ ÷ 画像横幅 × 100%) */background: url("../img/sp/footer_logo.png") no-repeat top left 15%;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
background-size: contain;
margin: 0 auto;
}
}