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


/*-----------------------------------------------------------------------------
	PC SP 共通
-----------------------------------------------------------------------------*/

#service{
	font-family: '游ゴシック体', YuGothic, '游ゴシック Medium', 'Yu Gothic Medium', '游ゴシック', 'Yu Gothic', 'Noto Sans JP', sans-serif;
}

#service p,
#service li{
	font-weight: 500;
}




/*-----------------------------------------------------------------------------
	PC
-----------------------------------------------------------------------------*/
@media screen and (min-width:768px){
	
	
	
/*----------------------------------
	業務内容
----------------------------------*/	
	.content_box{
		padding-top: 100px;
		margin-top: -100px;
		margin-bottom: 160px;
	}
	
	.content_box .content_1{
		display: flex;
		margin-bottom: 90px;
	}
	
	.content_box .content_1 .c_title{
		background-color: #7FC7CA;
		width: calc(50% - 110px);
		height: 326px;
		margin-right: 110px;
	}
	
	.content_box .content_1 .c_text{
		width: 570px;
		align-self: center;
	}
	
	.content_box .content_1 .c_title h3,
	.content_box .content_1 .c_text p{
		width: 570px;
	}
	
	.content_box .content_1 .c_title h3{
		font-size: 2.2rem;
		font-weight: 900;
		font-family: '游明朝体', YuMincho, '游明朝 Medium', 'Yu Mincho Medium', '游明朝', 'Yu Mincho', 'Noto Serif JP', serif;
		color: #fff;
		width: 460px;
		margin: 60px 0 0 auto;
	}
	
	/* 各種調査例 */
	.content_box .content_2 h3{
		font-size: 2.2rem;
		font-weight: 700;
		width: 50%;
		margin: 0 0 90px auto;
	}
	
	.content_box .content_2 h3::after{
		content: "";
		display: block;
		background-color: #707070;
		width: 343px;
		height: 1px;
		position: relative;
		top: 20px;
	}
	
	.content_box .content_2 .flex{
		display: flex;
		flex-direction: row-reverse;
		margin-bottom: 130px;
	}
	
	.content_box .content_2 .flex .m_img,
	.content_box .content_2 .flex .c_list{
		width: 50%;
	}
	
	.content_box .content_2 .flex .m_img figure,
	.content_box .content_2 .flex .m_img figure .img_wrap{
		width: 560px;
	}
	
	.content_box .content_2 .flex .m_img figure img{
		width: 100%;
		height: auto;
	}
	
	.content_box .content_2 .flex .m_img figure figcaption,
	.content_box .content_2 .img_list figure figcaption{
		background-color: #7FC7CA;
		font-weight: 700;
		color: #fff;
		width: 100%;
		height: 44px;
		line-height: 44px;
		text-align: right;
		padding-right: 20px;
	}
	
	.content_box .content_2 .flex .c_list li{
		margin-bottom: 15px;
	}
	
	.content_box .content_2 .img_list{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		width: 1056px;
		margin-left: auto;
	}
	
	.content_box .content_2 .img_list figure{
		margin-bottom: 65px;
	}
	
	.content_box .content_2 .img_list figure,
	.content_box .content_2 .img_list figure .img_wrap{
		width: 275px;
	}
	
	.content_box .content_2 .img_list figure img{
		width: 100%;
		height: auto;
	}
	
	
	/* 海洋環境に関する調査 */
	.content_box#ocean .content_1{
		flex-direction: row-reverse;
	}
	
	.content_box#ocean .content_1 .c_title{
		background-color: #5E79B5;
		margin: 0 0 0 auto;
	}
	
	.content_box#ocean .content_1 .c_title h3{
		margin: 60px 0 0 100px;
	}
	
	.content_box#ocean .content_1 .c_text{
		margin-left: auto;
	}
	
	.content_box#ocean .content_2{
		padding-left: 100px;
	}
	
	.content_box#ocean .content_2 .flex{
		flex-direction: row;
	}
	
	.content_box#ocean .content_2 h3{
		margin: 0 auto 90px 0;
	}
	
	.content_box#ocean .content_2 .flex .m_img figure{
		margin: 0 0 70px auto;
	}
	
	.content_box#ocean .content_2 .flex .m_img figure figcaption,
	.content_box#ocean .content_2 .img_list figure figcaption{
		background-color: #5E79B5;
	}
	
	.content_box#ocean .content_2 .img_list{
		width: 620px;
		margin: -424px auto 0 0;
	}
	
	
	
}











/*-----------------------------------------------------------------------------
	SP
-----------------------------------------------------------------------------*/
@media screen and (max-width:767px){
	
	
	
	
/*----------------------------------
	業務内容(SP)
----------------------------------*/	
	.content_box{
		padding-top: 70px;
		margin-top: -70px;
		margin-bottom: 80px;
	}
	
	.content_box .content_1{
		margin-bottom: 45px;
	}
	
	.content_box .content_1 .c_title{
		background-color: #7FC7CA;
    width: 60%;
		min-width: 300px;
		padding: 20px 0 50px 20px;
		margin-bottom: 40px;
	}
	
	.content_box .content_1 .c_text{
		width: 90%;
		margin: auto;
	}
	
	.content_box .content_1 .c_title h3{
		font-size: 1.8rem;
		font-weight: 900;
		font-family: '游明朝体', YuMincho, '游明朝 Medium', 'Yu Mincho Medium', '游明朝', 'Yu Mincho', 'Noto Serif JP', serif;
		color: #fff;
	}
	
	/* 各種調査例 */
	.content_box .content_2 h3{
		font-size: 1.8rem;
		font-weight: 700;
		width: 90%;
		margin: 0 0 45px auto;
	}
	
	.content_box .content_2 h3::after{
		content: "";
		display: block;
		background-color: #707070;
		width: 200px;
		height: 1px;
		position: relative;
		top: 10px;
	}
	
	.content_box .content_2 .flex{
		/*display: flex;
		flex-direction: row-reverse;*/
		margin-bottom: 30px;
	}
	
	.content_box .content_2 .flex .m_img,
	.content_box .content_2 .flex .c_list{
		/*width: 100%;*/
	}
	
	.content_box .content_2 .flex .m_img figure,
	.content_box .content_2 .flex .m_img figure .img_wrap{
		max-width: 560px;
		width: 100%;
		margin: auto;
	}
	
	.content_box .content_2 .flex .m_img figure img{
		width: 100%;
		height: auto;
	}
	
	.content_box .content_2 .flex .m_img figure figcaption,
	.content_box .content_2 .img_list figure figcaption{
		background-color: #7FC7CA;
		font-size: 1.2rem;
		font-weight: 700;
		color: #fff;
		width: 100%;
		line-height: 1.4;
		padding: 5px;
	}
	
	.content_box .content_2 .flex .c_list{
		margin-bottom: 30px;
	}
	
	.content_box .content_2 .flex .c_list li{
		margin-bottom: 10px;
	}
	
	.content_box .content_2 .img_list{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	
	.content_box .content_2 .img_list figure{
		width: 48%;
		max-width: 275px;
		margin-bottom: 30px;
	}
	
	.content_box .content_2 .img_list figure .img_wrap,
	.content_box .content_2 .img_list figure img{
		width: 100%;
		height: auto;
	}
	
	
	/* 海洋環境に関する調査 */
	.content_box#ocean .content_1{
		/*flex-direction: row-reverse;*/
	}
	
	.content_box#ocean .content_1 .c_title{
		background-color: #5E79B5;
		margin: 0 0 40px auto;
	}
	
	.content_box#ocean .content_1 .c_text{
		/*margin-left: auto;*/
	}
	
	.content_box#ocean .content_2{
		/*padding-left: 100px;*/
	}
	
	.content_box#ocean .content_2 .flex{
		/*flex-direction: row;*/
	}
	
	.content_box#ocean .content_2 h3{
		margin: 0 0 45px 0;
	}
	
	.content_box#ocean .content_2 .flex .m_img figure{
		margin: 0 0 35px 0;
	}
	
	.content_box#ocean .content_2 .flex .m_img figure figcaption,
	.content_box#ocean .content_2 .img_list figure figcaption{
		background-color: #5E79B5;
	}
	
	.content_box#ocean .content_2 .img_list{
		/*width: 620px;
		margin: -424px auto 0 0;*/
	}
	
	
	
	
	
	
	
	
	
	
	
	
	
}