@charset "UTF-8";
/* CSS Document */
/*フォント読み込み*/
@font-face {
	font-family: 'title';
	src: url('../font/kano.otf');
}
@font-face {
	font-family: 'sub';
	src: url('../font/sub.ttf');
}
/*メインブルー:#02A1D1*/
/*くすんだブルー:#659dbd*/
/*===================
文字設定
=====================*/
.tex-blue{color:#659dbd;}
.tex-trance-blue{color:rgba(2,161,209,0.8);}
.link-blue:hover{color:#02A1D1 !important;}
.font-sub{font-family: 'sub', sans-serif;}
.font-title{
	font-family: 'title', sans-serif;
	padding-bottom:0;
	display:inline-block;
	line-height:1;
	margin-bottom:1em;
}
/*縁取り文字*/
.stroked-white {
	color:rgba(255,255,255,.5);
  -webkit-text-stroke: 1px #000;
}
.stroked-black {
  color:rgba(0,0,0,.5);
  -webkit-text-stroke: 1px #fff;
}
/*リフレクト文字*/
.reflect{/*below -20pxで文字からの距離決める*/
	-webkit-box-reflect: below -20px -webkit-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0) 50%,rgba(0,0,0,0.15));
}
/*BIG-TITLE*/
.big-wrap{
	position:relative;
	overflow:hidden;
	width:100% !important;
	min-height:200px;
}
.big-title{
	box-sizing: border-box;
	font-size:8em;
	color:#000;
	white-space:nowrap;
	line-height:1.1;
	margin-left:20px;
}
@media screen and (max-width: 991px) {
.big-wrap{min-height:80px;}
.big-title{
	font-size:3.5em;
	text-align:center;
	margin-left:0;
}
}
/*使用例
<div class="big-wrap">
<h1 class="big-title reflect font-anton"><span class="stroked-white">LUNCH</span> MENU</h1>
</div>
*/

/*-------------------------
縦文字
---------------------------*/
.vertical-overlay{
	position:absolute;
	bottom:0;
	right: 0;
	height:100%;
	width:auto;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	transform-origin:center center;
	white-space:nowrap;
	padding:0.5em;
}
.vertical-text{
	transform-origin: 0 0;
	writing-mode: vertical-rl;
	width: 100%;
}
.vertical-text-line{
	transform-origin: 0 0;
	writing-mode: vertical-rl;
	display:block;
	position:relative;
	height:280px;
	font-size:1em;
	font-weight:100;
}
.vertical-text-line::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 1px;
  height: 80px;
  margin: auto;
  background-color:rgba(255,255,255,.8);
}

/*-------------------------
背景設定
---------------------------*/
.bg-black{background-color:#000;}
.bg-black2{background-color:#222;}
.bg-trance-blue{background-color:rgba(2,161,209,0.8);}
.bg-main{background-color:#6C9;}/*メインになるカラー*/
.bg-half-bottom{background:linear-gradient(transparent 0%,transparent 60%,#F3F1EB 60%,#F3F1EB 100%);}/*横*/
.bg-half-v{background:linear-gradient(90deg,#F3F1EB 0%,#F3F1EB 20%,#000 20%,#000 100%);}/*縦*/
.bg-trance-black{background-color:rgba(0,0,0,.8) ;}
.bg-trance-white{background-color:rgba(255,255,255,.7) ;}
/*斜め背景*/
.bg-tilt {
  position: relative;
  z-index: 0;
}
/*斜め背景*/
.bg-tilt::after{
  content: '';
  position: absolute;
  left:0;
  top: 0;
 
  /*傾ける角度*/
  transform: skewY(-3deg);
  transform-origin: bottom left;
 
  z-index: -1 !important;
  width:100%;
  height:100%;
  background:#F3F1EB;
}
bg.black{background-color:#000;}
/*-------------------------
---------------------------
見出し設定
---------------------------
---------------------------*/
/*下線と三角*/
.headline-triangle {
     text-align: center;
}
 
.headline-triangle span{
     position: relative;
	 /*文字幅に合わせる場合
     display: inline-block;
	 */
	 display:block;
     padding-bottom:-3em;
     border-bottom: 1px solid black;
}
      
.headline-triangle span::before,
.headline-triangle span::after {
     position: absolute;
     top: 100%;
     left:50%;
     transform:translateX(-50%);
     content: '';
     border: 20px solid transparent;
}
 
.headline-triangle span::before {
     border-top: 20px solid black;
}
 
.headline-triangle span::after {
     margin-top: -1px;
     border-top: 20px solid #fff;/*背景色と合わせる*/
}
/*使い方
<h1 class="headding-triangle">
<span class="font-mont tex-weight400">Lunch Menu</span>
</h1>*/

/*縦ライン*/
.v-line-title {
  position: relative;
  display: inline-block;
  font-size: 1.3em;
  height: 150px;
  line-height: 150px;
}

.v-line-title::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 2px;
  height: 50px;
  margin: auto;
  background-color: rgba(0,0,0,.3);
}
/*使用例
<h1 class="v-line-title">TITLE TEXT</h1>
*/
/*左側に縦ライン*/
.headline-v-left {
  padding: 0.1em 0.5em;/*上下 左右の余白*/
  color: #494949;
  background: transparent;
  border-left: solid 5px #666;
}
/*使用例
<h2 class="headding-line">TITLE TEXT</h2>
*/
/*-------------------------
左側に短いライン
---------------------------*/
.headline-left {
  position: relative;
  display: inline-block;
  padding: 0 20px;
}

.headline-left:before{
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 15px;
  height: 2px;
  border-top: solid 3px #8B1338;
  left:0;
  border-radius:2px;
}
/*使用例
<h3 class="headline-left">TITLE TEXT</h3>
*/
/*-------------------------
カギ括弧見出し
---------------------------*/
.headline-kacco {
  position: relative;
  line-height: 1.4;
  padding:0.25em 1em;
  display: inline-block;
  top:0;
}

.headline-kacco:before, .headline-kacco:after { 
  position: absolute;
  top: 0;
  content:'';
  width: 8px;
  height: 100%;
  display: inline-block;
}
.headline-kacco:before {
  border-left: solid 1px black;
  border-top: solid 1px black;
  border-bottom: solid 1px black;
  left: 0;
}
.headline-kacco:after {
  content: '';
  border-top: solid 1px black;
  border-right: solid 1px black;
  border-bottom: solid 1px black;
  right: 0;
}
/*使用例
<h4 class="headline-kacco">TITLE TEXT</h4>
*/
/*下に短いボーダー*/
.headline-under {
  position: relative;
  display: inline-block;
  margin-bottom: 1em;
}
.headline-under:before {
  content: '';
  position: absolute;
  bottom: -15px;
  display: inline-block;
  width: 60px;
  height: 5px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: black;
  border-radius: 2px;
}
/*両脇に斜めのライン*/
.headline-slanting {
  position: relative;
  display: inline-block;
  padding: 0 45px;
}
.headline-slanting:before, .headline-slanting:after {
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 44px;
  height: 2px;
  background-color: black;
  -webkit-transform: rotate(-60deg);
  transform: rotate(-60deg);
}
.headline-slanting:before {
  left:0;
}
.headline-slanting:after {
  right: 0;
}
/*両端に横ライン*/
.headline-both {
  position: relative;
  display: inline-block;
  padding: 0 80px;
}
.headline-both:before, .headline-both:after {
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 45px;
  height: 1px;
  background-color: black;
}
.headline-both:before {
  left:0;
}
.headline-both:after {
  right: 0;
}
/*2色ボーダー*/
.headline-2color {
  border-bottom: solid 1px #eee;
  position: relative;
  padding-bottom:0.3em;
}
.headline-2color:after {
  position: absolute;
  content: " ";
  display: block;
  border-bottom: solid 1px #C00;
  bottom: -1px;
  width: 20%;
}
.headline-2color span{
	font-size:0.6em;
	color:#ccc;
	padding-left:1em;
}
/*下に三角のフルワイドの境目*/
.balloon-section {
  position: relative;
  display: inline-block;
  min-width: 100%;
  max-width: 100%;
  text-align:center;
  margin-bottom:2em;
  color:#fff;
  background:linear-gradient(#000,#333);/*背景の色*/
}

.balloon-section:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -30px;
  border: 30px solid transparent;
  border-top: 30px solid #333;/*三角の色*/
}
/*-------------------------
カードの設定
---------------------------*/
/*card-bodyを吹き出し*/
.card-balloon {
  position: relative;
  display: inline-block;
  margin:0 !important;
  padding: 25px 15px;
  min-width: 120px;
  max-width: 100%;
  background-color:#fff;
}

.card-balloon:before {
  content: "";
  position: absolute;
  top: -30px;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-bottom: 15px solid #fff;
}
/*カードのhover時に上に上がる*/
.hover-up{
	transition: all 1s ease;
}
.hover-up:hover{transform:translateY(-10px);}
/*-------------------------
トップカルーセルカスタマイズ
---------------------------*/
.carousel-indicators{bottom:10%;}
.carousel-indicators li {
  width: 10px;
  height: 10px;
  border-radius: 100%;
}
.carousel-caption{
  top: 50% !important;
  left: 50% !important;
  text-align:center;
  margin:0;
  padding:0;
  width:100%;
  height:auto;
  transform: translate(-50%,-50%);
}
.carousel-caption h2{
    animation-fill-mode: both;
	animation-name:CaptionFade;
	animation-duration: 1.2s;
	font-size:7em !important;
	white-space:nowrap;
}
@media screen and (max-width: 991px) {
.carousel-caption h2{font-size:3.0em !important;}
}
.carousel-caption p{
    animation-fill-mode: both;
	animation-name:CaptionFade-right;
	animation-duration: 1.6s;
}
@keyframes CaptionFade {
from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
}

to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
}
@keyframes CaptionFade-right {
from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
}

to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
}
/*矢印*/
.carousel-control-prev-icon-custom{
	border-bottom: solid 4px #000;
	border-left: solid 4px #000;
	width: 24px;
	height: 24px;
	transform: rotate(45deg);
}
.carousel-control-next-icon-custom{
	border-top: solid 4px #000;
	border-right: solid 4px #000;
	width: 24px;
	height: 24px;
	transform: rotate(45deg);
}
/*--------------------
gallery用
-----------------------*/
.gallery,.gallery-blue,.video-gallery {
	position: relative;
	width: 100%;
	display: block;
	overflow: hidden;
	z-index: 0;
	cursor:pointer;
}
.gallery:after {/*overlay*/
	position: absolute;
	top: 0;
	left: 0;
    right: 0;
    bottom: 0;
    content: '';
    background: rgba(0,0,0, .8);
    opacity: 1;
    z-index: 1;
    transition: all 0.3s ease;
}
.gallery-blue:after {/*overlayブルー*/
	position: absolute;
	top: 0;
	left: 0;
    right: 0;
    bottom: 0;
    content: '';
    background:rgba(0,24,66,0.8);
    opacity: 1;
    z-index: 1;
    transition: all 0.3s ease;
}
.video-gallery:after {/*overlayブルー*/
	position: absolute;
	top: 0;
	left: 0;
    right: 0;
    bottom: 0;
    content: '';
    background:rgba(0,24,66,0.8);
    opacity: 1;
    z-index: 1;
    transition: all 0.3s ease;
	pointer-events: none;
	border-radius:50%;
}
.gallery img,.gallery-blue img {
    transform: scale(1);
    z-index: -1;
    transition: all 0.6s ease;
	filter: grayscale(0.8);
}
.video-gallery img{
	z-index: -1;
    transition: all 0.6s ease;
	border-radius:50%;
}
.video-gallery .title-text{
	position: absolute;
    top: 50%;
    left: 50%;
	transform:translate(-50%,-50%);
    opacity: 1;
    z-index: 2;
    transition: all 0.6s ease;
	color: rgba(255, 255, 255, 0.8);
	text-align:center;
	width:90%;
}
.video-gallery:hover .title-text,
.video-gallery:focus .title-text{
	top:-10px;
	opacity:0;
}
.video-gallery:hover:after, .video-gallery:focus:after{
	opacity:0.6;
}
.video-gallery .play-btn{
	opacity:0;
	position:absolute;
	top:0;
	left:50%;
	transform:translateX(-50%);
	transition: all 0.6s ease;
	color:#900;
}
.video-gallery .play-btn:hover{color:#000;}
.video-gallery:hover .play-btn,
.video-gallery:focus .play-btn{
	opacity:1;
	top:50%;
	transform:translate(-50%,-50%);
}
.gallery .text,.gallery-blue .text {
    position: absolute;
    top: 20px;
    left: 15px;
    opacity: 1;
    z-index: 2;
    transition: all 0.6s ease;
	color: rgba(255, 255, 255, 0.8);
	white-space:nowrap;
}
.gallery:hover .text, .gallery:focus .text, 
.gallery-blue:hover .text, .gallery-blue:focus .text{
    opacity: 0;
    top:-15px;
}
.gallery .text2,.gallery-blue .text2 {
	position: absolute;
    top: 50%;
    left: 50%;
	transform:translate(-50%,50%);
    opacity: 1;
    z-index: 2;
    transition: all 0.6s ease;
	color: rgba(255, 255, 255, 0.8);
	transform-origin: 0 0;
	writing-mode: vertical-rl;
	white-space:nowrap;
	text-orientation: upright;
	-webkit-text-orientation: upright;
}
.gallery:hover .text2, .gallery:focus .text2,
.gallery-blue:hover .text2, .gallery-blue:focus .text2 {
    opacity: 0;
    left: -15px;
}
.gallery .icon, .gallery-blue .icon {/*クリック*/
    position: absolute;
    top: -50px;
    right: 2em;
    width: 50px;
    height: 50px;
	line-height:50px;
	text-align:center;
    bordeR: 1px solid #fff;
    transform: translateY(-50%);
    border-radius: 50%;
    transition: all 0.6s ease;
    opacity: 0;
    z-index: 2;
	color: #fff;
	font-size: 20px;
}
.gallery:hover .icon, .gallery:focus .icon,
.gallery-blue:hover .icon, .gallery-blue:focus .icon {
    top: 50px;
    opacity: 1;
}
.gallery .profile,.gallery-blue .profile{
	position:absolute;
	bottom:-100%;
	width:100%;
	background:rgba(0,0,0,.7);
	padding:5px;
	opacity:0;
	transition: all 0.6s ease;
	overflow:scroll;
}
.gallery:hover .profile, .gallery:focus .profile,
.gallery-blue:hover .profile, .gallery-blue:focus .profile{
	opacity:1;
	bottom:0;
}
.gallery:hover:after, .gallery:focus:after,
.gallery-blue:hover:after, .gallery-blue:focus:after{
	opacity:0.6;
}
.gallery:hover img, .gallery:focus img,
.gallery-blue:hover img, .gallery-blue:focus img {transform: scale(1.1);}
/*--------------------
テーブル
-----------------------*/
table {width:100%;}
.table-res tr {
	border-bottom:1px solid rgba(0,0,0,0.15);
}
.table-res th{
	padding:10px;
	font-size:1em;
	border-right:5px solid rgba(0,0,0,0.15);
	width:40%;
}
.table-res td {
	padding: 10px 20px 10px 20px ;
}
.first{border-top:1px solid rgba(0,0,0,0.15) !important;}
@media screen and (max-width: 992px) {
.last{
    width: 100%;
}
.table-res tr {border-bottom:none !important;}
.table-res {
    width: 100%;
	text-align:center;
}
.first{border-top:none !important;}
.table-res th{
	display: block;
    width: 100%;
	border:none !important;
	background-color:#fbf7ed;
}
.table-res td {
    width: 100%;
	text-align: center;
	display: inline-block;
  }
}

/*--------------------
テキストマスク設定
-----------------------*/
.backdrop,.backdrop2 {
	background:url("../img/top-img.jpg") center center / cover no-repeat fixed;
	margin: auto;
	width: 100%;
	object-fit: cover;
	height: 100vh;
}

@media screen and (max-width: 991px) {
.backdrop {
	background:url("../img/top-img-sm.jpg")center center / cover no-repeat;
	object-fit: cover;
	/*position: -webkit-sticky;
	position: sticky;
	display: flex;*/
	width:100%;
	height: 100vh;
	top:0;
	left:0;
	z-index:-1;
}
.backdrop2 {
	background:url("../img/top-img-sm.jpg");
	background-position:center;
	background-repeat:no-repeat;
	background-size:cover;
	object-fit: cover;
	width:100%;
	height: 100vh;
	top:0;
	left:0;
}
}
.mask-text {
	font-family: 'Anton', sans-serif;
	font-size:5em;
	line-height:1.1;
	width:100%;
	padding-right:20px !important;
	text-align:right;
	overflow:hidden !important;
	display: flex;
    align-items: center;
    justify-content: flex-end;
	color:rgba(2,161,209,0.8);
	mix-blend-mode:multiply;
	background-color: rgba(0,0,0,0.9);
	height:100vh;
}

.mask-right-back {/*セクション1の左背景色*/
	background-color: rgba(0,0,0,0.7);
	display: flex;
    align-items: center;
    justify-content: flex-end;
	height:100vh;
}
.mask-right-back2 {/*セクション2の右背景色*/
	background:#659dbd;
	height:100vh;
	position:relative;
}
.mask-right-back2 .inner{
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	width:80%;
	position:absolute;
}
.mask-right-back .inner{
	padding-right:30px;
}