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

@keyframes animationZoom1 {
	100% { transform: scale(1.1)}
}

/* SP */
@media screen and (max-width: 768px){




/* service */

#service {
	width: 100%;
	margin: 64px 0 0 0;
	overflow:hidden;
}

.service_img {
	width: 100%;
	position:relative;
}

.service_t {
	width: 24%;
	position: absolute;
	top: 16.66%;
	left: 0;
}

.service_mt {
	background-color: #0F4D75;
	padding: 0.5%  0 0.3% 0;
	width: 15%;
	text-align: center;
	margin: 6.66% auto 0 auto;
	color: #ffffff;
}

#service h2 {
	width: 100%;
	margin: 0 auto 0 auto;
	padding: 2.66% 0  6% 0;
	text-align: center;
	font-weight: bold;
	font-size: 4.8vw;
	line-height: 1.3;
}

#service h2 span {
	font-size: 80%;
}

.service_p1 {
	width: 86.66%;
	line-height: 1.7;
	font-size: 4.2vw;
	text-align: justify;
	margin: 0 auto 6.66% auto;
}

.service_h3, .service_h3_2 {
	width: 86.66%;
	background: #77ABB7;
	text-align: center;
	padding: 2.2% 0 1.8% 0;
	margin: 0 auto 3% auto;
	font-size: 3.7vw;
	font-weight: bold;
	color: #ffffff;
}

.service_h4 {
	width: 80%;
	text-align: left;
	margin: 0 auto 1.5% auto;
	padding-left: 4%;
	font-size: 4.5vw;
	font-weight: bold;
	text-indent: -1em;
	line-height: 1.5;
}

#service ul {
	width: 86.66%;
	margin: 0 auto 5% auto;
	font-size: 4.2vw;
	text-indent: -0.9em;
}

#service ul li {
	line-height: 1.5;
	padding-left: 0.9em;
	margin-bottom: 1.5%;
	margin-left: 7%;
	margin-right: 3%;
	text-align: justify;

}

#service dl {
	width: 86.66%;
	line-height: 1.7;
	font-size: 4.2vw;
	text-align: justify;
	margin: 0 auto 6.66% auto;
}

#service dl dt {
	width: 20%;
	float: left;
	clear: left;
	line-height: 1.8;
	padding-right: 5%;
}

#service dl dd {
	width: 75%;
	float: left;
	line-height: 1.8;
	padding-bottom: 10px;
}

.service_p2, .service_p3, .service_p4 {
	width: 80%;
	line-height: 1.6;
	font-size: 4.2vw;
	text-align: justify;
	margin: 0 auto 6.66% auto;
}

.pc_service_img {
	display: none;
}

/* casestudy */

#casestudy {
	width: 100%;
	margin: 0 0 0 0;
	overflow:hidden;
}

.casestudy_01 {
	width: 100%;
	margin: 0 0 0 0;
	padding: 0 0 3% 0;
	overflow:hidden;
	background-color: #F1F6F9;
	border-bottom: 6px solid #ffffff;
}

.casestudy_02 {
	width: 100%;
	margin: 0 0 0 0;
	padding: 9% 0 3% 0;
	overflow:hidden;
	background-color: #F1F6F9;
	border-bottom: 6px solid #ffffff;
}

.casestudy_03 {
	width: 100%;
	margin: 0 0 0 0;
	padding: 9% 0 3% 0;
	overflow:hidden;
	background-color: #F1F6F9;
}

#casestudy  h2 {
	width: 100%;
	margin: 0 auto 0 auto;
	padding: 9% 0  6% 0;
	line-height: 1;
	text-align: center;
	font-weight: bold;
}

.casestudy_img {
	width: 40%;
	margin: 0 auto 4% auto;
	position: relative
}

.casestudy_img p {
	position: absolute;
	text-align: center;
	top: 60%;
	left: 8.3%;
	font-size: 3.4vw;
	color: #ffffff;
	line-height: 1.3;
}

.casestudy_img p span {
	font-size: 130%;
}

#casestudy h3 {
	width: 86.66%;
	font-size: 4.2vw;
	font-weight: bold;
	line-height: 1.5;
	text-align: center;
	margin: 0 auto 3% auto;
	padding: 1% 0 0.5% 0;
	color: #0F4D75;
	border-top: 1px solid #0F4D75;
	border-bottom: 1px solid #0F4D75;
}

.casestudy_p1 {
	width: 86.66%;
	color: #0F4D75;
	font-size: 4.2vw;
	font-weight: bold;
	line-height: 1.7;
	text-align: justify;
	margin: 0 auto 3% auto;
}

.casestudy_p2 {
	width: 86.66%;
	line-height: 1.7;
	font-size: 4.2vw;
	text-align: justify;
	margin: 0 auto 6.66% auto;
}

#casestudy ul {
	width: 95%;
	margin: -3% auto 5% auto;
	font-size: 4.2vw;
	text-indent: -0.9em;
}

#casestudy ul li {
	line-height: 1.7;
	padding-left: 0.9em;
	margin-bottom: 1.5%;
	margin-left: 4%;
	margin-right: 4%;
	text-align: justify;
}


/* contact */

.service_contact {
	width: 86.66%;
	margin: 10.66% auto 10.66% auto;
	padding-bottom: 1.5%;
	background-color: #77ABB7;
}

.service_contact h4 {
	text-align: center;
	margin: 0 auto 0 auto;
	padding: 3% 0 2.66% 0 ;
	color: #ffffff;
	line-height: 1.4;
}

.service_contact_w {
	width: 96.92%;
	margin: 0 auto 0 auto;
	background-color: #ffffff;
	overflow: hidden;
}

.service_contact_mail {
	width: 29.52%;
	margin: 4% 4% 4% 11%;
	float: left;
}

.service_contact_mail_t {
	line-height: 1.3;
	float: left;
	margin: 12% 0 0 0;
	padding: 0 0 0 0;
	font-weight: bold;
}

.service_contact_b {
	width: 90.46%;
	margin: 0 auto 4% auto;
	padding-top: 4%;
	border-top: 1px solid;
	clear: both;
	overflow: hidden;
}

.service_contact_p1 {
	margin: 0 0 2.66% 0;
	text-align: justify;
	text-indent: -1em;
	padding-left: 1em;
	line-height: 1.4;
}

.service_contact_p2 {
	margin: 0 0 2% 0;
	text-align: justify;
	text-indent: -1em;
	padding-left: 1em;
	line-height: 1.4;
}

/* service link */

#service_link {
	width: 100%;
	margin: 0 0 0 0;
	overflow: hidden;
	padding-bottom: 10.66%;
}

.service_link_title {
	width: 36%;
	white-space: nowrap;
	margin: 0 auto 0 auto;
	text-align: center;
	font-weight: bold;
	color: #0F4C75;
	border-bottom: 1px solid;
	line-height: 1.3;
}


.service_link_w {
	margin: 5.33% auto 0 auto;
}

.service_link_1 {
	width: 86.66%;
	margin: 0 auto 5.3% auto;
}

.service_link_2 {
	width: 86.66%;
	margin: 0 auto 0 auto;
}

.service_link_m_1 {
	background-color: #0F4C75;
	margin: 0 auto 2% auto;
	color: #ffffff;
	padding: 2%;
}

.service_link_m_2 {
	background-color: #0F4C75;
	margin: 0 auto 2% auto;
	color: #ffffff;
	padding: 2%;
}

.service_link_l_1, .service_link_l_2, .service_link_l_3, .service_link_l_4 {
	background-color: #77ABB7;
	margin: 0 auto 2% auto;
	color: #ffffff;
	padding: 3%;
}

.service_link_l_1 p, .service_link_l_2 p, .service_link_l_3 p, .service_link_l_4 p {
	padding: 1% 0 1% 3%;
	border-left: 4px solid #ffffff;
}

}


/* PC */
@media screen and (min-width: 769px){

#service {
	width: 100%;
	margin: 90px 0 50px 0;
	overflow:hidden;
}

.service_img {
	width: 100%;
	position:relative;
}

.service_t {
	width: 900px;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin: 0 auto;
	text-align: center;
}

.service_t img {
	width: 180px;
	position: absolute;
	top: 70px;
	left: 0;
}

.service_mt {
	background-color: #0F4D75;
	padding: 3px  0 0 0;
	width: 90px;
	text-align: center;
	margin: 50px auto 0 auto;
	color: #ffffff;
	font-size: 120%;
}

#service h2 {
	width: 100%;
	margin: 0 auto 0 auto;
	padding: 15px 0  40px 0;
	text-align: center;
	font-weight: bold;
	font-size: 220%;
	line-height: 1.2;
}

#service h2 span {
	font-size: 70%;
}

.service_p1 {
	width: 800px;
	line-height: 1.7;
	font-size:140%;
	text-align: justify;
	margin: 0 auto 25px auto;
}

.pc_service_w {
	width: 800px;
	margin: 50px auto 0 auto;
}

.service_h3 {
	width: 100px;
	height: 70px;
	background: #77ABB7;
	text-align: center;
	padding: 30px 0 0 0;
	margin: 0 20px 0 0;
	font-size: 150%;
	font-weight: bold;
	color: #ffffff;
	line-height: 1.4;
	float: left;
}

.service_h3_2 {
	width: 100px;
	height: 60px;
	background: #77ABB7;
	text-align: center;
	padding: 40px 0 0 0;
	margin: 0 20px 0 0;
	font-size: 150%;
	font-weight: bold;
	color: #ffffff;
	line-height: 1.4;
	float: left;
	clear: both
}

.pc_service_w2 {
	border-bottom: 1px dotted;
	float: right;
	width:680px;
	overflow: hidden;
	margin: 0 0 20px 0;
	padding: 0 0 15px 0;
}

.pc_service_w2_2 {
	float: right;
	width:680px;
	overflow: hidden;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
}

.pc_service_w3 {
	clear: both;
	margin: 50px 40px 0 0;
	padding: 0 0 0 0;
	overflow: hidden;
	float: left;
}

.pc_service_w4 {
	margin: 50px 0 0 0;
	padding: 0 0 0 0;
	overflow: hidden;
	float: left;
}

.service_h4 {
	margin: 0 0 8px 1em;
	font-size: 180%;
	font-weight: bold;
	text-indent: -1em;
	line-height: 1.4;
	text-align: justify;
}

#service ul {
	margin: 0 auto 0 auto;
	font-size: 140%;
	text-indent: 0;
}

#service ul li {
	line-height: 1.4;
	padding-left: 0;
	margin: 0 0 5px 1em;
	text-align: justify;
	text-indent: -1em;
}

#service dl {
	width: 800px;
	line-height: 1.7;
	font-size: 140%;
	text-align: justify;
	margin: 0 auto 25px auto;
}

#service dl dt {
	width: 20%;
	float: left;
	clear: left;
	line-height: 1.8;
	padding-right: 5%;
}

#service dl dd {
	width: 75%;
	float: left;
	line-height: 1.8;
	padding-bottom: 10px;
}

.service_p2 {
	width: 260px;
	line-height: 1.6;
	font-size: 140%;
	text-align: justify;
	margin: 8px 0 0 0;
	float: left;
}

.service_p3 {
	width: 260px;
	line-height: 1.6;
	font-size: 140%;
	text-align: justify;
	margin: 25px 0 0 0;
	float: left;
}

.service_p4 {
	width: 260px;
	line-height: 1.6;
	font-size: 140%;
	text-align: justify;
	margin: 18px 0 0 0;
	float: left;
}


.sp_service_img {
	display: none;
}


/* company */

#casestudy {
	width: 100%;
	margin: 0 0 0 0;
	overflow:hidden;
	background-color: #F1F6F9;
}

.casestudy_01 {
	width: 800px;
	margin: 0 auto 50px auto;
	padding: 0 0 20px 0;
	overflow: hidden;
	border-bottom: 1px solid;
}

.casestudy_02 {
	width: 800px;
	margin: 0 auto 50px auto;
	padding: 0 0 40px 0;
	overflow: hidden;
	border-bottom: 1px solid;
}

.casestudy_03 {
	width: 800px;
	margin: 0 auto 25px auto;
	padding: 0 0 0 0;
	overflow: hidden;
}

#casestudy  h2 {
	width: 100%;
	margin: 0 auto 0 auto;
	padding: 50px 0  40px 0;
	text-align: center;
	font-weight: bold;
	font-size: 220%;
}

.casestudy_img {
	width: 180px;
	margin: 0 20px 0 0;
	position: relative;
	float: left;
}

.casestudy_img p {
	position: absolute;
	text-align: center;
	top: 30px;
	left: 115px;
	font-size: 140%;
	color: #ffffff;
	line-height: 1.3;
}

.casestudy_img p span {
	font-size: 130%;
}

#casestudy h3 {
	font-size: 200%;
	font-weight: bold;
	line-height: 1.5;
	margin: 0 0 8px 0;
	padding: 0 0 0 0;
	color: #0F4D75;
}

.casestudy_p1 {
	color: #0F4D75;
	font-size: 140%;
	font-weight: bold;
	line-height: 1.7;
	text-align: justify;
	margin: 0 0 12px 0;
}

.casestudy_p2 {
	width: 600px;
	float: right;
	line-height: 1.7;
	font-size: 140%;
	text-align: justify;
	margin: 0 0 25px 0;
}


#casestudy ul {
	width: 600px;
	float: right;
	margin: 0 0 0 0;
	font-size: 140%;
	text-indent: -0.9em;
}

#casestudy ul li {
	line-height: 1.7;
	padding-left: 0.9em;

	text-align: justify;

}

.service_btn {
	width: 100%;
	background-color: #ffffff;
	overflow: hidden;
	padding: 50px 0;
}

.service_btn_w {
	width: 630px;
	margin: 0 auto 0 auto;
}

.service_menu_1 {
	width: 300px;
	position: relative;
	margin: 0 30px 0 0;
	float: left;
}

.service_menu_2 {
	width: 300px;
	position: relative;
	margin: 0 0 0 0;
	float: left;
}

.service_menu_1 p, .service_menu_2 p {
	font-size: 160%;
	line-height: 1.2;
	position: absolute;
	top: 20%;
	left: 13.61%;
	color: #ffffff;
}

.service_menu_1 p span, .service_menu_2 p span {
	font-size: 80%;
}

.service_btn a:hover {
	filter: alpha(opacity=70);
	-moz-opacity: 0.7;
	opacity: 0.7;
}

/* contact */

.service_contact {
	width: 650px;
	margin: 60px auto 50px auto;
	padding-bottom: 1.5%;
	background-color: #77ABB7;
}

.service_contact h4 {
	text-align: center;
	margin: 0 auto 0 auto;
	padding: 15px 0 8px 0 ;
	color: #ffffff;
	line-height: 1.4;
	font-size: 200%;
}

.service_contact_w {
	width: 630px;
	margin: 0 auto 0 auto;
	background-color: #ffffff;
	overflow: hidden;
}

.service_contact_mail {
	width: 68px;
	margin: 10px 15px 10px 100px;
	float: left;
}

.service_contact_mail_t {
	line-height: 1.3;
	float: left;
	margin: 34px 0 0 0;
	padding: 0 0 0 0;
	font-weight: bold;
	font-size: 220%;
}

.service_contact_b {
	width: 580px;
	margin: 0 auto 10px auto;
	padding: 10px 10px 0 10px;
	border-top: 1px solid;
	clear: both;
	overflow: hidden;
}

.service_contact_p1 {
	margin: 0 0 5px 0;
	text-align: justify;
	text-indent: -1em;
	padding-left: 1em;
	line-height: 1.4;
	font-size: 140%;
}

.service_contact_p2 {
	margin: 0 0 3px 0;
	text-align: justify;
	text-indent: -1em;
	padding-left: 1em;
	line-height: 1.4;
	font-size: 120%;
}

a:hover .service_contact_mail img, a:hover .service_contact_mail_t {
	filter: alpha(opacity=70);
	-moz-opacity: 0.7;
	opacity: 0.7;
}

/* service link */

#service_link {
	width: 650px;
	margin: 0 auto 0 auto;
	overflow: hidden;
	padding-bottom: 60px;
}

.service_link_title {
	width: 180px;
	white-space: nowrap;
	margin: 0 auto 0 auto;
	text-align: center;
	font-weight: bold;
	color: #0F4C75;
	border-bottom: 1px solid;
	line-height: 1.3;
	font-size: 180%;
}


.service_link_w {
	margin: 20px auto 0 auto;
}

.service_link_1 {
	width: 206px;
	margin: 0 0 0 0;
	float: left;
}

.service_link_2 {
	width: 422px;
	margin: 0 0 0 0;
	padding-left: 10px;
	border-left: 1px solid #0F4D75;
	float: right;
}



.service_link_m_1 {
	background-color: #0F4C75;
	margin: 0 auto 10px auto;
	color: #ffffff;
	padding: 10px 0 5px 0;
	text-align: center;
	line-height: 1.3;
	font-size: 120%;
}

.service_link_m_2 {
	background-color: #0F4C75;
	margin: 0 auto 10px auto;
	color: #ffffff;
	padding: 10px 0 5px 0;
	text-align: center;
	line-height: 1.3;
	font-size: 120%;
}

.service_link_l_1 {
	width: 190px;
	height: 35px;
	background-color: #77ABB7;
	margin: 0 10px 10px 0;
	color: #ffffff;
	padding: 8px;
	font-size: 120%;
	line-height: 1.4;
	float: left;
}

.service_link_l_2 {
	width: 190px;
	height: 35px;
	background-color: #77ABB7;
	margin: 0 0 10px 0;
	color: #ffffff;
	padding: 8px;
	font-size: 120%;
	line-height: 1.4;
	float: left;
}

.service_link_l_3 {
	width: 190px;
	height: 35px;
	background-color: #77ABB7;
	margin: 0 10px 0 0;
	color: #ffffff;
	padding: 8px;
	font-size: 120%;
	line-height: 1.4;
	float: left;
}

.service_link_l_4 {
	width: 190px;
	height: 35px;
	background-color: #77ABB7;
	margin: 0 0 0 0;
	color: #ffffff;
	padding: 8px;
	font-size: 120%;
	line-height: 1.4;
	float: left;
}

.service_link_l_1 p, .service_link_l_3 p, .service_link_l_4 p {
	padding: 3px 0 0 10px;
	border-left: 4px solid #ffffff;
}

.service_link_l_2 p {
	padding: 13px 0 10px 10px;
	border-left: 4px solid #ffffff;
	line-height: 1.0;
}


a:hover div.service_link_m_1, a:hover div.service_link_m_2, a:hover div.service_link_l_1, a:hover div.service_link_l_2, a:hover div.service_link_l_3,  a:hover div.service_link_l_4 {
	filter: alpha(opacity=70);
	-moz-opacity: 0.7;
	opacity: 0.7;
}

}