@charset="UTF-8";

html,body,h1,h2,h3,p,ul,li{
margin:0;
padding:0;
line-height:1.0;/*リセットしないと、bodyのline-heightが効かない*/
}
ul{
list-style:none;
}
a{
text-decoration:none;
}
img{
vertical-align:bottom;
}
/*PCファースト*/
/*共通部分　　複数ページの場合*/
body{/*文字周りのことに関してはbodyですべてかけられる*/
line-height:1.5;
background:#F7F6F5;
}

header{
width:100%;/*書かなくても１００％*/
padding-top:30px;/*ここが重要*/

}
h1{/*h1には文字を残しておきたい。大事なので*/
margin:0 auto 30px;
font-size:50px;
width:120px;
height:200px;
background:url(../img/logo4.svg)no-repeat center center/contain;/*containをつかう*/
text-indent:100%;/*横に移動させ*/
white-space:nowrap;/*改行をなくす*/
overflow:hidden;/*文字を隠す　この3行で隠し文字の記述*/
}
nav{
position:sticky;
top:0;
width:100%;
height:50px;/*ボタンの大きさでgoogleにはじかれるので注意*/
background:#BEC23F;
}
.spring nav{
background:#F19483;
}
.summer nav{
background:#F9BF45;
}
.fall nav{
background:#CA7853;
}
.winter nav{
background:#A5DEE4;
}
.g-nav{
max-width:960px;/*フルードイメージに変更　このフルードイメージの使い方は、幅が960px以上になってもそれ以上は広がらないという意味。*/
margin:0 auto;
display:flex;
}
.g-nav>li{
width:20%;
}
.g-nav>li:nth-of-type(1)>a{
border-left:1px solid #E1E1F4;
}

.g-nav a{
display:block;/*ブロックレベル要素にしている*/
text-align: center;
line-height: 50px;
color:#36563C;
border-right:1px solid #E1E1F4;
font-family: 'Noto Serif JP', serif;
}
.g-nav>li.current>a{
background: #8D742A;
}
.g-nav a:hover{
background: #8D742A;
}
.main-txt>p{
font-family: 'Yu Mincho',/*Win用*/ YuMincho,/*mac用*/serif;/*serifだけでも大丈夫*/
font-size:17px;
}
footer{
width:100%;
background:#BEC23F;
}
.spring>footer{
background:#F19483;
}
.summer>footer{
background:#F9BF45;
}
.fall>footer{
background:#B54434;
}
.winter>footer{
background:#A5DEE4;
}
footer>p{
text-align:center;
color:#E1E1F4;
padding:40px 0;/*paddingで文字をセンターにしている*/
}
/*トップページ用のレイアウト*/
.main{
max-width:960px;/*フルードイメージ*/
margin:0 auto 100px;
}
.main-visual>img{/*フルードイメージ*/
max-width:100%;
}
.main-txt>h2{
text-align:center;
padding:40px 0;/*今回のシチュエーション*/
font-family: 'Noto Serif JP', serif;
}
.main-txt>p{
line-height:2;
padding:0 150px;
}

/*季節のページ*/
.season-page{
max-width:960px;/*フルードイメージ*/
margin:60px auto 100px;
}
.season-page>h2{
text-align: center;
padding-bottom:30px;
font-family: 'Noto Serif JP', serif;
font-size:28px;
}
.wrapper{
padding:0 10px;
display:flex;
flex-direction:row-reverse;/*右に文字　左に写真*/
justify-content:space-between;
}
.txt{
line-height:1.8;
font-family: 'Yu Mincho',/*Win用*/ YuMincho,/*mac用*/serif;/*serifだけでも大丈夫*/
font-size:18px;
width:48%;
}
.photo{
width:48%;
}
.photo>img{/*フルードイメージ*/
max-width:100%;
}


/*メディアクエリ*/
@media(max-width:959px){
.g-nav>li:nth-of-type(1)>a{
border-left:0;/*borderをなくしたい 0をつかう*/
}
.g-nav>li:last-of-type>a{
border-right:0;
}
}
@media(max-width:767px){
h1{
margin:0 auto 10px;
width:80px;
height:160px;
}
.main-txt>p{/*line-heightは変えないので記述しない*/
padding:0 20px;
}/*検証で確認する！！*/
.wrapper{
flex-direction:column-reverse;/*写真を上に文字列を下にしたい。上下を逆にする*/
padding:0 10px;
}
.txt{
width:100%;
}
.photo{
width:100%;
margin-bottom:20px;
}
}
@media(max-width:330px){
.g-nav>li{
font-size:10px;
}
}