@charset "UTF-8";
.link-btn{ max-width: 200px;}
.top{ position: relative; /*background: url(../images/mv-bg-750.jpg) no-repeat center top / cover;*/min-height: 100vh;}

.txt-box .txt p{ font-family: 'Noto Serif', serif; font-weight: 400; font-size:3vw; text-align: center; letter-spacing:2px; }
.txt-box .txt .lead p{ font-family: 'Mulish', sans-serif; font-weight: 400; font-size:1vw; letter-spacing: 2px;}
.txt-box{width:100%;height:100vh;position:absolute;z-index:2;}
.txt-box .txt{position:absolute;top:46%;left:0;right:0;margin:auto;}

@media screen and (min-width:768px){
.txt-box{width:40%;height:100vh;position:relative;}
.txt-box .txt{position:absolute;top:0;bottom:0;left:50%;margin:auto;width:500px;height:200px;}
.txt-box .txt p{ text-align: left; font-size:1.8rem; letter-spacing:1px;}
.txt-box .txt .lead p{ font-size:.3rem;}
}

.mv-logo-box .mv-logo .sp{display:block;}
.mv-logo-box .mv-logo .pc{display:none;}

.mv-logo-box{position:relative;width:100%;height:100vh;background: url(../images/mv-bg-750.jpg) center center/cover;}
.mv-logo-box .mv-logo{width:70%;height:auto;margin-top:-16px;}
.mv-logo-box .mv-logo img{width:100%;height:auto;}

@media screen and (min-width:768px){
.mv-logo-box{width:60%;background: url(../images/mv-bg-1024.jpg) center center/cover;}
.mv-logo-box .mv-logo{width:30%;height:auto;}
.mv-logo-box .mv-logo .pc{display:block;}
.mv-logo-box .mv-logo .sp{display:none;}
}

.scrolldown{ position: absolute; top: 50%; right: 0; bottom: 0; left: 0; margin: auto; width: 80%; height: 80px; animation: arrowmove 1s ease-in-out infinite;}
@keyframes arrowmove{ 0%{bottom:1%;} 50%{bottom:3%;} 100%{bottom:1%;}}
.scrolldown:before { content: ""; position: absolute; top: 80px; right: 0; bottom: 0; left: 0; margin: auto; width: 1px; height: 20px; background: #eee; transform: skewX(-31deg);}
.scrolldown:after{ content:""; position: absolute; top: 50px; right: 0; bottom: 0; left: -12px; margin: auto; width:1px; height: 50px; background:#eee;}
@media screen and (min-width:768px){
.scrolldown{ display: none;}}

.about-desc .container{ margin: 0; padding: 0;}
.about-desc .main-title {  position: relative; margin:0; padding-left: 80px; text-align: left; }
.about-desc .main-title .lead{ font-weight: 700; text-align: left;}
.about-desc .main-title::before{ content:''; position: absolute; top:32%; left:-5px; display: inline-block; width:80px; height:1px;  background-color: #707070; }
.about-desc .txt{ line-height: 1.8;}
.about-desc .txt p{ display: inline; font-size: 1rem;}
.about-desc img{ width:100%; height:56.25%; object-fit: cover; z-index: 1;}
@media screen and (min-width:768px){
.about-desc{ display: flex;}
.about-desc .container{ order: 2;}
.about-desc .txt p{ display: block; }
.about-desc img{ order: 1;max-width:40%;}
.about-desc .link-btn{ margin-left:90px;}
}
@media screen and (min-width:1500px){
.about-desc img{ width:100%; max-height: 360px;}}

@media screen and (min-width:768px){
.services{ position: relative; background-image: linear-gradient( 180deg, #E1EEF5 50%, #F0F5F7 50% ); }
.services::before{ content: "Social Life"; display: inline-block; position: absolute; top: 0; right:-140px; transform:rotate(-90deg); font-size: 4.4rem; font-family: 'Mulish', sans-serif; font-weight: 200; color: #FFF; letter-spacing: 5px; }
.services::after{ content: "Health"; display: inline-block; position: absolute; top: 70%; left:-80px; transform:rotate(90deg); font-size: 4.4rem; font-family: 'Mulish', sans-serif; font-weight: 200; color: #FFF; letter-spacing: 5px; }
}

.info{ background-color: #F0F5F7; }
.info .main-title{ position: relative; padding-left:80px; text-align: left;}
.info .main-title .lead{ text-align: left;}
.info .main-title::before{ content:''; position: absolute; top:45%; left:-12px; display: inline-block; width:80px; height:2px;  background-color: #707070; }
.info .link-btn{ margin-top:80px;}


#slide-nav{ width:320px; margin: 24px auto; position: relative; display: block; text-align: center;}
#slide-nav .dots { position: relative; text-align: center; }
#slide-nav .slick-dots{position: absolute; top:-5px; height:20px;}
#slide-nav .slick-dots li { width: 24px; height: 24px;}
#slide-nav .slick-dots li button::before{ content: ""!important; width: 12px; height: 12px; background-color: #E4E4E4; border-radius: 24px; opacity: 1; }
#slide-nav .slick-dots li.slick-active button:before{ border: solid 1px #E4E4E4; background-color: #1CB1C9;}

#slide-nav .slick-prev,
#slide-nav .slick-next { z-index: 1; position:  absolute; top:10px; border:solid 1px #E2E2E2; border-radius: 24px;}
#slide-nav .slick-prev{ width: 34px; height: 34px; left:-30px; }
#slide-nav .slick-next{ width: 34px; height: 34px; right:-20px;}
#slide-nav .slick-prev:before,
#slide-nav .slick-next:before{ position: absolute; content: ""; }
#slide-nav .slick-prev:before{ display: block; width:8px; height: 12px; background:url(../images/icon-left.svg) center center/contain no-repeat; top:10px; left:11px; }
#slide-nav .slick-next:before{display: block; width:8px; height: 12px; background:url(../images/icon-right.svg) center center/contain no-repeat; top:10px; right:11px;}


.company-desc{ padding-bottom:240px; background:url(../images/sdgs-bg.jpg) no-repeat right bottom / 100%;}
.company-desc .main-title{ margin:0; }
.company-desc .txt{ text-align: center; line-height: 2;}
.company-desc .link-btn{ margin:0 auto;}

@media screen and (min-width:480px){
.company-desc{background:url(../images/sdgs-bg.jpg) no-repeat right bottom / 80%;}
}

@media screen and (min-width:768px){
.company-desc{position: relative; padding:48px 0 80px 0; background:url(../images/sdgs-bg.jpg) no-repeat 120% 100% / 60%;}
.company-desc::before{ content: "Safety"; display: inline-block; position: absolute; top: 30%; left:-70px; transform:rotate(90deg); font-size: 4.4rem; font-family: 'Mulish', sans-serif; font-weight: 200; color: #FFF; letter-spacing: 5px; }
}