@charset "UTF-8";
/* CSS Document */

/*---------------------------------------------------------------------
【common】
-----------------------------------------------------------------------*/
body { font-family: "メイリオ","Meiryo","ヒラギノ角ゴPro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","Osaka","sans-serif";}
ul { list-style-type: none;}

/*-- リンク挙動 --*/
.over img { transition: 0.3s ease-in-out;}
.over:hover img { opacity: 0.7; filter: alpha(opacity=70);}

/*-- clearfix --*/
.clearfix:before, .clearfix:after { content: " "; display: table;}
.clearfix:after { clear: both;}

/*-- cleartxt(マウスオンで画像が切り替わる場合に付与) --*/
.cleartxt { overflow:hidden; text-indent:100%; white-space:nowrap;}



/*--------------------------------------------------------------
【wrap】
----------------------------------------------------------------*/
#wrap p { font-size: 12px;}
#wrap a { text-decoration: none;}
/*---------------------
.box(幅 1200px)
---------------------*/
#wrap .box { margin: 0 auto; width: 1200px;}



/*--------------------------------------------------------------
【header】
----------------------------------------------------------------*/
/* 言語
--------------------------------------*/
header { background: #000; border-bottom: 3px solid #e50012; color: #fff; min-width: 1200px; padding: 8px 0;}
header p { float: left; line-height: 1.6; padding-left: 6px;}
header a { color: #fff; text-decoration: underline !important;}
header a:hover { text-decoration: none !important;}

header #header_local { margin-left: 50px;}

/*---------- 言語 -----------*/
header #header_language { float: right;}
header #header_language li { border-left: 1px solid #c5c5c5; float: left; font-size: 11px; padding: 3px 8px 3px 15px; position: relative;}
header #header_language li:first-child { border-left: none; padding-left: 0;}

/*-- アクティブ時の文字色 --*/
header #header_language li.current { color: #fff000;}

/* メインメニュー
--------------------------------------*/
/*-- メニュー下境界線(グレー) --*/
#header_nav { border-bottom: 1px solid #dddddd;}

/*-------- メガホビロゴ ---------*/
#header_nav h1 { float: left; padding: 5px 0 0 0;}

/*---------- メニュー -----------*/
#header_nav ul { float: right;}
#header_nav li { float: left; margin-left: 10px; height: 96px; text-align: center; width: 100px;}
#header_nav li a { display: block; height: 96px; width: 100px;}
#header_nav li .menu_txt { color: #333333; display: block; font-size: 10px; line-height: 1.6;}
#header_nav li:hover .menu_txt { color: #fff;}
#header_nav li .menu_txt strong { display: block; font-size:11px; font-weight: bold;}

/*-- 製品情報 --*/
#header_nav li.menu_products:hover { background: #e7161a; transition: 0.3s ease-in-out;}
#header_nav li.menu_products .menu_txt { border-bottom: 6px solid #e7161a;}
#header_nav li.menu_products .menu_icon { background: url(../images/header_menu_products.png) no-repeat; background-position: 0 0; box-sizing: border-box; display: block; height: 56px; padding: 56px 0 0 0;}
#header_nav li.menu_products .menu_icon:hover { background-position: 0 bottom;}

/*-- イベント・特設 --*/
#header_nav li.menu_special:hover { background: #f86d07; transition: 0.3s ease-in-out;}
#header_nav li.menu_special .menu_txt { border-bottom: 6px solid #f86d07;}
#header_nav li.menu_special .menu_icon { background: url(../images/header_menu_special.png) no-repeat; background-position: 0 0;  box-sizing: border-box; display: block; height: 56px; padding: 56px 0 0 0;}
#header_nav li.menu_special .menu_icon:hover { background-position: 0 bottom;}

/*-- 発売カレンダー --*/
#header_nav li.menu_calender:hover { background: #f1bf11; transition: 0.3s ease-in-out;}
#header_nav li.menu_calender .menu_txt { border-bottom: 6px solid #f1bf11;}
#header_nav li.menu_calender .menu_icon { background: url(../images/header_menu_calender.png) no-repeat; background-position: 0 0;  box-sizing: border-box; display: block; height: 56px; padding: 56px 0 0 0;}
#header_nav li.menu_calender .menu_icon:hover { background-position: 0 bottom;}

/*-- 開発ブログ --*/
#header_nav li.menu_blog:hover { background: #54c01a; transition: 0.3s ease-in-out;}
#header_nav li.menu_blog .menu_txt { border-bottom: 6px solid #54c01a;}
#header_nav li.menu_blog .menu_icon { background: url(../images/header_menu_blog.png) no-repeat; background-position: 0 0;  box-sizing: border-box; display: block; height: 56px; padding: 56px 0 0 0;}
#header_nav li.menu_blog .menu_icon:hover { background-position: 0 bottom;}

/*-- リンク --*/
#header_nav li.menu_link:hover { background: #5ec9f1; transition: 0.3s ease-in-out;}
#header_nav li.menu_link .menu_txt { border-bottom: 6px solid #5ec9f1;}
#header_nav li.menu_link .menu_icon { background: url(../images/header_menu_link.png) no-repeat; background-position: 0 0;  box-sizing: border-box; display: block; height: 56px; padding: 56px 0 0 0;}
#header_nav li.menu_link .menu_icon:hover { background-position: 0 bottom;}

/*-- お客様サポート --*/
#header_nav li.menu_support:hover { background: #4851ce; transition: 0.3s ease-in-out;}
#header_nav li.menu_support .menu_txt { border-bottom: 6px solid #4851ce;}
#header_nav li.menu_support .menu_icon { background: url(../images/header_menu_support.png) no-repeat; background-position: 0 0;  box-sizing: border-box; display: block; height: 56px; padding: 56px 0 0 0;}
#header_nav li.menu_support .menu_icon:hover { background-position: 0 bottom;}



/*--------------------------------------------------------------
【content】(コンテンツ)
----------------------------------------------------------------*/
#content { padding: 0 0 64px;}
#content > .box { padding: 22px 0 0 0; position: relative;}



/*--------------------------------------------------------------
【main】(メインコンテンツ)
----------------------------------------------------------------*/
/*---------------------
メイン(幅 930px)
---------------------*/
#main { float: left; margin: 0 auto; width: 930px;}


/* 【パンくず】
--------------------------------------*/
#breadcrumb { margin: 0 0 12px 0;}
#breadcrumb ul { font-size: 0;}
#breadcrumb li { color: #333; display: inline-block; font-size: 13px; line-height: 1.4; margin: 0 6px 0 0; vertical-align: top;}
#breadcrumb li a { color: #333; text-decoration: underline;}
#breadcrumb li a:hover { text-decoration: none;}
#breadcrumb li:first-child:before { content: ''; font-size: 0; margin: 0;}
#breadcrumb li:before { content: '\003e'; font-size: 13px; line-height: 1.4px; margin: 0 4px 0 0;}



/*--------------------------------------------------------------
【sub】(右カラム)
----------------------------------------------------------------*/
/*---------------------
右カラム(幅 250px)
---------------------*/
#sub { float: right; margin: 0 auto; width: 250px;}
#sub h2 { font-size: 0; padding: 0 0 10px;}
/*-- リンク挙動 --*/
#sub a img { transition: 0.3s ease-in-out;}
#sub a:hover img { opacity: 0.7; filter: alpha(opacity=70);}
/*----------------------------------------------------------
要素の隙間(右カラムに要素を作る際使用)
<div id="sub_bland" class="sub_box">
	～
</div>
----------------------------------------------------------*/
#sub .sub_box { margin: 0 auto 32px;}

/*----------------------------------------------------------
バナーリスト(右カラムにバナーを入れる要素を作る際使用)

<ul class="bnr_list">
 <li><a href="#"><img src="bnr.jpg" alt=""></a></li>
</ul>
----------------------------------------------------------*/
#sub .bnr_list a { display: block; font-size: 0;}


/* MEGAHOBBY BRAND
--------------------------------------*/
/*-------- ブランドメニュー ---------*/
#sub_bland .bland_nav > li { position: relative;}
#sub_bland .bland_nav li a { background: #f2f6f9; border-bottom: 1px solid #e0e0e0; box-sizing: border-box; color: #000; display: block; height: 50px; width: 250px;}
#sub_bland .bland_nav li a:hover { background: #c5101e; color: #fff;}

/*-- arrow --*/
#sub_bland .bland_nav li .menu_arrow { background: url(../images/sub_arrow01.png) no-repeat; background-position: 0 0; box-sizing: border-box; display: block; height: 50px; padding: 0 0 0 28px;}
#sub_bland .bland_nav li .menu_arrow:hover { background-position: 0 bottom;}

/*-- メニューテキスト --*/
#sub_bland .bland_nav li .menu_txt { display: block; font-size: 12px; line-height: 1.4; padding: 8px 0 0 30px; position: relative;}
#sub_bland .bland_nav li strong { display: block; font-size: 13px; font-weight: bold;}

/*-------- ブランドメニュー中身 ---------*/
#sub_bland .bland_nav .child { align-items: center; background: #fff; border: 1px solid #e0e0e0; box-sizing: border-box; display: flex; flex-wrap: wrap; padding: 15px 15px 0 15px; position: absolute; top: 0; right: 250px; width: 448px;}
#sub_bland .bland_nav .child li { flex: 1 1 calc(50% - 15px); font-size: 12px; line-height: 1.4; margin: 0 15px 15px 0; width: 200px;}
#sub_bland .bland_nav .child li:nth-child(even) { margin-right: 0;}
/*-- arrow --*/
#sub_bland .bland_nav .child li a { background: #fff url(../images/sub_arrow02.png)no-repeat 10px center; border: none; height: auto; padding: 10px 0 10px 25px; width: 200px;}
#sub_bland .bland_nav .child li a:hover { background: #c5101e url(../images/sub_arrow02_on.png)no-repeat 10px center;}


/* SNS
--------------------------------------*/
#sub_sns .sns_list { border-top: 1px dotted #000;}
#sub_sns .sns_list dl { border-bottom: 1px dotted #000; padding: 10px 4px 6px;}

/*-- snsアイコン --*/
#sub_sns .sns_list dt { float: left;}

/*-- snsテキストリンク --*/
#sub_sns .sns_list dd { float: right; font-size: 12px; line-height: 1.4; padding: 3px 0; width: 196px;}
#sub_sns .sns_list dd a { color: #000;}
#sub_sns .sns_list dd a:hover { color: #c5101e;}
#sub_sns .sns_list dd span, #sub_sns dd strong { display: block;}


/* BLOG
--------------------------------------*/
#sub_blog li { margin: 0 0 7px 0;}


/* SPECIAL CONTENTS
--------------------------------------*/
#sub_special .bnr_list { background: #f2f6f9; border: 1px solid #e0e0e0; margin: 0 0 10px 0; padding: 12px 15px;}
#sub_special .bnr_list li { margin: 10px 0 0 0;}
#sub_special .bnr_list li:first-child { margin-top: 0;}


/* RSS2.0
--------------------------------------*/
#sub_rss .btn_list li { margin: 0 0 5px 0;}
#sub_rss .btn_list a { font-size: 0;}



/*--------------------------------------------------------------
【footer】
----------------------------------------------------------------*/
footer { background: #000; padding: 12px 0 70px 0;}

/*-------- フッターロゴ ---------*/
footer .copy_megahobby { align-items: center; color: #bebebe; display: flex; font-size: 10px; line-height: 1.4; padding: 0 10px;}
footer .copy_megahobby li { margin: 0 6px 0 0;}

/*-- コピーライト --*/
footer .copy { color: #bebebe; font-size: 10px; line-height: 1.6; padding: 0 45px;}
footer .copy a { cursor: pointer;}

/*-- コピーライト中身 --*/
footer .copy .child { display: none; margin: 20px 0 0 0;}