/*
****************************************
 common
*****************************************
*/

section h2 {
    text-align: center;
    font-family: copperplate, serif;
    font-weight: bold;
    font-size: 25px;
    font-size: clamp(15px, 3vw, 25px);
    color: #fff;
    opacity: .4;
}
section h3 {
    font-family: ryo-display-plusn, serif;
    font-size: 18px;
    font-size: clamp(15px, 3vw, 18px);
}

/* navメニューのTOP お知らせ内は表示する */
.news-block {
    display: none;
}

/*
****************************************
 loading
*****************************************
*/
/* Loading背景画面設定　*/
#splash {
    /*fixedで全面に固定*/
      position: fixed;
      width: 100%;
      height: 100%;
      z-index: 999;
      background:#333;
      text-align:center;
      color:#fff;
    }
    
    /* Loading画像中央配置　*/
    #splash_logo {
        font-family: copperplate, serif;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    
    /* Loading アイコンの大きさ設定　*/
    #splash_logo img {
      width:100px;
    }
    
    /* fadeUpをするアイコンの動き */
    .fadeIN{
    animation-name: fadeINAnime;
    animation-duration:0.5s;
    animation-fill-mode:forwards;
    opacity: 0;
    }
    
    @keyframes fadeINAnime{
      from {
        opacity: 0;
      }
    
      to {
        opacity: 1;
      }
    }
/*
****************************************
 fadeInAnime(top読み込まれてから表示)
*****************************************
*/
    .visitfadeIn {
        animation-delay: 3s;
      }
/*
****************************************
 MV
*****************************************
*/
.mv {
    width: 100%;
    position: relative;
}

.left_wrap img, .right_wrap img {
    filter: brightness(50%);
}
.mv_wrap {
    display: flex;
  }
  .mv_logo {
    position: absolute;
    width: 40%;
    max-width: 242px;
    top: 5%;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    z-index: 99;
}
  .left_wrap, .right_wrap {
    width: 50%;
    height: 100vh;
    position: relative;
  }
  .left_wrap img, .right_wrap img {
    height: 100vh;
  }
  @media screen and (max-width:678px) {
    .mv_wrap {
        display: block;
    }
    .left_wrap, .right_wrap {
        width: 100%;
        height: inherit;
      }
    
      .left_wrap img, .right_wrap img {
        height: 49.8vh;
      }
  }
/*
****************************************
 MV YOUTUBE
*****************************************
*/
/*header設定*/

/* youtube設定 */
.MV {
	width: 100%;
	height: 100vh;
	position: relative;
	overflow: hidden;
	
}
#youtube-area{
	position: fixed;
    z-index: 1;/*最背面に設定*/
    top: 0;
    right:0;
    left:0;
    bottom:0;
    overflow: hidden;
 	opacity: 0;
	opacity: .8;
	
}

/*jQueryで付与されたappearクラスがついたらYoutubeエリアをふわっと表示*/
#youtube-area.appear {
	animation-name:PageAnimeAppear;
	animation-duration:.5s;
	animation-fill-mode:forwards;
}

@keyframes PageAnimeAppear{
	0% {
	opacity: 0;
	}
	100% {
	opacity: 1;
}
}

#youtube {
/*天地中央配置*/
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
/*縦横幅指定*/
  width: 177.77777778vh; /* 16:9 の幅→16 ÷ 9＝ 177.77% */
  height: 56.25vw; /* 16:9の幅 → 9 ÷ 16 = 56.25% */
  min-height: 100%;
  min-width: 100%;
}

/*youtubeがクリックされないためのマスク*/
#youtube-mask{
    position: absolute;
    z-index: 2;/*下から2番目に表示*/
    top:0;
    width:100%;
    height: 100%;
	background-color: rgba(0,0,0,0.4);
}

#div.ytp-spinner {
	display: none;
}
/*下のコンテンツ*/
.container-hideout{
    position: relative;/*relativeを指定してfixed指定をした#youtube-areaの上に表示*/
    z-index: 3;/*一番上に表示*/
    /*見た目の調整*/
	background:#000;
	padding-bottom: 120px;
}












  /* slick slider */
  #imgslide01, #imgslide02 {
    height: 100vh;
    filter: brightness(60%);
  }
  .colorslide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .slide-color {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    background-color: #8B7E74; /* 初期の背景色 */
    opacity: 0;
    transition: height 1s, opacity 1s;
  }
  #colorslide2 .slide-color {
    bottom: inherit;
    top: 0;
    background-color: #CDBBA7; /* 初期の背景色 */
  }
  @media screen and (max-width:678px) {
    .mv_wrap {
        display: block;
    }
    .left_wrap, .right_wrap {
        width: 100%;
        height: inherit;
      }
    
      /* slick slider */
      #imgslide01, #imgslide02 {
        height: 49vh;
      }
  }
/* MV動きswiper使用 */
/* @media screen and (max-width:678px) { 
    .mainVisual {
        display: block;
    }
}
.swiper-container01 {
    width: 100%;
    height: 100vh;
    margin: 0 auto;
    overflow: hidden;
}
.swiper-container02 {
    width: 100%;
    height: 100vh;
    margin: 0 auto;
    overflow: hidden;
}
@media screen and (max-width:678px) {
    .swiper-container01 {
        height: 250px;
    }
    .swiper-container02 {
        height: 250px;
    }
}

.mv_logo {
    position: absolute;
    width: 40%;
    max-width: 242px;
    top: 5%;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    z-index: 99;
} */






/*
****************************************
 about
*****************************************
*/
.about01 {
    width: 100%;
    margin: 0px auto 0;
    padding: 120px 0 280px;
    background: url(../images/about_bg.png) no-repeat;
    background-size: cover;
    background-position: bottom;
}
/* NEWS */
.news_wrap {
    width: 90%;
    max-width: 1040px;
    margin: 0 auto;
}
.news_wrap > h2 {
    opacity: 1;
    font-size: 20px;
    font-size: clamp(16px, 3vw, 20px);
}
.news_wrap ul {
    margin: 20px auto;
    padding: 20px 0;
    border-top: solid #b3b3b3 1px;
    border-bottom: solid #b3b3b3 1px;
}
.news_wrap ul li {
    width: 95%;
    margin: 0 auto;
    line-height: 2.5;
}
.news_wrap ul li span {
    font-size: 15px;
    font-size: clamp(13px, 3vw, 15px);
    color: #b3b3b3;
    padding-right: 60px;
}
.viewmore_btn {
    text-align: right;
}
@media screen and (max-width:467px) {
    .news_wrap ul {
        padding: 30px 0;
    }
    .news_wrap ul li {
        line-height: 1.5;
    }
    .news_wrap ul li span {
        display: block;
        padding-right: 0px;
    }
    .news_wrap ul li+li {
        margin-top: 20px;
    }
}

/* ABOUT */
.about_wrap {
    width: 90%;
    max-width: 1300px;
    margin: 20px auto 0;
    padding: 180px 0 0;
    text-align: center;
}
.about_wrap h3 {
    margin: 30px auto;
}
@media screen and (max-width:580px) {
    .about01 {
        background: inherit;
        
        padding: 50px 0 0;
    }
    .about_wrap {
        width: 100%;
        background: url(../images/about_bg02.png) no-repeat;
        background-position: center bottom;
        background-size: cover;
        margin: 0 auto;
        text-align: left;
        padding: 0 0 360px;
        margin-top: 50px;
    }
    .about_wrap h2, .about_wrap h3, .about_wrap p {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
    }
    .about_wrap h2, .about_wrap h3 {
        text-align: left;
    }
    .about_wrap h3 {
        margin: 10px auto 15px;
    }
}
.about_br01 {
    display: none;
}
@media screen and (max-width:480px) {
    .about_br {
        display: none;
    }
    .about_br01 {
        display: block;
    }
}



/*
****************************************
 MENU
*****************************************
*/
.menu {
    width: 100%;
    margin: -120px auto 0;
}
.menu_wrap {
    width: 90%;
    max-width: 1560px;
    margin: -150px 0 0 auto;
    display: flex;
    align-items: center;
    gap: 100px;
}
/* MENU contents */
.menu_box {
    width: 60%;
}
.menu_box h2 {
    text-align: left;
}
.menu_box > .hideout-btn {
    margin-top: 20px;
}
.allmenu_btn {
    text-align: right;
}
.allmenu_btn_sp {
    display: none;
}

@media screen and (max-width: 950px) {
    .menu_wrap {
        width: 100%;
        margin-top: 60px;
        flex-wrap: wrap;
        gap: 40px;
    }
    .menu_box {
        width: 90%;
        margin: 0 auto;
    }
    .allmenu_btn {
        display: none;
    }
    .allmenu_btn_sp {
        width: 90%;
        display: block;
        text-align: right;
        margin: 3% auto 0;
    }
}
@media screen and (max-width: 950px) {
    .allmenu_btn_sp a {
        margin-left: 30px;
    }
}
/* MENU swiper */
.swiper-menu {
    height: 660px;
    margin-inline: auto;
  }
  .swiper-slide img {
    height: 100%;
  }
  @media screen and (max-width: 950px) {
    .swiper-menu {
      height: 61vw;
      overflow: visible;
      padding: 0 3.2rem;
    }
  }
  /* MENU swiper dots */
.swiper-menu_container {
    position: relative;
    width: 100%;
}
.swiper-pagination {
    width: 60%;
    max-width: 800px;
    left: -26px !important;
    top: inherit !important;
    bottom: 0 !important;
    transform: inherit !important
  }
.swiper-pagination-bullet {
    background-color: #fff;
    margin: var(--swiper-pagination-bullet-vertical-gap, 11px) 0 !important;
  }
  .swiper-pagination-bullet-active {
    background-color: #710322 ;
  }
  @media screen and (max-width: 950px) {
    .swiper-menu_container {
        width: 90%;
        margin: 0 0 0 auto;
        overflow: hidden;
    }
  }
  @media screen and (max-width: 950px) {
    .swiper-menu_container {
        width: 100%;
        position: relative;
    }
    .swiper-pagination {
        left: inherit !important;
        position: inherit !important;
        margin: 8px auto 0;
    }
    .swiper-pagination-bullet {
        margin: var(--swiper-pagination-bullet-vertical-gap, 0) 4px !important;
      }
  }


/*
****************************************
 DRINK
*****************************************
*/
#drink {
    width: 100%;
    margin: 100px auto 0;
}
.drink_wrap {
    margin-bottom: 120px;
    padding: 380px 0;
    background: url(../images/drink_bg.png) no-repeat;
    background-size: cover;
    background-position: bottom;
}
.drink_box {
    max-width: 880px;
    margin: 0 0 0 auto;
}
.drink_box h2 {
    text-align: left;
}
.slider-photo li {
    max-width: 380px;
    margin: 0 15px;
}
  .slider-photo li img {
    aspect-ratio: 11 / 7;
}
@media screen and (max-width: 1350px) {
    .drink_wrap {
        padding: 100px 0 450px;
    }
    .drink_box {
        width: 90%;
        margin: 0 auto;
    }
  }
@media screen and (max-width: 950px) {
    #drink {
        margin-top: 120px;
    }
    .drink_wrap {
        padding: 0 0 380px;
        margin-bottom: 0;
    }
    .slider-photo {
        display: none;
    }
    
  }
  @media screen and (max-width: 580px) {
    .drink_wrap {
        padding-bottom: 302px;
        background: url(../images/drink_bg02.png) no-repeat;
        background-size: cover;
        background-position: bottom;
    }
  }
  /*
****************************************
 sp photo 
*****************************************
*/
  .photo-gallery {
    display: none;
  }
  @media screen and (max-width: 950px) {
    .photo-gallery {
        display: block;
    }
    .top-gallery {
        width: 70%;
        max-width: 550px;
        margin: -20px auto 40px;        
    }
    .top-gallery img {
        aspect-ratio: 40 / 28;
    }
    .bottom-gallery {
        overflow: hidden;
    }
    .left-gallery {
        width: 60%;
        max-width: 450px;
        margin-left: 0;
    }
    .left-gallery img {
        aspect-ratio: 30 / 28;
    }
    .right-gallery {
        width: 80%;
        max-width: 450px;
        margin: -29% 0 0 auto;
        }
    .right-gallery img {
        aspect-ratio: 40 / 28;
    }
  }
  @media screen and (max-width: 780px) {
    .top-gallery {
        margin-top: -27px;
    }
    .left-gallery {
        width: 36%;
    }
    .left-gallery img {
        aspect-ratio: 40 / 20;
    }
    .right-gallery {
        margin-top: -36%;
        margin-right: -6%;
        }
  }
  @media screen and (max-width: 540px) {
    .top-gallery {
        margin-bottom: 30px;
    }
    .left-gallery {
        width: 40%;
    }
    .left-gallery img {
        aspect-ratio: 8 / 10;
    }
    .right-gallery {
        margin-top: -43%;
        margin-right: -26%;
        }
  }
  @media screen and (max-width: 467px) {
    .left-gallery {
        width: 28%;
    }
    .left-gallery img {
        aspect-ratio: 4 / 10;
    }
    .right-gallery {
        margin-top: -65%;
        margin-right: -23%;
    }
    .right-gallery img {
        aspect-ratio: 11 / 10;
    }
        
  }


/*
****************************************
 CONCEPT
*****************************************
*/
#concept {
    width: 100%;
    padding: 180px 0 210px;
    background: url(../images/concept_bg.png) no-repeat;
    background-size: 1250px;
    background-position: bottom right;
}
.concept_wrap {
    max-width: 1300px;
    margin: 60px auto 0;
    display: flex;
    align-items: center;
    gap: 45px;
}
.concept_img {
    width: 60%;
    display: flex;
}
.concept_img img {
    width: 50%;
    max-width: 373px;
    aspect-ratio: 373 / 600;
}
.concept_img img:nth-of-type(1) {
    object-position: 0 100%;
}
.concept_img img:nth-of-type(2) {
    object-position: 100% 100%;
}
.concept_box-sp {
    margin: 20px auto;
}
.concept_box-sp img {
    display: none;
}
.concept_box {
    width: 40%;
}
.concept_box h3:nth-of-type(2) {
    margin-top: 40px;
}
@media screen and (max-width: 1200px) {
    .concept_img, .concept_box {
        width: 50%;
    }
}
@media screen and (max-width: 980px) {
    #concept {
        background-size: contain;
        padding-top: 0;
        margin-top: 80px;
        padding-bottom: 96px;
        background-position: bottom;
    }
    .concept_wrap {
        margin: 0 auto;
    }
    .concept_img {
        display: none;
    }
    .concept_box {
        width: 100%;
    }
    .concept_box-sp {
        display: flex;
        align-items: center;
        gap: 30px;
        width: 95%;
        margin: 20px auto 0 0;
    }
    .concept_box-sp h3 {
        text-align: left;
        line-height: 3;
    }
    .concept_box-sp_right {
        margin: 40px 0 0 auto;
    }
    .concept_box-sp img {
        width: 40%;
        display: block;
        aspect-ratio: 8 / 11;
        object-position: 30% 50%;
    }
    .concept_box-sp_right img {
        object-position: 80% 50%;
    }
    .concept_box-sp div {
        width: 93%;
        margin: 0 auto;
    }
    .concept_wrap {
        display: block;
    }
}
@media screen and (max-width: 467px) {
    #concept {
        background-position: 45px center;
    }
    .concept_box-sp img {
        aspect-ratio: 8 / 16;
    }
}

/*
****************************************
 ACCESS
*****************************************
*/
#access {
    width: 100%;
    margin: 0 auto;
}
#access h2 {
    margin-bottom: 30px;
}
#access iframe {
    height: 450px;
}
.access_wrap {
    width: 90%;
    max-width: 835px;
    margin: 60px auto 0;
}
/* contact */
.contact {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 20px;
}
.contact h3 span {
    font-family: ryo-gothic-plusn, sans-serif;
    font-size: 14px;
    padding-left: 8px;
}

/* address */
.infomation {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    gap: 80px;
    margin: 30px auto 0;
}
.info-box01 {
    border-left: solid 1px #fff;
    padding-left: 20px;
}
.info-box01 p:nth-of-type(2) {
    margin-top: 18px;
}
.info-box01 a {
    vertical-align: sub;
}
.info-box01 a img {
    max-width: 30px;
    margin-right: 8px;
}
@media screen and (max-width: 980px) {
    #access h2 {
        margin-bottom: 40px;
    }
    #access iframe {
        height: 320px;
    }
    .access_wrap {
        margin: 40px auto 0;
    }
    .infomation {
        gap: 20px;
    }
}
@media screen and (max-width: 780px) {
    section h3 {
        text-align: center;
    }
    section h3 span {
        display: block;
    }
    .info-box01 {
        width: 100%;
        border-left: none;
        border-top: solid 1px #fff;
        padding-left: 0;
        padding-top: 20px;
        text-align: center;
    }
}

/*
****************************************
 INSTAGRAM
*****************************************
*/
#instagram {
    width: 100%;
    margin: 120px auto;
    text-align: center;
}
.instagram_ul {
    width: 90%;
    max-width: 1030px;
    margin: 40px auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}
.instagram_ul li {
    max-width: 240px;
    cursor: pointer;
    position: relative;
    width: 100%;
}
#instagram > .c-arrow-link {
    margin: 40px auto 0;
    padding-left: 30px;
}
  .hover-mask {
    align-items: center; /* テキストの中央揃え */
    background: rgba(0, 0, 0, .5); /* マスクの色(黒の50%) */
    bottom: 0;
    color: #fff; /* テキストの色 */
    display: flex; /* テキストの中央揃え */
    height: auto;
    justify-content: center; /* テキストの中央揃え */
    left: 0;
    opacity: 0; /* 最初は透明(非表示) */
    position: absolute;
    right: 0;
    top: 0;
    transition: opacity .6s ease; /* ゆっくりopacityのみへ変化させる */
    width: 100%;
  }
  .hover-mask:hover {
    opacity: 1; /* hoverしたら透過しない(表示させる) */
  }
  .hover-mask p {
    width: 80%; /* テキストを横幅いっぱいにならないようにする */
    font-family: copperplate, serif;
    font-weight: bold;
  }
  @media screen and (max-width: 1030px) {
    .instagram_ul {
        gap: 10px;
    }
    .instagram_ul li {
        width: calc(100% / 3 - 10px);
    }
    .instagram_ul li:nth-of-type(7), .instagram_ul li:nth-of-type(8) {
        display: none;
    }
  }




/*
****************************************
 最新投稿表示
*****************************************
*/

#insta ul {
  width: 90%;
    max-width: 1030px;
    margin: 40px auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}
#insta ul li {
	aspect-ratio: 1 / 1;
  max-width: 240px;
    cursor: pointer;
    position: relative;
    width: 100%;
}
#insta ul li .captionTxt {
  display: block;
  width: 100%;
  height: 100%;
  padding: 16px;
  font-size: 14px;
  line-height: 1.8;
  text-align: left;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.75);
  color: #fff;
  opacity: 0;
	overflow: hidden;
}
/*いいねのひょうじ*/
#insta ul li .like_count {
	display: none;
  font-size: 12px;
  line-height: 2;
  /*display: block;*/
  text-align: center;
  position: relative;
}
#insta ul li .like_count::before {
  content: "♥";
  color: #d4245f;
  font-size: 14px;
  vertical-align: middle;
  padding-right: 0.25em;
}
#insta ul li:hover .captionTxt {
  transition: 0.5s opacity, 0.25s filter;
  opacity: 1;
}
#insta ul li img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

@media screen and (max-width: 1030px) {
    #insta ul {
        gap: 10px;
    }
    #insta ul li {
        width: calc(100% / 3 - 10px);
    }
    #insta ul li:nth-of-type(7), #insta ul li:nth-of-type(8) {
        display: none;
    }
	#insta ul li .captionTxt {
		font-size: 10px;
		padding: 5px;
	}
  }