@charset "utf-8";

.headBox nav {
	clear: left;
	background: #0082ca;
	padding: 10px 0;
	text-align: center;
	border-bottom: 2px solid #585858;
	border-top: 2px solid #585858;
}

.headBox nav .menu {
	margin-bottom: 10px;
}

.headBox nav .menu li a img {
	transition: all .5s ease;
}

.headBox nav .menu li a img:hover {
	opacity: 0.2;
}

.headBox nav .menu li {
	display: inline-block;
	width: 24%;
	margin: 0 .5%;
}

.headBox nav .menu li.btn01 {
	background: url(../img/btn_main01_o.gif) no-repeat;
	background-size: cover;
}

.headBox nav .menu li.btn02 {
	background: url(../img/btn_main02_o.gif) no-repeat;
	background-size: cover;
}

.headBox nav .menu li.btn03 {
	background: url(../img/btn_main03_o.gif) no-repeat;
	background-size: cover;
}

.headBox nav .menu li.btn04 {
	background: url(../img/btn_main04_o.gif) no-repeat;
	background-size: cover;
}

.headBox nav .sns li {
	display: inline-block;
	padding: 0 5px;
	width: 7%;
}



/***** モーダルウィンドウ *****/

#sp-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  _background: rgba(7,135,204,0.9);
  background: rgba(136,200,235,0.9);
  overflow: hidden;
  z-index: 1000;
  transition: all .3s ease-in;
  visibility: hidden;
  opacity: 0;
}
 
.open-menu #sp-menu {
  visibility: visible;
  opacity: 1;
}
 
#sp-menu-position {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

#sp-menu .container {
	background: #FFF;
	border: solid 2px #0381cd;
}

#sp-menu .container h2 {
	margin-top: 10px;
}

#sp-menu .btnClose {
	text-align: right;
	font-size: 2.6rem;
	margin-right: 10px;
}

#sp-menu .btnClose i {
	transition: color .5s ease-out;
}

#sp-menu .btnClose i:hover {
	cursor: pointer;
	color: #FFF;
}



/***** 固定メニュー *****/

.fix-header {
	top: -100px;
	left: 0;
	text-align: center;
	width: 100%;
	position: fixed;
	opacity: 0;
    display: none;
	z-index: 1000;
	background: url(../img/bg_head.gif);
	text-align: center;
}

.fix-header > div {
	padding: 10px;
}

.fix-header > div h1 {
	width: 46%;
	margin: 0 27%;
}

.fix-header p.sega {
	position: absolute;
	left: 5px;
	top: 5px;
	width: 16%;
	margin: 0;
	padding: 0;
}

.fix-header p.switch {
	position: absolute;
	right: 0;
	top: 0;
	width: 7%;
	margin: 0;
	padding: 0;
}

.fix-header p.sega img,.fix-header p.switch img {
	height: 100%;
}


@media (min-width: 768px) /*　中デバイス（タブレット, 768px 以上）　*/
{

.headBox nav .sns li {
	width: 5%;
}

}

@media (min-width: 992px) /*　大デバイス（デスクトップ, 992px 以上）　*/
{

.headBox nav .navBox {
	max-width: 1110px;
	margin: 0 auto;
}

.headBox nav .menu {
	width: 85%;
	float: left;
	margin-bottom: 0;
}

.headBox nav .sns li {
	padding: 0 5px;
	width: 4%;
	margin-top: 10px;
}

/***** モーダルウィンドウ *****/

#sp-menu .btnClose {
	font-size: 4rem;
}



/***** 固定メニュー *****/

.fix-header > div h1 {
	width: 26%;
	margin: 0 37%;
}

.fix-header p.sega {
	left: 10px;
	top: 10px;
	width: 100px;
}

.fix-header p.switch {
	width: 60px;
}

}

@media (min-width: 1200px) /*　特大デバイス（ワイド・デスクトップ, 1200px 以上）　*/
{


}