﻿.main-visual  {
 position: relative;
 z-index: 50;
 max-width: 2000px;
}

.main-visual .swiper {
 position: relative;
 max-inline-size: 1920px;
 margin-inline: auto;
}


.main-title {
 display: table;
 position: absolute;
 left: 50%;
 top: 50%;
 z-index: 200;
 transform: translate(-50%,-50%);
 background: rgb(0,0,0);
 background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.4) 15%, rgba(0,0,0,.4) 85%, rgba(0,0,0,0) 100%);
 padding: .4em 10%;
 font-weight: 700;
 color: #FFF;
 white-space: nowrap;
 text-align: center;
 line-height: 1.4;
}



@media screen and (min-width: 769px){
 .main-visual { margin: 0 auto; }
 .main-title { font-size: clamp(24px,50px,6vw); line-height: 1.4; }
}
@media screen and (max-width: 768px){
 .main-title { min-width: 75%; font-size: clamp(20px,48px,5.5vw); line-height: 1.75; }
 .main-visual  { margin: 0 auto 60px; }
 .main-visual .swiper-controller {
  position: absolute;
  left: 50%;
  bottom: -40px;
  transform: translateX(-50%);
}
}



/* 事業紹介
======================================== */
.solution-wrapper {
 position: relative;
}
.solution-box {
 display: block;
 width: 100%;
 aspect-ratio: 6.28 / 3.53;
 font-size: 0;
 line-height: 1;
}

.solution-box .swiper , .solution-box .solution-photo {
 width: 100%;
 height: 100%;
}


.solution-box img {
width: 100%;
 height: 100%;
 object-fit: cover;
}

.solution-headline {
 position: absolute;
 left: 0;
 bottom: 0;
 z-index: 100;
 display: block;
 width: 100%;
 padding: 1em .25em;
 color: #FFF;
 text-decoration: none;
 background-color:rgba(000,000,000,0.8);
 font-size: clamp(16px,24px,3vw);
 font-weight: 500;
 line-height: 1;
}

.solution-wrapper .swiper-controller {
 z-index: 200;
}


@media screen and (min-width: 769px){
 .solution-container {
 width: 90%;
 max-width: 1360px;
 margin: 80px auto 140px;
 display: flex;
 justify-content: space-between;
}
.solution-wrapper { width: 48%; }

.solution-headline {  font-size: clamp(14px,24px,1.5vw); }    
.solution-wrapper .swiper-controller { border: solid 1px #CCC; bottom: -60px; }

}
@media screen and (max-width: 768px){
 .solution-container {
 width: 90%;
 max-width: 670px;
 margin: 60px auto 0;
}
.solution-wrapper { margin-bottom: 60px; }    
.solution-headline {  font-size: clamp(12px,24px,3vw); }
.solution-wrapper .swiper-controller { bottom: -40px; }    

}




.index-wrapper {
 position: relative;
 max-width: 2000px;
 display: flex;
}

.index-body { text-align: left; }

.index-headline-en {
 font-weight: 700;
 line-height: 1;
}
.index-headline-jp {
 margin-top: .75em;
 font-weight: 700;
 line-height: 1;
}

.index-headline-desc {
 font-size: 20px;
 margin-top: 2.25em;
    line-height: 2;
}

.index-headline-desc + .index-headline-desc { margin-top: 1em; }



@media screen and (min-width: 769px){
.index-container {
 padding-bottom: 130px;
 background-image: url("../img/top/index_bg.jpg");
 background-size: 100% auto;
}

.index-wrapper {
 justify-content: space-between;
 align-items: center;
 margin: 110px auto 0;
}

.index-photo { width: 50%; }
.index-body { width: 30%; }
.index-headline-en { font-size: clamp(30px,60px,4vw); }
.index-headline-jp { font-size: clamp(14px,26px,3vw); }
.index-headline-desc { font-size: clamp(14px,20px,1.25vw); margin-top: 2.25em; }
    
.index-wrapper:nth-child(odd) .index-photo { order: 1; }
.index-wrapper:nth-child(odd) .index-body { order: 2; margin-left: 8%; margin-right: 12%; }

.index-wrapper:nth-child(even) .index-photo {order: 2; }
.index-wrapper:nth-child(even) .index-body { order: 1; margin-left: 12%; margin-right: 8%; }
    
.index-wrapper .comp-link { margin-top: 60px; }
    
}

@media screen and (max-width: 768px){
.index-container {
 padding-bottom: 45px; 
}

.index-wrapper {
 justify-content: center;
 flex-wrap: wrap;
 margin: 55px auto 0;
 width: 90%;
}
 .index-headline-en { font-size: clamp(18px,26px,6vw); margin-top: 1em; }
 .index-headline-jp { font-size: clamp(14px,18px,4.5vw); }
 .index-headline-desc { font-size: 14px; margin-top: 1.75em; }
    
 .index-wrapper .comp-link { margin-top: 20px; }

}