@charset "UTF-8";

/* ============================================
common
===============================================*/

:root {
    --orange: #EB6100;
    --lite-orange: #F39800;
    --black: #000000;
    --green: #094;
    --lite-green: #4BD78A;
    --blue: #00479D;
    --lite-blue: #608DD1;
    --white: #ffffff;
    --contentwidth: 68.8%;
}

.Aboutpage,
.footer {
    max-width: 1920px;
    margin: 0 auto;
  }

/* ============================================
main
===============================================*/

.top {
    text-align: center;
}

.buddy {
    padding-top: 106px;
}

.buddy__topic {
    font-family: Nunito;
    font-size: 8rem;
    font-weight: 700;
}

.buddy__img {
    width: 407px;
}

.heart__img {
    width: 200px;
    margin-right: 32px;
}

.heart__img:last-of-type {
    margin-right: 0;
}

.heart {
    margin: 70px auto 0;
}

.main__txt {
    font-size: 2.4rem;
    font-weight: 600;
    line-height: 2;
    margin: 52px auto 161px;
}

.fadein {
    opacity: 0;
    transform: translateY(30px);
    /* 下から30px移動 */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.animated {
    opacity: 1;
    transform: translateY(0);
    /* 元の位置に戻る */
}

.animated.delay-1 {
    transition-delay: 0.2s;
    /* 0.2秒遅らせる */
}

.animated.delay-2 {
    transition-delay: 0.6s;
    /* 0.4秒遅らせる */
}

.animated.delay-3 {
    transition-delay: 0.9s;
    /* 0.6秒遅らせる */
}

/* 800tablet main*/
@media screen and (max-width: 800px) {

    .buddy {
        padding-top: 186px;
    }

    .buddy__topic {
        font-size: 6.1rem;
        font-weight: 800;
    }

    .buddy__img {
        width: 330px;
    }

    .heart__img {
        width: 200px;
        margin-right: 32px;
    }

    .heart__img:last-of-type {
        margin-right: 0;
    }

    .heart {
        margin: 55px auto 0;
    }

    .main__txt {
        font-size: 2rem;
        font-weight: 600;
        line-height: 1.5;
        margin: 52px auto 206px;
    }
}

/* 669 main*/
@media screen and (max-width: 669px) {

    .buddy__topic {
        font-size: 4.1rem;
        font-weight: 800;
    }

    .buddy__img {
        width: 249px;
    }

    .heart__img {
        width: 18vw;
    }

    .heart__img:last-of-type {
        margin-right: 0;
    }

    .heart {
        margin: 55px auto 0;
    }

    .main__txt {
        font-size: 1.5rem;
    }
}

/* 425ps main */
@media screen and (max-width: 425px) {
    .top {
        text-align: center;
    }

    .buddy__topic {
        font-size: 4.5rem;
        font-weight: 700;
    }

    .buddy__img {
        width: 230px;
    }

    .heart__img {
        width: 110px;
        margin-right: 8px;
    }

    .heart__img:last-of-type {
        margin-right: 0;
    }

    .heart {
        margin: 43px auto 0;
    }

    .main__txt {
        font-size: 1.6rem;
        font-weight: 600;
        line-height: 1.5;
        margin: 52px auto 120px;
    }
}

/* -- 376end -- */


/* ============================================
slider
===============================================*/

.bearface {
    width: 241px;
}

.bawface {
    width: 293px;
}

.Matthewface {
    width: 273.5px;
}

.scroll-infinity__wrap {
    overflow: hidden;
    /* コンテンツが外に出ないようにする */
    width: 100%;
    /* 表示領域の幅 */
}

.scroll-infinity__list {
    display: flex;
    /* 横並びにする */
    width: max-content;
    /* 子要素に応じた幅を設定 */
    animation: scroll-infinity 80s linear infinite;
    /* アニメーションを無限ループで実行 */
}

.scroll-infinity__item {
    flex-shrink: 0;
    /* アイテムのサイズを縮小させない */
}

@keyframes scroll-infinity {
    0% {
        transform: translateX(0);
        /* アニメーションのスタート地点 */
    }

    100% {
        transform: translateX(-50%);
        /* リストの50%分スクロール */
    }
}

/* 800 slider */
@media screen and (max-width: 800px) {
    .bearface {
        width: 171px;
    }

    .bawface {
        width: 223px;
    }

    .Matthewface {
        width: 203px;
    }

    .scroll-infinity__list {
        display: flex;
        /* 横並びにする */
        width: max-content;
        /* 子要素に応じた幅を設定 */
        animation: scroll-infinity 40s linear infinite;
        /* アニメーションを無限ループで実行 */
    }
}

/* 425 slider */
@media screen and (max-width: 425px) {
    .bearface {
        width: 91px;
    }

    .bawface {
        width: 111px;
    }

    .Matthewface {
        width: 103px;
    }

    .scroll-infinity__list {
        display: flex;
        /* 横並びにする */
        width: max-content;
        /* 子要素に応じた幅を設定 */
        animation: scroll-infinity 40s linear infinite;
        /* アニメーションを無限ループで実行 */
    }
}
/* 425 end */

/* ============================================
beanseye
===============================================*/

.beanseye__img {
    width: 456px;
    height: 544px;
    margin-right: 103px;
    margin-top: 47px;
}

.beanseye__topic--tpc {
    font-family: Nunito;
    font-size: 8rem;
    font-weight: 800;
}

.beanseye__topic--txt {
    font-size: 2.4rem;
    font-weight: 400;
    line-height: 2;
    display: block;
    margin-top: 39px;
    width: 462px;
}

.beanseye {
    display: flex;
    margin: 193px auto 230px;
    justify-content: center;
}


/* 1032 beanseye */
@media screen and (max-width: 1032px) {
    .beanseye__img {
        width: 45%;
        height: auto;
        display: block;
        position: relative;
        left: 34%;
    }

    .beanseye__topic--tpc {
        font-size: 6.1rem;
    }

    .beanseye__topic--txt {
        font-size: 2.1rem;
        width: 530px;
        margin: 43px auto 0;
        letter-spacing: 0.336px;
        text-align: left;
        justify-content: center;
    }

    .beanseye {
        display: block;
        margin: 88px auto;
    }

    .beanseye__topic {
        display: block;
        text-align: center;
    }
}

/* 545 beanseye */
@media screen and (max-width: 545px) {

    .beanseye__topic--tpc {
        font-size: 5.1rem;
    }

    .beanseye__topic--txt {
        font-size: 2.1rem;
        width: 328px;
        margin: 43px auto 0;
        letter-spacing: 0.336px;
        text-align: left;
        justify-content: center;
    }

    .beanseye {
        display: block;
        margin: 88px auto;
    }

    .beanseye__topic {
        display: block;
        text-align: center;
    }
}


/* 425 beanseye */
@media screen and (max-width: 425px) {

    .beanseye__topic--tpc {
        font-size: 4rem;
    }

    .beanseye__topic--txt {
        font-size: 1.5rem;
        width: 290px;
        margin: 43px auto 0;
        letter-spacing: 0.24px;
        text-align: left;
    }

    .beanseye {
        display: block;
        margin: 88px auto;
    }

    .beanseye__topic {
        display: block;
        text-align: center;
    }
}

/* 425 end */

/* ============================================
introduction
===============================================*/

.introduction__topic {
    width: 369px;
    display: block;
    margin: 0 auto;
}

.btn__character,
.btn__story,
.btn__HooYhea {
    color: #fff;
    font-family: Nunito;
    font-size: 3.2rem;
    font-style: normal;
    font-weight: 700;
}

.btn__character,
.btn__story,
.btn__HooYhea {
    display: inline-block;
    border-radius: 100px;
    text-align: center;
    margin-right: 24px;
}

.btn__character {
    padding: 75px 24px 73px 24px;
    background-color: var(--blue);
}

.btn__story {
    padding: 75px 56px 73px 55px;
    background-color: var(--orange);
}

.btn__HooYhea {
    padding: 75px 29px 73px 28px;
    background-color: var(--green);
    margin-right: 0;
}

.introduction__list {
    margin: 60px 0 309px;
    text-align: center;
}


/* 1032 beanseye */
@media screen and (max-width: 1032px) {
    .introduction__topic {
        margin-top: 223px;
    }
}

/* 800 introduction */
@media screen and (max-width: 800px) {

    .introduction__topic {
        width: 277px;
        display: block;
        margin: 223px auto 0;
    }

    .introduction__list {
        margin: 56px 0 263px;
    }
}

/* 629 introduction */
@media screen and (max-width: 629px) {

    .introduction__topic {
        width: 185px;
        display: block;
        margin: 220px auto 0;
    }

    .btn__character,
    .btn__story,
    .btn__HooYhea {
        font-size: 1.6rem;
    }

    .btn__character,
    .btn__story,
    .btn__HooYhea {
        display: inline-block;
        border-radius: 100px;
        text-align: center;
        margin-right: 16px;
    }

    .btn__character {
        padding: 34px 8px 34px 9px;
        background-color: var(--blue);
    }

    .btn__story {
        padding: 34px 24px 34px 25px;
        background-color: var(--orange);
    }

    .btn__HooYhea {
        padding: 34px 11px 34px 11px;
        background-color: var(--green);
        margin-right: 0;
    }

    .introduction__list {
        margin: 34px 13% 316px;
    }
}

/* 425 introduction */
@media screen and (max-width: 425px) {

    .introduction__topic {
        width: 185px;
        display: block;
        margin: 220px auto 0;
    }

    .btn__character,
    .btn__story,
    .btn__HooYhea {
        font-size: 1.6rem;
    }

    .btn__character,
    .btn__story,
    .btn__HooYhea {
        display: inline-block;
        border-radius: 100px;
        text-align: center;
        margin-right: 16px;
    }

    .btn__character {
        padding: 29px 3px 29px 4px;
        background-color: var(--blue);
    }

    .btn__story {
        padding: 29px 19px 29px 20px;
        background-color: var(--orange);
    }

    .btn__HooYhea {
        padding: 29px 6px 29px 6px;
        background-color: var(--green);
        margin-right: 0;
    }

    .introduction__list {
        margin: 34px 13% 316px;
    }

}
/* 425 end */