@charset "UTF-8";

*,
*::before,
*::after {
	box-sizing: border-box;
}
html {
	font-size: 62.5%;
  scroll-behavior: smooth;
}
a{
	text-decoration: none;
  color: #FFF;
}
img{
	max-width: 100%;
}
body{
  font-family:'Yeseva One', cursive;
	line-height: 1.7;
}

.wrapper{
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 4%;
}

main{
  background: linear-gradient( to right bottom, #c56950 0%, #250441 100% );
  margin-top: 0;
    position: relative;
    z-index:1;
    text-align: center;
  }

header{
  background-image: url(../images/top.jpg);
  background-size: cover;
  height: 100vh;
}
.head{
  position: relative;
  display: flex;
  flex-direction: column;
}
.head h1 img{
  position: absolute;
  width: 200px;
  top: 35%; 
  left: 50%; 
  transform: translateY(-50%) translateX(-50%); 
  -webkit-transform: translateY(-50%) translateX(-50%);
}
.global_nav{
  margin-top: 30px;
  width: 100%;
}
.global_nav ul{
  text-align: center;
  margin: 0 auto;
  padding: 0;
  display: flex;
  justify-content: space-between;
}
.global_nav li{
  list-style: none;
  color: #FFF;
  font-size: 2.5em;
}
.head p{
  color: #FFF;
}
.nurse{
  margin-top: 30px;
}
.heart{
width: 100%;
}

.nurse{
  font-size: 5rem;
  margin-top:300px;
  margin-bottom: 0;
  text-align: center;
}
.whisky{
  font-size: 8rem;
  margin-top: 50px;
  margin-bottom: 200px;
  text-align: center;
}
.main{
  font-size: 8em;
  color: #FFF;
  margin: 0;
  text-align: center;
  }
.main2{
  font-size: 2em;
  font-family:'Cinzel', serif;

  background-color: rgba(255, 255, 255,.8);

  text-align: center;
}

#system{
  font-size: 4rem;
  margin-top: 30px;
  margin-bottom: -40px;
}
.system1{
  background-color: rgb(255, 255, 255,.8);
}
.system1 p{
  font-size: 2em;
  font-family:'Cinzel', serif;
  text-align: center;
  
}

  .system1 img{
    width: 50%;
    margin-bottom: 80px;
  }

.button-4{
  width:140px;
  height:50px;
  border:2px solid rgb(249, 249, 249,.7);
  text-align:center;
  cursor:pointer;
  position:relative;
  box-sizing:border-box;
  overflow:hidden;
  margin:0 auto;
  border-radius: 20%;
}
.button-4 a{
  font-family:arial;
  font-size:16px;
  color:rgb(249, 249, 249,.9);
  text-decoration:none;
  line-height:50px;
  transition:all .5s ease;
  z-index:2;
  position:relative;
}
.eff-4{
  width:140px;
  height:50px;
  left:-140px;
  background:#9f6363;
  position:absolute;
  transition:all .5s ease;
  z-index:1;
}
.button-4:hover .eff-4{
  left:0;
}
.button-4:hover a{
  color:#fff;
}
h2 img{
  width: 100px;
}


.suzuka img{
    width: 300px;
    height: 300px;
    border-radius: 50%;
    position: absolute;
    margin-top: 100px;
    left: 50%;
    transform: translate(-50%,0);
}
.suzuka{
  cursor: pointer;
  position: relative;
  width: 50%;
  text-align: center;
}
#owner h2{
  font-size: 4rem;
  margin-top: 30px;
  margin-bottom: -40px;
}
/* 2枚目の画像は最初透明 */
.suzuka img:last-of-type {
  opacity: 0;
  transition: opacity .5s;
}
/* hoverすると2枚目の画像が透明じゃなくなる */
.suzuka img:last-of-type:hover {
  opacity: 1;
}
.owner{
  display: flex;
  
}
.owner1{
  width: 50%;
  font-size: 2em;
  background-color: rgb(255, 255, 255,.8);
  padding: 30px;
  font-family:'Cinzel', serif;
  text-align: left;
}
.pro{
  font-size: 40px;
  margin: 0;
}
.pro1{
  margin-top: 0;
}
.bar{
  display: flex;
}
#access{
  font-size: 4rem;
  margin-top: 30px;
  margin-bottom: -40px;
}
.access1{
  font-size: 20px;
  margin:0;
  font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif;
  background-color: rgb(255, 255, 255,.8);
  padding:0 10px;
  text-align: center;
  margin-bottom: 70px;
}


.content{
  color: #4b4444;
}

.me{
  font-size: 4em;
  margin: 0;
  text-align: center;
}
.menu{
  background-image: url(../images/menu_top.png);
  background-size: cover;
  min-height: 30vh;
  position: relative;
  padding-top: 30px;
}
.menu_top h2{
  text-align: center;
  font-size:3em;
}
/* menu design */
dl.menu2{
  width:100%;
  font-size: 2rem;
  }
dl.menu2 div{
  position: relative;
  display: flex;
  justify-content: space-between;
  margin: 5px 0;
  padding: 5px 0;
  }
dl.menu2 div::after{
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  z-index: 1;
  width: 100%;
  border-bottom: dotted 1px #000;
  }
dl.menu2 dt{
  margin:0;
  padding: 0 5px 0 0;
  background-color: #ffffff;
  z-index: 2;
  text-align: left;
  font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif;  }
dl.menu2 dd{
  margin:0;
  padding: 0 0 0 5px;
  background-color: #ffffff;
  z-index: 2;
  text-align: right;
  }


/* background */

section.test_area{
  max-width:1300px;
  margin:0 auto;
  padding:20px;
  background-color:#ffffff;
}

/* Loading背景画面設定　*/
#splash {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 999;
    background:#c56950;
    text-align:center;
    color:#fff;
  }
  
  /* Loading画像中央配置　*/
  #splash_logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  /* Loading アイコンの大きさ設定　*/
  #splash_logo img {
    width:260px;
  }
  
  /* fadeUpをするアイコンの動き */
  .fadeUp{
  animation-name: fadeUpAnime;
  animation-duration:0.5s;
  animation-fill-mode:forwards;
  opacity: 0;
  }
  
  @keyframes fadeUpAnime{
    from {
      opacity: 0;
    transform: translateY(100px);
    }
  
    to {
      opacity: 1;
    transform: translateY(0);
    }
  }
  
  .slider img {
    width:100%;/*スライダー内の画像を横幅100%に*/
    height:auto;
}

/*slickのJSで書かれるタグ内、スライド左右の余白調整*/

.slider .slick-slide {
    margin:0 10px;/*スライド左右の余白調整*/
}

.first{
  position: relative;
  display: flex;
  justify-content: space-between;
}

.first img{
  width: 33%;
}
.second{
  position: relative;
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
}

.second img{
  width: 33%;
}

.info{
  min-height: 30vh;
}

#insta h2{
  font-size: 4rem;
  margin-top: 50px;
}
#insta p{
  font-size: 3rem;
  margin-top: 0;
}
.fa-instagram{
  margin-right: 10px;
}


.fade{
  text-align: center;
  opacity : 0;
  transition: opacity 3s;
}
 
.fade.view{
  opacity: 1;
}

.element {
  /* 最初は非表示 */
  transform: translateY(30px);
  opacity: 0;
  visibility: hidden;
  transition: transform 1s, opacity 1s, visibility 1s;
}
.is-fadein {
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
}

.button-5{
  width:200px;
  height:50px;
  border:2px solid #f9f9f9;
  text-align:center;
  cursor:pointer;
  position:relative;
  box-sizing:border-box;
  overflow:hidden;
  margin:0 auto;
  border-radius: 20%;
}
.button-5 a{
  font-family:arial;
  font-size:16px;
  color:#f9f9f9;
  text-decoration:none;
  line-height:50px;
  transition:all .5s ease;
  z-index:2;
  position:relative;
}
.eff-5{
  width:140px;
  height:50px;
  left:-140px;
  background:#787474;
  position:absolute;
  transition:all .5s ease;
  z-index:1;
}
.button-5:hover .eff-4{
  left:0;
}
.button-5:hover a{
  color:#fff;
}
.box{
  margin-top: 100px;
  margin-bottom: 0;
}
footer{
  height: 50px;
  width: 100%;
  background-color: #9f6363;
}

footer p{
  margin: 0;
  text-align: center;
  padding-top: 15px;
}
@media(max-width:840px){
.nurse{
  font-size:6rem;
  margin-top: 400px;
}
.whisky{
  font-size:7rem;
  
}
header{
  background-position: center;
}
.main{
  font-size: 5rem;
}
.first{
  flex-direction: column;
}
.first img{
  width: 100%;
}
.first .a{
  display: none;
}
.first .b{
  display: none;
}
.second{
flex-direction: column;
}
.second img{
  width: 100%;
  display: none;
}
.owner{
  flex-direction: column;
}
.suzuka{
  width: 100%;
}
.owner1{
  width: 100%;
  margin-top: 450px;
}
.insta iframe{
  width: 100px;
}
.heart{
  width: 200%;
  margin-top: 30px;
  margin-bottom: 0;
}
#system{
  font-size: 3rem;
}
#owner h2{
  font-size: 3rem;
}
#insta h2{
  font-size: 3rem;
}
#insta p{
  font-size: 2rem;
}
#access{
  font-size: 3rem;
}
.box{
  width: 100%;
  height: 20vh;
}
.menu{
  height: 20vh;
}
}
@media(max-width:420px){
  .nurse{
    font-size: 3.5rem;
    margin-top: 300px;
  }
  .whisky{
    font-size: 3.5rem;
    margin-top: 50px;
  }
  header{
    background-position: center;
  }
  .main{
    font-size: 3rem;
    padding-top: 30px;
  }
  .main2{
    font-size: 1.25rem;
  }
  .first{
    flex-direction: column;
  }
  .first img{
    width: 100%;
  }
  .a{
    display: none;
  }
  .b{
    display: none;
  }
.second{
  flex-direction: column;
}
.system1 p{
  font-size: 1.5rem;
}
.name{
  font-size: 1.5rem;

}
.content{
  font-size: 1.5rem;
}
.content1{
  font-size: 1.5rem;
}
  .second img{
    width: 100%;
    display: none;
  }
  .owner{
    flex-direction: column;
  }
  .suzuka{
    width: 100%;
  }
  .owner1{
    width: 100%;
    margin-top: 450px;
  }
  .insta iframe{
    width: 100px;
  }
  .heart{
    width: 200%;
    margin-top: 30px;
    margin-bottom: 0;
  }
  #system{
    font-size: 3rem;
  }
  #owner h2{
    font-size: 3rem;
  }
  #insta h2{
    font-size: 3rem;
  }
  #insta p{
    font-size: 2rem;
  }
  #access{
    font-size: 3rem;
  }
  .box{
    width: 100%;
    height: 20vh;
  }
  .menu{
    height: 20vh;
  }
  dl.menu2{
    font-size: 1rem;
    }
    .menu_top h2{
      font-size: 2rem;
    }
    .me{
      font-size: 3rem;
    }
  }
/* PC用メニュー */




/* ハンバーガーメニューのボタン */
.sp-menu__box {
  position: fixed;  /* 位置を固定 */
  top: 30px;  /* 最上部 */
  right: 0;  /* 右端 */
  /* 中の要素を上下中央寄せ */
  display: flex;
  justify-content: center;
  align-items: center;
  /* サイズ指定 */
  height: 60px;
  width: 60px;
  /* 最前面にする */
  z-index: 100;
  background-color: #887575;
}

/* メニューの白線を疑似要素を使って3本作成 */
.sp-menu__box span,         /* 真ん中の線 */
.sp-menu__box span:before,  /* 上の線 */
.sp-menu__box span:after {  /* 下の線 */
  /* contentの値を指定しないと疑似要素が生成されない */
  content: "";
  /* ３本線のサイズと色を指定 */
  display: block;
  height: 3px;
  width: 25px;
  border-radius: 3px;
  background-color: #ffffff;
  /* 3本線の位置は絶対位置で指定 */
  position: absolute;
}
/* 上の線の位置 */
.sp-menu__box span:before {
  /* 真ん中の線と離す距離 */
  bottom: 8px;
}
/* 下の線の位置 */
.sp-menu__box span:after {
  /* 真ん中の線と離す距離 */
  top: 8px;
}
/* スマホ用メニュー */
.sp-menu__content {
  /* 絶対位置で指定   */
  position: fixed;
  /* 画面全体に表示 */
  width: 100%;
  height: 100%;
  /* 開始位置は左上隅 */
  top: 0;
  left: 0;
  /* 前面に表示するがハンバーガーボタンよりは背後 */
  z-index: 90;
  

}
/* スマホ用メニューのリスト */
.sp-menu__list {
  padding: 100px 10px 0 30px;
}
/* スマホ用メニュー項目 */
.sp-menu__item {
  border-bottom: solid 1px #dddddd;
  list-style: none;
}
/* スマホ用メニュー項目のリンク */
.sp-menu__link {
  display: block;
  width: 100%;
  font-size: 25px;
  box-sizing: border-box;
  color: #fff;
  text-decoration: none;
  padding: 9px 15px 10px 50px;
}
.sp-menu__link:hover{
  color: rgb(219, 154, 75);
}
/* ハンバーガーメニューのクリック操作 */
/* ハンバーガーボタンを押してチェックがONの時だけ
   スマホ用メニューを画面左端に移動する */
    #sp-menu__check:checked ~ .sp-menu__content {
    left: 0;
  }
  /* 変更箇所はコメントの項目のみ */
  .sp-menu__content {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
  
    /* 普段は画面外にするために左端を画面右端の位置にする */
    left: 100%;
  
    z-index: 90;
    background-color: #9f6363;
    
    /* 右端からゆっくり移動するように表示 */
    transition: all 0.5s;
  }




/* チェックボックスは常に非表示 */
#sp-menu__check {
  display: none;
}
/* チェックボックスのチェックがON（スマホ用メニューを開いた状態） */
/* 真ん中の線 */
#sp-menu__check:checked ~ .sp-menu__box span {
  /* 透明にして見えなくする */
  background: rgba(255, 255, 255, 0);
}
/* 上の線 */
#sp-menu__check:checked ~ .sp-menu__box span::before {
  /* 真ん中の線との距離を無くす（真ん中の線と同じ位置にする） */
  bottom: 0;
  /* 右に45度傾けてバツの片側の線にする */
  transform: rotate(45deg);
}
/* 下の線 */
#sp-menu__check:checked ~ .sp-menu__box span::after {
  /* 真ん中の線との距離を無くす（真ん中の線と同じ位置にする） */
  top: 0;
  /* 左に45度傾けてバツの片側の線にする */
  transform: rotate(-45deg);
}
#sp-menu__check:checked ~ .hamburger__content {
  left: 0;
}
  /* 画面サイズが1279px以下の時はPC用メニューは非表示 */
@media screen and (max-width: 1279px) {
  .main-menu {
      display: none;
    }
  }
  /* 画面サイズが1280px以上の時はスマホ用メニューは非表示 */
@media screen and (min-width: 1280px) {
    .sp-menu {
      display: none;
    }
  }