@charset "UTF-8";

body {
    @media screen and (max-width: 1081px) {
        &::after {
            top: -16rem;
        }
      
    }
}

#header {
    background: transparent;
    box-shadow: none;
}

.top-mv-box {
    transform: translateY(12rem);
    position: relative;

     @media screen and (max-width: 1081px) {
      margin-top: 15rem;
    }

    .top-mv-slider {
        padding-left: 41vw;
    }

    @media screen and (max-width: 767px) {
      transform: translateY(6rem);
      margin-top: 1rem;
      padding-left: 32vw;
      height: 36.4rem;
      position: relative;

      .top-mv-slider {
        height: 100%;
        padding-left: 0;
      }

      & img {
        height: 100%;
        object-fit: cover;
        border-top-left-radius: 1rem;
        border-bottom-left-radius: 1rem;
      }
    }

    .mv-main-text {
        position: absolute;
        z-index: 1;
        height: 100%;
        overflow: hidden;
        top: 22rem;
        left: 14vw;

        @media screen and (max-width: 1001px) {
            /* top: 0;
            width: 18vw; */
          
        }

        @media screen and (max-width: 767px) {
         top: 50%;
            left: 3rem;
            transform: translateY(-30%);

          & img {
           width: 6rem;
           height: 23rem;
           object-fit: contain;
          }
        }
    }

    .mv-sp-sub-text {
        @media screen and (max-width: 767px) {
              position: absolute;
                left: 3rem;
                margin-top: 3rem;
                font-size: 2.2rem;
                font-weight: 600;
                line-height: 1.5;
                 font-family: 'Noto Serif JP', serif;
        }
    }
    
    .mv-inifi-text {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        overflow: hidden;
        z-index: 1;

        @media screen and (max-width: 767px) {
          bottom: -50%;
        }
        }

        .mv-inifi-track {
            display: flex;
            gap: 3rem;
            width: max-content;
            animation: mvScroll 20s linear infinite;
            /* height: 10rem; */

            @media screen and (max-width: 767px) {
              /* height: 5rem; */
            }
        }

        .mv-inifi-track p {
            display: block;
            height: auto;
            font-size: 12rem;
            color: #7A5B3A;
            font-family: "Oswald", sans-serif;
            text-transform: uppercase;
            font-weight: 500;

            @media screen and (max-width: 767px) {
              font-size: 6rem;
            }
        }


}
/* animation từ phải sang trái */
@keyframes mvScroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.top-desc-box {
    background: linear-gradient(to right, #22234B, #646573);
   padding: 16rem 0;
    padding-top: 23rem;
    margin-top: 4rem;
    margin-bottom: 15rem;
    clip-path: ellipse(50% 50% at 50% 50%);
    width: 120vw;
    transform: rotate(-15deg) translateX(-10%);
    z-index: -1;
    position: relative;

    @media screen and (max-width: 1081px) {
        clip-path: none;
        width: 100%;
        margin-top: 20rem;
      
    }

    
    @media screen and (max-width: 767px) {
      background: none;
      background-image: url(../img/top/page-bg-sp.png);
      background-size: 100% 102rem;
      background-repeat: no-repeat;
      transform: rotate(0) translateX(0);
      margin-bottom: 0;
      padding-bottom: 0;
      padding-top: 18rem;
    }

    .inner {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 20rem;
        transform: rotate(15deg);

         @media screen and (max-width: 1081px) {
            gap: 10rem;
            transform: rotate(0);
            max-width: 90vw;
            overflow: hidden;
        
      
    }

        @media screen and (max-width: 767px) {
          flex-direction: column;
          gap: 5rem;
          margin: 0 auto;
          max-width: 90%;
          width: 90%;
          margin-top: -9rem;
        }

        & img:first-child {
            transform: translateY(15rem);
            width: 38rem;

            @media screen and (max-width: 1081px) {
              transform: translateY(0);
            }

            @media screen and (max-width: 767px) {
              width: 335px;
            }
        }

        & img:nth-child(2) {
            width: 446px;
            transform: translateY(-5rem);

            @media screen and (max-width: 767px) {
              transform: translateY(0);
              width: 87%;
            }
        }
        
        & img:last-child {
            transform: translateY(-18rem);
            width: 35rem;

            @media screen and (max-width: 767px) {
              transform: translateY(0);
              width: 295px;
            }
        }
    }

}


.sec-message, .sec-about {
    .inner {
        display: flex;

        @media screen and (max-width: 1081px) {
          gap: 8rem;
        }

        @media screen and (max-width: 767px) {
          flex-direction: column;
          gap: 0
        }
    }

    .v-title-box {
        & span {
            padding: 2.6rem 3.3rem;

            &::before {
                left: -1rem;
            }

            &::after {
                right: -1rem;
            }
        }
    }
    .content-box{
       

        @media screen and (max-width: 767px) {
          gap: 4rem;
          margin-right: 0;
        }

        .img-box{
            position: relative;

            &::before, &::after {
                content: '';
                position: absolute;
                background-repeat: no-repeat;
                background-size: contain;
            }

        }
        .text-box{
            max-width: 56rem;
            padding-top: 6rem;

            @media screen and (max-width: 767px) {
              max-width: 100%;
              padding-top: 0;
            }
        
            .title{
                font-size: 3.6rem;
                font-weight: bold;
                margin-bottom: 4rem;
                line-height: 1.5;
                  font-family: "Zen Kaku Gothic New", sans-serif;

                @media screen and (max-width: 767px) {
                  font-size: 2.4rem;
                  margin-bottom: 3rem;
                }
            
            }
            .main-text{
                font-size: 1.8rem;
                font-weight: 500;
                line-height: 2;
                margin-bottom: 4rem;

                @media screen and (max-width: 767px) {
                  font-size: 1.6rem;
                  margin-bottom: 4rem;
                  line-height: 1.8;
                }
            
            }
            .common-btn-type02 {
                @media screen and (max-width: 767px) {
                  font-size: 1.6rem;
                }
            }
        }
}

@media screen and (max-width: 767px) {
  .v-title-box {
    order: 0;
    margin-bottom: 2rem;
    font-size: 3rem;
            text-align: center;
            line-height: 1.5;
            letter-spacing: 8px;
            padding-left: 2rem;

            & span {
                display: inline-block;
                font-size: 3.8rem;
                padding: 1.5rem;
                padding-left: 2.5rem;
                margin-right: 8px;
                margin-bottom: 1.5rem;

                &::before, &::after {
                    width: 4.7rem;
                    height: 4.7rem;
                }
            }

        @media screen and (max-width: 767px) {
          margin-bottom: 4rem;
        }    
  }
  .content-box {
    order: 1;
  }
}


}

.sec-message {
    padding-bottom: 8rem;
    @media screen and (max-width: 767px) {
      padding-top: 5.5rem;
    }

    .v-title-box span {
        font-size: 6.6rem;

        @media screen and (max-width: 767px) {
          font-size: 3.8rem;
        }

        &::before {
            top: -2rem;
        }

        &::after {
            bottom: -1rem;
        }
    }

    .inner {
        justify-content: flex-end;
    padding-right: 6rem;

    @media screen and (max-width: 767px) {
      padding-right: 0;
    }
    }
    .content-box {
         display: flex;
         align-items: center;
        gap: 15rem;
        margin-right: 3rem;

        @media screen and (max-width: 767px) {
          flex-direction: column;
          margin-right: 0;
          gap: 8rem;
        }

        .text-box {
            padding-top: 0rem;
            margin-top: -5rem;
        }

        .img-box {
            @media screen and (max-width: 767px) {
              width: 315px;
            }
            &::before {
               top: 2rem;
                left: -20%;
                width: 33rem;
                height: 15rem;
                background-image: url(../img/top/msg-shape01.png);

                @media screen and (max-width: 767px) {
                  width: 20rem;
                  height: 8rem;
                  top: 2rem;
                    left: -7rem;
                    z-index: -1;
                }
            }

            &::after {
                right: -40%;
                bottom: -25%;
                width: 55rem;
                height: 22rem;
                background-image: url(../img/top/msg-shape02.png);
                z-index: -1;

                @media screen and (max-width: 767px) {
                  width: 20rem;
                  height: 8rem;
                  right: -20%;
                bottom: -3rem;
                }
            }
        }
    }

}

.sec-about {
    padding-bottom: 10rem;
    padding-top: 0;

    @media screen and (max-width: 767px) {
        padding-top: 0;
        padding-bottom: 10rem;
      
    }

     .v-title-box {
        padding-left: 0 !important;
        margin-left: 5rem;

        @media screen and (max-width: 767px) {
          margin-left: 0;
        }

        & span {
            font-size: 5.6rem !important;
            margin: 6rem 0;
            
            @media screen and (max-width: 767px) {
                font-size: 3.3rem !important;
                padding: 2rem;
                padding-left: 2.5rem;
                padding-right: 2.2rem;
                margin: 0;
                }

                &::before, &::after {
                    width: 8rem;
                    height: 8rem;
        
                    @media screen and (max-width: 767px) {
                      width: 4.7rem;
                      height: 4.7rem;
                    }
                }
        
                &::before {
                    left: -2rem;
                    top: -3rem;
                }
                &::after {
                    right: -2rem;
                    bottom: -3.5rem;
                }
        }

    }

     .content-box{
        display: flex;
        gap: 15rem;
        margin-left: auto;
        align-items: center;

        @media screen and (max-width: 767px) {
          flex-direction: column;
          gap: 4rem;
        }

        .img-box{
            padding-top: 7rem;
            
            @media screen and (max-width: 767px) {
                padding-top: 0;
                height: auto;
            }
            
            & img {
                height: 70rem;
                z-index: 10;
                position: relative;

                @media screen and (max-width: 767px) {
                  height: auto;
                }
            }

            &::before {
              top: 10rem;
                right: -58%;
                width: 360px;
                height: 136px;
                background-image: url(../img/top/about-shape01.png);
                
                @media screen and (max-width: 767px) {
                    width: 190px;
                    top: 1rem;
                    right: -12rem;
                }
            }
            
            &::after {
                left: -29%;
                bottom: -10%;
                width: 440px;
                height: 163px;
                background-image: url(../img/top/about-shape02.png);

                @media screen and (max-width: 767px) {
                  width: 230px;
                }
            }

            @media screen and (max-width: 767px) {
              & img {
                width: 270px;
              }
            }
        
        }

        .text-box {
            padding-right: 10rem;
            padding-top: 24rem;

            @media screen and (max-width: 767px) {
              padding-right: 0;
              padding-top: 0;
            }
        }
    }

   
}


/* Interview */

.sec-interview{
    background: linear-gradient(to right, #22234B, #646573);
    clip-path: ellipse(80% 35% at 40% 40%);
    width: 120vw;
    color: #fff;
    position: relative;
    margin-bottom: 5rem;
    padding: 30rem 0;
    padding-bottom: 60rem;
    padding-top: 20rem;
    
    @media screen and (max-width: 767px) {
        background: linear-gradient(to bottom, #22234B, #646573);
        clip-path: none;
        width: 100%;
        padding-bottom: 15rem;
        padding-top: 10rem;
        margin-bottom: 6rem;

      
    }

    .inner {
        margin-left: 23rem;

        @media screen and (max-width: 767px) {
          margin-left: 0;
          margin: 0 auto;
        }
    }
    
    &::before, &::after {
        content: '';
        position: absolute;
        background: linear-gradient(to right, #22234B, #646573);
        border-radius: 50%;
        width: 120%;
        height: 30rem;
        left: -10%;
        display: none;

        @media screen and (max-width: 767px) {
          display: none;
        }
    }

    &::before {
        top: 0;
        transform: translateY(-30%);
    }

    &::after {
        bottom: 0;
        transform: translateY(30%);
    }


    .inner{
    
        .common-title-box{
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 3rem;
            margin-bottom: 7rem;
            color: #fff;
              font-family: "Zen Kaku Gothic New", sans-serif;

              @media screen and (max-width: 767px) {
                gap: 0;
              }
            
            .ja-title{
                font-size: 5rem;
                font-weight: bold;
                letter-spacing: 3px;

                & span {
                    position: relative;
                    display: inline-block;
                    margin-left: 4rem;
                    font-size: 6.6rem;
                    padding: 2rem 0;

                    @media screen and (max-width: 767px) {
                      font-size: 3.4rem;
                      margin-left: 2rem;
                    }

                            &::before, &::after {
                            position: absolute;
                            content: '';
                            width: 8rem;
                            height: 8rem;
                            background-repeat: no-repeat;
                            background-size: contain;

                            @media screen and (max-width: 767px) {
                              width: 4rem;
                              height: 4rem;
                            }
            }

                &::before {
            background-image: url(../common/img/open-kakko-white.svg);
            top: -1rem;
            left: -60%;

            @media screen and (max-width: 767px) {
             top: 0rem;
                            left: -2rem;
            }
        }

                &::after {
            background-image: url(../common/img/close-kakko-white.svg);
            bottom: 0;
            right: -60%;

            @media screen and (max-width: 767px) {
                                      bottom: 0;
                            right: -2rem;
                        
            }
        }
                }

                @media screen and (max-width: 767px) {
                  font-size: 2.5rem;
                }
            
            }
            .en-title{
                text-transform: uppercase;
                font-family: "Oswald", sans-serif;
                font-size: 2.2rem;
                font-weight: 400;
                color: #C2B785;

                @media screen and (max-width: 767px) {
                  font-size: 1.6rem;
                }
            
            }
        }
        .content-box{
        
            .int-list{
                display: flex;
                gap: 4.5rem;
                transform: translateX(-5.5%);

                @media screen and (max-width: 767px) {
                  flex-direction: column;
                  gap: 6rem;
                }
            
                .int-item{
                    flex: 0 0 25%;
                    overflow: hidden;

                    @media screen and (max-width: 767px) {
                      flex: 0 0 100%;
                    }
                    
                    .int-link{
                        color: #fff;
                        display: flex;
                        flex-direction: column;
                        gap: 3.2rem;
                    
                        .int-img-box{
                            position: relative;
                            display: inline-block;
                        
                            .pos{
                                position: absolute;
                                top: 0;
                                right: 0;
                                /* width: 10rem; */
                                height: 5rem;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                background-color: var(--primary-color);
                                font-size: 1.8rem;
                                font-weight: 500;
                                padding: 0 1rem;
                            
                            }
                        }
                        .int-detail{
                            display: flex;
                            flex-direction: column;
                            gap: 2.6rem;

                            @media screen and (max-width: 767px) {
                              gap: 2rem;
                            }
                        
                            .int-title{
                                font-size: 2.4rem;
                                font-weight: bold;
                                line-height: 1.5;
                                overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;

                                @media screen and (max-width: 767px) {
                                  font-size: 2rem;
                                  line-height: 1.7;
                                }
                            
                            }
                            .int-main{
                            
                                .int-year{
                                    font-size: 1.4rem;
                                    margin-right: 1.6rem;
                                
                                }
                                .int-name{
                                    font-size: 2.3rem;
                                    font-weight: 500;
                                    text-transform: uppercase;

                                    @media screen and (max-width: 767px) {
                                      font-size: 1.8rem;
                                    }
                                
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

.desc-box {
    padding: 10rem 0;
    margin-top: -40rem;

    @media screen and (max-width: 767px) {
      margin-top: 0;
      padding-top: 0;
      padding-bottom: 6rem;
    }
    
    .inner {
        display: flex;
        gap: 8rem;

        @media screen and (max-width: 767px) {
          flex-direction: column;
          gap: 4rem;
        }

        .desc-col:first-child {
            .img-box {
                @media screen and (max-width: 767px) {
                  width: 234px;
                }
            }

            .text-box {
                .common-v-btn {
                    @media screen and (max-width: 767px) {
                      margin-left: 15px;
                    }
                }
            }
        }

    }
    .desc-col {
        display: flex;
        gap: 3.7rem;

        .img-box{
            .desc-text {
                @media screen and (max-width: 767px) {
                    font-size: 1.8rem;
                    font-weight: bold;
                    margin-top: 2rem;
                    font-family: "Zen Kaku Gothic New", sans-serif;
                  
                }

            }
    
        }
        .text-box{
            display: flex;
            gap: 1.6rem;
        
            .desc-text{
                writing-mode: vertical-rl;
                font-size: 1.6rem;
                font-weight: bold;

                @media screen and (max-width: 767px) {
                  font-size: 1.4rem;
                  display: none;
                }
            
            }

            .common-v-btn {
                .btn-text {
                    @media screen and (max-width: 767px) {
                      font-size: 2.8rem;
                      letter-spacing: 3px;
                      display: flex;
                      flex-direction: column;
                      gap: 8px;

                    }
                }
            }
        }
    }
}

.sec-sns {
    padding-top: 0;
    .sns-title {
        font-size: 4.4rem;
        font-weight: bold;
        margin-bottom: 11rem;
        color: var(--primary-color);
        text-align: center;
        text-transform: uppercase;
         font-family: "Oswald", sans-serif;

         @media screen and (max-width: 767px) {
           margin-bottom: 6rem;
         }
    }

    .content-box {
        display: flex;
        justify-content: center;
        justify-content: space-between;

        @media screen and (max-width: 767px) {
          flex-direction: column;
          gap: 8rem;
        }

        .sns-col {
            display: flex;
            gap: 2.3rem;
            flex: 0 0 45%;

            @media screen and (max-width: 767px) {
              flex-direction: column;
              flex: 0 0 100%;
            }

            .sns-content {
                flex: 1;

                @media screen and (max-width: 767px) {
                  order: 1;
                }

                & iframe {
                    width: 100%;
                }

                .sby_items_wrap {
                    @media screen and (max-width: 767px) {
                      flex-direction: column;
                    }
                }
            }

            .title {
                writing-mode: vertical-rl;
                font-size: 2.8rem;
                font-weight: bold;

                @media screen and (max-width: 767px) {
                  writing-mode: horizontal-tb;
                  order: 0;
                  font-size: 2rem;
                }
            }

        }

    }
}

.v-title-box span {
		margin: 3rem 0;

        @media screen and (max-width: 767px) {
          margin: 0;
        }

}

/* Interview Slider Styles for Mobile */
.sec-interview {
    @media screen and (max-width: 767px) {
      background: none;
      background-image: url(../img/top/interview-sp-bg.png);
      background-size: cover;
    }
    .staff-slider {
        /* Hide content của các slides không active */
        .swiper-slide {
            .int-detail {
                opacity: 0;
                visibility: hidden;
                transition: opacity 0.3s ease, visibility 0.3s ease;
            }
        }
        
        .swiper-slide-active {
            .int-detail {
                opacity: 1;
                visibility: visible;
            }
        }

        .swiper-pagination {
            top: 100%;
            margin-top: 6rem;
            .swiper-pagination-bullet {
                background: #fff;
                opacity: 1;
            }
            .swiper-pagination-bullet-active {
                background: #7A5B3A;
            }
        }

        .swiper-button-next, .swiper-button-prev {
            color: var(--primary-color);
            width: 8rem;
            height: 8rem;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.5);
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            margin-top: -5rem;
            box-shadow: 0 1px 20px rgba(0, 0, 0, .2);
            z-index: 10;

            @media screen and (max-width: 767px) {
              width: 5rem;
              height: 5rem;
            }

            &::after {
                font-size: 3rem;

                @media screen and (max-width: 767px) {
                  font-size: 1.6rem;
                }
            }
        }

        .swiper-button-prev {
            margin-left: -5rem;

            @media screen and (max-width: 767px) {
              margin-left: -2rem;
            }
        }
        
        .swiper-button-next {
            margin-right: -5rem;

            @media screen and (max-width: 767px) {
              margin-right: -2rem;
            }
        }

        /* Styles cho content của slider */
        .int-item {
            .int-link {
                color: #fff;
                display: flex;
                flex-direction: column;
                gap: 3.2rem;
            
                .int-img-box {
                    position: relative;
                    display: inline-block;
                    
                    img {
                        width: 100%;
                        height: auto;
                        object-fit: cover;
                    }

                    .pos {
                        position: absolute;
                        top: 0;
                        right: 0;
                        height: 5rem;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        background-color: var(--primary-color);
                        color: #fff;
                        font-size: 1.8rem;
                        font-weight: 500;
                        padding: 0 1rem;
                    }
                }
                
                .int-detail {
                    display: flex;
                    flex-direction: column;
                    gap: 2.6rem;

                    @media screen and (max-width: 767px) {
                        gap: 2rem;
                    }

                    .int-title {
                        font-size: 2.4rem;
                        font-weight: bold;
                        line-height: 1.5;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;

                        @media screen and (max-width: 767px) {
                            font-size: 2rem;
                            line-height: 1.7;
                        }
                    }

                    .int-main {
                        .int-year {
                            font-size: 1.4rem;
                            margin-right: 1.6rem;
                        }

                        .int-name {
                            font-size: 2.3rem;
                            font-weight: 500;
                            text-transform: uppercase;

                            @media screen and (max-width: 767px) {
                                font-size: 1.8rem;
                            }
                        }
                    }
                }
            }
        }
    }
}

.sb_youtube .sby_thumbnail_hover_inner .sby_video_title {
    font-size: 1.2rem;
}

.sby_video_thumbnail {
    height: 20rem !important;
}

#sby_lightbox .sby_thumbnail_hover_inner, [id^=sb_youtube_].sb_youtube .sby_thumbnail_hover_inner {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

[id^=sb_youtube_].sb_youtube .sby_items_wrap {
    padding: 0 !important;
    display: flex !important;
    gap: 1rem;
}

.sb_youtube .sby_items_wrap {
    justify-content: center;
}