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

header nav ul li a{
    color: #000;
}

.visual{
    width: 100%;
    height: 42.1875vw;
    background: url("../img/about/visual01.jpg") center no-repeat;
    background-size: cover;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0 0 6.533vw 9.33vw;
}

.visual h1{
    font-size: 13.0rem;
    color: #fff;
    line-height: 1;
}

.visual h1 small{
    font-size: 2.0rem;
    display: block;
    margin-top: -4px;
}

.lead{
    width: 100%;
    background: #96aac3 url("../img/common/bg01.png") bottom right no-repeat;
    padding: 6px 40px 50px;
}

.lead dl{
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
}

.lead dl div{
    padding: 66px 40px 32px;
    border-bottom: 1px solid #c1cddb;
}

.lead dl div:last-child{
    border-bottom: none;
}

.lead dl div dt{
    font-size: 7.0rem;
    line-height: 1;
    color: #fff;
    text-align: center;
    margin-bottom: 16px;
}

.lead dl div dd{
    font-size: 2.6rem;
    font-weight: 500;
    line-height: 2.3076923;
    color: #fff;
    text-align: center;
}

.message{
    width: 100%;
    padding: 118px 40px 208px;
}

.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{
    width: 100%;
    font-size: 9.0rem;
    line-height: 1;
    color: #08476e;
    margin-bottom: 78px;
}

.message .wrap h2 small{
    font-size: 2.0rem;
    font-weight: 600;
    line-height: 1;
    display: block;
    margin-top: 1px;
}

.message .wrap .imgArea{
    width: 36.7213%;
}

.message .wrap .txtArea{
    width: 56.885%;
    padding-right: 50px;
    font-size: 1.8rem;
    line-height: 2.22;
}

.office{
    width: 100%;
    padding: 104px 40px 90px;
    background: #08476e;
}

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

.office .wrap h2{
    font-size: 9.0rem;
    line-height: 1;
    color: #fff;
    width: 38.36%;
}

.office .wrap h2 small{
    font-size: 2.0rem;
    font-weight: 600;
    line-height: 1;
    display: block;
    margin-top: 1px;
}

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

.office .wrap dl div{
    width: 100%;
    display: flex;
    font-size: 2.0rem;
    line-height: 1.75;
    letter-spacing: 0.15em;
    color: #fff;
    padding: 20px 0 34px;
    border-bottom: 1px solid #6d92a9;
}

.office .wrap dl div dt{
    font-weight: 300;
    width: 26%;
}

.office .wrap dl div dd{
    font-weight: 500;
}

.pic{
    width: 100%;
    padding: 100px 40px 0;
}

.pic ul{
    width: 100%;
    max-width: 1284px;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 0 auto;
}

.pic ul li{
    width: calc((100% - 14px) / 3);
}


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

.visual{
    height: 61.06770833vw;
    background: #96aac3 url("../img/about/sp/visual01.jpg") center top no-repeat;
    background-size: contain;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0 0 1.3vw 5.2vw;
    margin-top: 15.625vw;
}

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

.visual h1 small{
    font-size: 3.2552vw;
    margin-top: -0.52vw;
}

.lead{
    background: #96aac3 url("../img/common/sp/bg01.png") bottom right no-repeat;
    background-size: contain;
    padding: 0 5.2vw 8.72395833vw;
}

.lead dl div{
    padding: 8.33vw 0 4.296875vw;
}

.lead dl div dt{
    font-size: 9.1145833vw;
    margin-bottom: 2.0833vw;
}

.lead dl div dd{
    font-size: 3.3854167vw;
}

.message{
    padding: 14.0625vw 5.2vw 15.104167vw;
}

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

.message .wrap h2 small{
    font-size: 3.25520833vw;
    margin-top: 2vw;
}

.message .wrap .imgArea{
    width: 66.53645833vw;
    margin-left: 1.3vw;
}

.message .wrap .txtArea{
    width: 100%;
    padding-right: 0;
    font-size: 3.3854167vw;
    margin-top: 5.9895833vw;
}

.office{
    padding: 13.671875vw 5.2vw 19.140625vw;
}

.office .wrap{
    flex-wrap: wrap;
}

.office .wrap h2{
    font-size: 11.71875vw;
    margin-bottom: 7.8125vw;
    width: 100%;
}

.office .wrap h2 small{
    font-size: 3.25520833vw;
    margin-top: 2vw;
}

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

.office .wrap dl div{
    font-size: 3.125vw;
    padding: 2.0833vw 0 3.2552vw;
}

.office .wrap dl div dt{
    font-weight: 300;
    width: 26%;
}

.office .wrap dl div dd{
    font-weight: 500;
}

.pic{
    padding: 21.354167vw 5.2vw 0;
}

.pic ul{
    gap: 0.78125vw;
}

.pic ul li{
    width: calc((100% - 0.78125vw) / 2);
}

}