@charset "UTF-8";

.common-title-box {

    .en-title {
        font-size: 4.6rem;

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

#container {
    margin-top: 25rem;


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

.mv-box {
    width: 154rem;
    margin: 0 auto;

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

    & h1 {
        position: absolute;
    bottom: 3.6rem;
    left: 6rem;
    font-size: 6.6rem;
    color: var(--primary-color);
    line-height: 1.5;
    font-family: "Zen Kaku Gothic New", sans-serif;

    @media screen and (max-width: 767px) {
      font-size: 2.8rem;
      line-height: 1.3;
      bottom: auto;
      left: 0;
      top: 3rem;
    }
    }

    & img {
        width: 100%;
    }
}

/* about */

.sec-about {

    .common-title-box {
        .title-bottom-box {
            display: flex;
            gap: 5rem;

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

    .content-box{

        .about-list{
            display: flex;
            gap: 2rem;

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

            & li {
              width: calc((100% - 4rem) / 3);

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

            }
        
            .about-item{
                display: flex;
                flex-direction: column;
                gap: 3rem;
                height: 100%;
                width: 100%;

                @media screen and (max-width: 767px) {
                  gap: 2rem;
                }
            
                .item-img-box{
                  flex: 0 0 22rem;
                  overflow: hidden;
                  /*overflow: hidden;
                  display: flex;
                  justify-content: center; */

                  & img {
                    height: 100%;
                    width: 100%;
                  }
                
                }
                .item-text-box{
                  margin-top: auto;
                
                    .title{
                        margin-bottom: 1.6rem;
                        font-size: 2.2rem;
                        font-weight: bold;
                        color: var(--primary-color);

                        @media screen and (max-width: 767px) {
                          font-size: 1.8rem;
                          margin-bottom: 1rem;
                        }
                    
                    }
                    .main-text{

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

/* 当協会への寄付をお考えの方へ */

.sec-donate{
    background-image: url(../../img/association/donate_bg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    margin-bottom: 9rem;
    
    @media screen and (max-width: 767px) {
      background-image: url(../../img/association/donate_bg_sp.jpg);
    }

    .inner {
        position: relative;
    padding: 4rem 0;
    padding-bottom: 14rem;

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

            @media screen and (max-width: 767px) {
              /* display: none; */
            }
        }
    
        &::before {
            background-image: url(../../img/association/donate_before.png);
            left: 0;
            width: 21.5rem;
            height: 18rem;

            @media screen and (max-width: 767px) {
              width: 11.2rem;
              height: 9.5rem;
              left: 7rem;
            }
        }
    
        &::after {
            background-image: url(../../img/association/donate_after.png);
            right: 0;
            width: 18rem;
            height: 23rem;

            @media screen and (max-width: 767px) {
              width: 9.4rem;
              height: 12rem;
              right: 7rem;
            }
        }

    }

    .content-box{
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        text-align: center;
    
        .title{
            font-size: 2.4rem;
            font-weight: bold;
            color: var(--primary-color);
            margin-bottom: 2.4rem;

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

            @media screen and (max-width: 767px) {
              font-size: 1.4rem;
              margin-bottom: 2rem;
              text-align: left;
            }
        }
        .button-box{
        
        }
    }
}

/* 採用情報 */

.sec-recruit{

    .content-box{
        background-color: var(--dark-orange-color);
        color: #fff;
        padding: 6rem;
        padding-right: 8rem;
        border-radius: 30px;
        display: flex;
        justify-content: space-between;
        margin-bottom: 6rem; 

        @media screen and (max-width: 767px) {
          margin-bottom: 4rem;
          padding: 5rem 3rem;
          border-radius: 20px;
          flex-direction: column;
          gap: 3rem;
          align-items: center;
        }
    
        .text-box{
            display: flex;
            flex-direction: column;
            gap: 3rem;

            @media screen and (max-width: 767px) {
              gap: 2rem;
              align-items: center;
            }
        
            .title-box{
                
                @media screen and (max-width: 767px) {
                  text-align: center;
                }
            
                .title-en{
                    font-size: 2.2rem;
                    text-transform: uppercase;
                    line-height: 1;
                    margin-bottom: 1.2rem;

                    @media screen and (max-width: 767px) {
                      font-size: 1.8rem;
                    }
                
                }
                .title-ja{
                    font-size: 4.6rem;
                    font-weight: bold;

                    @media screen and (max-width: 767px) {
                      font-size: 2.5rem;
                    }
                
                }
                .main-text{

                    @media screen and (max-width: 767px) {
                      font-size: 1.6rem;
                    }
                
                }
                .common-elip-button{
                
                }
            }
        }
        .img-box{
            width: 24rem;

            & img {
                width: 100%;
            }

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

    .buttons-box{
        display: flex;
        gap: 5rem;
        width: 86rem;
        max-width: 86rem;
        margin: 0 auto;

        @media screen and (max-width: 767px) {
          flex-direction: column;
          gap: 2rem;
          width: 100%;
          max-width: 100%;
        }
    
        .btn-blue{
            flex: 1;
            height: 9rem;
            padding: 3.5rem;
            padding-left: 4rem;
            border-radius: 60px;
            font-size: 1.6rem;

            @media screen and (max-width: 767px) {
              height: 7rem;
              border-radius: 40px;
              padding: 2rem;
              padding-left: 2.5rem;
              width: 100%;
            }
        }
    }
}

.sec-news {

  @media screen and (max-width: 767px) {
    .news-btn-box {
      margin-top: 5rem;
    }
  }
}