@charset "utf-8";

#attempt .header-inner {
        max-width: 1200px;
        width: 100%;        
        margin: 0 auto 1% auto;        
}
#attempt .header-inner p {
        width: 100%;
        color: #292929;
        background-color: #FFF100;
        margin: 0 auto;
        padding: 1rem 2rem;
        font-size: 21px;
        font-weight: bold;
}
#attempt .header-inner span {
        display: block;
        width: 100%;
        margin: 0 auto;
        padding: 1rem 2rem;
}

#attempt h1 {
        width: auto;
        height: auto;
        padding: 0;
        background-image: none;
        position: absolute;
        left: 27%;
        top: 12rem;
        z-index: 1;
        color: #036eb8;
        font-family: 'Kiwi Maru', serif;
        font-weight: bold;
        font-size: 1.3rem;
        margin: 0;
}

#attempt li {
        list-style: none;
}

#attempt .attempt-title{
        margin: 0 auto;
        padding: 4rem 0 2rem 0;
        max-width: 1200px;
        width: 94%;
        padding-left: 0;
        font-size: 1.7rem;
        text-align: justify;
}


/*----------画像下文字----------*/
#attempt .image-boxtext{
        font-size: 1.3rem;
        float: right;
}
#attempt .image-boxtextbr {
        display: none;
}

/*----------sp画像非表示----------*/
#attempt .image-box01- {
        display: none;
}
#attempt .attempt-title-img- {
        display: none;
}
#attempt .image-box02- {
        display: none;
}
#attempt .attempt-title-img02- {
        display: none;
}

/*----------pc画像設定----------*/
#attempt .image-box01 {
        width: 24%;
        padding-bottom: 0.8rem;
        float: right;
}
#attempt .image-box02 {
        width: 24%;
        padding-bottom: 0.8rem;
        float: right;
}
#attempt .image-box03 {
        margin: 0 auto;
        max-width: 500px;
        width: 60%;
        padding-bottom: 2rem;
}

#attempt .attempt-title-img{
        width: 90%;        
        float: right;
}
#attempt .attempt-title-img02 {
        width: 90%;
        float: right;
}
#attempt .attempt-title-img03 {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
}

/*----------各タイトル----------*/
#attempt .attempt-titletop {
        padding: 0.8rem 0;
        margin-bottom: 2rem;
        background-image: linear-gradient(90deg, #00b8f0 0 19%, #dedede 19%);
        background-repeat: no-repeat;
        background-size: 100% 10%;
        background-position: bottom;
        color: #323232;
        font-weight: bold;
        font-size: 2.5rem;
}

/*----------各文章----------*/
#attempt .attempt-title- {
        margin-bottom: 2rem;
}

#attempt .attempt-title-- {
        margin-bottom: 2rem;
        font-size: 1.3rem;
}

/*----------ホーム等----------*/
#attempt .breadcrumb-box {
        width: 100%;
}
#attempt .breadcrumb {
        max-width: 1200px;
        width: 94%;
        overflow: hidden;
        margin: 0 auto;
        font-size: 14px;
}

@media screen and (max-width:1240px) {
        #attempt .image-boxtextbr {
                display: block;
        }
}


@media screen and (max-width:767px) {
        #attempt .attempt-title {
                padding: 0 2rem;
        }

        #attempt h1 {
                display: none;
        }

        #attempt .attempt-titletop {
                font-size: 1.6rem;
        }

        #attempt .attempt-title {
                font-size: 1.4rem;
        }

        #attempt .attempt-title-- {
                font-size: 1.2rem;
        }

        #attempt .image-box01- {
                width: 100%;
                display: flex;
                align-items: center;
                flex-direction: column;
                padding-bottom: 0.8rem;
        }
        #attempt .attempt-title-img- {
                display: block;
                width: 45%;
                float: right;
        }
        #attempt .image-box02- {
                display: flex;
                align-items: center;
                flex-direction: column;
                width: 100%;
                padding-bottom: 0.8rem;
        }
        #attempt .attempt-title-img02- {
                display: block;
                width: 50%;
                float: right;
        }
        #attempt .image-boxtext{
        font-size: 1.2rem;
        float: left;
}
#attempt .image-box03 {
        margin: 0 auto;
        max-width: 1000px;
        width: 50%;
}

        #attempt .image-box01 {
                display: none;
        }
        #attempt .attempt-title-img {
                display: none;
        }
        #attempt .image-box02 {
                display: none;
        }
        #attempt .attempt-title-img02 {
                display: none;
        }
}

@media screen and (max-width:426px) {
        #attempt .image-box01- {
                width: 100%;
                display: flex;
                align-items: center;
                flex-direction: column;
                padding-bottom: 0.8rem;
        }
        #attempt .attempt-title-img- {
                display: block;
                width: 70%;
                float: right;
        }
        #attempt .image-box02- {
                display: flex;
                align-items: center;
                flex-direction: column;
                width: 100%;
                padding-bottom: 0.8rem;
        }
        #attempt .attempt-title-img02- {
                display: block;
                width: 70%;
                float: right;
        }
        #attempt .image-box03 {
        margin: 0 auto;
        max-width: 1000px;
        width: 70%;
}
}

.effect-fade {
        opacity: 0;
        transform: translate(0, 45px);
        transition: all 300ms;
}

.effect-fade.effect-scroll {
        opacity: 1;
        transform: translate(0, 0);
}