@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;
}
.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 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 auto;
}
.top_lead {
  font-size: clamp(1.063rem, 0.948rem + 0.57vw, 1.438rem) /*17-23|320-1366*/;
  color: #01a0e1;
  margin: 0;
  text-align: left;
  font-weight: 500;
  line-height: 2.6em;
}
.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 90px auto;
  }
  .top_lead {
    text-align: center;
    margin: 0 90px;
  }
  .lead_last {
    margin-bottom: 90px;
  }
  .motif {
    width: 80%;
    margin: 0 auto 90px auto;
  }
  .top_square_logo {
    width: 164px;
  }
}
/*==============
top-CONTENTS
==============*/
#top_contents {
  padding-top: 110px;
}
#top_contents section {
  position: relative;
  margin-bottom: 60px;
}
.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) /*26-40|320-1366*/;
  letter-spacing: 0.3em;
  font-weight: 500;
  margin-bottom: 4px;
}
.contents_header p {
  font-size: clamp(0.813rem, 0.717rem + 0.48vw, 1.125rem) /*13-18|320-1366*/;
  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;
  }
}
/*要素別.contents_header*/
#contents_works .contents_header {
  left: 24vw;
  bottom: 8%;
}
#contents_case .contents_header {
  left: 17vw;
  bottom: 16%;
}
@media all and (max-width: 400px) {
  #contents_case .contents_header {
    left: 17vw;
    bottom: 15%;
  }
}
#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/mask_contents_case_ti_sp.svg");
  mask-repeat: no-repeat;
  mask-size: cover;
  mask-position: center;
  -webkit-mask-image: url("../img/mask_contents_case_ti_sp.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: cover;
  -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: 120px;
    padding-bottom: 60px;
  }
  #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_case .layer img {
    aspect-ratio: 1351 / 271;
  }
  #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: -100px;
  }
  #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/mask_contents_case_ti.svg");
    mask-repeat: no-repeat;
    mask-size: cover;
    mask-position: center;
    -webkit-mask-image: url("../img/mask_contents_case_ti.svg");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: cover;
    -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;
  }
}
/*==============
top-RECRUIT
==============*/
#top_recruit {
  position: relative;
}
#top_recruit_bg {
  z-index: -1;
  width: 100%;
}
#top_recruit_bg img {
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
}
#top_recruit_txt {
  width: 94vw;
  position: absolute;
  top: 50px;
  left: 0;
  right: 0;
  margin: auto;
}
#top_recruit .top_ti,
#top_recruit .top_ti_under {
  color: #fff;
}
#top_recruit .top_ti {
  font-size: clamp(1.25rem, 1.021rem + 1.15vw, 2rem) /*20-32|320-1366*/ !important;
  margin-bottom: 32px;
}
#top_recruit .top_ti_under {
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
  font-size: clamp(2rem, 1.331rem + 3.35vw, 4.188rem) /*32-67|320-1366*/;
  font-weight: 600;
  margin-bottom: 32px;
}
#top_recruit .top_ti_under span {
  margin-left: 0.7em;
}
#top_recruit_inner {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#top_recruit .btn_black {
  max-width: 260px;
  margin: 0 auto 70px auto;
}
#top_recruit .btn_black a:hover {
  opacity: 1;
}
@media screen and (min-width: 1281px) {
  #top_recruit {
    margin-bottom: 32px;
  }
  #top_recruit .top_ti_under span {
    margin-left: 0;
  }
}
/*==============
banner
==============*/
#banner {
  padding: 88px 20px;
}
.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) /*26-35|320-1366*/;
  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) /*13-16|320-1366*/;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
}
.bn_products_txt span {
  bottom: -30px;
}
.bn_shop span,
.bn_soil span {
  bottom: 20px;
}
.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;
  }
  #banner ul {
    display: flex;
    flex-wrap: wrap;
    max-width: 1000px;
    margin: 0 auto;
  }
  .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: 40px;
  }
  .bn_shop {
    width: calc(50% - 4px);
    margin-right: 8px;
  }
  .bn_soil {
    width: calc(50% - 4px);
    margin-right: 0;
  }
  .bn_shop a,
  .bn_soil a {
    padding: 90px 60px;
  }
  .bn_products:hover,
  .bn_shop:hover,
  .bn_soil:hover {
    opacity: 0.6;
  }
}
/*==============
top-NEWS
==============*/
#top_news {
  padding-top: 64px;
  background: rgba(255, 255, 255, 0.5);
}
#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;
  }
}