@charset "UTF-8";

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

Layout CSS

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

上記はここに記述する

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

/* Container
============================================================================= */
.l-form_container {
  padding-block:8.0rem 16.0rem;
  background-color:var(--cc-white-B);
  @media (width <= 640px) {
    padding-block:4.0rem 10.0rem;
  }
}


/* Heading
============================================================================= */
/* A */
[class*="l-heading"] {
  &.-no_mb {
    margin-bottom:0;
  }
  &.-left {
    align-items: flex-start;
    text-align: start;
  }
  @media (width > 640px) {
    &.-pc_no_mb {
      margin-bottom:0;
    }
    &.-pc_left {
      align-items: flex-start;
      text-align: start;
    }
  }
  @media (width <= 640px) {
    &.-sp_no_mb {
      margin-bottom:0;
    }
    &.-sp_left {
      align-items: flex-start;
      text-align: start;
    }
  }
}
.l-heading-A {
  margin-bottom:9.2rem;
  padding:1.6rem 3.5rem;
  color:#fff;
  background-color:var(--cc-black-A);
  font-size:1.8rem;
  letter-spacing: .2em;
  @media (width > 640px) {
  }
  @media (width <= 640px) {
    margin-bottom:4.4rem;
    padding:1.2rem 2.2rem;
    font-size:1.6rem;
  }
}





/* 下線見出し
============================================================================= */
.l-line_heading-A {
  --lh:.7rem;
  display:grid;
  font-weight:300;
  .is-ftest & {
    font-weight:400;
  }
  @media (width > 640px) {
  }
  @media (width <= 640px) {
    --lh:.3rem;
  }
  span {
    width:fit-content;
    position:relative;
    &.-kt {
      &::before {
        width:calc(100% - .35em);
      }
    }
    &::before {
      content:"";
      display:block;
      width:100%;
      height:var(--lh);
      background-color:var(--cc-blue-A);
      position:absolute;
      top:calc(.5lh + .6em);
    }
  }
}



/* Section Header
============================================================================= */
.l-section_header-A {
}


/* Button 全体
----------------------------------------------------------------------------- */
.l-wrap_button-A {
  display:block;
  @media (hover) {
    &:hover {
      .l-button-A {
        --my-color:var(--base-color-reverse);
        --my-bg:var(--base-bg-reverse);
      }
    }
  }
}

/* Button
----------------------------------------------------------------------------- */

[class*="l-button"] {
  &.-right {
    margin-right:0;
  }
  &.-left {
    margin-left:0;
  }
  @media (width > 640px) {
    &.-pc_right {
      margin-right:0;
    }
    &.-pc_left {
      margin-left:0;
    }
  }
  @media (width <= 640px) {
    &.-sp_right {
      margin-right:0;
    }
    &.-sp_left {
      margin-left:0;
    }
  }
}

.l-button-A {
	--my-color:var(--base-color);
	--my-bg:transparent;
  display:flex;
  align-items: center;
  justify-content: space-between;
  margin-inline:auto;
  border-bottom:1px solid var(--my-color);
  padding-block:1.2rem;
  font-size:1.4rem;
  line-height:1.2;
  font-weight:700;
  letter-spacing: .12em;
	color:var(--my-color);
  position:relative;
  z-index: 1;

  @media (width > 640px) { /* PC */
  }
  @media (width <= 640px) { /* SP */
    font-size:1.3rem;
  }

  @media (hover) {
    &:hover {
      > span {
        &.f {
          animation: button-A-f .4s ease-in forwards;
        }
        &.b {
          animation: button-A-b .4s ease-out forwards;
        }
      }
      > i {
        &::before {
          animation: button-A-arrow .75s ease-in-out forwards;
        }
      }
    }
  }

  > span {
    transition-property: transform,clip-path;
    transition-duration: var(--duration-hover-A);
    &.f {
      z-index: 2;
    }
    &.b {
      position:absolute;
      transform:translateY(200%);
      clip-path:polygon(0 -200%,100% -200%,100% 0,0 0);
    }
  }

  > i {
    display:flex;
    justify-content: center;
    align-items: center;
    border-radius:50%;
    width:3.0rem;
    height:3.0rem;
    background-color:var(--cc-black-A);
    overflow:hidden;
    @media (width <= 640px) {
    }
    &::before {
      content:"";
      margin-left:.2rem;
      width:.6rem;
      height:.7rem;
      background-color:#fff;
      clip-path:polygon(0% 0%, 100% 50%, 0% 100%);
      @media (width <= 640px) {
        width:.6rem;
        height:.5rem;
      }
    }
  }
}

@keyframes button-A-arrow {
  0% {
    transform:translateX(0);
  }
  50% {
    transform:translateX(2.0rem);
  }
  51% {
    transform:translateX(-2.0rem);
  }
  60% {
    transform:translateX(-2.0rem);
  }
  100% {
    transform:translateX(0);
  }
}
@keyframes button-A-f {
  0% {
    transform:translateY(0);
    clip-path:polygon(0 0, calc(100% + 1px) 0, calc(100% + 1px) calc(100% + 1px), 0 calc(100% + 1px));
  }
  100% {
    transform:translateY(-200%);
    clip-path:polygon(0 200%, 100% 200%, 100% 300%, 0 300%);
  }
}
@keyframes button-A-b {
  0% {
    transform:translateY(200%);
    clip-path:polygon(0 -200%,100% -200%,100% 0,0 0);
  }
  100% {
    transform:translateY(0);
    clip-path:polygon(0 0, calc(100% + 1px) 0, calc(100% + 1px) calc(100% + 1px), 0 calc(100% + 1px));
  }
}


/* タグテキスト
============================================================================= */
.l-tag_text-A {
  width:fit-content;
  padding:.4rem 1.2rem;
  text-align: center;
  font-weight:500;
  font-size:2.0rem;
  line-height:1.5;
  letter-spacing: .16em;
  background-color:var(--cc-blue-A);
  width:fit-content;
  color:#fff;
  @media (width > 640px) {
  }
  @media (width <= 640px) {
    padding:.2rem 1.0rem calc(.2rem + .05em);
    font-size:1.5rem;
  }
}

/* 目次
============================================================================= */
.l-inpage_navi {
  font-weight:700;
  @media (width > 640px) {
  }
  @media (width <= 640px) {
  }

  .list {
    display:grid;
    gap:1.5rem;
    font-weight:700;
    font-size:1.3rem;
    line-height:1.6;
    @media (width <= 640px) {
      gap:1.0rem;
      font-size:1.2rem;
    }
  }
  .list-item {
    >a {
      display:flex;
      align-items: flex-start;
      padding-top:.2rem;
      gap:1.0rem;
      @media (width <= 640px) {
        padding-top:0;
      }

      > i {
        display:flex;
        justify-content: center;
        align-items: center;
        margin-top:-.2rem;
        border-radius:50%;
        width:2.3rem;
        height:2.3rem;
        background-color:var(--cc-blue-A);
        @media (width <= 640px) {
          margin-top:0;
          width:2.0rem;
          height:2.0rem;
        }
        &::before {
          content:"";
          width:.7rem;
          height:.5rem;
          background-color:var(--cc-white-A);
          clip-path:polygon(0% 0%, 100% 0%, 50% 100%);
          @media (width <= 640px) {
            width:.6rem;
            height:.5rem;
          }
        }
      }
    }
  }
}

/* 事業交互セクション
============================================================================= */
.l-business_sections {
  .section {
    padding-block:12.0rem;
    @media (width > 640px) {
      display:flex;
      align-items: flex-end;
      gap:6.8rem;
    }
    @media (width <= 640px) {
      padding-block:3.6rem 6.4rem;
    }
    &:nth-child(odd) {
      background-color:var(--cc-gray_back-A);
      .img {
        @media (width > 640px) {
          padding-left:var(--body-pd);
        }
      }
    }
    &:nth-child(even) {
      @media (width > 640px) {
        flex-direction: row-reverse;
      }
      .img {
        @media (width > 640px) {
          padding-right:var(--body-pd);
        }
      }
    }
    .img {
      @media (width > 640px) {
        flex-shrink: 0;
        width:calc(50% + 25.9rem);
        height:63.9rem;
      }
      @media (width <= 640px) {
        margin-bottom:3.5rem;
        padding-inline:var(--body-pd);

        img {
          width:100%;
        }
      }
    }
    .text {
      @media (width > 640px) {
        width:40.8rem;
        &:not(:has(.bnr)) {
          padding-bottom:2.4rem;
        }
      }
      @media (width <= 640px) {
      }
      .text-heading {
        --lh:3px;
        display:grid;
        gap:.8rem;
        border-bottom:0;
        margin-bottom:2.4rem;
        width:fit-content;
        font-size:2.5rem;
        letter-spacing: .16em;
        font-weight:500;
        line-height:1.4;
        white-space: nowrap;
        @media (width > 640px) {
          &.-pc_one {
            display:flex;
            gap:0;
          }
        }
        @media (width <= 640px) {
          display:flex;
          flex-direction: column;
          gap:.2em;
          font-size:2.15rem;
          letter-spacing: .14em;
        }
        > span {
          display:block;
          padding-bottom:3px;
          width:fit-content;
          position:relative;

          &::after {
            content:"";
            border-bottom:var(--lh) solid var(--cc-blue-A);
            width:100%;
            position:absolute;
            left:0;
            bottom:0;
          }
        }
      }
      .text-links {
        display:grid;
        margin-top:5.6rem;
        @media (width > 640px) {
          grid-template-columns: repeat(2,1fr);
          gap:.8rem 2.4rem;
          font-size:1.2rem;
        }
        @media (width <= 640px) {
          margin-top:2.8rem;
          gap:.8rem;
        }
        .l-button-A {
          @media (width > 640px) {
            font-size:1.2rem;
            line-height:1.5;
            letter-spacing: .2em;
          }
        }
      }
      > .l-button-A {
        margin-top:4.0rem;
        gap:0;
        @media (width <= 640px) {
          margin-top:2.0rem;
        }
      }
      .bnr {
        display:flex;
        justify-content: center;
        align-items: center;
        margin-top:4.0rem;
        width:100%;
        @media (width <= 640px) {
          margin-top:4.0rem;
          height:7.8rem;
        }
        img {
          width:100%;
        }
      }
    }
  }
}




/* select
============================================================================= */
.l-select-A {
  --my-color:var(--base-color);
  --my-bg:var(--base-bg);
  display:block;
	overflow: hidden;
  position:relative;
  width:fit-content;
  color:var(--my-color);

	@media (width <= 640px) {
	}
	@media (width <= 640px) {
	}

	> i {
    display:flex;
    justify-content: center;
    align-items: center;
    width:auto;
    height:100%;
    aspect-ratio: 1/1;
    background-color:var(--my-color);
    pointer-events: none;
    position:absolute;
    right:0;
    top:0;

    &::after {
      background-color:var(--cc-black-A);
    }
	}

	> select {
		cursor:pointer;
    border:1px solid var(--my-color);
    padding:.9rem 1.0rem;
    padding-right:calc(1lh + 1.8rem + 2px + 1.0rem);
    font-size:1.3rem;
    line-height:1;
    letter-spacing: .16em;

		@media (width <= 640px) {
		}

    option {
      color:var(--cc-black-A)
    }
	}
}





/* newsコンテナ
============================================================================= */
.l-news_container {
  position:relative;
  @media (width > 640px) {
    display:grid;
    grid-template-columns:auto 79.2rem;
    justify-content: space-between;
    align-items: flex-start;
  }
  @media (width <= 640px) {
    padding-inline:3.7rem;
  }

  .news_title {
    display:grid;
    @media (width > 640px) {
      gap:6.0rem;
    }
    @media (width <= 640px) {
      gap:2.0rem;
      margin-bottom:5.0rem;
      border-bottom:1px solid #f5f5f5;
      padding-bottom:3.2rem;
    }

    .l-select-A {
      @media (width > 640px) {
        width:100%;
      }
      > select {
        @media (width > 640px) {
          width:100%;
        }
      }
    }
    .link {
      display:flex;
      justify-content: center;
      align-items: center;
      border:1px solid;
      height:3.0rem;
      font-size:1.3rem;
      letter-spacing: .16em;
      line-height:1;
      @media (width > 640px) {
        width:100%;
      }
      @media (width <= 640px) {
        width:13.6rem;
      }
    }
  }

  .more-button {
    display:flex;
    justify-content: center;
    align-items: center;
    border-radius:50%;
    width:10.6rem;
    height:10.6rem;
    @media (width > 640px) {
      position:absolute;
      right:-3.0rem;
      bottom:-3.0rem;
    }
    @media (width <= 640px) {
      margin-top:-1.0rem;
      margin-inline:auto -1.5rem;
      width:8.0rem;
      height:8.0rem;
      position:relative;
    }

    &.hide {
      display:none;
    }
  }
  .l-news_list.is-loading ~ .more-button {
    pointer-events:none;
  }
  .loader {
    display:none;
    margin-inline:auto;
    width: 50px;
    padding: 8px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--cc-white-A);
    --_m:conic-gradient(#0000 10%,#000),linear-gradient(#000 0 0) content-box;
    mask: var(--_m);
    mask-composite: subtract;
    animation: l3 1s infinite linear;
    position:absolute;
    inset-inline:0;
    top:calc(100% + 4.0rem);
    pointer-events: none;
    @media (width <= 640px) {
      top:calc(100% - 2.0rem);
    }
  }
  .l-news_list.is-loading ~ .loader {
    display:block;
  }
}
@keyframes l3 {to{transform: rotate(1turn)}}


/* newsリスト
============================================================================= */
.l-news_list {
  position:relative;
  @media (width > 640px) {
    border-top:1px solid #f5f5f5;
  }
  @media (width <= 640px) {
    .l-news_container & {
      margin-top:-3.5rem;
    }
  }


  .item {
    border-bottom:1px solid #f5f5f5;

    .link {
      display:grid;
      @media (width > 640px) {
        grid-template-columns:24.0rem 1fr;
        gap:3.0rem;
        padding:4.0rem 3.0rem;
      }
      @media (width <= 640px) {
        padding-block:3.5rem;
      }
    }
    .img {
      height:auto;
      aspect-ratio: 5/3;
      @media (width <= 640px) {
        margin-bottom:2.0rem;
      }

      &.noimage {
        background-color:var(--cc-gray_back-A);
        background-image:url(/assets/img/common/logo.svg);
        background-size:8.0rem;
        background-repeat:no-repeat;
        background-position:center;
      }
    }
    .date {
      margin-bottom:1.2rem;
      padding:.8rem 2.4rem;
      border-radius:100px;
      width:fit-content;
      font-size:1.3rem;
      line-height:1;
      letter-spacing: .18em;
    }
    .title {
      font-size:1.4rem;
      line-height:calc(30/14);
      letter-spacing: .18em;
      @media (width > 640px) {
        max-width:36.2rem;
      }
    }
  }
}


.l-svg-title {
  svg {
    display:block;
    fill:currentColor;
  }
}


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