:root {
  --primary_100: #0c2e3b;
  --secondary_100: #1C76BD;
  --secondary_90: #2794E9;
  --secondary_80: #7FADC1;
  --secondary_50: #63C5F1;
  --secondary_40: #B0D8F8;
  --secondary_30: #93CDE7;
  --secondary_20: #A5C6E0;
  --secondary_10: #9DE1FF;
  --secondary_0: #63C5F1;
  
  --primaryShadow: rgb(12 46 59 /.2);
  
  --accent_100: #E27B0D;
  --accent_50: #fff6ec;
  --accent_10: #f8f8f8;
  --accentGradation: linear-gradient(20deg, #E27B0D, #f89d3c, #E27B0D, #E27B0D);
  
  --primaryGradation: linear-gradient(20deg, #1C76BD, #2c90dc, #1C76BD, #1C76BD);
  
  --secondaryBG_60: rgb(28 118 189 / .6);
  --secondaryBg: #DCF0FF;
  --secondaryGray_100: #c8cccd;
  --secondaryGray_50: rgba(203, 219, 225, 0.8);
  --secondaryGray_20: rgba(225, 233, 238, 0.4);
  --secondaryGray_0: #EFF3F6;
  --secondaryGray_rgb70: rgba(239, 243, 246, .7);

  --gradation_50: linear-gradient(90deg, var(--secondary_10), var(--secondary_50));

  --gradation_80: linear-gradient(90deg, var(--secondary_30), var(--secondary_80));

  --gradation_100: linear-gradient(90deg, var(--secondary_0), var(--secondary_100));

  --gradation_100_50: linear-gradient(90deg, var(--secondary_50), var(--secondary_100));

  --gradationPale: 190, 235, 255;
  --gradationDark: 70, 134, 184;
  --gradationOpacity: 0.94;

  --gradationBg: linear-gradient(90deg, rgba(var(--gradationPale), var(--gradationOpacity)), rgba(var(--gradationDark), var(--gradationOpacity)));


  --fontSize_min: .75rem
;

  @media (min-width: 992px) {
    --fontSize_min: .75rem
  }

  --fontSize_xs: .875rem;

  @media (min-width: 992px) {
    --fontSize_xs: .875rem;
  }

  --fontSize_base: 1rem;

  @media (min-width: 992px) {
    --fontSize_base: 1rem;
  }

  --fontSize_sm: 1.125rem;

  @media (min-width: 992px) {
    --fontSize_sm: 1.25rem;
  }

  --fontSize_md: 1.25rem;
  
  @media (min-width: 992px) {
    --fontSize_md: 1.6rem;
  }

  --fontSize_lg: 1.6rem;

  @media (min-width: 992px) {
    --fontSize_lg: 1.8rem;
  }

  --fontSize_decoSm: 2rem;

  @media (min-width: 992px) {
    --fontSize_decoSm: 2rem;
  }

  --fontSize_decoMd: 2rem;

  @media (min-width: 992px) {
    --fontSize_decoMd: 2.8rem;
  }

  --fontSize_decoLg: 2.75rem;

  @media (min-width: 992px) {
    --fontSize_decoLg: 4rem;
  }

  --shape-triangle-lower-left: polygon(0 0, 100% 0, 0 100%);
}


/* base ==================== */
html {
  scroll-behavior: smooth;
}

body {
  font-family: "Outfit", "Zen Maru Gothic", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-size: var(--fontSize_xs);
  letter-spacing: .2em;
  line-height: 1.8;
  color: var(--primary_100);
  /* container-type: inline-size; */
  /* container-name: body; */
}

a {
  color: inherit;
  text-decoration: none;
  font-optical-sizing: auto;
  font-weight: 500;
}

img {
  width: 100%;
  height: 100%;	
}

summary {
  display: block;
}

summary::-webkit-details-marker {
  display: none;
}

.inline--block {
  display: inline-block;
}

.break {
  display: block;
}

[data-position="lower-left"] {
  /* position: relative; */
}

[data-position="lower-left"]::after {
  --_size: 22px;
  position: absolute;
  content: "";
  inline-size: var(--_size);
  aspect-ratio: 1;
  inset-block-end: -21px;
  inset-inline-start: 0px;
  margin-block: auto;
  -webkit-clip-path: var(--shape-triangle-lower-left);
          clip-path: var(--shape-triangle-lower-left);
  background-color: currentcolor;
  z-index: 1;
}


/* bg */
.page {
  /* -webkit-clip-path: inset(0); */
  /* clip-path: inset(0); */

  &::after {
    content:"";
    display:block;
    position:fixed;
    top:0;
    left:0;
    z-index:-1;
    width:100%;
    height:100vh;
    height:100lvh;
    background-repeat:no-repeat;
    background-position:50% 100%;
    background-image: var(--gradationBg), 
    url('../assets/img/content/bg_main.webp');
    background-size:cover;
  }

  .main-bg {
    /* position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    background: var(--gradationBg), 
    url('../assets/img/content/bg_main.webp');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    z-index: -1; */
  }
}


/* layout ==================== */
.header--laptop {
  display: none;
}

.visuallyHidden {
  position: absolute !important;
  clip: rect(1px, 1px, 1px, 1px);
  padding: 0 !important;
  border: 0 !important;
  height: 1px !important;
  width: 1px !important;
  overflow: hidden;
}

@media (min-width: 992px) {
  .header--mobile {
    display: none;
  }
  
  .header--laptop {
    display: grid;
  }
}

.inner--narrow {
  max-width: 1080px;
  margin-inline: auto;
}


/* styling ==================== */

/* header */
.header {
  position: -webkit-sticky;
  position: sticky;
  top: 3vw;
  height: 0;
  z-index: 2;
  
  &:has(.details[open]) {
    border-end-end-radius: 0;
    border-end-start-radius: 0;
  }
  
  .inner {
    margin-inline: auto;
    width: calc(100% - 3vw * 2);
    background-color: rgba(255, 255, 255, 0.6);
    border-radius: 6px;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    box-shadow: 0px 2px 12px oklch(0.28 0.05 227.18 / 0.21);
    border-top: 1px solid rgb(255 255 255 / .6);
    border-left: 1px solid #e6e6e6;
    transition: border-radius .1s ease-in-out;
    
    @media (min-width: 992px) {
      background-color: rgba(255, 255, 255, 0.5);
      overflow: clip;
    }

    &:has(.details[open]) {
      border-end-end-radius: 0;
      border-end-start-radius: 0;
    }
    
    /* mobile */
    .header--mobile {
      position: relative;

      .container {

        &.container--logo {
          position: absolute;
          top: 10%;
          left: 3%;
          width: 100px;
        }

        &.container--navi {
          height: 44px;
          
          .button--hamburger {
            display: block;
            position: absolute;
            top: calc(50% - 1px);
            bottom: 0;
            left: 0;
            right: 4%;
            width: 48px;
            height: 20px;
            -webkit-margin-start: auto;
                    margin-inline-start: auto;
            transform: translateY(-50%);

            .hamburger__line {
              position: absolute;
              top: 50%;
              right: 0;
              bottom: 0;
              left: 0;
              width: 100%;
              height: 2px;
              background-color: var(--primary_100);
              transition: all .15s ease-in-out;
  
              &::before,
              &::after {
                position: absolute;
                display: block;
                width: 100%;
                height: 100%;
                background-color: inherit;
                content: '';
                transition: inherit;
              }
  
              &::before {
                top: -6px;
              }
              
              &::after {
                top: 6px;
              }
            }
          }
          
          /* __open */
          &[open] {

            .hamburger__line {
              background-color: transparent;

              &::before,
              &::after {
                top: 0;
                background-color: var(--primary_100);
              }

              &::before {
                transform: rotate(16deg);
              }
              
              &::after {
                transform: rotate(-16deg);
              }
            }
          }

          .navi {
            position: absolute;
            top: 100%;
            left: -1px;
            width: 100%;
            background-color: oklch(1 0 0 / 0.92);
            border-left: 1px solid #ddd;
            border-end-end-radius: 6px;
            border-end-start-radius: 6px;
            -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);
            box-shadow: 0px 2px 12px oklch(0.28 0.05 227.18 / 0.21);
            
            .navi__list {
              display: grid;
              justify-items: end;
              row-gap: 1.2em;
              padding: 6% 5% 8%;

              .navi__item {
              }
            }
          }
        }
      }
    }

    /* laptop */
    .header--laptop {
      grid-template-columns: 1fr auto;
      gap: 0;
      padding: 8% 5% 9%;

      @media (min-width: 992px) {
        padding: 0;
      }

      .container {

        &.container--logo {
          width: 200px;

          @media (min-width: 992px) {
            width: 140px;
            padding-inline: 1em;
            padding-block: 4px;
          }

          .title {

            @media (min-width: 992px) {
              line-height: 0;
            }
          }
        }

        &.container--navi {

          .navi {
 
            @media (min-width: 992px) {
              height: 100%;
            }
            
            .navi__list {
              display: grid;
              grid-template-columns: repeat(4, auto);
              -moz-column-gap: 2em;
              column-gap: 2em;
              width: -webkit-fit-content;
              width: -moz-fit-content;
              width: fit-content;
              
              @media (min-width: 992px) {
                gap: 0;
                height: 100%;
              }

              .navi__item {
                
                @media (min-width: 992px) {
                  height: 100%;
                }
                
                .link {
                 
                  @media (min-width: 992px) {
                    display: flex;
                    align-items: center;
                    height: 100%;
                  }

                  @media (any-hover: hover) {

                    &:hover {
                      text-decoration: underline;
                    }
                  }
                }

                &.item--cta {

                  .link {
                    padding-inline: 1.4em;
                    color: white;
                    background-color: var(--secondary_100);
                  }

                  &.cta--contact {
                    
                    .link {
                      background-color: var(--accent_100);
                    }
                  }
                }

                &:not(.item--cta) {
                  -webkit-margin-end: 1.4em;
                  margin-inline-end: 1.4em;
                }
              }
            }
          }
        }
      }
    }
  }
}


/* main */
.main-wrapper {
  
  /* section hero */
  .section {
    padding-inline: 5%;
    padding-block: 16%;
    overflow: clip;

    @media (min-width: 992px) {
      padding-block: 100px;
    }

    .inner {

      .container {

        &.container--heading {

          .heading {
            display: grid;
            scroll-margin-top: 4em;
            
            @media (min-width: 992px) {
              scroll-margin-top: 7em;
            }

            .main {
              font-size: var(--fontSize_md);
            }

            .sub {
              font-size: var(--fontSize_decoLg);
              letter-spacing: .22em;
              font-weight: 400;
              line-height: .44;
              mix-blend-mode: soft-light;
            }
          }
        }
      }
    }

    &.section--hero {
      padding: 0;
      /* padding-block-start: calc(40px + 2vw + 5%); */

      .inner {
        position: relative;

        .container {

          &.container--bg {
            aspect-ratio: 1 / 1.2;

            @media (min-width: 992px) {
              height: 90vh;
              aspect-ratio: auto;
            }

            .movie {
              position: relative;
              width: 100%;
              height: 100%;
              -o-object-fit: cover;
                object-fit: cover;
              -webkit-filter: brightness(.7);
                      filter: brightness(.7);
            }
          }

          &.container--content {
            position: absolute;
            bottom: 10%;
            left: 5%;

            @media (min-width: 992px) {
              bottom: 38%;
            }

            .heading {
              display: grid;
              grid-template-rows: repeat(2, 1fr);
              row-gap: 1em;

              .copy {
                height: 7vw;
                max-height: 28px;

                @media (min-width: 992px) {
                  max-height: 40px;
                }

                .image {
                  width: auto;
                  -o-object-fit: contain;
                    object-fit: contain;
                }

                &.copy--first {
                }

                &.copy--second {
                }
              }
            }
          }
        }
      }
    }


    /* section features */
    &.section--features {

      .inner {

        .container {

          &.container--heading {

            .heading {
              
              @media (min-width: 992px) {
              }

              .main {
              }

              .sub {
                font-size: var(--fontSize_decoLg);

                @media (min-width: 992px) {
                  /* font-size: var(--fontSize_decoMd); */
                }
              }
            }
          }

          &.container--content {
            -webkit-margin-before: 10%;
            margin-block-start: 14%;
            
            @media (min-width: 992px) {
              -webkit-margin-before: 4em;
              margin-block-start: 4em;
            }

            .list {

              .item {

                @media (min-width: 992px) {
                  display: grid;
                  grid-template-columns: auto 1fr;
                  position: relative;
                }

                .box {

                  &.box--text {
                    position: relative;
                    color: white;
                    -webkit-padding-start: 6%;
                    padding-inline-start: 6%;
                    z-index: 0;

                    @media (min-width: 992px) {
                      position: static;
                      order: 2;
                    }

                    &::before {
                      content: '';
                      position: absolute;
                      top: 6%;
                      left: 0;
                      width: calc(100vw - 5%);
                      height: 122%;
                      background-color: var(--secondary_100);
                      border-start-start-radius: 6px;
                      border-end-start-radius: 6px;
                      z-index: -1;

                      @media (min-width: 992px) {
                        top: 8%;
                        left: 5%;
                        height: 108%;
                      }
                    }

                    .heading {
                      display: grid;
                      row-gap: .4em;
                      font-size: var(--fontSize_md);

                      .number {
                        font-size: 2.2rem;
                        font-weight: 600;
                        line-height: 1;
                      }
                    }

                    .description {
                      -webkit-margin-before: 1em;
                      margin-block-start: 1em;
                    }
                  }

                  &.box--figure {
                    position: relative;
                    top: 1.5em;
                    left: -6%;
                    width: 80%;
                    max-width: 320px;

                    @media (min-width: 992px) {
                      top: -0.5em;
                      left: 0;
                      order: 1;
                      width: 34vw;
                      z-index: 1;
                    }

                    .image {
                      border-start-end-radius: 6px;
                      border-end-end-radius: 6px;

                      @media (min-width: 992px) {
                        border-radius: 6px;
                      }
                    }
                  }
                }

                + .item {
                  -webkit-margin-before: 5em;
                  margin-block-start: 5em;

                  @media (min-width: 992px) {
                    -webkit-margin-before: 6em;
                    margin-block-start: 6em;
                  }
                }

                &:nth-child(even) {

                  @media (min-width: 992px) {
                  }
                  
                  .box {

                    &.box--text {
                      -webkit-padding-end: 6%;
                      padding-inline-end: 6%;

                      @media (min-width: 992px) {
                        order: 1;
                      }

                      &::before {
                        left: auto;
                        right: 0;
                        border-start-start-radius: 0;
                        border-end-start-radius: 0;
                        border-start-end-radius: 6px;
                        border-end-end-radius: 6px;

                        @media (min-width: 992px) {
                          right: 5%;
                        }
                      }
                    }

                    &.box--figure {
                      left: auto;
                      right: -6%;
                      -webkit-margin-start: auto;
                      margin-inline-start: auto;

                      @media (min-width: 992px) {
                        right: 0;
                        order: 2;
                      }

                      .image {
                        border-start-end-radius: 0;
                        border-end-end-radius: 0;
                        border-start-start-radius: 6px;
                        border-end-start-radius: 6px;

                        @media (min-width: 992px) {
                          border-radius: 6px;
                        }
                      }
                    }
                  }
                }
              }
            }

            .message {
              display: grid;
              -webkit-margin-before: 3em;
              margin-block-start: 3em;
              font-size: var(--fontSize_md);
              font-weight: 500;

              @media (min-width: 992px) {
                display: inline-block;
                width: 100%;
                -webkit-margin-before: 5em;
                margin-block-start: 5em;
                text-align: right;
              }

              .inline--block {
                -webkit-margin-start: 2vw;
                margin-inline-start: 1vw;
                letter-spacing: .12em;

                @media (min-width: 992px) {
                  -webkit-margin-start: 0;
                  margin-inline-start: 0;
                  letter-spacing: .2em;
                }
              }
            }
          }
        }
      }
    }


    /* section origin */
    &.section--origin {

      .inner {

        .container {

          &.container--name {
            -webkit-margin-before: 2em;
            margin-block-start: 2em;

            @media (min-width: 992px) {
              -webkit-margin-before: 3em;
              margin-block-start: 3em;
              
            }
            
            .inner {
              display: grid;
              justify-items: center;
              padding: 6% 6% 8%;
              background-color: white;
              border-radius: 6px;
              box-shadow: 0px 2px 12px oklch(0.28 0.05 227.18 / 0.21);

              @media (min-width: 992px) {
                padding: 3em 4em 4em;
              }

              .figure {
                width: 30%;

                @media (min-width: 992px) {
                  width: 18%;
                }

                .image {
                  -o-object-fit: contain;
                  object-fit: contain;
                }
              }

              .name {
                -webkit-margin-before: 1.2em;
                margin-block-start: 1.2em;
                border-radius: 4px;
                overflow: clip;

                @media (min-width: 992px) {
                  display: flex;
                }

                .heading {
                  padding: 5%;
                  color: var(--secondary_100);
                  background-color: var(--secondaryBg);
                  text-align: center;

                  @media (min-width: 992px) {
                    display: flex;
                    place-items: center;
                    flex-shrink: 0;
                    padding: 1em 1.5em;
                  }
                }

                .description {
                  padding: 5%;
                  background-color: var(--secondaryGray_0);
                  font-weight: 500;

                  @media (min-width: 992px) {
                    padding: 1em 1.5em;
                  }
                }
              }
              
              .message {
                -webkit-margin-before: 1.8em;
                margin-block-start: 1.8em;
                font-weight: 500;

                @media (min-width: 992px) {
                  text-align: center;
                }
              }
            }
          }

          &.container--company {
            padding-block: 3em;
            -webkit-margin-before: 3em;
            margin-block-start: 3em;
            -o-border-image: linear-gradient(var(--secondaryGray_rgb70) 0 0) 0 / /0 100vi;
            border-image: linear-gradient(var(--secondaryGray_rgb70) 0 0) fill 0 / /0 100vi;

            @media (min-width: 992px) {
              padding-block: 4em 5em;
              -webkit-margin-before: 5em;
              margin-block-start: 5em;
              margin-inline: auto;
              max-width: 740px;
            }

            .heading {
              display: grid;

              .main {
                font-size: var(--fontSize_base);
                line-height: 0;
              }

              .sub {
                font-size: var(--fontSize_decoSm);
                letter-spacing: .22em;
                font-weight: 400;
                line-height: 1.4;
                background: var(--gradation_80);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
              }
            }

            .company-info {
              display: grid;
              row-gap: .8em;
              -webkit-margin-before: 4em;
              margin-block-start: 4em;

              @media (min-width: 992px) {
                gap: 0;
              }

              .company-info__item {

                @media (min-width: 992px) {
                  display: grid;
                  grid-template-columns: 7em auto;
                }

                .info {

                  @media (min-width: 992px) {
                  }
                  
                  &.info--term {
                    padding: .2em .8em;
                    background-color: var(--secondaryGray_50);
                    
                    @media (min-width: 992px) {
                      display: flex;
                      align-items: center;
                      padding: 1em;
                      background-color: transparent;
                      border-bottom: 1px solid var(--secondary_100);
                    }
                  }
                  
                  &.info--description {
                    padding: .4em .8em;
              
                    @media (min-width: 992px) {
                      padding: 1em;
                      border-bottom: 1px solid var(--secondary_20);
                    }

                    .link {
                      margin-left: 1em;
                      text-decoration: underline;
                      font-weight: 400;

                      @media (any-hover: hover) {
                        
                        &:hover {
                          color: var(--secondary_100);
                          font-weight: 500;
                        }
                      }
                    }
                  }
                }

                &:first-child {

                  .info {

                    @media (min-width: 992px) {
                    }
                    
                    &.info--term {
                      
                      @media (min-width: 992px) {
                        border-top: 1px solid var(--secondary_100);
                      }
                    }
                    
                    &.info--description {
                
                      @media (min-width: 992px) {
                        border-top: 1px solid var(--secondary_20);
                      }
                    }
                  }
                }
              }
            }
          }

          &.container--message {

            .message {
              display: grid;
              -webkit-margin-before: 3em;
              margin-block-start: 3em;
              font-size: var(--fontSize_md);
              font-weight: 500;

              @media (min-width: 992px) {
                display: inline-block;
                width: 100%;
                -webkit-margin-before: 4em;
                margin-block-start: 4em;
                text-align: center;
              }

              .inline--block {
                -webkit-margin-start: 2vw;
                margin-inline-start: 1vw;
                letter-spacing: .12em;

                @media (min-width: 992px) {
                  -webkit-margin-start: 0;
                  margin-inline-start: 0;
                  letter-spacing: .2em;
                }
              }
            }
          }
        }
      }
    }


    /* section mission */
    &.section--mission {

      .inner {

        .container {

          &.container--content {
            display: grid;
            justify-items: center;
            padding: 10% 6%;
            -webkit-margin-before: 2em;
            margin-block-start: 2em;
            background-color: white;
            border-radius: 6px;
            box-shadow: 0px 2px 12px oklch(0.28 0.05 227.18 / 0.21);

            @media (min-width: 992px) {
              padding: 4em;
            }
            
            .container__inner {

              .block {

                &.block--mission {
                  display: grid;
                  justify-content: center;

                  .heading {
                    width: -webkit-fit-content;
                    width: -moz-fit-content;
                    width: fit-content;
                    padding: 1% 2px .8%;
                    color: white;
                    background-color: var(--secondary_100);
                    border-radius: 4px;
                    font-size: var(--fontSize_sm);
                    text-align: center;

                    @media (min-width: 992px) {
                      font-size: var(--fontSize_md);
                      padding: .4em 1.4em .3em;
                    }
                  }
                }

                &.block--description {
                  -webkit-margin-before: 2em;
                  margin-block-start: 2em;
                  max-width: 760px;
                  
                  .box {

                    .heading {
                      position: relative;
                      color: transparent;
                      background-image: var(--gradation_100_50);
                      -webkit-background-clip: text;
                      background-clip: text;
                      font-size: var(--fontSize_xs);
                      font-weight: normal;
                      letter-spacing: .1em;
                      line-height: 1;
                      
                      &::after {
                        position: absolute;
                        left: 0;
                        bottom: 1px;
                        content: '';
                        width: 100%;
                        height: 1px;
                        background-image: var(--gradation_100_50);
                      }
                    }

                    .description {
                      -webkit-margin-before: .6em;
                      margin-block-start: .6em;
                      letter-spacing: .1em;
                    }

                    + .box {
                      -webkit-margin-before: 1.2em;
                      margin-block-start: 1.2em;
                    }
                  }
                }
              }
            }
          }

          &.container--company {
            padding-block: 3em;
            -webkit-margin-before: 3em;
            margin-block-start: 3em;
            -o-border-image: linear-gradient(var(--secondaryGray_rgb70) 0 0) 0 / /0 100vi;
            border-image: linear-gradient(var(--secondaryGray_rgb70) 0 0) fill 0 / /0 100vi;

            @media (min-width: 992px) {
              padding-block: 4em 5em;
              -webkit-margin-before: 5em;
              margin-block-start: 5em;
              margin-inline: auto;
              max-width: 740px;
            }

            .heading {
              display: grid;

              .main {
                font-size: var(--fontSize_base);
                line-height: 0;
              }

              .sub {
                font-size: var(--fontSize_decoSm);
                letter-spacing: .22em;
                font-weight: 400;
                line-height: 1.4;
                background: var(--gradation_80);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
              }
            }

            .company-info {
              display: grid;
              row-gap: .8em;
              -webkit-margin-before: 4em;
              margin-block-start: 4em;

              @media (min-width: 992px) {
                gap: 0;
              }

              .company-info__item {

                @media (min-width: 992px) {
                  display: grid;
                  grid-template-columns: 7em auto;
                }

                .info {

                  @media (min-width: 992px) {
                  }
                  
                  &.info--term {
                    padding: .2em .8em;
                    background-color: var(--secondaryGray_50);
                    
                    @media (min-width: 992px) {
                      display: flex;
                      align-items: center;
                      padding: 1em;
                      background-color: transparent;
                      border-bottom: 1px solid var(--secondary_100);
                    }
                  }
                  
                  &.info--description {
                    padding: .4em .8em;
              
                    @media (min-width: 992px) {
                      padding: 1em;
                      border-bottom: 1px solid var(--secondary_20);
                    }

                    .link {
                      margin-left: 1em;
                      text-decoration: underline;
                      font-weight: 400;

                      @media (any-hover: hover) {
                        
                        &:hover {
                          color: var(--secondary_100);
                          font-weight: 500;
                        }
                      }
                    }
                  }
                }

                &:first-child {

                  .info {

                    @media (min-width: 992px) {
                    }
                    
                    &.info--term {
                      
                      @media (min-width: 992px) {
                        border-top: 1px solid var(--secondary_100);
                      }
                    }
                    
                    &.info--description {
                
                      @media (min-width: 992px) {
                        border-top: 1px solid var(--secondary_20);
                      }
                    }
                  }
                }
              }
            }
          }

          &.container--message {

            .message {
              display: grid;
              -webkit-margin-before: 3em;
              margin-block-start: 3em;
              font-size: var(--fontSize_md);
              font-weight: 500;

              @media (min-width: 992px) {
                display: inline-block;
                width: 100%;
                -webkit-margin-before: 4em;
                margin-block-start: 4em;
                text-align: center;
              }

              .inline--block {
                -webkit-margin-start: 2vw;
                margin-inline-start: 1vw;
                letter-spacing: .12em;

                @media (min-width: 992px) {
                  -webkit-margin-start: 0;
                  margin-inline-start: 0;
                  letter-spacing: .2em;
                }
              }
            }
          }
        }
      }
    }


    /* section company */
    &.section--company {
      padding-block: 0;

      .inner {

        .container {

          &.container--name {
            -webkit-margin-before: 3em;
            margin-block-start: 3em;
            
            .inner {
              display: grid;
              justify-items: center;
              padding: 6% 6% 8%;
              background-color: white;
              border-radius: 6px;
              box-shadow: 0px 2px 12px oklch(0.28 0.05 227.18 / 0.21);

              @media (min-width: 992px) {
                padding: 3em 4em 4em;
              }

              .figure {
                width: 30%;

                @media (min-width: 992px) {
                  width: 18%;
                }

                .image {
                  -o-object-fit: contain;
                  object-fit: contain;
                }
              }

              .name {
                -webkit-margin-before: 1.2em;
                margin-block-start: 1.2em;
                border-radius: 4px;
                overflow: clip;

                @media (min-width: 992px) {
                  display: flex;
                }

                .heading {
                  padding: 5%;
                  color: var(--secondary_100);
                  background-color: var(--secondaryBg);
                  text-align: center;

                  @media (min-width: 992px) {
                    display: flex;
                    place-items: center;
                    flex-shrink: 0;
                    padding: 1em 1.5em;
                  }
                }

                .description {
                  padding: 5%;
                  background-color: var(--secondaryGray_0);
                  font-weight: 500;

                  @media (min-width: 992px) {
                    padding: 1em 1.5em;
                  }
                }
              }
              
              .message {
                -webkit-margin-before: 1.8em;
                margin-block-start: 1.8em;
                font-weight: 500;

                @media (min-width: 992px) {
                  text-align: center;
                }
              }
            }
          }

          &.container--content {
            padding-block: 4em;
            margin-block: 0;
            -o-border-image: linear-gradient(var(--secondaryGray_rgb70) 0 0) 0 / /0 100vi;
            border-image: linear-gradient(var(--secondaryGray_rgb70) 0 0) fill 0 / /0 100vi;

            @media (min-width: 992px) {
              padding-block: 5em 7em;
              margin-inline: auto;
              max-width: 740px;
            }

            .heading {
              display: grid;
              scroll-margin-top: 4.5em;

              @media (min-width: 992px) {
                scroll-margin-top: 10em;
              }

              .main {
                font-size: var(--fontSize_base);
                line-height: 0;
              }

              .sub {
                font-size: var(--fontSize_decoSm);
                letter-spacing: .22em;
                font-weight: 400;
                line-height: 1.4;
                background: var(--gradation_80);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
              }
            }

            .company-info {
              display: grid;
              row-gap: .8em;
              -webkit-margin-before: 4em;
              margin-block-start: 4em;

              @media (min-width: 992px) {
                gap: 0;
              }

              .company-info__item {

                @media (min-width: 992px) {
                  display: grid;
                  grid-template-columns: 7em auto;
                }

                .info {

                  @media (min-width: 992px) {
                  }
                  
                  &.info--term {
                    padding: .2em .8em;
                    background-color: var(--secondaryGray_50);
                    
                    @media (min-width: 992px) {
                      display: flex;
                      align-items: center;
                      padding: 1em;
                      background-color: transparent;
                      border-bottom: 1px solid var(--secondary_100);
                    }
                  }
                  
                  &.info--description {
                    padding: .4em .8em;
              
                    @media (min-width: 992px) {
                      padding: 1em;
                      border-bottom: 1px solid var(--secondary_20);
                    }

                    .link {
                      text-decoration: underline;
                      font-weight: 400;
                      
                      @media (min-width: 992px) {
                        margin-left: 1em;
                      }

                      @media (any-hover: hover) {
                        
                        &:hover {
                          color: var(--secondary_100);
                          font-weight: 500;
                          text-decoration: none;
                        }
                      }
                    }
                  }
                }

                &:first-child {

                  .info {

                    @media (min-width: 992px) {
                    }
                    
                    &.info--term {
                      
                      @media (min-width: 992px) {
                        border-top: 1px solid var(--secondary_100);
                      }
                    }
                    
                    &.info--description {
                
                      @media (min-width: 992px) {
                        border-top: 1px solid var(--secondary_20);
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }


    /* section cta */
    &.section--cta {
      
      .inner {

        @media (min-width: 992px) {
          display: grid;
          place-items: center;
        }

        .content {
          width: -webkit-fit-content;
          width: -moz-fit-content;
          width: fit-content;
          margin-inline: auto;
          color: white;
          line-height: 2.2;
          scroll-margin-top: 4em;

          @media (min-width: 992px) {
            display: flex;
            align-items: baseline;
            scroll-margin-top: 10em;
          }

          .text {
            font-size: var(--fontSize_sm);
            font-weight: 500;
            -webkit-filter: drop-shadow(0px 6px 12px oklch(0.28 0.05 227.18 / 0.8));
            filter: drop-shadow(0px 6px 12px oklch(0.28 0.05 227.18 / 0.8));
          }
          
          .button-box {
            display: flex;
            align-items: baseline;
            -moz-column-gap: 1em;
            column-gap: .5em;
            
            .conjunction {
              font-size: var(--fontSize_sm);
              font-weight: 500;
              -webkit-filter: drop-shadow(0px 6px 12px oklch(0.28 0.05 227.18 / 0.8));
              filter: drop-shadow(0px 6px 12px oklch(0.28 0.05 227.18 / 0.8));
            }

            .button-box__inner {
              display: grid;
              justify-items: center;
              
              .button {
                display: grid;
                grid-template-columns: 1fr auto;
                -moz-column-gap: .5em;
                column-gap: .5em;
                align-items: center;
                padding: 10px 32px 11px;
                background-color: var(--accent_100);
                border-radius: 6px;
                font-size: var(--fontSize_md);
                font-weight: 500;
                line-height: 1.3;

                background-image: var(--accentGradation);
                background-size: 300% 100%;
                background-position-x: right;
                moz-transition: all .3s ease-in-out;
                transition: all .4s ease-in-out;

                @media (min-width: 992px) {
                  font-size: 20px;
                }

                &::after {
                  content: '';
                  width: .3em;
                  height: .3em;
                  border-right: 2px solid white;
                  border-top: 2px solid white;
                  rotate: 45deg;
                  transition: transform .25s ease-in-out;
                }

                @media (any-hover: hover) {

                  &:hover {
                    background-size: 500% 100%;
                    background-position-x: left;
                    moz-transition: all .4s ease-in-out;
                    transition: all .4s ease-in-out;

                    &::after {
                      transform: rotate(0deg) translate(6px, -6px);
                    }
                  }
                }
              }
              
              .note {
                font-size: var(--fontSize_min);
                line-height: 1.8;
                -webkit-filter: drop-shadow(0px 4px 12px oklch(0.28 0.05 227.18 / 0.8));
                filter: drop-shadow(0px 4px 12px oklch(0.28 0.05 227.18 / 0.8));
              }
            }
          }
        }
      }

      &.cta--recruit {
        background: url(../assets/img/content/bg_recruit.webp) no-repeat center / cover;

        .inner {

          @media (min-width: 992px) {
          }

          .content {
            display: grid;
            justify-content: center;
            -webkit-filter: drop-shadow(0px 4px 2px oklch(0.28 0.05 227.18 / 0.8));
            filter: drop-shadow(0px 4px 2px oklch(0.28 0.05 227.18 / 0.8));

            @media (min-width: 992px) {
            }

            .text {
              line-height: 1.8;
              text-align: center;
            }
            
            .button-box {
              justify-content: center;
              -webkit-margin-before: 1.4em;
              margin-block-start: 1.4em;
              
              .conjunction {
              }

              .button-box__inner {
                
                .button {
                  background-image: var(--primaryGradation);

                  @media (min-width: 992px) {
                  }

                  &::after {
                  }

                  @media (any-hover: hover) {

                    &:hover {
                    }
                  }
                }
                
                .note {
                }
              }
            }
          }
        }
      }
    }
  }


  /* pre footer */
  .pre-footer {

    .gallery__loop {
      width: 100%;

      .loop__container {
        display: flex;
        align-items: center;
        height: 230px;
        -webkit-filter: drop-shadow(0px 8px 6px var(--primaryShadow));
        filter: drop-shadow(0px 8px 6px var(--primaryShadow));
        overflow: clip;
        
        @media (min-width: 992px) {
          height: 320px;
        }
        
        @media (min-width: 1200px) {
          height: 380px;
        }
        
        @media (min-width: 1920px) {
          justify-content: center;
          height: auto;
          padding-inline: 5%;
        }

        .picture {
          height: 100%;
          
          .image {
            width: auto;
            height: 100%;
            -o-object-fit: cover;
            object-fit: cover;
      
            @media (min-width: 1920px) {
              width: 100%;
              -o-object-fit: contain;
              object-fit: contain;
            }
          }

          &:first-child {
            
            .image {
              -webkit-animation: loop 60s -30s linear infinite;
              animation: loop 60s -30s linear infinite;
              
              @media (min-width: 1920px) {
                -webkit-animation: none;
                animation: none;
              }
            }
          }

          &:last-child {
            
            .image {
              -webkit-animation: loop2 60s linear infinite;
              animation: loop2 60s linear infinite;
              
              @media (min-width: 1920px) {
                display: none;
              }
            }
          }
        }
      }
    }
  }
}


/* keyframe */
@-webkit-keyframes loop {
  0% {
    transform: translateX(100%);
  }
  
  to {
    transform: translateX(-100%);
  }
}
  @keyframes loop {
  0% {
    transform: translateX(100%);
  }
  
  to {
    transform: translateX(-100%);
  }
}

@-webkit-keyframes loop2 {
  0% {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-200%);
  }
}

@keyframes loop2 {
  0% {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-200%);
  }
}


/* footer */
.footer {
  padding-inline: 3vw;
  padding-block: 6vw 3vw;

  @media (min-width: 992px) {
    padding-block: 3vw;
  }
  
  .inner {
    display: grid;
    justify-items: center;
    padding-inline: 3%;
    padding-block: 5% 3%;
    background-color: white;
    border-radius: 6px;
    box-shadow: 0px 2px 12px oklch(0.28 0.05 227.18 / 0.21);

    @media (min-width: 992px) {
      padding-block: 2em;
    }

    .container {

      &.container--navi {

        .navi__list {
          display: flex;
          justify-content: center;
          gap: 1.2em;

          .navi__item {

            .link {

              @media (any-hover: hover) {

                &:hover {
                  text-decoration: underline;
                }
              }
            }
          }
        }

        .cta__list {
          display: flex;
          justify-content: center;
          gap: 1em;
          -webkit-margin-before: 1em;
          margin-block-start: 1em;

          .cta__item {
            
            .link {
              display: flex;
              padding-inline: 1.5em;
              padding-block: .4em .3em;
              color: white;
              background-color: var(--secondary_100);
              border-radius: 100vmax;
              line-height: 1.3;

              @media (any-hover: hover) {

                &:hover {
                  text-decoration: underline;
                }
              }
            }
            
            &:nth-child(2) {
              
              .link {
                background-color: var(--accent_100);
              }
            }
          }
        }
      }

      &.container--copyright {
        display: grid;
        grid-template-columns: 1fr auto;
        -moz-column-gap: 1em;
             column-gap: 1em;
        align-items: center;
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
        -webkit-margin-before: 1em;
        margin-block-start: 1em;

        @media (min-width: 992px) {
          -moz-column-gap: 2em;
               column-gap: 2em;
        }

        .figure {
          max-width: 160px;

          .image {
          }
        }

        .copyright {
          font-size: var(--fontSize_min);
          line-height: 1.8;
        }
      }
    }

    .separator {
      display: block;
      width: 100%;
      height: 1px;
      -webkit-margin-before: 1.5em;
      margin-block-start: 1.5em;
      background-color: var(--secondaryGray_100);
    }
  }
}


/* recruit ==================== */
.page--recruit {

  .header {
  }

  .main-wrapper {

    .main-inner {

      .section {

        @media (min-width: 992px) {
          padding-block: 120px;
        }

        /* section title */
        &.section--title {
          padding-inline: 0;
          padding-block: calc(44px + 3vw * 2 + 2.5em) 4em;
          background: url(../assets/img/content/title_recruit.webp) no-repeat center / cover;
          
          @media (min-width: 992px) {
            -webkit-padding-after: 5em;
            padding-block-end: 5em;
          }

          .inner {

            .container {

              &.container--heading {
                width: -webkit-fit-content;
                width: -moz-fit-content;
                width: fit-content;
                padding-inline: 5vw 2em;
                padding-block: 2em .6em;
                background-image: var(--gradation_100_50);
                border-start-end-radius: 6px;
                border-end-end-radius: 6px;

                .heading {

                  .sub {
                    font-size: var(--fontSize_decoLg);
                    mix-blend-mode: plus-lighter;
                    opacity: .7;

                    @media (min-width: 992px) {
                      font-size: var(--fontSize_decoMd);
                    }
                  }

                  .main {
                    color: white;
                    font-weight: 500;
                  }
                }
              }
            }
          }
        }

        /* section message */
        &.section--message {
          padding-inline: 0;
          padding-block: 0;

          .inner {

            .container {

              &.container--heading {
                padding-inline: 5%;
                padding-block: 1em 3em;
                background: url(../assets/img/content/bg_message.webp) no-repeat center / cover;
                
                @media (min-width: 992px) {
                  padding-block: 6em 8em;
                }
                
                .heading {
                  display: grid;
                  max-width: 1080px;
                  margin-inline: auto;
                  scroll-margin-top: 4em;
                  
                  @media (min-width: 992px) {
                    scroll-margin-top: 7em;
                  }

                  .main {
                    font-size: var(--fontSize_md);
                    line-height: 0;
                    /* filter: drop-shadow(0px 1px 4px white); */
                  }

                  .sub {
                    font-size: var(--fontSize_decoLg);
                    letter-spacing: .22em;
                    font-weight: 400;
                    line-height: 1.4;
                    background: var(--gradation_50); -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                    mix-blend-mode: multiply;

                    @media (min-width: 992px) {
                      /* font-size: var(--fontSize_decoMd); */
                    }
                  }
                }
              }

              &.container--content {
                padding-inline: 5%;
                padding-block: 4em;
                -o-border-image: linear-gradient(var(--secondaryBG_60) 0 0) 0 / /0 100vi;
                border-image: linear-gradient(var(--secondaryBG_60) 0 0) fill 0 / /0 100vi;

                @media (min-width: 992px) {
                  padding-block: 5em;
                  margin-inline: auto;
                  max-width: 780px;
                }

                .text {
                  color: white;
                  font-weight: 500;
                  line-height: 2.1;
                  letter-spacing: .15em;

                  + .text {
                    -webkit-margin-before: 2em;
                    margin-block-start: 2em;
                  }

                  &.name {
                    text-align: right;
                  }
                }
              }
            }
          }
        }

            /* section origin */
    &.section--origin {
      padding-block: 22% 12%;

      @media (min-width: 992px) {
        padding-block: 120px 32px;
      }
    }


        /* section recruit */
        &.section--recruit {
          -webkit-padding-after: 0;
          padding-block-end: 0;

          .inner {

            .container {

              &.container--heading {

                .heading {
                  
                  @media (min-width: 992px) {
                  }

                  .main {
                  }

                  .sub {
                    font-size: var(--fontSize_decoLg);

                    @media (min-width: 992px) {
                      /* font-size: var(--fontSize_decoMd); */
                    }
                  }
                }
              }

              &.container--flow {
                -webkit-margin-before: 2.5em;
                margin-block-start: 2.5em;
                box-shadow: 0px 2px 12px oklch(0.28 0.05 227.18 / 0.21);
                
                .list {
                  border-radius: 6px;
                  overflow: clip;

                  @media (min-width: 992px) {
                    display: grid;
                    grid-template-columns: repeat(3, 1fr);
                  }

                  .item {
                    position: relative;
                    display: grid;
                    grid-template-columns: auto 1fr;
                    -moz-column-gap: 16px;
                    column-gap: 16px;
                    align-items: center;
                    padding-inline: 24px;
                    padding-block: 16px;
                    background-color: var(--secondary_100);

                    .box {

                      &.box--number {
                        display: grid;
                        place-items: center;
                        width: 3.2em;
                        height: 3.2em;
                        border: 2px solid white;
                        border-radius: 50%;
                        aspect-ratio: 1;

                        .number {
                          -webkit-padding-start: 3px;
                          padding-inline-start: 3px;
                          color: white;
                          font-size: var(--fontSize_sm);
                          font-weight: 500;
                        }
                      }

                      &.box--content {
                        color: white;

                        .heading {
                          font-size: var(--fontSize_sm);
                          font-weight: 500;
                        }

                        .description {
                        }
                      }
                    }

                    &[data-position="lower-left"]::after {
                      background-color: var(--secondary_100);

                      @media (min-width: 992px) {
                      }
                    }

                    &:nth-child(2) {
                      background-color: var(--secondary_90);

                      &[data-position="lower-left"]::after {
                        background-color: var(--secondary_90);
                      }

                      &::before {
                        
                        @media (min-width: 992px) {
                          position: absolute;
                          top: 0;
                          left: -4.5%;
                          content: '';
                          width: 20%;
                          height: 100%;
                          background-color: var(--secondary_90);
                          -webkit-clip-path: polygon(25% 0, 25% 100%, 0% 100%, 21% 50%, 0% 0%);
                                  clip-path: polygon(25% 0, 25% 100%, 0% 100%, 21% 50%, 0% 0%);
                        }
                      }
                    }

                    &:nth-child(3) {
                      background-color: var(--secondary_40);

                      .box {

                        &.box--number {
                          border-color: var(--secondary_100);

                          .number {
                            color: var(--secondary_100);
                          }
                        }
                        
                        &.box--content {
                          color: var(--secondary_100);
                        }
                      }

                      &::before {
                        
                        @media (min-width: 992px) {
                          position: absolute;
                          top: 0;
                          left: -4.5%;
                          content: '';
                          width: 20%;
                          height: 100%;
                          background-color: var(--secondary_40);
                          -webkit-clip-path: polygon(25% 0, 25% 100%, 0% 100%, 21% 50%, 0% 0%);
                                  clip-path: polygon(25% 0, 25% 100%, 0% 100%, 21% 50%, 0% 0%);
                        }
                      }
                    }
                  }
                }
              }

              &.container--details {
                padding-inline: 5%;
                padding-block: 3em;
                -webkit-margin-before: 3em;
                margin-block-start: 3em;
                background-color: white;
                border-radius: 6px;
                box-shadow: 0px 2px 12px oklch(0.28 0.05 227.18 / 0.21);

                @media (min-width: 992px) {
                  padding-block: 5em 7em;
                  -webkit-margin-before: 5em;
                  margin-block-start: 5em;
                }

                .heading {
                  display: grid;
                  max-width: 740px;
                  margin-inline: auto;

                  .main {
                    font-size: var(--fontSize_base);
                    line-height: 0;
                  }

                  .sub {
                    font-size: var(--fontSize_decoSm);
                    letter-spacing: .22em;
                    font-weight: 400;
                    line-height: 1.4;
                    background: var(--gradation_50);
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                  }
                }

                .company-info {
                  display: grid;
                  row-gap: .8em;
                  max-width: 740px;
                  margin-inline: auto;
                  -webkit-margin-before: 4em;
                  margin-block-start: 4em;

                  @media (min-width: 992px) {
                    gap: 0;
                  }

                  .company-info__item {

                    @media (min-width: 992px) {
                      display: grid;
                      grid-template-columns: 8em auto;
                    }

                    .info {

                      @media (min-width: 992px) {
                      }
                      
                      &.info--term {
                        padding: .2em .8em;
                        background-color: var(--secondaryGray_20);
                        
                        @media (min-width: 992px) {
                          display: flex;
                          align-items: center;
                          padding: 1em;
                          background-color: transparent;
                          border-bottom: 1px solid var(--secondary_100);
                        }
                      }
                      
                      &.info--description {
                        padding: .4em .8em;
                  
                        @media (min-width: 992px) {
                          padding: 1em;
                          border-bottom: 1px solid var(--secondary_20);
                        }
                      }
                    }

                    &:first-child {

                      .info {

                        @media (min-width: 992px) {
                        }
                        
                        &.info--term {
                          
                          @media (min-width: 992px) {
                            border-top: 1px solid var(--secondary_100);
                          }
                        }
                        
                        &.info--description {
                    
                          @media (min-width: 992px) {
                            border-top: 1px solid var(--secondary_20);
                          }
                        }
                      }
                    }

                    /* ビギナー */
                    &.item--beginner {
                      -webkit-margin-before: 2em;
                      margin-block-start: 2em;
                      border-radius: 4px;
                      overflow: clip;
                      
                      @media (min-width: 992px) {
                        grid-template-columns: repeat(2, auto);
                        -webkit-margin-before: 6em;
                        margin-block-start: 6em;
                        border-bottom: 1px solid var(--accent_100);
                      }
                      
                      .info {

                        @media (min-width: 992px) {
                        }
                        
                        &.info--term {
                          position: relative;
                          padding: 1em .8em 1em 2em;
                          color: var(--accent_100);
                          background-color: var(--accent_50);
                          border-bottom: none;
                          font-weight: bold;
                          
                          @media (min-width: 992px) {
                            width: -webkit-max-content;
                            width: -moz-max-content;
                            width: max-content;
                            display: flex;
                            align-items: center;
                            padding: 1em 1.4em;
                          }

                          &::before {
                            position: absolute;
                            top: 50%;
                            left: 1%;
                            content: '';
                            width: auto;
                            height: 70%;
                            background: url(../assets/img/content/beginner.svg) no-repeat center / cover;
                            aspect-ratio: 1;
                            transform: translateY(-50%);
                            
                            @media (min-width: 992px) {
                              top: 52%;
                              left: 50%;
                              height: 50%;
                              transform: translate(-50%, -50%);
                            }
                          }
                        }
                        
                        &.info--description {
                          padding: .8em 1.2em;
                          background-color: var(--accent_10);
                          border-bottom: none;
                          
                          @media (min-width: 992px) {
                            padding: 1em 1.7em;
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }


        /* section company */
        &.section--company {
          padding-block: 0 6vw;
          
          @media (min-width: 992px) {
            padding-block: 0 3vw;
          }

          .inner {

            .container {

              &.container--content {

                .heading {
                }
              }
            }
          }
        }
      }
    }
  }
}