@charset "utf-8";

/** key visual setting **/
.key-visual{
    color: #fff;
    text-align: center;
}

.key-sfa-integrate{
    background-image: url(/service/mikata/images/key-visual/key-sfa-integrate.jpeg);
}

.key-contract-management{
    background-image: url(/service/mikata/images/key-visual/key-contract-management.jpeg);
}

.key-billing{
    background-image: url(/service/mikata/images/key-visual/key-billing.jpeg);
    background-position-y: bottom !important;
}

.key-invoice{
    background-image: url(/service/mikata/images/key-visual/key-invoice.jpg);
}

.key-template{
    background-image: url(/service/mikata/images/key-visual/key-template.jpg);
}

.key-billing_management{
    background-image: url(/service/mikata/images/key-visual/key-billing-management.jpg);
}

.key-recurring{
    background-image: url(/service/mikata/images/key-visual/key-recurring.jpg);
}

.key-payments{
    background-image: url(/service/mikata/images/key-visual/key-payments.jpg);
    background-position-y: bottom !important;
}

.key-integrate_payments{
    background-image: url(/service/mikata/images/key-visual/key-integrate_payments.jpg);
}

.key-reconcile{
    background-image: url(/service/mikata/images/key-visual/key-reconcile.jpg);
}

.key-clearing{
    background-image: url(/service/mikata/images/key-visual/key-clearing.jpg);
}

.key-deposit_management{
    background-image: url(/service/mikata/images/key-visual/key-deposit_management.jpg);
}

.key-credit_management{
    background-image: url(/service/mikata/images/key-visual/key-credit_management.jpg);
}

.key-unpaid{
    background-image: url(/service/mikata/images/key-visual/key-unpaid.jpg);
}

.key-guarantee{
    background-image: url(/service/mikata/images/key-visual/key-guarantee.jpg);
}

.key-payments_service{
    background-image: url(/service/mikata/images/key-visual/key-payments_service.jpg);
}

.key-keiri {
    background-image: url(/service/mikata/images/key-visual/key-keiri.jpg);
}

.key-invoice {
    background-image: url(/service/mikata/images/key-visual/key-invoice.jpeg);
}

.key-auto {
    background-image: url(/service/mikata/images/key-visual/key-auto.jpeg);
}

.key-executive {
    background-image: url(/service/mikata/images/key-visual/key-executive.jpg);
}

.key-api {
    background-image: url(/service/mikata/images/key-visual/key-api.jpg);
}

.key-accounting_software {
    background-image: url(/service/mikata/images/key-visual/key-accounting_software.jpg);
}

.key-subscription{
    background-image: url(/service/mikata/images/key-visual/key-subscription.jpeg);
}

.key-account-receivable{
    background-image: url(/service/mikata/images/key-visual/key-account-receivable.jpg);
}

.key-cash-flow{
    background-image: url(/service/mikata/images/key-visual/key-cash-flow.jpeg);
}

.key-reconcile-and-reminder{
    background-image: url(/service/mikata/images/key-visual/key-reconcile-and-reminder.jpeg);
}

.key-integrate-payments{
    background-image: url(/service/mikata/images/key-visual/key-integrate-payments.jpeg);
}

.key-biz{
    background-image: url(/service/mikata/images/key-visual/key-biz.jpeg);
}

.key-useful-apis{
    background-image: url(/service/mikata/images/key-visual/key-useful-apis.jpeg);
}

.key-fee-calc{
    background-image: url(/service/mikata/images/key-visual/key-fee-calc.jpeg);
}

.key-executives{
    background-image: url(/service/mikata/images/key-visual/key-executives.jpeg);
}

.key-accountants{
    background-image: url(/service/mikata/images/key-visual/key-accountants.jpeg);
}

.key-billing-operations{
    background-image: url(/service/mikata/images/key-visual/key-billing-operations.jpg);
}

.key-case-studies{
    background-image: url(/service/mikata/images/key-visual/key-case-studies.jpg);
}

.key-partners{
    background-image: url(/service/mikata/images/key-visual/key-partners.jpg);
}

.key-credit-management {
    background-image: url(/service/mikata/images/key-visual/key-credit-management.jpg);
}

.key-plan{
    background-color: #5a97af;
}

.key-account-receivable p {
    max-width: 988px;
    margin: 0 auto;
    text-align: justify;
}

.key-cover{
    background: linear-gradient(to left bottom, rgba(90, 151, 175, 0.43), rgba(225, 108, 100, 0.32));
    -webkit-filter: sepia(0.45);
    -webkit-filter: hue-rotate(375deg);
    height: auto;
}
.key-cover2{
    background-color: #6AA2BD;
    height: auto;
}

.key-selected.key-visual {
    height: 150px;
}

.key-selected .key-cover {
    position: relative;
    background: none;
    height: 150px;
}
.key-selected .key-cover2 {
    position: relative;
    background: none;
    height: 150px;
}

.key-selected .key-visual-title h2 {
    padding-bottom: 0;
    color: #4B869E;
    text-shadow: none;
}
.key-selected .key-visual-title .h1 {
    padding-bottom: 0;
    color: #4B869E;
    text-shadow: none;
}

.kv-btn-wrap {
    margin-top: 40px;
}

.kv-btn-wrap--pt02 {
    margin: 0 0 80px 0;
}

.kv-btn-wrap .kv-btn-txt {
    padding: 10px 0;
    text-align: center !important;
    font-weight: 400;
    font-size: 1.45em;
    letter-spacing: .1em;
    border-top: 1px solid #FFF;
    border-bottom: 1px solid #FFF;
}

.kv-btn-wrap .kv-btn-txt--black {
    padding: 10px 0;
    text-align: center !important;
    font-weight: 400;
    font-size: 1.45em;
    letter-spacing: .1em;
    border-top: 1px solid #5E6162;
    border-bottom: 1px solid #5E6162;
    color: #5E6162;
}

.kv-btn {
    width: 100%;
    margin: 40px 10px 0;
}

.kv-btn .kv-btn-inr,
.kv-btn .re-kv-btn-inr{
    margin: 0 auto;
}

.kv-btn .re-kv-btn-inr .re-kv-link {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 300px;
    margin: 0 auto;
    padding: 20px 10px;
    text-align: center;
    background-color: #E16C64;
    border-radius: 5px;
    overflow: hidden;
    -webkit-box-shadow: 0 0 6px rgba(0,0,0,0.2);
    box-shadow: 0 0 6px rgba(0,0,0,0.2);
    -webkit-transition: .3s;
    transition: .3s;
}

.kv-btn .re-kv-btn-inr .re-kv-link::after {
    content: "";
    display: block;
    width: 10%;
    height: 120%;
    background-color: #d2663d;
    position: absolute;
    top: 0;
    right: -10%;
    z-index: 0;
    transform: skewX(-45deg);
    -webkit-transition: .3s;
    transition: .3s;
}

.kv-btn .re-kv-btn-inr .re-kv-link span {
    color: #ffffff;
    font-size: 19px;
    z-index: 1;
}

.kv-btn .re-kv-btn-inr .re-kv-link img {
    width: 35px;
    height: 35px;
    margin-right: 8px;
    z-index: 1;
}

.kv-btn .re-kv-btn-inr .re-kv-link:hover::after {
    width: 115%;
    transition: .3s;
}

@media screen and (max-width: 400px){
    .kv-btn {
        margin-left: 0;
    }

    .kv-btn .re-kv-btn-inr .re-kv-link {
        padding: 15px 10px;
    }

    .kv-btn .re-kv-btn-inr .re-kv-link span {
        font-size: 15px;
    }
}

.kv-btn .kv-btn-inr a {
    position: relative;
    display: block;
    max-width: 300px;
    text-align: center;
    margin: 0 auto;
    background-color: #E16C64;
    padding: 20px 15px;
    border-radius: 5px;
    overflow: hidden;
    -webkit-box-shadow: 0 0 6px rgba(0,0,0,0.2);
    box-shadow: 0 0 6px rgba(0,0,0,0.2);
    -webkit-transition: .3s;
    transition: .3s;
}

.kv-btn .kv-btn-inr a::after {
    content: "";
    display: block;
    width: 40%;
    height: 120%;
    background-color: #d2663d;
    position: absolute;
    top: 0;
    right: -10%;
    z-index: 0;
    -webkit-transform: skewX(-45deg);
    transform: skewX(-45deg);
    -webkit-transition: .3s;
    transition: .3s;
}
.kv-btn .kv-btn-inr.type-free a::before {
    content: "無料";
    position: absolute;
    top: 15px;
    bottom: 0;
    left: 20px;
    width: 50px;
    height: 20px;
    margin: auto;
    color: #E16C64;
    background-color: #fff;
    border-radius: 5px;
    font-weight: bold;
    z-index: 3;
}

.kv-btn.type-blue .kv-btn-inr a {
    background-color: #217FC4;
}

.kv-btn.type-blue .kv-btn-inr a::after {
    background-color: #30638B;
}

.kv-btn .kv-btn-inr a span {
    position: relative;
    font-size: 16px;
    letter-spacing: 1px;
    text-indent: 1px;
    z-index: 1;
    color: #FFF;
}

.kv-btn .kv-btn-inr a span.span_download {
    padding-left: 40px;
}

.kv-btn .kv-btn-inr a:hover {
    transform: scale(1.05);
}

.kv-btn .kv-btn-inr a:hover::after {
    width: 120%;
}

/*---------- marunage_key ------------*/
.marunage-wrap .key-cover {
    position: relative;
    height: 520px;
    /* background: linear-gradient(to left bottom, rgba(90, 151, 175, 0.6), rgba(225, 108, 100, 0.5)); */
    background-image: url(/service/mikata/images/key-visual/key_product.jpg);
    background-size:contain;
    background-position:center bottom;
    background-size:cover;
    width:100%;
    z-index: 1;
    -webkit-filter: none;
}

/* .marunage-wrap .key-visual::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    display: block;
    width: 100%;
    height: 200px;
    background-image: url(/service/mikata/images/key-visual/marunage_key_bg.png);
    background-repeat: repeat-x;
    background-size: 400px 200px;
    z-index: 0;
    opacity: .9;
} */

.marunage-wrap .key-cover_inr {
    position: relative;
    width: 1024px;
    margin: 0 auto;
    height: 520px;
}

.marunage-wrap .key-cover_inr::before {
    content: "";
    display: block;
    width: 244px;
    height: 478px;
    position: absolute;
    bottom: 0;
    left: -30px;
    background-image: url(/service/mikata/images/key-visual/marunage_key_bgLeft.png);
    background-size: 244px 478px;
}

.marunage-wrap .key-cover_inr::after {
    content: "";
    display: block;
    width: 278px;
    height: 501px;
    position: absolute;
    bottom: 0;
    right: -30px;
    background-image: url(/service/mikata/images/key-visual/marunage_key_bgRight.png);
    background-size: 278px 501px;
}

.marunage-wrap .key-visual {
    height: 500px;
}

.marunage-wrap .key-visual-title  {
    padding-top: 0;
    position: static;
    transform: none;
}

.marunage-wrap .key-visual-title h2 {
    font-weight: bold;
    font-size: 44px;
    line-height: 1.15em;
    padding-bottom: 15px;
    letter-spacing: .07em;
    text-shadow: none;
    color:#2b77f3;
    line-height: 1.2;
}

.marunage-wrap .key-visual-title h2 + p {
    font-size: 16px;
    color:#000;
    text-shadow: none;
    font-weight: bold;
    margin-bottom: 16px;
}

.marunage-wrap .key-visual-title h2 span {
    color: #FFF;
    font-size: 0.45em;
}

.marunage-wrap .key-visual-title h2 .small_txt {
    color:#2b77f3;
    font-size: 18px;

}


.marunage-wrap .key-visual-title .h1 {
    font-weight: bold;
    font-size: 44px;
    line-height: 1.15em;
    padding-bottom: 15px;
    letter-spacing: .07em;
    text-shadow: none;
    color:#2b77f3;
    line-height: 1.2;
}

.marunage-wrap .key-visual-title .h1 + p {
    font-size: 16px;
    color:#000;
    text-shadow: none;
    font-weight: bold;
    margin-bottom: 16px;
}

.marunage-wrap .key-visual-title .h1 span {
    color: #FFF;
    font-size: 0.45em;
}

.marunage-wrap .key-visual-title .h1 .small_txt {
    color:#2b77f3;
    font-size: 18px;

}

.marunage-wrap .key-visual-title figure {
    width: 480px;
    margin: 24px auto 0 auto;
}

.marunage-wrap .key-visual-title figure img {
    width: 92%;
}

.red-contact_btn {
    position: relative;
    display: block;
    width: 250px;
    margin: 30px auto 0 auto;
    background-color: #E16C64;
    padding: 15px;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 0 6px rgba(0,0,0,.2);
}

.orange-contact_btn {
    background-color:#f7a42e;
    color:#fff ;
    font-size: 20px;
    padding: 28px 50px 26px ;
    display: inline-block;
    border-radius: 40px;
    letter-spacing: 2px;
}

.orange-contact_btn:hover,
.example_link_btn:hover a {
    background-color:#ffc56f;
}

.red-contact_btn {
    transition: .3s all;
}

.red-contact_btn:hover {
    transform: scale(1.05);
}

.red-contact_btn span {
    position: relative;
    z-index: 1;
    color: #FFF;
}

.red-contact_btn::after {
    content: "";
    display: block;
    width: 40%;
    height: 120%;
    background-color: #d2663d;
    position: absolute;
    top: 0;
    right: -10%;
    z-index: 0;
    transform: skewX(-45deg);
    transition: .3s;
}

.red-contact_btn:hover::after {
    width: 120%;
}


/* ============================================================
pc css setting
============================================================ */
@media screen and (min-width:  769px){
/** key visual setting **/
.key-visual{
    position: relative;
    background-position-y: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 0;
}
.key-product, .key-solution {
    background-image: url(/service/mikata/images/key-visual/key_product.jpg);
}

.key-visual-title{
    width: 100%;
    padding: 60px 0;
}

.key-visual .key-visual-title .txt-left {
    text-align: left;
}

.key-visual-title h2{
    color: #fff;
    font-size: 3.0em;
    font-weight: 200;
    line-height: 1.45em;
    padding-bottom: 25px;
    text-shadow: 1px 0px 9px rgba(50, 72, 80, 0.46);
}
.key-visual-title h1{
    color: #fff;
    font-size: 3.0em;
    font-weight: 200;
    line-height: 1.45em;
    padding-bottom: 25px;
    text-shadow: 1px 0px 9px rgba(50, 72, 80, 0.46);
}
.key-visual-title .h1{
    color: #fff;
    font-size: 3.0em;
    font-weight: 200;
    line-height: 1.45em;
    padding-bottom: 25px;
    text-shadow: 1px 0px 9px rgba(50, 72, 80, 0.46);
}

.key-product .key-visual-title h2,
.key-product .key-visual-title p {
    text-shadow: 0 0 10px rgba(50, 72, 80, 0.8);;
}
.key-product .key-visual-title .h1,
.key-product .key-visual-title p {
    text-shadow: 0 0 10px rgba(50, 72, 80, 0.8);;
}
.key-visual-title p{
    color: #fff;
    font-size: 1.25em;
    font-weight: 200;
    line-height: 1.65em;
    text-shadow: 1px 2px 3px #5E6162;
}

.key-visual-title p span {
    font-size: 0.75em;
    color: #fff;
}

.key-visual-title p a{
 display:block;
background: linear-gradient(#f39816, #ff8400);
      box-shadow: 0 0 7px rgba(255, 255, 255, 0.3) inset;
      border: 1px solid rgba(24, 127, 196, 0.5);
      padding: 15px;
      border-radius: 7px;
      color: #5d360f;
      font-weight: bold;
      width:65%;
      text-align:center;
      margin-top:30px;
      font-size:0.9em;
      text-shadow:none;
}
.key-visual-title p a:hover{
 background: linear-gradient(#ffbb4f, #f9d9a6);

}



.key-product .key-cover,
.key-solution .key-cover,
.key-solution2 .key-cover, {
    -webkit-filter: none;
}


.key-product .container-inside,
.key-solution .container-inside,
.key-solution2 .container-inside {
    width: 988px;
    height: 456px;
    margin: auto;
    padding: 0px 18px;
    display: flex!important;
    -moz-display: flex;
    -webkit-display: flex;
    -ms-display: flex;
    -o-display: flex;
    -webkit-align-items: center;
    align-items: center;
}
.freee-key-visual.key-solution .container-inside {
    flex-direction: column;
}

.key-product .container-inside2,
.key-solution .container-inside2,
.key-solution2 .container-inside2 {
    width: 988px;
    margin: auto;
    padding: 0px 18px;
    display: flex!important;
    -moz-display: flex;
    -webkit-display: flex;
    -ms-display: flex;
    -o-display: flex;
    -webkit-align-items: center;
    align-items: center;
}

.key-product .key-visual-icon,
.key-solution .key-visual-icon,
.key-solution2 .key-visual-icon {
    width: 30%;
    -moz-display: flex;
    -webkit-display: flex;
    -ms-display: flex;
    -o-display: flex;
    -webkit-align-items: center;
    align-items: center;
    display: block;
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 2;
    -webkit-order: 2;
    order: 2;
}

.freee-key-visual.key-solution .key-visual-icon {
    width: unset;
}

.key-product .key-visual-icon img,
.key-solution .key-visual-icon img,
.key-solution2 .key-visual-icon img {
    width: 100%;
}

.key-product .key-visual-title,
.key-solution .key-visual-title,
.key-solution2 .key-visual-title {
    position: relative;
    top: inherit;
    left: inherit;
    transform: inherit;
    width: 70%;
    padding-right: 50px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}
.freee-key-visual.key-solution .key-visual-title {
    padding-right: unset;
    width: 100%;
}
.key-product .key-visual-title h1,
.key-solution .key-visual-title h1,
.key-solution2 .key-visual-title h1 {
    font-size: 2.55em;
    text-align: left;
}

.key-product .key-visual-title h2,
.key-solution .key-visual-title h2,
.key-solution2 .key-visual-title h2 {
    font-size: 2.55em;
    text-align: left;
}

.key-product .key-visual-title p,
.key-solution .key-visual-title p,
.key-solution2 .key-visual-title p {
    text-align: justify;
}

.key-visual-title ul {
    display: flex;
    justify-content: space-between;
}

.key-visual-title ul li {
    width: 47.5%;
    color: #fff;
    font-size: 1.25em;
    font-weight: 200;
    line-height: 1.65em;
    text-shadow: 1px 0px 9px rgba(50, 72, 80, 0.46);
}

.key-visual-title ul li a {
    display: block;
    background: linear-gradient(#f39816, #ff8400);
    box-shadow: 0 0 7px rgba(255, 255, 255, 0.3) inset;
    border: 1px solid rgba(24, 127, 196, 0.5);
    padding: 15px;
    border-radius: 7px;
    color: #5d360f;
    font-weight: bold;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    margin-top: 30px;
    font-size: 0.9em;
    text-shadow: none;
}

}


/* ============================================================
smart phone css setting
============================================================ */
@media screen and (max-width:  768px){

/** key-visual top page setting **/
.visual-top{
    background-image: url(/service/mikata/images/key-visual/key-top-smart.jpg);
    background-position: center;
}


/** key visual setting **/
.key-visual{
    background-position-y: 10%;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 0;
}

.key-visual-title{
    padding: 40px 0;
}

.key-visual-title h2{
    text-align: left;
    color: #fff;
    font-size: 3.0vh;
    font-weight: lighter;
    line-height: 1.45em;
    padding: 0;
    padding-bottom: 20px;
}
.container-inside2 h1{
    padding: 0 35px!important;
}
.key-visual-title h1{
    text-align: left;
    color: #fff;
    font-size: 3.0vh;
    font-weight: lighter;
    line-height: 1.45em;
    padding: 0;
    padding-bottom: 20px;
}

.key-visual-title h2 br {
    display: none;
}

.key-visual-title .h1{
    text-align: left;
    color: #fff;
    font-size: 3.0vh;
    font-weight: lighter;
    line-height: 1.45em;
    padding: 0;
    padding-bottom: 20px;
}

.key-visual-title .h1 br {
    display: none;
}

.key-visual-title p{
    color: #fff;
    line-height: 1.75em;
    text-align: left;
    font-size: 1.75vh;
}

.key-visual-title p span {
    font-size: 1.45vh;
    color: #fff;
}

.key-visual-title p a{
 display:block;
background: linear-gradient(#f7a42e, #f7a42e);
      box-shadow: 0 0 1px rgba(255, 255, 255, 0.3) inset;
      border: 1px solid rgba(24, 127, 196, 0.5);
      padding: 15px;
      border-radius: 7px;
      color: #5d360f;
      font-weight: bold;
      width:90%;
      text-align:center;
      margin-top:30px;
      font-size:1.2em;
      text-shadow:none;
}
.key-visual-title p a:hover{
    background: linear-gradient(#ffbb4f, #f9d9a6);
}

.key-cover{
    background:linear-gradient(to left bottom, rgba(90, 151, 175, 0.43), rgba(225, 108, 100, 0.32));
    -webkit-filter: sepia(0.45);
    -webkit-filter: hue-rotate(375deg);
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.key-cover .container-inside {
    padding: 0 25px;
}
.key-cover .container-inside2 {
    padding: 0 25px;
}

.kv-btn-wrap {
    margin: 40px auto 0;
}

.kv-btn-wrap--pt02 {
    margin: 20px 0 60px 0;
}

.key-product,
.key-solution,
.key-solution2 {
    height: auto;
}

.key-product .key-cover,
.key-solution .key-cover,
.key-solution2 .key-cover {
    height: auto;
}

.key-product .container-inside,
.key-solution .container-inside,
.key-solution2 .container-inside {
    width: 100%;
    height: auto;
    margin: auto;
    display: block;
    padding: 0 35px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

.key-product .key-visual-icon,
.key-solution .key-visual-icon,
.key-solution2 .key-visual-icon {
    width: 50vw;
    margin: 0 auto;
    display: block;
}

.key-product .key-visual-icon img,
.key-solution .key-visual-icon img,
.key-solution2 .key-visual-icon img {
    width: 100%;
    display: none;
}

.key-product .key-visual-title,
.key-solution .key-visual-title,
.key-solution2 .key-visual-title {
    width: 100%;
    padding-right: 0;
    padding: 20px 0;
}

.key-product .key-visual-title,
.key-visual-title.key-visual-title-salesforce {
    width: 100%;
    padding: 35px 0;
}

.key-product .key-visual-title,
.key-visual-title.key-visual-title-api {
    width: 100%;
    padding-top: 50px;
}

.key-product .key-visual-title h2,
.key-solution .key-visual-title h2,
.key-solution2 .key-visual-title h2 {
    font-size: 3.5vh;
}

.key-product .key-visual-title p,
.key-solution .key-visual-title p,
.key-solution2 .key-visual-title p {
    line-height: 1.75em;
    text-align: justify;
    font-size: 1.75vh;
}

.key-visual-title ul li {
    width: 100%;
    color: #fff;
    font-size: 1.25em;
    font-weight: 200;
    line-height: 1.65em;
    text-shadow: 1px 0px 9px rgba(50, 72, 80, 0.46);
}

.key-visual-title ul li:last-child a {
    margin-top: 15px;
}

.key-visual-title ul li a {
    display: block;
    background: linear-gradient(#f39816, #ff8400);
    box-shadow: 0 0 7px rgba(255, 255, 255, 0.3) inset;
    border: 1px solid rgba(24, 127, 196, 0.5);
    padding: 15px;
    border-radius: 7px;
    color: #5d360f;
    font-weight: bold;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    margin-top: 30px;
    font-size: 0.9em;
    text-shadow: none;
}

.key-selected.key-visual {
    position: relative;
    height: 100px;
    min-height: 100px;
}

.key-selected .key-cover {
    height: 180px;
    min-height: 180px;
}

.key-selected .key-visual-title {
    width: 100%;
    padding-top: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.key-selected .key-visual-title h2 {
    padding-bottom: 0;
    text-align: center;
}

.is_sp_hidden {
    display: none;
}

/*---------- marunage_key ------------*/
.marunage-wrap .key-visual {
    position: relative;
    height: auto;
}

.marunage-wrap .key-cover {
    height: auto;
}

.marunage-wrap .key-cover_inr {
    width: 100%;
    height: auto;
    overflow: hidden;
    /* padding-bottom: 330px; */
}

.marunage-wrap .key-visual-title h2 {
    font-size: 5.5vw;
    line-height: 120%;
    letter-spacing: .04em;
    text-align: center;
}

.marunage-wrap .key-visual-title h2 span {
    display: inline-block;
    margin-bottom: 10px;
    font-size: 0.6em;
    line-height: 120%;
}

.marunage-wrap .key-visual-title h2 br {
    display: block;
}

.marunage-wrap .key-visual-title p {
    text-align: center;
}

.marunage-wrap .key-visual-title figure {
    width: 100%;
}

.marunage-wrap .key-visual-title figure img {
    max-width: 380px;
}

.marunage-wrap .key-visual-title {
    padding-top: 20px;
}

.marunage-wrap .key-cover {
    position: relative;
    background-image: url(/service/mikata/images/key-visual/key_product_tb.jpg);
    background-size:cover;
}

.marunage-wrap .key-cover_inr::before {
    left: -4%;
    bottom:-66px;
    background-size: 86%;
    background-repeat: no-repeat;
}

.marunage-wrap .key-cover_inr::after {

    right: -14%;
    bottom:-70px;
    background-image: url(/service/mikata/images/key-visual/marunage_key_bgRight.png);
    background-size: 86%;
    background-repeat: no-repeat;
}

.orange-contact_btn {
    font-size: 18px;
    padding:22px 40px 18px ;
}

}

@media screen and (max-width:  600px) {

    .marunage-wrap .key-visual-title h2 {
        font-size: 7.5vw;
        line-height: 120%;
    }
    .marunage-wrap .key-visual-title .h1 {
        font-size: 7.5vw;
        line-height: 120%;
    }

    .marunage-wrap .key-visual-title {
        padding-top: 40px;
    }

    .marunage-wrap .key-cover_inr {
        padding-bottom: 330px;
    }
    .marunage-wrap .key-visual-title figure img {
        max-width: 240px;
        margin: 10px 0 40px;
    }

    .marunage-wrap .key-cover_inr::before {
        left: 6%;
        bottom:-114px;
        background-size: 76%;
        transform: scale(-1, 1);
    }

    .marunage-wrap .key-cover_inr::after {
        right: 0%;
        bottom:-140px;
        background-size: 72%;
        background-repeat: no-repeat;
    }

    .marunage-wrap .key-visual-title p br {
        display: none;
    }

}

@media screen and (max-width:  414px) {

    .marunage-wrap .key-cover {
        position: relative;
        background-image: url(/service/mikata/images/key-visual/key_product_sp.jpg);
    }
    .marunage-wrap .key-cover_inr {
        padding-bottom: 290px;
    }

    .marunage-wrap .key-visual-title figure img {
        margin: 0 0 30px;
    }

    .marunage-wrap .key-cover_inr::before {
        left: -12%;
        bottom:-162px;
        background-size: 66%;
    }

    .marunage-wrap .key-cover_inr::after {
        right: -19%;
        bottom:-185px;
        background-size: 63%;
        background-repeat: no-repeat;
    }

}

@media screen and (max-width:  375px) {

    .marunage-wrap .key-cover_inr {
        padding-bottom: 240px;
    }

    .marunage-wrap .key-visual-title figure img {
        margin: 0 0 30px;
    }

    .marunage-wrap .key-cover_inr::before {
        left: -18%;
        bottom:-200px;
        background-size: 58%;
    }

    .marunage-wrap .key-cover_inr::after {
        right: -22%;
        bottom:-220px;
        background-size: 56%;
        background-repeat: no-repeat;
    }

}

@media screen and (max-width:  320px) {

    .marunage-wrap .key-cover_inr {
        padding-bottom: 200px;
    }

    .marunage-wrap .key-visual-title figure img {
        max-width: 200px;
        margin: 0 0 40px;
    }

    .marunage-wrap .key-cover_inr::before {
        left: -28%;
        bottom:-234px;
        background-size: 51%;
    }

    .marunage-wrap .key-cover_inr::after {
        right: -38%;
        bottom:-260px;
        background-size: 48%;
        background-repeat: no-repeat;
    }

}

@media screen and (max-width: 640px) {
    .point_area .kv-btn-wrap .kv-btn-inr a {
      margin: 0 auto;
    }
  }
  
  .point_area .kv-btn-wrap .kv-btn-inr a span {
    line-height: 1.3;
  }
  
  .point_area .kv-btn-wrap .kv-btn-inr a span .min {
    padding-left: 35px;
    color: #fff;
    font-size: 12px;
  }
  
  .point-area-cta {
    width: 100%;
    max-width: 830px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .point-area-cta2 {
    width: 100%;
    max-width: 830px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .point-area-btn-inr {
    width: 31%;
  }
  
  .point-area-link {
    position: relative;
    display: flex;
    justify-content: center;
    max-width: 300px;
    margin: 0 auto;
    padding: 15px 10px;
    text-align: center;
    border-radius: 5px;
    overflow: hidden;
    -webkit-box-shadow: 0 0 6px rgba(0,0,0,0.2);
    box-shadow: 0 0 6px rgba(0,0,0,0.2);
    -webkit-transition: .3s;
    transition: .3s;
  }
  
  .point-area-download {
    background-color: #E16C64;
  }
  
  .point-area-price {
    background-color: #f7a42d;
  }
  
  .point-area-other {
    background-color: #217FC4;
  }
  
  .point-area-link::after {
    content: "";
    display: block;
    width: 10%;
    height: 120%;
    position: absolute;
    top: 0;
    right: -10%;
    z-index: 0;
    transform: skewX(-45deg);
    -webkit-transition: .3s;
    transition: .3s;
  }
  
  .point-area-download::after {
    background-color: #d2663d;
  }
  
  .point-area-price::after {
    background-color: #c48529;
  }
  
  .point-area-other::after {
    background-color: #30638B;
  }
  
  .point-area-link span {
    color: #ffffff;
    font-size: 18px;
    z-index: 1;
    font-weight: bold;
  }
  
  .point-area-link:hover::after {
    width: 115%;
    transition: .3s;
  }
  
  .point-area-download img {
    width: 20px;
    height: 20px;
    margin-right: 8px;
    z-index: 1;
  }
  
  @media screen and (max-width: 768px){
  
    .point-area-cta {
      display: block;
    }
    .point-area-cta2 {
      display: block;
    }
  
    .point-area-btn-inr {
      width: 100%;
    }
  
    .point-area-download {
      margin-bottom: 10px;
    }
  
    .point-area-price {
      margin-bottom: 10px;
    }
  }
  
  @media screen and (max-width: 500px){
    .point-area-cta {
      margin-top: 20px;
    }
    .point-area-cta2 {
      margin-top: 20px;
    }
    .point-area-link span {
      font-size: 15px;
    }
  }
  
  .key-cover {
    -webkit-filter: none;
  }
  .more_link {
    display: block;
    background-color: #EEB14C;
    color: #ffffff;
    max-width: 400px;
    margin-top: 25px;
    margin-left: auto;
    padding: 12px 20px;
    letter-spacing: 1px;
    border-radius: 5px;
    box-sizing: border-box;
    text-align: center;
    border: 2px solid #EEB14C;
    transition: .4s all;
  }
  
  @media screen and (max-width: 768px){
  .container-title h2 {
      padding-bottom: 20px;
      text-align: center;
  }
  }

.more_link {
    display: block;
    background-color: #EEB14C;
    color: #ffffff;
    max-width: 400px;
    margin-top: 25px;
    margin-left: auto;
    padding: 12px 20px;
    letter-spacing: 1px;
    border-radius: 5px;
    box-sizing: border-box;
    text-align: center;
    border: 2px solid #EEB14C;
    transition: .4s all;
}

.point_area {
    text-align: center;
    background-color: #e5f0fa;
  }
  
  .point_area .inner {
    padding: 50px 0 40px;
    max-width: 980px;
    width: 100%;
    margin: auto;
    position: relative;
  }
  
  @media screen and (max-width: 640px) {
    .point_area .inner {
      padding: 5.33333vw 0;
    }
  }
  
  .point_area .inner::before {
    content: "";
    position: absolute;
    left: -40px;
    bottom: 0;
    width: 244px;
    height: 290px;
    background: url(/service/mikata/images/product/img_koizumi.png) center/cover no-repeat;
  }
  
  @media screen and (max-width: 640px) {
    .point_area .inner::before {
      display: none;
    }
  }
  
  .point_area .inner .point_box {
    padding-left: 170px;
  }
  
  @media screen and (max-width: 640px) {
    .point_area .inner .point_box {
      padding-left: 0;
    }
  }
  
  .point_area .point_txt,
  .point_area h2,
  .point_area h3 {
    color: #2f6087;
    font-size: 26px;
    line-height: 1.3;
    margin-bottom: 20px;
  }
  .point_area .point_txt,
  .point_area .h2,
  .point_area .h3 {
    color: #2f6087;
    font-size: 26px;
    line-height: 1.3;
    margin-bottom: 20px;
    font-weight: bold;
  }
  
  .point_area .point_txt {
      font-weight: bold;
  }
  
  @media screen and (max-width: 640px) {
    .point_area .point_txt,
    .point_area h2,
    .point_area h3 {
      margin-bottom: 2.66667vw;
      font-size: 4.26667vw;
    }
    .point_area .point_txt,
    .point_area .h2,
    .point_area .h3 {
      margin-bottom: 2.66667vw;
      font-size: 4.26667vw;
      font-weight: bold;
    }
  }
  
  .point_area .point_txt span,
  .point_area h2 span,
  .point_area h3 span {
    font-size: 26px;
    color: #2f6087;
  }
  .point_area .point_txt span,
  .point_area .h2 span,
  .point_area .h3 span {
    font-size: 26px;
    color: #2f6087;
    font-weight: bold;
  }
  
  @media screen and (max-width: 640px) {
    .point_area .point_txt span,
    .point_area h2 span,
    .point_area h3 span {
      font-size: 4.26667vw;
    }
    .point_area .point_txt span,
    .point_area .h2 span,
    .point_area .h3 span {
      font-size: 4.26667vw;
    }
  }
  
  .point_area .point_txt span.strong,
  .point_area h2 span.strong,
  .point_area h3 span.strong {
    font-size: 130%;
  }
  .point_area .point_txt span.strong,
  .point_area .h2 span.strong,
  .point_area .h3 span.strong {
    font-size: 130%;
  }
  
  .point_area .point_txt span.strong_mid,
  .point_area h2 span.strong_mid,
  .point_area h3 span.strong_mid {
    font-size: 120%;
  }
  .point_area .point_txt span.strong_mid,
  .point_area .h2 span.strong_mid,
  .point_area .h3 span.strong_mid {
    font-size: 120%;
  }
  
  .point_area .point_txt span.txt_bdr,
  .point_area h2 span.txt_bdr,
  .point_area h3 span.txt_bdr {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, transparent), color-stop(50%, #fffc9f));
    background: -webkit-linear-gradient(transparent 50%, #fffc9f 50%);
    background: -o-linear-gradient(transparent 50%, #fffc9f 50%);
    background: linear-gradient(transparent 50%, #fffc9f 50%);
  }
  .point_area .point_txt span.txt_bdr,
  .point_area .h2 span.txt_bdr,
  .point_area .h3 span.txt_bdr {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, transparent), color-stop(50%, #fffc9f));
    background: -webkit-linear-gradient(transparent 50%, #fffc9f 50%);
    background: -o-linear-gradient(transparent 50%, #fffc9f 50%);
    background: linear-gradient(transparent 50%, #fffc9f 50%);
  }
  
  .point_area .txt {
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 20px;
  }
  
  @media screen and (max-width: 640px) {
    .point_area .txt {
      font-size: 3.2vw;
      margin-bottom: 4vw;
    }
  }
  
  .point_area .kv-btn-wrap {
    max-width: 646px;
    margin: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
  
  @media screen and (max-width: 640px) {
    .point_area .kv-btn-wrap {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
    }
  }
  
  .point_area .kv-btn-wrap .kv-btn {
    margin-top: 0;
  }
  
  @media screen and (max-width: 640px) {
    .point_area .kv-btn-wrap .kv-btn + .kv-btn {
      margin-top: 4vw;
    }
  }
  
  .point_area .kv-btn-wrap .kv-btn-inr a {
    max-width: 313px;
    width: 100%;
    height: 60px;
    margin: 0;
    padding: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    line-height: 1.4;
  }
  
  @media screen and (max-width: 640px) {
    .point_area .kv-btn-wrap .kv-btn-inr a {
      margin: 0 auto;
    }
  }
  
  .point_area .kv-btn-wrap .kv-btn-inr a span {
    line-height: 1.3;
  }
  
  .point_area .kv-btn-wrap .kv-btn-inr a span .min {
    padding-left: 35px;
    color: #fff;
    font-size: 12px;
  }
  .customer_inner .first-view-title h3 {
    font-size: 2.1em;
    font-weight: 200;
    line-height: 1.45em;
    color: #5E6162;
    margin-bottom: 5px;
}
@media screen and (max-width: 768px){
.customer_inner .first-view-title h3 {
    font-size: 120%;
    font-weight: 200;
    line-height: 1.45em;
    color: #5E6162;
    margin-bottom: 5px;
}
}


/* ============================================================
フローティングボタン　改_20240802
============================================================ */
.flowting_add2{
	display: none;
}
.flowting-btn_yoko1 {
	display: none;
}

.flowting-btn_yoko1 a{
    cursor: pointer;
	color: #FFF;
}

@media screen and (max-width: 480px) {
	.flowting_add2 {
		display: grid;
		grid-auto-columns: 1fr;
		grid-auto-flow: column;
		gap: 1rem;
		width: fit-content;
	}
	.flowting-btn_yoko1 {
		display: block;
        position: fixed;
        bottom: 0px;
        left: 8px;
        color: #FFF;
        font-weight: bold;
        letter-spacing: .1em;
        text-indent: .1em;
        border-radius: 10px;
        padding: 8px 5px;
        z-index: 9999;
        transition: .3s;
        width: calc(100% / 2.1);
        box-sizing: border-box;
        margin: 10px 0;
        background-color: #f7a42d;
        border: solid 2px #f7a42d;
	}

	.flowting-btn_yoko1 span {
		padding: 3px 4px;
		margin-right: 6px;
		border-radius: 2px;
	}
	.flowting-btn_yoko1 span img {
		max-width: 12% !important;
        vertical-align: middle;
	}
}


.flowting-btn_yoko2 {
	display: none;
}

.flowting-btn_yoko2 a{
    cursor: pointer;
	color: #f7a42d;
}

@media screen and (max-width: 480px) {
	.flowting-btn_yoko2 {
		display: block;
        position: fixed;
        bottom: 0px;
        right: 8px;
        color: #FFF;
        font-weight: bold;
        letter-spacing: .1em;
        text-indent: .1em;
        border-radius: 10px;
        padding: 8px 5px;
        z-index: 9999;
        transition: .3s;
        width: calc(100% / 2.1);
        box-sizing: border-box;
        margin: 10px 0;
        background-color: #fff;
        border: solid 2px #f7a42d;
	}

	.flowting-btn_yoko2 span {
		padding: 3px 4px;
		margin-right: 6px;
		border-radius: 2px;
	}
	.flowting-btn_yoko2 span img {
		max-width: 12% !important;
        vertical-align: middle;
	}

	.flowting-btn_yoko2:hover {
		opacity: .9;
	}
	.flowting-font{
		font-size: 1.2ex;
		background:none;
		color: #FFF;
	}
	.hidden{
		position: absolute;
		opacity: 0;
	}
	button:focus{
		outline: 0;
	}
}
@media screen and (max-width: 1000px) {
    .sp_menu_global2 button {
        width: 33px;
        height: 33px;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        -ms-border-radius: 5px;
        -o-border-radius: 5px;
        display: block;
        float: right;
        color: #C4c4c4;
        border: solid 1pt;
        background-color: #FFF;
        background-image: url(/img/common/sp-menu.png);
        background-repeat: no-repeat;
        background-position: 50% 50%;
        background-position-x: 50%;
        background-position-y: 50%;
        background-size: 14px;
        margin: 0 10px;
        padding: 0;
    }
}

/* header h1 setting */
@media screen and (max-width: 1000px) {
    #global_setting #global_head ul.header_box li {
        display: table-cell;
        vertical-align: middle;
        padding-right: 2%;
        float: right;
        margin: 10px 0;
    }
}