@charset "utf-8";

/* CSS Document */

@import url("pc.css");
@import url("sp.css");
@media screen and (max-width: 768px) {
  .none {
    display: none
  }
}

@media screen and (min-width: 769px) {
  .none1 {
    display: none
  }
}

body {
  margin: 0px;
  font-size: 16px;
  color: #333;
  font-family: 'Noto Sans JP', sans-serif;
}

p {
  margin: 0px;
}

img {
  max-width: 100%;
  height: auto;
  width/***/
  : auto;
  vertical-align: bottom;
}

.clear {
  clear: both;
}

.fade {
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
  ransition: 0.3s ease-in-out;
}

.fade:hover {
  opacity: 0.4;
  filter: alpha(opacity=60);
}

#menu {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  padding: 0;
}

#menu li {
  display: block;
  float: left;
  width: 25%;
  margin: 0;
  padding: 0;
}

#menu li a {
  display: block;
  padding: 10px 0 10px;
  background-color: #1a3c95;
  color: #fff;
  font-size: 13px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
}

#menu li:last-child a {
  border: none;
}

#menu li a:hover {
  background: #7590d6;
}

#toggle {
  display: none;
}


/* 画面サイズが768px以下の場合に適用 */

@media only screen and (max-width: 768px) {
  #menu li {
    width: 25%;
    border-bottom: 1px solid #fff;
  }
}


/* 画面サイズが480px以下の場合に適用 */

@media only screen and (max-width: 480px) {
  #menu {
    display: none;
  }
  #menu li {
    width: 100%;
  }
  #toggle {
    display: block;
    position: relative;
    width: 100%;
    background: #1a3c95;
  }
  #toggle a {
    display: block;
    position: relative;
    padding: 15px 0 15px;
    border-bottom: 1px solid #fff;
    color: #fff;
    text-align: center;
    text-decoration: none;
  }
  #toggle:before {
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    left: 10px;
    width: 30px;
    height: 30px;
    margin-top: -15px;
    background: #FFF;
  }
  #toggle a:before, #toggle a:after {
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    left: 10px;
    width: 30px;
    height: 6px;
    background: #1a3c95;
  }
  #toggle a:before {
    margin-top: -9px;
  }
  #toggle a:after {
    margin-top: 3px;
  }
}

.red{
color: #FF0004;
font-weight: bold;
}

.blu{
color:#0053D4;
font-weight: bold;
}


.hoge {
  position: relative;
  z-index: 1;
  /* 必要であればリンク要素の重なりのベース順序指定 */
}

.hoge a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-indent: -999px;
  z-index: 2;
  /* 必要であればリンク要素の重なりのベース順序指定 */
}

.hoge:hover {
  filter: alpha(opacity=70);
  /* IE 6,7*/
  -ms-filter: "alpha(opacity=70)";
  /* IE 8,9 */
  -moz-opacity: 0.7;
  /* FF , Netscape */
  -khtml-opacity: 0.7;
  /* Safari 1.x */
  opacity: 0.7;
  background-color: #61a2ff;
  zoom: 1;
  /*IE*/
}

.hoge2 {
  position: relative;
  z-index: 1;
  /* 必要であればリンク要素の重なりのベース順序指定 */
}

.hoge2 a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-indent: -999px;
  z-index: 2;
  /* 必要であればリンク要素の重なりのベース順序指定 */
}

.hoge2:hover {
  filter: alpha(opacity=0);
  /* IE 6,7*/
  -ms-filter: "alpha(opacity=70)";
  /* IE 8,9 */
  -moz-opacity: 0.7;
  /* FF , Netscape */
  -khtml-opacity: 0.7;
  /* Safari 1.x */
  opacity: 1;
  background-color: #345996;
	color: #fff;
	transition: 0.2s ;
  zoom: 1;
  /*IE*/
}

.hoge3 {
  position: relative;
  z-index: 1;
	color: #ccc;
  /* 必要であればリンク要素の重なりのベース順序指定 */
}

.hoge3 a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-indent: -999px;
  z-index: 2;
	color: #fff;
  /* 必要であればリンク要素の重なりのベース順序指定 */
}

.hoge3:hover {
  filter: alpha(opacity=0);
  /* IE 6,7*/
  -ms-filter: "alpha(opacity=70)";
  /* IE 8,9 */
  -moz-opacity: 0.7;
  /* FF , Netscape */
  -khtml-opacity: 0.7;
  /* Safari 1.x */
  opacity: 1;
  background-color: #040e21;
	color: #fff;
	transition: 0.2s ;
  zoom: 1;
  /*IE*/
}