@charset "utf-8";

/*---------------------------------------
common
---------------------------------------*/
html {
	font-size: 62.5%;
}

*,
*:before,
*:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

body {
	margin: 0!important;
	background: url(../image/page_bg.jpg) repeat fixed left bottom #09275f;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;
	color: #fff;
	text-align: center;
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
	font-size: 1.4rem;
	font-family: "Raleway", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
}

.anchor {
	margin-top: -66px;
	padding-top: 66px;
	display: block;
}

/* font */
.fwB {
	font-weight: bold !important;
}

.fsL {
	font-size: 150%;
}

.txtColor_ffffff {
	color: #ffffff !important;
}

/* margin */
.mb0 {
	margin-bottom: 0 !important;
}

.mb20 {
	margin-bottom: 20px !important;
}

.mLR1 {
	margin: 0 1px !important;
}

/* section */
section {
	padding: 80px 0;
	color: #333333;
	background-color: #ffffff;
}

section:nth-child(even) {
	color: #ffffff;
	background-color: #09275f;
}

/* button */
.button {
	display: inline-block;
	width: 200px;
	padding: 20px;
	border-radius: 4px;
	background-color: #afa58d;
	color: #fff;
	font-weight: bold;
	text-decoration: none;
	letter-spacing: 1px;
	font-size: 1.2rem;
}

.button:hover {
	opacity: .9;
}

.button-showy {
	background-color: #f1b400;
}

.button-ghost {
	border: 1px solid #fff;
	background-color: rgba(255, 255, 255, .15);
}

/* heading */
.heading {
	position: relative;
	display: inline-block;
	margin: 30px 0 15px;
	padding-bottom: 15px;
	letter-spacing: 2px;
	font-size: 4rem;
}

.asset-wrapper .heading {
	margin-top: 60px;
	font-size: 3rem;
}

.heading:before,
.heading:after {
	content: '';
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	border-bottom: 1px solid #999;
}

.heading:before {
	bottom: 5px;
}

/* subTtl */
.subTtl {
	position: relative;
	display: inline-block;
	margin: 50px 0 25px;
	padding-bottom: 15px;
	letter-spacing: 2px;
	font-size: 2.5rem;
}

.subTtl:after {
	content: '';
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	border-bottom: 1px solid #999;
}

/* accordion */
.accordion01 .accordion_inner,
.accordion02 .accordion_inner {
	display: none;
}

.accordion01 .button-accordion,
.accordion02 .button-accordion {
	width: 25%;
	display: block;
	margin: 20px auto 0;
	font-size: 120%;
	cursor: pointer;
}

.accordion01 .button-accordion:before {
	content: '他のゲーム作品も表示する';
	display: block;
}

.accordion02 .button-accordion:before {
	content: 'リンク集を開く';
	display: block;
}

.accordion01 .button-accordion._toggle:before {
	content: 'おすすめ作品のみ表示する';
}

.accordion02 .button-accordion._toggle:before {
	content: 'リンク集を閉じる';
}


/*---------------------------------------
 header
---------------------------------------*/
.header {
	width: 100%;
	background-color: #09275f;
	border-bottom:solid 3px #ffffff;
	letter-spacing: -5em;
	position: fixed;
	z-index: 9999;
}

.header .logo,
.header .ancNav {
	width: 50%;
	display: inline-block;
	vertical-align: bottom;
	letter-spacing: normal;
}

.header .logo {
	text-align: left;
}

.header .ancNav ul {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flexbox;
	display: flex;
}

.header .ancNav ul > li {
	width: 100%;
	list-style: none;
}

.header .ancNav ul > li > a {
	font-size: 1.8rem;
	font-weight: bold;
	color:#ffffff!important;
	text-decoration: none;
}

.header .ancNav ul > li > a:hover {
	text-decoration: underline;
}


/*---------------------------------------
 mainTtl
---------------------------------------*/
.mainTtl {
	padding: 170px 30px 80px;
}

.site-title-sub {
	margin: 0 0 30px;
	letter-spacing: 1px;
	font-size: 2.2rem;
}

.site-title-sub:before,
.site-title-sub:after {
	content: '';
	display: inline-block;
	width: 140px;
	height: 2px;
	margin: 0 30px;
	background-color: #fff;
	vertical-align: middle;
}

.site-title {
	margin: 50px 0 40px;
	font-size: 7.6rem;
}

.site-description {
	margin-bottom: 50px;
	color: #ccc;
	font-size: 1.6rem;
}


/*---------------------------------------
 about
---------------------------------------*/
.about-text {
	margin: 30px 0;
	line-height: 2.5;
}

.about-text-sub {
	display: block;
	margin: 0 0 5px;
	letter-spacing: 1px;
	font-size: 2rem;
	font-weight: bold;
}

.about-text-sub:before,
.about-text-sub:after {
	content: '';
	display: inline-block;
	width: 140px;
	height: 2px;
	margin: 0 5px;
	background-color: #333;
	vertical-align: middle;
}


/*---------------------------------------
 work-wrapper
---------------------------------------*/
.work-wrapper {
	width: 100%;
	margin: 60px auto 0;
	letter-spacing: -.5em;
	table-layout: fixed;
}

.work-box {
	position: relative;
	display: inline-block;
	vertical-align: top;
	letter-spacing: normal;
	width: 25%;
}

.work-box:after {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 50%;
	background-repeat: no-repeat;
	-webkit-background-size: 100% 100%;
	background-size: 100% 100%;
	opacity: .2;
	-webkit-transform: scaleY(-1);
	-ms-transform: scaleY(-1);
	-o-transform: scaleY(-1);
	transform: scaleY(-1);
}

.work-box-01:after {
	background-image: url(../image/game/twins04_ttl.png);
}

.work-box-02:after {
	background-image: url(../image/game/twins03_ttl.png);
}

.work-box-03:after {
	background-image: url(../image/game/twins02_ttl.jpg);
}

.work-box-04:after {
	background-image: url(../image/game/twins01_ttl.jpg);
}

.work-box-05:after {
	background-image: url(../image/game/alex_ttl.png);
}

.work-box-06:after {
	background-image: url(../image/game/asran_ttl01.png);
}

.work-box-07:after {
	background-image: url(../image/game/daily_ttl.jpg);
}

.work-box-08:after {
	background-image: url(../image/game/summer_ttl.jpg);
}

.work-box-09:after {
	background-image: url(../image/game/criss_ttl.jpg);
}

.work-box-10:after {
	background-image: url(../image/game/aldo_nina_ttl.jpg);
}

.work-box-11:after {
	background-image: url(../image/game/rgb2_ttl.jpg);
}

.work-box-12:after {
	background-image: url(../image/game/elemental_ttl.jpg);
}

.work-image {
	display: block;
	width: 100%;
	margin-bottom: 76.5625%;
}

.work-description {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 50%;
	z-index: 1;
}

.work-description-inner {
	display: table;
	width: 100%;
	height: 100%;
	padding: 20px;
}

.work-text {
	display: table-cell;
	vertical-align: middle;
	font-size: 1.5rem;
	line-height: 2;
}

.work-text > span {
	font-size: 120%;
	font-weight: bold;
}

.work-text .button {
	width: 75%;
	margin-top: 20px;
	padding: 3px;
}

.work-box:nth-child(odd) .work-image {
	margin-top: 76.5625% !important;
	margin-bottom: 0 !important;
}

.work-box:nth-child(odd) .work-description,
.work-box:nth-child(odd):after {
	top: 0;
}


/*---------------------------------------
 asset-wrapper
---------------------------------------*/
.asset-wrapper {
	width: 100%;
	margin: 50px auto;
	letter-spacing: -.5em;
	table-layout: fixed;
}

.asset-box {
	display: inline-block;
	vertical-align: top;
	letter-spacing: normal;
	width: 25%;
	cursor: pointer;
}

.asset-icon {
	display: block;
	width: 150px !important;
	height: 150px;
	margin: 0 auto 30px;
	border: solid 4px;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	color: #f1b400;
	font-size: 8rem;
	line-height: 142px;
}

.asset-ttl {
	display: block;
	margin: 0 20px 20px;
	font-size: 2rem;
}

.asset-txt {
	display: block;
	margin: 0 20px;
	line-height: 2;
	letter-spacing: normal;
}

.asset-box:hover .asset-icon {
	opacity: .8;
}

.asset-wrapper input {
	display: none;
}

.asset-wrapper .mapdata_wrapper,
.asset-wrapper .database_wrapper,
.asset-wrapper .shortrpg_wrapper,
.asset-wrapper .bgm_wrapper {
	display: none;
}

.asset-wrapper #mapdata:checked ~ .mapdata_wrapper,
.asset-wrapper #database:checked ~ .database_wrapper,
.asset-wrapper #shortrpg:checked ~ .shortrpg_wrapper,
.asset-wrapper #bgm:checked ~ .bgm_wrapper {
	display: block;
}

.asset-wrapper .asset_ss {
	width: 50%;
	margin: 50px auto 0;
}

.asset-wrapper .asset_ss img {
	width: 100%;
}


/*---------------------------------------
bgm-boxWrapper
---------------------------------------*/
.bgm-boxWrapper {
	width: 100%;
	margin: 0 auto;
	letter-spacing: -.5em;
	table-layout: fixed;
}

.bgm-box {
	position: relative;
	display: inline-block;
	vertical-align: top;
	letter-spacing: normal;
	width: 25%;
	background-color: #09275f;
}

.bgm-image {
	display: block;
	width: 100%;
	opacity: .35;
}

.bgm-description {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.bgm-description-inner {
	display: table;
	width: 100%;
	height: 100%;
	padding: 20px;
}

.bgm-text {
	display: table-cell;
	vertical-align: middle;
	font-size: 1.5rem;
	color: #ffffff !important;
	line-height: 2;
}

.bgm-text > span {
	font-size: 120%;
	font-weight: bold;
}

.bgm-text .button {
	width: 75%;
	margin-top: 20px;
	padding: 3px;
}


/*---------------------------------------
linkBnr
---------------------------------------*/
.linkBnr-wrapper {
	width: 100%;
	margin: 50px auto;
	text-align: center;
	letter-spacing: -.5em;
	table-layout: fixed;
}

.linkBnr-box {
	display: inline-block;
	vertical-align: top;
	letter-spacing: normal;
	width: 25%;
	cursor: pointer;
}

.linkBnr-Link {
	display: block;
	width: 200px !important;
	margin: 0 auto;
	color: #ffffff !important;
	text-decoration: none !important;
}

.linkBnr-Banner {
	width: 200px !important;
	margin: 0 auto 5px;
}

.linkBnr-Name {
	margin: 0 20px 20px;
	font-size: 2rem;
}

.linkBnr-Link:hover .linkBnr-Banner {
	opacity: .8;
}

.linkBnr .myBanner {
	width: 200px;
	margin: 50px auto 0;
}


/*---------------------------------------
contact
---------------------------------------*/
.contact {
	padding: 80px 0 150px;
}

.contact-form {
	width: 50%;
	margin: 50px auto;
}

.contact-form p {
	margin: 0 0 5px;
	text-align: left;
}

.contact-form input[type=text],
.contact-form textarea {
	display: block;
	width: 100%;
	margin-bottom: 20px;
	padding: 15px;
	outline: none;
	border: solid 1px rgba(51, 51, 51, .4);
	border-radius: 0;
	background-color: rgba(51, 51, 51, .05);
	color: #333333;
}

.contact-form textarea {
	height: 150px;
}

.contact-form input[type=text]:focus,
.contact-form textarea:focus {
	-webkit-box-shadow: 0 0 8px rgba(51, 51, 51, .5) inset;
	-moz-box-shadow: 0 0 8px rgba(51, 51, 51, .5) inset;
	box-shadow: 0 0 8px rgba(51, 51, 51, .5) inset;
}

.contact-form input[type=submit] {
	display: block;
	width: 200px;
	margin: 40px auto 0;
	padding: 15px;
	border: solid 1px rgba(51, 51, 51, .4);
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	background-color: transparent;
	color: rgba(51, 51, 51, .6);
	cursor: pointer;
}

.contact-form input[type=submit]:hover {
	background-color: rgba(51, 51, 51, .05);
}


/*---------------------------------------
footer
---------------------------------------*/
.footer {
	padding: 12px 0;
	font-size: 1.3rem;
}


/*---------------------------------------

tablet device view

---------------------------------------*/
@media (max-width:1024px) {
	body {
		background-image: none;
	}
	
	.anchor {
		margin-top: -134px;
		padding-top: 134px;
		display: block;
	}

	/* accordion */
	.accordion01 .button-accordion,
	.accordion02 .button-accordion {
		width: 50%;
	}
	
	
	/*---------------------------------------
	header
	---------------------------------------*/
	.header .logo,
	.header .ancNav {
		width: 100%;
		display: block;
	}
	
	.header .logo {
		margin: 15px 0;
		text-align: center;
	}
	
	

	/*---------------------------------------
	work-wrapper
	---------------------------------------*/
	.work-box {
		width: 50%;
	}


	/*---------------------------------------
	asset-wrapper
	---------------------------------------*/
	.asset-box {
		width: 50%;
		margin: 40px auto;
	}

	/* bgm-box */
	.bgm-box {
		width: 50%;
	}


	/*---------------------------------------
	linkBnr
	---------------------------------------*/
	.linkBnr-wrapper {
		padding-left: 0 !important;
	}

	.linkBnr-box {
		width: 33%;
	}

}


/*---------------------------------------

Smart device view

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

	/*---------------------------------------
	common
	---------------------------------------*/
	body {
		font-size: 1.3rem;
	}
	
	.anchor {
		padding-top: 97px;
		margin-top: -97px;
	}

	/* section */
	section {
		padding-right: 10px;
		padding-left: 10px;
	}

	/* button */
	.button:hover {
		opacity: 1;
	}

	.button-showy {
		margin-top: 10px;
	}

	/* heading */
	.heading {
		font-size: 2.5rem;
	}

	/* accordion */
	.accordion01 .button-accordion,
	.accordion02 .button-accordion {
		width: 100%;
		display: block;
		margin: 20px auto 0;
		font-size: 120%;
		cursor: pointer;
	}


	/*---------------------------------------
	header
	---------------------------------------*/
	.header .logo img {
		width: 150px;
	}
	
	.header .ancNav > ul {
		padding: 0 !important;
	}
	

	/*---------------------------------------
	mainTtl
	---------------------------------------*/
	.mainTtl {
		padding-top: 120px;
		padding-right: 15px;
		padding-left: 15px;
	}

	.site-title-sub {
		font-size: 1.7rem;
	}

	.site-title-sub:before,
	.site-title-sub:after {
		content: '';
		display: block;
		width: 80%;
		margin: 10px auto;
	}

	.site-title {
		margin-top: 35px;
		font-size: 5rem;
	}


	/*---------------------------------------
	about
	---------------------------------------*/
	.about-text {
		line-height: 1.8;
	}

	.about-text-sub:before,
	.about-text-sub:after {
		width: 25%;
	}


	/*---------------------------------------
	work-wrapper
	---------------------------------------*/
	.work-wrapper,
	.work-box {
		display: block;
		width: 100%;
	}

	.work-wrapper + .work-wrapper {
		margin-top: 0;
	}

	.work-image {
		display: none;
	}

	.work-description {
		position: relative;
	}

	.work-box:after {
		top: 0;
		height: 100%;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		background-size: cover;
		transform: none;
	}


	/*---------------------------------------
	asset-wrapper
	---------------------------------------*/
	.asset-wrapper,
	.asset-box {
		display: block;
	}

	.asset-icon {
		width: 100px !important;
		height: 100px;
		font-size: 5rem;
		line-height: 92px;
	}

	.asset-box {
		width: 100%;
	}

	.asset-txt {
		margin: 0;
	}
	
	.asset-wrapper .asset_ss {
		width: 100%;
	}

	.mapdata_wrapper .button,
	.database_wrapper .button,
	.shortrpg_wrapper .button {
		width: 100%;
	}

	.mapdata_wrapper .button + .button,
	.database_wrapper .button + .button,
	.shortrpg_wrapper .button + .button {
		margin-top: 10px !important;
	}

	/* bgm-box */
	.bgm-boxWrapper,
	.bgm-box {
		display: block;
		width: 100%;
	}


	/*---------------------------------------
	linkBnr
	---------------------------------------*/
	.linkBnr-wrapper,
	.linkBnr-box {
		display: block;
		width: 100%;
	}


	/*---------------------------------------
	contact
	---------------------------------------*/
	.contact {
		padding-bottom: 80px;
	}

	.contact-form {
		width: 80%;
	}

}


div#fc2_bottom_bnr{position:static!important;}