
.message .page-main-wrap {
    margin: 0 auto min(7%, 100px);
}



.message .page-main-ttl-box {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    padding: 0 0 2.8% 5.2%;
}

.message .pm-ttl-box h1 {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.5;
    margin: 0 0 24px;
}
.message-title{
font-size: 16px;
font-weight: 500;
line-height: 2;
}
.message-name{
font-size: 18px;
font-weight: 700;
line-height: 1.5;
}

.message-catch{
font-size: 32px;
font-weight: 700;
color: #001F6B;
line-height: 1.5;
margin: 0 0 20px;
}

.message-contents-wrap{
max-width: 1280px;
margin: 0 auto;
color: #000;
}
.message-1st-block{
display: flex;
justify-content: space-between;
width: 95%;
max-width: 1104px;
margin: 0 auto 6.25%;
}
.message-2nd-block{
display: flex;
justify-content: space-between;
flex-direction: row-reverse;
width: 95%;
max-width: 1104px;
margin: 0 auto;
}
.message-block-ttl{
font-size: 24px;
font-weight: 700;
line-height: 1.5;
margin: 0 0 16px;
}
.message-block-pr{
width: 46%;
}
.message-block-sd{
width: 49%;

}
.message-block-sd img{

position: sticky;
top: 96px;
will-change: transform;
}







.jobtitle-wrap-t1{
padding:0 6.85% 0;
}
.jobtitle-wrap-t2{
padding: 0 5.6%;
}


.block-ttl-t1{
text-align: center;
font-size: 24px;
font-weight: 700;
line-height: 1.5;
color: #001F6B;
}


.role-block{
max-width: 1104px;
margin: 0 auto min(9%, 98px);
}
.role-block-t2{
max-width: 1104px;
margin: 0 auto -2%;
}

.role-block .block-ttl-t1,
.role-block-t2 .block-ttl-t1{
margin: 0 0 4.5%;
}

.role-box{
background: #f5f5f5;
color: #001F6B;
display: flex;
justify-content: space-between;
border-radius: 4px;
margin: 0 0 2.2%;
padding: 2.9%;
}
.role-box.p-ac{
margin: 0 0;
padding: 2.9% 8.7% 2.9% 2.9%;
}
.role-box.p-ac:hover{
opacity:0.7;
transition: .4s opacity;
cursor: pointer;
}
.role-box-pr{
padding: 0 2.5% 0 0;
}
.role-box-sd{
background: #fff;
width: 66%;
padding: 3%;
display: flex;
align-items: center;
flex-shrink: 0;
}
.p-ac .role-box-sd{
background: #fff;
width: 63%;
padding: 3%;
display: flex;
align-items: center;
}
.role-box-num{
    font-family: "Roboto", sans-serif;
    font-weight: 100;
    font-size: 48px;
    color: #001f6a;
    line-height: 1.5;
    margin: 0 0 2%;
}
.role-box-ttl{
    font-weight: 700;
    font-size: 24px;
    color: #001f6a;
    line-height: 1.5;
}
.motivation-block{
width: 100%;
max-width: 940px;
margin: 0 auto min(11.5%, 124px);
color: #001f6a;
}
.motivation-block .block-ttl-t1{
margin: 0 0 1.5%;
}


.role-ac-once{
margin: 0 0 2.2%;
background: #f5f5f5;
transition: background-color 0.4s,opacity 0.9s 0.4s;;
color: #001f6a;
}
.role-ac-once.opened{
background: #d9dde9;
transition: background-color 0.4s;
}
.role-ac-once .role-box{
background: none;
position: relative;
}

.role-ac-once .role-box .icon{
position: absolute;
top: 50%;
right: 2.9%;
width: 32px;
height: 32px;
background: #001F6B;
content: '';
border-radius: 100px;
transform: translateY(-50%);
}

.role-ac-once .role-box .icon::before,
.role-ac-once .role-box .icon::after,
.role-ac-once .role-box-cont .icon::before,
.role-ac-once .role-box-cont .icon::after{
    content: '';
    display: inline-block;
    width: 12px;
    height: 1px;
    background-color: #fff;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    transition: opacity 0.5s;
}

.role-ac-once .role-box .icon::after,
.role-ac-once .role-box-cont .icon::after{
    transform: translateY(-50%) rotate(90deg);
    transition: transform 0.5s;
}

.role-ac-once .role-box.active .icon::before,
.role-ac-once.opened  .role-box-cont .icon::before{
    opacity: 0;
}

.role-ac-once .role-box.active .icon::after,
.role-ac-once.opened  .role-box-cont .icon::after{
    transform: translateY(-50%) rotate(180deg);
}











.role-box-cont{
display: none;
position: relative;
padding: 3.2% 2.9% 3.2% 2.9% ;
}
.role-box-cont::after{
position: absolute;
width: 94.2%;
height: 1px;
left: 0;
right: 0;
top: 0;
content: '';
margin: auto;
background: #001f6a;
}
.role-box-cont-sep{
color: #fff;
font-size: 18px;
font-weight: 700;
background: #001f6a;
line-height: 1.5;
margin: 0 0 3%;
padding: 4px 8px;
display: inline-block;
}
.role-box-cont-motivation-ttl{
color: #001f6a;
font-size: 24px;
font-weight: 700;
line-height: 1.5;
margin: 0 0 3%;
}
.role-box-cont p{
margin: 0 0 6%;
}
.role-box-cont p.add-ajust{
margin: 0 0 4%;
}

.add-bg{
position: relative;
}
.add-bg::after{
position: absolute;
width: 100%;
height: 250%;
left: 0;
top: -60px;
content: '';
background: url("../images/jontitle-cont-bg.jpg") no-repeat top center;
background-size: 100% auto;
z-index: -1;
}


.motivation-ttl{
    font-weight: 700;
    font-size: 40px;
    color: #001f6a;
    text-align: center;
    margin: 0 0 2%;
    line-height: 1.5;
}
.motivation-ex{

}
.voice-block{
max-width: 1136px;
margin: 0 auto;
color: #001f6a;
}
.voice-block .block-ttl-t1{
margin: 0 0 1.8%;
}
.voice-ex{
text-align: center;
margin: 0 auto 7%;
}
.other-link-box{
display: flex;
justify-content: space-between;
margin: 0 0 8%;
}
.role-box-cont .other-link-box{
margin: 0;
}
.other-link-once{
width: 47.5%;
}
.role-box-cont .other-link-once{
width: 48%;
}
.other-link-once a{
display: block;
position: relative;
}
.other-link-catch-box{
position: absolute;
left: 0;
bottom: 7.5%;
}
.other-link-catch-box p{
display: inline-block;
background: #001f6a;
color: #fff;
font-size: 20px;
font-weight: 700;
line-height: 1.5;
margin: 0 0 4px;
padding: 6px 24px;
}
.role-box-cont .other-link-catch-box p{
margin: 0 0 2px;
}








@media (min-width: 901px) and (max-width: 1200px){
.message.loaded .page-main-cover.ose {
        width: 60%;
    }
.message .page-main-ttl-box {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    padding: 0 0 0 5.2%;
}
.message-catch {
    font-size: 28px;
    line-height: 1.5;
    margin: 0 0 14px;
}
}
@media (min-width: 901px) and (max-width: 1000px){

.message .page-main img{
position: relative;
width: 130%;
left: -15%;
}

}




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




.message .page-main-wrap {
    margin: 0 auto 20%;
}

.message .page-main-cover {
        bottom: -20%;
        left: -1px;
        height: 50%;
        content: '';
        background: url(../images/itv-main-cover_sp.svg) no-repeat bottom left;
        background-size: 100% auto;
    }

.message .page-main-ttl-box {
     position: relative;
        width: 100%;
        height: auto;
        top: 0;
        left: 0;
    display: block;
    padding: 0;
    margin: -10% 0 0;
}



.message-1st-block {
    display: block;
    width: 88%;
    margin: 0 auto 23%;
}

.message-2nd-block {
display: block;
    width: 88%;
    margin: 0 auto 23%;
}
.message-block-pr {
    width: 100%;
}
.message-1st-block .message-block-pr,
.message-2nd-block .message-block-pr{
    margin: 0 0 18%;
}
.message-block-sd {
    width: 100%;
    display: block;
}
.message-block-ttl {
    font-size: 24px;
    margin: 0 0 4.6%;
}



}

@media only screen and (max-width : 389px) {
    .other-link-catch-box p {
 font-size: min(5.12vw, 20px);
 padding: 8px 18px;
    }

}




