@charset "utf-8";

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

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

	共通

----------------------------------------------------------------------------- */
h2 {
	text-align: center;
	font-size: 22px;
	font-weight: normal;
	padding: 55px 0;
	margin: 0 0 15px;
    background: #f06060;
	color: #fff;
}
h2 span {
	display: block;
	padding-top: 9px;
	font-size: 14px;
	font-family: 'Roboto', sans-serif;
	letter-spacing: 0.04em;
	font-weight: normal;
}
.breadCrumb {
	margin: 0 0 10px;
	font-size: 12px;
}
.breadCrumb ul {
	width: 94.6%;
	margin: 0 auto;
}
.breadCrumb li {
	display: inline-block;
}
.breadCrumb li:before {
	content: "＞";
	display: inline-block;
	padding: 0 6px 0 3px;
}
.breadCrumb li:first-child:before {
	content: none;
}
.breadCrumb a {
	color: #2d9cdc;
}
.breadCrumb a:hover {
	text-decoration: underline;
}
img {
	width: 100%;
}
/* -----------------------------------------------------------------------------

	ナビ　アクティブ

----------------------------------------------------------------------------- */
#header #spNav nav > ul > li ul {
	display: block;
}
.projectTop #header #spNav nav > ul > li.navProject > ul li:first-child a,
.stockprices #header #spNav nav > ul > li.navProject > ul li:nth-child(2) a,
.datahealth #header #spNav nav > ul > li.navProject > ul li:nth-child(3) a,
.securitycloud #header #spNav nav > ul > li.navProject > ul li:nth-child(3) a,
.energysystem #header #spNav nav > ul > li.navProject > ul li:nth-child(5) a,
.myanmar #header #spNav nav > ul > li.navProject > ul li:nth-child(6) a,
.infrastructure #header #spNav nav > ul > li.navProject > ul li:nth-child(4) a{
	color: #fff;
	background: url(../common/img/sp/icon_arrow_nav03.gif) 96% center no-repeat #0075c2;
	background-size: 8px;
}

#header #spNav nav > ul > li.navCompany ul,
#header #spNav nav > ul > li.navMember ul,
#header #spNav nav > ul > li.navSpecial ul,
#header #spNav nav > ul > li.navWomen ul,
#header #spNav nav > ul > li.navInfomation ul {
	display: none;
}



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

PROJECT
	
----------------------------------------------------------------------------- */

.top .lead {
	width: 94.6%;
	font-size: 15px;
	line-height: 1.6;
	margin: 20px auto;
}
.top .contents01 {
	width: 94.6%;
	margin: 0 auto;
	line-height: 1;
}
.top .contents01 li {
	margin: 0 0 30px;
}
.top .contents01 li:last-child {
	margin: 0;
}
.top .contents01 li h3 {
	font-size: 18px;
	font-weight: bold;
	background: url(../project/img/sp/icon_arrow.png) no-repeat right center;
	background-size: 8px;
	margin: 5px 0 0;
}
	
	.btn_corporatesite {
		margin: 25px auto 25px;
	}
	
	.btn_corporatesite a {
		display: block;
		width: 94.6%;
		max-width: 400px;
		height: 44px;
		margin: 0 auto;
		font-size: 14px;
		line-height: 46px;
		text-align: center;
		color: #FFF !important;
		background: url("../common/img/icon_blank_w.gif") right 12px center / auto auto no-repeat #0075c2;
		border-radius: 100vh;
		-webkit-transition: all .3s;
		-ms-transition: all .3s;
		transition: all .3s;
	}
	
	.btn_corporatesite a:hover {
		opacity: 0.8;
	}
	
	
	
	
/* 小項目 */
	
/* -----------------------------------------------------------------------------

プロジェクト共通
	
----------------------------------------------------------------------------- */
	
.project .mv {
    background: #f06060;
    height: 130px;
    margin: 0 0 15px;
}
.project section h2 {
    text-align: left;
    box-sizing: border-box;
    padding: 28px 0 0 2.7%;
    height: 132px;
    font-size: 22px;
    font-weight: bold;
    line-height: 1.2;
}
.project section h2 span {
    font-size: 14px;
}
.project .contents01 {
	background: #f4f5f7;
}
.project .contents01 .title {
	color: #fff;
	font-size: 20px;
	line-height: 1.6;
	box-sizing: border-box;
	padding: 73% 5.4% 6%;
}
.project .contents01 p {
	font-size: 15px;
	margin: 0 auto;
	padding: 30px 5.4%;
	line-height: 1.8;
}
.project h3 {
	text-align: center;
	font-size: 24px;
	font-weight: normal;
	letter-spacing: 0.1em;
	margin: 30px 0;
	line-height: 1.4;
}
.project h3 span {
	display: block;
	font-size: 14px;
	color: #f06060;
	font-family: 'Roboto', sans-serif;
	margin: 0;
	letter-spacing: 0.05em;
}
.project .contents02 ,
.project .contents03 {
	width: 89.2%;
	margin: 0 auto;
}
.project .contents02 ul {
	font-size: 0;
}
.project .contents02 li {
	width: 49%;
    position: relative;
	float: left;
    margin: 0 0 7px 0;
}
.project .contents02 li.even {
	float: right;
}
.project .contents02 li .box {
	width: 100%;
	height: 70px;
	position: absolute;
	bottom: 0;
	color: #fff;
	background: rgba(0,0,0,0.8);
	box-sizing: border-box;
	line-height: 1.4;
	font-size: 13px;
	font-weight: bold;
	text-align: center;
}	
.project .contents02 li .box span {
	font-size: 10px;
	font-weight: normal;
	display: block;
    margin: 0 0 3px;
}
.project .contents03 .title {
	margin: 30px 0 0;
}
.project .contents03 .title:after {
    background-color: #000;
    content: "";
    display: block;
    height: 1px;
    width: 70px;
    margin: 20px auto 20px;
}	
.project .contents03 .title span {
	font-size: 20px;
	font-weight: bold;
	background: url(../project/myanmar/img/sp/story01.png) no-repeat;
	background-size: 120px;
	display: block;
	padding: 34px 0 0;
	line-height: 1.5;
}
.project .contents03 .story02 .title span {
	background: url(../project/myanmar/img/sp/story02.png) no-repeat;
	background-size: 120px;
}
.project .contents03 .story03 .title span {
	background: url(../project/myanmar/img/sp/story03.png) no-repeat;
	background-size: 120px;
}
.project .contents03 .box img {
	margin: 0 0 20px;
}
.project .contents03 .box p {
	font-size: 15px;
	line-height: 1.8;
	margin: 0 0 30px;
}
.project .contents03 .story03 .box p {
	margin: 0;
}
.project .contents03 .story03 .box p.static {
	margin: 0 0 30px;
}
.project .contents03 .voice {
	background: #f4f5f7;
}
.project .contents03 .voice .caption {
	background: #f06060;
	color: #fff;
	font-size: 16px;
	font-family: 'Roboto', sans-serif;
	font-weight: bold;
	letter-spacing: 0.05em;
	width: 35.8%;
	text-align: center;
	padding: 10px 0;
	margin: 20px 0 0;
}
.project .contents03 .voice p {
	padding: 20px;
	font-size: 15px;
	line-height: 1.8;
}
.project .contents04 h3 {
	font-size: 22px;
	letter-spacing: 0.01em;
	margin-bottom: 30px;
}
.project .contents04 ul {
	display: block;
	max-width: 89.2%;
	width: 89.2%;
	margin: 0 auto;
}
.project .contents04 li{
	background: url(../project/myanmar/img/sp/icon_arrow.png) no-repeat 96% center;
	background-size: 10px;
}
.project .contents04 li + li {
	margin-top:20px;
}
.project .contents04 li a{
	display: block;
	border: 1px solid #e8e8e8;
	font-size: 13px;
	font-weight: bold;
	box-sizing: border-box;
	background: url(../project/myanmar/img/sp/icon_arrow.png) no-repeat right center;
}
.project .contents04 li.energysystem a {
	background: url(../project/img/sp/btn_other05.jpg) no-repeat;
	background-size: contain; 
	height: 90px;
	padding: 10px 0 0 140px;
}
.project .contents04 li.myanmar a {
	background: url(../project/img/sp/btn_other03.jpg) no-repeat;
	background-size: contain; 
	height: 90px;
	padding: 20px 0 0 140px;
}
.project .contents04 li.datahealth a {
	background: url(../project/img/sp/btn_other01.jpg) no-repeat;
	background-size: contain; 
	height: 90px;
	padding: 20px 0 0 140px;
}
.project .contents04 li.infrastructure a {
	background: url(../project/img/sp/btn_other02.jpg) no-repeat;
	background-size: contain; 
	height: 90px;
	padding: 10px 0 0 140px;
}
.project .contents04 li.stockprices a {
	background: url(../project/img/sp/btn_other04.jpg) no-repeat;
	background-size: contain; 
	height: 90px;
	padding: 10px 0 0 140px;
}
.project .contents04 li.securitycloud a {
	background: url(../project/img/sp/btn_other06.jpg) no-repeat;
	background-size: contain; 
	height: 90px;
	padding: 10px 0 0 140px;
}


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

 AI株価予測
	
----------------------------------------------------------------------------- */

.stockprices .contents01 .title {
	background: url(../project/stockprices/img/sp/main.jpg) no-repeat , #000;
	background-size: contain;
}
.stockprices section h2 {
    background: url(../project/stockprices/img/sp/bg_header.jpg) no-repeat right 0;
    background-size: 155px 130px;
    padding: 40px 0 0 2.7%;
}
.stockprices .contents02 li .box {
	padding: 12px 0 0;
}
.stockprices .contents03 .story02 .right {
	margin-bottom: 20px;
}

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

電力小売り企業向けシステム構築支援プロジェクト
	
----------------------------------------------------------------------------- */

.energysystem .contents01 .title {
	background: url(../project/energysystem/img/sp/main.jpg) no-repeat , #000;
	background-size: contain;
}
.energysystem section h2 {
    background: url(../project/energysystem/img/sp/bg_header.jpg) no-repeat right 0;
    background-size: 155px 130px;
    padding: 28px 0 0 2.7%;
}
.energysystem .contents02 li .box {
	padding: 12px 0 0;
}
.energysystem .contents02 li .box.d3 {
	height: 80px;
	padding: 12px 0 0;
}
.energysystem .contents03 .story02 .right {
	margin-bottom: 20px;
}
    
/* -----------------------------------------------------------------------------

ミャンマープロジェクト
	
----------------------------------------------------------------------------- */

.myanmar .contents01 .title {
	background: url(../project/myanmar/img/sp/main.jpg) no-repeat , #000;
	background-size: contain;
}
.myanmar section h2 {
    background: url(../project/myanmar/img/sp/bg_header.jpg) no-repeat right 0;
    background-size: 155px 130px;
    padding: 40px 0 0 2.7%;
}
.myanmar .contents02 li .box {
	padding: 12px 0 0;
}
.myanmar .contents03 .story02 .right {
	margin-bottom: 20px;
}
    
/* -----------------------------------------------------------------------------

データヘルス計画プロジェクト
	
----------------------------------------------------------------------------- */

.datahealth .contents01 .title {
	background: url(../project/datahealth/img/sp/main.jpg) no-repeat , #000;
	background-size: contain;
}
.datahealth section h2 {
    background: url(../project/datahealth/img/sp/bg_header.jpg) no-repeat right 0;
    background-size: 155px 130px;
    padding: 40px 0 0 2.7%;
}
.datahealth .contents02 li .box {
	padding: 5px 0 0;
}
.datahealth .contents02 li:last-child .box {
	padding: 12px 0 0;
}
.datahealth .contents03 .voice {
	margin-top: 30px;
}
    
/* -----------------------------------------------------------------------------

基幹インフラ更改プロジェクト
	
----------------------------------------------------------------------------- */

.infrastructure .contents01 .title {
	background: url(../project/infrastructure/img/sp/main.jpg) no-repeat , #000;
	background-size: contain;
}
.infrastructure section h2 {
    background: url(../project/infrastructure/img/sp/bg_header.jpg) no-repeat right 0;
    background-size: 155px 130px;
    padding: 28px 0 0 2.7%;
}
.infrastructure .contents02 li .box {
	padding: 6px 0 0;
}
.infrastructure .contents03 .voice {
	margin-top: 30px;
}
.infrastructure .contents03 .right {
	margin-top: 20px;
}
    
/* -----------------------------------------------------------------------------

健康保険組合向けセキュリティクラウド構築プロジェクト
	
----------------------------------------------------------------------------- */

.securitycloud .contents01 .title {
	background: url(../project/securitycloud/img/sp/main.jpg) no-repeat , #000;
	background-size: contain;
}
.securitycloud section h2 {
    background: url(../project/securitycloud/img/sp/bg_header.jpg) no-repeat right 0;
    background-size: 155px 130px;
    padding: 28px 0 0 2.7%;
}
.securitycloud .contents02 li .box {
	padding: 6px 0 0;
}
.securitycloud .contents03 .voice {
	margin-top: 30px;
}
.securitycloud .contents03 .right {
	margin-top: 20px;
}
    
    
    
    
    
}