@charset "utf-8";

/* clearfix */
.cf { zoom: 1; }
.cf:before, .cf:after { content: ""; display: table; }
.cf:after { clear: both; }

/* 共通設定＆スマートフォン向けスタイル */
body {
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: 1.0em;
  line-height: 1.3em;
  background-color: #ffffff;
  color: #000000; }
a:link { color: #800000; }
a:visited { color: #800000; }
a:hover { color: #800000; }
a:active { color: #800000; }
hr {
  width: 80%;
  align: center; }
img {
  max-width: 100%;
  height: auto; }
#header {
  font-size: 0.8em;
  text-align: center;
  margin: 10px 0 20px 0;
  padding-left: 3%;
  padding-right: 3%; }
.nav {
  margin: 0;
  background-color: #ffcc66; }
.nav2 {
  margin: 0;
  background-color: #ffcc66; }
.nav ul {
  margin: 0;
  padding: 0; }
.nav2 ul {
  margin: 0;
  padding: 0; }
.nav ul li {
  display: block;
  width: 100%;
  margin: 0;
  font-size: 1.0em;
  text-align: center;
  line-height: 1.8em;
  color:#000000;
  border-bottom: 1px solid #ffffff; }
.nav2 ul li {
  display: block;
  width: 100%;
  margin: 0;
  font-size: 1.0em;
  text-align: center;
  line-height: 1.8em;
  color:#000000;
  border-bottom: 1px solid #ffffff; }
.link {
  margin: 0 0 2em 0;
  padding: 0 0 1em 0;
  background-color: #ffffe0; }
.link ul {
  margin: 0;
  padding: 0; }
.link ul li {
  display: block;
  width: 95%;
  margin: 0 0 0.5em 0;
  padding-left: 5%;
  font-size: 0.9em;
  text-align: left;
  line-height: 1.5em;
  color:#000000;
  border-bottom: 1px solid #ffffff; }
.link_w {
  margin: 0 0 1.5em 0;
  padding: 0 0 1em 0;
  background-color: #ffffff; }
.link_w ul {
  margin: 0;
  padding: 0; }
.link_w ul li {
  display: block;
  width: 95%;
  margin: 0.3em 0 0.3em 0;
  padding-left: 5%;
  font-size: 0.8em;
  text-align: left;
  line-height: 1.5em;
  color:#000000;
  border-bottom: 1px solid #ffffff; }
.hgroup {
  width: 100%;
  text-align: center;
  font-weight: bold;
  line-height : 180%;
  padding-left: 0%;
  padding-right: 0%; }
.hgroup2 {
  width: 100%;
  text-align: center;
  font-weight: bold;
  line-height : 180%;
  padding-left: 0%;
  padding-right: 0%;
  background-color: #ffffe0; }
.leftcolumn {
  width: 100%;
  margin: 0;
  background-color: #ffffff; }
.rightcolumn {
  width: 100%;
  margin: 0;
  background-color: #ffffff; }
.pc_only {
  display: none; }
.sp_only {
  display: inline; }
#contents {
  width: 95%;
  margin: 1em auto 2em; }
#contents2 {
  width: 95%;
  margin: 1em auto 2em; }
#contents p{
  margin: 0;
  padding: 0;
  line-height : 180%; }
#contents2 p{
  margin: 0;
  padding: 0;
  line-height : 160%; }
.item {
  width: 50%;
  float: left;
  margin: 10px 0 30px 0; }
.item2 {
  width: 50%;
  float: left;
  margin: 10px 0 30px 0;
  display: none; }
.socialbutton {
  width: 50%;
  float: left;
  margin: 20px 0 30px 35px; }
.facebook-button {
  min-width: 70px;
  max-width: 115px; }
.twitter-button {
  min-width: 87px;
  max-width: 90px; }
.hatena-button {
  min-width: 80px;
  max-width: 125px; }
.gplus-button {
  min-width: 50px;
  max-width: 80px; }
#footer {
  width: 100%;
  text-align: center; }

/* タブレット向けスタイル：481px ～ 768px */
@media only screen and (min-width: 481px) {
.nav {
  padding: 0 8% 0 8%; }
.nav2 {
  padding: 0 8% 0 8%; }
.nav ul li {
  float:left;
  width: 32%;
  margin: 0;
  line-height: 2.0em;
  border-left: 1px solid #ffffff;
  border-right: 1px solid #ffffff;
  border-bottom: none; }
.nav2 ul li {
  float:left;
  width: 24%;
  margin: 0;
  line-height: 2.0em;
  border-left: 1px solid #ffffff;
  border-right: 1px solid #ffffff;
  border-bottom: none; }
.pc_only {
  display: inline; }
.sp_only {
  display: none; }
.item {
  width: 33%; }
.item2 {
  display: inline;
  width: 33%; }
.socialbutton {
  width: 33%;
  margin: 20px 0 30px 70px; }
}

/*  PC向けのスタイル：769px～960px */
@media only screen and (min-width: 769px) {
.link_w ul li {
  font-size: 1.1em; }
.hgroup {
  width: 100%;
  float: left; }
.hgroup2 {
  width: 100%;
  float: left; }
#contents {
  width: 95%;
  float: left;
  margin: 1em 0 2em 10px; }
#contents2 {
  width: 95%;
  float: left;
  margin: 1em 0 2em 10px; }
.leftcolumn {
  width: 70%;
  float: left; }
.rightcolumn {
  width: 30%;
  float: right; }
.item {
  width: 25%; }
.item2 {
  width: 25%; }
.socialbutton {
  width: 25%; }
}

/*  PC向け固定レイアウト：961px以上 */
@media only screen and (min-width: 961px) {
.hgroup {
  width: 100%; }
.hgroup2 {
  width: 100%; }
#contents {
  width: 95%; }
#contents2 {
  width: 95%; }
.item {
  width: 20%; }
.item2 {
  width: 20%; }
}