@charset "UTF-8";

:root{
--black: #3c3c3c;
--green: #46645A;
--lightgreen: #94bec0;
--brown: #8f785f;
--lightblue: #e8eef4;
--grey: #eae5da;
--darkgrey :#efefef;
--yellow: #fff791;
--white: #fff;
}

html{
    color: var(--black);
    font-size: 62.5%;
    font-weight: 400;
    line-height: 1.5;
    font-family: "Noto Serif JP", serif;
    /* font-family: "Noto Sans JP", sans-serif; */
    /* font-family: "Shippori Mincho", serif; */
    /* font-family: "Poppins", sans-serif; */
    /* font-family: "din-2014", sans-serif; */
    /* font-family: "adobe-garamond-pro", serif; */
    } 

img{
   width: 100%;
} 

/* =====共通===== */
@media screen and (max-width: 768px){
    .sub_title{
    font-size: 1.8rem;
    font-weight: 500;
    font-family: "din-2014", sans-serif;
    text-align: center;
    letter-spacing: 0.08rem;
    margin-bottom: 10px;
}

h2{
        font-size: 2.4rem;
        font-weight: 400;
        text-align: center;
    }

    h3{
        font-size: 2.4rem;
        font-weight: 400;
        text-align: center;
        font-family: "Noto Sans JP", sans-serif;
    }

    .btn{
        display: block;
        border: 0.5px solid var(--black);
        background-color: var(--white);
        width: 220px;
        height: 45px;
        margin: 30px auto 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        font-weight: 400;
        font-family: "Noto Sans JP", sans-serif;
        position: relative;
    }
     .btn::after{
        content: "";
        width: 1px;
        height: 18px;
        position: absolute;
        top: 13px;
        right: 10px;
        background: url(/images/btn_arrow.svg) no-repeat center;
        width: 15px;
        height: 15px;
    }

    .plan_btn{
        display: block;
        width: 220px;
        height: 30px;
        margin: 0 auto;
        font-size: 1.5rem;
        font-weight: 400;
        font-family: "Noto Sans JP", sans-serif;
        position: relative;
        color: var(--white);
        position: relative;
         display: flex;
        align-items: center;
        justify-content: center;
    }
    .plan_btn::after{
       content: "";
        width: 1px;
        height: 18px;
        position: absolute;
        top: 8px;
        right: 5px;
        color: var(--white);
        background: url(/images/btn_arrow_white.svg) no-repeat center;
        width: 15px;
        height: 15px;
    }

    .marker{
        background-color: var(--yellow);
    }
}




/* =============== LINE =============== */
@media screen and (max-width: 768px){
    .line_card{
        background-color: var(--white);
        position: absolute;
        top: 150px;
        padding: 20px;
        border-radius: 10px;
        width: 60%;
        margin-left: 5%;
    }

    .line h1{
        margin-top: 15px;
        font-size: 1.6rem;
        color: #000000;
        font-family: "Noto Sans JP", sans-serif;
    }
    .line p{
        margin-top: 15px;
        font-size: 1rem;
        color: #000000;
        font-family: "Noto Sans JP", sans-serif;
    }
}