@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Shippori+Mincho&display=swap');

*, *::after, *::before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  text-decoration: none;
  border: none;
  scroll-behavior: smooth;
}

body{
    font-size: 18px;
    letter-spacing: 1px;
    color: #000000;
    font-family: "MFW-ShinGoPro-Regular";

    position: relative;
    line-height: 2;
}

a{
    cursor: pointer;
    color: #000000;
}

p{
  font-size: 18px;
  line-height: 36px;
}

img{
    width: 100%;
}


main{
    z-index: 0;
}

.main-visual{
    z-index: -1;
}

.sp-mv{
  display: none;
}

.main-visual > img{
    height: 556px;
    object-fit: cover;
}

.pop-links{
    margin: 0 auto;
    height: auto;
    position: relative;
}

.pop-links-wrapper{
    position: absolute;
    width: 90%;
    max-width: 900px;
    margin: 0 auto;
    left: 0;
    right: 0;
    bottom: -60px;

    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.pop-link > img{
    width: 100%;
    transition: all 0.3s ease;
    outline: 2px solid white;
    outline-offset: -2px;

    cursor: pointer;
}

.pop-link > img:hover{
    transform: scale(1.02);
}

.modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            backdrop-filter: blur(5px);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .modal-overlay.active {
            display: flex;
            opacity: 1;
        }

        /* Modal Content */
        .modal-content {
            width: 90%;
            max-width: 1280px;
            height: 90%;
            background: #fffffff2;
            backdrop-filter: blur(20px);
            border-radius: 10px;
            position: relative;
            overflow: hidden;
            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
            color: #333;
        }

        .modal-slides {
            width: 200%;
            height: 90%;
            margin-top: 3%;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            overflow-y: scroll;
        }

        .pop-up-link-one, .pop-up-link-two{
            /* display: flex;
            flex-direction: column; */

            display: flex;
            flex-direction: column;
            gap: 20px;
            justify-content: center;
            align-items: center;
        }

        .pop-up-title{
          width: 80%;
          margin: 0 auto;
          height: 60px;

          display: grid;
          grid-template-columns: 1fr 188px;
          justify-content: space-between;
          align-items: center;
          gap: 20px;
        }

        .pop-up-title img:nth-last-child(2){
          height: 60px;
          object-fit: contain;
        }

        .pop-up-link-one .pop-up-title img:nth-last-child(2){
          max-width: 655px;
          margin-right: auto;
        }

        .pop-up-link-two .pop-up-title img:nth-last-child(2){
          max-width: 715px;
          margin-right: auto;
        }

        .pop-up-title .pop-up-link > img{
          width: 188px;
          height: 60px;
          object-fit: contain;
          margin-left: auto;
        }

        .pop-up-two-img{
          width: 80%;
          object-fit: contain;
          margin: 0 auto;
        }


        /* Navigation Controls */
        .modal-nav {
            position: absolute;
            top: 50%;
            right: 2rem;
            transform: translateY(-50%);
            background: rgba(255, 255, 255, 0.9);
            border: none;
            border-radius: 50%;
            width: 60px;
            height: 60px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            color: #333;
            transition: all 0.3s ease;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }

        .modal-nav:hover {
            background: white;
            transform: translateY(-50%) scale(1.1);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
        }

        .modal-nav.prev {
            right: auto;
            left: 2rem;
        }

        .close-btn {
            position: absolute;
            top: 1rem;
            right: 1rem;
            border: none;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            cursor: pointer;
            font-size: 1.5rem;
            color: #333;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: transparent;
        }
        .close-btn > img{
          height: 30px;
          object-fit: contain;
        }

        .close-btn:hover {
            transform: rotate(90deg);
        }

    .production-wrapper{
      width: 100%;
      margin-top: -6%;

      background-image: url(/assets/images/top/works_bg.webp);
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
    }

    .thousand-production{
      width: 90%;
      max-width: 1000px;
      margin: 0 auto;
      padding-top: 6%;

      display: flex;
      gap: 32px;
      align-items: center;

      margin-top: 100px;
    }

    .ryumin-title{
      font-size: 32px;
      line-height: 52px;
      font-family: "MFW-RyuminPro-ExHeavy";
      font-weight: 600;
    }

    .thousand-production img{
      width: 150px;
      object-fit: contain;
    }


    .clients {
      width: 90%;
      max-width: 1000px;
      margin: 0 auto;
    }

    .clients-logo-container {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;
        align-items: center;
        list-style: none;
        margin: 1rem 0;
    }

    .client-logo {
      width: 136px;
      height: 60px;
      padding: 1rem;
      display: flex;
      justify-content: center;
      align-items: center;
      box-shadow: 0 0px 7px rgba(0, 0, 0, 0.08);
      background-color: #fff;
    }

    #client-sp-add{
      display: none;
    }

    .client-logo img {
      width: 90px;
      height: auto;
      object-fit: contain;
    }

    .clients-logo-container .client-logo:nth-last-child(1) img{
      width: 67px;
      height: auto;
    }

    .clients-logo-container .client-logo:nth-last-child(4) img,
    .clients-logo-container .client-logo:nth-last-child(20) img,
    .clients-logo-container .client-logo:nth-last-child(21) img,
    .clients-logo-container .client-logo:nth-last-child(22) img,
    .clients-logo-container .client-logo:nth-last-child(23) img,
    .clients-logo-container .client-logo:nth-last-child(27) img{
      width: 75px;
      height: auto;
    }

    .clients-logo-container .client-logo:nth-last-child(32) img{
      width: 50px;
      height: auto;
    }

    .clients-logo-container .client-logo:nth-last-child(34) img{
      width: 65px;
      height: auto;
    }

    .clients-logos > .clients-logo-container:nth-child(2) {
        display: none;
      }

    .new-banners{
      width: 90%;
      max-width: 1000px;
      margin: 60px auto;
    }

    .new-banners p{
      text-align: left;
      font-size: 28px;
      font-family: 'Times New Roman', Times, serif;
      font-weight: 500;
      color: #93bcff;
      margin-bottom: 20px;
    }

    .four-banners{
      /* display: flex;
      flex-wrap: wrap; */
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      justify-content: center;
      gap: 20px;
      list-style: none;
    }

    .four-banners li{
      transition: all 0.3s ease;
    }

    .four-banners li:hover{
      transform: scale(1.04);
    }

    .four-banners li a img{
      object-fit: contain;
      border-radius: 10px;
      box-shadow: 4px 4px 13.6px 0 rgba(0, 0, 0, 0.26);
    }

    .fifty-years{
        width: 100%;
    }

    .fifty-wrapper{
        display: flex;
        flex-direction: column;
    }

    .fifty-title{
        background-image: url(/assets/images/top/fifty_bg_left.webp);
        background-repeat: no-repeat;
        background-position: top left;
        background-size: 500px;
    }

    .fifty-title > img{
        height: 350px;
        margin: 0 auto;
        object-fit: contain;
    }

    .fifty-content{
        background-image: url(/assets/images/top/fifty_bg_right.webp);
        background-repeat: no-repeat;
        background-position: bottom right;
        background-size: 500px;
        margin-top: -3rem;
    }

    .fifty-content-wrapper{
        max-width: 1000px;
        margin: 0 auto;

        display: grid;
        grid-template-columns: 1fr 2fr;
        gap: 3rem;
        padding-bottom: 10%;
    }

    .fifty-imgs{
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }

    .fifty-site-link{
        width: 169px;
        padding: 1rem 2rem;
        border-radius: 50px;
        background-color: #333333;
        color: white;
        text-align: center;
        font-size: 16px;
    }

    .fifty-text-content{
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .fifty-text-content > p > span{
      font-family: "MFW-RyuminPro-ExHeavy";
      font-size: 24px;
      font-weight: 600;
    }

    .news{
        width: 100%;
        background-color: #eaeaea;
    }

    #news-item{
      cursor: pointer;
    }

    #hidden-para{
      position: relative;
    }

    #hidden-para > span > img{
      width: 25px; 
      height: 25px; 
      filter: brightness(0.4); 
      position: absolute; 
      top: 5px;
      right: -25px;
    }

    .news-wrapper{
      width: 90%;
        max-width: 1000px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
    }

    .news-para{
      display: none;
      width: 80%;
      margin-left: 168px;
    }

    .obi{
        height: 66px;
        display: flex;
        align-items: center;
    }

    .obi-purple{
        background: linear-gradient(to right, #333333 0%, #333333 68%, #96005F 100%);
    }

    .obi-text h2{
      width: 100%;
      font-family: "MFW-RyuminPro-ExHeavy";
      font-weight: 600;
      font-size: 24px;
      line-height: 1.3;
      padding-left: 30px;
      color: white;
  }

    .obi-text > p:nth-child(1){
      font-family: "MFW-RyuminPro-ExHeavy";
      font-weight: 500;
    }

    .news-list{
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        padding: 2rem 0;
    }

    .news-item{
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    .date{
        display: flex;
        align-items: center;
        gap: 10px;
        color: #333333;
        font-size: 18px;
        font-family: 'Times New Roman', Times, serif;
        font-weight: 600;
    }

    .date > p:nth-child(1) {
        font-size: 18px;
        font-weight: 500;
    }

    .new{
        padding: 0 10px;
        background-color: #c21815;
        color: white;
        text-transform: uppercase;
        font-size: 12px;
        line-height: 1.5;
    }

    .services-wrapper{
      width: 90%;
        max-width: 1000px;
        margin: 0 auto;
    }

    .service-grid{
        list-style: none;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;

        margin: 5% 0;
    }

    .service{
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        font-family: "MFW-ShinGoPro-DeBold", 'Noto Sans JP', sans-serif;
    }

    .service:hover{
      opacity: 0.75;
    }

    .media{
        width: 100%;
        background-image: url(/assets/images/top/media_bg.svg);
        background-repeat: no-repeat;
        background-position: bottom -40%;
        background-size: cover;
        padding-bottom: 5%;

        margin-top: 60px;
    }

    .media-title{
      width: 90%;
        max-width: 1000px;
        margin: 0 auto;
    }

    .media-title .sp-title{
      display: none;
    }

    .media-wrapper{
      width: 90%;
        max-width: 1000px;
        margin: 5% auto;

        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 3rem;
    }

    .media-list{
        list-style: none;
    }

    .media-item{
        display: grid;
        grid-template-columns: 50px 1fr;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .media-text{
        border-left: 1px solid #cec3b7;
        padding-left: 1rem;
        line-height: 2;
    }

    .bold-date{
      font-size: 18px;
      /* font-family: 'Times New Roman', Times, serif; */
      font-weight: 600;
    }

    .media-text > p:nth-last-child(1){
      padding-bottom: 1rem;
    }

    .chameleon{
        position: sticky;
        bottom: 0;
        right: 0;
        z-index: 1;
    }

    .chameleon-gif{
        position: absolute;
        bottom: -15px;
        right: 0;
        display: flex;
    }

    .chameleon-gif > img{
        max-width: 330px;
        margin-left: auto;
        object-fit: contain;
    }

    @media(min-width: 769px) and (max-width: 1100px){
          /* .modal-content{
            height: 75%;
          } */

          .fifty-content-wrapper{
            width: 90%;
            margin: 0 auto;
          }
    }  

    @media (min-width: 769px) and (max-width: 900px){
      .four-banners{
            grid-template-columns: repeat(2, 1fr);
          }

      .main-sp-footer{
        margin-top: 0;
      }
    }

    @media (max-width: 768px) {
      body{
        min-width: 0;
      }

      .pc-mv{
        display: none;
      }

      .sp-mv{
        display: block;
      }

       .main-visual > img{
          height: auto;
          margin-top: 72px;
          object-fit: contain;
       }

      .pop-links{
        display: none;
      }

      .banner-container {
                flex-direction: column;
                width: 90%;
            }

            .hero h2 {
                font-size: 2.5rem;
            }

            .modal-content {
                width: 95%;
                height: 90%;
            }

            .modal-slide {
                padding: 2rem;
            }

            .modal-slide h2 {
                font-size: 2rem;
            }

      .modal-overlay, .modal-content, .modal-overlay.active{
        display: none;
      }

      .pc-title{
        display: none;
      }

      .media-title .sp-title{
        display: block;
      }

      .thousand-production{
        margin-top: 32px;
      }

      .ryumin-title{
        font-size: 24px;
        line-height: 41px;
      }

      .clients{
        overflow: hidden;
      }

      #client-sp-add{
        display: block;
        display: flex;
      }

      .clients-logos{
        display: flex;
        gap: 8px;
      }

      .clients-logo-container .client-logo:nth-last-child(1) img,
      .clients-logo-container .client-logo:nth-last-child(11) img,
      .clients-logo-container .client-logo:nth-last-child(10) img,
      .clients-logo-container .client-logo:nth-last-child(10) img {
        width: auto;
        height: 34px;
      }
      .clients-logo-container .client-logo:nth-last-child(2) img {
        width: auto;
        height: 53px;
      }
      .clients-logo-container .client-logo:nth-last-child(3) img {
        width: auto;
        height: 47px;
      }
      .clients-logo-container .client-logo:nth-last-child(4) img,
      .clients-logo-container .client-logo:nth-last-child(36) img {
        width: auto;
        height: 20px;
      }
      .clients-logo-container .client-logo:nth-last-child(5) img,
      .clients-logo-container .client-logo:nth-last-child(7) img,
      .clients-logo-container .client-logo:nth-last-child(8) img,
      .clients-logo-container .client-logo:nth-last-child(9) img,
      .clients-logo-container .client-logo:nth-last-child(10) img,
      .clients-logo-container .client-logo:nth-last-child(13) img,
      .clients-logo-container .client-logo:nth-last-child(15) img,
      .clients-logo-container .client-logo:nth-last-child(16) img,
      .clients-logo-container .client-logo:nth-last-child(26) img,
      .clients-logo-container .client-logo:nth-last-child(29) img{
        width: auto;
        height: 50px;
      }
      .clients-logo-container .client-logo:nth-last-child(6) img {
        width: auto;
        height: 33px;
      }
      .clients-logo-container .client-logo:nth-last-child(12) img {
        width: auto;
        height: 43px;
      }
      .clients-logo-container .client-logo:nth-last-child(14) img {
        width: auto;
        height: 40px;
      }
      .clients-logo-container .client-logo:nth-last-child(17) img {
        width: auto;
        height: 25px;
      }
      .clients-logo-container .client-logo:nth-last-child(18) img,
      .clients-logo-container .client-logo:nth-last-child(19) img,
      .clients-logo-container .client-logo:nth-last-child(23) img,
      .clients-logo-container .client-logo:nth-last-child(27) img,
      .clients-logo-container .client-logo:nth-last-child(33) img {
        width: auto;
        height: 22px;
      }
      .clients-logo-container .client-logo:nth-last-child(20) img {
        width: auto;
        height: 26px;
      }
      .clients-logo-container .client-logo:nth-last-child(21) img {
        width: auto;
        height: 27px;
      }
      .clients-logo-container .client-logo:nth-last-child(22) img {
        width: auto;
        height: 19px;
      }
      .clients-logo-container .client-logo:nth-last-child(24) img {
        width: auto;
        height: 18px;
      }
      .clients-logo-container .client-logo:nth-last-child(25) img {
        width: auto;
        height: 26px;
      }
      .clients-logo-container .client-logo:nth-last-child(28) img {
        width: auto;
        height: 45px;
      }
      .clients-logo-container .client-logo:nth-last-child(30) img,
      .clients-logo-container .client-logo:nth-last-child(31) img,
      .clients-logo-container .client-logo:nth-last-child(32) img {
        width: auto;
        height: 30px;
      }
      .clients-logo-container .client-logo:nth-last-child(34) img {
        width: 80px;
        height: auto;
      }
      .clients-logo-container .client-logo:nth-last-child(35) img {
        width: auto;
        height: 40px;
      }

      .clients-logos > .clients-logo-container:nth-child(2) {
        display: block;
        display: grid;
      }

      .clients-logo-container{
        display: grid;
        grid-template-columns: repeat(12, 136px);
        grid-template-rows: repeat(3, auto);
        animation: 40s slide infinite linear;
      }

      @keyframes slide {
          from{
              transform: translateX(0);
          }
          to{
              transform: translateX(-100%);
          }
      }

      .four-banners{
        grid-template-columns: 1fr;
      }

      .four-banners li{
        width: 100%;
      }

      .thousand-production img{
        display: none;
      }

      .fifty-years{
        width: 100%;
      }

      .fifty-title > img{
        height: 260px;
      }

      .fifty-title, .fifty-content{
        background-size: 269px;
      }

      .fifty-wrapper{
        gap: 0;
      }

      .fifty-content-wrapper{
        width: 90%;
        margin: 0 auto;
      }

      .fifty-content-wrapper{
        grid-template-columns: 1fr;
      }

      .obi{
        padding: 0 1rem;
      }

      .obi-text{
        font-size: 17px;
      }

      .obi-text h2{
        padding-left: 0;
      }


      .news-wrapper{
        width: 100%;
      }

      .news-para{
        width: 100%;
        margin-left: 0;
      }

      .news-list{
        width: 90%;
        margin: 0 auto;
      }

      .news-item{
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
      }

      #hidden-para > span > img{
        display: none;
      }

      .media{
        margin-top: 60px;
        background-image: url(/assets/images/top/media_bg_sp.svg);
      }

      .media-wrapper{
        grid-template-columns: 1fr;

        height: 500px;
        overflow-y: scroll;
        margin: 5rem auto;
      }

      .date{
        margin-top: 4px;
      }

      .border-msg > p{
            width: 100%;
            line-height: 2;
        }

        .chameleon{
          display: none;
        }

        .main-sp-footer{
          margin-top: 0;
        }

    }

    @media (min-width: 500px) and (max-width: 768px){
      .four-banners{
        grid-template-columns: 1fr 1fr;
      }
    }  