/*リセット*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	font-weight:300;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}	
html{
	background-color:#f8f8f8;
	color:#444;
	font-size: 62.5%;
}
body {
	font-size:1.4rem;
	line-height: 1.8;
	/*font-family:'Noto Serif JP',"游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;*/
	font-family: 'Noto Sans JP', sans-serif;
	color:#333;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
a{
	text-decoration:none;
	color:#222;
}
a:visited{
	color:#222;
}
    @media screen and (min-width: 1000px) {
#wrap{
	width:1000px;
	margin:0 auto;
}
	}
/*ふわっと表示*/
.fadein {
    opacity : 0;
    transform : translate(0, 70px);
    transition:all 1.2s;
	display:block;
}
.fadein.scrollin {
    opacity : 1;
    transform : translate(0, 0);

}

/*ナビゲーション*/
    nav{
     width: 100%;
     height: 70px;
	 z-index:9999;
	 /*opacity:.85;*/
	 position:fixed;/*追加J*/
	 top:0;	 /*追加J*/
    }
    .drawer{
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: space-between;
     position: relative;
     /*height: 70px;*/
     padding: 0 1em;
    }



/*ナビゲーション　トグル*/
.navbar_brand img{
	display:none;
	height:auto;
}
    .navbar_toggle{
	z-index:9999;
	background:#e5004f;
	padding:10px;
	position:fixed;
	right:12px;
	top:12px;
    }
    .navbar_toggle_icon {
     position: relative;
     display: block;
     height: 2px;
     width: 23px;
     background: #fff;
     -webkit-transition: ease .5s;
     transition: ease .5s;
    }
    .navbar_toggle_icon:nth-child(1) {
     top: 0;
    }
    .navbar_toggle_icon:nth-child(2) {
     margin: 7px 0;
    }
    .navbar_toggle_icon:nth-child(3) {
     top: 0;
    }
    /*OPEN時の動き*/
    .navbar_toggle.open .navbar_toggle_icon:nth-child(1) {
     top: 9px;
     -webkit-transform: rotate(45deg);
     transform: rotate(45deg);
    }
    .navbar_toggle.open .navbar_toggle_icon:nth-child(2) {
     -webkit-transform: translateY(-50%);
     transform: translateY(-50%);
     opacity: 0;
    }
    .navbar_toggle.open .navbar_toggle_icon:nth-child(3) {
     top: -9px;
     -webkit-transform: rotate(-45deg);
     transform: rotate(-45deg);
    }
	
/*ナビゲーション部分*/
.menu{
	-webkit-transform: translateX(100%);
	transform: translateX(100%);
	-webkit-transition:ease .5s;
	transition:ease .5s;
	background:#e5004f;/*透過させないためJ追加*/
	z-index:1000;
	margin-top:-70px;
	padding-top:70px;
}
.menu ul{
	padding:2.5em 0;
}
.menu ul li{
	padding: 1.2em 2em;
}
.menu ul li a{
	color:#fff;
}
/*OPEN時の動き*/
.menu.open {
	-webkit-transform:translateX(12em);
     transform:translateX(12em);
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
    }

/*ナビ　レスポンシブ*/
    @media screen and (min-width: 720px) {
    nav{
     display: flex;
     flex-direction: row;
	 height:70px;
	 position:relative;
    }
    .navbar_toggle{
     display: none;
    }
    .menu{
     width: 100%;
     -webkit-transform: translateX(0);
     transform: translateX(0);
    }
    .menu ul{
     height: 70px;
     display: flex;
     flex-wrap: wrap;
     justify-content: flex-end;
     align-items: center;
    }
    .menu ul li{
     padding: 0 1em;
     border-bottom: none;
    }
	
    }
/*スライダー*/
.slider_css {
	width:100%;
	height: 500px;
	margin: 0 auto;
	position: relative;
	overflow: hidden;
}
.slider_css ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.slider_css ul li {
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center center;
	width: 100%;
	height: 500px;
	position: absolute;
	top: 0;
	left: 0;
	animation-iteration-count: infinite;
	animation-duration: 40s;
}
.slider_css ul li:nth-child(1) {
	background-image: url("../images/slide6.jpg");
	animation-name: slider-zoomout;
	animation-delay: -3s;
}
.slider_css ul li:nth-child(2) {
	background-image: url("../images/slide1.jpg");
	animation-name: slider-zoomin;
	animation-delay: 5s;
}
.slider_css ul li:nth-child(3) {
	background-image: url("../images/slide3.jpg");
	animation-name: slider-zoomout;
	opacity: 0;
	animation-delay: 13s;
}
.slider_css ul li:nth-child(4) {
	background-image: url("../images/slide4.jpg");
	animation-name: slider-zoomin;
	opacity: 0;
	animation-delay: 21s;
}
.slider_css ul li:nth-child(5) {
	background-image: url("../images/slide6.jpg");
	animation-name: slider-zoomout;
	opacity: 0;
	animation-delay: 29s;
}
.slider_css ul li img {
	width: 100%;
}

.slider_css div{
	width:100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align:center;
}
.slider_css img{
	width:40%;
}

@media only screen and (max-width: 720px) {
.slider_css {
	height: 500px;
}
.slider_css ul li {
	background-size: cover;
	background-repeat: no-repeat;
}
}

@keyframes slider-zoomin {
0% {
	opacity: 0;
	transform: scale(1.1);
}
12.5% {
	opacity: 1;
}
20% {
	opacity: 1;
}
27.5% {
	opacity: 0;
  }
100% {
	opacity: 0;
	transform: scale(1.5);
}
}
@keyframes slider-zoomout {
0% {
	opacity: 0;
	transform: scale(1.5);
}
12.5% {
	opacity: 1;
}
20% {
}
} 

/*コンテンツ展開*/
.voice01 .wrapper{
	width: 100%;
	margin: 30px auto;
}
.voice01 .text_wrapper{
	position: relative;
	margin-bottom: 45px;
    }
.voice01 .text{
	width:70%;
	height: 90px;
	overflow: hidden;
	position:relative;
	padding-left:3em;
}
.voice01 .text::before{
	font-family:"ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
	font-size:5em;
	content:"“";
	position:absolute;
	top:-0.2em;
	left:0;
	color:#e5004f;
}
.voice01 .show_more,.show_more2{
	position: absolute;
	bottom:0px;
	left: 0px;
	width: 100%;
	height: 30px;
	padding-top: 60px;
	text-align: center;
	line-height: 30px;
	background: linear-gradient(to bottom, rgba(248,248,248,0) 0%, rgba(248,248,248,1) 70%);
	cursor: pointer;
    }
.voice01 .active{
	background:none;
	bottom: -30px;
}


/*コンテンツ共通*/
.clearfix::after {
	content: "";
	display: block;
	clear: both;
}
section{
	text-align:left;
	padding-bottom:3em;
}
section > div{
	width:85%;
	margin:0 auto;
}
h1{
	font-size:1.4em;
	color:#222;
	padding:2em 0 0 0;
}
h2:before {
  background: #444;
  content: '';
  display: block;
  height: 1px;
  margin: 0 0 1em;
  width: 10%;
}
h2{
	font-size:1.2em;
	color:#222;
	padding:1em 0 0 0;
}
h3:before {
  background: #444;
  content: '';
  display: block;
  height: 1px;
  margin: 0 0 1em;
  width: 10%;
}
h3{
	font-size:1em;
	color:#222;
	padding:1em 0 0 0;
	font-weight:500;
}
.rose{
	font-size:.85em;
	color:#e13671;
}
.rose a{
	font-size:.85em;
	color:#e13671;
	font-weight:bold;
}
.bold{
	font-weight:bold;
}

section p{
	width:87%;
	margin:0 auto;
	padding:1.5em 0 0 0;
}
section img{
	display:block;
	width:100%;
}
section p.btn{
	width:auto;
}
section p.btn a{
	width:11em;
	display:block;
	text-align:center;
	margin:0 auto;
	padding:1em;
	border:1px solid #333;
	font-size:0.8em;
}
section p.btn a:hover{
	border:1px solid #e5004f;
	color:#e5004f;
}
section p.btn_tel{
	width:auto;
	vertical-align:central;
}
section p.btn_tel a{
	width:11em;
	display:block;
	text-align:center;
	margin:0 auto;
	padding:1em;
	border:1px solid #373d43;
	font-size:0.8em;
	background-color:#373d43;
	color:#fff;
}
section p.btn_tel a:hover{
	border:1px solid #e5004f;
	color:#fff;
	background-color:#e5004f;
}
	
section p.btn_tel a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f095';
  font-size: 1.5em;
  color: #e5004f;
  margin:0 0.5em 0 0;
  color:#fff;
}








section p.ist a:hover{
	border:1px solid #e5004f;
	color:#e5004f;
}
section p.btn_ist{
	width:auto;
	vertical-align:central;
}
section p.btn_ist a{
	width:11em;
	display:block;
	text-align:center;
	margin:0 auto;
	padding:1em;
	border:1px solid #373d43;
	font-size:0.8em;
	background-color:#373d43;
	color:#fff;
}
section p.btn_ist a:hover{
	border:1px solid #e5004f;
	color:#fff;
	background-color:#e5004f;
}
section p.btn_ist i{
	display:inline-block;
	font-size:1.2em;
}

/*index*/

.new{
	position:relative;
	padding:0;
	margin:1.5em auto 0;
	width:87%;
}
.new img{
	width:100%;
	display:block;
}
.new small{
  display:block;
  width: 28%;
  height:28%;
  background-image:url(../images/new-icon.png);
  background-size:contain;
  background-repeat:no-repeat;
  position:absolute;
  top:-1%;
  left:-0.7%;
}
.index figure{
	float:left;
	width:50%;
	margin:0 0 1em 0;
}
.index figcaption{
	text-align:center;
	margin:-.5em 0 0 0;
	line-height:1.3;
	color:#555;
}
.index figcaption span{
	font-size:.85em;
}

.index figure img{
	display:block;
	width:100%;
}
.section_menu1{
	background:#fff;
	width:100%;
}
.section_menu2{
	background:#eeecea;
	width:100%;
}

.access_index dl{
	width:87%;
	margin:0 auto 2em;
}
.access_index dt{
	float:left;
	padding:1em 0 1em 0;
}
.access_index dd{
	border-bottom:1px solid #ccc;
	padding:1em 0 1em 6em;
}


/*about*/
h1.about1 {
	background:url(../images/basket.jpg) no-repeat;
	background-size:cover;
	background-position:center center;
	height:13em;
	line-height:13em;
	margin:0;
	padding:0 0 0 4em;
	font-size:1em;
}

/*access*/
h1.access {
	color:#fff;
	background:url(../images/access01.jpg) no-repeat;
	background-size:cover;
	background-position:center center;
	height:13em;
	line-height:13em;
	margin:0;
	padding:0 0 0 4em;
	font-size:1em;
}
.access dl{
	margin-bottom:4em;
}
.access dt{
	float:left;
	padding:1em 0 1em 0;
}
.access dd{
	border-bottom:1px solid #ccc;
	padding:1em 0 1em 6em;
}
iframe{
　-webkit-filter: grayscale(1);
　filter: grayscale(1);
}

/*メニュー*/
h1.menu01 {
	background:url(../images/menu-header.jpg) no-repeat;
	background-size:cover;
	background-position:center center;
	height:13em;
	line-height:13em;
	margin:0;
	padding:0 0 0 4em;
	font-size:1em;
}
	
.tapioca{
	background:url(../images/dorink-back.jpg);
	background-repeat:no-repeat;
	background-size:cover;
	background-color:#fff;
}




/*19夏用　.tapioca dl{
	margin:0 auto 1.5em;
	width:90%;
}
.tapioca dl::after{
	content:"";
	background: #ccc;
	content: '';
	display: block;
	height: 1px;
	margin: 2em auto 1em;
	width: 100%;
}
.tapioca dt{
	width:13em;
	float:left;
	line-height:1.5;
}
.tapioca dd{
	display: table;
	text-align:right;
	font-size:.8em;
}
.tapioca dd ul{
}
.tapioca dd li{
	display:inline-block;
	vertical-align:bottom !important;
	line-height:1;
	margin-bottom:0.2em;
}
.tapioca dd li:nth-child(even){
	width:40%;
	float:right;
}
.tapioca dd li:nth-child(odd){
	width:60%;
	float:left;
	clear:both;
}
.tapioca dd li img{
	width:100%;
	padding-left:1em;
	display:table-cell;
}
*/
.alcohol{
	background:url(../images/alcohol-bg.jpg);
	background-repeat:no-repeat;
	background-size:contain;
	background-color:#fff;
}	
.alcohol dl{
	line-height:2.5;
	width:87%;
	margin:0 auto;
}

.alcohol dt{
	float:left;
	clear:both;
}
.alcohol dt span{
	display:block;
	font-size:0.7em;
	margin-top:-1.5em;
}
.alcohol dd{
	float:right;
}

/*19-20秋冬*/
.tapioca > div > dl{
	width:90%;
	margin:0 auto 1em;
	padding-bottom:1em;
	clear:left;
	overflow:hidden;
	border-bottom:1px #ccc dashed;
}
.tapioca > div > dl > dt{
	float:left;
}
.tapioca > div > dl > dd{
	margin:0 0 0 15em;
}
.sweetness dt{
	float:left;
	margin:0;
}
.sweetness{
	line-height:1.3em;
}
.sweetness dt{
	width:2.5em;
}
.sweetness dt.temp{
	clear:left;
}
.sweetness dd{
	color:#fff;
	font-size:0.8em;
	font-weight:bold;
	margin:0 .1em;
	background:#5e5e5e;
	border-radius:1.8em;
	-webkit-border-radius:1.8em;
	-moz-border-radius:1.8em;
	float:left;
	width:1.6em;
	height:1.6em;
	text-align:center;
}
.sweetness dd.temp01{
	background:#438eb4;
}
.sweetness dd.temp02{
	background:#e2844a;
}
.sweetness dd.temp03{
	background:#aa525e;
}
.description{
}
.description span{
	font-size:.8em;
	color:#fff;
	font-weight:bold;
	margin:0 .1em .5em;
	background:#5e5e5e;
	border-radius:1.8em;
	-webkit-border-radius:1.8em;
	-moz-border-radius:1.8em;
	width:1.6em;
	height:1.6em;
	text-align:center;
	display:inline-block;
}
.description span.temp01{
	background:#438eb4;
}
.description span.temp02{
	background:#e2844a;
}
.description span.temp03{
	background:#aa525e;
}

/*2020年春夏に.indexでfloatしてるfigureをinlineboxに変更*/
.menu-list figure{
	display:inline-block !important;
	float:none;
	width:49%;
	border:none;
	padding:0;
	vertical-align:top;
}



/*お客様からの声*/
h1.voice {
	color:#fff;
	background:url(../images/voice-bg.jpg) no-repeat;
	background-size:cover;
	background-position:center center;
	height:13em;
	line-height:13em;
	margin:0;
	padding:0 0 0 4em;
	font-size:1em;
}
 /*staff*/

h1.staff {
	color:#222;
	background:url(../images/staff-bg.jpg) no-repeat;
	background-size:cover;
	background-position:center center;
	height:13em;
	line-height:13em;
	margin:0;
	padding:0 0 0 4em;
	font-size:1em;
}

/* 「RightToLeft」の動作内容 */
@keyframes RightToLeft {
  0% {
    opacity: 0.5;/* 透明 */
    transform: translateX(100%);/* X軸方向に50px */
  }
  100% {
    opacity:1;/* 不透明 */
    transform: translateX(0);
  }
}

/* 「RightToLeft」を適用する箇所 */
.staff-list{
	position:relative;
	width:87%;
	overflow:hidden;
	margin:0 auto 1em;

}
div.staff-list img{
	width:100%;
	display:block;
}
.staff01{
}

.staff02 {
	position:absolute;
	top:0;
	left:0;
	display:block;
	opacity: 0;
}
.staff03{
	position:absolute;
	top:0;
	left:0;
	display:block;
}
.staff05{
	opacity: 0;
}
.staff04{
	position:absolute;
	top:0;
	left:0;
	display:block;
	width:100%;
	height:auto;
	animation-duration: 2s;/* アニメーション時間 */
	animation-name: RightToLeft;/* アニメーション名 */
	animation-iteration-count: 1;/* アニメーションの繰り返し（無限）*/
	opacity: 1;
}
.staff .wrapper{
	width: 87%;
	margin: auto;
}
.staff .text_wrapper{
	position: relative;
	margin-bottom: 45px;
    }
.staff .text{
	width:100%;
	height: 120px;
	overflow: hidden;
	position:relative;
 }
.staff .text p{
	border-radius: 20px;
	-webkit-border-radius: 20px; 
	-moz-border-radius: 20px;
	border:1px solid #ddd;
}
.staff .text p.q{
	margin:.5em 10% .5em 0;
	padding:5%;
	width:78%;
	background-color:#eee;
}
.staff .text p.a{
	margin:.5em 0 .5em 10%;
	padding:5%;
	width:78%;
	background-color:#fff;
}

.staff h3{
	width:87%;
	margin:auto;
	font-weight:600;
	padding-bottom:0.5em;
}
.staff .wrapper h3:before {
	background:none;
	display: block;
	height: 1px;
	margin:0;
	width:inherit;
}
.staff .show_more,.show_more2{
      position: absolute;
      bottom:0px;
      left: 0px;
      width: 100%;
      height: 30px;
      padding-top: 60px;
      text-align: center;
      line-height: 30px;
	background: linear-gradient(to bottom, rgba(248,248,248,0) 0%, rgba(248,248,248,1) 70%);
	 	     cursor: pointer;
}
.staff .active{
      background: none;
      bottom: -30px;
}
.wanted{
	text-align:center;
	font-family:Arial, Helvetica, 'Noto Sans JP',sans-serif;
	line-height:1.2;
	padding-bottom:0.85em;
}
.wanted span{
	font-size:2.5em;
}
.staff .text_wrapper .baba p{
	border:none;
	margin:0;
	padding:0 0 1.5em 0;
	width:100%;
}
.wanted01{
	background:url(../images/baba.png);
	background-size:35%;
	background-position:center bottom;
	background-repeat:no-repeat;
	padding-top:1em;	
}

/*求人募集*/
.offer{
}
h1.offer-h101{
	width:50%;
	margin:0 auto 1em;
	padding:0;
	text-align:center;
	background-image:url(../images/wanted03.png);
	background-size:100%;
	background-repeat:no-repeat;
	background-position:center;
	height:5em;
	line-height:5em;
}
.offer-img01{
	text-align:center;
	padding:1.5em 0 0 0;
}
.offer-img01 img{
	display:inline-block;
	border-radius: 50%;
	width:27%;
	padding:0.5em;
}
.offer-div01{
	padding:3em 0;
}
.offer-div01 dl{
	padding-top:2em;
}
.offer-div01 h2{
	font-family: 'Ribeye Marrow', cursive;
	font-size:1.3em;
}
.offer-div01 dt{
	background:#fff;
	text-align:center;
	clear:left;
	float:left;
	border-radius:15px;
	border:1px #e5004f dashed;
	padding:0.5em 1.2em;
	color:#e5004f;
	font-weight:900;
	font-family: 'Ribeye Marrow', cursive;
	font-size:1.2em;
	margin-bottom: 1em;
	}
.offer-div01 dd{
	padding:0 0 1.5em 10em;
}
.offer-div02 dt{
	text-align:left;
	border:none;
	padding:0 0 0.8em;
	color:inherit;
	font-weight:200;
	font-family:inherit;
	font-size:inherit;
	margin-bottom:1.5em;
	}
.offer-div02 dd{
	padding:0 0 1.2em 7em;
	border-bottom:1px dotted #999;
	margin-bottom:1.5em;
}
.offer-div02 dd strong{
	font-weight:900;
}
.offer-div02 dd span{
	font-size:0.8em;
	display:inline-block;
	border:1px solid #999;
	border-radius: 6px;
	background:#eee;
	padding:0.1em 0.5em;
	margin:0.3em 0.3em 0 0;
}
.offer-div01 h3:before {
	background:none;
	content: '';
	display: block;
	height:0;
	margin: 0;
}
.form{
	padding-top:2em;
}
.form h2{
	font-family: 'Ribeye Marrow', cursive;
	font-size:1.3em;
}
.form dl{
	padding:2em 0 0;
}
.form dt{
	padding:0 0 .5em;
}
.form dd{
	padding:0 0 1em;
}
.form input,textarea{
	background:f8f8f8;
	border:1px #aaa dotted;
	border-radius: 6px;
	padding:0.7em 1.2em;
}

.form input.submit {
	width:11em;
	display:block;
	text-align:center;
	margin:0 auto;
	padding:1em;
	border:1px solid #aaa;
	font-size:0.8em;
	background:#fff;
}
.form .input.submit :hover{
	border:1px solid #e5004f;
	color:#e5004f;
}
.form .formbtn{
	vertical-align:central;
}
.form .formbtn a{
	width:12em;
	display:block;
	text-align:center;
	margin:0 auto 2em;
	padding:1.1em;
	border:1px solid #aaa;
	font-size:1em;
	font-weight:700;
	background-color:#fff;
	border-radius: 6px;
}
.form .formbtn a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f095';
  font-size: 1.2em;
  margin:0 0.5em 0 0;
}

/*フッター*/
footer{
	background-color:#cad2da;
	font-size:.85em;
	text-align:center;
	}
footer p{
	vertical-align:middle;
	height:4em;
	line-height:4em;
}
footer p img{
	width:2.6em;
	vertical-align:middle;
	padding:0 1rem;
}
footer p i{
	font-size:3em;
	vertical-align:middle;
	padding:0 1rem;
	color:#777;
}
footer ul{
	background-color:#373d43;
	text-align:center;
	padding:2em 0;
}
footer ul li{
	line-height:3;
}
footer ul li a{
	color:#fff !important;
}
.copyright{
	font-family:Arial, Helvetica, sans-serif;
	font-size:0.8em;
	color:#fff;
	padding:1em 0;
	background-color:#212529;
}
/*ページトップ*/
#page-top{
  width: 3em;
  height: 2em;
  position: fixed;
  right: 0;
  bottom: 0;
}
#page-top a{
  position: relative;
  display: block;
  text-decoration: none;
}
#page-top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f062';
  font-size: 1em;
  color: #e5004f;
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}
#page-top a::after{
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	content: 'TOP';
	font-size: 0.8em;
	color: #fff;
	position: absolute;
	top:-0.6em;
	bottom:0;
	right: 0;
	left: 0;
	margin: auto;
	text-align: center;
	color: #e5004f;
}
/*モジュール*/
.mb05{
	margin-bottom:.5em;
}
.mb1{
	margin-bottom:1em;
}
.mb2{
	margin-bottom:2em;
}
.mb3{
	margin-bottom:3em;
}
.mb4{
	margin-bottom:4em;
}
.pt1{
	padding-top:1em ;
}
.pt2{
	padding-top:2em;
}
.pt3{
	padding-top:3em;
}
.pt4{
	padding-top:4em;
}
.pt5{
	padding-top:5em;
}
.pb1{
	padding-bottom:1em ;
}
.pb2{
	padding-bottom:2em;
}
.pb3{
	padding-bottom:3em;
}
.pb4{
	padding-bottom:4em;
}
.pb5{
	padding-bottom:5em;
}
.pb6{
	padding-bottom:6em;
}
.pb7{
	padding-bottom:7em;
}
.w50{
	width:50%;
	margin:0 auto;
}
.uchikeshi{
	text-decoration:line-through;
}

/*pc用*/
@media screen and (min-width: 720px) {

html{
	font-size: 62.5%;
}
body {
	font-size:1.6rem;
	line-height: 2;
	/*font-family:'Noto Serif JP',"游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;*/
	font-family: 'Noto Sans JP', sans-serif;
	color:#333;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/*ナビゲーション*/
    nav{
     width: 100%;
     height: 70px;
	 z-index:9999;
	 /*opacity:.85;*/
	 position:fixed;/*追加J*/
	 top:0;	 /*追加J*/
    }
    .drawer{
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: space-between;
     position: relative;
     /*height: 70px;*/
     padding: 0 1em;
    }



/*ナビゲーション　トグル*/
.navbar_brand img{
	position:absolute;
	top:0;
	display:block;
	height:auto;
	width:90px;
	height:auto;
}
    .navbar_toggle{
	z-index:9999;
	background:#fff;
	padding:10px;
	position:fixed;
	right:12px;
	top:12px;
    }
    .navbar_toggle_icon {
     position: relative;
     display: block;
     height: 2px;
     width: 23px;
     background: #fff;
     -webkit-transition: ease .5s;
     transition: ease .5s;
    }
    .navbar_toggle_icon:nth-child(1) {
     top: 0;
    }
    .navbar_toggle_icon:nth-child(2) {
     margin: 7px 0;
    }
    .navbar_toggle_icon:nth-child(3) {
     top: 0;
    }
    /*OPEN時の動き*/
    .navbar_toggle.open .navbar_toggle_icon:nth-child(1) {
     top: 9px;
     -webkit-transform: rotate(45deg);
     transform: rotate(45deg);
    }
    .navbar_toggle.open .navbar_toggle_icon:nth-child(2) {
     -webkit-transform: translateY(-50%);
     transform: translateY(-50%);
     opacity: 0;
    }
    .navbar_toggle.open .navbar_toggle_icon:nth-child(3) {
     top: -9px;
     -webkit-transform: rotate(-45deg);
     transform: rotate(-45deg);
    }
	
/*ナビゲーション部分*/
.menu{
	-webkit-transform: translateX(100%);
	transform: translateX(100%);
	-webkit-transition:ease .5s;
	transition:ease .5s;
	background:none;/*透過させないためJ追加*/
	z-index:1000;
	margin-top:-70px;
	padding-top:70px;
}
.menu ul{
	padding:0;
}
.menu ul li{
	font-weight:
}

.menu ul li{
	padding: 2em;
}
.menu ul li a{
	color:#333;
	font-weight:bold;
	font-size:0.8em;
}
.menu ul li a::before{
	content:"|";
	padding-right:2.5em;
	font-weight:100;
	font-size:0.5em;
}
.menu ul li:first-child a::before{
	content:"";
	padding-right:2.5em;
	font-weight:100;
	font-size:0.5em;
}

/*OPEN時の動き*/
.menu.open {
	-webkit-transform:translateX(12em);
     transform:translateX(12em);
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
    }

/*ナビ　レスポンシブ*/
    @media screen and (min-width: 720px) {
    nav{
     display: flex;
     flex-direction: row;
	 height:70px;
	 position:relative;
    }
    .navbar_toggle{
     display: none;
    }
    .menu{
     width: 100%;
     -webkit-transform: translateX(0);
     transform: translateX(0);
    }
    .menu ul{
     height: 70px;
     display: flex;
     flex-wrap: wrap;
     justify-content: flex-end;
     align-items: center;
    }
    .menu ul li{
     padding: 0 0 0 1.25em;
     border-bottom: none;
    }
	
    }
/*スライダー*/
.slider_css {
	width:100%;
	height: 500px;
	margin: 0 auto;
	position: relative;
	overflow: hidden;
}
.slider_css ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.slider_css ul li {
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center center;
	width: 100%;
	height: 500px;
	position: absolute;
	top: 0;
	left: 0;
	animation-iteration-count: infinite;
	animation-duration: 40s;
}
.slider_css ul li:nth-child(1) {
	background-image: url("../images/slide6.jpg");
	animation-name: slider-zoomout;
	animation-delay: -3s;
}
.slider_css ul li:nth-child(2) {
	background-image: url("../images/slide1.jpg");
	animation-name: slider-zoomout;
	opacity: 0;
	animation-delay: 5s;
}
.slider_css ul li:nth-child(3) {
	background-image: url("../images/slide3.jpg");
	animation-name: slider-zoomin;
	opacity: 0;
	animation-delay: 13s;
}
.slider_css ul li:nth-child(4) {
	background-image: url("../images/slide4.jpg");
	animation-name: slider-zoomout;
	opacity: 0;
	animation-delay: 21s;
}
.slider_css ul li:nth-child(5) {
	background-image: url("../images/slide6.jpg");
	animation-name: slider-zoomin;
	opacity: 0;
	animation-delay: 29s;
}
.slider_css ul li img {
	width: 100%;
}

.slider_css div{
	width:100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align:center;
}
.slider_css img{
	width:15%;
}

  
/*コンテンツ共通*/
h1{
	font-size:1.8em;
}
h2:before {
  background: #444;
  content: '';
  display: block;
  height: 1px;
  margin: 0 0 1em;
  width: 10%;
}
h2{
	font-size:1.5em;
	color:#222;
	padding:2em 0 0 0;
	clear:left;
}
h3:before {
  background: #444;
  content: '';
  display: block;
  height: 1px;
  margin: 0 0 1em;
  width: 10%;
}
h3{
	font-size:1.2em;
	color:#222;
	padding:1em 0 0 0;
	font-weight:500;
}
section p{
	width:87%;
	margin:0 auto;
	padding:1.5em 0 0 0;
}
section p.btn{
	width:auto;
}
section p.btn a{
	width:11em;
	display:block;
	text-align:center;
	margin:0 auto;
	padding:1em;
	border:1px solid #333;
	font-size:0.8em;
}
section p.btn a:hover{
	border:1px solid #e5004f;
	color:#e5004f;
}
section p.btn_tel{
	width:auto;
	vertical-align:central;
}
section p.btn_tel a{
	width:11em;
	display:block;
	text-align:center;
	margin:0 auto;
	padding:1em;
	border:1px solid #373d43;
	font-size:0.8em;
	background-color:#373d43;
	color:#fff;
}
section p.btn_tel a:hover{
	border:1px solid #e5004f;
	color:#fff;
	background-color:#e5004f;
}
	
section p.btn_tel a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f095';
  font-size: 1.5em;
  color: #e5004f;
  margin:0 0.5em 0 0;
  color:#fff;
}


/*index*/

.new{
	position:relative;
	padding:0;
	margin:1.5em auto 0;
	width:40%;
	float:left;
	padding:0 2em 0 0;
}
.new img{
	width:100%;
	display:block;
	vertical-align:bottom;
}
.new small{
  display:block;
  width: 28%;
  height:28%;
  background-image:url(../images/new-icon.png);
  background-size:contain;
  background-repeat:no-repeat;
  position:absolute;
  top:-1%;
  left:-0.7%;
}
.index figure{
	float:left;
	width:33.3333%;
	margin:0 0 1em 0;
}
.index figcaption{
	text-align:center;
	margin:-.5em 0 0 0;
	line-height:1.3;
	color:#555;
}
.index figcaption span{
	font-size:.85em;
}

.index figure img{
	display:block;
	width:100%;
}
.section_menu1{
	background:#fff;
	width:100%;
}
.access_index dl{
	width:87%;
	margin:0 auto 2em;
}
.access_index dt{
	float:left;
	padding:1em 0 1em 0;
}
.access_index dd{
	border-bottom:1px solid #ccc;
	padding:1em 0 1em 6em;
}

/*about*/
h1.about1 {
	background:url(../images/basket.jpg) no-repeat;
	background-size:cover;
	background-position:center center;
	height:13em;
	line-height:13em;
	margin:0;
	padding:0 0 0 4em;
	font-size:1em;
}

/*ccess*/
h1.access {
	color:#fff;
	background:url(../images/access01.jpg) no-repeat;
	background-size:cover;
	background-position:center center;
	height:13em;
	line-height:13em;
	margin:0;
	padding:0 0 0 4em;
	font-size:1em;
}
.access dl{
	margin-bottom:4em;
}
.access dt{
	float:left;
	padding:1em 0 1em 0;
}
.access dd{
	border-bottom:1px solid #ccc;
	padding:1em 0 1em 6em;
}
iframe{
　-webkit-filter: grayscale(1);
　filter: grayscale(1);
}

/*メニュー*/
h1.menu01 {
	background:url(../images/menu-header.jpg) no-repeat;
	background-size:cover;
	background-position:center center;
	height:13em;
	line-height:13em;
	margin:0;
	padding:0 0 0 4em;
	font-size:1em;
}
	
.tapioca{
	background:url(../images/dorink-back.jpg);
	background-repeat: no-repeat;
	background-size:cover;
	background-color:#fff;
}
/*タピオカ19夏.tapioca dl{
	margin:0 auto 1.5em;
	width:50%;
}
　.tapioca dl::after{
	content:"";
	background: #ccc;
	content: '';
	display: block;
	height: 1px;
	margin: 2em auto 1em;
	width: 100%;
}
.tapioca dt{
	width:13em;
	float:left;
	line-height:1.5;
}
.tapioca dd{
	display: table;
	text-align:right;
	font-size:.8em;
}
.tapioca dd ul{
}
.tapioca dd li{
	display:inline-block;
	vertical-align:bottom !important;
	line-height:1;
	margin-bottom:0.2em;
}
.tapioca dd li:nth-child(even){
	width:40%;
	float:right;
}
.tapioca dd li:nth-child(odd){
	width:60%;
	float:left;
	clear:both;
}
.tapioca dd li img{
	width:100%;
	padding-left:1em;
	display:table-cell;
}*/
.tapioca > div > dl{
	width:70%;
	margin:0 auto 1em;
	padding-bottom:1em;
	clear:left;
	overflow:hidden;
	border-bottom:1px #ccc dashed;
}
.tapioca > div > dl > dt{
	float:left;
	width:75%;
}
.tapioca > div > dl > dd{
	margin:0;
	width:25%;
	float:right;
}
.sweetness dt{
	float:left;
	margin:0;
}
.sweetness{
	line-height:1.3em;
}
.sweetness dt{
	width:2.5em;
	margin-bottom:.5em;
}
.sweetness dt.temp{
	clear:left;
}
.sweetness dd{
	color:#fff;
	font-size:0.8em;
	font-weight:bold;
	margin:0 .1em .5em;
	background:#5e5e5e;
	border-radius:1.8em;
	-webkit-border-radius:1.8em;
	-moz-border-radius:1.8em;
	float:left;
	width:1.6em;
	height:1.6em;
	text-align:center;
}
.sweetness dd.temp01{
	background:#438eb4;
}
.sweetness dd.temp02{
	background:#e2844a;
}
.sweetness dd.temp03{
	background:#aa525e;
}

.alcohol{
	background:url(../images/alcohol-bg.jpg);
	background-repeat:no-repeat;
	background-size:cover;
	background-color:#fff;
}	
.alcohol dl{
	line-height:2.5;
	width:87%;
	margin:0 auto;
}

.alcohol dt{
	float:left;
	clear:both;
}
.alcohol dt span{
	display:block;
	font-size:0.7em;
	margin-top:-1.5em;
}
.alcohol dd{
	float:right;
}
/*2020年春夏に.indexでfloatしてるfigureをinlineboxに変更*/
.menu-list figure{
	display:inline-block;
	float:none !important;
	width:32.5%;
}

/*スタッフ*/
.wanted01{
	background-size:20%;
	min-height:400px;
}

/*フッター*/
footer{
	background-color:#cad2da;
	font-size:0.8em;
	text-align:center;
	}
footer p{
	vertical-align:middle;
	height:6em;
	line-height:6em;
}
footer p img{
	width:2.6em;
	vertical-align:middle;
	padding:0 .5em;
}
footer p i{
	font-size:3em;
	vertical-align:middle;
	padding:0 .5em;
	color:#777;
}
footer ul{
	background-color:#373d43;
	text-align:center;
	padding:2em 0;
}
footer ul li{
	line-height:2;
	display:inline-block;
	padding:0 2em;
}
footer ul li a{
	color:#fff !important;
}
.copyright{
	font-family:Arial, Helvetica, sans-serif;
	font-size:0.8em;
	color:#fff;
	padding:1em 0;
	background-color:#212529;
}
/*ページトップ*/
#page-top{
  width: 3em;
  height: 2em;
  position: fixed;
  right: 0;
  bottom: 0;
}
#page-top a{
  position: relative;
  display: block;
  text-decoration: none;
}
#page-top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f062';
  font-size: 1em;
  color: #e5004f;
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}
#page-top a::after{
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	content: 'TOP';
	font-size: 0.8em;
	color: #fff;
	position: absolute;
	top:-0.6em;
	bottom:0;
	right: 0;
	left: 0;
	margin: auto;
	text-align: center;
	color: #e5004f;
}







}