/* ===== Webサイト全体のスタイル ===== */
/* html */
/*
:root{
  --main: #f0fff0;
  --sub:  #556b2f;
  --acsent: #6b8e23;
  --nav0: #eeffc7;
  --nav1: #9acd32;
}
*/
header{
  margin: 0px;
  text-align: center;
}

.pc{
  padding-bottom: 15px;
  margin: 0px;
  padding-top : 0px;
  padding-left: 10%;
  padding-right: 10%;
}

.pc li{
  display:inline-block;
  text-align: center;
  padding: 8px;
  width: 200px;
  border: solid 2px var(--nav1);
  background-color: var(--nav0);
  font-size: 16px;
  color: black;
  border-radius: 10px;
}
.pc li:hover{
  /*border-color: var(--nav0);*/
  background-color: var(--nav1);
  color: white; 
}

.leave-small{
  font-size: ;
}


.smartphone-nav{
    z-index: 300;
    display: none;
    padding-bottom: 15px;
    margin: 0px;
    padding-top : 0px;
    width: 95%;
    
  }

.smartphone-nav li{
  z-index: 300;
  text-align: center;
  padding: 8px;
  width: 95%;
  border: solid 3px var(--nav1);
  background-color: var(--nav0);
  font-size: 20px;
  color: black;
  border-radius: 10px;
  list-style-type: none;
  display: none;
}
.smartphone-nav li:hover{
  /*border-color: var(--nav0);*/
  background-color: var(--nav1);
  color: white; 
}

.h1 {
  text-align: center;/* 文字・画像を中央にそろえる */
  padding: 20px;/* 内側の余白 */
  padding-bottom: 10px;
  padding-top: 30px;
  /*background: rgb(224, 255, 255,1.0);
  border: solid yellow 1px; */

  background-color: var(--color1);
  opacity: 0.8;
  background-image: linear-gradient(0deg, var(--color1) 50%, var(--color2) 50%);
  background-size: 40px 40px;
  height: 200px;
}

h1{
  position: relative;
  font-size: 80px;
  color: var(--color3);
  margin-bottom: 70px;
  margin-top: 0px;
  padding-left: 20px;
  padding-bottom: 0px;
  /*border-left: solid 25px #9acd32;*/
  font-family: 'Zen Maru Gothic', sans-serif;
}
h1 span{
  position: relative;
  margin: 0px 1px 20px 1px;
  padding: 15px 30px 15px 30px;
  border-radius: 50%;
  background-color: var(--color3);
  color: #4a550e;
  font-family: 'Zen Maru Gothic', sans-serif;
}
h1 u{
  color: var(--font);
}
.span1{
  background-color: var(--font);
  color: var(--color3);
  font-family: 'Zen Maru Gothic', sans-serif;
}

.small{
  
  position: absolute;
  color: var(--font);
  font-size: 40px;
}

.smartphone{
    margin: 0px;
    padding: 0px;
  }

.ruby::after{
    content: "Tea";
    position: absolute;
    color: var(--color4);
    font-size: 18px;
    top: 75%;
    left: 39%;
  }
 .ruby::before{
    content: "Cha";
    position: absolute;
    color: var(--font);
    font-size: 18px;
    top: 5%;
    left: 37%;
  } 
  
  .ruby1::after{
    content: "Tea";
    position: absolute;
    color: var(--color3);
    font-size: 18px;
    top: 75%;
    left: 39%;
  }
 .ruby1::before{
    content: "Cha";
    position: absolute;
    color: var(--color2);
    font-size: 18px;
    top: 5%;
    left: 37%;
  } 
@media only screen and (max-width: 1000px) /*smartphone*/ 
{
  .pc{
    display: none;
  }
  .button{
    z-index: 300;
    top: 0px;
    position: fixed;
    display: block;
    background-color: var(--sub) !important;
    width: 65px;
    height: 25px;
    padding-top: 3px;
    padding-bottom: 16px;
    padding-left: 0px;
    padding-right: 0px;
    margin: 0px ;
    font-size: 30px;
    color: white;
    text-align: center;
  }
  .button:hover{
    transition: all 500ms 0s ease-in;
    text-align: center;
    width: 100%;
  }
  .button:hover li{
    display: block;
  }
 .smartphone-nav{
    z-index: 300;
    top:30px;
    left: 0px;
    position: fixed;
    display: inline-block;
    padding-left: 0px;
    padding-right:0px;
    margin-right: 0px;
  }
  .small{
  left:20%;
  top:0;
  padding-top: 95px;
  }
  
  header{
    height: auto;
    background-image: url(img/00.png);
  }
  
}


@media only screen and (min-width: 1001px) /*PC*/ 
{
  .pc{
    display: block;
  }
  .smartphone{
    display: none;
  }
  .small{
    top: 0;
    left: 40%;
    padding-top: 95px;
  }
  header{
    height: auto;
    background-image: url(img/01.png);
  }
}