@charset "UTF-8";

header {
}
header #head .head_top #logo a .logo_wh {
  display:block;
}
header #head .head_top #logo a .logo_bl {
  display:none;
}
header.fixed #head .head_top #logo a .logo_bl {
  display:block;
}
header.fixed #head .head_top #logo a .logo_wh {
  display:none;
}

/*snsアイコン*/
header #head .sns_icon .logo_wh {
  display:block;
}
header #head .sns_icon .logo_bl {
  display:none;
}
header.fixed #head .sns_icon .logo_bl {
  display:block;
}
header.fixed #head .sns_icon .logo_wh {
  display:none;
}




header nav #gnav li.nav_item a {
  color:#fff;
}

header .head_top a#menu_btn span {
  background-color: #fff;
}
header.fixed .head_top a#menu_btn span {
  background-color: #013268;
}


/* -------------------------------------
mainimg
------------------------------------- */
#mainimg {
  text-align: center;
  position: relative;
  margin-bottom: 0;
  overflow-x:clip;
  z-index:1;
}

#mainimg {
  position: relative;
}

#mainimg .mvblk {
  /*height: 100svh;*/
  min-height: 300px;
  position: relative;
  overflow: hidden;
}
#mainimg .mvblk .img_cvr {
  display: block;
}

#mainimg video {
  opacity: 0;
  transition: opacity .6s ease;
}

body.mvfix #mainimg video {
  opacity: 1;
}

/*#mainimg .mvblk .sp {
  display:none;
}*/


#mainimg .mvtxt {
  color:#fff;
  font-size:65px;
  font-weight:300;
  text-align:left;
  text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.4);
  line-height:1.38;
  letter-spacing:0.02em;
  position:absolute;
  left:6.25vw;
  bottom:4.86vw;
  z-index:1;
}


/*図面アイコン位置調整*/
.draw_1 {
  width:22.5vw;
  max-width:324px;
  min-width:220px;
  top:50%;
  left:82%;
}
.draw_2 {
  width:40.5vw;
  max-width:583px;
  min-width:396px;
  top:94.6%;
  right:43.2%;
}
.draw_3 {
  width:39.7vw;
  max-width:571px;
  min-width:388px;
  top:86.4%;
  left:75%;
}
.draw_4 {
  width:26.3vw;
  max-width:378px;
  min-width:257px;
  top:17.6%;
  right:55%;
  z-index:-1;
}


.index .cont_txt span {
  display:inline-block;
}


/* -------------------------------------
aboutus
------------------------------------- */
#about {
  padding:max(118px,8.19vw) 0;
}

#about .telop_bg {
    width: auto;
    height: 14.72vw;
    max-height: 212px;
    min-height:50px;
    margin-bottom:110px;
    background: url(../imgs/index/telop.svg) 0 0 repeat-x;
    background-size: auto 100%;
    will-change: transform;
    animation: slide_img 180s linear infinite;
}
@keyframes slide_img {
  100% {
    background-position: -10000px 0;
  }
}


#about .sec_wrap {
  color:#fff;
  font-size:20px;
  justify-content:space-between;
  flex-direction:row-reverse;
  gap:30px;
}
.about_txt_wrap {
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:25px;
  max-width:350px;
}
.about_ttl {
  font-size:26px;
  font-weight:700;
  margin-bottom:37px;
}
.about_txt_wrap {
  margin-bottom:30px;
}
.about_txt {
  line-height:2.92;
  margin-bottom:35px;
}
.about_img {
  width:62.3%;
  max-width:710px;
  position:relative;
  z-index:1;
}


/* -------------------------------------
products
------------------------------------- */
#products {
  padding: max(140px, 14.72vw) 0 20vw;
}
#products .sec_wrap {
  color:#fff;
  font-size:20px;
  justify-content:space-between;
  align-items: center;
  gap:6.1vw;
  position:relative;
}
.products_img {
  width: 50vw;                /* ひとまず半分 */
  margin-left: calc(50% - 50vw);
  position: relative;
}
.products_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.products_txt_wrap {
  display:flex;
  flex-direction:column;
  gap:3vw;
  width:50%;
  max-width:450px;
}



/* -------------------------------------
works
------------------------------------- */
#works {
  padding:145px 0 353px;
  position:relative;
}
#works .inner-1140 {
  overflow: visible;
}
#works .sec_wrap {
  padding-bottom:56px;
  margin-bottom:40px;
}
#works .sec_wrap .wsorks_img {
    margin-right: calc(50% - 50vw);
    width:26.25vw;
    position:absolute;
    right:0;
  bottom:0;
}

.works_txt_wrap .sec_head {
  display:flex;
  align-items:center;
  gap:30px;
}
.works_txt_wrap .sec_head .morebtn {
}
.works_txt_wrap {
  display:flex;
}
.works_list_wrap {
  position:relative;
}
#works_list {
  padding:60px 0 113px;
  margin-right: calc(50% - 50vw);
  width: 100vw;
  position:relative;
  z-index:1;
}
#works_list::before {
  content:"";
  display:block;
  width:100vw;
  height:100%;
  background-color:#fff;
  position:absolute;
  left:-47px;
  top:0;
  z-index:0;
}

#works_list .slick-slide {
  margin-right: min(5.42vw, 78px);
}
#works_list .slick-list {
  overflow: hidden;
  width: calc(100% - var(--cut));
}
#works_list .item_in {
  position:relative;
}
#works_list .item_name {
  font-size:18px;
  padding:0 20px 7px 13px;
  background-color:#fff;
  border-radius:0 0 24px 0;
  position:absolute;
  top:-2px;
  left:-2px;
  z-index:1;
}
#works_list .imgbk {
  border-radius:10px;
  overflow:hidden;
}


/* -------------------------------------
recruit
------------------------------------- */
#recruit {
  color:#fff;
  text-align:center;
  background:url(../imgs/index/recruit_img.jpg) center center no-repeat;
  background-size:cover;
  padding:119px 0 93px;
  position:relative;
}
#recruit::after {
  content:"";
  display:block;
  width:100%;
  height:100%;
  background-color:rgba(7,53,130,0.78);
  position:absolute;
  top:0;
  left:0;
  z-index:1;
}
#recruit .sec_head {
  display:flex;
  flex-direction:column;
  gap:40px;
  position:relative;
  z-index:2;
}


/* -------------------------------------
news
------------------------------------- */
#news {
  padding:155px 0 206px;
}
#news .sec_wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
    position: relative;
}
#news .sec_wrap .sec_head {
  min-width:200px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:20px;
  position:relative;
}
#news .sec_wrap .news_list {
  width:calc(100% - 220px);
  max-width:794px;
    border-top: 1px solid #999;
}
.news_listItem {
    border-bottom: 1px solid #999;
}
.news_listItem a {
    color:#646464;
    display: flex;
    justify-content: space-between;
    padding: 40px 15px 40px 0;
}
.news_date {
    font-size:15px;
    font-family: english-grotesque, sans-serif;
    font-weight: 100;
    width: 80px;
}
.news_txt {
    font-weight:700;
    display: inline-flex;
    align-items: center;
    justify-content:space-between;
    gap: 35px;
    width: calc(100% - 80px);
    max-width: 567px;
    position: relative;
}
.news_txt .arrow {
    position: relative;
    width: 15px;
    height: 2px;
}
.news_txt .arrow::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 15px;
    height: 2px;
    background: currentColor;
    transform-origin: left center;
}
.news_txt .arrow::after {
    content: "";
    position: absolute;
    right: 0;
    top: -3px;
    width: 6px;
    height: 6px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
}
/* hover時に両方アニメーション */
.news_listItem:hover .arrow::before {
  animation: arrow-bar 1.0s ease-in-out forwards;
}

.news_listItem:hover .arrow::after {
  animation: arrow-head 1.0s ease-in-out forwards;
}

/* 横棒のアニメーション */
@keyframes arrow-bar {
  0% {
    transform: scaleX(1);
  }
  20% {
    transform: scaleX(1.6); /* 伸び幅 */
  }
  100% {
    transform: scaleX(1);
  }
}
/* 三角の追随アニメーション */
@keyframes arrow-head {
  0% {
    transform: translateX(0) rotate(45deg);
  }
  20% {
    transform: translateX(12px) rotate(45deg); /* ← 横棒増分と合わせる */
  }
  100% {
    transform: translateX(0) rotate(45deg);
  }
}




@media screen and (max-width: 1440px) {
/* -------------------------------------
mainimg
------------------------------------- */
#mainimg .mvtxt {
  font-size:clamp(40px,4.51vw,65px);
}

}

@media screen and (max-width: 1260px) {
/* -------------------------------------
about
------------------------------------- */
#about .sec_wrap {
  font-size:clamp(16px,1.59vw,20px);
}


/* -------------------------------------
products
------------------------------------- */
#products .sec_wrap {
  font-size:clamp(16px,2vw,20px);
}


}

@media screen and (max-width: 1050px) {




}

@media screen and (max-width: 980px) {
header nav #gnav li.nav_item a {
  color:#013268;
}

header .head_top a#menu_btn.active span {
  background-color: #013268;
}
header nav #gnav li.nav_item:hover a span:before {
    display:none;
}





}

@media screen and (max-width: 920px) {
}

@media screen and (max-width: 880px) {




}

@media screen and (max-width: 820px) {




}

@media screen and (max-width: 768px) {
/*  display:none;
}
#mainimg .mvblk .sp {
  display:block;
  object-position: 31%;
}*/

#mainimg .mvblk .img_cvr {
    width: auto;
    height: 100%;
    max-height: 500px;
}


/*図面アイコン位置調整*/
.draw_1 {
  left: 62%;
}
.draw_2 {
  top:80%;
}
.draw_3 {
  left:50%;
}
.draw_4 {
  top:auto;
  bottom: 0%;
  right: -30%;
}


/* -------------------------------------
about
------------------------------------- */
#about {
    padding: min(15.4vw,118px) 0;
}
#about .sec_wrap {
  flex-direction:column;
}
.about_img {
    width: 100%;
    max-width: 710px;
}

/* -------------------------------------
products
------------------------------------- */
#products {
    padding: min(18.22vw,140px) 0;
}
#products .sec_wrap {
  flex-direction:column;
}
.products_img {
    width: 100%;
    margin: 0 auto;
}
.products_txt_wrap {
    width: 100%;
    max-width: 450px;
}




/* -------------------------------------
works
------------------------------------- */
#works {
    padding: 145px 0 min(46vw,353px);
}
#works .sec_wrap .wsorks_img {
    width: 31.25vw;
}


/* -------------------------------------
recruit
------------------------------------- */
#recruit {
    padding: min(15.5vw,119px) 0 min(12.1vw,93px);
}


/* -------------------------------------
news
------------------------------------- */
#news {
    padding: min(20.2vw,155px) 0 min(26.8vw,206px);
}
#news .sec_wrap {
  flex-direction:column;
}
#news .sec_wrap .news_list {
    width: 100%;
}


}

@media screen and (max-width: 700px) {
}

@media screen and (max-width: 640px) {
/* -------------------------------------
works
------------------------------------- */
#works .sec_wrap {
    padding-bottom: 0;
    margin-bottom: 40px;
    padding-top:15px;
    flex-direction: column;
}
#works .sec_wrap .wsorks_img {
    width: 40vw;
    bottom:100%;
}
#works_list .item_name {
    font-size: clamp(14px,2.8vw,18px);
}



}

@media screen and (max-width: 600px) {


}

@media screen and (max-width: 500px) {
.news_listItem a {
    padding: 30px 15px 30px 0;
}

}

@media screen and (max-width: 400px) {
/* -------------------------------------
works
------------------------------------- */
  #works_list {
    margin-right: 0;     /* 右いっぱい解除 */
    width: 100%;
    padding: 40px 0 100px;
  }

  #works_list::before {
    left: 50%;             /* 白背景のズレ補正 */
    transform:translateX(-50%);
  }

  #works_list .slick-list {
    width: 100%;
  }

  #works_list .slick-slide {
    margin-right: 0;     /* 見切れ防止 */
  }

  /* 1枚を中央に */
  #works_list .works_item {
    display: flex !important;
    justify-content: center;
  }

  #works_list .item_in {
    width: 100%; /* お好みサイズ */
  }

}






}
@media screen and (max-width: 360px) {


}

@media screen and (max-width: 320px) {

}

@media screen and (min-width: 769px) {
 
}