@charset "utf-8";

/*
スマホ：320-480px
タブレット：480-768px
PC：それ以上
*/

/* 共通の設定 */

body {
  font-family: Arial, Verdana, sans-serif;
  margin: 0 auto;
  width: 95%;
}

#header {
/*
  background: red;
*/
}

#footer {
/*
  background: green;
*/
}

#container {
}

#main {
/*
  background: orange;
*/
}

#sub {
/*
  background: yellow;
*/
}

#footerNavLink {
  float: right;
}

#headerNav ul {
  list-style: none;
  overflow: hidden;
}

#headerNav li {
  float: left;
  width: 33%;
  text-align: center;
}

img {
  max-width: 100%;
}

footer {
  color: #666;
  text-align: right;
}

/* スマホの設定 */
#headerNav {
  display: none;
}

/* タブレットの設定 */
@media all and (min-width: 480px) {
  #footerNavLink {
    display: none;
  }
  #headerNav {
    display: block;
  }
  #footerNav {
    display: none;
  }
}
/* PCの設定 */
/*
all:980px
sub:200px
margin:15px
main:765px
*/
@media all and (min-width: 768px) {
  #container {
    overflow: hidden;
  }
  #main {
    float: left;
    width: 78.0612245%;
  }
  #sub {
    float: right;
    width: 20.4081633%; /* 200px / 980px * 100 */
  }
}