@charset "UTF-8";

@layer reset, base, third-party, components, utility, priority;

@import './reset.min.css' layer(reset);

@import "https://fonts.googleapis.com/css2?family=Inter:opsz@14..32&family=Noto+Sans+JP:wght@400;500;700&display=swap" layer(third-party);
@import "https://use.typekit.net/bbn2ppv.css" layer(third-party);
@import "https://unpkg.com/lenis@1.2.3/dist/lenis.css" layer(third-party);
@import "https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide-core.min.css" layer(third-party);

@layer base {
:root {
  /* color */
  --color-blue: #23468B;
  --color-lightblue: #2D8FB9;
  --color-mediumblue: #0050B8;
  --color-yellow: #FFD700;
  --color-gray: #EFEFEF;
  --color-darkgray: #484848;
  --color-green: #2DB98F;
   /* viewport */
  --clamp-viewport-min: 375;
  --clamp-viewport-max: 1200;

  /* font */
  --font-bahnschrift: bahnschrift, sans-serif;
  --font-futura-pt: futura-pt, sans-serif;
  --font-inter:  "Inter", sans-serif;
  /* font-weight */
  --fontweight-regular: 400;
  --fontweight-medium: 500;
  --fontweight-bold: 700;
  /* contents-mainWidth */
  --full-width: min(100%, 1920px);
  --main-width: min(95%, 1800px);
  --sub-width: min(90%, 1280px);
  /* letter-spacing */
  --wide-letter: .2em;
  /* easing */
  --easing: cubic-bezier(0.2, 1, 0.2, 1);
  --transition: 0.8s var(--easing);
  /* border-radius */
  --radius-md: .8rem;
  --radius-20: 2rem;
  --radius-40: 4rem;
  --radius-50: 5rem;
  --radius-60: 6rem;
  --radius-80: 8rem;
  --display-property: revert;
}

/* 各種base計算式設定 */
*,
::before,
::after{
  /* font-clampサイズ設定 */
  --clamp-root-font-size: 10;
  --cqi-content-width: 1800;
  --clamp-slope: calc((var(--clamp-max) - var(--clamp-min)) / (var(--clamp-viewport-max) - var(--clamp-viewport-min)));
  --intercept: calc(var(--clamp-min) - (var(--clamp-slope) * var(--clamp-viewport-min)));
  --preffered-value: calc(
    var(--intercept) * (1rem / var(--clamp-root-font-size)) + (var(--clamp-slope) * 100vi)
  );
  --clamp: clamp(
    calc(var(--clamp-min) * (1rem / var(--clamp-root-font-size))),
    var(--preffered-value),
    calc(var(--clamp-max) * (1rem / var(--clamp-root-font-size)))
  );
   /* clamp-余白サイズ設定 */
  --one-cqi-px: calc(var(--cqi-content-width) / 100);
  --cqi-value: calc(var(--clamp-cqi-max) / var(--one-cqi-px));
  --cqi-calculated: calc(var(--cqi-value) * 1cqi);
  --clamp-cqi: clamp(
                calc(var(--clamp-cqi-min) / var(--clamp-root-font-size) * 1rem),
                var(--cqi-calculated),
                calc(var(--clamp-cqi-max) / var(--clamp-root-font-size) * 1rem)
  );

  font-size: var(--clamp);
}

html {
  font-size: 62.5%;
  /* scroll-behavior: smooth; */
}

/* Noto Sans JPを @font-face でローカルフォントを優先 */
@font-face {
  font-family: "Local Noto Sans JP";
  src: local("Noto Sans JP");
}

body {
  font-family: "Local Noto Sans JP", "Noto Sans JP", Arial, Meiryo, "Yu Gothic", "Helvetica Neue", Helvetica, sans-serif;
  font-weight: var(--fontweight-regular);
  line-height: 1.5;
  overflow-wrap: anywhere; /* 収まらない場合に折り返す */
  line-break: strict; /* 禁則処理を厳格に適用 */

  --clamp-min: 14;
  --clamp-max: 16;

  @media (width <= 599px){
    &:has(.fixed-bottom-menu){
      padding-bottom: 5rem;
    }
  }
}

a{
  transition: var(--transition);
}

@media (any-hover: hover) {
  a:hover {
    opacity: 0.7;
    transition: var(--transition);
  }

  input[type="submit"]:hover {
    opacity: 0.7;
  }

}

}
/* /////@layer base */

@layer priority{

/* 共通パーツ */
.pc-only {
  display: var(--display-property);

  @media (width <= 599px) {
    display: none;
  }
}

.sp-only {
  display: none;

  @media (width <= 599px) {
    display: var(--display-property);
  }
}

.over-flow-clip {
  overflow-x: clip;
}

/* gsap設定用 */
.js-fixed{
  height: 100vh;

  @media (width <= 599px){
    height: 170vh;
  }
}

.js-fixed__inner{
  display: grid;
  place-content: center;
  height: 100%;
}

.js-sticky {
  position: sticky;
  top: var(--offset);
  height: calc(var(--visual-contents-height) - var(--offset));
  overflow: hidden;
}

/* .m-rotate-link{
  color: transparent;

  @media (width <= 599px){
    color: currentcolor;

      &.m-button-parts{
        color: var(--rotate-link-color);
      }
  }
} */

/* スマホ画像全幅 */
.m-sp-full-width{
  @media (width <= 599px){
    width: 100vw;
    margin-inline: calc(50% - 50vw);
  }

}


}
/* /////@layer priority */

@layer components {
/* l-*******レイアウトパーツ */
.l-section {
  width: 100%;
  margin-inline: auto;
}

/* .l-section.-bg-harf-blue {
  color: white;
  background: linear-gradient(115deg, #2B53A1 0%, #2B53A1 50%, var(--color-blue) 50%, var(--color-blue) 100%);
} */

.l-section.-bg-blue {
  background-color: var(--color-blue);
}

.l-section.-bg-lightblue {
  background-color: var(--color-lightblue);
}

.l-section.-bg-gray {
  background-color: var(--color-gray);
}

.l-section.-bg-darkgray {
  color:white;
  background-color: var(--color-darkgray);
}

.l-section:has(.m-logo-bg){
  position: relative;
}

.l-contents {
  container-type: inline-size;
  width: var(--main-width);
  padding: var(--clamp-cqi) 0;
  margin-inline: auto;

  --clamp-cqi-max: 94;
  --clamp-cqi-min: 56;

  @media (width <= 599px){
    --main-width: 90%;
  }
}

.l-contents__inner{
  width: min(90%, 1135px);
  margin-inline: auto;
}

.l-inline-size{
  container-type: inline-size;
}

.l-outside-right{
  margin-left: var(--content-margin);

  --content-margin: calc(100vw - var(--main-width));

  .l-contents{
    padding-right: var(--content-margin);
    margin-inline: revert;
  }

  @media (width <= 599px){
    margin-left: revert;

    .l-contents{
      width: 100%;
      padding-right: revert;
    }
  }
}

.l-outside-left{
  margin-right: var(--content-margin);

  --content-margin: calc(100vw - var(--main-width));

  .l-contents{
    padding-left: var(--content-margin);
    margin-inline: revert;
  }

  @media (width <= 599px){
    margin-right: revert;

    .l-contents{
      width: 100%;
      padding-left: revert;
    }
  }

}


/* m-*******モジュールパーツ */
.m-tittle-block {
  width: fit-content;
  margin-inline: auto;
  font-family: var(--font-bahnschrift);
  font-weight: var(--fontweight-regular);

  --clamp-min: 18;
  --clamp-max: 30;
}

.m-tittle-block.-blue{
  color: var(--color-blue);
}

.m-tittle-wrap{
  margin-bottom: var(--clamp-cqi);

  --clamp-cqi-max: 72;
  --clamp-cqi-min: 40;
}

.m-tittle-block__sub{
  width: fit-content;
  margin-inline: auto;
  margin-top: 2rem;
  line-height: 2;
  text-align: center;

  --clamp-max:18;
  --clamp-min:14;

  @media (width <= 599px){
    margin-top: .8rem;
  }
}


.m-text-block {
  width: 100%;
  word-break: auto-phrase;

  --clamp-max:18;
  --clamp-min:14;
}

.m-text-block.-border-top{
  padding-top: 3.8rem;
  border-top: 1px solid var(--color-blue);
}

.m-cards-list {
  display: grid;
  grid-template-columns: repeat(var(--column), 1fr);

  --column: 2;

  @media (width <= 599px){
    --column: 1;
  }
}

.m-subgrid-card{
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span var(--row-num);
}

.m-flex-2col-card{
  --breakpoint: 599px;
  --static-column: 400px;
  --fluid-column: calc(var(--breakpoint) - var(--static-column));

  display: block flex;
  reading-flow: flex-visual;
  flex-wrap: wrap;

  & > :nth-child(even) {
    flex-basis: var(--fluid-column);
    flex-grow: 9999;
  }

  & > :nth-child(odd) {
    flex-basis: var(--static-column);
    flex-grow: 1;
    text-align: center;
  }

}

.m-parts-wrap {
  position: relative;
}

.m-button-parts {
  --unit-block-size: 1.3rem;
  --unit-inline-size: 1.3rem;

  position: relative;
  display: flex;
  gap: 1.2rem;
  align-items: center;
  justify-content: center;
  width: min(65%, 249px);
  padding: var(--unit-block-size) var(--unit-inline-size);
  margin-inline: auto;
  font-weight: var(--fontweight-bold);
  line-height: 1;
  color: var(--color-blue);
  text-align: center;
  letter-spacing: 3.20px;
  background-color: white;
  border: 2px solid white;
  border-radius: var(--radius-40);
  transition: var(--transition);

  /* &.m-rotate-link{
    --rotate-link-color: var(--color-blue);
  } */

}

.m-button-parts.-blue{
  --rotate-link-color: white;

  color: var(--rotate-link-color);
  background-color: var(--color-blue);
  border: 2px solid var(--color-blue);

}

@media (any-hover: hover) {
  .m-button-parts:hover{
    color: white;
    background-color: var(--color-blue);
    opacity: 1;
    transition: var(--transition);
    transform: scale(1.08);
  }

  .m-button-parts.-blue:hover{
    color: var(--color-blue);
    background-color: white;
    border: 2px solid var(--color-blue);
    border-radius: var(--radius-40);
    opacity: 1;
    transition: var(--transition);
  }

}


.m-stack-block{
  display: grid;

  > *{
    grid-area: 1 / 1;
  }
}

.m-grid-text{
  display: grid;
  grid-template-columns: max-content 1fr;
}

.m-potision-text-wrap{
  position: relative;
}

.m-potision-text-wrap__v-text{
  position: absolute;
  top:50%;
  white-space: nowrap;
  writing-mode: vertical-rl;
  transform: translate(-50%, -50%);
}

.m-potision-text-wrap__h-text{
  position: absolute;
  font-family: var(--font-futura-pt);
  color: white;
  text-wrap: balance;
}

/* 画像が背景のコンテンツ */
.m-visual-wrap{
  position: relative;
  width: 100%;

  --visual-contents-height: calc( 1px * var(--visual-height));

  height: var(--visual-contents-height);
  aspect-ratio: 1920 / var(--visual-height);
  overflow: hidden;

  picture{
    img{
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  &:has(.m-fixed-bg){
    clip-path: inset(0);
  }

  @media (width <= 599px){
    aspect-ratio: 390 / var(--visual-contents-height);
  }
}

.m-visual-wrap__center-contents{
  position: absolute;
  inset: 0;
  margin: auto;
}



.m-fixed-bg {
  position: fixed;
  top: 0;
  z-index: -1;
  width: 100%;
  height: 100vh;
}

/* .m-rotate-link{
  --rotate-link-color: black;
  --rotate-length: 2.4;

  overflow: hidden;
  text-shadow: 0 calc(var(--rotate-length) * -1em) 0 var(--rotate-link-color), 0 0 0 var(--rotate-link-color);
  transition: none;
}

@media (any-hover: hover) {
  .m-rotate-link:hover {
    animation: text-rotate 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  }
}

@keyframes text-rotate {
    0% {
        text-shadow: 0 calc(var(--rotate-length) * -1em) 0 var(--rotate-link-color), 0 0 0 var(--rotate-link-color);
    }

    100% {
        text-shadow: 0 0 0 var(--rotate-link-color), 0 calc(var(--rotate-length) * 1em) 0 var(--rotate-link-color);
    }
} */

.m-logo-bg{
  position: absolute;
  z-index: -1;
  aspect-ratio: 475 / 311;
}

.m-logo-bg.-gray{
  fill: var(--color-gray);
}

.m-logo-bg.-white{
  fill: white;
}

.m-radius{
  --radius: var(--radius-80);

  &.-top-right{
  border-top-right-radius: var(--radius);
  }

  &.-top-left{
  border-top-left-radius: var(--radius);
  }

  &.-bottom-right{
  border-bottom-right-radius: var(--radius);
  }

  &.-bottom-left{
  border-bottom-left-radius: var(--radius);
  }

  @media (width <= 599px){
    --radius: var(--radius-40);
  }

}

.m-float-bnr{
  position: fixed;
  top: 430px;
  right: 0;
  z-index: 99;
  display: flex;
  column-gap: 1rem;
  align-items: center;
  justify-content: space-between;
  width: min(35vw, 350px);
  padding: .9rem 1.4rem .9rem .9rem;
  margin-inline: auto;
  font-weight: var(--fontweight-bold);;
  text-align: center;
  word-break: auto-phrase;
  background-color: var(--color-yellow);
  border-radius: var(--radius-60) 0 0 var(--radius-60);
  transition: top var(--transition), transform var(--transition);
  transform: scale(.8);
  transform-origin: right center;

  --display-property: flex;

  @media (width <= 599px){
    top: 73%;
    padding: .5rem 1.4rem .5rem .5rem;

    img{
      width: 40%;
    }
  }

}

.js-float-bnr.is-centered {
  top: 77%;
  transform: translateY(-50%) scale(.8);
  transform-origin: right center;

  @media (width <= 599px){
    top: 73%;
  }
}

.m-float-bnr__tittle{
  display: grid;

  --clamp-max: 23;
  --clamp-min: 10;
  --rotate-length: 2.8;

  & span{
    display: inline-block;

    --clamp-max: 15;
    --clamp-min: 10;
  }
}

@media (any-hover: hover) {
  .m-float-bnr:hover{
    /* bottom: 50%; */
    opacity: 1;
    transition: var(--transition);
    transform: scale(.86);
    transform-origin: right center;
  }
}

.m-float-bnr.-top{
  top: 77%;
  visibility: hidden;
  opacity: 0;
  transition: var(--transition);
}

.m-float-bnr.is-centered.-top{
  visibility: visible;
  opacity: 1;
  transition: var(--transition);

  @media (width <= 599px){
      display: none;
  }
}

@media (any-hover: hover) {
  .m-float-bnr.is-centered:hover{
    /* bottom: 12%; */
    opacity: 1;
    transform: translateY(-50%) scale(.86);
  }
}


:has(> .m-hover-inset-line, > * > .m-hover-inset-line){
  overflow: clip;
  opacity: revert;
}

.m-hover-inset-line {
  --inset-color: white;
  --outline: 7px solid var(--inset-color);

  outline: var(--outline);
  outline-offset: 5px;
  transition: outline-offset .3s ease, outline .3s ease;
  transform: translateZ(0);
  will-change: outline-offset;

  img{
    position: relative;
    z-index: -1;
    transition: var(--transition);
  }
}

@media (any-hover: hover) {
  .m-hover-inset-line:hover,
  .m-hover-inset-line:focus {
    outline: var(--outline);
    outline-offset: -3rem;
    transition: outline-offset .3s ease;

    & img{
      transition: var(--transition);
    }
  }

  .m-hover-inset-line {
    outline: 0 solid transparent;
  }
}

.js-text-flow > *{
  visibility: hidden;
  opacity: 0;
}


}
/* /////@layer components */


@layer utility {

/* header */
.l-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9;
  width: 100%;
  container-type: inline-size;

  &::before{
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    content: "";
    background-color: rgb(255 255 255 / .9);
    opacity: 0;
    transition: transform .3s ease, opacity .3s ease;
    transform: translateY(-100%);
  }

  @media (width <= 599px){
    position: fixed;
    top: 2rem;
    left: 0;
    z-index: 999;
    width: 100%;

    &::before{
      top: -20px;
      height: 195%;
    }
  }
}

.header-inner {
  display: flex;
  align-items: center;
  /* width: min(96%, 1800px); */
  margin-inline: auto;

  @media (width <= 599px) {
    width: 100%;
    padding: 0 1.4rem;
  }

  @container (600px <= width <= 930px){
    flex-wrap: wrap;
    row-gap: 1.6rem;
    justify-content: center;
  }

}

.header-logo{
  display: grid;
  place-items: center;
  width: min(58%, 329px);
  margin-left: 2%;

  a{
    display: grid;

    @media (width <= 599px){
      display: revert;
      flex: 0 1 40%;
    }
  }

  @media (width <= 599px){
      margin-left: revert;
  }
}

.header-logo__lead{
  --clamp-min: 9;
  --clamp-max: 14;

  display: none;
  font-weight: var(--fontweight-regular);

  @media (width <= 599px){
    flex: 0 1 60%;

    &::before {
      height: 27px;
      margin-right: 1.4rem;
    }
  }
}

.header-navi{
  margin-left: auto;

  @container (width <= 930px){
    margin-left: revert;
  }
}

.header-naviList {
  display: grid;
  grid-template-columns: repeat(6, auto);
  align-items: center;
  width: min(58vw, 1098px);

  @container (width <= 900px){
    width: 90vw;
  }

}

.header-naviList__data {
  position: relative;
  display: grid;
  place-items: center;
  /* padding: 2.4rem 0; */
  font-weight: var(--fontweight-medium);
  line-height: 1.2;
  color: white;
  text-align: center;

  --clamp-max: 18;
  --clamp-min: 14;

  a{
    width: 100%;
    height: 100%;
    padding: 1.6rem 0;
  }

  span{
    display: block;
  }

  &:not(:nth-last-of-type(-n+3))::after {
    position: absolute;
    top: 25%;
    right: 0;
    width: 1px;
    height: 50%;
    content: "";
  }


  @media (width <= 599px){
    &:not(:nth-last-of-type(-n+3))::after {
    background-color: revert;
    }

    &:first-of-type {
    border-top-left-radius: revert;
    border-bottom-left-radius: revert;
    }

    &:nth-last-of-type(3) {
    background-color: revert;
    border-top-right-radius: revert;
    border-bottom-right-radius: revert;
    }

    a{
      padding: revert;
    }

  }
}

@media (any-hover: hover) {
  .header-naviList__data:hover{
    color: black;
    transition: color var(--transition);

    & a:hover{
      opacity: 1;
    }
  }

  .scroll-header .header-naviList__data:hover{
    color: var(--color-lightblue);
    transition: color var(--transition);
  }

  .scroll-header .header-naviList__data:nth-last-of-type(4):hover{
    /* color:white; */
    background-color: #0B2A5A;
    transition: background-color var(--transition), color var(--transition);
  }

  .scroll-header .header-naviList__data:nth-last-of-type(3):hover{
    /* color:var(--color-blue); */
    background-color: #0B2A5A;
    transition: background-color var(--transition), color var(--transition);
  }

  .scroll-header .header-naviList__data a:hover{
    opacity: 1;
  }

}


.header-naviList__ja{
  --clamp-max: 14;
  --clamp-min: 10;

  @media (width <= 599px){
      --clamp-min: 16;
  }
}

.scroll-header{
    &::before{
      opacity: 1;
      transform: translateY(0);
    }

    /* .header-navi{
      margin-top: 1.7rem;
    } */

    .header-logo__lead{
      display: none;
    }

    .header-naviList__data{
      color: black;
      background-color: revert;
      transition: background-color var(--transition), color var(--transition);

      &:nth-last-of-type(4) {
        color: white;
        background-color: var(--color-lightblue);
      }

      &:nth-last-of-type(3) {
        color: white;
        background-color: var(--color-blue);
      }
    }

    @media (width <= 599px){
      .header-naviList__data{
        color: white;

        &:is(:nth-last-of-type(4),:nth-last-of-type(3)) {
          background-color: revert;
        }
      }
    }

}


/* ////スマホnavi///// */
#navTgl {
  display: none;
}

@media (width <= 599px) {
  .open,
  .close {
    position: fixed;
    top: 8px;
    right: 8px;
    cursor: pointer;
  }

  .open {
    z-index: 3;
    width: 70px;
    height: 50px;
    margin: 0;
    transition: background 0.5s, transform 0.5s cubic-bezier(0.76, 0.52, 0.29, 1.25);
  }

  .open span,
  .open::before,
  .open::after {
    position: absolute;
    top: 40%;
    left: 25%;
    width: 55%;
    content: "";
    border-bottom: 4.5px solid var(--color-blue);
    border-radius: 5px;
    transition: transform 0.5s cubic-bezier(0.76, 0.52, 0.29, 1.25);
  }

  .open::before {
    top: calc(32%);
    width: 55%;
    transform: translateY(-8px);
  }

  .open::after {
    top: calc(48%);
    width: 55%;
    transform: translateY(8px);
  }

  .close {
    z-index: 1;
    width: 100%;
    height: 100%;
    pointer-events: none;
    transition: background 0.5s;
  }

  #navTgl:checked + .open span {
    transform: scaleX(0);
  }

  #navTgl:checked + .open::before {
    top: calc(40% - 1px);
    width: 55%;
    transform: rotate(45deg);
  }

  #navTgl:checked + .open::after {
    top: calc(40% - 1px);
    width: 55%;
    transform: rotate(-45deg);
  }

  /* ドロワーメニュー */
  .menu {
    position: fixed;
    top: -2rem;
    right: 0;
    z-index: -1;
    box-sizing: border-box;
    display: grid;
    grid-template-rows: auto;
    gap: 3rem;
    align-items: flex-start;
    width: 85%;
    height: 100vh;
    height: calc((1vh * 105) + 2rem);
    padding: 2rem;
    margin: auto;
    color: white;
    text-align: center;
    visibility: hidden;
    background: rgb(45 143 185 / .9);
    opacity: 0;
  }

  .header-naviList {
    grid-template-columns: 1fr;
    gap: 0 3rem;
    width: 95%;
    padding: 0;
    margin-inline: auto;
    margin-top: 20vw;
    overflow-y: scroll;
  }

  .header-naviList__data {
    width: 100%;
    padding: 3.2rem 0 1.4rem;
    color: white;
    text-align: center;
    background-color: revert;

    --clamp-min: 16;

    &:not(:last-of-type) {
      border-bottom: 1px solid white;
    }

    a{
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
    }
  }

  .sp-menu-tittle{
    --clamp-min: 18;

    font-weight: var(--fontweight-regular);
  }

}

/* mainvisual */
.mv-top{
  position: relative;
  width: 100%;
  height: 100vh;
  aspect-ratio: 1920 / 820;
  clip-path: inset(0);

  :is(picture,.m-fixed-bg) img{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .m-potision-text-wrap__h-text{
    bottom: 13%;
    left: 50%;
    width: 70%;
    line-height: 1;
    text-align: center;
    word-break: keep-all;
    transform: translate(-50%, -50%);

    --clamp-max: 60;
    --clamp-min: 22;

    @media (width <= 599px){
      bottom: 23%;
      width: 100%;
    }
  }

  @media (width <= 599px){
    height: 92vh;
  }


}

.js-switch-image-wrapper .js-parallax[src$="main.webp"]{
  @media (width <= 599px){
    display: none;
  }
}

.mv-top__logo{
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(62vw, 900px);
  aspect-ratio: 1;
  mix-blend-mode: overlay;
  transform: translate(-50%, -50%);

  .mv-top__logo-left{
    fill: #16B1F3;
  }

  .mv-top__logo-right{
    fill: white;
  }

  @media (width <= 599px){
    top: 30%;
  }
}

.mv-top.-lower{
  height: 440px;
  aspect-ratio: 1920 / 440;
  overflow: hidden;

  @media (width <= 599px){
    height: auto;
    /* aspect-ratio: 428 / 344; */
    aspect-ratio: 428 / 260;

    :is(picture,.m-fixed-bg) img{
    object-position: 50% -50px;
    }
  }

  picture:has(.js-parallax) {
    display: block;
    width: 100%;
    height: min(74vw, 440px);

    @media (width <= 599px){
      height: auto;
    }
  }



  .mv-top__lead{
    top: 54%;
    left: 50%;
    gap: 1.6rem;
    letter-spacing: revert;
    transform: translate(-50%, -50%);

    @media (width <= 599px){
        top: 55%;
    }
  }

  .m-tittle-block{
    --clamp-max: 30;
    --clamp-min: 18;
  }

  .m-tittle-block__sub{
    margin-top: -.8rem;

    --clamp-min: 14;
  }

}

.mv-top__lead{
  position: absolute;
  bottom: 10%;
  left: 3%;
  width: min(85vw, 670px);
  line-height: 9rem;
  color: white;
  letter-spacing: var(--wide-letter);

  --clamp-max: 50;
  --clamp-min: 22;

  @media (width <= 599px){
    top: 45%;
    bottom :revert;
    left: 50%;
    line-height: 4rem;
    text-align: center;
    word-break: keep-all;
    transform: translateX(-50%);
  }

}

.mv-top__roll{
  container-type: inline-size;
  position: fixed;
  top: 0;
  right: calc(1% + (1920px - 100vw) * -0.11);
  z-index: -1;
  display: flex;
  width: min(90%, 1640px);
  height: 100%;

  picture{
    display: block;
    width: 100%;
    height: 100%;
  }
}

.mv-top__roll-left{
  position: absolute;
  left: 23%;
  width: 42vw;
  height: 100vh;
  clip-path: polygon(82% 0%, 97% 0%, 97% 0%, 82% 0%);

  picture{
    img{
      object-position: 66% 50%;
    }
  }
}

.mv-top__roll-center{
  position: absolute;
  left: calc(45% + (1920px - 100vw) * 0.04);
  width: 50vw;
  height: 100vh;
  margin-left: -8rem;
  clip-path: polygon(53% 0%, 62% 0%, 62% 0%, 53% 0%);

  picture{
    img{
      object-position: 19% 50%;
    }
  }
}

.mv-top__roll-right{
  position: absolute;
  left: 67%;
  width: 50vw;
  height: 100vh;
  clip-path: polygon(16.8% 0%, 22% 0%, 22% 0%, 16.8% 0%);

  picture{
    img{
      object-position: -15vw -55px;
    }
  }

}



/* scroll-down */
.scroll-down {
  position: absolute;
  right: 1.2vw;
  bottom: 5%;
  width: fit-content;
  height: 100vh;
}


.scroll-down span {
  position: absolute;
  right: 1px;
  bottom: 0;
  z-index: 2;
  display: inline-block;
  width: fit-content;
  padding: 18px 18px 308px; /* テキスト線の距離等 */
  overflow: hidden;
  font-family: var(--font-bahnschrift);
  line-height: 1;
  color: white;
  text-transform: uppercase;
  letter-spacing: .2em;
  writing-mode: vertical-lr;

  --clamp-max: 18;
}

.scroll-down span::before {
  position: absolute;
  bottom: 0;
  left: 45%;
  width: 1px;
  height: 294px;
  content: '';
  background: white;
}

.scroll-down span::after {
  position: absolute;
  bottom: 0;
  left: 45%;
  width: 1px;
  height: 294px;
  content: '';
  background: var(--color-darkgray);
  animation: sdl01 2s cubic-bezier(1, 0, 0, 1) infinite;
}

@keyframes sdl01 {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }

  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }

  50.1% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }

  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}

.recruit_bnr{
  position: absolute;
  bottom: 43.5%;
  left: 3%;
  width: min(290px, 17vw);
  aspect-ratio: 1 / 1;

  @media (width <= 599px){
    bottom: 14%;
    left: 20%;
    width: 30vw;
    transform: translateX(-50%);
  }
}



/* Slide設定 */
/* 矢印のクリック範囲など */
.button {
  z-index: 1;
  width: 33px;
  height: 33px;
  cursor: pointer;
  background-color: transparent; /* ボタンの背景を透明にする */
  border: none;
  transition: 0.2s;
}
/* 矢印共通のスタイル */
.button::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 33px;
  height: 33px;
  margin: auto;
  content: "";
  background-color: var(--color-gray);
  border-radius: 50%;
}
/* 前の矢印 */
.splide .prev::after {
  position: absolute;
  top: 50%;
  left: 10px;
  content: "";
  border-color: transparent var(--color-lightblue) transparent transparent;
  border-style: solid;
  border-width: 8px 10px 8px 0;
  transform: translateY(-50%);
}
/* 次の矢印 */
.splide .next::after {
  position: absolute;
  top: 50%;
  left: 13px;
  content: "";
  border-color: transparent transparent transparent var(--color-lightblue);
  border-style: solid;
  border-width: 8px 0 8px 10px;
  transform: translateY(-50%);
}

.splide .prev {
  position: absolute;
  top: 40%;
  left: 4%;
}

.splide .next {
  position: absolute;
  top: 40%;
  right: 4%;
}

/* /////top-施工例///// */
.splide.works-slide{
  .slide {
    transition: var(--transition);

    img {
      transition: var(--transition);
    }
  }

  .splide__track{
    padding-top: 1.6rem;
  }

}


@media (any-hover: hover) {
.works-slide .slide:hover {
  transform: translateY(-16px);
}

.works-slide .slide:hover img {
  transform: translateY(0);
}

}


/* /////top-SERVICE///// */
.service{
  color: white;
  background-image: url("../images/top/service-bg.webp");
  background-repeat: no-repeat;
  background-size: cover;

  .l-contents{
    padding-bottom: 16rem;
  }

  .m-tittle-block{
    --clamp-max: 80;
    --clamp-min: 55;

    font-family: var(--font-futura-pt);
  }

  .m-text-block{
    --clamp-max:22;
    --clamp-min: 16;

    width: min(100%, 1200px);
    margin-inline: auto;
    margin-top: 2rem;
    font-weight: var(--fontweight-bold);
    line-height: 1.8;

    @media (width <= 599px){
      text-align: revert;
      word-break: normal;
    }
  }

  .m-button-parts{
    z-index: 2;
    margin-top: 5.8rem;

  --rotate-link-color: var(--color-blue);
  }

  .m-potision-text-wrap__h-text{
    --clamp-max: 80;
    --clamp-min: 40;

    bottom: -8vw;
    left: 5vw;
    z-index: 1;

    @media (599px <= width <= 1650px){
      line-height: 1;
    }

    @media (width <= 599px){
      bottom: -20vw;
    }

  }

  @media (width <= 599px){
      background-image: url("../images/top/service-bg_sp.webp");

      .l-contents{
        padding-bottom: 8rem;
      }

      .m-tittle-block__sub{
        text-align: revert;
      }

      .m-text-block{
        line-height: 2.8rem;
      }
  }

}

.service-list{
  gap: var(--clamp-cqi);
  width: min(100%, 1200px);
  margin-inline: auto;
  margin-top: 6.4rem;

  --clamp-cqi-max: 56;
  --clamp-cqi-min: 40;
  --column: 1;

  @media (width <= 599px){
    gap: 3.2rem;
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    margin-top: 4rem;

    & a{
      display: block;
      width: 95%;

      /* &:nth-last-of-type(1){
        margin-left: auto;
      } */
    }
  }

}

.service-list__item{
  --row-num:2;

  &:nth-of-type(2){
    & a{
      margin-left: auto;
    }
  }
}

.service-list__image{
  position: relative;
}

.service-list__tittle{
  position: absolute;
  top: 13cqi;
  left: 8cqi;
  width: 80%;
  font-family: var(--font-futura-pt);
  line-height: 1.5;

  --clamp-max: 65;
  --clamp-min: 24;

  & span{
    display: block;
    font-family: revert;
    font-weight: var(--fontweight-bold);
    letter-spacing: .9rem;

    --clamp-max: 45;
    --clamp-min: 24;
  }

  @media (width <= 599px){
    top: 6cqi;
    left: 6cqi;
    line-height: 1.2;

    --clamp-min: 32;

    & span{
      margin-top: 1.2rem;
    }
  }
}

.service-list__btn{
  position: absolute;
  bottom: 9cqi;
  left: 8cqi;
  width: 212px;
  padding-bottom: 1rem;
  font-weight: var(--fontweight-bold);
  border-bottom: 3px solid white;
  transition: var(--transition);

  --clamp-max: 20;
  --clamp-min: 16;

  /* 下線用の疑似要素 */
  &::before {
    position: absolute;
    bottom: -3.8rem;
    left: 0;
    width: 0;
    height: 5px;
    content: '';
    background-color: white;
    transition: width var(--transition);
  }

  /* 矢印の追加 */
  &::after {
    position: absolute;
    right: 26px;
    bottom: 20px;
    width: 20px;
    height: 20px;
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 49.5 36'%3E%3Cpath d='M5.8,34.1l39.2-.7L5.8,3.1v31' stroke='white' fill='none' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }

  & span{
    position: absolute;
    top: 4.5rem;
    right: 0;
    font-family: var(--font-futura-pt);
    font-weight: var(--fontweight-regular);
    opacity: 0;
    transition: var(--transition);

    --clamp-max: 18;
    --clamp-min: 12;
  }

  @media (width <= 599px){
    width: 190px;
    padding-bottom: .6rem;
  }

}

@media (any-hover: hover) {
  a:has(.m-hover-inset-line){
      opacity: revert;
  }

  .m-hover-inset-line:hover{
    & img{
      filter: brightness(.7);
      transform: scale(1.05);
    }

    .service-list__btn{
      width: 276px;
      letter-spacing: .6rem;

      &::before {
        width: 100%;
      }

      & span{
        letter-spacing: normal;
        opacity: 1;
        transition: var(--transition);
      }

    }
  }
}


.demolition-process{
  display: flex;
  column-gap: 3.2rem;
  align-items: center;
  width: min(90%, 670px);
  padding: 1.3rem 3.4rem;
  margin-inline: auto;
  margin-top: var(--clamp-cqi);
  font-weight: var(--fontweight-bold);
  text-align: center;
  background-color: var(--color-lightblue);
  border-radius: var(--radius-60) 0 var(--radius-60) 0;

  --clamp-cqi-max:100;
  --clamp-cqi-min:60;

  .m-text-block{
    --clamp-max: 16;
    --clamp-min: 10;

    margin-top: 2rem;
  }

  img{
    width: min(53%, 263px);
  }

  @media (width <= 599px){
    column-gap: 0;
    padding: .8rem 2rem;
    word-break: keep-all;

    .m-text-block{
      margin-top: 0;
      line-height: 2rem;
    }
  }

}

.demolition-process__tittle{
  --clamp-max: 24;
  --clamp-min: 16;
}


/* /////top-COMPANY///// */
.m-visual-wrap.-company{
  --visual-height: 610;

  .m-visual-wrap__center-contents{
    width: min(75%, 463px);
    aspect-ratio: 1015 / 622;
  }

  .m-fixed-bg{
    top: 80px;
  }

  @media (width <= 599px){
    .m-fixed-bg{
      top: 0;
    }
  }
}

.company{
  position: relative;
  background: linear-gradient(180deg, var(--color-gray) 0%, var(--color-gray) 68%, white 68%, white 100%);

  .l-contents{
    width: var(--sub-width);
    padding-top: 12rem;
  }

  .m-text-block{
    line-height: 5.4rem;
    text-align: center;
  }

  .m-button-parts{
    margin-top: 7rem;
  }

  @media (width <= 599px){
    background: linear-gradient(180deg, var(--color-gray) 0%, var(--color-gray) 80%, white 80%, white 100%);

    .l-contents{
      padding-top: 7.2rem;
    }

    .m-text-block{
      line-height: 3rem;
      text-align: revert;
      word-break: normal;
    }

    .m-button-parts{
      margin-top: 5.2rem;
    }
  }

}

.company-quote{
  position: absolute;
  top: -6rem;
  left: 50%;
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  width: min(90%, 600px);
  padding: 1rem;
  color: white;
  text-align: center;
  background-color: var(--color-mediumblue);
  border-radius: 20rem;
  transform: translateX(-50%);

  .m-text-block{
    line-height: revert;
    word-break: keep-all;

    --clamp-min: 10;
  }

  & > :nth-child(1){
    width: min(50%, 206px);
  }

  & > :nth-child(2){
    flex-grow: 1;
  }
}

.company-quote__tittle{
  display: grid;
  place-items: center;
  font-weight: var(--fontweight-bold);

  --clamp-max: 30;
  --clamp-min: 14;
}

.company-list{
  --column: 3;
  --clamp-cqi-max: 80;
  --clamp-cqi-min: 20;
  --cqi-content-width: 1036;

  gap: 0 var(--clamp-cqi);
  width: min(100%, calc(var(--cqi-content-width) * 1px));
  margin-inline: auto;
  margin-top: 9.2rem;
  margin-bottom: 5.2rem;

  .m-text-block{
    --clamp-max: 14;
    --clamp-min: 14;

    line-height: 3.2rem;
    text-align: center;
  }

  @media (width <= 599px){
      /* display: flex;
      flex-wrap: nowrap;
      gap: 0 4rem;
      width: 100vw;
      max-width: 600px;
      padding: 1rem 3.2rem;
      margin-inline: calc(50% - 50vw);
      margin-top: 6rem;
      margin-bottom: revert;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scroll-snap-type: x proximity; */

      gap: 0 1rem;
      margin-top: 6rem;
      margin-bottom: revert;



      .m-text-block{
        line-height: 2.7rem;
        text-align: revert;
      }
  }
}


.company-list__data{
  --clamp-cqi-max: 48;
  --clamp-cqi-min: 16;
  --row-num: 2;

  row-gap: var(--clamp-cqi);
  place-items: center;

  @media (width <= 599px){
    /* flex-shrink: 0;
    width: 70%; */
  }
}

.company-list__image{
  /* display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2; */

  --row-num: 2;

  row-gap: 0;
}

.company-list__caption{
  --clamp-max: 16;
  --clamp-min: 10;

  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  padding: 1.1rem;
  margin-top: -5rem;
  font-weight: var(--fontweight-bold);
  color: white;
  text-align: center;
  word-break: auto-phrase;
  background-color: var(--color-mediumblue);
  border-radius: 0 var(--radius-60) 0 var(--radius-60);

  @media (width <= 599px){
    padding: .5rem;
    margin-top: -1rem;
    letter-spacing: var(--wide-letter);
    word-break: keep-all;
    border-radius: 0 var(--radius-20) 0 var(--radius-20);
  }
}

/* /////top-WORKS///// */
.works{
  .m-text-block{
    padding-top: 5rem;
    line-height: 3.3rem;
    text-align: center;
  }

  .m-text-block.-border-top{
    border-top: 1px solid black;

    @media (width <= 599px){
      width: 90%;
      margin-inline: auto;
    }
  }

  .m-button-parts{
    margin-top: 5rem;
  }

  .m-logo-bg{
    right: 5vw;
    width: min(80%, 1425px);
  }

  @media (width <= 599px){
    .l-contents{
      width: 100%;
    }

    .m-logo-bg{
      right: 0;
      width: 108vw;
    }

  }

}

.works-slide{
  width: 100vw;
  margin: 7.2rem calc(50% - 50vw) 11.7rem;

  .m-text-block{
    /* 3行以上で省略（マルチラインの省略記号） */
    display: -webkit-box;
    max-height: 4lh;
    padding-top: var(--clamp-cqi);
    overflow: clip;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;

    --clamp-cqi-max: 40;
    --clamp-cqi-min: 24;
  }

  .slide{
    overflow: hidden;
  }

  @media (width <= 599px){
      width: 100%;
      margin: 3.2rem 0 9rem;
  }

}

.works-list__image{
  display: grid;

  & > *{
    grid-area: 1 / 1
  }

  img{
    width: 100%;
    height: calc(100% + 16px);
    aspect-ratio: 428 / 358;
    object-fit: cover;
  }
}

.works-list__tittle{
  --clamp-cqi-max: 16;
  --clamp-cqi-min: 14;

  z-index: 1;
  align-self: flex-end;
  padding: 1rem;
  color: white;
  text-align: center;
  background-color: rgb(59 97 172 / .8);

}

/* /////top-RECRUIT///// */
.m-visual-wrap.-recruit{
  --visual-height: 480;

  .m-tittle-wrap{
    margin-top: 7.7rem;
    color: white;
  }

  @media (width <= 599px){
    --visual-height: 263;
  }

}

.recruit{
  .l-contents{
    width: var(--sub-width);
    padding-top: 16rem;
  }

  .m-tittle-wrap{
    margin-bottom: 2.7rem;
  }

  .m-text-block{
    line-height: 4.3rem;
    color: white;
    text-align: center;
  }

  .m-button-parts{
    margin-top: 3.2rem;
  }

  .m-potision-text-wrap__v-text{
    top: -45%;
    right: 4%;
    font-family: var(--font-futura-pt);
    color: rgb(255 255 255 / .5);

    --clamp-max: 78;
    --clamp-min: 3;
  }

  @media (width <= 599px){
    .l-contents{
      padding-top: 13rem;
    }

    .m-text-block{
      margin-top: 5rem;
      line-height: 2.8rem;
    }

    .m-button-parts{
      margin-top: 4rem;
    }

    .m-potision-text-wrap__v-text{
      top: -15%;
      right: -5%;
    }

  }

}

.recruit-guidance{
    position: absolute;
    top: -13.5vw;
    left: 50%;
    width: min(90%, 1280px);
    height: fit-content;
    transform: translateX(-50%);

    .recruit-guidance__lead{
      position: absolute;
      inset: 0;
      width: fit-content;
      height: fit-content;
      margin: auto;
      font-weight: var(--fontweight-bold);
      color: white;
      text-align: center;

      --clamp-max: 32;
      --clamp-min: 22;
    }

    .m-button-parts{
      position: absolute;
      bottom: -5%;
      left: 50%;
      transform: translateX(-50%) scale(1);

      --rotate-link-color: var(--color-blue);
    }

    @media (width <= 599px){
      top: -8rem;

      .m-button-parts{
        bottom: -6rem;
      }


    }
}

@media (any-hover: hover) {
  .recruit-guidance .m-button-parts:hover{
    transform: translateX(-50%) scale(1.08);
  }
}


/* /////top-NEWS///// */
.news{
  .l-contents{
    width: var(--sub-width);

    --clamp-cqi-max: 80;
    --clamp-cqi-min: 56;
  }
}

.news-list-wrapper{
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 6.4rem;
  align-items: center;
  width: min(100%, 1000px);
  margin-inline: auto;

  .m-tittle-wrap{
    display: grid;
    align-content: center;
    height: 100%;
    padding-right: 9.4rem;
    margin-bottom: revert;
    border-right: 1px solid white;
  }

  @media (width <= 599px){
    /* grid-template-columns: 1fr;
    row-gap: 1.6rem; */
    column-gap: 1.6rem;

    .m-tittle-wrap{
      padding-right: 1.6rem;
      /* border-right: revert; */
    }
  }

}

.news-list__item{
  display: block grid;
  grid-template-columns: max-content auto;
  /* justify-content: center; */

  --clamp-max: 18;
  --clamp-min: 14;

  div{
    display: block grid;
    grid-template-columns: subgrid;
    grid-row: span 2;
    grid-column: 1 / -1;
    gap: 1.6rem 2.6rem;
    align-items: center;
    padding: 1rem 2.4rem;

    @media (width <= 1000px){
      gap: 1.6rem;
      padding: 2rem 0;
    }
  }

  &:not(:last-child){
    border-bottom: 1px solid white;
  }

  @media (width <= 599px){
    grid-template-columns: auto;
  }
}

.news-list__tittle{
  word-break: keep-all;
}


/* /////service-HOUSE DEMOLITION///// */
.house-demolition{


  @media (width <= 599px){
    .m-text-block{
    line-height: 1.8;
    }
  }

}

.house-demolition-list{
    gap: var(--clamp-cqi);
    align-items: center;

    --column: 3;
    --clamp-cqi-max: 40;
    --clamp-cqi-min: 14;

    .m-tittle-wrap{
      margin-bottom: revert;
      text-align: center;
    }

    .m-tittle-block{
      font-weight: var(--fontweight-bold);
      line-height: 1.2;
      color: var(--color-blue);

      --clamp-max: 72;
      --clamp-min: 24;
    }

    .m-tittle-block__sub{
      line-height: 2;

      --clamp-max: 20;
      --clamp-min: 16;
    }

    @media (width <= 599px){
      --column: 2;

      .m-tittle-wrap{
        margin-bottom: revert;
      }

      & a{
        display: block;
        aspect-ratio: 2 / 1.5;
      }

      & > li:first-of-type{
        grid-row: 1;
	      grid-column: 1 / 3;
      }

      & > li:nth-of-type(2){
        grid-row: 2 / 3;
	      grid-column: 1 / 2;

        & img{
          aspect-ratio: 2 / 1.5;
          object-position: 80% center;
        }
      }

      & > li:nth-of-type(3){
        grid-row: 2 / 3;
	      grid-column: 2 / 3;

        & img{
          aspect-ratio: 2 / 1.5;
          object-position: left center;
        }
      }

    }
}

.house-demolition-list__img{
  & img{
    align-self: start;
    width: 100%;
    height: 100%;
    vertical-align: bottom;
    object-fit: cover;
  }

  /* @media (width <= 599px){

  } */
}

.house-demolition-list__lead{
  align-self: end;
  padding: 1.6rem;
  font-weight: var(--fontweight-bold);
  color: white;
  text-align: center;
  word-break: auto-phrase;
  background-color: rgb(35 70 139 / .7);

  --clamp-max: 18;
  --clamp-min: 10;

  &.-lightblue{
    background-color: rgb(45 143 185 / .7);
  }

  @media (width <= 599px){
    padding: .8rem;
    white-space: nowrap;
  }
}

/* /////service-DEMOLITION///// */
.demolition{
  --main-width: min(95% , 1600px);
  --overlap: 35rem;

  position: relative;
  z-index: 2;
  margin-bottom: calc(-1 * var(--overlap));


  .l-contents{
    padding-bottom: calc(var(--clamp-cqi) + var(--overlap));
    color: white;
    background-color: var(--color-lightblue);
  }

  .l-contents__inner{
    width: 100vw;
    margin: 0 calc(50% - 50vw);
  }

  .m-tittle-block{
    margin-inline: revert;
    font-family: revert;
    font-weight: var(--fontweight-bold);

    --clamp-max: 25;
    --clamp-min: 18;
  }

  .demolition-list__desc{
    justify-self: end;
  }

  .m-button-parts{
    right: revert;
    left: 3vw;
  }

  .m-potision-text-wrap__v-text{
    top: 21%;
    right: -3vw;
    font-family: var(--font-futura-pt);

    --clamp-max: 98;
    --clamp-min: 30;

    @container (width <= 959px){
      --clamp-max: 60;
      --clamp-min: 7;
    }

    @container (width <= 599px){
      top: 40%;
      right: -7vw;
    }
  }

  @media (width <= 599px){
    .l-contents__inner{
      width: 100%;
      margin: 0 auto;
    }

    .m-tittle-block{
      margin-inline: auto;
      line-height: 2;
      text-align: center;

      --display-property: block;
    }

    .demolition-list__desc{
      justify-self: revert;
      order: 2;
      margin-inline: auto;
    }

    .demolition-list{
      & figure{
        margin-left: auto;
      }

      .demolition-list__img{
        width: 100%;
        padding-top: revert;
      }

    }

    .m-button-parts{
      left: 50%;
      transform: translateX(-50%);
    }

  }

}


/* /////service-WOOD///// */
.wood{
  --main-width: min(95% , 1600px);
  --overlap: 35rem;

  position: relative;
  z-index: 2;
  margin-bottom: calc(-1 * var(--overlap));

  .l-contents{
    padding-bottom: calc(var(--clamp-cqi) + var(--overlap));
    color: white;
    background-color: var(--color-blue);
  }

  .l-contents__inner{
    width: 100vw;
    margin: 0 calc(50% - 50vw);
  }

  .m-tittle-block{
    margin-inline: revert;
    font-family: revert;
    font-weight: var(--fontweight-bold);

    --clamp-max: 25;
    --clamp-min: 18;
  }

  @media (width <= 599px){
    .l-contents__inner{
      width: 100%;
      margin: 0 auto;
    }

    .m-tittle-block{
      margin-inline: auto;
      line-height: 2;
      text-align: center;

      --display-property: block;
    }

    .demolition-list__img{
      margin-right: auto;
    }

    .demolition-list__desc{
      margin-inline: auto;
    }

  }
}

.demolition-list{
  gap: var(--clamp-cqi);
  width: min(100%, 1920px);
  margin-inline: auto;

  --clamp-cqi-max: 68;
  --clamp-cqi-min: 25;

  .m-potision-text-wrap{
    height: fit-content;
  }

  .m-potision-text-wrap__h-text{
    top: 4%;
    left: 3vw;

    --clamp-max: 80;
    --clamp-min: 40;

    @media (width <= 1499px){
      --clamp-max: 56;
      --clamp-min: 30;

      line-height: 1.2;
    }
  }

  .m-button-parts{
    position: absolute;
    right: 3vw;
    bottom: 3.5%;
  }


  & picture{
    display: block;

    img{
      aspect-ratio: 940 / 935;
      object-fit: cover;
    }
  }

  @media (width <= 599px){
    margin-top: 3rem;

    & figure{
      width: 95%;
    }

    .m-button-parts{
      left: 50%;
      transform: translateX(-50%);
    }

  }

}

.demolition-list__desc{
  display: grid;
  grid-auto-rows: max-content;
  row-gap: var(--clamp-cqi);
  align-content: center;
  width: 90%;

  --clamp-cqi-max: 35;
  --clamp-cqi-min: 20;

  .m-text-block{
    --clamp-max: 16;
    --clamp-min: 12;

    word-break: normal;

    & span{
      --clamp-max: 20;
      --clamp-min: 12;
    }
  }

}

/* /////service-STEEL///// */
.steel{
  --main-width: min(95% , 1600px);

  position: relative;
  z-index: 2;


  .l-contents{
    color: white;
    background-color: var(--color-lightblue);
  }

  .l-contents__inner{
    width: 100vw;
    margin: 0 calc(50% - 50vw);
  }

  .m-tittle-block{
    margin-inline: revert;
    font-family: revert;
    font-weight: var(--fontweight-bold);

    --clamp-max: 25;
    --clamp-min: 18;
  }

  .demolition-list__desc{
    justify-self: end;
  }

  .m-button-parts{
    right: revert;
    left: 3vw;
  }

  .m-potision-text-wrap__v-text{
    top: 21%;
    right: -3vw;
    font-family: var(--font-futura-pt);

    --clamp-max: 98;
    --clamp-min: 30;

    @container (width <= 959px){
      --clamp-max: 60;
      --clamp-min: 7;
    }

    @container (width <= 599px){
      top: 40%;
      right: -7vw;
    }
  }

  @media (width <= 599px){
    .l-contents__inner{
      width: 100%;
      margin: 0 auto;
    }

    .m-tittle-block{
      margin-inline: auto;
      line-height: 2;
      text-align: center;

      --display-property: block;
    }

    .demolition-list{
      & figure{
        margin-left: auto;
      }
    }

    .demolition-list__img{
      padding-top: revert;
    }

    .m-button-parts{
      left: 50%;
      transform: translateX(-50%);
    }

    .demolition-list__desc{
      justify-self: revert;
      order: 2;
      margin-inline: auto;
    }

  }

}

/* /////service-OTHER///// */
.other{
  --overlap: 64rem;

  position: relative;
  z-index: 1;
  margin-top: calc(-1 * var(--overlap));

  .l-contents{
    padding-top: calc(var(--clamp-cqi) + var(--overlap));
    background-color: var(--color-gray);
  }

  .l-contents__inner{
    width: min(90% , 1277px);
  }

  .m-tittle-block{
    --clamp-max: 80;
    --clamp-min: 36;

    font-family: var(--font-futura-pt);
    color: var(--color-blue);

    @container (599px <= width <= 999px){
      --clamp-max: 70;
      --clamp-min: 26;
    }

    & br{
      display: none;

      @media (width <= 599px){
          display: block;
      }
    }
  }

  .m-tittle-block__sub{
    font-weight: var(--fontweight-bold);

    --clamp-max: 25;
    --clamp-min: 16;
  }

  .m-text-block{
    --clamp-max: 16;
    --clamp-min: 12;

    &.-border-top{
      margin-top: 2.4rem;
      line-height: 3.3rem;
      text-align: center;

      --clamp-max: 18;
      --clamp-min: 14;
    }
  }

  .m-button-parts{
    margin-top: 4.5rem;
  }

  @media (width <= 599px){
    .m-tittle-block{
      text-align: center;
    }

    .m-text-block{
      &.-border-top{
        margin-top: 4rem;
        line-height: 2.8rem;
      }
    }
  }

}

.other-demolition-list{
  --column: 3;
  --clamp-cqi-max:27;
  --clamp-cqi-min:16;
  --cqi-content-width: 1277;

  gap: 1.6rem var(--clamp-cqi);
  margin-top: 6rem;

  .m-text-block{
    word-break: normal;
  }

  @media (width <= 599px){
    row-gap: 4rem;
    margin-top: 4rem;

    --column: 1;
  }

}

.other-demolition-list__data{
  --row-num: 2;

  @media (width <= 599px){
    row-gap: var(--clamp-cqi);
  }
}

.other-demolition-list__caption{
  position: relative;
  z-index: 1;
  width: min(75%, 260px);
  padding: .8rem;
  margin-inline: auto;
  margin-top: -3rem;
  color: white;
  text-align: center;
  background-color: var(--color-blue);

  --clamp-max: 18;
  --clamp-min: 14;
  --radius: var(--radius-50);
}

/* /////service-PUBLIC///// */
.m-visual-wrap.-public{
  --visual-height: 576;

  margin-top: -14rem;

  @media (width <= 599px){
    --visual-height: 395;

    margin-top: -6rem;
  }

}

/* /////service-PUBLIC WORKS///// */
.public{
  position: relative;
  color: white;

  .m-potision-text-wrap__h-text{
    top: -13.5%;
    left: 3vw;
    line-height: 1.1;

    --clamp-max: 80;
    --clamp-min: 40;
  }

  .m-tittle-block{
    font-family: revert;
    font-weight: var(--fontweight-bold);

    --clamp-max: 20;
    --clamp-min: 16;
  }

  .m-text-block{
    margin-top: 3.7rem;
    line-height: 3.3rem;
    text-align: center;
  }

  .m-button-parts{
    margin-top: 5.4rem;
  }

  @media (width <= 599px){
    .m-potision-text-wrap__h-text{
      top: -11%;
    }

    .m-text-block{
      margin-top: 3rem;
      text-align: revert;
      word-break: normal;
    }
  }

}

.public-works-list{
  --clamp-cqi-max: 37;
  --clamp-cqi-min: 16;

  gap: 7.4rem var(--clamp-cqi);
  margin-top: 8rem;

  .m-text-block{
    margin-top: 0;
    line-height: 1.5;

    --clamp-max: 16;
    --clamp-min: 14;
  }

  @media (width <= 599px){
    row-gap: 4rem;
    margin-top: 5rem;
  }
}

.public-works-list__data{
  --row-num: 2;
  --clamp-cqi-max: 58;
  --clamp-cqi-min: 28;

  row-gap: var(--clamp-cqi);
}

.public-works-list__image{
  line-height: 1;
}

.public-works-list__caption{
  align-self: end;
  padding: 1.4rem .8rem;
  font-weight: var(--fontweight-medium);
  text-align: center;
  word-break: auto-phrase;
  background-color: rgb(45 143 185 / .68);

  --clamp-max: 20;
  --clamp-min: 16;

  @media (width <= 599px){
    padding: 1.7rem;
  }
}

/* /////service-CIVIL ENGINEERING///// */
.civil-engineering{
  .m-tittle-block{
    font-family: var(--font-futura-pt);
    color: var(--color-blue);

    --clamp-max:80;
    --clamp-min:36;
  }

  .m-tittle-block__sub{
    font-weight: var(--fontweight-bold);

    --clamp-max: 25;
    --clamp-min: 16;
  }

  .m-text-block{
    line-height: 3.3rem;
    text-align: center;
  }

}

.civil-slide{
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  margin-top: 5.4rem;

  .button{
    width: 70px;
    height: 70px;

    &::before{
      width: 70px;
      height: 70px;
    }

  }

  .prev{
    left: 14%;

    &::after{
      left: 15px;
      border-width: 20px 33px 20px 0;
    }
  }

  .next{
    right: 14%;

    &::after{
      left: 22px;
      border-width: 20px 0 20px 33px;
    }
  }

  .splide__pagination{
    gap: 1.6rem;
    margin-top: 4rem;
  }

  .splide__pagination__page{
    width: 12px;
    height: 12px;
    cursor: pointer;
    border: none;
    border-radius: var(--radius-50);

    &.is-active{
      background-color: var(--color-lightblue);
    }
  }

  & img{
    width: 100%;
    aspect-ratio: 1280 / 509;
    object-fit: cover;
  }

  @media (width <= 599px){
    .button{
      width: 45px;
      height: 45px;

      &::before{
        width: 45px;
        height: 45px;
      }
    }

    .prev{
      top: 30%;
      left: 2.5%;

      &::after{
        left: 12px;
        border-width: 10px 16px 10px 0;
      }
    }

    .next{
      top: 30%;
      right: 2.5%;

      &::after{
        left: 16px;
        border-width: 10px 0 10px 16px;
      }
    }

    .splide__pagination{
      gap: 1.6rem;
      margin-top: 3rem;
    }

    .splide__pagination__page{
      width: 10px;
      height: 10px;
    }

    & img{
      aspect-ratio: 350 / 160;
      object-fit: cover;
    }

  }

}

/* .civil-slide__image{
  & img{
    width: 100%;
    height: 100%;
    aspect-ratio: 1280 / 509;
    object-fit: cover;
  }
} */

.civil-slide__tittle{
  align-self: flex-end;
  padding: 1.8rem;
  color: white;
  text-align: center;
  background-color: rgb(45 143 185 / .68);;

  --clamp-max: 18;
  --clamp-min: 12;

  @media (width <= 599px){
    display: block;
    padding: 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.m-float-bnr.-service{
  width: min(35vw, 330px);
  padding: 1.3rem 1.4rem 1.3rem 2.4rem;
  padding-left: 2.4rem;
  line-height: 2.8rem;
  border-radius: var(--radius-60) 0 0 0;



  & img{
    width: 135px;
  }

  @media (width <= 599px){
    /* top: 77%; */
    /* bottom: 20%; */
    padding: .8rem .8rem .8rem 1.6rem;
    visibility: hidden;
    border-radius: var(--radius-40) 0 0 0;
    opacity: 0;
    transition: opacity var(--transition), visibility var(--transition);


    & img{
        width: 40%;
    }


    .m-float-bnr__tittle{
      line-height: 1.3;
    }

  }
}

.js-float-bnr.-service.is-centered{

  @media (width <= 599px){
    visibility: visible;
    opacity: 1;
    transition: opacity var(--transition), visibility var(--transition);
  }


}



/* /////work-procedure-WORK PROCEDURE///// */
.work-procedure{
  .l-contents{
    width: min(90%, 1135px);
  }

  .m-tittle-block{
    margin-bottom: var(--clamp-cqi);
    font-family: revert;
    font-weight: var(--fontweight-bold);
    color: var(--color-blue);
    text-align: center;

    --clamp-max:25;
    --clamp-min:18;
    --clamp-cqi-max: 58;
    --clamp-cqi-min: 40;
  }

  .m-text-block{
    line-height: 3.3rem;
    text-align: center;

    &.-border-top{
      padding-top: 5rem;
    }
  }

  .m-button-parts{
    margin-top: 5.5rem;
  }

  .m-logo-bg{
    top: 6.6rem;
    right: 3vw;
    width: min(45vw, 800px);
  }

  @media (width <= 599px){
    .m-tittle-block{
      font-weight: var(--fontweight-medium);
    }

    .m-text-block{
      line-height: 2.2rem;

      &.-border-top{
        word-break: auto-phrase;
      }
    }
  }

}

.flow_bg{
  position: absolute;
  top: 330px;
  right: 3vw;
  z-index: -1;
  width: min(30vw, 530px);
  height: auto;
  aspect-ratio: 530 / 268;
}

.work-flow-wrapper{
  display: grid;
  grid-template:
      "flow01 line space01" 1fr
      "flow01 line flow02" 1fr
      "flow03 line flow02" 1fr
      "flow03 line flow04" 1fr
      "flow05 line flow04" 1fr
      "flow05 line flow06" 1fr
      "flow07 line flow06" 1fr
      "flow07 line flow08" 1fr
      "flow09 line flow08" 1fr
      "flow09 line space02" 1fr
      / min(45%, 824px) 1fr min(45%, 824px);
  row-gap: var(--clamp-cqi);
  padding: 4rem 0 19.4rem;
  margin-top: 8.3rem;

  --clamp-cqi-max: 105;
  --clamp-cqi-min: 56;

  @media (width <= 599px){
    /* grid-template:
      "flow01" 1fr
      "flow02" 1fr
      "flow03" 1fr
      "flow04" 1fr
      "flow05" 1fr
      "flow06" 1fr
      "flow07" 1fr
      "flow08" 1fr
      "flow09" 1fr
      / 1fr; */
      padding-bottom: 5.5rem;
      margin-top: 4.6rem;
  }

}

.work-flow-contents{
  position: relative;

  .work-flow-contents__tittle{
    position: absolute;
    top: -12%;
    width: min(100%, 380px);
    padding: var(--clamp-cqi);
    font-weight: var(--fontweight-bold);
    text-align: center;
    letter-spacing: 0.4rem;


    --clamp-max: 22;
    --clamp-min: 10;
    --clamp-cqi-max:27;
    --clamp-cqi-min:8;
  }

  .work-flow-contents__text{
    --clamp-max: 18;
    --clamp-min: 10;
    --clamp-cqi-max:32;
    --clamp-cqi-min:14;

    width: min(100%, 800px);
    margin-top: var(--clamp-cqi);
    letter-spacing: 0.36rem;
  }

  &:nth-of-type(odd){
    .work-flow-contents__tittle{
      right: -3%;
      color: white;
      background-color: var(--color-mediumblue);
      border-radius: var(--radius-60) 12rem 0 var(--radius-60);
    }
  }

  &:nth-of-type(even){
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-self: flex-end;

    .work-flow-contents__tittle{
      left: -3%;
      color: var(--color-mediumblue);
      background-color: white;
      border: 2px solid currentcolor;
      border-radius: 12rem var(--radius-60) var(--radius-60) 0;
    }
  }

  &:nth-of-type(1){
    grid-area: flow01;
  }

  &:nth-of-type(2){
    grid-area: flow02;
  }

  &:nth-of-type(3){
    grid-area: flow03;
  }

  &:nth-of-type(4){
    grid-area: flow04;
  }

  &:nth-of-type(5){
    grid-area: flow05;
  }

  &:nth-of-type(6){
    grid-area: flow06;
  }

  &:nth-of-type(7){
    grid-area: flow07;
  }

  &:nth-of-type(8){
    grid-area: flow08;
  }

  &:nth-of-type(9){
    grid-area: flow09;
  }

  @media (width <= 599px){
    .work-flow-contents__tittle{
      --clamp-cqi-min:12;

      width: 92%;
      letter-spacing: revert;
      word-break: auto-phrase;
    }

    &:nth-of-type(odd){
      .work-flow-contents__tittle{
        right: revert;
      }
    }

    &:nth-of-type(even){
      .work-flow-contents__tittle{
        left: auto;
      }
    }

  }
}

.work-flow-line{
  position: relative;
  grid-area: line;

  &::before{
    position: absolute;
    top: -2%;
    left: 50%;
    width: 2px;
    height: 106%;
    content: "";
    background-color: #777;
  }

  &::after{
    position: absolute;
    bottom: -4.2%;
    left: 50%;
    width: 16px;
    height: 16px;
    content: "";
    background: #777;
    border-radius: 50px;
    transform: translateX(-50%);
  }

  @media (width <= 599px){
    &::before{
      height: 102%;
    }

    &::after{
      bottom: 0;
    }
  }
}


/* /////work-procedure-PROCEED///// */
.proceed{
  background-color: #C9DAE2;

  .l-contents{
    width: min(90%, 1135px);
  }

  .m-tittle-block{
    font-family: revert;
    font-weight: var(--fontweight-bold);
    text-align: center;

    --clamp-max: 25;
    --clamp-min: 16;
  }


  .m-logo-bg{
    right: 0;
    z-index: revert;
    width: min(90%, 1885px);
    fill: rgb(255 255 255 / .3);
  }

  .m-text-block{
    &.-border-top{
      padding-top: 6.5rem;
      margin-top: var(--clamp-cqi);
      text-align: center;
      border-color: black;

      --clamp-cqi-max: 70;
      --clamp-cqi-min: 46;
      --clamp-min: 16;
    }
  }

  .m-button-parts{
    margin-top: var(--clamp-cqi);

    --clamp-cqi-max: 88;
    --clamp-cqi-min: 56;
  }

}

.proceed-list{
  --column: 4;
  --gap: clamp(16px, 1.5cqi, 27px);
  --clamp-cqi-max:86;
  --clamp-cqi-min:55;

  position: relative;
  display: block flex;
  flex-wrap: wrap;
  gap: 5.6rem var(--gap) ;
  justify-content: center;
  width: min(100%, 1712px);
  margin-inline: auto;
  margin-top: var(--clamp-cqi);
  counter-reset: number 0;

   & > * {
    flex-basis: calc((100% - var(--gap) * (var(--column) - 1)) / var(--column));
  }


  .m-text-block{
    margin-top: 1.8rem;
    word-break: revert;

    --clamp-max: 16;
    --clamp-min: 14;
  }

  @container (width <= 1000px){
    --column: 3;
  }


  @container (width <= 600px){
    --column: 2;

    gap: 5rem var(--gap) ;
  }
}

.proceed-list__data{
  position: relative;

  &::before{
    position: absolute;
    top: 0;
    left: 2.4rem;
    z-index: 99;
    display: grid;
    place-items: center;
    width: 55px;
    height: 55px;
    aspect-ratio: 1 / 1;
    font-size: 2.3rem;
    color: white;
    content: counter(number);
    counter-increment: number;
    background-color: var(--color-blue);
    border-radius: calc(infinity * 1px);
  }

  @media (width <= 599px){
      &::before{
        left: .8rem;
        width: 3.8rem;
        height: 3.8rem;
      }
  }
}


.proceed-list__image{
  position: relative;
  display: grid;
  row-gap: 1.8rem;
  place-items: center;

  /* @media (width <= 599px){
      margin-inline: auto;
  } */

  & img{
    width: min(85%, 227px);
  }
}

.proceed-list__caption{
  width: min(100%, 260px);
  padding: 1rem;
  color: white;
  text-align: center;
  background-color: var(--color-blue);

  --clamp-max: 18;
  --clamp-min: 12;
}

/* /////work///// */
.work-main{
  @media (width <= 599px){
    background: linear-gradient(to bottom, var(--color-blue) 30%, transparent 30%);
    background-repeat: no-repeat;
  }
}

/* /////work-PICKUP///// */
.pickup{
  color: white;
}

.bg-block{
  position: absolute;
  top: 35%;
  left: 0;
  width: min(80vw, 1500px);
  aspect-ratio: 1500 / 850;
  background-color: var(--color-lightblue);

  @media (width <= 599px){
    top: 30%;
    aspect-ratio: 405 / 500;
  }
}

.pick-slide{
  margin-inline: auto;

  @media (width <= 599px){
    width: 100vw;
    padding-left: 5vw;
    margin: 0 calc(50% - 50vw);
  }
}

.pick-slide .slide{
  position: relative;
  width: min(90%, 1280px);
  aspect-ratio: 1500 / 850;
  margin-inline: auto;
  margin-bottom: var(--clamp-cqi);

  --clamp-cqi-max: 135;
  --clamp-cqi-min: 110;

  @media (width <= 599px){
    width: 100%;
    aspect-ratio: 400 / 280;

    /* --clamp-cqi-min: 280; */
  }
}

.pick-slide__content{
  position: absolute;
  bottom : -12%;
  left: -2.5vw;
  display: grid;
  row-gap: 1.6rem;
  width: min(40vw, 720px);
  padding: 2.4rem var(--clamp-cqi);
  color: initial;
  background-color: rgb(255 255 255 / .9);

  --clamp-cqi-max: 50;
  --clamp-cqi-min: 15;
  --cqi-content-width: 1500;
  --clamp-min: 12;

  @media (width <= 599px){
    top: 85%;
    bottom : revert;
    left: 6vw;
    width: 78vw;
    padding: var(--clamp-cqi);
  }
}

.pick-slide__text{
  margin-top: .7rem;

  @media (width <= 599px){
    margin-top: 0;
  }
}

.pick-slide__tag{
  display: flex;
  flex-wrap: wrap;
  gap: 1em;

  span{
    padding: .4rem 1.6rem;
    color: white;
    background-color: var(--color-mediumblue);
    border-radius: var(--radius-20);

    --clamp-max: 14;
    --clamp-min: 12;
  }
}

.slide-media {
  position: relative;
  overflow: hidden;
}

.slide-media img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pick-slide .slide-media {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}

.pick-slide .splide__slide:nth-of-type(odd) .slide-media img {
  transition: 7s 1s linear;
  transform: translateX(-1.5%) scale(1.05);
}

.pick-slide .splide__slide:nth-of-type(even) .slide-media img {
  transition: 7s 1s linear;
  transform: translateY(1.5%) scale(1.05);
}

.pick-slide .pick-slide__date,
.pick-slide .pick-slide__name,
.pick-slide .pick-slide__text,
.pick-slide .pick-slide__tag,
.pick-slide .pick-slide__content {
  opacity: 1;
  animation: 2s var(--easing) both;
}

.pick-slide .splide__slide[class*="-active"]:nth-of-type(odd) .slide-media img {
  transition-delay: 0s;
  transform: translateY(1.5%) scale(1.05);
}

.pick-slide .splide__slide[class*="-active"]:nth-of-type(even) .slide-media img {
  transition-delay: 0s;
  transform: translateX(-1.5%) scale(1.05);
}

.pick-slide .splide__slide.anm-started .pick-slide__date,
.pick-slide .splide__slide.anm-started .pick-slide__name,
.pick-slide .splide__slide.anm-started .pick-slide__text,
.pick-slide .splide__slide.anm-started .pick-slide__tag,
.pick-slide .splide__slide.anm-started .pick-slide__content {
  animation-name: pick-slide-fadeIn;
}

.pick-slide .splide__slide.anm-finished .pick-slide__date,
.pick-slide .splide__slide.anm-finished .pick-slide__name,
.pick-slide .splide__slide.anm-finished .pick-slide__text,
.pick-slide .splide__slide.anm-finished .pick-slide__tag,
.pick-slide .splide__slide.anm-finished .pick-slide__content {
  animation-name: pick-slide-fadeOut;
}

@keyframes pick-slide-fadeIn {
  0% {
    opacity: 0;
    transform: translateY(6rem);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pick-slide-fadeOut {
  0% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    transform: translateY(-6rem);
  }
}

/* /////work-LATEST///// */
.latest{
  .l-contents{
    width: var(--sub-width);
    color: white;
  }

  @media (width <= 599px){
    .l-contents{
      padding-top: revert;
    }
  }
}

.latest-list{
  --column: 3;
  --clamp-cqi-max: 32;
  --clamp-cqi-min: 12;
  --clamp-cqi-row: calc(var(--clamp-cqi) * 2);

  gap: var(--clamp-cqi-row) var(--clamp-cqi);

  @media (width <= 599px){
    --column: 2;
  }

}

.latest-list__data{
  --row-num: 2;
  --clamp-cqi-max: 28;
  --clamp-cqi-min: 10;

  row-gap: var(--clamp-cqi);
}

.latest-list__image{
  & img{
    width: 100%;
    height: 100%;
    aspect-ratio: 411 / 303;
    object-fit: cover;
  }
}

.latest__content{
  display: grid;
  grid-auto-rows: max-content;
  row-gap: 1.2rem;

  --clamp-min: 12;
}

.latest__name{
  --clamp-max: 24;
  --clamp-min: 12;
}

.latest__tag{
  display: flex;
  flex-wrap: wrap;
  gap: 1em;

  & span{
    padding: .4rem 1.6rem;
    color: initial;
    background-color: var(--color-yellow);
    border-radius: var(--radius-20);

    --clamp-max: 14;
    --clamp-min: 10;
  }

  @media (width <= 599px){
    & span{
      padding: .4rem .8rem;
    }
  }
}

.work-list-link{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(90%, 670px);
  padding: 1.3rem 4.4rem;
  margin-inline: auto;
  margin-top: var(--clamp-cqi);
  font-family: var(--font-futura-pt);
  font-weight: var(--fontweight-bold);
  text-align: center;
  background-color: var(--color-lightblue);
  border-radius: var(--radius-60) 0 var(--radius-60) 0;

  --clamp-cqi-max:116;
  --clamp-cqi-min:56;

  & > :nth-child(1){
    display: flex;
    flex-grow: 1;
    justify-content: flex-end;
  }

  .m-text-block{
    --clamp-max: 18;
    --clamp-min: 14;

    margin-top: 2rem;
    font-family: initial;
    font-weight: revert;
  }

  @media (width <= 599px){
    padding: 1.4rem 2rem;

    & > :nth-child(1){
      width: 50%;
    }

    .m-text-block{
      margin-top: 0;
    }

  }
}

.work-list-link__tittle{
  --clamp-max: 32;
  --clamp-min: 24;

  flex-grow: 5;
}

/* /////work-ABOUT///// */
.about{
  .l-contents{
    padding-top: revert;
    background-color: var(--color-gray);
  }

  .l-contents__inner{
    width: 93vw;
    margin: 0 calc(50% - 47.5vw);
    margin-left: auto;
  }

  .m-tittle-block{
    --clamp-max: 25;
    --clamp-min: 18;
    --clamp-cqi-max:60;
    --clamp-cqi-min:30;

    margin-bottom: var(--clamp-cqi);
    font-family: revert;
    font-weight: var(--fontweight-bold);
    text-align: center;
    word-break: auto-phrase;
  }

  .m-text-block{
    --clamp-max: 16;
    --clamp-min: 12;
  }

  & + .civil-engineering{
    .m-text-block{
      margin-top: 3.2rem;
    }
  }

  @media (width <= 599px){
    & + .civil-engineering{
      .m-text-block{
      line-height: 2rem;
      }
    }
  }

  @media (width >= 1921px){
    margin-left: revert;

    .l-contents{
      margin-inline: auto;
    }
  }

}

.about-card{
  --static-column: min(50%, 790px);

  flex-direction: row-reverse;
  align-items: center;

  & picture{
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    text-align: revert;
  }
}

.about-card__content{
  padding: var(--clamp-cqi);

  --clamp-cqi-max: 110;
  --clamp-cqi-min: 16;

  @media (width <= 599px){
    padding-inline: revert;
    padding-top: 5.6rem;
    padding-bottom: revert;
    line-height: 2;
  }

  @media (width >= 1921px){
      flex-grow: 1;
  }
}

/* 施工例一覧 */
/* /////works-works-list///// */
.works-list{
  .l-contents{
    width: var(--sub-width);
    color: white;
  }
}

ul.page-numbers{
  display: flex;
  flex-wrap: wrap;
  column-gap: .8rem;
  justify-content: center;
  margin-top: 4rem;

  --clamp-min: 16;

  & li{
    display: grid;
    place-items: center;
    padding: .4rem 1.25rem;
    border-radius: var(--radius-20);

    &:has(.current){
      color: var(--color-blue);
      background-color: white
    }
  }

  @media (width <= 599px){
    & li{
      padding: .4rem 1.1rem;
    }
  }
}


/* /////company-GREETINGS///// */

.mv-top.-company{
  @media (width <= 599px){
    :is(picture,.m-fixed-bg) img {
        object-position: 50% 50%;
    }
  }
}

.president{
  position: relative;
  z-index: 3;

  .l-contents{
    background-color: var(--color-lightblue);
  }

  .m-tittle-wrap{
    --clamp-cqi-max: 47;
    --clamp-cqi-min: 32;
    --cqi-content-width: 1135;

  }
}

.president-card{
  --clamp-cqi-max: 40;
  --clamp-cqi-min: 35;
  --breakpoint: 699px;

  gap: var(--clamp-cqi);
  justify-content: center;

  .m-text-block{
    text-align: justify;
    word-break: normal;

    --clamp-max: 16;
  }

  @media (width <= 599px){
    & img{
      width: 85%;
    }

    & > :nth-child(odd) {
      word-break: normal;

      span{
        margin-top: 2.4rem;
      }
    }
  }

}

.president-card__greetings{
  display: grid;
  row-gap: var(--clamp-cqi);
  place-items: stretch flex-end;

  --clamp-cqi-max: 36;
  --clamp-cqi-min: 16;
}

.president-card__name{
  text-align: right;

  --clamp-min: 12;
}

.president-card__company{
  font-family: var(--font-futura-pt);
  line-height: 1;
  color: white;
  text-align: right;

  --clamp-max: 80;
  --clamp-min: 30;
}

/* /////company-COMPANY INFORMATION///// */
.information{
  position: relative;
  z-index: 2;
  margin-top: calc(-1 * var(--overlap));

  --overlap: 35rem;

  .l-contents{
    padding-top: calc(var(--clamp-cqi) + var(--overlap));
    color: white;
    background-color: var(--color-blue);
  }


  .m-text-block{
    /* --clamp-max: 16;
    --clamp-min: 12; */

    & + .company-profile-list{
      margin-top: 3.5rem;
    }
  }

  .m-tittle-wrap{
    &:nth-of-type(2){
      margin-top: var(--clamp-cqi);
      margin-bottom: 5.5rem;

      --clamp-cqi-max:160;
      --clamp-cqi-min: 80;
      --cqi-content-width: 1135;
    }
  }

  @media (width <= 599px){
    .m-tittle-wrap{
      &:nth-of-type(2){
        margin-bottom: 4rem;
      }
    }
  }

}

.company-profile-list{
  --breakpoint: 599px;
  --static-column: min(30%, 270px);
  --fluid-column: calc(var(--breakpoint) - var(--static-column));

  display: block grid;
  grid-template-columns: var(--static-column) 1fr;
  margin-top: 6.6rem;
  line-height: 5.4rem;

  --clamp-max: 18;
  --clamp-min: 15;

  & > :nth-child(even) {
    /* flex-basis: calc(100% - var(--static-column));
    flex-grow: 9999; */
    padding: 1rem 0 0;
    border-bottom: 2px solid var(--color-gray);
  }

  & > :nth-child(odd) {
    /* flex-basis: var(--static-column);
    flex-grow: 1; */
    padding: 1rem 0 0 1.2rem;
    font-weight: var(--fontweight-bold);
    border-bottom: 2px solid white;
  }

  @media (width <= 599px){
    margin-top: revert;
    line-height: revert;
    /* text-align: center; */

    & > :nth-child(even) {
      /* flex-basis: var(--fluid-column); */
      padding: 1.4rem 0;

    }

    & > :nth-child(odd) {
      padding: 1.4rem 0;
    }
  }

}

.company-profile-list__data{
  word-break: auto-phrase;

  & ul{
    display: flex;
    flex-wrap: wrap;
    gap: 0 2rem;

    &:not(:first-of-type) {
      border-top: 2px solid var(--color-gray);
    }
  }

  @media (width <= 599px){
    & ul{
      flex-direction: column;
      word-break: normal;

      &:not(:first-of-type) {
        padding-top: 1.4rem;
        margin-top: 1.4rem;
      }
    }

    .flex-sp-column{
      flex-direction: column;
    }

  }
}

.company-image{
  display: block;
  margin-top: 5.6rem;

  & + .company-profile-list{
    margin-top: 4.8rem;
  }

  @media (width <= 599px){
    & + .company-profile-list{
    margin-top: 3.8rem;
  }
  }
}

/* /////company-ABOUT CONSTRUCTION ASSURANCE///// */
.assurance{
    position: relative;
    z-index: 1;
    margin-top: calc(-1 * var(--overlap));

    --overlap: 126rem;

  .l-contents{
    padding-top: calc(var(--clamp-cqi) + var(--overlap));
    background-color: var(--color-gray);
  }

  .m-tittle-wrap{
    --clamp-cqi-max: 85;
    --clamp-cqi-min: 35;
    --cqi-content-width: 1135;
  }

  .m-tittle-block{
    width: 90vw;
    margin: 0 calc(50% - 45vw);
    font-family: var(--font-futura-pt);
    color: var(--color-blue);
    text-align: center;
    word-break: auto-phrase;

    --clamp-max: 80;
    --clamp-min: 40;
  }

  .m-tittle-block__sub{
    --clamp-max: 25;
    --clamp-min: 16;

    font-weight: var(--fontweight-bold);
  }

  .m-text-block{
    word-break: revert;
  }

  .company-quote{
    position: relative;
    top: revert;
    gap: 1rem;
    justify-content: space-between;
    padding-right: 4rem;
    margin-top: 9.5rem;
    color: #382D24;
    text-align: center;
    background-color: var(--color-yellow);

    .m-text-block{
      --clamp-min: 10;
    }
  }

  .js-text-flow{
    & br{
      display: none;
    }
  }

  @media (width <= 1499px){
    .js-text-flow{
      & br{
        display: block;
      }
  }
  }

  @media (width <= 599px){
    .m-tittle-block{
      line-height: 1.2;
    }

    .company-quote{
      width: 100%;
      padding: .8rem 2rem .8rem .8rem;
      margin-top: 5.8rem;
    }
  }

}

.assurance-list{
    --clamp-cqi-max: 60;
    --clamp-cqi-min: 20;
    --cqi-content-width: 1135;

    display: grid;
    grid-template-columns: min(30%, 220px) 1fr;
    gap:var(--clamp-cqi);
    align-items: center;
    margin-top: 6.8rem;

  & > :nth-child(odd) {
    text-align: center;
  }

  @media (width <= 749px){
    justify-content: center;
    margin-top: 3.4rem;
  }
}

.assurance-list__icon{
  display: grid;
  place-content: center;
  aspect-ratio: 1 / 1;
  font-weight: var(--fontweight-bold);
  color: white;
  background-color: var(--color-lightblue);
  border-radius: calc( infinity * 1px);

  --clamp-max: 20;
  --clamp-min: 10;

  & span{
    --clamp-max: 36;
    --clamp-min: 25;
  }
}

.assurance-list__data{
  --clamp-min: 12;
}

.assurance-list__tittle{
  margin-bottom: var(--clamp-cqi);

  --clamp-max: 25;
  --clamp-min: 18;
  --clamp-cqi-max: 36;
  --clamp-cqi-min: 24;
  --cqi-content-width: 1135;

  @media (width <= 599px){
    text-align: center;
  }

}

/* /////company-google MAP///// */
.g-map{
  width: min(100%, 1700px);
  aspect-ratio: 1700 / 800;
  margin-inline: auto;

  & a{
    display: block;
    width: fit-content;
    margin-top: 1.2rem;
    margin-left: auto;
    color: revert;
    text-decoration: underline;
  }

  @media (width <= 599px){
    width: 100%;
    height: auto;
    aspect-ratio: 428 / 580;

    & a{
      margin-right: 1em;
    }
  }

}


/* /////recruit-MESSAGE///// */
.message{
  position: relative;

  .l-contents{
    color: white;
    background-color: var(--color-blue)
  }

  p.m-tittle-block{
    --clamp-max: 25;
    --clamp-min: 18;

    margin-bottom: 0;
    font-weight: var(--fontweight-bold);
    text-align: center;
  }

  .m-text-block{
    margin-top: 4rem;
    text-align: center;
  }

  @media (width <= 599px){
    .m-text-block{
      margin-bottom: 3.6rem;
      text-align: revert;
      word-break: normal;
    }
  }
}

.message-list{
  gap: var(--clamp-cqi);
  width: min(85%, 1030px);
  margin-inline: auto;
  margin-top: 6.4rem;
  margin-bottom: 8rem;

  --clamp-cqi-max: 30;
  --clamp-cqi-min: 28;
  --cqi-content-width: 1030;

  .m-hover-inset-line{
    --outline: 5px solid var(--inset-color);
  }

  @media (width <= 799px){
    --column: 1;

    place-items: center;
    margin-top: 3.6rem;
    margin-bottom: 4rem;
  }
}


.message-list__image{
  position: relative;
}

.message-list__tittle{
  position: absolute;
  top: 4.5cqi;
  left: 5cqi;
  width: 80%;
  font-weight: var(--fontweight-bold);
  line-height: 7rem;
  letter-spacing: .86rem;

  --clamp-max: 43;
  --clamp-min: 32;

  @media (width <= 799px){
      top: 8cqi;
      left: 6cqi;
      line-height: 5rem;
      letter-spacing: 0.64rem;
  }
}

.message-list__ja{
  display: block;

  --clamp-max: 55;
  --clamp-min: 40;
}

.message-list__en{
  --clamp-max: 22;
  --clamp-min: 15;

  display: block;
  margin-top: .7rem;
  font-family: var(--font-futura-pt);
  font-weight: var(--fontweight-regular);
  line-height: 3rem;
  letter-spacing: initial;
}


.message-list__btn{
  position: absolute;
  bottom: 8cqi;
  left: 18cqi;
  width: clamp(175px,21cqw,212px);
  padding-bottom: 1rem;
  font-weight: var(--fontweight-bold);
  border-bottom: 3px solid white;
  transition: var(--transition);

  --clamp-max: 20;
  --clamp-min: 15;

  /* 下線用の疑似要素 */
  &::before {
    position: absolute;
    bottom: -4.8rem;
    left: 0;
    width: 0;
    height: 5px;
    content: '';
    background-color: white;
    transition: width var(--transition);
  }

  /* 矢印の追加 */
  &::after {
    position: absolute;
    right: 26px;
    bottom: 20px;
    width: 20px;
    height: 20px;
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 49.5 36'%3E%3Cpath d='M5.8,34.1l39.2-.7L5.8,3.1v31' stroke='white' fill='none' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }

  & span{
    position: absolute;
    top: 4.5rem;
    right: 0;
    opacity: 0;
    transition: var(--transition);

    --clamp-max: 18;
    --clamp-min: 12;
  }

  @media (width <= 599px){
    bottom: 13.5cqi;
    left: 6cqi;
    padding-bottom: .6rem;

    & span{
      top: 3rem;
      left: 0;
      width: 78px;
      opacity: 1;
    }
  }
}

.engage{
  margin-top: .8rem;
}

.message-list__item.-form{
  .message-list__tittle{
    --clamp-max: 50;
    --clamp-min: 40;
  }

  .message-list__btn{
    &::before {
      bottom: -2.8rem;
    }
  }

}

@media (any-hover: hover) {
  .message-list .m-hover-inset-line:hover,
  .message-list .m-hover-inset-line:focus {
    outline-offset: -2rem;

    & img{
      filter: brightness(.7);
      transform: revert;
    }

    & .engage{
      filter: revert;
      transform: revert;
    }

    .message-list__btn{
      width: 26cqw;
      letter-spacing: .6cqw;

      &::before {
        width: 100%;
      }

      & span{
        letter-spacing: normal;
        opacity: 1;
        transition: var(--transition);
      }

    }

  }
}

/* /////recruit-VOICE///// */
.voice{
    margin-top: calc(-1 * var(--overlap));

    --overlap: 51rem;

  .l-contents{
    padding-top: calc(var(--clamp-cqi) + var(--overlap));
  }

  .l-contents__inner{
    width: min(100% , 1135px);
  }

  .m-tittle-block{
    --clamp-max: 25;
    --clamp-min: 16;

    font-family: revert;
    font-weight: var(--fontweight-bold);
  }

}

.work-scene{
  display: block;
  width: 100vw;
  margin: 0 calc(50% - 50vw);
  margin-bottom: 14.7rem;

  & img{
    width: 100%;
  }

  @media (width <= 599px){
    margin-bottom: 6.4rem;
  }
}

.voice-list{
  gap:var(--clamp-cqi);
  margin-top: 5.6rem;

  --clamp-cqi-max: 24;
  --clamp-cqi-min: 16;
  --cqi-content-width: 1135;

  @media (width <= 599px){
    margin-top: 4.7rem;

    & figure{
      & img{
        width: 70%;
      }
    }
  }
}

.voice-list__item{
  --row-num:3;
  --clamp-cqi-max: 40;
  --clamp-cqi-min: 27;
  --cqi-content-width: 1135;

  gap: 2rem;
  padding: var(--clamp-cqi);
  background-color: white;
  box-shadow: 0 0 4px rgb(0 0 0 / 0.25);

  & figure{
    display: block;
    padding: var(--clamp-cqi);
    text-align: center;

    --clamp-cqi-max: 36;
    --clamp-cqi-min: 24;
    --cqi-content-width: 1135;
  }
}

.voice-list__name{
  --clamp-max: 30;
  --clamp-min: 24;

  display: flex;
  flex-wrap: wrap;
  column-gap: 1rem;
  align-items: baseline;
  line-height: 1.7;
  border-bottom: 4px solid var(--color-lightblue);

  & span{
    --clamp-max: 16;
    --clamp-min: 14;
  }
}

/* /////recruit-Q&A///// */
.faq{
  position: relative;

  .l-contents{
    padding-bottom: 18rem;
  }

  .l-contents__inner{
    width: min(100% , 1135px);
  }

  .m-tittle-wrap{
    --cqi-content-width: 1135;
    --clamp-cqi-max: 62;
    --clamp-cqi-min: 34;
  }

  .company-quote{
    top: revert;
    bottom: -6rem;
    z-index: 1;
    color: black;
    background-color: var(--color-green);
  }

  @media (width <= 599px){
    .l-contents{
      padding-bottom: 16rem;
    }

    .company-quote{
      bottom: 2rem;
    }
  }
}

.faq-ac{
  div{
    border-top: 2px solid var(--color-blue);

    @media (width <= 599px){
      word-break: normal;
    }
  }
}

.faq-ac__tittle{
  font-weight: var(--fontweight-bold);
  color: var(--color-blue);

  --clamp-max: 24;
  --clamp-min: 18;

  &::before{
    margin-right: var(--clamp-cqi);
    font-family: var(--font-futura-pt);
    content: "Q" ;

    --clamp-max: 55;
    --clamp-min: 30;
    --clamp-cqi-max: 16;
    --clamp-cqi-min: 10;
    --cqi-content-width: 1135;
  }

  @media (width <= 599px){
    word-break: normal;
  }
}

.faq-ac__text{
  align-items: center;
  word-break: normal;

  --clamp-min: 12;

  &::before{
    margin-right: 1.6rem;
    font-family: var(--font-futura-pt);
    content: "A" ;

    --clamp-max: 55;
    --clamp-min: 30;
  }

  @media (width <= 599px){
    padding: 1.6rem 0;
  }
}

.m-visual-wrap.-job{
  --visual-height: 576;

  .m-potision-text-wrap__h-text{
    top: 50%;
    left: 2.5vw;
    transform: translateY(-50%);

    & > span:first-child {
      --clamp-max: 80;
      --clamp-min: 30;
    }

    & > span:last-child {
      display: block;

      --clamp-max: 90;
      --clamp-min: 40;
    }

  }

  .first-text{
    --clamp-max: 80;
    --clamp-min: 30;
  }

  @media (width <= 599px){
    --visual-height: 273;

    .m-potision-text-wrap__h-text{
        top: revert;
        bottom: 4%;
        left: 4.5vw;
        transform: revert;
    }
  }

}

.m-float-bnr.-recruit{
  justify-content: space-evenly;
  width: min(35vw, 330px);
  padding: 1.3rem 1.4rem 0;
  padding-left: 2.4rem;
  line-height: 2.8rem;
  background-color: var(--color-green);
  border-radius: var(--radius-60) 0 0 0;

  & img{
    width: 93px;
  }

  .m-float-bnr__tittle{
      margin-top: -1.2rem;
  }

  @media (width <= 599px){
    /* top: 74%; */
    /* bottom: 20%; */
    padding: .8rem .8rem 0 1.6rem;
    line-height: 1.5;
    visibility: hidden;
    opacity: 0;
    transition: opacity var(--transition), visibility var(--transition);

    .m-float-bnr__tittle{
      margin-top: -.8rem;
      word-break: keep-all;
    }

    & img{
      width: 43%;
    }
  }
}

.m-float-bnr.-recruit.is-centered{
  @media (width <= 599px){
      visibility: visible;
      opacity: 1;
      transition: opacity var(--transition), visibility var(--transition);
  }
}


/* /////contact-CONTACT///// */
.contact{
  --contact-width: min(100%, 1135px);

  .l-contents{
    width: var(--contact-width);

    @media (width <= 599px){
        width: 90%;
    }
  }

  .m-tittle-wrap{
    color: white;
  }

  .m-text-block{
    --clamp-max: 25;
    --clamp-min: 18;

    margin: 3.2rem 0 0;
    font-weight: var(--fontweight-bold);
    color: white;
    text-align: center;
  }

  @media (width <= 599px){
    .m-text-block{
      word-break: keep-all;
    }

    .m-tittle-block:not(.-privacy){
      width: 100%;
      text-align: center;
    }

    .m-logo-bg{
      right: -6%;
      bottom: -34%;
      width: 80%;
    }

  }

  table, div#wpcf7cpcnf table{
    width: min(100%, 1135px);
    margin-inline: auto;

    @media (width <= 599px){
        width: 95%;
    }
  }

  tr , div#wpcf7cpcnf tr{
    display: grid;
    grid-template-columns: 1fr;
    gap: .8rem;
  }

  th{
    font-weight: var(--fontweight-bold);
    text-align: left;

    --clamp-max: 20;
    --clamp-min: 15;

  }


  td{
    margin-bottom: 3.2rem;
    container-type: inline-size;

    @media (width <= 599px){
      margin-bottom: 1.6rem;
    }
  }


}

.contanct-tel{
  display: grid;
  place-items: center;
  width: fit-content;
  padding-bottom: 3rem;
  margin-inline: auto;
  margin-top: 1rem;
  color: white;

  @media (width <= 599px){
      padding-bottom: revert;
  }
}

.contanct-tel__num{
font-family: var(--font-futura-pt);
text-decoration: underline;
text-decoration-thickness: 4px;
text-underline-offset:.1em;

--clamp-max: 80;
--clamp-min: 48;
}


.steps{
  --column: 3;

  margin-top: 6.4rem;

  @media (width <= 599px){
    --column: 1;

    margin-top: 3.2rem;
  }
}

.step{
  position: relative;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--clamp-cqi);
  align-items: center;
  height: min(18cqi, 113px);
  padding: 1.6rem 0 1.6rem 3.7rem;
  font-weight: var(--fontweight-bold);
  color: white;
  background-color: var(--color-blue);

  --clamp-cqi-max: 35;
  --clamp-cqi-min: 15;
  --cqi-content-width: 1135;
  --clamp-max: 24;
  --clamp-min: 18;

  &:nth-child(-n+2)::after {
    position: absolute;
    top: 0;
    right: -7rem;
    z-index: 1;
    width: 0;
    height: 0;
    content: '';
    border-color: transparent transparent transparent var(--color-blue);
    border-style: solid;
    border-width: 56px 0 56px clamp(23px, 58cqh, 70px);
  }

  &:nth-child(n+2):nth-child(-n+3){
    padding-left: clamp(7rem, 11cqi, 10rem);
  }

  @media (width <= 599px) {
    grid-template-columns: max-content 1fr 28px;
    justify-items: center;
    padding: 1.6rem 2.2rem;

    &:nth-child(n+2):nth-child(-n+3){
      padding-left: 2.2rem;
    }

    &:nth-child(-n+2)::after {
      position: relative;
      right: revert;
      width: 0;
      height: 0;
      content: '';
      border-color: white transparent transparent;
      border-style: solid;
      border-width: 20px 13px 0;
    }
  }
}

.step.active{
  color: var(--color-blue);
  background-color: white;

  *{
    color: var(--color-blue);
  }

  &::after{
    border-color: transparent transparent transparent white;
  }

  @media (width <= 599px){
      &::after{
        border-color: var(--color-blue) transparent transparent;
      }
  }
}

.step__num{
  display: grid;
  place-items: center;
  font-family: var(--font-futura-pt);
  line-height: 1;

  --clamp-max: 55;
  --clamp-min: 30;

  span{
    font-weight: var(--fontweight-medium);

    --clamp-max: 26;
    --clamp-min: 15;
  }

  @media (width <= 599px){
      grid-template-columns: max-content 1fr;
      column-gap: .5rem;
      align-items: baseline;
  }

}

.contact-form{
  padding: 5.8rem;
  margin-inline: auto;
  margin-top: 3.8rem;
  background-color: white;

  @media (width <= 599px){
      padding: 3rem 0;
      margin-top: 3rem;
  }
}


/* ////formまわり//// */
.form-wrapper{
  width: var(--contact-width);
  margin-inline: auto;


  .m-button-parts{
    --unit: 2.4rem;

    width: min(75%, 309px);
    margin-top: 3.2rem;
    font-weight: var(--fontweight-bold);
    color: revert;
    background-color: var(--color-yellow);
    border-radius: 20rem;

    --clamp-max: 20;
    --clamp-min: 14;
  }

  /* @media (width <= 599px){
    padding: 0 1.6rem;
  } */
}

.required{
  display: flex;
  align-items: center;

  &::after {
  padding: 0 0.8rem .2rem;
  margin-left: 1.2rem;
  font-weight: var(--fontweight-medium);
  color: white;
  content: "必　須";
  background-color: var(--color-blue);

  --clamp-max: 15;
  --clamp-min: 10;
  }

  @media (width <= 599px){
    &::after {
      color: white;
    }
  }
}

::placeholder {
  color: #999;
}

input,
textarea,
#wpcf7cpcnf td {
  width: var(--contact-width);
  padding: 1.5rem 1.4rem;
  background-color: var(--color-gray);
  border: none;

  --clamp-min: 12;

  @media (width <= 599px){
    padding: 1.5rem .8rem;
  }
}

textarea {
  --min-rows: 9.4lh;
  --max-rows: 24lh;

  box-sizing: border-box;
  width: var(--contact-width);
  min-block-size: var(--min-rows);
  max-block-size: var(--max-rows);
  field-sizing: content;
  resize: block;
}

input[type="reset"],
input[type="submit"],
input[value="送信"] {
  line-height: 1.8;
  cursor: pointer;
}

.wpcf7-checkbox{
  display: grid;
  gap: 1.2rem;
  justify-content: start;
}

span[data-name="your-code"]{
  display: inline-block;
  width: 210px;
  margin-bottom: 1.2rem;
}


/* 同意ボタン */
.wpcf7-acceptance{
  display: grid;

  .wpcf7-list-item{
    display: block;
    margin: revert !important;

      label{
        display: flex;
        gap: 1rem;
        align-items: center;

        input[type="checkbox"]{
          width: 20px;
        }

      }
  }

  a{
    color: revert;
    text-decoration: underline;
  }

  @media (width <= 599px){
    margin-left: .8rem;
  }

}


.wpcf7-spinner {
    position: relative;
    display: inline-block;
    width: 0;
    height: 0;
    padding: 0;
    margin: 0;
    visibility: hidden;
    background-color: #23282d;
    border: none;
    border-radius: 100%;
    opacity: 0.75;
}

.wpcf7 .wpcf7-submit:disabled{
  filter: grayscale(1);
}


/* 確認画面(Confirm Plus Contact Form 7 */
div#wpcf7cpcnf{
  z-index: 1 !important;
  padding: 5rem 0 6rem;
}

div.wpcf7cp-btns{
  display: flex;
  gap: 3.2rem;
  width: min(90%, 640px);
  margin-inline: auto;
  margin-top: 8rem;

  button{
    --unit-block-size: 2.4rem;
    --unit-inline-size: 2.4rem;
    --clamp-max: 20;
    --clamp-min: 14;

    position: relative;
    display: flex;
    gap: 1.2rem;
    align-items: center;
    justify-content: center;
    width: min(90%, 360px);
    padding: var(--unit-block-size) var(--unit-inline-size);
    margin-inline: auto;
    font-weight: var(--fontweight-bold);
    line-height: 1;
    text-align: center;
    letter-spacing: 3.20px;
    cursor: pointer;
    background-color: var(--color-yellow);
    border: none;
    border-radius: 20rem;
    transition: var(--transition);
  }

  @media (width <= 599px){
      flex-wrap: wrap;
      margin-top: 4rem;
  }

}

@media (any-hover: hover){
  div.wpcf7cp-btns button:hover{
    opacity: .8;
  }
}

/* /////////PRIVACY POLICY//////// */
.privacy {
  .l-contents{
    width: min(90%, 1133px);
    margin-inline: auto;
  }

  .m-tittle-wrap{
    --cqi-content-width: 1133;
    --clamp-cqi-max: 40;
    --clamp-cqi-min: 32;
  }

  .m-text-block {
    word-break: normal;

    --clamp-min: 12;
    --clamp-max: 16;
  }
}

.privacy-policy-list {
  counter-reset: my-counter;
}

.privacy-policy-list__data {
  padding: 2.7rem 0 1rem;
  font-weight: bold;

  --clamp-min: 14;
  --clamp-max: 20;

  .m-text-block {
    margin-top: 2.7rem;
    font-weight: var(--fontweight-regular);
    word-break: normal;
  }

  @media (width <= 599px){
      padding: 2rem 0 0;

      .m-text-block{
        margin-top: 1.4rem;
      }
  }
}

.privacy-policy-list__data.-num{
  --clamp-min: 18;
  --clamp-max: 24;

  .m-text-block{
    margin-top: 1.6rem;
  }

  &::before {
    display: inline-block;
    margin-right: 1.2rem;
    font-family: var(--font-futura-pt);
    content: "0" counter(my-counter);
    counter-increment: my-counter;

    --clamp-min: 30;
    --clamp-max: 55;
  }

  @media (width <= 599px){
      padding: 1.4rem 0;

      .m-text-block{
        margin-top: .6rem;
      }
  }

}

/* /////footer///// */
.l-footer {
  container-type: inline-size;
}

.m-visual-wrap.-footer{
  --visual-height: 576;

  .m-logo-bg{
    position: absolute;
    inset: 0;
    z-index: 1;
    width: min(60%, 534px);
    margin: auto;
    fill: rgb(255 255 255 / .4);
  }

  @media (width <= 599px){
    --visual-height: 300;
  }

}

.footer-main{
  width: min(100%, 350px);
  padding: var(--clamp-cqi) 0;
  margin-inline: auto;

  --clamp-cqi-max: 56;
  --clamp-cqi-min: 52;

  @media (width <= 599px){
    padding: var(--clamp-cqi) 0 0;

    --clamp-cqi-min: 32;
  }
}

.footer-logo{
  display: block;
  width: 100%;

  @media (width <= 599px){
      width: min(100%, 212px);
      margin-inline: auto;
  }
}

.footer-info{
  margin-top: 2.6rem;
  text-align: center;

  @media (width <= 599px){
    margin-top: 1.2rem;
  }
}

.footer-menu {
  background-color: var(--color-mediumblue);

  @media (width <= 599px){
    display: none;
  }
}

.footer-navi-list {
  display: grid;
  grid-template-columns: repeat(var(--column), 1fr);
  gap: 0 var(--space);
  width: min(90%, 1000px);
  padding: var(--clamp-cqi) 0 0;
  margin-inline: auto;
  color: white;

  --cqi-content-width: 1000;
  --clamp-cqi-max:26;
  --clamp-cqi-min: 16;
  --column: 5;
  --space: 3rem;

  @media (width <= 599px){
      align-items: center;
      width: 100%;
      padding: 0;

      --column: 2;
      --space:.1rem;
  }
}

.footer-navi-list__data {
  padding: 2rem 0;
  text-align: center;

  --clamp-max:17.5;
  --clamp-min: 12;

  &:nth-child(-n+5){
    border-bottom: 1px solid white;
  }

  a{
    @media (width <= 599px){
      position: relative;
      display: flex;
      gap: 1rem;
      align-items: center;
      justify-content: center;
      padding: 1.7rem 1rem;

      }
    }

    @media (width <= 599px){
      height: 100%;
      padding: revert;

      &:nth-child(-n+8){
        border-bottom: 1px solid white;
      }

      &:nth-of-type(odd){
        border-right: 1px solid white;
      }
    }

}


.footer-bottom {
  position: relative;
  padding: 1.6rem 0;
  font-family: var(--font-inter);
  text-align: center;
  background-color: var(--color-mediumblue);

  @media (width <= 599px){
    padding: 2rem 0 3.2rem;
    background-color: revert;
  }
}

.footer-bottom__copy-right{
  color: white;

  --clamp-max: 12;
  --clamp-min: 12;

  @media (width <= 599px){
      color: revert;
  }
}

.footer-bottom__page-top{
  position: absolute;
  top: 0;
  right: 0;
  display: grid;
  place-items: center;
  width: 5.4rem;
  height: 100%;
  background-color: var(--color-yellow);

  @media (width <= 599px){
      width: 6.2rem;
  }
}

/* フローティングバナー */
.float-btnArea {
  position: fixed;
  right: 1.5%;
  bottom: 5%;
  z-index: 9;
  display: grid;
  row-gap: 1rem;
  place-content: center;
  width: min(17vw, 90px);
  aspect-ratio: 1 / 1;
  line-height: 1.2;
  text-align: center;
  visibility: hidden;
  background-color: rgb(255 255 255 / .7);
  border-radius: calc(infinity * 1px);
  box-shadow: 1px 1px 3px #333;
  opacity: 0;
  transition: opacity var(--transition), visibility var(--transition);

  --clamp-max: 18;
  --clamp-min: 12;

  /* &.m-rotate-link{
    --rotate-length: 8;
  } */

  @media (width <= 599px){
    bottom: 11%;
    row-gap: revert;
  }
}

.float-btnArea.show {
  visibility: visible;
  opacity: 1;
  transition: opacity 1s ease, visibility 1s ease;
}

@media (any-hover: hover) {
  .float-btnArea:hover{
    opacity: .7;
  }
}


/* スマホ下部固定メニュー */
.fixed-bottom-menu{
  --column: 3;
  --display-property: grid;

  position: fixed;
  bottom: 0;
  z-index: 9;
  width: 100%;
}

.fixed-bottom-menu__data{
  --clamp-min: 14;

  font-weight: var(--fontweight-bold);
  text-align: center;

  &:nth-of-type(1){
    color:white;
    background-color: var(--color-blue);
  }

  &:nth-of-type(2){
    color:white;
    background-color: var(--color-lightblue);
  }

  &:nth-of-type(3){
    background-color: var(--color-yellow);
  }

  & a{
    display: grid;
    place-items: center;
    height: 100%;
    padding: 1.2rem;
    pointer-events: auto;
  }

  & span{
    --clamp-min: 10;
  }

  .fixed-bottom-menu__en{
    font-family: var(--font-bahnschrift);
  }
}

/* リキャプチャ */
.grecaptcha-badge{
  @media (width <= 599px){
      visibility: hidden;
  }
}


}
/* /////@layer utility */