@charset ="utf-8";

/*共通CSS*/

.container{
max-width:960px;
margin:0 auto;
}

header{
background: url(../img/header.jpg) no-repeat right top;
height:150px;
color:#fff;
}

h1{
padding:20px 0 0 20px;
}

header p{
padding-left:20px;
}

h2{
color:#fff;
background:#900;
padding:10px 0 10px 20px;
}


/*Navigation*/
nav ul{
background:#fdc;
padding-left:0px;
display: flex;
}
nav li{
list-style:none;
font-size:20px;
text-align:center;
width: 20%;
}
nav a{
display:block;
text-decoration:none;
padding:20px 0;
color:#900;
}
nav a:hover{
background:#900;
color:#fff;
}

/* 画像フロート */
main img{
float:left;
margin-right: 20px;
}

main p{
overflow: hidden;
}

footer{
border-top:1px solid #900;
margin:20px 0;
}


/* MediaQuery 記述 */

/* 最大743px以下の時に書く*/
/* 744px以上はリキッドレイアウトが適用される */
@media (max-width:743px){

header{
  height: 130px;
}
h1{
  padding: 10px 0 0 10px;
}
header p{
  padding-left: 10px;
  font-size: 14px;
}
nav ul{
  display: block;
}
nav li{
  width: auto;
  /* 100%と書くとパディングなどを入れた時に100％超えてしまう */
}

main img{
  float: none;
  display: block;
  margin: 0 auto 10px;
}

}/* MediaQuery 記述 */