@charset "utf-8";
@import url('http://fonts.cdnfonts.com/css/bahagia-jarah');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;700;900&display=swap');
@import url('https://use.fontawesome.com/releases/v5.13.0/css/all.css');
/*--------------------------------------------------------------------------------------------------

   common

--------------------------------------------------------------------------------------------------*/


/*reset-------------------------------------------------*/
body,div,h1,h2,h3,h4,h5,h6,p,dl,dt,dd {
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

img {
  border: none;
  vertical-align: top;
}

header,section,article,aside,footer,nav {
 display: block;
}



/*-------------------------------------------------reset*/


/*common-------------------------------------------------*/
body {
  margin: 0;
  padding: 0;
  color: #282828;
  font-size: 16px;
  font-family: "Helvetica Neue",    Arial,    "Hiragino Kaku Gothic ProN",    "Hiragino Sans",    Meiryo,    sans-serif;
  font-weight: bold;
 }




.font-bahagia {
  font-family: 'Bahagia Jarah', sans-serif;
}

.font-noto-san-jp {
  font-family: 'Noto Sans JP', sans-serif;
}

a {
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  display: block;
}

ul,li {
  margin: 0px;
  padding: 0px;
  list-style: none;
}

address {
  font-style: normal;
}

.clear:after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.clear {
  display: inline-table;
}

/* mac \*/
* html .clear {
  height: 1%;
}

.clear {
  display: block;
}

.text-right {
	text-align: right;
}
.text-left {
	text-align: left;
}
.all-center {
	margin: 0 auto;
	text-align: center;
}

.left-margin {
	margin-left: auto;
}
.right-margin {
	margin-right: auto;
}

.image-content img {
	width: 100%;
}
.topic-img img {
		width: 100%;
}
.topic-img2 img {
		width: 100%;
}
/*-------------------------------------------------common*/


/*--------------------------------------------------------------------------------------------
  header
--------------------------------------------------------------------------------------------*/
header {
  width: 100%;
  top: 0;
  z-index: 100;
  position: fixed;
}

header .container {
	width: 940px;
	margin: 0 auto;
	position: relative;
}

header.show {
  background-color: rgba(209,192,165,0.9);
}

header h1 {
  text-align: center;
}

header h1 a {
	display: inline-block;
}

.menubt {
  width: 60px;
  height: 60px;
  position: absolute;
  top: 30px;
  left: 0;
  cursor: pointer;
}

.menubt span {
  width: 60px;
  height: 8px;
  display: block;
  background: #fbe9f2;
  border-radius: 0;
  position: absolute;
  right: 0;
  top: 30px;
  transition: all 0.4s;
  transform: rotate(0deg);
}

.menubt .top {
  -webkit-transform: translateY(-250%);
  -ms-transform: translateY(-250%);
  transform: translateY(-250%);
}

.menubt .bottom {
  -webkit-transform: translateY(250%);
  -ms-transform: translateY(250%);
  transform: translateY(250%);
}

.menubt .menuclick1 {
  transform: rotate(-215deg);
}

.menubt .menuclick2 {
  background-color: rgba(255,255,255,0);
}

.menubt .menuclick3 {
  transform: rotate(215deg);
}

nav {
  display: none;
  padding: 0 0 80px 0;
}

nav li {
  padding: 7px 0 8px 0;
}

nav  li a {
  font-size: 40px;
  color: #000;
		display: inline-block;
}

nav  li a:hover {
	color: #FFF;
}

nav  li a span {
  padding-left: 50px;
  font-size: 20px;
  display: inline-block;
}

nav li .box-phone,
#access .box-phone  {
  padding: 0 10px 10px 0;
  position: relative;
  display: inline-block;
  z-index: 2;
}

nav li .box-phone::after,
#access .box-phone::after {
  content: "";
  position: absolute;
  left: 10px;
  width: calc(100% - 10px);
  height: calc(100% - 35px);
  z-index: -1;
  top: 35px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
}

nav li .box-phone .phone,
#access .box-phone .phone {
  font-size: 19px;
  padding: 17px 40px 12px 80px;
  text-align: center;
  background: #fff url(../image/icon-phone-brown-light.png) no-repeat left 20px top 24px;
  color: #59493f;
}

nav li .box-phone .phone .number,
#access .box-phone .phone .number {
  display: block;
  font-size: 35px;
  color: #59493f;
  letter-spacing: 2px;
}

nav li.flex {
  justify-content: space-between;
}

nav li .social {
  padding-right: 60px;
}

nav li .social a {
  margin-left: 15px;
  display: inline-block;
}



/*------------------------------------------------------------------------------------------------
  content
--------------------------------------------------------------------------------------------------*/
.container {
  width: 940px;
  margin: 0 auto;
}

.al-center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.al-right {
  text-align: right;
}

.al-left {
  text-align: left;
}

.flex {
  display: -webkit-box;   /* OLD - iOS 6-, Safari 3.1-6, BB7 */
  display: -ms-flexbox;  /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
  display: flex;   
}

.flex-end {
  justify-content: flex-end;   
}

.border-btn {
  position: relative;
}

h2 {
  position: absolute;
  top: 77px;
  z-index: 1;
  width: calc(50% + 470px);
}

.h2-blue-2 {
  position: absolute;
  top: 77px;
  z-index: 1;
  width: 100%;
}

h2::after {
  content: "";
  position: absolute;
  height: 2px;
}

#commitment h2::after {
  left: 338px;
  width: calc(100% - 338px);
  bottom: 41px;
}

#pre-commitment h2::after {
  left: 338px;
  width: calc(100% - 338px);
  bottom: 41px;
}

#pre-commitment h2-blue-2::after {
  width: calc(100% - 338px);
  bottom: 41px;
}


#menu h2::after {
  right: 237px;
  width: calc(100% - 237px);
  bottom: 39px;
}

#about-store h2::after {
  left: 310px;
  width: calc(100% - 310px);
  bottom: 53.4px;
}

#dinner-menu h2::after {
  left: 209px;
  width: calc(100% - 209px);
  bottom: 42px;
}

#course-menu h2::after {
  left: 208px;
  width: calc(100% - 208px);
  bottom: 41px;
  background-color: #00561f!important;
}

.h2-menu .font-jp {
  left: 80px!important;
  top: 70px;
}

h2 .note {
  width: 200px;
  height: 150px;
  padding-top: 25px;
  text-align: center;
  color: #fff;
  font-size: 14px;
  background:url(../image/h2-note.png) no-repeat;
  position: absolute;
  right: calc(50% - 170px);
  top: 37px;
  font-weight: bold;
}

h2 .note.bg-green {
  font-size: 18px;
  padding-top: 35px;
  background:url(../image/menu/h2-note-course.png) no-repeat;
	 font-family: 'Noto Sans JP', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", Meiryo, sans-serif;
}

h2 .note.bg-orange {
  padding-top: 36px;
  font-size: 30px;
  background:url(../image/menu/h2-note-alldrink.png) no-repeat;
  top: 101px;
	 font-family: 'Noto Sans JP', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", Meiryo, sans-serif;
}

h2 .note.bg-yellow {
  background:url(../image/menu/h2-note-lunch.png) no-repeat;
  font-size: 18px;
  top: 51px;
	 font-family: 'Noto Sans JP', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", Meiryo, sans-serif;
}


h2 .note .font-big {
  font-size: 24px;
		letter-spacing: 0.05em;
	 font-family: 'Noto Sans JP', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", Meiryo, sans-serif;
}

h2 .note .font-big span {
	display: block;
	font-size: 14px;
	line-height: 1.2;
}

#access h2 {
  top: -145px;
}

#menu h2 {
  top: 160px;
}

#access h2::after {
  left: 197px;
  width: calc(100% - 197px);
  bottom: 55px;
}

h2.al-left {
  left: calc(50% - 470px);
}

h2.al-right {
  right: calc(50% - 470px);
  padding-right: 60px;
}

h2 .font-bahagia {
  position: relative;
  display: inline-block;
  z-index: 1;
}
h2 .font-bahagia2 {
  position: relative;
  display: inline-block;
  z-index: 1;
}

h2 .font-jp {
  font-size: 20px;
  display: block;
  position: absolute;
  top: 80px;
  z-index: 2;
}

.title-border {
width: 75%;
margin-left: auto;	
display: flex;
align-items: center;
	
}
.title-border:after {
border-top: 2px solid #31617e;
content: "";
flex-grow: 1;
width: 4em;
}

.title-border:after {
margin-left: -4.5rem;
margin-top: 2.5rem;

}


#about-store h2 .font-jp {
  top: 95px;
}

#all-drink h2 .font-jp {
  top: 130px!important;
}

#all-drink h2::after {
  left: 376px!important;
  width: calc(100% - 376px)!important;
  bottom: 58.4px!important;
}

#lunch-menu h2::after {
  left: 206px !important;
  width: calc(100% - 206px) !important;
  bottom: 43px !important;
  background-color: #edb93b;
}

#drink-menu h2::after {
  left: 211px !important;
  width: calc(100% - 211px) !important;
  bottom: 42px !important;
  background-color: #2dad6c;
}

h2.al-left .font-jp {
  left: 160px;
}

h2.al-right .font-jp {
  right: 0;
}

.h2-white::after {
  background-color: #fff;
}

.h2-blue::after {
  background-color: #31617e;
}

.h3-blue::after {
  background-color: #31617e;
}

.h2-white .font-jp {
  color: #fff;
}

.h2-blue .font-jp {
  color: #31617e;
}

#lunch-menu h2 .font-jp {
  color: #edb93b!important;
  top: 85px;
}

#commitment .h2-blue .font-bahagia {
  background-color: #92a7bf;
}



.btn-link {
  padding: 8px 95px 8px 65px;
  font-size: 20px;
  display: inline-block;
  min-width: 420px;
		letter-spacing: .2em;
}

.btn-link-blue {
  color: #fff;
  background-color: #31617e;
}

.btn-link-blue:hover {
	background-color: #6AA4C6;
}

.btn-link-blue span {
  display: inline-block;
  padding-right: 40px;
  background: url(../image/icon-next.png) no-repeat right center;
}

.btn-link-blue::after {
  top: 6px;
  border-right: 2px solid #31617e;
  border-bottom: 2px solid #31617e;
}

.btn-link-white::after {
  top: 6px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
}

.btn-link-white {
  color: #3e3a39;
  background-color: #fff;
}

.btn-link-white:hover {
	background-color: #ACCCDF;
}

.btn-link-white span {
  display: inline-block;
  padding-right: 40px;
  background: url(../image/icon-next-black.png) no-repeat right center;
}

.border-btn::after {
  content: "";
  position: absolute;
  left: 12px;
  width: 100%;
  height: 100%;
}

.bg-grown-bright {
  background-color: #d1c0a5;
}

.bg-blue {
  background-color: #91a7bf;
}

.font-red {
  color: #e04f1d;
}

.font-green {
  color: #00561f!important;
}

.font-yellow {
  color: #edb93b;
}

.mar-bottom25 {
  margin-bottom: 25px;
}

.mar-bottom55 {
  margin-bottom: 55px;
}

#course-menu h2 {
  top: 125px;
}

.mar-bottom250 {
  margin-bottom: 250px;
}

.font-orange {
  color: #f29b76;
}

.font-green-right {
  color: #1da762;
}

#drink-menu h2 .font-jp {
  color: #1da762;
  top: 90px;
}

.mar-left110 {
  margin-left: 90px;
}

.bg-orange {
  background-color: #ec6941;
}

.bg-gray {
  background-color: #e5e5e5;
}

.bg-green {
  background-color: #b3d465;
}




/*------------------------------------------------------------------------------------------------
  footer
--------------------------------------------------------------------------------------------------*/
footer #access {
  background-color: #31617e;
  padding: 305px 0 115px 0;
  position: relative;
}

footer #access .container {
  width: 960px;
  position: relative;
}

footer #access .info {
  width: 460px;
  margin-top: 40px;
  margin-left: 10px;
}

footer #access .flex {
  justify-content: space-between;
  margin-top: 40px;
}

footer #access address {
  margin-top: 55px;
  color: #fff;
  margin-left: 10px;
  line-height: 1.6;
		font-weight: 400;
}

footer #access .right {
  margin-top: 335px;
}

footer #access .map2 {
  position: absolute;
  right: 10px;
  top: 255px;
  z-index: 2;
}

#access .box-phone {
  position: relative;
  margin-right: 10px;
}

#access .box-phone .phone {
  background: #fff;
  text-align: center;
  padding-top: 35px;
  padding: 35px 80px 12px 80px;
}

#access .box-phone .icon-phone {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  margin: 0 auto;
  top: -90px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background-color: #31617e;
}

#access .box-phone .icon-phone img {
  padding-top: 60px;
}

footer .info-footer {
  padding: 55px 0 50px 0;
  background: url(../image/bg-body.jpg) repeat;
}

footer .info-footer ul {
  justify-content: space-between;
  margin-right: 60px;
}

footer .info-footer li {
  line-height: 1.6;
}

footer .info-footer li:last-child {
  margin-left: 67px;
}

footer .info-footer .logo {
  margin-bottom: 25px;
}

footer .info-footer .social a {
  margin-left: 15px;
  display: inline-block;
}

footer .coppy {
  padding: 10px 0;
  background-color: #e5e5e5;
  font-weight: normal;
  font-size: 14px;
  text-align: center;
}