/*  フォント

font-family: 'Kosugi Maru', sans-serif; 日本語丸文字
font-family: 'Staatliches', cursive;　　英語太字
font-family: 'Damion', cursive;　　　　英語手書き

*/



html, body {
	position: relative;
	height: 100%;
    }
/*　index.html　*/
header{
	background-color:rgba(255,0,0,0);
	transition: background-color 0.2s;
}


nav{
	z-index: 100;
}

.navbar-item{
	color:white;
	font-size: 24px;
	font-family: 'Staatliches', cursive;
	transition: 0.2s;
}

.navbar-item:hover{
	color:red !important;
	background-color:white !important;
}

.headlogo{	
}

.headlogo:hover{
	background-color:red !important;
}

.main-logo {
	-webkit-animation: main-logo 1.1s both;
	        animation: main-logo 1.1s both;
	animation-delay: 1s;
	filter: drop-shadow(0 0 0.75rem white);
}

/* ----------------------------------------------
 * Generated by Animista on 2020-9-11 16:1:44
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation main-logo
 * ----------------------------------------
 */
@-webkit-keyframes main-logo {
  0% {
    -webkit-transform: translateY(-500px);
            transform: translateY(-500px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 0;
  }
  38% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
  55% {
    -webkit-transform: translateY(-65px);
            transform: translateY(-65px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  72% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  81% {
    -webkit-transform: translateY(-28px);
            transform: translateY(-28px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  90% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  95% {
    -webkit-transform: translateY(-8px);
            transform: translateY(-8px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}
@keyframes main-logo {
  0% {
    -webkit-transform: translateY(-500px);
            transform: translateY(-500px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 0;
  }
  38% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
  55% {
    -webkit-transform: translateY(-65px);
            transform: translateY(-65px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  72% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  81% {
    -webkit-transform: translateY(-28px);
            transform: translateY(-28px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  90% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  95% {
    -webkit-transform: translateY(-8px);
            transform: translateY(-8px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}

.subtitle{
	font-family: 'Damion', cursive;
	font-size:70px;
	color:white;
}

.swiper-wrapper .swiper-slide {
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
	z-index: 1;
}

.img_bg{
	background:url("../img/index/main.jpg") no-repeat;
}

.img_bg-2{
	background:url("../img/index/shop.jpg") no-repeat;
}

.img_bg-3{
	background:url("../img/index/red-back.jpg") no-repeat;
}

.img_bg-4{
	background:url("../img/menu/main.jpg") no-repeat;
}

.img_bg-5{
	background:url("../img/index/shop-night.jpg") no-repeat;
	margin-top:20px;
}

.b-red{
	background-color:red;
}


.fixed_bg{
	background-size: cover;
	background-position: center;
	
}

.fixed_mainbg,.fixed_01,.fixed_menubg{
	background-size: cover;
	background-position:center;
	background-attachment: fixed;
}


.fixed_menubg{
	background-position: left;
}

.fixed_menubg h1,.fixed_menubg h2{
	text-align: left;
}

.fixed_mainbg{
	height:90vh;
}

.fixed_01,.b-red{
	margin:0 calc(50% - 50vw);
}

.imganime{
	text-align: center;
	filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.6));
}


.my-x{
	margin:13em 0;
}

/* index about */
.about-r{
	z-index: 10;
	margin-top:30px;
}

.about-l{
	z-index: 1;
}

.about h2,.menu h2,.access h2,.sns h2,.menu-content h2{
	font-size:120px;
	color:red;
	font-family: 'Staatliches', cursive;
	text-align: left !important;
}

.t-red{
	color:red;
}


.about h4,.access p{
	font-family: 'Kosugi Maru', sans-serif;
	font-size:30px;
}

.about p{
	font-size:18px;
	line-height: 2.2em;
}

.about img{
	margin-left:100px;
}

.pc{
	display: inline-block;
}

.sp{
	display: none;
}

.access{
	margin:0 auto;
	text-align: center;
}

.access p{
	text-align: center;
}

.access th,.access td{
	padding:10px;
	font-size:22px;
	border-bottom: 1px solid red;
}

.access th{
	color:red;
}

.access iframe{
	margin-top:20px;
}

.sns-r{
	float: right;
}

footer{
	background-color:red !important;
}

footer a{
	color:white;
	font-size: 24px;
	font-family: 'Staatliches', cursive;
	position: relative;
	display: inline-block;
	transition: .3s;
}

footer a::after {
	position: absolute;
	bottom: .3em;
	left: 0;
	content: '';
	width: 100%;
	height: 1px;
	background-color: white;
	opacity: 0;
	transition: .3s;
}
footer a:hover::after {
	bottom: 0;
	opacity: 1;
}

footer a:hover{
	color:white;
}

footer p{
	color:white;
}


/* menu.html */
.copy-top{
	font-family: 'Damion', cursive;
	font-size:40px;
	text-shadow: 3px 3px 8px rgba(0,0,0,0.3);
	color:red;
}
.menu-content{
	width:70%;
	margin:0 auto;
}

.menu-content h2{
	color:white;
	padding-left: 2em;
}

.ja-h2{
	font-size:100px !important;
	font-weight: bold;
}

.menu-text dl{
	line-height: 2em;
}

.menu-text dt{
	font-size:28px;
	color:red;
	font-weight: bold;
	border-bottom: 1px solid red;
	padding:5px 0;
}

.come{
	font-size:20px;
	color:black;
}

.menu-text dd{
	font-size:26px;
	line-height: 2em;
}

.price,.sp01{
	font-size:40px;
	font-weight: bold;
}

.spice{
	border:1px solid red;
	padding:2em;
}

.spice h3,.nomiho h3{
	text-align: center;
	font-size:30px;
	background-color:red;
	color:white;
	font-weight: bold;
	padding:5px 0;
}

.spice h4{
	text-align: center;
	font-size:20px;
}

.spice li{
	font-size:28px;
	line-height: 2em;
}

.nomiho{
	margin:0 auto;
}

.nomiho p{
	font-size:20px;
}

.sp01{
	font-weight: bold;
}
	

#setmenu .columns{
	margin:5em 0;
}

#setmenu dd{
	line-height: 3em;
}

#drink ul{
	display: flex;
	justify-content: center;
}

#drink li{
	margin:10px;
}

.drink-azi{
	border:1px solid red;
}

/* pagetop */
/*パソコン・スマホ共通のCSS*/
#PageTopBtn {
    position: fixed; /*ボタンの配置場所を固定*/
    bottom: 10px; /*下からのボタンの配置場所を指定*/
    right: 10px; /*右からのボタンの配置場所を指定*/
}
#PageTopBtn a {
    display: block; /*配置の調整*/
    text-decoration: none; /*文字の下線を消す*/
    color: #fff; /*文字の色*/
    background: red; /*ボタンの背景色*/
    text-align: center; /*文字を中央に配置*/
    border-radius: 50%; /*ボタンの角を少し丸くする*/
    outline: none; /*クリックしたときの黒い枠を消す*/
	transition: 0.3s;
}
#PageTopBtn a:hover {
    text-decoration: none; 
    background: #ea5506; /*マウスオーバー時の背景色*/
}

/*パソコンで表示する場合のCSS*/
@media (min-width: 768px) {
#PageTopBtn {
    font-size: 25px; /*文字のサイズ*/
}
#PageTopBtn a {
    width: 50px; /*ボタンの幅*/
    height: 50px; /*ボタンの高さ*/
    padding: 5px 0; /*文字の配置場所の調整*/
}
}

/*スマホで表示する場合のCSS*/
@media (max-width: 767px) {
#PageTopBtn {
    font-size: 20px;
}
#PageTopBtn a {
    width: 50px;
    height: 50px;
    padding: 8px 0;
}
}