@charset "utf-8";







.is-loading .introduction,

.is-loading .footer {

    display: none

}



.noise {

    position: fixed;

}



.grid {

    width: 100vw;

    height: 120vh;

    position: fixed;

    background-size: 3.8125rem 3.8125rem;

    background-position: 50% -0.4%;

    background-image: repeating-linear-gradient(90deg, 

    #FFF, 

    #FFF 0.15625rem,

    transparent 0.0625rem,

    transparent 3.6875rem), 

     repeating-linear-gradient(0deg, 

     #FFF, 

     #FFF 0.15625rem,

     #23A4AA 0.0625rem, 

     #23A4AA 3.6875rem);

    filter: blur(0.65px);

}



@media all and (min-width:768px) {

    .grid {

        background-size: 9.0625rem 9.0625rem;

        background-position: 49.5% 0%;

        background-image:

            repeating-linear-gradient(90deg,

                #FFF,

                #FFF 0.625rem,

                transparent 0.0625rem,

                transparent 9.0625rem),

            repeating-linear-gradient(0deg,

                #FFF,

                #FFF 0.625rem,

                #23A4AA 0.0625rem,

                #23A4AA 9.0625rem);



    }

}



#target {

    position: absolute;

    width: 100%;

    height: auto;

    opacity: 1;

}



.dog {

    width: 750px;

    height: 750px;

    transform: scale(2);

    background-image: url("../images/sticker/sticker_opening.png");

    position: absolute;

}



/*==========================

background_sticker

==========================*/

.background_sticker {

    display: block;

    position: absolute;

    z-index: 0;

    will-change: transform, opacity;

}



.background_sticker_01 {

    width: 9rem;

    top: -2rem;

    left: 14rem;

    transform: rotate(11deg);

}



.background_sticker_02 {

    width: 18rem;

    top: 19.8rem;

    left: 10rem;

}



.background_sticker_03 {

    width: 11.8rem;

    top: 20rem;

    left: -2rem;

    transform: rotate(0deg);

}



.background_sticker_04 {

    width: 13rem;

    top: 30rem;

    left: 5rem;

    transform: rotate(-21.0001deg);

}



.background_sticker_05 {

    width: 15.2rem;

    top: -4rem;

    left: 0.5rem;

    transform: rotate(-56deg);

}



.background_sticker_06 {

    width: 15rem;

    top: 24.5rem;

    left: 13.5rem;

    transform:rotate(-31deg);

}



.background_sticker_07 {

    width: 14rem;

    top: 6.8rem;

    left: -2rem;

    transform: rotate(-21deg);

}



.background_sticker_08 {

    width: 14rem;

    top: 32rem;

    left: -5rem;

    transform: rotate(21deg);

}



.background_sticker_09 {

    width: 15rem;

    top: 41rem;

    left: -1rem;

    transform: rotate(-19deg);

}



.background_sticker_10 {

    width: 15rem;

    top: 38rem;

    left: 12rem;

    transform: rotate(20.0002deg);

}







/* tablet */

@media all and (min-width: 768px) and (max-width: 1025px) {

    .background_sticker_01 {

        width: 24rem;

        top: -5rem;

        left: 62rem;

        transform: rotate(11deg);



    }



    .background_sticker_02 {

        width: 57rem;

        top: 104rem;

        left: 42rem;

        transform: rotate(0deg);

    }



    .background_sticker_03 {

        width: 40rem;

        top: 47rem;

        left: 64rem;

        transform: rotate(-15deg);

    }



    .background_sticker_04 {

        width: 39rem;

        top: 64rem;

        left: 36.5rem;

        transform: rotate(-1.0001deg);

    }



    .background_sticker_05 {

        width: 45rem;

        top: -7rem;

        left: 22rem;

        transform: rotate(-19.0002deg);

    }



    .background_sticker_06 {

        width: 41rem;

        top: -3rem;

        left: -7rem;

        transform: rotate(-33deg);

    }



    .background_sticker_07 {

        width: 41rem;

        top: 38rem;

        left: -12rem;

        transform: rotate(-0.9999deg);

    }



    .background_sticker_08 {

        width: 38rem;

        top: 33rem;

        left: 26rem;

        transform: rotate(10.0001deg);

    }



    .background_sticker_09 {

        width: 43rem;

        top: 61rem;

        left: 2rem;

        transform: rotate(-19deg);

    }



    .background_sticker_10 {

        width: 43rem;

        top: 99rem;

        left: -1rem;

        transform: rotate(-19deg);

    }

}



/* pc */

@media all and (min-width:1025px) {

    .background_sticker_01 {

        width: 15rem;

        top: -3rem;

        left: 59rem;

        transform: rotate(11deg);

    }

    .background_sticker_02 {

        width: 36rem;

        top: 38.5rem;

        left: 55rem;

        transform: rotate(0deg);

    }



    .background_sticker_03 {

        width: 24rem;

        top: 13rem;

        left: 73rem;

        transform: rotate(-15deg);

    }



    .background_sticker_04 {

        width: 24rem;

        top: 20rem;

        left: 34.5rem;

        transform: rotate(-6deg);

    }



    .background_sticker_05 {

        width: 29rem;

        top: -8rem;

        left: 31rem;

        transform: rotate(-56deg);

    }



    .background_sticker_06 {

        width: 26rem;

        top: -7rem;

        left: -2.5rem;

        transform: rotate(19.0001deg);

    }



    .background_sticker_07 {

        width: 28rem;

        top: 1rem;

        left: 14rem;

        transform: rotate(-27.9999deg);

    }



    .background_sticker_08 {

        width: 27rem;

        top: 14rem;

        left: -8rem;

        transform: rotate(-8deg);

    }

    .background_sticker_09 {

        width: 29rem;

        top: 33rem;

        left: -4rem;

        transform: rotate(-19deg);

    }

    .background_sticker_10 {

        width: 30rem;

        top: 27.8rem;

        left: 16.8rem;

        transform: rotate(-16deg);

    }

}



.article__header {

    position: relative;

    overflow: hidden;

    height: 110vh;

}



@media all and (min-width:768px)and (max-width:1025px) {

    .article__header {

        position: relative;

        overflow: hidden;

        height: 100vh;

    }

}



.mainVisual {

    width: 22.375rem;

    margin: 34.5vh auto 24vh 1rem;

    z-index: 100;

    position: relative;

}



.star_yellow_1_sp {

    position: absolute;

    width: 3.8rem;

    height: 3.1875rem;

    top: 11.5rem;

    left: 0.8rem;

    transform: translateY(-50%);

}

.star_yellow_1_pc{

    display: none;

}



.star_yellow_2 {

    position: absolute;

    width: 5.1875rem;

    height: 5.1875rem;

    transform: translateY(-50%);

    top: -1.2rem;

    left: 13.1rem;



}



.star_yellow_shadow_1 {

    position: absolute;

    width: 3.8rem;

    height: 3.8rem;

    top: 12.6rem;

    left: 1.4rem;

    transform: translateY(-50%);

}



.star_yellow_shadow_2 {

    position: absolute;

    width: 5.1875rem;

    height: 5.1875rem;

    transform: translateY(-50%);

    top: -0.2rem;

    left: 13.8rem;

}



.scroll_icon {

    position: relative;

    width: 9.5625rem;

    left: -1.8rem;

}



.scroll_icon_star {

    will-change: transform;

    animation: 5s linear infinite rotation1;

}



.scroll_icon_shadow {

    position: absolute;

    top: 1rem;

    left: 1rem;

    animation: 5s linear infinite rotation1;

}



.scroll_icon::after {

    content: '';

    display: inline-block;

    width: 2.4rem;

    height: 4.1875rem;

    background-image: url(../images/scroll_arrow.svg);

    background-size: contain;

    background-position: center;

    background-repeat: no-repeat;

    position: absolute;

    transform: translateY(-50%);

    top: 4.65rem;

    left: 3.57rem;

    z-index: 100;



}



@keyframes rotation1 {

    0% {

        transform: rotate(0);

    }



    100% {

        transform: rotate(360deg);

    }

}



.header_logo {

    z-index: 100;

}



.btn_menu {

    z-index: 100;

}



@media all and (min-width:768px)and (max-width:1025px) {

    .mainVisual {

        width: 78.625rem;

        margin: 34.7vh auto 40.5vh;

    }



    .scroll_icon {

        position: relative;

        width: 17.5625rem;

        top: -23vh;

        left: 3.2rem;

    }



    .scroll_icon::after {

        width: 4.1rem;

        height: 6.1875rem;

        transform: translateY(-50%);

        top: 8.55rem;

        left: 6.7rem;

    }



    .scroll_icon_shadow {

        top: 2rem;

        left: 2rem;

    }





    .star_yellow_1_sp {

        width: 10.1875rem;

        height: 10.1875rem;

        top: 38.5rem;

        left: 7.8rem;

    }



    .star_yellow_2 {

        width: 12.1875rem;

        height: 12.1875rem;

        transform: translateY(-50%);

        top: -1.2rem;

        left: 50.1rem;



    }





    .star_yellow_shadow_1 {

        width: 10.1875rem;

        height: 10.1875rem;

        top: 40.5rem;

        left: 9.8rem;

    }



    .star_yellow_shadow_2 {

        width: 12.1875rem;

        height: 12.1875rem;

        top: 1.2rem;

        left: 52.1rem;

    }

}



/* mv_pc */

@media screen and (min-width:1025px) {

    .mainVisual_logo {

        width: 67rem;

        height: 100vh;

        margin: 1.3rem 12rem;

        display: flex;

        justify-content: center;

        align-items: center;

    }



    .section_mainVisual {

        width: 100vw;

        height: 100vh;

        position: relative;

    }



    .mainVisual {

        margin: 0;

        position: relative;

        will-change: transform, opacity;

    }



    .mainVisual::before {

        width: 10.1875rem;

        height: 10.1875rem;

        top: 28.6875rem;

        left: 59.9375rem;

    }



    .mainVisual::after {

        width: 7.1875rem;

        height: 7.1875rem;

        top: 0.8rem;

        left: 34.1rem;

    }



    .scroll_icon {

        position: absolute;

        width: 15.5625rem;

        top: 63vh;

        left: 4.2rem;

    }



    .scroll_icon::after {

        width: 3.45rem;

        height: 5.1875rem;

        transform: translate(-50%, -50%);

        top: 50%;

        left: 50%;

        z-index: 100;

    }



    .scroll_icon_shadow {

        top: 2.8125rem;

        left: 2.8125rem;

    }



    .mv_star_1 {

        position: absolute;

        top: 9rem;

        left: 14.3rem;

    }



    .mv_star_2 {

        position: absolute;

        top: 11rem;

        left: 12rem;

    }



    .star_yellow_1_pc {

        display: block;

        position: absolute;

        width: 7rem;

        height: 7rem;

        top: 0vh;

        left: 37.8rem;

        transform: translateY(-50%);

    }



    .star_yellow_1_sp{

        display: none;

    }



    .star_yellow_shadow_1 {

        width: 7rem;

        height: 7rem;

        top: 2.5rem;

        left: 39.8rem;

        transform: translateY(-50%);

    }



    .star_yellow_2 {

        width: 8.5rem;

        height: 8.5rem;

        transform: translateY(-50%);

        top: 47vh;

        left: 64rem;

    }



    .star_yellow_shadow_2 {

        width: 8.5rem;

        height: 8.5rem;

        transform: translateY(-50%);

        top: 53vh;

        left: 66.5rem;

    }

}



/*==========================

introduction

==========================*/

.introduction {

    width: 21.5625rem;

    background-color: #dbd2c0;

    border-radius: 0.125rem;

    margin: 4.9375rem auto;

    position: relative;

    z-index: 11;

    box-shadow:

        0 1.9px 2.5px rgba(22, 76, 79, 0.057),

        0 5px 6.1px rgba(22, 76, 79, 0.076),

        0 10.1px 11.4px rgba(22, 76, 79, 0.086),

        0 19.2px 19.8px rgba(22, 76, 79, 0.092),

        0 38.4px 34.8px rgba(22, 76, 79, 0.1),

        0 101px 74px rgba(22, 76, 79, 0.13);

    mix-blend-mode: multiply;

}



.introduction_title {

    padding: 3.95rem 2.4625rem 1.17rem;

    font-family: var(--gill_sans);

    font-size: 3.3875rem;

    font-style: italic;

    font-weight: 800;

    line-height: 3.375rem;

    letter-spacing: 0.031875rem;

}



.introduction_contents {

      font-family: "Zen Maru Gothic", sans-serif;

    font-size: 1.5rem;

    font-weight: 900;

    font-style: normal;

    letter-spacing: 0.05rem;

    text-align: center;

    padding: 1.4rem 2.5625rem;

}



.introduction::after {

    position: absolute;

    content: '';

    display: inline-block;

    width: 8.8125rem;

    height: 8.8125rem;

    background-image: url(../images/crip/crip_black.png);

    background-size: contain;

    background-position: center;

    background-repeat: no-repeat;

    position: absolute;

    transform: translateY(-50%);

    top: -1.1rem;

    left: 1.8rem;

    z-index: 100;

}





.introduction_icon {

    margin: 0 auto;

    width: 17.375rem;

}



.icon_pc {

    display: none;

}



.introduction_contents_name {

    font-size: 2.5rem;

    margin-top: 0.45rem;

}



.introduction_contents_text {

    font-size: 1.05rem;

    line-height: 1.8125rem;

    margin-top: 0.89rem;

    letter-spacing: 0.05rem;

    font-weight: 900;

}



.introduction_sns_icon_items {

    display: flex;

    justify-content: center;

    gap: 1.375rem;

    width: 10.8125rem;

    margin: 2.3625rem auto;



}



.introduction_sns_icon_item {

    transition: 0.2s;

}



.introduction_sns_icon_item:hover {

    transform: scale(1.1);

}



.introduction_sns_icon_item img {

    height: 2.6rem;

}



.contact {

    text-align: center;

    font-family: "Zen Maru Gothic", sans-serif;

    font-size: 1.375rem;

    font-weight: 700;

    margin-top: 2.3125rem;

    padding-bottom: 4.5rem;

}



.mailaddress {

    font-size: 1.3125rem;

    margin-top: 0.5625rem;

    font-weight: 700;

    letter-spacing: 0.0130625rem;

}



.mailaddress_line {

    position: relative;

    width: fit-content;

}



.mailaddress::after {

    position: absolute;

    left: 0;

    content: '';

    width: 100%;

    height: 0.125rem;

    background: #000000;

    bottom: -0.5rem;

    /*アンダーラインがaタグの下端から現れる*/

    transform: scale(0, 1);

    /*アンダーラインの縮尺比率。ホバー前はx方向に0*/

    transform-origin: left top;

    /*変形（アンダーラインの伸長）の原点がaタグ（各メニュー）の左端*/

    transition: transform 0.3s;

    /*変形の時間*/

}



.mailaddress:hover::after {

    transform: scale(1, 1);

}



/* introduction_pc */

@media screen and (min-width:768px) {

    .introduction {

        background-color: transparent;

        box-shadow: none;

    }



    .introduction {

        width: auto;

        margin: 9rem auto 5rem;

    }



    .introduction_title {

        padding: 4.625rem 9.4375rem 4.0625rem 3.8rem;

        font-size: 7.1875rem;

        width: 42.1325rem;

        height: 24.6645rem;

        background-color: #E5DDCF;

        margin: 0.9375rem 5rem;

        transform: rotate(-6.118deg);

        line-height: 7.875rem;

        letter-spacing: 0.031875rem;

        box-shadow: 0 1.9px 2.5px rgba(43, 46, 46, 0.057), 0 5px 6.1px rgba(43, 46, 46, 0.057), 0 10.1px 11.4px rgba(43, 46, 46, 0.057), 0 19.2px 19.8px rgba(43, 46, 46, 0.057), 0 38.4px 34.8px rgba(43, 46, 46, 0.057), 0 101px 74px rgba(43, 46, 46, 0.057);

        position: relative;

        z-index: 51;



    }



    .introduction_title::after {

        position: absolute;

        content: '';

        display: inline-block;

        width: 10.8125rem;

        height: 10.8125rem;

        background-image: url(../images/crip/crip_black.png);

        background-size: contain;

        background-position: center;

        background-repeat: no-repeat;

        position: absolute;

        transform: translateY(-50%);

        top: -1.1rem;

        left: 12.8rem;

        z-index: 100;

    }



    .introduction_contents::after {

        position: absolute;

        content: '';

        display: inline-block;

        width: 10.8125rem;

        height: 10.8125rem;

        background-image: url(../images/crip/crip_black.png);

        background-size: contain;

        background-position: center;

        background-repeat: no-repeat;

        position: absolute;

        transform: translateY(-50%);

        top: -1.5rem;

        left: 41.8rem;

        z-index: 100;



    }



    .introduction::after {

        display: none;

    }



    .introduction_contents_pc {

        background-color: #E5DDCF;

        width: 63.75rem;

        height: auto;

        box-shadow: 0 1.9px 2.5px rgba(22, 76, 79, 0.057), 0 5px 6.1px rgba(22, 76, 79, 0.076), 0 10.1px 11.4px rgba(22, 76, 79, 0.086), 0 19.2px 19.8px rgba(22, 76, 79, 0.092), 0 38.4px 34.8px rgba(22, 76, 79, 0.1), 0 101px 74px rgba(22, 76, 79, 0.13);

        transform: rotate(2.955deg);

        padding: 3.271875rem 4.9375rem 0px 4.9375rem;

        display: flex;

        margin: -7rem auto auto 21rem;

        position: relative;

        z-index: 50;

    }



    .introduction_contents_pc::after {

        position: absolute;

        content: '';

        display: inline-block;

        width: 10.8125rem;

        height: 10.8125rem;

        background-image: url(../images/crip/crip_black.png);

        background-size: contain;

        background-position: center;

        background-repeat: no-repeat;

        position: absolute;

        transform: translateY(-50%);

        top: -1.5rem;

        left: 41.8rem;

        z-index: 100;

    }



    .icon_pc {

        display: block;

    }



    .introduction_icon {

        margin-top: 6rem;

        width: 18rem;





    }



    .introduction_contents {

        width: 32.625rem;

        font-family: "Zen Maru Gothic", sans-serif;

        font-size: 1.5rem;

        font-weight: 900;

        font-style: normal;

        /* 181.25% */

        letter-spacing: 0.8px;

        text-align: left;

        padding: 1.08rem 0 0 2.5625rem;



    }





    .icon_sp {

        display: none;

    }



    .introduction_contents_main_text h3 {

        font-size: 2rem;

        font-weight: 700;

        line-height: 3.4375rem;

    }



    .introduction_sns_icon_items {

        justify-content: left;

        margin: 1.6625rem 0;

    }



    .introduction_sns_icon_item {

        height: 2.57275rem;

    }



    .introduction_sns_icon_item img {

        height: 3.2rem;

    }



    .contact {

        text-align: left;

        font-family: "Zen Maru Gothic", sans-serif;

        margin-top: 1.7125rem;

    }



    .introduction_contents_name {

        font-size: 3.75rem;

        margin-top: 0.2rem;

    }



    .introduction_contents_text {

        font-size: 1.5rem;

        margin-top: 0.85rem;

        font-weight: 700;

        line-height: 2.4375rem;

        letter-spacing: 0.05rem;

    }



    .mailaddress {

        font-size: 1.3125rem;

        margin-top: 0.5625rem;

    }

}