/*
Theme Name: MOBERCIAL
Author: Design: itou Coder: kawada
Author URI: http://3bee.jp
Description: MOBERCIALのテーマスタイルです。
Version: 1.2
License: -
License URI: -
Tags: black, -
*/

/*
	Import
---------------------------------------------------------------------------- */
@charset "UTF-8";
@import "css/base.css";
@import "css/contents.css";
@import "css/drawer.css";


/*
	Base Structure
---------------------------------------------------------------------------- */
body {overflow-x: auto; position: relative;}
.wrap {width: 100%; position: relative;}
.inner_1020 {margin: 0 auto; width: 1020px; position: relative;}
#container {float: left;margin: 0 -300px 0 0;width: 100%;clear: both;}
.content {margin: 0 300px 0 0;}
.content_onecol {margin: 0 !important;}
footer {clear: both;width: 100%; min-width:1020px;}
#main {margin: 0 auto 0;width: 1020px; z-index: 10; overflow: hidden;}
.pc {display: block !important;}
.sp {display: none !important;}
@media screen and (max-width: 736px){
body {min-width: 100% !important; overflow-y: scroll;}
.inner_1020 {width: 100%;}
#container {float: none; margin: 0; width: auto; padding: 0 3.125%;}
.content {margin: 0; }
footer {clear: both;width: 100%; min-width:100%;}
#main {margin: 0 auto; width: auto; overflow: hidden;}
img {max-width: 100%; width /***/:auto;}
.pc {display: none !important;}
.sp {display: block !important;}
}

/*
	Header Common
---------------------------------------------------------------------------- */
header .title {display: block; padding-top: 15px;}
header a:hover {opacity: 0.8;}
.header_bg01 {background-color: #000; height: 80px; position: fixed; z-index: 9999; min-width: 1020px;}
@media screen and (max-width: 736px){
header {background-color: #000; height: 60px; width: auto; position: fixed; width: 100%; z-index: 9999; }
header .title {width: 127.5px; display: block; padding: 15px 0 0 20px;}
.mq60 {padding-top: 60px;}
}
/*
	Header Common > -Gnavi-
---------------------------------------------------------------------------- */
nav.gmenu {top: 0; left: 180px; position: absolute;}
nav.gmenu ul li {float: left;}
nav.gmenu ul li a {color: #FFF; font-family: 'Arimo', "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif; font-size: 14px; line-height: 14px; text-shadow: 0px 0px 1px rgba(0, 0, 0, .1); display: block;padding: 0 0 20px;}
nav.gmenu ul li.home {display: none;}
nav.gmenu ul li a.active,
nav.gmenu ul li a:hover {border-bottom: 3px solid #FFF; padding: 0 0 20px; text-decoration: none;}
nav.gmenu ul li.contact a:hover {border: none; padding: 0;}
nav.gmenu ul li.message a {margin: 30px 30px 0 0; width: 70px; display: block;}
nav.gmenu ul li.service a {margin: 30px 39px 0 0; width: 59px; display: block;}
nav.gmenu ul li.company a {margin: 30px 36px 0 0; width: 75px; display: block;}
nav.gmenu ul li.works a {margin: 30px 38px 0 0; width: 56px; display: block;}
nav.gmenu ul li.article a {margin: 30px 38px 0 0; width: 60px; display: block;}
nav.gmenu ul li.recruit a {margin: 30px 38px 0 0; width: 61px; display: block;}
nav.gmenu ul li.recruit a.active {border: none;}
nav.gmenu ul li.news a {margin: 30px 40px 0 0; width: 40px; display: block;}
nav.gmenu ul li.contact a {display: block; text-indent: -9999px; width: 160px; height: 80px; padding: 0; background: url(images/common/header/tel.png) no-repeat;}
nav.gmenu ul li.contact a.active,
nav.gmenu ul li.contact a:hover {background: url(images/common/header/tel_on.png) no-repeat; opacity: 1.0;}

/*
	Key Visual
---------------------------------------------------------------------------- */
@media screen and (max-width: 736px){
#key_v img {width: 100%;}
}

/*
	Side
---------------------------------------------------------------------------- */
#tertiary {float: rigth;overflow: hidden;width: 300px;position: relative; padding-top: 57px;}
#tertiary nav {border-top: 5px solid #000; border-bottom: 1px solid #000; margin: 0 0 40px; padding: 35px 0; width: 300px;}
#tertiary nav ul li a { background: url(images/common/parts/li02.png) no-repeat center left; padding: 0 0 0 10px; line-height: 1.2em; display: block;}
#tertiary nav ul li {margin: 0 0 35px;}
#tertiary nav ul li.current-menu-item a {color: #999;}
#tertiary nav ul li .date {color: #666; margin: 0 0 5px; display: block; }
#tertiary .side_common_banner ul li{margin: 0 0 30px;}
#tertiary .side_common_banner ul li a:hover {opacity: 0.8;}
#tertiary nav ul li.all_links a {text-align: right; background: none;}
#tertiary nav ul li.all_links a.more_links {background: url(images/common/parts/li08.png) no-repeat center right; padding: 0 30px 0 0;}
#tertiary #service nav ul li {margin-bottom: 30px;}
#tertiary #service nav ul li a {font-weight: bold; font-size: 13px;}
#tertiary #service nav ul li ul {margin-top: 20px; padding: 0 0 0 15px;}
#tertiary #service nav ul li ul li {margin-top: 20px;}
#tertiary #service nav ul li ul li a {font-weight: normal; background: url(images/common/parts/li09.png) no-repeat center left;}
#tertiary nav ul li.current-menu-item ul li a {color: #333 !important;}
#tertiary #contact nav ul li {margin-bottom: 30px;}
#tertiary #contact nav ul li a {font-weight: bold; font-size: 13px;}
#tertiary #contact nav ul li ul {margin-top: 20px; padding: 0 0 0 15px;}
#tertiary #contact nav ul li ul li {margin: 10px 0;}
#tertiary #contact nav ul li ul li a {font-weight: normal; background: url(images/common/parts/li09.png) no-repeat center left;}
#tertiary nav ul li.current-menu-item ul li a {color: #333 !important;}
#tertiary #contact nav ul li ul li.linkdisable a {font-weight: bold; background: none; padding: 0;}
#tertiary #contact nav ul li ul li.freelance_menu a {font-weight: bold;}
@media screen and (max-width: 736px){
#tertiary {float: none; width: auto; padding: 3.125%;}
#tertiary nav {margin: 0 0 6.25%; padding: 5.46% 0; width: auto;}
#tertiary nav ul li a { background: url(images/common/parts/li02.png) no-repeat center left; padding: 0 0 0 10px; line-height: 1.2em; display: block;}
#tertiary nav ul li {margin: 0 0 4.68%;}
#tertiary .side_common_banner ul li{margin: 0 0 4.68%;}
#tertiary .side_common_banner ul li img {width: 100%;}

}

/*
	Footer Common
---------------------------------------------------------------------------- */
.bn_foot_links_bg {border-top: 1px solid #EEE; padding: 20px 0; clear: both;}
.bn_foot_links_bg ul {text-align: center;}
.bn_foot_links_bg ul li {display: inline-block;}
.bn_foot_links_bg ul li img {vertical-align: middle; padding: 0 15px 0;}
.bn_foot_links_bg ul li a:hover img {opacity: 0.8;}
.home footer {margin-top: 0;}
/* footer {margin-top: 80px;} */
footer h3 {color: #FFF; font-family: 'Arimo', "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif; }
footer a:link,
footer a:visited,
footer a:hover {color: #FFF;}
footer a:hover {text-decoration: underline;}
footer {background-color: #000;  clear: both;}
footer a {color: #FFF;}
footer a:hover img {opacity: 0.8;}
footer .footer_bg {border-bottom: 1px solid #333; }
footer .footer_banner_links h3 {padding: 35px 0 20px;}
footer .footer_banner_links ul.footer_banner_links_list {margin: 0 0 35px 10px;}
footer .footer_banner_links ul.footer_banner_links_list li {float: left; margin: 0 15px 0 0; width: 240px;}
footer .footer_banner_links ul.footer_banner_links_list li img {display: block; }
footer .footer_banner_links ul.footer_banner_links_list li .footer_banner_textbox {background-color: #000; padding: 20px 10px 0;}
footer .footer_banner_links ul.footer_banner_links_list li .footer_banner_textbox p {color: #CCC; font-size: 12px;}
footer .footer_primary {padding: 40px 0 0; background: url(images/common/footer/bg01.png) repeat-y;}
footer .footer_primary .c1,footer .footer_primary .c2,footer .footer_primary .c3{display: table-cell; float: left;}
.footer_primary .footer_links_list {width: 680px;}
.footer_primary .footer_links_list dl a {display: block; background: url(images/common/parts/li06.png) no-repeat center left; padding: 0 0 0 10px;}
.footer_primary .footer_links_list dl {margin: 0 70px 35px 0; float: left; font-size: 12px;}
.footer_primary .footer_links_list dl dt {font-weight: bold; font-family: 'Arimo',  "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif; margin: 0 0 3px; color: #FFF;}
.footer_primary .footer_links_list dl dd {margin: 0 0 3px;}
.footer_primary .footer_social {width: 180px; }
.footer_primary .footer_social h3 {font-size: 14px; margin: 0 0 30px; text-align: center;}
.footer_primary .footer_social a.facebook {margin: 0 0 0 45px;}
.footer_primary .footer_social a.twitter {margin: 0 0 0 40px;}
.footer_primary .contact_area {width: 150px; }
.footer_primary .contact_area h3 {font-size: 14px; margin: 0 0 25px; text-align: center;}
.footer_primary .contact_area p {margin: 0 0 0 20px; line-height: 1.4em; font-size: 12px; color: #FFF;}
footer .footer_secondry {padding: 40px 0; background: url(images/common/footer/bg02.png) repeat-y;}
footer .footer_secondry .c1,footer .footer_secondry .c2,footer .footer_secondry .c3{display: table-cell; float: left;}
.footer_secondry .address {width: 400px; color: #FFF; font-size: 12px;}
.footer_secondry .go_tp {width: 220px; color: #FFF;}
.footer_secondry .s_top {display: block; margin: 0 0 0 75px;}
.footer_secondry .cp_right {width: 400px; color: #FFF; font-size: 12px;}
.footer_secondry .cp_right ul {text-align: right;}
.footer_secondry .cpr {text-align: right;}
.bn_foot_links ul li {height: 60px; line-height: 60px;}

#loopslider { margin: 0 auto; width: auto; height: 60px; text-align: left; position: relative; overflow: hidden;}
#loopslider ul {float: left; display: inline; overflow: hidden;}
#loopslider ul li { margin:0 15px; float: left; display: inline; overflow: hidden;}
#loopslider ul:after { ontent: ".";height: 0; clear: both;display: block;visibility: hidden;}
#loopslider ul {display: inline-block; overflow: hidden;}
@media screen and (max-width: 736px){
footer .footer_bg {border-bottom: 1px solid #FFF; }
footer {width: 100%;}
.footer_banner_links {padding: 0 3.125% 0; width: auto;}
footer .sp_go_tp {border-bottom: 1px solid #FFF; text-align: center; padding: 6.25% 0;}
footer .footer_banner_links h3 {padding: 6.25% 0 3.125%;}
footer .footer_banner_links ul.footer_banner_links_list {margin: 0 0 3.125% -3.125%;}
footer .footer_banner_links ul.footer_banner_links_list li {margin: 0 0 3.125% 3.125%; width: 46.8%;}
footer .footer_banner_links ul.footer_banner_links_list li img {width: 100%;}
footer .footer_banner_links ul.footer_banner_links_list li .footer_banner_textbox {display: none;}
footer .footer_banner_links ul.footer_banner_links_list li:last-child {margin-left:3.125% !important;}
.footer_primary .footer_links_list {width: auto;}
footer .footer_secondry .c1,footer .footer_secondry .c2,footer .footer_secondry .c3{float: none; display: inline-block;}
.footer_secondry .address {width: auto; color: #FFF; font-size: 12px;}
.footer_secondry .go_tp {width: auto; color: #FFF;}
.footer_secondry .s_top {display: block; margin: 0 0 0 75px;}
.footer_secondry .cp_right {width: auto; color: #FFF; font-size: 12px;}
.footer_primay_sp .f_p_wrap {border-bottom: 1px solid #FFF;}
.footer_primay_sp .f_p_wrap .sns_links li {float: left; width: 50%;}
.footer_primay_sp .f_p_wrap_b {width: auto; padding: 6.25% 3.125%; border-bottom: 1px solid #FFF;}
.footer_primay_sp .f_p_wrap_b h3 {margin: 0 0 6.25%;}
.footer_primay_sp .f_p_wrap_b p {color: #FFF; font-size: 11px;}
}

/*
	Topic Path
---------------------------------------------------------------------------- */
.topic_path {padding: 10px 0; font-size: 12px;}
.topic_path a.home {background: url(images/common/parts/ico01.png) no-repeat center left; width: 16px; height: 16px; text-indent: -9999px; display: inline-block;}
.topic_path span.separated {margin: 0 10px 0; display: inline-block; background: url(images/common/parts/li07.png) no-repeat center left; width: 7px; height: 18px; text-indent: -9999px;}
@media screen and (max-width: 736px){
.topic_path {padding: 1.56% 3.125%; width: auto;}
}

/*
	Common HeadLine * Headline Level1 fixed
---------------------------------------------------------------------------- */
.headline_title {width: 640px; position: relative; border-bottom: 1px solid #333; margin: 20px 0 20px !important;}
.works .headline_title {width: 100%;}
.headline_title span {display: inline-block; border-bottom: 5px solid #333; margin: 0 0 -5px; padding: 5px 20px 10px 0; font-family: 'Arimo', "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif; color: #000; font-size: 20px; background: url(images/common/parts/li01.png) no-repeat center right;}
.headline_title span a:hover {text-decoration: underline;}
@media screen and (max-width: 736px){
.headline_title {width: auto; margin: 3.125% 0 3.125% !important;}
}

/*
	Sosical Linkes
---------------------------------------------------------------------------- */
.s4twitter {width: 80px !important;}

/*
	Hentry Style Main Content
---------------------------------------------------------------------------- */
.hentry {padding: 0 0 0; width: 640px; }
/* .entry-content {padding: 0 0 0; margin: 0 0 80px;} 141030 Change*/
.entry-content {padding: 0 0 0; margin: 0 0 10px;}
.entry-content a {text-decoration: underline;}
.entry-content a:hover {text-decoration: none;}
@media screen and (max-width: 736px){
.hentry {width: auto; }
}
/*
	One Collum Content
---------------------------------------------------------------------------- */
.content_onecol .hentry {width: 1020px; }
.headline_title_post {font-family: 'Arimo', "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif; font-size: 40px; line-height: 40px;}
.headline_title_post_box {margin: 20px 0 50px; }
@media screen and (max-width: 736px){
.content_onecol .hentry {width: auto; }
.headline_title_post {font-size: 30px; line-height: 30px; }
.headline_title_post_box {margin: 3.125% 0 7.8125%; width: auto; }
}
/*
	Common Info
---------------------------------------------------------------------------- */
.common_info .sns_area {background: #EEE url(images/common/parts/so_bg.png) top left no-repeat; width: 500px; height: 80px; position: relative;} /*141219 Edited */
.common_info .sns_area aside {position: absolute; left: 60px; top: 20px;}
.wsbl_hatena_button {display: none;}
.wsbl_pocket {display: none;}


@media screen and (max-width: 736px){
.common_info .sns_area {background-image: none; width: auto; height: auto; position: relative; margin: 0 0 3.125%;}
.common_info .sns_area aside {position: static; left: inherit; top: inherit; padding: 1.56%;}
.single-article .wsbl_hatena_button {display: block;}
.single-article .wsbl_pocket {display: block;}

}

/*
	Module
---------------------------------------------------------------------------- */
.alignright {float: right;}
.alignleft {float: left}
.half_120_880 {width: 1020px;}
.half_120_880 .c1{width: 120px; float: left;}
.half_120_880 .c2{width: 880px; float: right;}
.half_100_770 {width: 880px;}
.half_100_770 .cc1{width: 100px; float: left;}
.half_100_770 .cc2{width: 770px; float: right;}
.half_410_220 {width: 640px;}
.half_410_220 .c1{width: 410px; float: left;}
.half_410_220 .c2{width: 220px; float: right;}
.half_30_70 {width: 100%;}
.half_30_70 .c1{width: 30%; float: left;}
.half_30_70 .c2{width: 70%; float: right;}
/* 131203 Add */
.half_410_220 .c111 {width: 500px; float: left;}
.half_410_220 .c222 {float: right; width: 130px;}
/* 131203 Add */
.half_30_70 {width: 100%;}
.half_30_70 .c1{width: 30%; float: left;}
.half_30_70 .c2{width: 70%; float: right;}
@media screen and (max-width: 736px){
.half_410_220 {width: 100%;}
.half_410_220 .c1{width: auto; float: none;}
.half_410_220 .c2{width: auto; float: none;}
.half_410_220 .c111 {width: auto; float: none;}
.half_410_220 .c222 {float: none; width: auto; text-align: center;}
.half_410_220 .c222 img {width: 36%;}
.half_30_70 {width: 100%;}
.half_30_70 .c1{width: auto; float: none;}
.half_30_70 .c2{width: auto; float: none;}
.half_120_880 {width: 100%;}
.half_120_880 .c1{width: 15%;}
.half_120_880 .c2{width: 80%;}
.half_100_770 {width: 100%;}
.half_100_770 .cc1{width: auto; float: none;}
.half_100_770 .cc2{width: auto; float: none;}

}

/*
	Media Query
---------------------------------------------------------------------------- */
.mq80 {padding-top: 80px;}


@media screen and (max-width: 1020px) {
#tertiary {height: auto !important;}
.sidebar-inner {bottom: inherit !important; position: relative !important; top: 0 !important;}
}