@charset "UTF-8";
/* CSS Document */


/*■■■■■■■■■■
基本設定
*/
@font-face {
  font-family: "americanTypewriter";
  src: url('../font/american_typewriter.woff') format('truetype')
}
@font-face {
  font-family: "americanTypewriterLight";
  src: url('../font/american_typewriter_light.woff') format('truetype')
}
@keyframes fadeStart {
from { opacity: 0}
40% { opacity: 0}
to { opacity: 1}
}
:root {
	--inSize: 1020px;	
	--keyGreen: #608151;
	--keyRed: #731f17;
	--keyWhite: #e5dcd6;
	--keyBrown: #9A837E;
	--aFont: "americanTypewriter"
}
body {
	font-family: "Avenir Next", Verdana, "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, Osaka, sans-serif;
	color: #000;
	text-align: justify;
	text-justify: inter-ideograph;
	line-height: 1.35em
}
p {
	letter-spacing: .1em;
	text-align: justify
}
a,input[type="submit"] { transition: .6s }
a:hover,input[type="submit"]:hover { opacity: .7 }
.txtBox p { margin-top: var(--w25) }
.txtBox p:first-child { margin-top: 0 }
.ptNone {  display: none }
.englishName {
    font-family: var(--aFont);
    letter-spacing: .05em;
}
#contents { margin: 0 auto }
#contents section {
	width: var(--inSize);
	margin-right: auto;
	margin-left: auto
}
.delay {
  opacity: 0;
  transition: all .6s ease;
}
 
.delay.show { opacity: 1 }










/*■■■■■■■■■■
ヘッダー
*/
#header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 11;
	padding: 10px 3.125% 0 3.125%;
	margin: 0 auto;
	transition: .6s;
}
.contentsIn {
	background: rgba(25,25,25,.7);
}
.headerTit01 {
	position: relative;
	z-index: 11;
	color: #fff;
	font-size: 10px
}
.headerInfo {
	display: flex;
    flex-wrap: wrap;
    justify-content: space-between
}
.headerSns {
	position: relative;
	z-index: 11
}
.headerSns li {
	display: inline-block;
	margin-left: 5px
}
.headerSns img {
    width: 40px;
}
#drawerInput { display: none }
#drawerBtn { position: relative }
#drawerBtn img {
	position: absolute;
	top: 0;
	left: 0;
	transition: .2s
}
#drawerBtn img:nth-child(2) {
	opacity: 0;
	visibility: hidden
}
.drawerMenuTit01 {
	width: var(--inSize);	
	margin: 0 auto 40px auto;
	padding-top: 45px;
	padding-bottom: 20px;
	border-bottom: 1px solid #fff;
	color: #fff;
	text-align: center
}
#drawerBox {
	opacity: 0;
	visibility: hidden;
	position: fixed;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
	background: rgba(25,25,25,.8);
	transform: translateX(-200px);
	transition: .6s
}
.drawerMenuList {
	display: flex;
	width: var(--inSize);
	margin: 0 auto;
	padding-bottom: 40px;
	text-align: center;
	list-style-type: none;
	flex-wrap: wrap;
    justify-content: space-between
}
.drawerMenuList a {
	display: block;
	color: #fff;
	text-decoration: none
}
.drawerMenuList a .englishName {
	display: block;
	font-weight: normal;
	font-size: 14px
}
.drawerMenuList a .japaneseName { font-size: 10px }
.drawerMenuList li {
	width: 33.333%;
	margin-top: 40px
}
.drawerMenuList li:nth-child(-n+3) { margin-top: 0 }
#drawerInput:checked ~ #drawerBtn img:nth-child(1) {
	opacity: 0;
	visibility: hidden
}
#drawerInput:checked ~ #drawerBtn img:nth-child(2) {
	opacity: 1;
	visibility: visible
}
#drawerInput:checked ~ #drawerBox {
	opacity: 1;
	visibility: visible;
	width: 100%;
	height: auto;
	transform: translateX(0)
}











/*■■■■■■■■■■
メイン
*/
#main {
	position: relative;
	margin-bottom: var(--w70)
}
.mainTit01 {
	position: absolute;
	top: 50%;
	right: 0;
	left: 0;
	z-index: 10;
	width: 45%;
	margin: auto;
	transform: translateY(-50%);
}
.bx-viewport { z-index: 5 }
.bx-wrapper img { width: 100% }
.bx-wrapper { position: relative }
.bx-wrapper .bx-pager {
	position: absolute;
	right: 0;
	left: 0;
	z-index:  6;
	bottom: 3vw;
	margin: auto;
	text-align: center;
	animation: fadeStart ease 1.8s;
}
.bx-wrapper .bx-pager.bx-default-pager a {
	display: block;
	width: 1vw;
	height: 1vw;
	margin: 0 .8vw;
	border-radius: 1vw;
	background: #99827d;
	text-indent: -9999px;
	outline: 0;
}
.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active,
.bx-wrapper .bx-pager.bx-default-pager a:focus { background: #fff }
.bx-wrapper .bx-pager-item,
.bx-wrapper .bx-controls-auto .bx-controls-auto-item {
	display: inline-block;
	vertical-align: bottom
}
.bx-wrapper .bx-pager-item {
	font-size: 0;
	line-height: 0
}
.mainSlide {
	animation: fadeStart ease 1.8s;
}





/*■■■■■■■■■■
#about
*/
#about {
	width: var(--inSize);
	margin: 0 auto;
	padding: 80px 0 100px 0
}
.aboutTit01 {
	margin-bottom: 50px;
	line-height: 1.5em;
	color: var(--keyGreen);
	font-size: 25px;
	text-align: center
}
.aboutTxt01 {
	margin-bottom: 80px;
	text-align: center;
line-height: 2em;
}
.aboutNews {
	display: flex;
	width: 100%;
	max-width: 768px;
	margin: 0 auto;
	flex-wrap: wrap;
	justify-content: space-between;
}
.aboutNews dt { color: #fff }
.aboutNews dt time {
	display: block;
	padding: 0 10px;
	background: var(--keyRed);
	line-height: 1.8em;
	font-size: 14px;
}
.aboutNews dt time.englishName {
	font-weight: bold;
	font-family:"americanTypewriterLight";
}
.aboutNews dd {
    width: 100%;
    max-width: 600px;
    margin-bottom: 10px;
    padding: 0 10px;
    box-sizing: border-box;
    line-height: 1.8em;
    letter-spacing: .1em;
	font-size: 14px;
}
.aboutNews dd:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
}
.aboutNews a { color: #000 }










/*■■■■■■■■■■
メニュー
*/
#menuNav { margin-bottom: 145px }
#menuNav ul {
	display: flex;
	width:var(--inSize);
	margin: 0 auto;
	list-style-type: none;
	flex-wrap: wrap;
	justify-content: space-between
}
#menuNav li { width: 29.4117% }
#menuNav a {
	display: block;
	position: relative
}
#menuNav img {
	width: 100%;
	vertical-align: bottom;
	transition: .6s
}
#menuNav a::before {
	content: "";
	position: absolute;
	top: -10%;
	right: -10%;
	z-index: -1;
	width: 100%;
	height: 100%;
	transition: .2s
}
#menuNav #goDay::before { background: var(--keyGreen) }
#menuNav #goNight::before { background: var(--keyRed) }
#menuNav #goPartty::before { background: var(--keyWhite) }
#menuNav a:hover { opacity: 1 }
#menuNav a:hover img { opacity: .7 }
#menuNav a:hover::before {
	top: 0;
	right: 0
}
section[id*="menu"] {
    margin-bottom: 50px;
    padding-bottom: 100px;
    border-bottom: 1px solid #000
}
section[id*="menu"]:last-of-type {
	margin-bottom: 100px;
}
.menuTit01 {
	padding: 10px 0 12px 0;
	color: #fff;
	font-size: 27px;
	text-align: center;
	letter-spacing: .1em
}
#menuDay .menuTit01 { background: var(--keyGreen) }
#menuNight .menuTit01 { background: var(--keyRed) }
#menuParty .menuTit01 {
    margin-bottom: 55px;
    background: var(--keyWhite)
}
.menuTit02 {
    margin-bottom: 60px;
    padding-top: 65px;
    font-size: 25px;
    letter-spacing: .1em
}
.menuTit01 + .menuTit02 { padding-top: 50px }
.menuTit02::before {
    display: block;
    padding-bottom: 10px
}
.menuNum01 .menuTit02::before { content: url(../img/menu_icon_num_01.svg) }
.menuNum02 .menuTit02::before { content: url(../img/menu_icon_num_02.svg) }
.menuNum03 .menuTit02::before { content: url(../img/menu_icon_num_03.svg) }
.menuNum04 .menuTit02::before { content: url(../img/menu_icon_num_04.svg) }
.menuNum05 .menuTit02::before { content: url(../img/menu_icon_num_05.svg) }
.menuNum06 .menuTit02::before { content: url(../img/menu_icon_num_06.svg) }
.menuNum07 .menuTit02::before { content: url(../img/menu_icon_num_07.svg) }
.menuNum08 .menuTit02::before { content: url(../img/menu_icon_num_08.svg) }
.menuNum09 .menuTit02::before { content: url(../img/menu_icon_num_09.svg) }
.menuNum10 .menuTit02::before { content: url(../img/menu_icon_num_10.svg) }
.menuNum11 .menuTit02::before { content: url(../img/menu_icon_num_11.svg) }
.menuTit02 span {
	margin-left: 25px;
    font-size: 14px
}
.menuList {
	display: flex;
	flex-wrap: wrap;
	list-style-type: none;
	justify-content: space-between
}
.menuList > li {
	width: 29.4117%;
	margin-top: 80px
}
.menuList::after {
    content: "";
    width: 29.4117%
}
.menuList > li:nth-child(-n+3) { margin-top: 0 }
.menuList figure {
	display: block;
	margin-bottom:10px
}
.menuList > li > figure img {
	width: 100%;
	max-width: 450px
}
.menuListTit01 {
    margin-bottom: 10px;
    letter-spacing: .1em;
}
.menuListTit01 .englishName {
	display: block;
	font-size: 16px;
	text-align: left
}
.menuListTit01 .japaneseName {
    display: block;
    margin-top: 10px; 
	font-weight: normal;
	font-size: 12px
}
.menuListTxt01{
    margin-bottom: 35px;
    font-size: 12px
}
.menuListPrice01 {
	font-family: var(--aFont);
	font-size: 16px
}
.menuListBox {
    padding: 14px 25px;
    border: 2px solid #000
}
.menuListBoxList {
    display: flex;
    font-size: 12px;
	flex-wrap: wrap;
    justify-content:  space-between
}
.menuListBoxList dt { width: 60%;
                      text-align: left;
}
.menuListBoxList dt figure { width: 65px }
.menuListBoxList dd {
    width: 40%;
    text-align: right
}
#menuDay {
    margin-bottom: 110px;
    padding-bottom: 0;
    border-bottom: 0
}
#contents section#menuParty {
	width: 100%;
	max-width: var(--inSize)
}
.menuPartyTxt01 {
    margin-bottom: 45px;
    line-height: 1.5em;
    color: #742018;
    font-weight: bold;
    font-size: 25px;
    text-align: center
}
.menuList > li.menuListCoffe { width: 100% }
.menuPartyList {
    padding: 70px 100px;
    background: url(../img/menu_party_bg_01.jpg);
    background-size: cover
}
.menuPartyList .menuListTit01 { text-align: center }
.menuPartyList > li {
    position: relative;
    margin-top: 60px;
    padding: 40px 80px;
    background: rgba(255,255,255,.7);
    list-style-type: none
}
.menuPartyList > li:first-child { margin-top: 0 }
.menuPartyList > li::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    width: 95.34%;
    height: 90%;
    margin: auto;
    border: 2px solid #000;
    transform: translateY(-50%)
}
.menuPartyListWrap {
    display: flex;
    font-size: 12px;
    flex-wrap: wrap;
    justify-content: space-between
}
.menuPartyListBox {
    display: flex;
    width: 49%;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: flex-start
}
.menuPartyListBox .menuListTit02 {
    width: 30%;
    font-weight: bold 
}
.menuPartyListBox .menuListTxt01 {
    width: 70%;
    margin-bottom: 0
}
#menuAlcohol .menuListBox,#menuDrink .menuListBox {
    padding: 0;
    border: 0
}
.menuListCoffeList {
    display: flex;
    margin: 0 auto;
    font-size: 12px;
	flex-wrap: wrap;
    justify-content: space-between
}
.menuListCoffeList dt {
    display: flex;
    width: 35.78%;
    margin-top: 30px
}
.menuListCoffeList dt .imgFigure {
    width: 65px;
    margin-right: 5%
}
.menuListCoffeList dt .menuListCoffeListTit01 {
    font-weight: normal;
    font-size: 12px
}
.menuListCoffeList dd {
    width: 57.84%;
    margin-top: 30px
}
.menuListCoffeList dt:first-of-type,.menuListCoffeList dd:first-of-type { margin-top: 0 }










/*■■■■■■■■■■
#instagram
*/
#instagram {
	margin-bottom: 50px;
    padding-bottom: 100px;
    border-bottom: 1px solid #000
}
.instagramTit01 {
	width: var(--inSize);
	max-width: 750px;
    margin: 0 auto 25px auto;
	font-weight: normal;
	letter-spacing: .1em
}
.instagramTit01 a {
	display: block;
	padding: 20px 0;
	background: var(--keyGreen);
	color: #fff;
	font-size: 27px;
	text-align: center;
	text-decoration: none
}
#instagramFeed {
	display: flex;
    flex-wrap: wrap;
    width: var(--inSize);
	max-width: 750px;
    margin: 0 auto;
	background: #fafafa;
	list-style-type: none;
    justify-content: space-between
}
#instagramFeed li {
	width: 30%;
	margin-top: 5%
}
#instagramFeed li:nth-child(-n+3) { margin-top: 0 }
#instagramFeed li img {
	width: 100%;
	height: 100%;
    object-fit: cover
}










/*■■■■■■■■■■
フッター
*/
.footerBox {
    display: flex;
    flex-wrap: wrap;
    width: var(--inSize);
    margin: 0 auto;
    justify-content: space-between
}
.footerMap {
    width: 53%;
    height: 250px
}
.footerMap iframe {
    overflow: hidden;
    width: 100%;
    height: 100%;
    border: 0
}
.footerInfo { width: 47% }
.footerTit01 { text-align: center }
.footerInfoBox {
    display: flex;
    margin-bottom: 80px;
    padding: 0 14%;
	box-sizing: border-box;
    flex-wrap: wrap;
    justify-content: space-between
}
.footerInfoBox a {
    color: #000;
    text-decoration: underline
}
.footerInfoBox a:hover { text-decoration: none }
.footerInfoBox li {
    width: 160px;
	margin-top: 20px;
    font-size: 12px;
	list-style-type: none;
}
.footerInfoBox li:nth-child(-n+2) { margin-top: 0 }
.footerSns a {
    font-weight: bold;
    font-size: 10px
}
.footerSns a img { margin-right: 10px }
.footerCopy {
    display: block;
    padding: 9px 0;
	background: var(--keyGreen);
    color: #fff;
    font-size: 12px;
    text-align: center
}










/*■■■■■■■■■■
900以下
*/
@media screen and (max-width: 1020px) {
/*■基本設定*/
:root { --inSize: 93.75% }
body {
	overflow-x: hidden;
	width: 100%
}





/*■メニュー*/
#contents section#menuParty { max-width: 100% }





/*■フッター*/
.footerInfoBox li {
	width: 152px;
	margin: 0 auto
}
}










/*■■■■■■■■■■
640以下
*/
@media screen and (max-width: 640px) {
/*■ヘッダー*/
#header {padding: 5px 3.125% 0 3.125% }
.headerSns li img { width: 32px }
#drawerInput:checked ~ #drawerBox {
	height: 100%;
}
#drawerBtn img { width: 32px }
/*■about*/
#about { padding: 10vw 0 }
.aboutTit01 {
	margin-bottom: 10vw;
	font-size: 6.66vw
}





/*■メイン*/
.mainTit01 { width: 75% }





/*■#about*/
.aboutTxt01 {
	margin-bottom: 20vw;
	font-size: 3.7vw;
	text-align: justify
}
.aboutTxt01 br { display: none }
.aboutNews dd { padding: 2vw 0 }





/*■メニュー*/
#menuNav { margin-bottom: 30vw }
#menuNav li {
	width: 80%;
	margin: 6vw auto 0 auto
}
#menuNav li:first-child { margin-top: 0 }
#menuNav a::before {
	top: -5%;
	right: -5%
}
.menuTit01 { font-size: 7.2vw }
.menuTit02 { font-size: 6.66vw }
.menuTit02 span {
	margin-left: 2vw;
	font-size: 2.66vw
}
.menuList > li {
	width: 100%;
	margin-top: 10vw !important
}
.menuList > li:nth-child(1) { margin-top: 0 !important }
.menuListTit01 .englishName { font-size: 4.266vw }
.menuListTit01 .japaneseName { font-size: 3.2vw }
.menuListPrice01 { font-size: 4.266vw }
.menuListBoxList { font-size: 3.2vw }
.menuPartyList {
	margin: 0 auto;
	padding:10vw 0 }
.menuPartyList > li { padding: 6% }
.menuPartyList > li::before { height: 97% }
.menuPartyList .menuListTit01 { margin-bottom: 5vw }
.menuPartyListWrap {
    display: block;
    font-size: 3.2vw
}
.menuPartyListBox {
    display: block;
    width: 100%;
}
.menuPartyListBox .menuListTit02 {
    width: 100%;
    margin-top: 5vw
}
.menuPartyListWrap .menuPartyListBox:first-child .menuListTit02:first-child { margin-top: 0 }
.menuPartyListBox .menuListTxt01 {
    width: 100%;
    padding-left: 1em
}
#menuAlcohol .menuListBox, #menuDrink .menuListBox {
	padding: 14px 25px;
	border: 2px solid #000
}
.menuListCoffeList { font-size: 3.2vw }
.menuListCoffeList dt { width: 100% }
.menuListCoffeList dt .menuListCoffeListTit01 { font-size: 3.2vw }
.menuListCoffeListPrice01 { font-size: 3.2vw }
.menuListCoffeList dd {
	width: 100%;
	margin-top: 0
}





/*■instagram*/
#contents section#instagram { width: 100% }
.instagramTit01 {
	width: 100%;
	max-width: 100% }
.instagramTit01 a { font-size: 7.2vw }





/*■フッター*/
.footerBox { width: 100% }
.footerMap {
    width: 100%;
    margin-bottom: 5vw
}
.footerInfo {
	width: var(--inSize);
	margin: 0 auto
}
.footerInfoBox { padding: 0 }
.footerInfoBox li {
	width: 49%;
	font-size: 3.2vw
}
.footerSns a { font-size: 2.66vw }
}



@media all and (orientation: landscape) {
#drawerInput:checked ~ #drawerBox { height: 100% }
.drawerMenu {
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    height: 100%
}
}