@charset "utf-8";

*{
    box-sizing: border-box;
}

/*ハンバーガーメニュー*/
.ham {
	position:relative;
	width: 60px;
    /*width:17.414%;*/
	height: 60px;
	cursor: pointer;
	background: -moz-linear-gradient(left, #8F0C2C, #cc103f);
	background: -webkit-linear-gradient(left, #8F0C2C, #cc103f);
	background: linear-gradient(to right, #8F0C2C, #cc103f);
	/*background-color:#8F0C2C;*/
    margin-left: auto;
}

.ham_line {
	position: absolute;
	left: 16px;
	width: 27px;
    /*width:45%;*/
	height: 2px;
	background-color:#FFFFFF;
}
.ham_line1 {
	top: 18px;
}
.ham_line2 {
	top: 30px;
}
.ham_line3 {
	top: 42px;
}
.ham_line {
	transition: all 0.3s;
}

/* 以下はすべて新規行で追加 */
.clicked .ham_line1 {
	transform: rotate(45deg);
	top: 30px;
}
.clicked .ham_line2 {
	width: 0px;
}
.clicked .ham_line3 {
	transform: rotate(-45deg);
	top: 30px;
}
.menu {
	position:absolute;
	width: 200px;
	height: 320px;
	right: -400px;
	background: -moz-linear-gradient(left, #8F0C2C, #cc103f);
	background: -webkit-linear-gradient(left, #8F0C2C, #cc103f);
	background: linear-gradient(to right, #8F0C2C, #cc103f);
	/*background-color: #8F0C2C;*/
	transition: all 0.3s;
    display: none;
}
.menu:hover{
    background-color:#8F0C2C;
    }

.ham_txt_en{
    font-family: 'Crimson Text', serif;
    font-size: 20px;
    text-decoration: none;
    letter-spacing :0.1em;
}
.ham_txt_jp{
    font-family: 'Noto Serif JP', serif;
    font-size: 20px;
    text-decoration: none;
    letter-spacing :0.1em;
}

/*↓ハンバーガーメニューの動く下線↓*/

.ham_txt_en{
    display: inline-block;
    position: relative;
    color: #fff;
    text-decoration: none;
}
.ham_txt_en:before{
	content: "";
	position: absolute;
	left: 0;
	bottom: 18px;
	width: 100%;
	height: 2px;
	background: #fff;
	transform: scale(0, 1);
	transition: 0.2s;
}
.ham_txt_en:hover:before {
	transform: scale(1);
}

.ham_txt_jp{
	display: inline-block;
	position: relative;
	color: #fff;
 	text-decoration: none;
}
.ham_txt_jp:before{
	content: "";
	position: absolute;
	left: 0;
	bottom: 18px;
	width: 100%;
	height: 2px;
	background: #fff;
	transform: scale(0, 1);
	transition: 0.2s;
}
.ham_txt_jp:hover:before {
	transform: scale(1);
}
/*↑ハンバーガーメニューの動く下線ここまで↑*/

.clicked .menu {
    top:80px;
	right: 0px;
    display: block;
}

/*ハンバーガーメニュー　ここまで*/

/*--------------------------
	共通の設定/=iPhone 320px(縦)からの設定 /
-------------------------- */
#wrapper{
/*    width: 375px;
*/}

header{
    background-color: #000;
    padding: 20px;
}

.parent{
    display: flex;
    justify-content: space-between;
}

.h_logo{
    /*width:87.209%*/
    width:300px;
}


li {
    color:#fff;
    line-height: 3.8em;
    text-align: center;
    list-style: none;
}

li a:hover{
    color:#8F0C2C;
}
li a:visited{
    color: #fff;
}

.time{
    padding:    1240px 0;    
}

.open{
    background-color: #000000;
    padding: 40px 0;
}

.h2_red{
    width:100%;
    color:#ffffff;
    font-family: 'Crimson Text', serif;
    /*font-family: 'Frank Ruhl Libre', serif;*/
    /*font-family: 'Lora', serif;*/
    font-weight:200;
    font-size: 40px;
    text-align: center;
    margin-bottom: 40px;
    
}

.open_txt{
    width:100%;
    color:#ffffff;
    font-family:'Crimson Text', serif;
    /*font-family: 'Frank Ruhl Libre', serif;*/
    font-size:20px; 
    text-align: center;
    line-height: 2em;
}

.main_visual{
}

.fade-img-box {
    width: 100%;
    height: 500px;
    position:relative;
}

.fade-img-box img {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 object-fit:cover;/*画像の比率を変えない*/
}

.covid19{
    text-align: center;
    padding:160px 20px;   
}
.covid19_p{
    width:97.383%;
    border:solid 1px #3b3839;
    
}

.covid19_p a:hover{
	background: -moz-linear-gradient(left, #8F0C2C, #cc103f);
	background: -webkit-linear-gradient(left, #8F0C2C, #cc103f);
	background: linear-gradient(to right, #8F0C2C, #cc103f);
    /*background-color: #8F0C2C;*/
    color:#ffffff;
    transition: .2s;   
}

.covid19_txt{
    color: #000000;
    font-family: 'Noto Serif JP', serif;;
    text-decoration: none;
    line-height: 4em;
    display: block;
}

.section_about{
    background-image:url("../img/bg_image.jpg");
    background-size:cover;
    background-repeat: no-repeat;
    background-position:center top;
    padding-top: 100px;
}

.about_h2{
    width:100%;
    color:#8F0C2C;
    text-decoration-color: #ffffff;/*3b3839*/
    /*font-family: 'Frank Ruhl Libre', serif;*/
    font-family:'Crimson Text', serif;
    /*font-family: 'Lora', serif;*/
    /*font-weight: 200;*/
}

.about_box{
    padding: 40px 20px 100px;
}
.about_txt{
    width:89.583%;
    width:100%;
    color:#000000;
    font-family: 'Noto Serif JP', serif;
    /*font-family: 'Crimson Text', serif;*/
    /*font-family: 'Frank Ruhl Libre', serif;*/
    text-align: center;
    line-height: 3em;
}

.map{
}

.g_map{
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 60%;/*比率をお好みで*/
}
.g_map iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.container{
    background-color: #000000;
    padding: 40px 30px 40px;
    margin-bottom: 40px;    
}


.access{
    margin-bottom: 100px;
}

h2{
    font-family: 'Crimson Text', serif;
    /*font-family: 'Frank Ruhl Libre', serif;*/
    font-weight: 200;
    font-size: 40px;
    text-align: center;
    text-decoration: underline;
    text-decoration-color: #8F0C2C;
    margin-bottom: 40px;
}


.txt{
	color:#ffffff;
    font-family: 'Noto Serif JP', serif;
    margin-bottom: 40px;
}

.topics_ul{
    
}
.topics_li{
    color: #FFFFFF;
    font-family: 'Noto Serif JP', serif;
    line-height: 1.8em;
    border-bottom: solid 1px #3b3839;
    /*text-decoration-line: underline;*/
    text-align: left;
    
}

.topics_li:last-child{
    margin-bottom: 40px;
}
/*viewmoreボタンの↓*/
.viewmore {
}

.viewmore_txt{
    text-align: center;
}

.btnarrow6{
    font-family: 'Crimson Text', serif;
    font-size: 20px;
    font-weight: bold;
    /*矢印の基点とするためrelativeを指定*/
  position: relative;
    /*ボタンの形状*/
  background:#000000;
    padding: 5px 60px 5px 30px;
    display: inline-block;
    text-align: center;
    transition: all .2s linear;
  color:#ffffff;
    text-decoration: none;
  border:/*transparent*/ 1px solid #676767;
    outline: none;
}

/*hoverした際のボタンの形状*/
.btnarrow6:hover{
	background: -moz-linear-gradient(left, #8F0C2C, #cc103f);
	background: -webkit-linear-gradient(left, #8F0C2C, #cc103f);
	background: linear-gradient(to right, #8F0C2C, #cc103f);
  /*background:#8F0C2C;*/
  color:#ffffff;
  border-color:#ffffff;
}

/*矢印と線の形状*/

.btnarrow6:before{
  content:"";
    /*絶対配置で線の位置を決める*/
  position: absolute;
  top:50%;
  right:25px;
    /*線の形状*/
  width:20px;
  height:1px;
  background:#ffffff;
    transition: .3s;
}

.btnarrow6::after {
    content: '';
    /*絶対配置で矢印の位置を決める*/
    position: absolute;
    top: 40%;
    right:/* 12px*/20px;
    /*矢印の形状*/
    border: 4px solid transparent;
    border-top-width: 4px;
    border-bottom-width: 4px;
    border-left-color: #ffffff;
    /*アニメーションの指定*/
    transition: all .2s linear;
}

/*hoverした際の矢印の形状*/
.btnarrow6:hover::before{
  background:#ffffff;
  right:/*25px*/15px;
}

.btnarrow6:hover::after{
    border-left-color: #ffffff;
    right: /*20px*/12px;
}
/*viewmoreボタンここまで↑*/


.container_menu{
    background-color: #ffffff;
    padding: 0 40px 60px;
}

.menu_title{
    color:#000000;
    font-family: 'Crimson Text', serif;
    /*font-family: 'Frank Ruhl Libre', serif;*/
    padding: 40px;
}

.banner_01b{
	padding-bottom: 20px;
}

.banner_01b a:hover{
	opacity: 0.4;
	filter: brightness(110%);
}


/*↓前のバージョン↓
dt{
	color:#ffffff;
	background: -moz-linear-gradient(left, #8F0C2C, #cc103f);
	background: -webkit-linear-gradient(left, #8F0C2C, #cc103f);
	background: linear-gradient(to right, #8F0C2C, #cc103f);
	font-family: 'Crimson Text', serif;
	font-size: 30px;
	text-align: center;
	line-height: 1.8em;
    
  }

dt a{
	text-decoration: none;
	display:block;
    
}
dt a:visited{
    color: #fff;
}

dt a:hover{
    color:#8F0C2C;
    background-color: #fff;
    transition: .2s;
}

.drink_banner{
    margin-bottom: 40px;
}

.food_drink a{
    color: #fff;
}
↑前のバージョン↓*/
/*hoverでテキスト↓*/
/*.banner_01,.banner_02{
	width:			280px;
	height:			188px;
	overflow:		hidden;
	margin:			10px 8px 10px 16px;
	position:		relative;
    cursor: pointer;
    
}

.banner_01 .caption{
    font-family: 'Crimson Text', serif;
	font-size:		230%;
	color:			#fff;
    text-align: center;
	padding-top:180px;
}

.caption_txt{
    font-family: 'Noto Serif JP', serif;
    font-size: 100%;
}

.caption_txt a{
    color: #ffffff;
    text-decoration: none;
}

.caption_txt a:visited{
    color:#ffffff;
}

.banner_02 .caption {
    font-family: 'Crimson Text', serif;
	font-size:		230%;
	color:			#fff;
    text-align: center;
	padding-top:120px;
}

.caption_txt{
    font-family: 'Noto Serif JP', serif;
    font-size: 100%;
}


.banner_01 .mask {
	width:			100%;
	height:			100%;
	position:		absolute;
	top:			0;
	left:			0;
	opacity:		0;	 マスクを表示しない 
	background-color:	rgba(0,0,0,0.4);
	-webkit-transition:	all 0.2s ease;
	transition:		all 0.2s ease;
}

.banner_02 .mask {
	width:			100%;
	height:			100%;
	position:		absolute;
	top:			0;
	left:			0;
	opacity:		0;	 マスクを表示しない 
	background-color:	rgba(0,0,0,0.4);
	-webkit-transition:	all 0.2s ease;
	transition:		all 0.2s ease;
}

.banner_01:hover .mask {
	opacity:		1;	 マスクを表示する  
}

.banner_02:hover .mask {
	opacity:		1;	 マスクを表示する  
}
↑前のバージョンここまで↑*/
/*hoverでテキストここまで↑*/

.seasonal a:hover{
    
}

.container_delivery{
	background-color: #000000;
	padding: 60px 40px; 
	margin-bottom: 60px;
}

.h2_delivery{
    width:100%;
    color:#ffffff;
    font-family: 'Crimson Text', serif;
    /*font-family: 'Frank Ruhl Libre', serif;*/
    /*font-family: 'Lora', serif;*/
    font-weight:200;
    font-size: 40px;
    text-align: center;
    margin-bottom: 40px;
    
}

.banner_02{
	background-color: #ffffff;
	margin-bottom: 20px;
}

.banner_02 a:hover{
	
	opacity: 0.4;
	filter: brightness(110%);
}

.container_followus{
	padding: 0 40px;
    /*padding-top: 40px;*/
    /*margin: 0 40px 40px;*/
}

.followus_banner{
    display: flex;
    justify-content: space-around;
    margin-bottom: 80px;
}

.footer_nav{
	/*background: -moz-linear-gradient(left, #8F0C2C, #cc103f);
	background: -webkit-linear-gradient(left, #8F0C2C, #cc103f);*/
	background: linear-gradient(to right, #8F0C2C, #cc103f);
    /*background-color: #8F0C2C;*/
    padding: 10px 60px 20px;
    transition: all 0.2s;
}

.footer_nav:hover{
    background-color:#000000;
    transition: all 0.2s;
    }

.footer_nav li{
    border-bottom: solid 1px #3b3839;
    line-height: 2.2em;
    letter-spacing :0.1em;
}

.footer_nav ul li a:hover{
    color:#ffffff;
}

.f_nav{
    color:#00FF24;
    font-family: 'Crimson Text', serif;
    font-size:22px;
    text-decoration: none;
}

.f_nav_jp{
    font-family: 'Noto Serif JP', serif;
    font-size: 16px;
    text-decoration: none;
}

#pagetop{
    position: fixed;
    bottom: 20px;
    right: 20px;
    cursor: pointer;
}

footer{
    background-color:#000000;
    display: flex;
    justify-content: space-between;
    padding:40px;
}

.footer_logo{
    margin-bottom: 40px;
}

.footer_txt{
    color:#676767;
    font-family: 'Crimson Text', serif;
    text-align: right;
    line-height: 1.8em;
}

.footer_txt_jp{
    color:#676767;
    font-family: 'Noto Serif JP', serif;
    text-align: right;
    line-height: 1.8em;
}

/*
--------------------------
	タブレット / iPad 768px(縦)から1023pxまでの設定 /
-------------------------- */

@media screen and (min-width:768px){

h2{
    margin-bottom: 60px;
    }
.open{
    padding: 120px 0;
}

	.fade-img-box{
		height: 700px;
	}

.covid19{
    padding:180px 160px;   
}

.section_about{
        padding: 200px 0 100px;
    }

.container{
    padding: 120px 100px;
}

.access_txt{
    width:78.125%;/*600px*//*/768px*/
    margin: 0 auto;
}
.topics_txt{  
    width:78.125%;/*600px*//*/768px*/
    margin: 0 auto;
}

.viewmore {
    padding-top: 40px;
}

	.container_menu{
		padding:60px 40px 120px;
	}

	.m_banner_01{
		display: flex;
		justify-content:space-between;
	}

	.banner_01b{
		width:30%;
	}
	
	.m_banner_02{
		display:flex;
		justify-content:space-between;
	}

	.container_delivery{
		padding:140px 40px 100px;
	}

	.h2_delivery{
    margin-bottom: 100px;
    }

	.deli_banner{
		display:flex;
		justify-content: space-between;
	}
	
	.banner_02{
		width:30%;
	}
/*.container_menu{
    padding: 60px 40px 80px;
}
*/
/*.menu_banner_01{
    width:100%;
    display: flex;
    justify-content:space-between;
    }
*/
/*.drink_banner{
   width:80%;
    margin: 0 auto;
    }*/

/*.food_banner{
    width:50%;
    margin: 0 auto;
    } */   

dl .food_drink{
        width:80%;
        margin: 0 auto;
    }

/*.menu_banner_01{
        margin-bottom: 60px;
    }
*/
/*.menu_banner_02{
    width:100%;
    display: flex;
    justify-content:space-between;
    }
*/
/*.caption_txt{
    font-size: 66%;
}
*/
/*.menu_osusume{
        width:70%;
        margin:0 auto;
    }*/
    /*.banner .caption {
	font-size:		260%;
    text-decoration: none;
	color:			#fff;
	padding-top:		140px;*/
	/*padding-left:		80px;*//*view moreがズレるやつ*/
/*}*/

/*.banner_01 .caption{
    font-family: 'Crimson Text', serif;
	font-size:		230%;
	color:			#fff;
    text-align: center;
	padding-top:140px;
}

.banner_02 .caption{
    font-family: 'Crimson Text', serif;
	font-size:		230%;
	color:			#fff;
    text-align: center;
	padding-top:100px;
}*/

.container_followus{
    margin: 80px 40px 140px;
}

    .sns_btn_fb{
        width:60%;
        margin: 0 auto;
    }
/*.footer_nav{
    padding: 40px 300px 60px;
}
*/
    .footer_nav{
        padding:40px 0;
    }
    
    .footer_nav ul{
        display: flex;
        justify-content: space-around;
    }
    
    .footer_nav li{
        width:160px;
        border-bottom: none;
        padding: 0 26px;
    }
    
    .footer_nav li a{
        display: block;
        text-decoration: none;
    }
    /*navの動く下線↓*/
    .f_nav{
    display: inline-block;
    position: relative;
    color: #fff;
    text-decoration: none;
}
.f_nav:before{
	content: "";
	position: absolute;
	left: 0;
	bottom: 0px;
	width: 100%;
	height: 2px;
	background: #fff;
	transform: scale(0, 1);
	transition: 0.2s;
}
.f_nav:hover:before {
	transform: scale(1);
}

.f_nav_jp{
	display: inline-block;
	position: relative;
	color: #fff;
 	text-decoration: none;
}
.f_nav_jp:before{
	content: "";
	position: absolute;
	left: 0;
	bottom: 0px;
	width: 100%;
	height: 2px;
	background: #fff;
	transform: scale(0, 1);
	transition: 0.2s;
}
.f_nav_jp:hover:before {
	transform: scale(1);
}
}

footer{
	padding:80px 40px;
}


/*--------------------------
	PC /1024px以上の設定/
-------------------------- */
@media screen and (min-width:1024px) {

header{
    }

.h_logo{
    margin:20px;    
    }
    
.ham{
    display: none;
	}
   
	.menu_wrapper{
		padding-top: 18px;
	}

.menu { 
    position:static;
    width: 680px;
    height: 70px;
	right: 0px;
	background: -moz-linear-gradient(left, #8F0C2C, #cc103f);
	background: -webkit-linear-gradient(left, #8F0C2C, #cc103f);
	background: linear-gradient(to right, #8F0C2C, #cc103f);
	/*background-color: #8F0C2C;*/
	transition: all 0.3s;
    overflow: hidden;
    display: block;
    }

.menu li{
    width:136px;
    line-height: 4.4em;
    float:left;
    display: block;
    padding:0 24px;
    }

.menu ul li a{
    display: block;
    text-decoration: none;
    }

/*.menu ul li a:hover{
    color:#fff;
    }*/

.ham_txt_en:before{
	bottom: 20px;
    }

.ham_txt_jp:before{
	bottom: 20px;
    }
    
}