@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Yuji+Boku&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho+B1&display=swap');
*{
  margin: 0;
  padding: 0;
}
ul{
  list-style: none;
}
a{
  text-decoration: none;
}
img{
  vertical-align: bottom;
}
/* 全ページ共通 */
header{
  padding: 50px 0;
}
h1{
  text-align: center;
  font-family: "Yuji Boku", serif;
  /* font-size: 100px; */
  font-weight: lighter;
  animation: theme 5s ease-in-out forwards;
}
@keyframes theme{
  0%{font-size: 20px;}
  100%{font-size: 100px;}
}
.g-nav{
  height: 50px;
  background-color: #E83015;
  margin-bottom: 100px;
}
.g-nav>ul{
  display: flex;
  width: 960px;
  margin: 0 auto;
}
.g-nav li{
  width: 20%;
}
.g-nav a{
  display: block;
  line-height: 50px;
  text-align: center;
  color: #fff;
  font-family: "Yuji Boku", serif;
  font-size: 20px;
  font-weight: lighter;
  border-left: 1px dotted #fff;
  transition: 0.3s;
}
.g-nav li:last-of-type>a{
  border-right: 1px dotted #fff;
}
.g-nav a:hover{
  background-color: #e7807180;
}
main{
  max-width: 960px;
  margin: 0 auto 100px;
  font-family: "Shippori Mincho B1", serif;
}
footer{
  height: 100px;
  background-color: #E83015;
}
footer>p{
  text-align: center;
  line-height: 100px;
  color: #fff;
}
/* トップページ部分 */
.main-visual{
  margin-bottom: 100px;
}
.main-copy>h2{
  text-align: center;
  font-size: 30px;
  margin-bottom: 30px;
  font-weight: lighter;
}
.lead{
  width: 600px;
  text-align: center;
  margin: 0 auto;
  line-height: 2.5;
}
/* 季節ページ部分 */
.wrapper{
  display: flex;
  flex-direction: row-reverse;
}
.text-box{
  margin-left: 40px;
}
.text-box>h2{
  margin-bottom: 20px;
  text-align: center;
  font-size: 26px;
}
.text-box>p{
  line-height: 1.8;
}
/* 季節ページごとの設定部分 */
.spring>.g-nav{
  background-color:#D75455;
}
.spring>.g-nav a:hover{
  background-color: #fd9a9a85;
}
.spring>footer{
  background-color: #D75455;
}
.summer>.g-nav{
  background-color:#0D5661;
}
.summer>.g-nav a:hover{
  background-color: #16859671;
}
.summer>footer{
  background-color: #0D5661;
}
.fall>.g-nav{
  background-color:#F05E1C;
}
.fall>.g-nav a:hover{
  background-color: #ff986981;
}
.fall>footer{
  background-color: #F05E1C;
}
.winter>.g-nav{
  background-color:#6E75A4;
}
.winter>.g-nav a:hover{
  background-color: #a6acd679;
}
.winter>footer{
  background-color: #6E75A4;
}
/* カレント指定 */
.current>a{
  background-color:  #5aa857;
}
@media (max-width:500px) {
  h1{
    font-size: 50px;
    animation: none;
  }
  .g-nav>ul{
    width: 560px;
  }
}