﻿@charset "utf-8";
/* CSS Document */

body {
	font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, sans-serif !important;
}
.sb_content{
	padding-top:30px;
	position:relative;
	}
.sb_content_wrap{
	position:relative;
	z-index:2;
	}
#header #gnav {
	margin-top: -4px;
}
h2{
	text-align:center;
	}
h2 img{
	max-width:90%;
	}
	#navi_h_accordion {
background-color: rgba(0,0,0,0.5);
    font-family: "Hiragino Kaku Gothic ProN","ヒラギノ角ゴ ProN W3",ArialMT,メイリオ,sans-serif;
}
.particles{
	position:absolute;
	width:100%;
	height:600px;
	top:0;
	left:0;
	z-index:1;
	}
	.interview_box p.read_img {
		max-width: 290px;
		width: 100%;
		margin: 0 auto 0 auto;
	}

	.sec6.interview_box .photo {
		text-align: center;
	}
	.sec6.interview_box .photo img {
		width: 115px;
		margin: auto;
	}
.posting-month {
    margin:45px 5px 0 0;
    text-align: right;
    font-size: 11px;
}    
.profile{
    margin-top:5px;
    }
.profile img{
	width:100%;
	}
.profile p{
	font-size:18px;
	font-weight:bold;
	text-align:center;
	margin-top:20px;
	}
.sb_content_wrap {
	margin-left: 0;
	margin-right: 0;
}

.att_g {
    padding: 8px;
    background-color: #F0F0F0;
    margin: 20px auto;
}


/* =================== 枠を超えるイノベーションを目指して。 */
.sec1{
	margin-top:35px;
	}

/* =================== エネルギー技術の領域からサービスの領域へ。 */
.sec2{
	margin-top:35px;
	}

/* =================== お客さま自身も気づいていないニーズをつかむ。 */
.sec3{
	margin-top:35px;
	}

/* =================== 「共創したい」「選択したい」、そう思っていただける存在へ。 */
.sec4{
	margin-top:35px;
	}

	.interview_box{
	    line-height: 1.8;
	}
	.interview_box h3{
		text-align:left;
		background-color:#E6F0F7;
		color:#0166B3;
		font-size:18px;
		font-weight:bold;
		padding:10px 15px;
		border-radius:5px;
		margin: 0 15px 25px 15px;
		}
	.interview_box img{
		width:100%;
		margin-bottom:20px;
		}
	.interview_box .img_box{
		margin-bottom: 20px;
	}
	.interview_box .img_box img{
	    margin-bottom: 5px;
	}
    .img_box span {
        font-weight: bold;
    }
	.interview_box p{
		letter-spacing:0.4px;
		}
	.interview_box p.h{
		font-size:16px;
		font-weight:bold;
		}
	.interview_box p span.name{
		color:#0166B3;
		}
	.interview_box p + p{
		margin-top:20px;
		line-height:2.2em;
		}
	.interview_box p + p.h{
		margin-top:25px;
		}

.sb_content_wrap .text {
	max-width: 300px;
	margin: auto;
	padding: 15px;
	background-color: #F8F8F8;
	line-height: 1.4rem;
}
	.sns-page{
		line-height: 1.4;
	}
	.sns-page .sns{
		background-color:#F0F0F0;
		background-image:url(/sp/company/renewable_energy/article1/css/../img/share.png);
		background-repeat:no-repeat;
		background-position: 20px center;
		text-align:center;
		padding:13px 0;
		}
		.sns-page .sns a:nth-of-type(2){
			margin-left:10px;
			}
		.sns-page .sns img{
			display:inline-block;
			width:33px;
			}
	.sns-page .page{
		margin-top:20px;
		text-align:center;
		}
	.sns-page .page2{
		margin-top:10px;
		}
		.sns-page .page2 .prev,
		.sns-page .page2 .next{
			color:#0166B3;
			font-weight:bold;
			background-repeat:no-repeat;
			}
		.sns-page .page2 .prev{
			float:left;
			margin-top:0.8em;
			background-position:center left;
			background-image:url(/sp/company/renewable_energy/article1/css/../img/arrow_prev.png);
			padding-left:19px;
			}
		.sns-page .page2 .next{
			float:right;
			margin-top:0.8em;
			background-position:center right;
			background-image:url(/sp/company/renewable_energy/article1/css/../img/arrow_next.png);
			padding-right:19px;
			}
		.sns-page .page .return{
			position:relative;
			display:inline-block;
			width:360px;
			max-width:90%;
			line-height:1;
			padding:20px 0;
			background-color:#0166B3;
			border-radius:30px;
			font-size:15px;
			color:#fff;
			font-weight:bold;
			}

.whatsnew{
	margin-top:70px;
	padding:40px 0;
	background-image:url(/sp/company/renewable_energy/article1/css/../img/bg.jpg);
	background-position:top center;
	background-size:cover;
	}

.whatsnew > div{
	margin-left:15px;
	margin-right:15px;
	}

.whatsnew h3{
	text-align:center;
	}
.whatsnew h3 img{
	max-width:80%;
	}

	.whatsnew .figure_list{
		margin-top:25px;
		}
		.whatsnew .figure_list figure{
			width:100%;
			margin-top:2%;
			}
		.whatsnew .figure_list figure img{
			width:100%;
			}
		.whatsnew .figure_list figure:nth-of-type(3n+1){
			clear:both;
			}
		.whatsnew .figure_list figure figcaption{
			background-color:#fff;
			padding:17px;
			}
		.whatsnew .figure_list figure figcaption p{
			font-size:12px;
			}
		.whatsnew .figure_list figure figcaption p + p{
			font-size:14px;
			font-weight:bold;
			color:#0166B3;
			margin-top:5px;
			}

			.sec5 h4 {
				font-size: 20px;
				font-weight: bold;
				text-align: center;
				margin-bottom: 25px;
			}
		.sec5 .sns-page {
		background: #F8F8F8;
		padding: 25px 20px 30px 20px;
		margin-bottom: 20px;
		}
			.sec5 table {
				width: 100%;
				border-collapse:collapse;
				margin-bottom: 20px;
			}
			.sec5 th {
				width: 80px;
				text-align: left;
			}
			.sec5 th,.sec5 td {
				padding: 15px 0;
				font-size: 14px;
				font-weight: normal;
			}
			#head {
				    font-family: "Hiragino Kaku Gothic ProN","ヒラギノ角ゴ ProN W3",ArialMT,メイリオ,sans-serif;
			}
			.sec5 td {
				padding-left: 10px;
			}
			.sec5.interview_box p + p {
				font-size: 14px;
				margin: 0;
			}
			.sec5 .sns-page p.read a {
				font-size: 14px;
				text-decoration: underline;
				color: #002CA2;
				font-weight: bold;
			}
			.sec5 .sns-page p.read a:hover {
				text-decoration: none;
			}
			.interview_box p.read_img img {
				margin-bottom: 60px;
			}
			.sec5 .sns-page p.read {
				text-align: center;
				position: relative;
				padding-right: 25px;
			}
			.sec5 .sns-page p.read a:after {
				content: "";
				display: inline-block;
				width: 16px;
				height: 16px;
				background:url(../img/right_icon1.png) no-repeat left center;
				background-size: contain;
				margin-left: 15px;
				position: absolute;
				bottom: 2px;
			}
			.sec5.interview_box.img_left {
				padding-left: 10px;
				padding-right: 10px;
				padding-bottom: 40px;
			}
			.interview_box p.read_img {
				margin-bottom: 60px;
			}
			.interview_box p.read_img a {
				display: block;
			}
			.interview_box p.read_img img {
				margin-bottom: 0;
			}
			.sec5.interview_box.img_left .img img {
				margin: 0 0 15px 0;
			}
			.sb_content_wrap h2 {
				margin-bottom: 0;
				line-height: 0;
			}

			p.color {
				line-height: 1;
				font-weight: bold;
				margin-bottom: 10px;
				font-size: 12px;
				text-align: center;
			}
			p.kome {
				line-height: 1;
				margin-bottom: 10px;
				font-size: 10px;
				text-align: center;
			}
			p.kome:last-child {
				line-height: 1;
				margin-bottom: 0px;
				font-size: 10px;
				text-align: center;
			}
			p.kome .kome-line{
				display: block;
				line-height: 1;
				margin-bottom: 3px;
			}
			.sec6.interview_box img {
				width: 290px;
			}
			.sec6.interview_box h4 img {
				width: 115px;
			}
			.sec6.interview_box .table h4 {
				font-size: 13px;
				text-align: center;
				padding: 0 20px 0 20px;
				background:url(../img/icon_top.png) no-repeat center 7px;
				background-size: contain;
				margin: 0 10px;
				height: 53px;
			}
			.sec6.interview_box .styleplan h4 {
				padding: 0;
				text-align: center;
			}
			.sec6.interview_box p.img {
				text-align: center;
				margin-top: 5px;
			}
			.sec6.interview_box .bg {
				margin-top: -45px;
				background-size: contain;
				position: relative;
				background: #85B71B;
				padding: 24px 0 0 0;
			}
			.sec6.interview_box .bg p:first-child:before {
				content: "";
				display: inline-block;
				width: 18px;
				height: 40px;
				background: url(../img/left.png) no-repeat left center;
				background-size: contain;
				position: absolute;
				top: 3px;
				left: 45px;
			}
			.sec6.interview_box .bg p:first-child:after {
				content: "";
				display: inline-block;
				width: 18px;
				height: 40px;
				background: url(../img/right.png) no-repeat left center;
				background-size: contain;
				position: absolute;
				top: 3px;
				right: 45px;
			}
			.sec6.interview_box .list {
				background: #fff;
				border-radius: 10px;
				font-size: 14px;
				margin: 0 15px;
				padding: 15px;
				box-shadow:0px 0px 6px 1px rgba(0,0,0,0.1);
			}
			.sec6.interview_box .list:nth-of-type(1) {
				margin-bottom: 20px;
			}
			.sec6.interview_box .list h4 {
				color: #5C8602;
				font-size: 18px;
				font-weight: bold;
				position: relative;
				padding: 0 0 10px 25px;
			}
			.sec6.interview_box .list h4:before {
				content: "";
				display: inline-block;
				width: 19px;
				height: 30px;
				background: url(../img/title_icon.png) no-repeat left center;
				background-size: contain;
				position: absolute;
				left: 0;
				top: -4px;
			}
			.sec6.interview_box .bg p {
				color: #000;
				margin: 0;
				text-align: center;
				font-weight: bold;
				line-height: inherit;
			}
			.sec6.interview_box .list p {
				text-align: left;
				font-weight: normal;
				line-height: 1.6rem;
			}
			.sec6.interview_box .bg p img {
				width: 240px;
				margin-bottom: 10px;
			}
			#footer #fnav ul li a {
				padding: 10px 0 10px 0;
				text-align: center;
			}
			.sec6.interview_box .bg p:first-child {
				font-size: 16px;
				position: relative;
				width: 100%;
				margin: 5px auto 30px auto;
				color: #fff;
			}
			.sec6.interview_box .bg p.title {
				font-size: 22px;
				font-weight: bold;
				color: #FFF500;
				padding-bottom: 30px;
			}
			.sns-page {
				    background: #85B71B;
			}
			.sec6.interview_box .border {
				padding: 10px 10px 40px 10px;
			}
			.sec6.interview_box .border p {
				text-align: left;
				font-size: 15px;
				color: #36891D;
				font-weight: bold;
				margin: 0 10px 20px 10px;
				line-height: 1.6rem;
			}

			#footer {
    font-family: "Hiragino Kaku Gothic ProN","ヒラギノ角ゴ ProN W3",ArialMT,メイリオ,sans-serif;
		}
			.sec6.interview_box .styleplan ul li {
				text-align: right;
				margin-bottom: 30px;
				margin-right: 10px;
			}
			.sec6.interview_box .styleplan ul li span {
				font-size: 12px;
				font-weight: normal;
			}
			.sec6.interview_box .styleplan ul li span a {
				color: #fff;
			}
			.sec6.interview_box .border p.info {
				max-width: 290px;
				margin: auto;
				text-align: center;
				}
				.sec6.interview_box .border p.info img {
					max-width: 100%;
					margin-bottom: 0;
				}
				.sec6.interview_box .bg p.img img {
					width: 195px;
					margin-bottom: 5px;
				}
				.sns-area {
					display: flex;
					line-height: 1;
				}
				.sns-area ul {
					display: flex;
					margin: 40px auto;
				}
				.sns-area ul li {
				    padding-left: 15px;
				    list-style: none;

				}
				.interview_box {
					padding: 0;
				}
				.pa {
					padding: 0 20px;
				}
				.top {
					margin-top: 20px;
				}
				.sec5 tr {
					border-bottom:1px solid #707070;
					position: relative;
				}
				.sec5 th {
					border-bottom: 1px solid #0166AF;
				}
.font_small{
  font-size: 78%;
}
.wb_all{
	word-break: break-all;
}


/* モーダル */
#modal-content {
	border-radius: 7px;
	width: 240px;
	height: 495px;
	margin: 0;
	padding: 30px 25px 20px;
	background: #fff;
	position: fixed;
	display: none;
	z-index: 3;
	box-shadow:0px 0px 6px 1px rgba(41,41,41,0.79);
	overflow-y: scroll;
	}
	#modal-content p:not(.close_btn){
		text-align: left;
		color: #000;
		font-size: 12px;
		margin: 0 0;
		line-height: 1.5;
		font-weight: normal;
		}
#modal-content p {
	width: 100%;
	text-align: center;
	margin: 0;
	line-height: inherit;
	text-indent: -2em;
	margin-left: 2em;
	line-height: 1.4;
	font-family: sans-serif;
	font-weight: normal;
}
#modal-content p.close_btn {
	margin-left: 0;
	text-indent: -1rem;
	font-weight: normal;
}
.modal-inner {
	padding: 0 10px 0 20px;
}
#modal-content p img {
	width: 100%;
	margin: 25px 0 0 0;
	display: block;
}

#modal-overlay {
	z-index: 2;
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 120%;
	background-color: rgba(102,102,102,0.9);
	}

/*===================================================== pc =====================================================*/
@media screen and (min-width: 801px), print {


}




/*===================================================== sp =====================================================*/
@media screen and (max-width: 420px) {
	.sec5 .sns-page p.read a {
		font-size: 12px;
	}
	.sec5 .sns-page p.read:after {
		margin-left: -1px;
	}
	.sec6.interview_box .table h4 {
	    font-size: 10px;
	    padding: 0 15px 0 10px;
	    height: 50px;
	}
}
@media screen and (max-width: 350px) {

	.sec6.interview_box .bg p:first-child:before {
		left: 25px;
	}
	.sec6.interview_box .bg p:first-child:after {

		right: 25px;
	}

		.sb_content_wrap .text {
			    max-width: 284px;
	    padding: 10px;
	}
	p.color {
		font-size: 11px;
	}
	p.kome {
		font-size: 10px;
	}
	.sec5 .sns-page p.read a:after {
		margin-left: 3px;
	}
	.interview_box p.read_img {
    max-width: 265px;
	}
	.sec5 .sns-page p.read {
		padding-right: 15px;
	}
	.sec5 .sns-page p.read a {
		font-size: 11px;
	}
}
@media screen and (max-width: 320px) {
.sec6.interview_box .list h4 {
	font-size: 17px;
}
}
