@charset "UTF-8";

@font-face {
  font-family: 'Roboto';
  src: url('/cmn/fonts/Roboto-Thin.ttf') format('truetype');
  font-weight: 100;
}

@font-face {
  font-family: 'Roboto';
  src: url('/cmn/fonts/Roboto-Regular.ttf') format('truetype');
  font-weight: 400;
}

@font-face {
  font-family: 'Roboto';
  src: url('/cmn/fonts/Roboto-Medium.ttf') format('truetype');
  font-weight: 500;
}

@font-face {
  font-family: 'Roboto';
  src: url('/cmn/fonts/Roboto-Bold.ttf') format('truetype');
  font-weight: 700;
}

@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap');

main {
  margin: 85px 0 0;
  @media (max-width: 767px) {
    margin: 45px 0 0;
  }
}
.c-button__wrapper {
  @media (max-width: 767px) {
    text-align: center;
    .c-button {
      display: inline-block;
    }
  }
}

.c-button {
  display: table;
  border: 1px solid #861c3c;
  background-color: #fff;
  padding: 17px 62px 17px 40px;
  font-weight: 500;
  border-radius: 30px;
  position: relative;
  overflow: hidden;
  min-width: 275px;
  span {
    position: relative;
    color: #861c3c;
    font-size: 16px;
    z-index: 2;
    transition: .2s ease;
    @media (max-width: 767px) {
      font-size: 15px;
    }

  }
  &::before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: '';
    background-color: #861c3c;
    -webkit-transform-origin: left top;
    transform-origin: left top;
    -webkit-transform: scale(0, 1);
    transform: scale(0, 1);
    -webkit-transition: all .5s;
    transition: all .5s;
    height: 100%;
    opacity: 0.25;
    z-index: 1;
  }
  &::after {
    content: "";
    position: absolute;
    right: 15px;
    top: 50%;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    transform: translateY(-50%);
    display: block;
    background-image: url(/cmn/img/icon_2024/icon_link_white.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 6px 8px;
    background-color: #861c3c;
    z-index: 2;

  }

  &[target="_blank"] {
    &::after {
      background-image: url(/cmn/img/icon_2024/icon_blank_white.svg);
      background-size: 10px 10px;
    }
    @media (min-width: 768px) {
      &:hover {
        &::after {
          background-color: #fff;
          background-image: url(/cmn/img/icon_2024/icon_blank.svg);
        }
      }
    }
  }


  @media (max-width: 767px) {
    &::after {
      width: 22px;
      height: 22px;
    }
  }

  @media (min-width: 768px) {
    &:hover {
      border-color: #cdcdcd;
     span {
       color: #fff;
     }
     &::before {
        -webkit-transform-origin: left top;
       transform-origin: left top;
       -webkit-transform: scale(1, 1);
       transform: scale(1, 1);
       opacity: 1;
     }
     &::after {
       background-color: #fff;
       background-image: url(/cmn/img/icon_2024/icon_link.svg);
      }
    }
  }
}
.c-link {
  
}

.p-top-sec {
  .p-top-sec__inner {
    padding: 0 35px;
    max-width: 1700px;
    width: 100%;
    margin: auto;
    @media (max-width: 767px) {
      padding: 0 10px;
    }
  }
  .p-top-sec__head {
    font-family: 'Roboto', sans-serif;
    color: #861c3c;
    font-weight: 500;
    letter-spacing: 0.05em;
    font-size: 28px;
    line-height: 1;
    @media (max-width: 767px) {
      font-size: 18px;
    }
  }
  .p-top-sec__h3 {
    font-weight: 700;
    color:#222;
    font-size: 40px;
    margin-top: 5px;
    letter-spacing: 0.04em;

    @media (max-width: 767px) {
      font-size: 24px;
    }
    
  }
}
/*.p-top-sec*/
.p-top-sec-mv {
    position: relative;

    @media (min-width: 768px) {
     /*height: 500px;*/
    }

    .p-top-sec-mv__slider {
        overflow: hidden;
        display: none;
        height: 100%;
        min-height: 1px;

        &.slick-initialized{
          display: block; /*slick-initializedが付与されたら表示*/
        }

        .slick-track {
            >li {
                position: relative;
                overflow: hidden;
                height: auto !important;

                >div {
                    display: block;
                    @media (min-width: 768px) {
                      /*height: 500px;*/
                    }
                    picture {
                      @media (min-width: 768px) {
                        /*position: absolute;
                        top: 0;
                        height: 100%;*/
                        width: 100%;
                      }
                      img {
                        display: block;
                        @media (max-width: 767px) { 
                          width: 100%;
                          height: 100%;
                        }
                        @media (min-width: 1193px) {
                          /*
                          height: auto;
                          object-fit: cover;
                          min-height: auto;*/
                        }
                        @media (min-width: 768px) {
                          /*position: absolute;
                          left: 50%;
                          top: 0;
                          min-width: 100%;
                          min-height: 100%;
                          transform: translateX(-50%);
                          */
                          width: 100%;
                          /*height: 500px;*/
                        }
                      }
                    }
                 .p-top-sec-mv__head {
                    @media (min-width: 768px) {
                      position: absolute;
                      bottom: 0;
                      left: 0;
                      height: 260px;
                      width: 100%;
                      padding: 30px 35px;
                      display: flex;
                      align-items: end;
                      pointer-events: none;
                      p {
                        color: #fff;
                      }
                      >div {
                        position: relative;
                        z-index: 1;
                        >* {
                          pointer-events: all;
                        }
                      }

                      &::before {
                        content: "";
                        position: absolute;
                        pointer-events: none;
                        width: 100%;
                        height: 100%;
                        top: 0;
                        left: 0;
                        background: linear-gradient(to top, #222, rgba(0,0,0,0));
                      }
                    }
                    @media (max-width: 767px) {
                      padding: 15px 10px 3px;
                    }

                    .p-top-sec-mv__headTtl {
                      font-size: 32px;
                      font-weight: 700;

                      @media (min-width: 768px) {
                        pointer-events: none;
                      }

                      @media (max-width: 767px) {
                        font-size: 22px;
                        color: #222;
                      }
                    }
                    .p-top-sec-mv__headText { 
                      font-weight: 400;
                      font-size: 16px;
                      margin-top: 15px;
                      @media (max-width: 767px) {
                        margin-top: 10px;
                        font-size: 13px;
                      }
                    }
                    .c-link {
                      position: relative;
                      display: inline-block;
                      color: #fff;
                      font-size: 14px;
                      line-height: 1.3;
                      font-weight: 500;
                      padding-right: 30px;
                      margin-top: 20px;

                      @media (max-width: 767px) {
                        font-size: 13px;
                        color: #333;
                      }
                      @media (min-width: 768px) {
                        &:hover {
                          span {
                            &::before {
                              width: 100%;
                              background-color: #fff;
                            }
                          }
                        }
                      }

                      >span {
                        position: relative;
                        &::before {
                            content: "";
                            position: absolute;
                            border-bottom: solid 1px #fff;
                            bottom: 0px;
                            left: 0px;
                            content: "";
                            display: block;
                            -webkit-transition: .5s;
                            transition: .5s;
                            width: 0%;
                            height: 1px;
                        }
                      }
                      &::after {
                        position: absolute;
                        display: inline-block;
                        border-radius: 50%;
                        content: '';
                        width: 20px;
                        height: 20px;
                        background-image: url(/cmn/img/icon_2024/icon_link.svg);
                        background-repeat: no-repeat;
                        background-size: 6px 8px;
                        background-position: center;
                        background-color: #fff;
                        top: 50%;
                        transform: translateY(-50%);
                        right: 0;
                      }
                      @media (max-width:767px) {
                        &::after {
                          width: 22px;
                          height: 22px;
                          background-color: #861c3c;
                          background-image: url(/cmn/img/icon_2024/icon_link_white.svg);
                        }
                      }
                    }

                  }
                }
            }
        }
    }
}
.p-top-sec-mv-controller{
  background-color: #fff;
  border-radius: 16px;
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 0 5px 0 15px;

  @media (min-width: 768px) {
    position: absolute;
    bottom: 20px;
    right: 30px;
  }

  @media (max-width: 767px) {
    position: relative;
    display: inline-flex;
    transform: translateX(-50%);
    left: 50%;
  }

  ul {
    display: flex;
    gap: 10px;
    >li {
      position: relative;
      font-family: "Jost", sans-serif;
      font-optical-sizing: auto;
      font-weight: 400;
      font-style: normal;
      padding: 7px 0;
      line-height: 1.3;
      font-size: 14px;
      letter-spacing: 0.04em;
      color: #aaa;
      cursor: pointer;
      transition: .1s linear;
      width: 21px;
      &::after {
        position: absolute;
        content: '';
        width: 100%;
        display: block;
        height: 2px;
        background-color: #861c3c;
        bottom: 0;
        left: 0;
        opacity: 0;
        transition: .1s linear;

      }
      &.is-current {
        font-weight: 600;
        color: #861c3c;
        &::after {
          opacity: 1;
        }
      }
      &:not(.is-current) {
        &:hover {
          font-weight: 600;
          color: #861c3c;
        }
      }
    }
  }
  button {
    position: relative;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    background-color: #861c3c;
    border: 1px solid #861c3c;
    cursor: pointer;
    span {
      position: absolute;
      display: block;
      width: 8px;
      height: 8px;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      &::before,&::after {
        content: "";
        position: absolute;
        display: block;
        width: 2px;
        height: 8px;
        top: 0;
        background-color: #fff;
        transition: all .2s;
      }
    }
    .icon {
      position: absolute;
      width: 8px;
      height: 8px;
      background-image: url(/cmn/img/top2024/icon_play_w.svg);
      background-repeat: no-repeat;
      background-position: 0 0;
      background-size: 100%;
      opacity: 1;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
    }
    span {
      opacity: 0;
      &::before {
       left: 0;
      }
      &::after {
       right: 0;
      }
    }
    &[data-play="true"]{
      span {
        opacity: 1;
        &::before {
         left: 0;
        }
        &::after {
         right: 0;
        }
      }

      .icon {
        opacity: 0;
      }
    }

    &:hover {
      border-color: #aaa;
      background-color: #fff;
      span {
        &::before,&::after {
          background-color: #861c3c;
        }
      }
      .icon {
        background-image: url(/cmn/img/top2024/icon_play.svg);
      }
    }
  }
}/*.p-top-sec-mv*/

.p-top-sec-important{
  margin-top: 10px;
  padding: 0 10px;

  @media (max-width: 767px) { 
    margin-top: 20px;
  }
  .p-top-sec-important__inner {
    background-color: #f1f1f1;
    border-radius: 10px;
    padding: 10px 28px;

    @media (max-width: 767px) {
      padding: 23px 15px;
    }
    >p {
      line-height: 1.5;
      font-weight: 500;
    }
    >a {
      line-height: 1.5;
      font-weight: 500;
      &::after {
        content: "";
        display: inline-block;
        background-image: url(/cmn/img/icon_2024/icon_arrow.svg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        width: 21px;
        height: 9px;
        transform: translateY(-5px);
      }
      @media (max-width: 767px) {
        &::after {
          transform: translateY(-1px); 
        }
      }
      span {
        position: relative;
        overflow: hidden;
        line-height: 1.3;
        display: inline-block;
        @media (max-width: 767px) {
          display: inline;
        }
        &::before{
          content: "";
          position: absolute;
          border-bottom: solid 1px #8d8b8b;
          bottom: 0px;
          left: 0px;
          content: "";
          display: block;
          -webkit-transition: .5s;
          transition: .5s;
          width: 0%;
          height: 1px;
        }
      }
      &:hover {
        span {
          &::before {
            width: 100%;
            border-color: #3e3a39;
          }
        }
      }
    }
    >* {
      display: block;
      &:not(:first-child){
        margin-top: 10px;
      }
    }
  }
}/*.p-top-sec-important*/

.p-top-sec-news {
  padding: 20px 0 80px;
  @media (max-width: 767px) { 
    padding: 30px 0 50px;
  }
  .p-top-sec-news__head {
    margin-top: 15px;
    display: flex;
    align-items: end;
    justify-content: space-between;
    padding-bottom: 20px;
    border-bottom: 1px solid #ababab;

    @media (max-width: 767px) {
      margin-top: 10px;
      padding-bottom: 13px;
    }
    >h3 {
      font-weight: 700;
      font-size: 40px;
      color: #222;
      line-height: 1;
      @media (max-width: 767px) {
        font-size: 24px;
      }
    }
    >ul {
      display: flex;
      gap: 40px;

      @media (max-width: 767px) {
        display: none;
      }
      
      >li {
        >a {
          font-size: 16px;
          font-weight: 500;
          text-decoration: underline;
          text-underline-offset: 2px;
          text-decoration-color: #fff;
          transition: all .2s;
          span {
            position: relative;
            &:before {
              content: "";
              position: absolute;
              border-bottom: solid 1px #8d8b8b;
              bottom: 0px;
              left: 0px;
              content: "";
              display: block;
              -webkit-transition: .5s;
              transition: .5s;
              width: 0%;
              height: 1px;
            }
          }
          @media (min-width: 768px) {
          &:hover {
            span {
              color: #861c3c;
              &:before {
                border-color: #861c3c;
                width: 100%;
              }
            }
          }
        }
          &::before {
            content: "";
            background-image: url(/cmn/img/icon_2024/icon_link.svg);
            background-repeat: no-repeat;
            background-position: center;
            background-size: 6px 8px;
            width: 6px;
            height: 8px;
            display: inline-block;
            transform: translateY(-2px);
            margin-right: 10px;
            transition: all .2s;
          }
          /*
          &:hover {
            color: #861c3c;
            text-decoration-color: #861c3c;
          }*/
        }
      }
    }
  }

  .p-top-sec-news__bottom {
    display: flex;
    gap: 15px 20px;
    flex-wrap: wrap;
    margin-top: 20px;
    @media (min-width: 768px) {
      display: none;
    }
    >li {
      width: calc(50% - 10px);
      >a {
        font-size: 13px;
        font-weight: 500;
        text-decoration: underline;
        text-underline-offset: 2px;
        text-decoration-color: #fff;
        transition: all .2s;
        &::before {
          content: "";
          background-image: url(/cmn/img/icon_2024/icon_link.svg);
          background-repeat: no-repeat;
          background-position: center;
          background-size: 100%;
          width: 6px;
          height: 8px;
          display: inline-block;
          transform: translateY(-2px);
          margin-right: 10px;
          transition: all .2s;
        }
      }
    }

  }
  .p-top-sec-news__list {
    border-bottom: 1px solid #dadada;
    padding-bottom: 30px;
    margin-top: 30px;
    @media (max-width: 767px) {
      padding-bottom: 27px;
      margin-top: 20px;
    }
    >li{
      &:not(:first-child) {
        margin-top: 27px;
        @media (max-width: 767px) {
          margin-top: 25px;
        }
      }
      >a {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
        @media (max-width: 767px) {
         -ms-flex-wrap: wrap;
         flex-wrap: wrap;
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-items: center;
        }
        p[data-info_label] {
          border-radius: 11px;
          padding: 4px 2px;
        }

        &:hover {
          .txt:before {
            width: 100%;
            border-color: #3e3a39;
          }
        }
        .date {
          color: #777;
          font-size: 15px;
          @media (max-width: 767px) {
            font-size: 12px;
          }
        }
        .budge {
          line-height: 1.3;
          font-size: 11px;
          padding: 2px;
          text-align: center;
          margin: 0 45px;
          min-width: 105px;
          border-radius: 11px;

          @media (max-width: 767px) {
            font-size: 10px;
            margin-left: 17px;
            min-width: 75px;
            padding: 2px 2px 1px;
          }
          &.info {
            background-color: #e6e6e6;
            color: #333;

          }
          &.release{
            background-color: #3e3a39;
            color: #fff;
          }
          &.event{
            background-color: #929090;
            color: #fff;
          }
        }

        .txt {
          line-height: 1.5;
          position: relative;
          overflow: hidden;
          font-size: 16px;
          margin-top: -4px;
          @media (max-width: 767px) {
            width: 100%;
            margin-top: 8px;
            font-size: 14px;
          }
          &:before {
            content: "";
            position: absolute;
            border-bottom: solid 1px #8d8b8b;
            bottom: 0px;
            left: 0px;
            content: "";
            display: block;
            -webkit-transition: .5s;
            transition: .5s;
            width: 0%;
            height: 1px;
          }
          @media (max-width: 767px) {
            &::after {
              font-size: 9px;
            }
          }
        }
        &.pdf {
          .txt {
            &:after {
              content: 'PDF';
              display: inline-block;
              border: 1px solid #c30e1e;
              font-size: 10px;
              color: #c30e1e;
              line-height: 1;
              padding: 2px 7px;
              margin-left: 10px;
              vertical-align: text-bottom;
            }
          }
        }
      }
    }
  }
}
/*.p-top-sec-news*/

.p-top-sec-commit{
  background-color: #f1f1f1;
  padding: 80px 0 90px;
  @media (max-width: 767px) {
    padding: 50px 0;
  }

  .p-top-sec-commit__head {
    @media (min-width: 768px) {
      display: flex;
      /*gap: 80px;*/
    }
    >div {
      @media (min-width: 768px) {
        /*width: calc(50% - 40px);*/
      }
      &:first-child {
        @media (min-width: 768px) {
          width: 50%;
        }
      }
      &:last-child {
        @media (min-width: 768px) {
          padding-left: 40px;
        }
      }
      >h3 {
        font-size: 54px;
        font-weight: 700;
        letter-spacing: 0.04em;
        color: #222;
        margin-top: 20px;

        @media (max-width: 767px) {
          font-size: 30px;
          margin-top: 12px;
        }

      }
      >h4 {
        font-size: 30px;        
        font-weight: 700;
        letter-spacing: 0.04em;
        color: #222;
        margin-top: 15px;

        @media (max-width: 767px) {
          font-size: 20px;
          margin-top: 35px;
        }
      }
      >p{
        font-size: 18px;
        margin-top: 20px;
        color: #222;
        line-height: 1.8;

        @media (max-width: 767px) {
          font-size: 14px;
          margin-top: 15px;
        }
      }
      .p-top-sec__headButton{
        @media (max-width: 767px) {
          text-align: center;
        }

      }
      .c-button {
        margin-top: 30px;
        @media (max-width: 767px) {
          margin: 50px auto 0;
        }
      }
    }
  }
  .p-top-sec-commit__list {
    margin-top: 55px;

    @media (min-width: 768px) {
      display: flex;
      gap: 30px;
      >li {
        width: calc((100% - 60px) / 3);
      }
    }

    @media (max-width: 767px) {
      margin-top: 40px;
    }

    >li {
        &:not(:first-child){
          @media (max-width: 767px) {
            margin-top: 40px;
         }
        }
      a {
        display: block;
        picture {
          display: block;
          width: 100%;
          border-radius: 10px;
          overflow: hidden;
          img {
            width: 100%;
            transition: transform .2s ease, -webkit-transform .2s ease;
          }
        }
        @media (min-width: 768px) {
          &:hover {
            picture {
              img {
                  transform: scale(1.1);
              }
            }
            .p-top-sec-commit__listHead {
              color: #861c3c;
              span {

                &::before {
                  width: 100%;
                }
              }
            }

          }
        }
        .p-top-sec-commit__listHead{
          position: relative;
          font-size: 30px;
          font-weight: 700;
          color: #222;
          z-index: 1;

          @media (max-width: 767px) {
            font-size: 20px;
          }

          span {
            position: relative;
            overflow: hidden;
            &::before {
              content: "";
              position: absolute;
              border-bottom: solid 1px #861c3c;
              bottom: 0px;
              left: 0px;
              content: "";
              display: block;
              -webkit-transition: .5s;
              transition: .5s;
              width: 0%;
              height: 1px;
            }
          }

          &::after {
            content: "";
            width: 26px;
            height: 26px;
            border-radius: 50%;
            transform: translateY(2px);
            display: inline-block;
            background-image: url(/cmn/img/icon_2024/icon_link_white.svg);
            background-repeat: no-repeat;
            background-position: center;
            background-size: 6px 8px;
            background-color: #861c3c;
            z-index: 2;
            margin-left: 10px;
 
          }
          @media (max-width: 767px) {
            &::after {
              width: 22px;
              height: 22px;
              transform: translateY(2px);
            }
          }
        }
      }
      .p-top-sec-commit__listContent{
        position: relative;
        margin-top: 25px;

        @media (max-width: 767px) {
          margin-top: 22px;
        }

      }
      .p-top-sec-commit__listText{
        position: relative;
        font-size: 16px;
        font-weight: 500;
        color: #333;
        line-height: 1.5;
        margin-top: 25px;
        z-index: 1;

        @media (max-width: 767px) {
          font-size: 14px;
          margin-top: 20px;
        }
      }
      .p-top-sec-commit__listNumber{
        position: absolute;
        width: 156px;
        top: 0;
        right: 0;
        z-index: 0;
        @media (max-width: 767px) {
          width: 91px;
          top: 5px;
        }
      }
    }
  }
}/*.p-top-sec-commit*/

.p-top-sec-pickup {
  position: relative;
  padding: 80px 0;
  background-color: #f1f1f1;

  @media (max-width: 767px) {
    padding: 50px 0;
  }
  

  .p-top-sec-pickup__list{
    margin-top: 50px;
    display: flex;
    flex-wrap: wrap;

    @media (max-width: 767px) {
      margin-top: 25px;
      gap: 30px 10px;
      overflow: hidden;
      >li{
        width: calc((100% - 10px) / 2);
      }
    }
    @media (min-width: 768px) {
      gap: 65px 20px;
      >li {
        width: calc((100% - 60px) / 4);
      }
    }

    >li {
      a{
        figure {
          width: 100%;
          overflow: hidden;
          img{
            width: 100%;
            -webkit-transition: -webkit-transform .2s ease;
            transition: -webkit-transform .2s ease;
            transition: transform .2s ease;
            transition: transform .2s ease, -webkit-transform .2s ease;
          }
        }
        figcaption {
          font-weight: 700;
          color: #222;
          line-height: 1.5;
          font-size: 20px;
          margin-top: 20px;

          @media (max-width: 767px) {
            font-size: 14px;
            margin-top: 15px;
          }
        }
        .sub {
          color: #444;
          font-size: 16px;
          font-weight: 500;
          margin-top: 10px;
          line-height: 1.5;
          display: -webkit-box;
          overflow: hidden;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;

          @media (max-width: 767px) {
            font-size: 12px;
            margin-top: 5px;
            -webkit-line-clamp: 3;
          }
        }
        @media (min-width: 768px) {
          &:hover {
            figure {
              img {
                -webkit-transform: scale(1.1);
                transform: scale(1.1);
              }
            }
          }
        }
      }
    }
  }

  .js-pickp-moreview {
    position: relative;
  }

  .p-top-sec-pickup__list {
    position: relative;
    transition: all .2s;

    @media (max-width: 767px) {
    &[aria-expanded="false"] {
      &::after {
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 2;
        content: '';
        width: 100%;
        height: 40%;
        background: linear-gradient(rgba(241, 241, 241, 0) 0, rgba(241, 241, 241, .7) 20%, rgba(241, 241, 241, 1) 80%);
      }
    }
  }
  }
  .p-top-sec-pickup__moreviewBtn__btn {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 2;

    @media (min-width: 768px) {
      display: none;
    }

    button {
      display: flex;
      gap: 8px;
      align-items: center;
      justify-content: center;
      border: 1px solid #d4d4d4;
      padding: 16px;
      width: 100%;
      border-radius: 10px;
      background-color: #fff;
      transition: all .2s;
      >span {
        font-size: 14px;
      }
      &::after {
        content: "";
        display: block;
        background-image: url(/cmn/img/icon_2024/icon_trigger.svg);
        background-repeat: no-repeat;
        background-size: 100%;
        background-position: center;
        width: 11px;
        height: 8px;
      }
      &[aria-expanded="false"] {
        opacity: 0;
        pointer-events: none;
      }
    }

  }

}/*.p-top-sec-pickup*/

.p-top-sec-story {
  @media (min-width: 768px) {
    padding: 60px 0 80px;
    background: linear-gradient(90deg, #242321 0%, #242321 50%, #3e3a39 50%, #3e3a39 100%);
  }
  @media (max-width: 767px) {
    padding: 50px 0 0;
    background-color: #242321;
  }
  .p-top-sec__head{
    color: #fff;
  }
  .p-top-sec__h3 {
    color: #fff;
    font-size: 52px;
    font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
    font-weight: 600;
    margin-top: 15px;
    font-feature-settings: "palt";
    letter-spacing: 0.01em;

    @media (max-width: 767px) {
      font-size: 30px;
    }
  }
  .p-top-sec-story__wrapper {
    margin-top: 35px;

    @media (min-width: 768px) {
      display: flex;
    }
    >div{
      @media (min-width: 768px) {
        width: 50%;
      }
      @media (min-width: 768px) {
       &:first-child {
          padding-right: 45px;
        }
        &:last-child {
          padding-left: 45px;
        }
      }
      @media (max-width: 767px) {
        &:first-child {
          padding-bottom: 50px;
        }
        &:last-child {
          padding: 45px 10px 50px;
          background-color: #3e3a39;
          width: 100vw;
          margin-left: -10px;
        } 
      }


      >h4 {
        font-size: 32px;
        font-weight: 700;
        color: #fff;

        @media (max-width: 767px) {
          font-size: 22px;
        }
      }
      >p {
        font-size: 18px;
        font-weight: 500;
        color: #fff;
        line-height: 1.8;
        margin-top: 10px;

        @media (max-width: 767px) {
          font-size: 16px;
          margin-top: 15px;
        }
      }
    }
  }
  .p-top-sec-story__slider{
    position: relative;
    margin: 24px auto 0;

    @media (max-width: 767px) {
      max-width: 700px;
    }

    .p-top-sec-mv-controller{
      @media (min-width: 768px) {
        top: clamp(320px,calc(((((100vw - 70px) / 2) - 45px)*0.717) + 15px),560px);
      }
      @media (max-width: 767px) {
        position: absolute;
        right: 0;
        left: inherit;
        top: clamp(0vw,calc(67.5vw + 10px),530px);
        transform: translate(0);
      }
      right: 0;
      bottom: inherit;
      background: none;
      ul {
        >li {
          color: #aaaaaa;
          &:after {
            background-color: #fff;
          }
          &.is-current{
            color: #fff;
          }
          @media (min-width: 768px) {
            &:hover {
              color: #fff;
            }
          }

        }
      }
      button {
        background-color: #fff;
        border-color:#fff ;
        span {
          &::before ,&::after{
            background-color:#861c3c;
          }
        }
        .icon {
          background-image: url(/cmn/img/top2024/icon_play.svg);
        }
        &:hover {
          border-color: #fff;
          background-color: #861c3c;
          span {
            &::before ,&::after{
              background-color: #fff;
            }
          }
          .icon {
            background-image: url(/cmn/img/top2024/icon_play_w.svg);
          }
        }
      }
    }
  }
  .p-top-sec-story__list {
    width: 100%;
    overflow: hidden;
    display: none;
    min-height: 1px;

    &.slick-initialized{
      display: block; /*slick-initializedが付与されたら表示*/
    }
    .slick-slide {
      >a {
        figure {
          overflow: hidden;
          border-radius: 10px;
          img{
            width: 100%;
            -webkit-transition: -webkit-transform .2s ease;
            transition: -webkit-transform .2s ease;
            transition: transform .2s ease;
            transition: transform .2s ease, -webkit-transform .2s ease;
          }
        }
        @media (min-width: 768px) {
          &:hover {
            figure {
              img {
                transform: scale(1.1);
              }
            }
          }
        }
        .p-top-sec-story__img{
          position: relative;
          >figcaption{
            position: absolute;
            background-color: #e6e6e6;
            font-size: 15px;
            font-weight: 500;
            color: #222;
            border-radius: 1;
            min-width: 90px;
            border-radius: 14px;
            display: inline-block;
            bottom: -16px;
            left: 0;
            padding: 6px 32px;
            text-align: center;

            @media (max-width: 767px) {
              font-size: 13px;
              padding: 5px;
              bottom: -13px;
            }
          }

        }
        .p-top-sec-story__content{
          position: relative;
          margin-top: 60px;
        }
        .p-top-sec-story__contentHead {
          font-size: 30px;
          color: #fff;
          font-weight: 500;

          @media (max-width: 767px) {
            font-size: 20px;
          }
        }
        .p-top-sec-story__contentText{
          font-size: 15px;
          color: #fff;
          font-weight: 500;
          margin-top: 15px;

          @media (max-width: 767px) {
            font-size: 13px;
          }
        }
        .p-top-sec-story__contentYear{
          font-size: 100px;
          color: #fff;
          font-weight: 500;
          font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
          line-height: 0.74;
          opacity: .1;
          position: absolute;
          top: -15px;
          right: 0;

          @media (max-width: 767px) {
            font-size: 55px;
            top: initial;
            bottom: 0;
          }
        }
      }

    }
  }
  .p-top-sec-people__list {
    margin-top: 25px;
    >li {
      &:not(:first-child) {
        margin-top: 35px;
      }
      a{
        @media (min-width: 768px) {
          display: flex;
        }
        picture {
          width: 200px;
          display: block;
          overflow: hidden;
          border-radius: 10px;

          @media (max-width: 767px) {
            width: 100%;
            border-radius: 0;
            max-width: 700px;
            margin: 0 auto;
          }

          img {
            width: 100%;
            -webkit-transition: -webkit-transform .2s ease;
            transition: -webkit-transform .2s ease;
            transition: transform .2s ease;
            transition: transform .2s ease, -webkit-transform .2s ease;
          }
        }
        @media (min-width: 768px) {
          &:hover {
            picture {
              img {
                transform: scale(1.1);
              }
            }
          }
        }


        .p-top-sec-people__content {
          @media (min-width: 768px) {
           display: flex;
            flex-direction: column;
            justify-content: space-between;
            flex: 1;
            margin-left: 35px;
          }
          @media (max-width: 767px) {
            margin-top: 10px;
          }
          p {
            color: #fff;
          }
          .p-top-sec-people__contentHead {
            position: relative;
            font-size: 19px;
            font-weight: 500;
            line-height: 1.5;
            width: 100%;
            padding-top: 15px;

            @media (max-width: 767px) {
              padding: 20px 10px 0;
              font-size: 18px;
            }


            >span {
              position: relative;
              z-index: 2;
            }
            /*
            &::before{
              position: absolute;
              content: "";
              width: 40px;
              height: 33px;
              display: block;
              background-image: url(/cmn/img/top2024/bg_people.svg);
              background-repeat: no-repeat;
              background-position: center;
              background-size: 100%;
              z-index: 1;
              top: 0px;
              left: -15px;
              opacity: 0.14;
            }
              */

            @media (max-width: 767px) {
              &::before {
                left: 0;
              }
            }
            &::after {
              content: "";
              width: 21px;
              height: 9px;
              display: inline-block;
              background-image: url(/cmn/img/icon_2024/icon_arrow_white.svg);
              background-repeat: no-repeat;
              background-position: center;
              background-size: 100%;
              margin-left: 10px;
              transform: translateY(-2px);
            }
          }

          .p-top-sec-people__contentBottom {
            @media (max-width: 767px) {
              padding-left: 10px;
              margin-top: 10px;
            }
          }
          .p-top-sec-people__contentName{
            font-size: 15px;
            color: #fff;
            font-weight: 500;
          }
          .p-top-sec-people__contentDiv{
            font-size: 13px;
            color: #c2c2c2;
            font-weight: 500;
            margin-top: 7px;
          }
        }
      }
    }
  }
  .p-top-sec-story__btn{
    margin-top: 35px;

    @media (max-width: 767px) {
      text-align: center;
      margin-top: 25px;
      .c-button {
        display: inline-block;
      }
    }
  }
  .p-top-sec-people__btn{
    margin-top: 50px;
    @media (max-width: 767px) {
      margin-top: 35px;
      text-align: center;
      .c-button {
        display: inline-block;
      }
    }
  }
}/*.p-top-sec-people*/

.p-top-sec-others {
  overflow: hidden;
  padding-top: 100px;

  @media (max-width: 767px) {
    padding-top: 60px;
  }

  .p-top-sec__inner {
    .p-top-sec__h3 {
      margin-top: 20px;
      @media (max-width: 767px) {
       margin-top: 5px;
      }
    }
  }
  .p-top-sec-others__wrapper {
    max-width: 1270px;
    margin: auto;
    @media (min-width: 768px) {
      display: flex;
      >div {
        width: 50%;
      }
      &:not(:first-child) {
        margin-top: 100px;
      }
      &:nth-child(2n-1) {
        >div {
          &:nth-child(1) {
            padding-right: 70px;
          }
        }
      }
      &:nth-child(2n) {
        >div {
          &:nth-child(1) {
            order: 2;
            padding-left: 70px;
          }
          &:nth-child(2) {
            order: 1;
          }
        }
      }
    }
    >div {
      >picture {
        width: 100%;
        display: block;
        border-radius: 10px;
        overflow: hidden;
        @media (max-width: 767px) {
          max-width: 700px;
        }
        img {
          width: 100%;
          object-fit: cover;
        }
      }
      >p {
        color: #222;
        font-size: 18px;
        letter-spacing: 0.04em;
        line-height: 1.8;
        font-weight: 500;
        margin-top: 40px;

        @media (max-width: 767px) {
          font-size: 14px;
          margin-top: 25px;
        }
      }
      >.c-button__wrapper {
        margin-top: 50px;
        @media (max-width: 767px) {
            margin-top:30px;
        }
        >.c-button {
          @media (max-width: 767px) {
            display: inline-block;
          }
          +.c-button {
            margin-top: 10px;
          }
        }
      }
    }
  }
}/*.p-top-sec-others*/

.p-top-sec-majorworks {
  .p-top-sec-majorworks-slider{
    position: relative;
    @media (max-width: 767px) {
      margin-top: 40px;
    }

    + .c-button__wrapper {
      margin-top: 25px !important;
    }

    .p-top-sec-mv-controller{
      @media (min-width: 768px) {
        top: clamp(370px,calc(35vw + 24px),490px);
      }
      @media (max-width: 767px) {
        /*position: absolute;
        right: 0;
        left: inherit;
        top: clamp(0vw,calc(67.5vw + 10px),530px);
        transform: translate(0);*/
        position: relative;
        margin-top: 20px;
      }
      right: 0;
      bottom: inherit;
      background: none;
      ul {
        >li {
          color: #aaaaaa;
          &:after {
            background-color: #861c3c;
          }
          &.is-current{
            color: #861c3c;
          }
          @media (min-width: 768px) {
            &:hover {
              color: #861c3c;
            }
          }
        }
      }
      button {
        border-color: #aaa;
        background-color: #861c3c;
        span {
          &::before ,&::after{
            background-color:#fff;
          }
        }
        &:hover {
          border-color: #861c3c;
          background-color: #fff;
          span {
            &::before ,&::after{
              background-color:#861c3c;
            }
          }
        }
      }
    }
    .slick-slide {
      a {
        picture {
          display: block;
          overflow: hidden;
          border-radius: 10px;

          img {
            width: 100%;
            -webkit-transition: -webkit-transform .2s ease;
            transition: -webkit-transform .2s ease;
            transition: transform .2s ease;
            transition: transform .2s ease, -webkit-transform .2s ease;
          }
        }
        @media (min-width: 768px) {
          &:hover {
            picture {
              img {
                transform: scale(1.1);
              }
            }
            .p-top-sec-majorworks-slider__ttl{
              color: #861c3c;
              span {
                &::before {
                  width: 100%;
                  border-color: #861c3c;
                }
              }
            }
          }
        }
      }
    }
    .p-top-sec-majorworks-slider__head {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: 20px;

      @media (max-width: 767px) {
        margin-top: 10px;
      }
    }
    .p-top-sec-majorworks-slider__headYear {
      font-weight: 500;
      color: #555555;
      font-size: 15px;

    }
    .p-top-sec-majorworks-slider__headPref {
      font-size: 11px;
      font-weight: 500;
      color: #861c3c;
      border: 1px solid #861c3c;
      padding: 5px 10px;
      line-height: 1;
      border-radius: 11px;
    }
    .p-top-sec-majorworks-slider__ttl{
      position: relative;
      font-weight: 700;
      color: #222;
      font-size: 18px;
      line-height: 1.3;
      margin-top: 10px;

      @media (max-width: 767px) {
        font-size: 16px;
      }
      span {
        position: relative;
        display: inline-block;
      &::before{
        content: "";
        position: absolute;
        border-bottom: solid 1px #861c3c;
        bottom: 0px;
        left: 0px;
        content: "";
        display: block;
        -webkit-transition: .5s;
        transition: .5s;
        width: 0%;
        height: 1px;
      }
    }
      &::after {
        content: "";
        width: 21px;
        height: 9px;
        display: inline-block;
        background-image: url(/cmn/img/icon_2024/icon_arrow_black.svg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100%;
        margin-left: 10px;
        transform: translateY(-2px);
      }
    }
  }
}/*.p-top-sec-majorworks*/

.p-top-sec-company {
  position: relative;
  border-radius: 10px;
  margin-top: 120px;
  background-color: #f1f1f1;
  padding: 80px 70px 70px;

  @media (max-width: 767px) {
    margin-top: 60px;
    padding: 40px 25px;
  }

  .p-top-sec-company__wrapper {
    margin-top: 45px;
    @media (min-width: 768px) {
      display: flex;
    }
    @media (max-width: 767px) {
      margin-top: 25px;
    }
    >div{
      .c-button__wrapper{
        margin-top: 35px;
        @media (max-width: 767px) {
          margin-top: 25px;
        }
      }
      @media (min-width: 768px) {
        width: 50%;
        &:first-child {
         padding-right: 20px;
        }
        &:last-child {
          padding-left: 40px;
          padding-right: 20px;
        }
     }
    }
  }
  h2,h3 {
    position: relative;
    z-index: 2;
  }
  .p-top-sec-company__headBg {
    position: absolute;
    width: 620px;
    top: 30px;
    right: 10px;

    @media (max-width: 767px) {
      width: 328px;
      left: 17px;
    }
  }
  .p-top-sec-company-main {
    display: block;

    @media (min-width: 768px) {
      &:hover {
        picture {
          img {
            transform: scale(1.1);
          }
        }
        .p-top-sec-company-main__text {
          color: #861c3c;
          span {
            &::before {
              width: 100%;
              border-color: #861c3c;
            }
          }
        }
      }
    }

    picture {
      display: block;
      border-radius: 10px;
      overflow: hidden;
      img {
        width: 100%;
        -webkit-transition: -webkit-transform .2s ease;
        transition: -webkit-transform .2s ease;
        transition: transform .2s ease;
        transition: transform .2s ease, -webkit-transform .2s ease;
      }
    }
    .p-top-sec-company-main__head {
      position: relative;
      font-size: 30px;
      font-weight: 700;
      letter-spacing: 0.04em;
      margin-top: 30px;
      color: #222;

      @media (max-width: 767px) {
        font-size: 20px;
      }
      >span {
        position: relative;
        z-index: 2;
      }
      &::before{
        position: absolute;
        content: "";
        width: 40px;
        height: 33px;
        display: block;
        background-image: url(/cmn/img/top2024/bg_company.svg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100%;
        z-index: 1;
        top: -10px;
        left: -10px;
        opacity: 1;
      }
    }
    .p-top-sec-company-main__text {
      font-size: 20px;
      margin-top: 20px;
      color: #222;
      font-weight: 700;

      @media (max-width: 767px) {
        font-size: 16px;
        margin-top: 10px;
      }
      span {
        position: relative;
        display: inline-block;
        &::before{
          content: "";
          position: absolute;
          border-bottom: solid 1px #861c3c;
          bottom: 0px;
          left: 0px;
          content: "";
          display: block;
          -webkit-transition: .5s;
          transition: .5s;
          width: 0%;
          height: 1px;
        }
      }
      &::after {
        content: "";
        width: 21px;
        height: 9px;
        display: inline-block;
        background-image: url(/cmn/img/icon_2024/icon_arrow.svg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100%;
        margin-left: 10px;
        transform: translateY(-2px);
      }
    }
  }
  .p-top-sec-company__list{
    @media (max-width: 767px) {
      margin-top: 40px;
    }
    >li {
      display: flex;
      align-items: center;
      padding: 20px 0;
      border-top: 1px solid #d4d4d4;
      gap: 30px;

      @media (max-width: 767px) {
        padding: 10px 0;
      }

      &:last-child {
        border-bottom: 1px solid #d4d4d4;
      }
      >picture {
        display: block;
        border-radius: 10px;
        overflow: hidden;
        width: 140px;
        @media (max-width: 767px) {
          width:100px;
        }
        img {
          width: 100%;
        }
      }

      >div {
        flex: 1;
      }
    }
    .p-top-sec-company__listHead {
      font-size: 20px;
      margin-top: 20px;
      color: #222;
      font-weight: 700;

      @media (max-width: 767px) {
        font-size: 16px;
      }
      span {
        position: relative;
        display: inline-block;
        &::before{
          content: "";
          position: absolute;
          border-bottom: solid 1px #861c3c;
          bottom: 0px;
          left: 0px;
          content: "";
          display: block;
          -webkit-transition: .5s;
          transition: .5s;
          width: 0%;
          height: 1px;
        }
      }
      &::after {
        content: "";
        width: 21px;
        height: 9px;
        display: inline-block;
        background-image: url(/cmn/img/icon_2024/icon_arrow_black.svg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100%;
        margin-left: 10px;
        transform: translateY(-2px);
      }
      @media (min-width: 768px) {
        &:hover {
          color: #861c3c;
          span {
            &::before {
              width: 100%;
             border-color: #861c3c;
            }
          }
        }
      }
    }
    .p-top-sec-company__listInner {
      margin-top: 15px;
      display:flex;
      flex-wrap: wrap;
      gap: 10px 25px;

      @media (max-width: 767px) {
        gap: 5px;
        margin-top: 10px;
      }
    }
    .p-top-sec-company__listChild {
      font-size: 16px;
      color: #222;
      font-weight: 500;

      @media (max-width: 767px) {
        font-size: 13px;
      }
      span {
        position: relative;
        display: inline-block;
        &::before{
          content: "";
          position: absolute;
          border-bottom: solid 1px #861c3c;
          bottom: 0px;
          left: 0px;
          content: "";
          display: block;
          -webkit-transition: .5s;
          transition: .5s;
          width: 0%;
          height: 1px;
        }
      }
      &::before {
        content: "";
        width: 6px;
        height: 10px;
        display: inline-block;
        background-image: url(/cmn/img/icon_2024/icon_link.svg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100%;
        margin-right: 10px;
        transform: translateY(-1px);
      }
      @media (min-width: 768px) {
        &:hover {
          color: #861c3c;
          span {
            &::before {
              width: 100%;
             border-color: #861c3c;
            }
          }
        }
      }
    }
  }  
}
.p-top-sec-solution {
  @media (max-width: 767px) {
    margin-top: 60px !important;
  }
  >div {
    .c-button__wrapper {
      margin-top: 30px !important;
    }
    picture {
      @media (max-width: 767px) {
        margin: 25px auto;
      }
    }
  }
}

.p-top-sec-sustainability{
  @media (max-width: 767px) {
    margin-top: 60px !important;
  }
  >div {
    .c-button__wrapper {
      margin-top: 20px !important;
    }
    picture {
      @media (max-width: 767px) {
        margin-top: 25px;
      }
    }
  }
}

.p-top-sec-bnr {
  padding: 90px 0;
  @media (max-width: 767px) {
    padding: 50px 0;
  }
  .p-top-sec-bnr__list{
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    @media (max-width: 767px) {
      gap: 10px;
    }
    >li {
      width: calc((100% - 90px) / 4);
      border: 1px solid #d6d6d6;
      @media (max-width: 767px) {
        width: calc((100% - 10px) / 2);
      }
      a{
        display: block;
        -webkit-transition: .1s linear;
        transition: .1s linear;

        &:hover {
           opacity: 0.6;
        }
        
        img {
          width: 100%;
        }
      }
    }
  }
}