@charset 'utf-8';

/* Base Styles */
main { overflow: hidden; padding-top: 0; }
@media screen and (min-width: 1080px) {
  main { margin-top: -130px; }
}
header {
  background-color: rgba(26, 102, 55, 0);
  transition: background-color 0.3s ease;
  z-index: 10;
}

/* header.scrolled {
  background-color:#338753;
} */


/* Menu Active States */
.menuMain li.menuHome a { border-left: 4px solid #338753; }
.footerMenuMain li.menuHome a { border-left: 4px solid #338753; }

/* Top Section */
.top_wrap { position: relative; height: 470px; }
.top_wrap .top_img_wrap { position: absolute; top: 10px; right: 0; width: 90vw; height: 400px; background: #FFF; z-index: 1; }
.top_wrap .top_copy { position: absolute; top: 34px; left: -5vw; display: flex; flex-direction: column; gap: 18px; z-index: 2; }
.top_wrap .top_copy p { padding: 0 12px; }
.top_wrap .top_english { position: absolute; bottom: 0; left: 5vw; opacity: 0.65; white-space: nowrap; font-weight: 500;}
.contents_wrap .contents .back_white { margin:0;padding: 2px; padding-top: 2.5px; }
 
/* Top Contents */
.topcontents_wrap .contents { display: flex; flex-direction: column; gap: 48px; padding: 56px 0 80px; }
.topcontents_wrap .contents .content { position: relative; }
.topcontents_wrap .contents .content h2 .h_english { margin: 0 -5vw; }
.topcontents_wrap .contents .content p { margin: 32px 0; }
.topcontents_wrap .contents .content .link_button { margin: 0; }

/* First Content Section */
.topcontents_wrap .contents .content:nth-child(1) .company_back_img { position: absolute; bottom: 0; right: 0; width: auto; height: 150px; }
.topcontents_wrap .contents .content:nth-child(1) .back_img_space { margin-bottom: 94px; }

/* Content Layout Variants */
.topcontents_wrap .contents .content h2 .h_word p { position: absolute; top: 0; padding: 12px 0; margin: 32px 0 0; z-index: 2; }
.topcontents_wrap .contents .content.left h2 .h_english { text-align: left; }
.topcontents_wrap .contents .content.left h2 .h_word p { right: 5vw; }
.topcontents_wrap .contents .content.right h2 .h_english { text-align: right; margin-right: -0.45em; }
.topcontents_wrap .contents .content.right h2 .h_word p { left: 5vw; }
.topcontents_wrap .contents .content .work_img { object-position: 0 40%; }
.topcontents_wrap .contents .content .outline_img { object-position: top; }


/* Work Content */
.readmore_wrap .work_back_img { display:none; }

/* Outline Content */
.outline_back_img {  display:none; }
.topcontents_wrap .contents.contents_second  { padding-bottom:0;}

/* 緑の背景動かす */
.back_lightgreen { background: #F6F8EF; z-index: 2; position: relative; }
.HEADER {
    background-color: rgba(255, 255, 255, 0.85); /* 白背景を半透明に */
    position: relative;
    z-index: 1;
  }
  
  .top_wrap { background-color: rgba(26, 102, 55, 0.72); /* 同じく透過緑に */ }
  .fontsize_xxl {
    font-size: 50px;
    line-height: 90px;
    

  }

  
/* 背景動画の共通スタイル */
.bg_video { position: fixed; top: 0; left: 0;  width: 100vw; height: 100vh; object-fit: cover; pointer-events: none; }
  
.back_green { position: relative; /* 疑似要素を使うため必須 */ z-index: 1; }
  
.back_green::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2; /* 背景だけを後ろへ */
    pointer-events: none;
  }
  
footer { z-index:2; position: relative; }


/*英字のアニメーション*/
.loop-container {
  white-space: nowrap;
  width: 100%;
  position: absolute;
  bottom: 10px;
}

.loop-track {
  display: inline-flex;
  width: 1500px; /* 2枚分 */
  animation: loop-scroll_english 30s linear infinite;
}

.loop-track img {
  flex-shrink: 0;
  display: block;
  margin-right: 80px;
  opacity: 0.7;
}

@keyframes loop-scroll_english {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-1603px); /* 1枚分 */
  }
}



/* フェードイン */
.fadeInUp {
  opacity: 0;
  transform: translateY(50px); /* 動きを大きく */
  transition: opacity 1.0s cubic-bezier(0.4, 0, 0.2, 1), transform 1.0s cubic-bezier(0.4, 0, 0.2, 1);
}

.fadeInUp.is-visible {
  opacity: 1;
  transform: translateY(0);
}



/* Desktop Styles (1080px+) */
@media screen and (min-width: 1080px) {
    header { padding-bottom:5px; }

    .menuMain li.menuHome a { border-left: none; }
    .menuMain li.menuHome a::after { transform: scale(1, 1); }
    .footerMenuMain li.menuHome a { border-left: none; text-decoration: underline; }
    
    /* .top_wrap { height: min(calc(42.5vw + 270px), 970px) !important; } */
    .top_wrap { height: min(calc(42.5vw + 236px), 936px) !important; }
    .top_wrap .top_img_wrap { top: 140px; width: 85vw; height: min(42.5vw, 700px); }
    .top_wrap .top_copy { left: -7.5vw; top:20%; }
    .top_wrap .top_copy p { font-size: min(2.14vw, 32px); line-height: 1.5em; padding: 0 0.6em; }
    .top_wrap .top_english { bottom: 15px; left: 7.5vw; }
    
  
    
    .topcontents_wrap .contents { gap: 80px; padding: 96px 0 120px; }
    .topcontents_wrap .contents .content { margin-bottom:100px; }
    .topcontents_wrap .contents .content h2 .h_english { margin: 0 -15vw; }
    .topcontents_wrap .contents .content h2 .company_title { margin:0 0; }
    
    .topcontents_wrap .contents .content:nth-child(1) .company_back_img { height: min(calc(30vw - 108px), 350px); opacity: 0.5; }
    .topcontents_wrap .contents .content:nth-child(1) .back_img_space { margin-bottom: 0px; }
    
    .topcontents_wrap .contents .content.right h2 .h_english { margin-right: calc(0px - 15vw - 0.15em); }
  
    .topcontents_wrap .contents .content.left h2 .h_word p { right: calc(37vw); top: -100px; }
    /* .topcontents_wrap .contents .content.left h2 .h_word p.back_white_work { right: auto; left: 180px; background: none; writing-mode: initial;} */
    .topcontents_wrap .contents .content.right h2 .h_word p { left: calc(50vw); top: -100px; }
    .topcontents_wrap .contents .content.right h2 .h_word p.back_white_outline { right: 300px; left: auto; background: none; writing-mode: initial;}
    .outline_back_img { display:block; width: 272px; height: auto; margin-top: 80px;}

    /* ループ */
    .loop-track { width:3000px; }

    /* 施工事例 */
    .back_white:not(.top_copy .back_white) {font-weight:500; 
    }
    
    .contents_wrap .contents .back_white { padding:3px; padding-top: 3.5px;}
    .content.left .content_text { margin-top:-38px; }
    .content_flex_wrap .sideimg_wrap { width: calc(50vw); }
    .topcontents_wrap .contents .content.left.content_work h2 .h_english { margin:0; }
    /* .topcontents_wrap .contents .content.left.content_work h2 .h_word p.back_white_work { position:relative; left:0; margin:0; } */

    /* 会社概要 */
    .topcontents_wrap .contents .content.right.content_outline h2 .h_english { text-align: left; margin: 0; }
    .topcontents_wrap .contents .content.right.content_outline h2 .h_word p.back_white_outline { position:relative; right:auto; margin:0; }
    .content_outline .content_flex_wrap .sideimg_wrap { flex-shrink: 0; width: calc(38vw); height: 360px; max-height: none; background: #FFF; aspect-ratio: unset; margin-top: -148px; }
    .topcontents_wrap .contents .content.right.content_outline { margin-bottom:0; }
    .fontsize_xxl {
      font-size: 55px;
      line-height: 93px;
    }
    .topcontents_wrap .contents.contents_second { padding-bottom:120px; }
    
}
@media screen and (max-width: 1080px) { 
  .topcontents_wrap .contents .content.left.content_work .fontsize_l { display: none;}
  .topcontents_wrap .contents .content.right.content_outline .fontsize_l { display: none;}
  header {background-color: rgba(26, 102, 55, 0.72);}
}


@media screen and (min-width: 1300px) { 
    .readmore_wrap .work_back_img { position: absolute; width: 14%; height: auto; display: block; margin-top: -80px; right:0; } 
}

@media screen and (max-width: 1500px) {  
.contents_wrap { margin-top:-5px; }
}