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

body,div,dl,dt,dd,h1,h2,h3,h4,h5,h6,p{
	padding:0;
	margin:0;
	width:auto;
	font-size:100%;
	line-height:2;
	font-weight:normal;
	box-sizing: border-box;
}
ul,li{
	list-style:none;
	padding:0;
	margin:0;
	font-size:100%;
	line-height:100%;
	font-weight:normal;
}
a img {
	border:none;
}
img{
	line-height:100%;
	font-size:0px;
	-webkit-backface-visibility:hidden;
}
a,button{
	text-decoration:none;
	transition:.4s;
	-webkit-transition:.4s;
	cursor:pointer;
}
/****************clearfix*******************/
.clearfix {
	min-height:1px;
	overflow-x:hidden;
}
* html .clearfix{height:1px; /*\*//*/ height:auto; overflow:hidden; /**/ }
p,li,h3,h4,a,strong,dd,dt,dl{
	color:#111;
	letter-spacing:.03em;
}

body{
	font-family: 'Noto Sans JP', 'Zen Kaku Gothic New','ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, Osaka, 'A-OTF UD新丸ゴ Pro6 R' , 'A-OTF UD新丸ゴ Pro6 M', sans-serif;
	line-height:180%;
	font-size:14px;
	counter-reset: number 0;
	height: 100%;
	overflow: auto;
	-ms-overflow-style: none;
	scrollbar-width: none;
	background:url("../img/bg.svg") repeat;
	background-size:160px;
    overflow-x: hidden;
}
body::-webkit-scrollbar{
  display: none;
}
#header {
	width: 100%;
	display: block;
	background:#fff;
}
.sp {
		display: none;
	} 

img{width: 100%;margin: 0 auto;}
p {
	margin-block-start: 0;
	margin-block-end: 0;
}
.sp {display: none;}

/* IE10以前でのみ有効 */
html {
  height: 100%;
}


h1 img{
	width:auto;
	height:56px;
    max-width:80%;
	margin:0 auto;
	box-sizing: border-box;
	position:absolute;
	z-index:2;
    top:48%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    filter: drop-shadow(0px 0px 4px #003C52);
}
h2 {
	margin-bottom:32px;
	padding:12px;
	font-size:56px;
	font-weight:bold;
	line-height:1;
	color:#003C52;
	background:#fff;
	display:inline-block;
}
h2 span{
	color:#FF851A;
}
h3 {
	margin-bottom:12px;
	font-size:32px;
	font-weight:bold;
	line-height:1.8;
	color:#003C52;
}
h4{
    margin-bottom:40px;
	position:relative;
	font-size:32px;
    font-weight: 500;
	text-align:center;
}
h4:before {
	content: '';
	position: absolute;
	bottom: -10px;
	left: calc(50% - 30px);
	width: 60px;
	height: 5px;
	background:linear-gradient(to left,#316173,#003C52);
}

.inner1080{
	width:90%;
	max-width:1080px;
	margin:0 auto;
	position:relative;
}
.inner640{
	width:90%;
	max-width:640px;
	margin:0 auto;
	position:relative;
}
.br1024{display:none;}


/* ハンバーガーメニュー */
.hamburger{ position:fixed; right:0; top:0; z-index:999; padding:32px;}
.menu-trigger,.menu-trigger span{ display:inline-block; transition:all .5s; box-sizing:border-box; margin:0 auto;}
.menu-trigger{ position:relative; width:35px; height:32px; cursor:pointer;}
.menu-trigger span { position:absolute; left:0; width:100%; height:3px; border-radius:3px;  background-color:#003d52;}
.menu-trigger span:nth-of-type(1) { top:0;}
.menu-trigger span:nth-of-type(2) { top:15px;}
.menu-trigger span:nth-of-type(3) { bottom:0;}

.menu-trigger.active span:nth-of-type(1) { -webkit-transform:translateY(10px) rotate(-45deg); transform:translateY(10px) rotate(-45deg); width:100%;}
.menu-trigger.active span:nth-of-type(2) { opacity:0; width:100%;}
.menu-trigger.active span:nth-of-type(3) { -webkit-transform:translateY(-18px) rotate(45deg); transform:translateY(-18px) rotate(45deg); width:100%;}

.menu-trigger p{ position:absolute; left:25px; font-weight:bold;}

/* ハンバーガーメニュー内容 折り畳まれ部分 */
#navigation{position:relative; display:none; width:100%; height:100vh; padding:16vw 0 0;background-color: #fff; position:absolute; top:0; left:0; z-index:3; overflow-y:scroll;}
#navigation::-webkit-scrollbar {display:none;}
#navigation .navigation_inner{display: table;width:100%;height: 100%;overflow: scroll;}
#navigation .navigation_inner .navigation_menu{display:flex;flex-wrap:wrap;justify-content:space-between;}

#navigation .navigation_inner .navigation_menu li{width:100%; border-top:1px solid #ddd;}
#navigation .navigation_inner .navigation_menu li:last-child{border-bottom:1px solid #ddd;}
#navigation .navigation_inner .navigation_menu li a{padding:32px 20px;font-size:18px;line-height:1.25;display:block;color:#003d52;}
#navigation .navigation_inner .navigation_menu li a:hover{background:#f0f5f9;}


/* IE10以降でのみ有効 */
@media all and (-ms-high-contrast: none) {
  html {
    height: 100%;
    overflow: hidden;
  }
  body {
    height: 100%;
    overflow: scroll;
  }
}
.load {
	display: none;
}
.hidden {
	display: none;
}
.loading {
  width: 100vw;
  height: 100vh;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
}
.loading  img{
  width:80px;
}
.flex_contents{
	display:flex!important;
	flex-wrap:wrap;
}

/*-------------------------------------------
ヘッダー
-------------------------------------------
*/
#checkbox {
	display: none;
}
#menu-btn-check {
    display: none;
}
/*========= 背景動画設定のCSS ===============*/
/*header設定*/
#header{
	position: relative;/*ローディング画像などを表示す際の基点とするため指定*/
    height:100%;/*高さを全画面にあわせる*/
    text-align: center;
}
header:before{
	content:"";
	width:100vw;
	height:16px;
	display:block;
	background:linear-gradient(to left,#E6EBEE,#003C52);
	position:absolute;
	top:0;
    z-index: 2;
}
header:after{
	content:"";
	width:100vw;
	height:16px;
	display:block;
	background:linear-gradient(to left,#FF851A,#FFECD9);
	position:absolute;
	bottom:0;
    z-index: 2;
}
#loading {
	display: none;
}
/*jQueryで付与されたdisappearクラスがついたらロゴエリアを非表示*/
#loading.disappear{
     display: none;   
}
/* youtube設定 */
#youtube-area{
    overflow: hidden;
    position: relative;
    width: 100%;
    height:calc(100vh - 16px );
    background: #000;
}

/*jQueryで付与されたappearクラスがついたらYoutubeエリアをふわっと表示*/
#youtube-area.appear {
	animation-name:PageAnimeAppear;
	animation-duration:.5s;
	animation-fill-mode:forwards;
}
@keyframes PageAnimeAppear{
	0% {
	opacity: 0;
	}
	100% {
	opacity: 1;
}
}
#youtube {
	position: absolute;
	top: -50px;
	left: 50%;
	width: 177.77vh;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	height:calc(100% + 100px);
	min-height: 100%;
	min-width: 100%;
}
/*youtubeがクリックされないためのマスク*/
#youtube-mask{
    position: absolute;
    z-index: 1;/*下から2番目に表示*/
    top:0;
    width: 100%;
    height: 100%;
}
/*-------------------------------------------
メイン
-------------------------------------------*/
.menu-content {
	display: none;
}

.main_contents{
	padding-bottom:240px;
}
.ttl_en{
	font-family: 'Lato', sans-serif;
	font-size:200px!important;
	font-weight:700!important;
    line-height:1!important;
	position:absolute!important;
	color:#003C52;
	opacity:0.1;
    letter-spacing: -3px;
}
.sec01{
	padding:100px 0 144px;
	position:relative;
}
.sec01:after{
	content:"";
	position:absolute;
	width:100%;
	height: 100%;
	background:linear-gradient(to left,#E6EBEE,#003C52);
	display: inline-block;
	top:0;
	right:0;
	opacity:.2;
	z-index:-1;
}
.sec01 .ttl_en{
	top:0;
	left:5%;
}
.sec01 .sec01_contents {
	position:relative;
}
.sec01 .sec01_ttl {
	margin: 0 auto;
	padding:144px 0 0;
    position: relative;
    z-index: 2;
}
.sec01 .sec01_txt p{
	font-size:18px;
    font-weight:bold;
	line-height:2;
	text-align:justify;
}
.sec02{
	padding:100px 0 184px;
	background:#F5F8F9;
}
.sec02_contents{
	position:relative;
}
.sec02 .ttl_en{
    top: 0;
    right: 5%;
}
.sec02_img{
	width:100%;
	margin:40px auto 64px;
	text-align:center;
	background:#fff;
	line-height:1;
}
.sec02_img img{
	width:100%;
	max-width:1024px;
}
.sec02_ttl{
	width:90%;
	max-width:1200px;
	margin:0 auto;
	padding-top:160px;
    position: relative;
    z-index: 2;
}
.advantage1,.rap{
    margin-bottom: 160px;
}
.advantage2_txt{
	width:90%;
	max-width:640px;
	margin:0 auto 120px;
    position: relative;
    z-index: 2;
}
.advantage2{
	position:relative;
}
.advantage_bg1{
	width:calc( 100% - 240px );
	height: 50vh;
	background:url("../img/advantage_bg.jpg") center;
	background-size:cover;
}
.advantage_bg1:after{
	content:"";
	position:absolute;
	width:240px;
	height: 50vh;
	background:linear-gradient(to left,#FF851A,#FF9E48);
	right:0;
}
.advantage_bg2{
	width:calc( 100% - 240px );
	height: 50vh;
	margin-left:240px;
	background:url("../img/advantage_bg2.jpg") center;
	background-size:cover;
}
.advantage_bg2:before{
	content:"";
	position:absolute;
	width:240px;
	height: 50vh;
	background:linear-gradient(to left,#316173,#003C52);
	left:0;
}
.advantage2_txt{
	width:90%;
	max-width:720px;
	padding:32px 40px;
	position:absolute;
	background:#fff;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
	box-shadow: 0px 10px 10px -6px rgba(0, 0, 0, 0.3);
}
.advantage_gallery{
	margin-top:64px;
}
.advantage_gallery_img{
	width:90%;
	margin:0 auto;
	display:flex;
	justify-content:space-between;
}
.advantage_gallery_img img{
	width:30%;
	height:auto;
}
.sec03{
	padding:120px 0 160px;
	position:relative;
}
.sec03_contents{
	width:90%;
	max-width:1024px;
	margin:0 auto;
    position: relative;
    z-index: 1;
}
.sec03_ttl{
	width:100%;
    max-width: 1024px;
    margin: 0 auto;
    padding-top: 56px;
    position: relative;
    z-index: 2;
	text-align:right;
}
.sec03 .ttl_en {
    top: 0;
    left:-8%;
}
.sec03_contents img{
    position: relative;
    z-index: 2;
}
.sec03 .plant_txt p{
	width:90%;
    margin:40px auto 0;
	font-size:16px;
}
.sec04{
    margin:120px auto 0;
}
.sec04_contents{
	width:100%;
    max-width: 1024px;
    margin: 0 auto;
    padding-top: 56px;
    position: relative;
    z-index: 2;
	text-align:right;
}
.sec04_ttl{
	text-align:left;
}
.sec04 .ttl_en {
    top: 0;
    right:-10%;
}
.sec04_txt{
	width:90%;
	max-width:1024px;
	margin:0 auto;
}
.sdgs_img{
	padding:60px 4%;
	display:flex;
	justify-content:center;
	background:#F5F8F9;
    position: relative;
    z-index: 2;
}
.sdgs_img img{
	width:100%;
	max-width:720px;
}
.sec05_contents{
    position: relative;
}
.sec05_ttl{
	width:100%;
    max-width: 1024px;
    margin: 0 auto;
    padding-top:160px;
    position: relative;
    z-index: 2;
	text-align:center;
}
.sec05 .ttl_en {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}
.partner_img{
	width: 90%;
	max-width:1080px;
	margin:0 auto;
	padding:48px;
	background:#f5f8f9;
}
.partner_img_list{
	display:flex;
	flex-wrap:wrap;
	justify-content: space-between;
}
.partner_img_list a{
	width:48%;
	margin:1%;
	display:inline-block;
    line-height:1;
}
.partner_img_list a:hover{
	opacity:.5;
}
.partner_img_list img{
	width:100%;
}
.sec06_contents{
    margin:120px auto 0;
    position: relative;
}
.sec06_ttl{
	width:100%;
    max-width: 1024px;
    margin: 0 auto;
    padding-top:160px;
    position: relative;
    z-index: 2;
	text-align:center;
}
.sec06 .ttl_en {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}
.company_info{
	width:90%;
	max-width:840px;
	margin:56px auto 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: inherit;
}
.company_info dt{
	width:160px;
	padding:24px 20px;
	font-size:17px;
	font-weight:600;
	border-bottom:solid 2px #003C52;
}
.company_info dd{
	width:calc( 100% - 160px );
	padding:24px 20px;
	font-size:17px;
	box-sizing:border-box;
	border-bottom:solid 2px #FF851A;
}
.company_info dd img{
	width:auto;
	max-width:100%;
	height:20px;
	max-height:auto;
}
.company_info p{
	margin-top:16px;
	font-size:90%;
	color:#aaa;
}
.philosophy{
	width:90%;
	max-width:840px;
	margin-top:120px;
}
.philosophy_contents{
	margin-bottom:64px;
}
.philosophy_contents:nth-child(2n) h4:before {
    background: linear-gradient(to left,#FF9E48,#FF851A);;
}
.philosophy_contents:last-child{
	margin-bottom:0;
}
.philosophy_contents .philosophy_contents_txt .philosophy_ttl{
	font-size:30px;
	font-weight:bold;
	color:#003C52;
}
.philosophy_contents .philosophy_contents_txt{
	padding:4%;
	background:#F5F8F9;
}
.philosophy_contents .philosophy_contents_txt p{
	font-size:15px;
}
.philosophy_contents ul li{
	padding:3%;
	margin-bottom:16px;
	background:#F5F8F9;
	font-size:16px;
    font-weight: 500;
}
.philosophy_contents ul li:last-child{
	margin-bottom:0;
}

footer{
	padding:0 0 80px;
	text-align:center;
	background:#fff;
}
footer img{
	width:320px;
	height:auto;
	margin:0 auto 64px;
}
footer p{
	font-size:13px;
	color:#003C52;
	letter-spacing:.16em;
}

@media screen and (max-width:1164px) {
	h2{
    	font-size: 52px;
	}
	.ttl_en{
		font-size:16vw!important;
	}
	.sec02_ttl{
		padding-top:16vw;
	}
	.sec03 .ttl_en{
    	left: -4%;
	}
	.sec04 .ttl_en{
		right:0;
	}
	.sec05_ttl,.sec06_ttl{
		padding-top:12.8vw;
	}
}
@media screen and (max-width:1024px) {
	.br1024{display:block;}
	.philosophy_contents ul li{
		font-size:15px;
	}
}
@media screen and (max-width:640px) {
	.hamburger{
		padding:4.8vw;
	}
	#navigation .navigation_inner .navigation_menu li a{
		padding:6% 5%;
		font-size: 4vw;
	}

	.pc {
		display: none;
	}
	.sp {
		display: block;
	}
	.gnav_sp{display: block;}
	body{
		background-size: 120px;
	}
	h2 {
		margin-bottom: 4vw;
    	padding: 1.6vw;
		font-size: 7.2vw;
	}
	h3 {
		margin-bottom:3vw;
		font-size:5.4vw;
	}
	h4 {
		margin-bottom:4vh;
		font-size:6.4vw;
	}
	h4:before{
		height:0.5vw;
	}
	#header{height:70vh;}
	header:before{
		height:3.4vw;
	}
	header:after{
		height:3.4vw;
	}
	#youtube-area{
		height:70vh;
	}
	.main_contents{
		padding-bottom:16vh;
	}
	.sec01{
		padding:7.6vh 0 8.8vh;
	}
	.sec01 .sec01_ttl{
    	padding: 6vh 0 0;
    	text-align: center;
	}
	.sec01 .sec01_txt{
		width:82%;
		margin:0 auto;
	}
	.sec01 .sec01_txt p{
		font-size:3.5vw;
	}
	.sec02{
		padding:7.6vh 0 8.8vh;
	}
	.advantage1,.rap{
		margin-bottom:8vh;
	}
	.sec02 .sec02_ttl{
    	padding: 6vh 0 0;
	}
	.sec02_img{
		margin:3vh auto 4vh;
	}
	.advantage_bg1{
		width:80vw;
    	height:35vh;
	}
	.advantage_bg1:after{
		width:22vw;
    	height:35vh;
	}
	.advantage_bg2{
		width:80vw;
    	height:35vh;
    	margin-left:20vw;
	}
	.advantage_bg2:before{
		width:22vw;
    	height:35vh;
	}
	.advantage2_txt{
		padding:7%;
	}
	.advantage2_txt p{
		font-size:3.4vw;
	}
	.advantage_gallery{
		margin-top:4vh;
	}
	.advantage_gallery_img{
		width:96%;
	}
	.sec03{
		padding:7.6vh 0 0;
	}
	.sec03 .ttl_en{
		left:0;
	}
	.sec03 .sec03_ttl{
    	padding: 6vh 0 0;
	}
	.sec03 .plant_txt p{
		width:100%;
    	margin-top: 2vh;
		font-size:3.4vw;
	}
	.sec04{
		margin:6.4vh auto 0;
	}
	.sec04_contents{
    	padding: 5.6vh 0 0;
	}
	.sec04_ttl{
		width: 90%;
		margin: 0 auto;
	}
	.sdgs_img{
		padding:6.4% 4%;
	}
	.sec05_contents{
    	margin: 7.6vh auto 0;
	}
	.partner_img{
		padding:6%;
	}
	.partner_img a{
		width:100%;
		margin: 0 auto 1.6vh;
	}
	.partner_img a:last-child{
    	margin: 0;
	}
	.sec06_contents{
		margin:7.6vh auto 0;
	}
	.sec06 .sec06_ttl{
    	padding: 6vh 0 0;
	}
	.company_info{
		margin:4vw auto 0;
	}
	.company_info dt{
		width:27%;
		padding:4vw 0 4vw 2vw;
    	font-size:3.8vw;
	}
	.company_info dd{
		width:73%;
		padding:4vw 0 4vw 2vw;
    	font-size:3.8vw;
	}
	.company_info p{
		font-size:3.1vw;
	}
	.philosophy{
		margin-top:10vh;
	}
	.philosophy_contents{
		margin-bottom:5.6vh;
	}
	.philosophy_contents .philosophy_contents_txt .philosophy_ttl{
		font-size:5.6vw;
	}
	.philosophy_contents .philosophy_contents_txt{
		padding:5%;
	}
	.philosophy_contents .philosophy_contents_txt p{
		font-size:3.5vw;
	}
	.philosophy_contents ul li{
		padding:4.5%;
		margin-bottom:1.6vh;
		font-size:3.6vw;
		line-height:1.7;
		font-weight: normal;
	}
	footer{
    	padding: 0 0 10vh;
	}
	footer img{
		width:60%;
    	margin: 0 auto 4vh;
	}
	footer p{
		font-size:3.4vw;
	}
}