@charset "UTF-8";
/* 
	
CSS page.css */


/*
base #333
blue #005188
*/



/*//////////////////


#index


//////////////////*/

/* common */
body#index { position: relative; background: rgba(0, 0, 0, 1); }
body#index:not(.firstview) #intro{ animation: intro_intro 2s ease-out 1s 1 normal both; }
#index #side .inner #intro .langlist{ opacity: 1; transition: 1s; }
body#index:not(.firstview) #side .inner #intro .langlist{ opacity: 0; visibility: hidden; }
#side{ transition: 4s; transition-delay: 3s; opacity: 1; visibility: visible; }
body#index:not(.firstview) #side{ opacity: 0; visibility: hidden; }
body#index #gnav,
body#index #menubtn,
body#index #article,
body#index #fmainbox{ opacity: 0; }
body#index.firstview #gnav,
body#index.firstview #menubtn,
body#index.firstview #fmainbox{ opacity: 0; }
body#index #article #sec_1 .logo .logoimg,
body#index #article #sec_1 .logo .logotxt{ opacity: 0; }
body#index:not(.firstview):not(.switched) #article{ animation: intro_cnt1 4s ease-out 0s 1 normal both; }
body#index:not(.firstview):not(.switched) #gnav,
body#index:not(.firstview):not(.switched) #menubtn,
body#index:not(.firstview):not(.switched) #fmainbox,
body#index:not(.firstview):not(.switched) #article #sec_1 .logo .logoimg,
body#index:not(.firstview):not(.switched) #article #sec_1 .logo .logotxt{ animation: intro_cnt2 2s ease-out 4s 1 normal both; }
body#index:not(.firstview).switched #article{ animation: intro_cnt1 3s ease-out 3s 1 normal both; }
body#index:not(.firstview).switched #gnav,
body#index:not(.firstview).switched #menubtn,
body#index:not(.firstview).switched #fmainbox,
body#index:not(.firstview).switched #article #sec_1 .logo .logoimg,
body#index:not(.firstview).switched #article #sec_1 .logo .logotxt{ animation: intro_cnt2 2s ease-out 7s 1 normal both; }
body#index .cover{ transition: 4.6s; transition-delay: 1s; }
body#index:not(.firstview) .cover{ background: rgba(0, 0, 0, .4); }
@keyframes intro_intro {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(0.6); opacity: 0; }
}
@keyframes intro_cnt1 {
  0% { transform: scale(1.2); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes intro_cnt2 {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

#index .indexbg{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: -1; width: 100%; height: 100vh;height: 100svh; margin:auto; }
#index .indexbg .cover{ background: rgba(0, 0, 0, .8); position: relative; z-index: 2; width: 100%; height: 100vh;height: 100svh; }
#index .indexbg .bglist{ z-index: 1; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin:auto;  width: 100%; height: 100vh;height: 100svh; }
#index .indexbg .bglist .slick-list,
#index .indexbg .bglist .slick-track,
#index .indexbg .bglist .slick-slide{ width: 100%; height: 100vh;height: 100svh; }
#index .indexbg .bglist li .bg{ object-fit: cover; font-family: 'object-fit: cover;'; width: 100%; height: 100%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin:auto;  }

#index #article{ width: 100%; height: 100vh;height: 100svh; display: flex; align-items: center; padding-left: 10%; padding-right: 10%; box-sizing: border-box; }
#index #article #sec_1 .logo{ position: relative; width: 806px; height: 326px; display: flex; align-items: center; flex-direction: column; justify-content: flex-end; background: url(../img/common/logobg.svg) no-repeat; background-size: contain; box-sizing: border-box; }
#index #article #sec_1 .logo .logoimg>img{ width: 548px; height: 56px; }
#index #article #sec_1 .logo .logotxt{ font-weight: bold; font-size: 2rem; text-align: center; line-height: 1.4; color: #fff; font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif; letter-spacing: 0.3em; margin-top: 10px; }
body.selected_ja#index #article #sec_1 .logo{ padding-bottom: 40px; }
body.selected_en#index #article #sec_1 .logo{ padding-bottom: 80px; }
body.selected_en#index #article #sec_1 .logo .logotxt{ display: none; }
@media screen and (max-width: 1200px) {
	#index #article{justify-content: center;align-items: center;}
	#index #article #sec_1 .logo{ width: 403px; height: 163px; }
	#index #article #sec_1 .logo .logoimg>img{ width: 274px; height: 28px; }
	#index #article #sec_1 .logo .logotxt{ font-size: 1.8rem; }
	body.selected_ja#index #article #sec_1 .logo{ padding-bottom: 20px; }
	body.selected_en#index #article #sec_1 .logo{ padding-bottom: 60px; }
}
@media screen and (max-width: 767px) {
}
@media screen and (max-width: 639px) {
	#index #article #sec_1 .logo{ width: 270px; height: 100px; background-position: center center; }
	#index #article #sec_1 .logo .logotxt{ font-size: 1.6rem; }
	/*body.selected_ja*/#index #article #sec_1 .logo{ padding-bottom: 0 }
}
@media screen and (max-width: 500px) {
}


/* #side */
#index #side { width: 100%; height: 100vh;height: 100svh; position: relative;  position: fixed; top: 0px; right: 0px; bottom: 0px; left: 0px; }
#index #side .inner{width: 100%;height: 100vh;height: 100svh;z-index: 100;display: flex;align-items: center;justify-content: center;/*flex-direction: column;*/padding-top: 60px;box-sizing: border-box;}
#index #side .inner #intro{ display: inline-block; text-align: center; }
#index #side .inner #intro .logo{ max-width: 202px; width: 80%; margin-left: auto; margin-right: auto; }
#index #side .inner #intro .logo .logoicon{ text-align: center; display: block; }
#index #side .inner #intro .logo .logoimg{ text-align: center; display: block; margin-top: 20px; }
#index #side .inner #intro .langlist{ margin-top: 75px; }
#index #side .inner #intro .langlist>li:after{ margin: 0px 15px; }
#index #side .inner #intro .langlist>li>a{ font-size: 2rem; }
@media screen and (max-width: 1040px) {
	#index #side .inner #intro .langlist{ margin-top: 50px; }
}
@media screen and (max-width: 767px) {
	#index #side .inner #intro{ display: inline-block; justify-content:center; align-items:center; }
	#index #side .inner #intro .logo{ max-width: 180px; width: 80%;  }
	#index #side .inner #intro .langlist>li>a{ font-size: 1.4rem; }
	#index #side .inner #intro .langlist>li:after{ margin: 0px 10px; }
}
@media screen and (max-width: 639px) { 
}
@media screen and (max-width: 500px) { 
}







/*//////////////////


#concept


//////////////////*/
body#concept #article{ background: url(../img/common/concept-back.jpg) center center; background-size: 100% auto; }
#concept #sec_1 .linklist{ margin-top: 40px; }
#concept #sec_1 .img2 { display: none; }

@media screen and (max-width: 1400px) {
		#concept #sec_1 .imgtxtbox{ display: block; }
		#concept #sec_1 .imgtxtbox .txtbox .copy,
		#concept #sec_1 .imgtxtbox .txtbox .linklist{ text-align: center; }
		#concept #sec_1 .imgtxtbox ._1{ display: none; }
		#concept #sec_1 .imgtxtbox .imgbox{ display: none; }
		/*#concept #sec_1 .imgtxtbox .imgbox,
		#concept #sec_1 .imgtxtbox._reverse .imgtxtbox .imgbox{ margin-left: 0%; margin-right: 0; width: 100%; margin-top: 50px }
		#concept #sec_1 .imgtxtbox .imgbox{ max-width: 560px; width: 100%; margin-left: auto; margin-right: auto; }
		#concept #sec_1 .imgtxtbox .imgbox{ min-height: inherit; }
		#concept #sec_1 .imgtxtbox .imgbox img{ position: static; height: auto; }*/
		#concept #sec_1 .img2 { display: block; margin-top: 50px; }
}
@media screen and (max-width: 1040px) {
	#concept #sec_1 .linklist{ margin-top: 30px; }
	#concept #sec_1 .imgtxtbox .imgbox { max-width: 100%; }
}







/*//////////////////


#company


//////////////////*/

#company #sec_2 .img{ background: #fff; max-width: 732px; width: 100%; margin-left: auto; margin-right: auto; padding: 10px; }
@media screen and (max-width: 1040px) {
	#company #sec_2 .img{ box-sizing: border-box }
}

.selected_en#company #sec_1 .dllist>li>dl>dt{ width: 180px; }
@media screen and (max-width: 767px) {
	.selected_en#company #sec_1 .dllist>li>dl>dt{ width: 150px; }
}






/*//////////////////


#philosophy


//////////////////*/
#philosophy #sec_1 .copy { text-align: center; }
#philosophy #sec_1 .txt1 { text-align: center; }
@media screen and (max-width: 500px) {
	#philosophy #sec_1 .txt1 { text-align: left; }
}



/*//////////////////


#environmental


//////////////////*/
#environmental #sec_1 .link { text-align: center; margin-top: 40px;}
#environmental #sec_2 .imgtxtbox { display: flex; flex-direction: row-reverse; align-items: center; }
#environmental #sec_2 .imgtxtbox .imgbox { margin-right: 6%; margin-left: 0%; }
#environmental #sec_2 .imgtxtbox .imgbox>img{ height: auto;}
@media screen and (max-width: 1040px) {
	#environmental #sec_2 .imgtxtbox { display: block; }
	#environmental #sec_2 .imgtxtbox .imgbox { margin-top: 30px; }
}
@media screen and (max-width: 747px) {
	#environmental #sec_1 .link { margin-top: 30px; }
}



/*//////////////////


#business


//////////////////*/
#business #sec_1 .imgtxtbox { margin-bottom: 50px; }
#business #sec_1 .imgtxtbox.style1 { flex-direction: row-reverse; }
#business #sec_1 .imgtxtbox .txtbox{justify-content: center;display: flex;flex-direction: column; padding-top: 30px; padding-bottom: 30px;}
#business #sec_1 .imgtxtbox.style1 .imgbox { margin-left: 0%; margin-right: 6%; }
#business #sec_1 .imgtxtbox:last-child { margin-bottom: 0px; }
@media screen and (max-width: 1040px) {
	#business #sec_1 .imgtxtbox .txtbox{display: block; padding-top: 0; padding-bottom: 0;}
	#business #sec_1 .imgtxtbox .txtbox .txtbig{ text-align: center; }
}



/*//////////////////


#import


//////////////////*/
#import .section .boxstyle { margin-bottom: 100px; }
#import .section .imgtxtbox { margin-bottom: 30px; }
#import .section .imgtxtbox .txtbox{justify-content: center;display: flex;flex-direction: column; padding-top: 40px; padding-bottom: 40px;}
#import .section .imgtxtbox:last-child { margin-bottom: 0px; }
#import .section .inbox1 { display: flex; justify-content: space-between; }
#import .section .inbox1 ul { margin-right: 40px; width: auto;}
#import .section .inbox2 { display: flex; }
#import .section .inbox2 .inbox2_left { width: 33.3%; }
#import .section .inbox2 .inbox2_right { flex: 1; }
#import .section .inbox3 { display: flex; flex-direction: column; }
#import .section .inbox3 .inbox3_under { display: flex; }
#import .section .inbox3 .inbox3_under ul { width: 50%; }

@media screen and (max-width: 1200px) {
	#import .section .inbox1 { display: flex; flex-direction:column; }
}

@media screen and (max-width: 1040px) {
	#import .section .boxstyle { margin-bottom: 60px; }
	#import .section .imgtxtbox .imgbox { margin-top: 20px; }
	#import .section .imgtxtbox .txtbox{ display: block; padding-top: 0; padding-bottom: 0;}
	#import .section .inbox1 { display: block; }
	#import .section .inbox1 ul { margin-right: 0px;width: 100%;}
	#import .section .inbox2 { display: block; }
	#import .section .inbox2 .inbox2_left { width: 100%; margin-bottom: 30px; }
	#import .section .inbox2 .inbox2_right { flex: 1; }
	#import .section .inbox3 .inbox3_under { display: block; }
	#import .section .inbox3 .inbox3_under ul { width: 100%; }
}




/*//////////////////


#product


//////////////////*/
#product #sec_1 .box1 { display: flex; justify-content: space-between; }
#product #sec_1 .box1 .inbox { margin-right: 40px; }
#product #sec_1 .box1 .inbox:last-child { margin-right: 0px; }

@media screen and (max-width: 1180px) {
	#product #sec_1 .imgtxtbox .imgbox { margin-top: 40px; }
	#product #sec_1 .box1 { display: block; }
	#product #sec_1 .box1 .inbox { margin-right: 0px; margin-bottom: 30px;}
	#product #sec_1 .box1 .inbox:last-child { margin-bottom: 0px;}
}

@media screen and (max-width: 1040px) {
	#sustainability #sec_2 .imgtxtbox .imgbox {margin-top: 20px; }
}



/*//////////////////


#sustainability


//////////////////*/
#sustainability #sec_1 .imgtxtbox { margin-bottom: 30px; }
@media screen and (max-width: 1040px) {
	#sustainability #sec_1 .imgtxtbox .imgbox { margin-top: 20px; }
}
#sustainability #sec_1 .inbox1 { display: flex; justify-content: space-between; }
#sustainability #sec_1 .inbox1 ul { margin-right: 40px; width: auto;}
#sustainability #sec_1 .inbox2 { display: flex; }
#sustainability #sec_1 .inbox2 .inbox2_left { flex: 1; }
#sustainability #sec_1 .inbox2 .inbox2_right { width: 50%; }
#sustainability #sec_1 .inbox3 { display: flex; flex-direction: column; }
#sustainability #sec_1 .inbox3 .inbox3_under { display: flex; }
#sustainability #sec_1 .inbox3 .inbox3_under ul { width: 44%; }
@media screen and (max-width: 1200px) {
	#sustainability #sec_1 .inbox1 { display: flex; flex-direction:column; }
}

@media screen and (max-width: 1040px) {
	#sustainability #sec_1 .inbox1 { display: block; }
	#sustainability #sec_1 .inbox1 ul { margin-right: 0px;width: 100%;}
	#sustainability #sec_1 .inbox2 { display: block; }
	#sustainability #sec_1 .inbox2 .inbox2_left { flex: 1; }
	#sustainability #sec_1 .inbox2 .inbox2_right { width: 100%; margin-top: 30px; }
	#sustainability #sec_1 .inbox3 .inbox3_under { display: block; }
	#sustainability #sec_1 .inbox3 .inbox3_under ul { width: 100%; }
}


@media screen and (max-width: 1040px) {
	#sustainability #sec_2 .imgtxtbox .imgbox {margin-top: 20px; }
}