@charset "UTF-8";

html{

 background-image: url(../images/bgr.png) !important;
    background-color: #0C95AA !important;
    background-repeat: no-repeat !important;
    background-position: center top !important;

}

/*
.granner-bg {
    background-image: url(../images/bgr.png);
    background-color: #0C95AA;
    background-repeat: no-repeat;
    background-position: center top;
}
*/




.pc { display: block !important; }
.sp { display: none !important; }


#ct_bg #Tomica-wrapper-tp {
	width: 960px;
	margin-right: auto;
	margin-left: auto;
	padding-top: 5px;
	text-align: left;
	background-color: none;
	padding-right: 5px;
	padding-left: 5px;
}




.main_box nav {
padding: 20px;
background-image: url(../images/base@2x.png);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
margin-top: 1px;
margin-bottom: 20px;
}
.main_box nav ul {
display:flex;
justify-content: space-around;
flex-wrap:wrap;
}



.banner-wrapper{
width: 60%;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
}
.grannerFoot {
background-color: #08404E;
text-align: center;
color: #FFFFFF;
font-size: 0.8em;
padding: 5px;
}


.BannerZone {
display:flex;
justify-content: space-around;
flex-wrap:wrap;
}

ul.BannerZone li{
width: 50%;
text-align: center;
}


ul.BannerZone li img {
width: 70%;
}


nav ul .m1 {
width: 215px;
height: 56px;
background-image: url(../images/m1.png);
background-repeat: no-repeat;
/*text-indent: -7777px;*/
transition: all 0.3s;
}



nav ul .m1:hover {

background-image: url(../images/m1on.png);
transform: translate(0px,-8px);
}



nav ul .m2 {
width: 215px;
height: 56px;
background-image: url(../images/m2.png);
background-repeat: no-repeat;
/*text-indent: -7777px;*/
transition: all 0.3s;
}



nav ul .m2:hover {

background-image: url(../images/m2on.png);
transform: translate(0px,-8px);
}






nav ul .m3 {
width: 215px;
height: 56px;
background-image: url(../images/m3.png);
background-repeat: no-repeat;
/*text-indent: -7777px;*/
transition: all 0.3s;
}



nav ul .m3:hover {

background-image: url(../images/m3on.png);
transform: translate(0px,-8px);
}


nav ul .m4 {
width: 215px;
height: 56px;
background-image: url(../images/m4.png);
background-repeat: no-repeat;
/*text-indent: -7777px;*/
transition: all 0.3s;
}

nav ul .m4:hover {

background-image: url(../images/m4on.png);
transform: translate(0px,-8px);
}


nav ul li:hover img {
filter:alpha(opacity=0);
	-ms-filter:""alpha(opacity=0)"";
	-moz-opacity:0.0;
	-khtml-opacity:0.0;
	opacity:0.0;
}


.granner-contents-top {
margin-bottom: 20px;
}



.granner-contents {
margin-bottom: 20px;
background-color: #000000;
background-image: url(../images/content_title_bg.jpg);
background-repeat: no-repeat;
background-position: center top;
padding-top: 10px;
padding-left: 12px;
padding-right: 12px;
padding-bottom: 10px;
}


.contentTitles {
text-align: center;
padding-bottom: 50px;
}
.granner-con-mainpic {
text-align: center;
margin-bottom: 20px;
}
.granner-subTit-wrapper  {
background-image: url(../images/subtitle_bg.jpg);
background-repeat: repeat-x;
background-position: 0% center;
margin-bottom: 40px;
}

.twitter_corner {
width: 960px;
margin-bottom: 30px;
}

.twitter_wrap {
float: left;
width: 620px;
  }

.twitter_pic {
float: right;
width: 330px;

}


.granner-subTit {
width: 40%;

margin-left: auto;
margin-right: auto;
background-color: #000000;
padding: 10px;
text-align: center;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border: 1px solid #C6C5C5;
}



.item-wrapper {
display:flex;	
justify-content: space-around;
flex-wrap:wrap;
}

.item-Box {
width: 50%;
text-align: center;
margin-bottom: 20px;
}


.item-wrapper::after{
  content:"";
  display: block;
  width:50%;
}




.item-btn {
border-radius: 15px;
background-color: rgb(255, 76, 0);
width: 80%;
margin-left: auto;
margin-right: auto;
padding-top: 10px;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 10px;
margin-bottom: 15px;
color: #FFFFFF;
font-size: 1.3em;
font-weight: bold;
line-height: 1em;
height: auto;
position: relative;
}
.item-Box p {
text-align: left;
color: #FFFFFF;
font-size: 1em;
line-height: 1.3em;
width: 80%;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
}

.item-attention {
text-align: left;
color: #FFFFFF;
font-size: 1em;
line-height: 1.3em;
width: 80%;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
}

.item-attention a {
color: #FF0000
}

.item-attention a:hover {
color: #FFFF00
}



.item-btn::after{
content: '';
display: inline-block;
width: 28px;
height: 28px;
position: absolute;
right: 5px;
top: 3px;
background-image: url(../images/cart.png);
background-repeat: no-repeat;
z-index: 10;
}


.item-btn:hover{
filter:alpha(opacity=70);
	-ms-filter:""alpha(opacity=70)"";
	-moz-opacity:0.7;
	-khtml-opacity:0.7;
	opacity:0.7;

}


.item-btn2 {
margin-left: auto;
margin-right: auto;
margin-bottom: 15px;
}



.tettei-attention-bar {
	background-color: #000;
	padding-top: 10px;
	padding-bottom: 10px;
}
.tettei-attention {
text-align: left;
color: #FFFFFF;
font-size: 1em;
line-height: 1.3em;
width: 80%;
margin-left: auto;
margin-right: auto;
}

.tettei-attention a {
color: #FF0000
}

.tettei-attention a:hover {
color: #FFFF00
}


.tettei-btn {
border-radius: 15px;
background-color: rgb(255, 200, 0);
width: 80%;
margin-left: auto;
margin-right: auto;
padding-top: 10px;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 10px;
margin-bottom: 15px;
color: #000;
font-size: 1.3em;
font-weight: bold;
line-height: 1em;
height: auto;
position: relative;
}
.tettei-Box p {
text-align: left;
color: #000;
font-size: 1em;
line-height: 1.3em;
width: 80%;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
}


.tettei-btn::after{
content: '';
display: inline-block;
width: 28px;
height: 28px;
position: absolute;
right: 5px;
top: 3px;
}


.tettei-btn:hover{
filter:alpha(opacity=70);
	-ms-filter:""alpha(opacity=70)"";
	-moz-opacity:0.7;
	-khtml-opacity:0.7;
	opacity:0.7;

}

/*event*/

.event-box {
	width: 800px;
	background-color: #333;
	border: 5px solid #4BC678;
	border-radius: 20px;
	margin-left: auto;
	margin-right: auto;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	padding: 20px;
	margin-bottom: 20px;
}
.event-box-L {
	width: 290px;
	float: left;
	text-align: center;
}
.event-box-R {
	width: 480px;
	float: right;
	text-align: left;
}
.Btn-kuwashiku {
	text-align: right;
	margin-top: 30px;
}
.event-box-Title {
	font-weight: bold;
	font-size: 1.8em;
	color: #A9FFC8;
	margin-bottom: 20px;
	line-height: 1.3em;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.event-box .event-box-R p {
	color: #FFFFFF;
}
.event-box-R p a {
	color: #FAE606;
	text-decoration: underline;
}
.event-box-R p a:hover {
	text-decoration: none;
}
.event-box2 {
	width: 700px;
	background-color: #000000;
	border: 5px solid #0099cc;
	border-radius: 20px;
	margin-left: auto;
	margin-right: auto;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	padding: 20px;
	margin-bottom: 20px;
}




/*MOV*/
.embed-container {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	max-width: 95%;
	margin-bottom: 20px;
	margin-left: auto;
	margin-right: auto;
}
.embed-container iframe, .embed-container object, .embed-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}



.mov-wrapper {
display:flex;	
justify-content: flex-start;
flex-wrap:wrap;
}

.mov-Box {
width: 33.33%;
text-align: center;
margin-bottom: 20px;

}


.mov-wrapper::after{
  content:"";
  display: block;
  width:33.33%;
}
.mov-Box h1 {
color: #FFFFFF;
line-height: 1.5em;
}




/*item_mov*/
.embed-container_item { 
		position: relative; 
		padding-bottom: 56.25%; 
		height: 0; 
		overflow: hidden; 
		max-width: 100%; 
} 
.embed-container_item iframe, 
.embed-container_item object, 
.embed-container_item embed { 
		position: absolute; 
		top: 0; 
		left: 0; 
		width: 100%; 
		height: 100%; 
}



/*btn*/
.btn_buy_bg {
    background-image: url(../item/images/bg_bw.jpg);
    margin-bottom: 20px;
    padding-top: 10px;
    padding-bottom: 50px;
}
.btn_buy {
	max-width: 60%;
	margin-left: auto;
	margin-right: auto;
}

/*btn_gold*/
.btn_gold_buy_bg {
    background-image: url(../item/images/bg_gold_bw.jpg);
    margin-bottom: 20px;
    padding-top: 10px;
    padding-bottom: 50px;
}
.btn_gold_buy {
	max-width: 60%;
	margin-left: auto;
	margin-right: auto;
}




/*202004_owabi_modal*/
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
.content{
    margin: 0 auto;
    padding: 40px;
}
.modal{
    display: none;
    height: 100vh;
    position: fixed;
    top: 0;
    width: 100%;
	z-index: 1111;
}
.modal__bg{
    background: rgba(0,0,0,0.8);
    height: 100vh;
    position: absolute;
    width: 100%;

}
.modal__content{
    background: #fff;
    left: 50%;
    padding: 40px;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 85%;
	overflow: scroll;
	height: 90vh;
}


/*202006_owabi_modal*/
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
.content{
    margin: 0 auto;
    padding: 40px;
}
.modal2{
    display: none;
    height: 100vh;
    position: fixed;
    top: 0;
    width: 100%;
	z-index: 1111;
}
.modal__bg2{
    background: rgba(0,0,0,0.8);
    height: 100vh;
    position: absolute;
    width: 100%;

}
.modal__content2{
    background: #fff;
    left: 50%;
    padding: 40px;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 85%;
	overflow: scroll;
	height: 90vh;
}

/*202006_owabi_modal_eagletomica*/
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
.content{
    margin: 0 auto;
    padding: 40px;
}
.modal3{
    display: none;
    height: 100vh;
    position: fixed;
    top: 0;
    width: 100%;
	z-index: 1111;
}
.modal__bg3{
    background: rgba(0,0,0,0.8);
    height: 100vh;
    position: absolute;
    width: 100%;

}
.modal__content3{
    background: #fff;
    left: 50%;
    padding: 40px;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 85%;
	overflow: scroll;
	height: 90vh;
}

/*202006_owabi_modal_aerotomica*/
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
.content{
    margin: 0 auto;
    padding: 40px;
}
.modal4{
    display: none;
    height: 100vh;
    position: fixed;
    top: 0;
    width: 100%;
	z-index: 1111;
}
.modal__bg4{
    background: rgba(0,0,0,0.8);
    height: 100vh;
    position: absolute;
    width: 100%;

}
.modal__content4{
    background: #fff;
    left: 50%;
    padding: 40px;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 85%;
	overflow: scroll;
	height: 90vh;
}

/*202006_owabi_modal_screwtomica*/
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
.content{
    margin: 0 auto;
    padding: 40px;
}
.modal5{
    display: none;
    height: 100vh;
    position: fixed;
    top: 0;
    width: 100%;
	z-index: 1111;
}
.modal__bg5{
    background: rgba(0,0,0,0.8);
    height: 100vh;
    position: absolute;
    width: 100%;

}
.modal__content5{
    background: #fff;
    left: 50%;
    padding: 40px;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 85%;
	overflow: scroll;
	height: 90vh;
}

/*202006_owabi_modal_tsume*/
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
.content{
    margin: 0 auto;
    padding: 40px;
}
.modal6{
    display: none;
    height: 100vh;
    position: fixed;
    top: 0;
    width: 100%;
	z-index: 1111;
}
.modal__bg6{
    background: rgba(0,0,0,0.8);
    height: 100vh;
    position: absolute;
    width: 100%;

}
.modal__content6{
    background: #fff;
    left: 50%;
    padding: 40px;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 85%;
	overflow: scroll;
	height: 90vh;
}

/*202009_owabi_modal*/
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
.content{
    margin: 0 auto;
    padding: 40px;
}
.modal7{
    display: none;
    height: 100vh;
    position: fixed;
    top: 0;
    width: 100%;
	z-index: 1111;
}
.modal__bg7{
    background: rgba(0,0,0,0.8);
    height: 100vh;
    position: absolute;
    width: 100%;

}
.modal__content7{
    background: #fff;
    left: 50%;
    padding: 40px;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 85%;
	overflow: scroll;
	height: 90vh;
}

/*202011_owabi_modal*/
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
.content{
    margin: 0 auto;
    padding: 40px;
}
.modal8{
    display: none;
    height: 100vh;
    position: fixed;
    top: 0;
    width: 100%;
	z-index: 1111;
}
.modal__bg8{
    background: rgba(0,0,0,0.8);
    height: 100vh;
    position: absolute;
    width: 100%;

}
.modal__content8{
    background: #fff;
    left: 50%;
    padding: 40px;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 85%;
	overflow: scroll;
	height: 90vh;
}


/*202012_owabi_modal*/
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
.content{
    margin: 0 auto;
    padding: 40px;
}
.modal9{
    display: none;
    height: 100vh;
    position: fixed;
    top: 0;
    width: 100%;
	z-index: 1111;
}
.modal__bg9{
    background: rgba(0,0,0,0.8);
    height: 100vh;
    position: absolute;
    width: 100%;

}
.modal__content9{
    background: #fff;
    left: 50%;
    padding: 40px;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 85%;
	overflow: scroll;
	height: 90vh;
}

/*202012_owabi_modal2*/
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
.content{
    margin: 0 auto;
    padding: 40px;
}
.modal10{
    display: none;
    height: 100vh;
    position: fixed;
    top: 0;
    width: 100%;
	z-index: 1111;
}
.modal__bg10{
    background: rgba(0,0,0,0.8);
    height: 100vh;
    position: absolute;
    width: 100%;

}
.modal__content10{
    background: #fff;
    left: 50%;
    padding: 40px;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 85%;
	overflow: scroll;
	height: 90vh;
}