@charset "utf-8";
/* CSS Document */

    .myroast_lp {
        width: 1100px;
        color: #000;
        margin: 0 auto;
        background-color: #e0d4be;
    }

    .myroast_lp img {
        width: 100%;
    }

    .bg-brown {
        background-color: #e0d4be;
        width: 100%;
        height: 50px;
    }

    .myroast_lp .makuake .txt {
        font-weight: bold;
        font-size: 32px;
        text-align: center;
        padding: 50px 0 30px;
        line-height: 50px;
    }

    .myroast_lp .makuake .txt-weight {
        color: #000;
        font-size: 28px;
    }

    .myroast_lp .txt span {
        color: #50655c;
        font-size: 18px;
    }

    .myroast_lp .makuake .detail-img {
        width: 90%;
        margin: 0 auto;
        padding-bottom: 50px;
    }

    .myroast_lp .explanation {
        background-color: #d19e5d;
        padding-bottom: 50px;
    }

    .myroast_lp .explanation .txt1 {
        font-size: 28px;
        font-weight: bold;
        text-align: center;
        padding: 30px 0 50px;
        line-height: 48px;
    }

    .myroast_lp .explanation .detail-bgimg {
        width: 50%;
        margin: 0 auto;
        padding-bottom: 20px;
    }

    .myroast_lp .explanation .detail-img {
        width: 90%;
        margin: 0 auto;
        padding-bottom: 50px;
    }

    .myroast_lp .explanation .bg {
        background-color: #fff;
        width: 90%;
        margin: 0 auto;
    }

    .myroast_lp .bg .border1 {
        border-top: 5px solid #000;
        margin-bottom: 3px;
    }

    .myroast_lp .bg .border2 {
        border-top: 3px solid #000;
    }

    .myroast_lp .bg .txt2 {
        font-size: 20px;
        font-weight: bold;
        text-align: center;
        padding: 60px 0 15px;
        line-height: 30px;
    }

    .myroast_lp .bg .txt2_2 {
        font-size: 20px;
        font-weight: bold;
        text-align: center;
        padding-bottom: 30px;
        line-height: 30px;
    }

    .myroast_lp .bg .txt-normal {
        font-size: 18px;
        font-weight: normal;
    }

    .myroast_lp .bg .txt2_2 .txt-weight {
        color: #000;
        font-size: 32px;
    }

    .myroast_lp .bg .txt3 {
        font-size: 24px;
        font-weight: bold;
        text-align: center;
        padding: 30px 0;
        line-height: 48px;
    }

    .myroast_lp .bg .txt3 .txt-weight {
        font-size: 28px;
        color: #b98d50;
        font-weight: bold;
    }

    .myroast_lp .bg .txt4 {
        font-size: 18px;
        line-height: 38px;
        margin: 0 50px;
        padding: 0 0 50px;
    }

    .myroast_lp .features {
        background-color: #fff;
        width: 90%;
        margin: 0 auto;
        padding-bottom: 10px;
    }

    .myroast_lp .features .txt1 {
        font-size: 22px;
        margin: 0 3rem 2rem;
        font-weight: bold;
        line-height: 38px;
        color: #b78a51;
    }

    .myroast_lp .features .txt2 {
        font-size: 18px;
        margin: 0 3rem 2rem;
        line-height: 38px;
    }

    .myroast_lp .features .detail-img {
        width: 90%;
        margin: 0 auto;
        padding-bottom: 30px;
    }

    .myroast_lp .features .highlight-box {
        margin: 0 auto 25px;
        border: 5px solid #B98C5380;
        padding: 1rem 2rem;
        font-weight: bold;
        color: #B98C53;
        font-size: 26px;
        background-color: #fff;
        max-width: 100%;
    }


    .myroast_lp .how-to-use {
        background-color: #fff;
        width: 90%;
        margin: 0 auto;
    }

    .myroast_lp .how-to-use .txt1 {
        font-size: 22px;
        margin: 0 3rem 2rem;
        font-weight: bold;
        line-height: 38px;
        color: #b78a51;
    }

    .myroast_lp .how-to-use .txt2 {
        font-size: 18px;
        margin: 0 3rem 2rem;
        line-height: 38px;
    }

    .myroast_lp .how-to-use .detail-img {
        width: 90%;
        margin: 0 auto;
        padding-bottom: 30px;
    }

    .myroast_lp .fuji-royal {
        background-color: #d19e5d;
        padding: 50px 0;
    }

    .myroast_lp .fuji-royal .bg .txt1 {
        font-size: 24px;
        font-weight: bold;
        text-align: center;
        padding: 20px 0 50px;
        line-height: 48px;
    }

    .myroast_lp .fuji-royal .bg .txt2 {
        font-size: 42px;
        font-weight: bold;
        text-align: center;
        line-height: 48px;
    }

    .myroast_lp .fuji-royal .detail-img {
        width: 90%;
        margin: 0 auto;
        padding-bottom: 50px;
    }

    .myroast_lp .fuji-royal .bg {
        background-color: #fff;
        width: 90%;
        margin: 0 auto;
    }

    .myroast_lp .fuji-royal .bg .messege-img {
        width: 90%;
        margin: 0 auto;
        padding: 80px 0 0;
    }

    .myroast_lp .messege .bg .txt1 {
        font-size: 22px;
        font-weight: bold;
        text-align: center;
        padding: 30px 0 50px;
        line-height: 48px;
    }

    .myroast_lp .messege .bg .txt2 {
        font-size: 42px;
        font-weight: bold;
        text-align: center;
        line-height: 48px;
    }

    .myroast_lp .messege .detail-img {
        width: 90%;
        margin: 0 auto;
        padding-bottom: 50px;
    }
    
    .myroast_lp .dev {
        font-size: 16px;
        margin-bottom: 10px;
    }

    .myroast_lp .messege .bg {
        background-color: #fff;
        width: 90%;
        margin: 0 auto;
    }

    .myroast_lp .messege .bg .messege-img {
        width: 60%;
        margin: 0 auto;
        padding: 80px 0 0;
    }

    .myroast_lp .spec {
        background-color: #fff;
        width: 100%;
        margin: 0 auto;
        padding-bottom: 100px;
    }

    .myroast_lp .spec .txt1 {
        font-size: 36px;
        font-weight: bold;
        text-align: center;
        line-height: 48px;
        padding: 100px 0 50px;
    }

    .myroast_lp .spec .detail-img {
        width: 80%;
        margin: 0 auto;
        padding-bottom: 50px;
    }

    .myroast_lp .spec table.info-table {
        border-collapse: collapse;
        width: 80%;
        table-layout: auto;
        margin: 0 auto 40px;
    }

    .myroast_lp .spec table.info-table td {
        vertical-align: top;
        padding: 20px 10px;
        border-bottom: 1px solid #000;
    }

    .myroast_lp .spec table.info-table td.label {
        font-weight: bold;
        white-space: nowrap;
        vertical-align: middle;
        font-size: 22px;
    }

    .myroast_lp .spec table.info-table td.value {
        word-wrap: break-word;
        font-size: 18px;
    }

    .myroast_lp .faq {
        background-color: #fff;
        width: 100%;
        margin: 0 auto;
        padding-bottom: 50px;
        font-family: "Hiragino Sans", "Noto Sans JP", sans-serif;
        line-height: 1.8;
        color: #000;
    }

    .myroast_lp .faq .detail-img {
        width: 90%;
        margin: 0 auto;
        padding-bottom: 50px;
    }

    .myroast_lp .faq .qa-block {
        width: 80%;
        margin: 0 auto;
        margin-bottom: 70px;
    }

    .myroast_lp .faq .qa-item-q {
        display: flex;
        align-items: center;
        margin-bottom: 16px;
    }

    .myroast_lp .faq .qa-item-a {
        display: flex;
        align-items: center;
        margin-bottom: 16px;
    }

    .myroast_lp .faq .icon {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        font-size: 20px;
        margin-right: 12px;
        flex-shrink: 0;
        box-sizing: border-box;
    }

    .myroast_lp .faq .icon.q {
        background-color: #3f6663;
        color: #fff;
    }

    .myroast_lp .faq .icon.a {
        border: 2px solid #3f6663;
        color: #3f6663;
    }

    .myroast_lp .faq .text.q {
        font-weight: bold;
        font-size: 26px;
        line-height: 1.4;
    }

    .myroast_lp .faq .text.a {
        font-size: 18px;
        line-height: 30px;
    }

    .myroast_lp .feature-heading {
        display: flex;
        align-items: center;
        font-size: 36px;
        margin: 5rem auto 2rem;
        font-weight: bold;
        width: 90%;
    }

    .myroast_lp .circle-number {
        width: 2em;
        height: 2em;
        background-color: #466d6c;
        color: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        margin-right: 0.5em;
    }

    .myroast_lp .purchase {
        position: relative;
        padding-bottom: 150px;
        width: 90%;
        margin: 0 auto;
    }

    .myroast_lp .purchase .purchase_btn {
        width: 40%;
        position: absolute;
        bottom: 60px;
        left: 50%;
        transform: translateX(-50%);
    }

    .myroast_lp .purchase_btn:hover img {
        opacity: 0.8;
    }

    .myroast_lp .purchase1 {
        position: relative;
        padding-bottom: 150px;
        width: 50%;
        margin: 0 auto;
    }

    .myroast_lp .purchase1 .purchase1_btn {
        width: 85%;
        position: absolute;
        top: 40px;
        left: 50%;
        transform: translateX(-50%);
    }

    .myroast_lp .purchase1_btn:hover img {
        opacity: 0.8;
    }

    .myroast_lp .features .box {
        width: 90%;
        margin: 0 auto;
    }

    .txt-brown {
        font-size: 20px;
        font-weight: bold;
        color: #b78a51;
    }

    .image-pc {
        display: block;
    }

    .image-sp {
        display: none;
    }

    .br-sp {
        display: none;
    }



    @media (max-width: 750px) {
        .myroast_lp {
            width: 100%;
        }

        .bg-brown {
            height: 25px;
        }

        .txt-brown {
            font-size: 14px;
            -webkit-text-stroke: initial;
        }

        .myroast_lp .txt span {
            font-size: 14px;
        }

        .myroast_lp .makuake .txt {
            font-size: 18px;
            padding: 20px 0 10px;
            line-height: 30px;
        }

        .myroast_lp .makuake .txt-weight {
            font-size: 16px;
        }

        .myroast_lp .makuake .detail-img {
            padding-bottom: 30px;
        }

        .myroast_lp .explanation {
            padding-bottom: 20px;
        }

        .myroast_lp .explanation .txt1 {
            font-size: 16px;
            padding: 10px 0 10px;
            line-height: 30px;
        }

        .myroast_lp .explanation .detail-img {
            padding-bottom: 25px;
        }

        .myroast_lp .explanation .detail-bgimg {
            width: 95%;
            padding-bottom: 0;
        }

        .myroast_lp .bg .txt2 {
            font-size: 14px;
            padding: 20px 0 10px;
            line-height: 20px;
        }

        .myroast_lp .bg .txt2_2 {
            font-size: 14px;
            padding: 10px 0 20px;
            line-height: 20px;
        }

        .myroast_lp .bg .txt-normal {
            font-size: 14px;
            line-height: 25px;
            font-weight: bold;
        }

        .myroast_lp .bg .txt2_2 .txt-weight {
            font-size: 16px;
        }

        .myroast_lp .bg .txt3 {
            font-size: 14px;
            padding: 0;
            line-height: 25px;
        }

        .myroast_lp .bg .txt3 .txt-weight {
            font-size: 16px;
        }

        .myroast_lp .bg .txt4 {
            font-size: 14px;
            line-height: 25px;
            margin: 0 auto 10px;
            padding: 10px 0;
            width: 90%;
            -webkit-text-stroke: 0.4px black;
        }

        .myroast_lp .circle-number {
            width: 1.5em;
            height: 1.5em;
            font-size: 2rem;
        }

        .myroast_lp .feature-heading {
            font-size: 18px;
            margin: 0 auto 1rem;
        }

        .myroast_lp .features {
            padding-bottom: 0px;
        }

        .myroast_lp .features .txt1 {
            font-size: 14px;
            margin: 0 auto 10px;
            line-height: 25px;
            width: 90%;
        }

        .myroast_lp .features .txt2 {
            font-size: 14px;
            margin: 10px auto 20px;
            line-height: 25px;
            width: 90%;
            -webkit-text-stroke: 0.4px black;
        }

        .myroast_lp .features .detail-img {
            padding-bottom: 10px;
        }

        .myroast_lp .features .highlight-box {
            margin: 0 auto 15px;
            border: 3px solid #dbc6a9;
            padding: 0.5rem 0.5rem;
            font-size: 14px;
            max-width: 100%;
        }

        .myroast_lp .purchase {
            padding-bottom: 20%;
        }

        .myroast_lp .purchase .purchase_btn {
            width: 60%;
            bottom: 10%;
        }

        .myroast_lp .purchase1 {
            width: 90%;
            padding-bottom: 30%;
        }

        .myroast_lp .purchase1 .purchase1_btn {
            width: 80%;
            top: 30%;
        }

        .myroast_lp .how-to-use .txt1 {
            font-size: 16px;
            margin: 0 auto 10px;
            line-height: 25px;
            width: 90%;
        }

        .myroast_lp .how-to-use .txt2 {
            font-size: 14px;
            margin: 10px auto;
            line-height: 25px;
            width: 90%;
            -webkit-text-stroke: 0.4px black;
        }

        .myroast_lp .how-to-use .detail-img {
            padding-bottom: 10px;
        }

        .myroast_lp .fuji-royal {
            padding: 25px 0 20px;
        }

        .myroast_lp .fuji-royal .bg .messege-img {
            width: 95%;
            padding: 25px 0 0;
        }

        .myroast_lp .fuji-royal .bg .txt1 {
            font-size: 12px;
            padding: 10px 0;
            line-height: 30px;
        }

        .myroast_lp .fuji-royal .bg .txt2 {
            font-size: 20px;
            line-height: 20px;
        }

        .myroast_lp .fuji-royal .detail-img {
            padding-bottom: 10px;
        }

        .myroast_lp .messege .bg .messege-img {
            width: 95%;
            padding: 25px 0 0;
        }

        .myroast_lp .messege .bg .txt1 {
            font-size: 12px;
            padding: 15px 0 10px;
            line-height: 30px;
        }

        .myroast_lp .messege .bg .txt2 {
            font-size: 20px;
            line-height: 20px;
        }

        .myroast_lp .messege .detail-img {
            padding-bottom: 10px;
        }

        .myroast_lp .dev {
            font-size: 12px;
            -webkit-text-stroke: 0.4px black;
        }

        .myroast_lp .spec {
            padding-bottom: 40px;
        }

        .myroast_lp .spec .txt1 {
            font-size: 20px;
            padding: 20px 0 10px;
        }

        .myroast_lp .spec .detail-img {
            width: 95%;
            padding-bottom: 5px;
        }

        .myroast_lp .spec table.info-table {
            width: 95%;
            margin: 0 auto 10px;
        }

        .myroast_lp .spec table.info-table td.label {
            font-size: 14px;
        }

        .myroast_lp .spec table.info-table td.value {
            font-size: 14px;
        }

        .myroast_lp .spec table.info-table td {
            font-size: 12px;
            padding: 13px 5px;
        }

        .myroast_lp .faq {
            padding-bottom: 10px;
        }

        .myroast_lp .faq .detail-img {
            width: 95%;
            padding-bottom: 20px;
        }

        .myroast_lp .faq .qa-block {
            width: 95%;
            margin-bottom: 25px;
        }

        .myroast_lp .faq .qa-item-q {
            margin-bottom: 10px;
            align-items: center;
        }

        .myroast_lp .faq .qa-item-a {
            margin-bottom: 5px;
            align-items: flex-start;
        }

        .myroast_lp .faq .icon {
            width: 30px;
            height: 30px;
            font-size: 16px;
        }

        .myroast_lp .faq .text.q {
            font-size: 16px;
        }

        .myroast_lp .faq .text.a {
            font-size: 14px;
            line-height: 22px;
        }

        .image-pc {
            display: none;
        }

        .image-sp {
            display: block;
        }

        .br-sp {
            display: inline;
        }
    }