@charset "utf-8";

/* CSS INFORMATION -====================================================
File name : intro.css
Description :
===================================================================== */


/* =====================================================================
*    intro
* =================================================================== */

.intro {
    padding: calc(170 / 750 * 100%) 0 calc(95 / 750 * 100%);
    overflow: hidden;
}

.intro::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    background: url(../images/harry/harry1.png) no-repeat center/contain;
    width: calc(204 / 750 * 100%);
    padding-top: calc(235 / 750 * 100%);
    margin: 0 0 calc(393 / 750 * 100%) calc(-72 / 750 * 100%);
}

.intro::after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding-top: calc(530 / 750 * 100%);
    margin-bottom: calc(-50 / 750 * 100%);
    background-color: var(--yellow);
    -webkit-transform: skewY(-6deg);
    -ms-transform: skewY(-6deg);
    transform: skewY(-6deg);
}

.intro_box {
    margin: 0 calc(50% - 50vw);
    text-align: center;
}

.intro_box span {
    color: var(--red);
}

.intro_box p {
    font-size: 3.2rem;
    font-weight: bold;
}

.intro1 {
    text-align: left !important;
    margin: 0 0 calc(20 / 750 * 100%) calc(30 / 750 * 100%);
}

.intro2 {
    text-align: right !important;
    -webkit-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    transform: rotate(-5deg);
    margin: 0 calc(20 / 750 * 100%) calc(50 / 750 * 100%) 0;
}

.intro2 strong {
    font-size: 4rem;
    vertical-align: bottom;
}

.intro2::before {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    background: url(../images/harry/harry5.png) no-repeat center/contain;
    width: calc(125 / 750 * 100%);
    padding-top: calc(91 / 750 * 100%);
    margin: 0 calc(20 / 750 * 100%) calc(-110 / 750 * 100%) 0;
}

.intro3 {
    width: calc(689 / 750 * 100%);
    margin: 0 auto calc(70 / 750 * 100%);
}

.intro4 {
    line-height: 3.333;
}

.intro4::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    background: url(../images/intro/img_intro_deco1.png) no-repeat center/contain;
    width: calc(126 / 750 * 100%);
    padding-top: calc(131 / 750 * 100%);
    margin: calc(90 / 750 * 100%) 0 0 calc(270 / 750 * 100%);
    z-index: -1;
}

.intro4::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    background: url(../images/intro/img_intro_deco2.png) no-repeat center/contain;
    width: calc(120 / 750 * 100%);
    padding-top: calc(120 / 750 * 100%);
    margin: calc(240 / 750 * 100%) 0 0 calc(406 / 750 * 100%);
    z-index: -1;
}

.intro4 span {
    font-size: 3.6rem;
}

.intro5 {
    line-height: 2.125;
}

.intro5 {
    padding-top: calc(220 / 750 * 100%);
}

.intro5::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: url(../images/harry/harry3.png) no-repeat center/contain;
    width: calc(201 / 750 * 100%);
    padding-top: calc(123 / 750 * 100%);
    margin: calc(35 / 750 * 100%) auto 0;
}

.intro5 strong {
    font-size: 3.6rem;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(60%, transparent), color-stop(60%, var(--yellow)));
    background-image: -o-linear-gradient(transparent 60%, var(--yellow) 60%);
    background-image: linear-gradient(transparent 60%, var(--yellow) 60%);
}

.intro6 {
    line-height: 2.125;
    margin-top: 1.5em;
}

.intro7 {
    width: calc(479 / 750 * 100%);
    margin: calc(47 / 750 * 100%) 0 calc(100 / 750 * 100%) calc(150 / 750 * 100%);
}

.intro8::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    background: url(../images/harry/harry2.png) no-repeat center/contain;
    width: calc(218 / 750 * 100%);
    padding-top: calc(211 / 750 * 100%);
    margin: calc(-150 / 750 * 100%) calc(-85 / 750 * 100%) 0 0;
}

.intro8 span {
    font-size: 4.2rem;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(60%, transparent), color-stop(60%, #fff));
    background-image: -o-linear-gradient(transparent 60%, #fff 60%);
    background-image: linear-gradient(transparent 60%, #fff 60%);
}

@media screen and (min-width: 768px) {
    .intro {
        padding: calc(170 / 1400 * 100%) 0 calc(110 / 1400 * 100%);
    }
    .intro_box {
        margin: 0;
    }
    .intro_box p {
        font-size: 2.4rem;
    }
    .intro::before {
        width: calc(157 / 1400 * 100%);
        padding-top: calc(156 / 1400 * 100%);
        margin: 0 0 calc(293 / 1400 * 100%) calc(200 / 1400 * 100%);
    }
    .intro::after {
        padding-top: calc(470 / 1400 * 100%);
        margin-bottom: calc(-100 / 1400 * 100%);
    }
    .intro1 {
        font-size: 3.2rem !important;
        margin: 0 0 0 calc(141 / 1200 * 100%);
    }
    .intro2 {
        font-size: 3.2rem !important;
        margin: 0 calc(150 / 1200 * 100%) 0 0;
        z-index: 1;
    }
    .intro2::before {
        bottom: auto;
        top: 0;
        width: calc(125 / 1200 * 100%);
        padding-top: calc(91 / 1200 * 100%);
        margin: calc(-75 / 1200 * 100%) calc(15 / 1200 * 100%) 0 0;
    }
    .intro3 {
        width: calc(871 / 1200 * 100%);
        margin: calc(-55 / 1200 * 100%) auto calc(55 / 1200 * 100%);
    }
    .intro4 {
        line-height: 3.125;
    }
    .intro4::before {
        width: calc(126 / 1200 * 100%);
        padding-top: calc(131 / 1200 * 100%);
        margin: calc(-40 / 1200 * 100%) 0 0 calc(737 / 1200 * 100%);
    }
    .intro4::after {
        width: calc(120 / 1200 * 100%);
        padding-top: calc(120 / 1200 * 100%);
        margin: calc(90 / 1200 * 100%) 0 0 calc(610 / 1200 * 100%);
    }
    .intro4 span {
        font-size: 3.2rem;
    }
    .intro5 {
        line-height: 2;
    }
    .intro5 {
        padding-top: calc(300 / 1200 * 100%);
    }
    .intro5::before {
        width: calc(201 / 1200 * 100%);
        padding-top: calc(123 / 1200 * 100%);
        margin: calc(75 / 1200 * 100%) auto 0;
    }
    .intro5 strong {
        font-size: 2.8rem;
    }
    .intro6 {}
    .intro7 {
        width: calc(479 / 1200 * 100%);
        margin: calc(50 / 1200 * 100%) auto;
    }
    .intro8::before {
        width: calc(160 / 1200 * 100%);
        padding-top: calc(154 / 1200 * 100%);
        margin: calc(-90 / 1200 * 100%) calc(100 / 1200 * 100%) 0 0;
    }
}

@media screen and (min-width: 1400px) {
    .intro {
        padding: 170px 0 110px;
    }
    .intro::before {
        width: 157px;
        padding-top: 156px;
        margin: 0 0 293px calc(50vw - 495px);
    }
    .intro::after {
        padding-top: 570px;
        margin-bottom: -200px;
    }
}