@charset "UTF-8";

/* =============================================================================

Layout CSS

・レイアウトコンポネ用クラス「.l-×××」

上記はここに記述する

============================================================================= */

/* Heading
============================================================================= */
/* A */
.l-heading-A {
  display:grid;
  gap:1.6rem;
  margin-bottom:3.6rem;
  line-height:1;
  @media (width > 767px) {
  }
  @media (width <= 767px) {
    gap:1.0rem;
    margin-bottom:4.8rem;
  }

  .ja {
    display:flex;
    gap:1.6rem;
    font-size:2.6rem;
    letter-spacing: .05em;
    @media (width <= 767px) {
      gap:.8rem;
      font-size:1.7rem;
    }
    .m-i-treat_in_out {
      flex-shrink: 0;
      @media (width <= 767px) {
        width:1.4rem;
      }
    }
  }
  .en {
    width:fit-content;
    font-size:9.0rem;
    font-weight: 700;
    letter-spacing: .05em;
    background-image:var(--text-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color:transparent;
    @media (width <= 767px) {
      font-size:5.6rem;
    }
  }
}

/* B */
.l-heading-B {
  margin-bottom:4.0rem;
  font-size:3.6rem;
  line-height:1.6;
  position:relative;
  @media (width > 767px) {
    padding-left:calc(5.0rem - 2px);
    margin-left:calc(-5.0rem - 2px);
  }
  @media (width <= 767px) {
    padding-left:calc(1.5rem + 3px);
    font-size:2.0rem;
    margin-bottom:2.0rem;
  }

  &::before {
    content:"";
    width:4px;
    height:calc(1lh * .75);
    background-image:linear-gradient(150deg,var(--cc-blue-A) -10%,var(--cc-green-D) 150%);
    position:absolute;
    top:calc(1lh * .15);
    left:0;
    @media (width <= 767px) {
      width:3px;
      height:1em;
      top:calc((1lh - 1em) / 2 + .1rem);
    }
  }
}


/* E */
.l-heading-E {
  display:flex;
  align-items: center;
  justify-content: center;
  margin-bottom:2.8rem;
  border-radius:var(--radius-B);
  padding:.5rem 2.0rem;
  width:fit-content;
  font-size:2.8rem;
  color:#fff;
  font-weight: 700;
  line-height:1.6;
  letter-spacing: .05em;
  background-image:linear-gradient(
    to right,
    #6793EC 0%,
    #32D093 100%
  );
  @media (width > 767px) {
    min-width:18.0rem;
  }
  @media (width <= 767px) {
    margin-bottom:2.0rem;
    padding:.4rem .8rem;
    gap:1.6rem;
    font-size:1.6rem;
  }

}

.l-button-A {
  --my-color:var(--cc-white-A);
  --my-bg:var(--cc-blue-A);
  display:flex;
  justify-content: center;
  align-items: center;
  padding-inline:.5em 1em;
  border-radius:100px;
  margin-inline:auto;
  padding-bottom:.1em;
  width:fit-content;
  min-width:28.0rem;
  min-height:6.0rem;
  font-weight:700;
  font-size:1.5rem;
  line-height:1.4;
  text-align: center;
  letter-spacing: .05em;
	color:var(--my-color);
  background-color:var(--my-bg);
  position:relative;
	transition-property:background-color,color,border-color;
	transition-duration: var(--duration-hover-A);
  z-index: 1;

  @media (width <= 767px) { /* SP */
    font-size:1.3rem;
    min-width:22.0rem;
    min-height:5.0rem;

    &.-sp_variation {
      padding-top:.5em;
      padding-inline:0;
      flex-direction: column;
      row-gap:.8rem;
      border-radius:var(--radius-A);
      min-height:8.4rem;
      font-size:1.2rem;

      > span {
        display:grid;
        align-items: center;
        min-height:2lh;
      }
      &::after {
        position:static;
      }
    }
  }

  @media (hover:hover) {
    &:hover {
      --my-bg:var(--cc-green-C);
    }
  }

  &::after {
    position:absolute;
    right:2.0rem;
  }


  &.-pc_left {
    @media (width > 767px) {
      margin-left:0;
    }
  }

}

.l-circle_arrow-A {
  display:flex;
  justify-content: center;
  align-items: center;
  border-radius:50%;
  width:2.6rem;
  height:auto;
  aspect-ratio: 1/1;
  background-color:var(--cc-blue-A);

  @media (width <= 767px) {
    width:2.1rem;
  }

  &::after {
    background-color:#fff;
    width:1.0rem;

    @media (width <= 767px) {
      width:.9rem;
    }
  }
}


/* 下層ページヘッダー
----------------------------------------------------------------------------- */
/* A */
.l-lowerpage_header-A {
  --e1:3.6rem;
  --e2:7.2rem;
  --e3:3.6rem;
  --e4:7.2rem;
  --e5:0rem;
  --e6:3.6rem;
  @media (width > 767px) {
    margin-bottom:10.0rem;
  }
  @media (width <= 767px) {
    --e1:2.0rem;
    --e2:4.0rem;
    --e3:2.0rem;
    --e4:0rem;
    margin-bottom:6.0rem;
  }

  .inner {
    padding-block:15.0rem 18.0rem;
    position:relative;
    @media (width > 767px) {
      min-height:54.0rem;
    }
    @media (width <= 767px) {
      padding-block:13.0rem 8.0rem;
      min-height:37.5rem;
    }
    &::before {
      width:38.0rem;
      background-color:#F8F8F8;
      position:absolute;
      top:0;
      right:6.0rem;
      z-index: -2;
      @media (width <= 767px) {
        width:20.0rem;
        top:7.8rem;
        right:-6.4rem;
      }
    }
  }

  .heading {
    display:grid;
    gap:1.6rem;
    @media (width > 767px) {
    }
    @media (width <= 767px) {
      gap:1.0rem;
    }

    .ja {
      display:flex;
      gap:1.6rem;
      font-size:2.6rem;
      letter-spacing: .05em;
      line-height:1;
      font-weight: 700;
      @media (width <= 767px) {
        gap:.8rem;
        font-size:1.8rem;
      }
      .m-i-treat_in_out {
        flex-shrink: 0;
        @media (width <= 767px) {
          width:1.3rem;
        }
      }
    }
    .en {
      font-size:9.0rem;
      font-weight: 500;
      letter-spacing: .05em;
      line-height:1.1;
      color:transparent;
      -webkit-background-clip: text;
      background-clip: text;
      background-image:var(--text-grad);
      width:fit-content;
      @media (width <= 767px) {
        font-size:5.6rem;
        line-height:1;
      }
    }
  }

  .m-bg {
  }
}

/* Sample
============================================================================= */
.l-pc_copyright {
  margin-block:auto;
  position:absolute;
  inset-block:0;
  left:2.0rem;
  z-index: 1;
  > p {
    display:flex;
    justify-content: center;
    align-items: center;
    font-size:1.2rem;
    line-height:1;
    letter-spacing: .05em;
    height:100dvh;
    writing-mode: vertical-rl;
    position:sticky;
    top:0;

    > span {
      color:var(--cc-green-D);
    }
  }
}


/* Nav
============================================================================= */
.l-nav-A {
  margin-bottom:12.0rem;
  text-align: center;
  @media (width > 767px) {
    display:flex;
    justify-content: center;
  }
  @media (width <= 767px) {
    margin-bottom:6.4rem;
  }

  .l {
    @media (width > 767px) {
      display:flex;
      justify-content: center;
      gap:2.0rem;
    }
    @media (width <= 767px) {
      display:grid;
      grid-template-columns:repeat(2,1fr);
      gap:1.5rem;
    }
  }
  .l_i {

  }
  .l_i_link {
    display:flex;
    align-items: center;
    gap:1.6rem;
    font-size:2.0rem;
    font-weight: 700;
    letter-spacing: .05em;
    font-size:1.5rem;
    letter-spacing: .05em;
    line-height:1.6;
    background-color:var(--cc-white-C);
    border-radius:var(--radius-B);
    position:relative;
    transition-property:color,background-color;
    transition-duration: var(--duration-hover-A);
    @media (width > 767px) {
      width:23.0rem;
      height:8.0rem;
    }
    @media (width <= 767px) {
      width:100%;
      height:5.4rem;
      font-size:1.2rem;
    }
    @media (hover:hover) {
      &:hover {
        color:var(--cc-white-A);
        &::before {
          opacity:1;
          background-position:0 0;
        }
      }
    }

    &::before {
      content:"";
      border-radius:var(--radius-B);
      background-image:linear-gradient(
        110deg,
        var(--cc-blue-A) 0%,
        var(--cc-green-D) 100%
      );
      position:absolute;
      inset:0;
      opacity:0;
      transition-property:opacity,background-position;
      transition-duration: var(--duration-hover-A);
      background-size:200%;
      background-position:100% 0;
    }

    > span {
      margin-inline:auto;
      position:relative;
      z-index: 1;
    }
    &::after {
      width:1.1rem;
      position:absolute;
      right:2.0rem;
      z-index: 1;
      @media (width <= 767px) {
        right:1.0rem;
      }
    }
  }

}


/* お知らせリスト
============================================================================= */
.l-news_list {
  .l {
    display:grid;
    gap:1.0rem;
    line-height:1.6;

    @media (width <= 767px) {
    }
  }
  .l_i {
    display:grid;
    @media (width > 767px) {
      grid-template-columns:auto auto 1fr auto;
      align-items: center;
      grid-template-areas:
        "date category title title"
      ;
      min-height:7.0rem;
    }
    @media (width <= 767px) {
      grid-template-columns:auto 1fr auto;
      grid-template-rows:auto 1fr;
      grid-template-areas:
        "date category category"
        "title title title"
      ;
      row-gap:1.6rem;
    }
    &:not(:has(.l_i_l)) {
      background-color:#fff;
      @media (width > 767px) {
        padding:1.2rem 3.0rem;
      }
      @media (width <= 767px) {
        padding-block:1.6rem;
        padding-inline:2.0rem 1.0rem;
      }
    }
  }
  .l_i_l {
    grid-row:1/-1;
    grid-column:1/-1;
    display:grid;
    grid-template-rows:subgrid;
    grid-template-columns:subgrid;
    background-color:#fff;
    @media (width > 767px) {
      align-items: center;
      grid-template-areas:
        "date category title icon"
      ;
      padding:1.2rem 3.0rem;
    }
    @media (width <= 767px) {
      grid-template-areas:
        "date category category"
        "title title icon"
      ;
      padding-block:1.6rem;
      padding-inline:2.0rem 1.0rem;
    }

    &::after {
      grid-area:icon;
      background-color:var(--cc-blue-A);
      margin-block:auto;
      margin-left:.8rem;
      @media (width <= 767px) {
        content:none;
        margin-left:.4rem;
        width:1.0rem;
      }
    }
  }
  .l_i_l_date {
    grid-area:date;
    font-size:1.4rem;
    position:relative;
    @media (width > 767px) {
      width:9.2rem;
    }
    @media (width <= 767px) {
      width:8.8rem;
      font-size:1.2rem;
      top:-.1em;
    }
  }
  .l_i_l_category {
    grid-area:category;
    display:flex;
    justify-content: center;
    align-items: center;
    border-radius:100px;
    padding-inline:1.0rem;
    height:2.6rem;
    font-size:1.2rem;
    text-align: center;
    line-height:1;
    letter-spacing: 0;
    min-width:8.8rem;
    @media (width <= 767px) {
      padding-inline:.6rem;
      width:fit-content;
      min-width:8.0rem;
      height:1.8rem;
      font-size:1.0rem;
    }
    &.-recruit {
      background-color:var(--cc-green-D);
      color:#fff;
    }
    &.-news {
      background-color:var(--cc-blue-A);
      color:#fff;
    }

    @media (width > 767px) {
      margin-right:2.0rem;
    }
  }
  .l_i_l_title {
    grid-area:title;
    @media (width <= 767px) {
      font-size:1.4rem;
      letter-spacing: 0;
    }
  }

}



/* Sample
============================================================================= */
.l-selectorName {
  @media (width > 767px) {
  }
  @media (width <= 767px) {
  }
}