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

/*PC*/
@media print, screen and (min-width: 769px) {


header .pc .hedLogo01 { fill: #FFF;}
header .pc .hedLogoTxt01 { fill: #FFF;}
header .pc * { color: #FFF;}
header .pc * a { color: #FFF;}




.hideOverlay {
	background: #eee;
	position: fixed;
	z-index: 1000000;
}

.hideOverlay .symbolSet {
	position: absolute;
	width: 100%;
	text-align: center;
	top: 36%;
}

.hideOverlay .symbolSet .symbol {
	display: none;
}

.hideOverlay .symbolSet .catch {
	display: none;
	margin-top: 45px;
}

body {
	display: none;
}

is_disable{ display:none;}




#index header { position: absolute; z-index: 10; top: 0; left: 0; width: 100%;}
#index header .pc { background: none;}


#index { position: relative;}

/*.hed_slider { width:100%; position:relative;}*/

#index main #photograph { position: relative; width: 100%; height: 100vh; top: 0; left: 0; right: 0; margin: 0 0;}

#index main .about { padding: 50px 0 55px;}
#index main .about .ttlIndex { text-align: center; margin: 0 0 55px;}
#index main .about .ttlIndex p { /*font-family: 'Ropa Sans', sans-serif; */ font-family: "Times New Roman", Times, serif; font-size: 17px; margin: 0; padding: 0; letter-spacing: 0.3em; color: #FFF;}
#index main .about .ttlIndex h2 { margin: 10px 0 0; padding: 0; text-align: center;}
#index main .about .ttlIndex h2 img { margin: 0 auto; padding: 0;}
/*#index main .about .ttlIndex h2 { font-family: 'Noto Serif JP', serif; color: #FFF; margin: -20px 0 0; padding: 0;}
#index main .about .ttlIndex h2 span:nth-of-type(1) { font-size: 104px; color: #005bac;}
#index main .about .ttlIndex h2 span:nth-of-type(2) { font-size: 61px;}
#index main .about .ttlIndex h2 span:nth-of-type(3) { font-size: 39px;}
#index main .about .ttlIndex h2 span:nth-of-type(4) { font-size: 74px;}*/
#index main .about ul { margin: 0; padding: 0; list-style: none;}
#index main .about ul li { width: 182px; float: left; margin: 0 22.5px 0 0;}
#index main .about ul li:last-child { margin: 0;}
#index main .about ul li a { color: #FFF; text-decoration: none; display: block;}
#index main .about ul li a h3 { margin: 0; text-align: center; font-size: 24px; margin: 0 0 25px; font-weight: normal;}
#index main .about ul li a h3 span { /*font-family: 'Ropa Sans', sans-serif;*/ font-family: "Times New Roman", Times, serif; font-size: 14px; display: block; margin: 0 0 25px;}
#index main .about ul li a p { margin: 0; font-size: 16px; margin: 0 0 25px;}
/*#index main .about ul li a img { filter: grayscale(100%); -webkit-filter: grayscale(100%);}
#index main .about ul li a:hover img { filter: grayscale(0%); -webkit-filter: grayscale(0%);}*/



#index main .works { text-align: center; margin: 0 0 145px; position: relative;}
#index main .works .ttlIndex { text-align: center; padding: 40px 0 50px;}
#index main .works .ttlIndex p { /*font-family: 'Ropa Sans', sans-serif; */ font-family: "Times New Roman", Times, serif; font-size: 17px; margin: 0; padding: 0; letter-spacing: 0.3em;}
#index main .works .ttlIndex h2 { margin: 10px 0 0; padding: 0; text-align: center;}
#index main .works .ttlIndex h2 img { margin: 0 auto; padding: 0;}
#index main .works ul { margin: 0; padding: 0; list-style: none;}
#index main .works ul li { float: left; width: 20%;}
#index main .works ul li img { width: 100%; height: auto;}
#index main .works .btn { position: absolute; bottom: -30px; left: 0; right: 0; margin: auto;}
#index main .works .btn a { display: inline-block; width: 410px; height: 54px; background: #005bac; border: solid 1px #005bac;color: #FFF; font-family: 'Noto Serif JP', serif; font-size: 22px; line-height: 54px; text-decoration: none; box-sizing: border-box;}
#index main .works .btn a:hover { border: solid 1px #005bac; background: #FFF; color: #005bac; box-sizing: border-box;}


#index main .info { margin: 0 0 135px; width: 100%;}
#index main .info h2 { display: table-cell; width: 300px; text-align: center; vertical-align: middle; border-right: solid 1px #000; padding: 30px 0; /*font-family: 'Ropa Sans', sans-serif;*/ font-family: "Times New Roman", Times, serif; font-size: 25px; font-weight: normal;}
#index main .info dl { display: table-cell; vertical-align: middle; padding: 0 50px; font-family: 'Noto Serif JP', serif; font-size: 20px;}
#index main .info dl dt { width: auto; float: left; padding: 5px 0;}
#index main .info dl dd { margin: 0 0 0 150px; padding: 5px 0;}
#index main .info dl dd a { text-decoration: none; color: #005bac;}
#index main .info .btn { text-align: right; margin: 50px 0 0 0;}
#index main .info .btn a { display: inline-block; width: 170px; height: 35px; background: #FFF; border: solid 1px #000; color: #000; font-family: 'Noto Serif JP', serif; font-size: 14px; line-height: 35px; text-decoration: none; box-sizing: border-box; text-align: center; font-style: italic;}
#index main .info .btn a:hover { background: #000; border: solid 1px #000; color: #FFF; box-sizing: border-box;}


#index main .recruit { margin: 0 0 75px;}
#index main .recruit .inbox { width: 100%;}
#index main .recruit .inbox .inboxL { display: table-cell; background: url(../images/index/recruitImg01.jpg) 0 0 repeat; width: 380px; padding: 0 30px; box-sizing: border-box;}
#index main .recruit .inbox .inboxL .ttlIndex { color: #FFF;}
#index main .recruit .inbox .inboxL .ttlIndex h2 { font-family: 'Noto Serif JP', serif; font-size: 50px; margin: 0 0 10px; padding: 0;}
#index main .recruit .inbox .inboxL .ttlIndex p { /*font-family: 'Ropa Sans', sans-serif;*/ font-family: "Times New Roman", Times, serif; font-size: 17px; margin: 0; padding: 0; letter-spacing: 0.1em;}
#index main .recruit .inbox .inboxL .btn {}
#index main .recruit .inbox .inboxL .btn a { display: inline-block; width: 170px; height: 35px; border: solid 1px #FFF; color: #FFF; font-family: 'Noto Serif JP', serif; font-size: 14px; line-height: 35px; text-decoration: none; box-sizing: border-box; text-align: center; font-style: italic;}
#index main .recruit .inbox .inboxL .btn a:hover { background: #FFF; border: solid 1px #FFF; color: #005bac; box-sizing: border-box;}
#index main .recruit .inbox .inboxR { display: table-cell;}


#index main .related { margin: 0 0 75px;}
#index main .related h2 { text-align: center; margin: 0 0 45px; letter-spacing: 0.2em; font-size: 22px;}
#index main .related h2::before { content: "["; margin: 0 0.5em;}
#index main .related h2::after { content: "]"; margin: 0 0.5em;}
#index main .related ul { margin: 0; padding: 0; list-style: none;}
#index main .related ul li { width: 480px; float: left;}
#index main .related ul li:nth-child(2n+1) { margin: 0 40px 0 0;}
#index main .related ul li a { display: block; width: 480px; border: solid 1px #000; padding: 10px; box-sizing: border-box; text-decoration: none; color: #FFF; position: relative;}
#index main .related ul li a .bg { text-align: center; font-family: 'Noto Serif JP', serif; height: 51px; line-height: 51px; font-size: 20px; background: rgba(0,0,0,0.6); position: absolute; bottom: 10px; left: 10px; right: 10px; margin: auto;}
#index main .related ul li a .bg span { display: inline-block; width: 78px; height: 26px; background: #FFF; color: #000; font-size: 14px; line-height: 26px; text-decoration: none; text-align: center; font-style: italic; margin: 0 0 0 20px;}


#index main .sale { margin: 0 0 80px;}
/*#index main .sale .inbox {}
#index main .sale .inbox a { display: block; text-decoration: none; color: #FFF;}
#index main .sale .inbox a .inboxL { display: table-cell;}
#index main .sale .inbox a .inboxR { display: table-cell; background: #000; text-align: center; width: 668px; font-family: 'Noto Serif JP', serif; vertical-align: middle;}
#index main .sale .inbox a .inboxR h2 { font-size: 27px; margin: 0; padding: 0;}
#index main .sale .inbox a .inboxR h2 span { font-size: 53px; margin: 0; padding: 0;}
#index main .sale .inbox a .inboxR p { text-align: center;}
#index main .sale .inbox a .inboxR .btn {}
#index main .sale .inbox a .inboxR .btn span { display: inline-block; width: 465px; height: 50px; line-height: 50px; font-size: 20px; border: solid 1px #FFF;}
#index main .sale .inbox a:hover .inboxR .btn span { border: solid 1px #FFF; background: #FFF; color: #000;}*/


#index main .sdgs { margin: 0 0 80px;}
	
	
#index main .safety_health { margin: 0 0 115px;}






.slider { margin: 0 0 50px; padding: 0;}
.slider img { width: 100%; height: auto; max-width: 100%; max-height: 100%; width: auto\9; /* ie8 */ margin: 0 auto;}
.single-item { max-width: 600px; margin: 0 auto 50px;}
.slick-prev::before, .slick-next::before { font-size: 24px;}
.lazy-item .slick-next,
.thumb-item-nav .slick-next,
.multiple-item .slick-next,
.center-item .slick-next { right: 20px; z-index: 99; }
.lazy-item .slick-prev,
.thumb-item-nav .slick-prev,
.multiple-item .slick-prev,
.center-item .slick-prev { left: 15px; z-index: 100;}
.single-item .slick-prev::before,
.single-item .slick-next::before { color: #666;}
.slick-dots { bottom:-25px;}
.multiple-item li { margin: 0 5px;}







}



/*sp*/
@media only screen and (max-width: 768px) {


header .sp .hedLogo01 { fill: #FFF;}
header .sp .hedLogoTxt01 { fill: #FFF;}
header .sp * { color: #FFF;}
header .sp * a { color: #FFF;}




.hideOverlay {
	background: #eee;
	position: fixed;
	z-index: 1000000;
}

.hideOverlay .symbolSet {
	position: absolute;
	width: 100%;
	text-align: center;
	top: 36%;
}

.hideOverlay .symbolSet .symbol {
	display: none;
}

.hideOverlay .symbolSet .catch {
	display: none;
	margin-top: 45px;
}

body {
	display: none;
}

is_disable{ display:none;}








#index header { position: absolute; z-index: 10; top: 0; left: 0; width: 100%;}
#index header .sp { background: none;}


#index { position: relative;}

/*.hed_slider { width:100%; position:relative;}*/

#index main #photograph { position: relative; width: 100%; height: 100vh; top: 0; left: 0; right: 0; margin: 0 0;}

#index main .about { padding: 50px 0 55px;}
#index main .about .ttlIndex { text-align: center; margin: 0 0 55px;}
#index main .about .ttlIndex p { /*font-family: 'Ropa Sans', sans-serif; */ font-family: "Times New Roman", Times, serif; font-size: 17px; margin: 0; padding: 0; letter-spacing: 0.3em; color: #FFF;}
#index main .about .ttlIndex h2 { margin: 10px 0 0; padding: 0; text-align: center;}
#index main .about .ttlIndex h2 img { margin: 0 auto; padding: 0; width: auto;}
/*#index main .about .ttlIndex h2 { font-family: 'Noto Serif JP', serif; color: #FFF; margin: -20px 0 0; padding: 0;}
#index main .about .ttlIndex h2 span:nth-of-type(1) { font-size: 104px; color: #005bac;}
#index main .about .ttlIndex h2 span:nth-of-type(2) { font-size: 61px;}
#index main .about .ttlIndex h2 span:nth-of-type(3) { font-size: 39px;}
#index main .about .ttlIndex h2 span:nth-of-type(4) { font-size: 74px;}*/
#index main .about ul { margin: 0 10%; padding: 0; list-style: none;}
#index main .about ul li { width: 100%; float: none; margin: 0 0 5% 0;}
#index main .about ul li:last-child { margin: 0;}
#index main .about ul li a { color: #FFF; text-decoration: none; display: block; width: 100%; height: 50px; overflow: hidden; position: relative; padding: 10px 0;}
#index main .about ul li a h3 { position: absolute; z-index: 20; width: 100%; margin: 0; text-align: center; font-size: 18px; margin: 0 0 0; font-weight: normal;}
#index main .about ul li a h3 span { /*font-family: 'Ropa Sans', sans-serif;*/ font-family: "Times New Roman", Times, serif; font-size: 12px; display: block; margin: 0 0 1%;}
#index main .about ul li a h3 img { width: auto; position: absolute; top: 120%; left: 0; right: 0; margin: auto;}
#index main .about ul li a p { display: none;}
#index main .about ul li a > img { display: none;}
/*#index main .about ul li a img { position: absolute; width: 100%; height: auto; top: -45%; left: 0;}*/

#index main .about ul li:nth-of-type(1) a { background: url(../images/index/aboutImgSp01_off.jpg) 0 0 no-repeat; background-size: cover; }
#index main .about ul li:nth-of-type(2) a { background: url(../images/index/aboutImgSp02_off.jpg) 0 0 no-repeat; background-size: cover; }
#index main .about ul li:nth-of-type(3) a { background: url(../images/index/aboutImgSp03_off.jpg) 0 0 no-repeat; background-size: cover; }
#index main .about ul li:nth-of-type(4) a { background: url(../images/index/aboutImgSp04_off.jpg) 0 0 no-repeat; background-size: cover; }
#index main .about ul li:nth-of-type(5) a { background: url(../images/index/aboutImgSp05_off.jpg) 0 0 no-repeat; background-size: cover; }

#index main .about ul li:nth-of-type(1) a:hover { background: url(../images/index/aboutImgSp01_on.jpg) 0 0 no-repeat; background-size: cover; }
#index main .about ul li:nth-of-type(2) a:hover { background: url(../images/index/aboutImgSp02_on.jpg) 0 0 no-repeat; background-size: cover; }
#index main .about ul li:nth-of-type(3) a:hover { background: url(../images/index/aboutImgSp03_on.jpg) 0 0 no-repeat; background-size: cover; }
#index main .about ul li:nth-of-type(4) a:hover { background: url(../images/index/aboutImgSp04_on.jpg) 0 0 no-repeat; background-size: cover; }
#index main .about ul li:nth-of-type(5) a:hover { background: url(../images/index/aboutImgSp05_on.jpg) 0 0 no-repeat; background-size: cover; }




#index main .works { text-align: center; margin: 0 0 145px; position: relative;}
#index main .works .ttlIndex { text-align: center; padding: 40px 0 50px;}
#index main .works .ttlIndex p { /*font-family: 'Ropa Sans', sans-serif;*/ font-family: "Times New Roman", Times, serif; font-size: 17px; margin: 0; padding: 0; letter-spacing: 0.3em;}
#index main .works .ttlIndex h2 { margin: 10px 0 0; padding: 0; text-align: center;}
#index main .works .ttlIndex h2 img { margin: 0 auto; padding: 0; width: auto;}
#index main .works ul { margin: 0; padding: 0; list-style: none;}
#index main .works ul li { float: left; width: 33.3333%;}
#index main .works ul li:nth-of-type(4) { display: none;}
#index main .works ul li:nth-of-type(5) { display: none;}
#index main .works ul li img { width: 100%; height: auto;}
#index main .works .btn { position: absolute; bottom: -30px; left: 0; right: 0; margin: auto;}
#index main .works .btn a { display: inline-block; width: 80%; height: 54px; background: #005bac; border: solid 1px #005bac;color: #FFF; font-family: 'Noto Serif JP', serif; font-size: 18px; line-height: 54px; text-decoration: none; box-sizing: border-box;}
#index main .works .btn a:hover { border: solid 1px #005bac; background: #FFF; color: #005bac; box-sizing: border-box;}


#index main .info { margin: 0 0 15%; width: 100%;}
#index main .info h2 { display: block; width: auto; text-align: center; vertical-align: middle; border-right: none; padding: 2% 0; /*font-family: 'Ropa Sans', sans-serif;*/ font-family: "Times New Roman", Times, serif; font-size: 25px; font-weight: normal;}
#index main .info dl { display: block; vertical-align: middle; padding: 0 2%; font-family: 'Noto Serif JP', serif; font-size: 16px;}
#index main .info dl dt { width: auto; float: left; padding: 5px 0;}
#index main .info dl dd { margin: 0 0 0 100px; padding: 5px 0;}
#index main .info dl dd a { text-decoration: none; color: #005bac;}
#index main .info .btn { text-align: center; margin: 50px 0 0 0;}
#index main .info .btn a { display: inline-block; width: 170px; height: 35px; background: #FFF; border: solid 1px #000; color: #000; font-family: 'Noto Serif JP', serif; font-size: 14px; line-height: 35px; text-decoration: none; box-sizing: border-box; text-align: center; font-style: italic;}
#index main .info .btn a:hover { background: #000; border: solid 1px #000; color: #FFF; box-sizing: border-box;}


#index main .recruit { margin: 0 0 15%;}
#index main .recruit .inbox { width: 100%;}
#index main .recruit .inbox .inboxL { display: block; background: url(../images/index/recruitImg01.jpg) 0 0 repeat; width: 380px; padding: 0 30px; box-sizing: border-box;}
#index main .recruit .inbox .inboxL .ttlIndex { color: #FFF;}
#index main .recruit .inbox .inboxL .ttlIndex h2 { font-family: 'Noto Serif JP', serif; font-size: 50px; margin: 0 0 10px; padding: 0;}
#index main .recruit .inbox .inboxL .ttlIndex p { /*font-family: 'Ropa Sans', sans-serif;*/ font-family: "Times New Roman", Times, serif; font-size: 17px; margin: 0; padding: 0; letter-spacing: 0.1em;}
#index main .recruit .inbox .inboxL .btn {}
#index main .recruit .inbox .inboxL .btn a { display: inline-block; width: 170px; height: 35px; border: solid 1px #FFF; color: #FFF; /*font-family: 'Noto Serif JP', serif;*/ font-family: "Times New Roman", Times, serif; font-size: 14px; line-height: 35px; text-decoration: none; box-sizing: border-box; text-align: center; font-style: italic;}
#index main .recruit .inbox .inboxL .btn a:hover { background: #FFF; border: solid 1px #FFF; color: #005bac; box-sizing: border-box;}
#index main .recruit .inbox .inboxR { display: block;}


#index main .related { margin: 0 0 10%;}
#index main .related h2 { text-align: center; margin: 0 0 45px; letter-spacing: 0.2em; font-size: 22px;}
#index main .related h2::before { content: "["; margin: 0 0.5em;}
#index main .related h2::after { content: "]"; margin: 0 0.5em;}
#index main .related ul { margin: auto; padding: 0; list-style: none;}
#index main .related ul li { width: 90%; float: none; margin: 0 auto 5%;}
#index main .related ul li:nth-child(2n+1) { margin: 0 auto 2%;}
#index main .related ul li a { display: block;/* max-width: 480px;*/ border: solid 1px #000; padding: 10px; box-sizing: border-box; text-decoration: none; color: #FFF; position: relative;}
#index main .related ul li a .bg { text-align: center; font-family: 'Noto Serif JP', serif; height: 51px; line-height: 51px; font-size: 16px; background: rgba(0,0,0,0.6); position: absolute; bottom: 10px; left: 10px; right: 10px; margin: auto;}
#index main .related ul li a .bg span { display: inline-block; width: 78px; height: 26px; background: #FFF; color: #000; font-size: 12px; line-height: 26px; text-decoration: none; text-align: center; font-style: italic; margin: 0 0 0 20px;}
#index main .related ul li a img { width: 100%;}


#index main .sale { margin: 0 0 80px;}
/*#index main .sale .inbox {}
#index main .sale .inbox a { display: block; text-decoration: none; color: #FFF;}
#index main .sale .inbox a .inboxL { display: table-cell;}
#index main .sale .inbox a .inboxR { display: table-cell; background: #000; text-align: center; width: 668px; font-family: 'Noto Serif JP', serif; vertical-align: middle;}
#index main .sale .inbox a .inboxR h2 { font-size: 27px; margin: 0; padding: 0;}
#index main .sale .inbox a .inboxR h2 span { font-size: 53px; margin: 0; padding: 0;}
#index main .sale .inbox a .inboxR p { text-align: center;}
#index main .sale .inbox a .inboxR .btn {}
#index main .sale .inbox a .inboxR .btn span { display: inline-block; width: 465px; height: 50px; line-height: 50px; font-size: 20px; border: solid 1px #FFF;}
#index main .sale .inbox a:hover .inboxR .btn span { border: solid 1px #FFF; background: #FFF; color: #000;}*/


#index main .sdgs { margin: 0 0 80px;}
#index main .safety_health { margin: 0 0 115px;}





.slider { margin: 0 0 50px; padding: 0;}
.slider li { overflow: hidden; position: relative; height: 450px;}
.slider img { position: absolute; left: 50%; transform: translate(-50%,0); -webkit-transform: translate(-50%,0); -moz-transform: translate(-50%,0); -ms-transform: translate(-50%,0); -o-transform: translate(-50%,0); width: auto; height: 450px; max-width: inherit; max-height: inherit; width: auto\9; /* ie8 */ margin: 0 auto;}
.single-item { max-width: 600px; margin: 0 auto 50px;}
.slick-prev::before, .slick-next::before { font-size: 24px;}
.lazy-item .slick-next,
.thumb-item-nav .slick-next,
.multiple-item .slick-next,
.center-item .slick-next { right: 20px; z-index: 99; }
.lazy-item .slick-prev,
.thumb-item-nav .slick-prev,
.multiple-item .slick-prev,
.center-item .slick-prev { left: 15px; z-index: 100;}
.single-item .slick-prev::before,
.single-item .slick-next::before { color: #666;}
.slick-dots { bottom:-25px;}
.multiple-item li { margin: 0 5px;}




}