@charset "utf-8";

/* mv */
.mv {
    text-align: center;
    position: relative;
}
.mv_inner {
    position: relative;
    margin: auto;
    height: 100%;
}
.mv_ttl_wrap {
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
}
.mv_ttl {
    background-color: #fff;
    color: #12b155;
    display: inline-block;
    line-height: 1;
}
.mv_person_wrap {
    display: flex;
    justify-content: center;
}
.mv_person_inner {
    background-color: #12b155;
    color: #fff;
    display: flex;
}
.mv_person_name,
.mv_person_post {
    display: block;
    line-height: 1;
}
.mv_caption {
    position: absolute;
    color: #fff;
}
@media screen and (min-width: 751px) {
    .mv {
        height: 4rem;
        background: url(../images/interview/img_mv.jpg) no-repeat center top;
        background-size: 100% auto;
    }
    .mv_inner {
        max-width: 12rem;
    }
    .mv_ttl_wrap {
        top: 52%;
    }
    .mv_ttl {
        font-size: 0.56rem;
        padding: 0.08rem 0.2rem;
    }
    .mv_person_wrap {
        margin-top: 0.16rem;
    }
    .mv_person_inner {
        padding: 0.08rem 0.26rem;
    }
    .mv_person_name {
        font-size: 0.4rem;
    }
    .mv_person_post {
        font-size: 0.16rem;
        margin-top: 0.08rem;
    }
    .mv_person_cross {
        width: 0.59rem;
        margin: 0 0.1rem;
    }
    .mv_caption {
        font-size: 0.16rem;
        bottom: 0.22rem;
        left: 0.24rem;
        text-shadow: 0 0 0.13rem rgba(0, 0, 0, 0.4);
    }
}

@media screen and (max-width: 750px) {
    .mv {
        height: 32rem;
        background: url(../images/interview/img_mv_sp.jpg) no-repeat center top;
        background-size: cover;
    }
    .mv_ttl_wrap {
        top: 43%;
    }
    .mv_ttl {
        font-size: 4.8rem;
        letter-spacing: 0;
        padding: 1.18rem 1rem;
    }
    .mv_person_wrap {
        margin-top: 0.8rem;
    }
    .mv_person_inner {
        padding: 0.6rem 0.8rem;
    }
    .mv_person_name {
        font-size: 4rem;
    }
    .mv_person_post {
        font-size: 2rem;
        margin-top: 0.8rem;
        letter-spacing: 0;
    }
    .mv_person_cross {
        width: 3.8rem;
        margin: -2rem -1rem 0;
    }
    .mv_caption {
        font-size:2.4rem;
        bottom: 1.2rem;
        left: 1.6rem;
        text-shadow: 0 1.344rem rgba(0, 0, 0, 0.4);
    }
}

/* mv animation */
.animation_ready .mv_ttl,
.animation_ready .mv_person_wrap {
    transition: clip-path 0.8s cubic-bezier(0.86, 0, 0.07, 1);
    clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
}
.animation_loaded .mv.is_animated .mv_ttl,
.animation_loaded .mv.is_animated .mv_person_wrap {
    clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0);
}

/* interview_main */
.interview_main_inner {
    margin: auto;
}
.interview_movie {
    margin: auto;
    display: block;
    position: relative;
    background: none;
    border: none;
    padding: 0;
    overflow: hidden;
}
.interview_movie img {
    width: 100%;
    height: auto;
}
[class].icon_play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    height: auto;
}

@media screen and (min-width: 751px) {
    .interview_main {
        padding: 2rem 0 1.6rem;
    }
    .interview_main_inner {
        max-width: 10rem;
    }
    .interview_movie {
        width: 6.4rem;
        margin-top: 1.2rem;
    }
    .interview_movie:hover {
        cursor: pointer;
    }
    .img_movie_thumb {
        transition: transform .6s;
        transform: scale(1);
    }
    .interview_movie:hover .img_movie_thumb {
        transform: scale(1.05);
    }
    [class].icon_play {
        width: 1rem;
    }
}
@media screen and (max-width: 750px) {

    .interview_main {
        padding: 17.6rem 4rem 16rem;
    }
    .interview_movie {
        width: 51rem;
        margin-top: 8rem;
    }
    [class].icon_play {
        width: 8rem;
    }
}

/* interview_main */
.article_ttl_wrap {
    position: relative;
}
.article_num {
    position: absolute;
    z-index: 2;
    line-height: 1;
    pointer-events: none;    
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    color: transparent;    
    background-color: #333;
    -webkit-mask-size: contain;
}
.article_num::before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    background: url(../images/common/gradation.png) no-repeat 0 0;
    animation: flashing 8s linear infinite;
    background-size: contain;
    /* animation: flashing2 15s infinite; */
}
@keyframes flashing {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
.article_num_1 {
    -webkit-mask-image: url(../images/common/ttl_1.svg);
    mask-image: url(../images/common/ttl_1.svg);
}
.article_num_2 {
    -webkit-mask-image: url(../images/common/ttl_2.svg);
    mask-image: url(../images/common/ttl_2.svg);
}
.article_num_3 {
    -webkit-mask-image: url(../images/common/ttl_3.svg);
    mask-image: url(../images/common/ttl_3.svg);
}
.article_num_4 {
    -webkit-mask-image: url(../images/common/ttl_4.svg);
    mask-image: url(../images/common/ttl_4.svg);
}
.article_num_5 {
    -webkit-mask-image: url(../images/common/ttl_5.svg);
    mask-image: url(../images/common/ttl_5.svg);
}
.article_ttl {
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    position: absolute;
    z-index: 2;
}
.article_ttl_line {
    background-color: #fff;
}
.article_img_wrap {
    position: relative;
}
.article_txt {
    background-color: #fff;
    letter-spacing: 0;
}
@media screen and (min-width: 751px) {
    .article_num {
        font-size: 1.6rem;  
        top: -0.62rem;
        left: -0.37rem;
    }
    .article_num::before {
        width: 2.38rem;
        height: 2.38rem;
    }
    .article_num_1::before {
        top: -1.14rem;
        left: -0.69rem;
    }
    .article_num_2::before {
        top: 0.65rem;
        left: 0;
    }
    .article_num_3::before {
        top: 0;
        left: 0.80rem;
    }
    .article_num_4::before {
        top: 0.55rem;
        left: -0.30rem;
    }
    .article_num_5::before {
        top: -1.10rem;
        left: 0.60rem;
    }
    .article_img_wrap {
        clip-path:polygon(1.6rem 0, 100% 0, 100% 50%, 100% 100%, 0 100%, 0 1.6rem);
    }
    .article_ttl {
        top: -0.4rem;
        font-size: 0.4rem;
        right: 0.4rem;
    }
    .article_ttl_line {
        display: inline-block;
        padding: 0.2rem 0.075rem;
        margin-left: 0.17rem;
    }
    .article_txt {
        font-size: 0.2rem;
        padding: 0.3rem 0.8rem;
        line-height: 1.8;
    }
}
@media screen and (max-width: 750px) {
    .article_img_wrap {
       clip-path:polygon(10.6rem 0, 100% 0, 100% 50%, 100% 100%, 0 100%, 0 10.6rem);
   }
    .article_num {    
        font-size: 12rem;
        top: -3.3rem;
        left: -1.8rem;
    }
    .article_num::before {
        width: 23.8rem;
        height: 23.8rem;
    }
    .article_num_1::before {
        top: -13rem;
        left: -4.9rem;
    }
    .article_num_2::before {
        top: 3rem;
        left: -3.8rem;
    }
    .article_num_3::before {
        top: -1rem;
        left: 7rem;
    }
    .article_num_4::before {
        top: 3.5rem;
        left: -9.5rem;
    }
    .article_num_5::before {
        top: -14.2rem;
        left: 4rem;
    }
    .article_ttl {
        top: -1.6rem;
        right: 2.4rem;
        font-size: 4rem;
    }
    .article_ttl_line {
        display: inline-block;
        padding: 2rem 0.65rem;
        margin-left: 1.6rem;
    }
    .article_txt {
        font-size: 2.8rem;
        line-height: 1.71;
        padding: 2.8rem 3.5rem;
    }

}
.animation_ready .article_ttl_line,
.animation_ready .article_ttl::before {
    transition: clip-path 0.8s 0.25s cubic-bezier(0.86, 0, 0.07, 1);
    clip-path: polygon(100% 100%, 100% 100%, 100% 0, 100% 0);
}
.animation_loaded .article_ttl_wrap.is_animated .article_ttl_line,
.animation_loaded .article_ttl_wrap.is_animated .article_ttl::before {
    clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0);
}
  

/* interview_cont */
.interview_cont {
    background-color: #fff;
}
.interview_name {
    color: #fff;
    display: inline-block;
    line-height: 1;
    text-align: center;
}
.interview_name_blue {
    background-color: #1288b0;
}
.interview_name_green {
    background-color: #12b155;
}
.interview_cont_img {
    position: relative;
}
.interview_cont_img img {
    max-width: 100%;
    height: auto;
}
.interview_cont_txt {
    color: #333;
    text-align: justify;
}
.interview_cont_txt a {
    color: #12b155;
}
.interview_img_caption {
    text-align: right;
    position: absolute;
    bottom: 0;
    right: 0;
}
.interview_txt_continue {
    text-align: center;
}
@media screen and (min-width: 751px) {
    .interview_cont {
        padding: 0.8rem 0 1.6rem;
    }
    .interview_cont_inner {
        max-width: 8rem;
        margin: auto;
    }
    .interview_cont_img {
        margin: 0.8rem 0;
    }
    .interview_name {
        padding: 0.15em 0;
        width: 0.7rem;
        border-radius: 0.13rem;
    }
    .interview_txt_wrap {
        font-size: 0.2rem;
    }
    .interview_txt_wrap + .interview_txt_wrap {
        margin-top: 0.45rem;
    }
    .interview_cont_txt {
        line-height: 1.8;
    }
    .interview_img_caption {
        font-size: 0.16rem;
        bottom: -0.27rem;
    }
    .interview_txt_continue {
        font-size: 0.2rem;
        margin-top: 1.45rem;
    }
    .interview_cont_txt a {
        transition: opacity .3s;
    }
    .interview_cont_txt a:hover {
        opacity: .7;
    }
}
@media screen and (max-width: 750px) {
    .interview_cont {
        padding: 8rem 4rem 16rem;
    }
    .interview_cont_img {
        margin: 7.6rem 0;
    }
    .interview_name {
        padding: 0.277rem 0rem;
        border-radius: 1.8rem;
        width: 9.8rem;
    }
    .interview_txt_wrap {
        font-size: 2.8rem;
    }
    .interview_txt_wrap + .interview_txt_wrap {
        margin-top: 5.5rem;
    }
    .interview_cont_txt {
        line-height: 1.71;
        margin-top: 0.1rem;
    }
    .interview_img_caption {
        font-size: 2.4rem;
        bottom: -4.4rem;
    }
    .interview_txt_continue {
        font-size: 2.8rem;
        margin-top: 14rem;
    }
}

/* interview_nav */
.interview_nav {
    text-align: center;
    margin: auto;
}
.interview_nav_link {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #333;
    background-color: #fff;
    position: relative;
}
.interview_nav_img_wrap {
    overflow: hidden;
}
.article_img_wrap img,
.interview_nav_img_wrap img {
    width: 100%;
    height: auto;
}
.interview_nav_active {
    position: relative;
}
.interview_nav_active::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255,0.5);
    z-index: 1;
    pointer-events: none;
}
.interview_nav_comingsoon .interview_nav_link::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(128,128,128,0.7);
    z-index: 2;
}
.interview_nav_comingsoon .interview_nav_link::after {
    content: 'Coming Soon';
    display: block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    z-index: 3;
    text-align: center;
    color: #fff;
    width: 100%;
    font-weight: 300;
    letter-spacing: 0.04em;
}
.interview_nav_txt_wrap {
    position: relative;
    flex: 1 auto;
    text-align: left;
}
.interview_nav_arrow {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    right: 0;
    background-color: #333;
}
.interview_nav_arrow::after {
    display: block;
    content: '';
    transform: translateY(-50%) rotate(45deg);
    right: 0;
    position: absolute;
    top: 50%;
    margin: auto;
}
.interview_btn_back {
    background-color: #fff;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    margin: auto;
    position: relative;
    overflow: hidden;
}
.interview_btn_bg {
    width: 100%;
    height: 100%;
    background-color:#808080;
    position: absolute;
    top: 0;
    left: 0;
    transform: translateX(100%);
}
.interview_btn_txt {
    position: relative;
    z-index: 1;
}
.interview_btn_arrow {
    position: absolute;
    top: 0;
    bottom: 0;
    background-color: #333;
    margin: auto;
}
.interview_btn_arrow::before {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    margin: auto;
    left: 0;
    transform: rotate(-135deg);
    transform: translateY(-50%) rotate(-135deg);
}
@media screen and (min-width: 751px) {
    .interview_nav {
        padding-top: 1.7rem;
        max-width: 8rem;
    }
    .interview_nav_listitem + .interview_nav_listitem {
        margin-top: 0.24rem;
    }
    .interview_nav_link {
        border: 0.01rem solid #b3b3b3;
    }
    .interview_nav_img_wrap img {
        transform: scale(1);
        transition: transform .5s;
    }
    .interview_nav_txt_wrap {
        padding: 0 0.4rem;
    }
    .interview_nav_arrow {
        width: 0.16rem;
        right: 0.4rem;
        height: 1px;
        transition: width .3s, right .3s;
    }
    .interview_nav_arrow::after {
        width: 0.09rem;
        height: 0.09rem;
        border-top: 1px solid #333;
        border-right: 1px solid #333;
        transition:  right .3s;
    }
    .interview_nav_comingsoon .interview_nav_link::after {
        font-size: 0.4rem;
    }
    .interview_nav_link[href]:hover .interview_nav_img_wrap img {
        transform: scale(1.3);
    }
    .interview_nav_link[href]:hover .interview_nav_arrow {
        width: 0.32rem;
        right: 0.24rem;
    }
    .interview_nav_txt {
        font-size: 0.2rem;
    }
    .interview_nav_txt > span:nth-child(1) {
        margin-right: 0.08rem;
    }
    .interview_btn_back {
        width: 4rem;
        height: 0.8rem;
        border-radius: 4rem;
        font-size: 0.2rem;
        border: 0.01rem solid #b2b2b2;
        margin-top: 0.8rem;
        box-shadow: 0px 0.08rem 0.16rem 0px rgba(0, 0, 0, 0.2);
    }
    .interview_btn_arrow {
        left: 0.4rem;
        width: 0.15rem;
        height: 1px;
        transition: left .3s,width .3s,background .12s;
    }
    .interview_btn_arrow::before {
        width: 0.08rem;
        height: 0.08rem;
        border-top: 1px solid #333;
        border-right: 1px solid #333;
        transition: border .12s ;
    }
    .interview_btn_txt {
        transition: color .3s;
    }
    .interview_btn_bg {
        transition: transform .3s;
        border-radius: 4rem;
    }
    .interview_btn_back:hover {
        border-color: #fff;
        transition: border .3s;
    }
    .interview_btn_back:hover .interview_btn_bg {
        transform: translateX(0%);
    }
    .interview_btn_back:hover .interview_btn_txt {
        color: #fff;
    }
    .interview_btn_back:hover .interview_btn_arrow {
        background-color: #fff;
        left: 0.2rem;
        width: 0.3rem;
    }
    .interview_btn_back:hover .interview_btn_arrow::before {
        border-color: #fff;
    }
}
@media screen and (max-width: 750px) {
    .interview_nav {
        padding: 15.5rem 4rem 0;
    }
    .interview_nav_listitem + .interview_nav_listitem {
        margin-top: 3.7rem;
    }
    .interview_nav_link {
        border: 0.2rem solid #b3b3b3;
    }
    .interview_nav_img_wrap {
        width: 17.8rem;
    }
    .interview_nav_txt_wrap {
        padding: 0 4rem;
    }
    .interview_nav_arrow {
        width: 1.8rem;
        right: 4rem;
        height: 0.2rem;
    }
    .interview_nav_arrow::after {
        width: 0.9rem;
        height: 0.9rem;
        border-top: 0.2rem solid #333;
        border-right: 0.2rem solid #333;
    }
    .interview_nav_comingsoon .interview_nav_link::after {
        font-size: 4rem;
    }
    .interview_nav_txt {
        font-size: 2.8rem;
        display: flex;
        align-items: center;
        gap: 0.8rem;
    }
    .interview_btn_back {
        width: 40rem;
        height: 9.6rem;
        margin-top: 8rem;
        border-radius: 4.8rem;
        font-size: 2.8rem;
        border: 0.2rem solid #b2b2b2;
        box-shadow: 0px 0.8rem 1.6rem 0px rgba(0, 0, 0, 0.2);
    }
    .interview_btn_arrow {
        left: 4rem;
        width: 1.8rem;
        height: 0.2rem;
    }
    .interview_btn_arrow::before {
        width: 1.2rem;
        height: 1.2rem;
        border-top: 0.2rem solid #333;
        border-right: 0.2rem solid #333;
    
    }
}



/* full_screen */
.full_screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 50;
    background: #000;
    background: rgba(0, 0, 0, 0.9);
    transform: translateX(-100%);
    opacity: 0;
    transition: transform 0s 0.4s, opacity 0.4s 0s;
}
.is_play .full_screen {
    transform: translateX(0%);
    opacity: 1;
    transition: transform 0s 0s, opacity 0.4s 0s;
}
.full_screen iframe {
    width: 100%;
    height: 100%;
    border: none;
}
.full_screen .close_btn {
    display: block;
    position: absolute;
    cursor: pointer;
    z-index: 100;
    top: 0;
    right: 0;
    background: none;
    padding: 0;
    border: none;
}
.movie_close {
    height: auto;
    display: block;
    background: transparent;
}

@media screen and (min-width: 751px) {
    .full_screen {
        background: #000;
    }
    .iframe_player_api_wrap {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding: 0.7rem 0;
    }
    .iframe_player_api_cover {
        position: relative;
        width: 100%;
        height: 100%;
    }
    .movie_close {
        width: 0.7rem;
        padding: 0.2rem;
    }
}
@media screen and (max-width: 750px) {
    .iframe_player_api_wrap {
        position: absolute;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .iframe_player_api_cover {
        position: relative;
        width: 100%;
        padding-top: 55.6%;
    }
    .full_screen iframe {
        position: absolute;
        top: 0;
        left: 0;
    }
    .movie_close {
        width: 6.4rem;
        padding: 3.2rem;
        box-sizing: content-box;
    }
}

/* interview03_ractab */
.interview03_ractab {
    position: relative;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    margin: auto;
}
.color_green {
    color: #12b155;
}
.interview03_ractab_ttl {
    text-align: center;
    letter-spacing: 0.08em;
}
.interview03_ractab_lead {
    background-color: rgba(255,255,255,0.7);
}
.interview03_ractab::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    background: url(../images/common/bg_fixed.jpg) no-repeat center center;
    background-size: cover;  /* */
}
.interview03_ractab::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-color: rgba(255,255,255,0.7);
}
.interview03_ractab_inner {
    margin: auto;
}
.deco_1,
.deco_2,
.deco_3 {
    position: absolute;
    z-index: 2;
}
.deco_1 {
    background: url(../interview03/images/circle_1.png) no-repeat 0 0;
    background-size: contain;
}
.deco_2 {
    background: url(../interview03/images/circle_2.png) no-repeat 0 0;
    background-size: contain;
}
.deco_3 {
    background: url(../interview03/images/circle_3.png) no-repeat 0 0;
    background-size: contain;
}
@media screen and (min-width: 751px) {
    .interview03_ractab {
        padding: 1.41rem 0 1.5rem;
        max-width: 12rem;
        margin-top: 1.5rem;
    }
    .interview03_ractab_ttl {
        font-size: 0.48rem;
        line-height: calc(81/48);
    }
    .interview03_ractab_lead {
        margin-top: 0.5rem;
        padding: 0.36rem 1rem;
    }
    .interview03_ractab_lead_txt {
        font-size: 0.2rem;
        line-height: calc(36/20);
    }
    .interview03_ractab_inner {
        max-width: 10rem;
    }
    .interview03_ractab .interview_cont_img,
    .interview03_ractab .interview_txt_wrap {
        padding: 0 1rem;
    }
    .interview03_ractab .interview_cont_txt_s {
        font-size: 0.16rem;
        display: block;
        line-height: calc(30/16);
    }
    .deco_1 {
        width: 1.6rem;
        height: 1.6rem;
        top: 0.6rem;
        left: 0.5rem;
    }
    .deco_2 {
        width: 0.8rem;
        height: 0.8rem;
        top: 2.72rem;
        left: 0.52rem;
    }
    .deco_3 {
        width: 0.4rem;
        height: 0.4rem;
        top: 3.75rem;
        left: 1.32rem;
    }
}
@media screen and (max-width: 750px) {
    .interview03_ractab {
        margin-left: -4rem;
        width: calc(100% + 8rem);
        padding: 13.7rem 4rem 16rem;
        margin-top: 15rem;
    }
    .interview03_ractab_ttl {
        font-size: 4.8rem;
        line-height: calc(81/48);
    }
    .interview03_ractab_lead {
        margin-top: 4rem;
        padding:4.2rem 4rem 5rem;
    }
    .interview03_ractab_lead_txt {
        font-size: 2.8rem;
        line-height: calc(48/28);
    }
    .interview03_ractab .interview_cont_txt_s {
        font-size: 2.4rem;
        display: block;
        line-height: calc(41/24);
    }
    .deco_1 {
        width: 11.3rem;
        height: 11.3rem;
        top: 3rem;
        left: 3rem;
    }
    .deco_2 {
        width: 5.7rem;
        height: 5.7rem;
        top: 18.4rem;
        left: 3rem;
    }
    .deco_3 {
        width: 2.9rem;
        height: 2.9rem;
        top: 25.4rem;
        left: 8rem;
    }
}