@charset "utf-8";

@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;500&display=swap');

html{
    font-size: 62.5%;
}
body {
  font-family: 'Noto Serif JP', serif;
	font-size:1.6rem;/* 16px*/
	line-height: 1.9;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
  font-feature-settings: "palt";
	color:#000;
  }

a{color:#000; text-decoration:none;}


	
img{
	max-width: 100%;
	height: auto;
}
.Center{text-align: center;}
.Right{text-align: right;}

.bold{font-weight: 700;}

.m_b_10{margin-bottom: 10px;}
.m_b_20{margin-bottom: 20px;}
.m_b_30{margin-bottom: 30px;}

@media screen and (min-width:768px){.pc_hidden{display: none;} a:hover{opacity:0.5; transition: 0.5s all;}}
@media screen and (max-width:767px){.sp_hidden{display: none;} body{font-size: 1.5rem;} }

/*common//////////////////////////////////*/
.Contents{max-width: 1100px; margin: 0 auto; padding:0 20px; position: relative;} 


/*header//////////////////////////////////*/
.Wrapper{overflow:hidden;}
.Container_inner{padding-bottom: 200px;}
  

  @media screen and (max-width:767px){
   .Container_inner{padding-bottom: 100px;}}
  
/*header////////////////*/
header{
  position: relative; z-index: 99!important;
}  
h1{
  position: absolute;
  top: 0;
  left: 0;
} 
h1 img{
  width: 240px;
}

.head_tel{
  position: absolute;
  top: 5px;
  right: 190px;
  text-align: right;
  font-size: 1.4rem;
  font-weight: 500;
}
      
.head_tel a{
  font-size: 2.4rem;
  color: #8A175A;
  vertical-align: -2px;
  }

.btn_reserve a{
  display: block;
  width: 100%;
  height: 100%;
  color: #8A175A;
  background: #b2cfe6;
  box-sizing: border-box;
}

@media screen and (min-width: 1024px) {
    header{
      height: 100px;
      position: relative;
    }
    
    .btn_reserve{
      position: absolute;
      top: 0;
      right: 0;
      width: 150px;
      height: 100px;
      font-size: 1.8rem;
    }
    .btn_reserve a{
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      
    }
    .btn_reserve img{
      display: block;
    }
    
    .sp_logo{display: none;}
		  
     .nav-wrap ul{
       line-height: 1;
       text-align: right;
       padding-right: 190px;
       padding-top: 60px;}
      
    .nav-wrap ul li{
      display: inline-block;
      margin-left: 2vw;
      font-size: 1.8rem;
    }  
    .nav-wrap ul li > a{
      position: relative;
      display: block;
      font-weight: 500;
    }
      
      
    .nav-wrap ul li > a:before{
      content: '';
      position: absolute;
      bottom: -5px;
      left: 0;
      width: 100%;
      height: 1px;
      background:#8A175A;
      transition: all .3s;
      transform: scale(0, 1);
      transform-origin: left top;
      z-index: -1;}

    .nav-wrap ul li a:hover,
    .nav-wrap ul li a.current{
      opacity: 1;
      color:#8A175A;
    }

    .nav-wrap ul li a:hover:before,
    .nav-wrap ul li a.current:before{
      transform: scale(1, 1);}
    
    
    header.is-fixed{
      position: fixed;
      width: 100%;
      background: rgba(255,255,255,0.8);
      backdrop-filter: blur(5px);
      -webkit-backdrop-filter: blur(5px);
      z-index: 99;
      top:0;
      left: 0;
      animation: DownAnime 0.5s forwards;
    }
    
    header.is-fixed .btn_reserve{height: 80px;}
    header.is-fixed{height: 80px;}
    header.is-fixed h1 img{width: 100px;}
    header.is-fixed .nav-wrap ul{padding-top: 50px;}
    header.is-fixed .head_tel a{font-size: 2.2rem;}
    
	}
  @keyframes DownAnime{
      from {
        opacity: 0;
        transform: translateY(-100px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }  

	@media screen and (max-width: 1023px) {
		
    header{height: 65px;}
    h1 img{width: 120px;} 
    
    header.is-fixed .nav-button,
    header.is-fixed h1,
    header.is-fixed .head_tel{position: fixed; animation: DownAnime 0.5s forwards;}
    .nav-button.active{position: fixed;}
    
    header.is-fixed h1 img,
    header.is-fixed h1 a{width: 80px; display: block;}
    
    header.is-fixed h1{
      background: rgba(255,255,255,0.8);
      backdrop-filter: blur(5px);
      -webkit-backdrop-filter: blur(5px);
      width: 100%;
      height: 65px
      
      }
    
    .head_tel{
      top: 15px;
      right: 55px;
      font-size: 1rem;
    }
    .head_tel a{
      line-height: 1.4;
      font-size: 2rem;
      margin-right: 0.5em;
    }
      
    .sp_logo{
      text-align: center;
      margin-bottom: 8vh;
    }
    .sp_logo img{width: 150px;}
    
    
	  .nav-wrap {
      position: fixed;
      left: 0;
      top: 0;
      opacity: 0;
      visibility: hidden;
      overflow: hidden;
      z-index: 100;
      background:#eaf1f1;
      width: 100%;
      height: 100%;
      padding: 30px;
      box-sizing: border-box;
      padding-top: 4vh;
      
      }
	  .nav-wrap.close{opacity: 0; transition: .2s;}
	  .nav-wrap.open {opacity:1; transition: .2s; visibility: visible;}
    
    .nav-wrap > ul{
      text-align: center;
    }
    
	  .nav-wrap ul li {
      display: block;
      font-size: 1.8rem;
      margin-bottom: 2vh;
      }
    
    .btn_reserve{
      max-width: 250px;
      margin: 4vh auto 0 auto;}
    .btn_reserve a{
      text-align: center;
      padding: 10px;
      
    }
    .btn_reserve a img{margin-right: 10px;}
    
	  /*hamburger*/
	  .nav-button,
	  .nav-button span {
		display: inline-block;
		transition: all 0.4s;
		box-sizing: border-box;}

	  .nav-button {
	  	display: block;
      cursor: pointer;
      z-index: 101;
      position: absolute;
      top: 20px;
      right: 20px;
      width: 25px;
      height: 20px;
      }
       
    
	  .nav-button span {
      position: absolute;
      left: 0;
      width: 100%;
      height: 2px;
      background-color: #000;}

	  .nav-button span:nth-of-type(1) {top: 0;}
	  .nav-button span:nth-of-type(2) {top: 50%; transform: translateY(-50%);}
	  .nav-button span:nth-of-type(3) {bottom: 0;}

	  .nav-button.active span:nth-of-type(1) {
		-webkit-transform: translateY(9px) rotate(-45deg);
		transform: translateY(9px) rotate(-45deg);
	  }

	  .nav-button.active span:nth-of-type(2) {opacity: 0;}

	  .nav-button.active span:nth-of-type(3) {
		-webkit-transform: translateY(-9px) rotate(45deg);
		transform: translateY(-9px) rotate(45deg);
	  }
	}

	@media screen and (max-width: 767px) {
  .head_tel{
      top: 5px;}}
  
  
  @media screen and (max-width: 320px) {
    h1 img{width: 80px;} }
.kv{
  position: relative;
  color: #FFF;
}
.movie_mask{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: #CCC;
  mix-blend-mode: multiply;
  z-index: 1;
}

.kv_copy{
  position: absolute;
  top: 50%;
  left: 50%;
  text-align: center;
  transform: translate(-50%,-50%);
}
.kv_copy_1{
  margin-bottom: 5vh;
}

.movie_wrap{
      position: relative;
      width: 100%;
      overflow: hidden;
    }  
    .movie_wrap video{
      position: absolute;
      z-index: -1;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      min-height: 100%;
      min-width: 100%;
      } 
      
.scroll_box{
      position: absolute;
      right: 30px;
      bottom: 40px;
      text-align: center;
      padding-bottom: 30px;
    }
.scroll_txt{
  position: relative;
  color: #FFF;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  font-size: 1.2rem;
}
.scroll_txt:after{
      content: '';
      position: absolute;
      width: 10px;
      height:10px;
      border-right: 2px solid #FFF;
      border-bottom: 2px solid #FFF;
      left: 0;
      right: 0;
      transform:rotate(45deg);
      bottom:-30px;
      margin: auto;
      animation: popping-arrow 1.5s infinite ease-out;
}  
@keyframes popping-arrow {
  0% {
    transform: translateY(0) rotate(45deg);
  }
  30% {
    transform: translateY(1.5em) rotate(45deg);
  }
  60% {
    transform: translateY(0) rotate(45deg);
  }
  
}      


/*common*/
section {color: #FFF; padding: 150px 0; position: relative;}

 
.section_ttl{margin-bottom: 50px;}

.section_ttl h2{
  font-size: 3.2rem;
  font-weight: 500;
  margin-bottom: 10px;
}
.sub_ttl{
  font-size: 1.4rem;
  font-weight: 500;
  padding-left: 35px;
  position: relative;
}
.sub_ttl:before{
  content: '';
  display: block;
  background: url("../images/icon_ttl.png") no-repeat 0 0 / 100%;
  width: 26px;
  height: 26px;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  left: 0;
}

.Lead{
  font-size: 2.4rem;
  font-weight: 500;
  margin-bottom: 60px;
}
.Contents_txt{
  font-size: 1.8rem;
  line-height: 2.5;
  font-weight: 500;
}

.btn{
  width: 320px;
  margin: 0 auto;
}
.btn a{
  display: block;
  background: #89165B;
  text-align: center;
  position: relative;
  font-size: 1.8rem;
  font-weight: 500;
  color: #FFF;
  padding: 15px 0;
  border-radius: 50px;
  width: 100%;
  height: 100%;
}

.btn a:after{
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  
  border-top: 2px solid #FFF;
  border-right: 2px solid #FFF;
  transform: rotate(45deg);
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  right: 20px;
}

  @media screen and (max-width: 767px) {
    .section_ttl h2{
      font-size: 2.6rem;}
    .Lead{font-size: 2rem;}
    .Contents_txt{font-size: 1.6rem; line-height: 2;}
    .btn{width: auto; max-width: 320px;}
    .btn a{font-size: 1.6rem; padding: 10px 0;}
    
  }

/*about*/
#about{
  background:url("../images/photo_1-1.png") no-repeat 105% bottom #8A175A;
  background-size: 516px 504px;
  z-index: 1;
}
  @media screen and (max-width: 1240px) {
    #about{background-size: 35vw}
  }
  
  @media screen and (min-width: 1024px) {
    .AboutContents{
      display: flex;
      
    }
    .AboutContents .section_ttl{margin-right: 90px;}
    .AboutImg{
      position: absolute;
      bottom: -50px;
      left: 50px;
      width: 25vw;
    }
  }
	@media screen and (max-width: 1023px) {
    #about{background-position: 110% 15%; background-size: 40vw;}
    .AboutImg{
      text-align: center;
      margin-top: 20px;
      padding: 0 60px;
      margin-bottom: -100px;
      }
  }
 

/*list*/
#list{
  background:url("../images/photo_2-1.jpg") no-repeat right top #00803E;
  background-size: 45vw;
  z-index: 0;
 
}

.ListContents{margin-bottom: 100px;}
.Coffee_caution{
  font-family: 'Noto Sans JP', "メイリオ", Meiryo, sans-serif;
  display: inline-block;
  padding: 5px 40px;
  background: #4EB2DA;
  font-weight: 500;
  font-size: 1.8rem;} 

.Coffeelist{
      display: flex;
      justify-content: space-between;
      flex-wrap:wrap;
      margin: 80px 0 50px 0;
    }

.Coffeebox{
  width: 31%;
  margin-bottom: 60px;
  position: relative;
  background: #FFF;
  color: #000;
  box-shadow: 0px 0px 10px 3px rgba(0,0,0,0.2);
}
.Coffeelist_number{
  width: 60px;
  height: 60px;
  background: #89175A;
  color: #FFF;
  text-align: center;
  line-height: 60px;
  font-size: 2.4rem;
  font-weight: 500;
  border-radius: 60px;
  position: absolute;
  top: -30px;
  left: 10px;
}
.Coffeelist_head{
  display: flex;
  justify-content: flex-end;
}
.Coffeelist_tag{
  width: 66%;
  display: flex;
}
.Coffeelist_tag li{
  width: 50%;
  font-size: 1.4rem;
  text-align: center;
  padding: 8px 0;
  color: #FFF;
  font-weight: 500;
  font-family: 'Noto Sans JP', "メイリオ", Meiryo, sans-serif;
}
.Coffeelist_tag li:first-child{background: #D18F02;}
.Coffeelist_tag li:last-child{background:#50B9E3; font-size: 1.6rem; font-weight: 700;}
.Coffeebox_inner{
  padding: 25px;
}
.Coffeebox_name{
  font-size: 2rem;
  color: #761d59;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 10px;
}
   
    
  @media screen and (min-width: 1024px) {
    .ListContents{
      display: flex;
      align-items: flex-end;
    }
    .ListTxt{margin-right: 10px; }
    
    
  }
  @media screen and (max-width: 1023px) {
    
    .List_img{text-align: center; margin-top: 40px;}
    .Coffeebox{width: 47%;}
    
  }
  @media screen and (max-width: 767px) {
    #list{background-image: none;}
    .Coffeebox{width: 100%;}
    .Coffeebox_name{font-size: 1.8rem;}
    .Coffee_caution{font-size: 1.6rem; display: block; padding: 5px 0;}
  }


/*cafe*/
#cafe{
  z-index: 1;
  background:#D28F01; 
  padding-bottom: 350px;
}
#cafe .sub_ttl:before{
  background-image: url("../images/icon_ttl_2.png");
}

.menu_wrap{
  position: relative;
}


.menu{
  max-width: 810px;
  margin: 100px auto;
  padding: 0 20px;
  box-sizing: border-box;
}

.menu table th span,
.menu table td span{
  font-size: 1.2rem;
  vertical-align: middle;
  font-weight: 500;
}
.menu table td{
  text-align:right;
  font-weight: 500;
}
.menu table th{
  font-weight: 700;
  text-align: left;
  
}

.menu table td,
.menu table th{
  line-height: 1.2;
  padding: 20px 5px;
  
  border-bottom: 1px solid #d5ab52;
  vertical-align: top;
}

.movie{
  max-width: 800px;
  margin: -240px auto 0 auto;
  position: relative;
  z-index: 1;
  box-shadow: 0 0 10px 4px rgba(0,0,0,0.2);
}

.modal-open{
    position:absolute;
    z-index: 2;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
    border: 2px solid #fff;
    background:transparent;
    display:inline-block;
	  width:70px;
	  height:70px;
	  border-radius: 50%;
    outline:none;
}

.modal-open:hover{
	background:#8A175A;	
  border-color: transparent;
  opacity: 1;
}

/*中央矢印*/
.modal-open span::after {
    content: '';
    position: absolute;
    top: 38%;
    left: 45%;
    border: 14px solid transparent;
    border-top-width: 10px;
    border-bottom-width: 10px;
    border-left-color: #fff;
}     


.movie:after{
  content: '';
  display: block;
  width: 220px;
  height: 180%;
  background:#A5D1E8;
  z-index: -1;
  position: absolute;
  top: -80px;
  left: 0;
  right: 0;
  margin: auto;
}

/*modal*/
    .modal-bg,
    .modal,
    .modal-close{
      opacity: 0;
      visibility: hidden;
    }

    .modal-bg.open,
    .modal.open,
    .modal-close.open{opacity: 1; visibility: visible;}

    .modal-bg{
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transition: 0.5s;
        box-sizing:border-box;
        background: rgba(0, 0, 0, 0.7);
        z-index: 9999;
    }

     .modal{
       position: fixed;
       top: 50%;
       transform: translateY(-50%);
       right: 0;
       left: 0;
       margin: auto;
       max-width: 900px;
       width: 90%;
       max-height: 85%;
       overflow-y: scroll;
       overflow-x: hidden;
       background: #FFF;
       transition: 0.3s;
       box-sizing: border-box;
       z-index: 99999;}

    .modal-closeinner{
      position: relative;
    }
    .modal-close{
      position: fixed;
      top: 60px;
      right: 40px;
      width: 60px;
      height: 60px;
      cursor: pointer;
      z-index: 99999999;
    }
    .modal-inner{
      position: relative;
    }
    .modal-close_1,
    .modal-close_2{
      width: 60px;
      height: 2px;
      background:#FFF;
      position: absolute;
      top: 0;
      left: 0;}
    
    .modal-close_1{
      transform: rotate(45deg);
    }
    .modal-close_2{
      transform: rotate(-45deg);
    }
    
    .movie_modal_inner{
      width: 100%;
      height: 0;
      padding-top: 56.25%;
    }
    .movie_modal_inner video{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

  @media screen and (min-width: 1024px) {
    .CafeImg{
      position: absolute;
      top: -70px;
      right: 0;
    }
    .menu{
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
    }
    .menu table{width: 48%;}
    .menu_img1{
      position: absolute;
      top:0;
      left: 0;
      width: 16vw;
      z-index: -1;
    }
    .menu_img2{
      position: absolute;
      bottom:0;
      right: 30px;
      z-index: -1;
    }
    .menu_img3{
      margin-left: 60px;
      margin-top: 20px;
    }
  }
  
  @media screen and (max-width: 1023px) {
    .CafeImg{
      margin-top: -150px;
      text-align: right;
      margin-bottom: 20px;
    }
    .CafeImg img{
      max-width: 60%;
    }
    .menu{margin: 50px auto;}
    .menu table td,
    .menu table th{padding: 15px 0;}
    .menu_img1{
      margin-top: 40px;
      text-align: center;
      padding: 0 20vw;}
      
    .menu_img2{
      text-align: right;
      margin: 40px 0 20px 0;}
    .menu_img2 img{
      max-width: 60%;
    }  
    
    .menu_img3 img{
      max-width: 80%;
    } 
  }
  @media screen and (max-width: 767px) {
    .movie{margin-top: -100px;}
    #cafe{padding-bottom: 180px;}
    .movie:after{
      width: 150px;
      height: 280%;
      background:#A5D1E8;
      z-index: -1;
      position: absolute;
      top: -50px;
      left: 0;
      right: 0;
      margin: auto;
    }
    .modal-close{
      top: 40px;
      right: 20px;
      width: 30px;
      height: 30px;
      }
    .modal-close_1,
    .modal-close_2{width: 30px;}  
  }
  
/*foot*/
.foot_logo{
  padding: 150px 0 0 0;
  text-align: center;
  position: relative;
  z-index: 10;
}
.foot_logo1{margin-bottom: 20px;}

footer{
  padding-top: 200px;
  max-width: 810px;
  margin:-80px auto 0 auto;
  padding-bottom: 20px;
}
.Access{
  margin-bottom: 30px;
}
.gmap{
  margin-top: 10px;
  text-align: right;
  font-size: 1.2rem;
}
.gmap a{
  color: #761d59;
  font-weight: 500;}

.Copyright{
  text-align: center;
  font-size: 1.2rem;
}
.foot_tel{
  font-size: 1.4rem;
}
.foot_tel a{
  font-size: 2.4rem;
  color: #761d59;
}
.add_detail{
  display: flex;
}
.add_txt{flex: 1;}
.dot{
  font-size: 1.2rem;
  vertical-align: middle;
  color: #761d59;
}
.icon_access{
  margin-right: 20px;
}

.PageTop{
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 10;
}
  @media screen and (min-width: 1024px) {
   .Access{
      display: flex;
      justify-content: space-between;
    }
    .map{
      width: 37%;
    }
    .add{width: 58%;
    
    }
  }
  @media screen and (max-width: 1023px) {
    .add{margin-bottom: 20px;}}
    
  @media screen and (max-width: 767px) {
     .PageTop img{width: 50px;} 
    .icon_access img{width: 60px;}
  }
  
/*fadein*/  
@keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1}}

@-webkit-keyframes fadeIn{
    0% {opacity: 0;}
    100% {opacity: 1}}

.top_fadein{animation: fadeIn 2s ease 0s 1 normal;}

.fadein-y {
  opacity: 0 !important;
  transform : translate(0, 40px);
  transition : all 1500ms;
  visibility: hidden;
  }
.fadein-y2 {
  opacity: 0 !important;
  transform : translate(0, 100px);
  transition : all 1500ms;
  visibility: hidden;
  }  

.fadein-x{
  opacity: 0 !important;
  transform : translate(40px, 0);
  transition : all 1500ms;
  visibility: hidden;
  }
.fadein-x2{
  opacity: 0 !important;
  transform : translate(-40px, 0);
  transition : all 1500ms;
  visibility: hidden;
  }  

.fadein {
  opacity: 0 !important;
  transition : all 1500ms;
  visibility: hidden;
  }

.fadein-y.scrollin,.fadein-y2.scrollin,.fadein-x.scrollin,.fadein-x2.scrollin{
  opacity: 1 !important;
  transform: translate(0, 0);
  visibility: visible;
}
.fadein.scrollin{
  opacity: 1 !important;
  transform: translate(0, 0);
  visibility: visible;
}