/* CSS Document */
/*==============================	
project/index.html
==============================*/
/*----------------------------------------
projectMain
----------------------------------------*/
#projectMain {
	background:url(../../work/project/img/project_ttl_mark.png) center top no-repeat;
	padding-top:105px;
	padding-bottom:125px;
	margin-top:30px;
	text-align:center;
}
/*sub title*/
#projectMain p:nth-child(2) {
	margin-top:27px;
}
/*lead txt*/
#projectMain p:nth-child(3) {
	margin-top:35px;
}



/*----------------------------------------
titleArea
----------------------------------------*/
.titleArea {
	color:#fff;
	cursor:pointer;
	transition:opacity 0.4s ease;
}
.titleArea:hover {
	opacity:0.9;
}
.titleArea div {
	width:960px;
	height:140px;
	box-sizing:border-box;
	position:relative;
	margin:0px auto 0px auto;
	padding:35px 0px 0px 0px;
}

#case01 .titleArea {
	background-image:url(../../work/project/img/project_case01_mark02.png), url(../../work/common/work_ttl_bg.png);
	background-repeat:no-repeat, repeat;
	background-position:left calc(50% - 480px) center, 0 0;
}
#case02 .titleArea {
	background-image:url(../../work/project/img/project_case02_mark02.png), url(../../work/common/work_ttl_bg.png);
	background-repeat:no-repeat, repeat;
	background-position:left calc(50% - 480px) center, 0 0;
}
#case03 .titleArea {
	background-image:url(../../work/project/img/project_case03_mark02.png), url(../../work/common/work_ttl_bg.png);
	background-repeat:no-repeat, repeat;
	background-position:left calc(50% - 480px) center, 0 0;
}

/*mark*/
.titleArea div p:nth-child(1) {
	position:absolute;
	left:0;
	top:30px;
}

/*sub title*/
.titleArea div p:nth-child(2) {
	font-size:22px;
	line-height:1.2;
	color:#d1bd85;
	padding-left:90px;
}

/*main title*/
.titleArea div h2:nth-child(3) {
	font-size:32px;
	line-height:1.35;
	font-weight:normal;
	margin-top:10px;
}

/*ReadMore*/
.titleArea div .btReadMore {
	position:absolute;
	right:0;
	top:calc(50% - 11px);
	width:100px;
}

/*----------------------------------------
visualArea
----------------------------------------*/
.visualArea {
	height:499px;
	background-position:center center;
	background-repeat:no-repeat;
	background-size:cover;
	text-indent:-10000px;
}

#case01 .visualArea {	background-image:url(../../work/project/img/project_case01_visual.jpg);}
#case02 .visualArea {	background-image:url(../../work/project/img/project_case02_visual.jpg);}
#case03 .visualArea {	background-image:url(../../work/project/img/project_case03_visual.jpg);}

/*----------------------------------------
openSection
----------------------------------------*/
.openSection  {
	background-color:#f7f6f2;
	padding-top:75px;
	
	display:none;
}

/*----------------------------------------
theme
----------------------------------------*/
.openSection section:nth-child(1) {
	background-color:#f7f6f2;
}
.openSection section:nth-child(1) div {
	background:url(../../work/project/img/project_case_bg_theme.png) 0 0 no-repeat, url(../../work/project/img/project_case_bg_line.png) 0 0 repeat-y;
	width:960px;
	box-sizing:border-box;
	margin:0px auto 0px auto;
	padding:0px 0px 65px 180px;
}
/*h2*/
.openSection section:nth-child(1) h2 {
	color:#baa977;
	font-size:20px;
	font-weight:normal;
	line-height:1.2;
	letter-spacing:2px;
}

/*----------------------------------------
solution
----------------------------------------*/
.openSection section:nth-child(2) {
	background-color:#fff;
}
.openSection section:nth-child(2) div {
	background:url(../../work/project/img/project_case_bg_solution.png) 0 107px no-repeat, url(../../work/project/img/project_case_bg_line.png) 0 0 repeat-y;
	width:960px;
	box-sizing:border-box;
	margin:0px auto 0px auto;
	padding:107px 0px 65px 180px;
}
/*h2*/
.openSection section:nth-child(2) h2 {
	color:#214454;
	font-size:32px;
	font-weight:normal;
	line-height:1.6;
	letter-spacing:2px;
}
/*h3*/
.openSection section:nth-child(2) h3 {
	color:#214454;
	font-size:15px;
	font-weight:normal;
	line-height:1.2;
	letter-spacing:2px;
}
.openSection section:nth-child(2) h3.teian {
	border-top:1px #ccc dotted;
	padding-top:16px;
}
/*ul*/
.openSection section:nth-child(2) ul {
	color:#214454;
	font-size:14px;
	line-height:1.65;
}
.openSection section:nth-child(2) ul li {
	background:url(../img/list_mark01.png) 0 7px no-repeat;
	padding-left:10px;
	margin-top:0.5em;
}
/*----------------------------------------
achivement
----------------------------------------*/
.openSection section:nth-child(3) {
	background-color:#fff;
}
.openSection section:nth-child(3) div {
	background:url(../../work/project/img/project_case_bg_achievement.png) 0 65px no-repeat, url(../../work/project/img/project_case_bg_line.png) 0 0 repeat-y;
	width:960px;
	box-sizing:border-box;
	margin:0px auto 0px auto;
	padding:65px 0px 125px 180px;
}
/*h2*/
.openSection section:nth-child(3) h2 {
	color:#214454;
	font-size:32px;
	font-weight:normal;
	line-height:1.6;
	letter-spacing:2px;
}
/*ul*/
.openSection section:nth-child(3) ul {
	color:#214454;
	line-height:1.65;
}
.openSection section:nth-child(3) ul li {
	background:url(../img/list_mark01.png) 0 7px no-repeat;
	padding-left:10px;
	margin-top:0.5em;
}

/*----------------------------------------
voice
----------------------------------------*/
.openSection section:nth-child(4) {
	background-color:#fff;
}
.openSection section:nth-child(4)>div {
	background:url(../../work/project/img/project_case_bg_voice.png) 0 57px no-repeat, url(../../work/project/img/project_case_bg_line.png) 0 0 repeat-y, url(../../work/project/img/project_case_bg_voice_white.png) 0 0 repeat-y;
	width:960px;
	box-sizing:border-box;
	margin:0px auto 0px auto;
	padding:57px 0px 65px 180px;
	background-color:#f7f6f2;
	position:relative;
}
/*h2*/
.openSection section:nth-child(4) h2 {
	color:#baa977;
	font-size:20px;
	font-weight:normal;
	line-height:1.2;
	letter-spacing:2px;
}
/*p*/
.openSection section:nth-child(4) p {
	font-size:14px;
	line-height:2.3;
	padding-right:220px;
}
/*voicePht*/
.openSection section:nth-child(4) .voicePht {
	position:absolute;
	top:110px;
	left:770px;
	min-width:137px;
	padding-top:200px;
	background-position:0 0;
	background-repeat:no-repeat;
	background-size:137px auto;
	letter-spacing:2px;
}
.openSection section:nth-child(4) .voicePht small {
	display:block;
	line-height:1.2;
}

#case01 .openSection section:nth-child(4) .voicePht { background-image:url(../../work/project/img/project_case01_man.jpg);}
#case02 .openSection section:nth-child(4) .voicePht { background-image:url(../../work/project/img/project_case02_man.jpg);}
#case03 .openSection section:nth-child(4) .voicePht { background-image:url(../../work/project/img/project_case03_man.jpg);}


/*----------------------------------------
open close btn
----------------------------------------*/
.caseArea .btReadMore.white{ border:1px #fff solid; background-color:transparent;}

/*open*/
.caseArea .plus {display:block;}
.caseArea .minus {display:none;}
.caseArea .btReadMore.white:before{	background-image:url(../img/btClose_brown_plus.svg);}
.caseArea .btReadMore.white:after{	background-image:url(../img/btClose_brown_plus.svg);}
/*close*/
.caseArea .active .plus {display:none;}
.caseArea .active .minus {display:block;}
.caseArea .active .btReadMore.white:before{	background-image:url(../img/btClose_brown_minus.svg);}
.caseArea .active .btReadMore.white:after{	background-image:url(../img/btClose_brown_minus.svg);}

.caseArea .btReadMoreTrigger:hover .btReadMore.white{
	background-color:transparent;
}

/*----------------------------------------
text end close btn
----------------------------------------*/
.txtEndCloseBtn {
	background-color:#fff;
	height:100px;
	position:relative;
	cursor:pointer;
}
.txtEndCloseBtn .btReadMore.white {
	border:1px #baa977 solid;
	position:absolute;
	top:40px;
	right:calc(50% - 480px);
	width:100px;
}
.txtEndCloseBtn .btReadMore.white:before{	background-image:url(../img/btClose_white_minus.svg);}
.txtEndCloseBtn .btReadMore.white:after{	background-image:url(../img/btClose_white_minus.svg);}

/*==========================================================================================	
for SMARTPHONE
==========================================================================================*/

@media screen and (max-width: 480px) {

/*==============================	
project/index.html
==============================*/
/*----------------------------------------
projectMain
----------------------------------------*/
#projectMain {
	background:url(../../work/project/img/project_ttl_mark.png) center top no-repeat;
	background-size:auto 60px;
	padding-top:68px;
	padding-bottom:20px;
	margin-top:10px;
	text-align:center;
	width:90%;
	margin-left:auto;
	margin-right:auto;
}
/*sub title*/
#projectMain p:nth-child(2) {
	margin-top:16px;
}
/*lead txt*/
#projectMain p:nth-child(3) {
	margin-top:20px;
}



/*----------------------------------------
titleArea
----------------------------------------*/
.titleArea {
	background:url(../../work/common/work_ttl_bg.png);
	color:#fff;
	cursor:pointer;
	transition:opacity 0.4s ease;
}
.titleArea:hover {
	opacity:0.9;
}
.titleArea div {
	width:90%;
	height:115px;
	box-sizing:border-box;
	position:relative;
	margin:0px auto 0px auto;
	padding:20px 40px 0px 0px;
	background:url(../../work/project/img/projec_ico_plus.png) right 0px center no-repeat;
	background-size:19px auto;
}
.titleArea.active div {
	background-image:url(../../work/project/img/projec_ico_minus.png);
}

/*mark*/
.titleArea div p:nth-child(1) {
	position:absolute;
	left:0;
	top:15px;
	width:48px;
}

/*sub title*/
.titleArea div p:nth-child(2) {
	font-size:15px;
	line-height:1.2;
	padding-left:58px;
}

/*main title*/
.titleArea div h2:nth-child(3) {
	font-size:19px;
	line-height:1.35;
	font-weight:normal;
	margin-top:10px;
}

/*ReadMore*/
.titleArea div .btReadMore {
	display:none;
}

/*----------------------------------------
visualArea
----------------------------------------*/
.visualArea {
	height:150px;
}

/*----------------------------------------
openSection
----------------------------------------*/
.openSection  {
	background-color:#f7f6f2;
	padding-top:35px;
	
	display:none;
}

/*----------------------------------------
theme
----------------------------------------*/
.openSection section:nth-child(1) {
	background-color:#f7f6f2;
}
.openSection section:nth-child(1) div {
	background-size:38px auto, 38px auto;
	width:90%;
	margin:0px auto 0px auto;
	padding:0px 0px 35px 50px;
}
/*h2*/
.openSection section:nth-child(1) h2 {
	color:#baa977;
	font-size:17px;
	font-weight:normal;
	line-height:1.2;
	letter-spacing:2px;
}

/*----------------------------------------
solution
----------------------------------------*/
.openSection section:nth-child(2) {
	background-color:#fff;
}
.openSection section:nth-child(2) div {
	background:url(../../work/project/img/project_case_bg_solution.png) 0 50px no-repeat, url(../../work/project/img/project_case_bg_line.png) 0 0 repeat-y;
	background-size:38px auto, 38px auto;
	width:90%;
	margin:0px auto 0px auto;
	padding:45px 0px 20px 50px;
}
/*h2*/
.openSection section:nth-child(2) h2 {
	color:#214454;
	font-size:17px;
	font-weight:normal;
	line-height:1.6;
	letter-spacing:2px;
}
/*h3*/
.openSection section:nth-child(2) h3 {
	color:#214454;
	font-size:15px;
	font-weight:normal;
	line-height:1.2;
	letter-spacing:2px;
}
.openSection section:nth-child(2) h3.teian {
	border-top:1px #ccc dotted;
	padding-top:16px;
}
/*ul*/
.openSection section:nth-child(2) ul {
	color:#214454;
	font-size:14px;
	line-height:1.65;
}
.openSection section:nth-child(2) ul li {
	background:url(../img/list_mark01.png) 0 7px no-repeat;
	padding-left:10px;
	margin-top:0.5em;
}
/*----------------------------------------
achivement
----------------------------------------*/
.openSection section:nth-child(3) {
	background-color:#fff;
}
.openSection section:nth-child(3) div {
	background:url(../../work/project/img/project_case_bg_achievement.png) 0 25px no-repeat, url(../../work/project/img/project_case_bg_line.png) 0 0 repeat-y;
	background-size:38px auto, 38px auto;
	width:90%;
	margin:0px auto 0px auto;
	padding:20px 0px 65px 50px;
}
/*h2*/
.openSection section:nth-child(3) h2 {
	color:#214454;
	font-size:17px;
	font-weight:normal;
	line-height:1.6;
	letter-spacing:2px;
}
/*ul*/
.openSection section:nth-child(3) ul {
	color:#214454;
	line-height:1.65;
}
.openSection section:nth-child(3) ul li {
	background:url(../img/list_mark01.png) 0 7px no-repeat;
	padding-left:10px;
	margin-top:0.5em;
}

/*----------------------------------------
voice
----------------------------------------*/
.openSection section:nth-child(4) {
	background-color:#fff;
}
.openSection section:nth-child(4)>div {
	background:url(../../work/project/img/project_case_bg_voice.png) 0 30px no-repeat, url(../../work/project/img/project_case_bg_line.png) 0 0 repeat-y, url(../../work/project/img/project_case_bg_voice_white.png) 0 0 repeat-y;
	background-size:41px auto, 38px auto, 23px auto;
	width:90%;
	box-sizing:border-box;
	margin:0px auto 0px auto;
	padding:30px 0px 30px 55px;
	background-color:#f7f6f2;
	position:relative;
}
/*h2*/
.openSection section:nth-child(4) h2 {
	color:#baa977;
	font-size:17px;
	font-weight:normal;
	line-height:1.2;
	letter-spacing:2px;
	padding-right:20px;
}
/*p*/
.openSection section:nth-child(4) p {
	font-size:14px;
	line-height:2.3;
	padding-right:20px;
}
/*voicePht*/
.openSection section:nth-child(4) .voicePht {
	position:static;
	min-width:inherit;
	padding:35px 0 0 23px;
	box-sizing:border-box;
	background-position:right top;
	background-repeat:no-repeat;
	background-size:auto 148px;
	letter-spacing:2px;
	min-height:148px;
	background-color:#fff;
	margin:20px 20px 0 0;
}
.openSection section:nth-child(4) .voicePht small {
	display:block;
	line-height:1.2;
}

#case01 .openSection section:nth-child(4) .voicePht { background-image:url(../../work/project/img/project_case01_man.jpg);}
#case02 .openSection section:nth-child(4) .voicePht { background-image:url(../../work/project/img/project_case02_man.jpg);}
#case03 .openSection section:nth-child(4) .voicePht { background-image:url(../../work/project/img/project_case03_man.jpg);}


/*----------------------------------------
text end close btn
----------------------------------------*/
.txtEndCloseBtn {
	background-color:#fff;
	height:80px;
	position:relative;
	cursor:pointer;
	background-image:url(../../work/project/img/projec_ico_minus_02.png);
	background-position:center center;
	background-repeat:no-repeat;
	background-size:19px auto;
}
.txtEndCloseBtn .btReadMore.white {
	display:none;
}



}