@charset "UTF-8";
/* CSS Document */
.pc { display: block;}
.sp { display: none;}

/* ローディングアニメーション */
#loading {
width: 100%;
height: 100%;
margin: 0;
background: #000;
background-image: url(../img/loading.svg);
background-repeat: no-repeat;
background-position: center;
background-size: 50px;
opacity: 1;
position: fixed;
left: 0;
top: 0;
z-index: 10000;
}

.main_visual {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
z-index: -9999;
}
.video {
}
.halftone {
position: absolute;
width:100%;
height:100vh;
background-image:url(../img/halftone.png);
background-repeat: repeat;
opacity: 0.8;
}

.header_logo {
position: absolute;
width:200px;
height:30px;
top:calc(45% - 30px/2);
left:calc(50% - 200px/2);
background-image: url(../img/logo_eng_white.svg);
background-repeat: no-repeat;
background-size: contain;
}

.scroll {
display: block;
position: absolute;
width:50px;
height:100px;
left:calc(50% - 50px/2);
bottom:18vh;
background-image: url(../img/scroll.svg);
background-repeat: no-repeat;
animation: scroll_1 1s ease 10s forwards, scroll_2 2s steps(39) 12s infinite;
opacity: 0;
cursor: pointer;
z-index: 9990;
}
@keyframes scroll_1 {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes scroll_2 {
  0% { background-position: 0px 0px; }
  100% { background-position: -1950px 0px; }
}

article {
position: absolute;
width:100%;
top:67vh;
z-index: 1;
}
.photo_gallery {
width:50%;
height:auto;
padding: 10vh 25%;
}
.piano_bg {
width:100%;
height:250px;
background-image: url(../img/sec01_bg.svg);
background-repeat: no-repeat;
background-size: 120%;
background-position: center bottom;
}
.sec01 {
width:100%;
height:auto;
padding:10vh 0 0 0;
background: #FFF;
}
.main_copy {
text-align: center;
margin-bottom:5vh;
}
.body_copy {
}
.illust {
width:500px;
margin: 5vh auto 0 auto;
}
.photo_grid {
clear: both;
width: 100%;
padding: 0 0;
letter-spacing: -0.5em;
}
.grid {
display: inline-block;
width:20%;
letter-spacing: normal;
}
.sec02 {
width:50%;
padding:0 25% 10vh 25%;
background: url(../img/bg04.jpg);
}
.title_svg {
width:150px;
margin:0 auto;
padding:10vh 0;
text-align: center;
}

/*メニュー部分*/
.menu { letter-spacing: -0.5em;}
.menu_left { display: inline-block; width:46%; padding-right:8%; text-align:left; vertical-align: top; letter-spacing: normal;}
.menu_right { display: inline-block; width:46%; text-align:left; vertical-align: top; letter-spacing: normal;}
.menu_name { font-size:150%; font-family: "almaq-refined",sans-serif; border-bottom:solid 1px rgba(70,55,40,1.0); padding:0 0 0.5em 0; margin-bottom:0.5em;}
.menu_left ul, .menu_right ul { margin-bottom:5vh;}

.more_info {
display: block;
width:200px;
height:50px;
margin:0 auto;
margin-top:50px;
text-align: center;
cursor: pointer;
background-image: url(../img/more_info.svg);
animation: more_info 4s steps(17) infinite;
}
@keyframes more_info {
  0% { background-position: 0px 0px; }
  80% { background-position: 0px 0px; }
  100% { background-position: 0px -850px; }
}
.more_info:hover {
background-color: rgba(250,200,88,1.0);
transition: 0.3s ease-in-out;
}

.sec03 {
width:50%;
padding:0 25% 10vh 25%;
background: #FFF;
}
.sec04 {
width:50%;
padding:0 25% 10vh 25%;
background-image: url(../img/bg04.jpg);
}

/* ===== SNS Feed と Google Map =====*/
#sns_feed {
width:90%;
background:none;
padding:0 5%;
background-color: rgba(255,255,255,1);
}
.sns_text {
width:55%;
margin:-2vh auto 5vh auto;
text-align: justify;
}

#gmap_area {
width:88%;
height:auto;
padding:0 6% 10vh 6%;
background-color: rgba(255,255,255,0.8);
}
#gmap {
width:100%;
height:55vh;
}
.gmap_text {
width:57%;
margin:-2vh auto 5vh auto;
text-align: justify;
}

/* ナビゲーションまわり */
#nav_btn {
position: fixed;
width:40px;
height:40px;
top:40px;
right:40px;
background-image: url(../img/nav_btn.svg);
z-index: 9999;
animation: nav_btn 0.7s steps(9) infinite;
cursor: pointer;
}

@keyframes nav_btn {
  0% { background-position: 0px 0px; }
  100% { background-position: 0px -360px; }
}

.nav_btn:hover {
animation: nav_btn_hover 0.2s steps(2) forwards;
}

@keyframes nav_btn_hover {
  0% { background-position: 0px -400px; }
  100% { background-position: 0px -480px; }
}

#nav_btn.active {
animation: nav_btn_active 0.3s steps(7) forwards;
}

@keyframes nav_btn_active {
  0% { background-position: 0px -480px; }
  100% { background-position: 0px -760px; }
}
#global_menu {
display: none;
position: fixed;
width:calc(100% - 40px);
height:calc(100% - 40px);
top:20px;
left:20px;
background: rgba(250,200,88,1.0);
vertical-align: middle;
z-index: 9998;
font-size: 120%;
}
#global_menu.active {
display: block;
}
.global_menu_container {
position: relative;
width:28em;
left:calc(50% - 28em/2);
top:calc(50% - 50%/2);
}
.global_menu_container ul {
}
.global_menu_container li {
margin: 1em 0 1em 0;
background-image: url(../img/global_menu_line.svg);
background-repeat: repeat-x;
background-size: 10px;
background-position: center;
}
.menu_en {
display: inline-block;
background: rgba(250,200,88,1.0);
padding-right: 1em;
letter-spacing: 1px;
}

.menu_ja {
display: inline-block;
position: absolute;
right: 0;
font-size: 80%;
background: rgba(250,200,88,1.0);
padding-left: 1em;
}

/* ===== フッター =====*/
#global_footer {
width: 100%;
height: auto;
background: url(../img/bg04.jpg) repeat;
}

#footer {
position: relative;
width: 100%;
padding: 60px 0 0 0;
z-index: 1;
}

.tel { 
display:block;
padding:0.8em;
width: 16em;
background-color:rgba(0,69,0,1.0);
border-radius:10px;
color:rgba(255,255,255,1.0) !important;
margin:1em auto;
}

.tel:hover {
background-color:rgba(0,69,0,0.8);
transition: 0.3s ease-in-out;
}

#copyright {
position: relative;
width:100%;
height:250px;
background-image: url(../img/footer_bg.svg);
background-repeat: no-repeat;
background-size: 120%;
background-position: center bottom;
letter-spacing: 0.2em;
margin-top:-10vh;
z-index: 0;
}
.copyright_bottom {
position: absolute;
bottom: 20px;
right:30px;
color: #FFF;
font-size: 90%;
}

/* ===== アニメーション関連 =====*/
.inview {
opacity: 0;
transform: translate3d(0, 35px, 0);
}

.inview_logo {
opacity: 0;
transform: translate3d(0, -20px, 0);
}

.fadeInUp {
  animation-name: fadeInUp;
  animation-duration: 0.5s;
  animation-fill-mode: both;
}

@keyframes fadeInUp {
  0% { opacity: 0; transform: translate3d(0, 35px, 0);}
  100% { opacity: 1; transform: none;}
}

.fadeInDown {
  animation-name: fadeInDown;
  animation-duration: 1s;
  animation-fill-mode: both;
}

@keyframes fadeInDown {
  0% { opacity: 0; transform: translate3d(0, -20px, 0);}
  100% { opacity: 1; transform: none;}
}

/* ===== 下層ページ　BAR MENU ===== */

.main_visual_lower {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 70vh;
z-index: -9999;
}
.main_visual_lower2 {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
z-index: -9999;
}
.main_visual_menu {
position: absolute;
width:100%;
height:70vh;
background-image: url(../../menu/main_visual.jpg);
background-size: cover;
background-position: center center;
}
.main_visual_inst {
position: absolute;
width:100%;
height:70vh;
background-image: url(../../instrument/main_visual.jpg);
background-size: cover;
background-position: center center;
}
.main_visual_access {
position: absolute;
width:100%;
height:100vh;
background-image: url(../../access/main_visual.jpg);
background-size: cover;
background-position: center center;
}
.main_visual_ramen {
position: absolute;
width:100%;
height:70vh;
background-image: url(../../ramen/main_visual.jpg);
background-size: cover;
background-position: center bottom;
}

.halftone_lower {
position: absolute;
width:100%;
height:70vh;
background-image:url(../img/halftone.png);
background-repeat: repeat;
opacity: 0.8;
}

.header_logo_lower {
position: absolute;
width:200px;
height:30px;
top:45px;
left:40px;
background-image: url(../img/logo_eng_white.svg);
background-repeat: no-repeat;
background-size: contain;
}

.header_logo_ramen {
position: absolute;
width:300px;
height:128px;
top:calc(40% - 128px/2);
left:calc(50% - 300px/2);
background-image: url(../img/more_ramen.svg);
background-repeat: no-repeat;
background-size: contain;
}

.header_logo_ramen:after {
content: "　ラーメン臭いセッションバーはお嫌いですか？";
display: block;
position: absolute;
width: 300px;
top:150px;
color: #FFF;
}

.article_lower {
position: absolute;
width:100%;
top:35vh;
z-index: 1;
}
.article_access {
position: absolute;
width:100%;
top:68vh;
z-index: 1;
}

.sec_lower {
width:50%;
padding:0 25% 10vh 25%;
background: #FFF;
}

.sec_lower_access {
width:50%;
padding:0 25% 5vh 25%;
background: #FFF;
}

.title_svg_lower {
width:150px;
margin:0 auto 8vh auto;
padding:0 0;
text-align: center;
}

.body_copy_lower {
width:100%;
text-align: justify;
margin-bottom: 8vh;
}

.more_ramen {
display: block;
width:200px;
height:85px;
margin:0 auto;
margin-top:50px;
text-align: center;
cursor: pointer;
background-image: url(../img/more_ramen.svg);
background-size: contain;
background-repeat: no-repeat;
}
.more_ramen:hover {
opacity: 0.8;
transform: 0.3s;
}
.sec_ranking {
width:50%;
padding:0 25% 10vh 25%;
background: #FFF;
}
.photo_grid_ramen {
width: 50vw;
margin: 0 0 8vh 0;
letter-spacing: -0.5em;
}
.grid_ramen {
display: inline-block;
width:23%;
height:auto;
border-radius: 50%;
margin: 0 1% 2% 1%;
letter-spacing: normal;
}