@charset "utf-8";

/* 事例 */
.solution-box {
  position: relative; 
  border-radius: 30px 0 30px 0 ; 
  border-left: solid 10px #008E1A;
  border-top: solid 1px #008E1A;
  background-color: #eee;
  box-shadow: 10px 10px 15px #999;
  padding: 20px !important;
  margin-top: 50px !important;
  margin-bottom: 50px;
  margin-left: 10px;
  z-index: -10;
}

.solution-box::before {
  content: "採用事例";
  position: absolute;
  top:-20px;        
  left: -20px;  

  width: 120px;       
  height: 120px;    
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center; 
  
  background-color: #333;
  color: #fff;            
  font-size: 1.0rem; 
  font-weight: bold;      
  letter-spacing: 0.05em; 
  line-height: 1.2;  
  z-index: 100;       
}

.solution-box h3 {
  margin-top:0px !important;
}

.solution-box img {
  box-shadow: 10px 10px 15px rgba(9, 9, 9, 0.3);
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInImg 0.8s ease-out forwards;
  max-width: 100%;
  display: flex;
}

@keyframes fadeInImg {
  to {
    opacity: 1; /* 最終的に不透明にする */
    transform: translateY(0); /* 最終的に元の位置に戻す */
  }
}

@media (max-width: 768px) {

  .solution-box {
    min-width: 150px;
  }
  .solution-box::before {
    width: 80px;       
    height: 80px;               
    font-size: 0.8rem; 
  }
}



/* 製品画像 */

.img-shadow {
  box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.3);
}

.kadomaru {
  border-radius: 0 40px 0 40px ; 
}

.kadomaru-4 {
  border-radius: 40px ; 
}

.maru {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1; 
  border-radius: 50%;   
  overflow: hidden; 
  object-fit: cover;   
  box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.3); 
  z-index:11;
}

.waku-maru {
  width: 90%;
  height: 90%;
  aspect-ratio: 1 / 1; 
  border-radius: 40px;   
  overflow: hidden; 
  object-fit: cover;
  box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.3);
  z-index:11;
}

.waku-maru-inside {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1; 
  border-radius: 40px;   
  overflow: hidden; 
  object-fit: cover;
  z-index:11;
}

.maru-box {
  max-width: 90%;
  height: auto;
  aspect-ratio: 1 / 1; 
  border-radius: 40px;  
  overflow: hidden; 
  object-fit: cover;  
  background-color: #fff;
  box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.3);
  z-index: 5;
}

.width-is-fit {
  width: 90%;
  height: 90%;
  object-fit: contain; 
}

@media (max-width:1000px) {
  .maru {
    max-width: 400px !important;
    align-items: center;
  }
}


/* オーバーレイオプション */

.img-over-color {
  position: relative; 
  display: inline-block;
}

.img-over-color img {
  display: block; 
  width:100%;
}

.img-over-color::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--overlay-color, rgba(0, 0, 0, 0.4)); 
  pointer-events: none; 
}

.is-blue {
  --overlay-color: rgba(0, 50, 150, 0.6); 
}

.is-red {
  --overlay-color: rgba(150, 0, 0, 0.6); 
}
.is-green {
  --overlay-color: rgba(15, 134, 23, 0.6); 
}

.is-orange {
  --overlay-color: rgba(236, 179, 10, 0.6); 
}

.is-gray {
  --overlay-color: rgba(5, 5, 5, 0.6); 
}

.is-gray4 {
  --overlay-color: rgba(5, 5, 5, 0.4); 
}

.overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
}



/* タイトル部分のリード文 */
.lead-box {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  text-align: left; 
  padding-bottom: 50px !important;

}

.lead-box img {
  max-width: 100%;
}

.lead-box p {
  padding-top: 20px;
  padding-bottom: 20px;
}


.box-transparent {
  background-color: rgba(255, 255, 255, 0.55) !important; /* 55% */
}

/* ボックス内の余白設定 */
.padding-box-15 {
  padding: 15px
}

.padding-box-20 {
  padding: 20px
}

/* 事例用のカコミ（グレイのカドマル） */
.sample-box {
  width: 95%;
  height: auto;
  border: solid 2px #ccc;
  background-color: #eee;
  padding:0px 25px;
  border-radius: 30px ; 
  box-shadow: 10px 10px 15px rgba(9, 9, 9, 0.3);
  margin-bottom: 30px !important;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInImg 0.8s ease-out forwards;
  max-width: 100%;
  display: flex;
  z-index: 50;
}

.full-wide-dark .sample-box p,
.full-wide-dark .sample-box li {
  color:#333 !important;
}



.responsive-box {
  display: grid;
  grid-template-columns: 1fr; 
  grid-template-rows: 1fr;    
  max-width: 1200px;
  margin: 0 auto;
  box-sizing: border-box;
  align-items: stretch; 
}

.responsive-box .text-content {
  grid-column: 1;            
  grid-row: 1;              
  background-color: rgba(0, 0, 0, 0.4); 
  color: #fff;
  padding: 30px 30px 30px 100px;
  box-sizing: border-box;
  width: 100%;
  max-width: 75%;             
  align-self: center;        
  z-index: 2;
}

.responsive-box .text-content .layo-detail,
.responsive-box .text-content .layout-btn-detail-min {
  border:solid 1px #ccc;
  box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.1);

}

.responsive-box .img-content {
  grid-column: 1;             
  grid-row: 1;               
  z-index: 1;                 
  justify-self: end;          
  align-self: center;        
  width: 65%;                 
  overflow: hidden; 

}

.responsive-box .img-content img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  animation: imgZoom 8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
  z-index:99;
}

@keyframes imgZoom {
  0% {
    transform: scale(1.0); /* 開始：元のサイズ */
  }
  100% {
    transform: scale(1.1); /* 終了：1.1倍に滑らかに拡大 */
  }
}


@media (max-width: 1200px) {
  .responsive-box .text-content {
    padding: 30px 30px 30px 50px;
  }
}


@media (min-width: 768px) {
  .responsive-box {
    grid-template-rows: 1fr;    
  }
  .responsive-box .text-content {
    grid-column: 1;            
    grid-row: 1;              
    max-width: 60%;             
    align-self: center; /* PCでは上下中央 */
  }

}

@media (max-width: 850px) {
  .responsive-box .text-content {
    grid-column: 1;            
    grid-row: 1;   
    max-width: 100%; 
    padding-left: 30px;   
    padding-top: 10px;
    align-self: stretch; 
  }
  .responsive-box .img-content {
    width: 70%;  
    opacity: 0.4;   
  }
}

@media (max-width: 1070px) {
  .responsive-box .h1-title,
  .responsive-box h1,
  .title-text h1,
  .title-text .h1-title   {
    font-size: 3rem !important;
    line-height: 1.2;
    font-weight: 600;
  }
}

@media (max-width: 600px){

  .responsive-box .h1-title,
  .responsive-box h1
  .title-text h1,
  .title-text .h1-title {
    font-size: clamp(0.6em, 2vw, 1.2em);
    line-height: 1.0;
    font-weight: 500;
    }

}


/* footer問い合わせ誘導 */
.full-wide-contact { 
  position: relative; 
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background-size: cover;
  background-position: center center; 
  background-repeat: no-repeat;
  overflow: hidden; 
  box-sizing: border-box;
  align-items: center;

}

.contact-box {
  max-width:80%;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 0;
}

.contact-box .text-content {
  background-color: rgba(0, 0, 0, 0.2); 
  color: #fff;
  padding: 20px 50px; 
  box-sizing: border-box;
  width: 70%;
  margin: 50px auto;  
}

.bnr-box {
  padding: 10px 40px;
  position: relative !important;
  z-index: 9999 !important;
}

.btn-box .layout-btn-detail,
.btn-box .layout-btn-detail-min,
.contact-box .text-content .layout-btn-detail,
.contact-box .text-content .layout-btn-detail-min {
  border:solid 1px #ccc;
  box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
  padding-left: 20px !important;
  padding-right: 20px !important;
}

@media (max-width: 1000px) {
  .contact-box .text-content {
    width: 90%;
    padding: 20px;
  }
}



/* ------- スライドショー ----- */

.full-wide-img-slideshow { 
  position: relative; 
  width: 100%; 
  height: 600px;  
  min-height:500px;
  background-size: 100% auto; /* 横幅100%にして、縦は画像の実寸に合わせる */
  background-repeat: no-repeat; /* 画像をリピートさせない */
  background-position: center;
  background-color: #e7f3e7; 
  overflow: hidden; 
  box-sizing: border-box;
  z-index: -10;
}


.slideshow { 
	position: relative; 
	width: 100%; 
	height: 600px; 
	overflow: hidden; 
  background-color: #e7f3e7; /* 画像が読み込まれるまでの背景色 */
}


.slide-2 { 
	position: absolute; 
	width: 100%; 
	height: 100%; 
	object-fit: cover; 
	opacity: 0; 
  animation: fade2 16s infinite; 
}
.slide-2:nth-child(1) { animation-delay: 0s; }
.slide-2:nth-child(2) { animation-delay: 8s; }

@keyframes fade2 {
  0%   { opacity: 0; z-index: 1; }
  6.25% { opacity: 1; z-index: 2; }  /* 表示中の要素を前面に出す */
  50%   { opacity: 1; z-index: 2; }
  56.25% { opacity: 0; z-index: 1; }
  100%  { opacity: 0; z-index: 1; }
}

.slide3 { 
	position: absolute; 
	width: 100%; 
	height: 100%; 
	object-fit: cover; 
	opacity: 0; 
  animation: fade3 24s infinite; 
}

.slide3:nth-child(1) { animation-delay: 0s; }
.slide3:nth-child(2) { animation-delay: 8s; }
.slide3:nth-child(3) { animation-delay: 16s; }

@keyframes fade3 {
  0%   { opacity: 0; }
  8.3%  { opacity: 1; } /*  2秒かけてフェードイン (24s * 8.3% = 2s) */
  33.3% { opacity: 1; } /*  8秒時点まで表示をキープ */
  41.6% { opacity: 0; } /*  2秒かけてフェードアウト */
  100%  { opacity: 0; } /* 残り時間は完全に透明で待機 */
}

.silde4 { 
	position: absolute; 
	width: 100%; 
	height: 100%; 
	object-fit: cover; 
	opacity: 0; 
  animation: fade4 32s infinite; 
}

.slide4:nth-child(1) { animation-delay: 0s; }
.slide4:nth-child(2) { animation-delay: 8s; }
.slide4:lla-4:nth-child(3) { animation-delay: 16s; } 
.slide4:nth-child(4) { animation-delay: 24s; }

@keyframes fade4 {
  0%   { opacity: 0; }
  6.25% { opacity: 1; } /*  2秒かけてフェードイン (32s * 6.25% = 2s) */
  25%   { opacity: 1; } 
  31.25%{ opacity: 0; } 
  100%  { opacity: 0; } 
}

/* 4秒ずつずらして3枚で12秒 */
.slide-4:nth-child(1) { animation-delay: 0s; }
.slide-4:nth-child(2) { animation-delay: 8s; }
.slide-4:nth-child(3) { animation-delay: 16s; }
.slide-4:nth-child(4) { animation-delay: 24s; }

@keyframes fade {
  0%   { opacity: 0; } /* 開始：透明 */
  10%  { opacity: 1; } 
  35%  { opacity: 1; } 
  70%   { opacity: 1; } 
  100% { opacity: 0; } 
}

@media (max-width: 768px) {
  .slideshow {
    height: 400px; 
  }
}

@media (max-width: 480px) {
  .slideshow {
    height: 250px; 
  }
}


/* ----------採用----------- */
.full-wide-img-recruit { 
  position: relative; 
  width: 100%; 
  height: auto;  
  background-size: cover; 
  background-repeat: no-repeat; 
  background-position: center center; /* 画像を上に固定 */
  background-color:  rgba(64, 123, 30, 0.3); 
  overflow: hidden; 
  box-sizing: border-box;
  z-index: -2;
}

/* （オーバーレイ） */
.full-wide-img-recruit::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(64, 123, 30, 0.3); 
  z-index: -1; 
}
/* ---------- 2. 2分割ブロック ------------- */
.layout-flex-2-recruit {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 0px !important;
  justify-content: flex-start;
}

.layout-col-recruit {
  flex: 0 0 calc(50% - 15px); 
  box-sizing: border-box;
}

.layout-flex-2-recruit .layout-col-recruit img {
  width: 100%;       
  height: auto;      
  display: block;    
  max-width: 100%;   
}

/* ---------- 3. 白い半透明のマル（radius） ------------- */
.background-radius-recruit {
  position: relative;
  width: 70%;
  height: auto;
  container-type: inline-size; /* 横幅を基準 */
  padding: 40px 30px;             /* マルのなかの上下余白 */
  margin-left:50px;
  margin-bottom:0px;
}

.background-radius-recruit::before {
  content: "";
  position: absolute;  
  top: 50%;
  left: 20%;
  transform: translate(-50%, -50%);
  width: 50cqi; 
  height: 50cqi;
  background-color: transparent; 
  border: 30px solid transparent;  
  border-radius: 50%; 
}

.background-radius-recruit.is-green::before {
  border-color: rgba(110, 172, 97, 0.525);
}

.background-radius-recruit.is-orange::before {
  border-color: rgba(255, 169, 22, 0.6);
}

.background-radius-recruit.is-pink::before {
  border-color: rgba(246, 181, 234, 0.6); 
}


.background-radius-recruit .front-content-recruit {
  position: relative; 
  z-index: 100; 
  padding: 5px;
}


 @media screen and (max-width: 1180px) {
  
  .layout-flex-2-recruit {
    flex-direction: column; 
    gap: 30px !important; 
    width: 100%; 
    box-sizing: border-box;
  }

  .layout-flex-2-recruit .layout-col-recruit {
    flex: 1 1 100% !important; 
    width: 100% !important;
    max-width: 100% !important; 
    box-sizing: border-box;
  }
  
  .background-radius-recruit {
    width: 100%;       
    margin-left: 0;   
    padding: 20px 15px; 
    box-sizing: border-box;
  }

  .background-radius-recruit::before {
    width: 60cqi;  
    height: 60cqi;
    max-width: 260px;  /* 840px前後の画面に合わせて一回り小さく制限 */
    max-height: 260px;
    left: 50%;        
    transform: translate(-50%, -50%);
  }
}


.background-radius-green {
  position: relative;
  width: 70%;
  height: auto;
  container-type: inline-size; 
  padding: 40px 30px;            
  margin-left:50px;
  margin-bottom:0px;
  z-index: -9;
}

/* 背景に置く半透明のマル */
.background-radius-green::before {
  content: "";
  position: absolute;  
  top: 50%;
  left: 20%;
  transform: translate(-50%, -50%);
  width: 50cqi; 
  height: 50cqi;
  background-color: transparent; 
  border: 30px solid transparent;
  border-color: rgba(110, 172, 97, 0.525);   
  border-radius: 50%; 
  z-index: -9;
}