@charset "UTF-8";

.page-mv {
    background-image: url(../../img/about/mv-img.png);
    min-height: 80rem;
    margin-top: 3rem;
    padding-top: 32rem;
    
    @media screen and (max-width: 767px) {
      min-height: 28rem;
      background-image: url(../../img/about/mv-img-sp.png);
      background-size: cover;
      background-position: center;
      margin-top: 6rem;
      padding-top: 0;
    }

    .mv-text-box {
      @media screen and (max-width: 767px) {
        transform: translateY(-1rem);
      }
    }
}

.top-desc {
    position: relative;
    padding: 16rem 0;
    padding-bottom: 18rem;
    z-index: 0;
    line-height: 2.5;
    font-size: 2rem;
    font-weight: bold;
    text-align: center;

    @media screen and (max-width: 767px) {
      text-align: left;
      font-size: 1.6rem;
      padding-top: 4rem;
      padding-bottom: 8rem;
      text-align: center;
    }
}

.sec-about {

    @media screen and (max-width: 767px) {
        /* background: linear-gradient(to bottom, #22234B, #646573); */
        /* color: #fff; */
        padding-bottom: 0;
        padding-top: 0;
        min-height: 55rem;
      
    }

    .common-page-title {
      @media screen and (max-width: 767px) {
                font-size: 2.4rem;
              }
    }
    
    
    .content-box {
        background: linear-gradient(to right, #22234B, #646573);
        padding: 28rem 0;
        height: 48rem;
        padding-bottom: 25rem;
        transform: translateX(12vw) rotate(-15deg);
        border-radius: 50%;
        width: 100vw;
        margin-top: -40rem;
        
        @media screen and (max-width: 767px) {
          width: 100%;
          margin-top: 0;
          height: 23rem;
            padding: 0;
            padding-top: 5rem;
            transform: translateX(-40vw) rotate(-10deg);
            width: 190vw;
            border-radius: 50%;
            margin-top: 1rem;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 0;
        }

        .main-text {
           font-family: "Zen Kaku Gothic New", sans-serif;
          display: inline-block;
            font-size: 3.4rem;
            font-weight: 500;
            line-height: 1;
            color: #fff;
            padding-bottom: 1.6rem;
            border-bottom: 1px solid currentColor;
            transform: rotate(15deg) translate(8rem, -8rem);

            @media screen and (max-width: 767px) {
              transform: rotate(10deg) translate(16rem, -2rem);
              font-size: 2.2rem;
            }
        }

    }
    

}

/* business */

.sec-business {
    background-color: #F3F3F3;
    padding-top: 40rem;
    margin-top: -30rem;

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

    .content-box{

        .main-content{
            display: flex;
            gap: 13rem;

            @media screen and (max-width: 767px) {
              flex-direction: column;
              gap: 3rem;
            }
        
            .common-page-title{
              letter-spacing: 4px;
              font-size: 2.4rem;

                & span {
                    font-size: 2rem;
                    display: inline-block;
                    margin-top: 2.8rem;
                    font-weight: 500 !important;

                    @media screen and (max-width: 767px) {
                      margin-top: 1.6rem;
                      font-size: 1.6rem;
                      line-height: 1.6;
                    }
                }
            
            }
            .content-list{
                flex: 1;
                display: flex;
                flex-direction: column;
                gap: 15rem;
                margin-bottom: 12rem;

                @media screen and (max-width: 767px) {
                  gap: 4rem;
                  margin-bottom: 6rem;
                }
            
                .content-item{
                    display: flex;
                    gap: 7.5rem;

                    @media screen and (max-width: 767px) {
                      flex-direction: column;
                      gap: 3rem;
                      margin-bottom: 0;
                    }
                
                    .text-box{
                        flex: 0 0 58rem;

                        @media screen and (max-width: 767px) {
                          flex: 0 0 auto;
                          width: 100%;
                          order: 1;
                        }
                    
                        .title-box{
                            display: flex;
                            justify-content: space-between;
                            align-items: flex-end;
                            margin-bottom: 3.6rem;

                            @media screen and (max-width: 767px) {
                              margin-bottom: 2.6rem;
                              justify-content: flex-start;
                              gap: 2rem;
                            }

                            .main-title{
                                font-size: 3.6rem;
                                font-weight: bold;
                                line-height: 1;
                                padding-bottom: 1.5rem;
                                border-bottom: 1px solid currentColor;
                                letter-spacing: 8px;

                                @media screen and (max-width: 767px) {
                                  font-size: 2rem;
                                  letter-spacing: 5px;
                                }
                            
                            }
                            .title-number{
                                font-family: "Oswald", sans-serif;
                                font-weight: 500;
                                font-size: 10rem;
                                 background: linear-gradient(to bottom, #22234B, #A6A6AE);
                                -webkit-background-clip: text;
                                -webkit-text-fill-color: transparent;

                                @media screen and (max-width: 767px) {
                                  font-size: 6rem;
                                  order: 0;
                                }
                            
                            }
                        
                        }
                        .main-text{
                            font-size: 1.6rem;
                            line-height: 1.8;

                            @media screen and (max-width: 767px) {
                              font-size: 1.6rem;
                            }
                        
                        }
                    }
                    .img-box{
                        padding-top: 3rem;

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

        .bottom-box{
            display: flex;
            justify-content: center;
            gap: 4rem;

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

}

.sec-company {
    padding-bottom: 0;

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

    .inner {
      display: flex;

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

    .content-box {
        padding-left: 13rem;

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

.sec-access {
  @media screen and (max-width: 767px) {
    padding-top: 0;
  }
   .inner {
      display: flex;

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

    .content-box {
        padding-left: 13rem;
        flex: 1;

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

        .map-list {
            display: flex;
            gap: 6rem;

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

            .map-item {
                flex: 1;
                .map-box {
                    /* height: 38rem; */
                    width: 100%;
                    margin-bottom: 3.5rem;
                    /* temp */
                    /* background-color: chocolate; */
                    color: #fff;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }

                .map-content {
                    font-size: 1.6rem;
                    font-weight: 500;
                    .title {
                        margin-bottom: 2.8rem;
                        font-size: 2rem;
                        font-weight: bold;

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

.common-page-title {
  @media screen and (max-width: 767px) {
    font-size: 2.4rem;
    letter-spacing: 4px;
  }
}