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

@import url("roopani.css");


@-webkit-keyframes moveScrollPointer {
0% {
-webkit-transform:translate3d(0, 0, 0);
transform:translate3d(0, 0, 0)
}
100% {
-webkit-transform:translate3d(0, 50px, 0);
transform:translate3d(0, 50px, 0)
}
}
@keyframes moveScrollPointer {
0% {
-webkit-transform:translate3d(0, 0, 0);
transform:translate3d(0, 0, 0)
}
100% {
-webkit-transform:translate3d(0, 50px, 0);
transform:translate3d(0, 50px, 0)
}
}
@-webkit-keyframes scrollPointerInOut {
0% {
-webkit-transform:scale(0);
transform:scale(0)
}
10% {
-webkit-transform:scale(1);
transform:scale(1)
}
60% {
-webkit-transform:scale(1);
transform:scale(1)
}
100% {
-webkit-transform:scale(0);
transform:scale(0)
}
}
@keyframes scrollPointerInOut {
0% {
-webkit-transform:scale(0);
transform:scale(0)
}
10% {
-webkit-transform:scale(1);
transform:scale(1)
}
60% {
-webkit-transform:scale(1);
transform:scale(1)
}
100% {
-webkit-transform:scale(0);
transform:scale(0)
}
}
@-webkit-keyframes moveScrollPointer {
0% {
-webkit-transform:translate3d(0, 0, 0);
transform:translate3d(0, 0, 0)
}
100% {
-webkit-transform:translate3d(0, 70px, 0);
transform:translate3d(0, 70px, 0)
}
}
@keyframes moveScrollPointer {
0% {
-webkit-transform:translate3d(0, 0, 0);
transform:translate3d(0, 0, 0)
}
100% {
-webkit-transform:translate3d(0, 70px, 0);
transform:translate3d(0, 70px, 0)
}
}
@-webkit-keyframes scrollPointerInOut {
0% {
-webkit-transform:scale(0);
transform:scale(0)
}
10% {
-webkit-transform:scale(1);
transform:scale(1)
}
60% {
-webkit-transform:scale(1);
transform:scale(1)
}
100% {
-webkit-transform:scale(0);
transform:scale(0)
}
}
@keyframes scrollPointerInOut {
0% {
-webkit-transform:scale(0);
transform:scale(0)
}
10% {
-webkit-transform:scale(1);
transform:scale(1)
}
60% {
-webkit-transform:scale(1);
transform:scale(1)
}
100% {
-webkit-transform:scale(0);
transform:scale(0)
}
}



.slick-slide.js-moving .slider-img {
-webkit-animation: bgZoomOutAnime 7s ease-out forwards;
animation: bgZoomOutAnime 7s ease-out forwards;
}

@-webkit-keyframes bgZoomOutAnime {
0% {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes bgZoomOutAnime {
0% {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@-webkit-keyframes bgZoomInAnime {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
}
@keyframes bgZoomInAnime {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
}


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

/* l-main__visual============================================== */
.l-main__visual{
width: 100%;
height:95vh;
margin: 0 auto 0;
position: relative;
background-color: #eaeef2;
z-index:0;
overflow: hidden;
}
.l-main__body{
width: 100%;
height: 100vh;
margin: 0 auto 0;
position:relative;
z-index:1;
}
.l-main__body-inner {
width: 100%;
height:100vh;
position: relative;
display: flex;
}

/*l-main__meta*/
.l-main__meta {
width: 100%;
padding: 0 0 0 3%;
position: absolute;
top: 32%;
z-index:3;
box-sizing: border-box;
}

.l-main__meta h2{
width: 50%;
margin: 0 0 20px;
}

.l-main__meta p{
font-size: 14px;
line-height: 2;
color: #FFF;
}

/*l-main__slide*/
.l-main__slide {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
background-color: #1c1c1c;
z-index:0;
}
.l-main__slide-inner {
position:relative;
z-index: 1;
}
.l-main__slide .slider-unit {
width: 100%;
height: 100%;
}
.l-main__slide .slider-unit .slide-item {
width: 0;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 0;
outline: 0px none #000;
overflow: hidden;
}
.l-main__slide .slider-unit .slide-item .slide-img {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100%;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
.l-main__slide .slider-unit .slide-item .slide-img > span {
width: calc(100% + 100px);
height: 100%;
-webkit-background-size: cover;
background-size: cover;
background-position: 50% 50%;
position: absolute;
top: 0;
right: 0;
-webkit-transform: translateX(100px);
transform: translateX(100px);
outline: 0px none #000;
}
.l-main__slide .slider-unit .slide-item .slide-img > span.slide-pc {
display: block;
}
.l-main__slide .slider-unit .slide-item .slide-img > span.slide-sp {
display: none;
}
.l-main__slide .slider-unit .slide-item.is-active {
-webkit-transition: width 1.5s cubic-bezier(0.09, 0.34, 0.63, 1);
transition: width 1.5s cubic-bezier(0.09, 0.34, 0.63, 1);
width: 100vw;
}
.l-main__slide .slider-unit .slide-item.is-active .slide-img > span {
-webkit-transition: -webkit-transform 5s linear;
transition: -webkit-transform 7s linear;
transition: transform 7s linear;
transition: transform 7s linear, -webkit-transform 7s linear;
-webkit-transform: translateX(0);
transform: translateX(0);
}
.l-main__slide .slider-navi {
list-style: none;
padding: 0;
position: absolute;
right: 20px;
position: absolute;
top: 38%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
z-index: 3;
}
.l-main__slide .slider-navi li {
width: 36px;
height: 36px;
cursor: pointer;
position: relative;
line-height: 1;
margin-bottom: 6px;
color: #FFF;
}
.l-main__slide .slider-navi li:after {
position:absolute;
content:'';
font-size: 1.1rem;
left:-100px;
top:13px;
font-weight: normal;
text-align: right;
opacity:.6;
}
.l-main__slide .slider-navi li:last-child {
margin:0;
}
.l-main__slide .slider-navi li:before {
width: 7px;
height: 7px;
position: relative;
line-height: 1;
border-radius: 50%;
background-color:#FFF;
position:absolute;
content:'';
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
opacity:.6;
}
.l-main__slide .slider-navi li.is-current:before,
.l-main__slide .slider-navi li.is-current:after {
opacity:1;
}
.l-main__slide .slider-navi li svg {
width: 100%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.l-main__slide .slider-navi li svg .circle {
fill: none;
stroke: #fff;
stroke-width: 1px;
stroke-linecap: round;
stroke-dashoffset: 246;
stroke-dasharray: 82 82;
}
.slide-common {
display: none;
}



/* business
--------------------------------------------*/
#business {
margin: 120px 0 120px 140px;
}

#business .business_wrap {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
flex-direction: row-reverse;
margin: 0 0 60px;
}

#business .business_wrap_box1 {
width: 50%;
position: relative;
}

#business .business_wrap_box2 {
width: 50%;
position: relative;
padding-right: 80px;
box-sizing: border-box;
}

#business .business_wrap_box1 .tit_txt{
font-family:'Chakra Petch', sans-serif;
font-weight: 700;
font-size: 7.5em;
line-height: 1;
display: inline-block;
overflow: hidden;
position: relative;
}


#business .flex_wrap .imgBox {
width: 100vw;
}

#business .flex_wrap .imgBox .box04_slider .box04_slider_box{
margin: 0;
}

#business .box04_slider_box a{
position: relative;
}

#business .box04_slider_box a .g_logo{
position: absolute;
top: 30px;
left: 10px;
width: 200px;
z-index: 1;
}

#business .box04_slider_box .txt_box{
padding: 0 17px 0;
box-sizing: border-box;
position: relative;
}

#business .box04_slider_box .txt_box .color_sakurai {
font-size: 1.2em;
font-style: italic;
font-weight: 900;
line-height:1.2;
background: #f0831e;
color: #000;
margin: 0 0 5px;
padding:10px 20px 10px 10px;
box-sizing: border-box;
display: block;
position: relative;
margin-top: -20px;
z-index: 3;
width: 96%;
}

#business .box04_slider_box .txt_box .color_sakurai::before {
content: '';
position: absolute;
right: 0;
top: 0;
transform: skewX( -25deg );
transform-origin: bottom right;
z-index:1;
width: 12%;
height: 100%;
background: #f0831e;
}


#business .box04_slider_box .txt_box .color_f_ami {
font-size: 1.2em;
font-style: italic;
font-weight: 900;
line-height:1.2;
background: #f3c71d;
color: #000;
margin: 0 0 5px;
padding:10px 20px 10px 10px;
box-sizing: border-box;
display: block;
position: relative;
margin-top: -20px;
z-index: 3;
width: 96%;
}

#business .box04_slider_box .txt_box .color_f_ami::before {
content: '';
position: absolute;
right: 0;
top: 0;
transform: skewX( -25deg );
transform-origin: bottom right;
z-index:1;
width: 12%;
height: 100%;
background: #f3c71d;
}

#business .box04_slider_box .txt_box .color_lena_c {
font-size: 1.2em;
font-style: italic;
font-weight: 900;
line-height:1.2;
background: #0054a7;
color: #000;
margin: 0 0 5px;
padding:10px 20px 10px 10px;
box-sizing: border-box;
display: block;
position: relative;
margin-top: -20px;
z-index: 3;
width: 96%;
}

#business .box04_slider_box .txt_box .color_lena_c::before {
content: '';
position: absolute;
right: 0;
top: 0;
transform: skewX( -25deg );
transform-origin: bottom right;
z-index:1;
width: 12%;
height: 100%;
background: #0054a7;
}

#business .box04_slider_box .txt_box .color_moe_i {
font-size: 1.2em;
font-style: italic;
font-weight: 900;
line-height:1.2;
background: #4aae71;
color: #000;
margin: 0 0 5px;
padding:10px 20px 10px 10px;
box-sizing: border-box;
display: block;
position: relative;
margin-top: -20px;
z-index: 3;
width: 96%;
}

#business .box04_slider_box .txt_box .color_moe_i::before {
content: '';
position: absolute;
right: 0;
top: 0;
transform: skewX( -25deg );
transform-origin: bottom right;
z-index:1;
width: 12%;
height: 100%;
background: #4aae71;
}

#business .box04_slider_box .txt_box .color_48 {
font-size: 1.2em;
font-style: italic;
font-weight: 900;
line-height:1.2;
background: #FFF;
color: #000;
margin: 0 0 5px;
padding:10px 20px 10px 10px;
box-sizing: border-box;
display: block;
position: relative;
margin-top: -20px;
z-index: 3;
width: 96%;
}

#business .box04_slider_box .txt_box .color_48::before {
content: '';
position: absolute;
right: 0;
top: 0;
transform: skewX( -25deg );
transform-origin: bottom right;
z-index:1;
width: 12%;
height: 100%;
background: #FFF;
}


#business .box04_slider_box .txt_box h3 span{
display:block;
}

#business .box04_slider_box .txt_box h4 {
font-size: 1em;
font-weight: 700;
line-height:1.2;
color: #FFF;
margin: 0 0 10px;
padding:10px 0;
box-sizing: border-box;
}

#business .box04_slider_box .txt_box h4 span{
font-family: 'Chakra Petch', sans-serif;
font-weight: 700;
font-size: 1.6em;
display: block;
}


#business .box04_slider .box04_slider_box p{
font-size: 0.9em;
font-weight: 500;
line-height: 1.8;
}


#business .slick-slide img{
width: 100%;
height: auto;
}


/* quality
--------------------------------------------*/
#quality .idx_wrap {
position: relative;
background: #141414;
padding: 5rem 0 5rem 0;
margin: 0 auto;
}



#quality .idx_wrap::before {
content: '';
background:#000;
background-size: 100% auto;
width: 50%;
height: 100%;
position: absolute;
top: 0;
right: 0;
}

#quality .innerDX1400 {
margin: 0 auto;
padding: 0 6.25% 0px;
box-sizing: content-box;
}

#quality .flex_wrap {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 0;
align-items: center;
}

#quality .flex_wrap .leftBox {
position: relative;
width: 50%;
margin-bottom: 0;
padding-left: 8%;
box-sizing: border-box;
}


#quality .flex_wrap .rightBox {
position: relative;
width: 50%;
margin-bottom: 0;
padding-left: 4%;
padding-right: 8%;
box-sizing: border-box;
}

#quality .flex_wrap .rightBox .objectText {
font-family:'Chakra Petch', sans-serif;
font-weight: 700;
font-size: 7.5em;
line-height: 0.8;
box-sizing: border-box;
display: inline-block;
overflow: hidden;
position: relative;
}

#quality .flex_wrap .rightBox .mIn {
position: relative;
box-sizing: border-box;
}

#quality .flex_wrap .rightBox .mIn h3{
font-size: 1.6em;
line-height: 2;
margin: 30px 0 30px;
}

#quality .flex_wrap .rightBox .mIn p{
margin: 0 0 50px;
}





/* thought
--------------------------------------------*/
#thought {
margin: 120px 0 120px;
}

#thought .thought_wrap_bg {
background: #FFF;
padding: 60px 0 0 140px;
box-sizing: border-box;
}

#thought .thought_wrap {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
margin: 0 0 60px;
}

#thought .thought_wrap_box1 {
width: 48%;
position: relative;
}


#thought .thought_wrap_box1 .tit_txt{
font-family:'Chakra Petch', sans-serif;
font-weight: 700;
font-size: 7.5em;
line-height: 1;
display: inline-block;
overflow: hidden;
position: relative;
color: #000;
}

#thought .thought_wrap_box2 {
width: 46%;
position: relative;
padding-left: 4%;
box-sizing: border-box;
padding-right: 60px;
color: #000;
}

#thought .thought_wrap_box2 .read_tit{
font-size: 1.6em;
font-weight: 700;
margin: 0 0 30px;
}

#thought .thought_wrap_box2 .read_txt{
margin: 0 0 60px;
}

#thought .thought_wrap_box2 .more{
text-align: right;
padding-right: 30px;
box-sizing: border-box;
}

#thought .thought_wrap_box2 .more a span{
color: #000 !important;
}
#thought .thought_wrap_box2 .more a span::after {
background: #000;
}

#thought .imgBox {
}



/* groups
--------------------------------------------*/
#groups .idx_wrap {
margin: 8rem auto 8rem;
}

#groups .idx_wrap .innerDX1400{
max-width: 1400px;
margin: 0 auto;
padding: 0 6.25% 0px;
box-sizing: content-box;
}

#groups .flex_wrap {
position: relative;
}

#groups .textBox {
width: 50%;
position: absolute;
top: 50%;
left: 0;
transform: translate(0, -50%);
}

#groups .textBox .innerBox{
background: #000;
padding: 0 5rem;
}

#groups .textBox .innerBox h3{
font-family: 'Chakra Petch', sans-serif;
font-weight: 700;
font-size: 7.5em;
margin: 0 0 20px;
display: inline-block;
overflow: hidden;
position: relative;
line-height: 1;
}

#groups .textBox .innerBox h4{
font-size: 1.6em;
font-weight: 700;
margin: 0 0 30px;
}

#groups .textBox .innerBox p{
margin: 0 0 50px;
}

#groups .textBox .innerBox p span{
display: block;
padding-top: 20px;
font-size: 0.8em;
}

#groups .imgBox {
width: 60%;
position: relative;
margin-left: auto;
padding-left: 20%;
z-index: -1;
}



/* sustainability
--------------------------------------------*/
#sustainability {
background: #1c1c1c;
}
#sustainability .idx_wrap {
position: relative;
padding: 8rem 0;
margin: 0 auto;
}

#sustainability .idx_wrap .innerDX1400{
margin: 0 auto;
padding: 0 6.25% 0px;
box-sizing: content-box;
}

#sustainability .flex_wrap {
position: relative;
}

#sustainability .textBox {
width: 50%;
position: absolute;
top: 50%;
right: 0;
transform: translate(0, -50%);
z-index: 1;
}

#sustainability .textBox .innerBox{
background: #000;
padding: 5rem 5rem;
}

#sustainability .textBox .innerBox h3{
font-family: 'Chakra Petch', sans-serif;
font-weight: 700;
font-size: 7.5em;
margin: 0 0 20px;
display: inline-block;
overflow: hidden;
position: relative;
line-height: 1;
}

#sustainability .textBox .innerBox h4{
font-size: 1.6em;
font-weight: 700;
margin: 0 0 30px;
}

#sustainability .textBox .innerBox p{
margin: 0 0 50px;
}

#sustainability .textBox .innerBox p span{
display: block;
padding-top: 20px;
font-size: 0.8em;
}

#sustainability .imgBox {
width: 60%;
position: relative;
margin-right: auto;
padding-right: 20%;
}



/* recruit
--------------------------------------------*/
#recruit .flex_wrap{
position: relative;
background: url("../images/index/recruit_img.jpg") center center no-repeat;
background-size: cover;
padding: 80px 0;
box-sizing: border-box;
margin: 0 0 120px;
text-align: center;
}

#recruit .flex_wrap h3{
font-family: 'Chakra Petch', sans-serif;
font-weight: 700;
font-size: 7.5em;
margin: 0 0 20px;
display: inline-block;
overflow: hidden;
position: relative;
line-height: 1;

}

#recruit .flex_wrap h4{
font-size: 1.6em;
font-weight: 700;
margin: 0 0 30px;
}


#recruit .flex_wrap p{
font-size: 0.8em;
margin: 0 0 50px;
}

#recruit .flex_wrap .more{
margin-left: -30px;
}

/* news
--------------------------------------------*/
#news {
background: #FFF;
padding: 60px 0;
box-sizing: border-box;
}


#news .innerDX1000{
max-width: 1000px;
margin: 0 auto 8rem;
padding: 0 6.25% 0px;
box-sizing: border-box;
}

#news .innerDX1000 h3{
font-family: 'Chakra Petch', sans-serif;
font-weight: 700;
font-size: 7.5em;
margin: 0 0 20px;
display: inline-block;
overflow: hidden;
position: relative;
line-height: 1;
color: #000;
}

#news .innerDX1000 h3 span{
font-size: 1.6em;
display: block;
padding-bottom: 10px;
}

#news .news_wrap {
margin-top: 30px;
height: 260px;
overflow-y: auto;
}

#news .news_wrap li{
border-top:1px solid #1F1F1F;
padding: 10px;
color: #000;
}

#news .news_wrap li .news_date{
width: 120px;
font-size: 16px;
font-family: 'Chakra Petch', sans-serif;
letter-spacing: .05em;
line-height: 24px;
font-weight: 500;
font-style: normal;
margin: 0 0 10px;
}

#news .news_wrap li .news_title{
font-size: 14px;
}

}


/*sp*/
@media only screen and (max-width: 768px) {
/* l-main__visual============================================== */
.l-main__visual{
width: 100%;
height:100vh;
margin: 0 auto 0;
position: relative;
background-color: #eaeef2;
z-index:0;
overflow: hidden;
}
.l-main__body{
width: 100%;
height: 100vh;
margin: 0 auto 0;
position:relative;
z-index:1;
}
.l-main__body-inner {
width: 100%;
height:100vh;
position: relative;
display: flex;
}

/*l-main__meta*/
.l-main__meta {
width: 100%;
padding: 0 0 0 3%;
position: absolute;
bottom: 16%;
z-index:3;
box-sizing: border-box;
}

.l-main__meta h2{
width: 90%;
margin: 0 0 20px;
}

.l-main__meta p{
font-size: 12px;
line-height: 1.6;
color: #FFF;
}

/*l-main__slide*/
.l-main__slide {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
background-color: #1c1c1c;
z-index:0;
}
.l-main__slide-inner {
position:relative;
z-index: 1;
}
.l-main__slide .slider-unit {
width: 100%;
height: 100%;
}
.l-main__slide .slider-unit .slide-item {
width: 0;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 0;
outline: 0px none #000;
overflow: hidden;
}
.l-main__slide .slider-unit .slide-item .slide-img {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100%;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
.l-main__slide .slider-unit .slide-item .slide-img > span {
width: calc(100% + 100px);
height: 100%;
-webkit-background-size: cover;
background-size: cover;
background-position: 50% 50%;
position: absolute;
top: 0;
right: 0;
-webkit-transform: translateX(100px);
transform: translateX(100px);
outline: 0px none #000;
}
.l-main__slide .slider-unit .slide-item .slide-img > span.slide-pc {
display: block;
}
.l-main__slide .slider-unit .slide-item .slide-img > span.slide-sp {
display: none;
}
.l-main__slide .slider-unit .slide-item.is-active {
-webkit-transition: width 1.5s cubic-bezier(0.09, 0.34, 0.63, 1);
transition: width 1.5s cubic-bezier(0.09, 0.34, 0.63, 1);
width: 100vw;
}
.l-main__slide .slider-unit .slide-item.is-active .slide-img > span {
-webkit-transition: -webkit-transform 5s linear;
transition: -webkit-transform 7s linear;
transition: transform 7s linear;
transition: transform 7s linear, -webkit-transform 7s linear;
-webkit-transform: translateX(0);
transform: translateX(0);
}
.l-main__slide .slider-navi {
list-style: none;
padding: 0;
position: absolute;
right: 20px;
bottom:1%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
z-index: 3;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.l-main__slide .slider-navi li {
width: 36px;
height: 36px;
cursor: pointer;
position: relative;
line-height: 1;
margin-bottom: 6px;
color: #FFF;
}
.l-main__slide .slider-navi li:after {
position:absolute;
content:'';
font-size: 1.1rem;
left:-100px;
top:13px;
font-weight: normal;
text-align: right;
opacity:.6;
}
.l-main__slide .slider-navi li:last-child {
margin:0;
}
.l-main__slide .slider-navi li:before {
width: 7px;
height: 7px;
position: relative;
line-height: 1;
border-radius: 50%;
background-color:#FFF;
position:absolute;
content:'';
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
opacity:.6;
}
.l-main__slide .slider-navi li.is-current:before,
.l-main__slide .slider-navi li.is-current:after {
opacity:1;
}
.l-main__slide .slider-navi li svg {
width: 100%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.l-main__slide .slider-navi li svg .circle {
fill: none;
stroke: #fff;
stroke-width: 1px;
stroke-linecap: round;
stroke-dashoffset: 246;
stroke-dasharray: 82 82;
}
.slide-common {
display: none;
}



/* business
--------------------------------------------*/
#business {
width: 90%;
margin: 60px auto 60px;
}

#business .business_wrap {
margin: 0 0 30px;
}

#business .business_wrap_box1 {
width: 100%;
position: relative;
margin: 0 0 20px;
}

#business .business_wrap_box2 {
width: 100%;
position: relative;
}

#business .business_wrap_box1 .tit_txt{
font-family:'Chakra Petch', sans-serif;
font-weight: 700;
font-size:3em;
line-height: 1;
display: inline-block;
overflow: hidden;
position: relative;
}


#business .flex_wrap .imgBox {
width: 100vw;
}

#business .flex_wrap .imgBox .box04_slider .box04_slider_box{
margin: 0;
}

#business .box04_slider_box a{
position: relative;
}

#business .box04_slider_box a .g_logo{
position: absolute;
top: 25px;
left: 10px;
width: 100px;
z-index: 1;
}

#business .box04_slider_box .txt_box{
padding:0;
box-sizing: border-box;
position: relative;
}

#business .box04_slider_box .txt_box .color_sakurai {
width: 90%;
font-size: 1em;
font-weight: 900;
line-height:1.2;
background: #ef821d;
color: #000;
margin: 0 0 5px;
padding: 5px;
box-sizing: border-box;
display: block;
position: relative;
margin-top: -20px;
z-index: 3;
}


#business .box04_slider_box .txt_box .color_sakurai::before {
content: '';
position: absolute;
right: 0;
top: 0;
transform: skewX( -25deg );
transform-origin: bottom right;
z-index:1;
width: 10%;
height: 100%;
background: #ef821d;
}

#business .box04_slider_box .txt_box .color_f_ami {
width: 90%;
font-size: 1em;
font-weight: 900;
line-height:1.2;
background: #f3c71d;
color: #000;
margin: 0 0 5px;
padding: 5px;
box-sizing: border-box;
display: block;
position: relative;
margin-top: -20px;
z-index: 3;
}


#business .box04_slider_box .txt_box .color_f_ami::before {
content: '';
position: absolute;
right: 0;
top: 0;
transform: skewX( -25deg );
transform-origin: bottom right;
z-index:1;
width: 10%;
height: 100%;
background: #f3c71d;
}

#business .box04_slider_box .txt_box .color_moe_i {
width: 90%;
font-size: 1em;
font-weight: 900;
line-height:1.2;
background: #4aae71;
color: #000;
margin: 0 0 5px;
padding: 5px;
box-sizing: border-box;
display: block;
position: relative;
margin-top: -20px;
z-index: 3;
}


#business .box04_slider_box .txt_box .color_moe_i::before {
content: '';
position: absolute;
right: 0;
top: 0;
transform: skewX( -25deg );
transform-origin: bottom right;
z-index:1;
width: 10%;
height: 100%;
background: #4aae71;
}

#business .box04_slider_box .txt_box .color_lena_c {
width: 90%;
font-size: 1em;
font-weight: 900;
line-height:1.2;
background: #0054a7;
color: #000;
margin: 0 0 5px;
padding: 5px;
box-sizing: border-box;
display: block;
position: relative;
margin-top: -20px;
z-index: 3;
}


#business .box04_slider_box .txt_box .color_lena_c::before {
content: '';
position: absolute;
right: 0;
top: 0;
transform: skewX( -25deg );
transform-origin: bottom right;
z-index:1;
width: 10%;
height: 100%;
background: #0054a7;
}

#business .box04_slider_box .txt_box .color_48 {
width: 90%;
font-size: 1em;
font-weight: 900;
line-height:1.2;
background: #FFF;
color: #000;
margin: 0 0 5px;
padding: 5px;
box-sizing: border-box;
display: block;
position: relative;
margin-top: -20px;
z-index: 3;
}


#business .box04_slider_box .txt_box .color_48::before {
content: '';
position: absolute;
right: 0;
top: 0;
transform: skewX( -25deg );
transform-origin: bottom right;
z-index:1;
width: 10%;
height: 100%;
background: #FFF;
}

#business .box04_slider_box .txt_box h3 span{
display:block;
}

#business .box04_slider_box .txt_box h4 {
font-size: 0.8em;
font-weight: 700;
line-height:1.2;
color: #FFF;
margin: 0 0 10px;
padding:6px 0;
box-sizing: border-box;
}

#business .box04_slider_box .txt_box h4 span{
font-family: 'Chakra Petch', sans-serif;
font-weight: 700;
font-size: 1.6em;
display: block;
}


#business .box04_slider .box04_slider_box p{
font-size: 0.9em;
font-weight: 500;
line-height: 1.8;
}


#business .slick-slide img{
width: 100%;
height: auto;
}


/* quality
--------------------------------------------*/
#quality .idx_wrap {
position: relative;
background: #141414;
padding: 60px 5%;
margin: 0 auto;
}



#quality .idx_wrap::before {
content: '';
background:#000;
background-size: 100% auto;
width: 100%;
height: 100%;
position: absolute;
top: 0;
right: 0;
}

#quality .innerDX1400 {
margin: 0 auto;
padding: 0 6.25% 0px;
box-sizing: content-box;
}

#quality .flex_wrap {
}

#quality .flex_wrap .leftBox {
position: relative;
width: 100%;
margin-bottom: 20px;
box-sizing: border-box;
}


#quality .flex_wrap .rightBox {
position: relative;
width: 100%;
}

#quality .flex_wrap .rightBox .objectText {
font-family:'Chakra Petch', sans-serif;
font-weight: 700;
font-size: 3em;
line-height: 0.8;
box-sizing: border-box;
}

#quality .flex_wrap .rightBox .mIn {
position: relative;
box-sizing: border-box;
}

#quality .flex_wrap .rightBox .mIn h3{
font-size: 1.2em;
line-height: 2;
margin: 20px 0;
}

#quality .flex_wrap .rightBox .mIn p{
margin: 0 0 50px;
}





/* thought
--------------------------------------------*/
#thought {
width: 100%;
margin: 60px auto;
}

#thought .thought_wrap_bg {
background: #FFF;
padding: 80px 0 0;
box-sizing: border-box;
}

#thought .thought_wrap {
width: 90%;
margin: 0 auto 20px;
}

#thought .thought_wrap_box1 {
width: 100%;
position: relative;
margin: 0 0 20px
}


#thought .thought_wrap_box1 .tit_txt{
font-family:'Chakra Petch', sans-serif;
font-weight: 700;
font-size: 3em;
line-height: 1;
display: inline-block;
overflow: hidden;
position: relative;
color: #000;
}

#thought .thought_wrap_box2 {
width: 100%;
position: relative;
padding-right: 30px;
box-sizing: border-box;
color: #000;
}

#thought .thought_wrap_box2 .read_tit{
font-size: 1.2em;
font-weight: 700;
margin: 0 0 30px;
}

#thought .thought_wrap_box2 .read_txt{
margin: 0 0 3px;
}

#thought .thought_wrap_box2 .more{
text-align: right;
padding-right: 30px;
box-sizing: border-box;
}

#thought .thought_wrap_box2 .more a span{
color: #000 !important;
}
#thought .thought_wrap_box2 .more a span::after {
background: #000;
}

#thought .imgBox {
}



/* groups
--------------------------------------------*/
#groups .idx_wrap {
width: 90%;
margin: 60px auto;
}

#groups .idx_wrap .innerDX1400{
margin: 0 auto;
box-sizing: content-box;
}

#groups .flex_wrap {
position: relative;
}

#groups .textBox {
width: 90%;
position: relative;
margin: 0 auto 20px;
}

#groups .textBox .innerBox{
background: #000;
padding: 0;
}

#groups .textBox .innerBox h3{
font-family: 'Chakra Petch', sans-serif;
font-weight: 700;
font-size: 3em;
margin: 0 0 20px;
display: inline-block;
overflow: hidden;
position: relative;
line-height: 1;
}

#groups .textBox .innerBox h4{
font-size: 1.2em;
font-weight: 700;
margin: 0 0 30px;
}

#groups .textBox .innerBox p{
margin: 0 0 50px;
}

#groups .textBox .innerBox p span{
display: block;
padding-top: 20px;
font-size: 0.8em;
}

#groups .imgBox {
width: 80%;
margin: auto;
}



/* sustainability
--------------------------------------------*/
#sustainability {
padding: 5%;
box-sizing: border-box;
background: #1c1c1c;
}
#sustainability .idx_wrap {
position: relative;
margin: 0 auto;
}

#sustainability .idx_wrap .innerDX1400{
margin: 0 auto;
}

#sustainability .flex_wrap {
position: relative;
}

#sustainability .textBox {
width: 100%;
position: relative;
z-index: 1;
}

#sustainability .textBox .innerBox{
background: #000;
padding:20px;
box-sizing: border-box;
}

#sustainability .textBox .innerBox h3{
font-family: 'Chakra Petch', sans-serif;
font-weight: 700;
font-size: 3em;
margin: 0 0 20px;
display: inline-block;
overflow: hidden;
position: relative;
line-height: 1;
}

#sustainability .textBox .innerBox h4{
font-size: 1.2em;
font-weight: 700;
margin: 0 0 20px;
}

#sustainability .textBox .innerBox p{
margin: 0 0 30px;
}

#sustainability .textBox .innerBox p span{
display: block;
padding-top: 20px;
font-size: 0.8em;
}

#sustainability .imgBox {
width: 80%;
position: relative;
margin: auto;
}



/* recruit
--------------------------------------------*/
#recruit .flex_wrap{
position: relative;
background: url("../images/index/recruit_img.jpg") center center no-repeat;
background-size: cover;
padding: 60px 5%;
box-sizing: border-box;
margin: 0 0 60px;
text-align: center;
}

#recruit .flex_wrap h3{
font-family: 'Chakra Petch', sans-serif;
font-weight: 700;
font-size: 3em;
margin: 0 0 20px;
display: inline-block;
overflow: hidden;
position: relative;
line-height: 1;
}

#recruit .flex_wrap h4{
font-size: 1.2em;
font-weight: 700;
margin: 0 0 30px;
}


#recruit .flex_wrap p{
font-size: 0.8em;
margin: 0 0 30px;
text-align: left;
}

#recruit .flex_wrap .more{
margin-left: -30px;
}

/* news
--------------------------------------------*/
#news {
background: #FFF;
padding: 60px 0;
box-sizing: border-box;
}

#news .innerDX1000{
width: 90%;
margin: 0 auto 60px;
}

#news .innerDX1000 h3{
font-family: 'Chakra Petch', sans-serif;
font-weight: 700;
font-size: 3em;
margin: 0 0 10px;
display: inline-block;
overflow: hidden;
position: relative;
line-height: 1;
color: #000;
}

#news .innerDX1000 h3 span{
font-size: 1.2em;
display: block;
padding-bottom: 10px;
color: #000;
}

#news .news_wrap {
margin-top: 30px;
height: 260px;
overflow-y: auto;
}

#news .news_wrap li{
border-top:1px solid #1F1F1F;
padding: 10px;
color: #000;
}

#news .news_wrap li .news_date{
width: 120px;
font-size: 16px;
font-family: 'Chakra Petch', sans-serif;
letter-spacing: .05em;
line-height: 24px;
font-weight: 500;
font-style: normal;
margin: 0 0 10px;
}

#news .news_wrap li .news_title{
font-size: 14px;
}

}