/* ===== Webサイト全体のスタイル ===== */
/* html */
/*
:root{
  --main: #f0fff0;
  --sub:  #556b2f;
  --acsent: #6b8e23;
  --nav0: #eeffc7;
  --nav1: #9acd32;
}
*/
header section{
  width: 100%;
  height:100%;
  
}
.pc{
  padding-bottom: 15px;
  margin: 0px;
  padding-top : 0px;
  padding-left: 0%;
  padding-right: 0%;
}

.pc li{
  display:inline-block;
  text-align: center;
  margin: 0px;
  padding: 5px;
  width: 200px;
  border: solid 1px var(--nav1);
  background-color: var(--nav0);
  font-size: 20px;
  border-radius: 5px;
  color: black;
}
.pc li:hover{
  /*border-color: var(--nav0);*/
  background-color: var(--nav1);
  color: white; 
}
.pc .now{
  display:inline-block;
  text-align: center;
  margin: 0px;
  padding: 5px;
  width: 200px;
  border: solid 1px var(--color2);
  background-color: var(--sub);
  font-size: 20px;
  border-radius: 5px;
  color: var(--main) !important;
}
.pc .now:hover{
  /*border-color: var(--nav0);*/
  background-color: var(--color2);
  color: var(--sub);
  border: solid 1px var(--sub);
}

.smartphone{
  background-color: transparent;
  padding: 0px;
}

.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-top: 8px;
  padding-bottom: 2px;
  width: 90%;
  border-bottom: solid 2px var(--nav1);
  background-color: var(--nav0);
  font-size: 20px;
  color: black;
  border-radius: 0px;
  list-style-type: none;
  display: none;
}
.smartphone-nav li:hover{
  /*border-color: var(--nav0);*/
  background-color: var(--nav1);
  color: white; 
}


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;
}
.span0{
  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{
  margin: 0px 1px 20px 1px;
  padding: 15px 30px 15px 30px;
  border-radius: 50%;
  background-color: var(--font);
  color: var(--color3);
  font-family: 'Zen Maru Gothic', sans-serif;
}

.small{
  position: absolute;
  font-family: 'Yuji Syuku', serif !important;
  font-size: 40px;
}
.pc-small {
  positon: absolute;
}
.pc-small li{
  display: block;
  text-align: center;
  margin: 0px;
  padding: 5px;
  width: 200px;
  border: solid 1px var(--nav3);
  background-color: var(--nav2);
  font-size: 20px;
  border-radius: 5px;
  color: black;
  
}
.pc-small li:hover{
  background-color: var(--nav3);
  color: white; 
}

.smartphone-small li{
  text-align: center;
  padding-top: 8px;
  padding-bottom: 2px;
  width: 500px;
  border-bottom: solid 2px var(--nav3);
  background-color: var(--nav2);
  font-size: 20px;
  color: black;
  border-radius: 0px;
  list-style-type: none;
  display: inline;
}
.smartphone-small li:hover{
  background-color: var(--nav3);
  color: var(--main); 
}
.hover{
  padding: 0px;
  margin: 0px;
}
.hover:hover .hidden1{
  display: block;
}
.hover:hover .hidden2{
  display: block;
}
.hover:hover .hidden3{
  display: block;
}
.hover:hover .hidden{
  display: block;
}

@media only screen and (max-width: 1000px) /*smartphone*/ 
{
  .hidden{
    display: none;
    position: absolute;
    left: 35px;
    z-index: 500;
  }
  .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:15px;
    left: 0px;
    position: fixed;
    display: inline-block;
    padding-left: 0px;
    padding-right:0px;
    margin-right: 0px;
  }
  .small{
    color:var(--color7);
    left: 25%;
    top: 70px;
  }
  header{
    height: auto;
    background-image: url(img/00.png);
  }
  .h1{
    text-align: center;/* 文字・画像を中央にそろえる */
    padding: 20px;/* 内側の余白 */
    padding-bottom: 10px;
    padding-top: 30px;
    background: rgb(224, 255, 255,0.56);
  }

}


@media only screen and (min-width: 1001px) /*PC*/ 
{
  .hidden1{
    display: none;
    position: absolute;
    left: 220px;
    z-index: 500;
  }
  .hidden2{
    display: none;
    position: absolute;
    left: 440px;
    z-index: 500;
  }
  .hidden3{
    display: none;
    position: absolute;
    left: 660px;
    z-index: 500;
  }
  .hidden4{
    display: none;
    position: absolute;
    left: 880px;
    z-index: 500;
  }
  .pc{
    display: block;
  }
  .smartphone{
    display: none;
  }
  .small{
    color:var(--color7);
    left: 45%;
    top: 70px;
  }
  header{
    height: auto;
    background-image: url(img/01.png);
  }
  .h1{
  opacity: 0.8;
  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);
  background-image: linear-gradient(0deg, var(--color1) 50%, var(--color2) 50%);
  background-size: 40px 40px;
}
}