/* --------------------------媒體查詢-------------------------- */

@media screen and (max-width: 1800px) {
    .this-is-me .main-box-1 {
        margin-left: 16%;
    }
    .this-is-me .main-box-2 {
        margin-left: 40%;
    }
    .this-is-me .main-box-3 {
        margin-left: 24%;
    }
}

@media screen and (max-width: 1600px) {
    .this-is-me .main-box-1 {
        margin-left: 15%;
    }
    .this-is-me .main-box-2 {
        margin-left: 33%;
    }
    .this-is-me .main-box-3 {
        margin-left: 23%;
    }
}

@media screen and (max-width: 1400px) {
    .this-is-me .main-box-1 {
        margin-left: 14%;
    }
    .this-is-me .main-box-2 {
        margin-left: 28%;
    }
    .this-is-me .main-box-3 {
        margin-left: 18%;
    }
}

@media screen and (max-width: 1300px) {
    .this-is-me .main-box-1 {
        margin-left: 10%;
    }
    .this-is-me .main-box-2 {
        margin-left: 18%;
    }
    .this-is-me .main-box-3 {
        margin-left: 14%;
    }
}

@media screen and (max-width: 1200px) {
    .little-title p {
        padding-left: 450px;
    }
    .little-title p:nth-child(even) {
        padding-left: 500px;
    }
    .center-title h1 {
        font-size: 70px;
    }
    .center-title h1::before {
        width: 700px;
    }
    .center-title h1::after {
        width: 460px;
    }
    .this-is-me .main-box-1 {
        margin-left: 2%;
    }
    .this-is-me .main-box-2 {
        margin-left: 2%;
    }
    .this-is-me .main-box-3 {
        margin-left: 2%;
    }
}

@media screen and (max-width: 1024px) {
    .little-title p {
        padding-left: 400px;
    }
    .little-title p:nth-child(even) {
        padding-left: 450px;
    }
    .center-title h1 {
        font-size: 65px;
    }
    .center-title h1::before {
        width: 700px;
    }
    .center-title h1::after {
        width: 420px;
    }
    .this-is-me img {
        width: 220px;
        height: 123.75px;
    }
    .this-is-me .main-box-1 {
        margin-left: 5%;
    }
    .this-is-me .main-box-2 {
        margin-left: 5%;
    }
    .this-is-me .main-box-3 {
        margin-left: 5%;
    }
}

@media screen and (max-width: 992px) {
    .little-title p {
        padding-left: 350px;
    }
    .little-title p:nth-child(even) {
        padding-left: 400px;
    }
    .center-title h1 {
        font-size: 60px;
    }
    .center-title h1::before {
        width: 80%;
    }
    .center-title h1::after {
        width: 60%;
    }
    .major-box div[class*=text] h4 {
        font-size: 17px;
    }
    .major-box div[class*=text] p {
        font-size: 15px;
        margin: 10px 0;
    }
    .this-is-me img {
        width: 220px;
        height: 123.75px;
    }
    .this-is-me .main-box-1 {
        margin-left: 1%;
    }
    .this-is-me .main-box-2 {
        margin-left: 1%;
    }
    .this-is-me .main-box-3 {
        margin-left: 1%;
    }
}

@media screen and (max-width: 786px) {
    .little-title p {
        padding-left: 23%;
        font-size: 28px;
    }
    .little-title p:nth-child(even) {
        padding-left: 25%;
        font-size: 28px;
    }
    .center-title h1 {
        font-size: 48px;
    }
    .center-title h1::before {
        width: 90%;
    }
    .center-title h1::after {
        width: 340px;
    }
    .this-is-me h2,
    .wotashino-works h2,
    .SNSbox h2,
    .byebye h2 {
        font-size: 31px;
    }
    .this-is-me .main-box-1 {
        margin-left: 18%;
    }
    .this-is-me .main-box-2 {
        margin-left: 18%;
    }
    .this-is-me .main-box-3 {
        margin-left: 18%;
    }
    .works a {
        width: 250px;
        height: 240px;
    }
    .work-pic {
        width: 250px;
        height: 125px;
    }
    .work-ben h5 {
        font-size: 20px;
    }
    .work-ben p {
        font-size: 14px;
    }
    .work-ben em {
        font-size: 14px;
    }
}

@media screen and (max-width: 480px) {
    .little-title p {
        padding-left: 15%;
        font-size: 28px;
    }
    .little-title p:nth-child(even) {
        padding-left: 15%;
        font-size: 28px;
    }
    .center-title h1 {
        font-size: 43px;
    }
    .center-title h1::before {
        width: 95%;
        height: 7px;
    }
    .center-title h1::after {
        width: 60%;
        height: 7px;
    }
    .this-is-me h2,
    .wotashino-works h2,
    .SNSbox h2,
    .byebye h2 {
        font-size: 28px;
    }
    .this-is-me .main-box-1 {
        margin-left: 10%;
    }
    .this-is-me .main-box-2 {
        margin-left: 10%;
    }
    .this-is-me .main-box-3 {
        margin-left: 10%;
    }
    .works a {
        width: 220px;
        height: 220px;
    }
    .work-pic {
        width: 220px;
        height: 110px;
    }
}

@media screen and (max-width: 420px) {
    .little-title p {
        padding-left: 10%;
        font-size: 28px;
    }
    .little-title p:nth-child(even) {
        padding-left: 10%;
        font-size: 28px;
    }
    .center-title h1 {
        font-size: 37px;
    }
    .center-title h1::before {
        width: 98%;
        height: 7px;
    }
    .center-title h1::after {
        height: 7px;
        width: 60%;
    }
    .this-is-me h2,
    .wotashino-works h2,
    .SNSbox h2,
    .byebye h2 {
        font-size: 22px;
    }
    .this-is-me .main-box-1 {
        margin-left: 5%;
    }
    .this-is-me .main-box-2 {
        margin-left: 5%;
    }
    .this-is-me .main-box-3 {
        margin-left: 5%;
    }
    .works a {
        width: 200px;
        height: 210px;
    }
    .work-pic {
        width: 200px;
        height: 100px;
    }
}

@media screen and (max-width: 375px) {
    .little-title p {
        padding-left: 6%;
        font-size: 28px;
    }
    .little-title p:nth-child(even) {
        padding-left: 6%;
        font-size: 28px;
    }
    .center-title h1 {
        font-size: 35px;
    }
    .this-is-me h2,
    .wotashino-works h2,
    .SNSbox h2,
    .byebye h2 {
        font-size: 20px;
    }
    .this-is-me .main-box-1 {
        margin-left: 1%;
    }
    .this-is-me .main-box-2 {
        margin-left: 1%;
    }
    .this-is-me .main-box-3 {
        margin-left: 1%;
    }
    .works a {
        width: 190px;
        height: 210px;
    }
    .work-pic {
        width: 190px;
        height: 95px;
    }
}

@media screen and (max-width: 320px) {
    .little-title p {
        padding-left: 3%;
        font-size: 26px;
    }
    .little-title p:nth-child(even) {
        padding-left: 3%;
        font-size: 26px;
    }
}


/* ----------------------動畫---------------------- */


/* これわ little-titleノ 動畫 */

@keyframes little-title {
    0% {}
    99% {
        z-index: 1;
        opacity: 1;
        visibility: visible;
    }
    100% {
        z-index: -100;
        opacity: 0;
        visibility: hidden;
    }
}

.little-title {
    animation: centerBox 10s linear forwards;
}


/* これわ little-title_tomorrowノ 動畫 */

@keyframes tomorrow1 {
    0% {
        color: transparent;
    }
    12.5% {
        color: #f05247;
    }
    90% {
        color: #f05247;
    }
    100% {
        color: transparent;
    }
}

@keyframes tomorrow2 {
    0% {
        color: transparent;
    }
    25% {
        color: transparent
    }
    37.5% {
        color: #f05247;
    }
    90% {
        color: #f05247;
    }
    100% {
        color: transparent;
    }
}

@keyframes tomorrow3 {
    0% {
        color: transparent;
    }
    37.5% {
        color: transparent;
    }
    50% {
        color: #ff6a00;
    }
    90% {
        color: #ff6a00;
    }
    100% {
        color: transparent;
    }
}

@keyframes tomorrow4 {
    0% {
        color: transparent;
    }
    50% {
        color: transparent;
    }
    62.5% {
        color: #ff6a00;
    }
    90% {
        color: #ff6a00;
    }
    100% {
        color: transparent;
    }
}

.little-title .lt1 {
    animation: tomorrow1 8s ease forwards;
}

.little-title .lt2 {
    animation: tomorrow2 8s ease forwards;
}

.little-title .lt3 {
    animation: tomorrow3 8s ease forwards;
}

.little-title .lt4 {
    animation: tomorrow4 8s ease forwards;
}


/* これわ center-titleノ 動畫 */

@keyframes center-title {
    0% {
        top: 20%;
        opacity: 0;
        visibility: hidden;
    }
    80% {
        top: 20%;
        opacity: 0;
        visibility: hidden;
    }
    100% {
        top: 30%;
        opacity: 1;
        visibility: visible;
    }
}

.center-title {
    animation: center-title 10s forwards linear;
}


/* これわ center-title_ノ 動畫 */

@keyframes scaleX {
    0% {
        transform: scaleX(.1);
        opacity: 0;
        visibility: hidden;
    }
    80% {
        transform: scaleX(.1);
        opacity: 0;
        visibility: hidden;
    }
    100% {
        transform: scaleX(1);
        opacity: 1;
        visibility: visible;
    }
}

.center-title h1::before,
.center-title h1::after {
    animation: scaleX 12s ease forwards;
}