@charset "Shift-JIS";

header#id_nav_menu_1            {z-index:9999 !important;}

nav#main-menu .main-menu        {z-index:90 !important;}
nav#main-menu #sp-menu-btn      {z-index:9999 !important;}
nav#main-menu #sp-logo          {z-index:100;}
nav#main-menu #sp-btn #toggle   {z-index:9999 !important;}
nav#main-menu.fixed             {z-index:10000 !important;}
nav#main-menu.fixed #sp-menu-btn{z-index:10000 !important;}

@media screen and (max-width:980px){nav#main-menu{z-index:9999 !important;}}
@media screen and (max-width:980px){header#id_nav_menu_1{z-index:10000 !important;}}

@media screen and (min-width:981px){#main{margin-top:100px;}}
@media screen and (max-width:980px){#main{margin-top:50px;}}

/*テキスト長い場合*/
li.long > a{line-height:20px !important; padding-top:15px !important;}
li.long > a p{font-size:14px;}
@media screen and (max-width:980px){
li.long > a{line-height:18px !important; padding-top:5px !important;}
li.long > a p{font-size:13px;}}

/*
================================================================================================================
メニュー全体
================================================================================================================
*/
nav#main-menu{
position:absolute;
top:50px;
left:0;
width:100%;
z-index:90;}

nav#main-menu::before{
display:block;
content:"";
position:absolute;
left:0;
width:100%;
background-image:url(../img/common/menu/bg_grd.png);
background-size:auto 100%;
background-repeat:repeat-x;
opacity:1;
z-index:1;}

nav#main-menu .none{pointer-events:none;}

@media screen and (min-width:981px){
nav#main-menu .none{display:none;}
nav#main-menu{height:100px; background-color:rgba(18,58,108,.7); border-bottom:5px solid #fff;}
nav#main-menu::before{top:100px; height:20px;}}

@media screen and (max-width:980px){
nav#main-menu .none{display:block;}
nav#main-menu::before{top:70px; height:20px;}}

/*
================================================================================================================
メニュー共通
================================================================================================================
*/
nav > div > ul > li.first-menu > .btn,
nav > div > ul > li.first-menu > a,
nav > div > ul > li > .second-menu ul li,
nav > div > ul > li > .second-menu ul li a{display:block; position:relative; color:#fff; text-align:center; font-family:'M PLUS 1', sans-serif; font-weight:800; transition:all .2s ease; z-index:7;}
nav > div > ul > li.first-menu span{display:block; position:relative; width:100%; height:100%; transition:all .2s ease;}

/*タイトルロゴ*/
nav #menu-logo{width:100%; height:100%;}
nav #menu-logo a{display:flex; width:100%; height:100%; align-items:center; justify-content:center;}
nav #menu-logo a img{position:relative; z-index:999 !important; transition:opacity .3s ease;}
nav #menu-logo a:hover img{opacity:.8;}

nav > div > ul > li.first-menu#twitter span{display:flex; align-items:center; justify-content:center;}
nav > div > ul > li.first-menu#twitter span img{max-width:40px; margin-right:5px;}

/*
========================
第1階層
========================
*/
nav > div > ul > li.first-menu > .btn,
nav > div > ul > li.first-menu > a{font-size:18px;}

@media screen and (max-width:480px){
nav > div > ul > li.first-menu > .btn,
nav > div > ul > li.first-menu > a{font-size:16px;}}

/*オンマウスカーソル*/
nav > div > ul > li.first-menu:hover > .btn,
nav > div > ul > li.first-menu > .btn.open,
nav > div > ul > li.first-menu > a:hover{cursor:pointer;}

/*
========================
第2階層
========================
*/
nav > div > ul > li > .second-menu ul li a{font-size:16px; color:#000;}
nav > div > ul > li > .second-menu ul li a:hover{color:#ff318c;}
@media screen and (max-width:480px){nav > div > ul > li > .second-menu ul li a{font-size:14px;}}
@media screen and (max-width:370px){nav > div > ul > li > .second-menu ul li a{font-size:12px;}}

/*
================================================================================================================
PC
================================================================================================================
*/
@media screen and (min-width:981px){nav > #pc-menu{display:flex;}}
@media screen and (max-width:980px){nav > #pc-menu{display:none;}}

nav > #pc-menu{
width:100%;
height:100%;
max-width:1400px;
align-items:center;
padding:0 10px;
margin:0 auto;}

/*
========================
タイトルロゴ
========================
*/
nav > #pc-menu > #menu-logo{width:200px; text-align:center;}
nav > #pc-menu > #menu-logo img{width:100%;}
@media screen and (max-width:1300px){nav > #pc-menu > #menu-logo{width:120px;}}

/*
========================
メニューメイン
========================
*/
nav > #pc-menu > ul{display:flex; width:calc(100% - 200px); align-items:center; padding:0 20px;}
nav > #pc-menu > ul > li{flex:1;}
nav > #pc-menu > ul > li#twitter{flex:1.4;}
@media screen and (max-width:1300px){nav > #pc-menu > ul{width:calc(100% - 120px);}}
@media screen and (max-width:1200px){nav > #pc-menu > ul{padding:0 0 0 10px;}}

/*
========================
第1階層
========================
*/
nav > #pc-menu > ul > li.first-menu > .btn,
nav > #pc-menu > ul > li.first-menu > a{height:60px; line-height:60px; transform:skew(-30deg); padding:0 15px;}

nav > #pc-menu > ul > li.first-menu span{transform:skew(30deg);}
nav > #pc-menu > ul > li:not(#twitter) span{padding-left:10px;}

@media screen and (max-width:1200px){
nav > #pc-menu > ul > li.first-menu > .btn,
nav > #pc-menu > ul > li.first-menu > a{transform:skew(0); padding:0;}
nav > #pc-menu > ul > li.first-menu span{transform:skew(0);}

nav > #pc-menu > ul > li:not(#twitter) span{padding-left:0;}
nav > #pc-menu > ul > li.first-menu > .btn,
nav > #pc-menu > ul > li.first-menu > a{font-size:15px;}}

@media screen and (min-width:981px) and (max-width:1200px){
nav > #pc-menu > ul > li.first-menu#twitter span img{max-width:30px;}}

/*
========================
第2階層
========================
*/
nav > #pc-menu > ul > li > .second-menu{
display:block !important;
position:absolute;
/*top:100px;*/
top:78px;
left:0;
width:100%;
max-height:0;
overflow:hidden;
opacity:0;
transition:all .2s ease;
z-index:3;}
nav > #pc-menu > ul > li > .second-menu ul{
display:flex;
margin-top:22px;
justify-content:center;
background-color:rgba(255,255,255,.9);
box-shadow:0 5px 5px rgba(0,0,0,.5) , 0 5px 5px rgba(0,0,0,.1) inset;}
nav > #pc-menu > ul > li > .second-menu ul li{height:65px;}
nav > #pc-menu > ul > li > .second-menu ul li a{position:relative; width:100%; height:100%; line-height:65px; padding:0 20px;}

@media screen and (max-width:1200px){
nav > #pc-menu > ul > li > .second-menu ul{flex-wrap:wrap; justify-content:start;}
nav > #pc-menu > ul > li > .second-menu ul li{width:calc(100% / 3);}}

/*第2階層MENU OPEN*/
nav > #pc-menu > ul > li.first-menu:hover > .second-menu{max-height:999px !important; opacity:1 !important;}
nav > #pc-menu > ul > li.first-menu:hover > .second-menu ul{height:auto !important;}

/*
================================================================================================================
SP
================================================================================================================
*/
@media screen and (min-width:981px){nav > #sp-btn,nav > #sp-menu{display:none;}}
@media screen and (max-width:980px){nav > #sp-btn,nav > #sp-menu{display:block;}}

/*メニュー開閉*/
#sp-menu > ul{position:relative; margin-top:-400px !important; opacity:0 !important; transition:all .3s ease; z-index:5; /*visibility:hidden;*/}
.slide #sp-menu > ul{margin-top:0 !important; opacity:1 !important; /*visibility:visible;*/}

/*
========================
タイトルロゴ
========================
*/
nav > #sp-menu > #menu-logo{width:100%; height:70px; background-color:rgba(18,58,108,.7); border-bottom:3px solid #fff;}
nav > #sp-menu > #menu-logo a img{width:140px;}

/*
========================
第1階層
========================
*/
nav > #sp-menu > ul{display:flex; width:100%; flex-wrap:wrap; /*border-top:1px solid #000;*/ margin:40px auto 0;}
nav > #sp-menu > ul > li{position:relative; width:50%; border-bottom:1px solid #fff;}
nav > #sp-menu > ul > li:nth-child(odd){/*border-right:1px solid #000;*/}

nav > #sp-menu > ul > li.first-menu > .btn,
nav > #sp-menu > ul > li.first-menu > a,
nav > #sp-menu > ul > li > .second-menu ul li a{height:46px; line-height:46px;}

/*Twitter*/
nav > #sp-menu > ul > li#twitter{width:100%; border-left:none !important; border-right:none !important;}
nav > #sp-menu > ul > li.first-menu#twitter span::before{top:3px; left:calc(50% - 110px);}
@media screen and (max-width:480px){nav > #sp-menu > ul > li.first-menu#twitter span img{max-width:30px;}}

/*第2階層用トグル装飾*/
nav > #sp-menu > ul > li.first-menu > .btn::after{
display:block;
content:"▼";
position:absolute;
top:0;
right:5px;
font-size:15px;}
nav > #sp-menu > ul > li.first-menu > .btn.open::after{content:"▲";}

nav > #sp-menu > ul > li.none:nth-child(even){border-left:1px solid #fff;}

/*
========================
第2階層
========================
*/
nav > #sp-menu > ul > li > .second-menu{display:none; background-color:#fff; width:200%; border-bottom:1px solid #000;}
nav > #sp-menu > ul > li:nth-child(odd) > .second-menu{width:calc(200% + 2px);}
nav > #sp-menu > ul > li:nth-child(even) > .second-menu{margin-left:-100%;}
nav > #sp-menu > ul > li > .second-menu ul{display:flex; width:100%; flex-wrap:wrap;}
nav > #sp-menu > ul > li > .second-menu ul li{position:relative; width:50%; border-top:1px solid #000;}

nav > #sp-menu > ul > li > .second-menu ul li:nth-child(odd){border-right:1px solid #000;}

/*
================================================================================================================
SP メニュー開閉ボタン
================================================================================================================
*/
nav > #sp-btn{
position:absolute;
top:10px;
right:10px;
width:50px;
height:50px;
z-index:7;}
nav > #sp-btn > span{
display:block;
position:absolute;
left:10px;
width:40px;
height:3px;
background-color:#fff;
transition:all .4s ease;}
nav > #sp-btn:hover{cursor:pointer;}

nav > #sp-btn > span:first-child{top:14px;}
nav > #sp-btn > span:nth-child(2){top:calc(50% - 1px);}
nav > #sp-btn > span:last-child{bottom:14px;}

nav > #sp-btn.open > span:first-child{top:23px; transform:rotate(315deg);}
nav > #sp-btn.open > span:nth-child(2){opacity:0;}
nav > #sp-btn.open > span:last-child{bottom:23px; transform:rotate(-315deg);}

/*
================================================================================================================
スクロールメニュー固定
================================================================================================================
*/
nav#main-menu.fixed{position:fixed; top:0; z-index:6;}

/*
================================================================================================================
メニュー共通-背景･オンマウス
================================================================================================================
*/
/*
========================
赤背景
========================
*/
nav > div > ul > li.first-menu > .btn,
nav > div > ul > li.first-menu > a{background-color:#ff006c; background-color:#e1347d;}

/*
========================
オンマウス-青背景
========================
*/
/*PC*/
nav > div > ul > li.first-menu:hover > .btn,
nav > div > ul > li.first-menu:hover > a,

/*SP 第2階層選択時*/
nav > #sp-menu > ul > li.first-menu > .btn.open{background-color:#00b5ff;}

/*
========================
青背景-オンマウス 影
========================
*/
/*PC オンマウス*/
nav > div > ul > li.first-menu:hover span,
nav > div > ul > li.first-menu:hover .btn::before,
nav > div > ul > li.first-menu:hover a::before,

/*SP 第2階層選択時*/
nav > #sp-menu > ul > li.first-menu .open span{filter:drop-shadow(0 1px 0 #007eb2) drop-shadow(1px 1px 0 #007eb2) drop-shadow(2px 1px 0 #007eb2);}

/*
========================
Twitter
========================
*/
nav > div > ul > li.first-menu#twitter > a{background:#009ef7 !important;}
nav > div > ul > li.first-menu#twitter:hover > a{background:#0080f3 !important;}
nav > div > ul > li.first-menu#twitter:hover span{filter:drop-shadow(0 1px 0 #0059aa) drop-shadow(1px 1px 0 #0059aa) drop-shadow(2px 1px 0 #0059aa) !important;}

/*
================================================================================================================
装飾
================================================================================================================
*/
nav > div > ul > li:not(#twitter) > .btn::before,
nav > div > ul > li:not(#twitter) > a::before{
display:block;
content:"";
position:absolute;
top:0;
left:5px;
width:40px;
height:100%;
background-image:url(../img/common/menu/icn_red.png);
background-repeat:no-repeat;
background-position:top left;
transition:all .2s ease;}

/*装飾-オンマウス*/
nav > div > ul > li:not(#twitter):hover > .btn::before,
nav > div > ul > li:not(#twitter):hover > a::before{background-image:url(../img/common/menu/icn_blue.png); background-position:top -10px left 7px;}

@media screen and (min-width:1201px){
nav > div > ul > li:not(#twitter) > .btn::before,
nav > div > ul > li:not(#twitter) > a::before{background-size:26px auto;}}

@media screen and (max-width:1200px){
nav > div > ul > li > .btn,
nav > div > ul > li > a{border-left:3px solid #fff;}

nav > div > ul > li:not(#twitter) > .btn::before,
nav > div > ul > li:not(#twitter) > a::before{left:0; background-image:url(../img/common/menu/icn_red_sp.png); background-size:auto 38px; background-position:top -10px left -10px;}

nav > div > ul > li:not(#twitter):hover > .btn::before,
nav > div > ul > li:not(#twitter):hover > a::before{background-image:url(../img/common/menu/icn_blue_sp.png); background-position:top -5px left -5px;}}

@media screen and (max-width:980px){
nav > div > ul > li:not(#twitter) > .btn.open::before{
filter:drop-shadow(0 1px 0 #007eb2) drop-shadow(1px 1px 0 #007eb2) drop-shadow(2px 1px 0 #007eb2);
background-image:url(../img/common/menu/icn_blue_sp.png); background-position:top -5px left -5px;}}

/*
========================
空div
========================
*/
nav > div > ul > li.none > .btn,nav > div > ul > li.none > a{border-left:none !important;}
nav > div > ul > li.none > .btn::before,
nav > div > ul > li.none > a::before{display:none !important;}
@media screen and (max-width:980px){nav > div > ul > li#twitter > a{border-left:none !important;}}

/*
================================================================================================================
ページ選択時
================================================================================================================
*/
nav > div > ul > li.active > .btn,
nav > div > ul > li.active > a{background-color:#00b5ff !important;}

nav > div > ul > li.active span,
nav > div > ul > li.active .btn::before,
nav > div > ul > li.active a::before{filter:drop-shadow(0 1px 0 #007eb2) drop-shadow(1px 1px 0 #007eb2) drop-shadow(2px 1px 0 #007eb2);}

nav > div > ul > li.active > .btn::before,
nav > div > ul > li.active > a::before{background-image:url(../img/common/menu/icn_blue.png) !important; background-position:top -10px left 7px !important;}

@media screen and (max-width:1200px){
nav > div > ul > li.active > .btn::before,
nav > div > ul > li.active > a::before{background-image:url(../img/common/menu/icn_blue_sp.png) !important; background-position:top -5px left -5px !important;}}