@charset "utf-8";

/*---------- head ----------*/
#head {
	background-image: url(../img/menu/head.jpg);
	padding-top: 173px;
	padding-bottom: 184px;
}
#head h1 span {
	letter-spacing: 0.7rem;
	margin-left: 12px;
}
#headText {
	text-align: center;
	padding-top: 122px;
	font-size: 1.9rem;
	line-height: 2.64;
	letter-spacing: 0.1rem;
	padding-bottom: 126px;
}
/*---------- course ----------*/
#courseReco {
	padding-top: 171px;
	padding-bottom: 386px;
	background-image: url(../img/menu/course_bg.jpg);
	height: 950px;
	background-size: cover;
	background-position: center;
}

#courseReco .headBox h2 {
	font-size: 5rem;
	font-weight: 600;
	text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.25);
}
#courseReco .headBox p {
	font-size: 3.1rem;
	margin-top: 16px;
	letter-spacing: 0.1rem;
	text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.25);
}
#courseReco .headBox p span {
	font-size: 2.3rem;
	display: inline-block;
}
#courseReco .sub__txtBox {
	max-width: 510px;
	margin-top: 51px;
}
#courseReco .sub__txtBox p {
	font-size: 1.5rem;
	line-height: 2.53;
	letter-spacing: 0.1rem;
	text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.25);
}
#courseReco .sub__txtBox span {
	display: block;
	font-size: 1.3rem;
	margin-top: 2px;
}
#courseReco .noteBox {
	margin-top: 38px;
	margin-left: -9px;
}
#courseReco .noteBox p {
	font-size: 1.6rem;
	vertical-align: text-top;
	letter-spacing: 0.3rem;
	margin-top: 10px;
	text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.25);
}
#courseReco .noteBox p:first-of-type {
	margin-top: initial!important;
}
#courseReco .noteBox span {
	font-size: 2.5rem;
}
#courseExample .head .inner {
	padding-bottom: 101px;
	padding-top: 336px;
	text-align: center;
}
#courseExample .head h3,
#courseExample .contents ul {
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
}
#courseExample .head h3 {
	position: absolute;
	top: 132px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 3rem;
	font-weight: 600;
	letter-spacing: 0.6rem;
}
#courseExample .head h3:before {
	content: "";
	width: 1px;
	height: 198px;
	border-left: 1px solid #ffffff;
	position: absolute;
	top: -231px;
	left: 50%;
	box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.3);
}
#courseExample .head img {
	box-shadow: 10px 10px 3px 0px rgba(0,0,0,0.2);
}
#courseExample .contents {
	margin: -230px calc(50% - 50vw) 0;
	width: 100vw;
	background-image: url(../img/menu/bg.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	padding: 200px 0 76px;
}
#courseExample .contents h4 {
	text-align: center;
	font-size: 2.9rem;
	letter-spacing: 0.2rem;
	font-weight: 600;
}
#courseExample .contents h4:nth-child(3) {
	padding-top: 33px;
	letter-spacing: 0.8rem;
	padding-left: 15px;
}
#courseExample .contents ul {
	font-size: 1.6rem;
	font-weight: 500;
	letter-spacing: 0.2rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
	width: 475px;
	margin: 18px auto 0;
	line-height: 3.1;
	padding-top: 18px;
	border-top: 1px solid rgba(255, 255 ,255, 0.5);
}
#courseExample .contents ul li {
	position: relative;
}
#drink {
	padding-top: 170px;
	/* お飲み物のメニューは変更となる可能性がございます。のテキスト追加のため余白追加 */
	padding-bottom: 64px;
}
#drink h2,
#drink h3,
#drink p {
	text-align: center;
	font-weight: 600;
	position: relative;
}
#drink h2 {
	font-size: 5rem;
	letter-spacing: 0.4rem;
	margin-bottom: 148px;
}
#drink h3 {
	font-size: 3.8rem;
	letter-spacing: 0.2rem;
}
#drink .txt__open,
#drink .txt__close {
	position: relative;
	opacity: 0.6;
	font-weight: 400;
	font-size: 1.9rem;
	letter-spacing: 0.1rem;
	margin-top: 45px;
	transition: all 0.3s ease;
	cursor: pointer;
}
#drink .txt__open i {
	display: block;
    font-size: 1.8rem;
    margin-top: 10px;
}
#drink .txt__close {
	padding: 35px 0;
	margin-bottom: 140px;
}
#drink .txt__close::before {
    content: "";
    width: 100%;
    height: 1px;
    position: absolute;
    top: 50%;
    left: 0;
    background-color: #ffffff;
    transform: translateY(-50%);
}
#drink .txt__close > span {
	position: relative;
    background-color: #151210;
	padding: 0 17px;
    display: inline-block;
}
#drink div.others .txt__close {
    margin-bottom: 35px;
}
#drink .banner {
	padding-top: 95px;
	padding-bottom: 13px;
	margin-bottom: 69px;
	cursor: pointer;
	position: relative;
	background-position: center;
	background-repeat: no-repeat;
	transition: all 0.3s ease;
}
#drink .banner:before {
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-color: rgba(0, 0, 0, 0.7);
	transition: all 0.3s ease;
}
#drink .banner.open p {
	opacity: 0;
}
#drink div.sake .banner {
	background-image: url(../img/menu/sake.jpg);
}
#drink div.wine .banner {
	background-image: url(../img/menu/wine.jpg);
}
#drink div.others .banner {
	background-image: url(../img/menu/others.jpg);
}
#drink .accordion {
	display: none;
	padding-top: 85px;
}
#drink .box {
	padding: 0 95px 0 100px;
	margin-bottom: 116px;
}
#drink .box h4 {
	font-size: 3.2rem;
	font-weight: 500;
	letter-spacing: 0.3rem;
	position: relative;
}
#drink .box h4 span {
	font-size: 1.5rem;
	padding-left: 18px;
	letter-spacing: 0.1rem;
}
#drink .box h4:before {
	content: "";
	width: 29px;
	height: 29px;
	background-image: url(../img/menu/icon.png);
	position: absolute;
	top: 6px;
	left: -47px;
}
#drink .box table {
	font-size: 1.5rem;
	margin-top: 58px;
	width: 100%;
}
#drink .box table.inc_lines {
	margin-top: 35px;
}
#drink .box tr {
	width: 100%;
	border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
#drink .box td {
	line-height: 1.68;
	padding: 26px 0 10px;
	vertical-align: bottom;
}
/* 翻訳 */
#drink .box td font {
	display: block;
}
#drink .box td:first-of-type {
	font-size: 2.2rem;
	padding-right: 20px;
}
#drink .box td:nth-of-type(n+2) {
	white-space: nowrap;
}
/* 単位 */
#drink .box td.unit {
	width: 50px
}
#drink .wine .box td.unit {
	width: 110px;
}
[lang="en"] #drink .others .box.is-beer td.unit {
	width: 110px;
}
/* 量 */
#drink .box td.amount {
	width: 60px;
}
/* 値段 */
#drink .box td.price {
    width: 130px;
	text-align: right;
	letter-spacing: 1px;
}
#drink .memo {
    font-size: 1.9rem;
    font-weight: 400;
    padding-right: 20px;
    opacity: 1;
    margin-top: -24px;
    line-height: 1.8;
    text-align: left;
}
/*---------- hover ----------*/
@media (hover: hover) and (pointer: fine) {
	#drink .banner:hover:before {
		background-color: rgba(0, 0, 0, 0.4);
	}
}
/*---------- 1280pxより小さい画面 ----------*/
@media screen and (max-width:1279px) {
	#courseExample ul {
		line-height: 2.3;
		width: 100%;
		max-width: 720px;
	}
	#drink .box {
		padding: 0 30px 0 50px;
	}
}
/*---------- 767pxより小さい画面(スマホ)----------*/
@media screen and (max-width:767px) {
	#head {
		background-image: url(../img/sp/menu/head.jpg);
		padding-top: 15vw;
		padding-bottom: 16.4vw;
	}
	#head h1 span {
		letter-spacing: 1vw;
		margin-left: 0;
	}
	#headText {
		padding-top: 24vw;
		font-size: 3.2vw;
		line-height: 2.5;
		letter-spacing: 0;
		padding-bottom: 24.7vw;
	}
	/*---------- course ----------*/
	#courseReco {
		padding-top: 11.8vw;
		padding-bottom: 0;
		background-image: url(../img/sp/menu/course_bg.jpg);
		height: 133.4vw;
	}
	#courseReco .headBox h2 {
		font-size: 8vw;
		margin-left: -0.9vw;
	}
	#courseReco .headBox p {
		font-size: 4.1vw;
		margin-top: 2.5vw;
		letter-spacing: 0.1vw;
	}
	#courseReco .headBox p span {
		font-size: 2.7vw;
	}
	#courseReco .sub__txtBox {
		margin-top: 7.4vw;
	}
	#courseReco .sub__txtBox p {
		font-size: 2.8vw;
		line-height: 2.38;
		letter-spacing: 0.1vw;
	}
	#courseReco .sub__txtBox span {
		font-size: 2.3vw;
		margin-top: 0.3vw;
		letter-spacing: 0;
	}
	#courseReco .noteBox {
		margin-top: 7.8vw;
		margin-left: -1.7vw;
	}
	#courseReco .noteBox p {
		font-size: 3vw;
		margin-top: 2vw;
	}
	#courseReco .noteBox p span {
		font-size: 3vw;
		vertical-align: top;
		padding-left: 0.6vw;
		letter-spacing: 0.4vw;
	}
	#courseExample .head .inner {
		padding: 29.7vw 2.7vw 40.8vw;
	}
	#courseExample .head h3 {
		top: 6.4vw;
		font-size: 3.9vw;
		letter-spacing: 0.6vw;
	}
	#courseExample .head h3:before {
		height: 10vw;
		top: -11.4vw;
	}
	#courseExample .head img {
		box-shadow: 1.5vw 1.5vw 0.3vw 0 rgb(0 0 0 / 20%);
	}
	#courseExample .contents {
		margin-top: -52.6vw;
		background-image: url(../img/sp/menu/bg.jpg);
		padding: 22vw 0 8.6vw;
	}
	#courseExample .contents h4 {
		font-size: 4.1vw;
		letter-spacing: 0.3vw;
	}
	#courseExample .contents h4:nth-child(3) {
		padding-top: 6vw;
		letter-spacing: 1vw;
		padding-left: 2.3vw;
	}
	#courseExample .contents ul {
		font-size: 3vw;
		line-height: 2.6;
		letter-spacing: 0.2vw;
		margin: 3.1vw auto 0;
		padding-top: 2.9vw;
		width: 73vw;
	}
	#courseExample .contents ul li:before {
		width: 0.5vw;
		height: 0.5vw;
		top: -2vw;
		border-radius: 0.5vw;
	}
	#drink {
		margin: 0 calc(50% - 50vw);
		width: 100vw;
		padding-top: 16.3vw;
		padding-bottom: 13.2vw;
		padding-left: initial;
		padding-right: initial;
	}
	#drink .inner {
		padding: 0;
	}
	#drink h2 {
		font-size: 6.6vw;
		letter-spacing: 0.6vw;
		margin-bottom: 19.5vw;
	}
	#drink h3 {
		font-size: 5.1vw;
		letter-spacing: 0.3vw;
	}
	#drink .txt__open,
	#drink .txt__close {
		font-size: 2.5vw;
		letter-spacing: 0.1vw;
		margin-top: 2.2vw;
		opacity: 1;
	}
	#drink .txt__open i {
		font-size: 2.2vw;
		margin-top: 1.3vw;
	}
	#drink .txt__close {
		padding: 2.3vw 0;
		margin-bottom: 12.1vw;
		font-size: 3.2vw;
	}
	#drink div.others .txt__close {
		margin-bottom: 2vw;
	}
	#drink .txt__close::before {
		margin-top: 0.6vw;
	}
	#drink .banner {
		padding-top: 8.7vw;
		padding-bottom: 1.9vw;
		margin-bottom: 5.5vw;
		overflow: hidden;
		background-size: 100%;
	}
	#drink .banner:before {
		display: none;
	}
	#drink div.sake .banner {
		background-image: url(../img/sp/menu/sake.jpg);
	}
	#drink div.wine .banner {
		background-image: url(../img/sp/menu/wine.jpg);
	}
	#drink div.others .banner {
		background-image: url(../img/sp/menu/others.jpg);
	}
	#drink div.sake .banner.open {
		background-image: url(../img/sp/menu/sake_open.jpg);
	}
	#drink div.wine .banner.open {
		background-image: url(../img/sp/menu/wine_open.jpg);
	}
	#drink div.others .banner.open {
		background-image: url(../img/sp/menu/others_open.jpg);
	}
	#drink .accordion {
		padding-top: 9.8vw;
	}
	#drink .box {
		padding: 0 2.5vw 0 9vw;
		margin-bottom: 12.3vw;
	}
	#drink .box h4 {
		font-size: 4.3vw;
		letter-spacing: 0.3vw;
	}
	#drink .box h4 span {
		font-size: 2.3vw;
		padding-left: 3.4vw;
		letter-spacing: 0.1vw;
	}
	#drink .box h4:before {
		width: 3.8vw;
		height: 3.8vw;
		top: 0.3vw;
		left: -6.2vw;
		background-size: 100%;
	}
	#drink .box table {
		font-size: 2.7vw;
		margin-top: 0vw;
	}
	#drink .box table.inc_lines {
		margin-top: 0.2vw;
	}
	#drink .box td {
		padding: 8.4vw 0 1vw;
		line-height: 1.3;
	}
	#drink .box td:nth-of-type(1) {
		font-size: 3.1vw;
		padding-right: 5vw;
	}
	#drink .box tr.lines td:nth-of-type(n + 2) {
		line-height: 1.4;
		padding: 0 0 1vw;
	}
	#drink .box td.unit {
		width: 7.6vw;
	}
	#drink .wine .box td.unit {
		width: 18vw;
	}
	[lang="en"] #drink .others .box.is-beer td.unit {
		width: 18.6vw;
	}
	#drink .box td.amount {
		width: 9vw;
	}
	#drink .box td.price {
		width: 22vw;
	}
	#drink .memo {
		margin-top: 4vw;
		padding: 0 2.7vw;
		font-size: 2.8vw;
		letter-spacing: 0.5vw;
	}
	#drink div.others .txt__close {
		margin-bottom: 2vw;
	}

}


/*追記内容*/
[lang="en"] #courseExample .head h3,
[lang="en"] #courseExample .contents ul {
    writing-mode: horizontal-tb;
}

    /* .lang-en #courseExample .head .inner {
      padding-top: 470px;
    }

    @media screen and (max-width: 767px) {
      .lang-en #courseExample .head .inner {
        padding: 48.7vw 2.7vw 40.8vw;
      }
    }

    .lang-en .en-tax {
      padding-left: 20px;
    }

    #google_translate_element img {
      width: 50px;
    }

    @media screen and (max-width: 1279px) {
      .lang-en header .info span.spTel a {
        padding: 20px 20px;
        display: block;
      }
    }

    @media screen and (max-width: 767px) {
      .lang-en header .info span.spTel a {
        padding: 1.8vw 1.8vw 2vw;
      }
    }

    .lang-en .contents ul {
      writing-mode: initial !important;
      white-space: nowrap;
    }

    .lang-en #courseReco p:nth-of-type(3) span, #courseReco p:nth-of-type(4) span,
    .lang-zh-TW #courseReco p:nth-of-type(3) span, #courseReco p:nth-of-type(4) span,
    .lang-zh-CN #courseReco p:nth-of-type(3) span, #courseReco p:nth-of-type(4) span
    {
      vertical-align: initial;
    }
    
  
     */