@charset "utf-8";

/*
======== table of content. ===============
summary:ヘッダー・フッター
==========================================
*/

/* ================================================================================
header
================================================================================= */
header #header_inner { position: relative; display: flex; justify-content: space-between; align-items: center; max-width: 1248px; width:auto; margin: auto; padding: 10px; }
header .logo {max-width:200px;}
header .logo img {width:100%;height:auto;}
header .logo a:hover { opacity: .7; }


/* ================================================================================
#mfair_header
================================================================================= */
#mfair_header { position: fixed; width:100%; z-index: 110; padding:0.5em 0; background-color: rgba(0,0,0,.7); }
.mfair_header_inner { display: flex; justify-content: space-between; width:1250px; margin: auto; }

.mfair_logo { width:14.16%; margin-top: 5px; }
.mfair_logo img { width:100%; height: auto; }

/* ================================================================================
navigation
================================================================================= */
#mfair_navi { width:78%; }
.el_humburger { display: none; }
.uq_spNavi ul { display: flex; flex-wrap: wrap; }
.uq_spNavi li { font-size: 1.6rem; font-weight: 500; line-height: 200%; }

.uq_spNavi li,.uq_spNavi li a { color:#4dd0e1; }

.uq_spNavi li:first-child::before,
.uq_spNavi li:nth-child(7)::before { content:"|"; }

.uq_spNavi li:first-child::before,
.uq_spNavi li a { padding-right: 1.2em; }

.uq_spNavi li:not(:first-child) a { padding-left: 1.2em; }

.uq_spNavi li::after { content:"|"; }

.uq_spNavi li:first-child::before,
.uq_spNavi li:nth-child(7)::before,
.uq_spNavi li::after { font-weight: 100; }


.uq_spNavi li a:hover { color:#e91e63; opacity: 1; }


/* ================================================================================
SNS
================================================================================= */
.sec_sns { padding: 40px 0; background: #fef900; }
ul.social-button { display: flex; justify-content: center; font-size: 100%; }
ul.social-button li a { display: block; height: 40px; }
ul.social-button li span { height: 30px; }
.sec_sns li { white-space: nowrap; }
ul.social-button li.twitter a { width:10em;}
ul.social-button li.facebook a { width:14em;}
ul.social-button li.hatena a { width:14em;}
ul.social-button li.line a { width:10em;}

/* ================================================================================
footer
================================================================================= */
footer {position:relative;padding:40px 0;background:url("/2020/global/images/bg_footer.jpg") center center;background-size: cover;}
footer,
footer a { color:#fff; }

footer .pagetop {clear:both;position:fixed;right:20px;width:49px; height: 49px;text-align:right;z-index: 100;}
footer .pagetop a {position:relative;top:10px;display:inline-block;width:49px;height:49px;margin-right:20px;background: url(/2020/global/images/bt_pagetop.png) no-repeat;background-size: cover;text-indent:100%;white-space:nowrap;overflow:hidden;}
footer .pagetop a:hover { opacity: .7; }
.bt_sets { text-align: center; color: #fff; }


#sponsors_list { display: flex; justify-content: space-between; max-width:1248px; margin:0 auto;padding:0 10px;}
#sponsors_list .sponsors_box { width:23.07%; }

.sponsors_box span { display: block; margin-bottom: 0.3em; padding-bottom: 0.3em; border-bottom: 1px solid #fff; font-size: 1.8rem; font-weight: 600; }
#sponsors_list ul ul { margin-bottom: 2em; }
#sponsors_list ul ul li { font-size: 1.4rem; }

#end_footer {display: flex; justify-content: space-between; max-width:1248px;margin:0 auto;padding:48px 10px 0;border-top:1px solid #fff; font-size: 1.2rem; }

#end_footer .box_address {width:40%;}
#end_footer .box_copy  { width:40%; text-align: right; }

footer .bt_sns { margin-bottom: 1em; text-align: right; }
footer .bt_sns li:not(:last-child){ margin-right: 5px; }
footer .bt_sns {  }
footer .bt_sns li { display: inline-block; width:26px; }

header .bt_sns a,
footer .bt_sns a {position: relative;display:block;width:26px;height:26px;background-repeat: no-repeat;background-size: cover;text-indent:100%;transition:opacity 0.2s;overflow: hidden;
}

footer .bt_sns li:first-child a { background-image: url(/2020/global/images/icon_tw.png); }
footer .bt_sns li:nth-child(2) a { background-image: url(/2020/global/images/icon_fb.png); background-position: 0 0; }
footer .bt_sns li:nth-child(3) a { background-image: url(/2020/global/images/icon_insta.png); background-position: 0 0; }
footer .bt_sns li:nth-child(4) a { background-image: url(/2020/global/images/icon_yt.png); background-position: 0 0; }

footer .bt_sns li a:hover { opacity: 0.7; }
#end_footer #copyright {}

/* SP */
@media screen and (max-width: 767px) {

/*ヘッダー*/
header #header_inner { flex-direction: column; justify-content: space-between; align-items: center; width: auto; margin: auto; padding:0.8% 0; }
header .logo { max-width:50%;}


/* ================================================================================
#mfair_header
================================================================================= */
#mfair_header { height: 55px; }
.mfair_header_inner { padding:0 6.4%; width:auto; }

.mfair_logo { width:160px; margin-top: 4px; }
.mfair_logo img {  }

@media screen and (orientation: landscape) {
.mfair_logo { margin-top: 0; }
}

/* ================================================================================
navigation
================================================================================= */
#mfair_navi { width:100%; }
.uq_spNavi ul { flex-direction: column; }
.uq_spNavi li {  }
.uq_spNavi li,.uq_spNavi li a {  }

.uq_spNavi li:first-child::before,
.uq_spNavi li:nth-child(7)::before,
.uq_spNavi li::after { display: none; }

.uq_spNavi li:first-child::before,
.uq_spNavi li:nth-child(7)::before,
.uq_spNavi li a { padding-right: 0; }

.uq_spNavi li:not(:first-child) a { padding-left: 1.2em; }


/*ナビゲーション*/
#mfair_nav { background-color: rgba(0,0,0,0.9); }
#mfair_nav ul { flex-direction: column; padding: 5em 5.3% 0; }
#mfair_nav ul li { font-size: 1.8rem; }
#mfair_nav ul li:not(:last-child)::after { display: none; }
#mfair_nav ul li a { display: block; padding-bottom: .5em; }

/*ハンバーガーボタン*/
.el_humburger { display: block; position: fixed; top: 15px; right: 2%; width: 42px; height: auto; box-sizing: border-box; z-index: 10000; transition: all 0.2s ease-in-out; cursor: pointer; pointer-events: auto; }

.el_humburger_inner { padding: 3px 6px; }

.el_humburger_inner > span { display: block; width: 100%; margin: 0 auto 6px; height: 2px; background: #fff; transition: all 0.2s ease-in-out; }
.el_humburger_inner > span:last-child { margin-bottom: 0; }
.js_humburgerOpen .el_humburger_inner > span { background: #fff; }

.js_humburgerOpen .el_humburger_inner > span.top { transform: translateY(12px) rotate(-45deg); }
.js_humburgerOpen .el_humburger_inner > span.middle { opacity: 0; }
.js_humburgerOpen .el_humburger_inner > span.bottom { transform: translateY(-3px) rotate(45deg); }

.el_humburgerButton.el_humburgerButton__close { top: 2%; right: 2%; }

.el_humburgerButton__close > span { display: block; width: 35px; margin: 0 auto; height: 4px; background: #fff; }
.el_humburgerButton__close > span.el_humburgerLineTop { transform: translateY(5px) rotate(-45deg); }
.el_humburgerButton__close > span.el_humburgerLineBottom { transform: translateY(-6px) rotate(45deg); }
.el_humburger p { margin-top: -0.3em; color:#000; font-size: 0.8rem; text-align: center; transition: all 0.2s ease-in-out; }
.js_humburgerOpen .el_humburger p { margin-top: 1em; color:#fff; }

.uq_spNavi { display: none; margin-bottom: 0; background:rgba(255,255,255,1); }
.uq_spNavi.js_appear { position: fixed; top: 0; left: 0; bottom: 0; right: 0; display: block; z-index: 9999; }
.uq_spNavi_screen { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-color: rgba(255, 255, 255, 0.96); z-index: 0; margin-top: 0px; padding-top: 0px; overflow: auto; -webkit-overflow-scrolling: touch; }
/*ナビゲーション*/

.slick-slider .page-nav {padding:8px 0 10px 0;}

/* ================================================================================
SNS
================================================================================= */
.sec_sns { padding: 5.3% 2.6%; }
ul.social-button { flex-direction: column; }
ul.social-button li a { display: block; height: 40px; }
ul.social-button li span { height: 30px; }
.sec_sns li { white-space: nowrap; }
ul.social-button li.twitter a { width:10em;}
ul.social-button li.facebook a { width:14em;}
ul.social-button li.hatena a { }
ul.social-button li.line a { width:10em;}

/* ================================================================================
footer
================================================================================= */
footer {padding:5.3% 0 2.6%; background-image: url("/2020/global/images/bg_footer_sp.jpg");}

footer .pagetop { right:0; }
footer .pagetop,
footer .pagetop a { width:40px; height: 40px; }

#sponsors_list { flex-wrap: wrap; max-width:inherit; padding:0 2.6%;}
#sponsors_list .sponsors_box { width:48%; }
.sponsors_box span { font-size: 1.4rem; }
#sponsors_list ul ul li { font-size: 1.1rem; }

#end_footer { flex-direction: column; max-width:inherit; margin:0 auto;padding:4% 2.6%; }
#end_footer .box_address,
#end_footer .box_copy {width:100%; }
#end_footer .box_copy { margin-top:15%; text-align: left; }

footer .bt_sns,
#end_footer #copyright { text-align: center; }

footer .bt_sns li:not(:last-child){ margin-right: 10px; }
footer .bt_sns li,
footer .bt_sns li a { width:40px;height: 40px; }
#end_footer #copyright { font-size: 0.9rem; }



}