@charset "UTF-8";
/*==============
loading
==============*/
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100dvh;
  background-color: #fff;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.5s ease;
  overflow: hidden;
}

.loading-overlay.fade-out {
  opacity: 0;
  pointer-events: none;
}

.loading-box {
  text-align: center;
  letter-spacing: 0.06em;
  font-size: 14px;
}

.loading-box img {
  width: 150px;
  margin-bottom: 20px;
}

.loading-text span {
  opacity: 0;
  animation: fadeIn 0.2s forwards;
  color: #01a0e1;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}
@media screen and (min-width: 1281px) {
  .loading-box {
    font-size: 19px;
  }
  .loading-box img {
    width: 200px;
    margin-bottom: 20px;
  }
}
/*==============
top-slide
==============*/
.slick {
  width: auto;
  overflow: hidden;
}

.slick,
.slick li {
  height: 100vh;
  height: 100dvh;
}

.slide-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.img-base {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.img-overlay {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: auto;
}

/*==============
top-PURPOSE
==============*/
.motif {
  width: 100%;
  margin: 0 auto 48px auto;
  display: block;
}

#statement_ti {
  width: 96%;
  margin: 0 auto 48px;
}

.top_lead {
  font-size: clamp(1.063rem, 0.948rem + 0.57vw, 1.438rem);
  color: #01a0e1;
  margin: 0;
  text-align: left;
  font-weight: 500;
  line-height: 2.1;
  margin-bottom: 32px;
}
.top_lead h1 {
  font-weight: inherit;
  line-height: inherit;
  width: auto;
  font-size: inherit;
  display: inline;
  margin: 0;
}

.lead_last {
  margin-bottom: 60px;
}

.top_square_logo {
  display: block;
  width: 130px;
  height: auto;
  margin: 0 auto;
}

@media screen and (min-width: 1281px) {
  #statement_ti {
    margin: 0 auto 97px;
  }
  .top_lead {
    text-align: center;
    margin: 0 90px 97px;
    line-height: 2.85;
  }
  .top_lead h1 {
    display: block;
  }
  .lead_last {
    margin-bottom: 90px;
  }
  .motif {
    width: 80%;
    margin: 0 auto 90px auto;
  }
  .top_square_logo {
    width: 164px;
  }
}
@media screen and (max-width: 960px) {
  .content_wrap {
    padding-top: 60px;
  }
  .top_lead {
    margin-bottom: 50px;
  }
}
/*==============
top-CONTENTS
==============*/
#top_contents {
  padding-top: 110px;
  background-color: #dbe7ed;
}
#top_contents .top_ti_under {
  letter-spacing: normal;
  margin-bottom: 36px;
  font-size: 16px;
}
#top_contents .top_ti {
  font-weight: bold;
}

#top_contents section {
  position: relative;
}

.link_img {
  width: 88%;
  height: auto;
  display: block;
  margin: 0 auto;
  overflow: hidden;
  aspect-ratio: 69/109;
  border-radius: 11px;
}

.link_img a {
  text-decoration: none;
  color: #000;
}

.link_img img {
  border-radius: 11px;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.contents_header {
  z-index: 2;
  position: absolute;
}

.contents_header h3,
.contents_header p {
  color: #fff;
}

.contents_header h3 {
  font-size: clamp(1.625rem, 1.357rem + 1.34vw, 2.5rem);
  letter-spacing: 0.3em;
  font-weight: 500;
  margin-bottom: 4px;
}

@media screen and (max-width: 960px) {
  .contents_header h3, .contents_header p {
    text-align: center;
  }
}
.contents_header p {
  font-size: clamp(0.813rem, 0.717rem + 0.48vw, 1.125rem);
  letter-spacing: 0.1em;
}

.contents_title_area {
  position: relative;
  width: 100vw;
}

.blur {
  width: 100vw;
  height: auto;
  position: absolute;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  z-index: 0;
  bottom: 0;
}

.layer img {
  position: relative;
  width: 100vw;
  z-index: 1;
}

/*要素別.layer img
#contents_works .layer img,
#contents_aboutus .layer img {
  filter: brightness(0.89);
}*/
/*要素別.contents_title_area*/
#contents_works .contents_title_area {
  margin-top: -100px;
}

#contents_case .contents_title_area {
  margin-top: -100px;
}

#contents_aboutus .contents_title_area {
  margin-top: -70px;
}

@media all and (min-width: 768px) {
  #contents_works .contents_title_area {
    margin-top: -200px;
  }
}
@media (max-width: 960px) {
  #contents_case .contents_title_area {
    margin-top: 0px;
    width: 190%;
    translate: -1% -55%;
    pointer-events: none;
  }
}
/*要素別.contents_header*/
#contents_works .contents_header {
  left: 24vw;
  bottom: 8%;
}

#contents_case .contents_header {
  left: 27vw;
  bottom: 35%;
}

#contents_case .blur {
  aspect-ratio: auto;
  height: 100%;
  width: 100%;
}

#contents_case .layer img {
  aspect-ratio: auto;
  opacity: 0.8;
  width: 100%;
}

#contents_aboutus .contents_header {
  left: 3vw;
  bottom: 3.5%;
}

@media all and (min-width: 767px) {
  #contents_aboutus .contents_header {
    bottom: 6.5%;
  }
}
@media all and (max-width: 767px) {
  #contents_aboutus .contents_header p {
    font-size: 68.8%;
  }
}
/*要素別.blur*/
.blur_works {
  aspect-ratio: 64/35;
  mask-image: url("../img/mask_contents_works_ti_sp.svg");
  mask-repeat: no-repeat;
  mask-size: cover;
  mask-position: center;
  -webkit-mask-image: url("../img/mask_contents_works_ti_sp.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: cover;
  -webkit-mask-position: center;
}

.blur_case {
  aspect-ratio: 128/63;
  mask-image: url("../img/contents_image_sp.svg");
  mask-repeat: no-repeat;
  mask-size: 100% auto;
  mask-position: center;
  -webkit-mask-image: url("../img/contents_image_sp.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% auto;
  -webkit-mask-position: center;
}

.blur_aboutus {
  aspect-ratio: 64/23;
  mask-image: url("../img/mask_contents_aboutus_ti_sp.svg");
  mask-repeat: no-repeat;
  mask-size: cover;
  mask-position: center;
  -webkit-mask-image: url("../img/mask_contents_aboutus_ti_sp.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: cover;
  -webkit-mask-position: center;
}

@media screen and (min-width: 961px) {
  #top_contents {
    padding-top: 159px;
  }
  #top_contents .top_ti {
    margin-bottom: 10px;
  }
  #top_contents .top_ti_under {
    margin-bottom: 85px;
  }
  #top_contents section {
    margin-bottom: 78px;
  }
  .link_img {
    aspect-ratio: 1199/621;
  }
  .link_img:hover img {
    transform: scale(1.08);
  }
  /*要素別.layer img*/
  #contents_works .layer img {
    aspect-ratio: 320/79;
  }
  #contents_aboutus .layer img {
    aspect-ratio: 268/45;
  }
  /*要素別.contents_title_area*/
  #contents_works .contents_title_area {
    margin-top: -200px;
  }
  #contents_case .contents_title_area {
    margin-top: -170px;
    width: 148%;
    translate: -1% 0;
    pointer-events: none;
  }
  #contents_aboutus .contents_title_area {
    margin-top: -40px;
  }
  /*要素別.contents_header*/
  #contents_works .contents_header {
    left: 24vw;
    bottom: 12%;
  }
  #contents_case .contents_header {
    left: 17vw;
    bottom: 20%;
  }
  #contents_aboutus .contents_header {
    left: 10vw;
    bottom: 10%;
  }
  .blur {
    bottom: 0;
  }
  .blur_works {
    aspect-ratio: 320/79;
    mask-image: url("../img/mask_contents_works_ti.svg");
    mask-repeat: no-repeat;
    mask-size: cover;
    mask-position: center;
    -webkit-mask-image: url("../img/mask_contents_works_ti.svg");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: cover;
    -webkit-mask-position: center;
  }
  .blur_case {
    aspect-ratio: 1351/271;
    mask-image: url("../img/contents_image.svg");
    mask-repeat: no-repeat;
    mask-size: 100% auto;
    mask-position: center;
    -webkit-mask-image: url("../img/contents_image.svg");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100% auto;
    -webkit-mask-position: center;
  }
  .blur_aboutus {
    aspect-ratio: 268/45;
    mask-image: url("../img/mask_contents_aboutus_ti.svg");
    mask-image: none;
    mask-repeat: no-repeat;
    mask-size: cover;
    mask-position: center;
    -webkit-mask-image: url("../img/mask_contents_aboutus_ti.svg");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: cover;
    -webkit-mask-position: center;
  }
  .boutus_wrap_catch {
    margin-bottom: 32px;
  }
  .sign02 {
    margin-left: 46px;
  }
}
/*==============
recruit
==============*/
body.front-page article .recruit {
  background-color: #D8E7ED;
  margin-top: 32px;
  padding-top: 40px;
  background-image: url("../img/top_recruit_bg_sp.jpg");
  background-size: cover;
  background-position: bottom;
  background-repeat: no-repeat;
  aspect-ratio: 750/1072;
}
body.front-page article .recruit .content {
  color: #fff;
  text-align: center;
}
body.front-page article .recruit .content .recruitTitle {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 35px;
}
body.front-page article .recruit .content .recruitText {
  font-size: 40px;
  line-height: 1.5;
  margin-bottom: 43px;
}
body.front-page article .recruit .btn_black {
  max-width: 258px;
  font-size: 13px;
}
@media screen and (min-width: 961px) {
  body.front-page article .recruit {
    background-image: url("../img/top_recruit_bg.jpg");
    aspect-ratio: 2732/1374;
    margin-top: 43px;
  }
  body.front-page article .recruit .content .recruitTitle {
    font-size: 32px;
  }
  body.front-page article .recruit .content .recruitText img.pc_on {
    margin: 37px auto 73px;
    display: block;
    max-width: 1022px;
  }
  body.front-page article .recruit .btn_black {
    font-size: 16px;
  }
}

/*==============
banner
==============*/
#banner {
  padding: 88px 20px;
  background-color: #ecf3f6;
}
#banner ul li {
  height: 164px;
}
#banner ul li a {
  padding: 0;
  display: grid;
  place-items: center;
}
#banner ul li a img {
  translate: 0 -30%;
  width: 63%;
}
#banner ul li a p {
  translate: 0 -15px;
}

.bn_products,
.bn_shop,
.bn_soil {
  border: 2px solid #b4bec3;
  border-radius: 11px;
  width: 100%;
  margin-bottom: 8px;
}

.bn_products {
  background: linear-gradient(180deg, rgba(161, 201, 252, 0.4) 10%, rgba(167, 217, 229, 0.4) 90%);
  position: relative;
}

.bn_products .flex_center {
  display: flex;
  justify-content: center;
  padding: 16px 0;
}

.bn_products a {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  text-indent: -9999px;
}

.bn_shop,
.bn_soil {
  text-align: center;
}

.bn_shop a,
.bn_soil a {
  text-decoration: none;
  display: block;
  width: 100%;
  height: 100%;
  color: #000;
  padding: 56px;
}

.bn_products_txt {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-left: 16px;
}

.bn_products_txt div {
  position: relative;
}

.bn_shop,
.bn_soil {
  background: #fff;
}

.bn_products_txt p,
.bn_shop p {
  font-size: clamp(1.625rem, 1.453rem + 0.86vw, 2.188rem);
  font-weight: 500;
}

.bn_shop p {
  letter-spacing: -0.1em;
}

.bn_products_txt span,
.bn_shop span,
.bn_soil span {
  display: block;
  font-size: clamp(0.813rem, 0.755rem + 0.29vw, 1rem);
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
}

.bn_products_txt span {
  bottom: -30px;
}

.bn_shop span,
.bn_soil span {
  bottom: 40px;
}

.bn_shop span::after {
  content: url("../img/window.png");
  margin-left: 8px;
}

.bn_soil img {
  max-width: 300px;
}

@media screen and (min-width: 961px) {
  .bn_products img {
    max-width: 500px;
  }
}
@media screen and (min-width: 1281px) {
  #banner {
    padding: 88px;
    padding-bottom: 0;
  }
  #banner ul {
    display: flex;
    gap: 15px;
    max-width: 1000px;
    margin: 0 auto;
  }
  #banner ul li {
    height: 235px;
  }
  .bn_products {
    flex-grow: 2;
    width: 100%;
    margin-bottom: 8px;
    padding: 32px;
  }
  .bn_products .flex_center {
    padding: 0;
  }
  .bn_products_txt {
    margin-left: 80px;
  }
  .bn_products_txt span {
    bottom: -40px;
  }
  .bn_shop span,
  .bn_soil span {
    bottom: 60px;
  }
  .bn_shop {
    width: calc(50% - 4px);
  }
  .bn_soil {
    width: calc(50% - 4px);
    margin-right: 0;
  }
  .bn_shop a,
  .bn_soil a {
    padding: 74px 100px;
  }
  .bn_products:hover,
  .bn_shop:hover,
  .bn_soil:hover {
    background-color: #cfdfe8;
  }
}
@media screen and (max-width: 960px) {
  #banner {
    padding-bottom: 1px;
  }
}
/*==============
top-NEWS
==============*/
#top_news {
  padding-top: 124px;
  background-color: #eaf3f6;
}

#newsbox {
  padding-bottom: 32px;
}

#top_news .top_ti {
  color: #000;
}

.news-item {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 20px 0;
  width: 90%;
  max-width: 980px;
  margin: 0 auto 24px auto;
}

.news-inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 980px;
  margin: 0 auto;
}

.news-inner:hover {
  opacity: 0.6;
}

.news-meta {
  display: flex;
  gap: 12px;
  align-items: center;
}

.news-meta,
.news-text {
  padding: 0 10px;
}

.badge,
.news-text,
.read-more {
  font-weight: 500;
}

.date {
  color: #000;
  font-weight: 400;
}

.badge {
  background: #01a0e1;
  color: #fff;
  padding: 2px 12px;
  border-radius: 100vh;
  font-size: 14px;
  white-space: nowrap;
}

.news-text {
  font-size: 112.5%;
  border-bottom: 1px solid #cfdde3;
  padding-bottom: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.read-more {
  font-size: 81.3%;
  text-align: center;
}

@media screen and (min-width: 1281px) {
  .news-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .news-item {
    border-bottom: 1px solid #cfdde3;
    margin-bottom: 0;
  }
  .news-item:last-of-type {
    border: none;
  }
  .news-text {
    flex: 1;
    margin: 0 20px;
    border: none;
    padding-bottom: 0;
  }
  .read-more {
    font-size: 100%;
    text-align: right;
    white-space: nowrap;
  }
  #top_news .btn_black {
    margin-top: 32px;
  }
  #top_news .btn_black a:hover {
    opacity: 1;
  }
}
@media screen and (max-width: 960px) {
  #top_news {
    padding-top: 83px;
  }
  #newsbox {
    padding-bottom: 0;
  }
}
.fv img {
  vertical-align: bottom;
}

#conpanyInfo.conpanyInfo {
  display: flex;
  align-items: center;
  margin-bottom: 0;
  gap: 101px;
  background-image: url("../img/top_company_bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding-left: 6%;
}
#conpanyInfo.conpanyInfo img {
  width: 51.2%;
}
#conpanyInfo.conpanyInfo .texts {
  line-height: 1;
}
#conpanyInfo.conpanyInfo .texts .titleEn {
  font-size: 18px;
  font-weight: bold;
  color: #01a0e2;
}
#conpanyInfo.conpanyInfo .texts .top_ti {
  text-align: left;
  font-size: 40px;
  color: #000;
  margin: 22px 0 17px;
}
#conpanyInfo.conpanyInfo .texts .lead {
  font-size: 18px;
  font-weight: 500;
}
#conpanyInfo.conpanyInfo .texts .btn_black {
  max-width: none;
  width: auto;
  margin-top: 59px;
}
#conpanyInfo.conpanyInfo .texts .btn_black a {
  width: 317px;
}
@media screen and (max-width: 960px) {
  #conpanyInfo.conpanyInfo {
    flex-direction: column-reverse;
    background-image: url("../img/top_company_bg_sp.png");
    background-size: 100% 100%;
    background-color: #dbe7ed;
    padding-top: 43px;
    padding-left: 0;
    margin-top: -70px;
    gap: 19px;
  }
  #conpanyInfo.conpanyInfo img {
    width: 88.2%;
  }
  #conpanyInfo.conpanyInfo .texts {
    text-align: center;
  }
  #conpanyInfo.conpanyInfo .texts .top_ti {
    text-align: center;
    margin: 11px 0 12px;
  }
  #conpanyInfo.conpanyInfo .texts .lead {
    letter-spacing: normal;
  }
  #conpanyInfo.conpanyInfo .texts .btn_black {
    margin-top: 25px;
  }
}