@charset "utf-8";
/* bsj2021 hamburger.css */

/*　ハンバーガーボタン　*/
.hamburger {
	display : block;
	position: fixed;
	z-index : 9999;
	right :6%;
	top   : 25px;
	width : 60px;
	height: 60px;
	cursor: pointer;
	text-align: center;
	background-color:#313640;
	color:#FFFFFF;
}

.hamburger:before {
	content: "MENU";
	font-size:90%;
	position:relative;
	margin:auto;
	top:32px;
}

.hamburger span {
  display : block;
  position: absolute;
  width   : 30px;
  height  : 2px ;
  left    : 15px;
  background : #FFFFFF;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition   : 0.3s ease-in-out;
  transition        : 0.3s ease-in-out;
}
.hamburger span:nth-child(1) {
  top: 10px;
}
.hamburger span:nth-child(2) {
  top: 20px;
}
.hamburger span:nth-child(3) {
  top: 30px;
}

/* ナビ開いてる時のボタン */
.hamburger.active{
	background-color:#4C4C4C;
}

.hamburger.active:before {
	content: "CLOSE";
	font-size:90%;
	
}

.hamburger.active span:nth-child(1) {
  top : 20px;
  left: 15px;
  -webkit-transform: rotate(-45deg);
  -moz-transform   : rotate(-45deg);
  transform        : rotate(-45deg);
}

.hamburger.active span:nth-child(2),
.hamburger.active span:nth-child(3) {
  top: 20px;
  -webkit-transform: rotate(45deg);
  -moz-transform   : rotate(45deg);
  transform        : rotate(45deg);
}

/* デザインA 600px～ （スマホ用） */
@media screen and (max-width:599px){
/* スマホ用ハンバーガーボタン 600px以下の範囲に収めるデザインはこの中に記述 */
.hamburger {
	width:7.0em;
	height:7.0em;
	top   :2%;
	right :3%;
}

.hamburger:before {
	content: "MENU";
	font-size:145%;
	position:relative;
	top:65%;
	margin:auto;
	
}

.hamburger span {
  display : block;
  position: absolute;
  width   : 60px;
  height  : 3px ;
  left    : 20px;
  background : #FFFFFF;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition   : 0.3s ease-in-out;
  transition        : 0.3s ease-in-out;
}
.hamburger span:nth-child(1) {
  top: 20px;
}
.hamburger span:nth-child(2) {
  top: 35px;
}
.hamburger span:nth-child(3) {
  top: 50px;
}

/* ナビ開いてる時のボタン */
.hamburger.active{
	background-color:#4C4C4C;
}

.hamburger.active:before {
	content: "CLOSE";
	font-size:145%;
	
}

.hamburger.active span{
	width   : 60px;
  height  : 3px ;
  left    : 20px;
}

.hamburger.active span:nth-child(1) {
  top : 35px;
  left: 20px;
  -webkit-transform: rotate(-45deg);
  -moz-transform   : rotate(-45deg);
  transform        : rotate(-45deg);
}

.hamburger.active span:nth-child(2),
.hamburger.active span:nth-child(3) {
  top: 35px;
  -webkit-transform: rotate(45deg);
  -moz-transform   : rotate(45deg);
  transform        : rotate(45deg);
}

}

/* ドロワーメニュー *//*overflow-y:scroll;*/
/* 外枠はそのまま */
nav.globalMenuSp {
	width: 100%;
	height: 100%;
	position: fixed;
	z-index : 9998;
	top  : 0;
	left : 0;
	color: #000;
	background-color:rgba(242,242,242,0.90);
	text-align: left;
	transform: translateY(-100%);/*transform: translateX(100%);*/
	transition: all 0.6s;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

/* 内枠を追加 */
menu-inner{
	height: 100%;
	overflow-y: auto;
}

nav.globalMenuSp ul {
	width: 70%;
	height: 100%;
	overflow: auto;
	overflow-y:scroll;
	-webkit-overflow-scrolling: touch;
	padding: 0;
	margin: 100px auto 50px auto;
  
}

nav.globalMenuSp ul li {
	width: 100%;
	list-style-type: none;
	padding: 0;
  
}

nav.globalMenuSp ul li a {
  display: block;
  font-weight:bold;
  color: #000;
  text-decoration :none;
}

nav.globalMenuSp ul li a:hover{
	opacity:.75;
}

/*--menu01--*/
nav.globalMenuSp ul li a {
	display: block;
	color: #FFFFFF;
	background-color:#313640;
	text-decoration :none;
	font-size:130%;
	padding: 1.0em 0px 1.0em 2.5em;
	border-bottom:#FFFFFF 1px solid;
	margin:0px 0px 0px 0px;
}

nav.globalMenuSp ul li.menu01-nolink a {
	display: block;
	color: #FFFFFF;
	background-color:#313640;
	text-decoration :none;
	pointer-events:none;
	font-size:130%;
	padding: 1.0em 0px 1.0em 2.5em;
	border-bottom:#FFFFFF 1px solid;
	margin:0px 0px 0px 0px;
}

nav.globalMenuSp .sponsor_banner {
  margin: 30px 50px 50px 50px;
}
nav.globalMenuSp .sponsor_banner img {
  max-width: 50%;
  vertical-align: bottom;
}

/*--menu01 d-arrow01--*/
nav.globalMenuSp ul li a {
     position: relative;
     padding-left: 20px;
}

nav.globalMenuSp ul li a::after{
    position: absolute;
     content: '';
     width: 8px;
     height: 8px;
     border-top: solid 3px #008140;
     border-right: solid 3px #008140;
     -webkit-transform: rotate(45deg);
     transform: rotate(45deg);
     top: 50%;
     right: 6%;
     margin-top: -6px;
}

#d-menu05 a::before,
#d-menu06 a::before,
#d-menu08 a::before,
#d-menu14 a::before,
#d-menu15 a::before,
#d-menu16 a::before {
	content: 'NEW';
	margin-top: -13px;
	padding: 2px 5px;
	font-size: 85%;
	animation: blinkAnimeS2 2s infinite alternate;
	position:  absolute;
	top: 50%;
	right: 70px;
}


/*--menu02--*/
nav.globalMenuSp ul li.menu02 a {
	display: block;
	color: #FFFFFF;
	background-color:#008140;
	text-decoration :none;
	font-size:130%;
	padding: 1.0em 0px 1.0em 2.5em;
	border-bottom:#FFFFFF 1px solid;
	margin:0px 0px 0px 0px;
}

/*--menu02 d-arrow02--*/
li.d-arrow02 a {
     position: relative;
     padding-left: 20px;
}

li.d-arrow02 a::before{
    position: absolute;
     content: '';
     width: 6px;
     height: 6px;
     border-top: solid 2px #000000;
     border-right: solid 2px #000000;
     -webkit-transform: rotate(45deg);
     transform: rotate(45deg);
     top: 50%;
     right: 6%;
     margin-top: -4px;
}

li.d-arrow02-half a {
     position: relative;
     padding-left: 20px;
}

li.d-arrow02-half a::before{
    position: absolute;
     content: '';
     width: 6px;
     height: 6px;
     border-top: solid 2px #000000;
     border-right: solid 2px #000000;
     -webkit-transform: rotate(45deg);
     transform: rotate(45deg);
     top: 50%;
     left: 12.5%;
     margin-top: -4px;
}

/*--menu03--*/
nav.globalMenuSp ul li.menu03 a {
	width:47%;
	display:block;
	color: #313640;
	text-align:center;
	font-size:150%;
	font-weight:bold;
	float:left;
	background-color:rgba(239,234,64,0.50);
	border-radius:22.5px;
	padding: 1.0em 0px 1.0em 0em;
	margin:0px 10px 30px 10px;
}

nav.globalMenuSp ul li.current a{
	background-color:rgba(239,234,64,1.0);
}

/* 2列の後の回り込みを解除 */
nav.globalMenuSp ul li#d-menu01 a {
	clear:both;
}

/*--close--*/
nav.globalMenuSp ul li.close a {
	display: block;
	color:#FFFFFF;
	background: url(../img/close.png) no-repeat #4C4C4C;
	text-indent:-9999px;
	padding: 1.25em 0px 1.25em 2.5em;
	margin:20px 0px 0px 0px;
}

/* デザインA 600px～ （スマホ用） */
@media screen and (max-width:599px){
/* スマホ用ハンバーガーメニュー 600px以下の範囲に収めるデザインはこの中に記述 */
nav.globalMenuSp ul {
	width: 90%;
	height: 100%;
	overflow: auto;
	overflow-y:scroll;
	-webkit-overflow-scrolling: touch;
	font-size:195%;
	padding: 0;
	margin: 200px auto 50px auto;
  
}

nav.globalMenuSp ul li.menu01 a{
	padding: 1.25em 0px 1.25em 1.5em;
}

nav.globalMenuSp ul li.menu01-nolink a{
	padding: 1.25em 0px 1.25em 1.5em;
}

/*--menu01 d-arrow01--*/
li.d-arrow01 a {
     position: relative;
     padding-left: 20px;
}

li.d-arrow01 a::before{
    position: absolute;
     content: '';
     width: 13px;
     height: 13px;
     border-top: solid 3px #008140;
     border-right: solid 3px #008140;
     -webkit-transform: rotate(45deg);
     transform: rotate(45deg);
     top: 50%;
     right: 6%;
     margin-top: -6px;
}

nav.globalMenuSp ul li.menu02 a{
	padding: 1.25em 0px 1.25em 1.5em;
}


}

/* このクラスを、jQueryで付与・削除する */
nav.globalMenuSp.active {
  transform: translateY(0%);
}

/*  666px～737px (スマートフォン・横) */
@media screen and (min-width:666px) and (max-width:737px) {
	
li.d-arrow01 a::before{
	left: 4%;
}

nav.globalMenuSp ul li.menu02 a {
	padding-left: 2.5em;
}

li.d-arrow02 a::before{
	left: 4%;
}

li.d-arrow02-half a::before{
	left: 8%;
}

nav.globalMenuSp ul li.menu03 a {
	padding-left: 2.6em;
}

li.d-arrow03 a::before{
	left: 4%;
}

nav.globalMenuSp .sponsor_banner {
  margin: 30px 50px 50px 50px;
}
nav.globalMenuSp .sponsor_banner img {
  max-width: 25%;
  vertical-align: bottom;
}

}