@charset "utf-8";
@media only screen and (orientation:landscape) and (min-width : 813px),(orientation:portrait) and (min-width : 753px){

/*  リセット　*/

html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,abbr, address, cite, code,del, dfn, em, img, ins, kbd, q, samp,small, strong, sub, sup, var,b, i,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, figcaption, figure,footer, header, hgroup, menu, nav, section, summary,time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
color:#282121;
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
display:block;
}
li{
list-style-type:none;
}
nav ul {
list-style:none;
}
blockquote, q {
quotes:none;
}
blockquote:before, blockquote:after,q:before, q:after {
content:'';
content:none;
}
a {
margin:0;
padding:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
ins {
background-color:#ff9;
color:#000;
text-decoration:none;
}
mark {
background-color:#ff9;
color:#000;
font-style:italic;
font-weight:bold;
}
del {
text-decoration: line-through;
}
abbr[title], dfn[title] {
border-bottom:1px dotted;
cursor:help;
}
table {
border-collapse:collapse;
border-spacing:0;
}
hr {
display:block;
height:1px;
border:0;
border-top:1px solid #cccccc;
margin:1em 0;
padding:0;
}
input, select {
vertical-align:middle;
}
*,*:before,*:after {
box-sizing: border-box;
}

/*  共通CSS　*/

.sp{
display: none;
}
body {
line-height:1;
font-family:'Sawarabi Mincho','Noto Sans JP', '游ゴシック Medium', '游ゴシック体', 'Yu Gothic Medium', YuGothic, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
position:relative;
}

a{color:#f75415; text-decoration:none;}
a:hover{opacity:0.6;cursor:pointer}

.none{
display:none!important;
}

/* header */
header{
height:100vh;
text-align:center;
position:relative;
z-index:-1;
overflow:hidden;
}
header:before{
content:"";
left:0;
top:0;
width:100%;
height:100%;
text-align:center;
background:#ccc;
background-size:cover;
background-position:center;
position:absolute;
z-index:-1;
overflow:hidden;
-webkit-animation: zoom 6s 1;
animation: zoom 6s 1;
animation-fill-mode: forwards;
mix-blend-mode:multiply;
}
@keyframes zoom {
0% {
transform: scale(1);
}
100% {
transform: scale(1.3);
}
}
header:after{
content:"";
left:0;
top:0;
width:100%;
height:100%;
z-index:-1;
display:block;
position: absolute;
mix-blend-mode:multiply;
background: linear-gradient(45deg, #000000, #3D3D3D, #FFFFFF, #F61062);
background-size: 800% 800%;
animation: GradientBackground 10s ease infinite;
mix-blend-mode:multiply;
}
@keyframes GradientBackground {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}     

header .fview{
display:block;
}
.fview h1.main-logo{
width:500px;
position: absolute;
top:50%;
left:50%;
transform: translateY(-50%) translateX(-50%);
-webkit- transform: translateY(-50%)translateX(-50%);
margin: auto;
z-index:11;
}
.fview h1.main-logo img{
width:100%;
}
.fview h1.main-logo:after{
content:"SHINJUKU NI CHOME";
color:#FFF;
margin:15px 0 0;
display:block;
font-size:34px;
font-family: 'Playfair Display', serif;
}
header nav{
position:absolute;
top:10px;
right:10px;
display:none;
}
header nav ul{
display: -webkit-flex;
display: flex;
align-items: center;
}
header nav ul li a{
font-size:15px;
padding:0 15px;
color:#FFF;
display:block;
text-align:center;
}


/* map */

#about{
display:block;
margin:0 auto;
padding:80px 0 50px;
}
#about h2{
font-size:36px;
display:block;
margin:0 0 60px;
text-align:center;
position:relative;
line-height:150px;
height:150px;
}
#about h2:before{
content:"";
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
background:url(/img/h-img.png)no-repeat center;
background-size:100%;
width:150px;
height:150px;
display:block;
margin:5px auto 0px;
font-size:14px;
}
#about h2:after{
content:"message";
position:absolute;
bottom:45px;
left:0;
right:0;
display:block;
margin:5px auto 0px;
font-size:14px;
line-height:0;
}
#about .aboutinner{
width:800px;
margin:auto;
}
#about p{
text-align:center;
line-height:2;
margin:0 auto 20px;
font-size:16px;
}

/*sns*/

#sns{
display:block;
margin:0 auto;
padding:80px 0 50px;
}
#sns h2{
font-size:36px;
display:block;
margin:0 0 60px;
text-align:center;
position:relative;
line-height:150px;
height:150px;
}
#sns h2:before{
content:"";
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
background:url(/img/h-img.png)no-repeat center;
background-size:100%;
width:150px;
height:150px;
display:block;
margin:5px auto 0px;
font-size:14px;
}
#sns h2:after{
content:"twitter";
position:absolute;
bottom:45px;
left:0;
right:0;
display:block;
margin:5px auto 0px;
font-size:14px;
line-height:0;
}

#sns .snsinner{text-align:center;max-width:800px;margin:0 auto;}


/* map */

#map{
display:block;
margin:0 auto;
padding:80px 0 50px;
}
#map h2{
font-size:36px;
display:block;
margin:0 0 60px;
text-align:center;
position:relative;
line-height:150px;
height:150px;
}
#map h2:before{
content:"";
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
background:url(/img/h-img.png)no-repeat center;
background-size:100%;
width:150px;
height:150px;
display:block;
margin:5px auto 0px;
font-size:14px;
}
#map h2:after{
content:"map";
position:absolute;
bottom:45px;
left:0;
right:0;
display:block;
margin:5px auto 0px;
font-size:14px;
line-height:0;
}
#map .mapinner{
width:800px;
margin:auto;
}
#map p{
text-align:center;
line-height:2;
margin:0 auto 20px;
font-size:16px;
}

.map-01{
position:absolute;
width:92px;
height:142px;
left:110px;
bottom:0;
cursor:pointer;
}
.map-01:hover:before{
content:"";
position:absolute;
width:92px;
height:142px;
left:0;
bottom:0;
mix-blend-mode:multiply;
background:#dc4747;
cursor:pointer;
z-index:-1;
}
.map-02{
position:absolute;
width:90px;
height:142px;
left:242px;
bottom:0;
cursor:pointer;
}
.map-02:hover:before{
content:"";
position:absolute;
width:90px;
height:142px;
left:0;
bottom:0;
mix-blend-mode:multiply;
background:#91d858;
z-index:-1;
}
.map-03{
position:absolute;
width:125px;
height:69px;
left:135px;
bottom:182px;
cursor:pointer;
}
.map-03:hover:before{
content:"";
position:absolute;
width:125px;
height:69px;
left:0;
bottom:0;
mix-blend-mode:multiply;
background:#ed793e;
z-index:-1;
}
.map-04{
position:absolute;
width:85px;
height:90px;
right:104px;
bottom:171px;
cursor:pointer;
}
.map-04:hover:before{
content:"";
position:absolute;
width:85px;
height:90px;
right:0;
bottom:0;
mix-blend-mode:multiply;
background:#5f9dc9;
z-index:-1;
}
.map-05{
position:absolute;
width:69px;
height:85px;
right:104px;
bottom:278px;
cursor:pointer;
}
.map-05:hover:before{
content:"";
position:absolute;
width:69px;
height:85px;
right:0;
bottom:0;
mix-blend-mode:multiply;
background:#e5d224;
z-index:-1;
}
.map-img{
margin:100px 0 0;
display:block;
background:url(/img/map-bg.png)no-repeat center;
background-size:auto 100%;
height:1000px;
padding:80px 0 0;
position:relative;
}
.map-img .logo-img{
width:500px;
margin:20px auto 60px;
display:block;
}
.map-img-in{
width:500px;
height:650px;
background:url(/img/map-zu.png)no-repeat center;
background-size:auto 100%;;
position:relative;
display:block;
margin:20px auto 50px;
}
.map-list{
background:#000;
width:720px;
margin:-10px auto 0;
padding:30px 10px 50px;
position:relative;
}
.map-list:after{
content:"";
position:absolute;
bottom:-30px;
left:0;
height:100%;
width:100%;
background:url(/img/map-bot.png)no-repeat center bottom;
background-size:100%;
display:block;
z-index:-1;
}
.map-list dl{
display: -webkit-flex;
display: flex;
width:100%;
padding:30px;
align-items: center;
background:url(/img/icon-line.png)no-repeat center bottom;
background-size:95%;
}
.map-list dl dt{
width:60%;
color:#fff;
}
.map-list dl dt span{
font-size:30px;
margin:0 10px;
color:#fff;
}
.map-list dl dd ul{
display:-webkit-flex;
display:flex;
align-items: center;
width:40%;
}
.map-list dl dd li img{
width:35px;
margin:0 5px
}


/* shop */

#shop{
display:block;
margin:0 auto;
padding:80px 0 50px;
}
#shop h2{
font-size:36px;
display:block;
margin:0 0 60px;
text-align:center;
position:relative;
line-height:150px;
height:150px;
}
#shop h2:before{
content:"";
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
background:url(/img/h-img.png)no-repeat center;
background-size:100%;
width:150px;
height:150px;
display:block;
margin:5px auto 0px;
font-size:14px;
}
#shop h2:after{
content:"map";
position:absolute;
bottom:45px;
left:0;
right:0;
display:block;
margin:5px auto 0px;
font-size:14px;
line-height:0;
}
#shop .shopinner{
width:100%;
margin:auto;
}
#shop p{
text-align:center;
line-height:2;
margin:0 auto 10px;
font-size:16px;
}
#shop .google-map iframe{
width:100%;
margin:50px auto 0;
display:block;
filter: grayscale(100%);
}

.copyright-txt{
text-align:center;
padding:10px;
background:#000;
color:#FFF;
font-size:12px
}

/* modal*/
.modal{
display: none;
height: 100%;
width: 100%;
position:fixed;
top:0;
}
.modal-bg{
background: rgba(0,0,0,0.8);
height: 100%;
width: 100%;
top:0;
left:0;
position: absolute;
z-index:0;
}
.modal-content{
background: #fff;
position: absolute;
width: 70%;
z-index:1;
max-height: calc(100vh - 200px);
overflow-y: scroll;
top:50%;
left:50%;
transform: translateY(-50%) translateX(-50%);
-webkit- transform: translateY(-50%)translateX(-50%);
margin: auto;
}
.modal:before{
content:"";
background:url(/img/modal-bg-pc.png)no-repeat center;
background-size:100% 100%;
position: absolute;
width: 75%;
height:100%;
z-index:1;
max-height: calc(100vh - 150px);
top:50%;
left:50%;
transform: translateY(-50%) translateX(-50%);
-webkit- transform: translateY(-50%)translateX(-50%);
margin: auto;
}
.js-modal-open{
display: block;
width: 100%;
height: 100%;
}
.map-on-in{
width:100%;
padding:30px;
}
.map-on-in h3{
text-align:center;
margin:30px auto 20px;
font-size:24px;
}
.map-on-in .map-zu-img{
width:500px;
height:300px;
display: -webkit-flex;
display: flex;
margin:0 auto 80px;
box-shadow:0 0 0 2px #000;
box-sizing:border-box;
border-radius:5px;
}
.map-01-on .map-on-in .map-zu-img img{
width:auto;
max-height: 300px;
text-align:center;
margin:auto;
display:block;
}
.map-02-on .map-on-in .map-zu-img img{
width:60%;
text-align:center;
margin:auto;
display:block;
}
.map-03-on .map-on-in .map-zu-img img{
width:30%;
text-align:center;
margin:auto;
display:block;
}
.map-04-on .map-on-in .map-zu-img img{
width:30%;
text-align:center;
margin:auto;
display:block;
}
.map-05-on .map-on-in .map-zu-img img{
width:30%;
text-align:center;
margin:auto;
display:block;
}
.map-01-on .map-on-in img.map-zu-logo{
width:250px;
margin:auto;
display:block;
}
.map-02-on .map-on-in img.map-zu-logo{
width:200px;
margin:auto;
display:block;
}
.map-03-on .map-on-in img.map-zu-logo{
width:100px;
margin:auto;
display:block;
}
.map-04-on .map-on-in img.map-zu-logo{
width:100px;
margin:auto;
display:block;
}
.map-05-on .map-on-in img.map-zu-logo{
width:100px;
margin:auto;
display:block;
}
#map .map-on-in p{
text-align:left;
margin:30px 0;
}
#map .map-on-in p.main-name{
width:100%;
display:block;
text-align:right;
font-size:24px;
margin:50px 0 0;
}
.map-on-in ul{
display: -webkit-flex;
display: flex;
justify-content: center;
align-items: center;
}
.map-on-in li img{
width:50px;
margin:0 10px;
}
.js-modal-close:before{
content:"";
background:url(/img/lcon-batu.png)no-repeat center;
background-size:100%;
width:45px;
height:45px;
display:block;
position:absolute;
top:8%;
left:85%;
transform: translateY(-50%) translateX(-50%);
-webkit- transform: translateY(-50%)translateX(-50%);
margin: auto;
cursor:pointer;
}


/* main-img-top */

.main_imgBox {
height: 100vh;
overflow: hidden;
position: relative;
}
.main_imgBox:before{
content:"";
background:#000;
height:100%;
width:100%;
display:block;
position:relative;
z-index:1;
}
.main_img {
z-index:1;
opacity: 0;
width: 100%;
height: 100vh;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
position: absolute;
left: 0;
top: 0;
-webkit-animation: anime 24s 0s infinite;
animation: anime 24s 0s infinite;
}
.main_img:nth-of-type(2) {
-webkit-animation-delay: 6s;
animation-delay: 6s;
}
.main_img:nth-of-type(3) {
-webkit-animation-delay: 12s;
animation-delay: 12s;
}
.main_img:nth-of-type(4) {
-webkit-animation-delay: 18s;
animation-delay: 18s;
}


@keyframes anime {
0% {
opacity: 0;
}
8% {
opacity: 1;
}
17% {
opacity: 1;
}
25% {
opacity: 0;
transform: scale(1.2) ;
z-index:9;
}
100% { opacity: 0 }
}


#about .about-end-txt{
margin:50px 0 0;
}
#about .about-end-txt p{
margin:0;
padding:0;
font-size:24px;
line-height:1.5;
}
#about .about-end-txt p a{
font-size:24px;
cursor:pointer;
display:block;
}
.click-txt-box{
position:absolute;
left:0;
right:0;
top:180px;
margin:auto;
width:100%;
text-align:center;
font-size:14px;
color:#999;
}
.ss-txt{
font-size:16px!important;
color:#000;
}

}



/*--------------  ↓sp　--------------*/



@media only screen and (orientation:landscape) and (max-width : 813px),(orientation:portrait) and (max-width : 753px){

/*  リセット　*/

html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,abbr, address, cite, code,del, dfn, em, img, ins, kbd, q, samp,small, strong, sub, sup, var,b, i,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, figcaption, figure,footer, header, hgroup, menu, nav, section, summary,time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
color:#333;
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
display:block;
}
li{
list-style-type:none;
}
nav ul {
list-style:none;
}
blockquote, q {
quotes:none;
}
blockquote:before, blockquote:after,q:before, q:after {
content:'';
content:none;
}
a {
margin:0;
padding:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
ins {
background-color:#ff9;
color:#000;
text-decoration:none;
}
mark {
background-color:#ff9;
color:#000;
font-style:italic;
font-weight:bold;
}
del {
text-decoration: line-through;
}
abbr[title], dfn[title] {
border-bottom:1px dotted;
cursor:help;
}
table {
border-collapse:collapse;
border-spacing:0;
}
hr {
display:block;
height:1px;
border:0;
border-top:1px solid #cccccc;
margin:1em 0;
padding:0;
}
input, select {
vertical-align:middle;
}
*,*:before,*:after {
box-sizing: border-box;
}
/*  共通CSS　*/
.pc{
display: none;
}

body {
line-height:1;
font-family:'Sawarabi Mincho', 'Noto Sans JP', '游ゴシック Medium', '游ゴシック体', 'Yu Gothic Medium', YuGothic, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
position:relative;
}

a{color:#f75415; text-decoration:none;}
.none{
display:none!important;
}

/* header */
header{
height:100vh;
text-align:center;
position:relative;
z-index:-1;
overflow:hidden;
}
header:before{
content:"";
left:0;
top:0;
width:100%;
height:100%;
text-align:center;
background:#ccc;
background-size:cover;
background-position:center;
position:absolute;
z-index:-1;
overflow:hidden;
-webkit-animation: zoom 4s 1;
animation: zoom 4s 1;
animation-fill-mode: forwards;
mix-blend-mode:multiply;
}
@keyframes zoom {
0% {
transform: scale(1);
}
100% {
transform: scale(1.2);
}
}

header:after{
content:"";
left:0;
top:0;
width:100%;
height:100%;
z-index:-1;
display:block;
position: absolute;
mix-blend-mode:multiply;
background: linear-gradient(45deg, #000000, #3D3D3D, #FFFFFF, #F61062);
background-size: 800% 800%;
animation: GradientBackground 10s ease infinite;
mix-blend-mode:multiply;
}
@keyframes GradientBackground {
0% {
background-position: 0% 50%;
}

50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}     


header .fview{
display:block;
}
.fview h1.main-logo{
width:300px;
position: absolute;
top:50%;
left:50%;
transform: translateY(-50%) translateX(-50%);
-webkit- transform: translateY(-50%)translateX(-50%);
margin: auto;
z-index:11;
}
.fview h1.main-logo img{
width:100%;
}
.fview h1.main-logo:after{
content:"SHINJUKU NI CHOME";
color:#FFF;
margin:10px 0 0;
display:block;
font-size:20px;
font-family: 'Playfair Display', serif;
}
header nav{
position:absolute;
top:10px;
right:10px;
display:none;
}
header nav ul{
display: -webkit-flex;
display: flex;
align-items: center;
}
header nav ul li a{
font-size:15px;
padding:0 15px;
color:#FFF;
display:block;
text-align:center;
}

/* about */

#about{
display:block;
margin:0 auto;
padding:50px 0 20px;
}
#about h2{
font-size:36px;
display:block;
margin:0 0 35px;
text-align:center;
position:relative;
line-height:150px;
height:150px;
}
#about h2:before{
content:"";
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
background:url(/img/h-img.png)no-repeat center;
background-size:100%;
width:150px;
height:150px;
display:block;
margin:5px auto 0px;
font-size:14px;
}
#about h2:after{
content:"message";
position:absolute;
bottom:45px;
left:0;
right:0;
display:block;
margin:5px auto 0px;
font-size:14px;
line-height:0;
}
#about .aboutinner{
width:100%;
margin:auto;
}
#about p{
text-align:left;
line-height:2;
margin:0 auto 20px;
font-size:16px;
padding:0 15px;

}

/*sns*/
#sns{
display:block;
margin:0 auto;
padding:50px 0 50px;
}
#sns h2{
font-size:36px;
display:block;
margin:0 0 35px;
text-align:center;
position:relative;
line-height:150px;
height:150px;
}
#sns h2:before{
content:"";
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
background:url(/img/h-img.png)no-repeat center;
background-size:100%;
width:150px;
height:150px;
display:block;
margin:5px auto 0px;
font-size:14px;
}
#sns h2:after{
content:"twitter";
position:absolute;
bottom:45px;
left:0;
right:0;
display:block;
margin:5px auto 0px;
font-size:14px;
line-height:0;
}
#sns .snsinner{
text-align:center;
}

/* map */

#map{
display:block;
margin:0 auto;
padding:50px 0 50px;
}
#map h2{
font-size:36px;
display:block;
margin:0 0 35px;
text-align:center;
position:relative;
line-height:150px;
height:150px;
}
#map h2:before{
content:"";
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
background:url(/img/h-img.png)no-repeat center;
background-size:100%;
width:150px;
height:150px;
display:block;
margin:5px auto 0px;
font-size:14px;
}
#map h2:after{
content:"map";
position:absolute;
bottom:45px;
left:0;
right:0;
display:block;
margin:5px auto 0px;
font-size:14px;
line-height:0;
}
#map .mapinner{
width:100%;
margin:auto;
padding:0 15px;
}
#map p{
text-align:center;
line-height:2;
margin:0 auto 20px;
font-size:16px;
}
.map-01{
position:absolute;
width:68px;
height:98px;
left:95px;
bottom:0;
cursor:pointer;
}
.map-01:hover:before{
content:"";
position:absolute;
width:68px;
height:98px;
left:0;
bottom:0;
mix-blend-mode:multiply;
background:#dc4747;
cursor:pointer;
z-index:-1;
}
.map-02{
position:absolute;
width:65px;
height:98px;
left:185px;
bottom:0;
cursor:pointer;

}
.map-02:hover:before{
content:"";
position:absolute;
width:65px;
height:98px;
left:0;
bottom:0;
mix-blend-mode:multiply;
background:#91d858;
z-index:-1;
}
.map-03{
position:absolute;
width:95px;
height:55px;
left:110px;
bottom:120px;
cursor:pointer;
}
.map-03:hover:before{
content:"";
position:absolute;
width:95px;
height:55px;
left:0;
bottom:0;
mix-blend-mode:multiply;
background:#ed793e;
z-index:-1;
}
.map-04{
position:absolute;
width:65px;
height:75px;
right:90px;
bottom:110px;
cursor:pointer;
}
.map-04:hover:before{
content:"";
position:absolute;
width:65px;
height:75px;
right:0;
bottom:0;
mix-blend-mode:multiply;
background:#5f9dc9;
z-index:-1;
}
.map-05{
position:absolute;
width:60px;
height:70px;
right:90px;
bottom:190px;
cursor:pointer;
}
.map-05:hover:before{
content:"";
position:absolute;
width:60px;
height:70px;
right:0;
bottom:0;
mix-blend-mode:multiply;
background:#e5d224;
z-index:-1;
}

.map-img{
margin:0;
display:block;
background:url(/img/map-bg-sp.png)no-repeat top;
background-size:100%;
height:100%;
padding:20px 0 65px;
position:relative;
}
.map-img .logo-img{
width:250px;
margin:40px auto 50px;
display:block;
}
.map-img-in{
width:auto;
height:450px;
background:url(/img/map-zu.png)no-repeat center;
background-size:auto 100%;
position:relative;
display:block;
margin:20px auto 20px;
}
.map-list{
background:#000;
width:100%;
margin:-10px auto 0;
padding:30px 10px 50px;
position:relative;
}
.map-list:after{
content:"";
position:absolute;
bottom:-15px;
left:0;
height:100%;
width:100%;
background:url(/img/map-bot.png)no-repeat center bottom;
background-size:100%;
display:block;
z-index:-1;
}
.map-list dl{
display: -webkit-flex;
display: flex;
width:100%;
padding:20px 10px;
align-items: center;
background:url(/img/icon-line.png)no-repeat center bottom;
background-size:95%;
}
.map-list dl dt{
width:60%;
color:#fff;
font-size:16px;
}
.map-list dl dt span{
font-size:22px;
margin:10px 0;
color:#fff;
display:block;
}
.map-list dl dd ul{
display:-webkit-flex;
display:flex;
align-items: center;
width:40%;
}
.map-list dl dd li img{
width:30px;
margin:0 5px
}


/* shop */
#shop{
display:block;
margin:0 auto;
padding:50px 0 50px;
}
#shop h2{
font-size:36px;
display:block;
margin:0 0 35px;
text-align:center;
position:relative;
line-height:150px;
height:150px;
}
#shop h2:before{
content:"";
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
background:url(/img/h-img.png)no-repeat center;
background-size:100%;
width:150px;
height:150px;
display:block;
margin:5px auto 0px;
font-size:14px;
}
#shop h2:after{
content:"map";
position:absolute;
bottom:45px;
left:0;
right:0;
display:block;
margin:5px auto 0px;
font-size:14px;
line-height:0;
}
#shop .shopinner{
width:100%;
margin:auto;
}
#shop p{
text-align:center;
line-height:2;
margin:0 auto 10px;
font-size:16px;
}
#shop .google-map iframe{
width:100%;
margin:30px auto 0;
display:block;
filter: grayscale(100%);
padding:0 15px;
}
.copyright-txt{
text-align:center;
padding:10px;
background:#000;
color:#FFF;
font-size:12px
}

/* modal*/
.modal{
display: none;
height: 100%;
width: 100%;
position:fixed;
top:0;
z-index:10000;
}
.modal-bg{
background: rgba(0,0,0,0.8);
height: 100%;
width: 100%;
top:0;
left:0;
position: absolute;
z-index:0;
}
.modal-content{
background: #fff;
position: absolute;
width: 90%;
z-index:1;
max-height: calc(100vh - 250px);
overflow-y: scroll;
top:50%;
left:50%;
transform: translateY(-50%) translateX(-50%);
-webkit- transform: translateY(-50%)translateX(-50%);
margin: auto;
}
.modal:before{
content:"";
background:url(/img/modal-bg-pc.png)no-repeat center;
background-size:100% 100%;
position: absolute;
width: 99%;
height:100%;
z-index:1;
max-height: calc(100vh - 200px);
top:50%;
left:50%;
transform: translateY(-50%) translateX(-50%);
-webkit- transform: translateY(-50%)translateX(-50%);
margin: auto;
}
.js-modal-open{
display: block;
width: 100%;
height: 100%;
}
.map-on-in{
width:100%;
padding:20px;
}
.map-on-in h3{
text-align:center;
margin:30px auto 20px;
font-size:24px;
}
.map-on-in .map-zu-img{
width:width:100%;
height:250px;
display: -webkit-flex;
display: flex;
margin:0 auto 80px;
box-shadow:0 0 0 2px #000;
box-sizing:border-box;
border-radius:5px;
}
.map-01-on .map-on-in .map-zu-img img{
width: auto;
max-height: 250px;
text-align:center;
margin:auto;
display:block;
}
.map-02-on .map-on-in .map-zu-img img{
width:80%;
text-align:center;
margin:auto;
display:block;
}
.map-03-on .map-on-in .map-zu-img img{
width:60%;
text-align:center;
margin:auto;
display:block;
}
.map-04-on .map-on-in .map-zu-img img{
width:70%;
text-align:center;
margin:auto;
display:block;
}
.map-05-on .map-on-in .map-zu-img img{
width:50%;
text-align:center;
margin:auto;
display:block;
}
.map-01-on .map-on-in img.map-zu-logo{
width:250px;
margin:auto;
display:block;
}
.map-02-on .map-on-in img.map-zu-logo{
width:200px;
margin:auto;
display:block;
}
.map-03-on .map-on-in img.map-zu-logo{
width:100px;
margin:auto;
display:block;
}
.map-04-on .map-on-in img.map-zu-logo{
width:100px;
margin:auto;
display:block;
}
.map-05-on .map-on-in img.map-zu-logo{
width:100px;
margin:auto;
display:block;
}
#map .map-on-in p{
text-align:left;
margin:30px 0;
}
#map .map-on-in p.main-name{
width:100%;
display:block;
text-align:center;
font-size:24px;
margin:50px 0 0;
}
.map-on-in ul{
display: -webkit-flex;
display: flex;
justify-content: center;
align-items: center;
}
.map-on-in li img{
width:50px;
margin:0 10px;
}
.js-modal-close:before{
content:"";
background:url(/img/lcon-batu.png)no-repeat center;
background-size:100%;
width:45px;
height:45px;
display:block;
position:absolute;
top:8%;
left:85%;
transform: translateY(-50%) translateX(-50%);
-webkit- transform: translateY(-50%)translateX(-50%);
margin: auto;
cursor:pointer;
}


#about .about-end-txt{
margin:20px 0 0;
text-align:center;
}
#about .about-end-txt p{
margin:0;
padding:0;
font-size:24px;
line-height:1.5;
text-align:center;
}
#about .about-end-txt p{
font-size:24px;
cursor:pointer;
display:block;
}
.click-txt-box{
position:absolute;
left:0;
right:0;
top:110px;
margin:auto;
width:100%;
text-align:center;
font-size:12px;
color:#999;
}

/* main-img-top */

.main_imgBox {
height: 100vh;
overflow: hidden;
position: relative;
}
.main_imgBox:before{
content:"";
background:#000;
height:100%;
width:100%;
display:block;
position:relative;
z-index:1;
}
.main_img {
z-index:1;
opacity: 0;
width: 100%;
height: 100vh;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
position: absolute;
left: 0;
top: 0;
-webkit-animation: anime 24s 0s infinite;
animation: anime 24s 0s infinite;
}
.main_img:nth-of-type(2) {
-webkit-animation-delay: 6s;
animation-delay: 6s;
}
.main_img:nth-of-type(3) {
-webkit-animation-delay: 12s;
animation-delay: 12s;
}
.main_img:nth-of-type(4) {
-webkit-animation-delay: 18s;
animation-delay: 18s;
}
@keyframes anime {
0% {
opacity: 0;
}
8% {
opacity: 1;
}
17% {
opacity: 1;
}
25% {
opacity: 0;
transform: scale(1.2) ;
z-index:9;
}
100% { opacity: 0 }
}
.ss-txt{
font-size:16px!important;
color:#000;
}

}

/* SPend */


@media only screen and (max-width: 376px){
.map-img{
margin:0;
display:block;
background:url(/img/map-bg-sp.png)no-repeat top;
background-size:100%;
height:100%;
padding:20px 0 45px;
}
.map-img .logo-img{
width:200px;
margin:30px auto 30px;
display:block;
}
.map-img-in{
width:auto;
height:450px;
background:url(/img/map-zu.png)no-repeat center;
background-size:auto 100%;
position:relative;
display:block;
margin:20px auto 10px;
}
.map-01{
position:absolute;
width:68px;
height:98px;
left:72px;
bottom:0;
cursor:pointer;
}
.map-01:hover:before{
content:"";
position:absolute;
width:68px;
height:98px;
left:0;
bottom:0;
mix-blend-mode:multiply;
background:#dc4747;
cursor:pointer;
z-index:-1;
}
.map-02{
position:absolute;
width:65px;
height:98px;
left:168px;
bottom:0;
cursor:pointer;
}
.map-02:hover:before{
content:"";
position:absolute;
width:65px;
height:98px;
left:0;
bottom:0;
mix-blend-mode:multiply;
background:#91d858;
z-index:-1;
}
.map-03{
position:absolute;
width:105px;
height:55px;
left:80px;
bottom:120px;
cursor:pointer;
}
.map-03:hover:before{
content:"";
position:absolute;
width:105px;
height:55px;
left:0;
bottom:0;
mix-blend-mode:multiply;
background:#ed793e;
z-index:-1;
}
.map-04{
position:absolute;
width:65px;
height:75px;
right:70px;
bottom:110px;
cursor:pointer;
}
.map-04:hover:before{
content:"";
position:absolute;
width:65px;
height:75px;
right:0;
bottom:0;
mix-blend-mode:multiply;
background:#5f9dc9;
z-index:-1;
}
.map-05{
position:absolute;
width:65px;
height:85px;
right:70px;
bottom:183px;
cursor:pointer;
}
.map-05:hover:before{
content:"";
position:absolute;
width:65px;
height:85px;
right:0;
bottom:0;
mix-blend-mode:multiply;
background:#e5d224;
z-index:-1;
}
.click-txt-box{
position:absolute;
left:0;
right:0;
top:86px;
margin:auto;
width:100%;
text-align:center;
font-size:11px;
color:#999;
}
}
@media only screen and (max-width: 361px){
.map-img{
margin:0;
display:block;
background:url(/img/map-bg-sp.png)no-repeat top;
background-size:100%;
height:100%;
padding:20px 0 45px;
}
.map-img .logo-img{
width:200px;
margin:30px auto 30px;
display:block;
}
.map-img-in{
width:auto;
height:425px;
background:url(/img/map-zu.png)no-repeat center;
background-size:auto 100%;
position:relative;
display:block;
margin:20px auto 10px;
}
.map-01{
position:absolute;
width:68px;
height:98px;
left:72px;
bottom:0;
cursor:pointer;
}
.map-01:hover:before{
content:"";
position:absolute;
width:68px;
height:98px;
left:0;
bottom:0;
mix-blend-mode:multiply;
background:#dc4747;
cursor:pointer;
z-index:-1;
}
.map-02{
position:absolute;
width:65px;
height:98px;
left:160px;
bottom:0;
cursor:pointer;
}
.map-02:hover:before{
content:"";
position:absolute;
width:65px;
height:98px;
left:0;
bottom:0;
mix-blend-mode:multiply;
background:#91d858;
z-index:-1;
}
.map-03{
position:absolute;
width:105px;
height:55px;
left:80px;
bottom:120px;
cursor:pointer;
}
.map-03:hover:before{
content:"";
position:absolute;
width:105px;
height:55px;
left:0;
bottom:0;
mix-blend-mode:multiply;
background:#ed793e;
z-index:-1;
}
.map-04{
position:absolute;
width:65px;
height:70px;
right:70px;
bottom:110px;
cursor:pointer;
}
.map-04:hover:before{
content:"";
position:absolute;
width:65px;
height:70px;
right:0;
bottom:0;
mix-blend-mode:multiply;
background:#5f9dc9;
z-index:-1;
}
.map-05{
position:absolute;
width:65px;
height:85px;
right:70px;
bottom:183px;
cursor:pointer;
}
.map-05:hover:before{
content:"";
position:absolute;
width:65px;
height:85px;
right:0;
bottom:0;
mix-blend-mode:multiply;
background:#e5d224;
z-index:-1;
}
.click-txt-box{
position:absolute;
left:0;
right:0;
top:86px;
margin:auto;
width:100%;
text-align:center;
font-size:11px;
color:#999;
}
}