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

/*---------------------------Loading------------------------------------*/

/*       初期背景。動きなし。
.loader-bg {
  align-items: center;
  background-image: url("../images/lording_dinner_bg.jpg");
  background-repeat: no-repeat;
  background-size: cover;           
  background-position: center;
  display: flex;
  height: 100vh;
  justify-content: center;
  left: 0;
  position: fixed;
  top: 0;
  width: 100vw;
  z-index: 9999;
}
*/

.loader-bg {
  animation: slideBg 4s linear infinite;
  background-image: url("../images/lording_dinner_bg_04.jpg");
  background-repeat: no-repeat;
  background-size: 120% auto; 
  background-position: 50% 100%; 
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden; /* はみ出しを隠す */
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}

@keyframes slideBg {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}


@media screen and (max-width: 1200px) {
  .loader-bg {
    background-size: 200% auto; 
    background-position: 100% 50%;
  }
}


@media screen and (max-width: 880px) {
  .loader-bg {
    background-size: 200% 100%; 
    background-position: 100% 50%;
  }
}

@media screen and (max-width: 500px) {
  .loader-bg {
    background-size: 230% 100%; 
    background-position: 100% 50%;
  }
}


.loading-img {
  animation: swingRotate 1.5s ease-in-out infinite;
  max-width: 15%;
  display: block;
  margin: 0 auto;
}
.loader {
  display: flex;
  flex-direction: column;
  justify-content: center; /* 横中央 */
  align-items: center;     /* 縦中央 */
  height: 100vh;           /* 画面全高 */
}

@keyframes swingRotate {
  0%, 100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(5deg);
  }
  75% {
    transform: rotate(-5deg);
  }
}

.loader p {
  font-family: 'Cabin Sketch', cursive;
  color:rgba(225,99,2,1.00);
}


/*---------------------------menuギャラリー------------------------------------*/
/*==================================================
スライダーのためのcss
===================================*/
/*画像の横幅を100%にしてレスポンシブ化*/
.menu-gallery img{
	width: 100%;
	height: auto;
	vertical-align: bottom;/*画像の下にできる余白を削除*/
}

/*メイン画像下に余白をつける*/

.gallery{
	margin:0 0 5px 0;
}

.gallery li{
list-style:none;
}

/*矢印の設定*/

/*戻る、次へ矢印の位置*/
.slick-prev, 
.slick-next {
    position: absolute;/*絶対配置にする*/
	z-index: 3;
    top: 42%;
    cursor: pointer;/*マウスカーソルを指マークに*/
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    border-top: 3px solid #81cad7!important;/*矢印の色*/
    border-right: 3px solid #81cad7!important;/*矢印の色*/
    height: 25px;
    width: 25px;
}
.choice-btn li  {
  width: 20%!important;
}

.slick-prev {/*戻る矢印の位置と形状*/
    left:2.5%;
    transform: rotate(-135deg)!important;
}

.slick-next {/*次へ矢印の位置と形状*/
    right:2.5%;
    transform: rotate(45deg)!important;
}
.slick-next:before {
  display: none;
}
.slick-prev:before {
  display: none;
}

/*選択するサムネイル画像の設定*/

.choice-btn li{
	cursor: pointer;
	outline: none;
	background:#fff;
	width:25%!important;
list-style:none;
}

.choice-btn li img{
	opacity: 0.6;/*選択されていないものは透過40%*/
}

.choice-btn li.slick-current img{
	opacity: 1;/*選択されているものは透過しない*/
}

.choice-btn .slick-track {
	transform: unset !important;/*画面幅サイズ変更に伴うサムネイル固定*/
}

/*---------------------------タブMENU------------------------------------*/
/*tabの形状*/
.tab{
	display: flex;
	flex-wrap: wrap;
}
.tab li a{
	display: block;
/*	background:rgba(255,179,215,0.70);*/
	margin-right: 5px;
	padding:10px 20px;
  color:rgba(156,0,82,1.00);
  font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	line-height: 1.6;
}
/*liにactiveクラスがついた時の形状*/
/*
.tab li.active a{
	background:rgba(255,219,235,0.70);
}
*/


/*エリアの表示非表示と形状*/
.area {
	display: none;/*はじめは非表示*/
	opacity: 0;/*透過0*/
	background: rgba(255,255,238,0.9);
	padding:50px 20px;
}

/*areaにis-activeというクラスがついた時の形状*/
.area.is-active {
    display: block;/*表示*/
    animation-name: displayAnime;/*ふわっと表示させるためのアニメーション*/
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

@keyframes displayAnime{
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
/*-----------------------------------------d_menu----------------------------------------------*/