@charset "utf-8";
@media only screen and (max-width: 896px) {/*????????896px?????*/
}
@media only screen and (max-width: 500px) {/*????????500px?????*/
}



/*?????--------------------------------------------------*/
#wrapper>header{
    background: #000;
	min-height: 60px;
}
    /*???? ????????????--------------------------------------------------*/
        #header_meta{/*?????*/
            width: 100%;
            max-width: 980px;
            height: 36px;
            line-height: 36px;
            padding: 0px;
            box-sizing: border-box;
            display: flex;
            justify-content: space-between;
            position: relative;
            z-index: 80;
        }
			#konami{/*?????*/
				vertical-align: middle;
				width: 130px;
			}
			.roginlanguage{/*???????????*/
				display: flex;
				justify-content: flex-end;
				align-items: center;
				margin: 0;
			}
				.roginlanguage > *{
					font-size: var(--common-fontS2_s);
					white-space: nowrap;
					line-height: 1.5;
					margin: 0 10px;
				}
				.roginlanguage svg{
					width: var(--common-fontS2_m);
					fill:#00cccc;
					margin: 0 5px;
				}
				.roginlanguage .btn{
					padding: 3px 10px;
					min-width: auto;
				}

					/*?????*/
					#roginlogout{position: relative;}
						#roginlogout .waku{/*????*/
							color: #00cccc;
						}
							#roginlogout .waku > *{margin: 0 5px;}

						#roginlogout .logout{/*?????*/
							position: absolute;
							display: none;
							width: 100%;
							background: #fff;
							color: #888;
							padding: 10px 0;
							box-sizing: border-box;
							justify-content: center;
						}
						#roginlogout:hover .logout{display: flex;}
							#roginlogout .logout svg {
								fill:#888;
								vertical-align: middle;
							}
					/*???*/
					#language #nowlanguage{
						cursor: pointer;
						padding: 2px 10px;
						color: #ffba00;
						position: relative;
					}

						#language #nowlanguage::after {
							content: "";
							display: block;
							box-sizing: border-box;
							cursor: pointer;
							z-index: 1;
							margin: -4px 0 0 5px;
							width: 8px;
							height: 8px;
							border: 4px solid;
							border-color: transparent transparent #ffba00 #ffba00;
							transform: rotate(-45deg);
						}
						#lang_mane{
							color: #000000;
							background: #ffffff;
							overflow: hidden;
							display: none;
							position: absolute;
							padding: 0px 5px 5px;
							right: 0;
						}
							#language:hover  #lang_mane{display: block;}

							#lang_mane .ocgtcg{
								border: 1px solid #000;
								padding: 10px 5px 0px;
								margin: 20px 5px 5px;
							}
								#lang_mane p{
									text-align: center;
									padding: 0;
									line-height: 1;
									margin-top: -1.5rem;
									font-weight: bold;
									background: #fff;
									display: block;
								}
								#language ul{
									padding: 5px 10px 0;
									z-index: 300;
								}
									#language ul a{
										padding: 4px 1.4rem;
										line-height: 1.2;
										margin: 10px 0;
										border: none;
										border-bottom: 1px solid #fff;
										text-align: left;
										font-size: var(--common-fontS2_m);
										position: relative;
										color: #656565;
										white-space: nowrap;
										display: block;
									}
									#language ul a:hover{
										border-color:#656565;
										text-decoration: none;
									}
									#language ul a::before {
										content: "";
										position: absolute;
										left: -5px;
										bottom: 0;
										top: 35%;
										display: block;
										box-sizing: border-box;
										cursor: pointer;
										z-index: 1;
										width: 8px;
										height: 8px;
										border: 1px solid;
										border-color: transparent transparent #656565 #656565;
										transform: rotate(225deg);
									}

    /*????????????????????????--------------------------------------------------*/
        #header_menu{/*?????CSS???*/
            width: 100%;
            border-top: 1px solid #666666;
            padding: 0 0 2px;
        }
            #header_menu nav{
                width: 100%;
                max-width: 980px;
                position: relative;
            }
                /*???????????????--------------------------------------------------*/

                        /*????????????--------------------------------------------------*/
                /*???????????--------------------------------------------------*/
                    #header_menu nav{
                        display: flex;
                        align-items: flex-end;
                        margin-top: -1px;
                        width: 100%;
                        max-width: 980px;
                    }
                        /*????????????--------------------------------------------------*/
						#header_menu .logo{
							flex: 1;
							min-width: auto;
							z-index: 10;
							display: flex;
							justify-content: flex-start;
						}
							#header_menu .logo a{/*??????*/
								background: center center no-repeat;
								background-size: contain;
								margin: 0 0 0;
								height: 60px;
								width: 100px;
								aspect-ratio: 5 / 3;
								display: flex;
								justify-content: center;
								align-items: center;
								box-sizing: border-box;
								min-height: 39px;
								min-width: 64px;
							}


								#header_menu h1{/*????????????????css???*/
									display:block;
									text-indent:-9999px;
									overflow:hidden;
									background-repeat: no-repeat;
									background-position: center;
									background-size: contain;
									width: 70px;
									height: 42px;
								}
								#header_menu nav h1:hover {/*?????????????*/
									filter: drop-shadow(0px 0px 5px rgba(77,176,255,0.6));
									transition:.2s;
								}
@media only screen and (max-width: 500px) {/*????????500px?????*/
	#header_menu h1{/*????????????????css???*/
		width: 70px;
		height: 42px;
	}
}
                        /*???????????? ????????--------------------------------------------------*/
							#header_menu.scroll{
								position: fixed;
								top: 0;
								z-index: 100;
								transition: .2s;
							}
							#header_menu.scroll .logo a{/*??????*/
								transition: .2s;
							}

                        /*???????????????--------------------------------------------------*/
                            #header_menu .main_menu{
                                display: flex;
								justify-content: flex-end;
                                box-sizing: border-box;

                            }
								#header_menu .main_menu li a{
									display: flex;
									flex-wrap: nowrap;
									margin: 0 10px 5px 0;
									color: #ffffff;
									text-align: center;
									border: 2px solid transparent;
									border-radius: 10px;
									font-size: var(--common-fontS_s);
									padding: 5px 1px;
								}

								#header_menu.scroll .main_menu li a {/*????????*/
									transition: .2s;
								}
								#header_menu .main_menu li:hover a{/*???????*/
									text-decoration: none;
									border-color: #ffffff;

									background: -moz-linear-gradient(top,  rgba(65,147,212,0) 0%, rgba(65,147,212,1) 90%, rgba(65,147,212,1) 100%);
									background: -webkit-linear-gradient(top,  rgba(65,147,212,0) 0%,rgba(65,147,212,1) 90%,rgba(65,147,212,1) 100%);
									background: linear-gradient(to bottom,  rgba(65,147,212,0) 0%,rgba(65,147,212,1) 90%,rgba(65,147,212,1) 100%);
									filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#004193d4', endColorstr='#4193d4',GradientType=0 );
									transition:.2s;
								}
								#header_menu .main_menu li.my:hover a{/*??????????????*/
									background: -moz-linear-gradient(top,  rgba(0,204,204,0) 0%, rgba(0,204,204,1) 90%, rgba(0,204,204,1) 100%);
									background: -webkit-linear-gradient(top,  rgba(0,204,204,0) 0%,rgba(0,204,204,1) 90%,rgba(0,204,204,1) 100%);
									background: linear-gradient(to bottom,  rgba(0,204,204,0) 0%,rgba(0,204,204,1) 90%,rgba(0,204,204,1) 100%);
									filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00349d5c', endColorstr='#349d5c',GradientType=0 );
								}
									#header_menu .main_menu li h3{/*PC?????????????????*/
										display: flex;
										height: 27px;
										align-items: center;
										justify-content: center;
										text-align: center;
										width: 100%;
										line-height: 1.2;
										font-size: var(--common-fontS2_ss);
									}


									#header_menu ul svg{/*??????????*/
										height: 24px;
										display: block;
										margin: 0 auto 2px;
										margin-right: 3px;
										fill:#fff;
									}


									/*?????????????*/
									#header_menu .type1{display: none}


                        /*??????????????--------------------------------------------------*/
							#header_menu .sab_menu ul{
								position: absolute;
							}
								#header_menu .main_menu .sab_menu a{
									border-bottom:none;
									border-radius:10px 10px 0 0;
									position: relative;
									z-index: 10;
								}
								#header_menu .main_menu .sab_menu > a{
									justify-content: center;
								}

								/*???????????????TOP???????*/
                                #header_menu .menu_top,
                                #header_menu .menu_btn_pagetop,
                                #header_menu .sab_menu ul{
                                    display: none;
                                }
									#header_menu .sab_menu:hover ul{
										display: block;
										background: #4193D4;
										border: 2px solid #ffffff;
										border-radius:0 10px 10px 10px;
										padding: 12px;
										z-index: 3;
										margin: -7px 0 0 0;
										transition:.2s;
									}
									#header_menu .sab_menu.my:hover ul{
										background: #00cccc;
									}
										#header_menu .sab_menu li{
											display: block;
											padding: 0;
											border: none;
										}
											#header_menu .sab_menu li a{
												padding: 4px 1.4rem;
												line-height: 2rem;
												border: none;
												border-bottom: 1px solid #4193D4 !important;
												text-align: left;
												font-size: var(--common-fontS2_s);
												position: relative;
											}
                            #header_menu .sab_menu.my li a{border-color:#00cccc !important;}
                            #header_menu .sab_menu li a:hover{border-color:#ffffff !important;}
                            #header_menu .sab_menu li a::before {
                                content: "";
                                position: absolute;
                                left: 0px;
                                bottom: 0;
                                top: 30%;
                                display: block;
                                box-sizing: border-box;
                                cursor: pointer;
                                z-index: 1;
                                width: 8px;
                                height: 8px;
                                border: 1px solid;
                                border-color: transparent transparent #ffffff #ffffff;
                                transform: rotate(225deg);
                            }
						@media only screen and (max-width: 896px) {/*????????896px?????*/
							#header_menu .main_menu,/*??????????*/
							#header_menu #menber_menu .logo,
							#header_menu #menber_menu
							{display: none}

							#header_menu {position: relative}

						}
/*?????--------------------------------------------------*/
/*???? ?????--------------------------------------------------*/
	/*??????????*/
	#spnav_btn{
		margin: auto 20px;
		display: none;
		cursor: pointer;
	}
		#spnav_btn svg{
			width: 32px;
			height: 32px;
			fill:#fff;
		}
	@media only screen and (max-width: 896px) {/*????????896px?????*/
		#spnav_btn{display: block}
	}
	/*??????????*/
#spnav{
    background: rgba(0,0,0,1);
    display: none;
    position: absolute;
    z-index: 60;
    width: 100%;
    height: 100%;
}

	#spnav li{
		border-bottom: 1px solid #ffffff;
		background: #000000;
	}
	#spnav li.my{
		background: #00cccc;
	}

	#spnav .rogin{
		display: flex;
		justify-content: space-between;
		padding: 5px 5px 5px 10px;
		align-items: center;
	}
		#spnav .rogin .rogin_btn{
			color: #ffffff;
			font-weight: bold;
			margin: 0;
			font-size: var(--common-fontS_s);
		}
	#spnav .rogin a{
		display: inline-block;
		background: #fff;
		color: #656565;
		border-radius: 10px;
		font-size: var(--common-fontS_s);
		font-weight: bold;
		padding: 5px 10px 5px 5px;
	}
		#spnav .rogin a svg{
			margin-right: 5px;
			width: 25px;
			height: 25px;
		}
			#spnav .rogin a path{fill: #656565;}

	#spnav .sab_menu{
		position: relative;
		background: #303030;
	}
		#spnav li.my.sab_menu{
			background: #0a7070;
		}
		#spnav .sab_menu:after{
			content: "";
			display: block;
			width: 10px;
			height: 10px;
			position: absolute;
			border: 2px solid;
			border-color: transparent transparent #ffffff #ffffff;
			transform: rotate(-45deg);
			right: 22px;
			top: 25%;
		}
		#spnav .sab_menu.op:after{
			transform: rotate(135deg);
			top: 20px;
		}

			#spnav .sab_menu li{
				border-bottom: none;
				border-top:  1px solid #ffffff;
			}

#spnav .sab_menu .main{
    margin-right: 60px;
    background: #000000;
}
#spnav .sab_menu.my .main{
    margin-right: 60px;
    background: #00cccc;
}
#spnav li.sab_menu li{background: #303030;}
#spnav li.my.sab_menu li{background: #0a7070;}
#spnav a{
    color: #ffffff;
    padding: 10px;
    display: block;
}
#spnav a:hover{
    text-decoration: none;
    opacity: .8;
}
#spnav li.sab_menu li a{
    position: relative;
    padding: 10px 10px 10px 50px;
}
#spnav li.sab_menu li a::before {
content: "";
    position: absolute;
    left: 20px;
    bottom: 0;
    top: 40%;
    display: block;
    box-sizing: border-box;
    cursor: pointer;
    z-index: 1;
    width: 8px;
    height: 8px;
    border: 1px solid;
    border-color: transparent transparent #ffffff #ffffff;
    transform: rotate(225deg);
}
#spnav svg{
    width: 30px;
    height: 30px;
    margin-right: 10px;
    display: inline-block;
    vertical-align: middle;
    fill:#ffffff;
}
#spnav h3{
    display: inline-block;
    font-weight: bold;
    padding-right: 40px;
    font-size: var(--common-fontS_m);
}
#spnav .close{
    padding: 20px;
    text-align: center;
    font-weight: bold;
    color: #ffffff;
    background: #000000;
    cursor: pointer;
}
#spnav .close:hover{opacity: .8;}
#spnav .close span{    margin-right: 5px;}

#spnav .menu_top,#spnav .logo,#spnav .type2,#spnav .menu_btn_pagetop,
#spnav .sab_menu ul{display: none;}

#spnav .rogout{
    display: flex;
    justify-content: center;
}
#spnav .rogout >a{
    display: flex;
}
#spnav.scroll{
	position: fixed;
	top:0;
	padding-top: 64px;
}

@media only screen and (max-width: 896px) {/*????????896px?????*/

}
@media only screen and (max-width: 500px) {/*????????500px?????*/

}
/*???? ?????--------------------------------------------------*/

/*?????--------------------------------------------------*/
            #ot-sdk-btn.ot-sdk-show-settings, #ot-sdk-btn.optanon-show-settings{
                border-color: transparent;
                border: none  !important;
				background-color: transparent !important;
            }

#ot-sdk-btn.ot-sdk-show-settings:hover, #ot-sdk-btn.optanon-show-settings:hover {
    color: #656565;
    background-color: transparent !important;
    text-decoration: underline;
    cursor: pointer;
}

.menu_btn_pagetop{
	position: fixed;
	bottom: 10px;
	right: 10px;
	padding: 0 10px 2px;
	border-radius: 5px;
	z-index: 10;
}
.menu_btn_pagetop:hover{opacity: .8;}

.menu_btn_pagetop svg{
    height: 25px;
    width: 20px;
    display: block;
    box-sizing: border-box;
    padding: 0px;
    margin: 0;
    fill:#ffffff
}

/*?????--------------------------------------------------*/
/*????--------------------------------------------------*/
nav#title_top_msg.nav_home{
    text-align: center;
}

    nav#title_top_msg.nav_home .title_btn {
        cursor: pointer;
        text-align: center;
    }

nav#title_top_msg.nav_home .title_btn .batu{
    display: inline-block;
    margin: 0;
    background: #ffffff;
}
nav#title_top_msg.nav_home .title_btn .batu span{
            padding-left: 0;
        }

    nav#title_top_msg.nav_home .title_btn:before,
    nav#title_top_msg.nav_home .title_btn:after{
        content: "";
        width: 25px;
        background:
    linear-gradient(to top left,transparent 47%, #fff 50%) no-repeat bottom left/100% 100%;
    }
    nav#title_top_msg.nav_home .title_btn:before{
            background:
    linear-gradient(to top right,transparent 47%, #fff 50%) no-repeat bottom left/100% 100%;

}

nav#title_top_msg.nav_home .in_btn{
    display: flex;
    align-items: flex-start;
    width: 100%;
    max-width: 980px;
    padding: 10px;
    box-sizing: border-box;

}
nav#title_top_msg.nav_home .in_btn p{
    display: block;
    color: #ffffff;
    width: calc(100% - 256px);
    padding: 0 10px;
    box-sizing: border-box;
}
nav#title_top_msg.nav_home .in_btn a{
    display: block;
    border: 1px solid #ffffff;
    background: url("../images/play_bg.png") center center;
    background-size: 40px;
    box-shadow: 0px 0px 20px 20px rgba(0,0,0,0.6) inset;
    text-align: center;
    padding: 10px 10px 5px;
    box-sizing: border-box;
    width: 256px;
}
nav#title_top_msg.nav_home .in_btn a img{
    width: 140px;
    filter: drop-shadow(0px 0px 5px rgba(255,255,255,0.8));
    display: inline-block;
}
nav#title_top_msg.nav_home .in_btn a span{
    color: #ffffff;
    font-weight: bold;
    font-size: var(--common-fontS_l);
    display: inline-block;
    margin: 10px 0 0;
}
nav#title_top_msg.nav_home .in{
    padding: 0 0 50px;
    display: none;
}
@media only screen and (max-width: 896px) {/*????????896px?????*/
}
@media only screen and (max-width: 500px) {/*????????500px?????*/
    nav#title_top_msg.nav_home .title_btn{
        border: none;
    }
    nav#title_top_msg.nav_home .title_btn span{position: relative}
    nav#title_top_msg.nav_home .title_btn span.batu{

    }

    nav#title_top_msg.nav_home .in_btn{
        display: block;
    }
    nav#title_top_msg.nav_home .in_btn p{
        width: 100%;
    }
    nav#title_top_msg.nav_home .in_btn a{
        margin: 20px auto 0;
    }
}
#nav_bottom {
    width: 100%;
    max-width: 980px;
    display: flex;
    flex-wrap: wrap;
    padding: 5px;
    box-sizing: border-box;
}

#nav_bottom a{
    color: #ffffff;
    padding: 0 10px;
    margin: 10px 0;
    width: 50%;
    box-sizing: border-box;
    border: 3px solid transparent;
    border-radius: 10px;
    display: block;

}
@media only screen and (max-width: 896px) {/*????????896px?????*/
    #nav_bottom a{
        margin: 5px 0;
        width: 100%;
    }
}
#nav_bottom a:hover{
    text-decoration: none;
    color: #92feff;
    border-color: #0070b7;
}
#nav_bottom a:hover path{
    stroke: #92feff;
}
#nav_bottom .tex_top{
    display: flex;
    align-items: center;
    border-bottom: 1px solid;
}
#nav_bottom h3{
    flex: 1;
    padding: 0 5px;
    font-size: var(--common-fontS2_xl);
}
#nav_bottom .icon svg {
    height: 30px;
    width: 30px;
    margin: 5px 0 0;
    display: inline-block;
    stroke: #fff;
}
#nav_bottom .icon path{
    stroke: #fff;
}
#nav_bottom a:hover .icon path{
    stroke: #92feff;
}
#nav_bottom .tex_bottom{
    line-height: 1.5;
    padding: 5px;
    opacity: .5;
}
@media only screen and (max-width: 500px) {/*????????500px?????*/
    #nav_bottom .icon svg {height: 20px;}
    #nav_bottom .tex_bottom{font-size: 1.2rem;}
}
/*????--------------------------------------------------*/