@charset "UTF-8";

@import url("_common.css");
@import url("_utility.css");

body.p-top{
  /* top common ======== */

  /* kv ======== */
  & .kv.--top{
    & .slider.--top-kv{
      display: block;
      width: 100%;
      position: relative;
      @media not all and (max-width: 750px) {
        aspect-ratio: 1720/850;
      }
      @media (max-width: 750px) {
        aspect-ratio: 750/920;
        padding-block-start: 50px;
      }
      & .kv-slider-link{
        display: block;
        & h1{
          margin-block: 0;
        }
        & img{
          width: 100%;
          height: 100%;
          object-fit: cover;
          object-position: center bottom;
          scale: 1;
          transition: scale 0.24s ease-in-out;
        }
        @media (any-hover: hover) {
          &:hover{
            & img{
              scale: 1.01;
            }
          }
        }
      }
      & .swiper-pagination{
        bottom: 0px;
        translate: 0 150%;
        & .swiper-pagination-bullet{
          width: 10px;
          height: 10px;
          background-color: var(--color-gray-secondary);
          opacity: 1;
        }
        & .swiper-pagination-bullet-active{
          background-color: var(--color-red-quaternary);
        }
      }
    } /* slider */
    & a.kv-bunner{
      display: grid;
      place-items: center;
      /* aspect-ratio: 380.5422/206.2293; */
      filter: brightness(1);
      transition: 
        filter 0.24s ease-in-out,
        box-shadow 0.24s ease-in-out;
      @media not all and (max-width: 750px) {
        width: clamp(150px, calc((380 / 1720) * 100vw), 380px);
        box-shadow: 7px 7px 6px rgba(0,0,0, .4);
        position: absolute;
        bottom: 30px;
        right: calc((100 / 1720) * 100vw);
        z-index: 10;
      }
      @media (max-width: 750px) {
        width: 80vw;
        margin-block: 56px;
        margin-inline: auto;
        box-shadow: 7px 7px 6px rgba(0,0,0, .2);
      }
      & > img{
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center;
      }
      @media (any-hover: hover) {
        &:hover{
          box-shadow: 7px 7px 6px rgba(0,0,0, .6);
          filter: brightness(1.05);
        }
      }
    }
  } /* kv */

  & .l-contents.--01{
    background-color: var(--color-gray-primary);
    & .c-tab{
      & .c-tab-list{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        & .c-tab-item{
          display: grid;
          align-items: center;
          justify-content: center;
          grid-template-columns: auto auto;
          gap: 1em;
          padding-block: 1em;
          padding-inline: 1em;
          background-color: var(--color-white);
          font-size: clamp(0.625rem, 0.448rem + 0.75vw, 1.25rem); /* 10px 20px */
          font-weight: 500;
          line-height: calc(26/17);
          transition: background-color 0.24s ease-in-out;
          @media (max-width: 750px) {
            grid-template-columns: auto;
            padding: 0.5em;
          }
          & .icon{
            display: block;
            width: 1.5em;
            height: 1.5em;
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center;
            @media (max-width: 750px) {
              width: 20px;
              height: 20px;
              margin-inline: auto;
            }
          }
          & .title{
            color: var(--color-black-primary);
            @media (max-width: 750px) {
              font-size: 12px;
              text-align: center;
            }
          }
          &.active{
            background-color: var(--color-red-primary);
            & .icon{
              & .desvg polyline{
                stroke: var(--color-white);
              }
            }
            & .title{
              color: var(--color-white);
            }
          }
          &:nth-of-type(1){
            & .icon{
              background-image: url(../img/common/icon-tab01-black.webp);
            }
            &.active .icon{
              background-image: url(../img/common/icon-tab01-white.webp);
            }
          }
          &:nth-of-type(2){
            & .icon{
              background-image: url(../img/common/icon-tab02-black.webp);
            }
            &.active .icon{
              background-image: url(../img/common/icon-tab02-white.webp);
            }
          }
          &:nth-of-type(3){
            & .icon{
              background-image: url(../img/common/icon-tab03-black.webp);
            }
            &.active .icon{
              background-image: url(../img/common/icon-tab03-white.webp);
            }
          }
          @media (any-hover: hover) {
            &:hover:not(.active){
              background-color: var(--color-red-quaternary);
            }
          }
        }
      }
      & .c-tab-panel{
        position: relative;
        & .c-cardlist{
          & .c-card{
            border: none;
            @media not all and (max-width: 750px) {
              aspect-ratio: 323.952/410.6793;
            }
            @media (max-width: 750px) {
              aspect-ratio: 717.0137/404.3288;
            }
            & figure{
              filter: brightness(1);
              transition: filter 0.4s ease-in-out;
              @media not all and (max-width: 750px) {
                aspect-ratio: 323.952/410.6793;
              }
              @media (max-width: 750px) {
                aspect-ratio: 717.0137/404.3288;
              }
              & > img{
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: center;
              }
            }
            & .title{
              display: grid;
              grid-template-columns: auto auto;
              gap: .5em;
              background-color: var(--color-green-primary);
              position: absolute;
              bottom: 0;
              left: 0;
              @media not all and (max-width: 750px) {
                place-items: center;
                width: fit-content;
                padding-inline: 1em;
              }
              @media (max-width: 750px) {
                justify-content: space-between;
                width: 100%;
                padding-inline: .5em;
              }
            }
            & .icon{
              width: 0.6em;
              transition: right 0.4s ease-in-out;
              & .desvg polyline{
                stroke: var(--color-black-primary);
              }
              @media not all and (max-width: 750px) {
                position: relative;
                right: 0;
              }
              @media (max-width: 750px) {
                position: absolute;
                right: .5em;
              }
            }
            position: relative;
            @media (any-hover: hover) {
              &:hover{
                & figure{
                  filter: brightness(1.1);
                }
                & .icon{
                  right: -.25em;
                }
              }
            }
          }
        }
        & .swiper-pagination{
          bottom: 0;
          translate: 0 150%;
          /* @media not all and (max-width: 750px) {
            display: none;
          } */
          & .swiper-pagination-bullet{
            /* width: 15px;
            height: 15px; */
            width: 10px;
            height: 10px;
            background-color: var(--color-gray-secondary);
          }
          & .swiper-pagination-bullet-active{
            background-color: var(--color-red-quaternary);
          }
        }
        & .swiper-button-prev,
        & .swiper-button-next{
          color: var(--color-black-primary);
          @media (max-width: 750px) {
            width: 20px;
            height: 20px;
          }
        }
        & .swiper-button-prev{
          translate: -150% 0;
          @media (max-width: 1400px) {
            translate: 0 0;
          }
        }
        & .swiper-button-next{
          translate: 150% 0;
          @media (max-width: 1400px) {
            translate: 0 0;
          }
        }
      }
    }
  } /* top 01 */

  & .l-contents.--02{
    padding-block: clamp(2.188rem, 1.568rem + 2.64vw, 4.375rem); /* 35px 70px */
    & .l-contents__inner{
      gap: 0;
      background-color: var(--color-green-primary);
      & > div:nth-of-type(1){
        & figure{
          height: 100%;
          & > img{
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
          }
        }
      }
      & > div:nth-of-type(2){
        @media not all and (max-width: 750px) {
          padding-block: 2em;
        }
        @media (max-width: 750px) {
          padding-block-start: 2em;
        }
        & h2{
          display: block;
          padding-inline: clamp(1.75rem, 1.255rem + 2.11vw, 3.5rem); /* 28px 56px */
          border-bottom: 1px solid color-mix(in srgb, var(--color-black-primary) 75%, transparent);
          font-size: clamp(1.25rem, 0.896rem + 1.51vw, 2.5rem); /* 20px 40px */
          font-size: clamp(1.5rem, 1.221rem + 1.19vw, 2.5rem); /* 24px 40px */
          font-weight: 700;
        }
        & > div{
          display: grid;
          grid-template-columns: 1fr 45%;
          gap: 2em;
          padding-inline: clamp(1.75rem, 1.255rem + 2.11vw, 3.5rem) ; /* 28px 56px */
          @media not all and (max-width: 750px) {
            padding-inline-end: 32px;
          }
          @media (max-width: 750px) {
            grid-template-columns: 1fr;
          }
          & h3{
            font-size: clamp(0.938rem, 0.778rem + 0.68vw, 1.5rem); /* 15px 24px */
            font-size: clamp(1.125rem, 1.02rem + 0.45vw, 1.5rem); /* 18px 24px */
            font-weight: 500;
            line-height: calc(46/30);
            & + p{
              margin-block-start: 1.5em;
            }
          }
          & figure{
            @media (max-width: 750px) {
              display: none;
            }
          }
        }
      }
    }
  } /* top 02 */

  & .l-contents.--03{
    background-color: var(--color-gray-primary);
    @media (max-width: 750px) {
      padding-block-start: 40px;
    }
    & .titlearea{
      display: block;
      width: 100%;
      border-bottom: 1px solid color-mix(in srgb, var(--color-black-primary) 50%, transparent);
      & > .l-width-primary{
        display: grid;
        align-items: center;
        grid-template-columns: auto 1fr;
        gap: 2em;
        position: relative;
        @media not all and (max-width: 750px) {
          bottom: -.8em;
        }
        @media (max-width: 750px) {
          bottom: -.5em;
        }
        & h2{
          font-family: "Montserrat", sans-serif;
          font-size: clamp(2.25rem, 1.383rem + 3.7vw, 5.313rem); /* 36px 85px */
          font-size: clamp(2.75rem, 2.036rem + 3.05vw, 5.313rem); /* 44px 85px */
          font-weight: 600;
          line-height: 1;
          scale: 0.95 1;
        }
        & a{
          display: grid;
          grid-template-columns: auto 1fr;
          gap: 1em;
          font-weight: 400;
          transition: font-weight 0.4s ease-in-out;
          translate: 0 -25%;
          & .icon{
            display: block;
            width: 0.6em;
            height: 0.6em;
            position: relative;
            right: 0;
            transition: right 0.4s ease-in-out;
            & > img{
              width: 100%;
              height: 100%;
              object-fit: contain;
              object-position: center;
            }
            & .desvg polyline{
              stroke: var(--color-black-primary);
            }
          }
          @media (any-hover: hover) {
            &:hover{
              font-weight: 500;
              & .icon{
                right: -.25em;
              }
            }
          }
        }
      }
    }
    & .l-width-secondary{
      @media (max-width: 750px) {
        padding-inline: 24px;
      }
    }
    & .c-tab{
      margin-block-start: clamp(2.25rem, 1.613rem + 2.72vw, 4.5rem); /* 36px 72px */
      & .c-tab-list{
        display: grid;
        justify-content: center;
        gap: clamp(0.625rem, 0.448rem + 0.75vw, 1.25rem); /* 10px 20px */
        @media not all and (max-width: 750px) {
          grid-template-columns: repeat(auto-fit, minmax(160px, auto));
        }
        @media (max-width: 750px) {
          grid-template-columns: repeat(2, 1fr);
        }
        & .c-tab-item{
          display: grid;
          place-items: center;
          padding-block: .25em;
          padding-inline: 1em;
          background-color: color-mix(in srgb, var(--color-white) 0%, transparent);;
          border: 1px solid var(--color-black-primary);
          border-radius: 50vw;
          color: var(--color-black-primary);
          white-space: nowrap;
          transition: 
            border 0.24s ease-in-out,
            background 0.24s ease-in-out,
            color 0.24s ease-in-out;
          @media not all and (max-width: 750px) {
            width: fit-content;
            min-width: 160px;
          }
          @media (max-width: 750px) {
            width: 100%;
          }
          @media (any-hover: hover) {
            &.--news:hover{
              border: 1px solid var(--color-newscat-news);
              background-color: var(--color-newscat-news);
              color: var(--color-white);
            }
            &.--letter:hover{
              border: 1px solid var(--color-newscat-letter);
              background-color: var(--color-newscat-letter);
              color: var(--color-white);
            }
            &.--blog:hover{
              border: 1px solid var(--color-newscat-blog);
              background-color: var(--color-newscat-blog);
              color: var(--color-white);
            }
            &.--briefing:hover{
              border: 1px solid var(--color-newscat-briefing);
              background-color: var(--color-newscat-briefing);
              color: var(--color-white);
            }
            &.--all:hover{
              border: 1px solid var(--color-newscat-all);
              background-color: var(--color-newscat-all);
              color: var(--color-white);
            }
          }
          &.active.--news{
            border: none;
            background-color: var(--color-newscat-news);
            color: var(--color-white);
          }
          &.active.--letter{
            border: none;
            background-color: var(--color-newscat-letter);
            color: var(--color-white);
          }
          &.active.--blog{
            border: none;
            background-color: var(--color-newscat-blog);
            color: var(--color-white);
          }
          &.active.--briefing{
            border: none;
            background-color: var(--color-newscat-briefing);
            color: var(--color-white);
          }
          &.active.--all{
            border: none;
            background-color: var(--color-newscat-all);
            color: var(--color-white);
          }
        }
      }
      & .c-tab-content{
        max-width: calc(800px + 24px + 24px);
        margin-block-start: clamp(2.25rem, 1.613rem + 2.72vw, 4.5rem); /* 36px 72px */
        margin-inline: auto;
        & .c-tab-panel{
          & ul li{
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 1em;
            width: 100%;
            border-bottom: 1px solid var(--color-gray-senary);
            & .category{
              display: inline grid;
              place-items: center;
              padding-inline: .5em;
              border: 1px solid var(--color-gray-senary);
              background-color: var(--color-white);
              color: var(--color-black-primary);
              @media not all and (max-width: 750px) {
                width: 140px;
              }
              @media (max-width: 750px) {
                width: 8em;
              }
              &.--news{
                border: none;
                background-color: var(--color-newscat-news);
                color: var(--color-white);
              }
              &.--letter{
                border: none;
                background-color: var(--color-newscat-letter);
                color: var(--color-white);
              }
              &.--blog{
                border: none;
                background-color: var(--color-newscat-blog);
                color: var(--color-white);
              }
              &.--briefing{
                border: none;
                background-color: var(--color-newscat-briefing);
                color: var(--color-white);
              }
            }
            & .date{
              margin-inline-start: 1em;
              font-size: 16px;
              color: var(--color-gray-octonary);
            }
            & .title{
              display: inline-block;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap; 
              @media not all and (max-width: 750px) {
                max-width: calc(100% - 140px - 1em - 84px -  1em - 0.6em - 1em);
                margin-inline-start: 1em;
                translate: 0 25%;
              }
              @media (max-width: 750px) {
                max-width: calc(100% - 0.6em - 1em);
                margin-block-start: .5em;
              }
            }
            & .icon{
              display: inline-block;
              width: 0.6em;
              height: 0.6em;
              margin-inline-start: 1em;
              position: absolute;
              top: 50%;
              right: 0;
              translate: 0 -150%;
              transition: right 0.4s ease-in-out;
              & > img{
                width: 100%;
                height: 100%;
                object-fit: contain;
                object-position: center;
              }
              & .desvg polyline{
                stroke: var(--color-black-primary);
              }
            }
            & a{
              width: 100%;
              padding-block: 1em;
              padding-inline-end: 1em;
              background-color: color-mix(in srgb, var(--color-gray-tertiary) 0%, transparent);
              transition: background 0.4s ease-in-out;
              position: relative;
              @media (any-hover: hover) {
                &:hover{
                  background-color: color-mix(in srgb, var(--color-gray-tertiary) 100%, transparent);
                  & .icon{
                    right: -.25em;
                  }
                }
              }
            }
          }
        }
      }
    }
    & .sns__list{
      margin-block-start: clamp(2.25rem, 1.613rem + 2.72vw, 4.5rem); /* 36px 72px */
      & hgroup{
        text-align: center;
        & h2{
          font-size: clamp(1rem, 0.894rem + 0.45vw, 1.375rem); /* 16px 22px */
          font-weight: 600;
          & + p{
            margin-block-start: 0;
            font-size: 10px;
          }
        }
        & + ul{
          display: grid;
          justify-content: center;
          grid-template-columns: repeat(3, auto);
          gap: clamp(2.5rem, 1.792rem + 3.02vw, 5rem); /* 40px 80px */
          margin-block-start: 1em;
          & > li{
            width: clamp(2.75rem, 2.149rem + 2.57vw, 4.875rem); /* 44px 78px */
            aspect-ratio: 1;
            & a{
              & .desvg .cls-1,
              & .desvg .cls-2{
                stroke: none;
              }
              & .desvg circle,
              & .desvg #Initiator{
                transition: fill 0.24s ease-in-out;
              }
              @media (any-hover: hover) {
                &:hover{
                  & .desvg circle,
                  & .desvg #Initiator{
                    fill: var(--color-red-quaternary);
                  }
                }
              }
            }
          }
        }
      }
    }
  } /* top 03 */

  & .l-contents.--04{
    & .l-contents__inner{
      & > div:nth-of-type(1){
        position: relative;
        & figure{
          width: 100%;
          @media not all and (max-width: 750px) {
            aspect-ratio: 1299.999/525.2823;
          }
          @media (max-width: 750px) {
            aspect-ratio: 720.092/525.2823;
          }
          & > img{
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
          }
        }
        & article{
          padding: 1.5em;
          background-color: var(--color-black-secondary);
          color: var(--color-white);
          @media not all and (max-width: 750px) {
            position: absolute;
            width: 40%;
            top: 50%;
            left: 0;
            translate: 0 -50%;
          }
          @media (max-width: 1060px) {
            width: 85%;
          }
          @media (max-width: 750px) {
            width: 90%;
            margin-block-start: -4em;
            position: relative;
            left: 50%;
            translate: -50% 0;
          }
          & hgroup{
            display: flex;
            flex-direction: column-reverse;
            gap: 1em;
            & h2{
              font-size: clamp(0.938rem, 0.743rem + 0.83vw, 1.625rem); /* 15px 26px */
              font-size: clamp(1.125rem, 0.986rem + 0.59vw, 1.625rem); /* 18px 26px */
              font-weight: 700;
              & + p{
                display: grid;
                place-items: center;
                width: fit-content;
                margin-block-start: 1em;
                padding-inline: 2em;
                background-color: var(--color-green-primary);
                color: var(--color-black-primary);
                font-size: clamp(0.625rem, 0.554rem + 0.3vw, 0.875rem); /* 10px 14px */
                font-weight: 700;
              }
            }
            & + p{
              margin-block-start: 1em;
              line-height: 2;
            }
          }
          & .c-button{
            justify-content: center;
            grid-template-columns: auto auto;
            width: fit-content;
            min-width: auto;
            margin-block-start: 1em;
            margin-inline: auto;
            background-color: var(--color-black-secondary);
            & .icon{
              width: 0.6em;
              height: 0.6em;
              translate: 0 -100%;
            }
            @media (any-hover: hover) {
              &:hover{
                filter: brightness(1);
              }
            }
          }
        }
      }
      & div:nth-of-type(2){
        display: grid;
        width: fit-content;
        max-width: 940px;
        margin-inline: auto;
        @media not all and (max-width: 750px) {
          grid-template-columns: repeat(2, 1fr);
        }
        @media (max-width: 750px) {
          grid-template-columns: 1fr;
          width: calc(90% - 1px - 1px);
        }
        & .c-card{
          padding-block-start: 0;
          padding-block-end: 3em;
          padding-inline: 2em;
          position: relative;
          @media not all and (max-width: 750px) {
            border-top: none;
          }
          & + .c-card{
            @media not all and (max-width: 750px) {
              border-left: none;
            }
            @media (max-width: 750px) {
              border-top: none;
            }
          }
          & hgroup{
            display: flex;
            flex-direction: column-reverse;
            & h2{
              font-size: clamp(0.938rem, 0.743rem + 0.83vw, 1.625rem); /* 15px 26px */
              font-size: clamp(1.125rem, 0.986rem + 0.59vw, 1.625rem); /* 18px 26px */
              font-weight: 900;
              line-height: calc(36/26);
              & + p{
                color: var(--color-red-primary);
                font-size: 10px;
              }
            }
            & + p{
              margin-block-start: 1em;
            }
          }
          & .arrow{
            width: 20px;
            height: 20px;
            padding: 0;
            position: absolute;
            bottom: 1.4em;
            right: 1em;
            transition: right 0.4s ease-in-out;
            & .desvg polyline{
              stroke: var(--color-red-primary);
            }
            & > img{
              width: 100%;
              height: 100%;
              object-fit: contain;
              object-position: center;
            }
          }
          @media (any-hover: hover) {
            &:hover{
              & .arrow{
                right: 0.75em;
              }
            }
          }
        }
      }
    }

    /* figure */
    & + figure{
      @media (max-width: 750px) {
        display: grid;
        place-items: center;
        min-height: 150px;
        & img{
          width: 100%;
          height: 100%;
          object-fit: cover;
          object-position: center;
        }
      }
    }
  } /* top 04 */

  & .l-contents.--05{
    background-color: var(--color-gray-secondary);
    border-bottom: 1px solid var(--color-black-primary);
    position: relative;
    & article{
      display: grid;
      place-items: center;
      padding-block: 2em;
      background-color: var(--color-green-primary);
      z-index: 5;
      @media not all and (max-width: 750px) {
        width: 42%;
        position: absolute;
        top: 0;
        left: 50%;
        translate: -50% -80%;
      }
      @media (max-width: 750px) {
        width: 100vw;
        margin-inline-start: 50%;
        transform: translateX(-50%);
        position: relative;
      }
      & hgroup{
        display: flex;
        justify-content: center;
        flex-direction: column;
        & h2{
          font-size: clamp(1.25rem, 0.896rem + 1.51vw, 2.5rem); /* 20px 40px */
          font-size: clamp(1.5rem, 1.221rem + 1.19vw, 2.5rem); /* 24px 40px */
          font-weight: 700;
          line-height: calc(56 / 40);
          text-align: center;
          & + p{
            display: grid;
            place-items: center;
            width: fit-content;
            margin-block-start: 1.5em;
            margin-inline: auto;
            padding-block: 0.5em;
            padding-inline: 2.5em;
            background-color: var(--color-black-primary);
            color: var(--color-green-primary);
            font-size: clamp(0.625rem, 0.554rem + 0.3vw, 0.875rem); /* 10px 14px */
            font-weight: 700;
          }
        }
      }
    }
    & ul{
        display: grid;
        justify-content: center;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 20px 0;
        @media (max-width: 750px) {
          margin-block-start: 20px;
        }
        & > li{
          height: 100%;
          & .c-card{
            height: 100%;
            padding-block-end: 3em;
            border: 1px solid color-mix(in srgb, var(--color-black-primary) 75%, transparent);
            background-color: var(--color-white);
            position: relative;
            & figure{
              aspect-ratio: 435.2762/331.4089;
              & > img{
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: center;
                scale: 1;
                transition: scale 0.24s ease-in-out;
              }
            }
            & h2,
            & p{
              @media not all and (max-width: 750px) {
                padding-inline: 40px 20px;
              }
              @media (max-width: 750px) {
                padding-inline: 20px;
              }
            }
            & h2{
              margin-block-start: 1em;
              font-size: clamp(0.938rem, 0.743rem + 0.83vw, 1.625rem); /* 15px 26px */
              font-size: clamp(1.125rem, 0.986rem + 0.59vw, 1.625rem); /* 18px 26px */
              font-weight: 700;
              line-height: calc(56 / 40);
            }
            & p{
              margin-block-start: 1em;
            }
            & .arrow{
              width: 20px;
              height: 20px;
              padding: 0;
              position: absolute;
              bottom: 1.5em;
              right: 1em;
              transition: right 0.4s ease-in-out;
              & > img{
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: center;
              }
              & .desvg polyline{
                stroke: var(--color-red-primary);
              }
            }
            @media (any-hover: hover) {
              &:hover{
                & figure img{
                  scale: 1.02;
                  filter: brightness(1);
                }
                & .arrow{
                  right: 0.75em;
                }
              }
            }
          }
          & + li{
            & .c-card{
              @media not all and (max-width: 750px) {
                border-left: 0;
              }
            }
          }
        }
      }
  } /* top 05 */

  & .l-contents.--06{
    border-bottom: 1px solid var(--color-black-primary);
    & .l-contents__inner{
      position: relative;
      & figure{
        width: 100%;
        @media not all and (max-width: 750px) {
          aspect-ratio: 1299.999/525.2823;
        }
        @media (max-width: 750px) {
          aspect-ratio: 720.092/525.2823;
        }
        & > img{
          width: 100%;
          height: 100%;
          object-fit: cover;
          object-position: center;
        }

      }
      & article{
        padding: 1.5em;
        background-color: var(--color-black-secondary);
        color: var(--color-white);
        @media not all and (max-width: 750px) {
          position: absolute;
          width: 40%;
          top: 50%;
          right: 0;
          translate: 0 -50%;
        }
        @media (max-width: 1060px) {
          width: 85%;
        }
        @media (max-width: 750px) {
          width: 90%;
          margin-block-start: -4em;
          position: relative;
          left: 50%;
          translate: -50% 0;
        }
        & hgroup{
          display: flex;
          flex-direction: column-reverse;
          gap: 1em;
          & h2{
            font-size: clamp(0.938rem, 0.743rem + 0.83vw, 1.625rem); /* 15px 26px */
            font-size: clamp(1.125rem, 0.986rem + 0.59vw, 1.625rem); /* 18px 26px */
            font-weight: 700;
            & + p{
              display: grid;
              place-items: center;
              width: fit-content;
              margin-block-start: 1em;
              padding-inline: 2em;
              background-color: var(--color-green-primary);
              color: var(--color-black-primary);
              font-size: clamp(0.625rem, 0.554rem + 0.3vw, 0.875rem); /* 10px 14px */
              font-weight: 700;
              line-height: 2;
            }
          }
          & + p{
            margin-block-start: 1em;
            line-height: 2;
          }
        }
        & .c-button{
          justify-content: center;
          grid-template-columns: auto auto;
          width: fit-content;
          min-width: auto;
          margin-block-start: 1em;
          margin-inline: auto;
          background-color: var(--color-black-secondary);
          & .icon{
            width: 0.6em;
            height: 0.6em;
            translate: 0 -100%;
          }
          @media (any-hover: hover) {
            &:hover{
              filter: brightness(1);
            }
          }
        }
      }
    }
  } /* top 06 */

  & .l-contents.--07{
    margin-block: clamp(3.75rem, 2.689rem + 4.53vw, 7.5rem); /* 60px 120px */
    background-color: var(--color-green-primary);
    @media (max-width: 750px) {
      border: 16px solid var(--color-white);
    }
    & .l-contents__inner{
      width: fit-content;
      margin-inline-start: calc((100vw - 1200px) / 2);
      @media (max-width: 1248px) {
        margin-inline-start: 0;
        gap: 20px;
      }
      & > div:nth-of-type(1){
        /* margin-inline-start: clamp(1.25rem, -3.703rem + 21.13vw, 18.75rem); */ /* 20px 300px */
        padding-block: 2em;
        @media (max-width: 750px) {
          margin-inline-start: 0;
          padding-block: 1em;
          padding-inline: calc(58px / 2);
          order: 2;
        }
        & .catch{
          font-size: clamp(0.938rem, 0.743rem + 0.83vw, 1.625rem); /* 15px 26px */
          font-weight: 500;
          @media (max-width: 750px) {
            padding-block-end: 1em;
            line-height: calc(46 / 30);
          }
        }
        & .line{
          height: 1px;
          background-color: var(--color-black-primary);
          @media not all and (max-width: 750px) {
            width: calc(100% + 40px);
          }
          @media (max-width: 750px) {
            width: calc(100% + calc(58px / 2) + calc(58px / 2));
            position: relative;
            left: calc((58px / 2) * -1);
          }
          & + p{
            margin-block-start: 1em;
          }
        }
        & .c-button{
          width: fit-content;
          min-width: auto;
          margin-block-start: 2em;
          margin-inline: auto;
          color: var(--color-red-primary);
          & > .icon{
            width: 0.6em;
            height: 0.6em;
            padding: 0;
            translate: 0 -90%;
            & > img{
              width: 100%;
              height: 100%;
              object-fit: contain;
              offset-position: center;
            }
            & .desvg polyline{
              stroke: var(--color-red-primary);
            }
          }
          @media (any-hover: hover) {
            &:hover{
              filter: brightness(1);
            }
          }
        }
      }
      & > div:nth-of-type(2){
        @media (max-width: 750px) {
          order: 1;
        }
        & figure{
          width: 100%;
          height: 100%;
          & > img{
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
          }
        }
      }
    }
  } /* top 07 */

  & .l-contents.--08{
    border-top: 1px solid var(--color-black-primary);
    & ul{
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(2, 1fr);
      & > li{
        display: grid;
        place-items: center;
        height: 100%;
        &:nth-of-type(1){
          grid-area: 1 / 1 / 2 / 3;
          & a{
            background-image: url(../img/top/08-img01.webp);
          }
        }
        &:nth-of-type(2){
          grid-area: 2 / 1 / 3 / 2;
          & a{
            aspect-ratio: 650/335;
            background-image: url(../img/top/08-img02.webp);
          }
        }
        &:nth-of-type(3){
          grid-area: 2 / 2 / 3 / 3;
          & a{
            aspect-ratio: 650/335;
            background-image: url(../img/top/08-img03.webp);
          }
        }
        & a{
          display: grid;
          place-items: center;
          width: 100%;
          height: 100%;
          background-repeat: no-repeat;
          background-size: cover;
          background-position: center;
          color: var(--color-white);
          font-size: clamp(0.625rem, 0.094rem + 2.26vw, 2.5rem); /* 10px 40px */
          font-size: clamp(1rem, 0.582rem + 1.78vw, 2.5rem); /* 16px 40px */
          font-weight: 700;
          text-align: center;
          filter: brightness(1);
          transition: filter 0.4s ease-in-out;
          @media (any-hover: hover) {
            &:hover{
              filter: brightness(1.2);
            }
          }
        }
      }
    }
  } /* top 08 */
}