/*css*/
body {
    font-size: 14px;
    font-family: Source Han Sans JP, "メイリオ", "游ゴシック体 Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "MS PGothic", "MS Pゴシック", Osaka, Arial, Helvetica, sans-serif;
    color: #3B4043;
    line-height: 1.8;
    text-align: justify;
    word-break: break-all;
}

a {
    color: #3B4043;
}

img {
    width: 100%;
    vertical-align: top;
}

hr {
    margin: 100px 0;
}

.show600,
.show900 {
    display: none;
}

/*--------------------------------------------------
                    パーツ共通
--------------------------------------------------*/
/*basic*/
div,
span {
    background-repeat: no-repeat;
}

.inner {
    max-width: 1300px;
    margin: 0 auto;
}

.inner_m {
    max-width: 1100px;
    margin: 0 auto;
}
.inner_s {
    max-width: 800px;
    margin: 0 auto;
}

.p10 {
    padding: 0 20px;
}

.m10 {
    margin: 0 10px;
}
.mt10 {
    margin-top: 10px;
}

.mb10 {
    margin-bottom: 10px;
}
.mb20 {
    margin-bottom: 20px;
}

.mb40 {
    margin-bottom: 40px;
}

.center {
    text-align: center;
}

.left {
    text-align: left;
}


/*------------------*/
.tokkyo img {
    width: 250px;
}

.tokkyo span {
    border: solid 1px #ACACAC;
    color: #ACACAC;
    display: inline-block;
    margin: 18px 0;
    font-size: 16px;
    padding: 5px 10px;
}

/*------------------*/
.shadow_white {
    text-shadow: 1px 1px 0 #FFF, -1px -1px 0 #FFF,
        -1px 1px 0 #FFF, 1px -1px 0 #FFF,
        0px 1px 0 #FFF, 0-1px 0 #FFF,
        -1px 0 0 #FFF, 1px 0 0 #FFF;
}

/*------------------*/

/*header*/
.fix_link {
    position: fixed;
    width: 60px;
    right: 0;
    top: 150px;
    z-index: 20;
}

.fix_link img {
    margin-bottom: 20px;
    opacity: .8;
}

.fix_link img:hover {
    opacity: 1;
    -webkit-transition: all 0.8s;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

header {
    position: relative;
    padding-top: 90px;
}

.header_top {
    position: fixed;
    width: 100%;
    height: 90px;
    background-color: #fff;
    text-align: center;
    background-color: #fff;
    opacity: 0.95;
    top: 0;
    z-index: 20;
}

.header_top_inner {
    position: fixed;
    height: 90px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 100%;
}

.logo img {
    width: 170px;
}

.header_menu {
    width: calc(100% - 200px);
}

.header_menu li {
    border-right: solid 1px #ccc;
    padding: 0 5px;
}

.header_menu a {
    display: block;
}

.header_menu a:hover {
    background-color: #dddddd;
    border-radius: 3px;
}

.header_visual {
    background-size: cover;
    height: 35vw;
}
/*
.header_visual p {
    background-color: rgba(0,0,0,0.5);
    text-align: center;
    padding: 10px;
    color: #fff;
}
*/
/*
.header_visual a {
    color: #fff;
    text-decoration: underline;
}
*/
.top .header_visual {
    background-image: url(../img/top-visual.jpg);
}

.g-mist .header_visual {
    background-image: url(../img/g-mist-visual.jpg);
}

.service .header_visual {
    background-image: url(../img/service-visual.jpg);
}
.company .header_visual,
.application .header_visual {
    height: 0;
}


.mobile {
    background-position: center;
    background-size: 20px;
    background-color: #707F89;
    right: 10px;
    top: 10px;
    width: 50px;
    height: 50px;
    border-radius: 4px;
    /*    position: absolute;*/
    position: fixed;
    z-index: 21;
}

.mobile:hover {
    cursor: pointer;
}

.open {
    background-image: url(../img/mobile-open.png);
}

.close {
    background-image: url(../img/mobile-close.png);
}

.obi {
    background-color: #EBEBEB;
    padding: 10px;
}

/*---------------*/
.order {
    background-color: #1D1D1D;
    color: #fff;
    font-size: 30px;
    height: 90px;
    border-radius: 45px;
    width: 100%;
    max-width: 500px;
    position: relative;
}

.order:before {
    position: absolute;
    content: "";
    width: 100%;
    height: 90px;
    border-radius: 45px;
    background-color: #000000;
    left: 0;
    top: 10px;
    z-index: -1;
}

.order:hover {
    cursor: pointer;
}
.order:disabled:hover {
    cursor:default;
}
.order:disabled {
    background-color: #bababa;
}
.order:disabled:before {
    background-color: #838383;
}
/*-------------------------------------------footer*/
footer {
    background-color: #F5F5F5;
    margin-top: 100px;
    padding-top: 20px;
}

footer .box {
    border-bottom: solid 1px #C8C8C8;
    padding-bottom: 45px;
    margin-bottom: 45px;
}

footer h4 {
    font-size: 22px;
    color: #1A7ABE;
    margin-bottom: 10px;
}

footer p {
    font-size: 16px;
}

.footer_menu {
    background-color: #F0F3F5;
    padding: 20px;
}

.footer_menu li {
    padding-right: 10px;
    margin-right: 10px;
    position: relative;
}

.footer_menu li:after {
    position: absolute;
    content: "/";
    right: 0;
}

.footer_copy {
    background-color: #3B4043;
    color: #fff;
    padding: 20px;
}









/*--------------------------------------------------
                    フォント共通
--------------------------------------------------*/
.b {
    font-weight: bold !important;
}

.f_xl {}

.f_l {
    font-size: 40px;
    line-height: 2.2;
}

.f_m {
    font-size: 25px;
    line-height: 2.2;
}

.f_s {
    font-size: 12px;
}





/*--------------------------------------------------
                    トップページ
--------------------------------------------------*/
.top .bnr1 {
    background-color: #E8E8E8;
    font-size: 40px;
    padding: 25px 10px;
}

.top .bnr1 span {
    font-size: 53px;
    -webkit-text-emphasis: filled dot #3B4043;
    text-emphasis: filled dot #3B4043;
}

.top1_1 > div {
    background-image: url(../img/top1_1.jpg);
    background-position: top;
    background-size: contain;
    margin-top: 30px;
    padding-top: 50px;
}

.top1_1 > div > p {
    font-size: 25px;
    line-height: 2.2;
}

.top .tokkyo {
    margin-top: 75px;
}

.top1_2 {
    background-color: #F1F1F1;
    padding: 60px 10px 70px;
    font-weight: bold;
    font-size: 49px;
    line-height: 1;
    margin: 90px 0;
}

.top1_2 .span1 {
    font-size: 26px;
}

.top1_2 .span2 {
    font-size: 36px;
}

.top1_3 .feature {
    margin: 70px 0 35px;
}

.feature .split_inner {
    border: solid 3px #000;
    height: 60px;
    border-radius: 30px;
    font-size: 18px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-weight: bold;
    position: relative;
    margin-bottom: 10px;
}

.feature .split_inner:before {
    position: absolute;
    content: "";
    width: 25px;
    height: 20px;
    background-image: url(../img/check.png);
    left: 5px;

}

.feature .split_inner span {
    font-size: 13px;
}

.top .box1 {
    background-color: #F7F7F7;
    border: solid 1px #707070;
    padding: 22px;
    font-size: 22px;
}

.midasi {
    text-align: center;
    font-size: 52px;
    margin-bottom: 50px;
}

.midasi span {
    border-bottom: solid 4px #3B4043;
}

.midasi + p {
    margin-bottom: 30px;
}

.top2 .split {
    margin-bottom: 50px;
    /*    font-size: 16px;*/
}

.top2 h4 {
    padding: 20px 0 5px;
}

.bnr2 {
    background-color: #237CE2;
    margin-bottom: 20px;
}

.top3 .feature .split_inner {
    height: 46px;
    border-color: #237CE2;
    color: #237CE2;
    font-size: 15px;
}

.top3 .feature .split_inner:before {
    background-image: url(../img/check_blue.png);
    background-size: cover;
}

.flow {
    margin-bottom: 100px;
}

/*--------------------------------------------------
                    ジーミストとは
--------------------------------------------------*/
.g-mist footer {
    margin-top: 0;
}
.g-mist1 .box {
    background-color: #F7F6F6;
    padding: 50px 100px;
}

.g-mist1_1 {
    padding-top: 50px;
    padding-bottom: 50px;
    background-image: url(../img/g-mist1-1.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right;
}

.g-mist1_1 h2 {
    font-size: 59px;
    margin-bottom: 50px;
}

.g-mist1 .bnr {
    background-color: #050505;
    padding: 60px;
    border-top: solid 6px #64D3EC;
    border-bottom: solid 6px #64D3EC;
    background-image: url(../img/bnr-bk.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top;
    margin-bottom: 100px;
    color: #fff;
}

.g-mist1 .bnr span {
    color: #fff;
    border-color: #fff;
}

.g-mist2_1 {
    background-color: #7EDFFF;
    padding-top: 100px;
    padding-bottom: 70px;
    background-image: url(../img/g-mist2-1.jpg);
    background-repeat: repeat-x;
}

.g-mist2_1 .box {
    background-color: #fff;
    padding: 50px 100px;
    margin: 0 20px 40px;
}

.g-mist2_1 .box h4 {
    font-size: 35px;
    margin-bottom: 25px;
}

.g-mist2_1 .box h4 + p {
    line-height: 2;
    margin-bottom: 60px;
}

.g-mist3 {
    margin-top: 130px;
}

.g-mist3 .box {
    border: solid 1px #000000;
    padding: 10px;
    font-size: 12px;
    margin-top: 30px;
}

.g-mist3_content {
    width: 750px;
}

.g-mist3 .box {
    border: solid 1px #000000;
    padding: 10px;
    font-size: 12px;
    margin-top: 30px;
}

.g-mist3_img {
    width: calc(100% - 750px);
}

.g-mist3_img img {
    max-width: 300px;
}

.g-mist2 .obi2 {
    display: inline-block;
    font-size: 27px;
    border-top: solid 1px #707070;
    border-bottom: solid 1px #707070;
    margin-top: 80px;
    margin-bottom: 45px;
}


/*--------------------------------------------------
                    定期販売
--------------------------------------------------*/
.service1.con1 {
    text-align: center;
}

.service1.con1 h2 {
    margin-bottom: 50px;
}

.service1.con1 h3 {
    font-size: 19px;
    padding: 5px 0;
}
.service1.con1 h3 span {
    display: block;
    font-size: 12px;
    color: #7e7e7e;
    font-weight: normal;
    margin-bottom: 10px;
}

.service1.con1 p {
    font-size: 14px;
    text-align: left;
}

.service1.con1 img {
    max-width: 180px;
}
.service1 .title {
    display: block;
/*    background-color: #38b2e8;*/
/*    color: #fff;*/
    padding: 5px;
    margin-bottom: 10px;
    font-weight: bold;
    border-bottom: dotted 2px #ccc;
}
.service1 .youto span {
    display: inline-block;
    margin: 3px;
    background-color: #ebebeb;
    padding: 2px 4px;
    font-size: 12px;
    color: #404040;
    border-radius: 3px;
}

.midasi2 {
    position: relative;
    font-size: 23px !important;
    font-weight: bold;
    text-align: center !important;
    margin-bottom: 80px;
}

.midasi2 span {
    position: relative;
}

.midasi2:before,
.midasi2 span:before {
    position: absolute;
    content: "";
}

.midasi2:before {
    width: 100%;
    height: 1px;
    background-color: #ccc;
    left: 0;
    top: 50%;
    z-index: -10;
}

.midasi2 span:before {
    position: absolute;
    content: "";
    width: calc(100% + 30px);
    height: 10px;
    background-color: #fff;
    top: 50%;
    left: -15px;
    z-index: -5;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.midasi2 + * {
    margin-bottom: 100px;
}

.box2 {
    border: solid 1px #ccc;
    padding: 20px;
    margin-bottom: 40px;
}
.service button {
    margin-top: 100px;
}

/*--------------------------------------------------
                    会社概要
--------------------------------------------------*/
.other_title {
    margin-top: 100px;
}
.company hr,
.application hr {
    margin: 0 0 70px;
}
.company table a {
    color: #00a9cc;
    text-decoration: underline;
}
.company table {
    font-size: 16px;
    width: 100%;
}
.company th,
.company td {
    border: solid 1px #E6E6E6;
    padding: 20px 10px;
}
.company th {
    font-weight: bold;
    width: 200px;
    background-color: #FBFBFB;
}
.company td {
    width: calc(100% - 200px);
}

.ggmap {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}


/*--------------------------------------------------
                    お申込み
--------------------------------------------------*/
.application .order1 .obi {
    margin-top: 40px;
    margin-bottom: 25px;
    text-align: center;
    font-weight: bold;
}
.application .order1 .title {
    margin-bottom: 60px;
    margin-top: 0;
    background-color: #227CE2;
    color: #fff;
}
.application .caution {
    margin: 70px 0 0px;
    font-size: 18px;
}
.application .terms {
    padding: 35px;
    border: solid 1px #E2E2E2;
}
.application .terms p {
    border: solid 1px #707070;
    padding: 5px;
    height: 400px;
    overflow: scroll;
}
.application .check {
    font-size: 18px;
    margin: 20px 0 50px;
}
.application button {
    margin-bottom: 20px;
}

/*20201106追加*/
.service_table {
    font-size: 16px;
    margin-bottom: 10px;
}
.service_table table {
    width: 100%;
}
.service_table tr:nth-child(2n + 1) {
    height: 50px;
}
.service_table tr:nth-child(2n + 2) {
    height: 40px;
}
.service_table tr:nth-child(2) {
    height: 60px;
}

.service_table tr:first-child {
    height: 220px;
}
.service_table tr:first-child td:first-child {
    width: 195px;
}
.service_table img {
    max-width: 160px;
}
.service_table td,
.service_table th {
    border: solid 1px #C6CDD0;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
/*    padding: 5px 15px;*/
}
.service_table th {
    background-color: #CDEBF5;
}
.service_table .table_col th {
    background-color: #0099CB;
    color: #fff;
}
.service_table .fm {
    font-size: 19px;
    font-weight: bold;
    text-align: left;
    
    position: relative;

}
.service_table .fl {
    font-size: 22px;
    font-weight: bold;
}
.service_table label {
    display: block;
    width: 100%;
    height: 100%;
    padding: 5px 15px;
}
.service_table label:hover {
    cursor: pointer;
}
.service_table input {
    position: absolute;
    content: "";
    right: 10px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}




.service_table.other tr:nth-child(2) {
    height:40px;
}
.service_table.other tr:nth-child(3) {
    height: 20px;
    font-size: 14px;
    background-color: #e8e8e8;
}
.service_table.other tr:nth-child(3) td {
    font-weight: bold;
}
.service_table.op tr {
    height: 60px;
}
.service_table.op td {
    padding: 5px 10px;
}

/*20201109追加*/
.plan_details {
    margin: 40px 60px 0;
}
.plan_details h3 {
    margin-bottom: 10px;
    font-size: 20px;
}
.plan_details .details {
    border-top: solid 3px #707070;
    border-bottom: solid 3px #707070;
    font-size: 16px;
    
}
.plan_details .details li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 15px 30px;
    border-bottom: solid 1px #ccc;
}
.plan_details .details .t {
    display: inline-block;
    width: 250px;
    font-weight: bold;
}
/*20201110追加*/
.step1 > div,
.step2 > div,
.step3 > div {
    margin-bottom: 10px;
}
.terms {
    margin-top: 20px;
}
.terms .title {
    display: inline-block;
    border-bottom: dotted 2px #717171;
    font-weight: bold;
}
.terms p {
    margin-bottom: 10px;
}
.red {
    color: #ff0b0b;
}
.kikaku_wrapper {
    font-size: 11px;
    background-color: #fff;
    padding: 15px;
    max-width: 1200px;
    margin: 0 auto;
}
.kikaku_wrapper p {
    margin-top:10px;
    text-decoration: underline;
}
.kikaku li {
    border-bottom: dotted 2px #ccc;
    padding: 8px;
}
.kikaku span {
    display: inline-block;
    width: 100px;
    font-weight: bold;
}
/*20201110追加*/
.popup_info {
    display: inline-block;
    font-size: 12px;
    margin-top: 20px;
    background-color: #3ebdf5;
    color: #fff;
    padding: 5px 20px;
    border-radius: 20px;
}
.info p {
    background-color: rgba(0,0,0,0.5);
    text-align: center;
    padding: 10px;
    color: #fff;
}
.info a {
    color: #fff;
    text-decoration: underline;
}
/*20201111追加*/
.gaiyou p {
    border: none !important;
    text-align: center !important;
    font-size: 22px !important;
    font-weight: bold !important;
    margin-bottom: 10px;
}
.gaiyou li img {
    width: 28px;
    margin-right: 10px;
}
.gaiyou ul {
    margin-bottom: 30px;
}
.gaiyou li {
    text-align: left;
    font-size: 18px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: dotted 1px #ccc;
}