/* about_mainvisual */
.about {
    background-color: #f6fbfe;
}
.about .about_mainvisual {
    width: 100%;
    height: 700px;
    background: url(/assets/img/about/about_mainvisual_bg.jpg) center center / contain repeat;
    justify-content: center;
    position: relative;
    z-index: 10;
    overflow: hidden;
    flex-wrap: wrap;
}
.about_mainvisual .about_title {
    margin-top: 100px;
    text-align: center;
    z-index: 2;
}
.about_mainvisual h1 {
    margin-bottom: 40px;
    flex-direction: column;
    position: relative;
}
.about_mainvisual h1 img {
    width: 194px;
    height: auto;
}
.about_mainvisual h1 .subtitle.spEng {
    letter-spacing: 0.1em;
    font-size: 18px;
    font-weight: bold;
    color: #ff4d3d;
    margin-bottom: 24px;
}
.about_mainvisual .about_title p {
    color: #515354;
    font-size: 18px;
    letter-spacing: 0.1em;
    line-height: 1.67;
    font-weight: lighter;
    flex-direction: column;
}
.about_mainvisual .about_title .slogan {
    font-size: 22px;
    margin-bottom: 30px;
}
/* .about_mainvisual .about_img {
    width: 100vw;
    height: 897px;
    position: absolute;
    top: 420px;
    background: url(/assets/img/about/top_visual.png) top center / contain repeat;
} */
.about_mainvisual .penlist_outer {
    width: 100vw;
    height: 390px;
    flex-wrap: nowrap;
    overflow: hidden;
    align-self: flex-end;
}
@media only screen and (max-width:1400px){
    .about_mainvisual .penlist.pc_backup {
        display: none;
    }
}
.about_mainvisual .penlist li {
    width: 3.5vw;
    height: 53.6vw;
    margin-left: 1.5vw;
    margin-top: 390px;
    transition: 0.3s;
}
@media only screen and (min-width:1401px){
    .about_mainvisual .penlist li {
        width: 42px;
        height: 750px;
        margin-left: 22px;
    }
}
.about_mainvisual .penlist li img {
    width: 100%;
    height: auto;
}
.about_mainvisual .penlist li:nth-child(1).on {
    margin-top: 18px;
}
.about_mainvisual .penlist li:nth-child(2).on {
    margin-top: 35px;
}
.about_mainvisual .penlist li:nth-child(3).on {
    margin-top: 10px;
}
.about_mainvisual .penlist li:nth-child(4).on {
    margin-top: 48px;
}
.about_mainvisual .penlist li:nth-child(5).on {
    margin-top: 61px;
}
.about_mainvisual .penlist li:nth-child(6).on {
    margin-top: 68px;
}
.about_mainvisual .penlist li:nth-child(7).on {
    margin-top: 100px;
}
.about_mainvisual .penlist li:nth-child(8).on {
    margin-top: 106px;
}
.about_mainvisual .penlist li:nth-child(9).on {
    margin-top: 88px;
}
.about_mainvisual .penlist li:nth-child(10).on {
    margin-top: 95px;
}
.about_mainvisual .penlist li:nth-child(11).on {
    margin-top: 83px;
}
.about_mainvisual .penlist li:nth-child(12).on {
    margin-top: 97px;
}
.about_mainvisual .penlist li:nth-child(13).on {
    margin-top: 104px;
}
.about_mainvisual .penlist li:nth-child(14).on {
    margin-top: 91px;
}
.about_mainvisual .penlist li:nth-child(15).on {
    margin-top: 63px;
}
.about_mainvisual .penlist li:nth-child(16).on {
    margin-top: 66px;
}
.about_mainvisual .penlist li:nth-child(17).on {
    margin-top: 55px;
}
.about_mainvisual .penlist li:nth-child(18).on {
    margin-top: 41px;
}
.about_mainvisual .penlist li:nth-child(19).on {
    margin-top: 0px;
}
.about_mainvisual .penlist li:nth-child(20).on {
    margin-top: 42px;
}
/* bannerliist */
.bannerlist {
    margin-bottom: 125px;
    z-index: 20;
}
.bannerlist .bannerlist_content {
    justify-content: center;
    margin-left: 32px;
}
.bannerlist .bannerlist_content li {
    width: 28.4vw;
    max-width: 364px;
    height:32.8vw;
    max-height: 420px;
    margin-right: 32px;
    border-radius: 24px;
    box-shadow: 15px 26px 17.6px 2.4px rgba(0, 0, 0, 0.12);
    margin-top: -180px;
    background: #fff;
    z-index: 20;
}
.bannerlist_content li img {
    width: 28.4vw;
    max-width: 364px;
    height: 19.5vw;
    max-height: 250px;
    border-radius: 24px 24px 0 0;
    margin-bottom: 30px;
}
@media only screen and (max-width:1280px){
    .bannerlist_content li img {
        margin-bottom: 2.3vw;
    }
}
.bannerlist_content li:nth-child(1) img {
    background-color: #ff855b;
}
.bannerlist_content li:nth-child(2) img {
    background-color: #fad958;
}
.bannerlist_content li:nth-child(3) img {
    background-color: #78dbba;
}
.bannerlist_content .banner_txt {
    padding: 0 30px;
}
@media only screen and (max-width:1280px){
    .bannerlist_content .banner_txt {
        padding: 0 2.3vw;
    }
}
.banner_txt h3 {
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 0.05em;
    color: #233a5f;
    margin-bottom: 15px;
}
@media only screen and (max-width:1280px){
    .banner_txt h3 {
        font-size: 1.6vw;
        margin-bottom: 10px;
    }
}
.banner_txt p {
    font-size: 16px;
    letter-spacing: 0.05em;
    line-height: 1.625;
}
@media only screen and (max-width:1280px){
    .banner_txt p {
        font-size: 1.25vw;
    }
}
/* about_pv */
.about_pv {
    flex-direction: column;
    margin-bottom: 10px;
}
.about_pv h2 {
    width: 100%;
    font-size: 32px;
    letter-spacing: 0.1em;
    color: #ff855b;
    margin-bottom: 60px;
    text-align: center;
}
.about_pv .pv_content {
    width: 75vw;
    max-width: 960px;
    height: 42.2vw;
    max-height: 540px;
    position: relative;
}
.about_pv .pv_play {
    background: url(/assets/img/about/pv_bg.png) center center /cover no-repeat;
}




































/* .. */