@charset "UTF-8";


/*--------------------------------------
  フォント設定
---------------------------------------*/

/* noto-sans-jp-regular - latin サブセット済み*/
@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('../fonts/NotoSansJP-Regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/NotoSansJP-Regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/NotoSansJP-Regular.otf') format('otf');
}

/* noto-sans-jp-500 - latin サブセット済み*/
@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 500;
  src: local(''),
       url('../fonts/NotoSansJP-Medium.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/NotoSansJP-Medium.woff') format('woff'), /* Modern Browsers */
       url('../fonts/NotoSansJP-Medium.otf') format('otf');
}

/* noto-sans-jp-700 - latin サブセット済み*/
@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 700;
  src: local(''),
       url('../fonts/NotoSansJP-Bold.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/NotoSansJP-Bold.woff') format('woff'), /* Modern Browsers */
       url('../fonts/NotoSansJP-Bold.otf') format('otf');
}

/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-v29-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/roboto-v29-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v29-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v29-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v29-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v29-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* montserrat-600 - latin v21はSVGアニメでエラーとなるため一部v18を使用*/
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/montserrat-v21-latin-600.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/montserrat-v21-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/montserrat-v18-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/montserrat-v18-latin-600.woff') format('woff'), /* Modern Browsers */
       url('../fonts/montserrat-v18-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/montserrat-v21-latin-600.svg#Montserrat') format('svg'); /* Legacy iOS */
}

/* montserrat-400 - latin v21はSVGアニメでエラーとなるため一部v18を使用*/
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/montserrat-v21-latin-400.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/montserrat-v21-latin-400.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/montserrat-v18-latin-400.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/montserrat-v18-latin-400.woff') format('woff'), /* Modern Browsers */
       url('../fonts/montserrat-v18-latin-400.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/montserrat-v18-latin-600.svg#Montserrat') format('svg'); /* Legacy iOS */
}

/* アイコンフォント */
@font-face {
  font-family: 'icomoon';
  src:  url('../fonts/icomoon.eot?w6q3sq');
  src:  url('../fonts/icomoon.eot?w6q3sq#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?w6q3sq') format('truetype'),
    url('../fonts/icomoon.woff?w6q3sq') format('woff'),
    url('../fonts/icomoon.svg?w6q3sq#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-exlink:before {
  content: "\e900";
}
.icon-download:before {
  content: "\e901";
}



/*--------------------------------------
  アイコンフォント
---------------------------------------*/

/*-外部リンク（別ウィンドウ）-*/
.exlink::after{
	font-family: 'icomoon' !important;
	content: "\e900";
	margin-left: 8px;
	margin-right: 8px;
	font-size: 0.7rem;
}

/*-ファイルダウンロード-*/
.filedl::after{
	font-family: 'icomoon' !important;
	content: "\e901";
	margin-left: 8px;
	margin-right: 8px;
	font-size: 0.7rem;
}

/*-PDFファイルリンク-*/
.pdffile::after{
	font-family: 'icomoon' !important;
	content: "\e902";
	margin-left: 8px;
	margin-right: 8px;
	font-size: 0.7rem;
}




/*--------------------------------------
  clearfix
---------------------------------------*/

.clearfix::after {
    content: "";
    display: block;
    clear: both;
}


/*--------------------------------------
  フォント自動拡大無効設定
---------------------------------------*/

html {
    -moz-text-size-adjust:100%;
    -webkit-text-size-adjust:100%;
    -ms-text-size-adjust:100%;
}

/*--------------------------------------
  body設定
---------------------------------------*/

body {
	font-family: "Noto Sans JP", sans-serif;
	font-size: 16px;
	overflow-x: hidden;
	background-image: url("../images/background.jpg");
	background-size: 100px auto;
}

/*-ページ完了後表示-*/
.pageloadall {
	opacity: 0; 
	width: 100%;
  	height: 100%;
}

.pageloadall.complete {
	opacity: 0; 
	animation-duration: 1s;
	animation-name: pageloadcomp;
	animation-fill-mode: forwards;
}

@keyframes pageloadcomp {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

#skip{
	display: none;
}

/*--------------------------------------
  main
---------------------------------------*/

main {
	overflow: hidden;
}

/*--------------------------------------
  改行位置調整
---------------------------------------*/

span.br_cont{
	display: inline-block;
	text-decoration: inherit;
}

span.br_cont_400{
	display: inline-block;
	text-decoration: inherit;
	font-weight: 400 !important;
}


/*--------------------------------------
  buttonタグ_スタイルリセット
---------------------------------------*/

button{
        background-color: transparent;
        border: none;
        cursor: pointer;
        padding: 0;
        appearance: none;
}

button:focus:not(:focus-visible) {
  outline: 0; /* キーボード操作"以外"でフォーカスされた際はoutlineを消す */
}



/*--------------------------------------
  ヘッダー
---------------------------------------*/


header {
  display: flex;
  justify-content: space-between;
}

.wrapper {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 40px 0 40px;/*-左右マージン-*/
}

header h1 {
	margin-top: 20px;
	margin-bottom: 20px;
	z-index: 97;
}

@media screen and (max-width: 960px) {
	
	.wrapper {
	padding: 0 35px 0 35px;/*-左右マージン-*/
}
	
	header h1 {
	margin-top: 22px;
}
	
	header h1 img {
	width: 200px;
	height: 57px;
}
}

@media screen and (max-width: 520px) { 
	.wrapper {
	padding: 0 5px 0 5px;/*-左右マージン-*/
	margin: 0 0 0 0;
	height: 50px;
}	
	
	header h1  {
	margin: 0 0 0 0;
}
	
	header h1 img {
	width: 145px;
	height: 42px;
	margin: 5px 0 0 0;
}
}

/*--------------------------------------
  メニュー
---------------------------------------*/


.gnavi{
    z-index: 98;
}

.gnavi_menu {
    display: flex;
    font-size: 0.937rem;
    margin-top: 44px;
    list-style: none;
}


.gnavi_menu li {
  margin-left: 20px;
}

.gnavi_menu li a{
  color: #FFFFFF;
  text-decoration: none;
}

/*-メニュー_下層ページ用-*/

.gnavi_menu_other li a{
  color: #000000;
}


/*--------------------------------------
  NAV アンダーライン　（SP版以外適用）
---------------------------------------*/


@media screen and (min-width: 961px) { 

	.gnavi_menu li a {
  	position: relative;
  	display: inline-block;
  	text-decoration: none;
}
	.gnavi_menu li a::after {
  	position: absolute;
  	bottom: -10px;
  	left: 0;
  	content: '';
  	width: 100%;
  	height: 1px;
  	background: #FFF;
  	transform: scale(0, 1);
  	transform-origin: right top;
  	transition: transform .3s;
}
	.gnavi_menu li a:hover::after {
	transform-origin: left top;
	transform: scale(1, 1);
}
}

/*-NAV アンダーライン_下層ページ用-*/

@media screen and (min-width: 961px) { 

	.gnavi_menu_other li a::after {
  	background: #0073d7;
}
	li.current_page a::before {
  	position: absolute;
  	bottom: -10px;
  	left: 0;
  	content: '';
  	width: 100%;
  	height: 1px;
  	background: #0073d7;
}
}

/*--------------------------------------
  メニュー スマホ用全画面設定
---------------------------------------*/

@media screen and (max-width: 960px) {

    .gnavi{
    background: rgba(0,0,85,0.9);
    height: 100%;
    position: fixed;
	top: 0;
	left: 0;
	right: 0;
    bottom: 0;
    width: 100%;
    z-index: 98;
	opacity: 0; 
	visibility: hidden;
}
    .gnavi_menu {
    display: flex;
    font-size: 1.375rem;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    right: 0;
    bottom: 0;
    left: 0;
	transform: translate(0, -30%);
    flex-direction: column;
    font-weight: 500;
	border-top: solid 1px #999999;
}

    .gnavi_menu li {
	margin: 0;
	border-bottom: solid 1px #999999;
	position: relative;
}

    .gnavi_menu li a{
	display: block;
	padding: 7% 0 7% 25px;
    color: #FFFFFF;
    text-decoration: none;
}		
}

    .gnavi.open{
	animation: fade-in-animation 1000ms forwards;
}
	
    .gnavi.close{
	animation: fade-out-animation 1000ms forwards;
}
	
	
    .noscroll{ /* SPメニューオープン時スクロールなし*/
    overflow: hidden;
}	

@media screen and (max-width: 960px) { 

    @keyframes fade-in-animation {
    0% {
    opacity: 0;
    }
    100% {
    opacity: 1;
    visibility: visible;
  }
}
    @keyframes fade-out-animation {
    0% {
    opacity: 0.9;
    visibility: visible;
    }
    100% {
    opacity: 0;
  }
}
}

/*-PCサイズに戻した際にメニューを表示する-*/

@media screen and (min-width: 961px) { 
	.gnavi.close{
	opacity: 1; 
	visibility: visible;
}
}


@media screen and (max-height: 820px) and (max-width: 960px)  {
    .gnavi_menu {
    display: flex;
    font-size: 1.125rem;
	transform: translate(0, -45%);
}
    .gnavi_menu li a{
	display: block;
	padding: 3% 0 3% 25px;
    color: #FFFFFF;
    text-decoration: none;
}		
}
 
/*--------------------------------------
  ハンバーガーメニュー
---------------------------------------*/


.openbtn1{
	position: fixed;
	top: 0; 
	right: 0;
	background:#0073d7;
	cursor: pointer;
    width: 50px;
    height:50px;
	z-index: 99;
	display: none;
}

/*ボタン内側*/
    .openbtn1 span{
    display: inline-block;
    transition: all .4s;/*アニメーションの設定*/
    position: absolute;
    left: 14px;
    height: 1px;
    background: #fff;
    width: 45%;
  }

.openbtn1 span:nth-of-type(1) {
    top:15px; 
}

.openbtn1 span:nth-of-type(2) {
    top:24px;
}

.openbtn1 span:nth-of-type(3) {
    top:33px;
}

/*activeクラスが付与されると線が回転して×に*/

.openbtn1.active span:nth-of-type(1) {
    transform: translateY(9px) rotate(-45deg);
}

.openbtn1.active span:nth-of-type(2) {
    opacity: 0;/*真ん中の線は透過*/
}

.openbtn1.active span:nth-of-type(3){
    transform: translateY(-9px) rotate(45deg);
}

/*メディアクエリ スマホサイズ時にボタン表示*/

@media screen and (max-width: 960px) {
    .openbtn1{
	display:block;
}
}



/*--------------------------------------
  トップ_フルスクリーン
---------------------------------------*/


.big_bg {
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
	background-image: url("../images/top_kv.jpg");
	min-height: 100vh;
	min-height: calc(var(--vh, 1vh) * 100);/* スマホ用vh100を取得 */
	position: relative;
	overflow: hidden;
}

.big_bg::before{
	content: "";
	display: block;
	position: absolute;
	background: inherit;
	top: -5px;
	right: -5px;
	bottom: -5px;
	left: -5px;
	z-index: 1;
	/*filter: blur(10px);*/
	animation-name: blur,animationZoom1;
	animation-duration: 3s;
	animation-fill-mode: forwards;
	overflow: hidden;
}

@keyframes animationZoom1 {
    0% { transform:scale(1.05)} 
	100% { transform:scale(1.0)} 
}


/*--------------------------------------
  スクロール誘導ライン
---------------------------------------*/
.bg_wrapper {
	min-height: 100vh;
	min-height: calc(var(--vh, 1vh) * 100);/* スマホ用vh100を取得 */
}

.scroll_bar {
  	position: absolute;
	width: 100px;
	height: 30px;
  	bottom: 55px;
  	right: -3px;
	z-index: 50;
	color: #FFFFFF;
	font-size: 0.75rem;
	font-family: "Montserrat";
	font-weight: 400;
	letter-spacing: 0.2em;
	transform: rotate( 90deg );
}

.bg_wrapper::after {
	content: '';
  	position: absolute;
  	bottom: 20px;
  	right: 50px;
  	width: 1px;
  	height: 100px;
  	background: #fff;
	animation: sdl 2s cubic-bezier(0.5, 0, 0, 0.5) infinite;
	z-index: 50;
}

.bg_wrapper::before {
	content: '';
  	position: absolute;
  	bottom: 20px;
  	right: 50px;
  	width: 1px;
  	height: 100px;
  	background: #fff;
	opacity: 0.5;
	z-index: 51;
}

@keyframes sdl {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  50.1% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}


@media screen and (max-width: 960px) {
	.scroll_bar {
  	right: -13px;
}
	.bg_wrapper::after {
  	right: 40px;
}

	.bg_wrapper::before {
  	right: 40px;
}
}

@media screen and (max-width: 520px) {
  	.scroll_bar {
  	right: -18px;
}
	.bg_wrapper::after {
  	right: 35px;
}

	.bg_wrapper::before {
  	right: 35px;
}
}
 

/*--------------------------------------
  トップ　キャッチコピー　ロゴ
---------------------------------------*/

.kv_catch, .kv_catch_second {
	max-width: 1100px;
	max-height: 700px;
    background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	z-index: 50;
}

/*ロゴアニメーション_4つの画像の組み合わせ*/

.kv_catch::before{
	content: "";
	max-width: 1100px;
	max-height: 700px;
	display: block;
	position: absolute;
	background: inherit;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -5;
	background-image: url("../images/top_kv_logo_1.png");
	animation-name: logo_opacity_1;
	animation-duration: 0.5s;
	animation-delay: 1s;
	animation-fill-mode: forwards;
	overflow: hidden;
	opacity: 0;
}

.kv_catch::after{
	content: "";
	max-width: 1100px;
	max-height: 700px;
	display: block;
	position: absolute;
	background: inherit;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -6;
	background-image: url("../images/top_kv_logo_2.png");
	animation-name: logo_opacity_2;
	animation-duration: 0.5s;
	animation-delay: 1.1s;
	animation-fill-mode: forwards;
	overflow: hidden;
	opacity: 0;
}

.kv_catch_second::after{
	content: "";
	max-width: 1100px;
	max-height: 700px;
	display: block;
	position: absolute;
	background: inherit;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -5;
	background-image: url("../images/top_kv_logo_3.png");
	animation-name: logo_opacity_3;
	animation-duration: 0.5s;
	animation-delay: 1.2s;
	animation-fill-mode: forwards;
	overflow: hidden;
	opacity: 0;
}

.kv_catch_second::before{
	content: "";
	max-width: 1100px;
	max-height: 700px;
	display: block;
	position: absolute;
	background: inherit;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -5;
	background-image: url("../images/top_kv_logo_4.png");
	animation-name: logo_opacity_4;
	animation-duration: 0.5s;
	animation-delay: 1.4s;
	animation-fill-mode: forwards;
	overflow: hidden;
	opacity: 0;
}



@keyframes logo_opacity_1 {
  0% {
    opacity: 0;
	  transform: translate3d(0, -40px, 0);
  }
  100% {
    opacity: 1;
	  transform: translate3d(0, 0, 0);
  }
}

@keyframes logo_opacity_2 {
  0% {
    opacity: 0;
	  transform: translate3d(65px, 40px, 0);
  }
  100% {
    opacity: 1;
	  transform: translate3d(0, 0, 0);
  }
}


@keyframes logo_opacity_3 {
  0% {
    opacity: 0;
	  transform: translate3d(-65px, 40px, 0);
  }
  100% {
    opacity: 1;
	  transform: translate3d(0, 0, 0);
  }
}

@keyframes logo_opacity_4 {
  0% {
    opacity: 0;
	  transform: translate3d(-20px, 10px, 0);
  }
  100% {
    opacity: 1;
	  transform: translate3d(0, 0, 0);
  }
}


/*キャッチコピー部分*/

.top_message {
	display: block;
	padding: 140px 0 0 110px;
	color: #FFFFFF;
	font-size: 3.3rem;
	line-height: 1.9;
	letter-spacing: 0.1em;
	margin: 0 auto;
	max-width: 580px;
}

.top_message div{
	display: inline;
}

@media screen and (max-width: 960px) { 
	.kv_catch, .kv_catch_second {
	max-width: 880px;
	max-height: 560px;
}
	
.top_message {
	max-width: 464px;
	padding: 105px 90px 0 30px;
	font-size: 2.64rem;
	margin: 0 auto;
	letter-spacing: 0.1em;
}
}

@media screen and (max-width: 520px) {
	
	.kv_catch, .kv_catch_second {
	max-width: 770px;
	max-height: 490px;
}
	
	.top_message {
	max-width: 770px;
	max-height: 490px;
	padding: 107px 0 0 8%;
	font-size: 2.1rem;
	letter-spacing: 0.02em;
}
}
 
@media screen and (min-width: 1440px) {
	.kv_catch, .kv_catch_second,
	.kv_catch::before,.kv_catch::after,
	.kv_catch_second::before,.kv_catch_second::after{
	max-width: 1320px;
	max-height: 840px;
}
	
.top_message {
	font-size: 3.96rem;
	max-width: 696px;
	padding: 160px 25px 0 155px;
	color: #FFFFFF;
	letter-spacing: 0.1em;
}
}


@media screen and (max-height: 520px) {
	
	.kv_catch, .kv_catch_second {
	width: 539px;
	height: 343px;
	top: 50px;
}
	
	.top_message {
	max-width: 770px;
	max-height: 490px;
	padding: 45px 0 0 35%;
	font-size: 2.1rem;
	line-height: 1.5;
	letter-spacing: 0.02em;
}
}
 

/*テキストアニメーション_下から出る*/

.wrap {
	width: 768px;
	margin: 0 auto;
}

.text {
	margin: 200px 0 0;
	text-align: center;
	opacity: 0;
}

.text span {
	display: inline-block;
	transform-origin: center center;
	transform: translate3d(0, 40px, 0);
	opacity: 0;
}


.text span:nth-child(1)  {
  transition: transform 0.8s ease 0.1s,opacity 0.8s ease 0.1s;
}

.text span:nth-child(2)  {
  transition: transform 0.8s ease 0.2s,opacity 0.8s ease 0.2s;
}

.text span:nth-child(3) {
  transition: transform 0.8s ease 0.3s,opacity 0.8s ease 0.3s;
}

.text span:nth-child(4)  {
  transition: transform 0.8s ease 0.4s,opacity 0.8s ease 0.4s;
}

.text span:nth-child(5)  {
  transition: transform 0.8s ease 0.5s,opacity 0.8s ease 0.5s;
}

.text span:nth-child(6)  {
  transition: transform 0.8s ease 0.6s,opacity 0.8s ease 0.6s;
}

.text span:nth-child(7)  {
  transition: transform 0.8s ease 0.7s,opacity 0.8s ease 0.7s;
}

.text span:nth-child(8)  {
  transition: transform 0.8s ease 0.8s,opacity 0.8s ease 0.8s;
}

.text span:nth-child(9)  {
  transition: transform 0.8s ease 0.9s,opacity 0.8s ease 0.9s;
}

.text span:nth-child(10)  {
  transition: transform 0.8s ease 1s,opacity 0.8s ease 1s;
}

.text span:nth-child(11)  {
  transition: transform 0.8s ease 1.1s,opacity 0.8s ease 1.1s;
}

.text.active {
  opacity: 1;
}

.text.active  {
  transform: translate3d(0, 0, 0);
}

.text.active span {
  transform: scale3d(1, 1, 1);
  opacity: 1;
}

@media screen and (max-width:520px){
  .wrap {
    width: 100%;
  }
  .text-move {
    font-size: 30px;
}
}


/*--------------------------------------
  トップ_リードコピー
---------------------------------------*/


#lead_message {
	max-width: 1200px;
  	margin: 0 auto;
	text-align: center;
	padding: 120px 0 250px 0;
}

#lead_message h2{
	font-size: 1.75rem;
	line-height: 2;
	font-weight: 700;
	color: #0073d7;
	letter-spacing: 0.08em;
	padding: 0 20px 0 20px;
}

@media screen and (max-width: 960px) {
	#lead_message {
	max-width: 1200px;
  	margin: 0 auto;
	text-align: center;
	padding: 70px 0 150px 0;
}

	#lead_message h2{
	font-size: 1.375rem;
	line-height: 2;
	font-weight: 700;
}
}

@media screen and (max-width: 520px) {
	#lead_message {
	padding: 50px 0 100px 0;
}

	#lead_message h2{
	font-size: 1.25rem;
	line-height: 1.9;
}
}
 

/*--------------------------------------
  ラッパー
---------------------------------------*/

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

.content_wrapper_2 {
	width: 100%;
	position: relative;
	margin-bottom: 150px;
}

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

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

.content_wrapper_5 {
	width: 100%;
	position: relative;
	margin-bottom: 130px;
}


.content_wrapper a{color: #0073d7;}
.content_wrapper a:hover{color: #58b2ff;}
.content_wrapper_2 a{color: #0073d7;}
.content_wrapper_2 a:hover{color: #58b2ff;}
.leader_box a{color: #0073d7;}
.leader_box a:hover{color: #58b2ff;}

.content_wrapper a,
.content_wrapper_2 a,
.member_box a,
.leader_box a{
	text-decoration: none;
}
	

@media screen and (max-width: 960px) {
	.content_wrapper {
	width: 100%;
	position: relative;
	margin-bottom: 200px;
}
		
	.content_wrapper_2 {
	margin-bottom: 80px;
}
	.content_wrapper_5 {
	margin-bottom: 30px;
}
		
	.content_wrapper_3 {
	margin: 0 auto 50px auto;
}
	.content_wrapper_4 {
	width: 100%;
	margin: 0 auto 0 auto;
}
}

@media screen and (max-width: 520px) {

	.content_wrapper_3 {
	margin: 0 auto 0 auto;
}	
	.content_box_randd h2 span{
	font-size: 	4.375rem;
}
	.content_wrapper_5 {
	margin-bottom: 10px;
}
}
 

/*--------------------------------------
  トップ_コンテンツ
---------------------------------------*/

.content_box {
	max-width: 1200px;
	position: relative;
	width: 100%;
	margin: 0 auto 350px auto;
	display: flex;
}

.content_right{
	justify-content: right;  
}

.content_box h2{
	display: block;
	font-size: 2rem;
	line-height: 1.7;
	font-weight: 600;
	color: #000000;
	padding: 0 0 60px 0;
	letter-spacing: 0.05em;
}

.content_box h2::after{
	content: "";
	width: 50px;
	height: 5px;
	background-color: #0073d7;
	display: block;
	position: relative;
	top: 25px; 
}


.content_box p{
	font-size: 0.935rem;
	line-height: 2.2;
	font-weight: 400;
	color: #000000;
	margin: 0 0 1.2rem 0;
}

.content_box p span{
	font-weight: 700;
}

.content_copy {
	max-width: 49%;
	padding: 0 40px 0 40px;/*-左右マージン-*/
	position: relative;
}

.content_photo {
	width: 45%;
	margin: 120px 0 120px 15px;
	position: absolute;
	top: 40px; right: 0px;
}
.content_photo img{
	width: 100%;
	height: auto;
	min-height: 500px;
	transition:1s all;
	object-fit: cover;
}

a.btn_img_play {
	display: block;
	width: 100%;
	position:relative;
	overflow:hidden;
}

a.btn_img_play::after{
	content: "";
	width: 100%;
	height: 100%;
	margin: auto;
	display: block;
	position: absolute;
	top:0;
	right:0;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 100px;
	background-image: url("../images/btn_img_play.svg");
	z-index: 5;
	mix-blend-mode: screen;
	transition: all .3s;
}

a.btn_img_play::before{
	content: "";
	width: 100%;
	height: 100%;
	margin: auto;
	display: block;
	position: absolute;
	top:0;
	right:0;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 100px;
	background-image: url("../images/btn_img_play.svg");
	z-index: 6;
	mix-blend-mode: normal;
	transition: all .3s;
	opacity: 0.5;
}
a.btn_img_play:hover::after {
	transform:scale(1.2);
}

a.btn_img_play:hover::before {
	transform:scale(1.2);
	opacity: 1;
}

.content_right .content_copy {
	margin: 0 0 0 49%;
	padding: 0 40px 0 0;/*-左右マージン-*/
}

.content_photo_left {
	width: 45%;
	padding: 0 0 0 0;
	margin-right: 15px; 
	position:absolute;
    top:30%;
    transform: translate(0, -50%);
	float: left;
	vertical-align:top;/*-隙間防止設定-*/
}

.content_photo_left img:nth-child(1){
	padding: 0;
	margin-left: 0; 
	width: 100%;
	height: auto;
	vertical-align:top;/*-隙間防止設定-*/
	display: block;
	float: left;
	min-height: 380px;
	object-fit: cover;
}

.content_photo_left img:nth-child(2),
.content_photo_left img:nth-child(3){
	padding: 0;
	margin-left: 0; 
	width: 50%;
	height: auto;
	vertical-align:top;/*-隙間防止設定-*/
	display: block;
	float: left;
	min-height: 190px;
	object-fit: cover;
}


@media screen and (max-width: 960px) {

	.content_box {
	max-width: 1200px;
	position: relative;
	width: 100%;
	margin: 0 auto 10px auto;
	display: block;
}
	
	.content_box h2{
	font-size: 1.7rem;
	line-height: 1.7;
	padding: 0 0 35px 0;
	letter-spacing: 0.05em;
}
	
	.content_box h2::after{
	top: 15px; 
}

	.content_copy {
	max-width: 100%;
	padding: 0 35px 0 35px;/*-左右マージン-*/
	position: relative;
}	
	
	.content_photo {
	width: 100%;
	margin: 50px 0 10px 35px;/*-左右マージン-*/
	position: static;
	height: auto;
}
	
	a.btn_img_play {
	display: block;
	width: 100%;
	position: static;
	transform: translate(0, 0);
}
	a.btn_img_play::before {
	transform: translate(-17px, 0);
}
	a.btn_img_play::after {
	transform: translate(-17px, 0);
}	
	a.btn_img_play:hover::after {
	transform:scale(1.2) translate(-17px, 0);
}
	a.btn_img_play:hover::before {
	transform:scale(1.2) translate(-17px, 0);
	opacity: 1;
}
	
	.content_photo img{
	width: 100%;
	object-fit: cover;
	min-height: auto;
	max-height:500px;
}
	
	.content_photo_left {
	width: auto;
	height:auto;
	margin: 50px 35px 10px 0px;/*-左右マージン-*/
	transform: translate(0, 0);
	position: static;
	float: none;
}
	
	.content_photo_left img:nth-child(1){
	max-height:334px;
	min-height: auto;
}

	.content_photo_left img:nth-child(2),
	.content_photo_left img:nth-child(3){
	max-height:166px;
	min-height: auto;
}
	
	.content_right .content_copy {
	margin: 0 0 0 0;
	max-width: 100%;
	padding: 0 35px 0 35px;/*-左右マージン-*/
	position: relative;
}

}

@media screen and (max-width: 520px) {
	.content_copy {
	padding: 0 15px 0 15px;/*-左右マージン-*/
}	
	.content_photo {
	margin: 50px 0 10px 15px;/*-左右マージン-*/
}

	.content_photo_left {
	margin: 50px 15px 10px 0px;/*-左右マージン-*/
}
	
	.content_right .content_copy {
	padding: 0 15px 0 15px;/*-左右マージン-*/
}
	a.btn_img_play::before {
	transform: translate(-7px, 0);
}
	a.btn_img_play::after {
	transform: translate(-7px, 0);
}	
	a.btn_img_play:hover::after {
	transform:scale(1.2) translate(-7px, 0);
}
	a.btn_img_play:hover::before {
	transform:scale(1.2) translate(-7px, 0);
	opacity: 1;
}
}
 

/*--------------------------------------
  トップ_ニュース一覧
---------------------------------------*/

.content_center {
	max-width: 920px;
	position: relative;
	margin: 0 auto 0 auto;
	padding: 0 40px 0 40px;/*-左右マージン-*/
}

.content_center h2{
	display: block;
	font-size: 1.75rem;
	line-height: 1.5;
	font-weight: 600;
	color: #000000;
	padding: 0 0 30px 0;
	letter-spacing: 0.05em;
}


.content_center dl{
	border-top: solid 1px #999999;
	position: relative;
	padding: 0 0 20px 0;
}


.content_center dl dt{
	position: absolute;
	width: 15%;
	font-family: "Roboto";
	display: block;
	font-size: 1rem;
	line-height: 1.7;
	color: #fa690d;
	float: left;
    clear: left;
	padding: 25px 0 25px 0;
}

.content_center dl dd{
	width: 85%;
	font-size: 0.935rem;
	line-height: 2;
	color: #000000;
	font-weight: 400;
	border-bottom: solid 1px #999999;
	padding: 25px 0 25px 15%;
}


@media screen and (max-width: 960px) {
	.content_center {
	padding: 0 35px 0 35px;/*-左右マージン-*/
}

	.content_center dl dt{
	width: 100%;
	font-size: 1rem;
	padding: 15px 0 15px 0;
}

	.content_center dl dd{
	width: 100%;
	font-size: 0.935rem;
	line-height: 1.6;
	padding: 45px 0 15px 0;
}
}

@media screen and (max-width: 520px) {
	.content_center {
	padding: 0 15px 0 15px;/*-左右マージン-*/
}
}

/*--------------------------------------
  ピックアップリンク
---------------------------------------*/

.pick_up_link {
	width: 100%;
}

.pick_up_link ul{
	display: flex;
}

.pick_up_link li{
	display: block;
	height: 400px;
	width: 50%;
	position: relative;
	overflow: hidden;
	text-align: center;
}

.pick_up_link li::after{
	content: "";
	width: 100%;
	height: 100%;
	margin: auto;
	display: block;
	position: absolute;
	background-size: cover;
	top:0;
	right:0;
	background-position: center center;
	background-repeat: no-repeat;
	z-index: -5;
	transition: all 0.7s;
}

.pick_up_link li::before{
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	top:0;
	right:0;
	background-color: #0073c4;
	z-index: -4;
	opacity: 0.5;
	mix-blend-mode: multiply;
	transition: all 0.7s;
}

.pick_up_link li:hover::after{
	transform:scale(1.05);
}

.pick_up_link li:nth-child(1)::after{
	background-image: url("../images/pick_up_01.jpg");
}

.pick_up_link li:nth-child(2)::after{
	background-image: url("../images/pick_up_02.jpg");
}

.pick_up_link a{
	display: block;
	cursor: pointer;
	height: 400px;
	width: 100%;
	text-decoration: none;
	color: #FFFFFF;
}

.pick_up_link .pick_up_eng{
	display: block;
	font-size: 2.625rem;
	font-family: "Montserrat";
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1.2;
	position: absolute;
	bottom:50%;
	left: 50%;
    transform: translateX(-50%);
}

.pick_up_link .pick_up_jp{
	display: block;
	font-size: 1.125rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	line-height: 1.2;
	position: absolute;
	margin: 15px 0 0 0 ;
	top:50%;
	left: 50%;
    transform: translateX(-50%);
}


@media screen and (max-width: 960px) {
	
    .pick_up_link li{
	height: 250px;
}
	
    .pick_up_link .pick_up_eng{
	font-size: 1.75rem;
	line-height: 1.2;
}	
}

@media screen and (max-width: 520px) {
	.pick_up_link ul{
	display: block;
}
	
	.pick_up_link li{
	height: 200px;
	width: 100%;
}
}
 

/*--------------------------------------
  フッター
---------------------------------------*/

footer {
	background-color: #0073d7;
	padding: 40px 40px 40px 40px;/*-左右マージン-*/
	overflow: hidden;
}

.footer_box {
	max-width: 1400px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
}

.footer_logo img{
	width: 230px;
}

.footer_navi {
	display: flex;
	margin: 0 0 15px auto;
	list-style: none;
	padding-left: 15px;
}


.footer_navi li {
	margin-left: 20px;
	font-size: 0.935rem;;
}

.footer_navi li a{
	color: #FFFFFF;
	text-decoration: none;
}

.footer_right {
	display: flex;
	flex-direction: column;
}


small {
	color: #FFFFFF;
	font-weight: 300;
	font-size: 0.75rem;
	line-height: 1.5;
	margin: 10px 0 0 auto;
	padding-left: 25px;
	text-align: right;
}

@media screen and (max-width: 960px) {
	
	.footer_logo img{
	width: 180px;
}
	
	footer {
	padding: 30px 35px 30px 35px;
}
	
	.footer_navi li {
	font-size: 0.75rem;;
}	
}

@media screen and (max-width: 520px) {
	
	.footer_box {
	display: block;
	justify-content: center;
}
	.footer_logo {
	display: block;
	padding: 0 0 25px 0;
	text-align: center;
}
	.footer_navi {
	margin: 0 auto 15px auto;
	list-style: none;
	padding-left: 0;
}
	
	.footer_navi li {
	margin-left: 10px;
	margin-right: 10px;
	font-size: 0.8rem;;
}
	
	small {
	text-align: center;
	margin: 10px auto 0 auto;
	padding-left: 0;
}
	
	footer {
	padding: 25px 15px 25px 15px;/*-左右マージン-*/
	overflow: hidden;
}
}

/*--------------------------------------
  ボタン
---------------------------------------*/

a.btn_1,a.btn_2{
	display: block;
	text-align: center;
	vertical-align: middle;
	cursor: pointer;
	height: 33px;
	width: 320px;
	padding: 17px 0 0 0;
	margin: 40px 0 0 0;
	font-size: 0.935rem;
	font-weight: 400;
	text-decoration: none;
	position:relative;
	color: #0073d7;
	background-position: center top;
	background-repeat: no-repeat;
	background-image: url("../images/btn_line.svg");
	transition: all .3s;
}

a.btn_1:hover,a.btn_2:hover{
	color: #ffffff;
}

a.btn_1::after,a.btn_2::after{
	content: "";
	position: absolute;
	top:0;
	right:0;
	height: 50px;
	width: 320px;
	display: block;
	text-align: center;
	vertical-align: middle;
	background-image: url("../images/btn_line_on.svg");
	opacity: 0;
	z-index: -1;
	transition: all .3s;
}

a.btn_1:hover::after,a.btn_2:hover::after{
	opacity: 1;
}

a.btn_1::before,a.btn_2::before{
	content: "";
	position: absolute;
	top:0;
	right:0;
	height: 50px;
	width: 320px;
	display: block;
	text-align: center;
	vertical-align: middle;
	transition: all .3s;
}

a.btn_1::before{
	background-image: url("../images/btn_play.svg");
}

a.btn_2::before{
	background-image: url("../images/btn_arrow.svg");
}

a.btn_1:hover::before{
	right:-1.5%;
	background-image: url("../images/btn_play_on.svg");
}

a.btn_2:hover::before{
	right:-1.5%;
	background-image: url("../images/btn_arrow_on.svg");
}

/*--ボタンセンター寄せ--*/
a.object_center{
	margin-left: auto;
	margin-right: auto;
}

@media screen and (max-width: 960px) {
	a.btn_1,a.btn_2{
	margin-left: auto;
	margin-right: auto;
}
}

@media screen and (max-width: 520px) {

}
 

/*--------------------------------------
  テキストアニメーション_背景が伸びる
---------------------------------------*/

.bgextend{
	animation-name:bgextendAnimeBase;
	animation-duration:0.5s;
	animation-fill-mode:forwards;
	position: relative;
	overflow: hidden;/*　はみ出た色要素を隠す　*/
	opacity:1;
}

@keyframes bgextendAnimeBase{
  from {
    opacity:0;
  }

  to {
    opacity:1;  
}
}

/*中の要素*/
.bgappear{
	animation-name:bgextendAnimeSecond;
	animation-duration:1s;
	animation-delay: 0.4s;
	animation-fill-mode:forwards;
	opacity: 0;
}

@keyframes bgextendAnimeSecond{
	0% {
	opacity: 0;
	}
	100% {
	opacity: 1;
}
}

/*左から右_適宜帯の高さ調整*/
.bgLRextend::before{
	animation-name:bgLRextendAnime;
	animation-duration:0.7s;
	animation-fill-mode:forwards;
    content: "";
    position: absolute;
	top: center;
    width: 100%;
    height: 2.8rem;
    background-color: #0073d7;/*伸びる背景色の設定*/
	z-index: 1;
}

@keyframes bgLRextendAnime{
	0% {
		transform-origin:left;
		transform:scaleX(0.5);
	}
	50% {
		transform-origin:left;
		transform:scaleX(1);
	}
	50.001% {
		transform-origin:right;
	}
	100% {
		transform-origin:right;
		transform:scaleX(0);
	}
}

/* スクロールをしたら出現する要素にはじめに透過0を指定 */
.bgappearTrigger,
.bgLRextendTrigger{
    opacity: 0;
}

/* トップ用_英文タイトルテキストアニメ */


.animation-container_1 {
	font-size: 9.375rem;
	font-family: "Montserrat";
	line-height: 2;
	font-weight: 600;
	display: block;
	position: absolute;
	top:-130px;
	left:-40px;
	z-index: -5;
}

.animation-container_1 svg {
	width:700px;
	height: 200px;
	letter-spacing: 0.08em;
	margin: -8% 0 0 5%;
}

.animation-container_2_1,
.animation-container_2_2,
.animation-container_3_1,
.animation-container_3_2{
	font-size: 7.5rem;
	font-family: "Montserrat";
	line-height: 2;
	font-weight: 600;
}

.animation-container_2_1{
	position: absolute;
	top:-207px;
	left:-75px;
	z-index: -5;
}

.animation-container_2_2{
	position: absolute;
	top:-97px;
	left:-75px;
	z-index: -5;
}

.animation-container_2_1 svg {
	width:700px;
	height: 200px;
	letter-spacing: 0.08em;
	margin: -8% 0 0 5%;
}

.animation-container_2_2 svg {
	width:700px;
	height: 200px;
	letter-spacing: 0.08em;
	margin: -8% 0 0 5%;
}

.animation-container_3_1{
	position: absolute;
	top:-207px;
	left:-70px;
	z-index: -5;
}

.animation-container_3_2{
	position: absolute;
	top:-97px;
	left:-70px;
	z-index: -5;
}

.animation-container_3_1 svg {
	width:700px;
	height: 200px;
	letter-spacing: 0.06em;
	margin: -8% 0 0 5%;
}

.animation-container_3_2 svg {
	width:700px;
	height: 200px;
	letter-spacing: 0.08em;
	margin: -8% 0 0 5%;
}
 .text_svg_anime_1,
 .text_svg_anime_2,
 .text_svg_anime_3{
  fill: transparent;
  stroke-width: 0.7;
  stroke-linejoin: miter;
  stroke-dasharray: 2500;
  animation-fill-mode:forwards;
  stroke: #58b2ff;
  animation-delay: 0;
  animation: text_stop 10s linear;
}

 .text_svg_anime_1.svg_start,
 .text_svg_anime_2.svg_start,
 .text_svg_anime_3.svg_start{
  animation: text_start 10s linear;
}



@keyframes text_stop {

0% {
stroke-dashoffset:2500px;
}


100% {
stroke-dashoffset:2500px;
}

}

@keyframes text_start {

0% {
stroke-dashoffset:2500px;
}


100% {
stroke-dashoffset:0px;
}

}

@media screen and (max-width: 960px) {
	.animation-container_1,
	.animation-container_2_1,
	.animation-container_2_2,
	.animation-container_3_1,
 	.animation-container_3_2{
	transform: scale(0.8);
	transform-origin:10% 43%;
}
	
	.animation-container_2_1,
	.animation-container_2_2{
	left:-40px;
}
	.animation-container_3_1,
	.animation-container_3_2{
	left:-76px;
}
	.animation-container_2_1,
	.animation-container_3_1{
	top:-180px;
}
}

@media screen and (max-width: 520px) {
	.animation-container_1 {
	transform: scale(0.52);
	transform-origin:7% 45%;
}	
	.animation-container_2_1,
	.animation-container_2_2,
	.animation-container_3_1,
 	.animation-container_3_2{
	transform: scale(0.572);
	transform-origin:7% 44%;
}
	.animation-container_3_1,
	.animation-container_3_2{
	left:-55px;
}
	.animation-container_2_1,
	.animation-container_3_1{
	top:-160px;
}
}

/* 英文タイトルテキストアニメ END */



/*--------------------------------------
  下層ページ_タイトルバック
---------------------------------------*/
.page_title_wrapper {
	height: 400px;
	width: 100%;
	position: relative;
	overflow: hidden;
}

.page_title_wrapper::after{
	content: "";
	width: 100%;
	height: 100%;
	margin: auto;
	display: block;
	position: absolute;
	background-size: cover;
	top:0;
	right:0;
	background-position: center center;
	background-repeat: no-repeat;
	z-index: -5;
}

.title_about_back::after{
	background-image: url("../images/about_back.jpg");
}

.title_member_back::after{
	background-image: url("../images/member_back.jpg");
}

.title_newsevent_back::after{
	background-image: url("../images/newsevent_back.jpg");
}

.page_title_wrapper::before{
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	top:0;
	right:0;
	background-color: #0073c4;
	z-index: -4;
	opacity: 0.45;
	mix-blend-mode: multiply;
}

.page_title{
	color: #FFFFFF;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 40px 0 40px;/*-左右マージン-*/
}

.page_title_eng{
	display: block;
	margin-top: 100px;
	font-size: 3.75rem;
	font-family: "Montserrat";
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.2;
}

.one_line{
	margin-top: 140px;
}



.page_title_jp{
	display: block;
	font-size: 1.875rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	line-height: 1.1;
}

.one_line_jp{
	line-height: 1;
}

@media screen and (max-width: 960px) {
	.page_title_wrapper {
	height: 250px;
}
	.page_title{
	padding: 0 35px 0 35px;/*-左右マージン-*/
}
	.page_title_eng{
	margin-top: 40px;
	font-size: 3.125rem;
}
	.page_title_jp{
	font-size: 1.625rem;
}	
	.one_line{
	margin-top: 78px;
	line-height: 0.8;
}
}

@media screen and (max-width: 520px) {
	.page_title_wrapper {
	height: 200px;
}
	.page_title{
	padding: 0 15px 0 15px;/*-左右マージン-*/
}
	.page_title_eng{
	margin-top: 35px;
	font-size: 2.25rem;
}
	.page_title_jp{
		font-size: 1.375rem;
}	
	.one_line{
	margin-top: 63px;
}
}
 

/*--------------------------------------
  研究開発
---------------------------------------*/

#about_lead_message_wrapper {
	width: 100%;
	background-size: auto 460px;
	background-position: 20% 35%;
	background-repeat: no-repeat;
	background-image: url("../images/about_back_logo.png");
}


#about_lead_message {
	max-width: 1200px;
  	margin: 0 auto;
	text-align: center;
	padding: 220px 0 300px 0;
}

#about_lead_message h2{
	font-size: 2.125rem;
	line-height: 1.7;
	font-weight: 700;
	color: #0073d7;
	letter-spacing: 0.08em;
	padding: 0 20px 20px 20px;
}

#about_lead_message p{
	font-size: 1.1rem;
	line-height: 2.2;
	font-weight: 500;
	letter-spacing: 0.08em;
	padding: 0 20px 0 20px;
}


@media screen and (max-width: 960px) {
	
	#about_lead_message_wrapper {
	background-size: auto 400px;
	background-position: -20% 35%;
	background-repeat: no-repeat;
}

	#about_lead_message {
	padding: 120px 0 170px 0;
}
	
	#about_lead_message h2{
	font-size: 	1.75rem;
	padding: 0 20px 20px 20px;
}
	
	#about_lead_message p{
	font-size: 1rem;
	line-height: 2.2;
	font-weight: 500;
	letter-spacing: 0em;
	padding: 0 20px 0 20px;
}
}

@media screen and (max-width: 520px) {
	#about_lead_message_wrapper {
	background-size: auto 330px;
	background-position: -80px 35%;
}

	#about_lead_message {
	padding: 70px 0 120px 0;
}
	
	#about_lead_message h2{
	font-size: 1.375rem;
	padding: 0 20px 20px 20px;
}
}

/*-改質リグニン--------------------------*/

.content_box_aboutBlue {
	max-width: 1200px;
	position: relative;
	width: 100%;
	margin: 0 auto 50px auto;
	display: flex;
	color: #FFFFFF;
}

.content_box_aboutBlue h2{
	display: block;
	font-size: 2.5rem;
	line-height: 1.7;
	font-weight: 600;
	padding: 20px 0 30px 0;
	letter-spacing: 0.05em;
}


.content_box_aboutBlue p{
	font-size: 0.935rem;
	line-height: 2.2;
	font-weight: 400;
	color: #FFFFFF;
	margin: 0 0 1.2rem 0;
}

.content_box_aboutBlue p span{
	font-weight: 700;
}

.content_copy_aboutBlue {
	max-width: 56%;
	padding: 40px 40px 40px 40px;/*-左右マージン-*/
	position: relative;
	z-index: 1;
}

.content_copy_aboutBlue::before {
	content: "";
	width: 100%;
	height: 100%;
	background: #0073d7;
	opacity: 0.9;
	z-index: -1;
	position: absolute;
	top:0;
	right:0;
}

.content_photo_aboutBlue {
	width: 45%;
	margin: 120px 0 120px 15px;
	position: absolute;
	top: -230px; right: 0px;
}
.content_photo_aboutBlue img{
	width: 100%;
	height: auto;
	min-height: 550px;
	transition:1s all;
	object-fit: cover;
}


@media screen and (max-width: 960px) {
	.content_box_aboutBlue h2{
	font-size: 2rem;
	letter-spacing: 0.05em;
}
	
	.content_box_aboutBlue {
	display: block;
	margin: 0 auto 100px auto;
}
	.content_copy_aboutBlue {
	max-width: 100%;
	padding: 30px 35px 40px 35px;/*-左右マージン-*/
	margin: 50px 35px 10px 0;
}
	.content_photo_aboutBlue {
	width: 65%;
	margin: 120px 0 120px 15px;
	position: absolute;
	top: -200px; right: 0px;
}
}

@media screen and (max-width: 520px) {
	.content_box_aboutBlue h2{
	font-size: 2rem;
	letter-spacing: 0.05em;
}
	
	.content_box_aboutBlue {
	display: block;
}
	.content_copy_aboutBlue {
	max-width: 100%;
	padding: 30px 15px 20px 15px;/*-左右マージン-*/
	margin: 50px 15px 10px 0;
}
	.content_photo_aboutBlue {
	width: 65%;
	margin: 120px 0 120px 15px;
	position: absolute;
	top: -200px; right: 0px;
}
}


/*-研究開発　3つの項目_リード--------------------------*/


.center_copy {
	max-width: 1200px;
  	margin: 0 auto;
	text-align: center;
	padding: 120px 0 150px 0;
}

.center_copy h2{
	font-size: 1.75rem;
	line-height: 2;
	font-weight: 700;
	color: #0073d7;
	letter-spacing: 0.08em;
	padding: 0 20px 0 20px;
}


@media screen and (max-width: 960px) {
	.center_copy {
	padding: 30px 0 70px 0;
}

	.center_copy h2{
	font-size: 1.5rem;
	letter-spacing: 0.08em;
}
}

@media screen and (max-width: 520px) {
	.center_copy {
	padding: 10px 0 50px 0;
}

	.center_copy h2{
	font-size: 1.375rem;
	letter-spacing: 0;
}
}
 

/*-研究開発　3つの項目--------------------------*/

.content_box_randd {
	max-width: 1200px;
	position: relative;
	width: 100%;
	margin: 0 auto 330px auto;
	display: flex;
}

.box_rd_last{
	margin: 0 auto 50px auto;
}

.content_box_randd h2{
	display: block;
	font-size: 2rem;
	line-height: 1.7;
	font-weight: 600;
	color: #000000;
	padding: 0 0 55px 0;
	letter-spacing: 0.05em;
}

.content_box_randd h2::after{
	content: "";
	width: 50px;
	height: 5px;
	background-color: #0073d7;
	display: block;
	position: relative;
	top: 25px; 
}

.content_box_randd h2 span{
	font-size: 	6.25rem;
	font-family: "Montserrat";
	font-weight: 600;
	color: #0073d7;
	letter-spacing: 0.08em;
	line-height: 1.3;
}


.content_box_randd p{
	font-size: 1rem;
	line-height: 2.2;
	font-weight: 400;
	color: #000000;
	margin: 0 0 1.2rem 0;
	letter-spacing: 0.05em;
}

.content_box_randd p span{
	font-weight: 700;
}

.content_copy_randd {
	max-width: 33%;
	padding: 0 40px 0 40px;/*-左右マージン-*/
	position: relative;
}


.content_right .content_copy_randd {
	margin: 0 0 0 55%;
	padding: 0 40px 0 80px;/*-左右マージン-*/
}

.content_photo_randd {
	width: 55%;
	margin: 120px 0 120px 15px;
	position: absolute;
	top: -120px; right: 0px;
}

.content_photo_randd img{
	width: 100%;
	min-height: 460px;
	max-height: 560px;
	object-fit: cover;
}

.content_photo_randd_small {
	width: 100%;
	margin: 120px 0 120px 15px;
	position: absolute;
	top: 300px; right: 40px;
}

.content_photo_randd_small img{
	padding: 0;
	margin-left: 0; 
	width: 33.3%;
	vertical-align:top;/*-隙間防止設定-*/
	display: block;
	float: left;
	min-height: 180px;
	max-height: 220px;
	object-fit: cover;
}

.photo_left {
	width: 55%;
	margin: 120px 15px 120px 0;
	position: absolute;
	top: -120px; left: 0px;
}

.photo_left_small {
	margin: 120px 15pt 120px 0;
	left: 40px;
	font-size: 0;
}


@media screen and (max-width: 960px) {

	.content_box_randd {
	margin: 0 auto 10px auto;
	display: block;
}
	.content_box_randd h2{
	font-size: 1.7rem;
	padding: 0 0 35px 0;
}
	
	.content_box_randd h2::after{
	top: 15px; 
}
	.content_box_randd h2 span{
	font-size: 	4.375rem;
}

	.content_copy_randd {
	max-width: 100%;
	padding: 0 35px 0 35px;/*-左右マージン-*/
	position: relative;
}	
	
	.content_right .content_copy_randd {
	max-width: 100%;
	padding: 0 35px 0 35px;/*-左右マージン-*/
	position: relative;
	margin: 0;
}
	
	.content_photo_randd {
	width: auto;
	margin: 150px 0 50px 35px;/*-左右マージン-*/
	position: relative;
	height: auto;
}

.rdp_last {
	margin: 0 0 80px 35px;/*-左右マージン-*/
	position: static;
	top: 0; right: 0px;
}

	.content_photo_randd img{
	min-height: 400px;
	max-height:460px;
	height: auto;
}
	.content_photo_randd_small {
	width: 100%;
	margin: 0 0 0 0;
	padding: 0 35px 0 0;/*-左右マージン-*/
	position: absolute;
	top: 370px; right: 0;
}

	.content_photo_randd_small img{
	min-height: 120px;
	max-height: 220px;
	height: auto;
}
	.photo_left {
	width: auto;
	margin: 150px 35px 50px 0;/*-左右マージン-*/
	position: relative;
	height: auto;
}

	.photo_left_small {
	width: 100%;
	margin: 0 0 0 0 ;
	padding: 0 0 0 35px;
	position: absolute;
	top: 370px; left: 0;
}
	.photo_left_small img{
	min-height: 120px;
	max-height: 220px;
	height: auto;
}
}

@media screen and (max-width: 520px) {
	.content_copy_randd {
	padding: 0 15px 0 15px;/*-左右マージン-*/
}	
	
	.content_right .content_copy_randd {
	padding: 0 15px 0 15px;/*-左右マージン-*/
}
	
	.content_photo_randd {
	margin: 150px 0 0px 15px;/*-左右マージン-*/
	position: relative;
}
	.rdp_last {
	margin: 0 0 80px 15px;/*-左右マージン-*/
	position: static;
	top: 0; right: 0px;
}
	
	.content_photo_randd_small {
	top: 220px; right: 0;
	padding: 0 15px 0 0;/*-左右マージン-*/
}

	.content_photo_randd img{
	min-height: 250px;
	max-height:300px;
	height: auto;
}
	.content_photo_randd_small img{
	min-height: 90px;
	max-height: 220px;
	height: auto;
}
	.photo_left {
	margin: 150px 15px 0px 0;/*-左右マージン-*/
}

	.photo_left_small {
	padding: 0 0 0 15px;
}
	.photo_left_small img{
	min-height: 90px;
	max-height: 220px;
}
}
 

/*-研究開発　結びの言葉--------------------------*/

.copy_middle {
	padding: 120px 20px 100px 20px;
}


.copy_middle h2{
	font-size: 1.375rem;
	line-height: 2.2;
	font-weight: 700;
	letter-spacing: 0.03em;
}


@media screen and (max-width: 960px) {
	.copy_middle {
	padding: 0 15px 20px 15px;
}
	.copy_middle h2{
	font-size: 1.125rem;
	line-height: 2;
}
}

@media screen and (max-width: 520px) {
	.copy_middle {
	padding: 0 0 20px 0;
}
	.copy_middle h2{
	font-size: 1.125rem;
	letter-spacing: 0;
}
}
 

/*-研究開発　謝辞--------------------------*/

.copy_small {
	padding: 50px 40px 120px 40px;/*-左右マージン-*/
}

.copy_small h3{
	max-width: 960px;
	font-size: 	0.875rem;
	line-height: 2.2;
	font-weight: 400;
	color: #000000;
	margin: 0 auto 40px auto;
	text-align: left;
}

.Acknowledgments div{
	width: 100%;
	text-align: center;
	display: block;
}


.Acknowledgments a:nth-child(1) {
	padding: 20px 10px 20px 0;
}

.Acknowledgments a:nth-child(2) {
	padding: 20px 10px 20px 10px;
}

.Acknowledgments a:nth-child(3) {
	padding: 20px 0 20px 10px;
}

.Acknowledgments img{
	max-width:300px;
	width:31%;
	height:auto;
	border: solid 1px #dddddd;
	margin: 5px 0 5px 0;
}


@media screen and (max-width: 960px) {
	.Acknowledgments a:nth-child(1) {
	padding: 15px 5px 15px 0;
}

	.Acknowledgments a:nth-child(2) {
	padding: 15px 5px 15px 5px;
}

	.Acknowledgments a:nth-child(3) {
	padding: 15px 0 15px 5px;
}
}

@media screen and (max-width: 520px) {
	.copy_small {
	padding: 40px 20px 50px 20px;/*-左右マージン-*/
}
	.copy_small h3{
	margin: 0 0 20px 0;
}

	.Acknowledgments a{
	display: block;
	padding: 10px 10px 10px 10px !important;
}

	.Acknowledgments img{
	width:300px;
	height:67px; 
	margin: 0 0 0 0;
}
}
 

/*--------------------------------------
  メンバー
---------------------------------------*/

/*-メンバー　組織図--------------------------*/

.copy_member {
	padding-top: 100px;
	padding-bottom: 40px;
}

.copy_member h2{
	line-height: 1.8;
}
.member_chart {
	max-width: 1000px;
  	margin: 0 auto;
	text-align: center;
	padding: 0 40px 0 40px;/*-左右マージン-*/
}

.member_chart img{
	max-width: 1000px;
	width:100%;
	height: auto;
}

@media screen and (max-width: 960px) {
	.copy_member {
	padding-top: 60px;
	padding-bottom: 40px;
}
	.member_chart {
	padding: 0 35px 50px 35px;/*-左右マージン-*/
}
}

@media screen and (max-width: 520px) {
	.copy_member {
	padding-top: 40px;
	padding-bottom: 20px;
}

	.copy_member h2{
	font-size: 1.125rem;
}		
	.member_chart {
	padding: 0 15px 50px 15px;/*-左右マージン-*/
}
}
	
/*-メンバー　リスト--------------------------*/	


.member_box,
.leader_box{
	max-width: 920px;
	position: relative;
	margin: 0 auto 0 auto;
	padding: 0 40px 80px 40px;/*-左右マージン-*/
}
	
.member_box h2,
.leader_box h2{
	font-size: 1.625rem;
	padding: 0 0 30px 0;
}	

.leader{
	max-width: 920px;
	position: relative;
	padding: 30px 0 30px 0;
	border-top: solid 1px #999999;
	border-bottom: solid 1px #999999;
}
.leader h2{
	font-size: 	1.375rem;
	line-height: 1;
	font-weight: 400;
	padding: 0 0 15px 0;
}

.leader ul li{
	font-size: 	1rem;
	line-height: 2;
	font-weight: 400;
	list-style: none;
}

.leader ul li:before { /* 文頭の黒丸の設定 */
    content:  "";     /* 空の要素作成 */
    width:  5px;               /* 幅指定 */
    height:  5px;              /* 高さ指定 */
    display:  inline-block;     /* インラインブロックにする */
    background-color: #000000;  /* 背景色指定 */
    border-radius:  50%;        /* 要素を丸くする */
    position:  relative;        /* 位置調整 */
    top: -3px;                  /* 位置調整 */
    margin-right: 7px;          /* 余白指定 */
}

.member_box ul{
	position: relative;
	list-style: none;
	border-top: solid 1px #999999;
	border-right: solid 1px #999999;
	border-left: solid 1px #999999;
	background-color: #FFFFFF;
}

.member_box li{
	max-width: 920px;
	position: relative;
	border-bottom: solid 1px #999999;
}
.member_box li::after { /*-clearfix-*/	
    content: "";
    display: block;
    clear: both;
}

.member_box li .mlist_name,
.member_box li .nolink:first-child{
	padding: 27px 0 0 20px;
	float: left;
	line-height: 1.5;
	width: auto;
	display: block;
}

.member_box li .mlist_logo,
.member_box li .nolink:last-child{
	display: block;
	padding: 2px 0 2px 0;
	float: right;
	width: 400px;
	line-height: 1.5;
}
	
.member_box img{
	max-height: 70px;
	width: auto;
}

.member_box a{
	color: #0073d7;
}

.member_box .mlist_name:hover{
	color: #58b2ff;
}

.mb50{
	margin-bottom: 50px;
}


@media screen and (max-width: 960px) {
	.member_box,
	.leader_box{
	padding: 0 35px 70px 35px;/*-左右マージン-*/
}
	.member_box h2,
	.leader_box h2{
	font-size: 1.375rem;
	padding: 0 0 20px 0;
}	
	.leader{
	max-width: 920px;
	padding: 25px 0 25px 0;
}
	
	.leader h2{
	font-size: 	1.25rem;
	padding: 0 0 15px 0;
}

	.leader ul li{
	font-size: 	0.875rem;
	line-height: 2;
}
	.member_box li .mlist_name,
	.member_box li .nolink:first-child{
	padding: 18px 0 0 10px;
	font-size: 	0.875rem;
}

	.member_box li .mlist_logo,
	.member_box li .nolink:last-child{
	padding: 2px 0 2px 0;
	width: 180px;
	font-size: 	0.875rem;
}
	.member_box img{
	max-height: 50px;
	width: auto;
}
}

@media screen and (max-width: 520px) {
	.member_box,
	.leader_box {
	padding: 0 15px 50px 15px;/*-左右マージン-*/
}
	.member_box h2,
	.leader_box h2{
	font-size: 1.375rem;
	padding: 0 0 20px 0;
}	
	.leader{
	max-width: 920px;
	padding: 25px 0 25px 0;
}
	
	.leader h2{
	font-size: 	1.25rem;
	padding: 0 0 10px 0;
}

	.leader p{
	font-size: 	0.875rem;
	line-height: 2;
}
	.member_box li .mlist_name,
	.member_box li .nolink:first-child{
	padding: 15px 0 5px 0;
	font-size: 	1rem;
	text-align: center;
	display: block;
	float:none;
}

	.member_box li .mlist_logo,
	.member_box li .nolink:last-child{
	padding: 2px 0 2px 0;
	width: auto;
	font-size: 	1rem;
	text-align: center;
	display: block;
	float:none;
}
	.member_box img{
	max-height: 60px;
	width: auto;
}
}

/*--------------------------------------
  ニュース・イベント
---------------------------------------*/
.newsevent_box1 {
	margin-bottom: 100px;
}	

.newsevent_box1 h2{
	font-size: 1.625rem;
	padding: 100px 0 20px 0;
}	

.newsevent_box2 h2{
	font-size: 1.625rem;
	padding: 0 0 20px 0;
}	

@media screen and (max-width: 960px) {
	.newsevent_box1 {
	margin-bottom: 70px;
}	
	.newsevent_box1 h2,
	.newsevent_box2 h2{
	font-size: 1.375rem;
}

}

@media screen and (max-width: 520px) {
	.newsevent_box1 {
	margin-bottom: 50px;
}	
	.newsevent_box1 h2,
	.newsevent_box2 h2{
	font-size: 1.375rem;
}
}
 
	

/*--------------------------------------
  斜めオブジェクト_トップページ
---------------------------------------*/

/*-キービジュアル部分-*/
.slanting01 {
	width:700px;
	height:140px;
  	top: 53%;
  	right: -300px;
	z-index: 5;
	opacity: 0.7;
	position: absolute;
	transform:rotate(-30deg) skew(-30deg);
	background:-moz-linear-gradient(left, rgba(222,91,137,0.3), rgba(188,128,225,0.8));
	background:-webkit-linear-gradient(left, rgba(222,91,137,0.3), rgba(188,128,225,0.8));
	background:linear-gradient(to right, rgba(222,91,137,0.3), rgba(188,128,225,0.8));
}

.slanting02 {
	width:700px;
	height:100px;
  	top: 55%;
  	right: -450px;
	z-index: 5;
	opacity: 0.7;
	position: absolute;
	transform:rotate(-30deg) skew(-30deg);
	background:-moz-linear-gradient(left, rgba(156,204,255,0.6), rgba(130,182,233,1));
	background:-webkit-linear-gradient(left, rgba(156,204,255,0.6), rgba(130,182,233,1));
	background:linear-gradient(to right, rgba(156,204,255,0.6), rgba(130,182,233,1));
}

/*-高機能リグニンの目的部分-*/
.slanting03 {
	width:100%;
	height:200px;
  	top: -200px;
  	left: 50%;
	z-index: -1;
	opacity: 1;
	position: absolute;
	transform:rotate(-30deg) skew(-30deg) translate(-250PX, 0);
	background:-moz-linear-gradient(left, rgba(156,204,255,0.2), rgba(220,120,200,0.7));
	background:-webkit-linear-gradient(left, rgba(156,204,255,0.2), rgba(220,120,200,0.7));
	background:linear-gradient(to right, rgba(156,204,255,0.2), rgba(220,120,200,0.7));
}

.slanting04 {
	width:700px;
	height:130px;
  	top: -250px;
  	right: -350px;
	z-index: -1;
	opacity: 0.8;
	position: absolute;
	transform:rotate(-30deg) skew(-30deg);
	background:-moz-linear-gradient(left, rgba(156,204,255,0.6), rgba(130,182,233,1));
	background:-webkit-linear-gradient(left, rgba(156,204,255,0.6), rgba(130,182,233,1));
	background:linear-gradient(to right, rgba(156,204,255,0.6), rgba(130,182,233,1));
}

/*-改質リグニンとは部分-*/
.slanting05 {
	width:600px;
	height:240px;
  	top: -140%;
  	left: 50%;
	z-index: -5;
	opacity: 0.8;
	position: absolute;
	transform: skew(0,-30deg) translate(60%, 0);
	overflow: hidden;
}

.slanting05 img{
	top: -45%;
	position: absolute;
	width:110%;
	height: auto;
	transform: skew(0,30deg) scale(1.2);
}

.slanting06 {
	width:700px;
	height:130px;
  	top: -120%;
  	left: 60%;
	z-index: -1;
	opacity: 1;
	position: absolute;
	transform:rotate(-30deg) skew(-30deg) translate(50%, 0);
	background:-moz-linear-gradient(left, rgba(70,160,255,0.6), rgba(0,115,195,1));
	background:-webkit-linear-gradient(left, rgba(70,160,255,0.6), rgba(0,115,195,1));
	background:linear-gradient(to right, rgba(70,160,255,0.5), rgba(0,115,195,1));
	mix-blend-mode: screen;
}

/*-ニュース・イベント部分-*/
.slanting07 {
	width:1000px;
	height:150px;
  	top: -300px;
  	right: 50%;
	z-index: -1;
	opacity: 1;
	position: absolute;
	transform:rotate(-30deg) skew(-30deg) translate(-540px, 0);
	background:-moz-linear-gradient(left, rgba(235,90,150,0.5), rgba(255,175,60,0.7));
	background:-webkit-linear-gradient(left, rgba(235,90,150,0.5), rgba(255,175,60,0.7));
	background:linear-gradient(to right, rgba(235,90,150,0.5), rgba(255,175,60,0.7));
	mix-blend-mode: screen;
}

.slanting08 {
	width:1000px;
	height:200px;
  	top: -480px;
  	right: 50%;
	z-index: -1;
	opacity: 1;
	position: absolute;
	transform:rotate(-30deg) skew(-30deg) translate(-100px, 0);
	background:-moz-linear-gradient(left, rgba(156,204,255,0.6), rgba(220,120,200,0.5));
	background:-webkit-linear-gradient(left, rgba(156,204,255,0.6), rgba(220,120,200,0.5));
	background:linear-gradient(to right, rgba(156,204,255,0.3), rgba(220,120,200,0.5));
}

.slanting09 {
	width:700px;
	height:140px;
  	top: 600px;
  	left: 50%;
	z-index: -1;
	opacity: 0.7;
	position: absolute;
	transform:rotate(-30deg) skew(-30deg) translate(550px, 0);
	background:-moz-linear-gradient(left, rgba(222,91,137,0.3), rgba(188,128,225,0.8));
	background:-webkit-linear-gradient(left, rgba(222,91,137,0.3), rgba(188,128,225,0.8));
	background:linear-gradient(to right, rgba(222,91,137,0.3), rgba(188,128,225,0.8));
}



@media screen and (max-width: 960px) {
	/*-キービジュアル部分-*/
	.slanting01 {
  	top: 58%;
  	right: -300px;
}	
	.slanting02 {
  	top: 60%;
  	right: -450px;
}
	/*-高機能リグニンの目的部分-*/
	.slanting03 {
  	top: -100px;
  	left: 60%;
}
	.slanting04 {
	height:100px;
  	top: -240px;
  	right: -580px;
}
	/*-改質リグニンとは部分-*/
	.slanting05 {
	width:600px;
	height:170px;
  	top: -25%;
  	left: 60%;
	transform: skew(0,-30deg) translate(20%, 0);
}
	.slanting06 {
	width:700px;
	height:90px;
  	top: -13%;
  	left: 55%;
	transform:rotate(-30deg) skew(-30deg) translate(25%, 0);
}
	/*-ニュース・イベント部分-*/
	.slanting07 {
	width:1500px;
	height:150px;
  	top: -100px;
  	right: 50%;
	opacity: 0.7;
	transform:rotate(-30deg) skew(-30deg) translate(50%, 0);
}
	.slanting08 {
	width:1000px;
	height:200px;
  	top: -750px;
  	left: 50%;
	opacity: 1;
	transform:rotate(-30deg) skew(-30deg) translate(-100px, 0);
}
	.slanting09 {
	width:700px;
	height:140px;
  	bottom: -60px;
	top: auto;
  	left: 60%;
	z-index: -5;
	opacity: 0.7;
	transform:rotate(-30deg) skew(-30deg);
}
}

@media screen and (max-width: 520px) {
	/*-キービジュアル部分-*/
	.slanting01 {
	width:700px;
	height:120px;
  	top: 60%;
  	right: -400px;
}
	.slanting02 {
	width:700px;
	height:80px;
  	top: 60%;
  	right: -550px;
}
	/*-高機能リグニンの目的部分-*/
	.slanting03 {
	height:150px;
  	top: -45px;
  	left: 80%;
}
	
	.slanting04 {
	height:70px;
  	top: -150px;
  	right: -600px;
}
	/*-改質リグニンとは部分-*/	
	.slanting05 {
	width:600px;
	height:150px;
  	top: -28%;
  	left: 50%;
	transform: skew(0,-30deg) translate(25%, 0);
}
	.slanting06 {
	width:700px;
	height:120px;
  	top: -12%;
  	left: 25%;
	opacity: 0.4;
	transform:rotate(-30deg) skew(-30deg) translate(25%, 0);
}
	/*-ニュース・イベント部分-*/
	.slanting07 {
	width:1500px;
	height:150px;
  	top: 50px;
  	right: 50%;
	opacity: 0.7;
	transform:rotate(-30deg) skew(-30deg) translate(50%, 0);
}
	.slanting08 {
	width:1000px;
	height:100px;
  	top: -570px;
  	left: 50%;
	opacity: 0.7;
	transform:rotate(-30deg) skew(-30deg) translate(-190px, 0);
}
	.slanting09 {
	width:700px;
	height:140px;
  	bottom: -60px;
	top: auto;
  	left: 60%;
	z-index: -5;
	opacity: 0.7;
	transform:rotate(-30deg) skew(-30deg);
}
}

/*--------------------------------------
  斜めオブジェクト_下層ページ
---------------------------------------*/

/*-タイトルバック-*/
.slanting_op01 {
	width:1000px;
	height:200px;
  	top: -730px;
  	left: 50%;
	z-index: -1;
	opacity: 0.7;
	position: absolute;
	transform:rotate(-30deg) skew(-30deg) translate(-140%, 0);
	background:-moz-linear-gradient(left, rgba(222,91,137,0.3), rgba(188,128,225,0.8));
	background:-webkit-linear-gradient(left, rgba(222,91,137,0.3), rgba(188,128,225,0.8));
	background:linear-gradient(to right, rgba(222,91,137,0.8), rgba(188,128,225,0.8));
}

.slanting_op02 {
	width:1000px;
	height:100px;
  	top: -570px;
  	left: 50%;
	z-index: -1;
	opacity: 0.8;
	position: absolute;
	transform:rotate(-30deg) skew(-30deg) translate(-95%, 0);
	background:-moz-linear-gradient(left, rgba(235,90,150,0.5), rgba(255,175,60,1));
	background:-webkit-linear-gradient(left, rgba(235,90,150,0.5), rgba(255,175,60,1));
	background:linear-gradient(to right, rgba(235,90,150,0.5), rgba(255,175,60,1));
}

.slanting_op03 {
	width:100%;
	height:240px;
  	top: 0;
  	left: 50%;
	z-index: -1;
	opacity: 1;
	position: absolute;
	transform:rotate(-30deg) skew(-30deg) translate(-200px, 0);
	background:-moz-linear-gradient(left, rgba(222,91,137,0.3), rgba(188,128,225,1));
	background:-webkit-linear-gradient(left, rgba(222,91,137,0.3), rgba(188,128,225,1));
	background:linear-gradient(to right, rgba(222,91,137,0.3), rgba(188,128,225,1));
}

.slanting_op04 {
	width:100%;
	height:120px;
  	top: 180px;
  	right: -50%;
	z-index: -1;
	opacity: 1;
	position: absolute;
	transform:rotate(-30deg) skew(-30deg) translate(300px, 0);
	background:-moz-linear-gradient(left, rgba(70,160,255,0.6), rgba(0,115,195,1));
	background:-webkit-linear-gradient(left, rgba(70,160,255,0.6), rgba(0,115,195,1));
	background:linear-gradient(to right, rgba(70,160,255,0.6), rgba(0,115,195,1));
	mix-blend-mode: screen;
}


@media screen and (max-width: 960px) {
	.slanting_op01 {
  	top: -610px;
	transform:rotate(-30deg) skew(-30deg) translate(-100%, 0);
}

	.slanting_op02 {
  	top: -470px;
}

	.slanting_op03 {
  	top: 110px;
	transform:rotate(-30deg) skew(-30deg) translate(-150px, 0);
}

  	.slanting_op04 {
	height:120px;
  	top: 5px;
	transform:rotate(-30deg) skew(-30deg) translate(180px, 0);
}
}

@media screen and (max-width: 520px) {

	.slanting_op01 {
  	top: -550px;
	transform:rotate(-30deg) skew(-30deg) translate(-100%, 0);
}

	.slanting_op02 {
	height:70px;
  	top: -385px;
}

	.slanting_op03 {
  	top: 110px;
}

  	.slanting_op04 {
	height:100px;
  	top: 50px;
	transform:rotate(-30deg) skew(-30deg) translate(100px, 0);
}
}

/*--------------------------------------
  斜めオブジェクト_研究開発
---------------------------------------*/

/*-改質リグニン部分-*/

.slanting_op05 {
	width:2500px;
	height:300px;
  	top: -550px;
  	left: 50%;
	z-index: -1;
	opacity: 0.7;
	position: absolute;
	transform:rotate(-30deg) skew(-30deg) translate(-50%, 0);
	background:-moz-linear-gradient(left, rgba(156,204,255,0.8), rgba(130,182,233,0.5));
	background:-webkit-linear-gradient(left, rgba(156,204,255,0.8), rgba(130,182,233,0.5));
	background:linear-gradient(to right, rgba(156,204,255,0.8), rgba(130,182,233,0.5));
}

.slanting_op06 {
	width:1000px;
	height:160px;
  	top: 150px;
  	left: 50%;
	z-index: -1;
	opacity: 0.8;
	position: absolute;
	transform:rotate(-30deg) skew(-30deg) translate(-120%, 0);
	background:-moz-linear-gradient(left, rgba(235,90,150,0.5), rgba(255,175,60,1));
	background:-webkit-linear-gradient(left, rgba(235,90,150,0.5), rgba(255,175,60,1));
	background:linear-gradient(to right, rgba(235,90,150,0.5), rgba(255,175,60,1));
}

@media screen and (max-width: 960px) {
	.slanting_op05 {
	width:2500px;
	height:300px;
	top:auto;
  	bottom: 830px;
  	left: 50%;
	transform:rotate(-30deg) skew(-30deg) translate(-50%, 0);
}

	.slanting_op06 {
	width:1000px;
	height:130px;
	top:auto;
  	bottom: 340px;
  	left: 50%;
	position: absolute;
	opacity: 0.6;
	transform:rotate(-30deg) skew(-30deg) translate(-37%, 0);
}
}

@media screen and (max-width: 520px) {
	.slanting_op05 {
	width:2500px;
	height:200px;
	top:auto;
  	bottom: 750px;
  	left: 50%;
	transform:rotate(-30deg) skew(-30deg) translate(-50%, 0);
}

	.slanting_op06 {
	width:1000px;
	height:90px;
	top:auto;
  	bottom: 280px;
  	left: 50%;
	position: absolute;
	transform:rotate(-30deg) skew(-30deg) translate(-25%, 0);
}
}
 

/*-研究開発_01-*/

.slanting_op07 {
	width:1500px;
	height:300px;
  	top: -250px;
  	left: 50%;
	z-index: -1;
	opacity: 0.35;
	position: absolute;
	transform:rotate(-30deg) skew(-30deg) translate(-35%, 0);
	background:-moz-linear-gradient(left, rgba(156,204,255,0.5), rgba(220,120,200,0.5));
	background:-webkit-linear-gradient(left, rgba(156,204,255,0.5), rgba(220,120,200,0.5));
	background:linear-gradient(to right, rgba(156,204,255,0.5), rgba(220,120,200,0.5));
}

.slanting_op08 {
	width:1000px;
	height:130px;
  	top: -200px;
  	left: 50%;
	z-index: -1;
	opacity: 0.3;
	position: absolute;
	transform:rotate(-30deg) skew(-30deg) translate(330px, 0);
	background:-moz-linear-gradient(left, rgba(156,204,255,0.8), rgba(130,182,233,0.5));
	background:-webkit-linear-gradient(left, rgba(156,204,255,0.8), rgba(130,182,233,0.5));
	background:linear-gradient(to right, rgba(156,204,255,0.8), rgba(130,182,233,0.5));
	mix-blend-mode: screen;
}


@media screen and (max-width: 960px) {
.slanting_op07 {
	width:1500px;
	height:300px;
  	top: -250px;
  	left: 50%;
	transform:rotate(-30deg) skew(-30deg) translate(-35%, 0);
}

.slanting_op08 {
	width:1000px;
	height:130px;
  	top: -200px;
  	left: 50%;
	transform:rotate(-30deg) skew(-30deg) translate(15px, 0);
}
}

@media screen and (max-width: 520px) {
	.slanting_op07 {
	height:200px;
  	top: -250px;
  	left: 50%;
	transform:rotate(-30deg) skew(-30deg) translate(-35%, 0);
}

.slanting_op08 {
	width:1000px;
	height:130px;
  	top: -200px;
  	left: 50%;
	transform:rotate(-30deg) skew(-30deg) translate(-75px, 0);
}
}
 

/*-研究開発_02-*/

.slanting_op09 {
	width:1000px;
	height:300px;
  	top: -50px;
  	left: 50%;
	z-index: -1;
	opacity: 0.3;
	position: absolute;
	transform:rotate(-30deg) skew(-30deg) translate(-35%, 0);
	background:-moz-linear-gradient(left, rgba(156,204,255,0.8), rgba(130,182,233,0.5));
	background:-webkit-linear-gradient(left, rgba(156,204,255,0.8), rgba(130,182,233,0.5));
	background:linear-gradient(to right, rgba(156,204,255,0.8), rgba(130,182,233,0.5));
}


@media screen and (max-width: 960px) {
	.slanting_op09 {
	width:1000px;
	height:250px;
  	top: -150px;
  	left: 50%;
	transform:rotate(-30deg) skew(-30deg) translate(-50%, 0);
}
}

@media screen and (max-width: 520px) {
	.slanting_op09 {
  	top: -120px;
}
}

/*-研究開発_03-*/

.slanting_op10 {
	width:1050px;
	height:280px;
  	top: -380px;
  	left: 50%;
	z-index: -1;
	opacity: 0.4;
	position: absolute;
	transform:rotate(-30deg) skew(-30deg) translate(-100%, 0);
	background:-moz-linear-gradient(left, rgba(156,204,255,0.5), rgba(220,120,200,0.5));
	background:-webkit-linear-gradient(left, rgba(156,204,255,0.5), rgba(220,120,200,0.5));
	background:linear-gradient(to right, rgba(156,204,255,0.5), rgba(220,120,200,0.5));
}

.slanting_op11 {
	width:700px;
	height:120px;
  	top: 370px;
  	right: 50%;
	z-index: -1;
	opacity: 0.4;
	position: absolute;
	transform:rotate(-30deg) skew(-30deg) translate(-300px, 0);
	background:-moz-linear-gradient(left, rgba(156,204,255,0.8), rgba(130,182,233,0.5));
	background:-webkit-linear-gradient(left, rgba(156,204,255,0.8), rgba(130,182,233,0.5));
	background:linear-gradient(to right, rgba(156,204,255,0.8), rgba(130,182,233,0.5));
	mix-blend-mode: screen;
}


@media screen and (max-width: 960px) {
	.slanting_op10 {
	width:1000px;
	height:300px;
	top: 57px;
  	left: 50%;
	opacity: 0.4;
	transform:rotate(-30deg) skew(-30deg) translate(-70%, 0);
}

	.slanting_op11 {
	width:1000px;
	height:120px;
	top: 750px;
  	right: 50%;
	opacity: 0.4;
	transform:rotate(-30deg) skew(-30deg) translate(100px, 0);
}
}

@media screen and (max-width: 520px) {

}
 
/*--------------------------------------
  斜めオブジェクト_メンバー
---------------------------------------*/
 
.slanting_op12 {
	width:800px;
	height:220px;
  	top: -430px;
  	left: 50%;
	z-index: -1;
	opacity: 0.5;
	position: absolute;
	transform:rotate(-30deg) skew(-30deg) translate(-183%, 0);
	background:-moz-linear-gradient(left, rgba(156,204,255,0.8), rgba(130,182,233,0.5));
	background:-webkit-linear-gradient(left, rgba(156,204,255,0.8), rgba(130,182,233,0.5));
	background:linear-gradient(to right, rgba(156,204,255,0.8), rgba(130,182,233,0.5));
}

.slanting_op13 {
	width:500px;
	height:130px;
  	top: -150px;
  	left: 50%;
	z-index: -1;
	opacity: 0.5;
	position: absolute;
	transform:rotate(-30deg) skew(-30deg) translate(-240%, 0);
	background:-moz-linear-gradient(left, rgba(235,90,150,0.5), rgba(255,175,60,1));
	background:-webkit-linear-gradient(left, rgba(235,90,150,0.5), rgba(255,175,60,1));
	background:linear-gradient(to right, rgba(235,90,150,0.5), rgba(255,175,60,1));
}

.slanting_op14 {
	width:1000px;
	height:280px;
  	top: 700px;
  	left: 50%;
	z-index: -1;
	opacity: 0.5;
	position: absolute;
	transform:rotate(-30deg) skew(-30deg) translate(330px, 0);
	background:-moz-linear-gradient(left, rgba(156,204,255,0.5), rgba(220,120,200,0.5));
	background:-webkit-linear-gradient(left, rgba(156,204,255,0.5), rgba(220,120,200,0.5));
	background:linear-gradient(to right, rgba(156,204,255,0.5), rgba(220,120,200,0.5));
	mix-blend-mode: screen;
}


@media screen and (max-width: 960px) {
	.slanting_op12 {
	width:800px;
	height:150px;
  	top: -130px;
  	left: 50%;
	transform:rotate(-30deg) skew(-30deg) translate(-100%, 0);
}

	.slanting_op13 {
	width:500px;
	height:100px;
  	top: 80px;
  	left: 50%;
	transform:rotate(-30deg) skew(-30deg) translate(-140%, 0);
}

	.slanting_op14 {
	width:1000px;
	height:200px;
  	top: 500px;
  	left: 50%;
	transform:rotate(-30deg) skew(-30deg) translate(50px, 0);
}
}

@media screen and (max-width: 520px) {
.slanting_op14 {
	width:1000px;
	height:200px;
  	top: auto;
	bottom: 230px;
  	left: 50%;
	transform:rotate(-30deg) skew(-30deg) translate(50px, 0);
}
}
 
/*--------------------------------------
  ニュース・イベント_メンバー
---------------------------------------*/

.slanting_op15 {
	width:800px;
	height:220px;
  	top: -230px;
  	left: 50%;
	z-index: -10;
	opacity: 0.3;
	position: absolute;
	transform:rotate(-30deg) skew(-30deg) translate(-183%, 0);
	background:-moz-linear-gradient(left, rgba(156,204,255,0.8), rgba(130,182,233,0.5));
	background:-webkit-linear-gradient(left, rgba(156,204,255,0.8), rgba(130,182,233,0.5));
	background:linear-gradient(to right, rgba(156,204,255,0.8), rgba(130,182,233,0.5));
}

.slanting_op16 {
	width:500px;
	height:130px;
  	top: 50px;
  	left: 50%;
	z-index: -10;
	opacity: 0.3;
	position: absolute;
	transform:rotate(-30deg) skew(-30deg) translate(-240%, 0);
	background:-moz-linear-gradient(left, rgba(235,90,150,0.5), rgba(255,175,60,1));
	background:-webkit-linear-gradient(left, rgba(235,90,150,0.5), rgba(255,175,60,1));
	background:linear-gradient(to right, rgba(235,90,150,0.5), rgba(255,175,60,1));
}

.slanting_op17 {
	width:700px;
	height:140px;
  	top: 900px;
  	left: 50%;
	z-index: -10;
	opacity: 0.3;
	position: absolute;
	transform:rotate(-30deg) skew(-30deg) translate(550px, 0);
	background:-moz-linear-gradient(left, rgba(222,91,137,0.3), rgba(188,128,225,0.8));
	background:-webkit-linear-gradient(left, rgba(222,91,137,0.3), rgba(188,128,225,0.8));
	background:linear-gradient(to right, rgba(222,91,137,0.3), rgba(188,128,225,0.8));
}



@media screen and (max-width: 960px) {
	.slanting_op15 {
	width:800px;
	height:150px;
  	top: -460px;
  	left: 50%;
	transform:rotate(-30deg) skew(-30deg) translate(-100%, 0);
}
	.slanting_op16 {
	width:500px;
	height:100px;
  	top: -350px;
  	left: 50%;
	transform:rotate(-30deg) skew(-30deg) translate(-140%, 0);
}
	.slanting_op17 {
	width:700px;
	height:140px;
  	bottom: -60px;
	top: auto;
  	left: 60%;
	z-index: -5;
	opacity: 0.7;
	transform:rotate(-30deg) skew(-30deg);
}
}

@media screen and (max-width: 520px) {
	.slanting_op15 {
  	top: -410px;
}
	.slanting_op16 {
  	top: -300px;
	transform:rotate(-30deg) skew(-30deg) translate(-100%, 0);
}
}

/*--------------------------------------
  フェードアップ（上に動いてフェードイン）
---------------------------------------*/

.fadeup1,
.fadeup2,
.fadeup3,
.fadeup4,
.fadeup5{
  	opacity: 0; 
	animation-duration: 0.8s;
	animation-fill-mode: forwards;
}

.fadeup2 {
	animation-delay: 0.2s;
}

.fadeup3 {
	animation-delay: 0.3s;
}

.fadeup4 {
	animation-delay: 0.4s;
}

.fadeup5 {
	animation-delay: 0.5s;
}

.fadetrue {
  	animation-name: fadeup_anim;
}


@keyframes fadeup_anim {
  0% {
    opacity: 0;
  	transform: translate3d(0, 40px, 0);
  }
  100% {
    opacity: 1;
  	transform: translate3d(0, 0, 0);
  }
}

@media screen and (max-width: 960px) {
	.fadeup1,
	.fadeup2,
	.fadeup3,
	.fadeup4,
	.fadeup5{
  	opacity: 0; 
	animation-duration: 0.7s;
	animation-fill-mode: forwards;
}
	.fadeup2 {
	animation-delay: 0.1s;
}

	.fadeup3 {
	animation-delay: 0.2s;
}

	.fadeup4 {
	animation-delay: 0.3s;
}

	.fadeup5 {
	animation-delay: 0.4s;
}

	.fadetrue {
  	animation-name: fadeup_anim;
}
	
	@keyframes fadeup_anim {
	0% {
    opacity: 0;
  	transform: translate3d(0, 25px, 0);
  }
	100% {
    opacity: 1;
  	transform: translate3d(0, 0, 0);
  }
}
}

@media screen and (max-width: 520px) {
	.fadeup1,
	.fadeup2,
	.fadeup3,
	.fadeup4,
	.fadeup5{
  	opacity: 0; 
	animation-duration: 0.6s;
	animation-fill-mode: forwards;
}
	.fadeup2 {
	animation-delay: 0.1s;
}

	.fadeup3 {
	animation-delay: 0.2s;
}

	.fadeup4 {
	animation-delay: 0.3s;
}

	.fadeup5 {
	animation-delay: 0.4s;
}

	.fadetrue {
  	animation-name: fadeup_anim;
}
	
	@keyframes fadeup_anim {
	0% {
    opacity: 0;
  	transform: translate3d(0, 15px, 0);
  }
	100% {
    opacity: 1;
  	transform: translate3d(0, 0, 0);
  }
}
}
	


/*--------------------------------------
  ローディングアニメーション
---------------------------------------*/


.loader-bg {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  z-index: 1;
  opacity: 0;
	animation-delay: 0.5s;
	animation-duration: 0.5s;
  	animation-name: loading_fade;
	animation-fill-mode: forwards;
}

@keyframes loading_fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.spinner {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  text-align: center;
  z-index: 2;
  transform: translate(-50%,-9px);
}

.spinner > div {
  width: 13px;
  height: 13px;
  background-color: #0073d7;
	
  border-radius: 100%;
  display: inline-block;
  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
	animation-delay: 0.5s;
}

.spinner .bounce3 {
  -webkit-animation-delay: -0.32s;
  animation-delay: 0.82s;
}

.spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: 0.66s;
}

@-webkit-keyframes sk-bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0) }
  40% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bouncedelay {
  0%, 80%, 100% { 
    -webkit-transform: scale(0);
    transform: scale(0);
  } 40% { 
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
  }
}