@charset "utf-8";

@media print, screen and (min-width:768px) {
    /* .support {
        background-color: #fff
    } */
    #price .outline {
        background: #f5f3f0;
        color: #4d4d4d;
        font-size: 1em
    }
    #price .outline h2 {
        font-size: 2.5em;
        color: #4d4d4d;
        padding-bottom: 30px;
        line-height: 1.5em
    }
    #price .outline .h2-sub {
        font-size: .6em;
        line-height: 1.8em;
        padding-top: 0.8em;
        color: #4d4d4d;
    }
    .red-font {
        color: #78282a;
        font-weight: 600;
        font-size: 1.15em
    }
    .normal_font_s {
        font-size: 1em;
        font-weight: 400;
        color: #4d4d4d
    }
    #option-title {
        background: #f0e6c9;
        height: 83px !important;
        color: #78282a;
        font-size: 2em;
        font-weight: 600
    }
    .group-bg {
        background: #f5f1e6;
        color: #78282a;
        font-size: 2em;
        font-weight: 600
    }
    .border-bottom {
        border-bottom: 1px solid #d49799;
        height: 46px !important
    }
    .comments {
        text-align: right;
        padding: 5px 0
    }
    .comments p {
        line-height: 1.5em;
        font-size: 1.1em;
        margin-top: 16px
    }
    .th_arrow {
        margin: -64px auto -12px
    }
    .checkmark1 {
        float: left;
        padding: 16px 22px 0 53px
    }
    .group_desc {
        float: left
    }
    #price .outline .signup {
        width: 100%;
        text-align: center;
        margin: 52px auto 83px
    }
    #price .outline .signup p {
        font-size: 1.3em;
        font-weight: 500;
        padding-top: 3em;
        margin-bottom: 20px
    }
    #price .outline .signup a {
        margin: auto;
        width: 420px;
        height: 64px;
        font-size: 1.1em;
        line-height: 65px
    }
    .signup_inner {
        width: 100%;
        position: relative
    }
    #price .outline ul {
        margin: 0 24px;
        position: relative;
        left: 48%;
        float: left
    }
    .signup_inner ul li {
        position: relative;
        left: -50%;
        float: left
    }
    #price .outline li {
        margin: 6px 12px 0
    }
    #price .support {
        padding: 70px 0 120px
    }
    #price .tips {
        display: block;
        margin: 0px 0px 0px 0px;
        float: right;
        width: 24px;
        height: 24px;
        background: url('/assets/images/price/icon_guide.png') no-repeat;
        cursor: pointer;
        -webkit-background-size: 48px 24px;
        -moz-background-size: 48px 24px;
        -ms-background-size: 48px 24px;
        background-size: 48px 24px
    }
    #price .tips:hover, #price .tips.on {
        background-position: -24px 0
    }
    .vertical {
        -ms-writing-mode: tb-rl;
        writing-mode: vertical-rl;
        margin: 0 auto;
        white-space: nowrap;
        line-height: 3em;
        text-orientation: upright;
        width: 20px;
        letter-spacing: 2px;
    }
    .vertical_detail {
        margin-bottom: 0px;
    }
    .small_bl {
        font-size: 1rem;
        color: #4d4d4d;
        font-weight: 400;
        writing-mode: horizontal-tb;
        margin-top: -25px
    }
    .see_detail {
        float: right;
        margin-right: 15px;
        font-size: 0.8rem;
        display: inline-block;
    }
    #price .o365_th {
        position: relative;
    }
    #price .o365_see_detail {
        display: contents;
    }
    #price .o365_see_detail a {
        position: absolute;
        top: 5px;
        right: 31px;
    }

    #price .outline .signup a {
        margin: auto;
        width: 330px;
        height: 64px;
        font-size: 0.9em;
        line-height: 65px;
    }
        
    .see_detail a.arrow:after {
        right: -14px;
        margin: -7px 0 0;
        width: 9px;
        height: 14px;
        background: url('../../assets/images/common/icon_arrow01.png') no-repeat
    }
    #price .outline li {
        background: none
    }
    tr.tr_no_hover:hover {
        background-color: #fff !important
    }
    .no_br {
        display: none
    }
    #price .outline {
        background: #f5f3f0;
    }
    #price .outline .inner {
        margin: auto;
        padding: 55px 0;
        max-width: 1250px
    }
    #price .outline .plans {
        margin: 0 25px;
        background: url('/assets/images/price/icon_plus@2x.png') no-repeat center center;
        price/images/icon_plus@2x.png*/ -webkit-background-size: 44px;
        -moz-background-size: 44px;
        -ms-background-size: 44px;
        background-size: 44px
    }
    #price .outline .basic {
        float: left;
        width: 50%
    }
    #price .outline .option {
        float: left;
        width: 50%
    }
    #price .outline .base {
        padding: 35px 0 25px
    }
    #price .outline figure {
        height: 75px;
        text-align: center
    }
    #price .outline h2 {
        font-weight: 500;
        text-align: center
    }
    #price .outline h2 em {
        font-size: 1.5em;
        vertical-align: baseline
    }
    #price .outline ul {
        margin: 0 24px
    }
    #price .outline li {
        font-size: 1.15em
    }
    #price .outline .basic h2 {
        line-height: 1.25em
    }
    #price .outline .option h2 {
        line-height: 1.5em
    }
    #price .outline .basic .base {
        margin: 0 9% 0 0;
        color: #78282a;
        background: #8f2f32
    }
    #price .outline .option .base {
        margin: 0 0 0 9%;
        padding: 35px 0 26px;
        color: #a27d1d;
        background: #c8b175
    }
    #price .outline .basic li {
        height: 64px;
        line-height: 64px
    }
    #price .outline .option li {
        height: 87px;
        line-height: 87px
    }
    #price .support {
        margin: auto;
        max-width: 1010px
    }
    #price .support .inner {
        margin: 0 25px
    }
    #price .support h2 {
        font-size: 1.75em;
        text-align: center
    }
    #price .support .leadcopy {
        margin: 25px 0 0;
        color: #4d4d4d;
        font-size: 1.15em;
        text-align: center;
        line-height: 1.5em
    }
    #price .support .menus {
        margin: 45px 0 0
    }
    #price .support .menus li {
        float: left;
        width: 33.33%
    }
    #price .support .menus li a {
        display: block;
        color: #333333;
        border-right: 1px solid #e0e0e0
    }
    #price .support .menus li:last-child a {
        border-right: 0
    }
    #price .support .menus li a:hover {
        text-decoration: none
    }
    #price .support .menus li span {
        display: block
    }
    #price .support .menus figure {
        height: 120px;
        text-align: center;
        -webkit-transition: all 0.25s ease-out;
        -moz-transition: all 0.25s ease-out;
        -ms-transition: all 0.25s ease-out;
        transition: all 0.25s ease-out
    }
    #price .support .menus li a:hover figure {
        -webkit-transform: translateY(-5px);
        -moz-transform: translateY(-5px);
        -ms-transform: translateY(-5px);
        transform: translateY(-5px)
    }
    #price .support .menus .label {
        font-size: 1.4em;
        font-weight: 500;
        text-align: center
    }
    #price .support .menus .summary {
        margin: 20px 30px 0;
        color: #4d4d4d;
        line-height: 1.85em
    }
    #price .support .menus .link {
        margin: 20px 0 0;
        color: #4970bf;
        font-size: 1em;
        text-align: center
    }
    #price .support .menus li a:hover .link {
        text-decoration: underline
    }
    #price .outline h2 {
        padding-bottom: 2em;
        min-height: auto;
        font-size: 2.3em
    }
    #price .outline .basic li, #price .outline .option li {
        padding: 5px 15px;
        height: auto;
        line-height: 1.5em
    }
}

@media screen and (min-width:768px) and (max-width:1239px) {
    .group_desc {
        float: none;
        padding-top: 10px
    }
    .checkmark1 {
        float: none;
        padding: 0
    }
    .no_br {
        display: inherit
    }
}

@media only screen and (max-width:767px) {
    .white-bottom-border {
        border-bottom: solid 1px #fff !important
    }

    #price .outline .signup {
        margin: 52px auto -10px;
        overflow: hidden
    }
    #price .outline .signup p {
        line-height: 1.6em
    }
    #price .outline {
        background: #f5f3f0
    }
    #price .outline .inner {
        padding: 30px 0 60px;
        margin: 0 20px
    }
    #price .outline .base {
        padding: 20px
    }
    #price .outline figure {
        text-align: center
    }
    #price .outline figure img {
        width: auto;
        height: 39px
    }
    #price .outline figure.img_percent img { 
        width: 70%;
    }
    #price .outline h2 {
        margin: 10px 0 20px;
        font-size: 1.7em;
        font-weight: 500;
        text-align: center;
        line-height: 1.25em
    }
    #price .outline h2 .h2-sub {
        font-size: .7em;
        padding: 20px 10px
    }
    #price .outline h2 em {
        font-size: 1.5em;
        vertical-align: baseline
    }
    #price .outline ul {
        padding: 10px 0 0
    }
    #price .outline .signup {
        margin: 32px 25px 0
    }
    #price .outline .signup a {
        max-width: 85%
    }
    .red-font {
        color: #78282a;
        font-weight: 600;
        font-size: 1.15em
    }
    .normal_font_s {
        font-size: 1em;
        font-weight: 400;
        color: #4d4d4d
    }
    .group-bg {
        background: #f5f1e6;
        color: #78282a;
        font-size: 1.8em;
        font-weight: 600;
        width: 20%
    }
    .border-bottom {
        border-bottom: 1px solid #ccc
    }
    .border-left {
        border-left: 1px solid #ccc
    }
    .comments {
        text-align: right;
        padding: 5px 0
    }
    .comments p {
        line-height: 1.5em;
        font-size: 1.1em;
        margin: 20px
    }
    .th_arrow {
        margin: -68px auto -12px
    }
    .th_arrow2 {
        margin: 5px
    }
    .group_desc {
        padding-top: 10px;
        font-size: .8em
    }
    .border-left-mobile {
        border-left: solid 1px #ccc
    }
    #price .outline .signup {
        width: 100%;
        text-align: center;
        margin: 52px auto 83px
    }
    #price .outline .signup p {
        font-size: 1em;
        font-weight: 500;
        margin: 20px
    }
    #price .outline .signup a {
        margin: auto;
        width: 320px;
        height: 43px;
        font-size: 1.1em;
        line-height: 43px
    }
    .signup_inner {
        width: 100%
    }
    #price .outline ul {
        margin: 0 24px
    }
    #price .outline li {
        margin: 12px
    }
    #price .support {
        padding: 40px 0 120px
    }
    #price .tips {
        display: block;
        top: 50%;
        right: 24px;
        margin: 5px 0 0 0;
        width: 24px;
        height: 24px;
        background: url('/assets/images/price/icon_guide.png') no-repeat;
        cursor: pointer;
        -webkit-background-size: 48px 24px;
        -moz-background-size: 48px 24px;
        -ms-background-size: 48px 24px;
        background-size: 48px 24px
    }
    .vertical {
        -ms-writing-mode: tb-rl;
        writing-mode: vertical-rl;
        margin: 0 auto;
        white-space: nowrap;
        width: 1.9em;
        line-height: 2em;
        text-orientation: upright
    }
    .small_bl {
        font-size: 1rem;
        color: #4d4d4d;
        font-weight: 400;
        writing-mode: horizontal-tb;
        margin-top: -25px
    }
    .see_detail {
        float: right;
        margin-right: 30px
    }
    .see_detail a.arrow:after {
        right: -14px;
        margin: -7px 0 0;
        width: 9px;
        height: 14px;
        background: url('../../assets/images/common/icon_arrow01.png') no-repeat
    }
    #price .outline li {
        background: none
    }
    tr.tr_no_hover:hover {
        background-color: #fff !important
    }
    #price .outline {
        background: #f5f3f0
    }
    #price .outline .inner {
        margin: auto;
        padding: 30px 0;
        max-width: 1250px
    }
    #price .outline .plans {
        margin: 0 25px;
        background: url('/assets/images/price/icon_plus@2x.png') no-repeat center center;
        -webkit-background-size: 44px;
        -moz-background-size: 44px;
        -ms-background-size: 44px;
        background-size: 44px
    }

    #price .support .inner {
        margin: 45px 25px 0px
    }
    #price .support h2 {
        font-size: 1.5em;
        text-align: center
    }
    #price .support .leadcopy {
        margin: 12px 40px 0;
        color: #4d4d4d;
        font-size: 0.95em;
        text-align: center;
        line-height: 1.5em
    }
    #price .support .menus {
        margin: 20px 0 0;
    }
    #price .support .menus li {
        border-top: 1px solid #e0e0e0
    }
    #price .support .menus li a {
        display: block;
        position: relative;
        color: #333333;
        padding: 20px 0 15px
    }
    #price .support .menus li a:after {
        display: block;
        content: "";
        position: absolute;
        top: 50%;
        right: 8px;
        margin: -6px 0 0;
        width: 7px;
        height: 12px;
        background: url('../images/common/icon_arrow02.png') no-repeat;
        -webkit-background-size: 7px 12px;
        -moz-background-size: 7px 12px;
        -ms-background-size: 7px 12px;
        background-size: 7px 12px
    }
    #price .support .menus li span {
        display: block
    }
    #price .support .menus figure {
        position: absolute;
        top: 20px;
        left: 0;
        width: 65px;
        text-align: center
    }
    #price .support .menus figure img {
        width: 31px;
        height: auto
    }
    #price .support .menus li:first-child figure img {
        width: 40px;
        height: auto
    }
    #price .support .menus .label {
        margin: 0 48px 0 65px;
        font-size: 1em;
        font-weight: 500
    }
    #price .support .menus .summary {
        margin: 8px 48px 0 65px;
        color: #4d4d4d;
        font-size: 0.7em;
        line-height: 1.65em
    }
    #price .support .menus .link {
        display: none
    }
    #price .outline .signup a {
        font-size: 0.9em;
    }
}

@media only screen and (max-width:420px) {
    #price .outline .signup a {
        font-size: 0.8em;
        height: 34px;
        line-height: 34px;
    }
}
/* 20190425add */
#submain {
    position: relative;
    overflow: hidden;
    width: 100%;
}

@media screen and (min-width:768px) and (max-width: 960px) {
#price .outline .signup a {
    margin: auto;
    width: 330px;
    height: 64px;
    font-size: 0.9em;
    line-height: 65px;
}
}

    #function {  }
    .bgWhite { background:#fff !important; }
    .inner::after { content:''; display:table; clear:both; height:0; }
    .functionInner { float:none !important; left:inherit !important; width:90% !important; min-width:90%; max-width:90%; margin:0 auto 0 !important; padding-top:30px; }
    .functionInner li { display:flex; flex-flow:column wrap; justify-content:center; align-items:flex-start; margin-bottom:0 !important; padding-bottom:20px !important; border-bottom:#e4e4e4 1px solid; }
    .functionInner li.noborder { padding-bottom:0; border-bottom:0; }
    .functionInner li.column { flex-flow:column wrap; }
    .functionInner li figure { order:1; display:block; width:100%; height:auto !important; margin-bottom:30px; }
    .functionInner li.column figure { width:100%; margin-top:30px; margin-bottom:30px; }
    .functionInner li figure img { width:100%; height:auto !important; height:100%; object-fit:cover; }
    .functionInner li .txt { order:2; width:100%; }
    .functionInner li.column .txt { width:100%; }
    .functionInner li .txt h3 { position:relative; margin-bottom:35px; color:#78282a; font-size:1.1em; font-weight:bolder; }
    .functionInner li .txt h3::before { content:''; display:block; position:absolute; left:0; bottom:-20px; width:50px; height:1px; background:#78282a; }
    .functionInner li .txt p { order:1; line-height:1.8; font-size:14px; }
    .functionNote { display:flex; flex-flow:column wrap; justify-content:space-between; align-items:flex-start; width:calc(90% - 40px) !important; min-width:calc(90% - 40px); max-width:calc(90% - 40px); margin:20px auto 0 !important; padding:20px; border-radius:5px; border:#6e4848 1px solid; background:#fff; }
    .functionNote h3 { margin:5px 2% 15px; padding:5px 0 0 20px; border-left:#7b2d2b 2px solid; line-height:1.5; font-size:1.2rem; font-weight:normal;}
    .functionNote ul { display:flex; flex-flow:column wrap; justify-content:space-between; align-items:flex-start; float:none !important; left:inherit !important; width:96% !important; margin:0 auto !important; }
    .functionNote li { width:100%; margin:0 !important; box-sizing:border-box; }
    .functionNote li.adjust { margin-bottom:35px !important; }
    .functionNote li:nth-child(odd) { padding-right:0; margin-bottom:20px !important; padding-bottom:20px !important; border-bottom:#7b2d2b 1px dotted; }
    .functionNote li:nth-child(even) { padding-right:0; margin-bottom:20px !important; padding-bottom:20px !important; border-bottom:#7b2d2b 1px dotted; }
    .functionNote li:last-child { padding-right:0; margin-bottom:0 !important; padding-bottom:0 !important; border-bottom:0; }
    .functionNote h4 { margin-bottom:10px; color:#78282a; font-size:1.1rem; font-weight:bolder;}
    .functionNote p { line-height:1.6; font-size:14px; }
    .pt0 { margin-top:0 !important; padding-top:0 !important; }
    #price .outline .signup { margin-top:0; margin-bottom:0; }
    #price .outline .functionInner li#li_inner_top { border-bottom: unset; }
    .column p { max-width: 500px; }
    #price .outline .functionInner li:last-child { border-bottom: 0px;}
    #contact_banner .inner { margin-top:7em; margin-bottom: 1em; }
    #contact_banner .inner ul { margin-top:1em; }

@media screen and (min-width:768px) and (max-width:1040px) {
    .functionInner li figure img {
        padding: 2em;
    }
    .functionInner li figure img.img70 {
        width: 70%;
    }
}



@media (min-width:1040px){
    #function {  }
    .bgWhite { background:#fff !important; }
    .inner::after { content:''; display:table; clear:both; height:0; }
    .functionInner { float:none !important; left:inherit !important; width:100% !important; min-width:960px; max-width:90%; margin:0 auto 3.0rem !important; padding-top:30px; }
    .functionInner li { display:flex; flex-flow:row wrap; justify-content:space-between; align-items:flex-start; margin-bottom:40px !important; padding-bottom:25px; border-bottom:#e4e4e4 1px solid; }
    .functionInner li.noborder { padding-bottom:0; border-bottom:0; }
        .functionInner li.column { flex-flow:column wrap; }
    .functionInner li figure { order:2; display:block; width:60%; height:auto !important; }
        .functionInner li.column figure { width:100%; margin-top:40px; }
    .functionInner li figure img { width:80%; height:80%; object-fit:cover; }
    .functionInner li figure img.function02 {width: 94%;}
    .functionInner li figure img.function03 {width: 57%;}
    .functionInner li .txt { order:1; width:40%; }
        .functionInner li.column .txt { width:100%; }
    .functionInner li .txt h3 { position:relative; margin-bottom:35px; color:#78282a; font-size:24px; font-weight:bolder; display: block; padding-top: 5em; margin-top: -5em;}
    .functionInner li .txt h3::before { content:''; display:block; position:absolute; left:0; bottom:-20px; width:50px; height:1px; background:#78282a; }
    .functionInner li .txt p { order:1; line-height:1.8; }
    .functionNote { display:flex; flex-flow:row wrap; justify-content:space-between; align-items:flex-start; width:100%!important; min-width:960px; max-width:960px; margin:40px auto 0 !important; padding:35px; border-radius:5px; border:#6e4848 1px solid; background:rgba(227,214,114,0.25); }
    .functionNote h3 { margin:5px 2% 30px; padding:5px 0 0 20px; border-left:#7b2d2b 2px solid; line-height:1.5; font-size:1.2rem; font-weight:normal;}
    .functionNote ul { display:flex; flex-flow:row wrap; justify-content:space-between; align-items:flex-start; float:none !important; left:inherit !important; width:96% !important; margin:0 auto !important; }
    .functionNote li { width:48%; margin:0 !important; box-sizing:border-box; }
    .functionNote li.adjust { margin-bottom:35px !important; }
    .functionNote li:nth-child(odd) { margin-bottom:0 !important; padding-bottom:20px !important; padding-right:20px; border-bottom:0; border-right:#7b2d2b 1px dotted; }
    .functionNote li:nth-child(even) { margin-bottom:0 !important; padding-bottom:20px !important; border-bottom:0; padding-left:20px; }
    .functionNote h4 { margin-bottom:20px; color:#78282a; font-size:1.2rem; font-weight:bolder;}
    .functionNote p { line-height:1.6; }
    .pt0 { margin-top:0 !important; padding-top:30px !important; }
    #price .outline .signup { margin-top:0 !important; margin-bottom:0; }
    #price .outline .functionInner { margin-bottom : 0px!important;}

    #price div#f01 { margin-bottom: -100px; }
    #price .outline figure.90_img img { width: 60%; }
}

#f02, #f03 {
    display: block;
    height: 1rem;
    margin-top: -1rem;
    content: "";
}


@media print, screen and (min-width: 1040px){
#price .outline .inner.noFunctionNote {
    margin-bottom: -70px;
}
}
/*
.functionInner.content-blocks li .txt h3.anchor1 {
    padding-top: 100px;
    margin-top: -100px;
}
.functionInner.content-blocks li .txt h3.anchor2 {
    padding-top: 100px;
    margin-top: -100px;
}
.functionInner.content-blocks li .txt h3.anchor3 {
    padding-top: 100px;
    margin-top: -100px;
}
.functionInner.content-blocks li .txt h3.anchor4 {
    padding-top: 100px;
    margin-top: -100px;
}
.functionInner.content-blocks li .txt h3.anchor5 {
    padding-top: 100px;
    margin-top: -100px;
}
.functionInner.content-blocks li .txt h3.anchor6 {
    padding-top: 100px;
    margin-top: -100px;
}
.functionInner.content-blocks li .txt h3.anchor7 {
    padding-top: 100px;
    margin-top: -100px;
}
.functionInner.content-blocks li .txt h3.anchor8 {
    padding-top: 100px;
    margin-top: -100px;
}
.functionInner.content-blocks li .txt h3.anchor9 {
    padding-top: 100px;
    margin-top: -100px;
}
.functionInner.content-blocks li .txt h3.anchor10 {
    padding-top: 100px;
    margin-top: -100px;
}
.functionInner.content-blocks li .txt h3.anchor11 {
    padding-top: 100px;
    margin-top: -100px;
}
.functionInner.content-blocks li .txt h3.anchor12 {
    padding-top: 100px;
    margin-top: -100px;
}
.functionInner.content-blocks li .txt h3.anchor13 {
    padding-top: 100px;
    margin-top: -100px;
}
.functionInner.content-blocks li .txt h3.anchor14 {
    padding-top: 100px;
    margin-top: -100px;
}
.functionInner.content-blocks li .txt h3.anchor15 {
    padding-top: 300px;
    margin-top: 300px;
}
.functionInner.content-blocks li .txt h3.anchor16 {
    padding-top: 100px;
    margin-top: -100px;
}
.functionInner.content-blocks li .txt h3.anchor17 {
    padding-top: 100px;
    margin-top: -100px;
}
*/