@charset "UTF-8";
.clearfix:after{display: block;clear: both;content: "";}
html *{box-sizing: border-box;}
img{vertical-align:bottom;}
a:hover{opacity:0.8;transition:opacity .2s ease;}
a{text-decoration: none;}
a:link {color:white;}
a:visited{color:white;}
.clearfix::after{content: "";clear: both;display: block;}
html,body{
  font-size: 100%;
  font-family: Verdana, Roboto, "Droid Sans", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
  line-height: 1.6;

 }
#container{position:relative;overflow:hidden;}
.hama a {color:#353FBC;}
.box a {color:blue;}
.bang {font-weight: 600;}
/* PC */
@media screen and (min-width: 768px) {
html,body{width:calc(100% - 90px);font-weight: 500;}
#container{width:100%;margin:0 auto;}
br.sp{display:none;}

header nav{
  position:fixed;
  top: 0;
  right: 0;
  margin:0;
  z-index:999;

 }
header nav ol{
  display: flex;
  text-align: center;
  color: white;
  flex-direction: column;
  font-family: "Sawarabi Mincho";
  position: relative;
  flex-wrap: wrap;
    }
header nav ol li{
  width: 110px;
  height: 90px;
  line-height: 90px;
  font-size: 50px;
  font-weight: 700;
  margin-right:-20px;
  padding-right:20px;
  text-align: center;
}


header nav ol li:first-of-type{background-color: rgba(137,91,138,0.8);}
header nav ol li:nth-of-type(2){background-color: rgba(123,141,66,0.8);}
header nav ol li:nth-of-type(3){background-color: rgba(22,94,131,0.8);}
header nav ol li:nth-of-type(4){background-color: rgba(159,59,66,0.8);}
header nav ol li:nth-of-type(5){background-color: rgba(206,155,14,0.8);}
header nav ol li:first-of-type:hover{background-color:  rgba(137,91,138,1);margin-left:-20px;transition:all .2s ease;}
header nav ol li:nth-of-type(2):hover{background-color: rgba(123,141,66,1);margin-left:-20px;transition:all .2s ease;}
header nav ol li:nth-of-type(3):hover{background-color: rgba(22,94,131,1);margin-left:-20px;transition:all .2s ease;}
header nav ol li:nth-of-type(4):hover{background-color: rgba(159,59,66,1);margin-left:-20px;transition:all .2s ease;}
header nav ol li:nth-of-type(5):hover{background-color: rgba(206,155,14,1);margin-left:-20px;transition:all .2s ease;}
#visual{margin:0;padding:40px 0;}
#contents{}
h1{font-size:300%;text-align: center;font-weight: 600;margin-bottom:20px;}
h1 span{font-size:80%;font-weight: 400;}
h1 + figure{text-align: center}
figure{font-weight: 600;}
.box{
  display: flex;
  width: 90%;
  margin: 0 auto 80px auto;
  color:#0b0235;
  word-break: keep-all;
  }
.box figure{font-size: 75%;}
.box > p{ padding-left: 1rem;}
#footer{text-align: center;margin-left: 90px;padding-bottom:20px;}
  }

#haru_list ol,#natu_list ol,#aki_list ol,#huyu_list ol {font-size: 116%;margin-left: 10%;-webkit-overflow-scrolling: touch; }
#haru_list ::-webkit-scrollbar,#natu_list ::-webkit-scrollbar,#aki_list ::-webkit-scrollbar,#huyu_list ::-webkit-scrollbar {  display: none;}
#haru_list ol li,#natu_list ol li,#aki_list ol li,#huyu_list ol li{margin-top:8px;}
#haru_list,#natu_list,#aki_list,#huyu_list{position: fixed;top:0;right:90px;width:20%;height:100%;display:none;overflow-y:scroll;z-index: 99;  font-size: 108%}
#haru_list{background-color: rgba(3,48,4,0.8);}
#natu_list{background-color: rgba(15,33,89,0.8);}
#aki_list{background-color: rgba(130,29,1,0.8);}
#huyu_list{background-color: rgba(13,153,165,0.8);}

.hama{text-align: center;}

  /* SP */
  @media screen and (max-width: 767px) {
  html,body{width:100%; margin:0;padding:0;}
  br.pc{display:none;}
  header nav{position:fixed;top:0;margin:0;width:100%;}
  header nav ol{display: flex;width:100%;height:90px;font-family: "Sawarabi Mincho";color:white;}
  header nav ol li {
    width:calc(100% / 5);
    text-align: center;
    font-size:3em;
    height:90px;
    line-height: 90px;
  }
  header nav ol li:first-of-type{background-color: rgb(137,91,138);}
  header nav ol li:nth-of-type(2){background-color: rgb(123,141,66);}
  header nav ol li:nth-of-type(3){background-color: rgb(22,94,131);}
  header nav ol li:nth-of-type(4){background-color: rgb(159,59,66);}
  header nav ol li:nth-of-type(5){background-color: rgb(206,155,14);}

#visual{margin: auto;padding-top:12vh;}
#contents{padding:3vw ;}
#footer{text-align: center;margin:50px auto;}
h1{font-size:7vw;font-weight: 600;text-align: center;}
h1 span{font-size:4vw;font-weight: 400;}
h1 + figure{text-align: center}
figure{font-weight: 600;}
.box{margin:10vh auto;}


#haru_list,#natu_list,#aki_list,#huyu_list{right:0;top:90px;width:100%;height:120%;display: none;text-align: center;z-index: 99;}
#haru_list{background-color: rgba(3,48,4,0.8);}
#natu_list{background-color: rgba(15,33,89,0.8);}
#aki_list{background-color: rgba(130,29,1,0.8);}
#huyu_list{background-color: rgba(51,166,193,);}
#haru_list ol,#natu_list ol,#aki_list ol,#huyu_list ol{overflow:hidden;}
#haru_list li,#natu_list li,#aki_list li,#huyu_list li{width:50%;font-size:1.4em;float:left;border-bottom:1px solid rgba(255,255,255,0.6);}
#haru_list li:nth-of-type(odd),#natu_list li:nth-of-type(odd),#aki_list li:nth-of-type(odd),#huyu_list li:nth-of-type(odd) {border-right:1px solid rgba(255,255,255,0.6); }
#haru_list li a,#natu_list li a,#aki_list li a,#huyu_list li a{display:block;padding:0.4em 2em 0.4em 0.6em;position: relative;left:0;transition: all .2s ease;}
#haru_list li a:hover,#natu_list li a:hover,#aki_list li a:hover,#huyu_list li a:hover{transition: all .2s ease;opcity:1;}
}

@media screen and (max-width: 420px) {

#haru_list ol,#natu_list ol,#aki_list ol,#huyu_list ol{max-height:clac(100vh - 60px);overflow:hidden;overflow-y:scroll;-webkit-overflow-scrolling:touch;}
#haru_list li,#natu_list li,#aki_list li,#huyu_list li{width:100vw;float:none;}
#haru_list li:nth-of-type(odd),#natu_list li:nth-of-type(odd),#aki_list li:nth-of-type(odd),#huyu_list li:nth-of-type(odd){border-left:none;}
  }