@charset "utf-8";

@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);

html {
	height: 100%;
	overflow-y:scroll;
}

body {
	height: 100%;
	/*background: url(../images/bg_top.png) repeat-x;*/
	color: #3c3c3c;
	font-size: 12px;
	line-height: 1.5;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

ul {
	list-style: none;
}

a,
span.link {
	text-decoration: none;
	outline: none;
	color: #999;
	cursor: pointer;
}
a:hover,
span.link:hover {
	color: #3c3c3c;
}
a.active,
a.active:hover,
span.link.active,
span.link.active:hover {
	color: #3c3c3c;
}

hr {
	border-color: #e5e5e5;
}

.pull-left {
	float: left;
}

.pull-right {
	float: right;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

.text-center {
	text-align: center;
}

.font-noto {
	font-family: 'Noto Sans Japanese', sans-serif;
	font-weight: 200;
}
.font-noto-thin {
	font-family: 'Noto Sans Japanese', sans-serif;
	font-weight: 100;
}

.centered-container {
	width: 960px;
	margin: 0 auto;
}

.red,
a.red {
	color: #EF5258;
}
a.red:hover {
	color: #3c3c3c;
}

#contentsWrapper {
	min-width: 980px;
	min-height: calc(100% - 130px);
	padding: 0 50px;
}

/* nav */
nav.main-nav {
	overflow: hidden;
	border-bottom: solid 1px #EF5258;
}

nav.main-nav h1 {
	float: left;
	/*width: 268px;*/
	padding-left: 10px;
}

nav.main-nav ul {
	/*width: 520px;*/
	float: right;
	overflow: hidden;
}

nav.main-nav li {
	float: left;
	/*margin: 0 12px 0 0;*/
	/*padding: 0 12px 0 0;*/
	font-size: 13px;
}

nav.main-nav li:nth-child(1) {
	margin-left:0;
}

nav.main-nav li:nth-last-child(1) {
	margin-right:0;
}

nav.main-nav li a,
nav.main-nav li span.link {
	height: 50px;
	padding: 0 12px 8px; 
	display: table-cell;
	vertical-align: bottom;
	color: #EF5258;
}

nav.main-nav li a span,
nav.main-nav li span.link span {
	display: inline-block;

	-webkit-transform: -webkit-translateY(0);
	-moz-transform: -moz-translateY(0);
	-ms-transform: -ms-translateY(0);
	transform: translateY(0);

	-webkit-transition: -webkit-transform 0.2s ease-out;
	-moz-transition: -moz-transform 0.2s ease-out;
	-ms-transition: -ms-transform 0.2s ease-out;
	transition: transform 0.1s ease-out;
}
nav.main-nav li a:hover span,
nav.main-nav li span.link:hover span {
	-webkit-transform: -webkit-translateY(-5px);
	-moz-transform: -moz-translateY(-5px);
	-ms-transform: -ms-translateY(-5px);
	transform: translateY(-5px);

	-webkit-transition: -webkit-transform 0.2s ease-in;
	-moz-transition: -moz-transform 0.2s ease-in;
	-ms-transition: -ms-transform 0.2s ease-in;
	transition: transform 0.1s ease-in;
}

#mainWrapper {
	overflow: hidden;
	margin: 20px 0 0 0;
}

/* title area */
.title-area {
	margin: 10px 0 50px;
}

.title-area .title {
	font-size: 54px;
	line-height: 54px;
}

/* sub nav */
.sub-nav {
	height: 50px;
	border-bottom: solid 1px #eaeaea;
}

.sub-nav > li {
	margin: 0 20px;
	float: left;
	font-size: 14px;
	line-height: 50px;
}

/* top news */
#pressArea ul > li a{
	color: #575757;
}
#pressArea ul > li a:hover{
	color: #999;
}
#pressArea h2 {
	color: #ef5258;
	font-size: 14px;
}

/* footer */
#footer {
	width: 100%;
	height: 90px;
	margin: 40px 0 0 0;
	background-color: #212121;
}
.footer-inner {
	width: 960px;
	height: 100%;
	margin: 0 auto;
}
.footer-inner p {
	margin: 37px 20px 0 0;
	font-size: 12px;
	color: #adadad;
}
.btn-fb {
	width: 29px;
	height: 29px;
	margin: 30px 0 0 40px;
	display: inline-block;
	background-image: url(../images/btn_fb.png);
}
.btn-fb:hover {
	background-position: 0 29px;
}
.btn-youtube {
	width: 53px;
	height: 29px;
	margin: 30px 0 0 28px;
	display: inline-block;
	background-image: url(../images/btn_youtube.png);
}
.btn-youtube:hover {
	background-position: 0 29px;
}

/* プルダウンメニュー */
nav #navigation ul.subMenu {
	z-index: 20;
	display: none;
	position: absolute;
	width: 177px;
	background: rgba(255,255,255,0.9);
	background: -moz-linear-gradient(top, rgba(255,255,255,0.88), rgba(255,255,255,0.98));/* Firefox用 */
	background: -webkit-gradient(linear,left top,left bottom,from(rgba(255,255,255,0.85)),to(rgba(255,255,255,0.95)));/* Safari,Google Chrome用 */
	box-shadow: 0px 5px 15px 0px rgba(0,0,0,0.3), inset 0px 5px 5px 0px rgba(0,0,0,0.1);
	-moz-box-shadow: 0px 5px 15px 0px rgba(0,0,0,0.3), inset 0px 5px 5px 0px rgba(0,0,0,0.1);　/* Firefox用 */
	-webkit-box-shadow: 0px 5px 15px 0px rgba(0,0,0,0.3), inset 0px 5px 5px 0px rgba(0,0,0,0.1);　/* Safari,Google Chrome用 */	
}

nav #navigation ul.subMenu li {
	font-size: 14px;
	color: #2B2B2B;
	float: none;	
	border-top: 1px solid rgba(198,198,198,0.4);
}

nav #navigation ul.subMenu li a {
	display: block;
	padding: 11px 22px;
}
nav #navigation ul.subMenu li a:hover {
	color: #2B2B2B;
	background: #EEE;
}

/*その他 */
.bold {
	font-weight: bold;
}

.lineEffect {
	border-top: 1px solid #ededed;
	/*background: -webkit-gradient(radial, center 0, 0, center -2980, 3000, from(rgba(0, 0, 0, 0.05)), to(transparent));*/
	/*background: url(../images/line_shadow.png) no-repeat;*/
}

.copy {
	font-size: 11px;
	display: block;
	text-align: left;
	margin-top: 8px;
}

/* wp_page_numbers */
#wp_page_numbers {
	overflow: hidden;
	margin: 20px 0 10px 0;
	color: #575757;
}

#wp_page_numbers ul {
	
}

#wp_page_numbers ul li.page_info {
	display: none;
} 

#wp_page_numbers ul li {
	float: left;	
	margin: 0 5px;
	/*border: 1px solid #ddd;*/
	background: #eee;
}

#wp_page_numbers ul li a {
	display: block;
	padding: 7px;
	color: #3c3c3c;
}
#wp_page_numbers ul li a:hover {
	background: #3c3c3c;
	color: #fff;
}
#wp_page_numbers ul li.active_page a {
	background: #fff;
}
#wp_page_numbers ul li.active_page a:hover {
	background: #fff;
	color: #3c3c3c;
}

/* TOOLS */
.pt10 {
	padding-top: 10px;
}
.pt20 {
	padding-top: 20px;
}
.projectcase{
	padding: 25px 0 0 0;
}
.projectcase p:last-child {
	padding:3px 0 0 0;
}
.projectcase p {
	font-weight:bold;
	font-size: 14px;
}
.projectcase p a {
	text-decoration:underline;
}

/* 右カラムカテゴリーボタン */

#sideContentsWrapper .sideContentsBtn {
	width: 195px;
}

#sideContentsWrapper li.btn_cat {
	overflow: hidden;
	padding: 0 0 0 6.5em;
	margin-bottom: 2px;
	clear: both;
	text-align: left;
	height: 58px;
	position: relative;
}

#sideContentsWrapper li#ui {
	background:url(../images/sidebtn_ui.png) no-repeat left top;
}

#sideContentsWrapper li#ui span.btn_cat_txt {
	color: #FFF;
	font-size: 13px;
	font-weight: bold;
	line-height: 1.3;
	/*text-shadow: 0px 1px 1px rgba(0,0,0,0.15);*/
	position: absolute;
	top: 35%;
	margin-top: ;
}

#sideContentsWrapper li#o2o {
	background: url(../images/sidebtn_o2o.png) no-repeat left top;
}

#sideContentsWrapper li#o2o span.btn_cat_txt {
	color: #FFF;
	font-size: 13px;
	font-weight: bold;
	line-height: 1.3;
	/*text-shadow: 0px 1px 1px rgba(0,0,0,0.15);*/
	position: absolute;
	top: 20%;
	margin-top: ;
}

#sideContentsWrapper li#app {
	background:url(../images/sidebtn_app.png) no-repeat left top;
	/*padding: 0 0 0 7.5em;*/
	padding: 0 0 0 6.5em;
}

#sideContentsWrapper li#app span.btn_cat_txt {
	color: #FFF;
	font-size: 13px;
	font-weight: bold;
	line-height: 1.3;
	/*text-shadow: 0px 1px 1px rgba(0,0,0,0.15);*/
	position: absolute;
	top: 35%;
	margin-top: ;
}

#sideContentsWrapper li#game {
	background: url(../images/sidebtn_game.png) no-repeat left top;
	/*padding: 0 0 0 7.5em;*/
	padding: 0 0 0 6.5em;
	margin-bottom: 5px;
}

#sideContentsWrapper li#game span.btn_cat_txt {
	color: #FFF;
	font-size: 13px;
	font-weight: bold;
	line-height: 1.3;
	/*text-shadow: 0px 1px 1px rgba(0,0,0,0.15);*/
	position: absolute;
	top: 38%;
	margin-top: ;
}

#sideContentsWrapper li a {
	display: block;
	
}

#sideContentsWrapper ul.sideContentsBtn a{
	height: 58px;
}

/* お知らせポップアップ */
#newsBox {
	position: fixed;
	top: 20%;
	left: 20%;
	width: calc(60% - 80px);
	height: calc(60% - 80px);
	padding: 40px;
	background: #fff;
	border: solid 1px #ccc;
	box-shadow:0px 0px 7px 2px rgba(0,0,0,0.1);
	-moz-box-shadow:0px 0px 7px 2px rgba(0,0,0,0.1);
	-webkit-box-shadow:0px 0px 7px 2px rgba(0,0,0,0.1);
	opacity: 0.9;
}
#newsBox.hide {
	display: none;
}
#newsBox .title {
	padding-bottom: 5px;
	font-size: 18px;
	border-bottom: solid 1px #ccc;
}
#newsBox .date {
	padding: 5px 5px 10px;
	text-align: right;
	color: #666;
}
#newsBox .text {
	line-height: 1.7em;
}


/* 404 */
.message-404 {
	width: 300px;
	margin: 0 auto; 
	padding: 100px 0;
	font-size: 15px;
	text-align: center;
}