@import url('https://fonts.googleapis.com/css?family=Sawarabi+Mincho');

body {
    font-family: 'Sawarabi Mincho', sans-serif;
}

header{
  position:relative;
  top:0;
  width:100%;
  height:100px;
  display:flex;
  justify-content:center;
  align-items:center;
  background-color:#de6090;
  z-index:9;
}

/*花*/
.flower{
  height:80px;
  width:80px;
}

.flower-left{
  height:80px;
  width:80px;
  animation:3s linear infinite rotation1;

}

.sp-navi{
  display:none;
}

.flower-right{
  height:80px;
  width:80px;
  right:0;
  animation:3s linear infinite rotation1;
}

@keyframes rotation1{
  0%{ transform:rotate(0);}
  100%{ transform:rotate(360deg); }
}

.flower-l{
  position:absolute;
  left:20%;
  display:flex;
  justify-content:right;
}

.flower-r{
  display:flex;
  justify-content:left;
  position:absolute;
  right:20%;
}

/*ヘッダーメニュー*/

.header-navi{
  width:50%;
}

.header-navi ul{
  display:flex;
  justify-content:center;
  list-style:none;
}

.nav{
  width:auto;
  padding:30px;
}

.nav p:hover{
  color:#d5196d;
  transform:scale(1.3);
}

.nav p{
  color:white;
  font-size:20px;
  transition:transform 0.5s ease;
}

.nav a{
  text-decoration:none;
}

#g-nav{
  display:none;
}


.strawberry{
  display:flex;
  justify-content:center;
  align-items:center;
    position:relative;
    background-color:#bb3940;
    height:700px;
    z-index:0.1;
}

.contents{
  position:relative;
  max-width:600px;
  width:70%;
  max-height:600px;
  height:80%;
    text-align:center;
    background-color: #fff;
    z-index:1;
}

.contents h1{
    text-align:center;
    color:#bb3940;
    font-size:4rem;
}

.contents p{
    color:black;
    line-height:3rem;
    text-align: center;
}

.strawberry-pic{
    position:absolute;
    left:0;
    max-width:136px;
    width:30%;
    max-height:168px;
    height:auto;
    margin-left:-20px;
    
}

.back{
  margin-top:20%;
  bottom:0;
    text-align:center;
    font-size:1.2rem;
}

.back a{
  color:#bb3940;
}

.contents a:hover {
  color:#d5196d;
}

footer{
  display:flex;
  position:relative;
  bottom:0;
  align-items:center;
  height:100px;
  width:100%;
  background-color:#de6090;
}

footer p{
  margin-left:5%;
  color:#fff;
}

.icon{
  margin-right:5%;
  margin-left:auto;
}

.icon img{
  width:30px;
  height:auto;
  transition:transform 0.5s ease;
}

.icon img:hover{
  opacity:0.8;
  transform:scale(1.3);  
}

/*レスポンシブ(タブレット)*/
@media screen and (max-width: 800px){


  .openbtn{
      position:absolute;
      right:0;
      background:#de6090;
      cursor: pointer;
      width: 60px;
      height:50px;
      border-radius: 5px;
  }
  
  /*ボタン内側*/
  .openbtn span{
      display: inline-block;
      transition: all .4s;
      position: absolute;
      right: 14px;
      height: 3px;
      border-radius: 2px;
      background: #fff;
    }
  
  
  .openbtn span:nth-of-type(1) {
      top:15px;	
        width: 45%;
  }
  
  .openbtn span:nth-of-type(2) {
      top:23px;
        width: 35%;
  }
  
  .openbtn span:nth-of-type(3) {
      top:31px;
        width: 45%;
  }
  
  .openbtn.active span:nth-of-type(1) {
      top: 18px;
      left: 18px;
      transform: translateY(6px) rotate(-135deg);
      width: 30%;
  }
  
  .openbtn.active span:nth-of-type(2) {
      opacity: 0;
  }
  
  .openbtn.active span:nth-of-type(3){
      top: 30px;
      left: 18px;
      transform: translateY(-6px) rotate(135deg);
      width: 30%;
  }

  #g-nav{
      display:block;
      position:fixed;
      margin-top:50px;
      z-index: 999;
      /*ナビのスタート位置と形状*/
      top:-120%;
      left:0;
      width:100%;
      height: 100vh;/*ナビの高さ*/
      background:#de6090;
      /*動き*/
      transition: all 0.6s;
  }
  
  /*アクティブクラスがついたら位置を0に*/
  #g-nav.panelactive{
      top: 0;
  }
  
  /*ナビゲーションの縦スクロール*/
  #g-nav.panelactive #g-nav-list{
      /*ナビの数が増えた場合縦スクロール*/
      position: fixed;
      z-index: 999; 
      width: 100%;
      height: 100vh;/*表示する高さ*/
      overflow: auto;
      -webkit-overflow-scrolling: touch;
  }
  
  /*ナビゲーション*/
  #g-nav ul {
      /*ナビゲーション天地中央揃え*/
      position: absolute;
      z-index: 999;
      top:50%;
      left:50%;
      transform: translate(-50%,-50%);
  }
  
  /*リストのレイアウト設定*/
  
  #g-nav li{
      list-style: none;
      text-align: center;
      display:flex;
      align-items:center;
      justify-content:center;
  }
  
  #g-nav li a{
      color: #fff;
      text-decoration: none;
      padding:20px;
      display: block;
      text-transform: uppercase;
      letter-spacing: 0.2em;
      font-weight: bold;
      font-size:1.5rem;
  }

  #g-nav p{
      transition:transform 0.5s ease;
  }

  #g-nav p:hover{
      color:#d5196d;
      transform:scale(1.3);    
  }

  .sp-flower{
      width:30px;
      height:30px;
      opacity:0;
  }

  .hover-img:hover.sp-flower{
      opacity:1;
  }

  header{
      height:50px;
  }

  .header-navi{
      display:none !important;
  }

  .flower-left{
      display:none !important;
  }

  .flower-right{
      display:none !important;
  }}

  @media screen and (max-width: 500px){
  footer{
    display:grid;
}

footer p{
    font-size:0.7rem;
    text-align:center;
    order:2;
}

.icon{
    margin:0 auto;
    order:1;
}}