@charset "UTF-8";
:root{
    --jcom-lemon:#fffacf;
    --jcom-yellow:#ffffee;
    --jcom-orange:#f47900;
}

html{
    scroll-behavior: smooth;
}

/* common */
body {
    font-family: 'Noto Sans JP', 'meiryo', 'メイリオ', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Osaka', 'sans-serif';
    margin: 0;
    padding: 0;
    background-color: #fff;
    color: #333;
    line-height: 1.7;
}

.sp_only{
    display: none;
}

main{
    font-size: 1.8rem;
    
    h2 {
        margin: 1em auto;
    }
    img{
        max-width: 100%;
        vertical-align: bottom;
    }
    
    .bg-yel {
        background-color: var(--jcom-yellow);
    }
    .bg-lemon {
        background-color: var(--jcom-lemon);
    }
    
    section {
        display: grid;
        place-items: center;
        
        .sp-img{
            display: none;
        }
        ul {
            padding-left: 2em;
        }
    }
}

/* common_topボタン */
#btn-top{
    display: block;
    width: 60px;
    height: 60px;
    background: url(../img/common/PageTop.png) no-repeat left center;
    position: fixed;
    bottom: 35px;
    right: 19px;
    cursor: pointer;
    z-index: 2;

    a {
        display: block;
        height: 100%;
    }
}

/* top */
.bg-lemon.pc_only {
    padding-top: 3em;

    .grid {
        display: grid;
        grid-template-columns: 1fr auto;
        place-items: center;
        width: fit-content;
        margin: 0 auto;
        
        h1 {
            grid-area: 1 / 1;
        }
        div.img {
            grid-area: 2 / 1;
        }
        p {
            grid-area: 3 / 1;
            font-size: 20px;
            font-weight: bold;
        }
        div.img-right {
            grid-row: span 3 / span 3;
            grid-column-start: 2;
            grid-row-start: 1;
        }
    }
}

/* btns */
ul.btns {
    display: grid;
    grid-template-columns: repeat(2, auto);
    column-gap: 30px;
    place-content: center;
    margin: 2em auto;
    padding: 0;

    li {
        width: 300px;
        height: 81px;
        list-style: none;

        a {
            display: block;
            height: 100%;
            background-size: contain;
            background-position: center;
            background-repeat: no-repeat;
        }
    }
    .btn1 a {
        background-image: url(../img/page_menu_1_off.png);

        &:hover {
            background-image: url(../img/page_menu_1_on.png);
        }
    }
    .btn2 a {
        background-image: url(../img/page_menu_3_off.png);

        &:hover {
            background-image: url(../img/page_menu_3_on.png);
        }
    }
}

/* useful */
#useful {
    h3 {
        margin: 1em auto 0;
        font-size: 30px;
        font-weight: bold;
        color: var(--jcom-orange);
        text-align: center;
    }
    > p {
        text-align: center;
    }
    .grid {
        display: grid;
        grid-template-columns: auto 1fr;
        place-items: center;
        max-width: 800px;
    }
}

/* startline */
#startline {
    margin: 3em auto;
    padding: 2em 0 3em;

    ul {
        display: grid;
        grid-template-columns: repeat(2,1fr);
        column-gap: 30px;
        max-width: 850px;
        padding: 0;
        list-style: none;

        li div.grid {
            display: grid;
            place-items: center;
            row-gap: 1em;

            p {
                display: grid;
                grid-template-columns: auto 1fr;
                column-gap: 0.8em;
                margin: 0;
                font-weight: bold;
                color: var(--jcom-orange);

                &:before {
                    content: "";
                    width: 50px;
                    height: 50px;
                    background-size: cover;
                    background-position: center;
                    background-repeat: no-repeat;
                }
            }
            .img {
                width: 260px;
            }
        }
        li:first-of-type {
            grid-area: 1 / 1;
            display: grid;
            grid-template-columns: 1fr auto;
            place-items: center;

            &::after {
                content: "";
                display: inline-block;
                width: 50px;
                height: 50px;
                background-image: url(../img/arrow_right_orange.png);
                background-size: contain;
                background-position: center;
                background-repeat: no-repeat;
            }

            p:before {
                background-image: url(../img/startline_num1.png);
            }
        }

        li:last-of-type {
            grid-area: 1 / 2;

            p:before {
                background-image: url(../img/startline_num2.png);
            }
        }
    }
}

/* account */
#account {
    display: grid;
    place-items: center;
    margin: 0 auto 7em;

    .img {
        transition: 0.3s;

        &:hover {
            opacity: 0.8;
        }
    }
}

@media screen and (max-width: 767px){

    /* common */
    main {
        font-size: 1.6rem;

        .pc_only { display: none !important; }
        .sp_only { display: block; }
        .pc-img { display: none !important; }
        .sp-img { display: unset !important; }

        h2 {
            max-width: 300px;
        }
    }

    /* top */
    .bg-lemon.sp_only {
        padding: 1em 0;

        .grid {
            display: grid;
            place-items: center;

            h1 {
                margin: 0;
                padding: 0 12px;
            }
            a {
                display: inline-block;
                max-width: calc(100% - 60px);
                padding: 0 12px;
            }
        }

    }


    /* btns */
    ul.btns {
        column-gap: 1px;
        margin: 0 auto 1em;

        li {
            width: calc(50vw - 3px);
            height: 6em;
            max-height: 4em;
        }
        .btn1 a {
            background-image: url(../img/sp/page_menu_1_off.png);

            &:hover {
                background-image: url(../img/sp/page_menu_1_off.png);
            }
        }
        .btn2 a {
            background-image: url(../img/sp/page_menu_3_off.png);

            &:hover {
                background-image: url(../img/sp/page_menu_3_off.png);
            }
        }
    }

    /* useful */
    #useful {
        h3 {
            margin: 0 auto;
            font-size: 22px;
        }
        p {
            margin: 0;
        }
        .grid {
            grid-template-columns: auto;

            .img {
                grid-area: 2 / 1;
            }
            ul {
                grid-area: 1 / 1;
                padding-left: 2em;
            }
        }
    }

    /* startline */
    #startline {
        padding: 3em 1em;

        ul {
            grid-template-columns: auto;
            row-gap: 1em;

            li div.grid {
                place-items: unset;

                p {
                    display: inline-block;
                    min-height: 40px;
                    padding-left: 3.3em;
                    position: relative;
                }
                p:before {
                    display: inline-block;
                    width: 40px;
                    height: 40px;
                    position: absolute;
                    top: 3px;
                    left: 5px;
                }
                .img {
                    width: 95%;
                    margin: 0 auto;
                    text-align: center;
                }
            }
            li:first-of-type {
                &::after {
                    content: unset;
                }
                p {
                    grid-area: 1 / 2;

                    span.sp_only {
                        grid-area: 1 / 2;
                        display: inline;

                        a {
                            color: var(--jcom-orange);
                            text-decoration: underline;
                        }
                    }
                }
            }

            li:last-of-type {
                grid-area: 2 / 1;

                div.grid {
                    p {
                        display: block;
                        text-align: start;
                    }
                }
            }
        }
    }

    /* account */
    #account {
        padding: 0 1em;
    }
}