@charset "utf-8";
@import url('destyle.css');
@import url('inview.css');


:root {
    font-size: 2.66666666666667vw;
}

body {
    font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
    line-height: 1.6;
    text-align: justify;
    color: #333;
}

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

.hide {
    opacity: 0;
    filter: blur(100px);
    transition: .75s;
}

.main_copy {
    transition: 1s;
}

header#univ-logo {
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    background: #fff;
    z-index: 99;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

header#univ-logo img.logo {
    width: 40%;
    margin-top: 15rem;
    animation: op_logo 4s;
}

header#univ-logo picture {
    display: block;
    width: 100%;
}

header#univ-logo img.main_copy {
    width: 60%;
    animation: op_copy 2s;
}

@keyframes op_logo {
    0% {
        opacity: 0;
        filter: blur(100px);
    }

    50% {
        opacity: 0;
        filter: blur(100px);
    }

    100% {
        opacity: 1;
        filter: blur(0.1px);
    }
}

@keyframes op_copy {
    0% {
        opacity: 0;
        filter: blur(100px);
    }

    100% {
        opacity: 1;
        filter: blur(0.1px);
    }
}

.scroll {
    position: fixed;
    width: 2rem;
    bottom: 2rem;
    right: 0;
    margin: auto;
    z-index: 9999;
}

.scroll .main_color {
    fill: #932536;
}

.scroll:after {
    content: "";
    width: 1rem;
    background: url(../img/arrow.svg) no-repeat right bottom;
    background-size: 1rem 100rem;
    position: fixed;
    right: 0;
    animation: scroll 2.5s infinite;
}

.scroll.white .main_color {
    fill: #fff;
}

.scroll.white:after {
    background-image: url('../img/arrow_wh.svg');
}

@keyframes scroll {
    0% {
        height: 0;
        top: -5%;
    }

    37% {
        height: 105%;
    }

    75% {
        height: 0;
        bottom: 0;
    }
}

#intro {
    height: 100vh;
    transition: 1s;
}

#intro-01,
#intro-02,
#intro-03 {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    background-size: cover;
    transition: .75s;
}


#intro-01 {
    background-image: url('../img/op_img01_sp.jpg');
    background-position: right top;
}

#intro-02 {
    background-image: url('../img/op_img02_sp.jpg');
}

#intro-03 {
    background-image: url('../img/op_img03_sp.jpg');
}

#copy01,
#copy02,
#copy03 {
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    top: 0;
    transition: 1s;
}

#copy01 svg {
    width: 40.66666666667vw;
    transition: 1s;
}

#copy02 svg {
    width: 30.66666666667vw;
    transition: 1s;
}

#copy03 svg {
    width: 24.66666666667vw;
    transition: 1s;
}

#copy01 svg {
    margin: -43% 0 0 36%;
}

#copy02 svg {
    margin-left: 30%;
    margin-top: -20%;
}

#copy03 svg {
    margin-left: 50%;
    margin-top: -53%;
}

#copy01.sub svg {
    transform: scale(0.6, 0.6);
    margin: 10% 0 0 -55%;
}

#copy02.sub svg {
    transform: scale(0.6, 0.6);
    margin: 70% 0 0 5%;
}

#copy03.sub svg {
    transform: scale(0.6, 0.6);
}


#content {
    position: absolute;
    width: 100%;
    top: 6000px;
    z-index: 9999;
    background: url('../img/body_bg_sp.png') repeat-y center top;
    background-size: contain;
}

#s01 .main-head .lead2 {
    background: #b0272d;
    background: rgba(176, 39, 45, .8);
    color: #fff;
    font-size: 1.2rem;
    line-height: 3;
    width: 25.5rem;
    margin: -2em 0 0 auto;
    padding: 0 0 0 1.5em;
    position: relative;
    z-index: 10;
}

#s01 .main-head .lead3 {
    width: 28rem;
    margin: 5rem auto;
}

#s01 .ep {
    background: #fff url('../img/corner.svg') no-repeat left top;
    background-size: 2.1rem 2.1rem;
    width: 34.4rem;
    margin: auto auto 3.5rem;
}

#s01 .ep:before {
    content: "";
    width: 6rem;
    height: 6rem;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: contain;
    display: block;
    margin: auto auto 3rem;
    position: relative;
    top: -1rem;
}

#s01 .ep h2 {
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: contain;
    width: 26.6rem;
    margin: auto;
    position: relative;
}

#s01 .ep .body p {
    font-size: 1.4rem;
    line-height: 2;
    margin-bottom: 2.5em;
    width: 29.6rem;
    margin: 2.5em auto 2.5em;
}

#s01 .ep .body+p {
    width: 17.8rem;
    margin: 5rem auto;
}

#s01 .ep p.caption {
    width: 30rem;
    margin: auto;
    font-size: 1.2rem;
    position: relative;
    padding-left: 1em;
    text-align: justify;
}

#s01 .ep p.caption:before {
    content: "※";
    position: absolute;
    left: 0;
}

#s01 .ep .body p img {
    width: 75%;
    display: block;
    margin: auto;
}

#s01 .ep .end {
    background: #f8f8f2 url('../img/ep_end_bg_sp.svg') no-repeat right bottom;
    background-size: cover;
    padding-top: 2.2rem;
    padding-bottom: 1px;
    margin-top: 3rem;
}

#s01 .ep .end p {
    width: 29.5rem;
    margin: auto;
}

#s01 .ep .end p.link {
    width: auto;
    height: 2.75rem;
    line-height: 2.75rem;
    margin: 2.5rem auto;
    text-align: center;
}

#s01 #ep01:before {
    background-image: url('../img/ep01_sp.svg');
}

#s01 #ep01 h2 {
    background-image: url('../img/ep01_img01_sp.jpg?ver=20210325');
    height: 38.6rem;
}

#s01 #ep01 h2 img {
    width: 11.7rem;
    position: relative;
    left: 1rem;
}

#s01 #ep02:before {
    background-image: url('../img/ep02_sp.svg');
}

#s01 #ep02 h2 {
    background-image: url('../img/ep02_img01_sp.jpg');
    height: 44.2rem;
}

#s01 #ep02 h2 img {
    width: 14.7rem;
    position: absolute;
    right: 2rem;
}

#s01 #ep03:before {
    background-image: url('../img/ep03_sp.svg');
}

#s01 #ep03 h2 {
    background-image: url('../img/ep03_img01_sp.jpg');
    height: 36.2rem;
}

#s01 #ep03 h2 img {
    width: 11.7rem;
    position: relative;
    left: 1rem;
}

#s02 {
    position: relative;
}

#s02 p.bg,
#s02 p.bg_ie {
    width: 100%;
    height: 100%;
    position: absolute;
    mix-blend-mode: multiply;
    z-index: -1;
    max-width: none;
}

#s02 p.bg img,
#s02 p.bg_ie img {
    width: 100%;
    height: 100%;
}

@supports (mix-blend-mode: multiply) {
    .bg_ie {
        display: none;
    }
}

@supports not (mix-blend-mode: multiply) {
    .bg {
        display: none;
    }
}

#s02 p {
    width: 100%;
}

#s03 {
    background: url('../img/introduction_bg_sp.svg') no-repeat center;
    background-size: 32.2rem 148.7rem;
    padding: 7rem 2.5rem;
}

#s03 p {
    margin: auto auto 2.5rem;
}

#s03 p:first-of-type {
    width: 28.1rem;
    margin-top: 1rem;
}

#s03 p:nth-of-type(2) {
    width: 12.8rem;
    margin-bottom: 3rem;
}

#s03 p:nth-of-type(3) {
    width: 22.9rem;
}

#s03 p:nth-of-type(4) {
    width: 12.8rem;
}

#s03 p:nth-of-type(5) {
    width: 23.7rem;
}

#footer {
    background: #fff;
    padding: 1px 0;
}

#footer p.outro {
    width: 26rem;
    margin: 5rem auto 3rem;
}

.wrap {
    position: relative;
    width: 100%;
}

svg .line_y {
    fill: #fff100;
    fill-rule: evenodd;
    opacity: 0;
    transition: 1s;
}

.lined svg .line_y {
    opacity: 1;
}

@media screen and (min-width: 768px) {
    :root {
        font-size: 0.78vw;
        text-align: justify;
    }

    body {
        font-feature-settings: "palt";
    }

    header#univ-logo img.logo {
        width: 25.6rem;
        margin-top: 15rem;
    }

    header#univ-logo img.main_copy {
        width: 73rem;
    }

    #intro-01 {
        background-image: url(../img/op_img01_pc.jpg);
    }

    #intro-02 {
        background-image: url(../img/op_img02_pc.jpg);
        background-position: right top;
    }

    #intro-03 {
        background-image: url(../img/op_img03_pc.jpg);
        background-position: left top;
    }

    #copy01 svg,
    #copy02 svg,
    #copy03 svg {
        width: 15.6rem;
        transition: 1s;
    }

    #copy01 svg {
        width: 22.6rem;
        margin-left: 40%;
        margin-top: 10%;
    }

    #copy01.sub svg {
        transform: scale(0.6, 0.6);
        margin: 20% 0 0 -65%;
    }

    #copy02 svg {
        margin-left: -30%;
        margin-top: 0%;
    }

    #copy02.sub svg {
        transform: scale(0.6, 0.6);
        margin: 35% 0 0 -30%;
    }

    #copy03 svg {
        margin-left: 70%;
        margin-top: -10%;
    }

    #content {
        background: url('../img/body_bg_pc.png') repeat-y center top;
        background-size: cover;
        background-attachment: fixed;
    }


    #s01 .main-head .lead2 {
        font-size: 2.4rem;
        line-height: 3;
        width: 50%;
        margin: -1.5em 0 0 auto;
        padding: 0 0 0 1.5em;
        box-shadow: 0 10px 20px -10px rgba(0, 0, 0, .3);
    }

    #s01 .main-head .lead3 {
        width: 72rem;
        margin: 8rem auto;
    }

    #s01 .ep {
        width: 90%;
        max-width: 1080px;
        background-size: 6rem 6rem;
        box-shadow: 0 10px 20px -10px rgba(0, 0, 0, .3);
    }

    #s01 .ep:before {
        width: 13.4rem;
        height: 15rem;
        top: -2.5rem;
    }

    #s01 #ep01:before {
        background-image: url('../img/ep01_pc.svg');
    }

    #s01 #ep02:before {
        background-image: url('../img/ep02_pc.svg');
    }

    #s01 #ep03:before {
        background-image: url('../img/ep03_pc.svg');
    }

    #s01 .ep h2 {
        width: 86rem;
        height: auto !important;
    }

    #s01 .ep h2 img {
        width: auto !important;
        position: static !important;
    }

    #s01 #ep01 h2 {
        background: url('../img/ep01_img01_pc.jpg') no-repeat center top;
        background-size: cover;
    }

    #s01 #ep02 h2 {
        background: url('../img/ep02_img01_pc.jpg') no-repeat center top;
        background-size: cover;
    }

    #s01 #ep03 h2 {
        background: url('../img/ep03_img01_pc.jpg') no-repeat center top;
        background-size: cover;
    }

    #s01 .ep .body {
        width: 86rem;
        margin: auto;
        font-size: 1.8rem;
        position: relative;
    }

    #s01 .ep .body p {
        width: 100%;
        font-size: 1.8rem;
    }

    #s01 .ep p.caption {
        font-size: 1.5rem;
        float: left;
        width: 65%;
        padding-top: 3em;
    }

    #s01 .ep .body p img {
        width: auto;
        display: block;
        margin: auto;
    }

    #s01 .ep .img_left {
        float: left;
    }

    #s01 #ep01 .img_center {
        width: 33rem;
        margin: 0 auto 4rem;
    }

    #s01 .ep .img_right {
        position: absolute;
        bottom: 0;
        right: 0;
        margin: 0 !important;
    }

    #s01 .ep .img_right.static {
        position: static;
        margin-left: auto !important;
        margin-right: 0 !important;
    }

    #s01 #ep02 .img_right {
        width: 28rem;
    }

    #s01 #ep03 .img_right {
        width: 25rem;
    }

    #s01 .ep .end {
        background-image: url('../img/ep_end_bg_pc.svg');
        clear: both;
        padding-bottom: 5rem;
        margin-bottom: 10.5rem;
        background-size: contain;
    }

    #s01 .ep .end p {
        width: 86rem;
        margin: 6rem auto;
    }

    #s01 .ep .end p.link {
        height: 4rem;
        line-height: 4rem;
    }

    #s01 .ep .end p.link img {
        width: auto;
        height: 100%;
    }

    #s01 a img {
        transition: .3s;
    }

    #s01 a:hover img {
        filter: drop-shadow(0 2px 1px rgba(0, 0, 0, .5));
    }

    #s02 p.bg {
        width: 100%;
        height: 100%;
    }

    #s02 p {
        width: 75%;
        max-width: 96rem;
        margin: auto;
    }

    #s03 {
        background: url('../img/introduction_bg_pc.svg') no-repeat center;
        background-size: 89rem 322.1rem;
        padding: 35rem 2.5rem;
    }

    #s03 p {
        margin: auto auto 6rem;
    }

    #s03 p:first-of-type {
        width: 74rem;
        margin-top: 1rem;
    }

    #s03 p:nth-of-type(2) {
        width: 34.8rem;
        margin-bottom: 10rem;
    }

    #s03 p:nth-of-type(3) {
        width: 56.3rem;
        margin-bottom: 8.3rem;
    }

    #s03 p:nth-of-type(4) {
        width: 48.8rem;
        margin-bottom: 6rem;
    }

    #s03 p:nth-of-type(5) {
        width: 62.7rem;
        margin-bottom: 0;
    }

    #footer p.outro {
        width: 78.5rem;
        margin: 17rem auto 6rem;
    }

    #footer p.link {
        text-align: center;
        background: url('../img/button_link_bg.svg') repeat-x center top;
        background-size: contain;
    }

    #footer p.link img {
        width: 100%;
        max-width: 1180px;
    }

}

@media screen and (min-width: 1280px) {
    :root {
        font-size: 10px;
    }
}

@media screen and (max-width: 767px) {
    .for_pc {
        display: none;
    }
}