@charset "UTF-8";
/* CSS Document */

/******************************************
#areaMainIntro
******************************************/

#areaMainIntro {
	height:0;
	position:relative;
	padding-top:46%;
	/*background:#2d2d2d url(css_img/photoBgIntro.jpg) no-repeat left top;
	background-size:100%;*/
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#6ba69f+0,000000+50 */
	background: #6ba69f; /* Old browsers */
	background: -moz-linear-gradient(-45deg, #6ba69f 0%, #000000 50%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg, #6ba69f 0%,#000000 50%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg, #6ba69f 0%,#000000 50%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6ba69f', endColorstr='#000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
	transition-property:padding-top background-size;
	transition-duration:0.6s;
	transition-timing-function:ease-in-out;
	transition-delay:0s;
	box-sizing:border-box;
	overflow:hidden;
}

#areaMainIntro .partsImg01 {
	position:absolute;
	right:0;
	top:0;
	display:none;
	line-height:0;
}
#areaMainIntro .partsImg01.show {
	display:block;
}

#areaMainIntro .partsImg02 {
	position:absolute;
	right:0;
	bottom:0;
	display:none;
	line-height:0;
}
#areaMainIntro .partsImg02.show {
	display:block;
}

#areaMainIntro .panel{
	position:absolute;
	left:0;
	top:0;
	z-index:20;
	width:100%;
}
#areaMainIntro .panel li{
	width:10%;
	padding-top:21%;
	float:left;
	height:0;
	overflow:hidden;
	background:#000;
	opacity:0.3;
	box-sizing:border-box;
}
#areaMainIntro .panel li.hide{
	opacity:0;
}

#areaMainIntro .groupText {
	position:absolute;
	width:100%;
	left:0;
	/*bottom:125px;*/
	bottom:15%;
	text-align:center;
	padding:5px;
	z-index:20;
	box-sizing:border-box;
}

#areaMainIntro .groupText h2 {
	font-size:2.55em;
	margin-bottom:15px;
	color:#fff;
}
#areaMainIntro .groupText h2.hide {
	display:none;
}

#areaMainIntro .groupText .type01 {
	font-size:1.08em;
	color:#fff;
	margin-bottom:10px;
}
#areaMainIntro .groupText .type01.hide {
	/*display:none;*/
	opacity:0;
}

#areaMainIntro .groupText .type02 {
	font-size:1.43em;
	color:#fff;
	font-weight:bold;
	margin-bottom:0;
}
#areaMainIntro .groupText .type02.hide {
	/*display:none;*/
	opacity:0;
}

/* ウィンドウ幅が768px以下の場合に適用するCSS */
@media screen and ( max-width:992px ){
	
	#areaMainIntro .partsImg01 {
		width:450px;
	}
	
	#areaMainIntro .partsImg02 {
		width:450px;
		bottom:-5px;
	}
}
/* ウィンドウ幅が768px以下の場合に適用するCSS */
@media screen and ( max-width:768px ){
	
	
	#areaMainIntro {
		padding-top:75%;
		/*background:#2d2d2d url(css_img/photoBgIntro.jpg) no-repeat 30% top;
		background-size:170%;*/
	}
	
	#areaMainIntro .groupText {
		/*bottom:7%;*/
		bottom:15%;
		padding:5px;
	}
	
	#areaMainIntro .groupText h2 {
		font-size:1.46em;
		margin-bottom:15px;
		/*margin-bottom:3px;*/
	}
	
	#areaMainIntro .groupText .type01 {
		font-size:1.01em;
		margin-bottom:5px;
	}
	
	#areaMainIntro .groupText .type02 {
		font-size:1.13em;
	}
	
	#areaMainIntro .partsImg01 {
		width:250px;
	}
	
	#areaMainIntro .partsImg02 {
		width:250px;
		bottom:-5px;
	}
	
	
}


/******************************************
#areaTopics
******************************************/

#areaTopics {
	position:relative;
	background:#209E91;
}

#areaTopics,
#areaTopics a {
	color:#fff;
}

#areaTopics .list {
	height:84px;
	overflow:hidden;
	transition-property:height;
	transition-duration:0.6s;
	transition-timing-function:ease-in-out;
	transition-delay:0s;
}
#areaTopics .list.show {
	height:auto;
}

#areaTopics .list dl {
	padding:0 0 0 25px;
	margin-right:180px;
	box-sizing:border-box;
}

#areaTopics .list dt,
#areaTopics .list dd {
	height:84px;
	line-height:84px;
}

#areaTopics .list dt {
	width:100px;
	float:left;
}

#areaTopics .list dd {
	margin-left:120px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	transition-property:height;
	transition-duration:0.6s;
	transition-timing-function:ease-in-out;
	transition-delay:0s;
}

#areaTopics .btmView {
	position:absolute;
	right:20px;
	top:25px;
	font-size:1.1em;
	box-sizing:border-box;
	margin-bottom:0;
}
#areaTopics .btmView a {
	display:block;
	border:solid 1px #fff;
	padding:0 25px;
	height:34px;
	line-height:34px;
}


/* ウィンドウ幅が768px以下の場合に適用するCSS */
@media screen and ( max-width:768px ){
	
	#areaTopics {
		padding-bottom:45px;
	}
	
	#areaTopics .btmView {
		right:auto;
		left:50%;
		top:auto;
		bottom:13px;
		margin-left:-90px;
		font-size:1.03em;
		width:180px;
		text-align:center;
	}
	
	#areaTopics .list dt,
	#areaTopics .list dd {
		height:auto;
		line-height:1.8em;
	}
	
	#areaTopics .list dt {
		width:auto;
		float:none;
	}
	
	#areaTopics .list dd {
		margin-left:1.5em;
	}
	
	#areaTopics .list dl {
		padding:10px 0 10px 25px;
		margin-right:0px;
		height:84px;
	}
	
	#areaTopics .list.show dl {
		height:auto;
	}
	
	#areaTopics .list.show dd {
		white-space: normal;
	}
	
}

/******************************************
#areaMission
******************************************/

#areaMission {
	position:relative;
}

#areaMission .photo {
	width:80%;
	height:0;
	overflow:hidden;
	padding-top:41%;
	background:#ccc;
	position:relative;
}
#areaMission .photo img {
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:auto;
}

#areaMission::before{
	background:#ffffff33;
	position:absolute;
	right:0;
	top:110px;
	width:65%;
	height:0;
	overflow:hidden;
	content:" ";
	display:block;
	padding-top:41%;
}

/* ウィンドウ幅が992px以下の場合に適用するCSS */
@media screen and ( max-width:992px ){
	
	#areaMission .photo {
		width:95%;
		padding-top:41%;
	}
	
}


/******************************************
#areaFeature
******************************************/

#areaFeature {
}

#areaFeature .list {
	margin-left:auto;
	margin-right:auto;
	width:1440px;
}

#areaFeature .list dl {
	float:left;
	position:relative;
	width:33%;
	box-sizing:border-box;
	padding:290px 25px 25px;
}


#areaFeature .list dt {
	text-align:center;
	margin-bottom:35px;
	color:#3DB1A5;
	font-size:1.15em;
	font-weight:bold;
	height:85px;
	padding-bottom:20px;
	position:relative;
}
#areaFeature .list dt::before {
	content:"";
	display:block;
	width:216px;
	height:5px;
	margin-left:-108px;
	background:#999;
	position:absolute;
	left:50%;
	bottom:0;
}

#areaFeature .list .icon {
	position:absolute;
	top:0;
	left:50%;
	width:216px;
	height:216px;
	border-radius: 216px;        /* CSS3草案 */
	-webkit-border-radius: 216px;    /* Safari,Google Chrome用 */
	-moz-border-radius: 216px;   /* Firefox用 */ 
	margin-left:-108px;
	text-align:center;
	background:#3DB1A5;
	box-sizing:border-box;
	padding:35px;
}
#areaFeature .list .icon img {
	width:100%;
}

#areaFeature .list .text {
	color:#eeeeee;
	line-height:1.8em;
}

/* ウィンドウ幅が992px以下の場合に適用するCSS */
@media screen and ( max-width:992px ){
	
	#areaFeature .list {
		width:auto;
	}
	
	#areaFeature .list dl {
		width:50%;
		padding:290px 25px 95px;
	}
	
}

/* ウィンドウ幅が768px以下の場合に適用するCSS */
@media screen and ( max-width:768px ){
	#areaFeature .list dl {
		width:auto;
		float:none;
		padding:250px 15px 55px;
	}
	
	
	#areaFeature .list dt {
		margin-bottom:35px;
		font-size:1.15em;
		height:auto;
	}
}

/******************************************
#areaOurConceptDemo
******************************************/


#areaOurConceptDemo {}


#areaOurConceptDemo .boxMovie {
	width:1417px;
	padding-top:800px;
	height:0;
	overflow:hidden;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
	position:relative;
}
#areaOurConceptDemo .boxMovie video{
	position:absolute;
	width:100%;
	height:100%;
	left:0;
	top:0;
}

/* ウィンドウ幅が992px以下の場合に適用するCSS */
@media screen and ( max-width:992px ){
	
	#areaOurConceptDemo .boxMovie {
		width:auto;
		padding-top:65%;
		margin-left:15px;
		margin-right:15px;
		box-sizing:border-box;
	}
	
}

/******************************************
#areaContactUs
******************************************/

#areaContactUs{}

#areaContactUs form {
	width:825px;
	margin-left:auto;
	margin-right:auto;
}


#areaContactUs form #formTextarea {
	height:190px;
}

/* ウィンドウ幅が992px以下の場合に適用するCSS */
@media screen and ( max-width:992px ){
	
	#areaContactUs form {
		width:auto;
		padding:0 10px;
		margin-left:auto;
		margin-right:auto;
	}
	
	
}



/******************************************
#areaHowWork
******************************************/
#areaHowWork {
	margin-bottom:25px;
}

#areaHowWork p{
	font-size:1.3em;
	line-height:1.8em;
}


#areaHowWork .p01{
	margin-bottom:45px;
}
#areaHowWork .p01 .icon{
	width:150px;
	height:150px;
	/*line-height:150px;*/
	padding:20px;
	box-sizing:border-box;
	float:left;
	text-align:center;
	background:#3DB1A5;
	border-radius: 150px;        /* CSS3草案 */
	-webkit-border-radius: 150px;    /* Safari,Google Chrome用 */
	-moz-border-radius: 150px;   /* Firefox用 */
}
#areaHowWork .p01 .icon img{
	width:100%;
	height:auto;
}
#areaHowWork .p01 p {
	margin-left:200px;
	padding-top:25px;
	color:#68CAC0;
	font-size:1.32em;
}

#areaHowWork .image01 {
	width:1250px;
	position:relative;
	margin:0 auto 55px;
	padding:40px 0 0 0;
}
#areaHowWork .image01::before {
	display:block;
	content:"";
	display:block;
	width:1000px;
	height:650px;
	position:absolute;
	right:0;
	top:0;
	background:#006E63cc;
	z-index:5;
}
#areaHowWork .image01 .photo{
	position:relative;
	z-index:20;
}

#contents #areaHowWork  .listIcon{
	position:relative;
	overflow:hidden;
	-webkit-perspective: 500px;
	perspective: 500px;
}
#contents #areaHowWork  .listIcon::before{
	position:absolute;
	bottom:0;
	right:0;
	width:1617px;
	height:29px;
	content:"";
	background:url(css_img/imgCursor01.svg) no-repeat right top;
	background-size:100%;
	display:block;
	opacity:0.6;
}
#contents #areaHowWork  .listIcon dl{
	width:33%;
}
#contents #areaHowWork  .listIcon dt{
	margin-bottom:15px;
	font-size:1.2em;
	min-height:51px;
}
#contents #areaHowWork  .listIcon .icon .frame{
	width:210px;
	height:210px;border-radius: 210px;        /* CSS3草案 */
	-webkit-border-radius: 210px;    /* Safari,Google Chrome用 */
	-moz-border-radius: 210px;   /* Firefox用 */
}

/* ウィンドウ幅が992px以下の場合に適用するCSS */
@media screen and ( max-width:992px ){
	#contents #areaHowWork  .listIcon{
		padding:0 0 0 15px;
	}
	
	#contents #areaHowWork  .listIcon dl{
		width:auto;
		float:none;
		padding-left:110px;
		margin-bottom:25px;
		position:relative;
		min-height:85px;
	}
	#contents #areaHowWork  .listIcon dt{
		min-height: inherit;
		text-align:left;
		padding-top:5px;
		padding-right:10px;
	}
	#contents #areaHowWork  .listIcon dd{
		position:absolute;
		left:0;
		top:0;
	}
	#contents #areaHowWork  .listIcon .icon .frame{
		width:85px;
		height:85px;
		border-radius: 85px;        /* CSS3草案 */
		-webkit-border-radius: 85px;    /* Safari,Google Chrome用 */
		-moz-border-radius: 85px;   /* Firefox用 */
		padding:10px;
	}

	#contents #areaHowWork  .listIcon::before{
		bottom:5px;
		right:-2px;
		position:absolute;
		height:1017px;
		width:22px;
		background:url(css_img/imgCursor02.svg) no-repeat right bottom;
		background-size:100%;
	}
	
	
	#areaHowWork .image01 {
		width:auto;
		padding:10px 25px 10px 10px;
		margin-bottom:25px;
	}
	
	#areaHowWork .image01::before {
		width:96%;
		height:0;
		padding-top:55%;
	}
	
}

/* ウィンドウ幅が768px以下の場合に適用するCSS */
@media screen and ( max-width:768px ){
	
	#areaHowWork .p01 .icon{
		/*line-height:150px;
		float:none;*/
		margin:0 auto 15px auto;
		width:110px;
		height:110px;
		border-radius: 110px;        /* CSS3草案 */
		-webkit-border-radius: 110px;    /* Safari,Google Chrome用 */
		-moz-border-radius: 110px;   /* Firefox用 */
	}
	
	#areaHowWork .p01 p {
		margin-left:125px;
		padding-top:0;
		font-size:1.2em;
	}
	
}

/******************************************
#areaProgram
******************************************/

#areaProgram p {
	font-size:1.3em;
}


#areaProgram .Impact_01 {
	font-size:1.66em;
	font-weight:bold;
	color:#FF9F59;
	padding:0 0 0 150px;
	position:relative;
}
#areaProgram .Impact_01::before {
	content:"";
	background: url(css_img/iconImpactHome_01.svg) no-repeat left top;
	background-size:100%;
	width:130px;
	height:100px;
	position:absolute;
	left:0;
	top:2px;
}


#areaProgram .Impact_02 {
	font-size:1.86em;
	font-weight:bold;
	background:#FFC559;
	color:#000;
	text-align:center;
	padding:10px 25px;
	position:relative;
	margin-bottom:10px;
}

#areaProgram .listIcon.icon_01 {
	font-size:1.23em;
	margin-bottom:65px;
	position:relative;
	overflow:hidden;
}
#areaProgram .listIcon.icon_01::before {
	display:block;
	content:"";
	position:absolute;
	right:0;
	bottom:0;
	width:1617px;
	height:29px;
	background:url(css_img/imgCursor01.svg) no-repeat left top;
	background-size:100%;
	opacity:0.6;
}
#areaProgram .listIcon.icon_01 dl {
	width:33%;
}
#areaProgram .listIcon.icon_01 dt {
	font-weight:bold;
	margin-bottom:15px;
	min-height:80px;
}
#areaProgram .listIcon.icon_01 .icon .frame {
	width:210px;
	height:210px;border-radius: 210px;        /* CSS3草案 */
	-webkit-border-radius: 210px;    /* Safari,Google Chrome用 */
	-moz-border-radius: 210px;   /* Firefox用 */
	background-color:#68CAC0;
}

#areaProgram .listIcon.icon_02 {
	position:relative;
	overflow:hidden;
	margin-bottom:35px;
}
/*#areaProgram .listIcon.icon_02::before {
	position:absolute;
	content:"";
	display:block;
	width:1617px;
	height:29px;
	background:url(css_img/imgCursor01.svg) no-repeat left top;
	background-size:100%;
	right:0;
	bottom:0;
	opacity:0.6;
}*/
#areaProgram .listIcon.icon_02 li {
	/*width:33%;*/
	width:auto;
	float:none;
}

#areaProgram .listIcon.icon_02 li .frame {
	width:210px;
	height:210px;border-radius: 210px;        /* CSS3草案 */
	-webkit-border-radius: 210px;    /* Safari,Google Chrome用 */
	-moz-border-radius: 210px;   /* Firefox用 */
	background:#FFC559;
	margin:0 auto;
}

#areaProgram .image01 {
	margin-bottom:55px;
	text-align:center;
}

#areaProgram .image02 {
	margin-bottom:55px;
	text-align:center;
}


/* ウィンドウ幅が992px以下の場合に適用するCSS */
@media screen and ( max-width:992px ){
	
	#areaProgram .listIcon.icon_01 dl {
		width:auto;
		float:none;
		margin-bottom:35px;
		position:relative;
		padding-left:110px;
		padding-right:10px;
		min-height:85px;
	}
	#areaProgram .listIcon.icon_01 dt {
		min-height: inherit;
		text-align:left;
		padding-top:8px;
		font-size:0.91em;
	}
	#areaProgram .listIcon.icon_01 dd {
		position:absolute;
		left:0;
		top:0;
		width:85px;
	}
	
	#areaProgram .listIcon.icon_01 .icon .frame{
		width: 85px;
    height: 85px;
    border-radius: 85px;
    -webkit-border-radius: 85px;
    -moz-border-radius: 85px;
		padding:10px;
	}
	
	#areaProgram .listIcon.icon_02 li {
		width:auto;
		float:none;
		margin-bottom:35px;
	}
	#areaProgram .listIcon.icon_01::before {
		width:22px;
		height:1017px;
		background:url(css_img/imgCursor02.svg) no-repeat left bottom;
		background-size:100%;
		opacity:0.6;
		bottom:20px;
	}
	
	
	#areaProgram .listIcon.icon_02::before {
		width:22px;
		height:1017px;
		background:url(css_img/imgCursor02.svg) no-repeat left bottom;
		background-size:100%;
	}
	
}

/* ウィンドウ幅が768px以下の場合に適用するCSS */
@media screen and ( max-width:768px ){
	
	#areaProgram .Impact_01 {
		padding:0 0 100px 0;
	}
	#areaProgram .Impact_01::before {
		width:130px;
		height:70px;
		margin-left:-65px;
		left:50%;
		top: auto;
		bottom:0;
	}
	
}