/* -------------------------------------------------------------- 
CSS for Triangle x Complex official site. 2011.08.17
-------------------------------------------------------------- */

/* Include
-------------------------------------------------------------- */
@import "lib/reset.css";
@import "lib/typography.css";

/* Page
-------------------------------------------------------------- */
html {
	overflow-y: scroll;
}
/*
#bg_pattern {
	background: url("../img/bg_pattern.jpg") top left no-repeat;
}
*/
#wrapper {
	clear: both;
	margin: 0 auto 0 auto;
	width: 1030px;
}
#wrapper2 {
	padding-left: 40px;
}
#wrapper_top {
	clear: both;
	margin: 0 auto 0px auto;
	width: 1030px;
	height: 1170px;
}
#wrapper_top2 {
	padding-left: 40px;
}
#wrapper_inner {
	float: left;
	border-top: solid 1px #BEA08F;
	border-left: solid 1px #BEA08F;
	border-right: solid 1px #BEA08F;
	background: #FFFFFF url("../img/top_bg.jpg") no-repeat;
	width: 948px;
}
#wrapper_inner_right {
	float: right;
	width: 40px;
	height: 1170px;
}
#wrapper_inner_right_2 {
	float: right;
	width: 40px;
	height: 5200px;
}
#wrapper_inner_right_3 {
	float: right;
	width: 40px;
	height: 2800px;
}
#wrapper_inner_right_4 {
	float: right;
	width: 40px;
	height: 3200px;
}
#header {
	clear: both;
	height: 102px;
}
#content {
	clear: both;
	text-align: left;
}
#content #primary {
	float: left;
	width: 774px;
}
#content #primary_top {
	position: relative;
	float: left;
	width: 500px;
    overflow: hidden;
}
#content #secondery {
	float: left;
	width: 174px;
	height: 894px;
	background: #FFFFFF;
}
#content #secondery_top {
	float: right;
	width: 435px;
}
#content2 {
	position: relative;
	clear: both;
	height: 540px;
	text-align: left;
}
#content2 #pickup {
	float: left;
	width: 639px;
	height: 500px;
	background: #FFFFFF url("../img/pickup_bg.jpg") no-repeat;
}
#content2 #twitter {
	float: right;
	width: 298px;
	height: 500px;
	background: #FFFFFF url("../img/twitter_bg.jpg") no-repeat;
}
#footer {
	position: absolute;
	left: 0;
	margin-top: -20px;
	width: 100%;
	min-width: 1030px;
	clear: both;
	z-index: 2;	
	background: url("../img/footer_bg.gif") top repeat-x;
}
#footer_top {
	position: absolute;
	left: 0;
	height: 171px;
	width: 100%;
	min-width: 1030px;
	clear: both;
	z-index: 2;	
	background: url("../img/footer_bg.jpg") top repeat-x;
}
/* floatバグ対策 */
#wrapper:after {
    content: "";
    display: block;
    clear: both;
    height: 1px;
    overflow: hidden;
}
#content:after {
    content: "";
    display: block;
    clear: both;
    height: 1px;
    overflow: hidden;
}
#wrapper_inner:after {
    content: "";
    display: block;
    clear: both;
    height: 1px;
    overflow: hidden;
}
#wrapper_inner_right:after {
    content: "";
    display: block;
    clear: both;
    height: 1px;
    overflow: hidden;
}
#footer:after {
    content: "";
    display: block;
    clear: both;
    height: 1px;
    overflow: hidden;
}
#footer_top:after {
    content: "";
    display: block;
    clear: both;
    height: 1px;
    overflow: hidden;
}
.nodisp {
	display: none;
}
.clearfix {
	clear: both;
}
.spacer {
	height: 20px;
}
.spacer_b {
	height: 20px;
	margin: auto;
	width: 705px;
	border-top: dotted 1px #F6B1B3;
}
.spacer_s {
	height: 10px;
}

/* Header
-------------------------------------------------------------- */
#header_inner_top {
	height: 47px;
	text-align: left;
}
#header_inner_top img {
	margin-top: 5px;
	margin-left: 10px;
}
#global_nav {
	clear: both;
	padding-left: 10px;
	padding-right: 10px;
}
#gnav li {
	position: relative;
	overflow: hidden;
	float: right;
	margin: 0;
	text-align: left;
	z-index: 3;
}
#gnav_1 {
	background: url("../img/btn_r1_on.gif") no-repeat;
}
#gnav_2 {
	background: url("../img/btn_r2_on.gif") no-repeat;
}
#gnav_3 {
	background: url("../img/btn_r3_on.gif") no-repeat;
}
#gnav_4 {
	background: url("../img/btn_r4_on.gif") no-repeat;
}
#gnav_5 {
	background: url("../img/btn_r5_on.gif") no-repeat;
}
#gnav_6 {
	background: url("../img/btn_r6_on.gif") no-repeat;
}
#gnav_7 {
	background: url("../img/btn_r7_on.gif") no-repeat;
}

/* Content
-------------------------------------------------------------- */
#sidebtn {
	float: left;
	position: relative;
	width: 39px;
	height: 141px;
}

/* primary
-------------------------------------------------------------- */
#keyvisual_r {
	clear: both;
	height: 494px;
}
#keyvisual_r img {
	opacity: 0;
	-ms-filter: "alpha( opacity=100 )";
}
#keyvisual_r img:not(:target) {
	opacity: 1\9;	/* IE9	*/
}
@media not screen and (1) { /* Opera 10 以上 */
  #keyvisual_r img {
	opacity: 1;
  }
}
#keyvisual_r img:not(\*|*) { /* Opera 9 以下 */
	opacity: 1;
}
#keyvisual_r img {
	-webkit-animation-name: fadein;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-delay: 1s;
	-webkit-animation-duration: 3s;
	-webkit-animation-fill-mode:forwards;
	-moz-animation-name: fadein;
	-moz-animation-timing-function: linear;
	-moz-animation-iteration-count: 1;
	-moz-animation-delay: 1s;
	-moz-animation-duration: 3s;
	-moz-animation-fill-mode:forwards;
	-o-animation-name: fadein;
	-o-animation-timing-function: linear;
	-o-animation-iteration-count: 1;
	-o-animation-delay: 1s;
	-o-animation-duration: 3s;
	-o-animation-fill-mode:forwards;
	-ms-animation-name: fadein;
	-ms-animation-timing-function: linear;
	-ms-animation-iteration-count: 1;
	-ms-animation-delay: 1s;
	-ms-animation-duration: 3s;
	-ms-animation-fill-mode:forwards;
	animation-name: fadein;
	animation-timing-function: linear;
	animation-iteration-count: 1;
	animation-delay: 1s;
	animation-duration: 3s;
	animation-fill-mode:forwards;
}
@-webkit-keyframes fadein{
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@-moz-keyframes fadein{
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@-o-keyframes fadein{
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@-ms-keyframes fadein{
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@keyframes fadein{
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
#logo_area {
	height: 130px;
}
#evcp_news {
	position: relative;
	margin-top: 55px;
	margin-left: 40px;
	height: 120px;
	width: 460px;
}
#evcp_news ul li {
	clear: both;
	height: 21px;
	line-height: 21px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: #FFFFFF;
}
#evcp_news ul li a {
	color: #FFFFFF;
}
#evcp_news ul li a:hover,
#evcp_news ul li a:active {
	color: #FFFFFF;
}
#evcp_news ul li span.news_date {
	color: #84ff54;
	font-size: 13px;
}
#evcp_news ul li span.news_summary {
	margin-left: 20px;
	color: #FFFFFF;
	font-size: 13px;
}
#other_news {
	position: relative;
	margin-top: 40px;
	margin-left: 40px;
	height: 120px;
	width: 460px;
}
#other_news ul li {
	clear: both;
	height: 21px;
	line-height: 21px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: #FFFFFF;
}
#other_news ul li a {
	color: #FFFFFF;
}
#other_news ul li a:hover,
#other_news ul li a:active {
	color: #FFFFFF;
}
#other_news ul li span.news_date {
	color: #84ff54;
	font-size: 13px;
}
#other_news ul li span.news_summary {
	margin-left: 20px;
	color: #FFFFFF;
	font-size: 13px;
}
#pickup_inner {
	margin-top: 70px;
}
.pickup_border {
	clear: both;
	margin: 0 20px 0 25px;
	height: 1px;
	border-bottom: dotted 1px #40251b;
}
.pickup_banner_l {
	height: 174px;
}
.pickup_banner_l img {
	margin: 13px 0 13px 30px;
}
.pickup_banner_m {
	height: 145px;
	margin-left: 30px;
}
.pickup_banner_m img {
	margin-top: 20px;
}
.pickup_banner_s {
	margin-left: 44px;
}
.pickup_banner_s img {
	margin-top: 20px;
	margin-right: 31px;
}
#pickup_inner {
	margin-top: 70px;
}
#twitter_inner {
	margin-top: 70px;
}
.twitter_border {
	clear: both;
	margin: 0 30px 0 15px;
	height: 1px;
	border-bottom: dotted 1px #40251b;
}
#twitter_widget {
	clear: both;
	margin: 0 30px 0 15px;
	width: 253px;
	height: 364px;
	overflow-y: scroll;
	scrollbar-base-color: #FFFFFF;
	scrollbar-face-color: #FFFFFF;
	scrollbar-track-color: #FFFFFF;
	scrollbar-darkshadow-color: #7D3E41;
	scrollbar-3dlight-color: #7D3E41;
	scrollbar-arrow-color: #7D3E41;
	scrollbar-highlight-color: #FFFFFF;
	scrollbar-shadow-color: #FFFFFF;
}
.twitter_button {
	height: 35px;
}
.twitter_button ul {
	margin-top: 7px;
	margin-left: 20px;
}
.twitter_button ul li {
	float: left;
	height: 35px;
	width: 113px;
	cursor: pointer;
}
li.triangle_dev {
	background: url("../img/dev_icon_off.gif") no-repeat;
}
li.triangle_info {
	margin-left: 17px;
	background: url("../img/info_icon_off.gif") no-repeat;
}
#content_header_1 {
	margin: auto;
	width: 744px;
	height: 40px;
	background: url("../img/information_header.gif") center no-repeat;
}
#content_header_2 {
	margin: auto;
	width: 744px;
	height: 40px;
	background: url("../img/story_header.gif") center no-repeat;
}
#content_header_3 {
	margin: auto;
	width: 744px;
	height: 40px;
	background: url("../img/character_header.gif") center no-repeat;
}
#content_header_3_2 {
	margin: auto;
	width: 744px;
	height: 70px;
	background: url("../img/character_header_2.gif") center no-repeat;
}
#content_header_4 {
	margin: auto;
	width: 744px;
	height: 40px;
	background: url("../img/system_header.gif") center no-repeat;
}
#content_header_4_2 {
	margin: auto;
	width: 744px;
	height: 40px;
	background: url("../img/system_header_2.gif") center no-repeat;
}
#content_header_4_3 {
	margin: auto;
	width: 744px;
	height: 40px;
	background: url("../img/system_header_3.gif") center no-repeat;
}
#content_header_4_4 {
	margin: auto;
	width: 744px;
	height: 40px;
	background: url("../img/system_header_4.gif") center no-repeat;
}
#content_header_5 {
	margin: auto;
	width: 744px;
	height: 40px;
	background: url("../img/special_header.gif") center no-repeat;
}
#content_header_5_2 {
	margin: auto;
	width: 744px;
	height: 340px;
	background: url("../img/special_header_2.jpg") center no-repeat;
}
#content_header_5_3 {
	margin: auto;
	width: 744px;
	height: 340px;
	background: url("../img/special_header_3.jpg") center no-repeat;
}
#content_header_5_4 {
	margin: auto;
	width: 744px;
	height: 40px;
	background: url("../img/special_header_4.gif") center no-repeat;
}
#content_header_6 {
	margin: auto;
	width: 744px;
	height: 40px;
	background: url("../img/product_header.gif") center no-repeat;
}
#content_body {
	clear: both;
	margin-top: 20px;
	margin-bottom: 40px;
	width: 744px;
	border: solid 1px #F0E9E4;
	box-shadow: 1px 1px 3px #F0E9E4, -1px -1px 3px #F0E9E4;
}
#content_body p.subject_body {
	clear: both;
	margin: 0px 20px 5px 40px;
	font-size: 115%;
	line-height: 1.3;
	letter-spacing: 2px;
	white-space: normal;
	word-break: break-all;
}
#content_body p.subject_pics {
	clear: both;
	margin: 0px 20px 5px 20px;
}
#content_body ul li.news_link {
	margin-left: 50px;
	line-height:2;
}
#content_body ul li.news_link a {
}
#chara_list {
	clear: both;
}
#chara_list li {
	float: left;
	text-align: left;
	width: 175px;
	height: 420px;
}
.chara_1 {
	background: url("../img/silhouette_1_on.jpg") no-repeat;
}
.chara_2 {
	background: url("../img/silhouette_2_on.jpg") no-repeat;
}
.chara_3 {
	background: url("../img/silhouette_3_on.jpg") no-repeat;
}
.chara_4 {
	background: url("../img/silhouette_4_on.jpg") no-repeat;
}
#subchara_menu {
	clear: both;
	margin-left: 25px;
}
#subchara_menu li {
	float: left;
	text-align: center;
	width: 116px;
	height: 272px;
}
#subchara_menu li.menu_off {
	opacity: 0.6;
}
#subchara_menu li.menu_on {
	-webkit-transition: 0.5s;
	-moz-transition: 0.5s;
	-o-transition: 0.5s;
	transition: 0.5s;
	opacity: 0.6;
}
#subchara_menu li.menu_on:hover {
	opacity: 1;
}
.screen_shot {
	clear: both;
	margin: auto;
	width: 642px;
}
.screen_shot ul li {
	float: left;
	margin-right: 10px;
	width: 204px;
}
.screen_shot ul li img {
	margin-bottom: 10px;
}
.screen_shot ul li p {
	margin: auto;
	width: 180px;
	font-size: 115%;
	line-height: 1.3;
	letter-spacing: 2px;
	white-space: normal;
	word-break: break-all;
}
div.system_lecture {
	margin: auto;
	width: 700px;
	height: 1010px;
	background: url("../img/system_2.jpg") no-repeat;
}
.lec_1_spacer {
	height: 110px;
}
.lec_1 {
	margin-left: 15px;
	width: 300px;
	height: 60px;
}
.lec_2_spacer {
	height: 100px;
}
.lec_2 {
	margin-left: 15px;
	width: 270px;
	height: 80px;
}
.lec_3_spacer {
	height: 460px;
}
.lec_3 {
	margin-left: 15px;
	width: 330px;
	height: 80px;
}
.lec_4_spacer {
	height: 70px;
}
.lec_4 {
	margin-left: 250px;
	width: 330px;
	height: 40px;
}
div.system_lecture p {
	font-size: 105%;
	line-height: 1.3;
	letter-spacing: 2px;
	white-space: normal;
	word-break: break-all;
}
.information_date {
	margin: auto;
	padding-bottom: 10px;
	width: 705px;
	padding-left: 20px;
}
.information_date p.date {
	float: left;
	margin-top: 9px;
	margin-bottom: 9px;
	font-size: 14px;
	color: #FF2561;
}
.information_date p.subject {
	float: left;
	margin-top: 9px;
	margin-bottom: 9px;
	margin-left: 20px;
	font-size: 14px;
	letter-spacing: 2px;
}
.information_date p.year {
	margin-top: 9px;
	padding: 5px;
	width: 10em;
	font-size: 14px;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
	border: solid 1px #f0e9e4;
	background: #f0e9e4;
	text-align: center;
}
ul.information_list {
	margin-top: 0;
	margin-bottom: 20px;
	margin-left: 40px;
}
ul.information_list li {
	clear: both;
}
ul.information_list li p.date {
	float: left;
	margin-top: 9px;
	font-size: 12px;
	color: #FF2561;
}
ul.information_list li p.subject {
	float: left;
	margin-top: 9px;
	margin-left: 20px;
	font-size: 12px;
	letter-spacing: 2px;
}
p.subject_cv_name {
	clear: both;
	margin-left: 20px;
}
p.subject_cv {
	clear: both;
	margin-top: 5px;
	margin-right: 20px;
}
.cv_button {
	float: left;
	margin-left: 20px;
	padding: 5px;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border: solid 1px #888888;
}
#voiceplayer_a {
	height: 40px;
	background: url("../img/voice_bg_akane.gif") bottom right no-repeat;
}
#voiceplayer_n {
	height: 40px;
	background: url("../img/voice_bg_nagi.gif") bottom right no-repeat;
}
.cv_pre_button_flash {
	float: left;
	margin-top: 9px;
	margin-left: 23px;
	width: 50px;
}
.cv_pre_button_flash2 {
	float: left;
	margin-top: 16px;
	margin-left: 150px;
	width: 50px;
}
ul.special_menu {
	margin-top: 5px;
	margin-left: 30px;
	height: 34px;
}
ul.special_menu li {
	float: left;
	margin-left: 15px;
	width: 207px;
	height: 34px;
}
.interview_h3 {
	width: 710px;
}
.interview_body {
	clear: both;
	margin: 5px 20px 15px 40px;
	font-size: 115%;
	line-height: 1.5;
	letter-spacing: 2px;
	white-space: normal;
	word-break: normal;
	line-break: strict;
}
.triangle_scenario {
	clear: both;
	margin-left: 40px;
	height: 160px;
}
.triangle_scenario ul li {
	float: left;
	margin-right: 10px;
	width: 160px;
	height: 160px;
}
.scenario_red {
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
	border: solid 1px #ff2561;
	background: #ff2561;
	color: #fff;
	-webkit-box-shadow: 1px 1px 3px #aaa, -1px -1px 3px #aaa;
	-moz-box-shadow: 1px 1px 3px #aaa, -1px -1px 3px #aaa;
	box-shadow: 1px 1px 3px #aaa, -1px -1px 3px #aaa;
}
.scenario_blue {
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
	border: solid 1px #54a8c6;
	background: #54a8c6;
	color: #fff;
	-webkit-box-shadow: 1px 1px 3px #aaa, -1px -1px 3px #aaa;
	-moz-box-shadow: 1px 1px 3px #aaa, -1px -1px 3px #aaa;
	box-shadow: 1px 1px 3px #aaa, -1px -1px 3px #aaa;
}
.scenario_unknown {
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
	border: solid 1px #eee;
	background: #eee;
	color: #666;
}
.scenario_unknown p {
	width: 160px;
	text-align: center;
}

/* secondery
-------------------------------------------------------------- */

/* floatバグ対策 */
#content:after {
    content: "";
    display: block;
    clear: both;
    height: 1px;
    overflow: hidden;
}
.screen_shot:after {
    content: "";
    display: block;
    clear: both;
    height: 1px;
    overflow: hidden;
}

/* Footer
-------------------------------------------------------------- */
#footer_outer {
	width: 100%;
	margin-top: 40px;
}
#footer_inner {
	margin: 0 auto;
	width: 950px;
	text-align: left;
}
#sdchara {
	float: left;
	width: 215px;
	height: 175px;
}
#sdchara img {
	margin-left: 45px;
}
#footer_body {
	float: left;
}
#banner_area {
	height: 90px;
}
#footer_lower {
	clear: both;
	margin-left: 20px;
	width: 910px;
	height: 95px;
	background: #FFFFFF;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
	border: solid 2px #404040;
}
#footer_menu ul li {
	float: left;
	margin-top: 20px;
	margin-right: 8px;
	font-size: 115%;
}
#footer_menu ul li a {
	color: #000000;
	text-decoration: none;
}
.footer_border {
	margin-top: 8px;
	margin-bottom: 8px;
	width: 688px;
	border-bottom: solid 1px #000000;
}
.ceatant_logo {
	float: left;
	margin-top: 18px;
	margin-left: 18px;
}
.footer_misc {
	float: left;
	margin-left: 20px;
	height: 45px;
	width: 600px;
}
.copyright {
	padding-top: 5px;
}
.copyright span {
	font-size: 13px;
}
.twitter {
	float: right;
	padding-top: 12px;
	padding-right: 20px;
}
.footer_notice span {
	clear: both;
	font-size: 11px;
}


/* floatバグ対策 */
#footer_inner:after {
	content: "";
	display: block;
	clear: both;
	height: 1px;
	overflow: hidden;
}