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

html {
    font-size: 62.5%;
}

body {
    font-size: 16px;
    font-size: 1.6rem;
    font-family: "ヒラギノ丸ゴ Pro W4", "ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "HG丸ｺﾞｼｯｸM-PRO", "HGMaruGothicMPRO";

}

@media screen and (max-width: 768px) {
    body {
        font-size: 14px;
        font-size: 1.4rem;
        font-family: "ヒラギノ丸ゴ Pro W4", "ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "HG丸ｺﾞｼｯｸM-PRO", "HGMaruGothicMPRO";
    }
}

svg {
    vertical-align: bottom;
}

/* =======================================
 表示切替
======================================= */
@media screen and (min-width: 769px) {
    .pc {
        display: block;
    }

    .sp {
        display: none;
    }
}

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

    .sp {
        display: block;
    }
}

/* =======================================
 幅指定
======================================= */
@media screen and (min-width: 769px) {
    .w-1000-100 {
        width: 1000px;
        margin: 0 auto;
    }

    .w-1000 {
        width: 1000px;
        margin: 0 auto;
    }

    .w-800 {
        width: 800px;
        margin: 0 auto;
    }

    .w-500 {
        width: 500px;
        margin: 0 auto;
    }

    .w-500-80 {
        width: 500px;
        margin: 0 auto;
    }

    .w-300 {
        width: 300px;
        margin: 0 auto;
    }

    .w-80per {
        width: 80%;
    }

    .w-100per {
        width: 100%;
    }
}

@media screen and (max-width: 768px) {
    .w-1000-100 {
        width: 100%;
        margin: 0 auto;
    }

    .w-1000, .w-800, .w-500 {
        width: calc(100% - 20px);
        margin: 0 auto;
    }

    .w-500-80 {
        width: 80%;
        margin: 0 auto;
    }

    .w-80per {
        width: 80%;
    }

    .w-100per {
        width: 100%;
    }
}

/* =======================================
 フォントサイズ
======================================= */
@media screen and (min-width: 769px) {
    .fs-xxs {
        font-size: 9px !important;
        font-size: 0.9rem !important;
    }

    .fs-xs {
        font-size: 11px !important;
        font-size: 1.1rem !important;
    }

    .fs-s {
        font-size: 13px !important;
        font-size: 1.3rem !important;
    }

    .fs-m {
        font-size: 16px !important;
        font-size: 1.6rem !important;
    }

    .fs-l {
        font-size: 20px !important;
        font-size: 2rem !important;
    }

    .fs-xl {
        font-size: 24px !important;
        font-size: 2.4rem !important;
    }

    .fs-xxl {
        font-size: 30px !important;
        font-size: 3rem !important;
    }

    .fs-bubble {
        font-size: 16px !important;
        font-size: 1.6rem !important;
    }
}

@media screen and (max-width: 768px) {
    .fs-xxs {
        font-size: 7px !important;
        font-size: 0.7rem !important;
    }

    .fs-xs {
        font-size: 10px !important;
        font-size: 1rem !important;
    }

    .fs-s {
        font-size: 11px !important;
        font-size: 1.1rem !important;
    }

    .fs-m {
        font-size: 14px !important;
        font-size: 1.4rem !important;
    }

    .fs-l {
        font-size: 16px !important;
        font-size: 1.6rem !important;
    }

    .fs-xl {
        font-size: 20px !important;
        font-size: 1.8rem !important;
    }

    .fs-xxl {
        font-size: 24px !important;
        font-size: 2.4rem !important;
    }

    .fs-bubble {
        font-size: 12px !important;
        font-size: 1.2rem !important;
    }

}

/* =======================================
 ボックス
======================================= */

.row-center {
    display: -webkit-flex;
    /* Safari */
    display: flex;
    -webkit-flex-wrap: wrap;
    /* Safari */
    flex-wrap: wrap;
    -webkit-align-items: center;
    /* 縦方向中央揃え（Safari用） */
    align-items: center;
    /* 縦方向中央揃え */
    -webkit-justify-content: center;
    /* 横方向中央揃え（Safari用） */
    justify-content: center;
    /* 横方向中央揃え */
}

.row-space-between {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

.row-space-around {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: space-around;
    justify-content: space-around;
}

@media screen and (min-width: 769px) {
    .col2, .col2-2 {
        width: 48%;
        margin-right: 20px;
    }

    .col2, .col2-2:nth-child(2n) {
        width: 48%;
        margin-right: 0;
    }

    .col3-3 {
        width: 30%;
        margin-right: 5%;
    }

    .col3-3:nth-child(3n) {
        width: 30%;
        margin-right: 0;
    }

    .col-icon-3-2 {
        width: 30%;
        margin-right: 5%;
        margin-bottom: 80px;
    }

    .col-icon-3-2:nth-child(3n) {
        width: 30%;
        margin-right: 0;
        margin-bottom: 80px;
    }

    .col-step {
        width: 200px;
    }

    .col-lookfor {
        width: 300px;
    }
}

@media screen and (max-width: 768px) {
    .col2 {
        width: 48%;
    }

    .col2:nth-child(2n) {
        width: 48%;
        margin-right: 0;
    }

    .col2-2 {
        margin: 0 auto;
        width: 100%;
    }

    .col3-3 {
        width: 30%;
        margin-right: 5%;
    }

    .col3-3:nth-child(3n) {
        width: 30%;
        margin-right: 0;
    }

    .col-icon-3-2 {
        width: 48%;
        margin-bottom: 20px;
    }

    .col-step {
        width: 80%;
        margin: 0 auto 20px;
    }

    .col-lookfor {
        width: 80%;
        margin: 0 auto 20px;
    }

    .col3-step:nth-child(3n) {
        width: 30%;
        margin-right: 0;
    }

}

/*------------------------------
画像の上に画像をのせる
--------------------------------*/

.imgOn {
    position: relative;
}

.imgOn-bottom {
    position: absolute;
    bottom: 0;
    z-index: 1;
}

.imgOn-center {
    position: absolute;
    width: 100%;
    top: 50%;
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 1;
}


@media screen and (min-width: 769px) {
    .imgOn-lp-topcopy {
        position: absolute;
        top: 30px;
        left: 30px;
        z-index: 1;
    }

    .imgOn-lp2-topcopy {
        position: absolute;
        width: 35%;
        top: 50%;
        -ms-transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        z-index: 1;
    }

    .imgOn-lp2-topcopy img {
        margin: 0 auto 40px;
    }

    .imgOn-lp-toplogo {
        position: absolute;
        top: 30px;
        right: 30px;
        z-index: 1;
    }

    .imgOn-lp2-toplogo {
        position: absolute;
        top: 30px;
        left: 30px;
        z-index: 1;
    }

    .imgOn-lp-point {
        position: absolute;
        top: -30px;
        left: -30px;
        z-index: 1;
    }


}

@media screen and (max-width: 768px) {
    .imgOn-lp-topcopy {
        position: absolute;
        top: 10px;
        left: 5px;
        width: 68%;
        z-index: 1;
    }

    .imgOn-lp2-topcopy {
        position: absolute;
        top: 55%;
        left: 50%;
        color: #4C4948;
        -ms-transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        z-index: 1;
    }

    .imgOn-lp-toplogo {
        position: absolute;
        top: 10px;
        right: 5px;
        width: 30%;
        z-index: 1;
    }

    .imgOn-lp2-toplogo {
        position: absolute;
        top: 30px;
        left: 50%;
        -ms-transform: translateX(-27%);
        -webkit-transform: translateX(-27%);
        transform: translateX(-27%);
        z-index: 1;
    }

    .imgOn-lp-point {
        position: absolute;
        top: -5px;
        left: -5px;
        z-index: 1;
    }
}

/*------------------------------
背景画像
--------------------------------*/
@media screen and (min-width: 769px) {
    .back-img-lp2 {
        background: url(../img/lp/back_img1.png) no-repeat left bottom, url(../img/lp/back_img2.png) no-repeat right bottom;
        background-color: #E2F0FE;
        background-size: 20%, 20%;
    }
}


/* =======================================
 見出し
======================================= */

@media screen and (min-width: 769px) {
    .label {
        color: #4C4948;
        font-size: 28px;
        text-align: center;
        font-weight: 700;
        margin-bottom: 20px;
    }

    .label2 {
        color: #4C4948;
        font-size: 24px;
        text-align: center;
        font-weight: 700;
        margin-bottom: 20px;
    }

    .about-copy {
        color: #f18e2c;
        font-size: 20px;
        margin-bottom: 20px;
        line-height: 1.4;
    }

    .about-centerline {
        position: relative;
        padding: 0 65px;
        text-align: center;
    }

    .about-centerline:before {
        position: absolute;
        top: calc(50% - 1px);
        left: 0;
        width: 100%;
        height: 1px;
        content: '';
        background: #4C4948;
    }

    .about-centerline span {
        position: relative;
        padding: 0 1em;
        background: #F5F2E9;
    }

    .about-centerline-lp2 {
        position: relative;
        padding: 0 65px;
        text-align: center;
    }

    .about-centerline-lp2:before {
        position: absolute;
        top: calc(50% - 1px);
        left: 0;
        width: 100%;
        height: 1px;
        content: '';
        background: #4C4948;
    }

    .about-centerline-lp2 span {
        position: relative;
        padding: 0 1em;
        background: #FFF;
    }

    .underline-orange {
        position: relative;
        padding-bottom: 1.5rem;
        text-align: center;
        font-size: 28px;
    }

    .underline-orange:before {
        position: absolute;
        bottom: -10px;
        left: calc(50% - 30px);
        width: 60px;
        height: 5px;
        content: '';
        border-radius: 3px;
        background: #f18e2c;
    }

    .underline-blue {
        position: relative;
        padding-bottom: 1.5rem;
        text-align: center;
        font-size: 28px;
        color: #4c4948;
    }

    .underline-blue:before {
        position: absolute;
        bottom: -10px;
        left: calc(50% - 30px);
        width: 60px;
        height: 5px;
        content: '';
        border-radius: 3px;
        background: #0575E6;
    }

    .dotted-orange {
        position: relative;
        padding-bottom: 0.3rem;
        text-align: center;
        margin-bottom: 20px;
    }

    .dotted-orange::after {
        border-bottom: 3px dotted #f18e2c;
        content: "";
        position: absolute;
        bottom: -10px;
        left: 50%;
        transform: translateX(-50%);
        width: 100px;
    }
}

@media screen and (max-width: 768px) {
    .label {
        color: #4C4948;
        font-size: 20px;
        text-align: center;
        font-weight: 700;
        margin-bottom: 20px;
    }

    .label2 {
        color: #4C4948;
        font-size: 18px;
        text-align: center;
        font-weight: 700;
        margin-bottom: 20px;
    }

    .about-copy {
        color: #f18e2c;
        font-size: 16px;
        margin-bottom: 20px;
        line-height: 1.4;
    }

    .about-centerline {
        position: relative;
        padding: 0 30px;
        text-align: center;
    }

    .about-centerline:before {
        position: absolute;
        top: calc(50% - 1px);
        left: 0;
        width: 100%;
        height: 1px;
        content: '';
        background: #4C4948;
    }

    .about-centerline span {
        position: relative;
        padding: 0 1em;
        background: #F5F2E9;
    }

    .about-centerline-lp2 {
        position: relative;
        padding: 0 30px;
        text-align: center;
    }

    .about-centerline-lp2:before {
        position: absolute;
        top: calc(50% - 1px);
        left: 0;
        width: 100%;
        height: 1px;
        content: '';
        background: #4C4948;
    }

    .about-centerline-lp2 span {
        position: relative;
        padding: 0 1em;
        background: #FFF;
    }

    .underline-orange {
        position: relative;
        padding-bottom: 1.5rem;
        text-align: center;
        font-size: 20px;
    }

    .underline-orange:before {
        position: absolute;
        bottom: -10px;
        left: calc(50% - 30px);
        width: 60px;
        height: 5px;
        content: '';
        border-radius: 3px;
        background: #f18e2c;
    }

    .underline-blue {
        position: relative;
        padding-bottom: 1.5rem;
        text-align: center;
        font-size: 20px;
        color: #4c4948;
    }

    .underline-blue:before {
        position: absolute;
        bottom: -10px;
        left: calc(50% - 30px);
        width: 60px;
        height: 5px;
        content: '';
        border-radius: 3px;
        background: #0575E6;
    }

    .dotted-orange {
        position: relative;
        padding-bottom: 0.3rem;
        text-align: center;
        margin-bottom: 20px;
    }

    .dotted-orange::after {
        border-bottom: 3px dotted #f18e2c;
        content: "";
        position: absolute;
        bottom: -10px;
        left: 50%;
        transform: translateX(-50%);
        width: 30%;
    }

}

/* ------------------------
slider
------------------------ */

#sl_area {
    width: 100%;
    height: auto;
    margin: 0 auto 70px;
    padding: 0;
}

/* =======================================
 パーツ
======================================= */

@media screen and (min-width: 769px) {
    .new-member-lp {
        font-weight: bold;
        line-height: 40px;
        text-align: center;
        width: 80%;
        margin: 0 auto;
    }

    .new-member-lp a {
        background: #fff;
        border-radius: 20px;
        border: 1px solid #4C4948;
        color: #f18e2c;
        display: block;
        text-decoration: none;
    }

    .new-member-lp a:hover {
        background: #f18e2c;
        border-radius: 20px;
        border: 1px solid #fff;
        color: #fff;
        display: block;
        text-decoration: none;
    }

    .new-member-lp2 {
        font-weight: bold;
        line-height: 40px;
        text-align: center;
        width: 60%;
        margin: 0 auto;
    }

    .new-member-lp2 a {
        background: #85B2E0;
        border-radius: 20px;
        border: 1px solid #4C4948;
        color: #fff;
        display: block;
        text-decoration: none;
    }

    .new-member-lp2 a:hover {
        background: #fff;
        border-radius: 20px;
        border: 1px solid #fff;
        color: #85B2E0;
        display: block;
        text-decoration: none;
    }

    .new-member-intro {
        font-weight: bold;
        line-height: 40px;
        text-align: center;
        width: 400px;
        margin: 0 auto;
    }

    .new-member-intro a {
        background: #0575E6;
        border-radius: 20px;
        border: 1px solid #4C4948;
        color: #fff;
        display: block;
        text-decoration: none;
    }

    .new-member-intro a:hover {
        background: #fff;
        border-radius: 20px;
        border: 1px solid #4C4948;
        color: #0575E6;
        display: block;
        text-decoration: none;
    }

    .new-member-bluebox {
        font-weight: bold;
        line-height: 40px;
        text-align: center;
        width: 60%;
        margin: 0 auto;
    }

    .new-member-bluebox a {
        background: #fff;
        border-radius: 20px;
        border: 1px solid #4C4948;
        color: #4C4948;
        display: block;
        text-decoration: none;
    }

    .new-member-bluebox a:hover {
        background: #85B2E0;
        border-radius: 20px;
        border: 1px solid #fff;
        color: #fff;
        display: block;
        text-decoration: none;
    }

}

@media screen and (max-width: 768px) {
    .new-member-lp {
        font-weight: bold;
        line-height: 40px;
        text-align: center;
        width: 95%;
        margin: 0 auto;
    }

    .new-member-lp a {
        background: #fff;
        border-radius: 20px;
        border: 1px solid #4C4948;
        color: #f18e2c;
        display: block;
        text-decoration: none;
    }

    .new-member-lp a:hover {
        background: #f18e2c;
        border-radius: 20px;
        border: 1px solid #fff;
        color: #fff;
        display: block;
        text-decoration: none;
    }

    .new-member-lp2 {
        font-weight: bold;
        line-height: 40px;
        text-align: center;
        width: 100%;
        margin: 0 auto;
    }

    .new-member-lp2 a {
        background: #85B2E0;
        border-radius: 20px;
        border: 1px solid #4C4948;
        color: #fff;
        display: block;
        text-decoration: none;
    }

    .new-member-lp2 a:hover {
        background: #fff;
        border-radius: 20px;
        border: 1px solid #fff;
        color: #85B2E0;
        display: block;
        text-decoration: none;
    }

    .new-member-intro {
        font-weight: bold;
        line-height: 40px;
        text-align: center;
        width: 80%;
        margin: 0 auto;
    }

    .new-member-intro a {
        background: #0575E6;
        border-radius: 20px;
        border: 1px solid #4C4948;
        color: #fff;
        display: block;
        text-decoration: none;
    }

    .new-member-intro a:hover {
        background: #fff;
        border-radius: 20px;
        border: 1px solid #4C4948;
        color: #0575E6;
        display: block;
        text-decoration: none;
    }

    .new-member-bluebox {
        font-weight: bold;
        line-height: 40px;
        text-align: center;
        width: 80%;
        margin: 0 auto;
    }

    .new-member-bluebox a {
        background: #fff;
        border-radius: 20px;
        border: 1px solid #4C4948;
        color: #4C4948;
        display: block;
        text-decoration: none;
    }

    .new-member-bluebox a:hover {
        background: #85B2E0;
        border-radius: 20px;
        border: 1px solid #4C4948;
        color: #fff;
        display: block;
        text-decoration: none;
    }
}


@media screen and (min-width: 769px) {
    .login-lp {
        font-weight: bold;
        line-height: 40px;
        text-align: center;
        width: 80%;
        margin: 0 auto;
    }

    .login-lp a {
        background: #fff;
        border-radius: 20px;
        border: 1px solid #4C4948;
        color: #4C4948;
        display: block;
        text-decoration: none;
    }

    .login-lp a:hover {
        background: #f18e2c;
        border-radius: 20px;
        border: 1px solid #fff;
        color: #fff;
        display: block;
        text-decoration: none;
    }
}

@media screen and (max-width: 768px) {
    .login-lp {
        font-weight: bold;
        line-height: 40px;
        text-align: center;
        width: 95%;
        margin: 0 auto;
    }

    .login-lp a {
        background: #fff;
        border-radius: 20px;
        border: 1px solid #4C4948;
        color: #4C4948;
        display: block;
        text-decoration: none;
    }

    .login-lp a:hover {
        background: #f18e2c;
        border-radius: 20px;
        border: 1px solid #fff;
        color: #fff;
        display: block;
        text-decoration: none;
    }
}

@media screen and (min-width: 769px) {
    .step-box {
        background-color: #fff;
        border-radius: 10px;
        border: 1px solid #8DC21F;
        padding: 30px 10px;
        text-align: center;
    }

    .step-box img {
        margin: 20px auto 0;
    }

    .step-box-pblue {
        background-color: #fff;
        border-radius: 10px;
        border: 1px solid #85B1DF;
        padding: 30px 10px;
        text-align: center;
    }

    .step-box-pblue img {
        margin: 20px auto 0;
    }

    .lookfor-box {
        background-color: #fff;
        border-radius: 10px;
        padding: 30px 10px;
        text-align: center;
    }

    .lookfor-box img {
        margin: 20px auto 0;
    }

    .intro-box {
        background-color: #fff;
        border-radius: 10px;
        padding: 60px 10px;
        text-align: center;
    }

}

@media screen and (max-width: 768px) {
    .step-box {
        background-color: #fff;
        border-radius: 10px;
        border: 1px solid #8DC21F;
        padding: 20px 0;
        text-align: center;
    }

    .step-box-pblue {
        background-color: #fff;
        border-radius: 10px;
        border: 1px solid #85B1DF;
        padding: 20px 0;
        text-align: center;
    }

    .lookfor-box {
        background-color: #fff;
        border-radius: 10px;
        padding: 20px 0;
        text-align: center;
    }

    .lookfor-box img {
        margin: 20px auto 0;
    }

    .intro-box {
        background-color: #fff;
        border-radius: 10px;
        padding: 40px 0;
        text-align: center;
    }

}


@media screen and (min-width: 769px) {
    .hukidasi_lblue {
        position: relative;
        width: 280px;
        height: 60px;
        padding-top: 10px;
        background: #FFFFFF;
        text-align: center;
        border: 2px solid #85B2E0;
        color: #4C4948;
        font-weight: bold;
        border-radius: 50px;
        -webkit-border-radius: 50px;
        -moz-border-radius: 50px;
    }

    .hukidasi_lblue:after, .hukidasi_lblue:before {
        border: solid transparent;
        content: '';
        height: 0;
        width: 0;
        pointer-events: none;
        position: absolute;
        top: 100%;
        left: 50%;
    }

    .hukidasi_lblue:after {
        border-color: rgba(255, 255, 255, 0);
        border-top-width: 20px;
        border-bottom-width: 20px;
        border-left-width: 15px;
        border-right-width: 15px;
        margin-left: -15px;
        border-top-color: #FFFFFF;
    }

    .hukidasi_lblue:before {
        border-color: rgba(133, 178, 224, 0);
        border-top-width: 22px;
        border-bottom-width: 22px;
        border-left-width: 17px;
        border-right-width: 17px;
        margin-left: -17px;
        margin-top: 2px;
        border-top-color: #85B2E0;
    }    
    
    
    .hukidasi_lblue2{
        position:relative;
        width:280px;
        height:25px;
        background:#FFFFFF;
        padding:10px;
        text-align:center;
        border:2px solid #85B2E0;
        color:#4C4948;
        font-weight:bold;
        border-radius:40px;
        -webkit-border-radius:40px;
        -moz-border-radius:40px;
    }
    .hukidasi_lblue2:after,.hukidasi_lblue2:before{
        border: solid transparent;
        content:'';
        height:0;
        width:0;
        pointer-events:none;
        position:absolute;
        top:100%;
        left:50%;
    }
    .hukidasi_lblue2:after{
        border-color: rgba(255, 255, 255, 0);
        border-top-width:20px;
        border-bottom-width:20px;
        border-left-width:15px;
        border-right-width:15px;
        margin-left: -15px;
        border-top-color:#FFFFFF;
    }
    .hukidasi_lblue2:before{
        border-color: rgba(133, 178, 224, 0);
        border-top-width:21px;
        border-bottom-width:21px;
        border-left-width:16px;
        border-right-width:16px;
        margin-left: -16px;
        margin-top: 2px;
        border-top-color:#85B2E0;
    }
    
}


@media screen and (max-width: 768px) {
    .hukidasi_lblue {
        position: relative;
        width: 100%;
        height: 50px;
        padding-top: 10px;
        background: #FFFFFF;
        text-align: center;
        border: 2px solid #85B2E0;
        color: #4C4948;
        font-weight: bold;
        border-radius: 50px;
        -webkit-border-radius: 50px;
        -moz-border-radius: 50px;
    }

    .hukidasi_lblue:after, .hukidasi_lblue:before {
        border: solid transparent;
        content: '';
        height: 0;
        width: 0;
        pointer-events: none;
        position: absolute;
        top: 100%;
        left: 50%;
    }

    .hukidasi_lblue:after {
        border-color: rgba(255, 255, 255, 0);
        border-top-width: 20px;
        border-bottom-width: 20px;
        border-left-width: 15px;
        border-right-width: 15px;
        margin-left: -15px;
        border-top-color: #FFFFFF;
    }

    .hukidasi_lblue:before {
        border-color: rgba(133, 178, 224, 0);
        border-top-width: 22px;
        border-bottom-width: 22px;
        border-left-width: 17px;
        border-right-width: 17px;
        margin-left: -17px;
        margin-top: 2px;
        border-top-color: #85B2E0;
    }
    
    .hukidasi_lblue2{
        position:relative;
        width:100%;
        height:20px;
        background:#FFFFFF;
        padding:10px;
        text-align:center;
        border:2px solid #85B2E0;
        color:#4C4948;
        font-weight:bold;
        border-radius:40px;
        -webkit-border-radius:40px;
        -moz-border-radius:40px;
    }
    .hukidasi_lblue2:after,.hukidasi_lblue2:before{
        border: solid transparent;
        content:'';
        height:0;
        width:0;
        pointer-events:none;
        position:absolute;
        top:100%;
        left:50%;
    }
    .hukidasi_lblue2:after{
        border-color: rgba(255, 255, 255, 0);
        border-top-width:20px;
        border-bottom-width:20px;
        border-left-width:15px;
        border-right-width:15px;
        margin-left: -15px;
        border-top-color:#FFFFFF;
    }
    .hukidasi_lblue2:before{
        border-color: rgba(133, 178, 224, 0);
        border-top-width:21px;
        border-bottom-width:21px;
        border-left-width:16px;
        border-right-width:16px;
        margin-left: -16px;
        margin-top: 2px;
        border-top-color:#85B2E0;
    }
    
}



.new-member {
    font-weight: bold;
    line-height: 40px;
    text-align: center;
    width: 360px;
}

.new-member a {
    background: #f18e2c;
    border-radius: 20px;
    color: #fff;
    display: block;
    text-decoration: none;
}

.new-member a:hover {
    opacity: 0.8;
}

.login {
    font-weight: bold;
    line-height: 40px;
    text-align: center;
    width: 360px;
}

.login a {
    background: #fff;
    border-radius: 20px;
    border: 2px solid #f18e2c;
    color: #f18e2c;
    display: block;
    text-decoration: none;
}

.login a:hover {
    opacity: 0.8;
}

.attention {
    line-height: 1.5em;
    margin: 20px 0;
    padding: 40px 40px;
    border: 1px solid #999999;
    border-radius: 5px;
}

ul.list-square {
    padding-left: 20px;
}

ul.list-square li {
    line-height: 1.5;
    list-style-type: square;
}