@charset "UTF-8";

body {
    width: 100%;
    /*overflow-x: hidden;*/
    font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
    margin: 0;
    text-align: justify;
line-break: strict;
overflow-wrap: break-word;
word-wrap: break-word;
}


img {
        max-width: 100%;
        height: auto;
    }

.globalFooter{
    background-color: #fff;
    z-index: 99;
    position: relative;
}
    
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
    
    
    .header_bg {
        background: #EFEFEF;
        box-sizing: border-box;
        z-index: 99;
        position: relative;
    }
    .header_wrap {
        position: relative;
        text-align: center;
        margin: 0 auto;
        width: 100%;
        max-width: 945px;
        padding: 3.035vw 0 2.335vw;
        box-sizing: border-box;
    }
    .header_logo {
        display: inline-block;
        width: 38.548vw;
    }
    .header_logo img {
        width: 100%;
    }
    .header_pr {
        display: inline-block;
        font-size: 0;
        position: absolute;
    	top: 50%;
    	right: 15px;
    	transform: translateY(-50%);
    	-webkit-transform: translateY(-50%);
    	-ms-transform: translateY(-50%);
    	width: 8.585%;
    }
    .header_pr img {
        width: 100%;
    }
    
    
    @media screen and (min-width: 440px) {
        .header_wrap {
            padding: 14px 0 10px;
        }
        .header_logo {
            width: 150px;
        }
        .header_pr {
            width: 40px;
        }
    }
    
    
    @media screen and (min-width: 640px) {
        .header_logo {
            width: 176px;
        }
        .header_wrap {
            padding: 15.79px 0 11.74px;
        }
    }
    
    
    
    .ft_line {
        display: inline-block;
        width: 100%;
        height: 1px;
        background: #cdcdcd;
        border: none;
    }
    
    
    .ft_line {
        display: inline-block;
        width: 100%;
        height: 1px;
        background: #cdcdcd;
        border: none;
    }
    
    
.allwrap {
        position: relative;
        z-index: 5;
        background-color: #000302;
        overflow: hidden;
    }

   /* 左右背景画像の共通設定 */
.allwrap::before,
.allwrap::after {
    content: "";
    position: fixed;
    top: 50%;
    width: 50vw;
    height: 100vh;
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: -1;
    opacity: 0;
    /* 横移動と透明度の変化だけを設定 */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* 左側の初期位置 */
.allwrap::before {
    left: max(0px, calc(50vw - 640px));
    background-image: url(deco-left.png);
    background-position: left 70px;
    transform: translateY(-50%) translateX(-60px);
}

/* 右側の初期位置 */
.allwrap::after {
    right: max(0px, calc(50vw - 640px));
    background-image: url(deco-right.png);
    background-position: right 70px;
    transform: translateY(-50%) translateX(60px);
}

/* スクロール時：画面中央に表示 */
.allwrap.is-active::before,
.allwrap.is-active::after {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

/* 最下部到達時：位置を最下部に合わせ、重ね順を背景色より前に出す */
.allwrap.is-stopped::before,
.allwrap.is-stopped::after {
    position: absolute;
    top: auto;
    bottom: 0;                                  /* .allwrap の最下部にピッタリ合わせる */
    transform: translateY(0) translateX(0);     /* 縦移動を0にして画面内に収める */
    opacity: 1;
    z-index: 1;                                 /* 背景色(#000302)の前に出し、コンテンツ(z-index:5)の裏に配置 */
    transition: none;                           /* 切り替え時のアニメーションによる挙動不審を防止 */
}
    /* スマホ表示 */
    @media screen and (max-width: 639px) {
        .allwrap::before,
        .allwrap::after {
            width: 70vw;   
        }
        /* 左側の位置をスマホ用に上書き */
        .allwrap::before {
            left: -15vw;
            background-position: left center;
        }

        /* 右側の位置をスマホ用に上書き */
        .allwrap::after {
            right: -15vw;
            background-position: right center;
        }
    }    

    .fv_wrap {
        background-image: url(mv-bg.png);
        background-size: cover;
        background-position: center bottom;
        background-repeat: no-repeat;
        text-align: center;
        padding: 22px 0 202px;
        position: relative;
        z-index: 3;
    }
    .fv_container {
        margin: 0 auto;
        max-width: 987px;
    }
    .fv_mv {
        font-size: 0;
    }
    @media screen and (min-width: 640px) {
        .fv_wrap {
            padding: 64px 0 424px;
        }
    }
    
    
    .itr_wrap {
        padding: 0 20px 24px;
        position: relative;
        z-index: 5;
        margin: -40px 0 0;
    }
    .itr_container {
        margin: 0 auto;
        max-width: 920px;
    }
    .itr_txt {
        color: #fff;
        font-weight: 600;
        line-height: 1.5067;
        font-size: 16px;
        margin: 0;
    }
    @media screen and (min-width: 640px) {
        .itr_wrap {
            margin: -120px 0 0;
        }
        .itr_txt {
            font-size: 17px;
            line-height: 1.765;
        }
    }
    @media screen and (max-width: 639px) {
        .itr_wrap {
            background: #000302;
        }
    }
    
    
    .ar_wrap {
        position: relative;
        padding: 0 12px 64px;
    }
    .ar_container {
        margin: 0 auto;
        max-width: 980px;
        position: relative;
    }
    .ar_box {
        background: rgba(0,0,0,.7);
        padding: 24px 12px;
        position: relative;
        z-index: 5;
    }
    .c_txt1 {
        color: #fff;
        font-size: 16px;
        font-weight: 500;
        line-height: 1.481;
        text-align: left;
        margin: 0;
    }
    .prof_wrap {
        margin: 0 0 40px;
    }
    .prof_wrap2{
        text-align: center;
    }
    .prof {
        width: 70%;
        max-width: 340px;
        margin: 0 auto;
    }
    .prof_photo {
        font-size: 0;
    }
    .prof_wrap2 .prof_photo{
        padding-bottom: 12px;
    }
    .prof_in {
        text-align: center;
        padding: 12px 16px 40px;
        position: relative;
    }
    .prof_in::before {
        content: "";
        position: absolute;
        display: inline-block;
        width: 1px;
        height: 70%;
        background: #c8ea14;
        right: 16px;
        bottom: 0;
    }
    .prof_in::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 16px;
        width: 100%;
        height: 1px;
        background: #c8ea14;
    }
    .prof_in_txt {
        display: inline-block;
        text-align: left;
    }
    .prof_in_txt p {
        color: #c8ea14;
    }
    .prof_txt1 {
        font-size: 16px;
        letter-spacing: .04em;
        line-height: 1.375;
        margin: 0;
        font-weight: 600;
    }
    .prof_txt2 {
        font-size: 14px;
        letter-spacing: .04em;
        line-height: 1.353;
        margin: .4em 0 .6em;
        font-weight: 600;
    }
    .prof_txt3 {
        font-size: 21px;
        letter-spacing: .06em;
        line-height: 1.156;
        margin: 0;
        font-weight: 600;
    }
    .prof_txt3 > span {
        font-size: .714em;
    }
    .ar_h_wrap {
        text-align: center;
        padding: 0 24px 24px;
    }
    .ar_h {
        display: inline-block;
        position: relative;
        color: #c8ea14;
        font-weight: 600;
        line-height: 1.275;
        margin: 0;
    }
    .ar_h_span {
        display: inline-block;
        position: absolute;
    	top: 50%;
    	transform: translateY(-50%);
    	-webkit-transform: translateY(-50%);
    	-ms-transform: translateY(-50%);
    	background-image: url(plus.png);
    	background-position: center;
    	background-repeat: no-repeat;
    	background-size: contain;
    	width: 16px;
        height: 16px;
    }
    .ar_h_span1 {
        left: -24px;
    }
    .ar_h_span2 {
        right: -24px;
    }
    .ar_deco {
        font-size: 0;
        text-align: center;
        position: relative;
        z-index: 3;
        margin: 0 0 -40px;
    }
    .ar_deco img {
        width: 120px;
    }
    
    @media screen and (min-width: 640px) {
        .prof_wrap {
            width: 320px;
            margin: 0 0 40px 40px;
            float: right;
        }
        .prof_wrap2 {
            width: 442px;
        }
        .prof {
            width: 100%;
            max-width: 100%;
            margin: 0;
        }
        .c_txt1 {
            font-size: 18px;
            line-height: 1.722;
        }
        .br-sp {
            display: none;
        }
        .ar_h_wrap {
            padding: 0 40px 40px;
        }
        .ar_h {
            font-size: 38px;
            line-height: 1.6579;
        }
        .ar_h_span {
            width: 21px;
            height: 21px;
        }
        .ar_h_span1 {
            left: -40px;
        }
        .ar_h_span2 {
            right: -40px;
        }
        .ar_deco {
            z-index: 5;
            margin: -40px 0;
        }
        .ar_deco img {
            width: 216px;
        }
        .ar_box {
            z-index: 3;
        }
        .float_wrap2 .prof_wrap {
            float: left;
            margin: 0 40px 40px 0;
        }
    }
    
    
    .bnr_wrap {
        padding: 40px 20px;
        text-align: center;
    }
    .bnr_img {
        margin: 0 0 12px;
        text-align: center;
    }
    .bnr_img img {
        width: 830px;
    }
    .bnr_txt1 {
        color: #fff;
        font-size: 14px;
        line-height: 1.428;
        margin: 0;
        font-weight: 500;
    }
    
    
    .fs_wrap {
        text-align: center;
        padding: 120px 0;
    }
    .fs_h img {
        width: 180px;
    }
    .fs_logo {
        margin: 64px 0 32px;
    }
    .fs_logo img {
        width: 328px;
    }
    .fs_btn a {
        display: inline-block;
        width: 100%;
        max-width: 292px;
        background: #c8ea14;
        color: #000;
        font-weight: 600;
        font-size: 18px;
        padding: 1.2em 0;
        text-decoration: none;
        border-radius: 12px;
    }
    
    
    .pagetop {
        position: fixed;
        width: 36px;
        right: 8px;
        bottom: 20px;
        font-size: 0;
        z-index: 10;
        cursor: pointer;
    }
    @media screen and (min-width: 1140px) {
        .pagetop {
            right: calc(50% - 640px);
            transform: translateX(-50%);
            -webkit-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
        }
    }
    


/* アニメーション */
    .fadein1 {
        animation: 4s fadein1_anime;
    }
    .fadein1 {
        animation: 4s fadein1_anime;
    }
    @keyframes fadein1_anime {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }
    .fadeup {
        animation: 4s fadeup_anime;
    }
    @keyframes fadeup_anime {
        0% {
            opacity: 0;
            transform: translateY(30px);
        }
        30% {
            opacity: 0;
            transform: translateY(30px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }
    .to_right {
        animation: 4s to_right_anime;
    }
    @keyframes to_right_anime {
        0% {
            right: 100%;
        }
        100% {
            right: 50%;
        }
    }
    .to_left {
        animation: 4s to_left_anime;
    }
    @keyframes to_left_anime {
        0% {
            left: 100%;
        }
        100% {
            left: 50%;
        }
    }
    
    .inview_fade {
        opacity: 0;
        transform: translateY(-30px);
    }
    .inview_fade_on {
        animation: 2s inview_fade_anime;
        opacity: 1;
        transform: translateY(0);
        z-index: 99;
    }
    @keyframes inview_fade_anime {
        0% {
            opacity: 0;
            transform: translateY(-30px);
        }
        30% {
            opacity: 0;
            transform: translateY(-30px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }
    .fade_to_right {
        right: 100%;
    }
    .fade_to_right_on {
        animation: 4s fade_to_right_anime;
        right: 45%;
    }
    @keyframes fade_to_right_anime {
        0% {
            right: 100%;
        }
        100% {
            right: 45%;
        }
    }
    
    .fade_to_left {
        left: 100%;
    }
    .fade_to_left_on {
        animation: 4s fade_to_left_anime;
        left: 45%;
    }
    @keyframes fade_to_left_anime {
        0% {
            left: 100%;
        }
        100% {
            left: 45%;
        }
    }
    
    @media screen and (min-width: 640px) {
        .fade_to_right {
            right: 100%;
        }
        .fade_to_right_on {
            animation: 4s fade_to_right_anime;
            right: 50%;
        }
        @keyframes fade_to_right_anime {
            0% {
                right: 100%;
            }
            100% {
                right: 50%;
            }
        }
        
        .fade_to_left {
            left: 100%;
        }
        .fade_to_left_on {
            animation: 4s fade_to_left_anime;
            left: 50%;
        }
        @keyframes fade_to_left_anime {
            0% {
                left: 100%;
            }
            100% {
                left: 50%;
            }
        }
    }