@charset "utf-8";
/*--------------------------------------------

	INDIVIDUAL > TABLET

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


@media screen and (max-width:680px){
.pcv{display:none;}
.floatbn{
    width: 100%;
    z-index: 111111;
    position: fixed;
    bottom:0;
}

}
@media screen and (min-width:681px){
.spv{display:none;}
.floatbn{
    width: 5%;
    z-index: 111111;
    position: fixed;
}
}


@media all and (max-width:1280px){
	.about{
		padding-bottom: 184px;
	}
	.drink{
		padding-bottom: 150px;
	}
	.c--typo--slider-img {
    height: 100px;
	}
}
@media all and (max-width:1180px){
	.about--head{
		font-size: 36px;
	}
	.menu-plan-item-name{
		font-size: 22px;
	}
}
/*--------------------------------------------

	TABLET

--------------------------------------------*/
@media all and (max-width : 1024.9999px ) and (min-width : 684px ){
	body {
		font-size: 1.5rem;
	}
	.for_sp{
		display: none;
	}
}
@media all and (max-width : 1024.9999px ){
	.header--logo{
		width: 25vw;
	}
	.mv--text-01{
		font-size:16px;
	}
	.mv--text-02{
		font-size:35px;
	}
	.mv--slider-img{
		height: 190px;
	}
	.about--head {
    font-size: 3.5vw;
	}
	.menu{
		margin-bottom: -16vw;
	}
	.menu-plan-item-name{
		font-size:20px;
	}
	.drink{
		margin-top: 16vw;
	}
	.drink:before{
		height: 16vw;
	}
	.drink--label-part{
		font-size:20px;
	}
	.drink--note{
		font-size:21.5px;
	}
	.drink--item{
		font-size:17px;
	}
}
/*--------------------------------------------

	INDIVIDUAL

--------------------------------------------*/
@media all and (max-width : 900px) {
	.desc--limit-item{
		width: 33.33%;
	}
	.desc--limit-item:nth-child(n+4){
		margin-top: 0.4em;
	}
	.menu--plan-title{
		font-size:28px;
	}
	.menu--plan-info-label{
		font-size:16px;
		padding-left:0.8em;
		padding-right:0.8em;
	}
	.menu--plan-info-price{
		font-size:40px;
	}
	.menu--plan-info-time{
		font-size:27px;
	}
	.menu-plan-item-name{
		font-size:17px;
	}
}
@media all and (max-width : 840px) {
	.mv--slider-img{
		height: 140px;
	}
	.menu--plan-title{
		font-size:24px;
	}
}
@media all and (max-width : 820px) {
	.drink--text{
		width: 54.5%;
	}
	.drink--figure{
		width: 45.5%;
		transform: translateX(18%);
	}
	.drink--label-part{
		font-size:19px;
	}
	.drink--note{
		font-size:20px;
	}
	.drink--item{
		font-size:16px;
	}
}
@media all and (max-width : 767.9999px) {
	.menu-plan-item-name{
		font-size:15.5px;
	}
}
/*--------------------------------------------

	MOBILE

--------------------------------------------*/
@media all and (max-width : 683.9999px) {
	/*--------------------------------------------
		BASE
	--------------------------------------------*/
	:root {
		--header-height:40px;
	}
	.wrapper{
		padding-bottom: 38px;
	}
	/*--------------------------------------------
		HEADER
	--------------------------------------------*/
	.header{
		padding-top: 0px;
		padding-bottom: 7px;
		box-sizing: border-box;
		height: 40px !important;
	}
	.header--inner{
		padding-left: 2.13%;
		padding-right: 2.67%;
	}
	.header--logo{
		width: 138px;
	}
	.header--sns{
		margin-right: 0;
	}
	.header--sns-item{
		width: 27px;
	}
	.header--sns-item:nth-child(n+2){
		margin-left: 8px;
	}
	.header--btns-list{
		position:fixed;
		z-index: 10;
		width: 100%;
		left: 0;
		bottom: 0;
	}
	.header--btns-item{
		width: 50%;
	}
	.header--btns-link{
		width: 100%;
		padding: 0.784em 0.5em;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.header--btns-en{
		margin-top: 0;
		margin-left: 0.5em;
	}
	/*--------------------------------------------
		MV
	--------------------------------------------*/
	.mv{
		padding-bottom: 94px;
		margin-bottom: -43px;
	}
	.mv:before{
		height: 155px;
	}
	.mv:after{
		height: 43px;
		background-size: 673px;
		bottom: -1px;
	}
	.mv--movie{
		padding-left: 0;
	}
	.mv--movie-inner{
		padding-top: 64%;
	}
	.mv--text{
		position: relative;
		margin-top: 20px;
		padding:0 2%;
		left: 0;
		top: 0;
		width:100%;
	}
	.mv--text-01{
		margin:0 auto;
	}
	.mv--text-02{
		margin-top: 0.2em;
		width: fit-content;
		margin-left: auto;
		margin-right: auto;
	}
	.mv--text-en{
		font-size: 10px;
		line-height: 1.9;
		margin-top:1.4em;
		max-width: 100%;
	}
	.mv--slider{
		margin-top: 30px;
		position: relative;
		bottom: 0;
	}
	.mv--slider-img{
		height: 100px;
		width: auto;
	}
	
	.mv--movie-inner video{
	object-fit: cover;
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
}
	
	
	
	
	/*--------------------------------------------
		DESCRIPTION
	--------------------------------------------*/
	.desc{
		margin-top: 43px;
		padding:50px 0 56px;
	}
	.desc--info-list{
		flex-wrap:wrap;
	}
	.desc--info-item{
		width: 47.5%;
	}
	.desc--info-item:nth-child(n+2){
		margin-left: 0;
	}
	.desc--info-item:nth-child(2){
		margin-left: 5%;
	}
	.desc--info-item:nth-child(3){
		width: 100%;
		margin-top: 15px;
	}
	.desc--info-label{
		font-size: 14px;
		padding:0.27em 0.5em;
	}
	.desc--info-value{
		font-size: 17px;
	}
	.desc--limit{
		padding-top: 30px;
	}
	.desc--limit-head:before,
	.desc--limit-head:after	{
		width: 1.85em;
	}
	.desc--limit-head:before {
		left: -0.78em;
	}
	.desc--limit-head:after	{
		right: -0.78em;
	}
	.desc--limit-body{
		font-size: 16px;
		padding:1.5em 0.5em;
	}
	.desc--limit-list{
		justify-content: center;
	}
	.desc--limit-item{
		width: calc(50% - 0.375em);
	}
	.desc--limit-item:nth-child(2n+1){
		text-align: right;
	}
	.desc--limit-item:nth-child(2n){
		text-align: left;
		margin-left: 0.75em;
	}
   	.desc--limit-item:nth-child(n+3){
		margin-top: 0.4em;
	}
	/*--------------------------------------------
		ABOUT
	--------------------------------------------*/
	.about{
		padding: 50px 0 40px;
	}
	.about:before{
		width: 32%;
	}
	.about--wrap{
		padding-right: 0;
		min-height: 0;
	}
	.about--head{
		font-size: 26px;
		padding-top: 0;
	}
	.about--head-part{
		padding-right: 1.15em;
	}
	.about--figure{
		margin-top: 30px;
		position: static;
		width: 106%;
		border-top-left-radius: 30px;
	}
	.about--text{
		letter-spacing: 0.04em;
		line-height: 2.31;
		margin-top: 1.95em;
		padding-right: 0;
	}
	.about--slider{
		position: static;
		margin-top: 50px;
	}
	.c--typo--slider-img{
		height: 82px;
	}
	/*--------------------------------------------
		MENU
	--------------------------------------------*/
	.menu{
		padding-top: 56px;
		padding-bottom: 100px;
		margin-bottom: -8.19vw;
	}
	.menu--head{
	}
	.menu--head-inner{
		padding:0 5.333%;
		display: block;
	}
	.menu--title{
		width: 100%;
		display: flex;
		flex-direction: column-reverse;
		align-items: center;
		margin-top: 0;
		padding-left: 0;
	}
	.menu--title-en{
		font-size: 60px;
		writing-mode: horizontal-tb;
	}
	.menu--title-jp{
		writing-mode: horizontal-tb;
		font-size: 16px;
		letter-spacing: 0.06em;
		padding-top: 0;
		margin-left: 0;
		margin-bottom:-0.2em;
	}
	.menu--head-figure{
		width: 100%;
		border-radius: 15px;
		margin-top: 23px;
	}
	.menu--body{
		padding-top: 30px;
	}
	.menu--body:before{
		content: "";
		display: block;
		width: 100%;
		height: 175px;
		background-size: 120vw;
		top: 13px;
	}
	.menu--body-inner{
		max-width: 1080px;
	}
	.menu--plan-title{
		width: 100%;
		font-size: 24px;
		letter-spacing: 0.06em;
		background-color:transparent;
		padding:0;
		border-radius: 0;
		display: flex;
		flex-direction: column;
		align-items:center;
	}
	.menu--plan-title-part{
		display: block;
		background-color:#FFC80F;
		padding:0.125em 0.5em;
		border-radius: 1.875em;
	}
	.menu--plan-title-part:nth-child(1){
		padding-left: 1.25em;
		padding-right: 1.25em;
	}
	.menu--plan-title-part:nth-child(n+2){
		margin-top: 0.54em;
	}
	.menu--plan-info{
		margin-top: 20px;
		display: block;
	}
	.menu--plan-info-text{
		width: 100%;
		padding: 27px 20px 19px;
	}
	.menu--plan-info-label{
		font-size: 12px;
		padding:0.36em 1.15em;
	}
	.menu--plan-info-price{
		font-size: 34px;
	}
	.menu--plan-info-time{
		margin-top: 11px;
		font-size: 19px;
	}
	.menu--plan-info-figure{
		width: 100%;
	}
	.menu--plan-info-img{
		height: auto;
	}
	.menu--plan-list{
		margin-top: 50px;
	}
	.menu--plan-item{
		width: 44.8%;
	}
	.menu--plan-item:not(:nth-child(3n+1)){
		margin-left: 0;
	}
	.menu--plan-item:nth-child(2n){
		margin-left: 10.4%;
	}
	.menu--plan-item:nth-child(n+3){
		margin-top: 20px;
	}
	.menu--plan-item-figure{
		border-radius: 10px;
	}
	.menu-plan-item-name{
		font-size: 12px;
		line-height: 1.25;
		margin-top: 0.8em;
		border-left-width: 2px;
	}
	/*--------------------------------------------
		DRINK
	--------------------------------------------*/
	.drink{
		margin-top: 8.19vw;
		padding-top: 68px;
		padding-bottom: 92px;
	}
	.drink:before{
		height: 8.19vw;
	}
	.drink:after{
		padding-top: 70.8%;
		background-image:url(../images/drink--bg-bottom-sp.svg);
	}
	.c--head{
		font-size: 14px;
	}
	.c--head-en{
		font-size: 36px;
	}
	.drink--head:before{
		width: 1.21em;
		height: 1.5em;
		transform:translate(-50%,-90%);
	}
	.drink--head-ja {
		margin-top: -0.5em;
	}
	.drink--body{
		display: block;
		margin-top: 40px;
	}
	.drink--text{
		width: 100%;
	}
	.drink--label-part{
		font-size: 20px;
		letter-spacing: 0.04em;
		padding-left: 0.7em;
		padding-right: 0.7em;
	}
	.drink--label-part:nth-child(n+2){
		padding-right:0.4em;
	}
	.drink--label-part .note{
		font-size: 10px;
		letter-spacing: 0.04em;
	}
	.drink--note{
		font-size: 18px;
		margin-top: 1.16em;
	}
	.drink--list{
		margin-top: 20px;
	}
	.drink--figure{
		margin-top: 40px;
		width: 100%;
		transform: none;
	}
	.drink--slider{
		bottom: 40px;
	}
	/*--------------------------------------------
		CONTACT
	--------------------------------------------*/
	.contact{
		padding:56px 0 62px;
		background-image:url(../images/contact--bg-sp.jpg) ;
	}
	.contact--btns{
		margin-top: 30px;
		display: block;
	}
	.contact--harukas{
		margin-left: 0;
		margin-top: 1.25em;
	}
	.contact--link{
		width: 100%;
		padding:1.23em 1em;
		background-size: 0.3845em;
	}
	.contact--reserve .contact--link,
	.contact--harukas .contact--link{
		background-position:right 1.43em center;
	}
	.contact--tel{
		margin-top: 30px;
	}
	.contact--tel-value a{
		padding:0.47em 0.5em;
	}
	.contact--tel-value span{
		padding-left: 0.85em;
		background-size: 0.58em;
	}
	.contact--sns-list{
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 20px;
	}
	.contact--sns-item:nth-child(n+2){
		margin-left: 40px;
	}
	.contact--note{
		text-align: left;
		margin-top: 3.75em;
	}
	.footer--copy{
		font-size: 12px;
		letter-spacing: 0.18em;
		padding:0.86em 1em;
	}
		/*----------- ドリンク ----------------------*/
	.drink-min{
		margin-top: 58px;
		font-size: 20px;
	}
	.drink-min-value{
		margin-top: 0.7em;
		padding-bottom: 0.6em;
		width:100%;
		text-align: center;
	}
	.drink-min-value span{
		font-size: 12px;
	}
	.menu--plan-list{
		margin-top: 36px;
	}


}


<!-- ここからハンバーガーメニュー -->
/*==================================================
共通　横並びのための設定
===================================*/

.gnavi{
    display: flex;
    flex-wrap: wrap;/*スマホ表示折り返し用なのでPCのみなら不要*/
    margin:0 0 50px 0;
    list-style: none;
}

.gnavi li a{
    display: block;
    padding:0;
    text-decoration: none;
    color: #333;
}

.gnavi li{
    margin-bottom:20px;
}

/*==================================================
　5-3-6 左から右に線が伸びて背景になる
===================================*/

/*背景の設定*/

.gnavi li a{
    /*背景色の基点とするためrelativeを指定*/
	position: relative;
    /*アニメーションの指定*/
	transition: all .7s;
}

.gnavi li a::after {
	content: '';
    /*絶対配置で線の位置を決める*/
	position: absolute;
	z-index: -1;
	bottom: 0;
	left: 0;
    /*背景の形状*/
	width: 0;
	height: 1px;
	background:#0481A2;
	opacity: 0;/*はじめは透過を0に*/
}

/*現在地とhoverの設定*/
.gnavi li.current a::after,
.gnavi li a:hover::after {
    /*背景の形状*/
	width: 100%;
	opacity: 1;
    /*アニメーションの指定*/
	animation:bgappear 0.5s forwards;
}

/*アニメーションで線を伸ばして背景をつける*/
@keyframes bgappear{
  0% {
    width: 0%;
    height: 1px;
  }
  50% {
    width: 100%;
    height: 1px;
  }
  100% {
    width: 100%;
    height: 100%;
    background: #0481A2;
  }
}

/*現在地とhoverの設定*/
.gnavi li.current a,
.gnavi li a:hover{
  	color: #fff;
    /*テキストを最前面へ*/
	z-index: 1;
}




.header{
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100px;
}
.header_inner {
  position: relative;
  padding: 15px;
}
.logo{
  position: absolute;
  top: 0;
  left: 0;
  padding: 10px 15px
}
.title{
  font-size: 2rem;
  font-weight: 600;
}

/* header固定のため余白をつける。メニューのCSSには関係ない */
.main{  
  margin-top: 60px;
}
.header--logo-img{
width:58%;
}
@media only screen and (max-width: 768px) {
.header--logo-img{
width:70%;
}

.logo{
  position: absolute;
  top: 0;
  left: 0;
  padding: 0px 15px
}
  .nav {
    position: fixed;
    right: -320px; /* 右から出てくる */
    top: 0;
    width: 300px; /* スマホに収まるサイズ */
    height: 100vh;
    padding-top: 60px;
    background-color: lightskyblue;
    transition: all .6s;
    z-index: 200;
    overflow-y: auto; /* メニューが多くなったらスクロールできるように */
  }
  .hamburger {
    position: absolute;
    right: 15px;
    top: 0px;
    width: 40px; /* クリックしやすい幅 */
    height: 40px; /* クリックしやすい高さ */
    cursor: pointer;
    z-index: 300;
  }
  .nav_list {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .nav_item {
    text-align: left;
    padding: 0 14px;
  }
  .nav_item a {
    display: block;
    padding: 8px 0;
    border-bottom: 1px solid #eee;
    text-decoration: none;
    color: #333;
  }
  .nav_item a:hover {
    background-color: #eee;
  }
  .hamburger_border {
    position: absolute;
    left: 11px;
    width: 30px;
    height: 2px;
    background-color: #fff;
    transition: all .6s;
  }
  .hamburger_border_top {
    top: 14px;
  }
  .hamburger_border_center {
    top: 20px;
  }
  .hamburger_border_bottom {
    top: 26px;
  }
  .black_bg {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: 100;
    background-color: #333;
    opacity: 0;
    visibility: hidden;
    transition: all .6s;
    cursor: pointer;
  }

  /* 表示された時用のCSS */
  .nav-open .nav {
    right: 0;
  }
  .nav-open .black_bg {
    opacity: .8;
    visibility: visible;
  }
  .nav-open .hamburger_border_top {
    transform: rotate(45deg);
    top: 20px;
  }
  .nav-open .hamburger_border_center {
    width: 0;
    left: 50%;
  }
  .nav-open .hamburger_border_bottom {
    transform: rotate(-45deg);
    top: 20px;
  }
}/* sp */

@media only screen and (min-width: 769px) {
  .header_inner{
    max-width: 1130px;
    width: 100%;
    padding: 18px 30px;
    margin-left: auto;
    margin-right: auto;
  }
  .logo{
    padding: 30px 0
  }
  .nav_list{
    text-align: left;
    margin-left:100px;
  }
  .nav_list li{
    display: inline-block;
    text-align: right;
    padding-left: 20px;
  }
  .nav_list li a{
    color: #fff;
    font-weight: 600;
  }
}/* pc */