@charset "UTF-8";
/* =====================================
	about
===================================== */

.visual{
    margin-top: 80px;
    position: relative;
}

.visual h1{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.33vw;
    font-weight: bold;
    color: #fff;
    line-height: 1;
    text-align: center;
}

.visual h1 span{
    font-size: 6vw;
    margin-bottom: 0.5vw;
    display: block;
}

.visual img{
    width: 100%;
}

.about{
    width: 100%;
    background: #000;
    padding: 102px 40px 158px;
}

.about p{
    font-size: 2.0rem;
    font-weight: bold;
    line-height: 2.475;
    text-align: center;
    color: #fff;
}

.message{
    width: 100%;
    padding: 220px 40px 166px;
    position: relative;
}

.message .wrap{
    width: 100%;
    max-width: 1220px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
}

.message .wrap h2{
    color: #70ad47;
    font-size: 2.0rem;
    line-height: 1;
    font-weight: bold;
    width: 100%;
    margin-bottom: 80px;
}

.message .wrap h2 span{
    display: block;
    font-size: 9.0rem;
    margin-bottom: 10px;
}

.message .wrap .imgArea{
    width: 36.64%;
    border-radius: 20px;
    overflow: hidden;
}

.message .wrap .txtArea{
    width: 56.885246%;
    padding-right: 4.098%;
}

.message .wrap .txtArea p{
    font-size: 1.6rem;
    line-height: 2.0875;
    font-weight: 500;
}

.office{
    width: 100%;
    margin: 0 auto;
    padding: 96px 40px 110px;
    background: #f1f1f1;
}

.office .inner{
    width: 100%;
    max-width: 1220px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}

.office h2{
    color: #70ad47;
    font-size: 2.0rem;
    line-height: 1;
    font-weight: bold;
}

.office h2 span{
    display: block;
    font-size: 9.0rem;
    margin-bottom: 10px;
}

.office .inner dl{
    width: 61.64%;
    padding-right: 50px;
}

.office .inner dl div{
    width: 100%;
    display: flex;
    font-size: 2.0rem;
    font-weight: 500;
    line-height: 1.75;
    letter-spacing: 0.15em;
    padding: 0 0 34px;
    margin-bottom: 20px;
    border-bottom: 1px solid #70ad47;
}

.office .inner dl div:last-child{
    margin-bottom: 0;
}

.office .inner dl div dt{
    width: 26%;
}

.office .inner dl div dd{
    font-size: 1.8rem;
}

.pic img{
    margin: 30px auto 0;
}



@media screen and (max-width: 768px) {

.visual{
    margin-top: 15.625vw;
}

.visual h1{
    font-size: 3.3854167vw;
}

.visual h1 span{
    font-size: 16vw;
    margin-bottom: 1vw;
}

.about{
    padding: 20.833vw 5.20833vw 19.79167vw;
}

.about p{
    font-size: 3.125vw;
}

.message{
    padding: 13.28125vw 5.2vw 9.765625vw;
}

.message .wrap{
    flex-direction: column;
    align-items: flex-start;
}

.message .wrap h2{
    font-size: 3.2552vw;
    margin-bottom: 15.104167vw;
}

.message .wrap h2 span{
    font-size: 11.71875vw;
    margin-bottom: 2vw;
}

.message .wrap .imgArea{
    width: 58.203125vw;
    margin-bottom: 4.6875vw;
}

.message .wrap .txtArea{
    width: 100%;
    padding: 0;
}

.message .wrap .txtArea h3{
    font-size: 4.9479167vw;
    margin-bottom: 4.6875vw;
}

.message .wrap .txtArea p{
    font-size: 3.3854167vw;
}

.office{
    padding: 14.84375vw 5.2vw 15.8854167vw;
}

.office .inner {
    display: block;
}

.office h2{
    font-size: 3.2552vw;
    margin-bottom: 11.45833vw;
}

.office h2 span{
    font-size: 11.71875vw;
    margin-bottom: 2vw;
}


.office .inner dl{
    width: 100%;
    padding-right: 0;
}

.office .inner dl div{
    font-size: 3.515625vw;
    padding: 0 0 3.645833vw;
    margin-bottom: 3.90625vw;
}

.office .inner dl div dt{
    width: 24.08854vw;
}

.office .inner dl div dd{
    font-size: 2.6953125vw;
    letter-spacing: 0.05em;
    padding-top: 0.3em;
}

.pic img{
    margin: 9.765625vw auto 0;
}

}