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

html{
    font-size:100%;
    height: 100%;
    max-width: 1960px;
    scroll-behavior:smooth;
    
}

#wrapper{
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    
}

#background{
background: #9BB9AB;
width: 100%;
}

#background2{
background: #9BB9AB;
width: 100%;
}

#top{
    overflow-x: hidden;
}

#cafe{
    overflow-x: hidden;
}

.background::before{
  background:url("../img/koteihaikei22.png");
  /*background-attachment: fixed;
  background-size: cover;
  background-position: center;*/
    /*background-image: url("../image/983527_m.jpg");*/
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: -1;
    max-width: 1960px;
}

header{
    background-color:#d3d3d3;
}

h1{
    width:300px;
}

#header{
width:100%;
display:flex;  /*ロゴとulを横に並べる*/
justify-content:space-between;
max-width: 960px;
margin: 0 auto;
}

ul{
display:flex;
list-style:none;
}

li{
    margin-left:40px;
    margin-right: 40px;
    margin-top: 9%;
    font-family: "Noto Sans CJK JP Medium";
    color:#9BB9AB;
}

li:hover{
    opacity: 0.8;
}

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

.sixbtn a{
    color: #333;
}

.header-nav ul li a {
  position: relative;
}
/*ホバーエフェクト*/
.header-nav ul li a::after {
  /*アンダーラインのスタイル*/
  position: absolute;
  content: "";
  display: block;
  width: 100%;
  height: 3px;
  background-color: #9BB9AB;
  bottom: -15px;
  left: 0;
  /*横方向0で非表示にする*/
  -webkit-transform: scale(0, 1);
  transform: scale(0, 1);
  /*中央を基点にアニメーション*/
  -webkit-transform-origin: center top;
  transform-origin: center top;
  /*アニメーションの速度設定*/
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.header-nav ul li a:hover::after {
  /*横方向等倍まで拡大*/
  transform: scale(1, 1);
}

.submit{
    position: relative;
    background-color: #fff; 
    color: #1F1C1C; 
    padding: 25px 100px; 
    text-align: center; 
    text-decoration: none; 
    display: inline-block; 
    font-size: 16px; 
    font-family: "Noto Sans CJK JP Medium"; 
    margin: 4px 4px; 
    cursor: pointer; 
    border: none; 
    border-radius: 5px;
    
}

.submit:hover{
    background-color: #797979;
    color:#fff;
    transition: 0.1s;
}

.submitbtn{
    margin: 5% 5%;
    text-align: center;
}

.sirase{
    margin-top: 15%;
    margin-left: 5%;
    letter-spacing:0.3em;
}

.sirase h2{
    font-size: 30px;
}

.sirase p{
    margin-top:0.5%;
    font-family:"平成明朝 Std";
    letter-spacing:0.3em;
}

.sirase2{
    padding-top: 5%;
    margin-top: 15%;
    margin-left: 5%;
    letter-spacing:0.3em;
}

.sirase2 h2{
    font-size: 30px;
}

.sirase2 p{
    margin-top:0.5%;
    font-family:"平成明朝 Std";
    letter-spacing:0.3em;
}

.sirase3{
    padding-top: 5%;
    margin-left: 5%;
    margin-bottom: 3%;
    letter-spacing:0.3em;
}

.sirase3 h2{
    font-size: 30px;
}

.sirase3 p{
    margin-top:0.5%;
    font-family:"平成明朝 Std";
    letter-spacing:0.3em;}

#hitorikaikan{
    padding-bottom: 5%;
}


#title2{
    display: flex;
    justify-content: space-around;
}

#MOZI1{
    text-align: center;
    margin: 10%;
    font-size: 32px;
    font-family: "Noto Sans CJK JP Medium";
    text-shadow: 1px 1px 2px #afafb0;
}

#MOZI1{
animation-name:fadeUpAnime;
animation-duration:2.0s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}

.MOZI2{
    text-align: center;
    margin: 7%;
    font-size: 24px;
    font-family: "Noto Sans CJK JP Light";
    text-shadow: 1px 1px 2px #afafb0;
}

.MOZI2{
animation-name:fadeUpAnime;
animation-duration:3.0s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}

.shoukaiPage{
    position: relative;
    background-color: #fff; 
    color: #1F1C1C; 
    padding: 25px 100px; 
    text-align: center; 
    text-decoration: none; 
    display: inline-block; 
    font-size: 16px; 
    font-family: "Noto Sans CJK JP Medium"; 
    margin: 4px 2px; 
    cursor: pointer; 
    border: none; 
    border-radius: 5px; 
}

.shoukaiPage:hover{
    background-color: #797979;
    color:#fff;
    transition: 0.1s;
}

.btnmove{
    text-align: center;
}

section#news {
  margin: 5% auto;
  width: 80%;
  padding: 20px;
}



section#news h2 {
  text-align: center;
}

section#news dl {
  margin: 0 0 5% 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
border-bottom: 1px solid #000;
border-top: 1px solid #000;
}

section#news dt {
  font-weight: bold;
  margin: 22px 0;
padding: 20px 0;
}

section#news dd {
  margin: 20px 0 20px 20px;
     width: 70%;
  padding: 20px 0;
}

section#news dd:hover{
    opacity: 0.8;
}

.YAZI{
    margin-left: 3%;
}


section#news a {
  color: #000;
  font-family: "Noto Sans CJK JP Medium";
}

.checkBoxFlex{
    display: flex;
    margin: 5% 0 5% 5%;
    font-family:"平成明朝 Std";
}

#M1{
    font-family: "平成明朝 Std";
    font-size:20px;
    letter-spacing: 0.1em;
    margin-left: 5%;
}

textarea {
  resize: none;
  width:600px;
  height:25px;
 vertical-align: baseline;
}

/*ひとりのスペースーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/

#hitorispace{
    background: #FFF;
    border-radius:20px;
    margin: 4% 0 4% 4%;
    padding: 4%;
}

#hitorispace p{
    font-size: 20px;
    font-family: "Noto Sans CJK JP Medium";
}

#hitorispace #p_tyuui{
    font-size: 11px;
    color:#F7ACAE;
    margin-top: 8%;
    margin-bottom: 3%;
}

#hitorispace a:hover{
    opacity: 0.8;
}

/*開館時間ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/

#todayinfo{
    margin: 4% 4% 4% 0;
     background: #FFF;
    border-radius:20px;
    padding: 4%;
}

/*開館時間の文字の部分（下に例外あり）*/

#todayinfo p{
    font-size: 20px;
    font-family: "Noto Sans CJK JP Medium";
    margin-top: 5%;
}

/*開館時間の「開館」の部分*/

#todayinfo #p_kaikan{
    font-size: 70px;
    margin-top: 5%;
}

/*開館時間のopenの部分*/

#todayinfo #p_open{
    margin-top:5%;
    font-family:"平成明朝 Std";
    letter-spacing:0.3em;
    text-align: center;
}

/*開館時間・予約時間の中身を２つ並べてる親要素*/

#kaikan_hitori{
    display: flex;
    justify-content:space-around;
}

/*開館時間・予約時間の部分*/

#kaikan_hitori .zikan{
    font-size:14px;
    margin-top: 10%;
    text-align: center;
}

/*新作本ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/

.hon{
    width:100%;
}

.hon:hover{
    transform:scale(1.2,1.2);
  transition:1s all;
}

.sinsaku{
    text-align: center;
    margin-top: 5%;
    padding-bottom: 5%;
}

/*６つのナビゲーションーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/

#sixbtnoya1{
    display: flex;
    justify-content: space-around;
    width:100%;
    margin:15% 0 0 0;
}

#sixbtnoya2{
    display: flex;
   justify-content: space-around;
    width:100%;
     margin: 5% 0;
}

.sixbtn{
    background-color: #fff;
    position: relative;
    color: #1F1C1C; 
    padding: 25px 100px; 
    text-align: center; 
    text-decoration: none; 
    display: inline-block; 
    font-size: 16px; 
    font-family: "Noto Sans CJK JP Medium"; 
    margin: 4px 4px; 
    cursor: pointer; 
    border: none;
    letter-spacing: 0.1em;
}

li.sixbtn{
    width:250px;
}

li.sixbtn:hover{
    background-color: #9BDBAC;
    transition: 0.1s;
    opacity: 1.0;
}

/*イベントーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/

#ivent_flex{
    display: flex;
    justify-content: space-between;
}

/*アクセスーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/

iframe{
/*margin: 5% calc(50% - 50vw);  /* 画面幅いっぱいにはみ出させるためのネガティブマージン */
  /*width: 100vw;/* 幅を画面幅いっぱいに指定 */
    height: 300px;
    margin: 0 auto;
    width:100%
}

#MAPnow{
    font-family: "Noto Sans CJK JP Medium";
    font-size:13px;
    margin-left: 2%;
}

#MAPnow p{
    margin-top: 2%;
}

#MAPnow p:last-child{
    padding-bottom:10%;
}

/*フッターーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
footer{
    background: #d3d3d3;
    padding-bottom: 1%;
    border-radius: 70% 70% 0 0;
}

.margin{
    margin: 0 auto;
    text-align: center;
}


.footer{
width:100%;
display:flex;  /*ロゴとulを横に並べる*/
justify-content:space-between;
max-width: 960px;
    margin: 0 auto;
}

.header-nav ul li a {
  position: relative;
}
/*ホバーエフェクト*/
.header-nav ul li a::after {
  /*アンダーラインのスタイル*/
  position: absolute;
  content: "";
  display: block;
  width: 100%;
  height: 3px;
  background-color: #9BB9AB;
  bottom: -15px;
  left: 0;
  /*横方向0で非表示にする*/
  -webkit-transform: scale(0, 1);
  transform: scale(0, 1);
  /*中央を基点にアニメーション*/
  -webkit-transform-origin: center top;
  transform-origin: center top;
  /*アニメーションの速度設定*/
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.header-nav ul li a:hover::after {
  /*横方向等倍まで拡大*/
  transform: scale(1, 1);
}



.copy{
    margin: 0 auto;
    padding-top: 2%;
    text-align: center;
}

.copy small{
    text-align: center;
}

/*カフェページーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/

.background2::before{
  background:url("../img/カフェ.jpeg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: -1;
    max-width: 1960px;
}

.bb{
    display: block;
    width: 100%;
}

#ccc{
    border-radius: 0 0 50% 50%;
}

figure{
    max-width: 240px;
    width: 100%;
    text-align: center;
    margin-bottom: 12%;
}

.allmenu{
    margin: 0 auto;
    text-align: center;
    border-bottom: 3px solid #000;
    margin-bottom: 5%;
}


#ichigomilktea{
    position: relative;
}

#ichigomilktea #drinkichigo{
    position: absolute;
    top:-10%;
    left: 0;
}

figcaption{
    font-family:"Noto Sans CJK JP Medium";
    font-size: 15px;
}

.gentei{
    padding: 6px;
    background: #f5b2b2;
    color:#fff;
    border-radius: 18px;
    font-family: "Comic Sans MS", "cursive";
}

.teiban{
    padding: 6px;
    background: #79B293;
    color:#fff;
    border-radius: 18px;
    font-family: "Comic Sans MS", "cursive";
}

.cafeFlex{
    display: flex;
    justify-content: space-between;
    width: 70%;
    margin: 10% auto;
}

.cafemenu{
    text-align: left;
    margin-left: 1em;
    font-size:30px;
    font-family: "Slackside One", cursive;
  font-weight: 400;
  font-style: normal;
    
}

.value{
    text-align: right;
    margin-right: 1em;
    margin-top: 15%;
    font-size:20px;
    
}

.Allmenu{
    display: flex;
    flex-wrap: wrap;
}

.allmenu{
    padding: 5% 0;
}

#backgroundphoto{
    position: relative;
}

.terace{
    position: absolute;
  top: -60%;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

.terace{
animation-name:fadeUpAnime;
animation-duration:2.0s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}

#Bmozione{
    width: 100%;
    height: auto;
    text-align: left;
    margin: 0 0 0 5%;
    position: absolute;
  top: 30%;
  right: 0;
  bottom: 0;
  left: 0;
    font-family: "Noto Sans CJK JP Medium";
    font-size:30px;
    color:#fff;
    letter-spacing:0.3em;
    line-height: 1.7em;
}

#Bmozione{
animation-name:fadeUpAnime;
animation-duration:3.0s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}

#Bmozitwo{
    width: 100%;
    height: auto;
    text-align: left;
    margin: 0 0 0 30%;
    position: absolute;
  top: 60%;
  right: 0;
  bottom: 0;
  left: 0;
    font-family: "Noto Sans CJK JP Medium";
    font-size:30px;
    color:#fff;
    letter-spacing:0.3em;
    line-height: 1.7em;
}

#Bmozitwo{
animation-name:fadeUpAnime;
animation-duration:5.0s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}

#Bmozithree{
    width: 100%;
    height: auto;
    text-align: left;
    margin: 0 0 0 5%;
    position: absolute;
  top: 80%;
  right: 0;
  bottom: 0;
  left: 0;
    font-family: "Noto Sans CJK JP Medium";
    font-size:30px;
    color:#fff;
    letter-spacing:0.3em;
    line-height: 1.7em;
}

#Bmozithree{
animation-name:fadeUpAnime;
animation-duration:7.0s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}

#saigo{
    margin: 0 auto;
    text-align: center;
}

.saigo{
    margin: 15% 0;
}
























        
/*スライドショーと背景の基礎設定ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/


/*TOPボタン*/

#page-top {
  position: fixed;
  bottom: 48px;
  right: 48px;
  width: 96px;
  height: 96px;
  text-decoration: none;
  background-color: #fff;
  display: block;
  text-align: center;
  border-radius: 48px;
  opacity: 0;
  transition: opacity 0.4s ease-in;
}

#page-top::before {
  content:url("../img/上矢印.png");
  font-family: "Noto Sans CJK JP Medium";
  font-size: 30px;
  font-weight: 900;
  color: #466A50;
  line-height: 48px;
}

/* fadeinクラスがついた時だけ表示する */
#page-top.fadein {
  opacity: 1;
}

#page-top2{
    position: fixed;
    top:100px;
    left:100px;
    display: block;
     opacity: 0;
  transition: opacity 0.4s ease-in;
}

#page-top2.fadein {
  opacity: 1;
}

fixed{
    position: fixed;
    right:0px;
    display: block;
  transition: opacity 0.4s ease-in;
    width:60%;
}

/*CSSのスライドショーの設定*/

.img-frame{
   position: relative;
   overflow: hidden;
   clip-path: inset(0 round 0 0 0 0);
}

.img-frame{
   /*width: 960px;
   height: 500px;*/
 margin: 0 calc(50% - 50vw);  /* 画面幅いっぱいにはみ出させるためのネガティブマージン */
  width: 100vw;/* 幅を画面幅いっぱいに指定 */
    height: 820px;
   box-sizing: border-box;
    max-width: 1960px;
}
.img-01, .img-02, .img-03{
   position: absolute;
   top:0;
   left:0;
   width: 100%;
   height: 100%;
   background-size: cover;
   background-repeat: no-repeat;
}
.img-01{
   background-image: url('../img/かりる.jpeg');
   animation: slide-animation-01 24s infinite;
}
.img-02{
   background-image: url('../img/イベント.jpg');
   animation: slide-animation-02 24s infinite;
}
.img-03{
   background-image: url('../img/スライドショースライドショー３.jpeg');
   animation: slide-animation-03 24s infinite;
}

.msg{
   font-size: 20px;
   color: #fff;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50% , -50%);
}

@keyframes slide-animation-01 {
    0% {opacity: 1; transform: scale(1.0);}
  30% {opacity: 1;}
  40% {opacity: 0; transform: scale(1.15);}
  90% {opacity: 0}
100% {opacity: 1; transform: scale(1.0);}
}
@keyframes slide-animation-02 {
    0% {opacity: 0;}
  30% {opacity: 0; transform: scale(1.1);}
  40% {opacity: 1;}
  60% {opacity: 1;}
  70% {opacity: 0; transform: scale(1.0);}
100% {opacity: 0;}
}
@keyframes slide-animation-03 {
    0% {opacity: 0;}
  60% {opacity: 0;  transform: scale(1.0);}
  70% {opacity: 1;}
  90% {opacity: 1;}
100% {opacity: 0; transform: scale(1.1);}
}

@media screen and (max-width:1400px) {
    #page-top2{
        opacity: 0;
    }
    
    #page-top2.fadein {
  opacity: 0;
}
    }