@-webkit-keyframes fadeInLeft {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

@font-face {
    font-family: 'PixelMplus12';
    src: url("/font/" pixelmplus12 "-regular-webfont.woff2") format("woff2"),url("/font/pixelmplus12-regular-webfont.woff") format("woff"),url("/font/PixelMplus12-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal
}

@font-face {
    font-family: 'PixelMplus12';
    src: url("/font/pixelmplus12-bold-webfont.woff2") format("woff2"), url("/font/pixelmplus12-bold-webfont.woff") format("woff"), url("/font/PixelMplus12-Bold.ttf") format("truetype");
    font-weight: bold;
    font-style: normal
}

html, body {
    margin: 0;
    padding: 0;
    font-family: "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
    background-color: #39617A;
    color: #fff;
    background-image: url("/img/background_grass.png");
    background-size: 124px auto;
    background-position: center center;
    min-width: 1040px;
    font-size: 16px
}

@media screen and (max-width: 768px) {
    html, body {
        min-width: 320px
    }
}

* {
    box-sizing: border-box
}

.hero {
    background: url(/img/background_hero.png) no-repeat center top;
    background-size: 100% auto;
    overflow: hidden;
    padding-bottom: 24px
}

.hero_visual {
    margin: 60px auto 0;
    text-align: center
}

.hero_visual img {
    width: 93.54839%
}

@media screen and (max-width: 768px) {
    .hero_visual img {
        width: 100%
    }
}

.share {
    display: flex;
    justify-content: flex-end;
    margin: 40px 32px
}

@media screen and (max-width: 768px) {
    .share {
        margin: 24px 16px 24px 24px
    }
}

.share.is-pc {
    display: flex
}

@media screen and (max-width: 768px) {
    .share.is-pc {
        display: none
    }
}

.share.is-sp {
    display: none
}

@media screen and (max-width: 768px) {
    .share.is-sp {
        display: flex
    }
}

.share_title {
    position: relative;
    padding-right: 26px;
    margin-right: 16px
}

.share_title:after {
    content: "";
    position: absolute;
    width: 22px;
    height: 1px;
    background: #fff;
    display: block;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto 0
}

.share_items {
    display: flex;
    list-style: none;
    align-items: center;
    margin: 0;
    padding: 0
}

.share_item {
    margin: 0 8px
}

.download_items {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center
}

@media screen and (max-width: 768px) {
    .download_items {
        display: block;
        text-align: center
    }
}

.download_item.is-apple img {
    width: 159px
}

.download_item.is-google img {
    width: 207px
}

.twitter {
    width: 840px;
    margin: 40px auto 0;
    display: grid;
    align-items: center;
    text-align: center;
    grid-template-columns:1fr 1fr;
    column-gap: 40px;
    padding: 0 40px;
    position: relative;
    background: rgba(41, 128, 155, 0.5)
}

@media screen and (max-width: 768px) {
    .twitter {
        margin: 40px 24px 0;
        padding: 0 24px;
        width: auto;
        display: block
    }
}

.twitter_top {
    position: absolute;
    display: block;
    height: 24px;
    background: rgba(41, 128, 155, 0.5);
    width: calc(100% - 48px);
    margin: 0 auto;
    top: -24px;
    right: 0;
    left: 0
}

.twitter_top:before {
    content: '';
    display: block;
    width: 16px;
    height: 16px;
    position: absolute;
    background: url(/img/background_twitter.svg) no-repeat;
    top: 8px;
    left: -16px
}

.twitter_top:after {
    content: '';
    display: block;
    width: 16px;
    height: 16px;
    position: absolute;
    background: url(/img/background_twitter.svg) no-repeat top right;
    top: 8px;
    right: -16px
}

.twitter_bottom {
    position: absolute;
    display: block;
    height: 24px;
    background: rgba(41, 128, 155, 0.5);
    width: calc(100% - 48px);
    margin: 0 auto;
    bottom: -24px;
    right: 0;
    left: 0
}

.twitter_bottom:before {
    content: '';
    display: block;
    width: 16px;
    height: 16px;
    position: absolute;
    background: url(/img/background_twitter.svg) no-repeat bottom left;
    bottom: 8px;
    left: -16px
}

.twitter_bottom:after {
    content: '';
    display: block;
    width: 16px;
    height: 16px;
    position: absolute;
    background: url(/img/background_twitter.svg) no-repeat bottom right;
    bottom: 8px;
    right: -16px
}

.twitter_title {
    line-height: 1.8;
    margin: 0
}

.twitter_button {
    margin: 0
}

@media screen and (max-width: 768px) {
    .twitter_button {
        margin: 16px 0 0
    }
}

@media screen and (max-width: 768px) {
    .twitter_button_visual.is-pc {
        display: none
    }
}

.twitter_button_visual.is-sp {
    display: none
}

@media screen and (max-width: 768px) {
    .twitter_button_visual.is-sp {
        display: block
    }
}

.about {
    width: 1040px;
    margin: 160px auto 0;
    background: url(/img/title_about.svg) no-repeat;
    padding: 128px 100px 0
}

@media screen and (max-width: 768px) {
    .about {
        width: auto;
        margin: 80px auto 0;
        padding: 80px 24px 0 50px;
        background-size: 32px auto
    }
}

.about_title {
    font-family: "PixelMplus12", "メイリオ", sans-serif;
    font-size: 32px;
    margin: 0;
    padding: 0;
    line-height: 1.6
}

@media screen and (max-width: 768px) {
    .about_title {
        font-size: 24px
    }
}

.about_description {
    margin: 24px 0 0;
    padding: 0;
    line-height: 2;
    text-align: justify
}

.about_intro {
    width: 840px;
    margin: 0 auto;
    padding-right: 304px;
    background: url(/img/img_about.png) no-repeat right bottom;
    background-size: 278px auto
}

@media screen and (max-width: 768px) {
    .about_intro {
        width: auto;
        padding: 0 0 40vw;
        background-position: center bottom;
        background-size: 80% auto
    }
}

.case {
    width: 1040px;
    margin: 160px auto 0;
    background: url(/img/title_case.svg) no-repeat;
    padding: 128px 100px 0
}

@media screen and (max-width: 768px) {
    .case {
        width: auto;
        margin: 80px auto 0;
        padding: 80px 24px 0 50px;
        background-size: 32px auto
    }
}

.case_title {
    font-family: "PixelMplus12", "メイリオ", sans-serif;
    font-size: 32px;
    margin: 0;
    padding: 0;
    line-height: 1.6
}

@media screen and (max-width: 768px) {
    .case_title {
        font-size: 24px
    }
}

.case_title br {
    display: none
}

.case_description {
    margin: 24px 0 0;
    padding: 0;
    line-height: 2;
    text-align: justify
}

.case_description br {
    display: none
}

.case_intro {
    width: 840px;
    margin: 0 auto;
    padding-right: 304px;
    background: url(/img/img_case.png) no-repeat right bottom;
    background-size: 278px auto
}

@media screen and (max-width: 768px) {
    .case_intro {
        width: auto;
        padding: 0 0 40vw;
        background-position: center bottom;
        background-size: 80% auto
    }
}

.case_items {
    display: grid;
    grid-template-columns:1fr 1fr 1fr;
    list-style: none;
    margin: 80px 0 0;
    padding: 0;
    column-gap: 62px
}

@media screen and (max-width: 768px) {
    .case_items {
        display: block
    }
}

.case_item {
    background: url(/img/icon_case.svg) no-repeat center top;
    padding-top: 70px
}

@media screen and (max-width: 768px) {
    .case_item {
        margin-top: 80px
    }
}

.case_item_title {
    font-size: 20px;
    line-height: 32px;
    margin: 0
}

.case_item_description {
    font-size: 16px;
    line-height: 32px;
    margin: 16px 0 0;
    text-align: justify
}

.howto {
    width: 1040px;
    margin: 160px auto 0;
    background: url(/img/title_howto.svg) no-repeat;
    padding: 128px 100px 0
}

@media screen and (max-width: 768px) {
    .howto {
        width: auto;
        margin: 80px auto 0;
        padding: 80px 24px 0 50px;
        background-size: 32px auto
    }
}

.howto_title {
    font-family: "PixelMplus12", "メイリオ", sans-serif;
    font-size: 32px;
    margin: 0;
    padding: 0;
    line-height: 1.6
}

@media screen and (max-width: 768px) {
    .howto_title {
        font-size: 24px
    }
}

.howto_title br {
    display: none
}

.howto_description {
    margin: 24px 0 0;
    padding: 0;
    line-height: 2;
    text-align: justify
}

.howto_description br {
    display: none
}

.howto_intro {
    width: 840px;
    margin: 0 auto;
    padding-right: 304px;
    background: url(/img/img_howto.png) no-repeat right bottom;
    background-size: 278px auto
}

@media screen and (max-width: 768px) {
    .howto_intro {
        width: auto;
        padding: 0 0 40vw;
        background-position: center bottom;
        background-size: 80% auto
    }
}

.howto_steps {
    list-style: none;
    margin: 0;
    padding: 0
}

.step {
    width: 769px;
    margin: 80px auto 0;
    display: grid;
    grid-template-columns:1fr 1fr
}

@media screen and (max-width: 768px) {
    .step {
        width: auto;
        grid-template-columns:1fr
    }
}

@media screen and (max-width: 768px) {
    .step_visual {
        order: 2;
        margin: 16px 0 0;
        text-align: center
    }
}

@media screen and (max-width: 768px) {
    .step_visual img {
        width: 100%;
        max-width: 320px
    }
}

.step_number {
    font-family: "PixelMplus12", "メイリオ", sans-serif;
    margin: 0;
    color: #29809B;
    font-size: 40px;
    line-height: 43px;
    font-weight: bold
}

.normal_link {
    color: #fff;
}

.step_title {
    font-size: 20px;
    line-height: 32px;
    margin: 16px 0 0
}

.step_description {
    font-size: 16px;
    line-height: 32px;
    margin: 16px 0 0
}

.contact {
    width: 1040px;
    margin: 160px auto 0;
    background: url(/img/title_contact.svg) no-repeat;
    padding: 128px 100px 0;
    text-align: center
}

@media screen and (max-width: 768px) {
    .contact {
        width: auto;
        margin: 80px auto 0;
        padding: 80px 24px 0 50px;
        background-size: 32px auto
    }
}

.contact_visual {
    text-align: center
}

.contact_visual img {
    width: 263px
}

@media screen and (max-width: 768px) {
    .contact_visual img {
        width: 80%
    }
}

.contact_title {
    font-family: "PixelMplus12", "メイリオ", sans-serif;
    font-size: 32px;
    margin: 0;
    padding: 0;
    line-height: 1.6
}

@media screen and (max-width: 768px) {
    .contact_title {
        font-size: 24px
    }
}

.contact_description {
    margin: 24px 0 0;
    padding: 0;
    line-height: 2
}

@media screen and (max-width: 768px) {
    .contact_description {
        text-align: left
    }
}

@media screen and (max-width: 768px) {
    .contact_description br {
        display: none
    }
}

.contact_links {
    display: flex;
    justify-content: center;
    list-style: none;
    align-items: center;
    margin: 40px 0 0;
    padding: 0
}

.contact_link {
    margin: 0 16px
}

.footer {
    display: flex;
    margin: 224px auto 80px;
    justify-content: center;
    align-items: center
}

@media screen and (max-width: 768px) {
    .footer {
        display: block;
        text-align: center
    }
}

.footer_logo {
    margin: 0 76px 0 0
}

@media screen and (max-width: 768px) {
    .footer_logo {
        margin: 0 0 40px
    }
}