.contants-wrap {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}

.sec-ttl-t1-en{
font-family: "Roboto", sans-serif;
font-weight: 100;
font-size: 24px;
text-align: center;
line-height: 1.5;
margin: 0 0 0.5%;
color: #001F6B;
}
.sec-ttl-t1{
font-size: 40px;
font-weight: 700;
text-align: center;
line-height: 1.5;
margin: 0 0 3%;
color: #001F6B;
}


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




.movie{
position: relative;
}
.movie-cont-wrap{
margin: 0 auto 11%;
padding: min(6%, 80px) 6.85% min(5%, 64px);
background: #f5f5f5;
}
.movie-cont-wrap p{
max-width: 916px;
margin: 0 auto 3.4%;
}
.movie-box{
max-width: 916px;
margin: 0 auto;
aspect-ratio: 16 / 9;
position: relative;
border-radius: 4px;
overflow: hidden;
}
.movie-box::after{
position: absolute;
top: 0;
left: 0;
width: 54px;
height: 54px;
content: '';
background: url(../images/btn-red-corner.svg) no-repeat top center;
background-size: 100% auto;
}
.movie-box:hover{
cursor: pointer;
}
.movie-thumb{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
aspect-ratio: 16 / 9;
overflow: hidden;
}
.movie-thumb img{
transition: transform .6s ease;
}
.movie-play{
position: absolute;
left: 0;
right: 0;
top: 50%;
width: 88px;
height: 88px;
transform: translateY(-50%);
content: '';
background: url("../images/movie_btn.svg") no-repeat;
background-size: 100%;
margin: auto;
opacity: 1;
transition:opacity 0.6s 0s;
}
.movie-play::after{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
content: '';
background: url("../images/movie_btn_h.svg") no-repeat;
background-size: 100%;
opacity: 0;
transition:opacity 0.6s 0s;
}
.movie-thumb:hover img{
transition: transform .6s ease;
transform: scale(1.1);
}
.movie-thumb:hover .movie-play{
}
.movie-thumb:hover .movie-play::after{
opacity: 1;
transition:opacity 0.2s 0s;
}



.movie-box iframe {
  width: 100%;
  height: 100%;
  display: block;
}



.philosophy{
position: relative;
color: #001F6B;
padding: 0 0 1px;
background: url("../images/philosophy-bg2.png") no-repeat bottom right;
background-size: 228px auto;
}
.philosophy::after{
position: absolute;
top: -36px;
left: 0;
width: min(9%, 116px);
height: 100%;
content: '';
background: url("../images/philosophy-bg1.png") no-repeat top left;
background-size: 100% auto;
z-index: -1;
}
.philosophy-ex{
width: 92%;
max-width: 916px;
margin: 0 auto 7%;
}
.philosophy-ex span{
    padding: 0 4px;
    font-family: "Arial Black", sans-serif;
    font-style: italic;
    font-weight: bold;
}

.beyond-box{
width: 92%;
max-width: 1104px;
margin: 0 auto 8%;
}
.beyond-pr{
width: 61%;
}
.beyond-sd{
width: 366px;
padding: 7% 0 0;
}
.beyond-sd-ttl{
font-size: 20px;
font-weight: 700;
line-height: 1.5;
}
.beyond-sd ul{

}
.beyond-sd ul li{
position: relative;
padding: 0 0 0 20px;
}
.beyond-sd ul li::after{
position: absolute;
width: 4px;
height: 4px;
top: 0;
bottom: 0;
left: 6px;
margin: auto;
border-radius: 100px;
background: #001F6B;
content: '';
}



.history-main{
padding: 11.5% 2.5% 0;
position: relative;
}
.history-main::after{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
content: '';
background: url("../images/history-main-bg.jpg") no-repeat top left;
background-size: 100% auto;
opacity: 0.2;
z-index: -1;
}
.history-main-cont{
max-width: 1216px;
margin: 0 auto;
background: url("../images/history-main-cont-bg.svg") no-repeat top left;
background-size: 100% auto;
padding: min(18%, 218px) 5% 8%;
}
.history-main-cont-inner{
max-width: 916px;
margin: 0 auto;
}
.history-main-cont-inner p{
margin: 0 0 7%;
padding: 1% 0 0;
color: #001F6B;
}
.history-ex-box{
display: flex;
justify-content: space-between;
}
.history-ex-pr{
font-size: 24px;
font-weight: 700;
line-height: 1.5;
}
.history-ex-sd{
width: 64.4%;

}



.history-timeline-wrap{
padding: 0 2.5%;
}

.history-timeline-block{
position: relative;
max-width: 1104px;
margin: 0 auto min(8%, 220px);
padding: 0 0 30px 70px;
}
.history-timeline-block::before{
position: absolute;
top: 0;
left: 0;
width: 12px;
height: 100%;
background: #E40046;
content: '';
}
.history-timeline-block::after{
position: absolute;
width: 18px;
height: 45px;
left: -2px;
bottom: -1px;
content: '';
background: url("../images/timeline-end-arrow.svg") no-repeat bottom center;
background-size: 100% auto;
}



.timeline-once{
position: relative;
display: flex;
justify-content: space-between;
margin: 0 0 8%;
}
.timeline-once-t2{
margin: -4.8% 0 8%;
padding: 6% 8%;
border: 2px solid #001F6B;
border-radius: 8px;
opacity: 0;
}
.timeline-once-t2-ttl{
display: flex;
justify-content: flex-start;
margin: 0 0 2.6%;
}
.timeline-once-t2-ttl .tag{
background: #001F6B;
color: #fff;
font-size: 24px;
font-weight: 700;
width: 226px;
line-height: 48px;
text-align: center;
border-radius: 8px;
margin: 0 24px 0 0;
}
.timeline-once-t2-ttl .ex{
color: #001F6B;
font-size: 18px;
font-weight: 700;
line-height: 48px;
}
.timeline-once-t2 p{
}
.timeline-once::after{
position: absolute;
width: 0;
height: 4px;
top: 50%;
left: -70px;
background: #E40046;
content: '';
transform: translateY(-50%);
}
.timeline-once.scrolled::after{
width: 70px;
transition:width 0.7s 0.2s;
}
.timeline-once::before{
position: absolute;
width: 12px;
height: 40px;
top: 50%;
left: -70px;
content: '';
background: url("../images/timeline-arrow.svg") no-repeat top center;
background-size: 100% auto;
z-index: 1;
transform: translateY(-58px);
}




.timeline-year{
position: absolute;
width: 146px;
height: 130px;
top: 0;
left: 0;
font-size: 16px;
font-weight: 500;
background: url("../images/history-year-bg.svg") no-repeat top left;
background-size: 100% auto;
color: #fff;
line-height: 1.5;
padding: 14px 0 0 6px;
border-radius: 8px 0 0 0;
overflow: hidden;
}
.timeline-year span{
font-family: "Roboto", sans-serif;
font-weight: 700;
font-size: 32px;
line-height: 0.9;
}
.timeline-year span.ajust{
font-family: "Noto Sans JP", sans-serif;
font-weight: 700;
font-size: 20px;
}
.timeline-pr-outer{
position: relative;
width: 35.5%;
}
.timeline-pr{
position: relative;
background: #f5f5f5;
border-radius: 8px;
width: 35.5%;
padding: 118px 3.6% 3.2%;
display: flex;
flex-direction: column;
justify-content: space-between;
opacity:0;
}
.timeline-pr::after{
position: absolute;
width: 8%;
height: 50px;
right: -8%;
top: 50%;
content: '';
background: url("../images/timeline-pr-arrow.svg") no-repeat center left;
background-size: 100% auto;
transform: translateY(-50%);
}
.timeline-pr p{
font-weight: 500;
}



.timeline-sd{
position: relative;
width: 61.3%;
background: #e5eaf0;
border-radius: 8px;
overflow: hidden;
padding: 4% 4.4% 3.2%;
opacity:0;
}
.timeline-sp{
position: relative;
width: 61.3%;
border-radius: 8px;
overflow: hidden;
padding: 4% 6% 3.2% 5%;
border: 2px solid #E40046;
opacity:0;
}
.scrolled .timeline-pr,
.scrolled .timeline-sd,
.scrolled .timeline-sp,
.timeline-once-t2.scrolled{
opacity:1;
transition:opacity 1s 0.8s;
}
.timeline-sd .cont{
display: flex;
justify-content: space-between;
}
.timeline-sd .cont-img{
width: 50%;
}
.timeline-sd p{
width: 44%;
font-weight: 500;
padding: 2% 0 0;
}
.timeline-sd p span{
font-size: 14px;
font-weight: 400;
}
.timeline-sd p span.sup{
vertical-align: top;
}
.timeline-sp .ttl{
color: #E40046;
font-size: 24px;
font-weight: 700;
margin: 0 0 1%;
}
.timeline-sp .ttl2{
font-size: 32px;
font-weight: 700;
line-height: 1.5;
}
.timeline-sp .cont{
display: flex;
justify-content: space-between;
}
.timeline-sp .cont p{
width: 54%;
display: flex;
align-items: center;
}
.timeline-sp .cont-img{
width: 36%;
flex-shrink: 0;
}
.timeline-td{
position: relative;
width: 100%;
background: #e5eaf0;
border-radius: 8px;
overflow: hidden;
padding: 4.3% 4.6% 4.3% 9% ;
opacity: 0;
}
.timeline-td-inner{
display: flex;
}
.timeline-td-inner .cont-img{
width: 32.4%;
flex-shrink: 0;
}
.timeline-td-inner .cont{
padding: 0 5% 0 0;
display: flex;
align-items: center;
}
.timeline-td-inner .ttl{
font-size: 24px;
font-weight: 700;
color: #E40046;
line-height: 1.5;
margin: 0 0 2%;
}
.scrolled .timeline-td{
opacity:1;
transition:opacity 1s 0.8s;
}


.timeline-pr .ttl{
font-size: 24px;
font-weight: 700;
color: #001F6B;
line-height: 1.5;
margin: 0 0 6%;
}
.timeline-pr .ttl-b{
font-size: 40px;
font-weight: 700;
color: #001F6B;
line-height: 1.5;
margin: 7% 0 6%;
}
.timeline-sd .ttl{
font-size: 24px;
font-weight: 700;
color: #E40046;
line-height: 1.5;
margin: 0 0 3%;
}











.history-end-block{
width: 100%;
margin: 0 auto;
padding: 0 0 34%;
color: #001F6B;
background: url("../images/history-end-block-bg.png") no-repeat bottom center;
background-size: 100% auto;
}
.history-end-point-box{
max-width: 1104px;
display: flex;
justify-content: space-between;
margin: 0 auto 4.8%;
}
.history-end-point-once{
width: 23.36%;
border: 2px solid #001F6B;
border-radius: 8px;
overflow: hidden;
padding: 0 0 2.7%;
}
.history-end-point-once-year{
font-size: 18px;
font-weight: 700;
color: #fff;
background: #001F6B;
text-align: center;
line-height: 1.5
}
.history-end-point-once-year span{
font-family: "Roboto", sans-serif;
font-weight: 700;
font-size: 24px;
position: relative;
top: 1px;
padding: 0 1px 0 0;
}
.history-end-point-once-ttl{
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-size: 20px;
font-weight: 700;
height: 76px;
line-height: 1.5;
width: 100%;
flex-shrink: 0;
}
.history-end-point-once p{
font-weight: 500;
width: 75.2%;
margin: 0 auto;
}
.history-end-point-once img{
width: 75.2%;
margin: 0 auto 5%;
display: block;
}
.history-end-block-ex{
max-width: 916px;
margin: 0 auto 6%;
}
.history-end-block-ex{
max-width: 916px;
margin: 0 auto 4%;
}
.social-issues-box{
max-width: 700px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin: 0 auto;
}
.social-issues-box.add-pr{
justify-content: center;
}
.social-issues-box.add-pr .social-issue{
margin: 0 16px 32px;
}
.social-issue{
width: 212px;
height: 76px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-size: 20px;
font-weight: 700;
color: #fff;
background: #001F6B;
line-height: 1.5;
margin: 0 0 32px;
border-radius: 4px;
flex-shrink: 0;
}
.history-ending-ex{
color: #E40046;
font-size: 20px;
font-weight: 700;
text-align: center;
line-height: 1.5;
}



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


.about .page-main-ttl-box {
    position: relative;
    width: 100%;
    height: auto;
    top: 0;
    left: 0;
    display: block;
    padding: 0 0;
    margin: -33% 0 0;
}
.sec-ttl-t1 {
    font-size: 32px;
    line-height: 1.5;
    margin: 0 0 3%;
    padding: 0 6%;
}

.movie-box::after{
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
content: '';
background: url(../images/btn-red-corner.svg) no-repeat top center;
background-size: 100% auto;
}
.movie-cont-wrap {
    margin: 0 0;
    padding: 21% 6% 16%;
    background: #f5f5f5;
}
.movie-cont-wrap p {
    margin: 0 auto 12%;
}
.philosophy-ex {
    width: 100%;
    margin: 0 auto 22%;
}
.beyond-box {
    width: 100%;
    margin: 0 auto;
}
.beyond-box img{
display: block;
margin: 0 auto;
}

.philosophy {
    position: relative;
    color: #001F6B;
    background: none;
    margin: 22% 0 0;
    padding: 0 6% 27%;
}
.philosophy::after {
    position: absolute;
    top: 30px;
    left: 0;
    width: 18%;
    height: 90%;
    content: '';
    background: url(../images/philosophy-bg1_sp.png) no-repeat top left;
    background-size: 100% auto;
    z-index: -1;
}
.philosophy .sec-ttl-t1-en {
    font-size: 24px;
    margin: 0 0 3%;
    color: #001F6B;
}
.philosophy .sec-ttl-t1 {
        font-size: 32px;
        line-height: 1.5;
        margin: 0 0 10%;
        padding: 0 6%;
    }
.history-main {
    padding: 37.5% 6% 0;
}
.history-main::after{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
content: '';
background: url(../images/history-main-bg_sp.jpg) no-repeat top left;
    background-size: 100% auto;
opacity: 0.2;
z-index: -1;
}
.history-main-cont {
    background: url(../images/history-main-cont-bg.svg) no-repeat top left;
    background-size: 100% auto;
    padding: 15% 0 22%;
}
.history-main .sec-ttl-t1-en {
    line-height: 1.5;
    margin: 0 0 3%;
}
.history-main .sec-ttl-t1 {
        font-size: 32px;
        line-height: 1.5;
        margin: 0 0 8%;
        padding: 0;
    }
.history-main-cont-inner p {
    margin: 0 0 26%;
    padding: 1% 0 0;
}
.history-ex-box {
    display: block;
}
.history-ex-sd {
    width: 100%;
}
.history-ex-pr {
margin: 0 0 10%;
    font-size: 24px;
}
.history-timeline-wrap {
    padding: 0;
    overflow: hidden;
}
.history-timeline-block {
    position: relative;
    max-width: 1104px;
    margin: 0 auto 24%;
    padding: 0 6% 10px 40px;
}
.history-timeline-block::before {
    position: absolute;
    top: 0;
    left: 2px;
    width: 12px;
    height: 100%;
    background: #E40046;
    content: '';
}
.timeline-once {
    display: block;
    margin: 0 0 25%;
}
.timeline-once::before,
.timeline-once::after{
    display: none;
}
.timeline-once.ajust {
    display: block;
    margin: 0 0;
}
.timeline-pr,
.timeline-td{
    position: relative;
    width: 100%;
    border-radius: 8px;
    padding: 124px 7.9% 12%;
    display: block;
    opacity: 1;
    margin: 0 0 24px;
}
.timeline-pr-outer,
.timeline-td-outer{
    position: relative;
    width: 100%;
}


.timeline-pr .ttl {
    font-size: 24px;
    margin: 0 0 8%;
}
.timeline-pr .ttl-b{
margin: 3% 0 10%;
}
.timeline-sd {
    position: relative;
    width: 100%;
    border-radius: 8px;
    padding: 18% 7.9% 15%;
}
.timeline-sd .cont {
    display: block;
}
.timeline-sd p {
    width: 100%;
    padding: 2% 0 0;
}
.timeline-sd .cont-img {
    width: 100%;
}
    .timeline-sd p {
        width: 100%;
        padding: 2% 0 8%;
    }
.timeline-once-t2 {
    margin: 0 0 25%;
    padding: 15% 7.9% 15%;
    border: 2px solid #001F6B;
    border-radius: 8px;
    opacity: 0;
}
.timeline-once-t2-ttl {
    display: block;
    margin: 0 0 2.6%;
}
.timeline-once-t2-ttl .tag {
    font-size: 24px;
    width: 100%;
    line-height: 48px;
    margin: 0 0 4%;
}
.timeline-once-t2-ttl .ex {
margin: 0 0 8%;
    line-height: 1.5;
}
.timeline-sd .ttl {
    font-size: 24px;
    font-weight: 700;
    color: #E40046;
    line-height: 1.5;
    margin: 0 0 6%;
}
.timeline-td-inner {
    display: block;
}
.timeline-td-inner .cont-img {
    width: 100%;
}
.timeline-td-inner .ttl {
    font-size: 24px;
    line-height: 1.5;
    margin: 0 0 8%;
    text-align: center;
}
.timeline-td-inner p {
    margin: 0 0 8%;
}
.timeline-sp {
    position: relative;
    width: 100%;
    padding: 15% 7.9% 15%;
    opacity: 0;
}
.timeline-sp .cont {
    display: block;
}
.timeline-sp .cont p {
    width: 100%;
    display: block;
    margin: 0 0 6%;
}
.timeline-sp .cont-img {
    width: 100%;
    text-align: center;
}
.timeline-sp .cont-img img{
    width: 50%;
}
.timeline-sp .ttl2 {
    font-size: 24px;
margin: 0 0 10%;
}
.timeline-sp .ttl {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 7%;
    line-height: 1.5;
}
.history-end-point-box {
    display: block;
    margin: 0 0 15%;
}
.history-end-point-once {
    width: 100%;
    border: 2px solid #001F6B;
    border-radius: 8px;
    overflow: hidden;
    margin: 0 0 7%;
    padding: 0 0 4%;
}
.history-end-point-once img {
    width: 81.2%;
    margin: 0 auto 3%;
    display: block;
}
.history-end-point-once p {
    width: 81.2%;
    min-height: 56px;
    margin: 0 auto;
}
.social-issue {
    width: 46.7%;
    height: 108px;
    font-size: 20px;
    line-height: 1.5;
    margin: 0 0 32px;
    border-radius: 8px;
    flex-shrink: 0;
}

.social-issue.add-ajust {
  margin:0 auto 32px;
}

.history-end-block {
padding: 0 6% 122%;
    background: url(../images/history-end-block-bg_sp.jpg) no-repeat bottom center;
    background-size: 100% auto;
    margin: 0 0 20%;
}
.social-issues-box {
padding: 0 0 5%;
}
.social-issues-box.add-pr {
padding: 0;
justify-content: space-between;
}
.social-issues-box.add-pr .social-issue {
margin: 0 0 32px;
}
.history-end-block-ex {
    margin: 0 auto 14%;
}
.add-line{
position: relative;
overflow: visible;
}
.add-line::after{
position: absolute;
width: 0;
height: 4px;
top: 50%;
left: -38px;
background: #E40046;
content: '';
transform: translateY(-50%);
}
.add-line.scrolled::after{
width: 38px;
transition:width 0.7s 0.2s;
}
.add-line::before{
position: absolute;
width: 12px;
height: 40px;
top: 50%;
left: -38px;
content: '';
background: url("../images/timeline-arrow.svg") no-repeat top center;
background-size: 100% auto;
z-index: 1;
transform: translateY(-58px);
}

.scrolled .timeline-pr,
.scrolled .timeline-sd,
.scrolled .timeline-sp,
.timeline-once-t2.scrolled{
opacity:1;
transition:none;
}

.add-line,
.timeline-sp,
.timeline-td,
.timeline-sd{
opacity:1;
transform: translateY(70px);
}
.add-line.scrolled,
.timeline-sp.scrolled,
.timeline-td.scrolled,
.timeline-sd.scrolled{
opacity:1;
transform: translateY(0);
transition:opacity 0.9s 0s,transform 0.9s 0s;
}

.timeline-pr .arrow{
position: absolute;
left: 0;
right: 0;
width: 24px;
height: 24px;
bottom: -24px;
content: '';
background: url("../images/timeline-ar-down.svg") no-repeat top center;
background-size: 100% auto;
margin: auto;
}




}


@media only screen and (max-width : 389px) {
    .social-issue {
font-size: min(5.12vw, 20px);
    }


}