@charset "UTF-8";

/* ------------------------------------

---------------------------------------　*/
#mainimage{
position: relative;
overflow: hidden;
z-index: 0;
margin: -118px 0 0;
padding: 0 0 120px;
background: linear-gradient(#ffffff 40%, #F0F7FA 0, #F0F7FA 90%, #ffffff 0);
}

#mainimage .img1{
float: left;
width: 52%;
}
#mainimage .img2{
float: right;
width: 34%;
margin: 540px 0 0 0;
}
#mainimage .img3{
position: absolute;
bottom: 0;
left: 13.6%;
width: 45%;
max-width: 863px;
}
#mainimage .img4{
position: absolute;
bottom: 80px;
left: 3%;
height: 32%;
max-width: 70px;
}
#mainimage .img4 img{
max-height: 200%;
}
#mainimage h2{
position: absolute;
left: 40%;
top: 310px;
width: 540px;
}
@media screen and (max-width: 1600px) {

}
@media screen and (max-width: 1000px) {
#mainimage{
position: relative;
overflow: hidden;
z-index: -1;
margin: -60px 0 0;
padding: 0 0 60px;
}
#mainimage .img2{
float: right;
width: 34%;
margin: 200px 0 0 0;
}
#mainimage .img4{
position: absolute;
bottom: 2em;
height: 30%;
}
#mainimage h2{
position: absolute;
left: 25%;
top: 155px;
width: 50%;
margin-left: 0;
}

}
@media screen and (max-width: 640px) {
#mainimage .img2{
margin-top: 7em;
}
#mainimage h2{
top: 4em;
}
}





/* ------------------------------------

---------------------------------------　*/
#news{
clear: both;
position: relative;
margin: -690px 0 690px 11.5%;
padding: 0 0 0 150px;
z-index: 1;
text-align: left;
}

#news h2{
position: absolute;
left: 0;
width: 110px;
font-size: 15px;
font-weight: 400;
text-align: center;
border-left: 1px solid #121212;
border-right: 1px solid #121212;
}

#news dl{
clear: both;
overflow: hidden;
}
#news dl dt{
float: left;
margin-right: 1em;
}
#news dl dd{
float: left;
}
#news dl dd a{
color: #121212;
}

@media screen and (max-width: 1600px) {
#news{
margin: -600px 0 600px 11.5%;
}
}
@media screen and (max-width: 1400px) {
#news{
margin: -520px 0 520px 11.5%;
}
}
@media screen and (max-width: 1280px) {
#news{
margin: -500px 0 500px 11.5%;
}
}
@media screen and (max-width: 1000px) {
#news{
clear: both;
position: relative;
margin: 0 0 0;
padding-top: 2em;
padding-bottom: 2em;
z-index: 0;
}
}
@media screen and (max-width: 800px) {
#news{
padding-left: 10em;
}
#news h2{
position: absolute;
left: 5%;
width: 7em;
font-size: 13px;
font-weight: 400;
text-align: center;
border-left: 1px solid #121212;
border-right: 1px solid #121212;
}
}

@media screen and (max-width: 640px) {
#news dl dt{
float: none;
}
#news dl dd{
float: none;
}
}

/* ------------------------------------

---------------------------------------　*/
#works{
clear: both;
overflow: hidden;
padding: 50px 0 80px;
}

#works ul{
width: 90%;
max-width: 1200px;
margin: 0 auto;
}
#works ul li{
float: left;
width: 46.2%;
padding: 0 0 60px;
text-align: center;
background: linear-gradient(#ffffff 10%, #F0F7FA 0, #F0F7FA 100%, #ffffff 0);
}
#works ul li:nth-child(2){
float: right;
}

#works ul li img{
width: 66%;
}

#works ul li h3{
margin: 1em 0;
font-size: 250%;
font-weight: 900;
line-height: 1.3;
}
#works ul li h3 .en{
display: block;
padding: 1em 0 0;
color: #005FA3;
font-size: 40%;
font-family: 'Inter', sans-serif;
font-weight: 600;
}

#works ul li .text{
width: 83%;
margin: 0 auto;
text-align: left;
}

#works ul li a.link{
position: relative;
display: block;
width: 83%;
margin: 80px auto 0;
padding: 1em;
color: #fff;
font-weight: 700;
text-align: center;
line-height: 1;
background: #005FA3;
border-radius: 1em;
box-sizing: border-box;
}
#works ul li a.link:before{
position: absolute;
right: 1em;
top: 1.5em;
content: "●";
color: #fff;
font-size: 75%;
}



@media screen and (max-width: 900px) {
#works{
padding: 1em 0 2em;
}
#works ul li{
float: none;
width: 100%;
margin: 0 0 2em !important;
padding: 0 0 1.5em;
}
#works ul li h3{
margin: 0.6em 0;
}
#works ul li a.link{
margin: 1em auto 0;
padding: 1.5em 1em;
}
#works ul li a.link:before{
position: absolute;
right: 1em;
top: 2em;
}
}



/* ------------------------------------

---------------------------------------　*/

#works2{
clear: both;
overflow: hidden;
}

#works2 ul li{
float: left;
width: 33.2%;
margin: 0 0.2% 0 0;
}
#works2 ul li:nth-child(3){
margin-right: 0;
}
#works2 ul li img.pc{display: inline;}
#works2 ul li img.sp{display: none;}

@media screen and (max-width: 900px) {
#works2 ul{
width: 90%;
margin:0 auto;
}
#works2 ul li{
float: none;
width: 100%;
margin: 0 0 1em 0;
}
#works2 ul li img.pc{display: none;}
#works2 ul li img.sp{display: inline;}

}




/* ------------------------------------

---------------------------------------　*/
#company{
clear: both;
overflow: hidden;
padding: 80px 0 80px;
background: linear-gradient(270deg, #ffffff 29%, #F0F7FA 0, #F0F7FA 100%, #ffffff 0);
}
#company .cont{
width: 90%;
max-width: 1200px;
margin: 0 auto;
text-align: left;
}
#company h2{
margin: 1em 0;
font-size: 250%;
font-weight: 900;
line-height: 1.3;
}
#company h2 .en{
display: block;
padding: 1em 0 0;
color: #005FA3;
font-size: 40%;
font-family: 'Inter', sans-serif;
font-weight: 600;
}

#company .banner{
overflow: hidden;
margin:0 0 60px;
}
#company .banner a{
color: #121212;
}

#company .banner .page{
display: block;
margin: 0.6em 0 0;
padding: 0.2em 0 0.2em 3em;
font-size: 125%;
font-weight: 700;
background: url("/test/img/index/arrow_r.svg") no-repeat 0 0;
background-size: auto 100%;
text-decoration: underline;
}


#blog1{
float: left;
width: 46.2%;
}
#blog2{
float: right;
width: 46.2%;
}





@media screen and (max-width: 1000px) {
#company{
padding: 2em 0 2em;
background: #F0F7FA
}
#company .banner{
margin:0 0 1.7em;
}
#company .banner .page{
font-size: 100%;
padding: 0.2em 0 0.2em 2.5em;
}
}



@media screen and (max-width: 900px) {
#company #blog1{
float: none;
width: 100%;
}
#company #blog2{
float: none;
width: 100%;
}


}





/* ------------------------------------

---------------------------------------　*/
#sns{
clear: both;
overflow: hidden;
padding: 0 0 80px;
}
#sns .cont{
width: 90%;
max-width: 1200px;
margin: 0 auto;
text-align: left;
}
#sns .youtube {
  width: 100%;
  aspect-ratio: 16 / 9;
}
#sns .youtube iframe {
  width: 100%;
  height: 100%;
}

@media screen and (max-width: 1000px) {
#sns{
padding: 0 0 2em;
background: #F0F7FA
}

}






/* ------------------------------------

---------------------------------------　*/
#project{
clear: both;
overflow: hidden;
background:linear-gradient(90deg, #ffffff 29%, #F0F7FA 0, #F0F7FA 100%, #ffffff 0);
}
#project .back-color{
overflow: hidden;
padding: 80px 0 100px;
background:url("/test/img/index/project_top_back.png") repeat-x center top;
background-size:100% 40%;
}
#project .cont{
position: relative;
width: 95%;
max-width: 1700px;
margin: 0 0 0 auto;
text-align: left;
}

#project h2{
margin: 1em 0;
font-size: 250%;
font-weight: 900;
line-height: 1.3;
}
#project h2 .en{
display: block;
padding: 1em 0 0;
color: #005FA3;
font-size: 40%;
font-family: 'Inter', sans-serif;
font-weight: 600;
}
@media screen and (max-width:2100px) {
#project .cont{
max-width: 1650px;
}
}
@media screen and (max-width: 1920px) {
#project .cont{
max-width: 1560px;
}
}
@media screen and (max-width: 1700px) {
#project .cont{
max-width: 1450px;
}
}
@media screen and (max-width: 1600px) {
#project .cont{
max-width: 1380px;
}
}
@media screen and (max-width: 1000px) {
#project .back-color{
padding: 2em 0 2.5em;
}
}
/*
-------------------------------*/
#project .cont .link{
position: absolute;
left: 0;
top: 1em;
width: 100%;
max-width: 1200px;
text-align: right;
}

#project .cont .link a{
color: #121212;
font-size: 125%;
font-weight: 700;
text-decoration: underline;
}


@media screen and (max-width: 1000px) {
#project .cont .link{
width: 95%;
}
}

/*
-------------------------------*/
#js-slider-1{
padding: 0 0 80px;
}
.slider-1 .slick-slide{
  width: 480px;
  max-width: 480px !important;
  margin: 0 40px;
  position: relative;
  overflow: hidden;
}
.slider-1 .slick-slide img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 320px;
  object-fit: cover;
}
.slider-1 .slick-slide .detail{
overflow: hidden;
padding: 0.5em 0;
line-height: 1.3;
}
.slider-1 .slick-slide .detail .cat{
float: left;
width: 7em;
margin-right: 1em;
text-align: center;
border-left: 1px solid #121212;
border-right: 1px solid #121212;
}
.slider-1 .slick-slide .detail .name{
float: left;
font-size: 125%;
font-weight: 700;
}
.slider-1 .slick-slide .detail .date{
float: right;
color: #a0a0a0;
}
.slider-1 .slick-arrow {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #005FA3;
  cursor: pointer;
  border: none;
  outline: none;
  font-size: 0;
  position: absolute;
  z-index: 1;
}
.slider-1 .slick-arrow::before {
}
.slider-1 .slick-next {
  left: 60px;
  bottom: 0;
  background: url("/test/img/index/arrow_r.svg") no-repeat center center;
  background-size: 100%;
}
.slider-1 .slick-prev {
  left: 0;
  bottom: 0;
  background: url("/test/img/index/arrow_l.svg") no-repeat center center;
  background-size: 100%;
}
.slider-1 .slick-next::before {
  left: 20px;
}
.slider-1 .slick-prev::before {
  right: 22px;
}
.dots-2 .slick-dots {
  display: none;
}

@media screen and (max-width: 1000px) {
.slider-1 .slick-slide{
  width: 210px;
  margin: 0 15px;
  position: relative;
  overflow: hidden;
}
.slider-1 .slick-slide .detail .name{
font-size: 100%;
}
}
@media screen and (max-width: 640px) {
.slider-1 .slick-slide{
/*  width: 160px;*/
  margin: 0 13px;
  position: relative;
  overflow: hidden;
}
.slider-1 .slick-slide .detail{
position: relative;
}
.slider-1 .slick-slide .detail .cat{
clear: both;
text-align: center;
float: none;
/*width: 100%;*/
margin: 0 0 0.5em;
box-sizing: border-box;
}
.slider-1 .slick-slide .detail .date{
position: absolute;
right: 0;
top: 0.5em;
float: none;
}

}

@media screen and (max-width: 480px) {
.slider-1 .slick-slide{
}
.slider-1 .slick-slide img{
  max-height: 150px;
}
.slider-1 .slick-next {
  left: auto;
  right: 5%;
  bottom: 70%;
}
.slider-1 .slick-prev {
  left: 0;
  bottom: 70%;
}

}

/* ------------------------------------

---------------------------------------　*/
#link-area{
clear: both;
overflow: hidden;
padding: 80px 0 80px;
background: #005FA3;
}

#link-area ul{
overflow: hidden;
width: 90%;
max-width: 1200px;
margin: 0 auto;
}
#link-area ul li{
width: 46%;
}
#link-area ul li:nth-child(1){
float: left;
}
#link-area ul li:nth-child(2){
float: right;
}


@media screen and (max-width: 1000px) {
#link-area{
padding: 2em 0 2em;
}
#link-area ul li{
width: 48%;
}
}



@media screen and (max-width: 640px) {
#link-area ul li{
float: none !important;
margin: 0 auto 1.7em;
width: 90%;
}
}